/* SEDECO – portada dinámica (solo index.html) */
:root{--frio:#1f7fd1;--frio-claro:#7cc4ff;--frio-osc:#0b2a4a;--pos:50%}

/* ---------- HERO calor / frío ---------- */
.hero-tc{position:relative;overflow:hidden;color:#fff;min-height:clamp(560px,calc(100svh - 112px),760px);display:flex;flex-direction:column;justify-content:flex-end;background:var(--granate-2);isolation:isolate;--k:.5}
/* Fase 8: hero de fotos con gradación selectiva (CALOR = escena fría con setas cálidas; FRÍO = escena cálida con carpa/máquinas en azul) */
.tc-capa{position:absolute;inset:0;z-index:-3}
.tc-capa picture{display:block;width:100%;height:100%}
.tc-capa img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease-out}
.hero-tc.listo .tc-capa img{transform:scale(1)}
.tc-calor::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,12,28,.86) 0%,rgba(5,20,42,.62) 38%,rgba(5,20,42,.16) 70%,rgba(5,20,42,.04) 100%)}
.tc-frio{clip-path:inset(0 0 0 var(--pos));-webkit-clip-path:inset(0 0 0 var(--pos))}
.tc-frio::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(40,12,0,.86) 0%,rgba(70,24,4,.6) 40%,rgba(90,34,6,.14) 75%,rgba(90,34,6,.04) 100%)}
.tc-divisor{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:-1;pointer-events:none}
.tc-divisor::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75) 30%,rgba(255,255,255,.75) 70%,rgba(255,255,255,0))}
.tc-aire{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.tc-contenido{position:relative;padding:4.5rem 0 1.5rem;flex:1;display:flex;flex-direction:column;justify-content:center}
.tc-contenido .antetitulo{font-family:var(--f-tit);text-transform:uppercase;letter-spacing:.2em;font-size:.95rem;color:#ffd9bf;margin:0 0 .8rem}
.hero-tc h1{color:#fff;margin:0 0 .5em;text-transform:none;line-height:1.02;max-width:17ch;text-shadow:0 2px 24px rgba(20,0,0,.35)}
.hero-tc .h1-a{display:block;font-size:clamp(2.6rem,6.4vw,5.4rem);text-transform:uppercase;letter-spacing:.005em;color:#fff}
.hero-tc .h1-b{display:block;font-size:clamp(1.25rem,2.4vw,1.9rem);font-weight:400;letter-spacing:.02em;margin-top:.35em;color:#ffe9dc}
.hero-tc .lead{font-size:1.18rem;max-width:46ch;margin:0 0 1.7rem;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-tc .btn-borde{background:rgba(255,255,255,.08);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero-tc .btn-borde:hover{background:#fff;color:var(--granate)}
.hero-tc .btn-rojo{box-shadow:0 10px 30px rgba(214,42,0,.45)}

/* Control inferior */
.tc-control{position:relative;display:grid;grid-template-columns:1fr minmax(240px,320px) 1fr;gap:1rem;align-items:stretch;padding-bottom:1.6rem}
.tc-lado{display:flex;flex-direction:column;justify-content:center;gap:.15rem;padding:1rem 1.3rem;border-radius:14px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}
.tc-lado:hover,.tc-lado:focus-visible{color:#fff;transform:translateY(-3px)}
.tc-lado-calor:hover,.tc-lado-calor:focus-visible,.hero-tc[data-lado="calor"] .tc-lado-calor{background:rgba(214,42,0,.55);border-color:#ff9a6a;box-shadow:0 10px 40px rgba(214,74,8,.45)}
.tc-lado-frio{text-align:right}
.tc-lado-frio:hover,.tc-lado-frio:focus-visible,.hero-tc[data-lado="frio"] .tc-lado-frio{background:rgba(31,127,209,.5);border-color:var(--frio-claro);box-shadow:0 10px 40px rgba(31,127,209,.45)}
.tc-etq{font-family:var(--f-tit);font-size:1.6rem;text-transform:uppercase;letter-spacing:.12em;line-height:1.1}
.tc-sub{font-size:.98rem;opacity:.92}
.tc-lado-calor .tc-etq::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#ff7a2a;margin-right:.45em;vertical-align:.12em;box-shadow:0 0 14px 3px rgba(255,122,42,.8)}
.tc-lado-frio .tc-etq::after{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--frio-claro);margin-left:.45em;vertical-align:.12em;box-shadow:0 0 14px 3px rgba(124,196,255,.8)}
.tc-termo{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.6rem 1rem .7rem;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tc-lectura{font-family:var(--f-tit);line-height:1;display:flex;align-items:flex-start;gap:.1em;font-variant-numeric:tabular-nums}
.tc-grados{font-size:2.4rem;font-weight:600}
.tc-unidad{font-size:1.1rem;margin-top:.25rem;opacity:.85}
.tc-rango{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:.35rem 0 .1rem;cursor:pointer}
.tc-rango::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,#ff5a1a,#ffb070 45%,#cfe9ff 55%,#2a8ae0)}
.tc-rango::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(90deg,#ff5a1a,#ffb070 45%,#cfe9ff 55%,#2a8ae0)}
.tc-rango::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--granate);margin-top:-9px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tc-rango::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--granate);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tc-rango:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:99px}
.tc-pista{display:flex;justify-content:space-between;width:100%;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;opacity:.8}

@media (max-width:860px){
  .hero-tc{min-height:auto}
  .tc-contenido{padding:3rem 0 1.2rem}
  .tc-control{grid-template-columns:1fr 1fr;padding-bottom:1.2rem;gap:.7rem}
  .tc-termo{grid-column:1 / -1;order:-1;flex-direction:row;gap:1rem;padding:.5rem .9rem}
  .tc-termo .tc-pista{display:none}
  .tc-lectura{flex:0 0 auto}
  .tc-grados{font-size:1.8rem}
  .tc-etq{font-size:1.25rem}
  .tc-sub{font-size:.85rem}
  .tc-lado{padding:.8rem .9rem}
  .tc-calor::after{background:linear-gradient(180deg,rgba(3,12,28,.74),rgba(5,20,42,.42) 55%,rgba(3,12,28,.8))}
  .tc-frio::after{background:linear-gradient(180deg,rgba(40,12,0,.74),rgba(70,24,4,.4) 55%,rgba(40,12,0,.8))}
}
@media (max-width:420px){.hero-tc .lead{font-size:1.06rem}.tc-contenido .antetitulo{font-size:.8rem;letter-spacing:.14em}}

/* ---------- Cifras ---------- */
.cifras{background:var(--granate-2);color:#fff;position:relative}
.cifras::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(214,42,0,.35),rgba(214,42,0,0) 45%,rgba(31,127,209,0) 60%,rgba(31,127,209,.28));pointer-events:none}
.cifras-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.cifra{padding:1.7rem 1.2rem;border-left:1px solid rgba(255,255,255,.12)}
.cifra:first-child{border-left:0}
.cifra-n{display:block;font-family:var(--f-tit);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cifra-t{display:block;margin-top:.45rem;color:#f0cfc4;font-size:.98rem;line-height:1.35}
@media (max-width:860px){.cifras-grid{grid-template-columns:1fr 1fr}.cifra:nth-child(3){border-left:0}.cifra{border-top:1px solid rgba(255,255,255,.1)}.cifra:nth-child(-n+2){border-top:0}}

/* ---------- Servicios con micro-animaciones ---------- */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
@media (max-width:1100px){.servicios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.servicios{grid-template-columns:1fr}}
.servicio{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--sombra);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.servicio:hover,.servicio:focus-visible{transform:translateY(-6px);box-shadow:0 18px 40px rgba(40,10,0,.16);color:inherit}
.servicio-foto{aspect-ratio:4/3;overflow:hidden}
.servicio-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.servicio:hover .servicio-foto img{transform:scale(1.06)}
.servicio .cuerpo{position:relative;padding:.9rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.servicio .mi{position:relative;width:58px;height:58px;margin:-29px 0 0 1.1rem;z-index:2;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
.servicio h3{font-size:1.3rem;margin-bottom:.4rem}
.servicio p{color:var(--suave);font-size:1rem;flex:1}
.servicio .mas{font-family:var(--f-tit);text-transform:uppercase;letter-spacing:.05em;color:var(--rojo);font-size:.95rem}
.servicio .mas::after{content:"";display:inline-block;width:18px;height:2px;background:currentColor;vertical-align:.3em;margin-left:.4em;transition:width .3s}
.servicio:hover .mas::after{width:32px}
.servicio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.servicio:hover::after{transform:scaleX(1)}
.s-frio::after{background:var(--frio)}
.s-frio .mas{color:var(--frio)}

/* Furgoneta */
.mi-rueda circle{fill:#222;stroke:#fff;stroke-width:1}
.mi-rueda path{stroke:#fff;stroke-width:1.4}
.mi-rueda{transform-box:fill-box;transform-origin:center;animation:giro 1s linear infinite}
.mi-cuerpo{animation:bache .5s ease-in-out infinite alternate}
.mi-linea{stroke:var(--rojo);stroke-width:2.2;stroke-linecap:round;animation:velocidad 1s linear infinite}
.mi-linea.l2{animation-delay:.3s}.mi-linea.l3{animation-delay:.6s}
.servicio:hover .mi-rueda{animation-duration:.4s}
@keyframes bache{to{transform:translateY(-1px)}}
@keyframes velocidad{0%{opacity:0;transform:translateX(6px)}50%{opacity:1}100%{opacity:0;transform:translateX(-4px)}}

/* ---------- Setas (gas / eléctrica) ---------- */
.setas-sec{background:radial-gradient(ellipse at 80% 40%,#fff1e4 0%,#fff 60%)}
.setas-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
@media (max-width:860px){.setas-grid{grid-template-columns:1fr;gap:1.5rem}}
.setas-tabs{display:inline-flex;background:#f6ece7;border-radius:99px;padding:4px;margin:.4rem 0 1.2rem}
.setas-tabs button{font:500 1rem var(--f-tit);text-transform:uppercase;letter-spacing:.06em;border:0;background:transparent;color:var(--granate);padding:.6rem 1.3rem;border-radius:99px;cursor:pointer;transition:background .25s,color .25s}
.setas-tabs button[aria-selected="true"]{background:var(--rojo);color:#fff;box-shadow:0 6px 16px rgba(214,42,0,.3)}
.setas-panel .lista-check{min-height:9.5em}
.setas-panel:not([hidden]){animation:entra .45s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.setas-ilus-caja{position:relative;aspect-ratio:320/360;max-width:420px;width:100%;margin-inline:auto}
.seta-ilus{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s,transform .5s}
.setas-ilus-caja[data-modo="gas"] .seta-elec,.setas-ilus-caja[data-modo="elec"] .seta-gas{opacity:0;transform:scale(.96);pointer-events:none}
.sg-suelo{fill:#3a0100;opacity:.08}
.sg-cono{animation:latido 3s ease-in-out infinite;transform-origin:160px 62px}
.sg-llama{fill:#ff8a3d;animation:llama .18s steps(2) infinite alternate;filter:drop-shadow(0 0 8px #ff7a2a)}
.sg-ondas path{fill:none;stroke:#ff7a2a;stroke-width:3;stroke-linecap:round;opacity:0;animation:onda 2.6s ease-in-out infinite}
.sg-ondas path:nth-child(2){animation-delay:.65s}.sg-ondas path:nth-child(3){animation-delay:1.3s}.sg-ondas path:nth-child(4){animation-delay:1.95s}
.sg-radio path{stroke:var(--granate);stroke-width:2;stroke-dasharray:6 6;fill:none}
.sg-radio text{font:600 20px var(--f-tit);fill:var(--granate)}
.se-cono{animation:latido 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center top}
.se-cono.c2{animation-delay:.8s}.se-cono.c3{animation-delay:1.6s}
.se-filamento{fill:#ffcf70;filter:drop-shadow(0 0 6px #ff9a3d);animation:brilloSeta 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.75;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.03)}}
@keyframes llama{from{opacity:.75}to{opacity:1}}

/* ---------- Cinta de espacios ---------- */
.cinta{display:flex;overflow:hidden;background:var(--rojo);color:#fff;padding:1rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta-pista{display:flex;flex:0 0 auto;gap:0;margin:0;padding:0;list-style:none;animation:cinta 40s linear infinite}
.cinta-pista li{font-family:var(--f-tit);text-transform:uppercase;letter-spacing:.12em;font-size:1.15rem;white-space:nowrap;padding:0 1.4rem;display:flex;align-items:center}
.cinta-pista li::after{content:"";width:7px;height:7px;border-radius:50%;background:#ffd2c2;margin-left:2.8rem}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-100%)}}

/* ---------- Pasos y valores ---------- */
.pasos{list-style:none;counter-reset:p;padding:0;margin:0 0 1.6rem}
.pasos li{counter-increment:p;position:relative;padding:0 0 1rem 3.1rem;color:var(--texto)}
.pasos li::before{content:counter(p);position:absolute;left:0;top:-.1rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--rojo);color:#fff;font:600 1.05rem/2.1rem var(--f-tit);text-align:center}
.pasos li:not(:last-child)::after{content:"";position:absolute;left:1.02rem;top:2.2rem;bottom:.1rem;width:2px;background:linear-gradient(var(--rojo),rgba(214,42,0,.15))}
.valores-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.3rem 0 1.6rem}
.valores-mini div{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.8rem .4rem;border-radius:12px;background:var(--fondo);text-align:center;font-family:var(--f-tit);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;color:var(--granate);transition:transform .25s,background .25s}
.valores-mini div:hover{transform:translateY(-3px);background:#fbeee9}
.valores-mini svg{width:28px;height:28px;fill:var(--rojo)}
@media (max-width:460px){.valores-mini{grid-template-columns:repeat(2,1fr)}}

/* ---------- Galería ---------- */
.galeria-din figure{position:relative;overflow:hidden;border-radius:12px}
.galeria-din img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.galeria-din figure:hover img{transform:scale(1.05)}
.galeria-din figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2rem 1rem .8rem;color:#fff;font-family:var(--f-tit);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;background:linear-gradient(transparent,rgba(30,5,0,.75))}
.destacado-img img{transition:transform .8s}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .mi-aspas,.mi-onda,.mi-brillo,.mi-gota,.mi-vapor,.mi-rueda,.mi-cuerpo,.mi-linea,.sg-cono,.sg-llama,.sg-ondas path,.se-cono,.se-filamento,.cinta-pista{animation:none!important}
  .mi-onda,.sg-ondas path,.mi-vapor,.mi-linea{opacity:.8}
  .cinta{overflow-x:auto}
  .tc-capa img{transform:none;transition:none}
}

/* Botón flotante de llamada: aparece al dejar atrás el hero (que ya tiene su botón de teléfono) */
@media (max-width:700px){
  .llamar-movil{bottom:calc(1rem + env(safe-area-inset-bottom));transition:opacity .3s,transform .3s}
  .llamar-movil.oculto{opacity:0;transform:translateY(20px) scale(.8);pointer-events:none}
  .llamar-movil::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rojo);animation:aro 2.4s ease-out infinite}
}
@keyframes aro{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.llamar-movil::before{animation:none;display:none}}

/* ===== Fase 2: frío (nebulizadores y evaporativos) en la portada ===== */
/* Chips del hero: cambian según el lado (calor / frío) */
.tc-chips{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.4rem}
.tc-chips ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tc-chips a{display:inline-flex;align-items:center;gap:.45em;padding:.38rem .85rem;border-radius:99px;font-size:.95rem;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .25s,border-color .25s,transform .25s}
.tc-chips a:hover{transform:translateY(-2px);color:#fff}
.tc-chips-calor a::before,.tc-chips-frio a::before{content:"";width:.5em;height:.5em;border-radius:50%}
.tc-chips-calor a::before{background:#ff7a2a;box-shadow:0 0 8px 2px rgba(255,122,42,.7)}
.tc-chips-frio a::before{background:var(--frio-claro);box-shadow:0 0 8px 2px rgba(124,196,255,.7)}
.tc-chips-calor a:hover{background:rgba(214,42,0,.55);border-color:#ff9a6a}
.tc-chips-frio a:hover{background:rgba(31,127,209,.55);border-color:var(--frio-claro)}
.tc-chips ul{transition:opacity .35s,transform .35s}
.hero-tc[data-lado="calor"] .tc-chips-frio,.hero-tc[data-lado="frio"] .tc-chips-calor{opacity:.25;transform:scale(.96)}
.hero-tc[data-lado="frio"] .tc-chips-frio a{background:rgba(31,127,209,.55);border-color:var(--frio-claro)}
.hero-tc[data-lado="calor"] .tc-chips-calor a{background:rgba(214,42,0,.5);border-color:#ff9a6a}
@media (max-width:600px){.tc-chips a{font-size:.85rem;padding:.3rem .7rem}}

/* Tarjetas: 6 servicios, 3 columnas */
.servicios{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.servicios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.servicios{grid-template-columns:1fr}}
.servicio-ilus{background:linear-gradient(180deg,#e9f5ff,#cfe7fb)}
.servicio-ilus svg{width:100%;height:100%;display:block}
.servicio-ilus .ilus-fondo{rx:0}
.servicio:hover .servicio-ilus svg{transform:scale(1.04)}
.servicio-ilus svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.etq-top{align-self:flex-start;font-family:var(--f-tit);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:#fff;background:var(--frio);padding:.15rem .55rem;border-radius:99px;margin-bottom:.45rem}
.s-frio h3{color:var(--frio-osc)}

/* Sección frío */
.frio-sec{background:radial-gradient(ellipse at 20% 40%,#e3f2ff 0%,#fff 62%)}
.frio-ilus-caja{aspect-ratio:320/300;max-width:460px}
.frio-ilus-caja .aparato-ilus{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s,transform .5s;filter:drop-shadow(0 18px 36px rgba(11,42,74,.18))}
.frio-ilus-caja[data-modo="niebla"] .ilus-evaporativo,.frio-ilus-caja[data-modo="evapo"] .ilus-nebulizador{opacity:0;transform:scale(.96);pointer-events:none}
.tabs-frio{background:#e6f1fb}
.tabs-frio button{color:var(--frio-osc)}
.tabs-frio button[aria-selected="true"]{background:var(--frio);box-shadow:0 6px 16px rgba(31,127,209,.3)}
.frio-sec .lista-check li::before{background-color:var(--frio)}
.frio-sec .setas-panel .lista-check{min-height:8.5em}

/* Cinta: equipos destacados */
.cinta-pista li.dest{color:#fff;font-weight:600}
.cinta-pista li.dest::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--frio-claro);box-shadow:0 0 10px 2px rgba(124,196,255,.9);margin-right:.7rem}
@media (prefers-reduced-motion:reduce){.mi-spray circle,.mi-flujo{animation:none!important}.mi-spray circle{opacity:.8}}

/* ---------- Fase 7: hero calor/frío ilustrado ----------
   --k (0…1) lo pone portada.js según el control: 0 = CALOR (escena fría y setas cálidas), 1 = FRÍO (escena cálida y máquinas/carpa frías). */
.tc-fondo{position:absolute;inset:0;z-index:-4;background:linear-gradient(100deg,#0a2547 0%,#0f3766 36%,#175ea3 70%,#3289d8 100%)}
.tc-fondo::after{content:"";position:absolute;inset:0;opacity:var(--k);background:linear-gradient(100deg,#6a2405 0%,#9c4309 36%,#cf6f1c 70%,#efa63f 100%)}
.tc-velo{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(3,8,16,.42) 0%,rgba(3,8,16,.3) 34%,rgba(3,8,16,.06) 56%,rgba(3,8,16,0) 70%),linear-gradient(0deg,rgba(3,8,16,.5) 0%,rgba(3,8,16,0) 30%)}
.tc-escena{position:absolute;z-index:-3;right:max(0px,calc((100vw - 1280px)/2));top:1.2rem;bottom:150px;width:min(52%,740px);pointer-events:none}
.tc-svg{width:100%;height:100%;display:block;overflow:visible}
.tc-aire{z-index:-1}
.hs-suelo{fill:rgba(255,255,255,.06)}
.hs-sombra{fill:#000;opacity:.25}
.hs-metal{fill:#dfe5ea;stroke:#7d8a96;stroke-width:1.5}
.hs-reflector{fill:#eef2f5}
.hs-llama{fill:#ffcf5a;opacity:calc(.25 + .75*(1 - var(--k)));filter:drop-shadow(0 0 10px rgba(255,180,60,calc(1 - var(--k))))}
.hs-cono,.hs-charco,.hs-halo{opacity:calc(1 - var(--k))}
.hs-halo{mix-blend-mode:screen}
.hs-lado-calor{opacity:calc(1 - .4*var(--k))}
.hs-lado-frio{opacity:calc(.6 + .4*var(--k))}
.hs-aura{opacity:var(--k);mix-blend-mode:screen}
.hs-lona{fill:url(#hs-lona);stroke:rgba(255,255,255,.75);stroke-width:2}
.hs-faldon{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2}
.hs-puerta{fill:rgba(0,0,0,.22);stroke:rgba(255,255,255,.5);stroke-width:1.5}
.hs-mastil{stroke:rgba(255,255,255,.55);stroke-width:3}
.hs-cuerpo{fill:#e6ebef;stroke:#7d8a96;stroke-width:1.5}
.hs-rejilla{stroke:#9aa7b3;stroke-width:2}
.hs-rejilla-base{fill:#9aa7b3}
.hs-conducto{fill:none;stroke:#cfd8e0;stroke-width:15;stroke-linecap:round}
.hs-tinte{fill:#5fb0ff;opacity:calc(.5*var(--k));mix-blend-mode:multiply}
.hs-carpa .hs-tinte{fill:#7cc4ff;opacity:calc(.55*var(--k));mix-blend-mode:normal}
.hs-flujo path{fill:none;stroke:#e6f5ff;stroke-width:4;stroke-linecap:round;stroke-dasharray:6 14;opacity:var(--k);animation:fluye 1.1s linear infinite}
.hs-copo{fill:#e6f5ff;opacity:0;animation:hsCopo 4s ease-in-out infinite}
.hc1{animation-delay:-.7s}.hc2{animation-delay:-1.4s}.hc3{animation-delay:-2.1s}.hc4{animation-delay:-2.8s}.hc5{animation-delay:-3.4s}
.hs-copos{opacity:var(--k)}
@keyframes hsCopo{0%{opacity:0;transform:translateY(-6px)}30%{opacity:.95}100%{opacity:0;transform:translateY(16px)}}
.hs-seta .hs-halo{animation:hsLatido 3.2s ease-in-out infinite}
@keyframes hsLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.hs-halo{transform-box:fill-box;transform-origin:center}
.hero-tc .lead,.hero-tc h1{text-shadow:0 2px 18px rgba(0,0,0,.45)}
@media (max-width:1100px){.tc-escena{width:50%;opacity:.9}}
@media (max-width:860px){
  .tc-escena{position:relative;inset:auto;width:100%;max-width:520px;height:auto;aspect-ratio:680/520;margin:-.5rem auto .3rem;right:auto;opacity:1}
  .tc-velo{background:linear-gradient(180deg,rgba(3,8,16,.4) 0%,rgba(3,8,16,.25) 45%,rgba(3,8,16,0) 70%)}
}
@media (prefers-reduced-motion:reduce){
  .hs-flujo path,.hs-copo,.hs-seta .hs-halo{animation:none!important}
  .hs-copo{opacity:.7}
}

/* ---------- Fase 8: la ilustración calor/frío pasa a banda propia bajo el hero ---------- */
.tc-banda{background:#05142a;min-height:clamp(560px,86svh,720px)}
.tc-banda h2{color:#fff;margin:0 0 .5em;text-transform:none;line-height:1.02;max-width:16ch;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.tc-banda .h1-a{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.tc-banda .lead{max-width:44ch}
.tc-banda .tc-contenido{padding-top:3.5rem}
/* hasta que la banda entra en pantalla, sus animaciones CSS quedan en pausa */
.tc-banda:not(.activa) .tc-escena *{animation-play-state:paused!important}
@media (max-width:860px){.tc-banda{min-height:auto}.tc-banda .tc-contenido{padding-top:2.6rem}}

/* ---------- Fase 9: foto completa (sin recorte) sobre un fondo desenfocado de la misma foto ----------
   Escritorio: la foto entera en un marco 4:3 a la derecha del texto y por encima de la barra Calor/Frío.
   ≤1100 px: la foto entera arriba y el texto debajo. */
.tc-capa{container-type:size}
.tc-capa .tc-relleno{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.tc-capa .tc-relleno img{width:100%;height:100%;object-fit:cover;filter:blur(26px) brightness(.62) saturate(1.1);transform:scale(1.15);transition:none}
.hero-tc.listo .tc-capa .tc-relleno img{transform:scale(1.15)}
.tc-capa::after{z-index:0}
.tc-capa .tc-marco{
  --barra:190px; --izq:calc(max(1.25rem,(100cqw - 1180px)/2) + 580px); --der:max(1.25rem,(100cqw - 1640px)/2);
  --fw:min(calc(100cqw - var(--izq) - var(--der)),calc((100cqh - 2.5rem - var(--barra))*4/3));
  position:absolute;z-index:1;display:block;width:var(--fw);height:calc(var(--fw)*.75);
  right:calc(var(--der) + (100cqw - var(--izq) - var(--der) - var(--fw))/2);
  top:calc(1.5rem + (100cqh - 2.5rem - var(--barra) - var(--fw)*.75)/2);
  border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14)}
.tc-capa .tc-marco img{width:100%;height:100%;object-fit:cover;transform:none!important;transition:none}
.hero-tc:not(.tc-banda) .tc-contenido>*{max-width:540px}
.hero-tc:not(.tc-banda) .h1-a{font-size:clamp(2.6rem,5.2vw,4.6rem)}
@media (max-width:1100px){
  .hero-tc:not(.tc-banda){--foto:min(100vw - 2.5rem,720px)}
  .tc-capa .tc-marco{--fw:min(100cqw - 2.5rem,720px);top:1.2rem;right:auto;left:calc((100cqw - var(--fw))/2);border-radius:12px}
  .hero-tc:not(.tc-banda) .tc-contenido{padding-top:calc(var(--foto)*.75 + 2.6rem)}
  .hero-tc:not(.tc-banda) .tc-contenido>*{max-width:none}
  .hero-tc:not(.tc-banda) .lead{max-width:46ch}
}
@media (max-width:860px){
  .tc-calor::after{background:linear-gradient(180deg,rgba(3,12,28,.35),rgba(3,12,28,.55) 30%,rgba(3,12,28,.8))}
  .tc-frio::after{background:linear-gradient(180deg,rgba(40,12,0,.35),rgba(40,12,0,.55) 30%,rgba(40,12,0,.8))}
}

/* Fase 10: el barrido calor/frío recorre la foto enmarcada (--dx en px, lo calcula portada.js) y las tarjetas son botones */
.hero-tc:not(.tc-banda) .tc-frio{clip-path:inset(0 0 0 var(--dx,var(--pos)));-webkit-clip-path:inset(0 0 0 var(--dx,var(--pos)))}
.hero-tc:not(.tc-banda) .tc-divisor{opacity:var(--d-op,1);left:var(--dx,var(--pos));top:var(--m-top,0);bottom:auto;height:var(--m-alto,100%);z-index:2}
.hero-tc:not(.tc-banda) .tc-divisor::before{left:-1.5px;width:3px;background:rgba(255,255,255,.85);box-shadow:0 0 12px rgba(255,255,255,.55)}
button.tc-lado{font:inherit;color:#fff;text-align:left;cursor:pointer;width:100%;-webkit-appearance:none;appearance:none}
button.tc-lado-frio{text-align:right}
button.tc-lado:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-tc:not(.tc-banda) .tc-lado[aria-pressed="true"]{transform:translateY(-3px)}

/* Fase 11 (escritorio ≥1101 px): todo el hero cabe en la primera pantalla. Texto más compacto a la izquierda con los
   controles Calor/Frío debajo; la foto entera (4:3, sin recortar) ocupa casi toda la altura a la derecha. */
@media (min-width:1101px){
  .hero-tc:not(.tc-banda){--txt:clamp(390px,31vw,500px);--x0:max(1.25rem,(100% - 1680px)/2);--pad:clamp(.9rem,2.2vh,1.6rem);
    height:clamp(500px,calc(100svh - var(--cab,115px)),1040px);min-height:0;justify-content:center}
  .hero-tc:not(.tc-banda) .tc-contenido,.hero-tc:not(.tc-banda) .tc-control{width:var(--txt);margin-left:var(--x0);margin-right:0}
  .hero-tc:not(.tc-banda) .tc-contenido{flex:0 1 auto;padding:0 0 clamp(.6rem,1.6vh,1.1rem);justify-content:flex-start}
  .hero-tc:not(.tc-banda) .tc-contenido>*{max-width:none}
  .hero-tc:not(.tc-banda) .antetitulo{font-size:.78rem;letter-spacing:.16em;margin:0 0 .45rem}
  .hero-tc:not(.tc-banda) h1{max-width:none;margin:0 0 .55rem}
  .hero-tc:not(.tc-banda) .h1-a{font-size:clamp(1.9rem,2.65vw,3.1rem);line-height:1.02}
  .hero-tc:not(.tc-banda) .h1-b{font-size:clamp(.98rem,1.15vw,1.3rem);margin-top:.35em;line-height:1.2}
  .hero-tc:not(.tc-banda) .lead{font-size:clamp(.86rem,.82vw,1rem);line-height:1.5;margin:0 0 .9rem;max-width:none;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .hero-tc:not(.tc-banda) .botones{gap:.6rem}
  .hero-tc:not(.tc-banda) .botones .btn{padding:.6rem 1.15rem;font-size:.92rem}
  .hero-tc:not(.tc-banda) .tc-chips{margin-top:.75rem;gap:.35rem}
  .hero-tc:not(.tc-banda) .tc-chips ul{gap:.35rem}
  .hero-tc:not(.tc-banda) .tc-chips a{font-size:.74rem;padding:.22rem .6rem}
  /* controles debajo del texto: termómetro arriba y las dos tarjetas en dos columnas */
  .hero-tc:not(.tc-banda) .tc-control{grid-template-columns:1fr 1fr;gap:.55rem;padding:0 0 var(--pad)}
  .hero-tc:not(.tc-banda) .tc-termo{grid-column:1 / -1;order:-1;flex-direction:row;gap:.9rem;padding:.35rem .9rem}
  .hero-tc:not(.tc-banda) .tc-termo .tc-pista{display:none}
  .hero-tc:not(.tc-banda) .tc-lectura{flex:0 0 auto}
  .hero-tc:not(.tc-banda) .tc-grados{font-size:1.6rem}
  .hero-tc:not(.tc-banda) .tc-rango{margin:0}
  .hero-tc:not(.tc-banda) .tc-lado{padding:.5rem .8rem;border-radius:12px}
  .hero-tc:not(.tc-banda) .tc-etq{font-size:1.12rem}
  .hero-tc:not(.tc-banda) .tc-sub{font-size:.74rem;line-height:1.3}
  /* foto: a la derecha del texto, tan grande como permitan alto y ancho */
  .tc-capa .tc-marco{--izq:calc(max(1.25rem,(100cqw - 1680px)/2) + clamp(390px,31vw,500px) + clamp(1.5rem,2.5vw,2.6rem));
    --der:max(1.25rem,(100cqw - 1680px)/2);--vp:clamp(.9rem,2.2vh,1.6rem);
    --fw:min(calc(100cqw - var(--izq) - var(--der)),calc((100cqh - 2*var(--vp))*4/3));
    right:auto;left:calc(var(--izq) + (100cqw - var(--izq) - var(--der) - var(--fw))/2);
    top:calc((100cqh - var(--fw)*.75)/2)}
}
/* alturas cortas de portátil: menos aire y subtítulos de tarjeta ocultos */
@media (min-width:1101px) and (max-height:800px){
  .hero-tc:not(.tc-banda) .lead{-webkit-line-clamp:2;line-clamp:2}
  .hero-tc:not(.tc-banda) .tc-sub{display:none}
  .hero-tc:not(.tc-banda) .tc-chips{margin-top:.55rem}
}

/* Fase 12: texto alineado con el logo (borde del contenedor) y frase corta completa en escritorio; el texto descriptivo
   completo se ve en móvil/tableta (≤1100 px). La foto puede salir un poco del contenedor por la derecha. */
.hero-tc .lead-corta{display:none}
@media (min-width:1101px){
  .hero-tc:not(.tc-banda){--x0:max(1.25rem,(100% - var(--ancho,1180px))/2)}
  .hero-tc:not(.tc-banda) .lead-larga{display:none}
  .hero-tc:not(.tc-banda) .lead-corta{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible;font-size:clamp(.95rem,.9vw,1.1rem)}
  .tc-capa .tc-marco{--izq:calc(max(1.25rem,(100cqw - var(--ancho,1180px))/2) + clamp(390px,31vw,500px) + clamp(1.5rem,2.5vw,2.6rem));
    --der:max(1.25rem,(100cqw - var(--ancho,1180px))/2*.2)}
}

/* Fase 13 (solo móvil ≤768 px): la barra Calor/Frío va justo debajo de la foto, en una sola fila fina
   (Calor · termómetro · Frío), para mover el deslizador viendo la foto. Escritorio y tableta no cambian. */
@media (max-width:768px){
  .hero-tc:not(.tc-banda) .tc-control{order:-1;margin-top:calc(1.2rem + var(--foto)*.75 + .55rem);padding-bottom:0;
    grid-template-columns:auto 1fr auto;gap:.4rem;align-items:center}
  .hero-tc:not(.tc-banda) .tc-contenido{padding-top:1.5rem}
  .hero-tc:not(.tc-banda) .tc-termo{order:0;grid-column:auto;flex-direction:row;gap:.5rem;padding:.2rem .65rem;border-radius:99px;min-width:0}
  .hero-tc:not(.tc-banda) .tc-grados{font-size:1.05rem}
  .hero-tc:not(.tc-banda) .tc-unidad{font-size:.7rem;margin-top:.05rem}
  .hero-tc:not(.tc-banda) .tc-rango{margin:0;height:24px;min-width:0}
  .hero-tc:not(.tc-banda) .tc-rango::-webkit-slider-runnable-track{height:6px}
  .hero-tc:not(.tc-banda) .tc-rango::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px;border-width:2px}
  .hero-tc:not(.tc-banda) .tc-rango::-moz-range-track{height:6px}
  .hero-tc:not(.tc-banda) .tc-rango::-moz-range-thumb{width:16px;height:16px;border-width:2px}
  .hero-tc:not(.tc-banda) .tc-lado{padding:.4rem .75rem;border-radius:99px;min-height:36px;width:auto}
  .hero-tc:not(.tc-banda) .tc-lado[aria-pressed="true"]{transform:none}
  .hero-tc:not(.tc-banda) .tc-lado:hover,.hero-tc:not(.tc-banda) .tc-lado:focus-visible{transform:none}
  .hero-tc:not(.tc-banda) .tc-etq{font-size:.85rem;letter-spacing:.06em;line-height:1.1}
  .hero-tc:not(.tc-banda) .tc-sub{display:none}
}