/* =========================================================================
   SIVANA ESTUDIO · Landing de reformas integrales
   Capa 2 — dirección de arte, v2 (15-08-2026).
   Paleta SIN CREMA: blanco frío · gris muy claro · gris oscuro, con el
   acento de marca convertido en METAL (tres tonos, uno por fondo).
   Doctrina: guia-de-diseno.md (craft) · playbook-web.md (stack) ·
   _diseno/recomendaciones-diseno.md (dirección de arte de esta versión).
   ========================================================================= */

/* ---------- 0. FUENTES (alojadas en el dominio; antes venían de Google Fonts y bloqueaban el render) ---------- */
@font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:400 500; font-display:swap; src:url("assets/fonts/bodoni-moda.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:'Bodoni Moda'; font-style:italic; font-weight:400 500; font-display:swap; src:url("assets/fonts/bodoni-moda-italic.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:'Cormorant Garamond'; font-style:normal; font-weight:300 600; font-display:swap; src:url("assets/fonts/cormorant-garamond.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:'Cormorant Garamond'; font-style:italic; font-weight:400 500; font-display:swap; src:url("assets/fonts/cormorant-garamond-italic.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:'Inter'; font-style:normal; font-weight:300 600; font-display:swap; src:url("assets/fonts/inter.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:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url("assets/fonts/manrope.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 }

/* <picture> no debe afectar al layout: la <img> se comporta como hija directa de su caja */
picture{ display:contents }

/* ---------- 1. TOKENS ---------- */
:root{
  /* Fondos — tres, y dos oscuros de refuerzo */
  --bg-0:      #FCFCFD;   /* blanco frío, fondo dominante */
  --bg-1:      #EDEEF1;   /* gris muy claro, banda alterna */
  --bg-2:      #E4E6EB;   /* gris claro: placeholders, chips */
  --surface:   #FFFFFF;   /* tarjeta / panel */
  --dark:      #17191C;   /* banda teatro */
  --dark-2:    #101216;   /* zócalo, cierre, footer */
  --dark-3:    #22262B;   /* panel dentro de oscuro */

  /* Tinta */
  --ink:       #14161A;
  --ink-soft:  #444A52;
  --muted:     #656B74;
  --on-dark:   #EDEFF2;
  --on-dark-soft:  rgba(237,239,242,.78);
  --on-dark-muted: rgba(237,239,242,.62);

  /* Líneas — sólidas: sobre gris frío el negro translúcido se ve sucio */
  --line:      #E1E3E8;
  --line-2:    #D3D7DE;
  --line-dk:   rgba(237,239,242,.14);

  /* Acento: un metal, tres tonos */
  --brass:     #B5924E;   /* rellenos */
  --brass-ink: #7D6535;   /* texto y hairlines sobre claro — 5,6:1 */
  --brass-lt:  #D3B573;   /* texto y líneas sobre oscuro — 8,9:1 */
  --brass-soft: rgba(181,146,78,.14);

  /* Tipografía */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espacio */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:168px;
  --pad:       clamp(88px, 9.5vw, 168px);
  --pad-strip: clamp(56px, 6vw, 96px);
  --gutter:    clamp(20px, 5vw, 64px);
  --maxw:      1320px;
  --maxw-tight:1080px;
  --measure:   none;
  --gap:       clamp(20px, 2vw, 32px);

  /* Forma */
  --r:20px; --r-s:10px; --r-xs:4px; --r-pill:999px;

  /* Profundidad — sombras frías */
  --sh-1: none;
  --sh-2: none;
  --sh-dock: none;
  --hair: inset 0 0 0 1px rgba(16,19,26,.06);

  /* Motion */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.65,0,.35,1);
  --t-fast:180ms; --t-mid:320ms; --t-reveal:620ms;
}

/* ---------- 2. RESET Y BASE ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--bg-0); color:var(--ink);
  font-family:var(--sans); font-size:17px; font-weight:400; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
h1,h2,h3,h4,p,figure,blockquote,ol,ul{ margin:0 }
ul,ol{ padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
::selection{ background:var(--brass-soft); color:var(--ink) }

/* Grano — recalibrado para fondo frío */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* En oscuro el grano sube: el negro plano hace banding */
.dark::after,.cierre::after,.trust::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark > *,.cierre > *,.trust > *{ position:relative; z-index:1 }

/* ---------- 3. TIPOGRAFÍA ---------- */
.display{
  font-family:var(--serif); font-weight:500; letter-spacing:-.022em;
  line-height:1.06; text-wrap:pretty; text-rendering:optimizeLegibility;
}
h1.display{ font-size:clamp(2.9rem,6.4vw,5.6rem); font-weight:400; letter-spacing:-.03em; line-height:1.02 }
h2.display{ font-size:clamp(2.15rem,4.4vw,3.5rem) }
h3.display{ font-size:clamp(1.45rem,2.2vw,2rem); letter-spacing:-.015em; line-height:1.16 }
.lede{ font-size:clamp(1.06rem,1.35vw,1.2rem); line-height:1.56; color:var(--ink-soft); max-width:none }
p{ max-width:var(--measure) }
em,.it{ font-style:italic }

/* El escalón que faltaba entre el h2 y el cuerpo */
.pull{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.28; letter-spacing:-.015em; color:var(--ink); max-width:none;
  margin-block:var(--s5);
}
.dark .pull{ color:var(--on-dark) }

.kicker{
  display:block; font-family:var(--sans); font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; line-height:1; color:var(--brass-ink);
}
.dark .kicker{ color:var(--brass-lt) }
.muted{ color:var(--muted) }
.small{ font-size:14.5px; line-height:1.5; letter-spacing:.005em }

.snum{
  display:block; font-family:var(--sans); font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; line-height:1; color:var(--brass-ink);
}
.dark .snum{ color:var(--brass-lt) }

/* ---------- 4. ESTRUCTURA ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.wrap-tight{ max-width:var(--maxw-tight); margin-inline:auto; padding-inline:var(--gutter) }
section{ padding-block:var(--pad); position:relative }
.band{ background:var(--bg-1) }
.dark{ background:var(--dark); color:var(--on-dark) }
.dark p{ color:var(--on-dark-soft) }
.dark .muted,.dark .small.muted{ color:var(--on-dark-muted) }
.dark .lede{ color:var(--on-dark-soft) }

.sechead{ display:grid; gap:0; margin-bottom:clamp(48px,5.5vw,88px) }
.sechead .kicker + .display{ margin-top:18px }
.sechead .display + .lede{ margin-top:20px }
.sechead .display + .cota{ margin-top:22px }
.sechead .cota + .lede{ margin-top:20px }

/* Rejilla: cada sección lleva su reparto, nunca dos seguidas igual */
.grid{ display:grid; gap:clamp(32px,5vw,80px); align-items:center }
.grid.a7-5{ grid-template-columns:7fr 5fr }
.grid.a6-6{ grid-template-columns:1fr 1fr }
.grid.a4-8{ grid-template-columns:4fr 8fr; align-items:start }

.stack > * + *{ margin-top:20px }
.stack > .display + *{ margin-top:24px }
.stack > * + .ticks{ margin-top:36px }
.stack > * + .cta-row{ margin-top:44px }
.stack > .cta-row + .cta-note{ margin-top:14px }

/* Imagen a sangre por un lado, a la altura de la sección */
.bleed-l,.bleed-r{
  display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:stretch;
}
.bleed-l{ padding-right:max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter))) }
.bleed-r{ padding-left:max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter))) }
.bleed-r .bleed-img{ grid-column:2; grid-row:1 }
.bleed-r .bleed-body{ grid-column:1; grid-row:1 }
.bleed-img{ position:relative; min-height:520px }
.bleed-img .ph{ position:absolute; inset:0; height:100%; border-radius:0 var(--r) var(--r) 0 }
.bleed-r .bleed-img .ph{ border-radius:var(--r) 0 0 var(--r) }
.bleed-img > img,.bleed-img > picture > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0 var(--r) var(--r) 0 }
.bleed-r .bleed-img > img,.bleed-r .bleed-img > picture > img{ border-radius:var(--r) 0 0 var(--r) }
.s-sesion .bleed-img{ aspect-ratio:3/4; min-height:0; align-self:start }
.bleed-body{ max-width:640px; padding-block:clamp(8px,1vw,24px) }
/* Sección 01: la foto llega justo hasta la mitad de la pantalla EN ESCRITORIO.
   Va dentro del min-width para no ganarle por especificidad al apilado de móvil. */
