/* =====================================================================
   p-termitas.css · /control-de-termitas-cdmx/ · efecto firma «Galerías»
   Veta de madera que se carcome con el scroll (galerías SVG + termitas que
   avanzan) + tira de calendario de termitas aladas. Prefijos: ter- · gal-.
   Estado inicial oculto SOLO bajo .fx .gal--viva (lo pone p-termitas.js):
   sin JS o con movimiento reducido, todo se ve terminado.
   ===================================================================== */

/* ---------- HERO: visor macro sobre la madera ---------- */
.ter-cam{position:relative;width:min(100%,430px);margin-inline:auto;aspect-ratio:4/5;border-radius:30px;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 46%,transparent 34%,rgba(18,8,2,.62) 78%),repeating-linear-gradient(91deg,rgba(80,40,15,.2) 0 2px,transparent 2px 11px),repeating-linear-gradient(89deg,rgba(255,240,220,.06) 0 1px,transparent 1px 27px),linear-gradient(90deg,#A9693A,#C48650 30%,#B57643 55%,#C98D55 80%,#A46536);
  box-shadow:0 0 0 10px rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.65)}
.ter-cam>svg.ter-tun{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.ter-tun path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ter-tun .o{stroke:#2a1407;stroke-width:15}
.ter-tun .i{stroke:#4a260f;stroke-width:6}
.ter-lente{position:absolute;left:50%;top:47%;width:64%;aspect-ratio:1;translate:-50% -50%;z-index:1;border-radius:50%;
  box-shadow:0 0 0 2px rgba(37,244,238,.85),0 0 0 14px rgba(1,47,74,.35),0 0 0 15px rgba(255,255,255,.35),inset 0 0 60px rgba(0,0,0,.45);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),transparent 45%)}
.ter-bicho{position:absolute;inset:12%;display:grid;place-items:center}
.ter-bicho svg{width:100%;height:auto;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4.6}
.ter-bicho .l-c{stroke:var(--cian);transform:translate(-4px,1px)}
.ter-bicho .l-m{stroke:var(--magenta);transform:translate(4px,-1px)}
.ter-bicho .l-w{stroke:#FFF3E3}
.ter-mira{position:absolute;inset:0;z-index:2;pointer-events:none}
.ter-mira::before,.ter-mira::after{content:"";position:absolute;left:50%;top:47%;background:rgba(255,255,255,.55)}
.ter-mira::before{width:1px;height:26px;margin:-13px 0 0}
.ter-mira::after{width:26px;height:1px;margin:0 0 0 -13px}
.ter-hud{position:absolute;inset:0;z-index:3;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;pointer-events:none}
.ter-hud>div{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.ter-hud span{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .6rem;border-radius:8px;background:rgba(0,17,29,.62)}
.ter-hud .rec-dot{width:8px;height:8px}
.ter-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;border-radius:14px;background:#fff;color:var(--estudio);font-size:.8rem;font-weight:700;line-height:1.15;box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
.ter-chip i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--magenta);color:#fff;font:400 .95rem/1 var(--f-display);font-style:normal}
.ter-chip small{display:block;font-weight:500;color:var(--gris)}
.ter-chip--a{left:-6%;top:16%;transform:rotate(-3deg)}
.ter-chip--b{right:-5%;bottom:13%;transform:rotate(2.5deg)}
.ter-cam-wrap{position:relative;padding-inline:4%}
@media (prefers-reduced-motion:no-preference){
  .fx .ter-bicho svg{animation:terCamina 3.4s ease-in-out infinite}
}
@keyframes terCamina{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(0,-7px) rotate(2.5deg)}}

/* ---------- madera seca vs subterránea ---------- */
.ter-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
.ter-tipo{position:relative;padding:1.6rem 1.6rem 1.7rem;border-radius:26px;background:var(--estudio);color:#fff;overflow:hidden}
.ter-tipo:nth-child(2){background:var(--pcd)}
.ter-tipo::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 2px,transparent 2px 12px)}
.ter-tipo h3{font-size:clamp(1.9rem,2.8vw,2.6rem);margin-bottom:1rem}
.ter-tipo h3 small{display:block;margin-top:.35rem;font:600 .78rem/1.2 var(--f-body);letter-spacing:.14em;color:var(--cian)}
.ter-tipo dl{display:grid;gap:.85rem;margin:0}
.ter-tipo dt{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bruma)}
.ter-tipo dd{margin:.2rem 0 0;font-size:1rem;line-height:1.55}
.ter-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:1.2rem}

