/* Additions to the recovered stylesheet.
   style.css is the original site CSS, kept verbatim so it stays easy to diff
   against the old build. Everything new lives here. */

/* --- Contact form ------------------------------------------------------- */

.contact-form-wrap {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--border);
  padding-top: clamp(40px, 5vw, 64px);
}

.contact-form-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.contact-form-head .rule {
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px clamp(20px, 3vw, 36px);
}

.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.contact-form .field-full {
  grid-column: 1 / -1;
}

.contact-form label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

/* The select needs its own arrow back once appearance is stripped. */
.contact-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mid) 50%),
    linear-gradient(135deg, var(--text-mid) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: var(--border-accent);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

.contact-form .form-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.contact-form button[type='submit'] {
  border: none;
  cursor: pointer;
  font: inherit;
}

.form-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Honeypot: must stay in the DOM for Netlify, must never be seen or focused. */
.contact-form .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* --- Footer links ------------------------------------------------------- */

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.footer-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--accent);
}

/* --- Thank-you page ----------------------------------------------------- */

.thanks-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(40px, 8vw, 100px) clamp(24px, 6vw, 80px);
  gap: 28px;
}

.thanks-page img {
  height: 56px;
  width: auto;
  margin-bottom: 12px;
}

.thanks-page h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--text);
}

.thanks-page p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 460px;
}

/* --- Language switcher -------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.lang-btn {
  background: none;
  border: none;
  padding: 2px 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.3s ease;
}

.lang-btn:hover,
.lang-btn:focus-visible {
  color: var(--text);
}

.lang-btn.is-active {
  color: var(--accent);
}

.lang-sep {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.5;
}

@media (max-width: 760px) {
  .lang-switch {
    margin-left: 0;
  }
}

/* --- Portfolio: barra de filtros ---------------------------------------- */

.work-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.filter-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 16px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.filter-btn:hover,
.filter-btn:focus-visible {
  color: var(--text);
  border-color: var(--border-accent);
}

.filter-btn.is-active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* Las tarjetas de vídeo llenan el hueco igual que las imágenes. */
.work-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Una tarjeta de vídeo no se amplía, así que no debe prometer zoom. */
.work-card:has(video) {
  cursor: default;
}

@media (max-width: 640px) {
  .work-controls {
    gap: 8px 6px;
  }
  .filter-btn {
    padding: 8px 12px;
    font-size: 9px;
  }
}

/* --- Capabilities: relieve y peso tipográfico ---------------------------
   Petición explícita: bisel 3D y letra al peso de los títulos, para ganar
   velocidad de pregnancia. El relieve se queda SOLO aquí — si se extendiera
   a todo el UI dejaría de leerse como jerarquía y pasaría a ser decoración,
   que es justo lo que el resto del sitio evita. */

.service-card {
  position: relative;
  /* Luz arriba-izquierda, sombra abajo-derecha: relieve sin imágenes. */
  box-shadow:
    inset 1px 1px 0 rgba(240, 237, 230, 0.07),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.28s ease, transform 0.28s ease, background-color 0.28s ease;
}

.service-card:hover,
.service-card:focus-within {
  box-shadow:
    inset 1px 1px 0 rgba(200, 169, 110, 0.28),
    inset -1px -1px 0 rgba(0, 0, 0, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* Al pulsar, el relieve se invierte y la pieza se hunde. */
.service-card:active {
  box-shadow:
    inset -1px -1px 0 rgba(240, 237, 230, 0.06),
    inset 1px 1px 0 rgba(0, 0, 0, 0.6);
  transform: translateY(0);
}

.service-label {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: var(--text);
  text-transform: uppercase;
}

.service-card:hover .service-label {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card:hover,
  .service-card:focus-within {
    transform: none;
  }
}

/* --- Portfolio: carruseles de cartelería --------------------------------
   Las láminas se apilan y se cruzan por opacidad. Nada de desplazamiento
   horizontal: el trabajo se lee mejor si no se mueve de sitio. */

.work-slides {
  position: relative;
}

.work-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.work-slide.is-current {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .work-slide {
    transition: none;
  }
}

/* --- Viudas -------------------------------------------------------------
   Nada de una palabra sola cerrando un párrafo o un titular.
   `pretty` reequilibra las últimas líneas para evitar la viuda; `balance`
   reparte los titulares cortos en líneas de longitud pareja. Donde el
   navegador no los soporte, el texto simplemente se compone como antes. */

p,
.work-caption p,
.service-label,
figcaption {
  text-wrap: pretty;
}

h1, h2, h3, h4,
.hero-title,
.work-caption h4,
.thanks-page h1 {
  text-wrap: balance;
}

/* Solo los rótulos genuinamente cortos van sin partir: en los largos
   (.work-meta, .section-label del hero) nowrap desbordaría la tarjeta. */
.filter-btn,
.footer-link {
  text-wrap: nowrap;
}

.work-meta,
.section-label,
.form-note {
  text-wrap: pretty;
}

@supports not (text-wrap: pretty) {
  /* Sin soporte, al menos se evita partir palabras sueltas raras. */
  p { hyphens: none; }
}

/* --- Lupa de detalle -----------------------------------------------------
   Sigue al cursor sobre el vídeo de "LOOK CLOSER". Solo con puntero fino:
   con el dedo, la lupa taparía justo lo que se quiere ver. */

.reel-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 3;
  background: var(--bg);
}

.reel-frame.has-lens .reel-lens {
  opacity: 1;
}

/* Mientras se inspecciona, el cursor anuncia que aquí se amplía. */
.reel-frame {
  cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce) {
  .reel-lens { transition: none; }
}

/* --- Portfolio: cabeceras de sección -------------------------------------
   Ocupan la fila entera de la retícula de 12 columnas, así que rompen el
   grid en bloques por disciplina sin necesitar un contenedor aparte. */

.work-section-head {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
  margin: clamp(48px, 6vw, 88px) 0 clamp(4px, 1vw, 12px);
}

/* La primera cabecera no necesita separarse de la barra de filtros. */
.work-section-head:first-child {
  margin-top: 0;
}

.work-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.work-section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
}

.work-section-rule {
  height: 1px;
  background: var(--border);
}

.work-section-blurb {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 46ch;
  margin-top: 6px;
}

@media (max-width: 640px) {
  .work-section-head {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .work-section-rule { display: none; }
}

/* --- Móvil: que nada se corte -------------------------------------------
   Sin navegador aquí no puedo ver qué desborda exactamente, así que esto
   ataca las causas habituales en vez de un elemento concreto. */

/* 1. Las palabras largas sin espacios (correos, URLs) son la causa número
      uno de desbordes: parten antes que romper la caja. */
body {
  overflow-wrap: break-word;
}

.form-note,
.footer-link,
.btn-primary,
.btn-outline,
.work-meta {
  overflow-wrap: anywhere;
}

/* 2. Un hijo de grid o flex no se encoge por debajo de su contenido salvo
      que se le diga. Es lo que hace que una tarjeta empuje la fila entera. */
.work-card,
.work-caption,
.work-caption > div,
.service-card,
.contact-form .field,
.reel,
.reel-copy,
.work-section-head {
  min-width: 0;
}

/* 3. Nada puede provocar scroll horizontal en la página. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  /* El correo en el botón grande es la cadena más larga del sitio. */
  .btn-primary,
  .btn-outline {
    font-size: 13px;
    letter-spacing: 0.08em;
    padding-left: 18px;
    padding-right: 18px;
    max-width: 100%;
  }

  /* Los rótulos cortos sí pueden partir en pantalla estrecha. */
  .filter-btn,
  .footer-link {
    text-wrap: wrap;
  }

  /* Títulos de tarjeta y de sección, un punto más contenidos. */
  .work-caption h4 {
    font-size: 20px !important;
  }

  .work-section-title {
    font-size: clamp(24px, 7vw, 32px);
  }

  /* El pie del reel lleva dos textos en una fila: en móvil van apilados. */
  .reel-footnote {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* La nota del formulario y el correo visible, a su aire. */
  .form-note {
    font-size: 9px;
    line-height: 1.5;
  }
}

@media (max-width: 380px) {
  .work-caption h4 {
    font-size: 18px !important;
  }
  .filter-btn {
    padding: 7px 10px;
    letter-spacing: 0.1em;
  }
}

/* --- Piezas que no se pueden recortar -----------------------------------
   Las dos copas de la primera versión del sitio: encajan enteras dentro de
   la tarjeta en vez de llenarla recortando. */

.work-media[data-fit='contain'] {
  background: var(--bg);
}

.work-media[data-fit='contain'] img,
.work-media[data-fit='contain'] video {
  object-fit: contain;
}

/* --- Ficha técnica de las piezas físicas --------------------------------
   Material y acabado. En un objeto impreso importa: distingue una pieza
   pintada a mano de un render bonito. */

.work-spec {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Un pelo mas claro que --accent-dim. Ese token vale para filetes y
     degradados, pero aqui es texto de 10px sobre la tarjeta y se quedaba en
     4,17. Este dorado es el mas oscuro que llega a 4,5 sin salirse del tono:
     un 5% de luz, imperceptible al lado del --accent. */
  color: #92784d;
}

/* --- Sound: producción, mezcla, mastering y clases ----------------------
   Misma retícula editorial que el resto del sitio. Sin bisel: el relieve se
   queda solo en CAPABILITIES, como jerarquía y no como decoración. */

.sound-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(40px, 6vw, 100px);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}