@media (min-width:1101px){
  .s-dudas .bleed-l{ grid-template-columns:minmax(0,50vw) minmax(0,1fr) }
}
/* Mismo ritmo de agrupación que .stack: sin esto los párrafos se pegan
   y el CTA se lee como parte del párrafo anterior. */
.bleed-body > * + *{ margin-top:20px }
.bleed-body > * + .ticks{ margin-top:36px }
.bleed-body > * + .cta-row{ margin-top:44px }

/* ---------- 5. FIRMA · la cota de plano (máx 6 usos) ---------- */
.cota{
  display:flex; align-items:center; gap:12px; width:fit-content; max-width:100%;
  color:var(--brass-ink);
}
.dark .cota{ color:var(--brass-lt) }
.cota i{ display:block; height:1px; width:clamp(20px,4vw,52px); background:currentColor; position:relative; flex:none }
.cota i::before{ content:""; position:absolute; top:-5px; height:11px; width:1px; background:currentColor }
.cota i:first-child::before{ left:0 }
.cota i:last-child::before{ right:0 }
.cota b{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap }

/* Esquinas en corchete sobre imagen (firma F2).
   OJO: no usar .tl / .tr como nombre — chocan con el timeline (.tl). */
.corner{ position:absolute; width:22px; height:22px; z-index:3; pointer-events:none; border:1px solid var(--brass-lt) }
.corner.c-tl{ top:14px; left:14px; border-right:0; border-bottom:0 }
.corner.c-tr{ top:14px; right:14px; border-left:0; border-bottom:0 }

/* Regla de escala */
.scale-rule{ display:flex; gap:4px; margin-block:var(--s5) }
.scale-rule i{ display:block; width:16px; height:6px; border:1px solid var(--brass-lt) }
.scale-rule i:nth-child(odd){ background:var(--brass-lt) }

/* ---------- 6. BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:58px; padding:0 34px; border-radius:var(--r-s);
  background:var(--ink); color:var(--bg-0);
  font-size:15.5px; font-weight:500; letter-spacing:.01em; text-align:center;
  transition:transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), background var(--t-fast);
  box-shadow:none;
}
.btn:hover{ transform:translateY(-2px); box-shadow:none; background:#000 }
.btn:active{ transform:scale(.985) }
.btn:focus-visible{ outline:2px solid var(--brass-ink); outline-offset:3px }
.btn .arw{ width:16px; height:16px; flex:none; transition:transform var(--t-fast) var(--e-out) }
.btn:hover .arw{ transform:translateX(4px) }
/* El metal solo en banda oscura y sobre foto */
.btn-brass{ background:var(--brass); color:#fff; box-shadow:none }
.btn-brass:hover{ background:#C4A25C; color:#fff }
.dark .btn:focus-visible,.cierre .btn:focus-visible{ outline-color:var(--brass-lt) }

.cta-note{ font-size:13.5px; line-height:1.45; color:var(--muted); margin:0; max-width:none }
.dark .cta-note,.cierre .cta-note{ color:var(--on-dark-soft) }
.cta-note.dim{ color:var(--on-dark-muted); font-size:12.5px; margin-top:8px }
.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) }
.center-cta{ display:grid; justify-items:center; gap:16px; text-align:center; margin-top:clamp(56px,6vw,80px) }
.center-cta .cta-note{ text-align:center }

/* ---------- 7. PLACEHOLDERS DE IMAGEN (web en gris) ---------- */
.ph{
  position:relative; width:100%; border-radius:var(--r); overflow:hidden;
  background:var(--bg-2); display:flex; align-items:center; justify-content:center;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(20,22,26,.022) 0 2px, transparent 2px 10px);
}
.ph > span{
  position:relative; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding:12px 16px; max-width:82%;
  border:1px dashed var(--line-2); border-radius:var(--r-xs); background:rgba(255,255,255,.7);
}
.dark .ph{ background:var(--dark-3) }
.dark .ph > span{ color:var(--on-dark-muted); border-color:rgba(237,239,242,.22); background:rgba(16,18,22,.5) }

.ar-43{ aspect-ratio:4/3 } .ar-11{ aspect-ratio:1/1 } .ar-45{ aspect-ratio:4/5 }
.ar-32{ aspect-ratio:3/2 } .ar-169{ aspect-ratio:16/9 } .ar-54{ aspect-ratio:5/4 }
.ar-34{ aspect-ratio:3/4 }

