/* ========================================================
   Calculadora de Préstamo — main.css
   Single shared stylesheet for the whole site.
   ======================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-0:#0a0e27;--bg-1:#0d1029;--bg-2:#161a3d;
  --surface:rgba(255,255,255,.06);--surface-strong:rgba(255,255,255,.10);--surface-solid:#161a3d;
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.16);
  --text:#f1f5ff;--text-2:#b8c1de;--text-mute:#7c87a8;
  --primary:#7c5cff;--primary-2:#5b3bff;--accent:#00d4ff;--accent-2:#00b8e6;
  --success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;
  --gradient-1:linear-gradient(135deg,#7c5cff 0%,#00d4ff 100%);
  --gradient-2:linear-gradient(135deg,#22c55e 0%,#00d4ff 100%);
  --gradient-3:linear-gradient(135deg,#ec4899 0%,#7c5cff 100%);
  --gradient-glow:radial-gradient(60% 60% at 50% 0%,rgba(124,92,255,.45) 0%,rgba(0,212,255,.10) 40%,transparent 70%);
  --shadow-sm:0 2px 8px rgba(0,0,0,.18);
  --shadow-md:0 8px 28px rgba(0,0,0,.30);
  --shadow-glow:0 10px 40px rgba(124,92,255,.35);
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;
  --max:1280px;
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"]{
  --bg-0:#f5f7ff;--bg-1:#ffffff;--bg-2:#eef2ff;
  --surface:rgba(255,255,255,.7);--surface-strong:rgba(255,255,255,.9);--surface-solid:#ffffff;
  --border:rgba(15,23,42,.08);--border-strong:rgba(15,23,42,.16);
  --text:#0f172a;--text-2:#475569;--text-mute:#94a3b8;
  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow-md:0 12px 32px rgba(15,23,42,.10);
  --shadow-glow:0 10px 40px rgba(124,92,255,.20);
  --gradient-glow:radial-gradient(60% 60% at 50% 0%,rgba(124,92,255,.18) 0%,rgba(0,212,255,.06) 40%,transparent 70%);
}

html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-0);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:var(--gradient-glow);z-index:-2;pointer-events:none}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(800px circle at 10% 10%,rgba(124,92,255,.15),transparent 40%),radial-gradient(600px circle at 90% 30%,rgba(0,212,255,.12),transparent 40%),radial-gradient(700px circle at 50% 90%,rgba(236,72,153,.10),transparent 40%);z-index:-1;pointer-events:none;animation:floatBg 20s ease-in-out infinite alternate}
@keyframes floatBg{0%{transform:translate(0,0)}100%{transform:translate(30px,-20px)}}
html[data-theme="light"] body::after{opacity:.6}

a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:80;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);background:rgba(10,14,39,.65);border-bottom:1px solid var(--border)}
html[data-theme="light"] .site-header{background:rgba(255,255,255,.75)}
.nav{max-width:var(--max);margin:0 auto;padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--text)}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--gradient-1);display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.2rem;box-shadow:var(--shadow-glow)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text small{font-weight:500;font-size:.7rem;color:var(--text-mute);letter-spacing:.04em;text-transform:uppercase}
.nav-tools{display:flex;align-items:center;gap:.4rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font-size:.85rem;backdrop-filter:blur(10px);transition:all .2s;color:var(--text)}
.chip:hover{background:var(--surface-strong);transform:translateY(-1px)}
.chip select{border:0;background:transparent;color:var(--text);outline:none;font-weight:600;cursor:pointer}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;font-size:1.1rem;backdrop-filter:blur(10px);transition:all .2s}
.icon-btn:hover{background:var(--surface-strong);transform:translateY(-1px) rotate(15deg)}

/* ============ BREADCRUMB ============ */
.breadcrumb{padding:1rem 1.25rem 0;max-width:var(--max);margin:0 auto}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:var(--text-mute)}
.breadcrumb li{display:inline-flex;align-items:center;gap:.4rem}
.breadcrumb li+li::before{content:"›";color:var(--text-mute);opacity:.6}
.breadcrumb a{color:var(--text-2);font-weight:600}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb li[aria-current]{color:var(--text);font-weight:600}

