/* ══════════════════════════════════════════════════════════════════════
   Kalkas — páginas de producto.

   Las cinco comparten esta hoja en vez de llevar cada una su copia, como
   hacen cotizador.html y las demás pantallas. Ahí el CSS va dentro del
   archivo porque cada pantalla es distinta; aquí las cinco son la misma
   página con otro contenido, y tenerlo cinco veces garantiza que se separen
   solas a la primera corrección.

   Mismos tokens que el resto del sitio: la identidad ya estaba decidida.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --c:#00A0E1; --m:#E5007D; --y:#FFED00; --k:#14120F;
  --muted:#6E6A63; --dim:#9C978E; --papel:#EFEDE7;
  --surf:#FFFFFF; --surf2:#F7F5F0; --borde:#DCD8CF;
  --ok:#2C6E49;
  --r:4px; --rlg:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);
  background-image:radial-gradient(circle at 1px 1px, rgba(20,18,15,.07) 1px, transparent 0);
  background-size:14px 14px;
  color:var(--k);font-family:Karla,ui-sans-serif,system-ui,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}

/* ── Encabezado ───────────────────────────────────────── */
header{border-bottom:2px solid var(--k);background:var(--surf);padding-block:16px;
  position:sticky;top:0;z-index:20}
.head-in{max-width:1000px;margin:0 auto;padding-inline:20px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marca{font-family:Anton,Impact,sans-serif;font-size:1.6rem;letter-spacing:.02em;
  line-height:1;margin:0;text-transform:uppercase;text-decoration:none;color:var(--k)}
.marca .k{color:var(--m)}
.marca small{display:block;font-family:Karla,sans-serif;font-size:.52rem;font-weight:700;
  letter-spacing:.2em;color:var(--muted);margin-top:4px}
nav{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
nav a{font-size:.84rem;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
nav a:hover{color:var(--k);border-color:var(--k)}
nav a:focus-visible,.btn:focus-visible,.otro:focus-visible{outline:2px solid var(--m);outline-offset:3px}

.btn{display:inline-block;cursor:pointer;font-family:Anton,sans-serif;font-size:.92rem;
  letter-spacing:.09em;text-transform:uppercase;padding:12px 22px;border:2px solid var(--k);
  border-radius:var(--r);background:var(--y);color:var(--k);text-decoration:none;
  box-shadow:4px 4px 0 var(--k);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--k)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--k)}
.btn-sm{padding:9px 16px;font-size:.8rem;box-shadow:3px 3px 0 var(--k)}
.btn-fan{background:var(--m);color:#fff}

.wrap{max-width:1000px;margin:0 auto;padding-inline:20px}
section{padding-block:52px}
h2{font-family:Anton,sans-serif;font-size:clamp(1.35rem,3.2vw,1.9rem);letter-spacing:.03em;
  text-transform:uppercase;margin:0 0 8px;text-wrap:balance}
.sub{color:var(--muted);margin:0 0 26px;max-width:62ch}
.eyebrow{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--m);margin:0 0 6px}

/* ── Miga de pan ──────────────────────────────────────── */
.miga{font-size:.8rem;color:var(--dim);padding-top:22px}
.miga a{color:var(--muted)}
.miga span{margin-inline:6px}

/* ── Portada del producto ─────────────────────────────── */
.hero{padding-block:26px 48px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px;align-items:center}
@media (max-width:840px){.hero-grid{grid-template-columns:1fr;gap:30px}}
.hero h1{font-family:Anton,sans-serif;font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.04;
  letter-spacing:.01em;text-transform:uppercase;margin:6px 0 14px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--m)}
.hero p.lead{font-size:1.05rem;max-width:48ch;margin:0 0 22px}
.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-cta .nota{font-size:.82rem;color:var(--muted)}

/* Lámina: la muestra dibujada mientras no haya foto. */
.lamina{background:var(--surf);border:2.5px solid var(--k);border-radius:var(--rlg);
  padding:26px;box-shadow:8px 8px 0 var(--k);display:grid;place-items:center;
  aspect-ratio:4/3}
.lamina-pie{margin-top:14px;text-align:center;font-family:'DM Mono',monospace;
  font-size:.7rem;letter-spacing:.06em;color:var(--dim)}