.imgbox{ position:relative; border-radius:var(--r); overflow:hidden }
.imgbox .ph{ border-radius:inherit }

/* Rótulo obligatorio de los renders */
.rotulo{
  position:absolute; left:16px; bottom:16px; max-width:calc(100% - 32px); z-index:3;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; text-align:left;
  color:rgba(252,252,253,.94); background:rgba(16,19,26,.62);
  backdrop-filter:blur(6px); padding:7px 12px; border-radius:var(--r-pill);
}

/* ---------- 8. HERO (diseño del header de baño: negro, foto a la derecha, pastilla, Bodoni + Manrope) ---------- */
:root{ --hero-serif:'Bodoni Moda', Georgia, 'Times New Roman', serif; --hero-sans:'Manrope', 'Inter', Helvetica, Arial, sans-serif; --gold:#c9af7a }
.hero{ position:relative; min-height:min(100svh,980px); display:flex; align-items:flex-end; padding:0; overflow:hidden; background:#000; color:#fff }
.hero-bg{ position:absolute; top:0; right:0; bottom:0; left:36%; background:#000 }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.hero-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, #000 0%, #000 47%, rgba(0,0,0,.90) 53%, rgba(0,0,0,.50) 61%, rgba(0,0,0,0) 72%),
    linear-gradient(to top, #000 0%, rgba(0,0,0,.82) 12%, rgba(0,0,0,.40) 28%, rgba(0,0,0,0) 48%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-block:clamp(150px,17vw,220px) clamp(44px,5vw,64px) }
.hero-logo{ position:absolute; top:clamp(24px,3vw,40px); left:0; right:0; z-index:3 }
.logo{ display:inline-block; line-height:0 }
.logo img{ display:block; width:190px; height:auto }

.hero-copy{ max-width:none }
.hero-copy .hero-title,.hero-copy .lede{ max-width:640px }
.pill{
  display:inline-block; padding:10px 18px; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-pill);
  font-family:var(--hero-sans); font-weight:600; font-style:italic; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#fff;
}
.hero-title{
  font-family:var(--hero-serif); font-weight:500; color:#fff;
  font-size:clamp(1.9rem,3.1vw,44px); line-height:1.2; letter-spacing:0; margin-top:24px;
}
.hero-title .accent{ color:var(--gold) }
.hero .lede{ font-family:var(--hero-sans); font-size:17px; line-height:1.55; color:#fff; margin-top:26px }
.hero .lede-em{ font-weight:700; font-style:italic; color:var(--gold) }
.hero .cta-row{ margin-top:32px }
.hero .cta-note{ font-family:var(--hero-sans); color:rgba(255,255,255,.62); font-size:14px }
.btn-white{ background:#fff; color:#191919; border-radius:var(--r-pill); font-family:var(--hero-sans); font-weight:600; font-size:15px; min-height:0; padding:20px 32px; box-shadow:none }
.btn-white:hover{ background:#fff; color:#000; box-shadow:none }
.btn-white:focus-visible{ outline-color:var(--gold) }
.hero-rule{ border:0; border-top:1px solid rgba(255,255,255,.2); margin:44px 0 28px }
.hero-stats{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 40px; width:100% }
.hero-stats b{ display:block; font-family:var(--hero-serif); font-weight:500; font-size:clamp(1.4rem,2.2vw,32px); line-height:1.1; color:#fff }
.hero-stats b i{ font-style:italic }
.hero-stats span{ display:block; margin-top:10px; font-family:var(--hero-sans); font-weight:600; font-style:italic; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.62); line-height:1.5 }

/* ---------- 10 · 01 · LO QUE TIENES EN LA CABEZA ---------- */
.qrows{ margin-top:var(--s2) }
.qrow{ padding-block:30px; border-top:1px solid var(--line); transition:border-color var(--t-fast) }
.qrow:last-child{ border-bottom:1px solid var(--line) }
.qrow q{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.22; letter-spacing:-.012em;
  quotes:'“' '”'; color:var(--ink);
}
.qrow q::before{ content:open-quote; color:var(--brass-ink) }
.qrow q::after{ content:close-quote; color:var(--brass-ink) }
.qrow p{ font-size:15.5px; color:var(--ink-soft); margin-top:14px; max-width:46ch }
.qrow:hover{ border-top-color:var(--brass-ink) }
.bridge{ margin-top:40px }

/* ---------- 11 · 02 · LAS CASAS QUE HACEMOS ---------- */
.ticks li{ display:flex; gap:14px; padding-block:14px; border-bottom:1px solid var(--line); font-size:16px }
.ticks li:last-child{ border-bottom:0 }
.ticks svg{ width:19px; height:19px; flex:none; margin-top:4px; color:var(--ink); stroke-linecap:round }
.dark .ticks li{ border-color:var(--line-dk) }
.dark .ticks svg{ color:var(--on-dark) }
.band .ticks li{ border-color:var(--line-2) }


.panel{ background:var(--surface); border-radius:var(--r); border:1px solid var(--line) }

/* ---------- 12 · 03 · CARRUSELES DE PROYECTO ---------- */
.proj{ margin-top:clamp(56px,6vw,96px) }
.proj + .proj{ padding-top:clamp(56px,6vw,96px); border-top:1px solid var(--line-dk) }
.proj-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4) }
.proj-head h3{ font-size:clamp(1.9rem,3vw,2.6rem); color:var(--on-dark) }
.proj-head .cota{ margin-top:14px }
.proj-head > div{ max-width:none; flex:1 }
.proj-head .proj-desc{ margin-top:18px }

.car-count{ font-family:var(--sans); font-size:13px; color:var(--on-dark-muted); display:flex; align-items:baseline; gap:6px; margin:0 }
.car-count .car-now{ font-family:var(--serif); font-style:italic; font-size:1.9rem; color:var(--brass-lt); transition:opacity 120ms linear }
.car-count i{ font-style:normal; opacity:.5 }

/* 9/2 (no 8/3): con 8/3 la miniatura sale tan alta que solo caben 2,5.
   Con 9/2 entran cuatro enteras y la quinta asomando, que es la señal. */
/* Escritorio: visor + columna de miniaturas a TODO el ancho de la sección (las fotos verticales se recortan a 4:3). En móvil se ven enteras. */
.proj-body{ display:grid; grid-template-columns:9fr 2fr; gap:var(--gap); align-items:stretch }
.proj-flip .proj-body{ grid-template-columns:2fr 9fr }
.proj-flip .car-viewer{ grid-column:2; grid-row:1 }
.proj-flip .car-thumbs{ grid-column:1; grid-row:1 }
.proj-flip .proj-head{ flex-direction:row-reverse }

.car-viewer{ position:relative; border-radius:var(--r); overflow:hidden }
.car-track{
  display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
}
.car-track::-webkit-scrollbar{ display:none }
.car-track.drag{ cursor:grabbing; scroll-snap-type:none }
.car-viewer .car-slide{ flex:0 0 100%; scroll-snap-align:start }
.car-viewer .car-slide .ph{ border-radius:0 }
.car-viewer .car-slide{ aspect-ratio:4/3 }
.car-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center }

/* La altura del visor es 3× el ancho de esta columna (9/2 + ratio 3:2),
   así que 1/3 la deja exactamente a la altura del visor sin medir nada en JS. */
/* La columna de miniaturas se estira a la altura exacta del visor (height:0 + min-height:100% dentro del grid) */
.car-thumbs{
  display:flex; flex-direction:column; gap:12px; height:0; min-height:100%;
  overflow-y:auto; scrollbar-width:none; padding-right:2px;
}
.car-thumbs::-webkit-scrollbar{ display:none }
.car-thumb{
  position:relative; flex:none; border-radius:var(--r-s); overflow:hidden;
  opacity:.45; transition:opacity 200ms var(--e-out), box-shadow 200ms var(--e-out);
}
.car-thumb .ph{ border-radius:var(--r-s) }
.car-thumb img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center }
.car-thumb i{
  position:absolute; left:8px; bottom:6px; font-style:normal; font-size:10px;
  letter-spacing:.1em; color:var(--on-dark);
}
.car-thumb:hover{ opacity:.8 }
.car-thumb.is-on{ opacity:1; outline:2px solid var(--brass); outline-offset:-2px }

.proj-foot{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s4) }
.car-ui{ display:flex; align-items:center; gap:14px; flex:none }
.car-btn{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line-dk);
  display:grid; place-items:center; color:var(--on-dark); flex:none;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.car-btn svg{ width:18px; height:18px }
.car-btn:hover{ background:var(--on-dark); color:var(--dark); transform:translateY(-2px) }
.car-btn:active{ transform:scale(.95) }
.car-btn[disabled]{ opacity:.25; pointer-events:none }
.car-ui.light .car-btn{ border-color:var(--line-2); color:var(--ink) }
.car-ui.light .car-btn:hover{ background:var(--ink); color:var(--bg-0) }

/* Barra segmentada — un segmento por imagen */
.car-bar{ display:flex; gap:3px; width:min(340px,42vw); flex:none }
.car-bar i{ display:block; flex:1; height:2px; background:rgba(237,239,242,.18); transition:background 200ms var(--e-out) }
.car-bar i.on{ background:var(--brass) }
.car-ui.light .car-bar i{ background:var(--line-2) }
.car-ui.light .car-bar i.on{ background:var(--brass) }
.proj-desc{ font-size:15px; color:var(--on-dark-soft); max-width:none; margin:0 }


/* ---------- 01 · PROYECTOS EN CLARO (antes banda oscura) ---------- */
.s-proy{ background:var(--bg-0); color:var(--ink) }
.s-proy .proj + .proj{ border-top-color:var(--line) }
.s-proy .proj-head h3{ color:var(--ink) }
.s-proy .proj-desc{ color:var(--ink-soft) }
.s-proy .car-count{ color:var(--muted) }
.s-proy .car-count .car-now{ color:var(--brass-ink) }
.s-proy .car-btn{ border-color:var(--line-2); color:var(--ink) }
.s-proy .car-btn:hover{ background:var(--ink); color:var(--bg-0) }
.s-proy .car-bar i{ background:var(--line-2) }
.s-proy .car-bar i.on{ background:var(--brass) }
.s-proy .car-thumb i{ color:var(--on-dark) }
.s-proy .car-viewer,.s-proy .car-thumb,.s-proy .ph{ box-shadow:none }

/* ---------- 13 · 04 · COMPARADOR ---------- */
.ba-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center }
.ba{
  position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; width:100%; max-width:640px;
  user-select:none; touch-action:pan-y; --p:50%;
  cursor:ew-resize;
}
.ba-layer{ position:absolute; inset:0 }
.ba-layer .ph,.ba-layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0 }
.ba-new{ clip-path:inset(0 0 0 var(--p)); transition:clip-path 240ms var(--e-out) }
.ba.drag .ba-new{ transition:none }
.ba::after{
  content:""; position:absolute; top:0; bottom:0; left:var(--p); width:2px; z-index:2;
  background:rgba(255,255,255,.92); transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(16,19,26,.28);
  transition:left 240ms var(--e-out);
}
.ba.drag::after{ transition:none }
.ba-handle{
  position:absolute; top:50%; left:var(--p); z-index:4;
  width:56px; height:56px; border-radius:50%; transform:translate(-50%,-50%);
  background:rgba(252,252,253,.94); backdrop-filter:blur(10px); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(16,19,26,.10);
  display:grid; place-items:center; cursor:ew-resize; transition:left 240ms var(--e-out), transform var(--t-fast);
}
.ba.drag .ba-handle{ transition:transform var(--t-fast) }
.ba-handle svg{ width:22px; height:22px }
.ba-handle:active{ transform:translate(-50%,-50%) scale(.96) }
.ba-handle:focus-visible{ outline:2px solid var(--brass); outline-offset:4px }
.ba-tag{
  position:absolute; top:16px; z-index:3; padding:8px 14px; border-radius:var(--r-pill);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(16,19,26,.58); backdrop-filter:blur(8px); transition:opacity 200ms var(--e-out);
}
.ba-tag-l{ left:16px; color:var(--on-dark) }
.ba-tag-r{ right:16px; color:var(--brass-lt) }
.ba.hide-l .ba-tag-l{ opacity:.3 }
.ba.hide-r .ba-tag-r{ opacity:.3 }
.ba-rotulo{ right:16px; left:auto; z-index:3 }

