/* =============================================================
   CalculObra — hoja de estilo única (portada + todas las herramientas)
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Portada · 7 Herramienta · 8 Asistente · 9 Anuncios · 10 Responsive
   11 Reduced-motion · 12 Impresión
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:         #ffffff;
  --bg-2:       #f5f9ff;
  --bg-3:       #eaf2fd;
  --ink:        #0f1c2e;
  --ink-2:      #40536b;
  --ink-3:      #64748b;   /* 4,76:1 sobre blanco — cumple AA */
  --line:       #e3ecf8;
  --line-2:     #ccdcf0;
  --accent:     #1668d6;   /* 5,27:1 sobre blanco, como texto y como fondo */
  --accent-2:   #0f52ab;   /* el hover oscurece, nunca aclara */
  --accent-ink: #ffffff;
  --accent-soft:#e8f1fe;
  --sky:        #6fb0f7;   /* decorativo, nunca texto */
  --ok:         #0f7a5a;
  --aviso:      #b45309;
  --bad:        #c0392b;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius:   16px;
  --radius-s: 11px;
  --radius-l: 26px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1140px;
  --maxw-narrow: 780px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --shadow-s: 0 1px 2px rgba(15, 28, 46, .05), 0 6px 16px -12px rgba(15, 28, 46, .22);
  --shadow:   0 1px 2px rgba(15, 28, 46, .05), 0 14px 34px -20px rgba(15, 28, 46, .30);
  --shadow-l: 0 2px 4px rgba(15, 28, 46, .05), 0 28px 60px -30px rgba(15, 28, 46, .38);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0c1420;
    --bg-2:       #111d2e;
    --bg-3:       #16243a;
    --ink:        #eaf1fb;
    --ink-2:      #b3c4da;
    --ink-3:      #8fa3bd;   /* 6,1:1 sobre el fondo oscuro */
    --line:       #1e2f47;
    --line-2:     #2b4059;
    --accent:     #74b3ff;
    --accent-2:   #9ccaff;
    --accent-ink: #08121f;
    --accent-soft:#16283f;
    --sky:        #2b5c94;
    --ok:         #4ec79b;
    --aviso:      #f0b155;
    --bad:        #ff8d7d;
    --shadow-s: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -12px rgba(0,0,0,.7);
    --shadow:   0 1px 2px rgba(0,0,0,.4),  0 16px 38px -22px rgba(0,0,0,.85);
    --shadow-l: 0 2px 4px rgba(0,0,0,.45), 0 30px 64px -32px rgba(0,0,0,.95);
  }
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  overflow-x: clip;
  /* Lo que se enfoca con el teclado o se abre por un ancla no puede quedar
     debajo de la cabecera fija (arriba) ni de la barra de anuncio (abajo). */
  scroll-padding-top: 88px;
  scroll-padding-bottom: calc(var(--alto-anclado, 0px) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* `hidden` tiene que ganar siempre: varios componentes usan display flex o grid,
   que si no se impondrían al display:none del atributo. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; letter-spacing: -0.02em; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--maxw-narrow); }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .6rem 1rem; border-radius: 8px;
  background: var(--ink); color: var(--bg); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--accent);
}
.kicker::before {
  content: ""; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; flex: none;
}

/* reveal suave al entrar en pantalla */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* =============================================================
   4. Tipografía
   ============================================================= */
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.06;
}
h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing: -0.03em;
}
h3 { font-family: var(--display); font-weight: 700; font-size: 1.14rem; }
h4 { font-weight: 700; font-size: 1rem; }

.lead {
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- cabecera --- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-s); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .8rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name {
  font-family: var(--display); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.03em;
}
.brand-name strong { font-weight: 800; color: var(--accent); }

.header-nav { display: flex; align-items: center; gap: 1.4rem; font-size: .93rem; }
.header-nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 500;
  position: relative; padding-block: .2rem;
  transition: color .25s var(--ease-out);
}
.header-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.header-nav a:hover { color: var(--accent); }
.header-nav a:hover::after { transform: scaleX(1); }
.header-cta { margin-left: .4rem; }

/* --- menú de móvil --- */
.menu-boton {
  display: none;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line-2); border-radius: 12px;
  place-items: center; color: var(--ink-2);
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.menu-boton:hover { border-color: var(--accent); color: var(--accent); }
.menu-boton svg { width: 22px; height: 22px; }

