/* Kadantar · identidad del sitio (kadantar.com)
   Luz, papel y tinta: fondo claro, mucho aire, un índigo de confianza y un
   acento cálido. Nada de la paleta oscura de la app del tren, que tiene su
   propia imagen. El modo oscuro se mantiene, pero con azul profundo, no negro.

   Decisiones de lectura:
   - Texto principal casi negro sobre blanco roto (contraste alto).
   - Un solo color de acción (índigo) para que el botón no compita con nada.
   - Nada de animaciones de opacidad: el texto nunca se mide a medio fundir. */

:root{
  color-scheme:light;
  --papel:#FBFBFD;
  --papel-2:#F3F5FA;
  --tarjeta:#FFFFFF;
  --tinta:#0F172A;
  --tenue:#5A6478;
  --linea:#E4E7EF;
  --marca:#4F46E5;
  --marca-oscura:#4338CA;
  --marca-suave:#EEF0FF;
  --marca-texto:#FFFFFF;
  --calido:#B45309;
  --calido-suave:#FEF3C7;
  --ok:#0F7A46;
  --radio:22px;
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 12px 32px -18px rgba(16,24,40,.28);
}

@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --papel:#0B1020;
    --papel-2:#101731;
    --tarjeta:#141C31;
    --tinta:#E9EDF7;
    --tenue:#9BA6BE;
    --linea:#243050;
    --marca:#8B93FF;
    --marca-oscura:#A5ABFF;
    --marca-suave:#1B2350;
    --marca-texto:#0B1020;
    --calido:#FBBF24;
    --calido-suave:#3A2A08;
    --ok:#4ADE80;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--marca);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--marca);
  outline-offset:3px;
  border-radius:8px;
}
img,svg{max-width:100%}

.envoltorio{max-width:860px;margin:0 auto;padding:20px 22px 52px}

/* ------------------------------------------------------------- cabecera */
.cabecera{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  padding:6px 0 16px;
}
.marca{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--tinta);
  min-width:0;
}
.marca-icono{flex:none;display:block;border-radius:10px}
.marca-texto{display:block;min-width:0}
.marca-nombre{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.marca-bajada{display:block;font-size:12.5px;color:var(--tenue);line-height:1.3}
.menu{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:14.5px}
.menu a{
  color:var(--tenue);
  text-decoration:none;
  padding:8px 10px;
  border-radius:9px;
}
.menu a:hover{color:var(--tinta);background:var(--papel-2)}
.menu a[aria-current="page"]{color:var(--tinta);font-weight:650;background:var(--papel-2)}

/* ----------------------------------------------------------------- hero */
.hero{padding:34px 0 10px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
  padding:5px 12px;
  border-radius:999px;
  background:var(--marca-suave);
  color:var(--marca-oscura);
  font-size:12.5px;
  font-weight:650;
  letter-spacing:.01em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);
  flex:none;
}
.hero h1{
  margin:0 0 12px;
  font-size:clamp(30px,7vw,44px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
  max-width:19ch;
  text-wrap:balance;
}
.hero p{
  margin:0;
  font-size:clamp(16px,4.4vw,19px);
  line-height:1.55;
  color:var(--tenue);
  max-width:48ch;
}

h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tenue);
  font-weight:700;
  margin:38px 0 14px;
}
h2::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--linea);
}

/* --------------------------------------------------------- garantías */
.garantias{
  list-style:none;
  margin:26px 0 0;
  padding:18px;
  display:grid;
  gap:14px 18px;
  background:var(--papel-2);
  border-radius:18px;
}
@media (min-width:640px){ .garantias{grid-template-columns:repeat(3,1fr)} }
.garantia{display:flex;gap:10px;align-items:flex-start}
.garantia svg{flex:none;margin-top:2px}
.garantia b{display:block;font-size:14px;line-height:1.3}
.garantia span{display:block;font-size:13.5px;color:var(--tenue);line-height:1.4}