/* Texto y CTA bajo el comparador, alineados a la izquierda */
.ba-note{ max-width:none; margin-top:0 }
.ba-note > * + *{ margin-top:22px }
.ba-note > * + .cta-row{ margin-top:36px }
/* El .pull de serie va a 26ch y aquí sale en columna estrecha: le damos aire */
.ba-note .pull{ margin:0 }
.ba-note p:not(.pull):not(.cta-note){ max-width:none }

/* ---------- 14 · 06 · MATERIALES ---------- */
.mat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:clamp(40px,4.5vw,64px) }
.mat-head .car-count{ color:var(--muted) }
.mat-head .car-count .car-now{ color:var(--brass-ink) }
.mat-track{
  display:flex; gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; cursor:grab; padding-block:4px;
  margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter);
}
.mat-track::-webkit-scrollbar{ display:none }
.mat-track.drag{ cursor:grabbing; scroll-snap-type:none }
.mat{
  flex:0 0 min(400px,76vw); scroll-snap-align:start;
  background:var(--surface); border-radius:var(--r); border:1px solid var(--line);
  padding:12px 12px 24px;
}
.mat .imgbox{ border-radius:var(--r-s) }
.mat h3{ font-family:var(--serif); font-size:1.4rem; font-weight:500; letter-spacing:-.01em; margin:20px 8px 0 }
.mat p{ font-size:14.5px; color:var(--muted); margin:8px 8px 0; max-width:34ch }
.mat:hover .ph{ transform:scale(1.05) }
.mat .ph{ transition:transform 420ms var(--e-out) }
#mats .car-ui{ margin-top:var(--s5) }
#mats .car-ui .small{ margin:0 }


