/* ═══════════════════════════════════════════════════════════════
   ESSENCIAL ARQUITECTURA — estilos
   Dirección: minimalismo editorial de galería. Negro de marca,
   hueso cálido y azul solo como acento.
   ═══════════════════════════════════════════════════════════════ */

/* Poppins alojada en el propio sitio (licencia OFL), en lugar de Google Fonts: la página no depende de terceros,
   la política de seguridad solo permite este dominio y no se envían datos de los visitantes a Google.
   Solo los pesos que se usan (200–500) y el juego latino, que trae tildes, ñ, ¿ y ¡. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('assets/fonts/poppins-200.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('assets/fonts/poppins-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ── Paleta (← EDITAR si el cliente entrega su azul exacto) ── */
  --ink:      #141414;   /* negro de marca (logo: #1D1E1C) */
  --ink-2:    #1E1E1D;
  --paper:    #F4F1EC;   /* hueso cálido */
  --paper-2:  #EAE6DF;
  --white:    #FFFFFF;
  --mute:     #66625B;   /* texto secundario sobre claro (5,3:1) */
  --mute-l:   #ABA69D;   /* texto secundario sobre oscuro */
  --line:     rgba(20, 20, 20, .14);
  --line-l:   rgba(244, 241, 236, .2);
  --blue:     #27466E;   /* azul de acento — PROVISIONAL hasta confirmar con el cliente */
  --blue-l:   #9DB9DD;   /* el mismo azul, aclarado para fondos oscuros */
  --bad:      #A23B2A;

  /* ── Tipografía: Poppins, la misma de mdvarquitectura.com (referencia del cliente).
        Títulos en 200/300, mayúsculas y tracking amplio, como allá. ── */
  --display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --sans:    'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* ── Ritmo ── */
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1360px;
  --hdr: clamp(80px, 8vw, 150px);   /* header alto como MDV (155 px a 1920); fijo, no cambia al bajar */
  --sec: clamp(5.5rem, 11vw, 10rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 1rem/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* grano muy sutil: le quita lo "digital" a los planos de color */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1.1em; }
h1, h2, h3 { margin: 0; font-weight: 300; }
ul, ol { list-style: none; margin: 0; padding: 0; }
/* sin cursivas (como MDV): el énfasis en títulos se marca con peso, 200 frente a 400 */
em { font-style: normal; }
b { font-weight: 500; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1.5px solid var(--blue); outline-offset: 4px; }
/* fotos pulsables: sin recuadro azul (pedido del cliente); el foco con teclado se nota por el zoom suave de la foto */
.svc:focus-visible, .caso__main:focus-visible, .gi:focus-visible { outline: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 300;
  background: var(--ink); color: var(--paper); padding: .8rem 1.2rem;
  font: 500 .75rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.skip:focus { top: 1rem; }

/* ── Piezas tipográficas ──────────────────────────────────────── */
.kicker {
  display: flex; align-items: flex-start; gap: .9em;
  margin: 0 0 1.6rem;
  font: 500 .66rem/1.7 var(--sans);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--mute);
}
.kicker--light { color: rgba(244, 241, 236, .78); }

/* títulos al estilo MDV: Poppins fina, mayúsculas y tracking amplio */
.h2 {
  font: 200 clamp(1.55rem, 2.9vw, 2.6rem)/1.4 var(--display);
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1.8rem;
}
.h2 em { font-weight: 400; }

.lead {
  font: 300 clamp(1.06rem, 1.35vw, 1.22rem)/1.75 var(--display);
  color: var(--ink);
  margin-bottom: 1.2rem;
}

/* ── Botones y enlaces ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 3.35rem; padding: 0 2rem;
  border: 1px solid currentColor;
  font: 500 .74rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--paper:hover { background: transparent; color: var(--paper); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--blue); border-color: var(--blue); }
.btn--line { background: transparent; }
/* brillo al pasar el cursor (pedido del cliente): una franja de luz cruza el botón una vez en diagonal, por debajo
   del texto y sin halo. El botón conserva su color: no se vuelve platino, azul ni transparente.
   Lo llevan «Agenda tu cita» del header, «Contáctanos y agenda tu cita», «Enviar por WhatsApp» y el botón
   flotante de WhatsApp (que conserva su position: fixed, definida más abajo). En los botones negros la luz es
   más tenue para que no encandile. */
.brillo { position: relative; overflow: hidden; isolation: isolate; }
.brillo::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -20%; bottom: -20%; left: 0; width: 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45) 34%, #fff 50%, rgba(255, 255, 255, .45) 66%, rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-22deg);
}
.hdr__cta.brillo::after,
.btn--ink.brillo::after,
.fab.brillo::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .12) 34%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .12) 66%, rgba(255, 255, 255, 0));
}
.btn--paper.brillo:hover { background: var(--paper); color: var(--ink); }
.btn--ink.brillo:hover { background: var(--ink); border-color: var(--ink); }
@media (hover: hover) {
  .brillo:hover::after { transform: translateX(360%) skewX(-22deg); transition: transform 1.2s cubic-bezier(.42, 0, .58, 1) .1s; }
}

.link {
  display: inline-flex; align-items: center; gap: .8em;
  font: 500 .74rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  padding-bottom: .35em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out);
}
.link:hover { background-size: 100% 1px; }

/* ── Imágenes con espacio provisional ─────────────────────────── */
/* Si el archivo aún no existe, script.js añade .is-ph (escucha el error de carga del <img>) y se ve
   un marcador con el nombre exacto del archivo que va en ese lugar. */