.sound-card {
  background: var(--bg);
  padding: 30px 26px 34px;
  transition: background-color 0.35s ease;
}

.sound-card:hover {
  background: var(--surface-2);
}

.sound-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.sound-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.8vw, 28px);
  letter-spacing: 0.035em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 18px;
}

.sound-note {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-mid);
  margin-top: 12px;
}

@media (max-width: 1000px) {
  .sound-head { grid-template-columns: 1fr; align-items: start; }
  .sound-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .sound-grid { grid-template-columns: 1fr; }
}

/* --- Retrato en contacto ------------------------------------------------
   Pone cara a quien responde el formulario. En un estudio de una persona eso
   no es un adorno: es parte del argumento. */

.contact-person {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.contact-person img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  /* El retrato ya viene en blanco y negro sobre fondo oscuro, así que se
     funde con la página. No lleva filtro: el anterior tenía fondo blanco y
     había que bajarle el brillo para que no compitiera con el trabajo. */
  border: 1px solid var(--border-accent);
}

.contact-person-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 10px;
  line-height: 1;
}

.contact-person-note {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  margin-top: 6px;
}

@media (max-width: 560px) {
  .contact-person { gap: 16px; }
  .contact-person img { width: 76px; height: 76px; }
}

/* ========================================================================
   MÓVIL: pensado para el dedo, no como escritorio encogido
   ======================================================================== */

/* --- 1. Objetivos táctiles ------------------------------------------------
   Un enlace de 11px tiene un área de toque de 11px. El mínimo cómodo son
   44px. Se amplía el área sin agrandar la letra: el texto se queda igual,
   lo que crece es la zona que responde al dedo. */

@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .lang-btn,
  .footer-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* El área se extiende por fuera sin mover el diseño. */
  .nav-link::after,
  .lang-btn::after,
  .footer-link::after {
    content: '';
    position: absolute;
    inset: -12px -10px;
  }

  .filter-btn {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .reel-btn,
  .contact-form button[type='submit'],
  .btn-primary,
  .btn-outline {
    min-height: 48px;
  }

  /* Sin cursor no hay hover: los estados que solo aparecían al pasar por
     encima quedaban invisibles en móvil. */
  .work-card .work-meta,
  .reel-controls {
    opacity: 1;
  }
}

/* --- 2. La altura real de la pantalla en un móvil -------------------------
   100vh no descuenta la barra del navegador: el hero quedaba cortado y daba
   un salto al hacer scroll. `svh` mide la ventana pequeña, que es la que se
   ve de entrada. */

@supports (height: 100svh) {
  section[style*='min-height:100vh'] {
    min-height: 100svh;
  }
  .lightbox {
    height: 100svh;
  }
}

/* --- 3. Barra de filtros ---------------------------------------------------
   Diez filtros a 360px se apilaban en cuatro filas y empujaban el trabajo
   fuera de la pantalla. En móvil pasan a una sola fila deslizable. */

@media (max-width: 640px) {
  .work-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Sangrado a los bordes: se ve que hay más contenido al lado. */
    margin-left: calc(clamp(24px, 6vw, 80px) * -1);
    margin-right: calc(clamp(24px, 6vw, 80px) * -1);
    padding-left: clamp(24px, 6vw, 80px);
    padding-right: clamp(24px, 6vw, 80px);
  }

  .work-controls::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* --- 4. Navegación en pantallas muy estrechas ------------------------------ */

