/* DECIDE360 — estilos. Tokens y reglas en DESIGN.md. */
@font-face{font-family:"Sora";src:url("/fonts/sora.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --azul:#0B3C9A;--azul-hover:#082E78;--azul-suave:#E4ECF8;
  --petroleo:#076D8D;
  --verde:#037A50;--verde-suave:#E3F2EA;
  --ambar:#9A5A00;--ambar-suave:#FBEFD9;
  --rojo:#A3262A;
  --fondo:#FAFBF9;--fondo-2:#EEF3F1;--superficie:#FFFFFF;
  --texto:#13212C;--texto-2:#4B5A63;--borde:#D9E1DD;--borde-campo:#758680;--foco:#1D5FD6;
  --rojo-suave:#F8E4E4;--whatsapp:#0F7A3C;
  --pie-fondo:#13212C;--pie-texto:#D3DCD8;--pie-borde:#33434F;--pie-legal:#B5C1BC;
  --r-control:4px;--r-caja:8px;
  --sec-y:6rem;--ancho:80rem;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
@media (max-width:48rem){:root{--sec-y:4rem}}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Inter",system-ui,sans-serif;font-size:1rem;line-height:1.55;color:var(--texto);background:var(--fondo);font-variant-numeric:tabular-nums}
img,svg{display:block;max-width:100%}
a{color:var(--azul);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:var(--r-control)}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 1rem}
@media (min-width:48rem){.wrap{padding:0 2rem}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:1rem;top:-4rem;background:var(--superficie);padding:.75rem 1rem;z-index:30}
.saltar:focus{top:1rem}

h1,h2,h3{font-family:"Sora",sans-serif;font-weight:800;letter-spacing:-0.02em;line-height:1.08}
h1{font-size:clamp(2.25rem,1.4rem + 3.4vw,4rem)}
h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.5rem)}
h3{font-size:1.25rem;line-height:1.25}
.lead{font-size:1.125rem;color:var(--texto-2);max-width:36rem}
@media (min-width:64rem){.lead{font-size:1.25rem}}
.nota{font-size:.875rem;color:var(--texto-2)}
.sec{padding:var(--sec-y) 0}
.sec-cab{max-width:44rem}
.sec-cab .lead{margin-top:1rem}

/* Cabecera */
.cab{position:sticky;top:0;z-index:20;background:var(--superficie);border-bottom:1px solid var(--borde)}
.cab .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem}
.cab .marca{display:inline-flex;align-items:center;min-height:2.75rem}
.cab .marca img{height:2.5rem;width:auto}
.nav{display:flex;gap:2rem;font-weight:500;align-items:center}
.nav a{color:var(--texto);text-decoration:none;min-height:2.75rem;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.nav a:not(.btn):hover{color:var(--azul)}}
.menu-btn{display:none}
@media (max-width:63.99rem){
  .js .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid var(--borde);border-radius:var(--r-control);background:var(--superficie);color:var(--texto);cursor:pointer}
  .nav{display:flex;position:static;flex-direction:column;align-items:stretch;padding:0 0 1rem;width:100%}
  .cab .wrap{flex-wrap:wrap}
  .js .cab .wrap{flex-wrap:nowrap}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--superficie);border-bottom:1px solid var(--borde);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1rem 1rem}
  .js .nav.abierta{display:flex}
  .nav a{border-bottom:1px solid var(--borde)}
  .nav .btn{margin-top:1rem;border:0}
}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.5rem;border-radius:var(--r-control);background:var(--azul);color:#fff;font:inherit;font-weight:600;text-decoration:none;border:0;cursor:pointer;text-align:center;transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.btn:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--azul-hover)}}
.nav .btn{color:#fff;min-height:2.75rem;padding:0 1rem;font-size:.9375rem}
.link{font-weight:600;min-height:3rem;display:inline-flex;align-items:center}
.acciones{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:2rem}

/* Tarjetas, insignias, íconos */
.caja{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-caja)}
.insig{display:inline-flex;align-items:center;font-size:.875rem;font-weight:600;padding:.25rem .625rem;border-radius:var(--r-control)}
.insig.ok{background:var(--verde-suave);color:var(--verde)}
.insig.co{background:var(--ambar-suave);color:var(--ambar)}
.insig.al{background:var(--azul-suave);color:var(--azul)}
.ico{width:1.25rem;height:1.25rem;flex:none}

