:root {
  --pink: #ff4da6;
  --blue: #67BBE0;
  --cream: #EDC680;
  --texto1: #141414;
  --texto2: #36240A;
  --lightcream: #FFDEB5;
  --midcream: #FFDCBA;
}





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

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

h2 {
    color: var(--blue);
    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(--blue);   /* usa tu variable de color */
}

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

.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;
}