/* Tokens de Techos Zeta — ver DESIGN.md */
:root{
  --bg:#F3F5F6; --surface:#E4E9EC; --ink:#0A2C47; --muted:#4A6175;
  --accent:#0A2C47; --on-accent:#FFFFFF;
  --field:#0A2C47; --field-surface:#123B5C; --field-deep:#061D30; --on-field:#FFFFFF;
  --font-display:"Bodoni Moda", "Didot", Georgia, serif;
  --font-text:"Jost", "Futura", system-ui, sans-serif;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-sub:clamp(1.5rem,1.05rem + 1.4vw,2.25rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-mega:clamp(150px,15vw,230px);
  --margin:clamp(20px,2.2vw,32px); --gutter:20px;
  --section-gap:clamp(96px,12vw,200px);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text)}

/* Techos Zeta — estilos del sitio. Tokens en tokens.css, decisiones en DESIGN.md */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
html{-webkit-tap-highlight-color:transparent}
body{font-size:var(--step-body);line-height:1.6;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* Controles: tap inmediato y sin selección de texto al mantener apretado */
button,.boton,.chips label,.senales summary,.flotante,.marca{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
p,figcaption,li{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
.defs{position:absolute}
.sr,.cotizador__paso-texto{position:absolute!important;width:1px;height:1px; /* taste-skill-ignore: texto solo para lectores de pantalla */
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:var(--margin);top:-80px;background:var(--ink);color:var(--on-accent);padding:12px 18px;z-index:50}
.saltar:focus{top:12px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:var(--on-accent)}

.titulo{font-family:var(--font-display);font-weight:500;font-size:var(--step-head);line-height:1;letter-spacing:-.02em;font-optical-sizing:auto;text-wrap:balance}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;transition:text-underline-offset .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link:hover{text-underline-offset:.12em}}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;background:var(--accent);color:var(--on-accent);border:0;border-radius:0;text-decoration:none;font-weight:500;cursor:pointer;transition:transform .16s var(--ease-out),background-color .2s}
.boton:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.boton:hover{background:var(--field-surface)}}
.boton--quieto{background:var(--surface);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.boton--quieto:hover{background:#d3dbe0}}
.boton--claro{background:var(--on-field);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.boton--claro:hover{background:var(--surface)}}
.boton svg{width:20px;height:20px}

/* ---------- HERO ---------- */
.hero{--sq:clamp(240px,19vw,300px);min-height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;padding:0 var(--margin);position:relative}
.hero__nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:max(var(--margin),env(safe-area-inset-top));font-size:var(--step-small);font-weight:500}
.hero__nav>.link:last-child{justify-self:end}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--font-display);font-size:var(--step-lead);letter-spacing:-.01em}
.marca__techo{width:46px;height:22px}
.hero__escena{position:relative;align-self:center;height:var(--sq);margin:0 calc(var(--margin) * -1);display:grid;place-items:center}
.hero__foto{position:absolute;left:50%;top:0;width:var(--sq);height:var(--sq);transform:translateX(-50%);overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover}
.cinta{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--step-mega);line-height:.9;letter-spacing:-.03em;white-space:nowrap;text-transform:uppercase;font-variation-settings:"opsz" 30}
.cinta--papel{pointer-events:none;color:var(--on-field);clip-path:inset(0 calc(50% - var(--sq) / 2))}
.cinta__pista{display:flex;align-items:center;gap:.28em;padding-right:.28em;animation:cinta 60s linear infinite;will-change:transform}
.cinta__punto{width:.22em;height:.22em;border-radius:50%;background:currentColor;flex:none}
@keyframes cinta{to{transform:translateX(-50%)}}
.hero__texto{text-align:center;padding-top:clamp(40px,6vh,72px);display:grid;gap:20px;justify-items:center}
.hero__frase{font-size:var(--step-lead);line-height:1.35;max-width:34ch;text-wrap:balance}
.hero__dato{font-size:var(--step-small);font-weight:500;color:var(--muted)}
.hero__zona{display:flex;align-items:center;gap:10px}
.pausa{display:grid;place-items:center;width:44px;height:44px;margin-left:-12px;background:none;border:0;color:var(--ink);cursor:pointer}
.pausa svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5}
.pausa .i-play{display:none;fill:currentColor;stroke:none}
.pausa[aria-pressed=true] .i-pausa{display:none}
.pausa[aria-pressed=true] .i-play{display:block}
.hero.pausada .cinta__pista{animation-play-state:paused}
.hero__pie{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(32px,5vh,56px) 0 var(--margin);font-size:var(--step-small)}