@media (max-width: 420px) {
  .nav-links {
    gap: 14px !important;
  }
  .nav-link {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

/* --- 5. Lightbox en móvil --------------------------------------------------
   El botón de cerrar quedaba en una esquina difícil de alcanzar con el
   pulgar, y la imagen se pegaba a los bordes. */

@media (max-width: 640px) {
  .lightbox figure {
    padding: 0 16px;
  }
  .lightbox-close {
    top: auto;
    bottom: 24px;
    right: 50%;
    transform: translateX(50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-accent);
    border-radius: 50%;
  }
  .lightbox figcaption {
    padding-bottom: 88px;
  }
}

/* --- 6. Zona segura en móviles con notch ----------------------------------
   En un iPhone reciente, lo fijo arriba se mete bajo el notch y lo fijo abajo
   bajo la barra de inicio. `env(safe-area-inset-*)` vale 0 en cualquier otro
   dispositivo, así que esto no afecta al resto. */

.site-nav {
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

@media (max-width: 640px) {
  .lightbox-close {
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }
}

footer {
  padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
}

/* --- 7. Detalles de comportamiento táctil ---------------------------------- */

/* El destello azul de Android/iOS al tocar rompe el tono del sitio. */
a, button, .work-card, .service-card, .sound-card {
  -webkit-tap-highlight-color: rgba(200, 169, 110, 0.15);
}

/* Sin esto, un arrastre horizontal dentro de la barra de filtros arrastra
   también la página. */
.work-controls {
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

/* El lightbox no debe permitir que el fondo siga desplazándose. */
.lightbox {
  overscroll-behavior: contain;
}

/* --- Lista para buscadores ------------------------------------------------
   Vive dentro de <noscript>, así que un navegador con JavaScript no la pinta.
   Estos estilos son para el caso raro de alguien navegando sin JS: que al
   menos se lea, en vez de aparecer como una pila de imágenes a tamaño real. */

.seo-work ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.seo-work img { width: 100%; height: auto; border: 1px solid var(--border); }
.seo-work h3 { font-family: var(--font-display); font-size: 28px; color: var(--accent); margin: 32px 0 16px; }
.seo-work h4 { font-family: var(--font-display); font-size: 20px; color: var(--text); margin-top: 12px; }
.seo-work p { font-family: var(--font-body); color: var(--text-mid); font-size: 15px; }

/* --- The Studio ----------------------------------------------------------
   Sustituye a los tres pilares genéricos que había. Aquí van los hechos que
   deciden una contratación: quién es, qué acredita y para quién trabaja. */

.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.about-lead {
  font-family: var(--font-body);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--text);
  max-width: 46ch;
}

.about-body {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 52ch;
  margin-top: 22px;
}

.about-facts {
  border: 1px solid var(--border);
  padding: clamp(28px, 3.5vw, 44px);
}

.about-fact {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.about-fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about-fact:first-child {
  padding-top: 0;
}

.about-fact-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.about-fact-v {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

@media (max-width: 1000px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* --- Caso de estudio -----------------------------------------------------
   Se abre desde una tarjeta con historia. Texto a la izquierda, piezas a la
   derecha: el encargo se lee mientras se ven los resultados. */

.case {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(6, 6, 6, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: 0.3s fadeIn;
  cursor: zoom-out;
}

.case-inner {
  cursor: default;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 72px) clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.case-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 18px 0 12px;
  text-transform: uppercase;
}

.case-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.7;
}

.case-block { margin-top: 32px; }

.case-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.case-p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 54ch;
}

.case-gallery {
  display: grid;
  gap: 14px;
  position: sticky;
  top: clamp(64px, 9vw, 120px);
}

.case-gallery img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  display: block;
}

.case-close {
  position: fixed;
  top: clamp(20px, 3vw, 36px);
  right: clamp(20px, 3vw, 36px);
  z-index: 220;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-accent);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  transition: color 0.25s, border-color 0.25s;
}

.case-close:hover { color: var(--accent); border-color: var(--accent); }

/* La tarjeta anuncia que hay caso detrás. */
.work-case-hint {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 900px) {
  .case-inner { grid-template-columns: 1fr; }
  .case-gallery { position: static; }
}

@media (max-width: 640px) {
  .case-close {
    top: auto;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
    right: 50%;
    transform: translateX(50%);
    border-radius: 50%;
    width: 52px;
    height: 52px;
  }
  .case-inner { padding-bottom: 100px; }
}

/* --- Where to start ------------------------------------------------------
   Traduce las disciplinas a situaciones. El resto del sitio dice qué sabe
   hacer; esto dice qué problema resuelve, con las palabras que el cliente ya
   tiene en la cabeza. */

.needs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
}

.need {
  background: var(--bg);
  padding: clamp(28px, 3.5vw, 46px);
  transition: background-color 0.35s ease;
}

.need:hover {
  background: var(--surface);
}

/* El numero y el precio comparten linea: asi las cuatro cifras se leen en
   vertical de un vistazo, sin anadir una fila mas a la tarjeta. El precio de
   entrada filtra; el techo se habla en el correo, no aqui. */

.need-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.need-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.need-price {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.need-q {
  font-family: var(--font-body);
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--text);
  margin-top: 16px;
  max-width: 22ch;
}

.need-a {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
  margin-top: 16px;
  max-width: 48ch;
}

@media (max-width: 760px) {
  .needs { grid-template-columns: 1fr; }
}

/* --- Contacto directo y boletin ------------------------------------------
   El WhatsApp va en la misma lista que Disponibilidad y Especialidad, con la
   pinta de las demas filas: no es un boton mas, es otro dato de contacto.
   El boletin ocupa su propia franja al final del pie. */

.contact-direct {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.contact-direct:hover,
.contact-direct:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.nl-form {
  display: block;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  max-width: 420px;
}

/* Mismo truco que en el formulario de contacto: el senuelo tiene que seguir
   en el DOM, pero no puede verse ni recibir el foco. */
.nl-form .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nl-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.nl-row {
  display: flex;
  gap: 0;
}

.nl-row input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 0;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.nl-row input::placeholder { color: var(--text-dim); opacity: 1; }

.nl-row input:hover { border-color: var(--border-accent); }

.nl-row input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

.nl-btn {
  flex: 0 0 auto;
  cursor: pointer;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}

.nl-btn:hover,
.nl-btn:focus-visible {
  background: transparent;
  color: var(--accent);
}

.nl-note {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* En movil el boton baja: 44px de alto minimo para el dedo, y el correo
   entero visible mientras se escribe. */
@media (max-width: 520px) {
  .nl-form { max-width: none; }
  .nl-row { flex-direction: column; gap: 10px; }
  .nl-row input { border-right: 1px solid var(--border); }
  .nl-btn { padding: 14px 20px; }
}

/* --- Composicion de los bloques de descripcion ----------------------------
   Los parrafos largos se quedaban cortos dentro de su columna y dejaban un
   hueco muerto a la derecha. Ahora el bloque ocupa la columna entera,
   centrado, y va justificado para que las dos orillas queden rectas. La
   particion automatica es obligatoria: justificar sin partir palabras abre
   rios de espacio en Cormorant, que es una tipografia estrecha.
   El idioma lo pone i18n en <html lang>, asi que parte bien en los dos. */

.case-p,
.about-body {
  max-width: min(66ch, 100%);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* En el caso de estudio la columna es solo para el texto, asi que centrarlo
   funciona. En "El estudio" no: ahi el parrafo comparte columna con la
   entradilla, que va a la izquierda, y centrarlo lo dejaba metido hacia
   dentro — parecia una sangria puesta sin querer, no una decision. */
.case-p {
  margin-inline: auto;
}

/* Los blurbs de seccion y las respuestas de "necesitas" son de dos o tres
   lineas: justificarlos solo separaria palabras. Se ensanchan y ya. */
.work-section-blurb { max-width: 56ch; }
.need-a { max-width: 58ch; }

/* En columna estrecha la justificacion deja huecos enormes entre palabras:
   por debajo de 640px se vuelve a bandera. */
@media (max-width: 640px) {
  .case-p,
  .about-body {
    text-align: left;
    max-width: none;
  }
}

/* --- WhatsApp directo -----------------------------------------------------
   El correo sigue siendo la via principal; WhatsApp va al lado, en secundario,
   para quien prefiere escribir desde el movil. El icono es la marca de
   WhatsApp en el color del texto: sin verde corporativo, que romperia la
   paleta del sitio. */

.contact-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.ico-wa {
  flex: none;
  vertical-align: -2px;
  margin-right: 9px;
}

/* En la fila "Direct" el icono acompana al numero, alineado con el texto. */
.contact-direct {
  display: inline-flex;
  align-items: center;
}

/* El boton lleva el icono delante, asi que el orden es icono + texto y la
   flecha del btn-outline sobra. */
.btn-wa .ico-wa { margin-right: 10px; }

.btn-wa:hover .ico-wa { color: var(--accent); }

@media (max-width: 520px) {
  .contact-ctas { flex-direction: column; align-items: stretch; }
  .contact-ctas > a { justify-content: center; }
}

/* --- Donde escuchar -------------------------------------------------------
   El sello y el proyecto propio se enlazan aqui, no en el pie: quien llega a
   la seccion Sound es quien quiere oirlo. Cada enlace lleva debajo un rotulo
   que dice que es, para no confundir el artista con los sellos. */

.listen {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border);
}

.listen-rows {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

/* Cada fila es "de quien" + "donde". Agrupar asi evita el problema que tenia
   antes: cinco enlaces seguidos con la palabra DENSO repetida tres veces, que
   de un vistazo no se distinguian. */
.listen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(20px, 3vw, 40px);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.listen-who {
  flex: 0 0 auto;
  min-width: 8ch;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.listen-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 3vw, 40px);
  min-width: 0;
}

.listen-link {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 25px);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s;
}

.listen-link:hover { color: var(--accent); }


/* --- Caso en scroll (estilo Behance) --------------------------------------
   Cuando un proyecto tiene una presentacion entera detras, la reja de dos
   columnas se queda corta: la galeria lateral encoge las imagenes justo en el
   trabajo que mas se quiere ver. Con `caseLayout: 'scroll'` el caso pasa a una
   sola columna — texto arriba, piezas debajo a todo lo ancho — y se recorre
   bajando. Las imagenes no se recortan: cada una se ve entera, en su
   proporcion, una detras de otra. */

.case-inner.case-scroll {
  grid-template-columns: 1fr;
  max-width: 1040px;
  gap: clamp(32px, 4vw, 56px);
}

.case-scroll .case-gallery {
  position: static;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 26px);
}

.case-scroll .case-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* El texto de cabecera se queda en una medida legible aunque la columna sea
   ancha: una linea de 100 caracteres no se lee, se escanea. */
.case-scroll .case-text {
  max-width: 74ch;
  margin-inline: auto;
}

/* Los clips del caso se comportan como una lamina mas: mismo ancho, misma
   linea de 1px, y sin fondo propio para que un video sobre negro no dibuje
   una caja donde no la hay. */
.case-gallery .case-clip {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* --- El pie de la tarjeta no puede aplastar el titulo --------------------
   `.work-meta` venia con `flex-shrink: 0`. En una fila flex eso significa que
   se queda su ancho de contenido entero antes que nadie: en una tarjeta de
   300px, un metadato como "Brand Identity / Restaurant / A Coruña" ocupaba
   los 293px y dejaba la columna del titulo en CERO. El titulo entonces se
   componia una letra por linea y la tarjeta crecia hasta 3.200px de alto.

   Medido en navegador: a 1280px se rompian las 23 tarjetas, a 1440px 22, a
   1600px 19, a 1920px 8. Por encima de 2200px no se veia, que es justo el
   monitor donde se revisaba.

   La solucion es dejar que la linea se parta: el titulo manda y se queda el
   ancho que necesita, y el metadato baja a su propia linea cuando no cabe al
   lado. Sin punto de ruptura fijo, porque lo que decide no es el ancho de la
   ventana sino cuanto texto lleve cada ficha. */

.work-caption {
  flex-wrap: wrap;
}

.work-caption > div {
  flex: 1 1 60%;
  min-width: 0;
}

.work-meta {
  flex: 0 1 auto;
  min-width: 0;
}

/* Cuando baja sola, ocupa la linea entera y se lee de izquierda a derecha
   como el resto del pie, no descolgada contra el borde. */
.work-caption > div:first-child:not(:only-child) + .work-meta:last-child {
  flex-basis: auto;
}

/* --- El showreel del hero en movil ---------------------------------------
   El vídeo es 16:9 y el hero de un móvil es casi 9:19. Con `object-fit:
   cover` se recortaba a una franja vertical estrecha: se veía un trozo de
   fondo negro con un borde de la pieza, y encima con el brillo bajado a la
   mitad. El resultado era que en el móvil parecía que no había vídeo.

   Se enseña entero. Como el showreel está rodado sobre negro y el fondo del
   sitio es negro, `contain` no dibuja bandas: simplemente la pieza aparece
   completa en la parte alta y el titular queda sobre negro limpio debajo.
   Y se le devuelve el brillo, que ya no compite con el texto. */

@media (max-width: 640px) {
  /* Enseñarlo entero dejó el otro problema: 16:9 metido en el ancho de un
     móvil son 220px de alto en una pantalla de 840 — una postal perdida en
     medio del negro. Ni recorte a franja vertical ni postal: la pieza se
     amplía a vez y media el ancho de la pantalla, conserva su 16:9 y solo
     pierde un octavo por cada lado. Se ve entera de arriba abajo, al doble
     de tamaño, ocupando el hueco entre el menú y el titular. */
  .showreel-video {
    width: 150%;
    /* El reset de la hoja original trae video { max-width: 100% }: sin
       desactivarlo el 150% se quedaba clavado en el ancho de la pantalla y
       el vídeo seguía igual de pequeño. */
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    /* Debajo del menu, que en movil ocupa dos filas: en una pantalla corta el
       15% de la altura caia justo sobre la segunda fila de enlaces. */
    top: max(15vh, 128px);
    left: -25%;
    right: auto;
    bottom: auto;
  }

  /* El velo estaba calculado para un vídeo que ocupaba toda la pantalla.
     Sobre la banda del showreel —del 15% al 55% de la altura— se abre para
     no tapar justo la pieza, y cierra a negro antes del titular. */
  .showreel-scrim {
    background:
      linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.12) 22%,
                      rgba(8,8,8,0.2) 45%, rgba(8,8,8,0.72) 68%,
                      var(--bg) 92%);
  }
}

