:root {
  --verde: #95F76F;
  --verdeclaro: #CDF5BC;
  --cream: #141414;
  --texto1: #141414;
  --texto2: #36240A;
  --lightcream: #FFDEB5;
  --midcream: #FFDCBA;
  --hierba: #82B56D;
}





body {
    background: var(--verdeclaro);
    font-family: Arial, sans-serif;
    padding: 60px;
    color: var(--texto1);
}

h1 {
    color: var(--hierba);
    text-align: center;
}

h2 {
    color: var(--verde);
    text-align: center;
}

p {
    font-size: 18px;
    color: var(--texto1);
    max-width: 600px;
    margin: auto;
}

  .fila {
      display: flex;       /* hace que los hijos se coloquen en línea */
      gap: 20px;           /* separación entre la imagen y los links */
      align-items: center; /* centra verticalmente la imagen con el texto */
      max-width: 600px;
      margin: auto;
      padding: 20px;
  }
.fotomarco {
    padding: 5px;               /* espacio entre el borde y la foto */
    background: var(--texto2);     /* color del marco, usando variable */
    display: inline-block;       /* hace que el div se adapte al tamaño de la foto */
    border-radius: 0px;         /* esquinas redondeadas del marco */
}


.links a {
    display: block;       /* cada link en una línea */
    margin-bottom: 6px;   /* espacio entre links */
    color: var(--cream);   /* usa tu variable de color */
}

.links a:hover {
    color: var(--hierba);
}

.cajablanca {
    background: var(--lightcream);
    padding: 20px;
    border-radius: 20px;
    max-width: 600px;
    margin: 20px auto;
}

.cajagris {
    background: var(--midcream);
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: 20px auto;
}