/* ============ HERO / PAGE HEAD ============ */
.hero{padding:3rem 1.25rem 1.5rem;text-align:center;position:relative}
.hero-inner{max-width:880px;margin:0 auto}
.hero-pill,.page-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;font-size:.78rem;font-weight:600;color:var(--text-2);margin-bottom:1rem;backdrop-filter:blur(10px);animation:fadeUp .8s var(--ease-out) both}
.hero-pill .dot,.page-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 12px var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

h1{font-size:clamp(2rem,5.5vw,3.5rem);line-height:1.05;letter-spacing:-.03em;font-weight:800;animation:fadeUp .9s var(--ease-out) both;animation-delay:.05s}
h1 .grad{background:var(--gradient-1);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.hero p.lead,.subtitle{margin:1rem auto 0;max-width:660px;color:var(--text-2);font-size:clamp(1rem,2vw,1.15rem);animation:fadeUp 1s var(--ease-out) both;animation-delay:.15s}
.hero-cta{margin-top:1.6rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;animation:fadeUp 1.05s var(--ease-out) both;animation-delay:.25s}
.hero-trust{margin-top:1.5rem;display:flex;justify-content:center;flex-wrap:wrap;gap:1rem 1.6rem;color:var(--text-mute);font-size:.85rem;animation:fadeUp 1.1s var(--ease-out) both;animation-delay:.35s}
.hero-trust span{display:inline-flex;align-items:center;gap:.4rem}
.hero-trust strong{color:var(--text);font-weight:700}

.page-head{text-align:center;margin-bottom:1.6rem}
.page-meta{color:var(--text-mute);font-size:.88rem}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:14px;font-weight:700;font-size:.95rem;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);transition:all .2s var(--ease);position:relative;overflow:hidden;backdrop-filter:blur(10px)}
.btn:hover{transform:translateY(-2px);background:var(--surface-strong);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn.primary{background:var(--gradient-1);border-color:transparent;color:#fff;box-shadow:var(--shadow-glow)}
.btn.primary:hover{box-shadow:0 14px 50px rgba(124,92,255,.55);transform:translateY(-2px) scale(1.02)}
.btn.success{background:var(--gradient-2);border-color:transparent;color:#0a0e27;font-weight:800}
.btn.ghost{background:transparent;border-color:var(--border-strong)}
.btn.sm{padding:.55rem .9rem;font-size:.85rem;border-radius:10px}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background:rgba(255,255,255,.45);pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ============ LAYOUT / GLASS CARD ============ */
main{max-width:var(--max);margin:0 auto;padding:1rem 1.25rem 5rem}
.app-grid{display:grid;gap:1.25rem}
@media(min-width:980px){.app-grid{grid-template-columns:1fr 420px;align-items:start}}
@media(min-width:1180px){.app-grid{grid-template-columns:1fr 460px}}

.glass{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.glass h2{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:.55rem;margin-bottom:1.1rem;letter-spacing:-.01em}
.glass h2 .badge{font-size:.65rem;font-weight:700;background:var(--gradient-1);color:#fff;padding:.2rem .55rem;border-radius:999px;letter-spacing:.04em}
.glass h3{font-size:1rem;font-weight:700;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}

/* ============ TABS ============ */
.tabs{display:flex;gap:.3rem;padding:.3rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:1.25rem;backdrop-filter:blur(10px);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;padding:.7rem 1rem;border-radius:11px;font-weight:600;font-size:.9rem;color:var(--text-2);transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:fit-content}
.tab:hover{color:var(--text)}
.tab.active{background:var(--gradient-1);color:#fff;box-shadow:var(--shadow-glow)}
.panel{display:none;animation:fadeIn .35s var(--ease-out)}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============ FORM CONTROLS ============ */
.form-grid{display:grid;gap:1.1rem}
@media(min-width:560px){.form-grid.cols-2{grid-template-columns:1fr 1fr}}
.field label{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:700;margin-bottom:.45rem;color:var(--text)}
.field label .val{font-variant-numeric:tabular-nums;font-weight:800;background:var(--gradient-1);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.95rem}
.field label .req{color:var(--danger);margin-left:.15rem}
.field .hint{display:block;font-size:.72rem;color:var(--text-mute);margin-top:.35rem}
.field .err-msg{display:none;color:var(--danger);font-size:.78rem;margin-top:.35rem;font-weight:600}
.field.has-error .err-msg{display:block}

.input-wrap{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;transition:all .2s;backdrop-filter:blur(10px)}
.input-wrap:hover{border-color:rgba(124,92,255,.4)}
.input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(124,92,255,.18)}
.input-wrap.error{border-color:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.15)}
.input-wrap input,.input-wrap select,.input-wrap textarea{flex:1;width:100%;padding:.85rem .95rem;border:0;background:transparent;color:var(--text);outline:none;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;font-family:inherit;resize:vertical}
.input-wrap textarea{min-height:140px;line-height:1.55;font-weight:500}
.input-wrap input::placeholder,.input-wrap textarea::placeholder{color:var(--text-mute);opacity:.7}
.input-wrap .affix{padding:0 .85rem;color:var(--text-mute);font-weight:700;font-size:.9rem;display:grid;place-items:center}
.input-wrap select.affix{background:transparent;border:0;outline:none;cursor:pointer}
.input-wrap .ico{display:grid;place-items:center;padding:0 .85rem;color:var(--text-mute);font-size:1rem;border-right:1px solid var(--border)}

input[type="range"]{-webkit-appearance:none;width:100%;height:6px;background:linear-gradient(90deg,var(--primary) var(--p,50%),rgba(255,255,255,.10) var(--p,50%));border-radius:999px;outline:none;margin-top:.7rem;cursor:pointer}
html[data-theme="light"] input[type="range"]{background:linear-gradient(90deg,var(--primary) var(--p,50%),rgba(15,23,42,.10) var(--p,50%))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:grab;box-shadow:0 4px 12px rgba(124,92,255,.5);transition:transform .15s}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:grab;box-shadow:0 4px 12px rgba(124,92,255,.5)}

.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;padding:3px;gap:2px;width:100%}
.seg button{flex:1;padding:.55rem .6rem;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--text-mute);transition:all .2s}
.seg button.active{background:var(--gradient-1);color:#fff;box-shadow:0 4px 12px rgba(124,92,255,.4)}

/* ============ CALCULATOR RESULTS ============ */
.sticky-results{position:relative}
@media(min-width:980px){.sticky-results{position:sticky;top:90px}}
.hero-result{background:var(--gradient-1);border-radius:var(--r-lg);padding:1.4rem;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-glow)}
.hero-result::after{content:"";position:absolute;top:-50%;right:-30%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);pointer-events:none}
.hero-result .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85;font-weight:700}
.hero-result .amt{font-size:clamp(2rem,5vw,2.6rem);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:.2rem;line-height:1}
.hero-result .freq{font-size:.85rem;opacity:.85;margin-top:.3rem}
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
.kpi{padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(10px)}
.kpi .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);font-weight:700}
.kpi .amt{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;margin-top:.25rem;letter-spacing:-.01em}