/* ---------- 15 · 07 · EQUIPO ---------- */
.people{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px) }
.person-media{ position:relative; padding-bottom:36px }
.plate{
  position:absolute; left:24px; bottom:0; background:var(--surface);
  border-radius:var(--r-s); border:1px solid var(--line); padding:16px 20px;
}
.plate h3{ font-family:var(--serif); font-size:1.3rem; font-weight:500; letter-spacing:-.01em; line-height:1.15 }
.plate .kicker{ margin-top:6px }
.person > p{ font-size:15.5px; color:var(--ink-soft); max-width:38ch; margin-top:36px }

.places{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:clamp(64px,7vw,88px) }
.place h3{ font-family:var(--serif); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2) }
.place p{ font-size:14.5px; color:var(--muted); margin-top:8px }
.place .imgbox .ph{ transition:transform 420ms var(--e-out) }
.place:hover .ph{ transform:scale(1.04) }

/* ---------- 16 · 08 · CREDENCIALES ---------- */
.creds-row{ align-items:center }
.creds-photo{ position:relative }
.creds-photo .imgbox > img,.creds-photo .imgbox > picture > img{ display:block; width:100%; height:auto; border-radius:inherit }

.figures{ margin-top:var(--s5) }
.figures li{ display:flex; align-items:baseline; gap:20px; padding-block:20px; border-bottom:1px solid var(--line-dk) }
.figures li:last-child{ border-bottom:0 }
.figures b{ font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,4vw,3.4rem); line-height:1; color:var(--brass-lt); flex:none; min-width:2.6ch }
.figures span{ font-size:14px; color:var(--on-dark-soft); max-width:32ch }

/* Marcas — cinta horizontal que corre sola, sin fin */
.marcas{ margin-top:clamp(56px,6vw,80px); padding-top:var(--s5); border-top:1px solid var(--line-dk) }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{ display:flex; width:max-content; will-change:transform; animation:marquee 38s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee-track span{
  font-family:var(--serif); font-size:1.5rem; font-weight:500; letter-spacing:.04em;
  color:var(--on-dark-muted); white-space:nowrap; padding-right:clamp(40px,6vw,88px);
}
.marquee-track span{ display:flex; align-items:center }
.marquee-track img{ height:54px; width:auto; max-width:180px; object-fit:contain; opacity:.8; filter:grayscale(1); transition:opacity var(--t-fast) }
.marquee-track span:hover img{ opacity:1 }
@keyframes marquee{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

/* ---------- 17 · 08 · TIMELINE DE LOS CUATRO PASOS ---------- */
/* La línea va ARRIBA del todo; el número la pisa y foto y texto cuelgan debajo. */
.tl{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:1px auto; column-gap:var(--gap);
}
.tl-line{
  grid-column:1/-1; grid-row:1; height:1px; background:var(--brass-ink); position:relative;
  margin-inline:calc(var(--gutter)*-1);
  transform:scaleX(1); transform-origin:left;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);
}
.tl-step{ display:flex; flex-direction:column }
/* Cada paso en SU columna; impares por encima de la línea, pares por debajo.
   Sin el grid-column explícito, el autoplacement los apila de dos en dos. */
.tl-step:nth-of-type(1){ grid-column:1 }
.tl-step:nth-of-type(2){ grid-column:2 }
.tl-step:nth-of-type(3){ grid-column:3 }
.tl-step:nth-of-type(4){ grid-column:4 }
.tl-step{ grid-row:2 }
.tl-media{ border-radius:var(--r-s) }
.tl-place{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px }
.tl-step h3{ font-family:var(--serif); font-size:1.3rem; font-weight:500; letter-spacing:-.01em; line-height:1.18; margin-top:10px }
.tl-step > p:not(.tl-n):not(.tl-place){ font-size:15px; color:var(--ink-soft); max-width:32ch; margin-top:12px }
.tl-n{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem,3.4vw,3.4rem); line-height:1; color:var(--brass-ink);
  background:var(--bg-0); padding-inline:8px; width:fit-content;
}
.tl-n{ margin-top:-.5em; margin-bottom:22px; position:relative; z-index:2 }
.tl-close{ margin-top:clamp(56px,6vw,80px); text-align:left }
.tl-close .pull{ margin:0 }
.tl-close .cta-row{ margin-top:32px }

/* ---------- 18 · 09 · EL CUADERNO (dos capas) ---------- */
.carpeta-img{ border-radius:var(--r); align-self:start }
.carpeta-img > img,.carpeta-img > picture > img{ display:block; width:100%; height:auto; border-radius:inherit }
#carpeta .stack > .cta-row{ margin-top:36px }

/* ---------- 19 · 10 · EL PARTE DEL LUNES ---------- */
.parte .kicker{ margin-top:var(--s5) }
.parte-rows{ margin-top:var(--s3) }
.parte-rows li{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-block:16px; border-bottom:1px solid var(--line-dk) }
.parte-rows li:last-child{ border-bottom:0 }
.parte-rows span{ font-size:13.5px; color:var(--on-dark-soft) }
.parte-rows b{ font-family:var(--serif); font-size:1.15rem; font-weight:500; color:var(--brass-lt); text-align:right }