.menu-movil {
  border-top: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.menu-movil .wrap { display: grid; padding-block: .5rem 1rem; }
.menu-movil a {
  padding: .8rem .25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.menu-movil a:last-child {
  border-bottom: 0; color: var(--accent); font-weight: 700;
}

/* --- aviso de cookies --- */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -10px 30px -20px rgba(15, 28, 46, .5);
}
.cookies-caja {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: 1rem; align-items: center;
}
.cookies-txt { font-size: .9rem; color: var(--ink-2); line-height: 1.55; }
.cookies-txt strong { color: var(--ink); }
.cookies-txt a { color: var(--accent); }
.cookies-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-nav button {
  color: var(--ink-2); font: inherit; font-size: .86rem;
  padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.footer-nav button:hover { color: var(--accent); }

/* --- botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.45rem;
  min-height: 46px;
  border-radius: 999px;
  font-weight: 600; font-size: .96rem;
  text-decoration: none;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out),
              border-color .25s var(--ease-out), color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.btn-main {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn-main:hover {
  background: var(--accent-2); transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 85%, transparent);
}
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink-2); background: var(--bg); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-s { padding: .62rem 1.1rem; min-height: 42px; font-size: .89rem; }

/* --- tarjeta genérica --- */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: 1.5rem 1.55rem;
}

/* --- iconos de categoría --- */
.ico {
  width: 30px; height: 30px; flex: none;
  color: var(--accent);
}
.ico-lg { width: 42px; height: 42px; }

/* =============================================================
   6. Portada
   ============================================================= */

/* --- hero --- */
.hero {
  position: relative;
  padding-block: clamp(2.6rem, 7vw, 5rem) clamp(2rem, 5vw, 3.4rem);
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute; inset: -40% -20% auto -20%; height: 130%;
  background:
    radial-gradient(48% 42% at 18% 26%, color-mix(in srgb, var(--sky) 30%, transparent) 0%, transparent 70%),
    radial-gradient(42% 38% at 86% 12%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
  filter: blur(46px);
  pointer-events: none;
  z-index: -1;
}
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-title { margin-top: .9rem; max-width: 16ch; }
.hero-title em { font-style: normal; color: var(--accent); }
.hero-sub { margin-top: 1.05rem; max-width: 46ch; }

.hero-search { margin-top: 1.7rem; max-width: 460px; }
.search-box { position: relative; display: block; }
.search-box input {
  width: 100%;
  padding: .95rem 3.3rem .95rem 1.3rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--shadow-s);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.search-box input::placeholder { color: var(--ink-3); }
.search-box input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.search-hint { margin-top: .6rem; font-size: .85rem; color: var(--ink-3); }
.search-hint a { color: var(--accent); cursor: pointer; }

/* Botón de lupa: busca igual que pulsar Intro. */
.search-go {
  position: absolute; right: .42rem; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff;
  transition: background .2s var(--ease-out), transform .15s var(--ease-out);
}
.search-go svg { width: 18px; height: 18px; }
.search-go:hover { background: var(--accent-d, var(--accent)); transform: translateY(-50%) scale(1.06); }
.search-go:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

/* Línea que resume qué ha encontrado el buscador. */
.cat-resumen {
  margin: 0 0 1.4rem; padding: .7rem 1rem;
  border-radius: var(--radius-m, 12px);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ink-2); font-size: .92rem;
}

/* Tarjeta que sale por parecido, no por coincidencia literal. */
.tool-link.es-sugerida { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); }
.tool-link.es-sugerida h3::after,
.tool-link.es-sugerida h4::after {
  content: "sugerida"; margin-left: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); vertical-align: middle;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  margin-top: 1.6rem; list-style: none; padding: 0;
  font-size: .87rem; color: var(--ink-2);
}
.hero-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-trust svg { width: 15px; height: 15px; color: var(--ok); flex: none; }

.hero-figure { position: relative; }
.hero-figure img, .hero-figure svg { width: 100%; height: auto; border-radius: var(--radius-l); }

/* --- franja de datos --- */
.stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: clamp(1rem, 4vw, 2rem);
}
.stat { background: var(--bg-2); padding: 1.2rem 1.3rem; }
.stat-n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  letter-spacing: -0.03em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-t { font-size: .86rem; color: var(--ink-2); margin-top: .1rem; }

/* --- secciones genéricas --- */
.section { padding-block: clamp(2.8rem, 7vw, 4.8rem); }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.section-head h2 { margin-top: .7rem; }
.section-head p { margin-top: .8rem; }

/* --- ventajas del ahorro --- */
.ahorro-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
}
.ahorro-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.55rem;
  box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.ahorro-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow);
}
.ahorro-card h3 { margin-top: .9rem; }
.ahorro-card p { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; }
.ahorro-dato {
  display: block; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px dashed var(--line-2);
  font-size: .85rem; color: var(--ink-3);
}
.ahorro-dato b { color: var(--accent); font-variant-numeric: tabular-nums; }

.ahorro-split {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.ahorro-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.ahorro-list li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; }
.ahorro-list .num {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ahorro-list h4 { font-size: .99rem; }
.ahorro-list p { font-size: .92rem; color: var(--ink-2); margin-top: .15rem; }

/* --- catálogo de calculadoras --- */
.cat-block + .cat-block { margin-top: clamp(2rem, 5vw, 3rem); }
.cat-head {
  display: flex; align-items: center; gap: .8rem;
  /* A 320 px el título largo empujaba la cuenta fuera de la pantalla, y
     `body { overflow-x: clip }` la recortaba sin dejar barra: desaparecía en
     silencio. El que lo arregla es el min-width del h3, que deja que el
     título se encoja; el wrap es el cinturón por si algún día el título
     crece más. */
  flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.cat-head h3 {
  font-size: 1.22rem; font-weight: 800; letter-spacing: -0.025em;
  min-width: 0;
}
.cat-head .ico {
  width: 38px; height: 38px; padding: 7px;
  border-radius: 11px;
  background: var(--accent-soft);
}
.cat-count { margin-left: auto; font-size: .82rem; color: var(--ink-3); }

.tools-grid {
  display: grid; gap: .85rem;
  grid-template-columns: 1fr;
}
.tool-link {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 1.05rem 1.15rem;
  text-decoration: none;
  box-shadow: var(--shadow-s);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
a.tool-link:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.tool-link h3,
.tool-link h4 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.015em;
}
.tool-link h3 svg,
.tool-link h4 svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.tool-link p { margin-top: .35rem; font-size: .89rem; color: var(--ink-2); line-height: 1.5; }
.tool-go {
  margin-top: .75rem; font-size: .85rem; font-weight: 600; color: var(--accent);
}
.tool-soon {
  box-shadow: none; border-style: dashed; background: transparent;
  cursor: default;
}
.tool-soon h3,
.tool-soon h4 { color: var(--ink-3); }
.tool-soon h3 svg,
.tool-soon h4 svg { color: var(--ink-3); }
.tool-soon p { color: var(--ink-3); }
.tool-badge {
  margin-top: .75rem; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3);
}
.cat-empty {
  padding: 1.2rem; border: 1px dashed var(--line-2); border-radius: var(--radius-s);
  font-size: .92rem; color: var(--ink-3); text-align: center;
}
.cat-block[hidden] { display: none; }
.tool-link[hidden] { display: none; }

/* --- cómo funciona --- */
.pasos { display: grid; gap: 1.3rem; grid-template-columns: 1fr; counter-reset: paso; }
.paso { position: relative; padding-top: 1.1rem; border-top: 2px solid var(--line); }
.paso::before {
  counter-increment: paso; content: "0" counter(paso);
  font-family: var(--display); font-weight: 800; font-size: .84rem;
  letter-spacing: .1em; color: var(--accent);
}
.paso h3 { margin-top: .45rem; }
.paso p { margin-top: .4rem; color: var(--ink-2); font-size: .94rem; }

/* --- bloque del asistente --- */
.ia-block {
  display: grid; gap: clamp(1.5rem, 4vw, 2.6rem);
  grid-template-columns: 1fr;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 4vw, 2.8rem);
  box-shadow: var(--shadow);
}
.ia-block ul { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: .55rem; }
.ia-block ul li { display: flex; gap: .6rem; font-size: .94rem; color: var(--ink-2); }
.ia-block ul li svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: .25rem; }
.ia-nota { margin-top: 1.2rem; font-size: .83rem; color: var(--ink-3); }

