/* ============================================================
   EtiQali — Componentes de páginas interiores (fase 2)
   Reutiliza tokens y clases de experiencia.css
   ============================================================ */

/* page hero */
.phero{position:relative;overflow:hidden;padding:78px 0 64px;background:radial-gradient(120% 90% at 50% -10%,#0e2c52 0%,var(--bg) 62%);text-align:center}
.phero .wrap{position:relative;z-index:3}
.phero h1{font-size:clamp(34px,5.2vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.03;max-width:16ch;margin:22px auto 0}
.phero .lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:60ch;margin:22px auto 0;line-height:1.55}
.phero .pcta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.crumb a{color:var(--muted-2)}.crumb a:hover{color:var(--cyan)}

/* section framing reuse */
.pline{border-top:1px solid var(--line)}
.psoft{background:rgba(255,255,255,.012);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- PRICING ---------- */
.ptable{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:start}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px 28px;position:relative;display:flex;flex-direction:column;height:100%}
.pcard.feat{border-color:var(--cyan);background:linear-gradient(180deg,var(--grad-soft),var(--surface))}
.pcard .rib{position:absolute;top:-13px;left:28px;background:var(--grad);color:#04122e;font-family:'IBM Plex Mono';font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:5px 14px}
.pcard .ptag{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.pcard .pname{font-family:'Sora';font-weight:700;font-size:26px;margin-top:8px}
.pcard .pdesc{color:var(--muted);font-size:14.5px;margin-top:10px;line-height:1.5;min-height:66px}
.pcard .pprice{display:flex;align-items:baseline;gap:6px;margin-top:20px}
.pcard .pprice .amt{font-family:'Sora';font-weight:800;font-size:44px;letter-spacing:-.03em}
.pcard .pprice .per{color:var(--muted);font-size:15px}
.pcard .pnote{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--muted-2);margin-top:8px;line-height:1.5}
.pcard .annual{margin-top:14px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--ok);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pcard .annual b{color:var(--text);font-weight:600}
.pcard ul{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:12px}
.pcard li{display:flex;gap:11px;font-size:14.5px;color:var(--muted);line-height:1.45}
.pcard li svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--ok);fill:none;stroke-width:2.4;margin-top:2px}
.pcard li b{color:var(--text);font-weight:600}
.pcard .btn{margin-top:auto}
.pfoot-note{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;align-items:center;margin-top:30px}
.pfoot-note span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.pfoot-note svg{width:15px;height:15px;stroke:var(--ok);fill:none;stroke-width:2.4}
.billtoggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:5px;gap:4px;margin-top:40px}
.billtoggle .bt{background:none;border:0;color:var(--muted);font-family:'Sora',sans-serif;font-weight:600;font-size:15px;padding:10px 20px;border-radius:9px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.billtoggle .bt.on{background:var(--grad);color:#04122e}
.billtoggle .save2{font-family:'IBM Plex Mono';font-size:11px;background:rgba(52,211,153,.16);color:var(--ok);border-radius:20px;padding:2px 8px}
.billtoggle .bt.on .save2{background:rgba(4,18,46,.18);color:#04122e}
/* impact calculator */
.impact{max-width:1000px;margin:52px auto 0;display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:start}
.calc-panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px}
.seg{display:flex;gap:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:24px}
.seg button{flex:1;background:none;border:0;color:var(--muted);font-family:'Sora',sans-serif;font-weight:600;font-size:14px;padding:10px;border-radius:9px;cursor:pointer;transition:all .2s}
.seg button.on{background:var(--grad);color:#04122e}
.cfield{margin-bottom:20px}
.cfield:last-child{margin-bottom:0}
.cfield .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.cfield label{font-size:13.5px;color:var(--text);font-weight:500;line-height:1.3}
.cfield .val{font-family:'IBM Plex Mono';font-size:14px;color:var(--cyan);font-weight:600;white-space:nowrap}
.crange{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--surface-3);outline:none}
.crange::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--grad);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.crange::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#1ec8f0;cursor:pointer}
.results{background:linear-gradient(180deg,var(--grad-soft),var(--surface));border:1px solid var(--cyan);border-radius:20px;padding:30px}
.rmetric .n{font-family:'Sora',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.02em}
.rmetric .l{font-size:13px;color:var(--muted);margin-top:2px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rgrid .n{font-family:'Sora',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.01em}
.rgrid .l{font-size:12px;color:var(--muted-2);margin-top:3px;line-height:1.35}
.rplan{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;margin-bottom:20px}
.rplan .pl{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.rplan .pv{font-family:'Sora',sans-serif;font-weight:700;font-size:18px;color:var(--cyan)}
.rlead{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(18px,2.1vw,23px);line-height:1.38;letter-spacing:-.01em;margin-bottom:22px}
.impact-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.irow{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.irow .iic{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--cyan);flex:0 0 auto}
.irow .iic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.irow .il{font-family:'Sora',sans-serif;font-weight:600;font-size:14.5px;color:var(--text)}
.irow .idd{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.irow.key .iic{background:var(--grad);color:#04122e}
.irow.key .idd{color:var(--text)}
.decision{margin-top:22px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:14px;padding:6px 16px}
.drow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}
.drow .dl{font-size:13.5px;color:var(--muted)}
.drow .dv{font-family:'Sora',sans-serif;font-weight:700;font-size:16px;color:var(--text)}
@media(max-width:900px){.impact{grid-template-columns:1fr}}

/* extras / add-ons */
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.extra{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 22px;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s}
.extra:hover{transform:translateY(-3px);border-color:var(--line-3)}
.extra .ic{width:40px;height:40px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;color:var(--cyan);margin-bottom:14px}
.extra .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.extra .t{font-family:'Sora';font-weight:600;font-size:16px}
.extra .pr{font-family:'IBM Plex Mono';font-size:13px;color:var(--cyan);margin-top:4px}
.extra .d{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.5}

/* comparison table */
.cmp{margin-top:56px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:'Sora';font-weight:700;font-size:15px;background:rgba(255,255,255,.02)}
.cmp thead th:not(:first-child){text-align:center}
.cmp td:not(:first-child){text-align:center;color:var(--muted)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td .yes{color:var(--ok)}.cmp td .no{color:var(--muted-2)}
.cmp .grp{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);background:rgba(30,200,240,.05)}

/* ---------- FEATURE / STEP blocks (cómo funciona) ---------- */
.fsplit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1060px;margin:0 auto}
.fsplit.rev .ftext{order:2}
.fnum{font-family:'IBM Plex Mono';font-size:13px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.ftext h3{font-size:clamp(24px,3vw,34px);font-weight:700;margin-top:14px;letter-spacing:-.02em}
.ftext p{color:var(--muted);font-size:16.5px;margin-top:16px;line-height:1.6}
.ftext .mini-list{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.ftext .mini-list div{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--muted)}
.ftext .mini-list svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--cyan);fill:none;stroke-width:2;margin-top:3px}
.ftext .mini-list b{color:var(--text);font-weight:600}

/* ---------- SECTOR blocks ---------- */
.secphoto{width:100%;aspect-ratio:5/2;border-radius:20px;overflow:hidden;margin-bottom:44px;border:1px solid var(--line)}
.secnav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.secnav a{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:12px;padding:11px 20px;font-family:'Sora';font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px;transition:all .2s}
.secnav a:hover{border-color:var(--line-3);color:var(--text)}
.secblock{padding:96px 0;border-top:1px solid var(--line);scroll-margin-top:104px}
.sechead{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.sechead .em{font-size:40px}
.sechead h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-.02em}
.sectags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.sectags .pill{font-family:'IBM Plex Mono';font-size:12px;border-radius:8px;padding:7px 12px;background:rgba(245,181,61,.1);border:1px solid rgba(245,181,61,.3);color:#f3cd86}

/* ---------- CASE STUDIES ---------- */
.caselist{display:flex;flex-direction:column;gap:22px;margin-top:56px;max-width:960px;margin-inline:auto}
.casecard{display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 32px;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s;text-decoration:none;color:inherit}
.casecard:hover{transform:translateY(-4px);border-color:var(--cyan)}
.casecard .cem{width:96px;height:96px;border-radius:18px;background:var(--surface-2);overflow:hidden;display:block}
.casecard .cbody .cwho{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.casecard .cbody h3{font-size:clamp(20px,2.4vw,26px);font-weight:700;margin-top:8px;letter-spacing:-.02em}
.casecard .cbody p{color:var(--muted);font-size:15px;margin-top:10px;line-height:1.5}
.casecard .carrow{color:var(--cyan)}
.casecard .carrow svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}
.metricrow{display:flex;gap:38px;flex-wrap:wrap;margin-top:24px}
.metricrow .m .n{font-family:'Sora';font-weight:800;font-size:34px}
.metricrow .m .l{font-family:'IBM Plex Mono';font-size:12px;color:var(--muted-2);letter-spacing:.04em;margin-top:2px}

/* case detail story */
.story{max-width:760px;margin:0 auto}
.story .step{position:relative;padding-left:32px;padding-bottom:36px;border-left:2px solid var(--line)}
.story .step:last-child{border-left-color:transparent;padding-bottom:0}
.story .step::before{content:"";position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px var(--bg)}
.story .step .lb{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.story .step h3{font-size:22px;font-weight:700;margin-top:8px}
.story .step p{color:var(--muted);font-size:16px;margin-top:10px;line-height:1.6}
.pullquote{font-family:'Sora';font-weight:600;font-size:clamp(20px,2.6vw,28px);line-height:1.35;letter-spacing:-.02em;text-wrap:balance;border-left:3px solid var(--cyan);padding-left:24px;margin:44px 0;color:var(--text)}

/* ---------- PARTNERS ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px;max-width:960px;margin-inline:auto}
.pcell{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 30px;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s}
.pcell:hover{transform:translateY(-3px);border-color:var(--line-3)}
.pcell .ic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--cyan);margin-bottom:16px}
.pcell .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7}
.pcell h3{font-size:20px;font-weight:700}
.pcell p{color:var(--muted);font-size:15px;margin-top:10px;line-height:1.55}
.pcell .link{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--cyan);font-weight:600}
.pcell .link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- FAQ ---------- */
.faqcat{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:44px 0 14px}
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-family:'Sora';font-weight:600;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;color:var(--cyan);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 22px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:70ch}
.faq .ans a{color:var(--cyan)}

/* ---------- FORMS ---------- */
.formwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1040px;margin:56px auto 0;align-items:start}
.form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px 34px}
.form .fg{margin-bottom:18px}
.form label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:7px}
.form label .req{color:var(--cyan)}
.form input,.form select,.form textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:13px 14px;color:var(--text);font-family:'Poppins',sans-serif;font-size:15px;transition:border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--cyan)}
.form textarea{resize:vertical;min-height:110px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .hint{font-size:12.5px;color:var(--muted-2);margin-top:14px;line-height:1.5}
.form .hint a{color:var(--cyan)}
.aside .a-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:24px}
.aside .a-item .ic{width:40px;height:40px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;color:var(--cyan);flex:0 0 auto}
.aside .a-item .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.aside .a-item .t{font-family:'Sora';font-weight:600;font-size:16px}
.aside .a-item .d{color:var(--muted);font-size:14.5px;margin-top:4px;line-height:1.5}
.contact-methods{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.contact-methods a{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 18px;color:var(--text);font-weight:500;transition:border-color .2s}
.contact-methods a:hover{border-color:var(--cyan)}
.contact-methods a .role{color:var(--muted-2);font-size:13px;font-family:'IBM Plex Mono';margin-left:auto}

/* ---------- LEGAL ---------- */
.legal{max-width:760px;margin:0 auto;font-size:16px;line-height:1.7;color:var(--muted)}
.legal h2{font-size:24px;color:var(--text);margin:44px 0 14px;letter-spacing:-.01em}
.legal h3{font-size:18px;color:var(--text);margin:28px 0 10px}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--cyan)}
.legal .updated{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--muted-2);letter-spacing:.04em}
.legal table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px}
.legal th,.legal td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.legal th{background:rgba(255,255,255,.02);color:var(--text);font-weight:600}