/* Health Score */
.health{margin-top:1rem}
.health-card{padding:1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);display:flex;align-items:center;gap:1rem;backdrop-filter:blur(10px)}
.health-gauge{position:relative;width:80px;height:80px;flex-shrink:0}
.health-gauge svg{transform:rotate(-90deg);width:100%;height:100%}
.health-gauge circle{fill:none;stroke-width:8;stroke-linecap:round}
.health-gauge .bg-c{stroke:var(--border-strong)}
.health-gauge .fg-c{stroke:url(#gradGauge);transition:stroke-dashoffset 1s var(--ease-out)}
.health-gauge .num{position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums}
.health-info .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);font-weight:700}
.health-info .grade{font-size:1.1rem;font-weight:800;margin-top:.15rem}
.health-info .grade.good{color:var(--success)}
.health-info .grade.med{color:var(--warning)}
.health-info .grade.bad{color:var(--danger)}
.health-info .desc{font-size:.82rem;color:var(--text-2);margin-top:.2rem}

/* Insights */
.insights{display:grid;gap:.6rem;margin-top:1rem}
.insight{display:flex;gap:.7rem;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;font-size:.88rem;animation:slideIn .4s var(--ease-out) both}
.insight .ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1rem}
.insight.success .ico{background:rgba(34,197,94,.15);color:var(--success)}
.insight.warn .ico{background:rgba(245,158,11,.15);color:var(--warning)}
.insight.info .ico{background:rgba(59,130,246,.15);color:var(--info)}
.insight.danger .ico{background:rgba(239,68,68,.15);color:var(--danger)}
.insight strong{color:var(--text);font-weight:700}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