/* ---------- 20 · 11 · AYUNTAMIENTO Y VECINOS ---------- */
.tramites{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start }
.tramites .is-offset{ margin-top:48px }
.tramites .kicker{ margin-top:20px }
.tramites h3{ font-family:var(--serif); font-size:1.3rem; font-weight:500; letter-spacing:-.01em; line-height:1.18; margin-top:10px }
.tramites .imgbox > img,.tramites .imgbox > picture > img{ display:block; width:100%; height:auto; border-radius:inherit }
.tramites p:last-child{ font-size:15px; color:var(--ink-soft); max-width:30ch; margin-top:10px; padding-bottom:20px; border-bottom:1px solid var(--line-2) }
.tramites .ph{ transition:transform 420ms var(--e-out) }
.tramites article:hover .ph{ transform:scale(1.04) }

/* ---------- 21 · 12 · FAQ ---------- */
.faq{ border-top:1px solid var(--line-2) }
.qa{ border-bottom:1px solid var(--line-2); scroll-margin-top:24px }
.qa summary{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 0; text-align:left; min-height:48px; cursor:pointer; list-style:none;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover .qt{ color:var(--brass-ink) }
.qt{ font-family:var(--serif); font-weight:500; font-size:clamp(1.18rem,1.9vw,1.5rem); line-height:1.24; letter-spacing:-.01em; transition:color var(--t-fast) }
.qi{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; flex:none; transition:transform 320ms var(--e-inout), background var(--t-fast), border-color var(--t-fast) }
.qi svg{ width:14px; height:14px }
.qa[open] .qi{ transform:rotate(45deg); background:var(--brass); border-color:var(--brass); color:var(--ink) }
.qbody{ overflow:hidden; height:0; transition:height 300ms var(--e-inout) }
.qbody p{ padding-bottom:30px; font-size:16px; color:var(--ink-soft); max-width:none }

/* ---------- 25 · LO QUE PASA CUANDO NOS ESCRIBES ---------- */
.vtl{ position:relative; padding-left:28px }
.vtl::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--brass-ink) }
.vtl li{ position:relative }
.vtl li + li{ margin-top:32px }
.vtl li::before{ content:""; position:absolute; left:-28px; top:5px; width:9px; height:1px; background:var(--brass-ink) }
.vtl li::after{ content:""; position:absolute; left:-31px; top:2px; width:7px; height:7px; border-radius:50%; background:var(--brass-ink) }
.vtl h3{ font-family:var(--serif); font-size:1.35rem; font-weight:500; letter-spacing:-.01em; line-height:1.2; margin-top:10px }
.vtl p:last-child{ font-size:15px; color:var(--ink-soft); max-width:40ch; margin-top:10px }

.ana{ position:relative; padding-bottom:56px }
.ana .imgbox{ width:86% }
#quepasa .imgbox > img,#quepasa .imgbox > picture > img{ display:block; width:100%; height:auto; border-radius:inherit }
.chat{ position:absolute; right:0; bottom:0; width:min(78%,360px); padding:18px }
.chat-top{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.chat-av{ width:34px; height:34px; border-radius:50%; background:var(--bg-2); flex:none }
.chat-top b{ display:block; font-size:14.5px; font-weight:500 }
.chat-top .kicker{ font-size:10.5px; color:var(--muted); margin-top:3px }
.bubble{
  position:relative; background:var(--bg-1); border-radius:var(--r-s); border-top-left-radius:4px;
  padding:12px 14px 12px; font-size:14.5px; line-height:1.4; color:var(--ink); max-width:100%; margin-top:14px;
}
.bubble i{ display:block; font-style:normal; font-size:10.5px; color:var(--muted); text-align:right; margin-top:4px }
.b2{ margin-top:8px }

/* ---------- 26 · CIERRE ---------- */
.cierre{ position:relative; overflow:hidden; background:#000; color:var(--on-dark); padding-block:clamp(140px,14vw,230px) }
/* Fondo del cierre = la misma foto del header, con la sombra negra por la izquierda como en el hero */
.cierre .cierre-bg{ position:absolute; inset:0; left:0; width:auto; aspect-ratio:auto; max-height:none; background:#000 }
.cierre .cierre-bg::after{ display:none }
.cierre-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.cierre-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.90) 48%, rgba(0,0,0,.50) 60%, rgba(0,0,0,.12) 78%, rgba(0,0,0,.12) 100%),
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 40%);
}
.cierre .wrap{ position:relative; z-index:2 }
.cierre-body{ max-width:none }
.cierre .lede{ color:rgba(237,239,242,.82) }
.cierre h2{ margin-top:0 }
.cierre h2 + p{ margin-top:var(--s3); color:rgba(237,239,242,.86) }
.cierre .cta-row{ margin-top:var(--s6); flex-direction:column; align-items:flex-start; gap:18px }
.cierre-notes{ max-width:none }
.cierre-notes .cta-note{ max-width:none }

