/* ==================================================================== *
   despidoclaro.es
   Azul marino y ocre sobre papel. Fraunces + Inter.
   Modo claro y oscuro. Todo el color pasa por variables.
 * ==================================================================== */

:root{
  --marino:#12293d;
  --tinta:#1c2b35;
  --suave:#5b6f7c;
  --tenue:#8698a4;
  --linea:#e2e8ec;
  --papel:#ffffff;
  --crema:#f7f9fa;
  --ocre:#8a6520;        /* pasa AA con texto blanco (5,30:1) */
  --ocre-cl:#6e4f18;     /* mas oscuro al pasar por encima, no mas claro */
  --ocre-fondo:#fdf8ef;
  --alerta:#8a2b14;
  --alerta-fondo:#fdf0ec;
  --sombra:0 1px 2px rgba(18,41,61,.04), 0 10px 30px rgba(18,41,61,.06);
  --banda:#12293d;          /* oscura en los dos temas, a proposito */
  --banda-texto:#eef4f8;
  --banda-tenue:#9db4c4;
  --banda-linea:rgba(255,255,255,.14);
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --marino:#e8eef3;
    --tinta:#dbe4ea;
    --suave:#9fb2bf;
    --tenue:#7b8e9b;
    --linea:#25353f;
    --papel:#0e1a21;
    --crema:#15242c;
    --ocre:#d9a94f;
    --ocre-cl:#e8bc66;
    --ocre-fondo:#1f1a11;
    --alerta:#f0a48c;
    --alerta-fondo:#2a1712;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.contenedor{max-width:760px; margin:0 auto; padding-inline:22px}
.contenedor-ancho{max-width:1120px; margin:0 auto; padding-inline:22px}

/* ---------------- tipografía ---------------- */
h1,h2,h3,h4{
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  color:var(--marino);
  line-height:1.15;
  text-wrap:balance;
  margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
h1{font-size:clamp(2.05rem,4.6vw,3.1rem); font-weight:600; letter-spacing:-.022em; margin-bottom:.7em}
h2{font-size:clamp(1.42rem,2.7vw,1.85rem); font-weight:600; letter-spacing:-.015em; margin:2.2em 0 .7em}
h3{font-size:1.2rem; font-weight:600; margin:1.8em 0 .55em}

p{margin:0 0 1.25em}
a{color:var(--marino); text-decoration:underline; text-decoration-color:var(--ocre); text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{color:var(--ocre); text-decoration-color:var(--ocre)}

ul,ol{margin:0 0 1.25em; padding-left:1.3em}
li{margin-bottom:.4em; line-height:1.7}
li::marker{color:var(--ocre)}

strong{font-weight:600; color:var(--marino)}

.etiqueta{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ocre); margin-bottom:.9em;
}

/* ---------------- cabecera ---------------- */
.cabecera{
  border-bottom:1px solid var(--linea); background:var(--papel);
  position:sticky; top:0; z-index:40;
}
.cabecera-fila{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:15px}
.marca{
  font-family:Fraunces,Georgia,serif; font-size:1.28rem; font-weight:600;
  color:var(--marino); text-decoration:none; white-space:nowrap; letter-spacing:-.02em;
}
.nav{display:flex; gap:19px; align-items:center}
.nav a{
  font-size:.865rem; font-weight:500; color:var(--suave);
  text-decoration:none; white-space:nowrap;
}
.nav a:hover{color:var(--ocre)}
.menu-boton{
  display:none; background:none; border:0; font-size:1.45rem; color:var(--marino);
  cursor:pointer; padding:2px 6px; line-height:1;
}
@media(max-width:940px){
  .menu-boton{display:block}
  .nav{display:none; width:100%; flex-direction:column; gap:0; padding-top:6px; align-items:stretch}
  .nav.abierto{display:flex}
  .nav a{padding:12px 2px; border-top:1px solid var(--linea); font-size:.98rem; color:var(--tinta)}
  .cabecera-fila{flex-wrap:wrap}
}

/* ---------------- portada ---------------- */
/* El titular va sobre banda oscura y la calculadora en blanco encima:
   da estructura a la pagina y saca la herramienta del fondo. */
.hero{
  background:var(--banda);
  color:var(--banda-texto);
  padding-block:clamp(54px,7vw,92px);
  margin-bottom:clamp(30px,4vw,52px);
  position:relative;
}
.hero h1{color:#fff; letter-spacing:-.025em}
.hero .entradilla{color:var(--banda-tenue); max-width:44ch}
.hero .etiqueta{color:#d9a94f}
.hero .apunte{color:var(--banda-tenue)}
.hero .apunte a{color:var(--banda-texto); text-decoration-color:#d9a94f}
.hero .apunte a:hover{color:#fff}
.hero-rejilla{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:clamp(30px,4vw,60px); align-items:start}
@media(max-width:960px){.hero-rejilla{grid-template-columns:1fr; gap:34px}}
.hero h1{margin-bottom:.4em}
.entradilla{font-size:1.12rem; color:var(--suave); max-width:62ch; margin-bottom:2.2em; line-height:1.7}
.hero .entradilla{max-width:46ch}

.sellos{display:flex; flex-wrap:wrap; gap:8px; margin-top:1.4em}
.sello{
  font-size:.82rem; padding:7px 15px; border-radius:100px;
  border:1px solid var(--banda-linea); color:var(--banda-tenue);
  background:rgba(255,255,255,.05);
}
.sello b{color:#fff; font-weight:600}

/* ---------------- botones ---------------- */
.boton{
  display:inline-block; padding:13px 26px; border-radius:9px;
  background:var(--ocre); color:#fff; font-weight:600; font-size:.98rem;
  text-decoration:none; border:0; cursor:pointer; text-align:center;
}
.boton:hover{background:var(--ocre-cl); color:#fff; text-decoration:none}
.boton-sec{background:transparent; color:var(--marino); border:1px solid var(--linea)}
.boton-sec:hover{background:var(--crema); color:var(--marino); border-color:var(--ocre)}
.botonera{display:flex; gap:11px; flex-wrap:wrap; margin:1.5em 0}

/* franja tenue, para alternar el fondo entre secciones */
.franja{background:var(--crema); border-block:1px solid var(--linea); padding-block:clamp(34px,4.5vw,58px); margin-block:clamp(30px,4vw,52px)}
.franja > .contenedor > h2:first-child{margin-top:0}

/* ---------------- tarjetas ---------------- */
.rejilla{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:1.8em 0}
.rejilla-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.rejilla,.rejilla-3{grid-template-columns:1fr}}

.tarjeta{
  border:1px solid var(--linea); border-radius:13px; padding:21px 22px; background:var(--papel);
  display:flex; flex-direction:column; gap:7px;
}
.tarjeta h3{margin:0; font-family:Inter,sans-serif; font-size:1rem; letter-spacing:0}
.tarjeta p{margin:0; font-size:.91rem; color:var(--suave); line-height:1.55}
.tarjeta a{margin-top:auto; padding-top:10px; font-size:.89rem; font-weight:600; color:var(--ocre); text-decoration:none}
.tarjeta a:hover{text-decoration:underline}

/* ---------------- lo esencial ---------------- */
.esencial{
  border:1px solid var(--linea); border-left:3px solid var(--ocre);
  border-radius:0 12px 12px 0; padding:20px 24px; margin:0 0 2.4em;
  background:var(--crema);
}
.esencial h2{
  font-family:Inter,sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ocre); margin:0 0 .9em;
}
.esencial ul{margin:0; padding-left:1.1em}
.esencial li{margin-bottom:.45em; font-size:.97rem}
.esencial li:last-child{margin-bottom:0}

/* ---------------- normas citadas ---------------- */
.normas{margin:3em 0 0; padding-top:1.6em; border-top:1px solid var(--linea)}
.normas h2{
  font-family:Inter,sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tenue); margin:0 0 1em;
}
.normas ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.normas li{
  margin:0; font-size:.87rem; color:var(--suave);
  padding-left:1.4em; position:relative; line-height:1.5;
}
.normas li::before{
  content:"§"; position:absolute; left:0; top:0;
  color:var(--ocre); font-weight:700; font-size:.95rem;
}
.normas li b{color:var(--marino); font-weight:600}
.normas .nota{margin:1.2em 0 0; font-size:.81rem; color:var(--tenue); padding-left:0}

/* ---------------- seguir leyendo ---------------- */
.relacionados{margin:2.6em 0 0; padding-top:1.6em; border-top:1px solid var(--linea)}
.relacionados h2{
  font-family:Inter,sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tenue); margin:0 0 .9em;
}
.relacionados ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.relacionados li{margin:0}
.relacionados a{
  display:block; font-size:.98rem; font-weight:500; color:var(--marino);
  text-decoration:none; padding:11px 14px; border-radius:9px;
  background:var(--crema); border-left:3px solid transparent;
}
.relacionados a:hover{border-left-color:var(--ocre); color:var(--ocre)}

/* ---------------- artículo ---------------- */
.articulo{padding-block:clamp(46px,5.5vw,76px) clamp(34px,4.5vw,58px)}

/* La cabecera y el cuerpo son dos bloques distintos para poder meter la
   banda de la calculadora entre medias. Sin esto, cada uno aporta su
   propio margen y se abre un hueco muerto de unos 140 px justo debajo
   de la entradilla, que es lo primero que se ve al entrar. */
.cabecera-pagina{padding-bottom:0}
.cabecera-pagina .entradilla{margin-bottom:0}
.cabecera-pagina .esencial{margin:2.1em 0 0}
.cabecera-pagina + .articulo > :first-child{margin-top:1.9em}
.cabecera-pagina + .herramienta{margin-top:clamp(30px,3.5vw,46px)}
.fecha{
  font-size:.79rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tenue); margin:1em 0 1.8em;
}
.articulo figure{margin:0 0 2.4em}
.articulo img{width:100%; height:auto; border-radius:13px; display:block; aspect-ratio:16/9; object-fit:cover}

.aviso-legal{
  margin-top:2.4em; padding:15px 18px; background:var(--crema);
  border-radius:10px; font-size:.85rem; color:var(--suave); line-height:1.55;
}

/* ---------------- listado del blog ---------------- */
.entradas{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; margin:2.4em 0}
.entrada{display:flex; flex-direction:column; background:var(--papel)}
.entrada img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:11px}
.entrada .cuerpo{padding:16px 2px 0; display:flex; flex-direction:column; gap:7px; flex:1}

/* Mientras faltan fotos, la tarjeta sin imagen deja el mismo hueco que
   las demas: si no, en la rejilla unas empiezan arriba y otras abajo.
   Es un hueco declarado, no una foto de relleno. */
.entrada .sin-foto{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9; border-radius:11px;
  background:var(--crema); border:1px solid var(--linea);
}
.entrada .sin-foto span{
  font-family:Lora,Georgia,serif; font-size:2.6rem; line-height:1;
  color:var(--ocre); opacity:.45;
}
.entrada h2{font-size:1.16rem; margin:0; line-height:1.25}
.entrada h2 a{text-decoration:none}
.entrada h2 a:hover{color:var(--ocre)}
.entrada .fecha{margin:0}
.entrada p{font-size:.91rem; color:var(--suave); margin:0; line-height:1.55}
.entrada .enlace{margin-top:auto; padding-top:10px; font-size:.88rem; font-weight:600; color:var(--ocre); text-decoration:none}
.entrada .enlace:hover{text-decoration:underline}

/* ---------------- la calculadora, destacada ---------------- */
/* Es lo que la gente viene a buscar: se saca del flujo del texto y se le da
   una banda propia, de borde a borde, para que no compita con un parrafo. */
.herramienta{
  background:var(--crema);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding-block:clamp(30px,4vw,48px);
  margin-block:clamp(26px,3.5vw,44px);
}
.herramienta .cabecilla{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:1.1em;
}
.herramienta .etiqueta{margin:0}
.herramienta .apunte{font-size:.82rem; color:var(--tenue); margin:0}

/* la tarjeta del widget, con mas presencia dentro de la banda */
.caja-calculadora{margin:0}
.caja-calculadora .k-card,
.caja-calculadora .ctf-card,
.caja-calculadora .cpa-card{
  box-shadow:var(--sombra) !important;
  border-color:var(--linea) !important;
}

/* en la portada la calculadora va al lado del titular */
.hero .herramienta{background:none; border:0; padding:0; margin:0}
.hero .caja-calculadora .k-card{
  box-shadow:0 4px 12px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.24) !important;
  border:0 !important;
}

/* ---------------- llamada a la calculadora dentro de un articulo ---------------- */
.llamada{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:2.4em 0;
  padding:20px 24px; border-radius:13px;
  background:var(--crema); border:1px solid var(--linea); border-left:3px solid var(--ocre);
}
.llamada div{flex:1 1 300px}
.llamada strong{display:block; color:var(--marino); font-size:1.02rem; margin-bottom:3px}
.llamada span{font-size:.89rem; color:var(--suave)}
.llamada .boton{flex:0 0 auto}

/* ==================================================================== *
   Las tres calculadoras, con el mismo aspecto
   --------------------------------------------------------------------
   Cada widget se escribio por separado y traia su propia paleta y sus
   propias medidas: dos botones verdes y uno ocre, recuadros de distinto
   ancho y campos de distinta altura. Aqui se normalizan las tres.
   La especificidad sube a .caja-calculadora #id para ganarle al estilo
   que cada widget inyecta despues.
 * ==================================================================== */

.caja-calculadora #cid-app,
.caja-calculadora #ctf-app,
.caja-calculadora #cpa-app{
  --c:var(--ocre); --cd:var(--ocre-cl);
  --ink:var(--marino); --muted:var(--suave); --line:var(--linea);
  --paper:var(--crema); --card:var(--papel);

  --ctf-teal:var(--ocre); --ctf-teal-dk:var(--ocre-cl); --ctf-green:var(--marino);
  --ctf-ink:var(--marino); --ctf-muted:var(--suave); --ctf-line:var(--linea);
  --ctf-paper:var(--crema); --ctf-card:var(--papel); --ctf-warn:var(--crema);

  --cpa-teal:var(--ocre); --cpa-teal-dk:var(--ocre-cl); --cpa-green:var(--marino);
  --cpa-ink:var(--marino); --cpa-muted:var(--suave); --cpa-line:var(--linea);
  --cpa-paper:var(--crema); --cpa-card:var(--papel); --cpa-warn:var(--crema);

  max-width:100% !important;
  font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  padding:0 !important;
}