/* ---------- OFICIO ---------- */
main>section{padding:var(--section-gap) var(--margin) 0}
.oficio{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:start}
.oficio__columna{grid-column:2/span 5;display:grid;gap:22px;max-width:46ch}
.oficio__columna .titulo{margin-bottom:12px}
.destacado{font-weight:500;font-size:var(--step-lead);line-height:1.4}
.oficio__figura{grid-column:8/span 5;display:grid;gap:18px}
.oficio__figura picture{aspect-ratio:4/5;overflow:hidden}
.oficio__figura img{width:100%;height:100%;object-fit:cover}
.zeta{width:72%;justify-self:end;margin-top:-4px;fill:none;stroke:var(--ink);stroke-width:3}
.zeta__pared{stroke:var(--muted);stroke-width:2}
.zeta__chapa{stroke:var(--muted);stroke-width:2}
.oficio__figura figcaption{font-size:var(--step-small);color:var(--muted);max-width:40ch;justify-self:end;text-align:right}

/* ---------- SERVICIOS ---------- */
.servicios .titulo{max-width:12ch}
.servicios__grupos{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);margin-top:clamp(48px,7vw,96px);position:relative}
.servicios__grupo{grid-column:span 3}
.servicios__grupo:nth-child(2){grid-column:4/span 3}
.servicios__grupo:nth-child(3){grid-column:7/span 3}
.servicios__grupo h3{font-weight:500;font-size:var(--step-body);margin-bottom:1.25em}
.servicios__grupo li button{background:none;border:0;padding:4px 0;text-align:left;font-size:var(--step-body);line-height:1.3;color:var(--muted);cursor:default;transition:color .2s}
.servicios__grupo li button:focus-visible,.servicios__grupo li button[aria-pressed=true]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.servicios__grupo li button:hover{color:var(--ink)}}
.servicios__desc{grid-column:10/span 3;grid-row:1;align-self:start;font-family:var(--font-display);font-size:var(--step-sub);line-height:1.2;letter-spacing:-.01em;min-height:6em}

/* ---------- SEÑALES ---------- */
.senales{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:start}
.senales__lista{grid-column:1/span 7;container-type:inline-size}
.palabra{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:28cqw;line-height:.8;letter-spacing:-.05em;margin-left:-.04em;font-variation-settings:"opsz" 30;white-space:nowrap;display:inline-block}
.senales__intro{margin:28px 0 24px;max-width:46ch}
.senales details{background:var(--surface);margin-bottom:6px}
.senales summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:0 20px;font-weight:500;cursor:pointer}
.senales summary::-webkit-details-marker{display:none}
.senales summary::after{content:"+";font-size:26px;font-weight:400;transition:transform .25s var(--ease-out)}
.senales details[open] summary::after{transform:rotate(45deg)}
.senales details>div{padding:0 20px 22px;display:grid;gap:12px;justify-items:start;max-width:60ch}
.senales__lateral{grid-column:9/span 4;display:grid;gap:28px;position:sticky;top:32px}
.senales__lateral picture{aspect-ratio:4/5;overflow:hidden}
.senales__lateral img{width:100%;height:100%;object-fit:cover}
.pronostico{display:grid;gap:16px;justify-items:start}
.pronostico h3{font-family:var(--font-display);font-weight:500;font-size:var(--step-sub);line-height:1.05;letter-spacing:-.01em}
.pronostico__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%}
.pronostico__dias:empty,.pronostico__dias:empty+.pronostico__leyenda{display:none}
.pronostico__leyenda{font-size:var(--step-small);color:var(--muted);margin-top:-8px}
.pronostico__dias li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.pronostico__dias li{background:var(--surface);display:grid;grid-template-rows:64px auto auto;align-items:end;justify-items:center;padding:10px 4px 8px;font-size:var(--step-small);line-height:1.2;text-align:center}
.pronostico__dias .barra{width:60%;background:var(--ink);min-height:2px;transform-origin:bottom}
.pronostico__dias b{font-weight:500}
.pronostico__dias li.llueve{background:var(--ink);color:var(--on-field)}
.pronostico__dias li.llueve .barra{background:var(--on-field)}

