/* Susana Ramírez · maqueta de escritorio
 *
 * El sitio son DOS páginas, no una responsive: index.html para escritorio y
 * movil.html para teléfono, cada una con su propia maqueta. Para que no
 * diverjan, todo lo que es identidad —color, tipografía, botones, el
 * reproductor, contacto y pie— vive aquí, compartido. En los archivos de
 * maqueta solo va la disposición, que es lo único que de verdad cambia. */

/* ============ Portada · recorte sobre arco ============
   Susana lo pidió así el 18/08: «las fotos son solo para la galería, no de
   fondo. Sería una sola en la principal». El 19/08 mandó ese retrato ya
   recortado, con alfa, y es el que va aquí.

   Un recorte suelto flota: sin fondo no tiene nada contra lo que apoyarse y
   se lee como una figura pegada encima del papel. El arco le da suelo. Y la
   cabeza saliendo por encima del borde del arco es lo que hace que la
   composición se lea compuesta y no ensamblada. */
.portada { padding-block: var(--space-2xl) var(--space-3xl); }

.portada__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: end;
}

/* Centrado contra la figura, no alineado abajo con ella: la figura mide 611 px
   y el texto 300, así que compartir línea de base dejaba un hueco muerto
   enorme sobre el nombre. */
.portada__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  align-self: center;
}

.portada__figura {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 28rem;
}

/* El arco arranca al 28% de la figura. No es a ojo: el cuello de Susana está
   medido al 50% y los hombros abren desde el 55%, así que a 28% el borde le
   cruza por el pelo, deja la cara entera fuera y mete los hombros dentro.
   Y sobresale 1,25 rem a cada lado del recorte: a ras el jersey se salía del
   arco por la derecha y el arco dejaba de leerse como forma. */
.portada__figura::before {
  content: "";
  position: absolute;
  inset: 28% -1.25rem 0;
  background: var(--color-arena);
  border-radius:
    50% 50% var(--radius-md) var(--radius-md) /
    40% 40% var(--radius-md) var(--radius-md);
}

/* Va por encima del arco, y sin fondo propio: es un PNG con alfa. */
.portada__recorte {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.portada__nombre {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.portada__rol {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.portada__frase {
  font-size: var(--text-lg);
  line-height: 1.55;
  max-width: 40ch;
  color: var(--color-muted);
}

/* ============ Sobre mí (crema) ============ */
/* Pista fija de 22rem para la foto, no un reparto en fr: así no queda hueco
   muerto entre texto e imagen. Ojo: con `auto` la imagen a width:100% colapsa
   a 0 px por dependencia circular. */
.sobre { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-2xl); align-items: center; }
.sobre__texto { display: flex; flex-direction: column; gap: var(--space-md); font-size: var(--text-lg); line-height: 1.62; max-width: 52ch; }
/* Tope de 22rem y 3:4: sin ellos la foto medía 600 px de alto contra un párrafo de 130.
   height:auto por lo mismo que el retrato de portada. */
.sobre__foto { width: 100%; height: auto; max-width: 22rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); margin-inline-start: auto; }

/* ============ Vídeos ============ */
.videos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-md);
}

/* ============ Fotos — lookbook ============
   Las fotos son la mitad de moda de su trabajo y salían a 218 px de ancho en
   un mosaico de 4 columnas: más pequeñas que las miniaturas de vídeo. Aquí
   mandan ellas.

   Fondo arena, no moka. Tres razones: media docena del set (01, 04, 07) trae
   fondo claro propio y sobre marrón se recortaba como cromo pegado; el verde
   lima que enhebra 02 y 03 es el único color frío del conjunto y pelea con el
   moka; y vídeo-fotos-contacto eran tres bandas oscuras seguidas sin respiro.
   Contraste medido sobre arena: titulares 10,5:1, rótulo .meta 4,8:1. Ojo si
   algún día entra un enlace aquí: accent se queda en 3,9:1, hay que usar
   accent-2, que da 5,7:1. */

.fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.fotos__item {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.fotos__item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Jerarquía de lookbook: manda el retrato, y el bodegón cuadrado le hace
   contrapeso a lo ancho. 4 celdas + 2 + seis de 1 = 12 = tres filas justas,
   sin huecos que tapar.

   El orden del marcado importa y no es estético: la pieza ancha va en la
   tercera fila, acompañada de dos normales. Puesta sola en su fila se quedaba
   sin nadie que le fijara la altura, tomaba su proporción intrínseca (1:1) y
   estiraba la fila a 612 px, dejando la banda en 1770. Con dos normales al
   lado, la fila la fija el 3/4 de ellas y la ancha se estira a lo que quede. */
.fotos__item--lead  { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.fotos__item--ancha { grid-column: span 2; aspect-ratio: auto; }

/* Las dos piezas grandes sacan su imagen del flujo. Si no, son ellas las que
   dimensionan la fila con su proporción intrínseca —la cuadrada la estiraba a
   612 px— en vez de estirarse a la altura que fijan las piezas de 3/4. Fuera
   del flujo la figura aporta cero altura, se estira sola y la imagen la rellena.
   Sin numeros magicos: la rejilla cuadra a cualquier ancho. */
.fotos__item--lead img,
.fotos__item--ancha img { position: absolute; inset: 0; }

@media (max-width: 1100px) {
  .videos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}