.media { position: relative; display: block; overflow: hidden; background: var(--paper-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.is-ph img { display: none; }
.media.is-ph {
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(20, 20, 20, .045) 63px 64px),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(20, 20, 20, .045) 63px 64px),
    linear-gradient(155deg, #ECE7DF 0%, #DCD5CA 100%);
}
.media.is-ph::after {
  content: attr(data-ph); position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem;
  font: 500 .66rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(20, 20, 20, .5);
}
/* variante oscura (hero, banda de cierre, visor) */
.hero .media.is-ph, .valor .media.is-ph, .visor .media.is-ph {
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(244, 241, 236, .045) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(244, 241, 236, .045) 79px 80px),
    radial-gradient(120% 90% at 70% 30%, #34322E 0%, #171716 70%);
}
.hero .media.is-ph::after, .valor .media.is-ph::after, .visor .media.is-ph::after { color: rgba(244, 241, 236, .45); }
.hero .media.is-ph::after { top: 1.2rem; bottom: auto; left: var(--pad); }

/* ═══ HEADER ═══════════════════════════════════════════════════
   Como en MDV: franja blanca y alta arriba; el hero empieza debajo.
   Fija y sólida: no cambia de alto ni de estilo al hacer scroll (pedido del cliente).
   --hdr fija el alto (y el espacio que deja <main>). */
.hdr {
  --iso: clamp(2.5rem, 3.4vw, 3.6rem);              /* alto del isotipo; el resto escala con él */
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--hdr);
  background: var(--white); color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
main { padding-top: var(--hdr); }
section[id] { scroll-margin-top: var(--hdr); }

.hdr__in {
  height: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.lockup { display: flex; align-items: center; gap: calc(var(--iso) * .32); flex: none; }
.lockup svg { fill: currentColor; }
.lockup__iso { height: var(--iso); width: calc(var(--iso) * .4147); }                   /* 294 × 709 */
.lockup__nombre { height: calc(var(--iso) * .62); width: calc(var(--iso) * .62 * 4.4265); } /* 602 × 136 */

/* menú en tipo oración, como MDV */
.nav { display: flex; gap: clamp(1.4rem, 2.4vw, 2.4rem); margin-left: auto; }
.nav a {
  position: relative; padding: .4rem 0;
  font: 400 clamp(.9rem, 1.05vw, 1.02rem)/1 var(--sans); letter-spacing: .01em;
  transition: color .3s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.1rem; height: 1px;
  background: var(--blue); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav a:hover, .nav a.is-on { color: var(--mute); }
.nav a:hover::after, .nav a.is-on::after { transform: scaleX(1); transform-origin: left; }

.hdr__end { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.social { display: flex; align-items: center; gap: 1.1rem; }
.social a { opacity: .85; transition: opacity .3s, transform .3s var(--ease-out); }
.social a:hover { opacity: 1; transform: translateY(-2px); }
.social svg { width: 1.1rem; height: 1.1rem; }
.social--hdr { gap: 1.4rem; }
.social--hdr svg { width: 1.3rem; height: 1.3rem; }
.hdr__cta {
  display: inline-flex; align-items: center; gap: .9rem;
  min-height: 3.1rem; padding: 0 1.7rem;
  background: var(--ink); color: var(--paper);
  font: 400 clamp(.88rem, 1vw, .98rem)/1 var(--sans); letter-spacing: .01em; white-space: nowrap;
  transition: background .4s var(--ease);
}
.hdr__cta svg { width: .95rem; height: .95rem; transition: transform .4s var(--ease-out); }
.hdr__cta:hover svg { transform: translateX(.25rem); }
/* al bajar por la página el logo queda completo y en su sitio; solo la llama (isotipo) se vuelve a dibujar sola,
   como la de Estudio y más ágil: se desvanece (0,3 s), se traza el contorno y se rellena (1,8 s), cada vez que
   se sale del inicio. El resto de la barra no cambia. script.js pone .desplazado.
   (Ajuste del 22-oct-2026; antes la palabra se ocultaba y la llama saltaba a la segunda «e».)
   En celular el logo no se anima. */
@media (min-width: 981px) {
  .hdr.desplazado .lockup__iso path {
    stroke: currentColor; stroke-width: 80; stroke-linejoin: round;   /* 80 unidades del trazo ≈ 1 px en pantalla */
    stroke-dasharray: var(--largo);
    animation: dibujarIso 2.1s linear both;
  }
}
/* 0–0,3 s se desvanece; 0,3–1,7 s se traza el contorno, parejo; 1,4–2,1 s se rellena (el relleno empieza antes de
   que acabe el trazo). La llama de Estudio usa el mismo ritmo (.trazo.is-drawn). */
@keyframes dibujarIso {
  0%    { opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; fill-opacity: 1; animation-timing-function: linear; }
  14%   { opacity: 0; stroke-opacity: 0; stroke-dashoffset: 0; fill-opacity: 1; animation-timing-function: step-end; }
  14.3% { opacity: 1; stroke-opacity: 1; stroke-dashoffset: var(--largo); fill-opacity: 0; animation-timing-function: linear; }
  66.7% { fill-opacity: 0; animation-timing-function: linear; }
  81%   { stroke-dashoffset: 0; }
  100%  { opacity: 1; stroke-opacity: 1; stroke-dashoffset: 0; fill-opacity: 1; }
}

.burger { display: none; width: 2.75rem; height: 2.75rem; position: relative; }
/* franja negra de arriba y menú negro de abajo: solo en celular y tableta (bloque ≤980 px) */
.franja, .barra-sec { display: none; }
.burger span {
  position: absolute; left: .55rem; right: .55rem; height: 1px; background: currentColor;
  transition: transform .4s var(--ease-out), top .3s var(--ease), left .3s var(--ease);
}
.burger span:first-child { top: 1.1rem; }
.burger span:last-child { top: 1.6rem; left: 1.05rem; }
.burger:hover span:last-child { transform: translateX(-.5rem); }

/* menú móvil, como MDV: una lista blanca que baja bajo el header (que sigue encima, con ☰ vuelto ✕),
   filas en tipo oración con líneas finas y la sección activa con fondo hueso; detrás, un velo sobre la página */
.drawer {
  position: fixed; inset: var(--hdr) 0 var(--abajo, 0px); z-index: 59;
  background: rgba(20, 17, 15, .35);
  animation: fadeIn .3s var(--ease) both;
}
.drawer__nav {
  background: var(--white);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .3);
  animation: bajar .4s var(--ease-out) both;
}
.drawer__nav a {
  display: block; padding: 1rem var(--pad);
  border-top: 1px solid var(--line);
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  transition: background .3s;
}
.drawer__nav a.is-on, .drawer__nav a:active { background: var(--paper-2); }
@keyframes bajar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* ☰ → ✕ mientras el menú está abierto */
.hdr.menu-on .burger span:first-child { top: 1.35rem; transform: rotate(45deg); }
.hdr.menu-on .burger span:last-child { top: 1.35rem; left: .55rem; transform: rotate(-45deg); }

/* ═══ 1. HERO ══════════════════════════════════════════════════ */
/* Medidas del slider de MDV (medidas en Chrome sobre mdvarquitectura.com, barrido de 1200 a 2200 px):
   - Escritorio (≥1200 px): header de 126 px y la foto SIEMPRE termina 55 px por debajo del borde
     inferior de la pantalla (100vh + 55px), sin importar el ancho. Así el título queda al borde
     de la pantalla e invita a bajar. Aquí: el hero empieza bajo el header y termina en ese punto.
   - Tableta 4:3 y celular vertical 9:16 (media queries al final). */
.hero {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink-2); color: var(--paper);
}
@media (min-width: 1200px) {
  :root { --hdr: 126px; }
  .hero { aspect-ratio: auto; height: calc(100vh + 55px - var(--hdr)); }
}
.hero__slides, .slide { position: absolute; inset: 0; }
/* fundido de 0,8 s con easeOutQuad, como el Smart Slider de MDV (HERO_FUNDIDO en script.js) */
.slide { opacity: 0; transition: opacity .8s cubic-bezier(.25, .46, .45, .94); }
.slide.is-on { opacity: 1; z-index: 1; }
.slide .media { position: absolute; inset: 0; background: var(--ink-2); }
.slide img { object-position: var(--pos, 50% 50%); }

/* velo uniforme como MDV (negro al 23 %, medido en sus diapositivas; pedido del cliente),
   y un poco más oscuro abajo, donde va el título de la foto */
.hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .23), rgba(0, 0, 0, .23)),
    linear-gradient(0deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, 0) 38%);
}

