/* ━━ VARIABLES TEMA CLARO ━━ */
:root{
  --or:#F97316;--or2:#ea6c0a;--or-lt:#fff4ec;--or-lt2:#ffe8d6;
  --bg:#ffffff;--bg2:#f9fafb;--bg3:#f3f4f6;--bg4:#fff7f0;
  --txt:#111827;--txt2:#374151;--txt3:#6b7280;--txt4:#9ca3af;
  --brd:#e5e7eb;--brd2:#d1d5db;
  --gr:#25D366;--bc:'Barlow Condensed';--bb:'Barlow';
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --sh2:0 4px 16px rgba(0,0,0,.1);
  --sh3:0 10px 32px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--bb),sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden}

/* ━━ ANIMATIONS ━━ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
@keyframes shimmer{0%{left:-100%}100%{left:200%}}
/* .au → ver bloque animaciones */
.au.show{opacity:1;transform:translateY(0)}
.au.d1{transition-delay:.07s}.au.d2{transition-delay:.14s}.au.d3{transition-delay:.21s}.au.d4{transition-delay:.28s}

/* ━━ SCROLL PROGRESS ━━ */
#prog{position:fixed;top:0;left:0;height:3px;background:var(--or);z-index:9999;width:0;transition:width .1s;box-shadow:0 0 6px rgba(249,115,22,.5)}

