/* Tiza: tokens y componentes compartidos.
   Fuente de verdad del sistema de diseño (UX-UI.md, "Sistema de diseño"). Salen de la portada que hizo el usuario
   (inicio.html). Un solo tema claro, a propósito: el pie es la única superficie oscura.
   Ajustes de contraste frente a la portada original: verde #4E7A38 -> #4C7837 y marcador de campo #8A847C -> #78716A. */

:root{
  /* Color */
  --ink:#1C1A17;        /* texto, botones, píldora Pro */
  --muted:#6A635B;      /* texto secundario */
  --line:#E6E0D8;       /* filetes y bordes de tarjeta */
  --line-2:#DCD5CA;     /* filete sobre crema */
  --cream:#F4F1EC;      /* fondos suaves: baldosas, Pro, newsletter */
  --paper:#FFFFFF;
  --red:#B23A1E;        /* pimentón: franja, "Agotado", errores, foco */
  --red-soft:#FBEAE5;   /* fondo de error */
  --yellow:#F2B43C;     /* mostaza: palito del logo, insignias, aviso */
  --yellow-soft:#FFF1B8;/* fondo de lo dudoso y de [PENDIENTE] */
  --yellow-ink:#5A4500; /* texto sobre --yellow-soft */
  --green:#4C7837;      /* aceituna: ticks y confirmaciones */
  --off:#8A847C;        /* interruptor apagado (3,7:1 sobre blanco) */
  --placeholder:#78716A;
  --foot:#CFC8BE;       /* texto del pie oscuro */
  --foot-line:#3A3632;

  /* Tipografía */
  --sans:"Parkinsans", ui-sans-serif, system-ui, sans-serif;
  --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-display:clamp(40px, 3.6vw + 10px, 62px); /* cierre */
  --fs-h1:clamp(32px, 2.6vw + 11px, 48px);
  --fs-h2:clamp(28px, 1.9vw + 12px, 39px);
  --fs-h3:26px;
  --fs-h4:21px;
  --fs-lead:clamp(17px, .3vw + 15px, 19px);
  --fs-body:17px;
  --fs-ui:16.5px;
  --fs-small:15px;
  --fs-xs:13.5px;
  --fs-pill:12.5px;

  /* Espaciado (base 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:56px; --s9:76px; --s10:110px;
  --wrap:min(1232px, calc(100% - 32px));

  /* Radios */
  --r-xs:4px;     /* etiquetas [PENDIENTE], idiomas */
  --r-sm:10px;    /* tarjetitas dentro de baldosas, campos de texto largos */
  --r-md:12px;    /* baldosas, opiniones, avisos */
  --r-lg:18px;    /* tarjetas de plan y paneles */
  --r-device:44px;
  --r-pill:999px; /* botones, píldoras, campos de una línea */

  /* Sombras: solo para separar algo que flota sobre crema */
  --sh-1:0 2px 8px rgba(28,26,23,.08);
  --sh-2:0 2px 6px rgba(28,26,23,.12);
  --sh-3:0 12px 32px rgba(28,26,23,.16); /* hojas y avisos que flotan */

  /* Movimiento */
  --ease:.35s ease;
  color-scheme:light;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{width:var(--wrap);margin:0 auto}
[hidden]{display:none!important}
::selection{background:var(--yellow);color:var(--ink)}
input,textarea{caret-color:var(--red)}
.num{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Títulos de sección */
.h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.022em;line-height:1.08;text-align:center;text-wrap:balance}
.lead{font-size:var(--fs-lead);color:var(--muted);text-align:center;margin-top:16px;text-wrap:balance}

/* Botones: píldora negra (principal) y con borde (secundario) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 28px;border-radius:var(--r-pill);font:600 17px/1 var(--sans);white-space:nowrap;border:0;cursor:pointer;transition:background var(--ease),color var(--ease)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#3A3632}
.btn-line{border:2px solid var(--ink);color:var(--ink);background:#fff}
.btn-line:hover{background:var(--cream)}
.btn-text{background:none;color:var(--ink);padding:0 4px;height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.btn-sm{height:44px;padding:0 24px;font-size:16px}
.btn-lg{height:56px;padding:0 34px;font-size:18px}
.btn[disabled],.btn.is-disabled{background:#E6E0D8;color:var(--muted);border-color:#E6E0D8;cursor:not-allowed}

/* Píldoras y etiquetas */
.pill{display:inline-block;font-style:normal;font-size:var(--fs-pill);font-weight:700;line-height:1.3;padding:3px 9px;border-radius:var(--r-pill);background:var(--cream);color:var(--ink);white-space:nowrap}
.pill.pro{background:var(--ink);color:#fff}
.badge{display:inline-block;font-size:13px;font-weight:700;background:var(--yellow);color:var(--ink);padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap}
.pend{display:inline-block;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--yellow-ink);background:var(--yellow-soft);padding:3px 9px;border-radius:var(--r-xs)}
.tick{flex:none;margin-top:5px}

/* Etiquetas de estado (panel) */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--cream);color:var(--ink)}
.chip.ok{background:#E8F0E3;color:#2F4F22}
.chip.warn{background:var(--yellow-soft);color:var(--yellow-ink)}
.chip.red{background:var(--red-soft);color:#8A2C16}

/* Logo: el palito de tiza, mostaza e inclinado, delante de "tiza" */
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:30px;letter-spacing:-.025em;line-height:1}
.logo i{display:block;width:7px;height:23px;border-radius:3px;background:var(--yellow);transform:skewX(-16deg) rotate(4deg)}

/* Sello "Hecho con Tiza" de las cartas gratis */
.sello{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-family:var(--sans)}
.sello .logo{font-size:15px;gap:5px;color:var(--ink)}
.sello .logo i{width:3px;height:11px;border-radius:2px}

/* Franja de arriba: una sola oferta */
.strip{background:var(--red);color:#fff;font-size:15px;font-weight:500;padding:11px 16px}
.strip .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;text-align:center}
.strip .tag{background:var(--yellow);color:var(--ink);font-weight:700;font-size:12.5px;padding:4px 10px;border-radius:var(--r-pill)}
.strip b,.strip .go{font-weight:700}
.strip .go{display:inline-flex;align-items:center;gap:6px}
.strip .sep{opacity:.55}

/* Navegación */
.nav{border-bottom:1px solid var(--line);position:relative;background:#fff}
.nav .wrap{height:var(--s9);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .left{display:flex;align-items:center;gap:44px;min-width:0}
.nav .links{display:flex;gap:30px;font-size:var(--fs-ui);font-weight:600}
.nav .links a{padding:6px 0}
.nav .links a[aria-current]{box-shadow:inset 0 -2px 0 var(--ink)}
.nav .right{display:flex;align-items:center;gap:26px;font-size:var(--fs-ui);font-weight:600}
.nav .lang{display:inline-flex;align-items:center;gap:7px;font-size:15px}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.drawer{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);z-index:5;padding:8px 16px 20px}
.drawer a{display:block;padding:12px 0;font-size:18px;font-weight:600;border-bottom:1px solid var(--line)}

/* Baldosa crema con una miniatura dentro */
.tile{width:132px;height:132px;flex:none;border-radius:var(--r-md);background:var(--cream);display:flex;align-items:center;justify-content:center;position:relative}
.t-card{background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-1)}

/* Tarjeta de plan */
.plan{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;background:#fff;min-width:0}
.plan.pro{border:2px solid var(--ink);background:var(--cream)}
.plan .top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:30px}
.plan h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em}
.plan .d{font-size:var(--fs-ui);color:var(--muted);margin-top:6px;line-height:1.45}
.plan .amt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:24px}
.plan .amt b{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan .amt s{font-size:26px;font-weight:700;color:var(--muted)}
.plan .amt span{font-size:16px;font-weight:600}
.plan .per{font-size:15px;color:var(--muted);margin-top:8px}
.plan .btn{width:100%;margin-top:24px}
.plan ul{margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.plan.pro ul{border-top-color:var(--line-2)}
.plan li{display:flex;gap:12px;font-size:var(--fs-ui);line-height:1.45}
.plan li.all{font-weight:700}

/* Lista de ticks fuera de los planes */
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;font-size:var(--fs-ui);line-height:1.45}

/* Pregunta con filete arriba */
.q{border-top:1px solid var(--line);padding:30px 0 24px}
.q h3{font-size:18.5px;font-weight:700}
.q p{font-size:var(--fs-body);line-height:1.45;color:var(--muted);margin-top:10px}

/* Campos */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .lbl{font-size:15px;font-weight:600}
.input{height:52px;border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:0 20px;font:400 17px var(--sans);color:var(--ink);background:#fff;width:100%}
.input::placeholder{color:var(--placeholder)}
textarea.input{height:auto;min-height:112px;border-radius:var(--r-md);padding:14px 20px;line-height:1.45;resize:vertical}
select.input{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%231C1A17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 20px center;padding-right:48px}
.input:hover{border-color:#3A3632}
.input:focus{outline:2px solid var(--red);outline-offset:2px}
.input[disabled]{background:var(--cream);border-color:var(--line);color:var(--muted)}
.field .help{font-size:var(--fs-xs);color:var(--muted);padding-left:20px}
.field.is-error .input{border-color:var(--red);background:var(--red-soft)}
.field.is-error .help{color:var(--red);font-weight:600}

/* Casilla */
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.check .box{flex:none;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px}
.check .box.on{background:var(--ink)}
.check a{text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* Interruptor (Agotado, idiomas, ajustes) */
.switch{flex:none;display:inline-block;width:46px;height:28px;border-radius:var(--r-pill);background:var(--off);position:relative}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left var(--ease)}
.switch.on{background:var(--red)}
.switch.on::after{left:21px}
.switch.ok.on{background:var(--ink)}

/* Avisos */
.notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);background:var(--cream);font-size:15.5px;line-height:1.45}
.notice.warn{background:var(--yellow-soft);color:var(--yellow-ink)}
.notice.err{background:var(--red-soft);color:#7A2814}
.notice b{color:var(--ink)}
.toast{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:#fff;border-radius:var(--r-md);padding:14px 18px;font-size:15.5px;box-shadow:var(--sh-3)}
.toast button{background:none;border:0;color:var(--yellow);font:700 15.5px var(--sans);cursor:pointer;padding:6px 0}

/* Aviso de cookies de la web: franja abajo, Aceptar y Rechazar iguales */
.cookies{background:#fff;border-top:1px solid var(--line);box-shadow:var(--sh-3);padding:20px 0}
.cookies .wrap{display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap}
.cookies p{flex:1 1 520px;font-size:15px;line-height:1.5}
.cookies p a{text-decoration:underline;font-weight:600}
.cookies .acts{display:flex;gap:10px;flex-wrap:wrap}
.cookies .acts .btn{min-width:132px}

/* Newsletter (franja crema del pie) */
.news{background:var(--cream);padding:40px 0}
.news .wrap{display:flex;align-items:center;gap:24px 36px;flex-wrap:wrap}
.news .ic{width:64px;height:64px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;flex:none}
.news .txt{flex:1 1 420px;min-width:0;max-width:560px}
.news h3{font-size:25px;font-weight:800;letter-spacing:-.012em}
.news .txt p{font-size:var(--fs-ui);line-height:1.45;color:var(--muted);margin-top:6px}
.news form{margin-left:auto;flex:1 1 420px;max-width:536px;min-width:0}
.news .fr{display:flex;gap:10px}
.news .input{flex:1;min-width:0}
.news .btn{height:52px;padding:0 26px;font-size:18px}
.news small{display:block;font-size:var(--fs-xs);color:var(--muted);margin:12px 0 0 20px;line-height:1.45}
.news small a{color:var(--ink);font-weight:600}

/* Pie oscuro */
.foot{background:var(--ink);color:#fff;padding:56px 0 0}
.foot .cols{display:grid;grid-template-columns:308px 229px 229px 229px minmax(0,1fr);gap:32px 0}
.foot .logo{color:var(--cream)}
.foot .tagl{font-size:20px;font-weight:700;line-height:1.3;margin-top:28px;letter-spacing:-.01em}
.foot h3,.foot h4{font-size:16px;font-weight:700}
.foot ul{margin:20px 0 0;display:flex;flex-direction:column;gap:12px}
.foot li{font-size:var(--fs-ui);color:var(--foot)}
.foot li.on{color:#fff;font-weight:700}
.foot .bar{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid var(--foot-line);margin-top:52px;padding:22px 0 30px;font-size:15px;color:var(--foot)}

/* Cierre centrado (el tagline) */
.final{text-align:center;padding:124px 0 110px}
.final h2{font-size:var(--fs-display);font-weight:800;letter-spacing:-.032em;line-height:.98}
.final .sub{font-size:clamp(17px, .4vw + 14px, 20px);margin-top:24px}
.final .btn{margin-top:30px}
.final .under{font-size:15px;color:var(--muted);margin-top:16px}

/* Anchos menores */
@media (max-width:1240px){
  .foot .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot .cols > div:first-child{grid-column:1 / -1}
}
@media (max-width:960px){
  .nav .links,.nav .lang{display:none}
  .menu-btn{display:inline-flex}
  .nav .right{gap:12px}
  .plan{padding:26px 22px}
}
@media (max-width:640px){
  .strip{font-size:13.5px}
  .strip .sep,.strip .left{display:none}
  .logo{font-size:26px}
  .news .fr{flex-wrap:wrap}
  .news .btn{width:100%}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cookies .acts{width:100%}
  .cookies .acts .btn{flex:1;min-width:0;padding:0 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}