/* la tarjeta */
.caja-calculadora #cid-app .k-card,
.caja-calculadora #ctf-app .ctf-card,
.caja-calculadora #cpa-app .cpa-card{
  background:var(--papel); border:1px solid var(--linea); border-radius:14px;
  padding:clamp(20px,3vw,28px); box-shadow:var(--sombra);
}

/* etiquetas */
.caja-calculadora #cid-app label,
.caja-calculadora #ctf-app label,
.caja-calculadora #cpa-app label{
  font-family:Inter,sans-serif; font-size:.86rem; font-weight:600;
  color:var(--marino); margin-bottom:6px; letter-spacing:0;
}

/* campos */
.caja-calculadora #cid-app input, .caja-calculadora #cid-app select,
.caja-calculadora #ctf-app input, .caja-calculadora #ctf-app select,
.caja-calculadora #cpa-app input, .caja-calculadora #cpa-app select{
  font-family:Inter,sans-serif; font-size:1rem; padding:11px 12px;
  border:1px solid var(--linea); border-radius:9px; min-height:46px;
  /* background-color, no background: la forma corta borraria la flecha
     que el desplegable dibuja como imagen de fondo */
  background-color:var(--papel); color:var(--tinta);
}
.caja-calculadora #cid-app input:focus, .caja-calculadora #cid-app select:focus,
.caja-calculadora #ctf-app input:focus, .caja-calculadora #ctf-app select:focus,
.caja-calculadora #cpa-app input:focus, .caja-calculadora #cpa-app select:focus{
  outline:2px solid var(--ocre); outline-offset:1px; border-color:var(--ocre); box-shadow:none;
}

