/* Fuentes autoalojadas. Generadas por herramientas/fuentes.py: sin dependencia de Google Fonts, sin peticion externa y sin render-blocking en el . */ @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/caprasimo-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/caprasimo-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/figtree-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/figtree-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/figtree-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/figtree-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/figtree-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/figtree-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/figtree-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/figtree-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* dineroSi.es - sistema de diseno. Base: Organic. Cambio de marca: el verde sube a voz primaria (Verde Si) y la terracota pasa a ser el "NO" / acento. */ /* ===================================================== tokens ============ */ :root{ /* ground */ --c-bg:#F5EAD8; /* arena */ --c-surface:#EBDDC5; /* arena media */ --c-white-warm:#F9F4ED; --c-white:#FFFFFF; --c-ink:#201E1D; /* Verde Si */ --c-green:#5F8F4A; --c-green-hover:#4B7539; --c-green-light:#A3D17F; --c-green-tint:#E1EECC; --c-green-tint-100:#F0FAE1; --c-green-800:#3D472B; --c-green-900:#272E1B; /* terracota (el NO) */ --c-terra:#C67139; --c-terra-700:#8C491A; --c-terra-200:#FFE1D0; /* semanticos */ --c-warn:#D99A3C; --c-error:#A8382A; --c-error-bg:#FFF5F2; --c-notice-bg:#FFF0E2; /* texto sobre arena */ --ink-2:rgba(32,30,29,.72); --ink-3:rgba(32,30,29,.60); --ink-4:rgba(32,30,29,.55); --ink-5:rgba(32,30,29,.45); --line:rgba(32,30,29,.14); --line-soft:rgba(32,30,29,.10); --control-border:rgba(32,30,29,.20); /* texto sobre verde profundo */ --sand-2:rgba(245,234,216,.72); --sand-3:rgba(245,234,216,.65); --sand-4:rgba(245,234,216,.55); --font-display:"Caprasimo",Georgia,serif; --font-body:"Figtree",-apple-system,"Segoe UI",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --r-md:16px; --r-card:24px; --r-lg:28px; --r-pill:999px; --sh-sm:0 1px 2px rgba(46,43,37,.14); --sh-md:0 3px 10px rgba(46,43,37,.16); --sh-lg:0 12px 32px rgba(46,43,37,.22); --wrap:1180px; } /* ===================================================== base ============== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--c-bg);color:var(--c-ink); font-family:var(--font-body);font-size:17px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0 0 .5em;letter-spacing:-.02em;line-height:1.1} h1,h2{font-family:var(--font-display);font-weight:400} h1{font-size:clamp(34px,5.2vw,60px);line-height:1.04} h2{font-size:clamp(28px,3.6vw,42px)} h3{font-family:var(--font-body);font-weight:800;font-size:clamp(21px,2.2vw,26px);line-height:1.2} h4{font-family:var(--font-body);font-weight:800;font-size:19px;line-height:1.3;letter-spacing:-.01em} p{margin:0 0 1.1rem} a{color:var(--c-green-hover);text-underline-offset:3px} a:hover{color:var(--c-terra);text-decoration:underline} strong,b{font-weight:700} img{display:block;max-width:100%} ul,ol{margin:0 0 1.1rem;padding-left:1.3em} li{margin-bottom:.45em} hr{height:1px;border:0;background:var(--line);margin:0} :focus{outline:none} :focus-visible{outline:2px solid var(--c-green);outline-offset:2px;border-radius:4px} ::selection{background:rgba(95,143,74,.28)} .mono{font-family:var(--font-mono)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .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} .skip{position:absolute;left:-9999px;top:0;background:var(--c-green);color:#fff;padding:10px 18px;border-radius:var(--r-pill);z-index:100} .skip:focus{left:12px;top:12px} /* ===================================================== logo ============== */ .logo{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;color:var(--c-ink);font-size:26px;line-height:1} .logo:hover{text-decoration:none;color:var(--c-ink)} .logo .l-dinero{font-family:var(--font-body);font-weight:900;letter-spacing:-.03em} .logo .l-si{font-family:var(--font-display);font-weight:400;color:var(--c-green)} .logo .l-es{font-family:var(--font-body);font-weight:600;font-size:.51em;color:var(--ink-5)} .logo--rev .l-dinero{color:var(--c-bg)} .logo--rev .l-si{color:var(--c-green-light)} .logo--rev .l-es{color:var(--sand-4)} /* ================================================ NO -> SI ============== */ .nosi{position:relative;display:inline-block;font-family:var(--font-display)} .nosi .bar{position:absolute;left:-8px;right:-8px;top:52%;height:.09em;border-radius:var(--r-pill);background:var(--c-terra);transform:rotate(-7deg)} .nosi--ondark .bar{background:var(--c-bg)} /* ===================================================== nav =============== */ .nav{position:sticky;top:0;z-index:50;background:rgba(245,234,216,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)} .nav-in{max-width:var(--wrap);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:28px} .nav-links{display:flex;align-items:center;gap:26px;margin-left:auto} .nav-links a{font-weight:600;font-size:15px;color:rgba(32,30,29,.75);text-decoration:none} .nav-links a:hover,.nav-links a[aria-current=page]{color:var(--c-green-hover)} /* El CTA es un boton, no un enlace de nav: conserva su color propio. */ .nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff} .nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--control-border);border-radius:var(--r-md);width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center} .nav-toggle span{display:block;width:18px;height:2px;background:var(--c-ink);box-shadow:0 -5px 0 var(--c-ink),0 5px 0 var(--c-ink)} /* ===================================================== botones =========== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none; font-family:var(--font-body);font-weight:700;font-size:17px;line-height:1.2;border:none;border-radius:var(--r-pill); padding:16px 30px;transition:background-color 140ms ease,color 140ms ease} .btn:hover{text-decoration:none} .btn-primary{background:var(--c-green);color:#fff} .btn-primary:hover{background:var(--c-green-hover);color:#fff} .btn-secondary{background:transparent;color:var(--c-ink);border:1.5px solid var(--c-ink);padding:14.5px 28.5px} .btn-secondary:hover{background:rgba(32,30,29,.06);color:var(--c-ink)} .btn-ondark{background:var(--c-green-light);color:var(--c-green-900)} .btn-ondark:hover{background:#C3E6A4;color:var(--c-green-900)} .btn-lg{font-size:18px;padding:18px 34px} .btn-block{width:100%} .btn-nav{padding:11px 22px;font-size:15px} /* ===================================================== pills/badges ====== */ .badge{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);padding:7px 16px;font-size:13px;font-weight:600} .badge-green{background:var(--c-green-tint);color:var(--c-green-800)} .badge-solid{background:var(--c-green);color:#fff} .badge-terra{background:var(--c-terra-200);color:var(--c-terra-700)} .badge-outline{border:1.5px solid var(--control-border);color:var(--ink-2)} .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px} .kicker-green{color:var(--c-green-hover)} .kicker-ondark{color:var(--c-green-light)} /* ===================================================== iconos ============ */ .ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round} .ico-cap{width:52px;height:52px;flex:none;border-radius:var(--r-md);background:var(--c-green-tint-100);display:grid;place-items:center;color:var(--c-green-hover)} .ico-cap .ico{width:24px;height:24px} /* ===================================================== secciones ========= */ .sec{padding:72px 0} .sec-tight{padding:52px 0} .sec + .sec{border-top:1px solid var(--line)} .sec-head{max-width:760px;margin-bottom:40px} .sec-head p{color:var(--ink-2);font-size:19px;margin-bottom:0} .lede{font-size:19px;line-height:1.6;color:var(--ink-2)} /* ===================================================== breadcrumb ======== */ .crumbs{font-size:13px;color:var(--ink-4);padding:18px 0 0} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0} .crumbs li{margin:0;display:flex;gap:8px;align-items:center} .crumbs li+li::before{content:"/";color:var(--ink-5)} .crumbs a{color:var(--ink-3);text-decoration:none} .crumbs a:hover{color:var(--c-green-hover);text-decoration:underline} /* ===================================================== hero ============== */ .hero{padding:44px 0 64px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start} .hero h1{margin:18px 0 20px} .hero h1 .yes{color:var(--c-green)} .hero .lede{max-width:540px} .hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:30px 0 26px} .hero-cta .micro{font-size:15px;color:var(--ink-4)} .trust{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none} .trust li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink-2);margin:0} .trust .ico{width:17px;height:17px;color:var(--c-green);margin-top:4px} /* ------------- tarjeta simulador (columna derecha del hero) ------------- */ .simcard{background:#fff;border-radius:var(--r-lg);padding:34px;box-shadow:var(--sh-lg)} .simcard h2{font-family:var(--font-body);font-weight:800;font-size:20px;letter-spacing:-.01em;margin:0 0 4px;line-height:1.3} .simcard .step{font-size:14px;color:var(--ink-4);margin:0 0 16px} .track{height:6px;border-radius:var(--r-pill);background:var(--c-surface);overflow:hidden;margin-bottom:24px} .track i{display:block;height:100%;background:var(--c-green);border-radius:var(--r-pill)} .f-label{display:block;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:8px} .amount{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--control-border);background:var(--c-white-warm);border-radius:var(--r-pill);padding:14px 22px} .amount output{font-family:var(--font-mono);font-size:22px;font-weight:500} .amount .range{font-size:13px;color:var(--ink-4);font-family:var(--font-mono)} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:var(--c-surface);margin:22px 0 24px;cursor:pointer} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--c-green);border:3px solid #fff;box-shadow:0 1px 4px rgba(46,43,37,.3)} input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--c-green);border:3px solid #fff;box-shadow:0 1px 4px rgba(46,43,37,.3)} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px} .chip{border:1.5px solid var(--control-border);background:transparent;border-radius:var(--r-pill);padding:10px 18px;font:inherit;font-size:15px;cursor:pointer;transition:background-color 140ms ease} .chip[aria-pressed=true]{background:var(--c-green);border-color:var(--c-green);color:#fff} .chip:not([aria-pressed=true]):hover{background:rgba(32,30,29,.06)} .simcard .fine{font-size:12px;line-height:1.5;color:var(--ink-4);text-align:center;margin:14px 0 0} .simout{background:var(--c-green-tint-100);border-radius:var(--r-md);padding:14px 18px;margin-bottom:20px;font-size:14px;color:var(--c-green-800)} .simout b{font-family:var(--font-mono);font-weight:500;font-size:17px;display:block;margin-top:2px} /* ===================================================== prosa ============= */ .prose{max-width:760px} .prose h2{margin-top:56px} .prose h2:first-child{margin-top:0} .prose h3{margin-top:36px} .prose li{color:var(--ink-2)} .prose p{color:var(--ink-2)} .prose .lede-first{font-size:19px;color:var(--c-ink)} .prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1.4rem} .prose th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line)} .prose td{padding:12px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top} .prose td:first-child{font-weight:600;color:var(--c-ink)} .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6rem} .prose .mono-num{font-family:var(--font-mono);font-size:15px;white-space:nowrap} .src{font-size:13px;color:var(--ink-4);margin:-.6rem 0 1.6rem} /* ===================================================== cards ============= */ .grid{display:grid;gap:24px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{background:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm)} .card h3,.card h4{margin-bottom:8px} .card p{color:var(--ink-2);font-size:15px;margin-bottom:0} .card-sand{background:var(--c-surface);box-shadow:none} .card .ico-cap{margin-bottom:16px} /* comparativa si/no */ .compare{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .comp-yes{background:var(--c-green-tint);border-radius:var(--r-card);padding:28px} .comp-no{background:var(--c-terra-200);border-radius:var(--r-card);padding:28px} .comp-yes h4{color:var(--c-green-800)} .comp-no h4{color:var(--c-terra-700)} .comp-yes ul,.comp-no ul{margin:0;padding-left:1.15em;font-size:15px} .comp-yes li{color:var(--c-green-800)} .comp-no li{color:var(--c-terra-700)} /* callout numerado */ .callout{background:var(--c-white-warm);border-radius:var(--r-lg);padding:36px;border:1px solid var(--line-soft)} .callout ol{list-style:none;margin:0;padding:0;counter-reset:c} .callout li{counter-increment:c;display:flex;gap:16px;align-items:flex-start;margin-bottom:18px;font-size:16px;color:var(--ink-2)} .callout li:last-child{margin-bottom:0} .callout li::before{content:counter(c);flex:none;width:30px;height:30px;border-radius:50%;background:var(--c-terra);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;font-family:var(--font-mono)} /* timeline 3 pasos */ .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .tl-step .num{width:38px;height:38px;border-radius:12px;background:var(--c-green-tint);color:var(--c-green-800);display:grid;place-items:center;font-family:var(--font-mono);font-weight:500;margin-bottom:14px} .tl-step h4{margin-bottom:6px} .tl-step p{color:var(--ink-2);font-size:15px;margin:0} /* aviso terracota */ .notice{background:var(--c-notice-bg);border:1px solid rgba(198,113,57,.35);border-radius:20px;padding:22px 26px;margin:0 0 1.6rem} .notice h4{color:var(--c-terra-700);font-size:15px;margin-bottom:6px} .notice p{font-size:15px;color:var(--ink-2);margin:0} .notice p+p{margin-top:.7rem} /* cifra destacada */ .stat{font-family:var(--font-display);font-size:clamp(38px,5vw,56px);line-height:1;color:var(--c-terra)} .stat-unit{font-family:var(--font-body);font-weight:800;font-size:20px;color:var(--c-terra)} /* ================================================ banda oscura ========== */ .dark{background:var(--c-green-900);color:var(--c-bg);position:relative;overflow:hidden} .dark::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#A3D17F 0 2px,transparent 2px 14px);opacity:.12;pointer-events:none} .dark > *{position:relative} .dark h2,.dark h3,.dark h4{color:var(--c-bg)} .dark p{color:var(--sand-2)} .dark a{color:var(--c-green-light)} .dark .tl-step .num{background:rgba(163,209,127,.18);color:var(--c-green-light)} .dark .panel{background:rgba(245,234,216,.08);border-radius:var(--r-card);padding:26px} .dark .grid-3{gap:32px} /* ================================================ comparador ============ */ .offers{display:flex;flex-direction:column;gap:16px} .offer{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; border:1.5px solid rgba(32,30,29,.16);border-radius:var(--r-card);padding:26px 28px;background:transparent} .offer--top{border:2px solid var(--c-green);background:var(--c-white-warm)} .offer-flag{position:absolute;top:-12px;left:24px;background:var(--c-green);color:#fff;border-radius:var(--r-pill);padding:5px 16px;font-size:12px;font-weight:700} .offer-main h4{margin-bottom:3px} .offer-main .sub{font-size:14px;color:var(--ink-4);margin:0 0 10px} .offer-tags{display:flex;gap:8px;flex-wrap:wrap} .offer-tags span{font-size:12px;border-radius:var(--r-pill);padding:4px 12px;background:var(--c-green-tint);color:var(--c-green-800)} .offer-num{text-align:right;flex:none} .offer-num .big{font-family:var(--font-mono);font-size:26px;font-weight:500} .offer-num .big span{font-family:var(--font-body);font-size:14px;font-weight:400;color:var(--ink-4)} .offer-num .det{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);margin:2px 0 0} /* ===================================================== FAQ ============== */ .faq{max-width:820px} .faq-item{border-bottom:1px solid var(--line)} .faq-item:first-child{border-top:1px solid var(--line)} .faq-q{width:100%;background:none;border:0;padding:22px 44px 22px 0;text-align:left;cursor:pointer;position:relative; font-family:var(--font-body);font-weight:800;font-size:18px;line-height:1.35;color:var(--c-ink)} .faq-q::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-8px; border-right:2.5px solid var(--c-green);border-bottom:2.5px solid var(--c-green);transform:rotate(45deg);transition:transform 160ms ease} .faq-item.open .faq-q::after{transform:rotate(-135deg);margin-top:-3px} .faq-a{display:none;padding:0 0 22px;color:var(--ink-2)} .faq-item.open .faq-a{display:block} .faq-a p:last-child{margin-bottom:0} /* ===================================================== byline =========== */ .byline{display:flex;gap:16px;align-items:flex-start;background:var(--c-surface);border-radius:var(--r-card);padding:22px 26px;margin:48px 0 0;max-width:760px} .byline .av{width:46px;height:46px;flex:none;border-radius:50%;background:var(--c-green);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:20px} .byline .av-img{width:46px;height:46px;flex:none;border-radius:50%;object-fit:cover;background:var(--c-surface)} .byline p{margin:0;font-size:14px;color:var(--ink-2)} .byline .who{font-weight:700;color:var(--c-ink);font-size:15px} .byline .when{font-family:var(--font-mono);font-size:12px;color:var(--ink-4);margin-top:6px} /* ===================================================== relacionados ===== */ .related{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .related a{display:block;background:#fff;border-radius:var(--r-md);padding:18px 22px;text-decoration:none;color:var(--c-ink); font-weight:600;font-size:16px;box-shadow:var(--sh-sm);transition:background-color 140ms ease} .related a:hover{background:var(--c-green-tint-100);color:var(--c-ink);text-decoration:none} .related a small{display:block;font-weight:400;font-size:14px;color:var(--ink-4);margin-top:3px} /* ===================================================== CTA final ======== */ .finalcta{background:var(--c-green-900);border-radius:var(--r-lg);padding:56px 48px;text-align:center;position:relative;overflow:hidden} .finalcta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#A3D17F 0 2px,transparent 2px 14px);opacity:.12} .finalcta > *{position:relative} .finalcta h2{color:var(--c-bg);margin-bottom:14px} .finalcta p{color:var(--sand-2);max-width:560px;margin:0 auto 26px} .finalcta .fine{font-size:12px;color:var(--sand-4);margin:20px auto 0;max-width:520px} /* bloque Reclamea */ .reclamea{background:var(--c-green-tint);border-radius:var(--r-lg);padding:32px 36px;display:flex;gap:28px;align-items:center;flex-wrap:wrap} .reclamea div{flex:1 1 340px} .reclamea h3{color:var(--c-green-800);margin-bottom:8px} .reclamea p{color:var(--c-green-800);margin:0;font-size:16px} /* ===================================================== footer =========== */ .foot{background:var(--c-green-900);color:var(--sand-2);padding:64px 0 32px;margin-top:0} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px} .foot h5{font-family:var(--font-body);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-green-light);margin:0 0 16px} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:10px} .foot a{color:var(--sand-2);text-decoration:none;font-size:15px} .foot a:hover{color:var(--c-green-light);text-decoration:underline} .foot .about{font-size:15px;color:var(--sand-3);max-width:320px;margin:16px 0 0} .foot-legal{border-top:1px solid rgba(245,234,216,.14);padding-top:26px;font-size:13px;color:var(--sand-4);line-height:1.65} .foot-legal p{margin:0 0 10px;color:var(--sand-4)} .foot-legal strong{color:var(--c-bg);font-weight:700} /* ===================================================== solicitar ======== */ .form-page{padding:40px 0 72px} .form-shell{max-width:860px;margin:0 auto} .form-head{text-align:center;max-width:640px;margin:0 auto 34px} .form-head h1{font-size:clamp(30px,4vw,44px);margin-bottom:14px} .form-trust{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:0 0 32px;padding:0;list-style:none} .form-trust li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);font-weight:600;margin:0} .form-trust .ico{width:17px;height:17px;color:var(--c-green)} .form-box{background:#fff;border-radius:var(--r-lg);padding:12px;box-shadow:var(--sh-lg);min-height:520px} .form-box iframe{width:100%;min-height:520px;border:none;display:block;border-radius:var(--r-card)} .form-legal{max-width:700px;margin:28px auto 0;font-size:13px;line-height:1.65;color:var(--ink-4);text-align:center} .form-legal a{color:var(--ink-3)} /* ========================================= ejemplo representativo ======= */ .repex-box{background:var(--c-surface);border-radius:var(--r-card);padding:24px 28px;margin:0 0 1.6rem} .repex-box h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:10px} .repex-box p{margin:0;font-family:var(--font-mono);font-size:14px;line-height:1.7;color:var(--c-ink)} .repex-box .repex-note{font-family:var(--font-body);font-size:14px;color:var(--ink-2);margin-top:12px} .repex-inline{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--ink-3)} .simcard .repex{font-family:var(--font-mono);font-size:11px;line-height:1.6;text-align:left;color:var(--ink-4); border-top:1px solid var(--line-soft);padding-top:12px;margin-top:12px} .foot-legal .repex-inline{color:var(--sand-4);margin:0 0 10px} /* ============================================== banner de cookies ======= */ .cbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:var(--wrap);margin:0 auto; background:var(--c-white-warm);border:1px solid var(--line);border-radius:var(--r-card); box-shadow:var(--sh-lg);padding:18px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .cbar[hidden]{display:none} .cbar p{margin:0;flex:1 1 380px;font-size:14px;line-height:1.55;color:var(--ink-2)} .cbar-btns{display:flex;gap:10px;flex:none} .cbar .btn{font-size:15px;padding:11px 22px} .cbar .btn-secondary{padding:9.5px 20.5px} @media (max-width:560px){ .cbar{padding:16px;gap:14px} .cbar-btns{width:100%} .cbar-btns .btn{flex:1} } /* ===================================================== 404 ============== */ .p404{text-align:center;padding:110px 0} .p404 .nosi{font-size:64px} /* ===================================================== responsive ======= */ @media (max-width:900px){ .hero-grid,.grid-2,.grid-3,.grid-4,.compare,.timeline,.related{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr;gap:32px} .sec{padding:52px 0} .hero{padding:28px 0 44px} .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--c-bg);border-bottom:1px solid var(--line); flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;display:none} .nav-links.open{display:flex} .nav-links a{padding:12px 0;border-bottom:1px solid var(--line-soft)} .nav-links .btn{margin-top:14px;border-bottom:none} .nav-toggle{display:flex} .finalcta{padding:44px 24px} .callout,.simcard{padding:26px} .reclamea{padding:26px} .offer{flex-direction:column;align-items:flex-start} .offer-num{text-align:left} } @media (max-width:560px){ body{font-size:16px} .foot-grid{grid-template-columns:1fr} .btn{width:100%} .hero-cta{gap:12px} .nav-links .btn{width:100%} } /* ===================================================== motion =========== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} html{scroll-behavior:auto} } /* ===================================================== print ============ */ @media print{ .nav,.finalcta,.foot,.btn{display:none} body{background:#fff} }