/* --- La navegacion en tablet --------------------------------------------
   El menu se apilaba solo por debajo de 760px. Medido en navegador: entre
   768 y 1080 los enlaces no caben en una linea y se partian en dos, con el
   logo centrado en medio — en un iPad, tanto vertical como apaisado, el
   encabezado se leia como un amasijo.

   Se sube el punto de ruptura hasta 1080: por debajo de eso, el mismo
   tratamiento centrado que ya usaba el movil. A partir de ahi los enlaces
   caben de sobra en su fila. */

@media (max-width: 1080px) {
  .site-nav {
    justify-items: center;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px 20px !important;
  }

  .site-nav > span[aria-hidden="true"] {
    display: none;
  }

  .nav-links {
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap;
  }
}

/* Con la navegacion apilada el encabezado ocupa mas alto, y el rotulo del
   hero — que va a 12vw del borde — se le metia debajo. Se baja lo justo en
   ese tramo. El `!important` es porque la posicion viene en el propio
   atributo style del elemento. */
@media (max-width: 1080px) {
  .hero-label {
    top: 148px !important;
  }
}

@media (max-width: 760px) {
  .hero-label {
    top: 178px !important;
  }
}

/* --- Contraste de la letra menuda -----------------------------------------
   `--text-dim` es el color de todo lo pequeño del sitio: los pies de ficha,
   los filtros, las notas al pie, los rotulos de 9 y 11px. Medido en
   navegador, el #6b6b6b original daba 3,76 sobre --bg y 3,57 sobre
   --surface. El minimo para texto pequeño es 4,5, asi que unos cien
   elementos se quedaban por debajo.

   #7c7c7c es el gris mas oscuro que pasa en los dos fondos (4,56 sobre
   --surface, 4,80 sobre --bg): diecisiete niveles mas claro, lo justo para
   cumplir sin aclarar la jerarquia mas de lo necesario.

   Se redefine aqui y no en style.css, que es el CSS original y no se toca. */

:root {
  --text-dim: #7c7c7c;
}

/* --- Las rejillas de dos columnas en pantalla estrecha --------------------
   Capabilities y Contacto se montan como "texto | tarjetas" con una rejilla
   de dos columnas escrita en el propio atributo style. En un movil de 390px
   eso deja cada mitad en unos 170px, y dentro de Capabilities hay OTRA
   rejilla de dos columnas: cada tarjeta acababa midiendo unos 70px y sus
   rotulos se componian a tres caracteres por linea — "ART DIR ECT ION".
   La seccion entera era ilegible.

   Por debajo de 900px se apilan: el texto arriba, las tarjetas debajo a todo
   el ancho. El `!important` es obligado porque la rejilla viene en el style
   del elemento. */

@media (max-width: 900px) {
  #services > div[style*="grid-template-columns:1fr 1fr"],
  #contact > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: clamp(32px, 6vw, 56px) !important;
  }
}

/* Ya con el ancho entero, las diez capacidades caben de dos en dos. Por
   debajo de 420px ni eso: una debajo de otra, que es como se leen. */
@media (max-width: 420px) {
  #services div[style*="gap:1px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Con dos por fila, estirar las tarjetas a la altura de la mas alta deja un
   hueco muerto enorme cuando en la misma fila conviven un cartel vertical y
   una foto apaisada. Cada una a su altura natural: la fila queda desigual
   por abajo, que en una rejilla de trabajo se lee como ritmo, no como error. */
.work-grid {
  align-items: start;
}

/* La tira de filtros se desplaza a lo ancho en movil, pero el ultimo boton
   visible se cortaba a hueso contra el borde: parece un fallo de maquetacion,
   no una invitacion a deslizar. Un desvanecido en el borde derecho lo dice sin
   añadir ningun elemento. Medido: el contenido ocupa 855px en una pantalla de
   390, asi que siempre hay algo mas a la derecha. */
@media (max-width: 640px) {
  .work-controls {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
  }
}

/* --- Sonido en directo ----------------------------------------------------
   La seccion de sonido no tenia una sola imagen en movimiento: se hablaba de
   produccion y de mezcla sin enseñar nada. Aqui va la sesion completa y tres
   trozos cortos del estudio en marcha.

   El video de YouTube NO se incrusta de entrada. Lo que se ve es una portada
   nuestra con nuestro pie; el iframe solo se crea al pulsar. Dos razones: no
   se descargan los cientos de kilobytes del reproductor de YouTube a quien
   nunca le da al play, y hasta ese momento YouTube no pone ninguna cookie.
   De paso resuelve lo del titulo: mientras no se pulsa no hay barra de
   YouTube encima, solo la imagen y el rotulo que hemos escrito. */

.sound-live {
  margin-top: clamp(40px, 5vw, 64px);
}

.sound-session {
  margin-top: 18px;
  /* La sesion es una pieza de apoyo, no la portada de la pagina: a todo el
     ancho competia con el titular y era lo primero que se miraba. Acotada, se
     lee como lo que es. El limite va en la caja y no en el reproductor para
     que el pie de foto quede alineado con el video. */
  max-width: 480px;
  transition: max-width 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Abierto ocupa lo que necesita. La clase la pone main.js al pulsar. */
.sound-session.is-playing {
  max-width: min(1080px, 100%);
}

@media (prefers-reduced-motion: reduce) {
  .sound-session { transition: none; }
}

.yt-facade {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.yt-facade img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.85) contrast(1.03) brightness(0.9);
  transition: filter 0.5s ease, transform 0.9s cubic-bezier(0.2, 0, 0.2, 1);
}

.yt-facade:hover,
.yt-facade:focus-visible {
  border-color: var(--border-accent);
  outline: none;
}

.yt-facade:hover img,
.yt-facade:focus-visible img {
  filter: saturate(1) contrast(1.05) brightness(1);
  transform: scale(1.02);
}

.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--border-accent);
  background: rgba(8, 8, 8, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(8, 8, 8, 0.7);
}

/* Al pulsar, el iframe ocupa exactamente el hueco de la portada. */
.yt-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-accent);
  display: block;
}