/* ---------- ZONAS ---------- */
.zonas .titulo{margin-bottom:clamp(28px,4vw,48px)}
.zonas__lista{display:flex;flex-wrap:wrap;font-family:var(--font-display);font-size:var(--step-sub);line-height:1.3;letter-spacing:-.01em;max-width:60ch}
.zonas__lista li:not(:last-child)::after{content:",";margin-right:.3em}
.zonas__lista li:last-child::before{content:"y ";margin-right:.1em}
.marco{display:inline-block;width:1.4em;height:.85em;margin:0 .08em 0 .18em;vertical-align:-.04em;overflow:hidden;transition:transform .25s var(--ease-out);transform-origin:left center}
.marco img{width:100%;height:100%;object-fit:cover}
.zonas__nota{margin-top:28px;font-size:var(--step-body)}

/* ---------- PROCESO ---------- */
.proceso{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:0}
.proceso__titulo{grid-column:7/span 6;grid-row:1}
.proceso__paso{display:grid;grid-template-columns:subgrid;align-items:start}
.proceso__paso picture{overflow:hidden}
.proceso__paso img{width:100%;height:100%;object-fit:cover}
.proceso__paso figcaption{max-width:36ch;font-size:var(--step-body)}
.proceso__paso strong{font-weight:500}
.proceso__paso--1{grid-column:1/-1;grid-row:1}
.proceso__paso--1 picture{grid-column:1/span 4;aspect-ratio:3/4}
.proceso__paso--1 figcaption{grid-column:6/span 4;margin-top:clamp(120px,14vw,220px)}
.proceso__paso--2{grid-column:1/-1;margin-top:clamp(-80px,-4vw,-20px)}
.proceso__paso--2 picture{grid-column:6/span 3;aspect-ratio:1}
.proceso__paso--2 figcaption{grid-column:9/span 4;align-self:center}
.proceso__paso--3{grid-column:1/-1;margin-top:clamp(64px,10vw,180px)}
.proceso__paso--3 picture{grid-column:7/span 6;aspect-ratio:16/10;grid-row:1}
.proceso__paso--3 figcaption{grid-column:2/span 4;grid-row:1;align-self:end}