/* pie de cada foto con la tipografía exacta del slider de MDV (medida en Chrome; pedido del cliente):
   Poppins en mayúsculas, 5 px entre letras, interlineado 1,5, blanco puro y sin sombra.
   Título 40 px / peso 300 y ubicación 20 px / peso 200 en computador; 24/14 px en tableta; 12/8 px en celular. */
.hero__content {
  position: absolute; z-index: 3;
  left: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  right: calc(var(--pad) + 8rem);
  bottom: clamp(1.6rem, 4.4vw, 4.4rem);
  color: #fff;
  transition: opacity .48s var(--ease), transform .48s var(--ease);
}
.hero.pie-fuera .hero__content { opacity: 0; transform: translateY(8px); }
.hero__title {
  margin: 0;
  font: 300 2.5rem/1.5 var(--display);
  letter-spacing: 5px; text-transform: uppercase;
  text-wrap: balance;
}
.hero__lugar {
  margin: 0;
  font: 200 1.25rem/1.5 var(--display);
  letter-spacing: 5px; text-transform: uppercase;
}
/* en computador el texto termina 25 px sobre el borde de la pantalla, como MDV (la foto sigue 55 px más abajo) */
@media (min-width: 1200px) { .hero__content { bottom: calc(55px + 25px); } }
@media (max-width: 1199px) {
  .hero__title { font-size: 1.5rem; }
  .hero__lugar { font-size: .875rem; }
}
.js .hero__content { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease-out) .2s, transform 1.1s var(--ease-out) .2s; }
.is-loaded .hero__content { opacity: 1; transform: none; }
.is-loaded .hero.pie-fuera .hero__content { opacity: 0; transform: translateY(8px); transition: opacity .48s var(--ease), transform .48s var(--ease); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══ 2. ESTUDIO ═══════════════════════════════════════════════ */
.estudio { padding: var(--sec) 0 calc(var(--sec) * .8); }
.estudio__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}
.estudio__txt { grid-column: 1 / span 6; }
.estudio__txt > p:not(.kicker):not(.lead) { color: var(--mute); max-width: 34rem; }
.estudio__fig { grid-column: 8 / span 5; position: relative; margin: 0; }
.media--tall { aspect-ratio: 4 / 5; }

.trazo {
  position: absolute; left: -32%; bottom: -9%;
  width: 52%; aspect-ratio: 4 / 5;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  padding: 1.5rem;
  box-shadow: 0 30px 60px -30px rgba(20, 20, 20, .25);
}
.trazo__svg { height: 66%; width: auto; overflow: visible; }
.trazo__svg path {
  fill: var(--ink); fill-opacity: 0;
  /* unidades locales del trazo (escala 1/6): 26 ≈ 1,4 px en pantalla */
  stroke: var(--ink); stroke-width: 26; stroke-linejoin: round;
}
/* mismo ritmo que la llama del header (@keyframes dibujarIso, pedido del cliente el 22-oct-2026): el contorno se
   traza parejo en 1,4 s y el relleno entra a los 1,1 s y dura 0,7 s (1,8 s en total; antes eran 2,6 s + 1,2 s) */
.trazo.is-drawn .trazo__svg path {
  stroke-dashoffset: 0 !important;
  fill-opacity: 1;
  transition: stroke-dashoffset 1.4s linear, fill-opacity .7s linear 1.1s;
}
.trazo__lema {
  margin: 0; text-align: center;
  font: 400 .6rem/1.6 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--mute);
}

/* cifras bajo Proyectos destacados (Ajuste #1), en una franja negra de borde a borde con letras claras (pedido del cliente) */
.cifras-franja {
  background: #000; color: var(--paper);
  padding: clamp(3.5rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--line-l);   /* la separa de la franja oscura de «¿Deseas…?» */
}
.cifras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 0;
}
.cifra { padding: .4rem clamp(1rem, 2.5vw, 2.5rem) .4rem 0; }
.cifra + .cifra { padding-left: clamp(1.5rem, 3.5vw, 3.5rem); border-left: 1px solid var(--line-l); }
.cifra__n {
  display: block;
  font: 200 clamp(3.4rem, 7vw, 6rem)/1 var(--display);
  letter-spacing: -.01em; margin-bottom: 1rem;
}
.cifra__t { display: block; max-width: 15rem; font-size: .9rem; line-height: 1.6; color: var(--mute-l); }

/* ═══ Cortina Estudio → Servicios (como MDV) ════════════════════
   Estudio se queda quieto cuando su borde inferior toca el de la pantalla (o bajo el header,
   si cabe entero) y Servicios sube por encima. --alto lo pone script.js; se usa svh para que
   la barra del navegador del celular no lo haga saltar. */
.cortina { scroll-margin-top: var(--hdr); }
.cortina > .estudio {
  position: sticky; z-index: 0; background: var(--paper);
  top: min(var(--hdr), calc(100vh - var(--alto, 100vh) - var(--abajo, 0px)));
  top: min(var(--hdr), calc(100svh - var(--alto, 100svh) - var(--abajo, 0px)));
}
.cortina > .servicios { position: relative; z-index: 1; box-shadow: 0 -28px 56px -32px rgba(20, 20, 20, .22); }

/* ═══ 3. SERVICIOS ═════════════════════════════════════════════ */
.servicios { background: var(--white); padding: clamp(3.5rem, 6.5vw, 6.25rem) 0 var(--sec); } /* arriba más corto: pedido del cliente */
.shead { max-width: 48rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.shead__lead { color: var(--mute); max-width: 34rem; margin: 0; }
/* encabezado centrado (Servicios); el padding-left compensa el tracking de la última letra para que el centrado sea óptico */
.shead--center { max-width: 60rem; margin-inline: auto; text-align: center; }
.shead--center .kicker { justify-content: center; padding-left: .3em; }
.shead--center .h2 { padding-left: .16em; }
.servicios .shead--center .h2 em { display: block; }
.shead--center .shead__lead { max-width: 36rem; margin-inline: auto; }
.shead--center .h2:last-child { margin-bottom: 0; }

/* tarjetas como PrintSoul (pedido del cliente): a todo el ancho con 32 px a los lados y 12 px entre fotos,
   foto 3:4 con velo suave y el título centrado encima; al pasar el cursor el velo se aclara y la foto crece un 3 % */
.svcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 12px; padding-inline: 32px; }
.svc { position: relative; display: block; width: 100%; }
/* «Ver galería» bajo Apartamentos, Casas y Comercial (ajuste de Juan Pablo): texto fino centrado
   con una línea corta debajo que se alarga al pasar el cursor */