/* Savings cards */
.savings{display:grid;gap:.7rem;margin-top:1rem}
.save-card{padding:1rem;background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(0,212,255,.06));border:1px solid rgba(34,197,94,.25);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:.8rem;transition:all .2s}
.save-card:hover{transform:translateY(-2px);border-color:var(--success);box-shadow:0 8px 24px rgba(34,197,94,.18)}
.save-card .txt{font-size:.86rem}
.save-card .txt strong{color:var(--text);font-weight:700;display:block;margin-bottom:.15rem}
.save-card .amt{font-weight:800;font-size:1.05rem;color:var(--success);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Charts */
.chart-tabs{display:flex;gap:.3rem;margin-bottom:.6rem}
.chart-tab{padding:.4rem .8rem;font-size:.8rem;font-weight:600;border-radius:8px;color:var(--text-mute);transition:all .2s}
.chart-tab.active{background:var(--surface-strong);color:var(--text)}
.chart-wrap{position:relative;height:280px}
.chart-wrap.pie{height:240px}
.chart-pane{display:none}
.chart-pane.active{display:block}

/* Amortization table */
.table-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}
.table-scroll{overflow:auto;max-height:480px;border:1px solid var(--border);border-radius:14px;background:var(--surface);backdrop-filter:blur(10px)}
table.amort{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
table.amort th,table.amort td{padding:.7rem .8rem;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
table.amort th:first-child,table.amort td:first-child{text-align:left}
table.amort thead th{position:sticky;top:0;background:var(--bg-2);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mute);z-index:1}
html[data-theme="light"] table.amort thead th{background:#f1f5f9}
table.amort tbody tr{transition:background .15s}
table.amort tbody tr:hover{background:var(--surface-strong)}

/* Compare cards */
.compare-grid{display:grid;gap:1rem}
@media(min-width:760px){.compare-grid{grid-template-columns:1fr 1fr}}
.cmp-card{padding:1.1rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);backdrop-filter:blur(10px)}
.cmp-card h4{font-size:1rem;font-weight:800;margin-bottom:.85rem;display:flex;align-items:center;gap:.4rem}
.cmp-result{margin-top:1.25rem;padding:1.4rem;border-radius:var(--r-md);background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(0,212,255,.10));border:1px solid var(--border-strong)}
.cmp-best-tag{display:inline-block;background:var(--gradient-2);color:#0a0e27;font-size:.7rem;font-weight:800;padding:.2rem .55rem;border-radius:999px;margin-left:.4rem;text-transform:uppercase;letter-spacing:.05em}
.cmp-savings{margin-top:1rem;padding:1rem;background:var(--success);color:#fff;border-radius:14px;font-weight:600;text-align:center}
.cmp-savings .big{display:block;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;margin-top:.2rem}

/* Sticky CTA mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:rgba(10,14,39,.85);border-top:1px solid var(--border-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:70;display:none;box-shadow:0 -8px 32px rgba(0,0,0,.3)}
html[data-theme="light"] .sticky-cta{background:rgba(255,255,255,.92)}
.sticky-cta-inner{display:flex;align-items:center;gap:.6rem;max-width:var(--max);margin:0 auto}
.sticky-cta .preview{flex:1;font-size:.78rem}
.sticky-cta .preview .v{font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums;background:var(--gradient-1);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.sticky-cta .preview .l{color:var(--text-mute);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:760px){.sticky-cta{display:flex}main{padding-bottom:6.5rem}}

/* ============ AD SLOTS ============ */
.ad-slot{position:relative;margin:1.6rem auto;max-width:var(--max);min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-mute);font-size:.78rem;border:1px dashed var(--border-strong);border-radius:var(--r-md);background:linear-gradient(135deg,var(--surface),transparent);backdrop-filter:blur(10px);padding:1rem;overflow:hidden;transition:border-color .25s}
.ad-slot::before{content:"Publicidad";position:absolute;top:8px;left:12px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);opacity:.7}
.ad-slot:hover{border-color:rgba(124,92,255,.35)}
.ad-slot--top{min-height:90px}
.ad-slot--mid{min-height:250px}
.ad-slot--bottom{min-height:120px;margin-bottom:0}
@media(max-width:560px){.ad-slot--mid{min-height:200px}}