/* ---------- «GALERÍAS» ---------- */
.gal-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(2rem,5vw,5rem);align-items:start;margin-top:clamp(1.6rem,3vw,2.6rem)}
.gal-board{position:sticky;top:calc(var(--hdr) + 2.5vh);z-index:2}
.gal-frame{position:relative;width:min(100%,calc(100vh - var(--hdr) - 7vh));aspect-ratio:1;margin-inline:auto;padding:12px;border-radius:28px;background:#061420;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 40px 80px -40px rgba(0,0,0,.85)}
.gal-svg{display:block;width:100%;height:100%;overflow:visible}
.gal-piso{fill:#0e1d29}
.gal-veta path{fill:none;stroke:#5a2f12}
.gal-nudo ellipse{fill:none;stroke:#6b3a18;stroke-opacity:.5;stroke-width:2.2}
.gal-p{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}
.gal-p--o{stroke:#271206;stroke-width:17}
.gal-p--i{stroke:#4d2810;stroke-width:6.5}
.gal-p--o[data-b]{stroke-width:12}
.gal-p--i[data-b]{stroke-width:4}
.gal-lodo{stroke:#7d5836;stroke-width:15}
.gal-lodo--i{stroke:#9b7449;stroke-width:5;stroke-dasharray:1 1}
.gal-ruta{fill:none;stroke:none}
.gal-bug{opacity:0;transition:opacity .25s}
.gal-bug use{fill:none;stroke:#FFF1DC;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.gal-pin{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.3,1.5,.4,1),opacity .35s}
.gal-pin circle{fill:var(--magenta);stroke:#fff;stroke-width:3}
.gal-pin text{font:400 19px/1 var(--f-display);fill:#fff;text-anchor:middle;letter-spacing:.02em}
.gal-bolitas ellipse{fill:#D8B48A;stroke:#8c5f35;stroke-width:.8}
.gal-alas g{fill:rgba(255,255,255,.5);stroke:rgba(255,255,255,.85);stroke-width:1.1}
.gal-toc path{fill:none;stroke:var(--cian);stroke-width:3.4;stroke-linecap:round}
.gal-bolitas,.gal-alas,.gal-toc{transform-box:fill-box;transition:opacity .5s,transform .8s var(--ease)}
.gal-hud{position:absolute;inset:12px;z-index:2;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:14px}
.gal-hud>div{display:flex;justify-content:space-between;gap:.6rem}
.gal-hud span{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .62rem;border-radius:8px;background:rgba(0,17,29,.72);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.gal-hud .rec-dot{width:8px;height:8px}
.gal-hud b{color:var(--cian);font-weight:700}
/* pasos */
.gal-steps{counter-reset:g;display:grid;gap:1.2rem}
.gal-step{position:relative;padding:0 0 0 1.4rem;border-left:3px solid rgba(255,255,255,.14);transition:opacity .5s,border-color .5s}
.gal-step .gal-k{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.7rem;font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cian)}
.gal-step .gal-k b{font:400 2.2rem/.9 var(--f-display);color:#fff;letter-spacing:0}
.gal-step h3{font-size:clamp(1.9rem,3vw,2.8rem);margin-bottom:.8rem}
.gal-step p{max-width:46ch;color:var(--muted);font-size:1.04rem;line-height:1.65}
.gal-step.is-on{border-left-color:var(--magenta)}
.gal-fin{margin-top:2rem}
/* sticky + pasos largos solo con el efecto vivo */
.gal--viva .gal-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center}
.gal--viva .gal-steps{gap:0;padding-bottom:12vh}
.fx .gal--viva .gal-step{opacity:.72}
.fx .gal--viva .gal-step.is-on{opacity:1}
.fx .gal--viva .gal-p{stroke-dashoffset:1;opacity:0}
.fx .gal--viva .gal-pin{opacity:0;transform:scale(.2)}
.fx .gal--viva .gal-pin.is-on{opacity:1;transform:none}
.fx .gal--viva .gal-svg:not(.on-0) .gal-bolitas{opacity:0;transform:translateY(-16px)}
.fx .gal--viva .gal-svg:not(.on-1) .gal-toc{opacity:0;transform:translateX(-10px) scale(.6)}
.fx .gal--viva .gal-svg:not(.on-3) .gal-alas{opacity:0;transform:translateY(-22px) rotate(-4deg)}
@media (prefers-reduced-motion:no-preference){
  .gal-svg.on-1 .gal-toc path{animation:galToc 1.6s ease-out infinite}
  .gal-svg.on-1 .gal-toc path:nth-child(2){animation-delay:.2s}
  .gal-svg.on-1 .gal-toc path:nth-child(3){animation-delay:.4s}
}
@keyframes galToc{0%,100%{opacity:.25}40%{opacity:1}}

/* ---------- calendario de termitas aladas ---------- */
.gal-cal{position:relative;margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.2rem,2.4vw,2rem);border-radius:28px;background:rgba(0,27,46,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.gal-cal-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1.4rem;margin-bottom:1.4rem}
.gal-cal-top h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.gal-ley{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.82rem;color:var(--bruma)}
.gal-ley span{display:inline-flex;align-items:center;gap:.4rem}
.gal-ley i{width:12px;height:12px;border-radius:4px;background:var(--c)}
.gal-area{position:relative;padding-top:2rem;overflow:hidden}
.gal-lluvia{position:absolute;top:0;bottom:2.4rem;left:calc(100% * 4.5 / 12);width:calc(100% * 5.5 / 12);border-radius:16px;background:repeating-linear-gradient(110deg,rgba(255,255,255,.07) 0 2px,transparent 2px 10px),rgba(37,244,238,.06);box-shadow:inset 0 0 0 1px rgba(37,244,238,.25)}
.gal-lluvia span{position:absolute;left:.7rem;top:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cian)}
.gal-meses{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.25rem,.8vw,.7rem);height:250px}
.gal-mes{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.45rem;min-width:0}
.gal-bar{flex:1;display:flex;align-items:flex-end;width:100%;max-width:52px;padding-top:1.4rem}
.gal-bar i{display:block;width:100%;height:calc(var(--h) * 100%);border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.28));transform-origin:50% 100%}
.gal-mes.sube .gal-bar i{background:linear-gradient(180deg,var(--cian),rgba(37,244,238,.25))}
.gal-mes.pico .gal-bar i{background:linear-gradient(180deg,var(--magenta),rgba(254,44,85,.3));box-shadow:0 0 30px -6px rgba(254,44,85,.8)}
.gal-mes.alta .gal-bar i{background:linear-gradient(180deg,#7FD8FF,rgba(127,216,255,.25))}
.gal-mes b{font:400 1.05rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.gal-mes small{font-size:.7rem;font-weight:600;color:var(--bruma);text-align:center}
.gal-hoy{display:none;position:absolute;left:0;top:0;bottom:2.2rem;width:100%;pointer-events:none;transform:translateX(calc((var(--hoy,9) + .5) / 12 * 100%))}
.gal-cal--hoy .gal-hoy{display:block}
.gal-hoy::before{content:"";position:absolute;left:-1px;top:1.45rem;bottom:0;width:2px;background:var(--magenta);box-shadow:0 0 12px var(--magenta)}
.gal-hoy span{position:absolute;left:0;top:0;translate:-50% 0;padding:.22rem .5rem;border-radius:6px;background:var(--magenta);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.gal-src{margin-top:1.1rem;font-size:.82rem;color:var(--bruma)}
.fx .gal-cal .gal-bar i{transform:scaleY(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.fx .gal-cal.is-in .gal-bar i{transform:none}
.fx .gal-cal .gal-hoy{transform:translateX(0);transition:transform 1.8s var(--ease) .5s}
.fx .gal-cal.is-in .gal-hoy{transform:translateX(calc((var(--hoy,9) + .5) / 12 * 100%))}

/* ---------- tratamiento ---------- */
.ter-met{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
.ter-m{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;border-radius:26px;background:var(--hielo);box-shadow:inset 0 0 0 1px rgba(1,47,74,.08)}
.ter-m svg{width:100%;height:auto;max-height:120px;border-radius:16px;background:#fff;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ter-m h3{font-size:clamp(1.6rem,2.2vw,2rem);color:var(--estudio)}
.ter-m p{color:var(--gris);font-size:.98rem;line-height:1.6}
.ter-m .t-para{align-self:flex-start;padding:.3rem .6rem;border-radius:8px;background:var(--estudio);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.d-w{fill:#D9A877;stroke:#8c5f35;stroke-width:2}
.d-g{stroke:#3a1d0b;stroke-width:7}
.d-p{stroke:var(--pcd);stroke-width:3}
.d-m{stroke:var(--magenta);stroke-width:3}
.d-s{fill:#C9D9E3;stroke:#5c7a8d;stroke-width:2}
.d-t{fill:#7d5836}
.ter-dos{margin-top:clamp(2.4rem,5vw,4rem)}
.ter-pull{font-size:clamp(1.45rem,2vw,1.95rem);max-width:30ch}
.gal-top{align-items:end}
.gal-top .head{margin-bottom:0}

/* ---------- vivir con termitas / piezas ---------- */
.ter-piezas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.ter-piezas li{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ter-piezas svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--cian);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ter-piezas b{display:block;font-weight:600}
.ter-piezas small{display:block;margin-top:.15rem;font-size:.88rem;color:var(--niebla)}
.ter-bodega{margin-top:1.4rem}

/* ---------- cierre ---------- */
.ter-mas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.ter-fin{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:2rem;align-items:center;margin-top:clamp(3rem,6vw,5rem);padding:clamp(1.6rem,3vw,2.6rem);border-radius:32px;background:linear-gradient(120deg,var(--pcd),var(--senal));box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.ter-fin p{font:400 clamp(1.8rem,3vw,2.8rem)/1.02 var(--f-display);text-transform:uppercase;max-width:24ch}
.ter-fin small{display:block;margin-top:.7rem;font:600 .82rem/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bruma)}
.ter-fin .ctas{margin-top:0}

/* ---------- responsivo ---------- */
@media (max-width:1023px){
  .phero-grid{grid-template-columns:minmax(0,1fr)}   /* el H1 largo no ensancha la columna */
  .ter-met{grid-template-columns:1fr}
  .ter-m{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:1.2rem;align-items:start}
  .ter-m svg{grid-row:span 4}
  .ter-fin{grid-template-columns:1fr}
}
@media (max-width:900px){
  .gal-grid{display:block}
  .gal-board{top:var(--hdr);margin-inline:calc(var(--gut) * -1);padding:.6rem var(--gut) .8rem;background:var(--madrugada)}
  .gal-frame{width:auto;height:min(44vh,92vw);height:min(44svh,92vw);padding:8px;border-radius:22px}
  .gal-hud{inset:8px;padding:9px}
  .gal-hud span{font-size:.6rem;padding:.3rem .45rem}
  .gal-steps{position:relative;z-index:1;margin-top:1.4rem}
  .gal--viva .gal-step{min-height:58vh;min-height:58svh;justify-content:flex-end;padding-bottom:9vh}
  .gal--viva .gal-steps{margin-top:0;padding-bottom:6vh}
}
@media (max-width:767px){
  .ter-vs,.ter-tips,.ter-piezas{grid-template-columns:1fr}
  .ter-chip--a{left:-2%}.ter-chip--b{right:-2%}
}
@media (max-width:640px){
  .ter-m{display:flex}
  .gal-meses{height:190px}
  .gal-mes b{font-size:.74rem}
  .gal-mes small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gal-lluvia{bottom:1.6rem}
  .gal-hoy{bottom:1.4rem}
}
/* medida de texto en escritorio (45-95 caracteres por renglon) */
.gal-src{max-width:88ch}