.ia-demo {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  display: grid; gap: .7rem;
}
.ia-demo .burbuja {
  padding: .7rem .95rem; border-radius: 14px;
  font-size: .9rem; line-height: 1.55; max-width: 92%;
}
.ia-demo .de-usuario {
  justify-self: end; background: var(--accent); color: var(--accent-ink);
  border-bottom-right-radius: 5px;
}
.ia-demo .de-bot {
  justify-self: start; background: var(--bg); border: 1px solid var(--line);
  color: var(--ink-2); border-bottom-left-radius: 5px;
}

/* --- FAQ --- */
.faq details {
  border-bottom: 1px solid var(--line);
  padding-block: 1.05rem;
}
.faq details summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem;
  list-style: none; display: flex; gap: .8rem; align-items: flex-start;
  letter-spacing: -0.015em;
}
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::before {
  content: "+"; flex: none;
  color: var(--accent); font-weight: 700; font-size: 1.2rem; line-height: 1.3;
}
.faq details[open] summary::before { content: "−"; }
.faq details p { margin-top: .65rem; padding-left: 1.65rem; font-size: .95rem; color: var(--ink-2); }
.faq details p + p { margin-top: .6rem; }

/* --- contacto --- */
.contacto-grid {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.form-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.3rem, 3.5vw, 1.9rem);
}
.form-campos { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.form-campo { display: flex; flex-direction: column; gap: .35rem; }
.form-campo label { font-size: .87rem; font-weight: 600; color: var(--ink-2); }
.form-campo input, .form-campo select, .form-campo textarea {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit; color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.form-campo textarea { min-height: 110px; resize: vertical; }
.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-full { grid-column: 1 / -1; }
.form-legal { margin-top: .9rem; font-size: .82rem; color: var(--ink-3); }
.form-legal a { color: var(--accent); }
.form-estado {
  margin-top: .9rem; font-size: .92rem; font-weight: 600; min-height: 1.2em;
}
.form-estado.es-ok { color: var(--ok); }
.form-estado.es-mal { color: var(--bad); }
.form-estado:empty { display: none; }
.hp-campo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contacto-info { display: grid; gap: 1.3rem; }
.contacto-info h3 { font-size: 1.05rem; }
.contacto-info p { font-size: .94rem; color: var(--ink-2); margin-top: .35rem; }
.contacto-info a { color: var(--accent); }

/* --- pie --- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: 2.6rem 2rem;
}
.footer-top {
  display: grid; gap: 1.8rem; grid-template-columns: 1fr;
  padding-bottom: 1.8rem; border-bottom: 1px solid var(--line);
}
.footer-brand-block p { margin-top: .7rem; font-size: .9rem; color: var(--ink-2); max-width: 40ch; }
.footer-col h3,
.footer-col h4 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); margin-bottom: .7rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.footer-col a { font-size: .91rem; color: var(--ink-2); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .7rem 1.2rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.4rem;
}
.footer-legal { font-size: .82rem; color: var(--ink-3); max-width: 72ch; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .86rem; }
.footer-nav a { color: var(--ink-2); text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }

/* =============================================================
   7. La herramienta (páginas de calculadora)
   ============================================================= */
.migas { font-size: .82rem; color: var(--ink-3); margin-bottom: .6rem; }
.migas a { color: var(--accent); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

.tool-hero { padding-block: clamp(1.4rem, 5vw, 2.6rem) 1.1rem; }
.tool-hero h1 { max-width: 20ch; }
.tool-hero .sub {
  max-width: 58ch; margin-top: .8rem;
  font-size: clamp(.97rem, 2.2vw, 1.08rem); line-height: 1.55; color: var(--ink-2);
}

.tool-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 3.5vw, 2rem);
}

.grupo + .grupo { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.grupo-t {
  font-size: .77rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.op-nota { font-weight: 500; text-transform: none; letter-spacing: 0; }

.campos { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .88rem; font-weight: 600; color: var(--ink-2); }

.input-uni { position: relative; display: block; }
.input-uni .uni {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  font-size: .85rem; color: var(--ink-3); pointer-events: none;
}
.campo input[type="text"], .campo select {
  width: 100%;
  padding: .72rem .9rem;
  padding-right: 3.2rem;
  font: inherit; font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.campo select { padding-right: .9rem; appearance: auto; }
/* El borde rojo del campo con error se tiene que ver también con el foco
   puesto, que es justo cuando «Calcular» te lleva a él. */
.campo input.is-bad:focus, .campo input[type="text"].is-bad:focus,
.campo-min input.is-bad:focus, .form-campo :is(input, textarea).is-bad:focus {
  outline: none;
  border-color: var(--bad) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 28%, transparent) !important;
}
.campo input[type="text"]:focus, .campo select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.campo input.is-bad { border-color: var(--bad); }
.form-campo :is(input, textarea).is-bad { border-color: var(--bad); }

.pista { margin-top: .75rem; font-size: .86rem; color: var(--ink-3); line-height: 1.55; }
.pista strong { color: var(--ink-2); }
.pista-top { margin-top: 0; margin-bottom: .9rem; }

fieldset.opciones, .fijacion, .forma { border: 0; padding: 0; margin-top: .95rem; }
fieldset.opciones legend, .fijacion legend, .forma legend {
  padding: 0; font-size: .88rem; font-weight: 600; color: var(--ink-2); margin-bottom: .5rem;
}
.radio {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem; margin: 0 .5rem .5rem 0; min-height: 44px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .92rem; cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.radio:hover { border-color: var(--accent); }
.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio input { accent-color: var(--accent); }

.acciones { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.5rem; }
.acciones-res { margin-top: 1.1rem; }

.errores {
  min-height: 1.2em; margin-top: .8rem;
  font-size: .9rem; font-weight: 600; color: var(--bad);
}
.errores:empty { display: none; }

/* --- resultados --- */
.resultados { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 2px solid var(--line); }
.res-t {
  font-size: .77rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  margin-bottom: .9rem;
}
.res {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .9rem 1rem;
}
.res-label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.res-valor {
  font-family: var(--display);
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-top: .15rem;
}
.res-op {
  margin-top: .4rem;
  font-size: .78rem; line-height: 1.5; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
}
.res-destacado {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 1.2rem 1.25rem;
  margin-bottom: .9rem;
}
.res-destacado .res-label { color: var(--accent); }
.res-destacado .res-valor { font-size: clamp(2rem, 7vw, 2.7rem); color: var(--accent); }
.res-destacado .res-op { color: var(--ink-2); }
.res-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.res-suave { background: transparent; border-style: dashed; }
.res-suave .res-valor { font-size: clamp(1.2rem, 3.2vw, 1.45rem); color: var(--ink-2); }
.tool-card[data-state="error"] .resultados { opacity: .45; }

/* --- tramos (forma personalizada) --- */
.tramos { display: grid; gap: .7rem; margin-bottom: .9rem; }
.tramo {
  display: grid; grid-template-columns: 1fr auto; gap: .6rem .7rem; align-items: end;
  padding: .8rem .9rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.tramo-n {
  grid-column: 1 / -1;
  font-size: .77rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.tramo-n b { color: var(--accent); }
/* En móvil cada medida ocupa su propia línea y la papelera se queda a un
   lado: con las dos medidas en fila, el «largo» se quedaba en 67 px y no se
   leía lo que había escrito. */
.tramo { grid-template-columns: minmax(0, 1fr) 44px; }
.tramo .campo-min { grid-column: 1; }
.tramo .tramo-x { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.campo-min { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.campo-min label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.campo-min input {
  width: 100%;
  padding: .55rem .8rem; padding-right: 2.6rem;
  font: inherit; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.campo-min input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.campo-min input.is-bad { border-color: var(--bad); }
.tramo-x {
  width: 44px; height: 44px; align-self: end;
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--ink-3); font-size: 1.15rem; line-height: 1;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.tramo-x:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.tramo-x:disabled { opacity: .3; cursor: not-allowed; }

/* --- bloque de cortes / despiece --- */
.cortes-bloque {
  margin-bottom: .9rem;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: 1rem 1.1rem;
}
.cortes-t {
  display: flex; align-items: center; gap: .5rem;
  font-size: .77rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: .7rem;
}
.cortes-ico { width: 15px; height: 15px; color: var(--accent); flex: none; }
.cortes { list-style: none; display: grid; gap: .7rem; padding: 0; }
.corte {
  display: grid; gap: .22rem;
  padding: .75rem .9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
}
.corte-ninguno { border-left-color: var(--ok); }
.corte-tit {
  font-size: .71rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.corte-ninguno .corte-tit { color: var(--ok); }
.corte-txt { font-size: .89rem; line-height: 1.55; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.corte-uso {
  margin-top: .35rem; padding-top: .45rem;
  border-top: 1px dashed var(--line);
  font-size: .83rem; line-height: 1.5; font-weight: 500;
}
.corte-uso-si { color: var(--ok); }
.corte-uso-no { color: var(--ink-2); font-weight: 600; }
.corte-nota { display: block; background: transparent; border: 0; padding: .1rem 0 0;
  font-size: .84rem; line-height: 1.5; color: var(--ink-3); }
.cortes-aviso {
  margin-top: .75rem; padding-top: .65rem;
  border-top: 1px dashed var(--line-2);
  font-size: .84rem; color: var(--ink-3);
}
.cortes-aviso[hidden] { display: none; }
.corte-empalme { border-left-color: var(--bad); }
.corte-empalme .corte-tit { color: var(--bad); }
.corte-empalme .corte-uso-no { color: var(--bad); }
.corte-empalme-ok { border-left-color: var(--ok); }
.corte-empalme-ok .corte-tit { color: var(--ok); }

/* --- privacidad y aviso --- */
.privacidad { margin-top: 1rem; font-size: .88rem; color: var(--ink-3); text-align: center; }
.aviso {
  margin-top: 1.4rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  padding: 1.1rem 1.25rem;
}
.aviso h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: 0; }
.aviso p { font-size: .91rem; color: var(--ink-2); }
.aviso p + p { margin-top: .6rem; }
.aviso strong { color: var(--ink); }

/* --- prosa (cómo se calcula, legales) --- */
.prosa { padding-block: clamp(2rem, 6vw, 3.2rem); max-width: 780px; }
.prosa h2 { margin-bottom: 1rem; }
/* Un h2 que abre su propia sección ya tiene el aire del padding de .prosa.
   Pero en las páginas legales van varios h2 dentro de la misma sección, y
   ahí el titular siguiente se pegaba al párrafo anterior. Este margen solo
   se aplica cuando el h2 viene DESPUÉS de contenido, no cuando es el
   primero, así que no cambia nada en calculadoras, comparativas ni guías. */
.prosa :is(p, ul, ol, table, details, blockquote, figure) + h2 { margin-top: 2.4rem; }
.prosa h3 { margin-top: 1.9rem; margin-bottom: .5rem; color: var(--accent); font-size: 1.1rem; }
.prosa p { color: var(--ink-2); }
.prosa p + p { margin-top: .85rem; }
.prosa ul, .prosa ol { margin-top: .8rem; padding-left: 1.3rem; color: var(--ink-2); }
.prosa li + li { margin-top: .4rem; }

/* --- otras calculadoras (pie de herramienta) --- */
.relacionadas { padding-block: clamp(1.6rem, 4vw, 2.4rem); }
.relacionadas h2 { font-size: 1.2rem; margin-bottom: 1rem; }

/* =============================================================
   8. Asistente de IA
   ============================================================= */
.ia-lanzador {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: .93rem;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 85%, transparent);
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.ia-lanzador:hover { background: var(--accent-2); transform: translateY(-2px); }
.ia-lanzador svg { width: 19px; height: 19px; flex: none; }
.ia-lanzador[hidden] { display: none; }
/* En el móvil, mientras se escribe en una calculadora, el botón se aparta:
   flotando abajo a la derecha tapaba el final de los campos. */
@media (max-width: 760px) {
  body.escribiendo .ia-lanzador {
    opacity: 0; pointer-events: none; transform: translateY(12px);
  }
}

.ia-panel {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: min(390px, calc(100vw - 2rem));
  max-height: min(620px, calc(100dvh - 2rem));
  display: none; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}
.ia-panel.is-open { display: flex; }
.ia-cab {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.ia-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: .9rem;
}
.ia-cab-txt strong { display: block; font-size: .95rem; letter-spacing: -0.01em; }
.ia-cab-txt span { display: block; font-size: .78rem; color: var(--ink-3); }
.ia-cerrar {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.ia-cerrar:hover { background: var(--bg-3); color: var(--ink); }

.ia-mensajes {
  flex: 1 1 auto; overflow-y: auto;
  padding: 1rem; display: grid; gap: .7rem; align-content: start;
}
.ia-msg {
  padding: .7rem .95rem; border-radius: 14px;
  font-size: .91rem; line-height: 1.55; max-width: 88%;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ia-msg-bot { justify-self: start; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 5px; }
.ia-msg-yo  { justify-self: end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.ia-msg-mal { justify-self: start; background: var(--bg-2); border: 1px solid var(--bad); color: var(--ink-2); }
.ia-msg a { color: inherit; text-decoration: underline; }

/* Respuestas ya formateadas: párrafos y listas de verdad, sin asteriscos. */
.ia-msg-rico { white-space: normal; }
.ia-msg-rico p + p,
.ia-msg-rico p + ul,
.ia-msg-rico ul + p { margin-top: .6rem; }
.ia-msg-rico ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .3rem; }
.ia-msg-rico li { list-style: disc; }
.ia-msg-rico strong { color: var(--ink); font-weight: 700; }
.ia-msg-rico code {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: .08em .35em; border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
}

.ia-escribiendo { display: inline-flex; gap: .25rem; align-items: center; }
.ia-escribiendo i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: iaPunto 1.2s var(--ease-soft) infinite;
}
.ia-escribiendo i:nth-child(2) { animation-delay: .15s; }
.ia-escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes iaPunto { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.ia-sugerencias {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 1rem .8rem;
}
.ia-sugerencias button {
  padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: .82rem; color: var(--ink-2);
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.ia-sugerencias button:hover { border-color: var(--accent); color: var(--accent); }
.ia-sugerencias[hidden] { display: none; }

.ia-form {
  display: flex; gap: .5rem; align-items: flex-end;
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--line);
}
.ia-form textarea {
  flex: 1 1 auto; min-height: 44px; max-height: 120px; resize: none;
  padding: .65rem .85rem;
  font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
}
.ia-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ia-enviar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  transition: background-color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.ia-enviar:hover { background: var(--accent-2); }
.ia-enviar:disabled { opacity: .45; cursor: not-allowed; }
.ia-enviar svg { width: 19px; height: 19px; }
.ia-pie { padding: 0 1rem .8rem; font-size: .75rem; color: var(--ink-3); line-height: 1.45; }

/* =============================================================
   9. Huecos de anuncios (vacíos — el propietario pega su código)
   ============================================================= */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--bg-3) 55%, transparent);
  margin-block: clamp(1.5rem, 5vw, 2.4rem);
}
/* Sin AdSense configurado, los huecos no se ven: recuadros vacíos con el
   rótulo «Publicidad» hacen que la web parezca a medio terminar, y es justo
   lo que ve el revisor de Google cuando decide si la aprueba. La vista
   previa (data-ads-demo) sí los enseña, para poder juzgar el diseño. */
html:not([data-ads="on"]):not([data-ads-demo]) .ad-slot { display: none; }
/* Con AdSense activo, si Google no tiene anuncio para un hueco lo marca como
   «unfilled»: ese hueco se recoge en vez de quedar como un rectángulo vacío. */
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.ad-leaderboard { min-height: 100px; }
.ad-incontent   { min-height: 250px; }
/* Dentro de un texto largo. Ya va dentro de una sección con márgenes, así que
   no lleva «wrap» y se separa un poco más del párrafo de arriba para que no
   se confunda con el contenido: la línea que separa lo redaccional de lo
   pagado tiene que verse. */
.ad-inarticle {
  min-height: 250px;
  margin-block: clamp(1.8rem, 6vw, 2.8rem);
}

/* --- anuncio fijo abajo (anchor) ---
   Se queda pegado al borde inferior. Lleva fondo sólido y una línea arriba
   para que nunca se confunda con el contenido, y un botón de cerrar de 44 px
   separado del anuncio: si el aspa quedara pegada al banner, cerrarlo con el
   dedo acabaría siendo un clic en el anuncio. */
.ad-anclado {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-2);
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform .28s var(--ease-out);
}
.ad-anclado[hidden] { display: none; }
.ad-anclado.is-visible { transform: translateY(0); }
.ad-anclado-caja {
  display: flex; align-items: center; gap: .4rem;
  max-width: 1180px; margin: 0 auto;
}
.ad-anchor {
  flex: 1 1 auto;
  min-height: 52px; max-height: 100px;
  margin-block: 0;
}
.ad-anclado-x {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: 50%;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.ad-anclado-x svg { width: 17px; height: 17px; }
.ad-anclado-x:hover { color: var(--bad); border-color: var(--bad); }
.ad-anclado-x:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* El asistente sube para no quedar debajo de la barra, y el final de la
   página gana aire para que el anuncio no tape los enlaces legales. */
body.con-anclado .ia-lanzador,
body.con-anclado .ia-panel { bottom: calc(1rem + var(--alto-anclado, 0px)); }
body.con-anclado { padding-bottom: var(--alto-anclado, 0px); }

@media (prefers-reduced-motion: reduce) {
  .ad-anclado { transition: none; }
}
.ad-label {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); opacity: .7;
}

/* --- anuncios laterales, solo ordenador ---
   El contenido mide como mucho 1140 px (--maxw). En una pantalla de 1536 o
   1920 eso deja entre 200 y 400 px vacíos a cada lado, y ahí van dos
   columnas fijas.

   Cuatro reglas, y cada una evita un problema concreto:
   1. Solo salen si el hueco da para la columna ENTERA más un margen a cada
      lado. Por debajo de 1540 px de ancho, nada: una columna que se come el
      borde del texto es justo lo que Google penaliza.
   2. Solo con pantalla alta (≥ 820 px): así los 600 px de columna nunca
      llegan a la franja del anuncio fijo de abajo.
   3. Se colocan con 50 % y no con 100vw, que en Windows cuenta la barra de
      desplazamiento y descentraría las columnas unos píxeles hacia el texto.
   4. Se apartan cuando asoma el pie de página (initLaterales, main.js) y la
      derecha cuando se abre el asistente, que ocupa esa esquina.

   Superficie fija total en el peor caso —1540 × 820 con el anuncio de
   abajo puesto—: 2 × 160 × 600 + 1180 × 100 = 310 000 px² de 1 262 800,
   un 24,5 %. El límite de Better Ads para anuncios fijos es el 30 %. */
.ad-laterales { display: none; }

@media (min-width: 1540px) and (min-height: 820px) {
  .ad-laterales:not([hidden]) { display: block; }
  .ad-laterales { --ancho-lateral: 160px; }
  .ad-lateral {
    position: fixed;
    top: 96px;
    z-index: 40;
    width: var(--ancho-lateral);
    height: 600px;
    margin: 0;
    flex-direction: column;
    background: var(--bg-2);
    transition: opacity .25s var(--ease-out), visibility .25s;
  }
  /* 50 % del bloque contenedor de un elemento fijo es media ventana SIN la
     barra de desplazamiento: el borde exacto del contenido centrado. */
  .ad-lateral-izq { left:  calc(50% - var(--maxw) / 2 - 16px - var(--ancho-lateral)); }
  .ad-lateral-der { right: calc(50% - var(--maxw) / 2 - 16px - var(--ancho-lateral)); }

  /* El código de AdSense trae su propio tamaño; se le impone el de la
     columna. Es la forma que documenta Google para fijar el tamaño de un
     bloque adaptable: borrar data-ad-format y darle ancho y alto por CSS. */
  .ad-lateral ins.adsbygoogle { display: block; width: 100%; height: 100%; }

  .ad-laterales.is-apartado .ad-lateral,
  body.ia-abierta .ad-lateral-der { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (min-width: 1820px) and (min-height: 820px) {
  /* Hueco para el formato de media página, 300 × 600: de los que más pagan. */
  .ad-laterales { --ancho-lateral: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-lateral { transition: none; }
}

/* =============================================================
   10. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tramo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .tramo .campo-min { grid-column: auto; }
  .tramo .tramo-x { grid-column: auto; grid-row: auto; align-self: end; }
  .tramo-n { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahorro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ahorro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ahorro-split { grid-template-columns: 1fr 1fr; }
  .ia-block { grid-template-columns: 1.05fr .95fr; }
  .contacto-grid { grid-template-columns: 1.15fr .85fr; }
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr 0.9fr; }
}

@media (min-width: 720px) {
  .cookies-caja { grid-template-columns: 1fr auto; gap: 1.6rem; }
}

@media (max-width: 719px) {
  .header-nav { display: none; }
  .menu-boton { display: grid; }
  /* La llamada a la acción vive dentro del menú, destacada al final: en la
     cabecera estrecha solo conseguía partirse en dos líneas. */
  .header-cta { display: none; }
  /* El botón del asistente flota abajo a la derecha: dejamos aire en el pie
     para que no tape los últimos enlaces. */
  .site-footer { padding-bottom: 5.5rem; }
}
@media (max-width: 400px) {
  .ia-lanzador span { display: none; }
  .ia-lanzador { padding: .85rem; }
}

/* =============================================================
   11. Reduced-motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ia-escribiendo i { animation: none; opacity: .6; }
}

/* =============================================================
   12. Impresión — llevarse la lista a la obra en papel
   ============================================================= */
@media print {
  /* La barra fija de anuncio y los botones de copiar se añadieron después de
     escribir esto y se colaban en el papel: quien imprime la lista de
     materiales quiere la lista, no un banner en gris. */
  .site-header, .footer-nav, .ad-slot, .ad-anclado, .ad-laterales, .acciones, .skip-link,
  .copia-correo, .form-salidas, .marcas-aviso,
  .faq, .privacidad, .ia-lanzador, .ia-panel, .relacionadas { display: none !important; }
  body { background: #fff; color: #000; }
  .tool-card { box-shadow: none; border: 1px solid #999; }
  .res { break-inside: avoid; }
}


/* --- Respaldo del formulario cuando el servidor no responde -------------- */
.form-estado .btn { margin-right: .5rem; vertical-align: middle; }
.form-estado-nota { display: block; margin-top: .5rem; font-size: .88rem; }
/* Las tres salidas cuando el envío falla: en el móvil se apilan solas. */
.form-salidas {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .7rem 0 .2rem;
}

/* --- Correo de contacto en el pie --------------------------------------- */
.footer-mail {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .8rem; font-size: .93rem;
}
.footer-mail svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.footer-mail a { color: var(--ink); font-weight: 600; text-decoration: none; }
.footer-mail a:hover { color: var(--accent); text-decoration: underline; }

/* --- botón de copiar el correo ---
   Va justo detrás de cada correo escrito. Alto mínimo 24 px para que se
   pueda pulsar con el dedo sin apuntar (WCAG 2.5.8). */
.copia-correo {
  display: inline-flex; align-items: center; gap: .28rem;
  margin-left: .45rem;
  padding: .22rem .5rem;
  min-height: 26px;
  vertical-align: middle;
  font: inherit; font-size: .78rem; font-weight: 600; line-height: 1;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out),
              background-color .18s var(--ease-out);
}
/* El color va con el botón, no con la caja en la que cae: dentro del aviso
   naranja del formulario el icono salía naranja y parecía otra advertencia. */
/* «button.» delante a propósito: el aviso naranja del formulario pinta sus
   iconos de naranja y le ganaba, así que el icono de copiar salía de otro
   color y parecía una advertencia más. */
/* Se ve pequeño, pero se pulsa grande: el área táctil llega a 44 px de alto
   sin mover nada de sitio. */
.copia-correo, .contacto-info button.tool-go { position: relative; }
.copia-correo::after, .contacto-info button.tool-go::after {
  content: ""; position: absolute; inset: -10px -4px;
}
button.copia-correo svg {
  width: 13px; height: 13px; flex: none; color: inherit; margin-top: 0;
}
.copia-correo:hover { color: var(--accent); border-color: var(--accent); }
.copia-correo:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.copia-correo.es-ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, var(--bg-2));
}
.copia-correo.es-mal { color: var(--bad); border-color: var(--bad); }
/* En pantallas estrechas se queda solo el icono: el texto «Copiar» rompía
   la línea del correo y lo partía en dos. */
@media (max-width: 479px) {
  .copia-correo-t { display: none; }
  .copia-correo { padding: .3rem .42rem; }
}


/* El lanzador del asistente va fijo abajo a la derecha: dejamos aire en el
   pie para que no tape los enlaces legales al llegar al final. */
@media (min-width: 720px) {
  .site-footer { padding-bottom: 4.2rem; }
}


/* --- Aviso de «mira en spam» junto al formulario ------------------------- */
.form-aviso {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1rem; padding: .8rem .95rem;
  border-radius: var(--radius-m, 12px);
  background: color-mix(in srgb, var(--aviso, #f59e0b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--aviso, #f59e0b) 34%, transparent);
  font-size: .89rem; line-height: 1.5; color: var(--ink-2);
}
.form-aviso svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--aviso, #b45309); }
.form-aviso strong { color: var(--ink); }
.form-aviso a { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------ enlaces de afiliación
   Va debajo de los resultados, que es cuando la persona ya sabe las
   cantidades. Deliberadamente sobrio: tiene que leerse como una ayuda
   de la web, no como un anuncio, y las políticas de AdSense exigen que
   no se confunda con publicidad. */
[data-afiliacion][hidden] { display: none !important; }

.afiliacion {
  margin-top: 1.6rem;
  padding: 1.3rem 1.25rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--bg-2);
}

.afiliacion-t {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--ink);
}

.afiliacion-intro {
  margin: 0 0 .9rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.afiliacion-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.afiliacion-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .8rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.afiliacion-que {
  flex: 1 1 11rem;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink);
}

.afiliacion-donde {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.afiliacion-donde a {
  display: inline-block;
  padding: .26rem .66rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--accent);
  background: var(--bg);
  transition: background .18s var(--ease-soft), border-color .18s var(--ease-soft);
}

.afiliacion-donde a:hover,
.afiliacion-donde a:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.afiliacion-aviso {
  margin: .9rem 0 0;
  font-size: .79rem;
  line-height: 1.5;
  color: var(--ink-3);
}

@media (max-width: 520px) {
  .afiliacion-lista li { flex-direction: column; align-items: stretch; }
  .afiliacion-donde a { text-align: center; flex: 1 1 auto; }
}

/* ------------------------------------------------ comparativas de materiales */
.resumen-capsula {
  font-weight: 500;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: .85rem;
}

.nota-honestidad {
  margin: 0 0 1.4rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-s);
  background: var(--bg-2);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* --- criterios y casos de uso --- */
.crits, .casos { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

.crit, .caso {
  display: grid;
  gap: .25rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-2);
}

.caso { border-left: 3px solid var(--accent); }

.crit-t, .caso-t {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}

.crit-x, .caso-x { font-size: .94rem; line-height: 1.6; color: var(--ink-2); }

/* --- ejemplo resuelto de las guías ---
   Tres datos por paso: qué se calcula, la operación y el resultado. En móvil
   se apilan; desde 620 px van en tres columnas con la operación y el resultado
   alineados en vertical, que es lo que permite seguir la cuenta de un vistazo. */
.ej-pasos {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  counter-reset: ejpaso;
}

.ej-paso {
  counter-increment: ejpaso;
  display: grid;
  gap: .12rem;
  padding: .7rem .85rem .7rem 2.4rem;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-2);
}

.ej-paso::before {
  content: counter(ejpaso);
  position: absolute;
  left: .85rem;
  top: .7rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ej-t { font-size: .94rem; color: var(--ink); }

.ej-op,
.ej-r { font-size: .89rem; font-variant-numeric: tabular-nums; }

.ej-op { color: var(--ink-2); }
.ej-r { font-weight: 600; color: var(--ink); }

@media (min-width: 620px) {
  .ej-paso {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr);
    align-items: baseline;
    gap: .9rem;
  }
  .ej-r { text-align: right; }
}

.ej-total {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--bg);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}

.ej-total-et {
  font-size: .71rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}

.tabla-cap {
  caption-side: top;
  text-align: left;
  padding: 0 0 .5rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- tabla comparativa --- */
.tabla-wrap { overflow-x: auto; margin: 0 0 .4rem; -webkit-overflow-scrolling: touch; }

.tabla-comp {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .92rem;
}

.tabla-comp th, .tabla-comp td {
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.tabla-comp thead th {
  font-family: var(--display);
  font-size: .86rem;
  /* Sin uppercase a propósito: pondría «Λ» donde va «λ», que es otra cosa. */
  letter-spacing: .01em;
  color: var(--ink-3);
  border-bottom: 2px solid var(--line-2);
  white-space: nowrap;
}

.tabla-comp tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.tabla-comp tbody td { color: var(--ink-2); }
.tabla-comp tbody tr:last-child th,
.tabla-comp tbody tr:last-child td { border-bottom: 0; }
.tabla-comp tbody tr:hover { background: var(--bg-2); }

/* --- marcas --- */
.marcas {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.marca {
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg);
  box-shadow: var(--shadow-s);
}

/* Va con .marcas delante a propósito: «.prosa h3» los pintaba de azul, y un
   titular azul que no lleva a ninguna parte parece un enlace roto. Ahora el
   azul significa que se puede pulsar. */
.marcas .marca-n {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: 1.04rem;
  color: var(--ink);
}

.marca-si, .marca-no {
  margin: 0 0 .55rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.marca-et {
  display: block;
  font-size: .73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .12rem;
}

.marca-si .marca-et { color: var(--ok); }
.marca-no .marca-et { color: var(--aviso); }
/* El nombre de la marca convertido en enlace a la tienda. Se ve que es un
   enlace —color y flecha— porque un titular que lleva a una tienda tiene
   que parecer lo que es. */
.marca-n a.marca-enlace {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.marca-n a.marca-enlace:hover,
.marca-n a.marca-enlace:focus-visible {
  border-bottom-color: var(--accent);
}
.marca-flecha {
  display: inline-block;
  margin-left: .28em;
  font-size: .82em;
  vertical-align: baseline;
  opacity: .72;
}
.marcas-aviso {
  margin: 0 0 1rem;
  padding: .6rem .85rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-3);
  background: var(--bg-2);
  border-left: 3px solid var(--line-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.marca-ver { margin: .7rem 0 0; }
.marca-ver:empty { display: none; }

/* --- puente entre comparativa y calculadora --- */
.puente {
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: 1fr;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.puente h2 { margin: .2rem 0 .5rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.puente p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.puente-accion { margin: 0; }
.puente-guias { margin: .8rem .2rem 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.puente-guias a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

@media (min-width: 760px) {
  .puente { grid-template-columns: 1fr auto; gap: 1.8rem; }
  .puente-accion { white-space: nowrap; }
}

/* ------------------------------------------------ objetivos táctiles
   Enlaces que en el móvil eran demasiado pequeños para un dedo. El texto no
   cambia de tamaño: lo que crece es el área que responde al toque. */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .35rem;
}

/* Ojo: estos enlaces van DENTRO de una frase. Si se les da relleno, el hueco
   se ve antes de la coma que viene después («suelo , pared ,»). La forma de
   agrandar el área que responde al dedo sin tocar el flujo del texto es una
   capa invisible por encima, que no ocupa sitio en la línea. */
.migas a,
.search-hint a { position: relative; }
/* Y la caja visible, al menos 24 px de alto (WCAG 2.2, tamaño de objetivo). */
.migas a { display: inline-block; min-height: 24px; line-height: 24px; }

.migas a::after,
.search-hint a::after {
  content: "";
  position: absolute;
  inset: -11px -5px;
}

.search-go { width: 44px; height: 44px; }

@media (max-width: 520px) {
  .migas a::after,
  .search-hint a::after { inset: -14px -7px; }
}

/* Los dos botones del aviso de cookies, con el mismo peso visual: la AEPD
   pide que rechazar sea tan fácil de ver y de pulsar como aceptar. */
.btn-linea {
  background: var(--bg);
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.btn-linea:hover,
.btn-linea:focus-visible { background: var(--accent-soft); }

/* Encabezado de sección sin la caja completa de .section-head: para rejillas
   que necesitan su H2 por jerarquía pero no un bloque de presentación. */
.section-h {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--ink);
}

/* El correo del pie es un objetivo táctil de verdad, no un enlace de paso. */
.footer-mail a {
  display: inline-block;
  min-height: 32px;
  padding: .3rem 0;
}

/* Los enlaces del pie son navegación, no texto corrido: necesitan alto para
   el dedo. El interlineado de la columna no cambia, crece el área que responde. */
.footer-col ul a {
  display: inline-block;
  min-height: 30px;
  padding: .28rem 0;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .footer-col ul a { min-height: 36px; padding: .45rem 0; }
}

/* La fila legal del pie: mismos criterios que el resto de la navegación. */
.footer-nav a,
.footer-nav button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .3rem .1rem;
}