/* p-pulgas.css · /fumigacion-de-pulgas-y-garrapatas-cdmx/ · «Ciclo» (.cic-*) + piezas (.pu-*). Atenuados solo bajo .cic--on (JS). */

/* HERO (min-width:0: un H1 de varias palabras con .ab no debe ensanchar la columna en celular) */
.phero-grid>*{min-width:0}
.pu-hero-media{position:relative;max-width:430px;margin-inline:auto}
.pu-shot{position:relative;margin:0;aspect-ratio:4/5;border-radius:28px;overflow:hidden;box-shadow:0 0 0 10px rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.6)}
.pu-shot img{width:100%;height:100%;object-fit:cover}
.pu-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,17,29,.6),rgba(0,17,29,0) 24%,rgba(0,17,29,0) 56%,rgba(0,17,29,.92))}
.pu-rec{position:absolute;left:16px;top:16px;z-index:2;display:flex;align-items:center;gap:.5rem;font:700 .72rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.pu-rec i{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 3px rgba(255,59,48,.3)}
.pu-shot figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font-size:.88rem;line-height:1.42;color:#E3EFF6}
.pu-chip{position:absolute;left:-1.4rem;top:22%;z-index:3;display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem .5rem .5rem;border-radius:999px;background:#fff;color:var(--estudio);font-weight:700;font-size:.9rem;box-shadow:0 24px 40px -18px rgba(0,0,0,.65);transform:rotate(-3deg)}
.pu-chip span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--magenta)}
.pu-chip svg{width:18px;height:18px;fill:#fff}

/* RESPUESTA */
.pu-ans{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}

/* PULGAS VS GARRAPATAS */
.pu-vs-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.pu-vs-top .head{margin-bottom:0}
.pu-tabla-wrap{border-radius:24px;background:rgba(0,27,46,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
.pu-tabla{font-size:1rem}
.pu-tabla th,.pu-tabla td{padding:1rem 1.3rem;border-bottom-color:rgba(255,255,255,.14)}
.pu-tabla thead th{font-size:.8rem;color:var(--cian);background:rgba(0,27,46,.35)}
.pu-tabla tbody th{width:18%;font:400 1.25rem/1.1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.pu-tabla td{width:41%;color:var(--bruma);line-height:1.55}
.pu-tabla tr:last-child>*{border-bottom:0}
.pu-vs-q{max-width:52ch;margin-top:clamp(2rem,4vw,3rem);padding-left:1rem;border-left:4px solid var(--cian);font:400 clamp(1.4rem,2.1vw,1.9rem)/1.12 var(--f-display);text-transform:uppercase}

/* DÓNDE SE ESCONDEN */
.pu-don{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.pu-don-foto{position:sticky;top:calc(var(--hdr) + 1.5rem);margin:0;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -36px rgba(1,47,74,.6)}
.pu-don-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pu-don-foto figcaption{padding:.9rem 1.1rem 1rem;font-size:.9rem;line-height:1.45;color:var(--gris)}
.pu-don-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.pu-don-l li{padding:1.2rem 1.3rem 1.3rem;border-radius:20px;background:#fff;box-shadow:inset 0 4px 0 var(--magenta),0 18px 36px -30px rgba(1,47,74,.55)}
.pu-don-l li:nth-child(even){box-shadow:inset 0 4px 0 var(--pcd),0 18px 36px -30px rgba(1,47,74,.55)}
.pu-don-l h3{font:600 1.06rem/1.3 var(--f-body);text-transform:none;letter-spacing:0;color:var(--estudio);margin-bottom:.35rem}
.pu-don-l p{font-size:.95rem;line-height:1.5;color:var(--gris)}

/* CICLO */
.cic-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(1rem,3vw,2rem)}
.cic-top .head{margin-bottom:0}
.cic-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.cic-pin{--wh:min(36vw,460px,calc(100vh - var(--hdr) - 9rem));--nd:max(50px,calc(var(--wh) * .165));position:sticky;top:calc(var(--hdr) + 4.2rem);padding-block:1.6rem 1rem}
.cic-wheel{position:relative;width:var(--wh);height:var(--wh);margin-inline:auto}
.cic-rotor{position:absolute;inset:0;transform:rotate(var(--rot,0deg));transition:transform .5s var(--ease)}
.cic-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cic-tk{fill:none;stroke:rgba(37,244,238,.3);stroke-width:1.5;stroke-dasharray:2 9}
.cic-ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:10}
.cic-arc{fill:none;stroke:var(--cian);stroke-width:10;stroke-linecap:round;transition:opacity .5s}
.cic-arc--loop{stroke:var(--magenta)}
.cic-chev{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.cic-chev--loop{stroke:var(--magenta)}
.cic-nodes{position:absolute;inset:0}
.cic-node{position:absolute;left:50%;top:50%;width:var(--nd);height:var(--nd);transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--wh) * -.39)) rotate(calc(var(--a) * -1 - var(--rot,0deg)));transition:transform .5s var(--ease)}
.cic-dot{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--madrugada);box-shadow:0 0 0 2px rgba(37,244,238,.65),0 0 0 9px var(--madrugada);transition:transform .5s var(--ease),background-color .35s,box-shadow .35s}
.cic-dot svg{width:64%;height:64%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:stroke .35s}
.cic-dot .ac{stroke:var(--cian)}
.cic-node b{position:absolute;left:50%;top:100%;margin-top:.55rem;transform:translateX(-50%);padding:.24rem .45rem;border-radius:7px;background:var(--madrugada);font:400 clamp(.85rem,1.1vw,1.05rem)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--niebla);transition:color .35s}
.cic-node.is-on .cic-dot{background:var(--cian);transform:scale(1.2);box-shadow:0 0 0 2px var(--cian),0 0 0 9px rgba(37,244,238,.16),0 0 46px rgba(37,244,238,.55)}
.cic-node.is-on svg{stroke:var(--estudio)}
.cic-node.is-on .ac{stroke:var(--magenta)}
.cic-node.is-on b{color:#fff}
.cic-node.is-past .cic-dot{box-shadow:0 0 0 2px var(--cian),0 0 0 9px var(--madrugada)}
.cic-ptr{position:absolute;left:50%;top:calc(var(--wh) * .11 - var(--nd) * .6 - 22px);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid var(--magenta);transform:translateX(-50%)}
.cic-hub{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:calc(var(--wh) * .48);height:calc(var(--wh) * .48);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(10,134,199,.32),rgba(0,27,46,0) 70%)}
.cic-hub p{grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:opacity .4s,transform .5s var(--ease)}
.cic-hub b{font:400 calc(var(--wh) * .17)/.85 var(--f-display);color:var(--cian)}
.cic-hub span{font:400 calc(var(--wh) * .058)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.cic-hub p[data-i]{opacity:0;transform:translateY(12px)}
.cic--on .cic-hub .cic-h0{opacity:0}
.cic--on .cic-hub p.is-on{opacity:1;transform:none}
.cic-loop{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:calc(var(--nd) * .6 + 1.4rem);font:600 .8rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);transition:color .4s}
.cic-loop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cic--on .cic-arc{opacity:.14}
.cic--on .cic-arc.is-on,.cic--fin .cic-arc--loop{opacity:1}
.cic--on .cic-chev--loop{opacity:.25}
.cic--fin .cic-chev--loop{opacity:1}
.cic--on .cic-loop{color:var(--niebla)}
.cic--fin .cic-loop{color:var(--magenta)}
.cic-steps{display:grid;gap:clamp(1.5rem,4vh,3rem);padding-block:clamp(2rem,16vh,9rem) clamp(2rem,22vh,12rem)}
.cic-step{min-height:56vh;display:flex;flex-direction:column;justify-content:center;gap:.95rem;padding-left:clamp(1.2rem,2vw,1.8rem);border-left:3px solid rgba(255,255,255,.12);transition:opacity .5s,border-color .4s}
.cic-step.is-on{border-left-color:var(--cian)}
.cic--on .cic-step{opacity:.72}
.cic--on .cic-step.is-on{opacity:1}
.cic-k{display:flex;align-items:center;gap:.75rem;font:600 .8rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--cian)}
.cic-k span{font:400 2.6rem/.8 var(--f-display);letter-spacing:0;color:#fff}
.cic-step h3{font-size:clamp(2rem,3.3vw,3.1rem);max-width:15ch}
.cic-step>p:not(.cic-k):not(.cic-why){max-width:46ch;font-size:1.06rem;line-height:1.62;color:var(--niebla)}
.cic-why{max-width:46ch;padding:.95rem 1.15rem 1rem;border-radius:18px 18px 18px 6px;background:rgba(37,244,238,.1);box-shadow:inset 0 0 0 1px rgba(37,244,238,.3);font-size:.98rem;line-height:1.5;color:#fff}
.cic-why b{display:block;margin-bottom:.2rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cian)}
.cic-out{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;margin-top:clamp(1rem,3vw,2rem);padding:1.5rem 1.7rem;border-radius:24px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cic-out p{max-width:62ch;font-size:1.06rem;color:var(--niebla)}
.cic-out strong{color:#fff}

/* MASCOTA + VETERINARIO + SEGURIDAD */
.pu-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:t}
.pu-trio li{counter-increment:t;position:relative;padding:1.4rem 1.4rem 1.5rem;border-radius:24px;background:var(--hielo);box-shadow:inset 0 0 0 1px rgba(1,47,74,.08)}
.pu-trio li::before{content:counter(t,decimal-leading-zero);display:block;margin-bottom:.6rem;font:400 2.4rem/.9 var(--f-display);color:var(--magenta)}
.pu-trio li:nth-child(2)::before{color:var(--pcd)}
.pu-trio b{display:block;margin-bottom:.4rem;font-size:1.08rem;color:var(--estudio)}
.pu-trio p{font-size:.97rem;line-height:1.55;color:var(--gris)}
.pu-vet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start;margin-top:clamp(2.6rem,5vw,4rem)}
.pu-seg{padding:1.6rem 1.6rem 1.8rem;border-radius:26px;background:var(--estudio);color:#fff;--chk:var(--cian)}
.pu-seg h3{font-size:clamp(1.7rem,2.4vw,2.2rem);margin-bottom:1.2rem}
.pu-seg .checks li{font-weight:400;font-size:.98rem;line-height:1.5;color:var(--bruma)}
.pu-seg .checks svg{stroke:var(--cian)}

/* VIDEO / RELACIONADAS / CIERRE */
.pu-vs-n{font-size:.88rem;color:var(--niebla)}
.pu-rel-txt{max-width:80ch;margin-top:clamp(1.8rem,3vw,2.4rem)}
.pu-fin .lead{max-width:62ch}
.pu-story-dark{color:var(--estudio);background:var(--hielo);box-shadow:inset 0 0 0 1.5px rgba(1,47,74,.18)}
.pu-story-dark:hover{background:#DCEEF8}

/* RESPONSIVO */
@media (max-width:1023px){
  .pu-hero-media{max-width:380px;margin-top:1rem}
  .pu-ans,.pu-vs-top,.pu-don,.cic-top,.pu-vet{grid-template-columns:1fr}
  .pu-don-foto{position:static}
  .pu-trio{grid-template-columns:1fr}
  .cic-grid{grid-template-columns:1fr;gap:0}
  .cic-pin{--wh:min(54vw,250px);--nd:max(40px,calc(var(--wh) * .17));top:var(--hdr);z-index:3;margin-inline:calc(var(--gut) * -1);padding:calc(var(--nd) * .6 + 1.4rem) var(--gut) 0;background:linear-gradient(180deg,var(--madrugada) calc(100% - 1.5rem),rgba(0,27,46,0))}
  .cic-loop{margin-top:calc(var(--nd) * .6 + .9rem);padding-bottom:1.9rem}
  .cic-node b{font-size:.78rem;margin-top:.4rem}
  .cic-steps{padding-block:1.5rem 30vh;gap:1.4rem}
  .cic-step{min-height:44vh}
}
@media (max-width:640px){
  .pu-chip{left:-.4rem;top:auto;bottom:24%;font-size:.82rem}
  .pu-don-l{grid-template-columns:1fr}
  .pu-tabla thead{display:none}
  .pu-tabla,.pu-tabla tbody,.pu-tabla tr,.pu-tabla th,.pu-tabla td{display:block;width:auto}
  .pu-tabla tr{padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.14)}
  .pu-tabla tr:last-child{border-bottom:0}
  .pu-tabla tbody th,.pu-tabla td{padding:0;border:0}
  .pu-tabla tbody th{margin-bottom:.6rem;font-size:1.2rem}
  .pu-tabla td+td{margin-top:.7rem}
  .pu-tabla td::before{content:attr(data-l);display:block;margin-bottom:.15rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cian)}
  .cic-out{padding:1.2rem}
}