.svc-item { display: flex; flex-direction: column; align-items: center; }
.svc__gal {
  position: relative; margin-top: 1.15rem; padding: .35rem 0 .6rem .26em;
  font: 500 .68rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink);
}
.svc__gal::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 1.6rem; height: 1px;
  background: currentColor; transform: translateX(-50%); transition: width .5s var(--ease-out);
}
.svc__gal:hover::after, .svc__gal:focus-visible::after { width: 100%; }
.media--svc { aspect-ratio: 3 / 4; }
.media--svc img { transition: transform .62s cubic-bezier(.22, .61, .36, 1); }
.svc:hover .media--svc img, .svc:focus-visible .media--svc img { transform: scale(1.03); }

.svc__t {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(20, 17, 15, .32);
  color: #fff; text-align: center;
  font: 500 clamp(.82rem, .6rem + .5vw, 1rem)/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  transition: background .32s cubic-bezier(.22, .61, .36, 1);
}
.svc:hover .svc__t, .svc:focus-visible .svc__t { background: rgba(20, 17, 15, .16); }

/* ═══ Manifiesto ═══════════════════════════════════════════════ */
.manifiesto {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  padding: clamp(6.5rem, 13vw, 11.5rem) 0;
}
.manifiesto__iso {
  position: absolute; right: -3%; top: 50%;
  height: 135%; width: 56%; transform: translateY(-50%);
  fill: rgba(244, 241, 236, .045);
  pointer-events: none;
}
.manifiesto__q { margin: 0 0 3rem; max-width: 60rem; position: relative; }
.manifiesto__q p {
  margin: 0;
  font: 200 clamp(1.45rem, 3vw, 2.6rem)/1.5 var(--display);
  letter-spacing: .02em;
}
.manifiesto__q em { color: var(--blue-l); font-weight: 300; }
.manifiesto__firma {
  display: flex; align-items: center; gap: .8rem clamp(1.6rem, 3vw, 2.6rem); flex-wrap: wrap; margin: 0;
  font: 500 .7rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: var(--mute-l);
}
/* entrada de la frase: cada palabra llega desde la izquierda, se aclara y se enfoca; luego la firma.
   script.js parte el texto en .pal con su orden en --i y añade .is-in a la sección al verla. */
.js .manifiesto .pal,
.js .manifiesto__firma span {
  display: inline-block;
  opacity: 0; transform: translateX(-1.1em); filter: blur(8px);
  transition: opacity 1.5s var(--ease-out), transform 1.8s var(--ease-out), filter 1.5s var(--ease-out);
}
.js .manifiesto .pal { transition-delay: calc(var(--i) * 65ms); }
.js .manifiesto__firma span { transform: translateX(-2.2em); transition-delay: calc(var(--fin, 1.4s) + var(--j) * 180ms); }
.js .manifiesto.is-in .pal,
.js .manifiesto.is-in .manifiesto__firma span { opacity: 1; transform: none; filter: none; }

/* ═══ 4. PROYECTOS DESTACADOS ══════════════════════════════════ */
.casos { padding: clamp(3.5rem, 6.5vw, 6.25rem) 0; } /* más corto arriba y abajo que las demás secciones: pedido del cliente */
/* un proyecto a la vez, todos en la misma posición: foto grande a la izquierda y el texto a la mitad
   de su altura. Cambian solos con el fundido del hero o con las flechas de los lados (pedido del cliente).
   Los tres ocupan la misma celda, así la sección no cambia de alto al pasar de uno a otro. */
.casos__slider { position: relative; }
.casos__list { display: grid; }
.casos__list > .caso { grid-area: 1 / 1; }
/* foto 63 % · aire 5 % · texto 32 % del ancho: el texto cerca de la foto y el testimonio en 2 o 3 líneas (pedido del cliente) */
.caso {
  display: grid; grid-template-columns: minmax(0, 63fr) minmax(0, 32fr); column-gap: 5%;
  align-items: center;
  pointer-events: none;
}
.caso.is-on { z-index: 1; pointer-events: auto; }
.caso__fotos { grid-column: 1; }
.caso__txt { grid-column: 2; }

/* fundido como el hero (0,8 s, easeOutQuad): la foto nueva aparece encima y la anterior se retira al terminar,
   así nunca se ve el fondo entre las dos. El texto sale rápido y el nuevo entra cuando la foto va por la mitad. */
.caso__fotos { opacity: 0; transition: opacity 0s linear .8s; }
.caso.is-on .caso__fotos { opacity: 1; transition: opacity .8s cubic-bezier(.25, .46, .45, .94); }
.caso__txt { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.caso.is-on .caso__txt { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) .4s, transform 1.1s var(--ease-out) .4s; }

/* flechas altas y finas a los lados, fuera de la foto y a la mitad de su altura. --gut es el margen entre
   el borde de la pantalla y el contenido: la flecha queda a 4rem del contenido, o a la mitad del margen
   si este es más angosto (portátiles de 1280 a 1366 px). */
.casos__slider { --gut: calc((100% - min(100%, var(--max))) / 2 + var(--pad)); }
.casos__nav {
  position: absolute; z-index: 2; top: 50%;
  display: grid; place-items: center;
  width: 2.5rem; height: 4.5rem;
  color: var(--ink); opacity: .72;
  transition: opacity .35s var(--ease), translate .5s var(--ease-out);
}
.casos__nav svg { width: 1.3rem; height: 2.6rem; stroke-width: 1.2; }
.casos__nav--prev { left: max(calc(var(--gut) / 2), calc(var(--gut) - 4rem)); transform: translate(-50%, -50%); }
.casos__nav--next { right: max(calc(var(--gut) / 2), calc(var(--gut) - 4rem)); transform: translate(50%, -50%); }
@media (hover: hover) {
  .casos__nav:hover { opacity: 1; }
  .casos__nav--prev:hover { translate: -4px 0; }
  .casos__nav--next:hover { translate: 4px 0; }
}

/* la foto lleva a WhatsApp con el mensaje de su servicio, como en Servicios; crece un 3 % al pasar el cursor */
.caso__main { width: 100%; aspect-ratio: 16 / 10; }
.caso__main img { transition: transform 1.6s var(--ease-out); }
.caso__main:hover img, .caso__main:focus-visible img { transform: scale(1.03); }
.caso__main.is-ph::after { content: attr(data-ph); }

.caso__t { font: 200 clamp(1.4rem, 2.3vw, 2rem)/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.caso__t b { font-weight: 400; }
@media (min-width: 981px) { .caso__t b { display: block; } }   /* «PROYECTO» arriba y el nombre debajo, igual en los tres */
.caso__meta {
  display: flex; align-items: center; gap: .8em; margin-bottom: 1.4rem;
  font: 500 .68rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute);
}
/* agradecimiento del cliente entre comillas, en lugar de «Ver galería» (pedido del cliente) */
.caso__d { margin: 0; }
.caso__d p { margin: 0; font: 300 clamp(.9rem, .85vw, 1rem)/1.8 var(--sans); color: var(--mute); }