/* Inicio */
.hero{padding:4rem 0 var(--sec-y)}
.hero .wrap{display:grid;gap:3rem;align-items:center}
@media (min-width:64rem){.hero .wrap{grid-template-columns:1.05fr .95fr;gap:4rem}}
.hero h1{max-width:13ch}
.hero .lead{margin-top:1.5rem}

.exp{padding:1.5rem;position:relative}
@media (min-width:48rem){.exp{padding:2rem}}
.exp-cab{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding-bottom:1.25rem;border-bottom:1px solid var(--borde)}
.exp-cab small{display:block;color:var(--texto-2);font-size:.875rem}
.exp-cab b{font-family:"Sora";font-size:1.125rem}
.exp-pedido{text-align:right}
.exp-pedido b{font-size:1.5rem;white-space:nowrap}
.reglas{list-style:none;padding:1.25rem 0;display:grid;gap:.875rem;border-bottom:1px solid var(--borde)}
.reglas li{display:flex;gap:.75rem;align-items:flex-start}
.reglas li span{flex:1}
.reglas li em{font-style:normal;color:var(--texto-2);font-size:.9375rem}
.reglas .ok .ico{color:var(--verde)}
.reglas .alerta .ico{color:var(--ambar)}
.decision{padding-top:1.25rem;display:grid;gap:1rem}
.oferta{background:var(--ambar-suave);border-radius:var(--r-control);padding:1rem}
.oferta .insig{background:var(--superficie)}
.oferta b{font-family:"Sora";font-size:1.125rem;display:block;margin-top:.25rem}
.firma{padding-right:6rem;display:flex;align-items:center;gap:.75rem;color:var(--texto-2);font-size:.9375rem}
.firma svg{width:6rem;height:2.25rem;color:var(--azul);flex:none}
.firma strong{color:var(--texto);display:block}
.sello{position:absolute;right:1.25rem;bottom:1.25rem;width:5.5rem;height:5.5rem;border:2px solid var(--verde);border-radius:50%;display:grid;place-items:center;text-align:center;color:var(--verde);font-weight:700;font-size:.75rem;line-height:1.2;transform:rotate(-8deg)}
@media (max-width:30rem){.exp-cab{flex-direction:column}.exp-pedido{text-align:left}.firma{padding-right:0;flex-wrap:wrap}.sello{position:static;margin-top:.5rem}}
@media (prefers-reduced-motion:no-preference){
  .reglas li{animation:paso 320ms var(--ease-out) both}
  .reglas li:nth-child(2){animation-delay:250ms}
  .reglas li:nth-child(3){animation-delay:500ms}
  .reglas li:nth-child(4){animation-delay:750ms}
  .firma path{stroke-dasharray:260;stroke-dashoffset:260;animation:trazo 700ms var(--ease-out) 1150ms forwards}
  .sello{animation:sello 260ms var(--ease-out) 1900ms both}
}
@keyframes paso{from{opacity:.35}to{opacity:1}}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes sello{from{opacity:0;transform:rotate(-8deg) scale(1.15)}to{opacity:1;transform:rotate(-8deg) scale(1)}}

/* Franja de garantía */
.franja{background:var(--superficie);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.franja .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;padding-top:1.5rem;padding-bottom:1.5rem;color:var(--texto-2);font-size:.9375rem}
.franja strong{color:var(--texto)}