/* ============ SEO INTRO + TRUST STRIP ============ */
.seo-intro{padding:0 1.25rem;margin-top:.6rem}
.seo-intro-inner{max-width:920px;margin:0 auto;padding:1.6rem clamp(1.25rem,4vw,2rem);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);backdrop-filter:blur(20px);box-shadow:var(--shadow-sm)}
.seo-intro h2{font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:800;margin-bottom:.8rem;letter-spacing:-.01em;line-height:1.25}
.seo-intro p{color:var(--text-2);font-size:.98rem;line-height:1.75;margin-bottom:.85rem}
.seo-intro p:last-of-type{margin-bottom:0}
.seo-intro p strong{color:var(--text)}
.seo-intro a{font-weight:600;border-bottom:1px dashed currentColor;transition:color .2s}
.seo-intro a:hover{color:var(--accent)}
.trust-strip{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--border)}
@media(min-width:760px){.trust-strip{grid-template-columns:repeat(4,1fr)}}
.trust-strip li{display:flex;align-items:center;gap:.7rem;font-size:.85rem}
.trust-strip .ts-ico{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(0,212,255,.10));border:1px solid var(--border-strong);display:grid;place-items:center;font-size:1.1rem}
.trust-strip strong{display:block;color:var(--text);font-weight:700;font-size:.88rem;line-height:1.2}
.trust-strip small{display:block;color:var(--text-mute);font-size:.74rem;margin-top:.15rem}

/* ============ TABLE OF CONTENTS ============ */
.toc{margin:0 0 1.6rem;padding:1.2rem 1.4rem;background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(0,212,255,.05));border:1px solid var(--border-strong);border-radius:var(--r-md);border-left:4px solid var(--primary)}
.toc h2,.toc h3{font-size:.95rem;font-weight:800;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text);display:flex;align-items:center;gap:.5rem}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:.35rem}
@media(min-width:560px){.toc ol{grid-template-columns:1fr 1fr;gap:.4rem .9rem}}
.toc li{counter-increment:toc;position:relative;padding-left:1.7rem}
.toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.05rem;font-size:.78rem;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.toc a{color:var(--text-2);font-weight:600;font-size:.92rem;border-bottom:1px dashed transparent;transition:all .18s}
.toc a:hover{color:var(--accent);border-bottom-color:currentColor}