/* ═══ 5. ¿DESEAS HACER TU PROYECTO CON NOSOTROS? ═══════════════ */
/* foto quieta mientras la página pasa por encima (como MDV); clip-path recorta la foto fija a la sección */
.valor {
  position: relative; overflow: hidden; clip-path: inset(0);
  background: var(--ink); color: var(--paper);
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;   /* algo menos que --sec, igual arriba y abajo: pedido del cliente */
}
.valor__bg { position: absolute; inset: 0; }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .valor__bg { position: fixed; inset: 0; height: 100vh; }   /* en celular se desplaza normal, como MDV */
}
.valor__bg img { opacity: .38; }
.valor::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 20, .94) 0%, rgba(20, 20, 20, .78) 50%, rgba(20, 20, 20, .94) 100%);
}
/* sin foto de fondo (cierre-01 pendiente), fondo negro limpio: sin cuadrícula ni nombre del archivo (entrega oficial);
   cuando llegue assets/img/cierre-01.webp aparece sola */
.valor .valor__bg.is-ph { background: none; }
.valor .valor__bg.is-ph::after { content: none; }
.valor__in { position: relative; z-index: 1; }
.shead--light .h2 { color: var(--paper); }

.pilares {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: p;
}
.pilar { padding-top: 1.8rem; border-top: 1px solid var(--line-l); }
.pilar__t { font: 400 clamp(.9rem, 1.1vw, 1rem)/1.5 var(--display); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.pilar p { color: var(--mute-l); font-size: .9rem; line-height: 1.75; margin: 0; }

/* un solo botón, centrado en la franja (pedido del cliente) */
.valor__ctas { display: flex; justify-content: center; margin-top: clamp(3.5rem, 6vw, 5rem); }

/* ═══ 6. CONTACTO ══════════════════════════════════════════════ */
.contacto { padding: clamp(3.5rem, 6.5vw, 6.25rem) 0; } /* más corto arriba y abajo, como Proyectos: pedido del cliente */
.contacto__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.contacto__txt { grid-column: 1 / span 5; }
.form { grid-column: 7 / span 6; }

.canales { display: grid; gap: 1.1rem; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.canales li { display: flex; align-items: center; gap: 1rem; font-size: 1rem; }
.canales svg { width: 1.2rem; height: 1.2rem; color: var(--blue); flex: none; }
.canales a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.canales a:hover { background-size: 100% 1px; }
.contacto__cita { display: none; }   /* solo en celular, en lugar del formulario */

/* el mismo formulario compacto en Contacto y en la ventana «Agenda tu cita» (pedido del cliente):
   letra y espacios finos, Nombre y Tipo de cita a media columna y el botón a todo el ancho */
.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem 1.4rem;
  background: var(--white);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  box-shadow: 0 40px 80px -50px rgba(20, 20, 20, .28);
}
.f { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .25rem; }
.f--half, .form > .f:first-child, .f--cita { grid-column: span 1; }
.f label { font: 500 .6rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.f label small { font-size: inherit; letter-spacing: .1em; text-transform: none; font-weight: 400; }
.f input, .f select, .f textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink);
  font: 300 .92rem/1.4 var(--sans); padding: .45rem 0;
  transition: border-color .3s;
  -webkit-appearance: none; appearance: none;
}
.f textarea { resize: vertical; min-height: 3.4rem; height: 3.4rem; }
.f select {
  cursor: pointer; padding-right: 2rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23141414' stroke-width='1.3' d='M6 9l6 6 6-6'/></svg>") right center / .95rem no-repeat;
}
.f select:invalid { color: var(--mute); }
.f input::placeholder { color: var(--mute-l); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-bottom-color: var(--ink); }  /* sin líneas azules: pedido del cliente */
.f.is-bad input, .f.is-bad select { border-bottom-color: var(--bad); }
.err { min-height: 1em; font-size: .72rem; color: var(--bad); }
.err:empty { min-height: 0; }

.f--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .8rem; }
.f--check input {
  width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem; padding: 0;
  border: 1px solid var(--mute); cursor: pointer; position: relative;
}
.f--check input:checked { background: var(--ink); border-color: var(--ink); }
.f--check input:checked::after {
  content: ''; position: absolute; left: .34rem; top: .12rem; width: .3rem; height: .6rem;
  border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.f--check label { flex: 1; font: 300 .8rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mute); }
.f--check label a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.f--check .err { flex-basis: 100%; }
.form__send { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }

.form.is-sent > .f, .form.is-sent > .form__send { display: none; }
.form__ok { grid-column: 1 / -1; text-align: center; padding: 1.5rem 0; animation: rise .7s var(--ease-out) both; }
.form__okiso { height: 4.5rem; width: 1.9rem; margin: 0 auto 1.6rem; fill: var(--ink); }
.form__okt { font: 200 1.5rem/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .8rem; }
.form__ok p:not(.form__okt) { color: var(--mute); }
.form__ok .btn { margin-top: .8rem; }

/* tipo de cita: dos opciones como botones (radios ocultos encima de cada una) */
.f--cita { border: 0; margin: 0; padding: 0; min-width: 0; }
.f--cita legend { padding: 0; margin-bottom: .5rem; font: 500 .6rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.chips { display: flex; gap: .5rem; margin-top: .3rem; }
.chip { position: relative; flex: 1; cursor: pointer; }
.f .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: block; text-align: center; padding: .62rem .5rem;
  border: 1px solid var(--line); color: var(--mute);
  font: 500 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.chip:hover span { border-color: var(--ink); color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.f--cita.is-bad .chip span { border-color: var(--bad); }

/* ═══ Ventana «Agenda tu cita» ═════════════════════════════════
   Velo oscuro con desenfoque y un panel hueso compacto y centrado (pedido del cliente: más pequeño);
   en computador todo cabe sin desplazarse. En celular ocupa toda la pantalla. */
.cita {
  position: fixed; inset: 0; z-index: 85;
  display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1rem, 4vh, 3rem) 1rem;
  background: rgba(20, 17, 15, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fadeIn .4s var(--ease) both;
}
.cita__panel {
  position: relative; margin: auto;
  width: min(100%, 38rem);
  background: var(--paper);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .55);
  animation: rise .7s var(--ease-out) both;
}
.cita__close { position: absolute; top: .7rem; right: .7rem; }
.cita__t { margin: 0 3rem .5rem 0; font: 200 clamp(1.25rem, 1.8vw, 1.5rem)/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.cita__t em { font-weight: 400; }
.cita__lead { margin: 0; max-width: 27rem; font-size: .88rem; line-height: 1.6; color: var(--mute); }
/* dentro de la ventana el formulario va sin tarjeta: el panel hueso ya hace de fondo */
.cita .form { margin-top: 1.5rem; padding: 0; background: none; box-shadow: none; }
/* portátiles de poca altura: un poco más ajustada para que siga cabiendo sin desplazarse */
@media (min-width: 721px) and (max-height: 720px) {
  .cita { padding-block: .75rem; }
  .cita__panel { padding-block: 1.5rem; }
  .cita .form { margin-top: 1.1rem; row-gap: .75rem; }
  .cita .f textarea { min-height: 2.9rem; height: 2.9rem; }
}

/* ═══ FOOTER ═══════════════════════════════════════════════════ */
.pie { background: var(--ink); color: var(--paper); padding-top: clamp(4.5rem, 8vw, 7rem); }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1fr; gap: 3rem; }
.pie__logo { height: 9.5rem; width: 6.3rem; fill: currentColor; } /* 602 × 912 */
.pie__col { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; font-size: .93rem; }
.pie__col a, .pie__col span { color: rgba(244, 241, 236, .78); transition: color .3s; }
.pie__col a:hover { color: var(--paper); }
.pie__h { margin: 0 0 .5rem; font: 500 .66rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--mute-l); }
.pie__lema { margin: 1.4rem 0 0; font: 300 .72rem/1.6 var(--display); letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 241, 236, .78); }
.pie__base {
  position: relative;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(3.5rem, 6vw, 5rem); padding-top: 1.6rem; padding-bottom: calc(1.8rem + env(safe-area-inset-bottom));
  font-size: .8rem; color: var(--mute-l);
}
/* la línea respeta el margen lateral (un border-top cubriría también el padding del .wrap) */
.pie__base::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line-l); }
.pie__base a:hover { color: var(--paper); }
/* canales en círculos: solo en celular (pie mínimo, como MDV) */
.pie__iconos { display: none; }
.pie__iconos a {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--line-l); border-radius: 50%;
  color: rgba(244, 241, 236, .85);
  transition: border-color .3s, color .3s;
}
.pie__iconos a:active { border-color: var(--paper); color: var(--paper); }
.pie__iconos svg { width: 1.1rem; height: 1.1rem; }