/* ---------- COTIZADOR ---------- */
.cotizador{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;align-items:start}
.cotizador__intro{grid-column:1/span 5;padding-right:clamp(0px,4vw,64px);display:grid;gap:22px;position:sticky;top:32px}
.cotizador__techo{width:min(260px,100%);height:auto;fill:none;stroke:var(--ink);stroke-width:3;margin-top:20px}
.cotizador__techo .base{stroke:#c4ced5}
.cotizador__techo #cotizador-linea{stroke-dasharray:1;stroke-dashoffset:.75;transition:stroke-dashoffset .6s var(--ease-out)}
.cotizador__form,.cotizador__exito{grid-column:6/span 7;background:var(--surface);padding:clamp(24px,3.5vw,48px)}
.paso{border:0;margin:0;padding:0;min-width:0;display:grid;gap:18px}
.paso legend{font-family:var(--font-display);font-weight:500;font-size:var(--step-sub);line-height:1.05;letter-spacing:-.02em;padding:0;margin-bottom:18px}
.paso__sub{font-weight:500;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;background:var(--bg);transition:background-color .18s,color .18s,transform .16s var(--ease-out)}
.chips label:active span{transform:scale(.97)}
.chips input:checked+span{background:var(--ink);color:var(--on-accent)}
.chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.chips label:hover input:not(:checked)+span{background:#fff}}
.campo{display:grid;gap:8px;font-weight:500}
.campo input,.campo select,.campo textarea{width:100%;min-height:54px;padding:12px 16px;background:var(--bg);border:1px solid #c4ced5;border-radius:0;font-size:16px;font-weight:400}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.campo--archivo input{padding:14px 16px}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: honeypot oculto */
.cotizador__error{margin-top:16px;color:#8a1c1c;font-weight:500}
.cotizador__acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:32px}
.cotizador__exito{display:grid;gap:20px;justify-items:start}
.cotizador__exito h3{font-family:var(--font-display);font-weight:500;font-size:var(--step-sub);line-height:1.05}
.cotizador__exito[hidden],.paso[hidden],[hidden]{display:none!important}

/* ---------- PREGUNTAS ---------- */
.preguntas__fila{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);padding-bottom:clamp(48px,6vw,84px)}
.preguntas__fila h2,.preguntas__fila h3{grid-column:1/span 6;font-family:var(--font-display);font-weight:500;font-size:var(--step-sub);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.preguntas__fila h2{color:var(--muted)}
.preguntas__fila p{grid-column:8/span 5;max-width:42ch;padding-top:.2em}

/* Asistente: una fila más de las preguntas, con la respuesta escrita en el mismo tono */
.consulta{padding-top:clamp(24px,4vw,64px)}
.consulta__panel{grid-column:8/span 5;display:grid;gap:20px;min-width:0}
.consulta__panel p{grid-column:auto;padding:0}
.consulta__charla{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.consulta__charla:empty{display:none}
.consulta__charla li{opacity:1;transform:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);overflow-wrap:anywhere}
@starting-style{.consulta__charla li{opacity:0;transform:translateY(6px)}}
.consulta__yo{justify-self:end;max-width:85%;padding:10px 14px;background:var(--surface);font-size:var(--step-small)}
.consulta__resp{max-width:44ch}
.consulta__resp.pensando{color:var(--muted)}
.consulta__resp a{display:inline-block;margin-top:8px;font-weight:500}
.consulta__sugeridas{display:flex;flex-wrap:wrap;gap:8px}
.consulta__sugeridas[hidden]{display:none}
.consulta__sugeridas button{min-height:44px;padding:0 14px;background:none;border:1px solid #c4ced5;cursor:pointer;font-size:var(--step-small);text-align:left;transition:border-color .2s,transform .16s var(--ease-out)}
.consulta__sugeridas button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.consulta__sugeridas button:hover{border-color:var(--ink)}}
.consulta__form{display:grid;grid-template-columns:1fr auto}
.consulta__form input{min-width:0;min-height:56px;padding:0 16px;background:#fff;border:1px solid #c4ced5;border-right:0;border-radius:0;font-size:16px}
.consulta__form input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.consulta__form .boton:disabled{opacity:.6;cursor:progress}
.consulta__nota{font-size:var(--step-small);color:var(--muted)}

/* ---------- CONTACTO ---------- */
.contacto{padding-left:0!important;padding-right:0!important}
.contacto__filas li{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;min-height:clamp(84px,10vw,150px);padding:0 var(--margin) clamp(14px,1.6vw,26px);font-family:var(--font-display);font-size:clamp(2.25rem,1rem + 4.6vw,5.5rem);line-height:1;letter-spacing:-.03em}
.contacto__filas li:nth-child(odd){background:var(--surface)}
.contacto__filas small{font-family:var(--font-text);font-size:var(--step-body);letter-spacing:.01em;line-height:1.4;padding-bottom:.4em;text-align:right;color:var(--muted)}
.contacto__filas a{text-decoration:none;transition:opacity .2s}
@media (hover:hover) and (pointer:fine){.contacto__filas a:hover{opacity:.7}}
.contacto__saludo a{display:inline-flex;align-items:center;gap:24px}
.contacto__flecha{display:inline-grid;place-items:center;width:.9em;height:.9em;border-radius:50%;background:var(--ink);color:var(--on-accent);transition:transform .25s var(--ease-out)}
.contacto__flecha svg{width:45%;height:45%}
@media (hover:hover) and (pointer:fine){.contacto__saludo a:hover .contacto__flecha{transform:translateX(8px)}}

/* ---------- CIERRE ---------- */
.cierre{background:var(--field);color:var(--on-field);min-height:90svh;margin-top:0;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(56px,8vw,120px) var(--margin) clamp(32px,4vw,48px)!important}
.contacto+.cierre{margin-top:0}
.cierre__techo{width:clamp(140px,16vw,240px);color:var(--on-field);fill:none}
.cierre h2{font-family:var(--font-display);font-weight:500;font-size:clamp(3.5rem,1rem + 9vw,10rem);line-height:.9;letter-spacing:-.04em;max-width:13ch;align-self:center}
.cierre__pie{display:flex;justify-content:space-between;align-items:end;gap:24px}
.cierre__pie p{font-size:var(--step-lead);max-width:28ch;line-height:1.35}

/* ---------- PIE ---------- */
.pie{background:var(--field-deep);color:var(--on-field);padding:clamp(56px,7vw,96px) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom))}
.pie a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.pie a:hover{text-decoration:underline;text-underline-offset:4px}}
.pie__fila{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:48px;align-items:start}
.pie__firma{grid-column:1/span 3;display:grid;gap:10px;width:180px;font-family:var(--font-display);font-size:var(--step-lead);line-height:1}
.pie__firma svg{width:180px;height:auto;aspect-ratio:240/110;color:var(--on-field)}
.pie__firma small{font-family:var(--font-text);font-size:var(--step-small);opacity:.75;letter-spacing:.02em}
.pie__contacto{grid-column:4/span 3;display:grid;gap:6px;font-family:var(--font-display);font-size:var(--step-sub);line-height:1.15}
.pie__links{grid-column:8/span 5;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);font-size:var(--step-small);line-height:1.4}
.pie__links li{padding:6px 0}
.pie__links a{display:inline-block;padding:6px 0;margin:-6px 0}
.pie__links li{opacity:.85}
.pie__legal{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(64px,8vw,96px);font-size:13px;opacity:.75}