/* Políticas */
.politicas .wrap{display:grid;gap:2.5rem;align-items:start}
@media (min-width:64rem){.politicas .wrap{grid-template-columns:1fr 1fr;gap:4rem}}
.politicas h2{max-width:18ch}
.politicas .lead{margin-top:1.25rem}
.puntos{list-style:none;padding:0;margin-top:2rem;display:grid;gap:.75rem;color:var(--texto-2)}
.puntos li{display:flex;gap:.625rem}
.puntos .ico{color:var(--verde);margin-top:.15rem}
.panel{overflow:hidden}
.panel-cab{padding:1.25rem 1.5rem;border-bottom:1px solid var(--borde);display:grid;gap:.875rem}
.panel-cab p{font-weight:600}
.camino{display:flex;padding:.25rem;background:var(--fondo-2);border-radius:var(--r-caja);gap:.25rem}
.camino button{flex:1;font:inherit;font-weight:600;font-size:.9375rem;min-height:2.75rem;padding:0 .75rem;border:0;border-radius:var(--r-control);background:transparent;color:var(--texto-2);cursor:pointer}
.camino button[aria-selected="true"]{background:var(--superficie);color:var(--azul);box-shadow:inset 0 0 0 2px var(--azul)}
@media (max-width:30rem){.camino button{font-size:.875rem;padding:0 .5rem}}
.cuerpo{padding:1.5rem}
.cuerpo h3{font-size:1.125rem;line-height:1.3}
.cuerpo>p{color:var(--texto-2);font-size:.9375rem;margin-top:.25rem}
[role="tabpanel"]{animation:fundido 180ms var(--ease-out)}
@keyframes fundido{from{opacity:0}to{opacity:1}}
.tabla{width:100%;border-collapse:collapse;margin-top:1.25rem;font-size:.9375rem}
.tabla th,.tabla td{text-align:left;padding:.75rem 0;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla th{font-weight:500;color:var(--texto-2);padding-right:1rem}
.tabla td{font-weight:600;text-align:right}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}
@media (max-width:30rem){.tabla tr{display:grid}.tabla th{border-bottom:0;padding-bottom:0}.tabla td{text-align:left;padding-top:.125rem}}
.res{margin-top:1.25rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;padding:1rem;background:var(--fondo-2);border-radius:var(--r-control);font-size:.9375rem}
.pasos{list-style:none;padding:0;display:grid;gap:1rem;counter-reset:p}
.cuerpo .pasos{margin-top:1.25rem}
.pasos li{display:grid;grid-template-columns:2rem 1fr;gap:.75rem}
.pasos li::before{counter-increment:p;content:counter(p);width:2rem;height:2rem;border-radius:50%;background:var(--fondo-2);color:var(--petroleo);font-weight:700;display:grid;place-items:center;font-size:.875rem}
.pasos b{display:block}
.pasos span{color:var(--texto-2);font-size:.9375rem}