/* ── Flotantes ────────────────────────────────────────────────── */
.fab {
  position: fixed; right: clamp(1rem, 2vw, 1.6rem); z-index: 55;
  display: grid; place-items: center;
  transition: opacity .5s var(--ease), transform .5s var(--ease-out), background .3s;
}
.fab {
  bottom: calc(clamp(1rem, 2vw, 1.6rem) + env(safe-area-inset-bottom));
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 0 0 1px rgba(244, 241, 236, .14), 0 14px 30px -10px rgba(0, 0, 0, .45);
}
.fab svg { width: 1.55rem; height: 1.55rem; }

/* ✕ de la galería, el visor y la cita: solo la X fina, sin caja ni contorno (pedido del cliente);
   al pasar el cursor (o con el teclado) gira un cuarto de vuelta */
.galeria__close, .visor__close, .cita__close {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  color: inherit; opacity: .85;
  transition: opacity .3s var(--ease), transform .5s var(--ease-out), background .3s;
}
.galeria__close svg, .visor__close svg, .cita__close svg { width: 1.45rem; height: 1.45rem; }
.galeria__close:focus-visible, .visor__close:focus-visible, .cita__close:focus-visible { outline: none; }
@media (hover: hover) {
  .galeria__close:hover, .visor__close:hover, .cita__close:hover { opacity: 1; transform: rotate(90deg); }
}
.galeria__close:focus-visible, .visor__close:focus-visible, .cita__close:focus-visible { opacity: 1; transform: rotate(90deg); }

/* ═══ Galería por servicio ═════════════════════════════════════ */
.galeria {
  position: fixed; inset: 0; z-index: 80;
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  animation: fadeIn .45s var(--ease) both;
}
/* encabezado centrado: «Galería de proyectos», el servicio, su descripción y las pestañas debajo */
.galeria__top {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center;
  padding: 1.8rem calc(var(--pad) + 3.5rem) 1.1rem;
  background: rgba(244, 241, 236, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.galeria__head .kicker { justify-content: center; margin-bottom: .7rem; }
.galeria__t { font: 200 clamp(1.3rem, 2.4vw, 1.9rem)/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.galeria__d { margin: .45rem auto 0; max-width: 34rem; font-size: .9rem; line-height: 1.6; color: var(--mute); }
.galeria__tabs { display: flex; justify-content: center; gap: 1.2rem 2.2rem; flex-wrap: wrap; }
.galeria__tabs button {
  position: relative; padding: .4rem 0;
  font: 400 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  transition: color .3s;
}
.galeria__tabs button::after {
  content: ''; position: absolute; left: 0; right: .22em; bottom: 0; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.galeria__tabs button:hover { color: var(--ink); }
.galeria__tabs button[aria-selected="true"] { color: var(--ink); }
.galeria__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.galeria__close { position: absolute; top: 1.1rem; right: calc(var(--pad) - .8rem); }
.galeria__body { padding: clamp(1.8rem, 3.5vw, 3rem) var(--pad) 4.5rem; max-width: 1500px; margin-inline: auto; }
/* 5 fotos cuadradas: la primera grande y las otras cuatro en 2×2 a su lado (en celular, la grande arriba) */
.galeria__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1vw, .75rem);
  max-width: 1120px; margin-inline: auto;
}
.galeria__grid .gi:first-child { grid-column: span 2; grid-row: span 2; }
.gi {
  display: block; width: 100%; margin: 0; text-align: left;
  animation: rise .8s var(--ease-out) both;
}
.gi .media { aspect-ratio: 1 / 1; }
.gi .media img { transition: transform 1.4s var(--ease-out), filter .6s var(--ease); }
.gi:hover .media img { filter: brightness(1.04); }
.gi:hover .media img, .gi:focus-visible .media img { transform: scale(1.03); }
.gi__cap { display: block; padding-top: .7rem; font: 400 .68rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.galeria__cta {
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center;
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line);
}
.galeria__cta p { margin: 0; font: 200 clamp(1.1rem, 2vw, 1.5rem)/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase; }

/* ═══ Visor ════════════════════════════════════════════════════ */
.visor {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 12, 12, .97); color: var(--paper);
  display: grid; place-items: center;
  animation: fadeIn .35s var(--ease) both;
}
.visor__fig { margin: 0; display: flex; flex-direction: column; gap: 1rem; max-width: min(88vw, 1500px); }
.visor__media { background: transparent; display: grid; place-items: center; }
.visor__media img { width: auto; height: auto; max-width: min(88vw, 1500px); max-height: 80vh; object-fit: contain; animation: fadeIn .5s var(--ease) both; }
.visor__media.is-ph { width: min(80vw, 1100px); aspect-ratio: 3 / 2; }
.visor__cap {
  display: flex; justify-content: space-between; gap: 1rem;
  font: 400 .68rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute-l);
}
.visor__count { font: 300 .78rem/1 var(--display); letter-spacing: .14em; }
.visor__nav {
  position: absolute; display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; border: 1px solid var(--line-l);
  transition: background .3s, color .3s;
}
.visor__nav:hover { background: var(--paper); color: var(--ink); }
.visor__close { position: absolute; top: .8rem; right: .8rem; }
.visor__nav { top: 50%; transform: translateY(-50%); }
.visor__nav--prev { left: 1.2rem; }
.visor__nav--next { right: 1.2rem; }
.visor__nav svg { width: 1.3rem; height: 1.3rem; }