/* ━━ TOPBAR ━━ */
#tb{background:var(--or);padding:7px 20px;display:flex;justify-content:center;flex-wrap:wrap;gap:5px 18px}
.tb-i{display:flex;align-items:center;gap:5px;font-size:14.5px;color:rgba(255,255,255,.9);white-space:nowrap}
.tb-i svg{opacity:.85;flex-shrink:0}
.tb-i a{color:#fff;text-decoration:none;font-weight:700}
.tb-sep{color:rgba(255,255,255,.4)}

/* ━━ HEADER ━━ */
header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--brd);padding:0 28px;height:80px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh);transition:box-shadow .3s}
header.scrolled{box-shadow:var(--sh2)}
.h-logo img{height:68px;width:auto;display:block}
.h-right{display:flex;align-items:center;gap:14px}
.h-ph{color:var(--txt3);font-size:15px;display:none;align-items:center;gap:5px}
.h-ph svg{color:var(--or)}
@media(min-width:580px){.h-ph{display:flex}}
.h-cta{background:var(--or);color:#fff;border:none;padding:9px 20px;border-radius:8px;font-family:var(--bb),sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:all .2s;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.h-cta:hover{background:var(--or2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(249,115,22,.4)}

/* ━━ HERO (fondo oscuro con foto) ━━ */
#hero{min-height:80vh;display:flex;flex-direction:column;background:linear-gradient(to right, #0a0a0a 0%, #111111 100%);position:relative;overflow:hidden}
.hc{display:flex;flex-direction:column;justify-content:center;padding:72px 32px 64px;position:relative;z-index:2;pointer-events:none}
.hc *{pointer-events:auto}
@media(min-width:880px){
  #hero{flex-direction:row;align-items:center}
  .hc{width:55%;padding:88px 52px 80px 60px}
}
.h-bdgs{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.h-bdg{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:6px 14px;font-size:14.5px;font-weight:600;width:fit-content}
.hb-or{background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#F97316;animation:fadeUp .5s ease both}
.hb-wh{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:rgba(255,255,255,.9);animation:fadeUp .5s .07s ease both}
.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s infinite;flex-shrink:0}
.h-ttl{font-family:var(--bc),sans-serif;font-weight:900;font-size:clamp(46px,7.5vw,84px);line-height:.93;letter-spacing:-0.5px;color:#fff;margin-bottom:14px;animation:fadeUp .5s .12s ease both}
.h-ttl span{color:var(--or)}
.h-sub{font-family:var(--bc),sans-serif;font-weight:600;font-size:clamp(17px,2.5vw,23px);color:rgba(255,255,255,.85);line-height:1.3;margin-bottom:18px;animation:fadeUp .5s .18s ease both}
.h-dsc{font-size:15px;color:rgba(255,255,255,.65);line-height:1.78;max-width:480px;margin-bottom:30px;animation:fadeUp .5s .24s ease both}
.h-dsc strong{color:#fff}
.h-btns{display:flex;flex-direction:column;gap:10px;animation:fadeUp .5s .3s ease both}
@media(min-width:460px){.h-btns{flex-direction:row;align-items:center;flex-wrap:wrap}}
.btn-wa{display:inline-flex;align-items:center;gap:9px;background:var(--gr);color:#fff;padding:13px 22px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;transition:all .2s;box-shadow:0 4px 16px rgba(37,211,102,.3)}
.btn-wa:hover{background:#1db954;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.4)}
.btn-call{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.8);font-weight:600;font-size:15px;text-decoration:none;transition:color .2s}
.btn-call:hover{color:#fff}
.h-cert{display:inline-flex;align-items:center;gap:8px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:8px;padding:7px 13px;font-size:15px;font-weight:600;color:rgba(255,255,255,.9);margin-top:16px;width:fit-content;animation:fadeUp .5s .36s ease both}
.agcba-p{font-size:11px;font-weight:900;color:var(--or);background:rgba(249,115,22,.15);padding:2px 6px;border-radius:4px;letter-spacing:1px}

/* HERO SLIDER */
.h-sl{position:absolute;top:50%;right:-10vh;transform:translateY(-50%);overflow:hidden;background:transparent;border-radius:50%;border:none;box-shadow:-30px 0 100px 40px rgba(249,115,22,.15), -10px 0 40px 10px rgba(249,115,22,.20);height:120vh;width:120vh;z-index:1}
@media(max-width:879px){
  #hero {
    min-height: auto;
    padding-bottom: 24px;
  }
  .hc {
    padding: 40px 24px 20px 24px;
  }
  .h-sl {
    display: none;
  }
  .hs-arr {
    left: 12px;
    width: calc(100% - 24px);
  }
  .hs-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
    background: rgba(0,0,0,.6);
  }
  .hs-s img {
    object-position: center;
  }
  .f-sl {
    aspect-ratio: 5 / 6;
    max-height: 420px;
  }
  .fs-s img {
    object-fit: contain;
    object-position: center;
  }
}
.hs-tr{display:flex;height:100%;transition:transform .65s cubic-bezier(.4,0,.2,1)}
.hs-s{min-width:100%;height:100%;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
.hs-s img{width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:brightness(.95)}
.hs-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.hs-dot{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.35);cursor:pointer;transition:all .25s;padding:0}
.hs-dot.on{background:var(--or);width:22px;border-radius:4px}
.hs-arr{position:absolute;top:50%;transform:translateY(-50%);width:calc(100% - 16px);left:8px;display:flex;justify-content:space-between;z-index:5;pointer-events:none}
.hs-btn{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:all .2s;font-size:15px}
.hs-btn:hover{background:var(--or);border-color:var(--or)}

/* ━━ METRICS ━━ */
#metrics{background:var(--or);padding:20px 20px}
.met-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 40px}
.met{display:flex;flex-direction:column;align-items:center}
.met-n{font-family:var(--bc),sans-serif;font-weight:900;font-size:44px;color:#fff;line-height:1;letter-spacing:-1px}
.met-l{font-size:12px;font-weight:600;color:rgba(255,255,255,.88);text-transform:uppercase;letter-spacing:.8px}

/* ━━ TRUST BAR ━━ */
#trust{background:linear-gradient(180deg,#fff 0%,#fffaf5 100%);border-bottom:1px solid rgba(249,115,22,.08);padding:13px 20px}
.tr-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px}
.tr{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--txt2);white-space:nowrap}
.tr svg{color:var(--or)}

/* ━━ SECCIONES BASE ━━ */
.sec{padding:72px 24px;position:relative}
.sec .in{max-width:1080px;margin:0 auto}
.s-lbl{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--or);margin-bottom:8px}
.s-ttl{font-family:var(--bc),sans-serif;font-weight:800;font-size:clamp(28px,5vw,48px);line-height:1.03;margin-bottom:12px;color:var(--txt)}
.s-ttl span{color:var(--or)}
.s-body{font-size:15px;color:var(--txt3);line-height:1.8;max-width:600px}

/* ━━ PROBLEMA ━━ */
#problema{background:linear-gradient(135deg,#fff7f0 0%,#fff3e8 60%,#fffaf5 100%)}
.pr-gr{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:780px){.pr-gr{grid-template-columns:1fr 1fr}}
.pr-hl{background:var(--or-lt);border-left:4px solid var(--or);padding:18px 20px;border-radius:0 10px 10px 0;margin-top:18px;font-size:15px;font-weight:600;color:var(--txt);line-height:1.65}
.pr-cs{display:flex;flex-direction:column;gap:12px}
.pr-c{background:#fff;border:1px solid var(--brd);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--sh);transition:all .2s}
.pr-c:hover{border-color:var(--or);box-shadow:0 4px 16px rgba(249,115,22,.1);transform:translateX(3px)}
.pr-c svg{color:var(--or);flex-shrink:0;margin-top:2px}
.pr-c h4{font-weight:700;font-size:15px;margin-bottom:3px;color:var(--txt)}
.pr-c p{font-size:15px;color:var(--txt3);line-height:1.55}

/* ━━ SERVICIOS ━━ */
#servicios{background:linear-gradient(180deg,#ffffff 0%,#f9fafb 60%,#f3f4f6 100%)}
.sv-gr{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
@media(min-width:580px){.sv-gr{grid-template-columns:1fr 1fr}}
.sv-c{background:#fff;border:1px solid var(--brd);border-radius:16px;padding:28px 24px;box-shadow:var(--sh);transition:all .25s;position:relative;overflow:hidden}
.sv-c::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--or);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.sv-c:hover{border-color:var(--or);box-shadow:var(--sh3);transform:translateY(-4px)}
.sv-c:hover::after{transform:scaleX(1)}
.sv-ic{font-size:40px;margin-bottom:14px;display:block}
.sv-c h3{font-family:var(--bc),sans-serif;font-weight:700;font-size:24px;color:var(--txt);margin-bottom:4px}
.sv-desde{font-size:15px;color:var(--txt3);margin-bottom:10px}
.sv-desde strong{color:var(--or);font-size:22px;font-family:var(--bc),sans-serif;font-weight:800}
.sv-c p{font-size:15px;color:var(--txt3);line-height:1.6;margin-bottom:14px}
.sv-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
@media(min-width:880px){.sv-mini{grid-template-columns:repeat(4,1fr)}}
.sv-m{background:var(--bg3);border:1px solid var(--brd);border-radius:10px;padding:16px;text-align:center;transition:all .2s;cursor:default}
.sv-m:hover{border-color:var(--or);background:var(--or-lt);transform:translateY(-2px)}
.sv-m svg{color:var(--or);margin:0 auto 8px;display:block}
.sv-m h4{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:3px}
.sv-m p{font-size:15px;color:var(--txt3)}

/* ━━ PLAGAS ━━ */
#plagas{background:linear-gradient(135deg,#eff6ff 0%,#f0f4ff 50%,#f5f0ff 100%)}
.pg-gr{display:grid;grid-template-columns:1fr;gap:14px;margin-top:32px}
@media(min-width:480px){.pg-gr{grid-template-columns:1fr 1fr}}
@media(min-width:880px){.pg-gr{grid-template-columns:repeat(4,1fr)}}
.pg{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--brd);box-shadow:var(--sh);transition:all .25s;cursor:pointer}
.pg:hover{border-color:var(--or);box-shadow:var(--sh3);transform:translateY(-4px)}
.pg-img{position:relative;height:150px;overflow:hidden}
.pg-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);transition:transform .4s,filter .4s}
.pg:hover .pg-img img{transform:scale(1.06);filter:brightness(.95)}
.pg-ov{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.55) 100%)}
.pg-b{position:absolute;bottom:7px;left:8px;background:var(--or);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}
.pg-bd{padding:14px}
.pg-bd h3{font-family:var(--bc),sans-serif;font-weight:700;font-size:17px;color:var(--txt);margin-bottom:2px;display:flex;justify-content:space-between;align-items:center}
.pg-bd h3::after {
  content: '▾';
  font-size: 13px;
  color: var(--or);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.pg.expanded .pg-bd h3::after {
  transform: rotate(180deg);
}
.pg-lat{font-size:11px;color:var(--or);font-style:italic;margin-bottom:7px}
.pg-ds{font-size:14.5px;color:var(--txt3);line-height:1.6}
.pg-extra {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  font-size: 13px;
  color: var(--txt3);
  line-height: 1.6;
}
.pg.expanded .pg-extra {
  max-height: 220px;
  opacity: 1;
  margin-top: 10px;
  border-top: 1px solid rgba(249, 115, 22, 0.15);
  padding-top: 10px;
}

/* ━━ COMO ━━ */
#como{background:linear-gradient(180deg,#f8fff9 0%,#f0fdf4 50%,#ffffff 100%)}
.cm-tabs{display:flex;gap:5px;background:var(--bg3);border-radius:10px;padding:5px;width:fit-content;flex-wrap:wrap;margin:22px 0;border:1px solid var(--brd)}
.cm-tab{padding:8px 16px;border-radius:7px;border:none;font-family:var(--bb),sans-serif;font-weight:600;font-size:15px;cursor:pointer;transition:all .2s;background:transparent;color:var(--txt3);display:inline-flex;align-items:center;gap:6px}
.cm-tab svg{flex-shrink:0}
.cm-tab.on{background:var(--or);color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.cm-cnt{display:none}.cm-cnt.on{display:grid}
.cm-steps{grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.cm-steps{grid-template-columns:repeat(3,1fr)}}
.cm-st{background:#fff;border-radius:12px;padding:22px;border:1px solid var(--brd);box-shadow:var(--sh);transition:all .2s}
.cm-st:hover{border-color:var(--or);box-shadow:0 4px 16px rgba(249,115,22,.1)}
.cm-num{font-family:var(--bc),sans-serif;font-weight:900;font-size:52px;color:rgba(249,115,22,.15);line-height:1;margin-bottom:6px}
.cm-st h4{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--txt);display:flex;align-items:center;gap:8px}
.cm-st h4 svg{color:var(--or);flex-shrink:0}
.cm-st p{font-size:14.5px;color:var(--txt3);line-height:1.65}
.cm-info{margin-top:10px;background:var(--or-lt);border-radius:6px;padding:7px 10px;font-size:14.5px;color:var(--or);font-weight:600;display:flex;align-items:center;gap:5px}

/* ━━ PORQUE / GALERÍA ━━ */
#porque{background:linear-gradient(135deg,#fff7f0 0%,#fffbf5 50%,#f9fafb 100%)}
.pq-gr{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:800px){.pq-gr{grid-template-columns:1fr 1fr}}
.dif-lst{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.dif{display:flex;gap:13px;align-items:flex-start;transition:transform .2s}
.dif:hover{transform:translateX(3px)}
.dif-ic{width:42px;height:42px;border-radius:10px;background:var(--or-lt);border:1px solid var(--or-lt2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.dif:hover .dif-ic{background:var(--or-lt2)}
.dif-ic svg{color:var(--or)}
.dif h4{font-weight:700;font-size:15px;margin-bottom:2px;color:var(--txt)}
.dif p{font-size:15px;color:var(--txt3);line-height:1.55}

/* FOTO SLIDER */
.f-sl{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:5/6;box-shadow:var(--sh3);max-height:560px}
.fs-tr{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.fs-s{min-width:100%;height:100%;flex-shrink:0}
.fs-s img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.fs-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.fs-dot{width:6px;height:6px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:all .25s}
.fs-dot.on{background:var(--or);width:18px;border-radius:3px}
.fs-arr{position:absolute;top:50%;transform:translateY(-50%);width:calc(100% - 16px);left:8px;display:flex;justify-content:space-between;pointer-events:none}
.fs-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid var(--brd);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:all;transition:all .2s;font-size:15px;box-shadow:var(--sh)}
.fs-btn:hover{background:var(--or);border-color:var(--or);color:#fff}

/* ━━ VIDEO ━━ */
#vsec{background:linear-gradient(180deg,#fafafa 0%,#ffffff 100%);padding:72px 24px;text-align:center}
#vsec .in{max-width:520px;margin:0 auto}
.ig-wrap{margin-top:24px;border-radius:14px;overflow:hidden;border:1px solid var(--brd);background:var(--bg3);box-shadow:var(--sh)}

/* ━━ RESEÑAS ━━ */
#resenas{background:linear-gradient(135deg,#fef9ee 0%,#fff7ed 30%,#fdf4ff 65%,#eff6ff 100%)}
.res-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.g-rat{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:11px 16px;border:1px solid var(--brd);box-shadow:var(--sh)}
.g-logo{font-size:18px;font-weight:900}
.gB{color:#4285F4}.gR{color:#DB4437}.gY{color:#F4B400}.gG{color:#0F9D58}
.r-sbig{color:#F4B400;font-size:15px;letter-spacing:2px}
.r-num{font-family:var(--bc),sans-serif;font-weight:800;font-size:20px;color:var(--txt)}
.r-lbl{font-size:11px;color:var(--txt3)}
.c-tr{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transition:opacity .28s ease,transform .28s ease}
@media(min-width:880px){.c-tr{grid-template-columns:repeat(3,1fr)}}
@media(max-width:879px){.c-tr{grid-template-columns:1fr}}
.rv{background:#fff;border-radius:12px;padding:18px;border:1px solid var(--brd);display:flex;flex-direction:column;min-height:170px;box-shadow:var(--sh);transition:all .2s}
.rv:hover{border-color:var(--or);box-shadow:0 4px 16px rgba(249,115,22,.12);transform:translateY(-2px)}
.rv-s{color:#F4B400;font-size:15px;margin-bottom:9px;letter-spacing:1.5px}
.rv-t{font-size:15px;color:var(--txt2);line-height:1.7;margin-bottom:12px;font-style:italic;flex:1}
.rv-a{display:flex;align-items:center;gap:9px}
.rv-av{width:33px;height:33px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;color:#fff}
.rv-n{font-weight:700;font-size:15px;color:var(--txt)}
.rv-tp{font-size:11px;color:var(--txt3)}
.rv-tm{font-size:11px;color:var(--txt4);margin-top:1px}
.c-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.c-nb{width:34px;height:34px;border-radius:50%;border:1px solid var(--brd);background:#fff;color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:var(--sh)}
.c-nb:hover{border-color:var(--or);color:var(--or)}
.c-nb:disabled{opacity:.25;cursor:not-allowed}
.c-dots{display:flex;gap:5px;align-items:center}
.cd{width:6px;height:6px;border-radius:50%;border:none;background:var(--brd2);cursor:pointer;transition:all .22s;padding:0}
.cd.on{background:var(--or);width:18px;border-radius:3px}
.c-cnt{text-align:center;margin-top:6px;font-size:15px;color:var(--txt3)}
.c-cnt b{color:var(--txt)}
.btn-gmap{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brd);color:var(--txt2);padding:9px 18px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;transition:all .2s;margin-top:20px;background:#fff;box-shadow:var(--sh)}
.btn-gmap:hover{border-color:var(--or);color:var(--or)}

/* ━━ FAQ ━━ */
#faq{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}
.fq-lst{margin-top:28px;display:flex;flex-direction:column;gap:7px}
.fq{background:#fff;border-radius:10px;border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh);transition:border-color .2s}
.fq:hover{border-color:var(--or)}
.fq-q{width:100%;background:none;border:none;color:var(--txt);padding:15px 18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--bb),sans-serif;font-weight:600;font-size:15px;text-align:left;gap:10px}
.fq-ic{flex-shrink:0;transition:transform .3s}
.fq-q.open .fq-ic{transform:rotate(180deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.fq-a.open{max-height:240px}
.fq-a p{padding:0 18px 15px;font-size:14.5px;color:var(--txt3);line-height:1.72}
.faq-cta{text-align:center;margin-top:24px}

/* ━━ CTA FINAL ━━ */
#ctaf{background:var(--or);text-align:center;padding:84px 24px;position:relative;overflow:hidden}
#ctaf::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 60%);pointer-events:none}
#ctaf .in{max-width:620px;margin:0 auto;position:relative;z-index:1}
.ct-ttl{font-family:var(--bc),sans-serif;font-weight:900;font-size:clamp(36px,6vw,60px);line-height:.98;margin-bottom:12px;color:#fff}
.ct-sub{font-size:15px;color:rgba(255,255,255,.85);line-height:1.72;margin-bottom:32px}
.ct-btns{display:flex;flex-direction:column;gap:10px;align-items:center}
@media(min-width:460px){.ct-btns{flex-direction:row;justify-content:center}}
.btn-wh{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--or);padding:13px 24px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.btn-wh:hover{background:var(--or-lt);transform:translateY(-2px)}
.btn-wh-out{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.6);color:#fff;padding:12px 22px;border-radius:10px;font-weight:700;font-size:14.5px;text-decoration:none;transition:all .2s}
.btn-wh-out:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ━━ FOOTER ━━ */
footer{background:var(--txt);padding:36px 24px}
.ft-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.ft-brand{background:#fff;border-radius:10px;padding:6px 12px;display:inline-flex;align-items:center}
.ft-brand img{height:38px;width:auto}
.ft-info{text-align:center;font-size:15px;color:rgba(255,255,255,.55);line-height:2}
.ft-info a{color:var(--or);text-decoration:none}
.ft-links{display:flex;gap:12px;flex-wrap:wrap}
.ft-links a{color:rgba(255,255,255,.45);text-decoration:none;font-size:15px;transition:color .2s}
.ft-links a:hover{color:var(--or)}

/* ━━ WA FLOAT ━━ */
.wa-fl{position:fixed;bottom:20px;right:20px;z-index:300;width:52px;height:52px;background:var(--gr);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 18px rgba(37,211,102,.45);transition:transform .2s}
.wa-fl:hover{transform:scale(1.12)}
.wa-fl svg{width:26px;height:26px;fill:#fff}

/* ━━ DIVISORES DE SECCIÓN ━━ */
.sec-divider{{
  position:relative;
  overflow:visible;
}}
.sec-divider::before{{
  content:'';
  position:absolute;
  top:-1px;left:0;right:0;
  height:40px;
  background:inherit;
  clip-path:polygon(0 0,100% 0,100% 60%,0 100%);
  z-index:1;
}}

/* Bordes suaves entre secciones */
#problema{{border-top:1px solid rgba(249,115,22,.06);border-bottom:1px solid rgba(249,115,22,.06)}}
#plagas{{border-top:1px solid rgba(99,102,241,.06);border-bottom:1px solid rgba(99,102,241,.06)}}
#como{{border-top:1px solid rgba(34,197,94,.05);border-bottom:1px solid rgba(34,197,94,.05)}}
#porque{{border-top:1px solid rgba(249,115,22,.06);border-bottom:1px solid rgba(249,115,22,.06)}}
#resenas{{border-top:1px solid rgba(249,115,22,.05);border-bottom:1px solid rgba(249,115,22,.05)}}

/* Sombra interna muy suave en las secciones de acento */
#problema .in,#plagas .in,#como .in,#porque .in,#resenas .in{{
  position:relative;
}}

/* ━━ SEPARADORES GRADUALES ENTRE SECCIONES ━━ */
#problema{border-top:2px solid rgba(249,115,22,.07);border-bottom:2px solid rgba(249,115,22,.05)}
#plagas{border-top:2px solid rgba(99,102,241,.06);border-bottom:2px solid rgba(99,102,241,.05)}
#como{border-top:2px solid rgba(34,197,94,.06);border-bottom:2px solid rgba(34,197,94,.05)}
#porque{border-top:2px solid rgba(249,115,22,.07);border-bottom:2px solid rgba(249,115,22,.05)}
#resenas{border-top:2px solid rgba(249,115,22,.05);border-bottom:2px solid rgba(249,115,22,.04)}

/* Sombras decorativas internas */
#problema::before,#plagas::before,#como::before,#porque::before,#resenas::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(249,115,22,.12) 50%,transparent 100%);
}
#problema,#plagas,#como,#porque,#resenas{position:relative;}

/* Cards con glass effect suave en secciones con gradiente */
#problema .pr-c{background:rgba(255,255,255,.85);backdrop-filter:blur(4px)}
#plagas .pg{background:rgba(255,255,255,.92)}
#como .cm-st{background:rgba(255,255,255,.9)}
#porque .dif-ic{border:none}
#resenas .rv{background:rgba(255,255,255,.92)}



/* Posición específica por slide */
.hs-s:nth-child(1) img{object-position:80% 30%}
.hs-s:nth-child(2) img{object-position:20% 25%}
.hs-s:nth-child(3) img{object-position:50% 25%;object-fit:cover}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMACIONES — v2
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 1 ── Scroll reveal mejorado: fade + translateY por tipo */
.au{opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.au.show{opacity:1;transform:translateY(0)}
.au.d1{transition-delay:.07s}
.au.d2{transition-delay:.14s}
.au.d3{transition-delay:.21s}
.au.d4{transition-delay:.28s}

/* Reveal lateral para cards de la grilla */
.au-left{opacity:0;transform:translateX(-18px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.au-left.show{opacity:1;transform:translateX(0)}
.au-right{opacity:0;transform:translateX(18px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.au-right.show{opacity:1;transform:translateX(0)}

/* Reveal scale suave para badges y métricas */
.au-scale{opacity:0;transform:scale(.94);transition:opacity .45s ease,transform .45s ease}
.au-scale.show{opacity:1;transform:scale(1)}

/* 2 ── Microinteracciones en tarjetas */
.pg,.sv-c,.cm-st,.rv,.fq,.pr-c,.sv-m{
  transition:transform .22s cubic-bezier(.4,0,.2,1),
             box-shadow .22s cubic-bezier(.4,0,.2,1),
             border-color .22s ease !important;
  will-change:transform;
}
.pg:hover{transform:translateY(-5px) !important;box-shadow:0 12px 32px rgba(0,0,0,.13) !important}
.sv-c:hover{transform:translateY(-5px) !important;box-shadow:0 14px 36px rgba(249,115,22,.13) !important}
.cm-st:hover{transform:translateY(-3px) !important;box-shadow:0 6px 18px rgba(249,115,22,.09) !important}
.rv:hover{transform:translateY(-3px) !important;box-shadow:0 6px 18px rgba(0,0,0,.09) !important}
.pr-c:hover{transform:translateX(5px) !important;box-shadow:0 4px 14px rgba(249,115,22,.09) !important}
.sv-m:hover{transform:translateY(-3px) !important}
.dif:hover{transform:translateX(4px)}

/* 3 ── Botones WhatsApp: feedback visual */
.btn-wa{
  position:relative;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.4,0,.2,1),
             box-shadow .18s ease,
             background .18s ease !important;
}
.btn-wa::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0);
  transition:background .18s ease;
  pointer-events:none;
}
.btn-wa:hover::after{background:rgba(255,255,255,.08)}
.btn-wa:active{transform:scale(.97) !important;box-shadow:0 2px 8px rgba(37,211,102,.25) !important}

/* Ripple en botones WA al hacer clic */
.btn-wa .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  transform:scale(0);
  animation:ripple .5s linear;
  pointer-events:none;
}
@keyframes ripple{
  to{transform:scale(4);opacity:0}
}

/* 4 ── Header profesional: sombra progresiva al scroll */
header{transition:box-shadow .3s ease,background .3s ease !important}
header.scrolled-deep{box-shadow:0 4px 24px rgba(0,0,0,.12) !important}

/* 5 ── Counters animados en métricas */
.met-n{transition:transform .3s ease}
#metrics:hover .met-n{transform:scale(1.06)}

/* 6 ── Foto slider: crossfade suave en cambio */
.fs-s{transition:opacity .3s ease}

/* 7 ── Trust bar: entrada escalonada */
.tr{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.tr.show{opacity:1;transform:translateY(0)}

/* 8 ── FAQ: icono rota con spring */
.fq-ic{transition:transform .32s cubic-bezier(.34,1.56,.64,1) !important}
.fq-q.open .fq-ic{transform:rotate(180deg) !important}

/* 9 ── Barra de progreso naranja con brillo */
#prog::after{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;
  width:60px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.35),transparent);
  animation:prog-shine 1.8s ease infinite;
}
@keyframes prog-shine{
  0%{transform:translateX(-60px)}
  100%{transform:translateX(60px)}
}

/* 10 ── Dots de sliders: spring al activar */
.hs-dot,.fs-dot,.cd{transition:all .28s cubic-bezier(.34,1.56,.64,1) !important}

/* 11 ── Logo en header: hover suave */
header a img{transition:transform .2s ease,opacity .2s ease}
header a:hover img{transform:scale(1.04);opacity:.9}

/* 12 ── WA flotante: bounce sutil cada 15s (se detiene permanentemente tras interactuar) */
.wa-fl{animation:wa-bounce 15s ease-in-out infinite}
.wa-fl.wa-hovered{animation:none}
@keyframes wa-bounce{
  0%,97.3%,100%{transform:scale(1)}
  98%{transform:scale(1.12)}
  98.7%{transform:scale(.96)}
  99.4%{transform:scale(1.05)}
}
.wa-fl:hover{animation:none;transform:scale(1.12) !important}

/* 13 ── Badges del hero: pulse refinado */
.b-dot{
  animation:pulse-dot 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(1.5)}
}

/* 14 ── Scroll indicator en hero */
.hero-scroll-hint{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  opacity:.5;
  animation:scroll-hint 2s ease-in-out infinite;
  z-index:10;
  pointer-events:none;
}
@keyframes scroll-hint{
  0%,100%{opacity:.3;transform:translateX(-50%) translateY(0)}
  50%{opacity:.7;transform:translateX(-50%) translateY(5px)}
}
.hero-scroll-hint span{
  width:1px;height:18px;
  background:rgba(255,255,255,.5);
}
.hero-scroll-hint div{
  width:6px;height:6px;border-radius:50%;
  background:rgba(249,115,22,.7);
  animation:scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(12px);opacity:0}
}

/* 15 ── Mobile: reducir animaciones si prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .au,.au-left,.au-right,.au-scale{opacity:1 !important;transform:none !important}
}

/* ━━ NAVBAR ━━ */
/* navbar eliminado */
#navbar.shadow{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.nav-links{
  display:flex;
  align-items:center;
  gap:0;
  list-style:none;
  width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links li a{
  display:block;
  padding:0 16px;
  height:42px;
  line-height:42px;
  font-size:13px;
  font-weight:600;
  color:var(--txt2);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  transition:color .2s;
}
.nav-links li a::after{
  content:'';
  position:absolute;
  bottom:0;left:16px;right:16px;
  height:2px;
  background:var(--or);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.nav-links li a:hover{color:var(--or)}
.nav-links li a:hover::after{transform:scaleX(1)}
.nav-links li a.active{color:var(--or)}
.nav-links li a.active::after{transform:scaleX(1)}

/* Mobile: hamburguesa */
.nav-burger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px;
  margin-left:auto;
  border:none;
  background:none;
}
.nav-burger span{
  display:block;
  width:22px;height:2px;
  background:var(--txt);
  border-radius:2px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menú mobile desplegable */
#nav-mobile{
  display:none;
  position:fixed;
  top:114px;
  left:0;right:0;
  background:#fff;
  border-bottom:1px solid var(--brd);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:198;
  padding:8px 0;
  animation:slideDown .22s cubic-bezier(.4,0,.2,1);
}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
#nav-mobile.open{display:block}
#nav-mobile a{
  display:block;
  padding:13px 28px;
  font-size:14px;
  font-weight:600;
  color:var(--txt2);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:all .18s;
}
#nav-mobile a:hover{color:var(--or);border-left-color:var(--or);background:var(--or-lt)}

@media(max-width:700px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media(min-width:701px){
  .nav-burger{display:none}
  #nav-mobile{display:none !important}
}

/* ━━ HEADER CON NAV INTEGRADO ━━ */
header{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:1px solid var(--brd);
  padding:0 28px;
  height:80px;
  display:flex;align-items:center;
  gap:0;
  box-shadow:var(--sh);
  transition:box-shadow .3s ease;
}
header.scrolled-deep{box-shadow:0 4px 24px rgba(0,0,0,.1)}
.h-logo{text-decoration:none;flex-shrink:0;margin-right:32px}
.h-logo img{height:68px;width:auto;display:block}

/* Nav links en el centro */
.h-nav{
  flex:1;
  display:flex;align-items:center;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.h-nav::-webkit-scrollbar{display:none}
.h-nav a{
  display:block;
  padding:0 14px;
  height:80px;
  line-height:80px;
  font-size:13px;
  font-weight:600;
  color:var(--txt3);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  transition:color .2s;
  flex-shrink:0;
}
.h-nav a::after{
  content:'';
  position:absolute;
  bottom:0;left:14px;right:14px;
  height:2px;
  background:var(--or);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  border-radius:2px 2px 0 0;
}
.h-nav a:hover{color:var(--or)}
.h-nav a:hover::after{transform:scaleX(1)}
.h-nav a.active{color:var(--or)}
.h-nav a.active::after{transform:scaleX(1)}

/* Lado derecho */
.h-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:20px}
.h-ph{color:var(--txt3);font-size:13px;display:none;align-items:center;gap:5px}
.h-ph svg{color:var(--or)}
@media(min-width:580px){.h-ph{display:flex}}

/* Hamburguesa mobile */
.h-burger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;padding:6px;margin-left:auto;
  border:none;background:none;
}
.h-burger span{
  display:block;width:22px;height:2px;
  background:var(--txt);border-radius:2px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.h-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.h-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.h-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menú mobile desplegable */
#h-mobile{
  display:none;
  position:fixed;top:80px;left:0;right:0;
  background:#fff;
  border-bottom:2px solid var(--or);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:199;padding:8px 0;
  animation:slideDown .22s cubic-bezier(.4,0,.2,1);
}
#h-mobile.open{display:block}
#h-mobile a{
  display:block;padding:13px 28px;
  font-size:14px;font-weight:600;color:var(--txt2);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:all .18s;
}
#h-mobile a:hover{color:var(--or);border-left-color:var(--or);background:var(--or-lt)}

/* Responsive: ocultar nav links en mobile */
@media(max-width:768px){
  .h-nav{display:none}
  .h-burger{display:flex}
}
@media(min-width:769px){
  .h-burger{display:none}
  #h-mobile{display:none !important}
}
@media(max-width:900px){
  .h-nav a{padding:0 10px;font-size:12px}
}

/* ━━ ANIMACIÓN TÍTULOS ━━ */
.au-title{
  opacity:0;
  transform:translateY(32px);
  filter:blur(2px);
  transition:
    opacity .6s cubic-bezier(.4,0,.2,1),
    transform .6s cubic-bezier(.4,0,.2,1),
    filter .5s ease;
}
.au-title.show{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
/* s-label que aparece antes del título */
.s-lbl{
  opacity:0;
  transform:translateY(10px);
  letter-spacing:3px;
  transition:opacity .4s ease, transform .4s ease;
}
.s-lbl.show{
  opacity:1;
  transform:translateY(0);
}


/* ━━ REDUCCIÓN DE ESPACIOS EN BLANCO ━━ */

/* Padding general de secciones: 72px → 52px */
.sec{padding:52px 24px;position:relative}

/* Scroll margin para compensar header sticky */
#plagas,#como,#porque,#resenas,#faq,#servicios,#problema{
  scroll-margin-top:96px;
}

/* ── PLAGAS: cards más compactas, todas en pantalla ── */
.pg-gr{gap:10px;margin-top:20px}
.pg-img{height:120px}
.pg-bd{padding:10px 12px}
.pg-bd h3{font-size:15px;margin-bottom:1px}
.pg-lat{font-size:9.5px;margin-bottom:5px}
.pg-ds{font-size:12px;line-height:1.5}
.pg-b{font-size:8.5px;padding:2px 6px;bottom:5px;left:6px}

/* ── CÓMO FUNCIONA: steps más compactos ── */
.cm-tabs{margin:14px 0}
.cm-st{padding:16px 18px}
.cm-num{font-size:40px;margin-bottom:4px}
.cm-st h4{font-size:13px;margin-bottom:4px}
.cm-st p{font-size:12px}
.cm-info{padding:6px 9px;font-size:11px;margin-top:8px}
.cm-steps{gap:10px}

/* ── POR QUÉ FUMIPA: más compacto ── */
.dif-lst{gap:10px;margin-top:14px}
.dif h4{font-size:13px}
.dif p{font-size:12px}
.dif-ic{width:36px;height:36px;border-radius:8px}
.f-sl{max-height:480px}

/* ── RESEÑAS: más compactas ── */
.rv{padding:14px;min-height:150px}
.rv-t{font-size:11.5px;margin-bottom:9px}
.rv-s{font-size:11px;margin-bottom:7px}
.rv-av{width:30px;height:30px;font-size:12px}
.rv-n{font-size:11.5px}
.rv-tp,.rv-tm{font-size:9.5px}
.res-top{margin-bottom:20px}

/* ── FAQ: más compacto ── */
.fq-lst{margin-top:18px;gap:5px}
.fq-q{padding:13px 16px;font-size:13px}
.fq-a p{padding:0 16px 13px;font-size:12px}

/* ── PROBLEMA: más compacto ── */
.pr-c{padding:13px 15px}
.pr-hl{padding:14px 16px;margin-top:14px}

/* ── SERVICIOS: más compacto ── */
.sv-gr{margin-top:24px}
.sv-c{padding:20px 20px}
.sv-mini{margin-top:20px;gap:10px}
.sv-m{padding:13px}

/* ── s-label + título: reducir gap ── */
.s-lbl{margin-bottom:5px}
.s-ttl{margin-bottom:8px;font-size:clamp(26px,4.5vw,44px)}
.s-body{font-size:13.5px}

/* ── Metrics: más compacto ── */
#metrics{padding:12px 20px}

/* ── Trust: más compacto ── */
#trust{padding:10px 20px}

/* ━━ AJUSTES FINOS DE LAYOUT ━━ */

/* Como funciona: los 3 steps siempre en fila en desktop */
@media(min-width:680px){
  .cm-cnt.on{display:grid}
  .cm-steps{grid-template-columns:repeat(3,1fr);gap:10px}
}

/* Plagas: reducir imagen y texto para que entren las 8 en pantalla */
@media(min-width:880px){
  .pg-img{height:110px}
  .pg-ds{display:block;overflow:visible}
}

/* Reseñas: reducir gap del grid para que entren 6 */
@media(min-width:880px){
  .c-tr{gap:10px}
  .rv{padding:12px;min-height:140px}
}

/* FAQ: más compacto */
.fq-a p{line-height:1.6}

/* Por qué: foto slider más compacta */
@media(min-width:800px){
  .f-sl{aspect-ratio:1/1;max-height:440px}
  .dif{gap:10px}
}

/* Reducir el gap entre s-lbl y s-ttl */
.s-lbl + .s-ttl, .s-lbl + h2{margin-top:0}

/* CTA final más compacto */
#ctaf{padding:60px 24px}

/* Quitar margin-top excesivo en grids */
.pg-gr{margin-top:16px}
.sv-gr{margin-top:20px}
.fq-lst{margin-top:16px}
.dif-lst{margin-top:12px}
.res-top{margin-bottom:16px}
.cm-tabs{margin:12px 0}

/* Steps del CTA dentro del tab: sin padding extra */
.cm-cnt .cm-steps > .cm-st:first-child{margin-top:0}

/* Altura del hero: no forzar 100vh si el contenido es menor */
@media(max-height:700px){
  #hero{min-height:auto}
}

/* ══════════════════════════════════════════════════════
   SCROLL REVEAL — Sistema sr-* (IntersectionObserver)
   ══════════════════════════════════════════════════════ */

/* ── Estado base: invisible + desplazado hacia abajo ── */
.sr-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1),
              transform .55s cubic-bezier(.4,0,.2,1);
}
.sr-fade.sr-show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Títulos: fade + blur sutil ── */
.sr-title {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  transition: opacity .5s ease, transform .5s ease, filter .4s ease;
}
.sr-title.sr-show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Labels de sección (aparecen primero) ── */
.sr-label {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.sr-label.sr-show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Delays en cascada para tarjetas (sr-d1 a sr-d8) ── */
.sr-d1 { transition-delay: .08s }
.sr-d2 { transition-delay: .16s }
.sr-d3 { transition-delay: .24s }
.sr-d4 { transition-delay: .32s }
.sr-d5 { transition-delay: .40s }
.sr-d6 { transition-delay: .48s }
.sr-d7 { transition-delay: .56s }
.sr-d8 { transition-delay: .64s }

/* ── Respetar prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .sr-fade, .sr-title, .sr-label {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ━━ VIDEO IMPACTO ━━ */
#video-impacto {
  width: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
}

/* Grilla del video y franjas laterales */
.vi-grid {
  display: flex;
  width: 100%;
}
.vi-side {
  flex: 1; /* Toman el espacio sobrante por igual */
}
.vi-left {
  background: linear-gradient(to right, #000, var(--or));
}
.vi-right {
  background: linear-gradient(to right, var(--or), #000);
}
.vi-vid {
  flex: 0 0 80%; /* 80% en móvil para que no se vea tan chico */
  position: relative;
  line-height: 0;
}
@media (min-width: 768px) {
  .vi-vid {
    flex: 0 0 60%; /* 60% exacto en pantallas más grandes */
  }
}

.vi-vid video {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── SECTION COTIZADOR ── */
#cotizador {
  background: #0b0f19;
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,.05);
}
#cotizador .s-ttl {
  color: var(--or);
}
.cot-sub {
  color: rgba(255,255,255,.7);
  max-width: 600px;
  margin: 0 auto 40px auto;
  font-size: 1.15rem;
}
.cot-wrap {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cot-step h3 {
  font-family: 'Barlow', sans-serif;
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-left: 3px solid #F97316;
  padding-left: 12px;
}
.cot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.plagas-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cot-opt {
  background: rgba(255,255,255,.03);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 19px 20px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .2s ease;
  text-align: left;
  font-family: 'Barlow', sans-serif;
  position: relative;
}
.cot-opt:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-2px);
}
.cot-opt.selected {
  background: rgba(249, 115, 22, 0.12);
  border-color: var(--or);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.15);
}
.cot-opt.selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--or);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
  animation: fadeInCheck 0.2s ease forwards;
}
@keyframes fadeInCheck {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.cot-icon {
  font-size: 2rem;
  line-height: 1;
}
.cot-txt {
  font-size: 1.05rem;
  font-weight: 500;
}
.cot-action {
  padding-top: 20px;
  animation: fadeInUp .4s ease forwards;
}
.cot-action .btn-wa {
  background: #25D366 !important;
  color: #fff !important;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
  transition: all .3s ease;
  text-decoration: none;
}
.cot-action .btn-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
  background: #20ba59 !important;
}

/* Utils & Animations */
.cot-step.hidden, .cot-action.hidden {
  display: none;
}
.cot-step:not(.hidden) {
  animation: fadeInStep .45s ease forwards;
}
@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}