/* ==========================================================================
   Efege Arquitectos — landing (Hi22)
   Lenguaje de diseño medido de la referencia (OH Architecture, 2 sep 2026):
   escala fluida, pesos por eje variable, botones píldora, revelados por líneas.
   Paleta e identidad: de Efege (negro, hueso, material). Ver
   hi22-motor-agentico/estado/clientes/efege-arquitectos/marca/identidad.md
   ========================================================================== */

:root {
  /* unidad fluida: 16.05px a 390px, 16.78px a 1440px (medido en la referencia) */
  --u: clamp(15.9px, calc(15.776px + 0.07vw), 17.6px);

  --negro: #0a0a0a;
  --hueso: #fcfcfc;   /* blanco, no crema (orden de Diego, 2-sep) */
  --blanco: #fcfcfc;
  --gris: #d9d5cc;
  --gris-oscuro: #5a5752;
  --mini: #f2f0eb;

  --font: "Sora", "Helvetica Neue", Arial, sans-serif;
  --w-body: 530;
  --w-bold: 650;

  --margen: 24.656px;
  --gap: 16px;
  --pad-seccion: calc(var(--u) * 9.53);   /* 160px en escritorio */

  /* curvas medidas del app.js de la referencia */
  --ease-primary: cubic-bezier(.87, 0, .13, 1);
  --ease-secondary: cubic-bezier(.16, 1, .35, 1);
  --ease-menu: cubic-bezier(.7, 0, .22, 1);
  --ease-transition: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--negro);
  font-family: var(--font);
  font-size: var(--u);
  line-height: 1.2em;
  letter-spacing: -0.01em;
  font-variation-settings: "wght" var(--w-body);
  font-weight: 500;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
body.overflow-hidden { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- escala tipográfica (medida en la referencia) ---------- */
.display { font-size: calc(var(--u) * 7.15); line-height: .95em; letter-spacing: -0.03em; text-transform: uppercase; font-variation-settings: "wght" 530; font-weight: 500; }
.h2      { font-size: calc(var(--u) * 4.77); line-height: 1.05em; letter-spacing: -0.03em; font-variation-settings: "wght" 530; }
.h3      { font-size: calc(var(--u) * 3.336); line-height: 1.05em; letter-spacing: -0.03em; font-variation-settings: "wght" 650; }
.h4      { font-size: calc(var(--u) * 1.947); line-height: 1.2em; letter-spacing: -0.03em; font-variation-settings: "wght" 530; }
.large   { font-size: calc(var(--u) * 1.2336); line-height: 1.2em; letter-spacing: -0.01em; text-wrap: pretty; }
.small   { font-size: 14px; line-height: 1.2em; letter-spacing: -0.01em; font-variation-settings: "wght" 650; text-transform: uppercase; }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); }

/* ---------- piezas compartidas ---------- */
.g-eyebrow { white-space: nowrap; width: fit-content; }
.g-deco { color: inherit; }

.btn-default {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1rem 1.25rem; width: fit-content; height: fit-content;
  background: var(--negro); color: var(--blanco);
  border-radius: 100vw; font-variation-settings: "wght" 650; line-height: 1;
}
.btn-default-contain { overflow: hidden; display: block; line-height: 0; }
.btn-default-text { font-size: 14px; text-transform: uppercase; white-space: nowrap; }
.g-circle {
  width: 8px; height: 8px; border-radius: 100vw; border: 1px solid var(--blanco); background: transparent; flex: none;
  will-change: transform;
  transition: transform .545s var(--ease-secondary), background-color .3s var(--ease-secondary);
}
.btn-default[data-link-hover]:hover .g-circle,
.g-link[data-link-hover]:hover .g-circle,
.g-link.is-hero[data-project-hover]:hover .g-circle { transform: scale(.6); background-color: var(--blanco); }

/* enlace con texto que rueda: la sombra de texto es el duplicado (técnica de la referencia).
   La caja recortada mide EXACTAMENTE lo que rueda (--roll): si midiera más, al pasar el
   cursor quedaría un filo del texto original asomando arriba (corrección de Diego, 2-sep). */
[data-link] { --roll: 1.3em; /* Sora mide 1.26em de caja natural: con menos, el acento de la copia asoma por abajo */ display: block; padding: 0; line-height: var(--roll); text-shadow: 0 var(--roll) 0 var(--blanco); transition: transform .545s var(--ease-secondary); }
[data-link="black"] { text-shadow: 0 var(--roll) 0 var(--negro); }
[data-link-hover]:hover [data-link] { transform: translateY(calc(-1 * var(--roll))); }
.btn-default-contain, .g-link-contain, .menu-text-wrap, .footer-link-contain { overflow: hidden; display: block; line-height: 0; }