/* ── Animaciones de entrada ───────────────────────────────────── */
.js .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* entrada lenta y escalonada (franja «¿Deseas…?», como MDV): el título baja, los pilares alternan */
.js .reveal--lento { transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal--baja { transform: translateY(-28px); }
.js .reveal--sube { transform: translateY(28px); }
.js .reveal--fundido { transform: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ═══ Responsive ═══════════════════════════════════════════════ */
@media (max-width: 1240px) {
  .social--hdr { display: none; }
}
/* hero con los cortes del slider de MDV: tableta 4:3 · celular vertical 9:16 */
@media (orientation: portrait) and (max-width: 1199px) and (min-width: 701px),
       (orientation: landscape) and (max-width: 1199px) and (min-width: 901px) {
  .hero { aspect-ratio: 4 / 3; }
}
@media (orientation: portrait) and (max-width: 700px) {
  /* la foto llena la pantalla bajo el header en cualquier celular (svh: el alto visible con las barras
     del navegador), así el título siempre se ve al abrir y no asoma la sección siguiente (pedido del cliente) */
  .hero { aspect-ratio: auto; height: calc(100vh - var(--hdr) - var(--abajo, 0px)); height: calc(100svh - var(--hdr) - var(--abajo, 0px)); min-height: 24rem; max-height: 200vw; }
  /* título de la foto fino y espaciado, como el de MDV (12 px / 300 y 8 px con ~5 px entre letras) */
  /* el texto queda justo encima del botón de WhatsApp, que flota en la esquina (1rem + 3.6rem del botón + aire) */
  .hero__content { right: var(--pad); bottom: 5.35rem; }
  .hero__title { font-size: .75rem; }
  .hero__lugar { font-size: .5rem; }
}
@media (max-width: 1100px) {
  .svcs { grid-template-columns: repeat(2, 1fr); }
  .pilares { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  /* --franja: franja negra de arriba · --barra: menú negro de abajo · --hdr: franja + barra blanca del logo
     · --abajo: lo que tapa el menú negro (con la zona del indicador de inicio del iPhone) */
  :root {
    --franja: 44px; --barra: 47px;
    --hdr: calc(var(--franja) + 77px);
    --abajo: calc(var(--barra) + env(safe-area-inset-bottom));
  }
  .nav { display: none; }
  .burger { display: block; }

  /* header de celular como PrintSoul (pedido del cliente): arriba la franja negra fija con «Agenda tu cita»
     y debajo la barra blanca semitransparente con ☰ a la izquierda y el logo centrado, sin íconos a la derecha */
  /* Safari de iOS 26 pinta la zona de la hora y la batería con el background-color del elemento fijo que toca
     el borde de arriba (solo el del propio elemento, no el de sus hijos) y, si no lo hay, con el de html.
     Por eso el header fijo es negro: esa zona queda negra, unida a la franja (pedido del cliente). */
  html { background-color: #000; }
  .hdr { height: auto; background: #000; box-shadow: none; }   /* alto = franja + barra */
  /* Safari mira solo la capa fija MÁS ALTA en el centro de cada borde y no busca debajo. El grano (body::after,
     capa 200, casi transparente) tapaba el header y el menú negro: Safari lo descartaba por tenue y pintaba
     la zona de la hora (y la de abajo) con el crema del body (ajuste del 18-oct-2026: «debe verse negro»).
     En celular el grano pasa por debajo del header (60) y del menú negro (54), y sigue encima del contenido. */
  body::after { z-index: 50; }
  /* toda la franja es el botón: letras blancas espaciadas, centradas, con la flecha fina del botón del header */
  .franja {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    width: 100%; height: var(--franja); padding: 0 var(--pad);
    background: #000; color: #fff;
    font: 500 .72rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
    transition: background .3s var(--ease);
  }
  .franja svg { width: .8rem; height: .8rem; flex: none; transition: transform .4s var(--ease-out); }
  .franja:active { background: #1c1c1c; }
  .franja:active svg { transform: translateX(.2rem); }
  .hdr__in {
    height: calc(var(--hdr) - var(--franja));
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
    background: var(--white);   /* sólida: sobre el header negro, la semitransparente se vería gris */
    box-shadow: 0 1px 0 var(--paper-2);
  }
  .hdr__end { display: contents; }
  .hdr__cta { display: none; }
  .burger { grid-column: 1; grid-row: 1; justify-self: start; }
  .lockup { grid-column: 2; grid-row: 1; }
  /* el header del celular no cambia al hacer scroll: la franja «Agenda tu cita», ☰ y el logo quedan siempre fijos
     (ajuste del 18-oct-2026; antes, al bajar, se plegaban la franja y ☰). Las secciones paran justo debajo
     de todo el header con el scroll-margin-top general (var(--hdr)). */

  /* menú negro de abajo, como el de PrintSoul (medido en Chrome): 47 px, Poppins 11,5 px en mayúsculas,
     24 px entre secciones; la actual en blanco y subrayada, las demás al 80 %; se desliza si no cabe */
  .barra-sec {
    position: fixed; inset: auto 0 0; z-index: 54;
    display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: .9rem 24px calc(.9rem + env(safe-area-inset-bottom));
    background: #000;
  }
  .barra-sec::-webkit-scrollbar { display: none; }
  .barra-sec a {
    flex: none; white-space: nowrap;
    font: 400 .72rem/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    text-decoration: underline transparent 1px; text-underline-offset: 5px;
    transition: color .3s, text-decoration-color .3s;
  }
  .barra-sec a.is-on { color: #fff; text-decoration-color: #fff; }
  /* la página termina sobre el menú negro y el botón de WhatsApp flota encima de él, como en PrintSoul */
  body { padding-bottom: var(--abajo); }
  .fab { bottom: calc(var(--abajo) + 1rem); }

  .estudio__txt, .estudio__fig, .contacto__txt, .form { grid-column: 1 / -1; }
  .estudio__fig { margin-top: 3.5rem; width: 82%; margin-left: auto; }
  .trazo { left: -18%; width: 46%; }

  .caso { display: flex; flex-direction: column; align-items: stretch; }
  .caso__txt { padding-top: 2rem; }
  /* sin margen a los lados: las flechas pasan encima de la foto, en blanco, a la mitad de su altura (foto 16:10);
     trazo algo más grueso y sombra ceñida para que se lean también sobre fotos claras */
  .casos__nav {
    top: calc((100vw - 2 * var(--pad)) * .3125); color: #fff; opacity: 1;
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .5)) drop-shadow(0 1px 8px rgba(0, 0, 0, .35));
  }
  .casos__nav svg { stroke-width: 1.6; }
  .casos__nav--prev { left: var(--pad); transform: translateY(-50%); }
  .casos__nav--next { right: var(--pad); transform: translateY(-50%); }

  .form { margin-top: 3rem; }
  .galeria__tabs { order: 3; width: 100%; gap: 1.2rem 1.5rem; }
}
/* ── Celular, al estilo de MDV (pedido del cliente) ──────────────────────────────
   Letra y espacios más finos, títulos y textos de introducción centrados (pilares y testimonios a la izquierda),
   botón «Agenda tu cita» en el header, Contacto con un botón en lugar del formulario y pie mínimo. */
@media (max-width: 720px) {
  :root { --sec: 4rem; }
  body { font-size: .9rem; }
  .lead { font-size: .98rem; }
  .h2 { font-size: 1.32rem; letter-spacing: .12em; margin-bottom: 1.2rem; }
  .kicker { justify-content: center; margin-bottom: 1.1rem; }
  .shead { margin-bottom: 2rem; }

  .hdr { --iso: 2.3rem; }   /* logo centrado de la barra blanca */

  /* Estudio: texto centrado y la foto al centro, con la tarjeta del isotipo abajo a la izquierda */
  .estudio { padding-bottom: calc(var(--sec) + 2.5rem); } /* la tarjeta del isotipo sobresale de la foto */
  .estudio__txt { text-align: center; }
  .estudio__txt > p:not(.kicker):not(.lead) { margin-inline: auto; }
  .estudio__fig { width: 86%; margin: 2.5rem auto 0; }
  .cifras { grid-template-columns: 1fr; border-top: 0; }
  .cifra:first-child { border-top: 0; padding-top: 0; }
  .cifra:last-child { padding-bottom: 0; }
  .cifra, .cifra + .cifra { padding: 1.6rem 0; border-left: 0; border-top: 1px solid var(--line-l); display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 1rem; }
  .cifra__n { margin: 0; font-size: 4.2rem; }

  /* Servicios casi de borde a borde, como MDV: 6 px a los lados y entre fotos */
  .servicios { padding-bottom: 3.5rem; }
  .svcs { padding-inline: 6px; gap: 1.6rem 6px; }
  .galeria__grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .galeria__grid .gi:first-child { grid-column: 1 / -1; grid-row: auto; }
  .galeria__top { position: relative; padding: 2.4rem var(--pad) 1rem; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* 4 pestañas en una línea: «Diseño» en corto (el título dice el nombre completo) y algo menos de aire */
  .galeria__tabs { flex-wrap: nowrap; gap: 1.1rem; }
  .galeria__tabs button { letter-spacing: .18em; }
  .tab-largo { display: none; }
  /* fija en la esquina para tenerla a mano al bajar; un círculo hueso suave (sin línea) la separa de las fotos */
  .galeria__close { position: fixed; top: .7rem; right: .7rem; z-index: 3; background: rgba(244, 241, 236, .92); border-radius: 50%; }
  .galeria__body { padding: 1.2rem 6px 3rem; }
  .galeria__cta { padding-inline: var(--pad); }
  .svc__t { font-size: .72rem; letter-spacing: .3em; padding: .6rem; }
  .svc:hover .media--svc img { transform: none; }   /* en celular sin zoom, como PrintSoul */

  /* manifiesto: frase centrada y más contenida */
  .manifiesto { padding: 4.5rem 0; text-align: center; }
  .manifiesto__q { margin-bottom: 2rem; }
  .manifiesto__q p { font-size: 1.3rem; }
  .manifiesto__firma { justify-content: center; gap: .8rem 1.4rem; }

  /* Proyectos: el texto de cada proyecto, a la izquierda bajo la foto */
  .caso__txt { padding-top: 1.4rem; }
  .caso__t { font-size: 1.15rem; margin-bottom: .6rem; }
  .caso__meta { margin-bottom: 1rem; }

  /* «¿Deseas…?», como MDV: título centrado, el botón justo debajo y los pilares sin líneas */
  .valor { padding: 4rem 0; }
  .valor__in { display: flex; flex-direction: column; }
  .valor .shead { text-align: center; margin-bottom: 1.6rem; }
  .valor__ctas { order: 2; margin: 0 0 2.8rem; }
  .valor__ctas .btn { width: 100%; max-width: 22rem; white-space: normal; text-align: center; }
  .pilares { order: 3; grid-template-columns: 1fr; row-gap: 1.6rem; }
  .pilar { padding-top: 0; border-top: 0; }
  .pilar__t { font-size: .78rem; margin-bottom: .45rem; }
  .pilar p { font-size: .88rem; }

  /* Contacto: texto centrado y un botón que abre la ventana con el formulario (el de la página se oculta) */
  .contacto__txt { text-align: center; }
  .contacto .form { display: none; }
  .contacto__cita { display: inline-flex; width: 100%; max-width: 22rem; margin-top: 2.2rem; }
  /* el bloque de canales va centrado y sus filas alineadas entre sí (los íconos forman una columna) */
  .canales { grid-template-columns: max-content; justify-content: center; gap: .9rem; margin-top: 2rem; padding-top: 1.6rem; }
  .canales li { font-size: .9rem; }

  .form { grid-template-columns: 1fr; }
  .cita { padding: 0; }
  .cita__panel { width: 100%; min-height: 100%; margin: 0; align-self: flex-start; padding: 4.6rem var(--pad) 2.5rem; }  /* crece con el formulario */
  .f--half, .form > .f:first-child, .f--cita { grid-column: 1 / -1; }

  /* pie mínimo, como MDV: isotipo y nombre, los canales en círculos y una base de dos líneas */
  .pie { padding-top: 3.5rem; text-align: center; }
  .pie__grid { display: block; }
  .pie__col { display: none; }
  .pie__marca { display: flex; justify-content: center; }
  .pie__logo { height: 5rem; width: 3.3rem; }
  .pie__iconos { display: flex; justify-content: center; gap: .6rem; margin-top: 2rem; }
  .pie__base {
    flex-direction: column; align-items: center; gap: .35rem;
    margin-top: 2rem; padding-top: 1.4rem;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));   /* deja libre el botón flotante */
  }

  .visor__nav { top: auto; bottom: 1.2rem; transform: none; }
  .visor__media img { max-height: 70vh; }
}
/* teléfonos angostos: títulos de Servicios con menos espaciado para que «ARQUITECTÓNICO» quepa en su foto */
@media (max-width: 380px) {
  .svc__t { font-size: .66rem; letter-spacing: .2em; padding: .4rem; }
  .galeria__tabs { gap: .9rem; }
  .galeria__tabs button { letter-spacing: .14em; }
}
@media (max-width: 340px) {   /* teléfonos de 320 px: las 4 pestañas siguen en una línea */
  .galeria__tabs { gap: .5rem; }
  .galeria__tabs button { font-size: .66rem; letter-spacing: .12em; }
}
@media (max-width: 420px) {
  .estudio__fig { width: 88%; }
  .trazo { left: -10%; bottom: -12%; width: 50%; padding: 1rem; }
  .trazo__lema { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cortina > .estudio { position: relative; top: auto; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal, .js .hero__content { opacity: 1; transform: none; }
  .js .manifiesto .pal, .js .manifiesto__firma span { opacity: 1; transform: none; filter: none; transition: none; }
}