/* Susana Ramírez · maqueta de móvil
 *
 * 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 en base.css, compartido. Aquí solo va la
 * disposición.
 *
 * Esto no es la maqueta de escritorio encogida. En un teléfono el pulgar
 * manda: se hojea en horizontal y se toca, no se recorre una rejilla con la
 * vista. De ahí las dos decisiones grandes de esta página —vídeo y fotos en
 * carriles que se deslizan— y los blancos más apretados, porque el aire que
 * en 1280 px es elegante en 390 px es solo scroll. */

/* En una columna las bandas no necesitan el respiro de 6,5rem */
.banda { padding-block: var(--space-2xl); }
.banda__titulo { font-size: var(--text-2xl); }
.env { width: min(100% - 1.75rem, 78rem); }

/* ============ Portada ============
   El recorte va primero y grande: es lo que engancha antes de leer nada.
   Sin sangrado lateral en el arco — a 320 px no hay holgura y se saldría del
   contenedor, que es scroll horizontal. */
.portada { padding-block: var(--space-lg) var(--space-2xl); }

.portada__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.portada__figura {
  position: relative;
  order: -1;
  margin: 0;
  align-self: center;
  width: 100%;
  max-width: 19rem;
}

.portada__figura::before {
  content: "";
  position: absolute;
  inset: 28% 0 0;
  background: var(--color-arena);
  border-radius:
    50% 50% var(--radius-md) var(--radius-md) /
    40% 40% var(--radius-md) var(--radius-md);
}

.portada__recorte {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.portada__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.portada__nombre {
  font-size: clamp(2.5rem, 13vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

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

.portada__frase {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-muted);
}

/* ============ Sobre mí ============ */
.sobre { display: flex; flex-direction: column; gap: var(--space-lg); }
.sobre__texto { display: flex; flex-direction: column; gap: var(--space-md); line-height: 1.62; }
.sobre__foto {
  width: 100%;
  height: auto;
  max-width: 20rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ============ Carriles ============
   Vídeo y fotos se hojean en horizontal. En vertical, diez clips y ocho fotos
   son 18 pantallas de scroll; en carril son dos gestos.

   Van a sangre rompiendo el margen de .env con su medida exacta (0,875rem),
   no con vw: con vw la barra de scroll entra en la cuenta y aparece desbordo
   horizontal. El padding devuelve la primera pieza a la línea del texto, y
   scroll-padding hace que el snap respete ese margen. */
.carril {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0.875rem;
  margin-inline: -0.875rem;
  padding-inline: 0.875rem;
  scrollbar-width: none;
}

.carril::-webkit-scrollbar { display: none; }

.carril > * {
  flex: 0 0 clamp(15rem, 74vw, 20rem);
  scroll-snap-align: start;
}

/* La pieza de vídeo es 9:16, así que en carril ocupa menos ancho que una foto:
   a 74vw se saldría de pantalla a lo alto. */
.videos.carril > .pieza { flex-basis: clamp(12rem, 58vw, 16rem); }

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

/* ============ Contacto ============
   Cada dato es una fila entera y tocable. En un teléfono tres enlaces en línea
   son blancos de 40 px pegados unos a otros; aquí cada uno es una fila con
   separador y 3,5 rem de alto, imposible fallar el dedo.

   El rótulo va encima del dato, no al lado: un correo real no cabe junto a su
   etiqueta en 390 px y partiría por donde no debe. */
.contacto__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contacto__item {
  gap: var(--space-2xs);
  min-height: 3.5rem;
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-oscuro-3);
}

.contacto__item:first-child { border-top: var(--rule-hair) solid var(--color-oscuro-3); }

.contacto__enlace { font-size: var(--text-lg); border-bottom: 0; }

/* ============ Pie ============ */
.pie__cierre { font-size: var(--text-lg); }
.pie__firma { font-size: var(--text-xl); }

/* ============ Blancos de toque ============
   El enlace de portada se quedaba en 29 px de alto y los tres de contacto en
   31. Con el pulgar el mínimo que se sostiene es 44.

   No se agrandan con padding: el subrayado de estos enlaces es un
   border-bottom y bajaría con él, separándose del texto. Se estira solo el
   área sensible con un pseudo-elemento, así que el aspecto no cambia ni un
   píxel. Los 8 px por lado caben dentro de la fila de 3,5 rem de contacto,
   de modo que dos filas vecinas no se solapan el blanco. */
.enlace,
.contacto__enlace { position: relative; }

.enlace::after,
.contacto__enlace::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: -0.5rem;
}

/* El pie separaba 6,5 rem de la última fila de contacto: en 1280 px eso es
   respiro, en 390 son doscientos píxeles de marrón vacío que hay que pasar. */
.pie { margin-top: var(--space-xl); }