/* ---------- 27 · FOOTER ---------- */
/* Footer como el de bano.sivanaestudio.com: blanco, logo negro centrado, filete, texto en cursiva y línea legal */
.foot{ background:#fff; color:#3b3733; padding-block:50px 150px; text-align:center }
.foot-in{ display:grid; justify-items:center }
.foot-logo{ width:300px; height:auto; display:block }
.foot-rule{ width:100%; max-width:1080px; border:0; border-top:1px solid #f0f0f0; margin:23px 0 0 }
.foot-about{ font-family:var(--sans); font-size:15px; line-height:1.6; color:#3b3733; max-width:62ch; margin-top:40px }
.foot-copy{ font-family:var(--sans); font-size:13px; line-height:1.7; color:#3b3733; margin-top:22px }
.foot-copy a{ color:inherit; text-decoration:underline; text-underline-offset:2px }
.foot-copy a:hover{ color:#000 }

/* ---------- 28 · BARRA FIJA INFERIOR ---------- */
.dock{
  position:fixed; left:50%; bottom:24px; z-index:40; width:min(750px, calc(100% - 32px));
  transform:translate(-50%,140%); opacity:0; pointer-events:none;
  transition:transform 420ms var(--e-out), opacity 280ms var(--e-out);
}
.dock.on{ transform:translate(-50%,0); opacity:1; pointer-events:auto }
body.form-open .dock{ transform:translate(-50%,140%); opacity:0; pointer-events:none }
.dock-in{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  background:var(--dark-2); color:var(--on-dark); border-radius:16px; box-shadow:var(--sh-dock);
  padding:14px 14px 14px 26px; min-height:80px;
}
.dock-txt{ font-family:var(--serif); font-size:1.28rem; font-weight:500; letter-spacing:-.01em; line-height:1.2; color:var(--on-dark); margin:0; max-width:34ch }
.dock .btn{ flex:none; min-height:56px; background:var(--brass); color:#fff; box-shadow:none }
.dock .btn:hover{ background:#C4A25C; color:#fff }

/* =========================================================================
   29 · MOTION — estados iniciales SOLO si hay JS (html.js)
   ========================================================================= */
html.js .rv{ opacity:0; transform:translateY(18px); transition:opacity var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out) }
html.js .rv.in{ opacity:1; transform:none }

/* La imagen principal entra con escala dentro de su caja */
html.js .imgbox.rv,html.js .rv .imgbox{ overflow:hidden }
html.js .rv .ph,html.js .imgbox.rv .ph{ transition:transform 720ms var(--e-out) }
html.js .imgbox.rv:not(.in) .ph{ transform:scale(1.04) }

/* Hero: entrada al cargar, no ligada al scroll */
html.js .hero-i{ opacity:0; transform:translateY(14px); transition:opacity 640ms var(--e-out), transform 640ms var(--e-out) }
html.js .hero.ready .hero-i{ opacity:1; transform:none }

/* Parallax (§D.4, exactamente 2 usos): el fondo recorre un 6%, y la escala
   de 1.06 es la que cubre ese recorrido para que no asome el borde. */
html.js .hero-bg{ transform:translate3d(0,var(--py,0%),0) scale(1.06) }
html.js .hero .hero-bg{ transition:transform 1400ms var(--e-out) }
html.js .hero:not(.ready) .hero-bg{ transform:scale(1.13) }
html.js .hero.settled .hero-bg{ transition:none }

/* Subrayado dibujado — exactamente 2 usos en toda la página */
.uline{ position:relative; white-space:nowrap }
.uline::after{
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.13em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.4C34 2.6 78 1.9 119 3.1c26 .8 52 2.4 80 3.3' fill='none' stroke='%23B5924E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform:scaleX(0); transform-origin:left;
}
html.js .uline::after{ transition:transform 700ms var(--e-out) 250ms }
html.js .in .uline::after,html.js .rv.in .uline::after{ transform:scaleX(1) }
html:not(.js) .uline::after{ transform:scaleX(1) }

/* Línea del timeline: se dibuja al entrar */
html.js .tl:not(.in) .tl-line{ transform:scaleX(0) }
html.js .tl-line{ transition:transform 900ms var(--e-out) }

/* =========================================================================
   30 · MÓVIL
   ========================================================================= */
@media (max-width:1100px){
  .grid.a7-5,.grid.a6-6,.grid.a4-8{ grid-template-columns:1fr; gap:var(--s6) }
  .hero-grid{ grid-template-columns:1fr; gap:var(--s5) }
  .bleed-l,.bleed-r{ grid-template-columns:1fr; gap:var(--s6); padding-inline:0 }
  .bleed-l .bleed-img,.bleed-r .bleed-img{ min-height:0; grid-column:1; grid-row:1 }
  .bleed-l .bleed-body,.bleed-r .bleed-body{ grid-column:1; grid-row:2; padding-inline:var(--gutter); max-width:none }
  .bleed-img .ph,.bleed-r .bleed-img .ph{ position:relative; border-radius:0; aspect-ratio:4/5; max-height:62vh }
  .bleed-img > img,.bleed-r .bleed-img > img,.bleed-img > picture > img,.bleed-r .bleed-img > picture > img{ border-radius:0 }
  .s-sesion .bleed-img{ aspect-ratio:3/4; max-height:none }
  .proj-body{ grid-template-columns:1fr }
  .people{ grid-template-columns:1fr; gap:var(--s6) }
  .places,.tramites{ grid-template-columns:1fr }
  .ana .imgbox{ width:100% }
  .chat{ position:static; width:100%; margin-top:var(--s3) }
  .ana{ padding-bottom:0 }
  .tramites .is-offset{ margin-top:0 }
  /* El proyecto invertido también se apila: sin esto gana por especificidad
     y deja el visor y las miniaturas en dos columnas machacadas. */
  .proj-flip .proj-body{ grid-template-columns:1fr }
  .proj-flip .car-viewer,.proj-flip .car-thumbs{ grid-column:1; grid-row:auto }
  /* Con el visor apilado, la tira de miniaturas pasa a horizontal */
  .car-thumbs{ display:flex; flex-direction:row; aspect-ratio:auto; height:auto; min-height:0; overflow-x:auto; overflow-y:hidden; gap:8px; margin-top:12px }
  .car-thumb{ flex:0 0 104px }
  /* El timeline con menos de 4 columnas se lee fatal: pasa a dos filas */
  .tl{ grid-template-rows:1px auto auto; row-gap:var(--s5) }
  .tl-step:nth-of-type(1),.tl-step:nth-of-type(2){ grid-row:2 }
  .tl-step:nth-of-type(3){ grid-column:1; grid-row:3 }
  .tl-step:nth-of-type(4){ grid-column:2; grid-row:3 }
}

@media (max-width:860px){
  body{ font-size:16.5px }
  :root{ --pad:clamp(72px,11vw,110px) }

  /* En pantalla pequeña 18px de recorrido se lee como salto */
  html.js .rv{ transform:translateY(12px); transition-duration:520ms }

  /* Hero en móvil, como en la landing de baño: la foto ARRIBA con el logo encima y el texto debajo sobre negro */
  .hero{ display:block; min-height:0; padding-top:0; background:#000 }
  .hero-bg{ position:relative; inset:auto; width:100%; aspect-ratio:auto; overflow:hidden }
  .hero-img{ position:relative; inset:auto; width:100%; height:auto; object-fit:unset; display:block }
  .hero-bg::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 46%, rgba(0,0,0,.55) 74%, #000 100%) }
  .hero-shade{ display:none }
  html.js .hero-bg,html.js .hero:not(.ready) .hero-bg{ transform:none }
  .hero-inner{ margin-top:-14vw; padding-block:0 clamp(40px,9vw,56px) }
  .hero-logo{ top:20px }
  .logo img{ width:150px }
  .hero-copy{ max-width:none }
  .pill{ font-size:9px; letter-spacing:2px }
  .hero-title{ font-size:clamp(1.75rem,7.2vw,29px); margin-top:20px }
  .hero .lede{ font-size:16px }
  .btn-white{ font-size:13px; padding:15px 24px }
  .hero .cta-note{ font-size:12px }
  .hero-rule{ margin:36px 0 22px }
  .hero-stats{ grid-template-columns:1fr 1fr; gap:22px 16px }
  .hero-stats b{ font-size:24px }
  .hero-stats span{ font-size:9px; letter-spacing:1px; line-height:1.6 }
  .cierre .cierre-bg{ position:absolute; inset:0 }
  .cierre-shade{ background:linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.70) 60%, rgba(0,0,0,.88) 100%) }

  /* Carruseles de proyecto: miniaturas en tira horizontal bajo la imagen */
  .ba-grid{ grid-template-columns:1fr; gap:var(--s5) }
  .ba{ max-width:none }
  .car-viewer .car-slide{ aspect-ratio:1200/1490 }
  .car-thumb img{ aspect-ratio:auto }
  .car-thumbs{
    display:flex; flex-direction:row; aspect-ratio:auto; height:auto; max-height:none; min-height:0;
    overflow-x:auto; overflow-y:hidden; gap:8px; margin-top:12px;
    scroll-snap-type:x proximity; padding-right:0;
  }
  .car-thumb{ flex:0 0 92px; scroll-snap-align:start }
  .car-thumb .ph{ aspect-ratio:3/2 }
  .proj-flip .car-viewer,.proj-flip .car-thumbs{ order:0 }
  .proj-flip .proj-head{ flex-direction:row }
  .car-viewer .car-slide .ph{ aspect-ratio:4/5 }
  /* Las flechas se quedan en móvil: es como se pasan las fotos con el pulgar */
  .proj-foot{ gap:var(--s3) }
  .proj-foot .car-ui{ flex:1 1 100%; gap:10px }
  .proj-foot .car-btn{ width:44px; height:44px }
  .car-bar{ flex:1 1 auto; width:auto; max-width:none }
  .car-count{ font-size:12px }
  .car-count .car-now{ font-size:1.5rem }

  /* Comparador a sangre y vertical */
  .ba{ aspect-ratio:4/5; border-radius:var(--r-s) }
  .ba-handle{ width:48px; height:48px }
  .ba-tag{ top:12px; font-size:10px; padding:7px 11px }
  .ba-tag-l{ left:12px } .ba-tag-r{ right:12px }

  /* Materiales y tríptico */
  .mat{ flex:0 0 76vw }

  /* Timeline vertical */
  .tl{ display:block; position:relative; padding-left:44px }
  .tl-line{
    position:absolute; left:22px; top:0; bottom:0; width:1px; height:auto; margin-inline:0;
    transform-origin:top; -webkit-mask-image:none; mask-image:none;
  }
  html.js .tl:not(.in) .tl-line{ transform:scaleY(0) }
  .tl{ grid-template-rows:none; row-gap:0 }
  .tl-step,.tl-step:nth-of-type(1),.tl-step:nth-of-type(2),.tl-step:nth-of-type(3),.tl-step:nth-of-type(4){ grid-column:auto; grid-row:auto }
  .tl-step{ position:relative; padding-bottom:var(--s6); align-items:flex-start; text-align:left }
  /* En móvil: número arriba, texto debajo y la foto al final */
  .tl-step .tl-media{ order:9; margin-top:20px; width:100% }
  .tl-step .tl-media .ph{ aspect-ratio:3/2 }
  .tl-n{ margin:0 0 12px !important; margin-left:-44px !important; padding-inline:0 8px }
  .tl-close{ text-align:left; margin-left:0 }

  /* Lo que va dentro */

  /* Tus muebles */

  .marquee-track span{ font-size:1.25rem }
  .marquee-track img{ height:40px; max-width:130px }
  .tl-close,.pull{ margin-block:var(--s4) }
  .pull{ font-size:clamp(1.3rem,5.2vw,1.6rem) }
  .ba-note{ max-width:none }
  .ba-note .pull,.ba-note p:not(.pull):not(.cta-note){ max-width:none }
  .btn{ width:100% }
  .cta-row{ width:100% }
  /* El botón ocupa su propia línea; la nota cae debajo, no a su lado */
  .cta-row > .btn{ flex:0 0 100% }
  .center-cta .btn{ width:100% }

  /* ---- DOCK: a sangre y apilado (aquí estaba el bug) ---- */
  .dock{ left:0; right:0; bottom:0; width:100%; transform:translateY(100%) }
  .dock.on{ transform:translateY(0) }
  body.form-open .dock{ transform:translateY(100%) }
  .dock-in{
    flex-direction:column; align-items:stretch; gap:10px; min-height:0;
    border-radius:18px 18px 0 0;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow:none;
  }
  .dock-txt{
    font-family:var(--sans); font-size:13.5px; font-weight:400; line-height:1.35;
    color:var(--on-dark-soft); text-align:center; max-width:none;
  }
  .dock .btn{ width:100%; min-height:54px; font-size:15px }
  footer{ padding-bottom:170px }
}

@media (max-width:420px){
  .figures b{ font-size:2.2rem }
}

/* ---------- 31 · ACCESIBILIDAD / MOTION REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  html.js .rv,html.js .hero-i{ opacity:1 !important; transform:none !important; transition:none }
  html.js .hero-bg{ transform:none !important; transition:none }
  html.js .imgbox.rv:not(.in) .ph{ transform:none }
  html.js .uline::after{ transform:scaleX(1) !important; transition:none }
  html.js .tl:not(.in) .tl-line{ transform:none !important }
  .ba-new,.ba::after,.ba-handle{ transition:none }
  .qbody{ transition-duration:120ms }
  .marquee-track{ animation:none }
  .dock{ transition-duration:200ms }
}
:focus-visible{ outline:2px solid var(--brass-ink); outline-offset:3px; border-radius:2px }
.dark :focus-visible,.cierre :focus-visible{ outline-color:var(--brass-lt) }

/* Sin sombras en toda la landing (decisión del dueño, 08-09-2026) */
.ph,.imgbox,.car-viewer,.car-thumb,.panel,.dock,.dock-in,img,figure{ box-shadow:none !important; filter:none !important }