.sound-session-cap {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Tres trozos del estudio, en marcha y sin sonido: el sitio no reproduce
   audio en ningun sitio y esto no va a ser la excepcion. */
.sound-strip {
  margin-top: clamp(16px, 2vw, 24px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

.sound-clip {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

@media (max-width: 640px) {
  .sound-strip {
    grid-template-columns: 1fr 1fr;
  }
  /* En dos columnas el tercero se queda solo: se le da la fila entera en vez
     de dejar un hueco. */
  .sound-clip:last-child {
    grid-column: 1 / -1;
  }
}

/* --- Secciones desplegables y ancho del portfolio -------------------------
   Dos cosas pedidas juntas: que el trabajo no salga todo de golpe y que las
   piezas respiren con margen a los lados.

   El ancho: la rejilla se centra y se le pone tope. Antes ocupaba todo el
   hueco disponible y en una pantalla ancha las fichas crecian sin limite;
   ahora paran donde para el caso de estudio, asi que las dos vistas del
   trabajo miden lo mismo. */

.work-grid {
  max-width: 1180px;
  margin-inline: auto;
}

/* La cabecera de seccion pasa a ser el interruptor de su bloque. */
.work-section-toggle {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.work-section-toggle:hover,
.work-section-toggle:focus-visible {
  color: var(--accent);
  border-color: var(--border-accent);
  outline: none;
}

/* Una punta de flecha dibujada con dos filetes: gira al abrir. Sin glifo,
   que en tipografia mono cada familia pone uno distinto. */
.work-section-chevron {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s ease;
}

.work-section-toggle[aria-expanded="true"] .work-section-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- WhatsApp al alcance en movil -----------------------------------------
   El boton de WhatsApp vive en la seccion de contacto, y medido en el movil
   publicado eso cae al 87% de una pagina de 19.000px: casi veinte pantallas
   de scroll. Estaba, pero no lo encontraba nadie.

   En movil pasa a ser un boton fijo. Aparece solo despues del hero — sobre la
   portada estorbaria — y se queda pequeño y de 1px de filete, como todo lo
   demas: es un atajo, no un reclamo. En escritorio no sale: alli el boton de
   la seccion de contacto se ve sin esfuerzo. */

.wa-float {
  display: none;
}

@media (max-width: 900px) {
  .wa-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 150;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--text);
    background: rgba(8, 8, 8, 0.82);
    border: 1px solid var(--border-accent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .wa-float.is-on {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .wa-float:active,
  .wa-float:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
}


/* --- Pagina de sonido -----------------------------------------------------
   El video de la sesion vivia en la portada y se comia media pantalla: el
   trabajo visual es lo primero que hay que ver, y una ventana de YouTube de
   16:9 a ancho completo mandaba mas que cualquier pieza. Aqui tiene su sitio,
   para quien haya llegado hasta abajo y quiera oir algo. El ancho maximo lo
   deja en 900px a proposito — a ancho completo volveria a pasar lo mismo. */

.sound-page {
  max-width: 900px;
  margin-inline: auto;
  padding: calc(clamp(96px, 12vw, 150px) + 40px) clamp(24px, 6vw, 60px) clamp(80px, 10vw, 140px);
}

.sound-page-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 84px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0;
}

.sound-page-lead {
  margin: clamp(24px, 3vw, 32px) 0 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  text-wrap: pretty;
}

.sound-page-block {
  margin-top: clamp(48px, 6vw, 80px);
}

/* La fila de botones se parte sola en movil en vez de salirse por el lado. */
.sound-page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(16px, 2vw, 24px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border);
}

/* En movil la barra se apila en dos filas y ocupa el doble: sin esto el
   rotulo "Sonido" queda pegado al conmutador de idioma. */
@media (max-width: 1080px) {
  .sound-page { padding-top: 200px; }
}

/* Los dos botones de sonido en una fila: apilados parecian dos decisiones
   distintas cuando son la misma — oir algo o preguntar. */
.sound-actions {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(16px, 2vw, 24px);
}


/* --- Repaso de movil -------------------------------------------------------
   Cinco cosas medidas en una pantalla de 390px, no supuestas. */

/* 1. El indicador "Scroll" del hero cae justo encima del boton "Start a
      Project" en movil: medido, el rotulo empieza en x=351 y el boton acaba
      en x=358. En una pantalla de telefono la pista de que hay que bajar
      sobra — se baja igual. */
@media (max-width: 900px) {
  .hero-scroll { display: none !important; }
}

/* 2. "Hover to magnify" en un telefono es una instruccion imposible: no hay
      cursor y la lupa esta desactivada a proposito con el dedo. */
@media (hover: none), (max-width: 640px) {
  .hint-hover { display: none; }
}

/* 3. Las diez tarjetas de capacidades guardaban sitio para una flecha que
      solo aparece al pasar el raton: en movil eran diez cajas de 155px con
      un titulo arriba y nada debajo. Con la flecha visible la tarjeta se
      lee entera, y con menos aire se recorren en la mitad de pantalla. */
@media (hover: none), (max-width: 640px) {
  .service-arrow { opacity: 0.45; }
}

@media (max-width: 640px) {
  .service-card { padding: 20px 20px !important; }
  .service-card .service-arrow { margin-top: 10px !important; }
}

/* 4. El pie metia el logo, el copyright y seis enlaces en una sola fila
      centrada: a 390px el copyright salia a palabra por linea y los enlaces
      quedaban desparramados en tres alturas distintas. En vertical cada
      cosa ocupa su renglon. */
@media (max-width: 760px) {
  .footer-top { flex-direction: column; align-items: flex-start !important; gap: 28px; }
  .footer-id {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
    width: 100%;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
  }
}

/* 5. La linea sobre los platos, antes del video de la sesion. */
.sound-session-note {
  margin: 18px 0 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  text-wrap: pretty;
}


/* --- Tipografía de lectura -------------------------------------------------
   La Cormorant Garamond es una Garamond de trazo finísimo: preciosa en un
   titular grande y difícil de leer a 16px en texto claro sobre negro, que es
   donde está la mayoría del texto del sitio. Lora está dibujada para
   pantalla — más altura de x, trazo con más cuerpo — y pesa lo mismo.

   Solo se cargan los pesos 400, 500 y 600. Donde el marcado pide 300, el
   navegador sirve la 400: es exactamente lo que hace falta sobre fondo
   oscuro, así que no hay que ir corrigiendo pesos uno por uno.

   Los titulares (Bebas) y los rótulos (Space Mono) no cambian. */

:root {
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
}

/* Lora tiene la letra más grande a igual cuerpo, así que el interlineado
   que estaba pensado para la Cormorant queda justo. */
.about-body,
.case-p,
.work-blurb,
.need-a,
.sound-note,
.sound-page-lead,
.sound-session-note {
  line-height: 1.7;
}

/* Los rótulos del apartado The Studio: a 10px se leían con esfuerzo y son
   la parte del texto que más se consulta de un vistazo. */
.about-fact-k {
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.about-fact-v {
  font-size: 17px;
}

/* Material y acabado dentro de la ficha abierta, igual que en la tarjeta.
   Antes solo se veían en la reja y al abrir el proyecto desaparecían. */
.case-spec {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #92784d;
}

/* La lupa en móvil desaprovechaba la pantalla: el fondo pone 24px de margen
   y la figura otros 16px por lado, así que un cartel de 390px de ancho se
   veía a 310. Medido en un teléfono de 390px: pasa de 310×387 a 366×458.
   Un cartel es justo lo que se abre para verlo grande. */
@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox figure { padding: 0; }
  .lightbox img { max-height: 68vh; }
}


/* --- Capacidades con lámina ------------------------------------------------
   El apartado va justo después de la portada y era la parte más floja: diez
   cajas con un título arriba y aire debajo. Ahora cada capacidad enseña una
   pieza real del trabajo, todas pasadas por la misma cianotipia (ver
   tools/grade.js --preset cianotipia).

   Van en azul y no a color a propósito: son piezas de diez mundos distintos
   — un cartel, un render, una escultura, una noche de club — y a color la
   fila parecía un muestrario desordenado. Con un solo tinte se leen como una
   familia, y el trabajo a color aparece entero unas pantallas más abajo, que
   es donde toca.

   La lámina va DETRÁS del texto, con un velo encima: el número, el título y
   la flecha tienen que seguir leyéndose sobre cualquiera de las diez. */

.service-card {
  position: relative;
  isolation: isolate;
  min-height: 190px;
}

.service-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.88;
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.2, 0, 0.2, 1);
}

/* El velo es lo que garantiza el contraste del texto. Va más denso abajo,
   que es donde caen el título y la flecha. */
.service-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.34) 0%, rgba(8, 8, 8, 0.55) 45%, rgba(8, 8, 8, 0.86) 100%);
  transition: background 0.5s ease;
}