/* ============ SEO ARTICLE BODY ============ */
.content{margin-top:2rem}
.content article{padding:2rem clamp(1.25rem,4vw,2.5rem)}
.content article h2,article h2{font-size:clamp(1.3rem,3vw,1.65rem);margin:2rem 0 .8rem;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.content article h2:first-of-type,article h2:first-of-type{margin-top:0}
article h2 .num{flex-shrink:0;font-size:.7rem;font-weight:700;background:var(--gradient-1);color:#fff;padding:.25rem .55rem;border-radius:8px;letter-spacing:.04em}
.content article h3,article h3{font-size:1.1rem;margin:1.5rem 0 .55rem;font-weight:700}
.content article p,article p,article li{color:var(--text-2);font-size:1.02rem;line-height:1.8}
.content article p strong,article p strong{color:var(--text)}
.content article p,article p{margin-bottom:1rem}
.content article ul,.content article ol,article ul,article ol{padding-left:1.4rem;margin:.6rem 0 1.1rem}
.content article li,article li{margin-bottom:.45rem}
.content article a,article a{font-weight:600;border-bottom:1px dashed currentColor}
article a.internal-link{color:var(--primary);font-weight:700;background:linear-gradient(135deg,rgba(124,92,255,.10),transparent);padding:.05rem .35rem;border-radius:6px;border-bottom:1px solid var(--primary)}
article a.internal-link:hover{background:linear-gradient(135deg,rgba(124,92,255,.20),rgba(0,212,255,.10));color:var(--accent)}
.formula{display:inline-block;padding:.5rem .85rem;background:var(--surface-strong);border:1px solid var(--border-strong);border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;margin:.4rem 0;font-weight:600}
.example-box,.example{margin:1.2rem 0;padding:1.1rem 1.3rem;background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(0,212,255,.06));border:1px solid var(--border-strong);border-radius:var(--r-md);border-left:4px solid var(--primary)}
.example-box .flag,.example .flag{font-size:1.4rem;margin-right:.4rem}
.example-box h4,.example h4{font-size:1rem;margin-bottom:.5rem;font-weight:700}
.tip-grid{display:grid;gap:.7rem;margin:1rem 0}
@media(min-width:560px){.tip-grid{grid-template-columns:1fr 1fr}}
.tip{padding:.9rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;display:flex;gap:.7rem}
.tip .ti{font-size:1.3rem;flex-shrink:0}
.tip .tt strong{color:var(--text);display:block;margin-bottom:.15rem}

/* ============ CALLOUTS ============ */
.callout{margin:1.2rem 0;padding:1.1rem 1.3rem;background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(0,212,255,.05));border:1px solid var(--border-strong);border-radius:var(--r-md);border-left:4px solid var(--primary)}
.callout.success{background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(0,212,255,.05));border-color:rgba(34,197,94,.25);border-left-color:var(--success)}
.callout.warn{background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(239,68,68,.05));border-color:rgba(245,158,11,.25);border-left-color:var(--warning)}
.callout.danger{background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(124,92,255,.05));border-color:rgba(239,68,68,.30);border-left-color:var(--danger)}
.callout strong{color:var(--text)}
.callout p{margin:0;font-size:.95rem}
.compare-table{width:100%;margin:1.2rem 0;border-collapse:collapse;border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden;background:var(--surface);font-size:.92rem}
.compare-table th,.compare-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.compare-table th{background:var(--surface-strong);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mute)}
.compare-table tr:last-child td{border-bottom:0}

/* ============ FAQ ============ */
.faq{margin-top:2rem}
.faq-list{display:grid;gap:.7rem;margin-top:1rem}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem 1.2rem;backdrop-filter:blur(10px);transition:all .2s}
.faq details:hover{border-color:var(--border-strong)}
.faq details[open]{background:var(--surface-strong)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--primary);transition:transform .25s;font-weight:300}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.7rem;color:var(--text-2);font-size:.94rem}

