/* ¿Firmo o no firmo? — sistema de diseño (fuentes propias, sin servicios externos) */
@font-face{font-family:"Bricolage";src:url(/bricolage-700.woff) format("woff");font-weight:500 900;font-display:swap}
@font-face{font-family:"Instrument";src:url(/instrument-400.woff) format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:"Instrument";src:url(/instrument-700.woff) format("woff");font-weight:600 900;font-display:swap}
@font-face{font-family:"Lora";src:url(/lora.woff) format("woff");font-weight:400 700;font-display:swap}

:root{
  --navy:#0C2422; --navy-2:#10342F; --ink:#0B7A57; --ink-dark:#075E43; --sky:#E3F4EC;
  --bg:#F5F2EA; --bg2:#ECE6D8; --card:#FFFFFF; --line:#E4DDCC; --line-2:#D3C9B2; --text:#14211F; --muted:#5B6662;
  --yellow:#FFD84D; --peach:#34D399; --red:#D92D3A; --orange:#E2700A; --amber:#C99A00; --green:#18915A;
  --display:"Bricolage",system-ui,sans-serif; --body:"Instrument",system-ui,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif; --stamp:"Special Elite","Courier New",monospace;
  --surface:#FFFFFF; --heading:#0C2422; --notice:#14332C; --okbg:#F1FAF5; --okline:#CDEBDB;
  --r:14px; --shadow:0 1px 2px rgba(18,21,38,.06),0 12px 32px -18px rgba(18,21,38,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.03em;font-weight:700;line-height:1.08}
.wrap{max-width:76rem;margin:0 auto;padding:0 1.5rem}
.mark{background:linear-gradient(transparent 14%,var(--yellow) 14%,var(--yellow) 88%,transparent 88%);padding:0 .1em;color:#14211F;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:700 1rem var(--body);text-decoration:none;cursor:pointer;border-radius:12px;padding:.85rem 1.3rem;border:1.5px solid transparent;transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--ink),#0E9467);color:#fff;box-shadow:0 10px 24px -12px rgba(11,122,87,.85)}
.btn-primary:hover{background:linear-gradient(135deg,var(--ink-dark),var(--ink));transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--navy);border-color:rgba(255,255,255,.4)}
.btn-light:hover{background:var(--sky)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:#EDF8F3}
.btn-sm{padding:.45rem .8rem;font-size:.9rem;border-radius:9px}
.btn-block{width:100%}
button:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}

/* barra superior */
.top{position:sticky;top:0;z-index:30;background:rgba(245,242,234,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top.dark{background:rgba(12,36,34,.82);border-bottom-color:rgba(255,255,255,.08)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:4.2rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:900;font-size:1.12rem;color:var(--text);text-decoration:none;white-space:nowrap}
.top.dark .brand{color:#fff}
.logo{width:2.2rem;height:2.2rem;border-radius:11px;flex:none;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%230B7A57'/><stop offset='1' stop-color='%2314A374'/></linearGradient></defs><rect width='64' height='64' rx='18' fill='url(%23g)'/><circle cx='27' cy='27' r='14' fill='none' stroke='white' stroke-width='5'/><path d='M37.5 37.5 49 49' stroke='white' stroke-width='7' stroke-linecap='round'/><path d='M20.5 27.5l4.5 4.5 8.5-9' fill='none' stroke='%23FFD84D' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/cover no-repeat;box-shadow:0 6px 16px -8px rgba(11,122,87,.8)}
.top nav{display:flex;align-items:center;gap:1.4rem}
.top nav a:not(.btn){color:var(--muted);text-decoration:none;font-size:.96rem}
.top.dark nav a:not(.btn){color:#C3DED6}
.top nav a:not(.btn):hover{color:var(--text)} .top.dark nav a:not(.btn):hover{color:#fff}
@media (max-width:860px){.top nav a:not(.btn){display:none}.brand{font-size:1rem}}

/* tarjetas y formularios */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.field{display:block;margin:0 0 1rem}
.field>span,.label{display:block;font-weight:700;font-size:.93rem;margin-bottom:.35rem}
.field small{display:block;color:var(--muted);font-size:.85rem;margin-top:.3rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=search],select,textarea{width:100%;font:400 1rem var(--body);color:var(--text);background:var(--surface);border:1.5px solid var(--line-2);border-radius:10px;padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(11,122,87,.14)}
textarea{resize:vertical;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;border:0;margin:0;padding:0}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{border:1.5px solid var(--line-2);padding:.5rem .95rem;border-radius:999px;cursor:pointer;font-size:.95rem;background:var(--surface);transition:all .15s}
.chips label:hover{border-color:var(--ink)}
.chips input:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
.chips input:focus-visible+label{outline:3px solid var(--ink);outline-offset:2px}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;color:var(--muted)}
.check input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--ink)}
.fine{font-size:.88rem;color:var(--muted)}
.err{color:var(--red);font-weight:700}
.badge{display:inline-flex;align-items:center;gap:.3rem;font:700 .76rem var(--body);padding:.18rem .55rem;border-radius:6px;white-space:nowrap}
.b-alta{background:#FDE7E9;color:#A51D2A} .b-media{background:#FFF1DE;color:#9A4E05} .b-baja{background:#E3F5EC;color:#11663F}
.b-info{background:var(--sky);color:var(--ink-dark)} .b-warn{background:#FFF6CC;color:#7A5D00} .b-ok{background:#E3F5EC;color:#11663F}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1rem;background:rgba(12,36,34,.55);backdrop-filter:blur(3px);animation:fade .18s ease}
.modal .dialog{background:var(--surface);color:var(--text);border-radius:18px;max-width:34rem;width:100%;max-height:calc(100vh - 2rem);overflow:auto;padding:1.6rem;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);animation:rise .22s cubic-bezier(.2,.9,.3,1)}
.modal h2{font-size:1.45rem;margin-bottom:.4rem}
.modal .close{float:right;border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
.grid2{display:grid;gap:0 1rem}
@media (min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
@keyframes fade{from{opacity:0}} @keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* pie */
footer.site{background:var(--navy);color:#A9C7BE;padding:3rem 0 2.5rem;margin-top:0;font-size:.93rem}
footer.site a{color:#DDEFE9;text-decoration:none} footer.site a:hover{text-decoration:underline}
footer.site .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
footer.site nav{display:flex;flex-wrap:wrap;gap:1.2rem}
footer.site .arr{font-weight:700;color:#fff}

/* legales */
.legal{max-width:46rem;margin:0 auto;padding:2.5rem 1.5rem 4rem}
.legal h1{font-size:clamp(2rem,5vw,2.8rem);color:var(--heading);margin-bottom:1rem}
.legal h2{font-size:1.2rem;margin:2rem 0 .5rem}
.legal p,.legal li{color:var(--text)}
.todo{background:#FFF1A8;color:#3a2d00;padding:0 .25rem;border-radius:3px}
@media (max-width:600px){.top.dark nav .btn{display:none}}

/* modo oscuro: sigue al sistema o a la elección guardada */
:root[data-theme=dark]{--bg:#0B1716;--bg2:#0F1E1C;--card:#13221F;--surface:#13221F;--line:#213431;--line-2:#2D4541;--text:#E6E9F4;--muted:#A3ACC7;--sky:#12332B;--heading:#F1F3FA;--notice:#DCE3FA;--okbg:#10291C;--okline:#1F5537;--ink:#34D399;--ink-dark:#10B981;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0B1716;--bg2:#0F1E1C;--card:#13221F;--surface:#13221F;--line:#213431;--line-2:#2D4541;--text:#E6E9F4;--muted:#A3ACC7;--sky:#12332B;--heading:#F1F3FA;--notice:#DCE3FA;--okbg:#10291C;--okline:#1F5537;--ink:#34D399;--ink-dark:#10B981;color-scheme:dark}}
:root[data-theme=dark] .top:not(.dark){background:rgba(11,23,22,.85)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .top:not(.dark){background:rgba(11,23,22,.85)}}
:root[data-theme=dark] .b-alta,:root[data-theme=dark] .b-media,:root[data-theme=dark] .b-baja,:root[data-theme=dark] .b-warn,:root[data-theme=dark] .b-ok{filter:saturate(1.1) brightness(.95)}
@media print{:root,:root[data-theme=dark]{--bg:#fff!important;--bg2:#fff!important;--card:#fff!important;--surface:#fff!important;--text:#14211F!important;--muted:#5B6662!important;--line:#E9E4DA!important;--heading:#0C2422!important;--sky:#E3F4EC!important;--okbg:#F1FAF5!important;--notice:#14332C!important}}

/* interruptor de tema */
.themebtn{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:10px;border:1.5px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer;flex:none}
.top.dark .themebtn{border-color:rgba(255,255,255,.25);color:#DDEFE9}
.themebtn:hover{color:var(--ink);border-color:var(--ink)}
.themebtn .sun{display:none} :root[data-theme=dark] .themebtn .sun{display:block} :root[data-theme=dark] .themebtn .moon{display:none}

/* microinteracciones */
.card.feature,.card.step-card,.card.plan,.card.model,.card.fcard{transition:transform .18s ease,box-shadow .18s ease}
.card.feature:hover,.card.step-card:hover,.card.plan:hover,.card.model:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(18,21,38,.06),0 22px 44px -22px rgba(18,21,38,.35)}
.btn-primary:hover{box-shadow:0 10px 24px -10px rgba(11,122,87,.85)}

/* esqueletos de carga */
.skel{border-radius:10px;background:linear-gradient(90deg,var(--line) 25%,var(--bg) 37%,var(--line) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* aparición al hacer scroll (solo con JS y sin preferencia de menos movimiento) */
@media (prefers-reduced-motion:no-preference){.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.js .reveal.in{opacity:1;transform:none}}
/* sello del veredicto */
.vstamp{display:inline-block;font:900 clamp(1.1rem,2.6vw,1.5rem)/1 var(--display);letter-spacing:.03em;padding:.5rem .9rem;border:4px solid currentColor;border-radius:12px;transform:rotate(-6deg);margin:.2rem 0 .8rem}
@media (prefers-reduced-motion:no-preference){.vstamp{animation:slam .55s cubic-bezier(.2,1.6,.4,1) .9s both}}
@keyframes slam{0%{opacity:0;transform:rotate(-6deg) scale(2.2)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}

/* formularios emergentes: en el celular, panel desde abajo con el botón principal siempre visible */
.modal .stick{position:sticky;bottom:-1.6rem;margin:0 -1.6rem -1.6rem;padding:.9rem 1.6rem 1.2rem;background:var(--surface);border-top:1px solid var(--line);z-index:2}
@media (max-width:560px){
  .modal{place-items:end center;padding:0}
  .modal .dialog{border-radius:22px 22px 0 0;max-height:92dvh;padding:1.4rem 1.25rem 1.25rem}
  .modal .stick{bottom:-1.25rem;margin:0 -1.25rem -1.25rem;padding:.8rem 1.25rem calc(1rem + env(safe-area-inset-bottom,0px))}
  @media (prefers-reduced-motion:no-preference){.modal .dialog{animation:sheet .28s cubic-bezier(.2,.9,.3,1)}}
}
@keyframes sheet{from{transform:translateY(100%)}}