.service-card:hover .service-shot,
.service-card:focus-within .service-shot {
  opacity: 1;
  transform: scale(1.04);
}

.service-card:hover .service-veil,
.service-card:focus-within .service-veil {
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.18) 0%, rgba(8, 8, 8, 0.40) 45%, rgba(8, 8, 8, 0.80) 100%);
}

/* Sin cursor no hay hover: en el móvil la lámina se ve directamente al nivel
   que en escritorio solo aparece al pasar por encima. */
@media (hover: none), (max-width: 640px) {
  .service-shot { opacity: 1; }
  .service-veil {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0.26) 0%, rgba(8, 8, 8, 0.48) 45%, rgba(8, 8, 8, 0.84) 100%);
  }
}

/* El degradado decorativo que ya traía la tarjeta se queda por encima de la
   lámina, no debajo, o desaparecía. */
.service-card::before { z-index: -1; }

/* Con imagen detrás el título necesita algo de peso para no flotar. */
.service-label { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .service-shot { transition: none; }
  .service-card:hover .service-shot { transform: none; }
}

/* Con la lámina más visible el rótulo necesita su propio suelo: una sombra
   corta y densa, no un halo. Es lo que mantiene el contraste cuando debajo
   cae una zona clara del cartel. */
.service-card .service-label,
.service-card .service-number {
  text-shadow: 0 1px 10px rgba(6, 6, 6, 0.95), 0 1px 3px rgba(6, 6, 6, 0.9);
}

/* El rótulo al pie de la tarjeta, no en medio: abajo es donde el velo es más
   denso y donde la lámina tiene menos que contar. En medio se cruzaba con el
   texto del cartel de Hangar y con VOYAGERS, y las dos cosas competían. */
.service-card {
  display: flex;
  flex-direction: column;
}

.service-card .service-label {
  margin-top: auto;
}


/* --- Que se acierte con el pulgar -----------------------------------------
   Medido en una pantalla de 390px con emulación táctil: la mitad de los
   enlaces llegaban a 44px de alto pero se quedaban en 21-40 de ancho, y el
   conmutador EN/ES eran dos botones de 21px pegados. En un móvil eso es
   fallar el toque, no un detalle de estilo. 44x44 es el mínimo con el que una
   persona acierta a la primera. */

@media (hover: none), (max-width: 900px) {
  /* El área invisible se ensancha sin mover una sola letra de sitio. */
  /* El área se agranda con relleno de verdad, no con un ::after que se sale:
     estirándolo 15px a los lados, el último enlace de cada fila empujaba la
     página 16px y aparecía scroll horizontal en todos los anchos. Con
     relleno el hueco entre textos se mantiene bajando el gap otro tanto. */
  .nav-link,
  .lang-btn,
  .listen-link,
  .footer-link {
    padding: 13px 12px;
    margin: -13px 0;
  }

  .nav-link::after,
  .lang-btn::after,
  .footer-link::after {
    inset: 0;
  }

  /* Se le quita al hueco lo que se le ha dado al relleno: la separación que
     se ve entre palabras es la misma que antes. */
  .nav-links { gap: 2px !important; }
  .footer-links { gap: 4px 0; margin-inline: -12px; }
  .listen-links { gap: 4px 6px; margin-inline: -12px; }
  .lang-btn { padding-inline: 15px; }
  .lang-switch { margin-inline: -10px; }

  /* El logotipo de la barra también se pulsa: lleva a la portada. */
  .site-nav > a { padding: 4px 0; }

  .filter-btn { min-width: 44px; }

  /* Desplegar una sección es el gesto más repetido de la página. */
  .work-section-toggle {
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* El WhatsApp del bloque de contacto era una línea de texto de 29px. */
  .contact-direct {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* --- Capacidades que se abren ---------------------------------------------
   El rótulo es ahora el botón, y su área se estira a toda la tarjeta con un
   ::after. Así se pulsa donde sea, pero el enlace del panel sigue siendo un
   objetivo aparte — que es la razón de hacerlo con un pseudo-elemento y no
   envolviendo la tarjeta entera en un <button>: dentro de un botón no puede
   ir un enlace. */

.service-toggle {
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.service-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-toggle .service-label { margin: 0; }

/* La flecha dice que hay algo debajo: apunta abajo cerrada y gira al abrir.
   Antes apuntaba en diagonal y no significaba nada — era decoración. */
.service-arrow {
  position: relative;
  z-index: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.3s;
}

.service-card:has(.service-toggle[aria-expanded='true']) .service-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.service-panel {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-accent);
  animation: capOpen 0.35s cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes capOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.service-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0;
  text-wrap: pretty;
}

/* El enlace tiene que estar por encima del área del botón o el clic lo
   captura el desplegable y nunca se llega al formulario. */
.service-cta {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, color 0.25s;
}

.service-cta:hover,
.service-cta:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Abierta, la tarjeta se aparta del resto: la lámina baja y el filete se
   enciende, para que se vea cuál es la que se está leyendo. */
.service-card:has(.service-toggle[aria-expanded='true']) {
  border-color: var(--border-accent);
}

.service-card:has(.service-toggle[aria-expanded='true']) .service-shot {
  opacity: 0.42;
}

/* Sin :has (navegadores viejos) el panel sigue abriéndose y leyéndose; solo
   se pierde el giro de la flecha, que es un adorno. */


/* --- Viudas ----------------------------------------------------------------
   La regla de composición del sitio: ninguna palabra suelta cerrando un
   párrafo. El trabajo fino lo hace main.js uniendo las dos últimas palabras
   con un espacio duro, que funciona en cualquier navegador y a cualquier
   ancho. Esto es el refuerzo para los que entienden `pretty`, que además
   equilibra las últimas líneas enteras. */

p, li, h1, h2, h3, h4, figcaption, blockquote,
.work-blurb, .service-text, .case-p, .about-body,
.need-a, .sound-note, .work-section-blurb {
  text-wrap: pretty;
}

/* En titulares cortos interesa el equilibrio entre líneas, no solo la última. */
.hero-title, .case-title, .sound-page-title, .service-label, .work-title {
  text-wrap: balance;
}



/* --- El aro de la lupa -----------------------------------------------------
   Un anillo de metal biselado alrededor de la imagen ampliada. El degradado
   cónico hace el metal — la luz gira alrededor del aro, que es lo que se ve
   en una pieza torneada — y las dos sombras interiores dan el volumen: la de
   arriba oscura, la de abajo clara, como si la luz cayera desde arriba.

   Antes había aquí una lupa dibujada con una mano mecánica. Se quitó: el
   protagonista es la pieza que se está mirando, no el instrumento. */

.reel-lens-ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 2;
  background: conic-gradient(
    from 200deg,
    #4a4034 0deg,
    #b39b6d 45deg,
    #6d6152 95deg,
    #e6d5ae 140deg,
    #574c3c 195deg,
    #c8a96e 250deg,
    #3f372c 300deg,
    #b39b6d 360deg
  );
  box-shadow:
    /* canto exterior y la sombra que despega el aro de la imagen */
    0 0 0 1px rgba(20, 16, 10, 0.9),
    0 10px 26px rgba(0, 0, 0, 0.75);
}

/* La luz. El degradado conico da el tono del metal pero no de donde viene la
   luz; esta capa en  aclara la parte de arriba del aro y oscurece la
   de abajo, que es lo que lo levanta del plano. */
.reel-lens-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    172deg,
    rgba(255, 250, 235, 0.75) 0%,
    rgba(255, 250, 235, 0.18) 22%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(0, 0, 0, 0.72) 100%
  );
  mix-blend-mode: overlay;
}

/* El canvas se apoya encima del aro y solo deja asomar el canto. Lleva su
   propio filo oscuro para que la imagen no se derrame sobre el metal. */
.reel-lens {
  box-shadow:
    0 0 0 1px rgba(20, 16, 10, 0.95),
    inset 0 3px 6px rgba(0, 0, 0, 0.55);
}

.reel-frame.has-lens .reel-lens-ring {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reel-lens-ring { transition: none; }
}

