/* Susana Ramírez · base compartida por las dos páginas
 *
 * 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. */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.banda--oscura :focus-visible { outline-color: var(--color-focus-osc); }

.env {
  width: min(100% - 2.5rem, 78rem);
  margin-inline: auto;
}

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

/* Hueco que Susana debe rellenar. Subrayado discontinuo, nunca itálica:
   la itálica sobre display es el tell delator número uno */
.rellenar {
  color: var(--color-neutral);
  text-decoration: underline dashed var(--color-rule);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
}

.banda--oscura .rellenar {
  color: var(--color-sobre-osc-mudo);
  text-decoration-color: var(--color-oscuro-3);
}

/* ============ Bandas ============ */
.banda { padding-block: var(--space-3xl); }

.banda--oscura {
  background: var(--color-oscuro);
  color: var(--color-sobre-osc);
}

.banda--oscura .meta { color: var(--color-sobre-osc-mudo); }

/* Arena: la banda de fotografía. Rompe la tirada de vídeo-fotos-contacto en
   moka, y las fotos de fondo claro dejan de recortarse como cromos pegados.
   Contraste sobre ella: titulares 10,5:1 · .meta 4,8:1. Un enlace aquí tendría
   que ir con accent-2 (5,7:1); accent se queda en 3,9:1 y no pasa. */
.banda--arena { background: var(--color-arena); }

.banda__titulo {
  font-size: var(--text-3xl);
  margin-block: var(--space-sm) var(--space-xl);
}

.enlace {
  margin-top: var(--space-xs);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-accent);
  border-bottom: var(--rule-hair) solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.enlace:hover { color: var(--color-accent-2); border-bottom-color: var(--color-accent-2); }
.enlace:active { color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* Rótulo bajo cada clip: Susana pidió «que diga abajo de cada uno de qué es» */
.pieza { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }

.pieza__rotulo {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.25;
  margin-top: var(--space-2xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.pieza__tipo {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sobre-osc-mudo);
}

.clip {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-oscuro-2);
}

.clip__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clip__lanzar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: oklch(20% 0.03 45 / 0.12);
  cursor: pointer;
  transition: background-color var(--dur-mid) var(--ease-out);
}

.clip__lanzar[hidden] { display: none; }
.clip__lanzar:hover { background: oklch(20% 0.03 45 / 0.28); }

/* El play va en su lima, no en crema. Es el elemento con el que se interactúa,
   sale diez veces y se apoya sobre sus vídeos de cocina, que son marrones y
   cremas: el lima es lo único que corta ahí. Y es su color, el del bolso que
   aparece en dos de sus fotos. Con la punta en moka encima da 7,9:1. */
.clip__play {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-lima-alto);
  transition: transform var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
}

.clip__lanzar:hover .clip__play { background: var(--color-lima); }

.clip__play::after {
  content: "";
  width: 0.75rem;
  height: 0.85rem;
  margin-left: 0.2rem;
  background: var(--color-oscuro);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.clip__lanzar:hover .clip__play { transform: scale(1.07); }
.clip__lanzar:active .clip__play { transform: scale(0.97); }
.clip__lanzar:disabled { cursor: not-allowed; opacity: 0.55; }

/* Regla fina entre las dos bandas oscuras: si no, vídeo y fotos leen como un
   único bloque marrón de dos metros */
.banda--oscura + .banda--oscura { padding-top: var(--space-2xl); }
.banda--oscura + .banda--oscura > .env { border-top: var(--rule-hair) solid var(--color-oscuro-3); padding-top: var(--space-2xl); }

/* ============ Contacto ============ */
.contacto__lista { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); }
.contacto__item { display: flex; flex-direction: column; gap: var(--space-2xs); }

.contacto__enlace {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-decoration: none;
  color: var(--color-acento-osc);
  border-bottom: var(--rule-hair) solid var(--color-acento-osc);
  padding-bottom: 2px;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.contacto__enlace:hover { opacity: 0.75; }
.contacto__enlace:active { opacity: 0.6; }
.contacto__enlace[aria-disabled="true"] { color: var(--color-sobre-osc-mudo); border-bottom-color: var(--color-oscuro-3); pointer-events: none; }

/* ============ Ft6 · cierre de carta ============ */
.pie { padding-block: var(--space-2xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-oscuro-3); margin-top: var(--space-3xl); }
.pie__cierre { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; max-width: 32ch; }
.pie__firma { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--space-sm); }
.pie__posdata { margin-top: var(--space-lg); font-size: var(--text-sm); max-width: 50ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .clip__lanzar:hover .clip__play,
  .clip__lanzar:active .clip__play { transform: none; }
}

