/* Cruto · sistema visual compartido (landing, app y páginas legales) */
/* Marca Cruto: Cobalto sobre azul noche. El cobalto es la acción principal; el rojo coral marca lo que se quita. */
:root{
  --cobalto:#3D5AFE; --noche:#0A0F1E; --hielo:#EEF2FF; --coral:#FF5C7A;
  --f:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif; --display:"Bricolage Grotesque","Geist",ui-sans-serif,system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  /* claro (por defecto) */
  --bg:#F4F6FB; --bg2:#ECEFF7; --panel:#FFFFFF; --panel2:#E6EAF4; --line:#DCE1EE; --line2:#C7CFE2;
  --ink:#0B1020; --muted:#4E5A78; --dim:#6B7693;
  --acc:#3D5AFE; --acc-ink:#FFFFFF; --acc-txt:#3552F0; --acc-soft:rgba(61,90,254,.09);
  --cut:#D92D55; --cut-soft:rgba(217,45,85,.10); --keep:#1B2440; --idea:#9A5B00; --ok:#11845A;
  --nav:rgba(244,246,251,.82); --shadow:0 1px 2px rgba(11,16,32,.05),0 12px 32px -16px rgba(11,16,32,.18);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0F1E; --bg2:#0E1528; --panel:#121A30; --panel2:#18223D; --line:#223052; --line2:#2E3E66;
  --ink:#EEF2FF; --muted:#A3AECB; --dim:#7582A6;
  --acc:#3D5AFE; --acc-ink:#FFFFFF; --acc-txt:#8A9CFF; --acc-soft:rgba(138,156,255,.14);
  --cut:#FF5C7A; --cut-soft:rgba(255,92,122,.14); --keep:#DDE4FF; --idea:#F5A524; --ok:#4ADE9A;
  --nav:rgba(10,15,30,.8); --shadow:none;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A0F1E; --bg2:#0E1528; --panel:#121A30; --panel2:#18223D; --line:#223052; --line2:#2E3E66;
  --ink:#EEF2FF; --muted:#A3AECB; --dim:#7582A6;
  --acc:#3D5AFE; --acc-ink:#FFFFFF; --acc-txt:#8A9CFF; --acc-soft:rgba(138,156,255,.14);
  --cut:#FF5C7A; --cut-soft:rgba(255,92,122,.14); --keep:#DDE4FF; --idea:#F5A524; --ok:#4ADE9A;
  --nav:rgba(10,15,30,.8); --shadow:none;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit}
img,svg,video,canvas{max-width:100%}
.w{max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.w{padding:0 28px}}

/* Navegación */
.nav{position:sticky;top:0;z-index:20;background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .w{display:flex;align-items:center;gap:18px;height:64px}
.marca{display:flex;align-items:center;gap:8px;font:800 23px/1 var(--display);letter-spacing:-.045em;text-decoration:none;color:var(--ink)}
.marca img,.marca svg{width:28px;height:28px;flex:none}
.nav-l{display:none;gap:4px;margin-left:8px}
.nav-l a{color:var(--muted);text-decoration:none;font-size:15px;padding:6px 12px;border-radius:9px}
.nav-l a:hover{color:var(--ink);background:var(--panel2)}
@media (min-width:820px){.nav-l{display:flex}}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.tema{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.tema:hover{color:var(--ink);border-color:var(--line2)}
.tema svg{width:17px;height:17px}

/* Botones */
.btn{appearance:none;border:0;border-radius:12px;padding:12px 18px;font:600 15px/1 var(--f);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,background .15s,border-color .15s;color:var(--ink);white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn-a{background:var(--acc);color:var(--acc-ink)}
.btn-a:hover{filter:brightness(1.08)}
.btn-a:active{transform:translateY(1px)}
.btn-g{background:transparent;border:1px solid var(--line2)}
.btn-g:hover{border-color:var(--muted)}
.btn-lg{padding:16px 24px;font-size:16px;border-radius:14px}
.btn-sm{padding:9px 13px;font-size:14px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}

.eti{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-txt);background:var(--acc-soft);border:1px solid color-mix(in srgb,var(--acc-txt) 25%,transparent);padding:5px 11px;border-radius:999px}
/* palabra destacada de un titular: en Rojo Corte (antes cursiva) */
.serif{color:var(--acc-txt)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.mono{font-family:var(--mono)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}

.pie{border-top:1px solid var(--line);margin-top:80px;padding:32px 0 40px;color:var(--dim);font-size:14px}
.pie .w{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.pie a{color:var(--muted);text-decoration:none}
.pie a:hover{color:var(--ink)}
.pie .marca{font-size:17px;color:var(--ink)}
.pie .marca img{width:22px;height:22px}
.pie .sp{margin-left:auto}
@media (max-width:640px){.pie .sp{margin-left:0;width:100%}}

/* Interruptor mensual / anual */
.periodo{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.periodo button{border:0;background:transparent;color:var(--muted);font:600 14px var(--f);padding:8px 16px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.periodo button em{font:500 11px var(--mono);font-style:normal;letter-spacing:.04em;color:var(--ok)}
.periodo button[aria-checked="true"]{background:var(--ink);color:var(--bg)}
.periodo button[aria-checked="true"] em{color:inherit;opacity:.8}

/* Tarjetas compactas de planes (editor y cuenta) */
.pms{display:grid;gap:10px}
@media (min-width:720px){.pms.tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pm{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:8px;align-content:start;background:var(--panel)}
.pm.dest{border:1.5px solid var(--acc-txt)}
.pm-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pm-cab>b{font:700 17px var(--f)}
.pm-precio{color:var(--dim);font-size:13px}
.pm-precio b{font:800 22px var(--display);letter-spacing:-.03em;color:var(--ink)}
.pm-nota{font-size:12px;color:var(--dim)}
.pm ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.pm li{display:flex;gap:7px;font-size:13px;color:var(--muted)}
.pm li svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--acc-txt)}
.pm .btn{width:100%;margin-top:4px}

/* Campos de formulario compartidos */
.campo-email{border:1px solid var(--line2);background:var(--bg2);color:var(--ink);border-radius:12px;padding:12px 14px;font:16px var(--f);min-width:0;flex:1 1 220px}
.campo-email:focus{border-color:var(--acc-txt);outline:none}