/* pistas bajo los campos */
.caja-calculadora #cid-app .k-hint,
.caja-calculadora #ctf-app .ctf-hint,
.caja-calculadora #cpa-app .cpa-hint{
  font-size:.79rem; color:var(--tenue); line-height:1.5; margin-top:6px;
}

/* boton */
.caja-calculadora #cid-app .k-btn,
.caja-calculadora #ctf-app .ctf-btn,
.caja-calculadora #cpa-app .cpa-btn{
  font-family:Inter,sans-serif; font-size:1rem; font-weight:600;
  background:var(--ocre); color:#fff; border:0; border-radius:10px;
  padding:14px 18px; min-height:50px; width:100%; margin-top:8px; cursor:pointer;
}
.caja-calculadora #cid-app .k-btn:hover,
.caja-calculadora #ctf-app .ctf-btn:hover,
.caja-calculadora #cpa-app .cpa-btn:hover{background:var(--ocre-cl)}

/* los marcos que agrupan campos: sin caja, solo la etiqueta */
.caja-calculadora #ctf-app fieldset,
.caja-calculadora #cpa-app fieldset{
  border:0; border-top:1px solid var(--linea); border-radius:0;
  padding:16px 0 0; margin:18px 0 0;
}
.caja-calculadora #ctf-app legend,
.caja-calculadora #cpa-app legend{
  padding:0; font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ocre);
}