.g-link { display: flex; align-items: center; color: var(--blanco); text-transform: uppercase; font-variation-settings: "wght" 650; }
.g-link.small { padding: .125rem 0; width: fit-content; line-height: 1em; overflow: hidden; }
.g-link.is-black { color: var(--negro); }
.g-link.is-hero { gap: .75rem; position: relative; padding-bottom: .125rem; }

/* subrayado que entra por la izquierda y sale por la derecha */
[data-underline-hover] { position: relative; }
[data-underline-hover]::before, [data-underline-hover]::after {
  content: ""; position: absolute; left: 0; bottom: -0.2em; width: 100%; height: .1em;
  background: var(--blanco); transform-origin: right; transform: scaleX(0) rotate(.001deg);
  transition: transform .725s var(--ease-primary);
}
[data-underline-hover="black"]::before, [data-underline-hover="black"]::after { background: var(--negro); bottom: -0.1em; }
[data-underline-hover]::before { transform-origin: left; transform: scaleX(1) rotate(.001deg); transition-delay: .2s; }
@media (min-width: 768px) {
  [data-underline-hover]:hover::before { transform-origin: right; transform: scaleX(0) rotate(.001deg); transition-delay: 0s; }
  [data-underline-hover]:hover::after { transform-origin: left; transform: scaleX(1) rotate(.001deg); transition-delay: .2s; }
}

/* cobertura negra que se desvanece al entrar la imagen (solo con JS) */
.g-image-cover { position: absolute; inset: 0; z-index: 10; background: var(--negro); pointer-events: none; display: none; }
.anima .g-image-cover { display: block; }
[data-image] { will-change: transform; }

/* revelado por líneas: el hijo se mueve dentro de un padre recortado */
.split-parent { overflow: hidden; margin-top: -0.04em; }
.split-child { will-change: transform; padding-bottom: .04em; }

/* ---------- cortina de carga ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 99999; width: 100%; height: 100svh;
  background: var(--negro); color: var(--hueso);
  display: none; justify-content: flex-start; align-items: flex-end; overflow: hidden;
}
.anima .preloader { display: flex; }
.preloader-contain { position: relative; width: 100%; height: 100%; padding: var(--margen); display: flex; justify-content: center; align-items: center; }
.preloader-fg { position: relative; width: clamp(160px, 20vw, 300px); overflow: hidden; }
.fg-text, .fg-text-dup { display: block; width: 100%; height: auto; }
.fg-text-dup { position: absolute; inset: 0 auto auto 0; }
.preloader-label { position: absolute; top: var(--margen); left: var(--margen); color: var(--hueso); line-height: 1.2em; }
.preloader-city { position: absolute; top: var(--margen); right: var(--margen); color: var(--hueso); line-height: 1.2em; }
.preloader-svg { position: absolute; right: var(--margen); bottom: var(--margen); width: 1em; animation: spin .6s linear infinite; }
.preloader-line { position: absolute; inset: auto auto 0 0; width: 100%; height: .3em; background: var(--hueso); transform: translateX(-100%); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- barra principal ---------- */
.navbar { position: absolute; z-index: 999; width: 100%; padding: 0 var(--margen); }
.navbar-contain { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; margin-top: var(--margen); gap: var(--gap); }
.navbar-left { display: flex; align-items: center; gap: 1.5rem; justify-self: start; }
.navbar-burger-wrap { overflow: hidden; }
.navbar-burger { display: flex; flex-flow: column; justify-content: center; gap: 7px; width: 34px; height: 34px; padding: 6px 2px; }
.navbar-burger-line { display: block; width: 30px; height: 2px; background: var(--blanco); transition: transform .545s var(--ease-secondary); }
.navbar-burger:hover .navbar-burger-line:first-child { transform: translateX(-4px); }
.navbar-burger:hover .navbar-burger-line:last-child { transform: translateX(4px); }
.navbar-home { display: flex; align-items: center; max-width: 100%; justify-self: center; }
.navbar-home-wrap { overflow: hidden; }
.navbar-home-text { display: flex; align-items: center; padding: .25rem 0; }
.navbar-logo { height: 48px; width: auto; display: block; }
.brand-text { color: var(--blanco); font-variation-settings: "wght" 650; letter-spacing: -0.03em; white-space: nowrap; }
.navbar-links { padding: .25rem 0; }
.anima .navbar-links { display: none; } /* con JS los enlaces viven en el menú; sin JS se quedan a la vista */
.navbar-cta { justify-self: end; }
.navbar-ul { display: flex; gap: .5rem; }
.navbar-li { display: flex; overflow: hidden; }
.navbar-coma { color: var(--blanco); padding: .125rem 0; line-height: 1em; }
.navbar-cta { display: flex; align-items: center; gap: var(--margen); }
.navbar-cta-wrap { overflow: hidden; }
.navbar-menu-btn { display: none; color: var(--blanco); overflow: hidden; position: relative; }