/* --- Las rutas de "Where to start" ---------------------------------------
   Cada necesidad lleva ahora sus entregables y dos salidas: ver el trabajo
   que ya lo resuelve, o empezar el brief con la disciplina ya elegida. Se
   dibuja con filetes y rotulos en mono, sin cajas, para que siga siendo la
   misma pagina y no un bloque de producto pegado encima. */

.need-includes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
}

.need-includes li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 0;
}

.need-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 26px;
}

.need-proof,
.need-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
  min-width: 0;
}

.need-proof { color: var(--text-mid); }
.need-cta { color: var(--accent); }

.need-proof:hover,
.need-proof:focus-visible { color: var(--text); border-bottom-color: var(--border); }

.need-cta:hover,
.need-cta:focus-visible { color: var(--text); border-bottom-color: var(--accent); }

@media (max-width: 640px) {
  .need-actions { gap: 14px 20px; }
}

/* --- Pagina de caso -------------------------------------------------------
   El caso ya existia como ficha emergente sobre la portada, pero sin
   direccion propia: no se podia enlazar ni indexar. Ahora cada uno tiene
   ademas su URL en /work/<id>.

   Aqui solo esta el marco de esa pagina. El contenido reutiliza tal cual las
   clases de la ficha (.case-inner, .case-text, .case-block, .case-gallery),
   asi que los dos caminos se ven igual y no hay dos maquetas que mantener:
   lo que se arregle en una vale para la otra. */

.case-page {
  padding-top: clamp(96px, 12vw, 150px);
}

.case-topbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 72px);
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.case-back:hover,
.case-back:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* La ficha emergente necesitaba esa franja de arriba para despegarse del
   borde de la pantalla. Aqui ya la ponen el menu y el enlace de volver. */
.case-page-inner { padding-top: clamp(20px, 3vw, 32px); }

.case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(36px, 5vw, 56px);
}

/* El titulo de la pagina es <h1>, no <h2> como en la ficha: mismo aspecto,
   distinto peso para un buscador. */
h1.case-title { margin-top: 18px; }

/* El enlace a la direccion permanente, dentro de la ficha emergente. */
.case-permalink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.case-permalink:hover,
.case-permalink:focus-visible { color: var(--text); border-bottom-color: var(--accent); }

/* --- Pagina del catalogo, /work -------------------------------------------
   La portada ensena tres piezas y manda aqui. Esta pagina reutiliza la
   rejilla y los filtros tal cual; lo unico nuevo es la cabecera. */

.work-page {
  padding: clamp(96px, 12vw, 150px) clamp(24px, 6vw, 80px) clamp(80px, 10vw, 120px);
}

.work-page .case-topbar { padding: 0; margin-bottom: clamp(40px, 6vw, 72px); }

.work-page-head { margin-bottom: clamp(40px, 5vw, 64px); }

.work-page-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 100px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--text);
}

.work-page-lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 60ch;
  margin-top: clamp(24px, 3vw, 36px);
}

.work-page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(60px, 8vw, 100px);
}

/* --- El puente desde la portada -------------------------------------------
   Debajo de las tres piezas destacadas. Sin esto la portada se queda sin
   salida hacia el resto del trabajo, que es donde esta casi todo. */

.work-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: clamp(40px, 5vw, 64px);
  /* El bloque de fabricacion viene justo detras y su titular es enorme: sin
     este margen el boton se le pegaba encima. */
  margin-bottom: clamp(56px, 7vw, 96px);
}

.work-all-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* En la portada la barra de filtros se queda vacia a proposito: tres piezas
   elegidas no se filtran. Vacia seguia ocupando su margen y abria un hueco
   entre el titular y la primera ficha. */
.work-controls:empty { display: none; }

/* Las tres piezas de la portada. La rejilla del catalogo reparte tramos
   desiguales a proposito —con veinticinco fichas el ritmo irregular evita que
   parezca una tabla— pero con tres eso solo deja un hueco a la derecha. */
.work-grid[data-featured] {
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

/* Con un numero impar de piezas destacadas la ultima se queda sola en la
   columna izquierda y abre un hueco a la derecha que parece un fallo de
   carga. Puesta al ancho de las dos columnas pero con el ancho de una y
   centrada, la fila suelta se lee como un cierre y no como un error. */
.work-grid[data-featured] > .work-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: min(100%, calc(50% - clamp(12px, 1.6vw, 24px) / 2));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .work-grid[data-featured] > .work-card:last-child:nth-child(odd) {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .work-grid[data-featured] { grid-template-columns: 1fr; }
}

/* La pieza larga de un caso: aftermovie, videoclip. Lleva controles porque se
   ve entera, no de reojo, y no descarga nada hasta que le dan al play. */
.case-watch {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-accent);
  background: var(--surface);
}

/* --- Los anclajes dejan de caer debajo del menu ---------------------------
   El menu es fijo y ocupa unos 90px. Sin esto, pulsar "Contacto" o el boton
   de una necesidad dejaba el titular de la seccion tapado por la barra: se
   llegaba al sitio, pero parecia que la pagina se habia quedado corta.
   `scroll-margin-top` le dice al navegador cuanto aire dejar por arriba. */

section[id],
[id="work"], [id="start"], [id="services"], [id="about"], [id="sound"], [id="contact"] {
  scroll-margin-top: clamp(96px, 11vw, 124px);
}

/* --- Los cuatro servicios de sonido en la portada -------------------------
   Cada uno abre el formulario con su casilla puesta. Los enlaces de escucha
   —Bandcamp, SoundCloud, los sellos— se quedan en /sound: aqui lo que
   interesa es que se pueda encargar, no que se pueda oir. */

.sound-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
}

.sound-menu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.sound-menu a:hover,
.sound-menu a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* La ficha personal: el sitio en una linea y la promesa en otra. Juntas se
   leian como un dato mas. */
.contact-person-note + .contact-person-note { margin-top: 4px; }

/* El formulario tiene direccion propia, #brief. Los botones que prellenan una
   casilla apuntan aqui y no a #contact: la seccion empieza con el titular y
   los datos de contacto, asi que quien pulsaba "empezar por aqui" aterrizaba
   media pantalla por encima del formulario que iba a rellenar. */
#brief { scroll-margin-top: clamp(96px, 11vw, 124px); }

/* --- Preescucha con portada propia ---------------------------------------
   Mismo trato que el video de YouTube: hasta que alguien pulsa no se carga
   nada de fuera ni se pone una cookie. El visitante elige de donde escuchar
   en vez de tragarse un reproductor que no ha pedido. */

.listen-players {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  gap: 12px;
  max-width: 640px;
}

.embed-facade {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.embed-facade:hover,
.embed-facade:focus-visible {
  border-color: var(--border-accent);
  background: #c8a96e0a;
  outline: none;
}

.embed-play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--border-accent);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.embed-facade:hover .embed-play { color: var(--accent); border-color: var(--accent); }

.embed-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.embed-service {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.embed-note {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.5;
}

.embed-frame {
  width: 100%;
  border: 1px solid var(--border-accent);
  display: block;
}

/* El showreel del hero, un 10% menos apagado. Iba a brightness .62 y la pieza
   que se ve detras del titulo era casi una silueta. Se sube el brillo, no se
   quita el velo: el degradado sigue estando para que el texto se lea. */
.showreel-video {
  filter: grayscale(0.4) contrast(1.06) brightness(0.68);
}

/* El brillo del móvil vive aquí y no en el bloque de arriba: esa regla va
   después en el archivo y, a igual especificidad, gana ella. Con la pieza
   ampliada vuelve a pasar por detrás del titular, así que sigue bajada —
   pero .55 la dejaba en penumbra. */
@media (max-width: 640px) {
  .showreel-video {
    filter: grayscale(0.45) contrast(1.06) brightness(0.72);
  }
}

/* En movil el menu se apila en dos filas y ocupa unos 120px. El relleno del
   hero se calcula sobre el ancho, asi que en una pantalla estrecha y baja se
   quedaba corto y el rotulo se metia entre los enlaces. Medido: a 390x600 el
   hueco era de -2px. */
@media (max-width: 760px) {
  /* El relleno del hero va en un style del propio elemento, y eso gana a
     cualquier hoja: aqui el !important es la unica forma de corregirlo sin
     reescribir el atributo. */
  main > section:first-of-type { padding-top: 156px !important; }
}

/* --- La tienda ------------------------------------------------------------
   Piezas por encargo, sin carrito. La ficha lleva lo que decide una compra a
   medida —precio, que se puede elegir y cuanto tarda— y un boton que abre el
   brief con la pieza ya escrita. */

.shop-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.shop-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--text);
}