/* ------------------------------------------------------------ tarjeta app */
.app{
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:22px;
  box-shadow:var(--sombra);
}
.app-cabecera{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:start}
@media (min-width:600px){
  .app-cabecera{grid-template-columns:auto 1fr auto;align-items:center}
}
.app-icono{
  flex:none;
  width:52px;height:52px;
  border-radius:14px;
  display:grid;place-items:center;
  background:#E9FBF0;
  border:1px solid #C9F0DA;
}
@media (prefers-color-scheme:dark){
  .app-icono{background:#0F2A1E;border-color:#1D4534}
}
.app-textos{min-width:0}
.app-nombre{
  margin:0 0 5px;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:750;
}
.app-desc{margin:0 0 12px;font-size:15px;color:var(--tenue);max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--papel-2);
  color:var(--tenue);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.chip-ok{background:var(--calido-suave);color:var(--calido)}
.app-accion{grid-column:1 / -1;align-self:start}
@media (min-width:600px){
  .app-accion{grid-column:auto;align-self:center}
}
@media (max-width:599px){
  .app-accion .boton{width:100%;justify-content:center}
}

.boton{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  padding:0 22px;
  border-radius:13px;
  background:var(--marca);
  color:var(--marca-texto);
  font:inherit;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .15s ease;
}
.boton:hover{background:var(--marca-oscura)}
.boton svg{display:block;flex:none}

/* -------------------------------------------------------- más información */
.detalle{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.detalle summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--linea);
  border-radius:11px;
  background:var(--tarjeta);
  color:var(--tinta);
  font-size:14px;
  font-weight:650;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.detalle summary:hover{background:var(--papel-2)}
.detalle summary::-webkit-details-marker{display:none}
.detalle summary::after{
  content:"";
  width:8px;height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .15s ease;
}
.detalle[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.detalle[open] summary{margin-bottom:14px}
.detalle-cuerpo{background:var(--papel-2);border-radius:14px;padding:16px 18px}
.detalle-cuerpo > :first-child{margin-top:0}
.detalle-cuerpo > :last-child{margin-bottom:0}
.detalle-cuerpo p,.detalle-cuerpo li{color:var(--tenue);font-size:14.5px}
.detalle-cuerpo ul{margin:8px 0;padding-left:20px}
.detalle-cuerpo li{margin:4px 0}
.detalle-cuerpo b{color:var(--tinta)}

/* ------------------------------------------------------------ publicidad
   El bloque de AdSense va al final de la portada. Se reserva el alto típico
   del formato adaptable para que la carga del anuncio no empuje el contenido;
   si no se llena, un script mínimo oculta todo el aviso. */
.anuncio{
  margin-top:34px;
  padding:14px 16px 16px;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--tarjeta);
}
.anuncio[hidden]{display:none}
.anuncio-etiqueta{
  margin:0 0 10px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tenue);
}
.anuncio-caja{min-height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.anuncio-caja ins{width:100%}

/* ----------------------------------------------------------------- pie */
.pie{
  margin-top:44px;
  padding-top:20px;
  border-top:1px solid var(--linea);
  font-size:13.5px;
  color:var(--tenue);
}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.pie a{color:var(--tenue);text-decoration:none}
.pie a:hover{color:var(--tinta);text-decoration:underline}
.pie p{margin:0}

/* --------------------------------------------------- páginas internas */
.pagina{padding-top:26px;max-width:720px}
.pagina h1{
  margin:0 0 10px;
  font-size:clamp(26px,6vw,34px);
  line-height:1.12;
  letter-spacing:-.03em;
  font-weight:800;
}
.pagina-intro{font-size:17px;color:var(--tenue);margin:0 0 22px;max-width:58ch}
.pagina h2{margin:30px 0 8px}
.pagina h2::after{display:none}
.pagina p{color:var(--tenue);margin:0 0 11px;max-width:68ch}
.pagina p b,.pagina li b{color:var(--tinta)}
.pagina ul,.pagina ol{margin:0 0 12px;padding-left:20px}
.pagina li{color:var(--tenue);margin:5px 0;max-width:66ch}
.pagina code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;
  background:var(--papel-2);
  border-radius:5px;
  padding:1px 5px;
}

.volver{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:16px;
  font-size:13.5px;
  color:var(--tenue);
  text-decoration:none;
  border:1px solid var(--linea);
  background:var(--tarjeta);
  border-radius:999px;
  padding:6px 14px;
}
.volver:hover{color:var(--tinta);background:var(--papel-2)}

.datos{display:grid;gap:8px;margin:0 0 14px}
.dato{
  display:flex;
  flex-wrap:wrap;
  gap:2px 12px;
  align-items:baseline;
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:11px 14px;
  font-size:14.5px;
}
.dato b{font-size:13px;color:var(--tenue);font-weight:600;min-width:132px}
.dato span{color:var(--tinta);word-break:break-word}

.nota{
  background:var(--marca-suave);
  border-radius:12px;
  padding:12px 15px;
  font-size:13.5px !important;
  color:var(--tenue);
  max-width:68ch;
}

.correo-lista{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.correo-lista li{
  background:var(--tarjeta);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:12px 15px;
  margin:0;
}
.correo-lista b{display:block;font-size:13px;color:var(--tenue);font-weight:600;margin-bottom:1px}
.correo-lista a{word-break:break-word}

.salto{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.salto:focus{
  position:static;width:auto;height:auto;display:inline-block;
  padding:10px 14px;margin-bottom:10px;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;
}

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

/* Párrafos con mejor corte de línea donde el navegador lo soporte. */
.hero p,.pagina p,.app-desc{text-wrap:pretty}

/* Impresión: sin navegación ni botones, con las URLs visibles. */
@media print{
  .cabecera,.pie,.volver,.salto,.boton,.detalle summary,.anuncio{display:none !important}
  body{background:#fff;color:#000}
  .envoltorio{max-width:none;padding:0}
  .pagina{max-width:none;padding-top:0}
  .pagina p,.pagina li{color:#000;max-width:none}
  .nota,.datos .dato{background:#fff;border-color:#ccc}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#444}
}