/* 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;
  border: 1px solid var(--border-accent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
  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;
  color: var(--accent-dim);
}

/* --- 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 fondo del retrato es blanco: sobre el negro del sitio se calma un
     poco para que no compita con el trabajo. */
  filter: contrast(1.05) brightness(0.94);
  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: 2;
  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);
}

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

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