.shop-lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 52ch;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.shop-card {
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s ease;
}

.shop-card:hover { border-color: var(--border-accent); }

.shop-media {
  background: var(--surface-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.shop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0, 0.2, 1);
}

.shop-card:hover .shop-media img { transform: scale(1.04); }

.shop-body {
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
}

.shop-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.shop-price {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.shop-note {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-mid);
}

.shop-options {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 6px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
}

.shop-options li {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.shop-lead-time,
.shop-lead + .shop-lead { display: none; }

.shop-card .shop-lead {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  max-width: none;
}

.shop-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.shop-cta:hover,
.shop-cta:focus-visible { color: var(--text); border-bottom-color: var(--accent); }

.shop-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: clamp(40px, 5vw, 64px);
}

.shop-foot-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 1000px) {
  .shop-head { grid-template-columns: 1fr; align-items: start; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .shop-grid { grid-template-columns: 1fr; }
}

/* Las disciplinas de cada territorio, debajo del titulo. Van visibles y no
   dentro del panel para que nada se pierda al pasar de ocho tarjetas a
   cuatro: quien busca "motion graphics" lo sigue viendo sin abrir nada. */
.service-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.8;
  margin-top: 10px;
}

/* La portada de un producto se puede pulsar cuando hay mas fotos detras. */
.shop-media-abre {
  padding: 0;
  border: 0;
  width: 100%;
  cursor: zoom-in;
  display: block;
}

.shop-more {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0 0 3px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.shop-more:hover,
.shop-more:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* --- El zoom de las fichas alcanza tambien al video ------------------------
   La regla original solo tocaba `img`, asi que cualquier ficha que pintara un
   video —motion, las copas, el Frankenstein, el aftermovie— se quedaba quieta
   al pasar el cursor mientras las de al lado crecian. Se notaba como un fallo
   y lo era. */

.work-media video {
  transition: transform 0.9s cubic-bezier(0.2, 0, 0.2, 1), filter 0.6s;
  filter: saturate(0.7) contrast(1.02) brightness(0.94);
}

.work-card:hover .work-media video,
.work-card:focus-visible .work-media video {
  filter: saturate(1) contrast(1.05) brightness(1);
  transform: scale(1.06);
}

/* El rotulo de la seccion respiraba poco: caia pegado al recuadro del bloque
   de fabricacion que tiene justo encima. */
.work-head { margin-top: clamp(56px, 7vw, 96px); }

/* --- Capacidades a todo lo ancho -----------------------------------------
   Con ocho tarjetas, media pagina bastaba. Con cuatro territorios cada una se
   quedaba en 298px de ancho y al lado del titular sobraba medio metro de
   negro. Ahora el titular va arriba y los cuatro territorios ocupan la
   pagina entera: caben mas altas, se leen sus disciplinas y dejan de parecer
   botones. */

/* La cabecera ya no comparte fila con las tarjetas: ocupa su ancho y el
   parrafo se acota para que no cruce la pagina entera. */
.cap-head { margin-bottom: clamp(48px, 6vw, 80px); }
.cap-head p { max-width: 56ch; }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}

.cap-grid .service-card {
  min-height: clamp(300px, 26vw, 380px);
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}

/* El panel que se despliega empuja hacia abajo, no hacia los lados. */
.cap-grid .service-panel { margin-top: auto; }

@media (max-width: 1000px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-grid .service-card { min-height: 0; }
}

/* --- La tira del estudio -------------------------------------------------
   Tres fotos debajo de los hechos: el taller con la mascarilla puesta, la
   mesa donde sale el sonido y Madrid por la ventana. Van aquí y no arriba
   porque primero se lee quién es y qué acredita; esto lo confirma.

   Aspecto fijo en 3/2 —son todas de la misma cámara— para que las tres
   líneas de pie queden a la misma altura sin depender de la carga. */

.studio-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(48px, 6vw, 80px);
}

.studio-strip figure {
  margin: 0;
}

.studio-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.03);
  transition: filter 0.5s var(--ease, ease);
}

.studio-strip figure:hover img {
  filter: grayscale(0) contrast(1.03);
}

.studio-strip figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim, var(--text-mid));
  margin-top: 12px;
}

@media (max-width: 720px) {
  /* Dos por dos: cuatro fotos entran enteras sin quedarse en sellos. */
  .studio-strip { grid-template-columns: 1fr 1fr; }
}

/* --- El carrito -----------------------------------------------------------
   Filetes de 1px y nada más, como el resto: el panel es una hoja de papel
   sobre el sitio, no una caja con sombra. Los tokens de :root mandan; aquí no
   se escribe ni un color a pelo. */

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.cart-btn:hover,
.cart-btn:focus-visible { color: var(--text); border-color: var(--border-accent); }
.cart-btn.has-items { color: var(--accent); border-color: var(--border-accent); }

.cart-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: 8px;
}
.cart-count-badge:empty { display: none; }

.cart-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  background: rgba(8, 8, 8, 0.72);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cart-panel.is-open { opacity: 1; }

.cart-box {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(16px);
  transition: transform 0.3s var(--ease, ease);
}
.cart-panel.is-open .cart-box { transform: none; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(20px, 4vw, 28px);
  border-bottom: 1px solid var(--border);
}
.cart-close {
  border: 0;
  background: none;
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.cart-close:hover { color: var(--text); }

.cart-lines {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px clamp(20px, 4vw, 28px);
}
.cart-empty {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-mid);
  padding: 32px 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.cart-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
}
/* Sin esto una pieza de nombre largo empuja el precio fuera del panel. */
.cart-line-body { min-width: 0; }
.cart-line-name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.cart-line-variant {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}
.cart-line-price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.cart-qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cart-step {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.cart-step:hover { color: var(--text); border-color: var(--border-accent); }
.cart-count { font-family: var(--font-mono); font-size: 12px; color: var(--text); }

.cart-foot {
  padding: 20px clamp(20px, 4vw, 28px) 28px;
  border-top: 1px solid var(--border);
}
.cart-ship { display: block; margin-bottom: 18px; }
.cart-ship-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.cart-ship-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.cart-totals { margin-bottom: 18px; }
.cart-total-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mid);
  padding: 5px 0;
}
.cart-total-line.is-total {
  color: var(--text);
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 12px;
}

.cart-pay {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.cart-pay:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.cart-pay:disabled { opacity: 0.5; cursor: default; }

.cart-note,
.cart-error {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 12px 0 0;
}
.cart-error { color: var(--accent); }

/* Los controles de compra dentro de una ficha de la tienda. */
.shop-buy { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.shop-variant {
  flex: 1 1 150px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
}
.shop-add {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.shop-add:hover { background: var(--accent); color: var(--bg); }
/* Cuando hay botón de comprar, el encargo pasa a ser el camino secundario. */
.shop-cta-second { opacity: 0.72; }

@media (max-width: 480px) {
  .cart-box { width: 100%; border-left: 0; }
}

/* --- Las páginas legales --------------------------------------------------
   Texto largo que nadie lee por gusto: lo único que se le pide es que se
   pueda leer. Una columna estrecha, la tipografía de texto del sitio y los
   mismos filetes de 1px. Sin adornos. */

.legal-page {
  padding: clamp(110px, 12vw, 150px) clamp(24px, 6vw, 80px) clamp(70px, 8vw, 110px);
  background: var(--bg);
}
.legal-inner {
  max-width: 720px;
  margin: 0 auto;
}
.legal-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 68px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 18px 0 0;
  text-wrap: balance;
}
.legal-lead {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 18px 0 0;
  text-wrap: pretty;
}
.legal-block {
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: clamp(28px, 3vw, 36px);
  border-top: 1px solid var(--border);
}
.legal-k {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.legal-p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 0 0 16px;
  text-wrap: pretty;
  /* Los correos son la cadena más larga de estas páginas. */
  overflow-wrap: anywhere;
}
.legal-p:last-child { margin-bottom: 0; }

.legal-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.legal-sibling {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s ease;
}
.legal-sibling:hover { color: var(--text); }
.legal-sibling.is-here { color: var(--accent); }

/* La fila del pie, en la portada y las páginas secundarias. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}