/* ============ Preload · el pincel ============
   Pedido de Jose sobre un boceto de Susana: un trazo de pincel que baja y el
   nombre encima. La silueta no es una linea de grosor fijo —eso parece un
   boli— sino un contorno cerrado con las puntas afiladas, generado muestreando
   una curva y variando el ancho a lo largo de ella.

   Se pinta de arriba abajo revelando el trazo con un rectangulo de recorte que
   se estira en vertical, no con stroke-dashoffset: el trazo es una silueta
   rellena, no un stroke, y asi conserva las puntas.

   A prueba de fallos, en este orden:
   - Sin JS la capa no existe: solo se muestra si el script de <head> pone la
     clase .intro en <html>. Si el script no corre, nunca aparece.
   - Si el JS muere DESPUES de ponerla, el desvanecido es una animacion CSS con
     forwards que termina igual y deja visibility:hidden, asi que la capa se
     quita sola y no bloquea la pagina.
   - No se toca el scroll del documento. Bloquearlo aqui significaria que un
     fallo de JS dejaria la pagina sin poder desplazarse, y eso es peor que
     un segundo y medio de scroll a ciegas.
   - Con prefers-reduced-motion no se muestra: lo decide el mismo script. */
.capa-intro { display: none; }

.intro .capa-intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-paper);
  animation: intro-salir 460ms var(--ease-in-out) 1620ms forwards;
}

.intro__marca { position: relative; display: grid; place-items: center; }

/* Dimensionado por altura, no por ancho: es un trazo vertical y lo que
   tiene que llenar es el alto de la pantalla, como en el boceto.

   El desplazamiento a la izquierda no es capricho: el trazo no baja recto, se
   curva, y a la altura de la equis del nombre su panza cae hacia la derecha,
   de modo que quedaba pegado a la «a» de «ana» y con aire de sobra por el lado
   de «Su». Centrar la caja no arregla eso porque lo que hay que centrar es la
   curva a esa altura, no el rectángulo que la contiene.

   El 5% es de su propio ancho, así que acompaña a cualquier tamaño. La cifra
   sale de medir sobre la captura en vivo, con la Bodoni de verdad: sobraban
   unos 20 px por la izquierda y 10 por la derecha, así que el trazo se mueve
   la mitad de esa diferencia y queda centrado en el hueco. Con 7% se volcaba
   al otro lado y quedaba pegado a la «u». */
.intro__pincel {
  display: block;
  height: min(44vh, 21rem);
  width: auto;
  transform: translateX(-5%);
}

.intro__trazo { fill: var(--color-oscuro); }

.intro__revela {
  transform-box: view-box;
  transform-origin: top;
  transform: scaleY(0);
  animation: intro-pintar 980ms var(--ease-out) forwards;
}

/* El nombre va partido en "Su" y "ana" con un hueco en medio: la segunda ese
   no se escribe, la hace el trazo al pasar por ahí. Es lo que hay dibujado en
   el boceto y lo que ata las dos piezas — sin esto son un trazo y una palabra
   superpuestos; con esto son una sola cosa.

   El hueco es de 0,78em contra un trazo que ahí mide unos 14 px: sobra
   holgura a los dos lados, así que un par de píxeles de desvío en la posición
   del pincel no lo estropean. */
.intro__nombre {
  position: absolute;
  display: flex;
  gap: 0.78em;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 11vw, 4rem);
  line-height: 1;
  color: var(--color-ink);
  opacity: 0;
  animation: intro-nombre 560ms var(--ease-out) 620ms forwards;
}

@keyframes intro-pintar { to { transform: scaleY(1); } }

@keyframes intro-nombre {
  from { opacity: 0; transform: translateY(0.45rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes intro-salir {
  to { opacity: 0; visibility: hidden; }
}