/* ---------- FLOTANTES ---------- */
.flotante{position:fixed;right:var(--margin);bottom:calc(var(--margin) + env(safe-area-inset-bottom));width:60px;height:60px;display:grid;place-items:center;background:var(--ink);color:var(--on-accent);z-index:30;opacity:0;transform:translateY(16px);pointer-events:none;box-shadow:0 10px 30px rgba(6,29,48,.28); /* taste-skill-ignore: botón flotante real */
transition:opacity .15s var(--ease-out),transform .15s var(--ease-out)}
.flotante.visible{opacity:1;transform:none;pointer-events:auto;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.flotante svg{width:28px;height:28px}
.flotante.visible:active{transform:scale(.97);transition-duration:.12s}
.barra-movil{display:none}

/* ---------- TABLET ---------- */
@media (max-width:1024px){
  .oficio__columna{grid-column:1/span 6}
  .oficio__figura{grid-column:8/span 5}
  .servicios__grupo{grid-column:span 4!important}
  .servicios__grupo:nth-child(1){grid-column:1/span 4!important}
  .servicios__desc{grid-column:1/-1;grid-row:auto;margin-top:40px;min-height:3em}
  .senales__lista{grid-column:1/-1}
  .senales__lateral{grid-column:1/-1;position:static;grid-template-columns:1fr 1fr;align-items:start;margin-top:56px}
  .cotizador__intro{grid-column:1/-1;position:static}
  .cotizador__form,.cotizador__exito{grid-column:1/-1}
  .consulta__panel{grid-column:7/span 6}
  .contacto__filas li{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px}
  .contacto__filas small{font-size:14px;padding:0;text-align:left;order:2}
  .pie__firma{grid-column:1/span 4}.pie__contacto{grid-column:5/span 4}.pie__links{grid-column:1/-1}
}

/* ---------- CELULAR ---------- */
@media (max-width:700px){
  .hero{--sq:46vw;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .hero__nav .link:first-child{display:none}
  .hero__nav{grid-template-columns:auto 1fr;}
  .hero__nav .marca{justify-self:start}
  .cinta{font-size:34vw}
  .hero__frase{font-size:18px}
  .hero__pie{justify-content:center;text-align:center}
  .hero__pie .boton{display:none}
  .oficio,.senales,.proceso,.cotizador{display:block}
  .oficio__columna{max-width:none}
  .oficio__figura{margin-top:56px}
  .zeta{width:86%}
  .servicios__grupos{display:grid;grid-template-columns:1fr;row-gap:40px}
  .servicios__grupo{grid-column:1/-1!important}
  .servicios__grupo li button{font-size:18px;line-height:1.4;padding:6px 0}
  .servicios__desc{display:none}
  .palabra{font-size:28cqw}
  .senales__lateral{grid-template-columns:1fr;gap:24px}
  .pronostico__dias{gap:4px}
  .pronostico__dias li{padding:8px 2px;grid-template-rows:48px auto auto;font-size:13px}
  
  .proceso__titulo{margin-bottom:40px}
  .proceso__paso{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 56px!important}
  .proceso__paso picture,.proceso__paso figcaption{grid-column:1!important;grid-row:auto!important;margin:0!important}
  .proceso__paso--2 picture{width:62%;justify-self:end}
  .proceso__paso--3 picture{width:78%}
  .cotizador__intro{margin-bottom:32px}
  .cotizador__form,.cotizador__exito{margin:0 calc(var(--margin) * -1);padding:28px var(--margin)}
  .cotizador__acciones{position:sticky;bottom:env(safe-area-inset-bottom,0px);background:var(--surface);padding:12px 0;margin-top:20px}
  .cotizador__acciones .boton{flex:1}
  .preguntas__fila{display:block;padding-bottom:56px}
  .preguntas__fila h2,.preguntas__fila h3{margin-bottom:12px}
  .contacto__filas li{font-size:9.6vw;min-height:84px;padding-bottom:14px}
  .contacto__saludo{background:var(--ink)!important;color:var(--on-field)}
  .contacto__saludo a{width:100%;justify-content:space-between}
  .contacto__saludo .contacto__flecha{width:56px;height:56px;background:var(--on-field);color:var(--ink)}
  .cierre{min-height:80svh}
  .cierre h2{font-size:15vw}
  .cierre__pie{flex-direction:column;align-items:stretch}
  .cierre__pie .boton{width:100%}
  .pie{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .pie__fila{grid-template-columns:1fr 1fr}
  .pie__firma,.pie__contacto,.pie__links{grid-column:1/-1}
  .pie__links{grid-template-columns:1fr 1fr}
  .pie__legal{font-size:13px}
  .flotante{display:none}
  .barra-movil{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;padding:10px var(--margin) calc(10px + env(safe-area-inset-bottom));background:var(--bg);z-index:30;box-shadow:0 -8px 24px rgba(6,29,48,.12) /* taste-skill-ignore: barra fija real */}
  .barra-movil .boton{padding:0 12px}
  .barra-movil{transition:transform .25s var(--ease-out)}
  .barra-movil.oculta{transform:translateY(110%)}
}

/* ---------- MOTION (ver DESIGN.md §7). Sin JS, nada de esto oculta contenido ---------- */
.m [data-rev]{opacity:0;transform:translateY(24px)}
.m [data-rev].in{opacity:1;transform:none;transition:opacity .6s var(--ease-out) var(--d,0ms),transform .75s var(--ease-out) var(--d,0ms)}
.m picture[data-rev]{transform:translateY(32px) scale(.985)}
.m picture[data-rev].in{transform:none}

/* La línea del techo se dibuja: en la marca al cargar, y en el cierre y el pie al entrar */
.marca__techo,.cierre__techo,.pie__firma svg{stroke-dasharray:1}
.marca__techo{animation:techo 1.4s var(--ease-out) .2s both}
@keyframes techo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.m .cierre__techo,.m .pie__firma svg{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out) .15s}
.m .cierre__techo.in,.m .pie__firma.in svg{stroke-dashoffset:0}

/* La Z plegada se arma tramo por tramo con el scroll */
.zeta__perfil{stroke-dasharray:1}
@supports (animation-timeline:view()){
  .zeta__perfil{animation:plegar linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  .hero__foto img{animation:acercar linear both;animation-timeline:scroll(root);animation-range:0 100vh}
}
@keyframes plegar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes acercar{from{transform:scale(1)}to{transform:scale(1.14)}}

/* Barras del pronóstico: crecen desde abajo cuando entran */
.m .pronostico__dias .barra{transform:scaleY(0);transition:transform .7s var(--ease-out)}
.m .pronostico__dias.in .barra{transform:scaleY(1)}
.pronostico__dias li:nth-child(2) .barra{transition-delay:60ms}.pronostico__dias li:nth-child(3) .barra{transition-delay:120ms}.pronostico__dias li:nth-child(4) .barra{transition-delay:180ms}.pronostico__dias li:nth-child(5) .barra{transition-delay:240ms}.pronostico__dias li:nth-child(6) .barra{transition-delay:300ms}.pronostico__dias li:nth-child(7) .barra{transition-delay:360ms}

/* Señales: el contenido aparece al abrir */
.senales details>div{transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
@starting-style{.senales details[open]>div{opacity:0;transform:translateY(-6px)}}

/* Hover y marquee */
@media (hover:hover) and (pointer:fine){
  .hero__escena:hover .cinta__pista{animation-play-state:paused}
  .zonas__lista li:hover .marco{transform:scale(1.6)}
  .proceso__paso picture img,.oficio__figura picture img{transition:transform .6s var(--ease-out)}
  .proceso__paso:hover picture img,.oficio__figura:hover picture img{transform:scale(1.04)}
  .senales summary{transition:background-color .2s ease}
  .senales summary:hover{background:#d8e0e5}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .m [data-rev],.m picture[data-rev]{transform:none}
  .marca__techo{animation:none}
  .pausa{display:none}
  .m .cierre__techo,.m .pie__firma svg,.zeta__perfil{stroke-dashoffset:0;animation:none}
  .hero__foto img{animation:none}
  .m .pronostico__dias .barra{transform:none}
  .cinta__pista{animation:none;transform:translateX(calc(-25% + 0px))}
  .m [data-rev].in{transition:opacity .4s ease var(--d,0ms)}
  /* Los fijos aparecen y se van con opacidad, sin deslizarse */
  .flotante{transform:none}
  .barra-movil{transition:opacity .2s ease}
  .barra-movil.oculta{transform:none;opacity:0;pointer-events:none}
  @starting-style{.consulta__charla li{transform:none}}
}