/* ============ BLOG ============ */
.cats{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem;animation:fadeUp 1.1s var(--ease-out) both;animation-delay:.25s}
.cat{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;color:var(--text-2);font-size:.8rem;font-weight:600;backdrop-filter:blur(10px);transition:all .2s;cursor:pointer}
.cat:hover{transform:translateY(-1px);background:var(--surface-strong)}
.cat.active{background:var(--gradient-1);color:#fff;border-color:transparent}

.posts{display:grid;gap:1.25rem;margin-top:.5rem}
@media(min-width:680px){.posts{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.posts{grid-template-columns:repeat(3,1fr)}}
@media(min-width:680px){.posts > article:first-child{grid-column:span 2}}
@media(min-width:1024px){.posts > article:first-child{grid-column:span 3;display:grid;grid-template-columns:1.1fr 1fr;gap:0;padding:0;overflow:hidden}}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.4rem;backdrop-filter:blur(20px);box-shadow:var(--shadow-md);position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s}
.post-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.post-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 16px 50px rgba(0,0,0,.35)}
.post-cover{aspect-ratio:16/9;background:var(--gradient-1);display:grid;place-items:center;position:relative;overflow:hidden;color:#fff;font-size:4rem;font-weight:900}
.post-cover.alt-1{background:linear-gradient(135deg,#22c55e 0%,#00d4ff 100%)}
.post-cover.alt-2{background:linear-gradient(135deg,#ec4899 0%,#7c5cff 100%)}
.post-cover.alt-3{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}
.post-cover.alt-4{background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%)}
.post-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%)}
@media(min-width:1024px){.posts > article:first-child .post-cover{aspect-ratio:auto;height:100%;min-height:280px}.posts > article:first-child .post-body{padding:2rem}}
.post-body{display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;font-size:.73rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em;font-weight:700;flex-wrap:wrap}
.post-tag{display:inline-flex;align-items:center;padding:.25rem .55rem;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(0,212,255,.10));border:1px solid var(--border-strong);border-radius:999px;color:var(--accent);font-weight:700;letter-spacing:.04em;font-size:.72rem;text-transform:uppercase}
.post-meta .dot-sep{opacity:.4}
.post-card h2{font-size:clamp(1.05rem,2vw,1.25rem);font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-bottom:.55rem}
.posts > article:first-child h2{font-size:clamp(1.4rem,3.2vw,1.9rem);line-height:1.15}
.post-card h2 a{color:var(--text);transition:color .2s}
.post-card h2 a:hover{background:var(--gradient-1);-webkit-background-clip:text;background-clip:text;color:transparent}
.post-excerpt{color:var(--text-2);font-size:.92rem;line-height:1.65;margin-bottom:1rem;flex:1}
.posts > article:first-child .post-excerpt{font-size:1rem}
.read-more{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.88rem;color:var(--accent);align-self:flex-start;transition:all .2s}
.read-more:hover{gap:.6rem;color:var(--primary)}
.read-more::after{content:"→";transition:transform .2s}
.read-more:hover::after{transform:translateX(3px)}

.newsletter{margin-top:2rem;padding:2rem clamp(1.4rem,4vw,2.5rem);background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(0,212,255,.10));border:1px solid var(--border-strong);border-radius:var(--r-lg);text-align:center;backdrop-filter:blur(20px)}
.newsletter h2{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800;letter-spacing:-.01em;margin-bottom:.5rem}
.newsletter p{color:var(--text-2);max-width:520px;margin:0 auto 1.2rem;font-size:.95rem}
.newsletter .cta{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;background:var(--gradient-1);color:#fff;font-weight:700;border-radius:14px;box-shadow:var(--shadow-glow);transition:all .2s}
.newsletter .cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 50px rgba(124,92,255,.55)}