/* Cómo funciona */
.como{background:var(--superficie);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.como .grid{display:grid;gap:3rem;margin-top:3rem}
@media (min-width:64rem){.como .grid{grid-template-columns:1fr 1fr;gap:4rem}}
.como .pasos{gap:1.75rem}
.como .pasos li{grid-template-columns:2.5rem 1fr;gap:1rem}
.como .pasos li::before{width:2.5rem;height:2.5rem;font-size:1rem}
.como .pasos b{font-family:"Sora";font-size:1.125rem;margin-bottom:.25rem}
.como .pasos span{font-size:1rem}
.venta{padding:1.5rem;background:var(--fondo)}
@media (min-width:48rem){.venta{padding:2rem}}
.venta h3{font-size:1.125rem}
.venta>p{color:var(--texto-2);margin-top:.25rem;font-size:.9375rem}
.linea{list-style:none;padding:0;margin-top:1.5rem}
.linea li{display:grid;grid-template-columns:3.5rem 1.5rem 1fr;gap:.75rem;padding-bottom:1.25rem;position:relative}
.linea time{font-weight:600;color:var(--texto-2);font-size:.9375rem}
.linea .pto{width:1rem;height:1rem;border-radius:50%;border:2px solid var(--petroleo);background:var(--superficie);margin-top:.25rem;position:relative;z-index:1}
.linea li:not(:last-child)::after{content:"";position:absolute;left:calc(3.5rem + .75rem + .5rem - 1px);top:1.4rem;bottom:0;width:2px;background:var(--borde)}
.linea li.fin .pto{background:var(--verde);border-color:var(--verde)}
.linea b{display:block}
.linea span{color:var(--texto-2);font-size:.9375rem}

.entrega{list-style:none;padding:0;margin-top:1.5rem;display:grid;gap:1.125rem}
.entrega li{display:flex;gap:.75rem}
.entrega .ico{color:var(--verde);margin-top:.15rem}
.entrega b{display:block}
.entrega span{color:var(--texto-2);font-size:.9375rem}
.empezar{margin-top:1.25rem;color:var(--texto-2)}
.empezar a{font-weight:600}

/* Resultados */
.casos .grid{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:48rem){.casos .grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.caso{padding:1.5rem}
.caso h3{margin:.75rem 0 .5rem}
.caso p{color:var(--texto-2)}

/* Comparación */
.comparar{background:var(--superficie);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.tabla-wrap{margin-top:2.5rem;overflow-x:auto;border:1px solid var(--borde);border-radius:var(--r-caja)}
.cmp{width:100%;min-width:40rem;border-collapse:collapse;font-size:.9375rem}
.cmp th,.cmp td{padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--borde);vertical-align:top}
.cmp thead th{font-family:"Sora";font-weight:700;background:var(--fondo)}
.cmp thead th.nos{background:var(--azul-suave);color:var(--azul)}
.cmp tbody th{font-weight:500;color:var(--texto-2);width:34%}
.cmp td.nos{font-weight:600}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
@media (max-width:48rem){
  .tabla-wrap{border:0;overflow:visible}
  .cmp{min-width:0}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tbody tr{display:block;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-caja);margin-bottom:1rem;padding:.5rem 0}
  .cmp tbody th{display:block;width:auto;padding:.75rem 1.25rem .25rem;border:0;font-family:"Sora";font-weight:700;color:var(--texto)}
  .cmp tbody td{display:grid;grid-template-columns:8.5rem 1fr;gap:.75rem;padding:.625rem 1.25rem;border:0;border-top:1px solid var(--borde)}
  .cmp tbody td::before{content:attr(data-col);font-weight:600;color:var(--texto-2)}
  .cmp tbody td.nos::before{color:var(--azul)}
}
.si,.no{display:inline-flex;gap:.5rem;align-items:flex-start}
.si .ico{color:var(--verde)}
.no .ico{color:var(--texto-2)}

/* Seguridad */
.seguridad .grid{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:48rem){.seguridad .grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
.seg{padding:1.5rem;display:grid;grid-template-columns:2.5rem 1fr;gap:1rem}
.seg .ico{width:2.5rem;height:2.5rem;color:var(--petroleo)}
.seg h3{margin-bottom:.5rem}
.seg p{color:var(--texto-2)}
.isos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.isos span{font-size:.875rem;font-weight:600;border:1px solid var(--borde);border-radius:var(--r-control);padding:.25rem .625rem}

/* Preguntas */
.preguntas{background:var(--superficie);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.faq{margin-top:2.5rem;max-width:52rem;border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{list-style:none;cursor:pointer;min-height:3.5rem;padding:1rem 2.5rem 1rem 0;font-weight:600;font-size:1.0625rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{position:absolute;right:.25rem;top:1.15rem;width:1.25rem;height:1.25rem;color:var(--texto-2);transition:transform 180ms var(--ease-out)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 0 1.25rem;color:var(--texto-2);max-width:44rem}

/* Contacto */
.contacto .wrap{display:grid;gap:3rem;align-items:start}
@media (min-width:64rem){.contacto .wrap{grid-template-columns:.85fr 1.15fr;gap:4rem}}
.contacto h2{max-width:16ch}
@media (max-width:63.99rem){.contacto .wrap{display:flex;flex-direction:column;gap:1.5rem}.contacto .intro>.lead{margin-top:0}.contacto .intro{display:contents}.contacto .intro>h2{order:1}.contacto .intro>.lead{order:2}.contacto .form{order:3}.contacto .que-pasa{order:4;margin-top:0}.contacto .wa-info{order:5;margin-top:0}}
.contacto .lead{margin-top:1.25rem}
.que-pasa{margin-top:2rem}
.que-pasa h3{font-size:1.0625rem;margin-bottom:1rem}
.wa-info{margin-top:2rem;padding:1.25rem;display:flex;gap:1rem;align-items:flex-start}
.wa-info .ico{width:1.75rem;height:1.75rem;color:var(--verde)}
.form{padding:1.5rem;display:grid;gap:1.25rem}
@media (min-width:48rem){.form{padding:2rem;grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:.375rem}
.campo.ancho{grid-column:1/-1}
.campo label{font-weight:600;font-size:.9375rem}
.campo .opc{font-weight:400;color:var(--texto-2)}
.campo input,.campo select{font:inherit;min-height:3rem;padding:0 .875rem;border:1px solid var(--borde-campo);border-radius:var(--r-control);background:var(--superficie);color:var(--texto);width:100%}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%234B5A63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem;padding-right:2.5rem}
.campo input:focus-visible,.campo select:focus-visible{outline:3px solid var(--foco);outline-offset:1px}
.campo [aria-invalid="true"]{border-color:var(--rojo)}
.err{color:var(--rojo);font-size:.875rem}
.err:empty{display:none}
.consent{grid-column:1/-1;display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;align-items:start;font-size:.9375rem;color:var(--texto-2)}
.consent input{width:1.5rem;height:1.5rem;margin:0;accent-color:var(--azul)}
.consent .err{grid-column:2}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .btn{grid-column:1/-1;width:100%}
.estado{grid-column:1/-1;padding:1rem;border-radius:var(--r-control);font-size:.9375rem}
.estado:empty{display:none}
.estado.ok{background:var(--verde-suave);color:var(--texto)}
.estado.mal{background:var(--rojo-suave);color:var(--texto)}
.estado a{font-weight:600}
.btn[disabled]{opacity:.7;cursor:progress}

/* Pie */
.pie{background:var(--pie-fondo);color:var(--pie-texto);padding:3.5rem 0 2rem;font-size:.9375rem}
.pie a{color:#fff}
.pie .grid{display:grid;gap:2rem}
@media (min-width:48rem){.pie .grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie .logo-pie{background:#fff;border-radius:var(--r-caja);padding:.5rem .75rem;display:inline-block}
.pie .logo-pie img{height:2.25rem;width:auto}
.pie h2{font-family:"Inter";font-size:1rem;font-weight:600;letter-spacing:0;color:#fff;margin-bottom:.75rem}
.pie ul{list-style:none;padding:0;display:grid;gap:.5rem}
.pie .legal a,.pie ul a{display:inline-flex;align-items:center;min-height:2.75rem}
.pie ul{gap:0!important}
.pie .legal{align-items:center;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--pie-borde);display:flex;flex-wrap:wrap;gap:.5rem 2rem;font-size:.875rem;color:var(--pie-legal)}
.pie :focus-visible{outline-color:#fff}

/* WhatsApp flotante */
.wa-flot{position:fixed;right:1rem;bottom:1rem;z-index:25;display:inline-flex;align-items:center;gap:.5rem;min-height:3.25rem;padding:0 1.125rem 0 .875rem;border-radius:999px;background:var(--whatsapp);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 6px 20px rgba(19,33,44,.22);transition:transform 160ms var(--ease-out)}
.wa-flot svg{width:1.5rem;height:1.5rem}
.wa-flot:active{transform:scale(0.97)}
@media (max-width:63.99rem){.js .wa-flot{opacity:0;pointer-events:none;transition:opacity 180ms var(--ease-out)}.js .wa-flot.visible{opacity:1;pointer-events:auto}}
@media (max-width:30rem){.wa-flot .wa-txt{display:none}.wa-flot{padding:0;width:3.25rem;justify-content:center}}

/* Páginas legales */
.legal-pag{padding:4rem 0 var(--sec-y)}
.legal-pag .wrap{max-width:48rem}
.legal-pag h1{font-size:clamp(2rem,1.5rem + 2vw,2.75rem)}
.legal-pag h2{font-size:1.25rem;margin:2.25rem 0 .75rem;letter-spacing:-0.01em}
.legal-pag p,.legal-pag li{color:var(--texto-2)}
.legal-pag ul{padding-left:1.25rem;display:grid;gap:.375rem}
.legal-pag p+p{margin-top:.75rem}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}