/* el resultado */
.caja-calculadora #cid-app .k-ledger,
.caja-calculadora #ctf-app .ctf-ledger,
.caja-calculadora #cpa-app .cpa-ledger{background:var(--crema); border-radius:11px}
.caja-calculadora #cid-app .k-total .k-amt,
.caja-calculadora #ctf-app .ctf-line-total .ctf-line-amount,
.caja-calculadora #cpa-app .cpa-line-total .cpa-line-amount{color:var(--marino)}

/* ---------------- preguntas frecuentes ---------------- */
.faq{margin:2.6em 0 0}
.faq > h2{margin-bottom:.4em}
.faq details{border-bottom:1px solid var(--linea); padding:15px 0}
.faq summary{
  font-weight:600; color:var(--marino); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ocre); font-weight:400; font-size:1.3rem; line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:.8em 0 0; color:var(--suave); font-size:.95rem}

/* ---------------- pie ---------------- */
.pie{
  background:var(--marino); color:#c7d6e0; margin-top:clamp(50px,7vw,92px);
  padding-block:42px; text-align:center;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .pie{background:var(--crema); color:var(--suave); border-top:1px solid var(--linea)}
}
.pie-marca{font-family:Fraunces,Georgia,serif; font-size:1.18rem; font-weight:600; color:var(--papel); margin:0 0 15px}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .pie-marca{color:var(--marino)}
}
.pie-nav{display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:18px}
.pie-nav a{color:inherit; font-size:.87rem; text-decoration:none; opacity:.85}
.pie-nav a:hover{opacity:1; text-decoration:underline}
.pie-nota{font-size:.8rem; opacity:.7; max-width:62ch; margin:0 auto; line-height:1.6}

@media(prefers-reduced-motion:no-preference){
  a,.boton,.nav a{transition:color .15s, background .15s, border-color .15s}
}