/* ── Ficha ────────────────────────────────────────────── */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.dato-caja{background:var(--surf);border:1.5px solid var(--k);border-radius:var(--rlg);
  padding:16px 18px;box-shadow:3px 3px 0 rgba(20,18,15,.10)}
.dato-caja .et{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.dato-caja .v{font-family:Anton,sans-serif;font-size:1.15rem;margin-top:5px;line-height:1.15}
.dato-caja p{margin:6px 0 0;font-size:.84rem;color:var(--muted)}

/* ── Precios ──────────────────────────────────────────── */
.tabla-caja{background:var(--surf);border:2px solid var(--k);border-radius:var(--rlg);
  box-shadow:6px 6px 0 var(--k);overflow:hidden}
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:460px}
th{font-family:Anton,sans-serif;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:right;padding:12px 14px;border-bottom:2px solid var(--k);font-weight:400}
th:first-child{text-align:left}
td{padding:11px 14px;border-bottom:1px solid var(--borde);text-align:right;
  font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
td:first-child{text-align:left;font-family:Karla,sans-serif}
tr:last-child td{border-bottom:0}
.ahorro{color:var(--ok);font-size:.8rem}
.pie-tabla{background:var(--surf2);padding:14px 16px;font-size:.84rem;color:var(--muted);
  border-top:2px solid var(--k)}

/* ── Para qué sirve / cuándo no ───────────────────────── */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.dos-col{grid-template-columns:1fr}}
.lista{list-style:none;padding:0;margin:0}
.lista li{padding:8px 0 8px 22px;border-bottom:1px dashed var(--borde);font-size:.92rem;position:relative}
.lista li:last-child{border-bottom:0}
.lista li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;
  border-radius:2px;background:var(--m)}
.lista.no li::before{background:var(--borde)}

/* ── Otros productos ──────────────────────────────────── */
.otros{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.otro{display:block;background:var(--surf);border:1.5px solid var(--k);border-radius:var(--rlg);
  padding:16px;text-decoration:none;color:var(--k);box-shadow:3px 3px 0 rgba(20,18,15,.10);
  transition:transform .12s,box-shadow .12s}
.otro:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(20,18,15,.16)}
.otro b{display:block;font-family:Anton,sans-serif;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:5px}
.otro span{font-size:.84rem;color:var(--muted)}

/* ── Cierre ───────────────────────────────────────────── */
.cierre{background:var(--k);color:#fff;border-radius:var(--rlg);padding:38px 30px;text-align:center;
  box-shadow:8px 8px 0 var(--m)}
.cierre h2{color:#fff;margin-bottom:10px}
.cierre p{color:#CFCAC1;max-width:46ch;margin:0 auto 22px}

footer{border-top:2px solid var(--k);background:var(--surf);padding-block:24px;margin-top:52px}
.pie{max-width:1000px;margin:0 auto;padding-inline:20px;display:flex;gap:16px;
  flex-wrap:wrap;align-items:center;font-size:.83rem;color:var(--muted)}
.pie a{color:var(--muted)}
.pie .der{margin-left:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── Comparativa con la competencia ───────────────────────
   La columna de Kalkas va marcada porque si no, el lector tiene que buscar
   cuál es la suya entre cuatro. Los precios de los demás son datos con
   fecha, no adornos: si envejecen, la tabla deja de ser comparativa y pasa
   a ser una afirmación falsa sobre otro negocio. */
.tabla-caja.comparativa th:nth-child(2),
.tabla-caja.comparativa td:nth-child(2){
  background:#FFF3F9;
  border-inline:2px solid var(--m);
}
.tabla-caja.comparativa thead th:nth-child(2){
  color:var(--m);border-top:2px solid var(--m)
}
.tabla-caja.comparativa tbody tr:last-child td:nth-child(2){
  border-bottom:2px solid var(--m)
}
.tabla-caja.comparativa td b{font-weight:600}
.tabla-caja.comparativa .cu{
  display:block;font-size:.76rem;color:var(--muted);margin-top:2px
}
.tabla-caja.comparativa .ahorra{color:var(--ok);font-weight:600}
.fecha-dato{
  font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.06em;
  color:var(--dim);margin:0 0 14px
}