/* ---------- BIBLIOTECA ---------- */
.libbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:44px 0 8px}
.libbtn{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:12px;padding:12px 22px;font-family:'Sora';font-weight:600;font-size:15px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:9px}
.libbtn:hover{border-color:var(--line-3);color:var(--text)}
.libbtn.on{background:var(--grad-soft);border-color:var(--cyan);color:var(--text)}
.libstage{display:grid;grid-template-columns:340px 1fr;gap:50px;align-items:start;max-width:1000px;margin:44px auto 0;transition:opacity .22s ease}
.libstage.swap{opacity:.15}
.libinfo .lab{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.libinfo h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;margin-top:10px;letter-spacing:-.02em}
.libinfo .desc{color:var(--muted);font-size:16px;margin-top:16px;line-height:1.6}
.libinfo .kv{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.libinfo .kv .r .k{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.libinfo .kv .r .v{font-size:15px;color:var(--text);font-weight:600;margin-top:3px}

@media(max-width:900px){
  .ptable{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .extras,.pgrid{grid-template-columns:1fr}
  .fsplit{grid-template-columns:1fr;gap:32px}
  .fsplit.rev .ftext{order:0}
  .fsplit .fvis{order:2}
  .formwrap{grid-template-columns:1fr;gap:34px}
  .casecard{grid-template-columns:64px 1fr;gap:18px}
  .casecard .carrow{display:none}
  .casecard .cem{width:64px;height:64px;font-size:30px}
  .libstage{grid-template-columns:1fr;justify-items:center;gap:32px}
  .libinfo{text-align:center}
  .libinfo .kv{text-align:left;max-width:340px;margin-inline:auto}
  .cmp{overflow-x:auto}
}
@media(max-width:560px){
  .form .row2{grid-template-columns:1fr}
  .metricrow{gap:24px}
}