/* ===== calculator ===== */
.calc{margin-top:28px;background:#fff;border-radius:24px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.calc-in{padding:28px;display:grid;gap:18px}
.calc-in h3{font-size:1.35rem;font-weight:600}
.rng{display:grid;gap:6px}
.rng .lbl{display:flex;justify-content:space-between;gap:12px;font-weight:600;color:var(--char);font-size:.92rem}
.rng .lbl output{font-variant-numeric:tabular-nums;color:var(--red)}
.rng input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--red-hi) var(--p,50%),var(--mist-2) var(--p,50%));padding:0;border:0}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--red-hi);box-shadow:0 4px 10px rgba(0,0,0,.2);cursor:pointer}
.rng input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--red-hi);cursor:pointer}
.rng small{color:var(--muted);font-size:.8rem}
.calc-out{background:var(--char);color:#fff;padding:28px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.calc-out::after{content:"";position:absolute;right:0;bottom:0;width:180px;height:180px;background:linear-gradient(135deg,transparent 50%,rgba(188,24,24,.85) 50%)}
.calc-big{font:700 clamp(2.6rem,5vw,3.8rem)/1 var(--f-head);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.calc-big small{display:block;font:500 .95rem var(--f-head);color:#c9c9ce;margin-top:8px}
.cbars{display:grid;gap:12px;position:relative;z-index:1}
.cbar .t{display:flex;justify-content:space-between;font-size:.85rem;color:#d6d6d9;margin-bottom:6px}
.cbar .tr{height:14px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cbar .tr i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.calc-note{font-size:.78rem;color:#a9a9b0;position:relative;z-index:1;max-width:44ch}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.faq-list{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--shadow);border-color:transparent}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600;color:var(--char);font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist);position:relative;transition:background .3s,transform .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--char);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.faq details[open] summary i{background:var(--red-hi);transform:rotate(180deg)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:#fff}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq .ans{padding:0 20px 20px;color:var(--muted)}
@media (max-width:860px){.faq{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.statement .row{transform:none!important}}


/* WhatsApp floating button */
.wa{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:12px;text-decoration:none}
.wa .wa-btn{position:relative;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7),0 4px 10px rgba(0,0,0,.15);transition:transform .25s}
.wa .wa-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waPulse 2.2s ease-out infinite}
@keyframes waPulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.55);opacity:0}}
.wa:hover .wa-btn{transform:scale(1.08)}
.wa .wa-btn svg{width:32px;height:32px;fill:#fff}
.wa .wa-msg{background:#fff;color:var(--char);font:600 .9rem var(--f-head);padding:10px 14px;border-radius:14px 14px 4px 14px;box-shadow:var(--shadow);opacity:0;transform:translateX(10px);transition:opacity .35s,transform .35s;pointer-events:none;white-space:nowrap}
.wa.show-msg .wa-msg,.wa:hover .wa-msg{opacity:1;transform:none}
@media (max-width:520px){.wa .wa-msg{display:none}.wa .wa-btn{width:54px;height:54px}}


.social{display:flex;gap:10px}
.social a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .25s,transform .25s}
.social a svg{width:20px;height:20px;fill:#e4e4e7;transition:fill .25s}
.social a:hover{transform:translateY(-3px)}
.social a:hover{background:var(--red-hi)}
.social a:hover svg{fill:#fff}

.reveal.in{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{transform:translateY(24px)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes assemble{from{transform:translate(var(--dx),var(--dy));opacity:0}to{transform:none;opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,157,116,.5)}100%{box-shadow:0 0 0 9px rgba(31,157,116,0)}}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* ===== Modo Epione: encabezado ===== */
.brand-ep,.nav-ep,#menu li.m-ep{display:none}
body.mode-ep .brand:not(.brand-ep){display:none}
body.mode-ep .brand-ep{display:flex}
body.mode-ep .brand-ep .brand-logo{height:40px}
body.mode-ep #menu li:not(.m-ep){display:none}
body.mode-ep #menu li.m-ep{display:block}
body.mode-ep .nav-dh{display:none}
body.mode-ep .nav-ep{display:inline-flex}
#menu li.m-go a{color:var(--muted)}
@media (min-width:1181px){body.mode-ep #menu li.m-login{display:none}}
@media (max-width:1180px){body.mode-ep .nav-ep{display:none}#menu li.m-login a{color:var(--red);font-weight:600}}
@media (max-width:480px){body.mode-ep .brand-ep .brand-logo{height:34px}}
/* hero */
.e-sub{color:#e6e6e8;font-size:clamp(1.1rem,1.8vw,1.35rem);margin-top:10px;font-family:var(--f-light)}
.ep-view .v-hero.ep-head h1{font-size:clamp(2.2rem,5vw,3.6rem)}
/* Epione es… */
.ep-es-sec{padding-top:clamp(56px,8vw,104px)}
.ep-es-h{display:flex;align-items:flex-end;gap:14px;margin:0}
.ep-es-h img{height:clamp(42px,5vw,58px);width:auto;display:block}
.ep-es-h .thin{font-size:clamp(2rem,4vw,3rem);line-height:1;padding-bottom:4px}
.ep-es-lead{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--char);max-width:60ch;margin:18px 0 0}
.es-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:clamp(28px,4vw,44px)}
.es-tabs button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;gap:12px;padding:16px 18px 18px;border-radius:14px 14px 0 0;color:var(--muted);transition:background .25s,color .25s}
.es-tabs button b{font:600 1.6rem/1 var(--f-head);color:var(--line);transition:color .25s}
.es-tabs button span{font-weight:600;font-size:.95rem;line-height:1.25}
.es-tabs button i{position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--line);overflow:hidden}
.es-tabs button i::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(var(--p,0));transform-origin:left}
.es-tabs button[aria-selected="true"]{background:var(--mist);color:var(--char)}
.es-tabs button[aria-selected="true"] b{color:var(--red)}
.es-tabs button:hover{color:var(--char)}
.es-tabs button:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.es-stage{background:var(--mist);padding:clamp(28px,4vw,48px) 0}
.es-panel{display:none;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.es-panel.on{display:grid;animation:fade .5s ease both}
.es-shot img{width:100%;height:auto;display:block}
.es-list{list-style:none;margin:0;padding:0 0 0 6px;display:grid;gap:22px;position:relative}
.es-list li{position:relative;padding-left:30px;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.4;color:var(--char)}
.es-list li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:50%;background:var(--red)}
.es-list li+li::after{content:"";position:absolute;left:5px;top:calc(-22px - .6em);height:calc(22px + .9em);width:2px;background:var(--red)}
@media (max-width:860px){.es-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.es-tabs button{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 10px 16px}.es-tabs button span{font-size:.78rem}.es-tabs button i{left:10px;right:10px}.es-panel{grid-template-columns:1fr}}
@media (max-width:480px){.es-tabs button span{display:none}.es-tabs button{align-items:center}}