/* barra mini: fija, arriba a la derecha, escondida hasta los 500px */
/* barras flotantes: menú arriba a la izquierda, agenda arriba a la derecha; aparecen a los 500 px */
.navbar-mini { position: fixed; top: 0; z-index: 20; display: flex; gap: .5rem; margin: var(--margen) var(--margen) 0; pointer-events: none; overflow: hidden; }
.navbar-mini.is-left { left: 0; }
.navbar-mini.is-right { right: 0; }
.navbar-mini > * { pointer-events: auto; }
.anima .navbar-mini > * { visibility: hidden; }
/* hamburguesa flotante: mismo icono del hero, en botón redondo negro para verse sobre foto y sobre blanco */
.navbar-mini-btn.navbar-burger { width: 49px; height: 49px; padding: 0; gap: 6px; align-items: center; border-radius: 100vw; background: var(--negro); }
.navbar-mini-btn .navbar-burger-line { width: 22px; }

/* ---------- menú de pantalla completa ---------- */
.menu {
  position: fixed; inset: 0; z-index: 99999; width: 100%; height: 100dvh;
  padding: 0 var(--margen) var(--margen); background: var(--negro); color: var(--blanco);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  display: flex; flex-flow: column; justify-content: flex-end;
}
.menu-navbar { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 0 var(--margen); }
.menu-navbar-contain { display: flex; justify-content: space-between; align-items: center; margin-top: var(--margen); position: static; }
.menu-navbar-left { overflow: hidden; } /* la marca entra y sale deslizando dentro de esta caja */
/* tacha esquinada arriba a la derecha: dos líneas cruzadas, mismo trazo que la hamburguesa */
.menu-close { position: absolute; top: var(--margen); right: var(--margen); width: 34px; height: 34px; display: block; color: var(--blanco); }
.menu-close-line { position: absolute; left: 2px; top: 16px; width: 30px; height: 2px; background: var(--blanco); transform: rotate(45deg); transition: transform .545s var(--ease-secondary); }
.menu-close-line:last-child { transform: rotate(-45deg); }
.menu-close:hover .menu-close-line { transform: rotate(45deg) scaleX(.8); }
.menu-close:hover .menu-close-line:last-child { transform: rotate(-45deg) scaleX(.8); }
.menu-links { display: flex; flex-flow: column; gap: .25rem; }
.menu-li { display: flex; }
.menu-link { line-height: 1em; }
.menu-text { --roll: 1.1em; }
.anima .menu-text { transform: translateY(102%); }

/* ---------- hero ---------- */
.page-main { position: relative; }
.hero { position: relative; margin-bottom: -100svh; overflow: clip; }
.hero-content { position: sticky; top: 0; display: flex; align-items: flex-end; width: 100%; height: 100svh; overflow: hidden; }
.hero-spacer { pointer-events: none; height: 100svh; }
.hero-list { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-interior { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; z-index: 2; background: var(--negro); opacity: 0; pointer-events: none; }
.hero-overlay.is-interior { transition: opacity 1s var(--ease-transition); }
.hero-cover { position: absolute; inset: 0; z-index: 2; will-change: transform; }
.hero-image-contain { width: 100%; height: 100%; }
.hero-facade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .875s var(--ease-transition), transform .875s var(--ease-transition); }
/* el titular vive a media altura, con el pie de foto de la obra debajo; nada oscurece la imagen */
.hero-contain { position: absolute; z-index: 4; left: 0; right: 0; top: 50%; transform: translateY(-40%); width: 100%; padding: 0 var(--margen); display: flex; }
.hero-bottom { display: flex; flex-flow: column; align-items: flex-start; width: 100%; color: var(--blanco); }
.hero-heading { max-width: 16em; color: var(--blanco); font-size: calc(var(--u) * 2.6); line-height: 1.1em; letter-spacing: -0.03em; font-variation-settings: "wght" 530; font-weight: 500; text-shadow: none; }
.hero-foot { position: absolute; z-index: 4; left: var(--margen); right: var(--margen); bottom: var(--margen); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .25rem 0; color: var(--blanco); overflow: hidden; }
.hero-foot-left { display: flex; gap: 2rem; justify-self: start; }
.hero-foot .g-link { justify-self: center; }
.hero-scroll { justify-self: end; color: var(--blanco); }
/* al pasar sobre el enlace de obras, la fachada se recoge y aparece la otra cara de la casa */
.hero-content:has(.g-link.is-hero:hover) .hero-facade, .hero-content:has(.g-link.is-hero:focus-visible) .hero-facade { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: scale(1); }
.hero-content:has(.g-link.is-hero:hover) .hero-overlay.is-interior { opacity: .25; }