/* Single post */
.article-hero{margin-bottom:1.6rem}
.cover{margin:1.4rem 0;aspect-ratio:16/8;background:var(--gradient-1);border-radius:var(--r-lg);display:grid;place-items:center;color:#fff;font-size:5rem;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.cover.alt-1{background:linear-gradient(135deg,#22c55e 0%,#00d4ff 100%)}
.cover.alt-2{background:linear-gradient(135deg,#ec4899 0%,#7c5cff 100%)}
.cover.alt-3{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}
.cover.alt-4{background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%)}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%)}
.post-meta .author{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--text-2);text-transform:none;letter-spacing:0;font-size:.85rem}
.post-meta .avatar{width:30px;height:30px;border-radius:50%;background:var(--gradient-1);display:grid;place-items:center;color:#fff;font-weight:900;font-size:.78rem}
.cta-box{margin:2rem 0 0;padding:1.8rem clamp(1.4rem,4vw,2rem);background:var(--gradient-1);border-radius:var(--r-lg);color:#fff;text-align:center;box-shadow:var(--shadow-glow);position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.cta-box h3{font-size:1.3rem;font-weight:800;margin-bottom:.5rem;letter-spacing:-.01em;color:#fff}
.cta-box p{color:rgba(255,255,255,.92);margin-bottom:1.1rem;font-size:.95rem}
.cta-box .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;background:#fff;color:var(--primary);font-weight:800;border-radius:14px;transition:all .2s;text-decoration:none;width:auto}
.cta-box .btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 30px rgba(0,0,0,.25);background:#fff}
.related{margin-top:2rem}
.related h2{font-size:1.4rem;font-weight:800;margin-bottom:1rem;letter-spacing:-.01em}
.related-grid{display:grid;gap:.9rem}
@media(min-width:680px){.related-grid{grid-template-columns:1fr 1fr}}
.related-card{padding:1.1rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);backdrop-filter:blur(10px);transition:all .25s}
.related-card:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.related-card .rcat{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700;margin-bottom:.3rem}
.related-card h3{font-size:.98rem;font-weight:700;margin-bottom:.3rem;line-height:1.35}
.related-card h3 a{color:var(--text)}
.related-card h3 a:hover{color:var(--accent)}
.related-card p{font-size:.85rem;color:var(--text-mute);line-height:1.55;margin:0}

/* ============ CONTACT FORM ============ */
.contact-grid{display:grid;gap:1.25rem}
@media(min-width:880px){.contact-grid{grid-template-columns:1.4fr .9fr;align-items:start}}
.privacy-note{margin-top:1rem;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.82rem;color:var(--text-mute);display:flex;align-items:flex-start;gap:.6rem;line-height:1.55}
.privacy-note .pico{flex-shrink:0;font-size:1rem;margin-top:1px}
.trust-list{list-style:none;display:grid;gap:.7rem;margin-top:1.2rem}
.trust-list li{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.92rem;font-weight:600;color:var(--text);transition:all .2s}
.trust-list li:hover{transform:translateX(3px);border-color:var(--border-strong)}
.trust-list .check{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(0,212,255,.10));border:1px solid rgba(34,197,94,.35);display:grid;place-items:center;color:var(--success);font-weight:900;font-size:.9rem}
.email-card{margin-top:1.2rem;padding:1.1rem 1.2rem;background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(0,212,255,.08));border:1px solid var(--border-strong);border-radius:var(--r-md);text-align:center}
.email-card .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);font-weight:700;margin-bottom:.3rem}
.email-card .em{font-size:1rem;font-weight:700;letter-spacing:-.005em;word-break:break-all}
.email-card a{border-bottom:1px dashed currentColor}
.success-state{text-align:center;padding:1rem .5rem 0;animation:fadeUp .5s var(--ease-out) both;display:none}
.success-state.show{display:block}
.success-state .check-big{width:78px;height:78px;border-radius:50%;background:var(--gradient-2);margin:0 auto 1.1rem;display:grid;place-items:center;color:#0a0e27;font-size:2.2rem;font-weight:900;box-shadow:0 12px 40px rgba(34,197,94,.45);animation:pop .5s var(--ease-out) both}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.success-state h3{font-size:1.4rem;font-weight:800;margin-bottom:.5rem;letter-spacing:-.01em}
.success-state p{color:var(--text-2);margin-bottom:1.4rem;font-size:.95rem}
.success-state .btn-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.success-state .btn{width:auto}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:6rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface-solid);color:var(--text);padding:.8rem 1.2rem;border-radius:14px;font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:all .3s var(--ease-out);z-index:90;box-shadow:var(--shadow-md);border:1px solid var(--border-strong)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:761px){.toast{bottom:1.5rem}}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border);background:var(--surface);padding:2rem 1.25rem;margin-top:3rem;backdrop-filter:blur(20px)}
.foot-inner{max-width:var(--max);margin:0 auto;display:grid;gap:1.2rem;text-align:center}
@media(min-width:760px){.foot-inner{grid-template-columns:1fr auto;text-align:left;align-items:center}}
.foot-links{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;color:var(--text-mute);font-size:.88rem}
.foot-links a{color:var(--text-mute)}
.foot-links a:hover{color:var(--accent)}

/* ============ UTILITIES ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-mute{color:var(--text-mute)}
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.text-danger{color:var(--danger)}
:target{scroll-margin-top:80px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  body::after{animation:none}
}