/* ---------- estudio ---------- */
.about { position: relative; z-index: 2; background: var(--hueso); padding: calc(var(--u) * 2.86) var(--margen) var(--pad-seccion); align-items: start; }
.about-left { grid-column: 1 / 7; display: flex; flex-flow: column; align-items: flex-start; gap: calc(var(--u) * 1.9); }
.about-heading { margin: 0; }
.about-paragraph { max-width: 34ch; }
.about-right { grid-column: 7 / 13; }
.about-image-cover { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; }
.about-image { width: 100%; height: 100%; object-fit: cover; }
.about-caption { display: flex; justify-content: space-between; margin-top: .75rem; color: var(--gris-oscuro); line-height: 1em; }

/* ---------- obras ---------- */
.works { position: relative; z-index: 2; background: var(--hueso); padding: 0 var(--margen) var(--pad-seccion); }
.works-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: calc(var(--u) * 1.9); }
.works-text { width: fit-content; }
.works-count { color: var(--gris-oscuro); padding-bottom: 1.15em; white-space: nowrap; text-align: right; } /* su línea base cae sobre la de «RECIENTES» */
.works-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: calc(var(--u) * 6.68); }
.works-item-wrap { display: block; width: 100%; }
.works-image-cover { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.works-image { width: 100%; height: 100%; object-fit: cover; }
.works-content { display: flex; justify-content: space-between; margin-top: .75rem; line-height: 1em; overflow: hidden; }
.works-title { display: flex; }
.works-index { display: flex; margin-right: 1.5rem; }
.works-aside { display: flex; flex-flow: column; align-items: flex-end; position: relative; }
.works-year { color: var(--gris-oscuro); transition: transform .545s var(--ease-secondary); }
.works-cta { transition: transform .545s var(--ease-secondary); }
@media (min-width: 1060px) {
  .works-cta { position: absolute; right: 0; top: 0; transform: translateY(100%); }
  .works-item-wrap:hover .works-cta, .works-item-wrap:focus-visible .works-cta { transform: translateY(0); }
  .works-item-wrap:hover .works-year, .works-item-wrap:focus-visible .works-year { transform: translateY(-100%); }
}
@media (max-width: 1059px) { .works-cta { display: none; } }

/* ---------- servicios ---------- */
.process { position: relative; z-index: 2; padding: 0 var(--margen) var(--pad-seccion); align-items: start; }
.process-head { grid-column: 1 / 10; margin-bottom: calc(var(--u) * 1.9); }
.process-head .process-text { margin-top: 1rem; max-width: 20em; }
.process-left { grid-column: 1 / 8; display: flex; flex-flow: column; align-items: flex-start; gap: calc(var(--u) * 1.9); }
.process-left-cover { position: relative; overflow: hidden; aspect-ratio: 1; }
.process-left-image { width: 100%; height: 100%; object-fit: cover; }
.process-list { width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.process-item { display: flex; flex-flow: column; align-items: flex-start; will-change: transform; }
.process-contain { display: flex; align-items: center; margin: .5rem 0; overflow: hidden; }
.process-animate { display: flex; align-items: center; }
.process-index { min-width: 2.5rem; color: var(--gris-oscuro); }
.process-title { color: var(--negro); }
.process-line { width: 100%; height: 1px; background: var(--gris); }
.process-right { grid-column: 9 / 13; }

/* ---------- cierre ---------- */
.cta { position: relative; z-index: 2; padding: 0 var(--margen) calc(var(--u) * 1.9); display: flex; flex-flow: column; }
.cta-contain { margin-bottom: calc(var(--u) * 1.9); }
.cta-heading { text-wrap: wrap; }
.cta-button { display: flex; justify-content: flex-start; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- pie ---------- */
.footer { position: relative; z-index: 2; padding: calc(var(--u) * 1.9) var(--margen) 1rem; border-top: 1px solid var(--gris); }
.footer-top > * { grid-row: 1; } /* el retrato va en la columna 11 y el DOM lo pone antes que la navegación: sin esto, la rejilla manda nav y contacto a la fila 2 */
.footer-brand { grid-column: 1 / 5; }
.footer-logo { width: 62%; height: auto; }
.footer-claim { margin-top: 1.5rem; max-width: 22ch; color: var(--gris-oscuro); }
.footer-image { grid-column: 11 / 13; }
.footer-file { position: relative; overflow: hidden; aspect-ratio: 2 / 2.5; margin-bottom: .75rem; }
.footer-asset { width: 100%; height: 100%; object-fit: cover; }
.footer-caption { color: var(--gris-oscuro); line-height: 1.2em; }
.footer-nav { grid-column: 5 / 8; }
.footer-contact { grid-column: 8 / 11; }
.footer-nav-list { display: flex; flex-flow: column; margin-top: 1rem; }
.footer-link { display: block; line-height: 1em; }
.footer-text { --roll: 1.1em; font-size: calc(var(--u) * 2.859); }
.footer-address { margin-top: 1.25rem; color: var(--gris-oscuro); }
.footer-bottom { margin-top: calc(var(--u) * 6.68); align-items: end; }
.footer-copyright { grid-column: 1 / 5; display: flex; flex-flow: column; gap: .25rem; text-transform: uppercase; font-variation-settings: "wght" 650; }
.footer-bottom-text { line-height: 1em; text-transform: uppercase; font-variation-settings: "wght" 650; }
.footer-bottom-value { line-height: 1em; }
.footer-legals { grid-column: 5 / 9; display: flex; flex-flow: column; align-items: center; }
.footer-links { grid-column: 9 / 13; display: flex; justify-content: flex-end; align-items: flex-end; }
.footer-huy { position: relative; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- tableta y móvil ---------- */
@media (max-width: 991px) {
  :root { --margen: 20px; }
  .about-left { grid-column: 1 / 7; }
  .about-right { grid-column: 7 / 13; }
  .process-left { grid-column: 1 / 9; }
  .process-right { grid-column: 9 / 13; }
  .footer-brand { grid-column: 1 / 4; }
  .footer-nav { grid-column: 4 / 7; }
  .footer-contact { grid-column: 7 / 11; }
}
@media (max-width: 767px) {
  :root { --margen: 14px; --pad-seccion: calc(var(--u) * 5.76); }
  .display { font-size: calc(var(--u) * 3.227); }
  .h2 { font-size: calc(var(--u) * 2.6); }
  .h3 { font-size: calc(var(--u) * 1.538); }
  .h4 { font-size: calc(var(--u) * 1.2125); }
  .large { font-size: var(--u); }
  .navbar-links { display: none; }
  .navbar-cta-wrap { display: none; }
  .navbar-menu-btn { display: flex; }
  .navbar-contain { grid-template-columns: 1fr auto 1fr; }
  .navbar-logo { height: 34px; }
  .navbar-mini { margin: var(--margen) var(--margen) 0; }
  .navbar-mini.is-right { display: none; }
  .hero-contain { transform: translateY(-30%); }
  .hero-heading { font-size: calc(var(--u) * 1.55); max-width: 15em; }
  /* pie del hero en celular: solo «ver obras» a la izquierda y «desliza» a la derecha */
  .hero-foot { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .hero-foot .g-link { justify-self: start; }
  .hero-foot .hero-scroll { justify-self: end; }
  .hero-foot-left { display: none; }
  /* menú en celular: media pantalla, no toda; el telón se recoge igual */
  .menu { inset: 0 0 auto 0; height: auto; min-height: 0; max-height: 100dvh; padding-top: calc(var(--margen) * 2 + 34px + 1.25rem); padding-bottom: calc(var(--u) * 2); justify-content: flex-start; }
  .menu-links { gap: .5rem; }
  .about { padding-top: calc(var(--u) * 2.29); }
  .about-left, .about-right { grid-column: 1 / 13; }
  .about-left { gap: calc(var(--u) * 1.4); }
  .about-paragraph { max-width: none; }
  .footer-text { font-size: calc(var(--u) * 1.6); }
  .cta-heading { font-size: calc(var(--u) * 2.2); }
  .cta-heading br { display: none; }
  .works-heading { flex-flow: column; align-items: flex-start; gap: .75rem; }
  .works-count { white-space: normal; padding-bottom: 0; }
  .works-list { grid-template-columns: 1fr; row-gap: calc(var(--u) * 3.1); }
  .process { display: flex; flex-flow: column; gap: calc(var(--u) * 2.5); }
  .process-head, .process-left, .process-right { grid-column: auto; margin-bottom: 0; }
  .process-list { grid-template-columns: 1fr; }
  /* pie en celular: dos columnas ordenadas — marca, luego navegación|contacto, luego retrato con su pie */
  .footer { padding-top: calc(var(--u) * 1.76); }
  .footer-top { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: calc(var(--u) * 2); }
  .footer-top > * { grid-row: auto; }
  .footer-brand { grid-column: 1 / 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .footer-logo { width: 34%; }
  .footer-claim { margin: 0; max-width: 15ch; text-align: right; font-size: 14px; }
  .footer-nav { grid-column: 1; }
  .footer-contact { grid-column: 2; }
  .footer-nav-list { margin-top: .75rem; }
  .footer-address { margin-top: .75rem; font-size: 14px; }
  .footer-image { grid-column: 1 / 3; order: 5; width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: end; }
  .footer-file { margin: 0; }
  .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem var(--gap); margin-top: calc(var(--u) * 2.2); align-items: end; }
  .footer-copyright { grid-column: 1 / 3; }
  .footer-legals { grid-column: 1; align-items: flex-start; }
  .footer-links { grid-column: 2; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CORTINA DE ACCESO — temporal, mientras el sitio no se abre al público.
   Al revés que una cortina de bienvenida: ésta NACE PUESTA y el JS sólo la
   RETIRA. Por eso el bloqueo de scroll va aquí y no en el script: si el JS
   falla, una puerta tiene que quedarse CERRADA, no abierta.
   Se quita borrando este bloque y los tres de index.html.
   ═══════════════════════════════════════════════════════════════════════ */
html:not([data-abierto]) body { overflow: hidden; }
html[data-abierto] .cortina { display: none; }

.cortina {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  padding: var(--margen);
  background: var(--negro);
  color: var(--hueso);
  overflow-y: auto;
}
.cortina-caja { width: min(560px, 100%); text-align: left; }
.cortina-marca {
  margin: 0 0 clamp(20px, 4vh, 38px);
  font-size: 12px; font-weight: var(--w-bold);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris);
}
.cortina-titulo {
  margin: 0 0 18px;
  font-size: clamp(32px, 6.4vw, 58px); font-weight: var(--w-bold);
  line-height: 1.04; letter-spacing: -.02em;
}
.cortina-lead {
  margin: 0 0 clamp(26px, 5vh, 40px);
  max-width: 44ch;
  font-size: clamp(15px, 1.6vw, 17px); font-weight: var(--w-body);
  line-height: 1.55; color: rgba(252, 252, 252, .60);
}
.cortina-forma { display: flex; flex-wrap: wrap; gap: 10px; }
.cortina-campo {
  flex: 1 1 220px; min-width: 0;
  height: 54px; padding: 0 18px;
  font: var(--w-body) 16px/1 var(--font);   /* 16px o iOS hace zoom al enfocar */
  color: var(--hueso);
  background: transparent;
  border: 1px solid rgba(252, 252, 252, .22);
  border-radius: 0; outline: none;
  transition: border-color .22s var(--ease-secondary);
  -webkit-appearance: none; appearance: none;
}
.cortina-campo::placeholder { color: rgba(252, 252, 252, .36); }
.cortina-campo:focus { border-color: var(--hueso); }
.cortina-boton {
  height: 54px; padding: 0 30px;
  font: var(--w-bold) 13px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--negro); background: var(--hueso);
  border: 0; border-radius: 0; cursor: pointer;
  transition: transform .22s var(--ease-secondary), opacity .22s var(--ease-secondary);
}
.cortina-boton:hover { opacity: .86; }
.cortina-boton:active { transform: scale(.97); }
.cortina-error {
  margin: 16px 0 0; min-height: 1.2em;
  font-size: 14px; font-weight: var(--w-body); color: var(--gris);
}
/* Salida: sólo opacity y transform, que no recalculan la página (§7-bis) */
.cortina-sale {
  opacity: 0; transform: translateY(-14px);
  transition: opacity .42s var(--ease-transition), transform .42s var(--ease-transition);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cortina-sale { transition-duration: .01ms; }
  .cortina-boton, .cortina-campo { transition: none; }
}