/* NexoFlujos · hoja de estilos única (sin fuentes web, sin imágenes externas, sin estilos en línea).
   Paleta: marfil #FAF7F2, tinta azul #0F1E36, coral #E85D4A. */
:root {
  --marfil: #FAF7F2;
  --marfil-2: #F3EEE5;
  --azul: #0F1E36;
  --azul-2: #1A2F4F;
  --coral: #E85D4A;
  --coral-texto: #B73A29; /* coral oscurecido: contraste 5,4:1 sobre marfil para texto */
  --suave: #4A566B;
  --linea: rgb(15 30 54 / .14);
  --sombra: 0 1px 1px rgb(15 30 54 / .04), 0 3px 6px rgb(15 30 54 / .05), 0 12px 24px rgb(15 30 54 / .06), 0 28px 56px rgb(15 30 54 / .05);
  --sombra-alta: 0 2px 2px rgb(15 30 54 / .05), 0 8px 14px rgb(15 30 54 / .08), 0 22px 40px rgb(15 30 54 / .1), 0 44px 80px rgb(15 30 54 / .08);
  --f: ui-sans-serif, "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ancho: 72rem;
  --medida: 68ch;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--marfil); color: var(--azul); font-family: var(--f); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
svg { display: block; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salto { position: absolute; left: 1rem; top: -5rem; z-index: 80; padding: .75rem 1rem; background: var(--azul); color: var(--marfil); font-weight: 600; border-radius: .4rem; }
.salto:focus { top: .75rem; }
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }

/* ───────── Cabecera ───────── */
.cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; padding-block: 1rem; position: relative; z-index: 2; }
.marca { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; text-decoration: none; font-size: 1.2rem; letter-spacing: -.02em; }
.marca svg { width: 2.1rem; height: 2.1rem; flex: none; }
.marca b { font-weight: 800; }
.marca span span { font-weight: 450; color: var(--suave); }
.nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* ───────── Botones ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .7rem 1.25rem; border-radius: .7rem; font-weight: 700; font-size: .98rem; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform .18s ease; }
.btn-coral { position: relative; z-index: 2; isolation: isolate; background: var(--coral); color: #FFFFFF !important; font-weight: 700; text-decoration: none !important; opacity: 1; filter: none; mix-blend-mode: normal; box-shadow: 0 6px 16px rgb(232 93 74 / .28); }
.btn-coral::before, .btn-coral::after { content: none !important; }
/* Texto y flecha siempre blancos y nítidos, también dentro de .prosa, article y las house ads. */
.btn-coral, .btn-coral:link, .btn-coral:visited, .btn-coral:hover, .btn-coral:focus, .btn-coral:active,
.prosa a.btn-coral, article a.btn-coral, .casa a.btn-coral { color: #FFFFFF !important; text-decoration: none !important; }
.btn-coral > *, .btn-coral svg { position: relative; z-index: 2; color: #FFFFFF; stroke: currentColor; opacity: 1; filter: none; }
.btn-coral:hover, .btn-coral:focus-visible { background: #D04836; box-shadow: 0 4px 12px rgba(232, 93, 74, 0.35); }
.btn-azul { background: var(--azul); color: var(--marfil); }
.btn-azul:hover { background: var(--azul-2); }
.btn-texto { display: inline-flex; align-items: center; min-height: 48px; font-weight: 650; }

/* ───────── Portada: hero con cuadrícula técnica ───────── */
.hero { position: relative; isolation: isolate; padding-block: 1.5rem 3.5rem; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(15 30 54 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(15 30 54 / .04) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 68% 38%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 90% at 68% 38%, #000 25%, transparent 78%); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-texto h1 { font-size: clamp(2.7rem, 9vw, 4.9rem); line-height: .97; letter-spacing: -.045em; margin-bottom: 1.4rem; }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--suave); max-width: 34rem; margin-bottom: 1.75rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin-bottom: 1.5rem; }
.responsable { font-size: .95rem; color: var(--suave); }
.responsable strong { color: var(--azul); }
.flujo { background: var(--azul); color: var(--marfil); border-radius: 1.25rem; padding: 1rem; box-shadow: var(--sombra-alta); position: relative; overflow: hidden;
  background-image: radial-gradient(rgb(250 247 242 / .08) 1px, transparent 1.3px); background-size: 20px 20px; }
.flujo-cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; font-size: .82rem; }
.flujo-cab b { font-weight: 650; white-space: nowrap; }
.pildora { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 99px; background: rgb(250 247 242 / .1); color: #E8E3D9; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pildora i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); }
.flujo svg { width: 100%; height: auto; overflow: visible; }
.svg-h { display: none; aspect-ratio: 560 / 190; }
.svg-v { aspect-ratio: 320 / 430; max-width: 22rem; margin-inline: auto; }
.flujo figcaption { margin-top: .75rem; font-size: .82rem; color: #C9CFDA; max-width: 40rem; }
.nodo rect { fill: #14284A; stroke: rgb(250 247 242 / .22); stroke-width: 1.5; }
.nodo .titulo { fill: var(--marfil); font: 800 18px var(--f); letter-spacing: -.01em; }
.nodo .sub { fill: #C9CFDA; font: 500 14px var(--f); }
.nodo .ico { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cable { stroke: rgb(250 247 242 / .3); stroke-width: 2; fill: none; }
.punta { fill: rgb(250 247 242 / .55); }
.chip rect { fill: #0B1730; stroke: var(--coral); stroke-width: 1.2; }
.chip text { fill: var(--marfil); font: 600 12.5px var(--f-mono); }
.pulso { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 16 200; stroke-dashoffset: 16; animation: viaja 3.6s cubic-bezier(.45, 0, .3, 1) infinite; }
.pulso-2 { animation-delay: 1.2s; }
.anillo { fill: none; stroke: var(--coral); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onda 3.6s ease-out infinite; opacity: 0; }
.anillo-2 { animation-delay: 1.2s; }
.anillo-3 { animation-delay: 2.4s; }
@keyframes viaja { 0% { stroke-dashoffset: 16; opacity: 1; } 28% { stroke-dashoffset: -100; opacity: 1; } 29%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes onda { 0% { transform: scale(.6); opacity: .75; } 30% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }

/* Tarjetas de acceso */
.guias { display: grid; gap: 1rem; margin-top: 2.75rem; position: relative; }
.guia { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: .6rem; min-height: 15.5rem; padding: 1.35rem; background: #fff; border: 1px solid var(--linea); border-radius: 1.1rem; box-shadow: var(--sombra); text-decoration: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .22s ease; }
.guia-icono { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .85rem; background: var(--marfil-2); border: 1px solid var(--linea); }
.guia-icono svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guia-icono .acento { stroke: var(--coral-texto); }
.guia h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.guia p { color: var(--suave); font-size: .95rem; line-height: 1.5; }
.metas { display: flex; flex-wrap: wrap; gap: .4rem; }
.meta { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.75rem; padding: .15rem .65rem; border-radius: 99px; background: var(--marfil-2); border: 1px solid var(--linea); font-size: .8rem; font-weight: 650; color: var(--azul); }
.meta svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guia-pie { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; color: var(--coral-texto); }
.guia-pie svg { width: 1rem; height: 1rem; transition: transform .2s ease; }

/* ───────── Secciones generales ───────── */
.seccion { padding-block: 3.5rem; }
.seccion-cab { max-width: 42rem; margin-bottom: 2rem; }
.seccion-cab h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-bottom: .7rem; }
.seccion-cab p { color: var(--suave); }
.bajo-pliegue { content-visibility: auto; contain-intrinsic-size: auto 500px; }
.publicadas { display: grid; gap: 1rem; }
.publicada { display: grid; gap: .6rem; padding: 1.5rem; background: #fff; border: 1px solid var(--linea); border-radius: 1.1rem; box-shadow: var(--sombra); text-decoration: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; }
.publicada h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.publicada p { color: var(--suave); }
.publicada .tipo { font-size: .85rem; font-weight: 700; color: var(--coral-texto); }
.metodo { display: grid; gap: 1rem; }
.metodo li { padding: 1.25rem 1.35rem; background: var(--marfil-2); border: 1px solid var(--linea); border-radius: 1rem; }
.metodo strong { display: block; margin-bottom: .3rem; font-size: 1.05rem; }
.metodo span { color: var(--suave); font-size: .95rem; }

/* Firma */
.firma { display: grid; gap: 1.25rem; align-items: center; margin-top: 1.5rem; padding: 1.5rem; background: var(--azul); color: var(--marfil); border-radius: 1.25rem; box-shadow: var(--sombra-alta); }
.firma-id { display: flex; align-items: center; gap: 1rem; }
.avatar { display: grid; place-items: center; flex: none; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--azul-2); color: var(--marfil); font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 3px var(--azul), 0 0 0 5px var(--coral); }
.firma-nombre { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.firma-rol { color: #C9CFDA; font-size: .92rem; }
.firma-texto { color: #D9DDE5; font-size: .95rem; line-height: 1.55; max-width: 36rem; }
.firma a { color: var(--marfil); font-weight: 700; }

/* ───────── Artículos ───────── */
.art-cab { padding-block: 1.5rem 1.5rem; }
.migas { display: flex; flex-wrap: wrap; gap: 0 .6rem; margin-bottom: 1.5rem; font-size: .88rem; color: var(--suave); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; }
.art-tipo { display: inline-block; margin-bottom: .9rem; padding: .2rem .7rem; border-radius: 99px; background: rgb(232 93 74 / .14); color: var(--coral-texto); font-size: .85rem; font-weight: 750; }
.art-cab h1 { font-size: clamp(1.95rem, 4.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.035em; max-width: 34ch; margin-bottom: 1.1rem; }
.art-lede { font-size: 1.2rem; line-height: 1.55; color: var(--suave); max-width: 44rem; margin-bottom: 1.25rem; }
.art-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.25rem; font-size: .9rem; color: var(--suave); }
.art-meta strong { color: var(--azul); }
.etiqueta-publi { display: block; max-width: 44rem; margin: 0 0 1.5rem; padding: .85rem 1rem; border-left: 5px solid var(--coral); border-radius: .3rem .7rem .7rem .3rem; background: rgb(232 93 74 / .1); font-size: .95rem; line-height: 1.5; }
.etiqueta-publi strong { font-weight: 800; }
.art-grid { display: grid; gap: 2rem; padding-bottom: 3rem; }
.toc-lateral { display: none; }
.toc-movil { border: 1px solid var(--linea); border-radius: .9rem; background: #fff; }
.toc-movil summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .5rem 1rem; font-weight: 700; cursor: pointer; list-style: none; }
.toc-movil summary::-webkit-details-marker { display: none; }
.toc-movil summary::after { content: ""; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.toc-movil[open] summary::after { transform: rotate(-135deg); }
.toc-movil nav { padding: 0 1rem .75rem; }
.toc a { display: block; padding: .45rem 0; line-height: 1.35; text-decoration: none; font-size: .95rem; }
.toc a:hover { text-decoration: underline; }
.toc-t { font-size: 1rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -.01em; }
.prosa { min-width: 0; font-size: 1.125rem; line-height: 1.72; }
.prosa > section { margin-bottom: 3rem; }
.prosa h2 { font-size: clamp(1.7rem, 3.6vw, 2.25rem); margin-bottom: 1rem; scroll-margin-top: 1rem; }
.prosa h3 { font-size: 1.3rem; letter-spacing: -.025em; margin: 1.75rem 0 .6rem; }
.prosa p, .prosa ul, .prosa ol, .prosa h3, .prosa .nota, .prosa details { max-width: var(--medida); }
.prosa p { margin-bottom: 1.15em; }
.prosa ul, .prosa ol { padding-left: 1.35rem; margin-bottom: 1.15em; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li { margin-block: .4rem; padding-left: .2rem; }
.prosa li::marker { color: var(--coral-texto); }
.prosa a { color: var(--coral-texto); text-decoration: underline; font-weight: 600; }
.prosa strong { font-weight: 700; }
.prosa code { font-family: var(--f-mono); font-size: .88em; padding: .1rem .35rem; border-radius: .3rem; background: var(--marfil-2); border: 1px solid var(--linea); }
.prosa pre { max-width: 100%; margin: 0 0 1.4em; padding: 1rem 1.1rem; overflow-x: auto; border-radius: .9rem; background: var(--azul); color: #E8E3D9; font: .88rem/1.6 var(--f-mono); tab-size: 2; }
.prosa :not(pre) > code { overflow-wrap: anywhere; } /* los identificadores largos en línea no deben desbordar en móvil */
.prosa pre code { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; }
.prosa .nota { margin-bottom: 1.4em; padding: .9rem 1.1rem; border-left: 4px solid var(--azul); background: var(--marfil-2); border-radius: .3rem .8rem .8rem .3rem; font-size: 1rem; line-height: 1.6; }
.prosa details { margin-bottom: .75rem; padding: .35rem 1rem; background: #fff; border: 1px solid var(--linea); border-radius: .8rem; }
.prosa summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.prosa details p { margin-block: .25rem .9rem; }
.tabla-wrap { margin: 0 0 1.6rem; overflow-x: auto; border: 1px solid var(--linea); border-radius: 1rem; background: #fff; box-shadow: var(--sombra); max-width: 100%; }
.tabla-wrap table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .92rem; line-height: 1.45; }
.tabla-wrap caption { text-align: left; padding: .9rem 1rem .4rem; font-size: .88rem; color: var(--suave); }
.tabla-wrap th, .tabla-wrap td { padding: .8rem .85rem; text-align: left; vertical-align: top; border-top: 1px solid var(--linea); }
.tabla-wrap thead th { background: var(--marfil-2); font-size: .85rem; color: var(--suave); border-top: 0; }
.tabla-wrap tbody th { font-weight: 800; }
.tabla-wrap th small, .tabla-wrap td small { display: block; font-weight: 500; margin-top: .3rem; color: var(--suave); font-size: .82rem; }
.tabla-aviso { display: none; margin: 0 0 .5rem; font-size: .85rem; color: var(--suave); }

/* Herramientas (datos de data/herramientas.json) */
.herramientas { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.herr { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .75rem; padding: 1.35rem; background: #fff; border: 1px solid var(--linea); border-radius: 1.1rem; box-shadow: var(--sombra); }
.herr h3 { margin: 0; font-size: 1.5rem; }
.herr .cat { font-size: .85rem; font-weight: 650; color: var(--suave); }
.herr .precio { font-size: .95rem; font-weight: 650; }
.herr ul { padding-left: 1.1rem; margin: 0; font-size: .95rem; line-height: 1.5; max-width: none; }
.herr li { margin-block: .25rem; }
.herr-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.herr-acciones a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--coral-texto); text-decoration: underline; }
.herr-sin-enlace { font-size: .9rem; color: var(--suave); }

/* Espacios publicitarios reservados (AdSense futuro). Las reglas por ID se generan en la compilación. */
.ad-reserva { display: grid; place-items: center; margin-block: 2.5rem; border: 1px dashed var(--linea); border-radius: .8rem; background: var(--marfil-2); color: var(--suave); font-size: .8rem; text-align: center; }
.ad-reserva > span { padding: .5rem 1rem; }
.ad-reserva[data-ads="propio"] { display: block; place-items: stretch; border: 0; background: none; text-align: left; }
/* House ad: tarjeta editorial propia que llena exactamente la reserva de 250 px. */
.casa { width: 100%; display: grid; align-content: center; justify-items: start; gap: 1.1rem; box-sizing: border-box; height: 250px; padding: 1.25rem 1.35rem; background: var(--azul); color: var(--marfil); border-radius: 1.1rem; box-shadow: var(--sombra); overflow: hidden; }
.casa-t { margin: 0 0 .35rem; font-size: clamp(1.2rem, 4.6vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.casa-d { margin: 0; max-width: 34rem; color: #D9DDE5; font-size: .95rem; line-height: 1.45; }
@media (min-width: 720px) { .casa { grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; gap: 2rem; padding: 2rem 2.25rem; } }

/* ───────── Banner nativo de afiliación (Make) ─────────
   Toda la tarjeta es un enlace; sin imágenes ni fuentes externas, así que no desplaza el contenido (CLS = 0). */
.banner-afi, .prosa a.banner-afi, article a.banner-afi { position: relative; display: grid; gap: .9rem; box-sizing: border-box; width: 100%; max-width: 100%; margin: 2rem 0; padding: 1.5rem 1.35rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 1.1rem; background: #0F172A; color: #FAF7F2 !important; font-weight: 400; text-decoration: none !important; box-shadow: 0 1px 2px rgb(15 23 42 / .12), 0 12px 32px rgb(15 23 42 / .22); contain: layout style; overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease; }
.banner-afi:hover, .banner-afi:focus-visible { border-color: rgb(232 93 74 / .55); box-shadow: 0 1px 2px rgb(15 23 42 / .12), 0 16px 40px rgb(15 23 42 / .3); }
.banner-afi:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.banner-afi-badge { display: inline-flex; align-items: center; gap: .45rem; justify-self: start; max-width: 100%; padding: .3rem .75rem; border-radius: 99px; background: rgb(232 93 74 / .16); color: #FFB4A8; font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.banner-afi-badge svg { width: .95rem; height: .95rem; flex: none; }
.banner-afi-t { display: block; color: #FFFFFF; font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.banner-afi-v { display: grid; gap: .5rem; }
.banner-afi-v > span { display: flex; align-items: flex-start; gap: .55rem; color: #D9DDE5; font-size: .98rem; line-height: 1.4; }
.banner-afi-v svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .1rem; color: #7CD7A5; }
.banner-afi-cta { justify-self: stretch; margin-top: .25rem; font-size: 1.02rem; }
.banner-afi:hover .banner-afi-cta { background: #D04836; box-shadow: 0 4px 12px rgba(232, 93, 74, 0.35); }
.banner-afi-nota { color: #9AA3B5; font-size: .78rem; }
@media (min-width: 720px) { .banner-afi { padding: 2rem 2.25rem; } .banner-afi-v { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .banner-afi-cta { justify-self: start; } }
/* CTA de afiliado dentro de la tabla resumen */
.btn-tabla { display: flex; width: max-content; max-width: 100%; margin-top: .6rem; min-height: 44px; padding: .55rem .9rem; font-size: .9rem; white-space: normal; text-align: center; }

/* ───────── Páginas legales y de autoridad ───────── */
.legal { max-width: 52rem; padding-block: 2rem 4rem; }
.legal h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 1rem; letter-spacing: -.04em; }
.legal .actualizado { color: var(--suave); font-size: .92rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.6rem; margin: 2.25rem 0 .75rem; }
.legal h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; letter-spacing: -.02em; }
.legal p, .legal ul, .legal ol { margin-bottom: 1rem; max-width: 68ch; line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 1.35rem; }
.legal ol { list-style: decimal; padding-left: 1.35rem; }
.legal li { margin-block: .3rem; }
.legal a { color: var(--coral-texto); font-weight: 600; text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pendiente { padding: .1rem .45rem; border-radius: .35rem; background: #FFE9A8; color: #4D3600; font-weight: 700; }
.legal .tabla-wrap table { min-width: 36rem; }

/* ───────── Consentimiento de cookies ───────── */
.cmp { position: fixed; z-index: 70; left: .75rem; right: .75rem; bottom: .75rem; max-width: 46rem; margin-inline: auto; padding: 1.1rem 1.2rem; background: var(--marfil); color: var(--azul); border: 2px solid var(--azul); border-radius: 1rem; box-shadow: var(--sombra-alta); }
.cmp[hidden] { display: none; }
.cmp-t { margin-bottom: .35rem; font-size: 1.05rem; font-weight: 800; }
.cmp-d { margin-bottom: .9rem; font-size: .92rem; line-height: 1.5; color: var(--suave); }
.cmp-d a { color: var(--coral-texto); font-weight: 650; }
.cmp-botones { display: flex; gap: .75rem; }
/* «Aceptar» y «Rechazar todas» comparten clase, jerarquía, tamaño y color. */
.cmp-btn { flex: 1 1 0; min-height: 48px; padding: .7rem 1rem; border: 2px solid var(--azul); border-radius: .7rem; background: var(--azul); color: var(--marfil); font-weight: 700; font-size: 1rem; cursor: pointer; }
.cmp-btn:hover { background: var(--azul-2); }
.cmp-btn:focus-visible { outline-color: var(--coral); outline-offset: 3px; }

/* ───────── Pie ───────── */
.pie { margin-top: 2rem; padding-block: 2.5rem 1.5rem; border-top: 1px solid var(--linea); font-size: .9rem; }
.pie-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 3rem; }
.pie p { color: var(--suave); margin-top: .3rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pie nav a, .pie nav button { display: inline-flex; align-items: center; min-height: 44px; }
.pie nav button { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.pie-nota { width: 100%; font-size: .8rem; }
.respiro { height: 3.5rem; } /* espacio de seguridad para insignias o banners fijos */

/* ───────── Interacción y movimiento reducido ───────── */
@media (hover: hover) {
  .guia:hover, .publicada:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); border-color: rgb(15 30 54 / .28); }
  .guia:hover .guia-pie svg { transform: translateX(4px); }
  .btn:hover { transform: translateY(-2px); }
  .btn:hover svg { transform: translateX(3px); }
}
.guia:focus-visible, .publicada:focus-visible { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .guia:hover, .publicada:hover, .btn:hover { transform: none !important; }
  .pulso, .anillo { opacity: 0; }
}

/* ───────── Pantallas anchas ───────── */
@media (min-width: 720px) {
  .guias { grid-template-columns: repeat(3, 1fr); }
  .publicadas { grid-template-columns: repeat(2, 1fr); }
  .metodo { grid-template-columns: repeat(3, 1fr); }
  .herramientas { grid-template-columns: repeat(2, 1fr); }
  .firma { grid-template-columns: auto 1fr; gap: 2rem; padding: 1.75rem 2rem; }
}
@media (min-width: 960px) {
  .hero { padding-block: 2.5rem 4.5rem; }
  .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 3.5rem; }
  .svg-h { display: block; }
  .svg-v { display: none; }
  .flujo { padding: 1.5rem 1.5rem 1.25rem; }
  .flujo svg.svg-h { margin-block: 1.25rem .5rem; }
}
@media (min-width: 1000px) {
  .art-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; }
  .toc-lateral { display: block; position: sticky; top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; padding-left: 1rem; border-left: 3px solid var(--coral); }
  .toc-movil { display: none; }
}
@media (min-width: 1200px) { .herramientas { grid-template-columns: repeat(2, 1fr); } }

/* Móvil: la tabla comparativa se convierte en fichas apiladas (sin desplazamiento horizontal) */
@media (max-width: 720px) {
  .tabla-apilable:not(.tabla-densa) { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .tabla-apilable:not(.tabla-densa) table { min-width: 0; }
  .tabla-apilable:not(.tabla-densa) table, .tabla-apilable:not(.tabla-densa) tbody, .tabla-apilable:not(.tabla-densa) tr, .tabla-apilable:not(.tabla-densa) th, .tabla-apilable:not(.tabla-densa) td { display: block; }
  .tabla-apilable:not(.tabla-densa) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-apilable:not(.tabla-densa) tr { margin-bottom: 1rem; padding: .35rem 0; border: 1px solid var(--linea); border-radius: 1rem; background: #fff; box-shadow: var(--sombra); }
  .tabla-apilable:not(.tabla-densa) th, .tabla-apilable:not(.tabla-densa) td { padding: .55rem 1rem; border: 0; }
  .tabla-apilable:not(.tabla-densa) td::before { content: attr(data-etiqueta); display: block; margin-bottom: .15rem; font-size: .8rem; font-weight: 700; color: var(--suave); }
  .tabla-apilable:not(.tabla-densa) tbody th { font-size: 1.25rem; }
  .tabla-apilable:not(.tabla-densa) caption { display: block; padding: 0 0 .85rem; }
}
@media (max-width: 640px) {
  .seccion { padding-block: 2.75rem; }
  .guia { min-height: 0; }
  .respiro { height: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .nav { gap: 0 1.1rem; }
  .flujo-cab { font-size: .82rem; }
  .prosa { font-size: 1.0625rem; }
  .cmp-botones { flex-direction: column; }
}
.ancla { display: block; scroll-margin-top: 1rem; }

/* ───────── Calculadoras (auditoría de costes) ───────── */
.calc { margin: 0 0 1.8rem; padding: 1.25rem; border: 1px solid var(--linea); border-radius: 1rem; background: #fff; box-shadow: var(--sombra); max-width: 100%; }
.calc h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.calc > p { margin: 0 0 1rem; font-size: .95rem; color: var(--suave); }
.calc-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .85rem 1rem; margin-bottom: 1.2rem; }
.calc-campos label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 700; }
.calc-campos small { font-weight: 500; color: var(--suave); font-size: .8rem; line-height: 1.35; }
.calc-campos input { width: 100%; min-height: 48px; padding: .6rem .75rem; border: 1px solid rgb(15 30 54 / .35); border-radius: .6rem; background: var(--marfil); color: var(--azul); font: inherit; font-size: 1rem; font-weight: 600; }
.calc-campos input:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.calc-resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; margin: 0; }
.calc-resultados > div { padding: .8rem .9rem; border-radius: .8rem; background: var(--marfil-2); }
.calc-resultados dt { font-size: .8rem; font-weight: 700; color: var(--suave); line-height: 1.3; }
.calc-resultados dd { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-resultados output { display: block; min-height: 1.6em; }
.calc-destacado { background: var(--azul) !important; }
.calc-destacado dt, .calc-destacado dd { color: var(--marfil); }
.calc-pie { margin: 1rem 0 0; font-size: .85rem; color: var(--suave); }

/* ───────── Conversión: hero, confianza, veredicto, temas ───────── */
.btn-grande { min-height: 54px; padding: .85rem 1.5rem; font-size: 1.05rem; }
.btn-secundario { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn-secundario:hover { background: var(--azul); color: var(--marfil); }
.acciones-cro { gap: .75rem 1rem; margin-bottom: .75rem; }
.acciones-nota { margin-bottom: 1.25rem; font-size: .88rem; color: var(--suave); max-width: 34rem; }
.etq-afi { display: inline-block; margin-right: .35rem; padding: .05rem .5rem; border-radius: 99px; background: rgb(232 93 74 / .12); color: var(--coral-texto); font-size: .75rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.confianza { display: grid; gap: .75rem; margin-top: 2.25rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--linea); border-radius: 1rem; box-shadow: var(--sombra); }
.confianza li { display: grid; gap: .1rem; padding-left: 1.6rem; position: relative; font-size: .9rem; line-height: 1.4; }
.confianza li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--azul); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--azul); }
.confianza strong { font-weight: 800; }
.confianza span { color: var(--suave); }
.veredicto { margin: 1.75rem 0; padding: 1.15rem 1.25rem; max-width: var(--medida); border: 2px solid var(--azul); border-radius: 1rem; background: #fff; box-shadow: var(--sombra); }
.contenedor > .veredicto { max-width: none; }
.veredicto-t { margin-bottom: .4rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-texto); }
.veredicto p { margin-bottom: .75rem; }
.veredicto p:last-child { margin-bottom: 0; }
.veredicto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.prosa .veredicto a.btn-azul { color: var(--marfil); text-decoration: none; }
.temas { display: grid; gap: 1rem; }
.tema-tarjeta { display: grid; gap: .5rem; height: 100%; padding: 1.35rem; background: #fff; border: 1px solid var(--linea); border-radius: 1.1rem; box-shadow: var(--sombra); text-decoration: none; }
.tema-tarjeta h3 { font-size: 1.3rem; }
.tema-tarjeta p { color: var(--suave); font-size: .95rem; }
.tema .seccion-cab h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: .7rem; }
.tema .migas { margin-bottom: 1.25rem; }
.tema-sub { margin: 2rem 0 1rem; font-size: 1.6rem; }
.otros-temas { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; margin-top: 2rem; }
.otros-temas p { font-weight: 700; }
.otros-temas a { display: inline-flex; align-items: center; min-height: 44px; }
.pie-temas { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.pie-temas a { display: inline-flex; align-items: center; min-height: 44px; }

/* ───────── Diagramas SVG (tamaño fijo por viewBox: CLS = 0) ───────── */
.diagrama { margin: 0 0 1.6rem; padding: 1rem; background: #fff; border: 1px solid var(--linea); border-radius: 1.1rem; box-shadow: var(--sombra); }
.diagrama svg { width: 100%; height: auto; }
.diagrama-flujo svg, .diagrama-arquitectura svg { aspect-ratio: 640 / 360; }
.diagrama-costes svg { aspect-ratio: 640 / 300; }
.diagrama figcaption { margin-top: .75rem; font-size: .85rem; line-height: 1.5; color: var(--suave); }
.diagrama figcaption a { color: var(--coral-texto); }
.diagrama text { font-family: var(--f); fill: var(--azul); font-size: 22px; font-weight: 700; }
.diagrama text.sub { font-size: 17px; font-weight: 500; fill: var(--suave); }
.iso-bloque .cara-sup { fill: #fff; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; }
.iso-bloque .cara-izq { fill: #E4E8EF; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; }
.iso-bloque .cara-der { fill: #C9D0DC; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; }
.iso-central .cara-sup { fill: #FBE3DF; }
.iso-central .cara-izq { fill: var(--coral); }
.iso-central .cara-der { fill: #C9483A; }
.iso-cable path { fill: none; stroke: var(--azul); stroke-width: 2.5; stroke-dasharray: 7 6; }
.iso-punto circle { fill: var(--coral); }
.arq-cable path { stroke: rgb(15 30 54 / .35); stroke-width: 2.5; }
.arq-nodo rect { fill: var(--marfil); stroke: var(--azul); stroke-width: 2; }
.arq-nodo text { font-size: 19px; }
.arq-centro circle { fill: var(--azul); }
.arq-centro text { fill: var(--marfil); font-size: 26px; }
.arq-centro text.sub { fill: #C9CFDA; font-size: 17px; }
.dg-et { font-size: 20px; }
.dg-fondo { fill: var(--marfil-2); }
.barra-make { fill: var(--coral); }
.barra-otra { fill: var(--azul); }
.diagrama .dg-valor { font-size: 20px; font-weight: 800; }
.diagrama .dg-inc { font-size: 17px; font-weight: 600; fill: var(--suave); }
.diagramas-portada { display: grid; gap: 1.25rem; }
.hero .diagrama-flujo { margin: 0; }

/* ───────── Impactos de conversión (fijos, empiezan ocultos: sin desplazamiento de diseño) ───────── */
.imp-modal[hidden], .imp-barra[hidden], .imp-cierre[hidden] { display: none; }
.imp-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.5rem; background: rgb(15 30 54 / .55); }
.imp-modal-caja { position: relative; width: min(100%, 30rem); padding: 2rem 1.75rem 1.5rem; background: var(--marfil); color: var(--azul); border-radius: 1.25rem; box-shadow: var(--sombra-alta); animation: imp-entra .25s ease-out; }
.imp-sello { display: inline-block; margin-bottom: .75rem; padding: .2rem .7rem; border-radius: 99px; background: rgb(232 93 74 / .12); color: var(--coral-texto); font-size: .8rem; font-weight: 800; }
.imp-modal-t { margin-bottom: .5rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.imp-modal-d { margin-bottom: 1.25rem; color: var(--suave); }
.imp-cta { width: 100%; }
.imp-nota { margin-top: .75rem; font-size: .82rem; color: var(--suave); }
.imp-ahora-no { min-height: 44px; padding: 0 .25rem; border: 0; background: none; color: var(--azul); font-weight: 700; text-decoration: underline; cursor: pointer; }
.imp-cerrar { position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--azul); cursor: pointer; }
.imp-cerrar:hover { background: var(--marfil-2); }
.imp-cerrar svg { width: 1.2rem; height: 1.2rem; }
.imp-barra { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 5.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: .6rem; padding: .5rem .5rem .5rem 1rem; background: var(--azul); color: var(--marfil); box-shadow: 0 -8px 24px rgb(15 30 54 / .18); animation: imp-sube .25s ease-out; }
.imp-barra-t { font-size: .85rem; line-height: 1.35; overflow: hidden; max-height: 3.5rem; }
.imp-barra .etq-afi { background: rgb(250 247 242 / .15); color: #FFD9D2; }
.imp-barra-cta { min-height: 44px; padding: .55rem .9rem; font-size: .92rem; white-space: nowrap; }
.imp-cerrar-barra { position: static; color: var(--marfil); }
.imp-cerrar-barra:hover { background: rgb(250 247 242 / .12); }
.imp-cierre { position: fixed; z-index: 61; right: 1rem; left: 1rem; bottom: 1rem; max-width: 22rem; margin-left: auto; padding: 1.25rem 1.25rem 1rem; background: #fff; border: 2px solid var(--azul); border-radius: 1.1rem; box-shadow: var(--sombra-alta); animation: imp-sube .25s ease-out; }
.imp-con-barra .imp-cierre { bottom: 6.25rem; }
.imp-cierre-t { margin: 0 2.5rem .35rem 0; font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.imp-cierre-d { margin-bottom: .9rem; font-size: .92rem; color: var(--suave); }
@keyframes imp-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes imp-sube { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 720px) {
  .confianza { grid-template-columns: repeat(4, 1fr); }
  .temas { grid-template-columns: repeat(3, 1fr); }
  .imp-barra { height: 4.25rem; padding-left: 1.5rem; }
  .imp-barra-t { font-size: .95rem; }
  .imp-con-barra .imp-cierre { bottom: 5.25rem; }
}
@media (min-width: 1024px) {
  .imp-modal { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .diagramas-portada { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .imp-modal-caja, .imp-barra, .imp-cierre { animation: none; }
}
.hero-texto { min-width: 0; }
.btn-grande { white-space: normal; text-align: center; }
.hero-texto h1 { font-size: clamp(2.1rem, 9.5vw, 4.6rem); hyphens: auto; overflow-wrap: break-word; }

/* ───────── Calculadora de ahorro (los resultados cambian de texto, no de tamaño: CLS = 0) ───────── */
.calc-ahorro { margin: 0 0 1.8rem; padding: 1.25rem; max-width: 100%; border: 2px solid var(--azul); border-radius: 1.1rem; background: #fff; box-shadow: var(--sombra); }
.calc-ahorro-t { margin-bottom: .35rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.calc-ahorro-d { margin-bottom: 1rem; font-size: .95rem; color: var(--suave); }
.calc-ahorro-control label { display: block; margin-bottom: .4rem; font-weight: 700; }
.calc-ahorro-control output { font-variant-numeric: tabular-nums; color: var(--coral-texto); }
.calc-ahorro input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--coral); }
.calc-ahorro-escala { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: .8rem; color: var(--suave); }
.calc-ahorro-ajustes { display: grid; gap: .9rem; margin-bottom: 1.1rem; }
.calc-ahorro-ajustes > label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 700; }
.calc-ahorro-ajustes small { font-weight: 500; color: var(--suave); font-size: .8rem; line-height: 1.35; }
.calc-ahorro-ajustes input[type="number"] { width: 8rem; min-height: 48px; padding: .6rem .75rem; border: 1px solid rgb(15 30 54 / .35); border-radius: .6rem; background: var(--marfil); color: var(--azul); font: inherit; font-weight: 600; }
.calc-ahorro fieldset { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; border: 0; }
.calc-ahorro legend { margin-bottom: .2rem; padding: 0; font-size: .9rem; font-weight: 700; }
.calc-ahorro fieldset label { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .95rem; }
.calc-ahorro-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.1rem; }
.calc-ahorro-res > div { padding: .7rem .8rem; border-radius: .8rem; background: var(--marfil-2); }
.calc-ahorro-res dt { font-size: .78rem; font-weight: 700; color: var(--suave); line-height: 1.3; }
.calc-ahorro-res dd { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-ahorro-res output { display: block; min-height: 1.5em; }
.calc-ahorro-dest { background: var(--azul) !important; }
.calc-ahorro-dest dt, .calc-ahorro-dest dd { color: var(--marfil); }
.calc-ahorro-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .9rem; }
.calc-ahorro-cta .btn { white-space: normal; text-align: center; }
.calc-ahorro-tabla { margin-bottom: .75rem; }
.calc-ahorro-tabla summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.calc-ahorro .calc-pie { font-size: .82rem; line-height: 1.5; color: var(--suave); }
.calc-ahorro .calc-pie a { color: var(--coral-texto); }
@media (min-width: 720px) { .calc-ahorro { padding: 1.6rem 1.75rem; } .calc-ahorro-ajustes { grid-template-columns: 1fr auto; align-items: end; } .calc-ahorro-res { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ───────── Micro-banners contextuales (estilo SaaS oscuro; altura mínima reservada) ───────── */
.micro-banner { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 1.25rem 1.35rem; min-height: 11rem; max-width: var(--medida); border-radius: 1.1rem; color: #F3F1EC; background: linear-gradient(120deg, #0F1E36 0%, #1C2F52 55%, #3A2D4F 100%); box-shadow: var(--sombra-alta); contain: layout style; }
.micro-banner-t { margin-bottom: .35rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.micro-banner-d { font-size: .93rem; line-height: 1.5; color: #D4D8E1; }
.micro-banner-accion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.micro-banner .btn { white-space: normal; text-align: center; }
.micro-banner .etq-afi { background: rgb(250 247 242 / .14); color: #FFD9D2; }
@media (min-width: 720px) { .micro-banner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 8.5rem; } .micro-banner-accion { flex-direction: column; align-items: flex-end; } }
.prosa .diagrama { max-width: var(--medida); }
@media (max-width: 400px) { .calc-ahorro-res dd { font-size: 1.02rem; } }

/* ───────── Ajuste visual (Dark Glassmorphism, «winner highlight», cifras monoespaciadas) ───────── */
:root { --f-cifras: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --vidrio: rgba(15, 23, 42, 0.92); --vidrio-borde: rgba(255, 255, 255, 0.12); --vidrio-texto: #E2E8F0; --vidrio-suave: #CBD5E1; --indigo: #6366F1; --esmeralda: #10B981; }
/* Impactos: cristal oscuro con desenfoque (con respaldo sólido si el navegador no admite backdrop-filter) */
.imp-modal-caja, .imp-barra, .imp-cierre { background: var(--vidrio); color: var(--vidrio-texto); border: 1px solid var(--vidrio-borde); box-shadow: 0 10px 30px rgb(2 6 23 / .28), 0 2px 6px rgb(2 6 23 / .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .imp-modal-caja, .imp-barra, .imp-cierre { background: #0F172A; } }
.imp-modal { background: rgb(2 6 23 / .45); }
.imp-modal-caja { border-radius: 1rem; }
.imp-modal-t, .imp-cierre-t, .imp-barra-t strong { color: #F8FAFC; }
.imp-modal-d, .imp-cierre-d, .imp-nota, .imp-barra-t { color: var(--vidrio-suave); }
.imp-sello { background: rgb(16 185 129 / .16); color: #6EE7B7; }
.imp-modal .etq-afi, .imp-cierre .etq-afi, .imp-barra .etq-afi { background: rgb(255 255 255 / .1); color: #FECACA; }
.imp-ahora-no { color: #F8FAFC; }
.imp-cerrar { color: var(--vidrio-texto); }
.imp-cerrar:hover { background: rgb(255 255 255 / .08); }
.imp-micro { margin-top: .55rem; font-size: .78rem; color: var(--vidrio-suave); text-align: center; }
.imp-cierre { border-radius: 1rem; border-width: 1px; }
/* La barra inferior pasa a ser un dock flotante redondeado (respeta la zona segura de iOS) */
.imp-barra { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); max-width: 52rem; margin-inline: auto; border-radius: 1rem; }
.imp-con-barra .imp-cierre { bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
.respiro { height: calc(7rem + env(safe-area-inset-bottom, 0px)); } /* espacio reservado para el dock y el aviso de cookies */
@media (min-width: 720px) {
  .imp-barra { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .imp-con-barra .imp-cierre { bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) { .respiro { height: calc(7rem + env(safe-area-inset-bottom, 0px)); } }
/* Micro-texto bajo los CTA de afiliado */
.cta-micro { display: block; flex-basis: 100%; margin-top: .1rem; font-size: .78rem; color: var(--suave); }
.hero-micro { margin: -.75rem 0 1.25rem; }
.micro-banner .cta-micro { color: #CBD5E1; }
.micro-banner-accion .cta-micro { text-align: inherit; }
@media (min-width: 720px) { .micro-banner-accion .cta-micro { text-align: right; } }
/* Winner highlight sobre Make (valoración propia) */
.insignia-ganador { display: inline-block; margin: 0 0 .35rem; padding: .1rem .55rem; border-radius: 99px; background: rgb(16 185 129 / .12); color: #047857; font-size: .72rem; font-weight: 800; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; }
.tabla-wrap tr.fila-ganadora > * { background: rgb(99 102 241 / .06); }
.tabla-wrap tr.fila-ganadora > th { box-shadow: inset 3px 0 0 var(--indigo); }
.tabla-wrap tr.fila-ganadora .insignia-ganador { display: table; }
@media (max-width: 720px) { .tabla-apilable tr.fila-ganadora { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo), var(--sombra); } .tabla-apilable tr.fila-ganadora > * { background: transparent; } .tabla-apilable tr.fila-ganadora > th { box-shadow: none; } }
.calc-ganador { margin: 0 0 .6rem; min-height: 1.6rem; font-size: .82rem; color: var(--suave); visibility: hidden; }
.calc-ahorro:has(.make-gana) .calc-ganador { visibility: visible; }
.calc-ahorro-res.make-gana .calc-ahorro-make { box-shadow: inset 0 0 0 1.5px var(--indigo); }
/* Cifras: monoespaciada del sistema, sin descargar fuentes */
.calc-ahorro-res dd, .calc-ahorro-control output, .calc-ahorro-tabla td, .tabla-wrap td[data-etiqueta="Precio de entrada"] { font-family: var(--f-cifras); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.calc-ahorro-res dd { font-size: 1.05rem; }
@media (max-width: 400px) { .calc-ahorro-res dd { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .imp-modal-caja, .imp-barra, .imp-cierre { animation: none; } }
.imp-micro .cta-micro { color: var(--vidrio-suave); }
.tabla-wrap td[data-etiqueta="Precio de entrada"]::before, .tabla-wrap td[data-etiqueta="Precio de entrada"] small { font-family: var(--f); letter-spacing: normal; }

/* ───────── Paleta «Obsidian & Electric Violet» ───────── */
:root { --obsidiana: #0F172A; --noche: #0B0F19; --violeta: #7C3AED; --violeta-2: #9333EA; --rosa-coste: #F43F5E; --vidrio: rgba(15, 23, 42, 0.94); --vidrio-borde: rgba(255, 255, 255, 0.10); --vidrio-texto: #F8FAFC; }
/* Impactos: cristal oscuro (blur 16 px) */
.imp-modal-caja, .imp-barra, .imp-cierre { background: var(--vidrio); color: var(--vidrio-texto); border: 1px solid var(--vidrio-borde); box-shadow: 0 12px 32px rgb(2 6 23 / .3), 0 2px 8px rgb(2 6 23 / .2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .imp-modal-caja, .imp-barra, .imp-cierre { background: #0F172A; } }
.imp-modal-t, .imp-cierre-t, .imp-barra-t, .imp-barra-t strong { color: #F8FAFC; }
/* CTA principales de afiliado en violeta eléctrico (texto blanco: contraste ≥ 5,6:1) */
a.btn.btn-coral[data-aff="make"], a.btn.btn-coral[data-aff="make"]:link, a.btn.btn-coral[data-aff="make"]:visited, .banner-afi .banner-afi-cta { background: linear-gradient(135deg, var(--violeta) 0%, var(--violeta-2) 100%); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 16px rgb(124 58 237 / .28); }
a.btn.btn-coral[data-aff="make"]:hover, a.btn.btn-coral[data-aff="make"]:focus-visible { background: linear-gradient(135deg, #6D28D9 0%, #7E22CE 100%); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 8px 20px rgb(124 58 237 / .34); }
/* Ganador y ahorro en verde esmeralda; sobrecoste de la competencia en rosa */
.barra-make { fill: #10B981; }
.barra-otra { fill: var(--rosa-coste); }
.calc-ahorro-dest { background: #065F46 !important; }
.calc-ahorro-res.make-gana .calc-ahorro-make { box-shadow: inset 0 0 0 1.5px #10B981; }
.tabla-wrap tr.fila-ganadora > th { box-shadow: inset 3px 0 0 #10B981; }
.tabla-wrap tr.fila-ganadora > * { background: rgb(16 185 129 / .06); }
@media (max-width: 720px) { .tabla-apilable tr.fila-ganadora { border-color: #10B981; box-shadow: 0 0 0 1px #10B981, var(--sombra); } }

/* ───────── Placas de ingeniería (bento) para los diagramas ───────── */
.diagrama { position: relative; padding: 0 1rem 1rem; border-radius: 16px; border: 1px solid rgb(15 23 42 / .12); background-color: #fff; background-image: radial-gradient(rgb(15 23 42 / .09) 1px, transparent 1.2px); background-size: 16px 16px; }
.placa-cab { margin: 0 -1rem .75rem; padding: .55rem 1rem; border-bottom: 1px solid rgb(15 23 42 / .1); border-radius: 16px 16px 0 0; background: rgb(255 255 255 / .92); font-family: var(--f-cifras); font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: #475569; }
.placa-cab span { color: var(--violeta); }
.diagrama figcaption { margin: .85rem -1rem -1rem; padding: .75rem 1rem; border-top: 1px dashed rgb(15 23 42 / .14); border-radius: 0 0 16px 16px; background: rgb(255 255 255 / .94); }

/* ───────── Veredicto rápido en bento (3 placas) ───────── */
.veredicto-bento { border: 1px solid rgb(15 23 42 / .14); border-radius: 16px; }
.bento { display: grid; gap: .75rem; margin: .35rem 0 1rem; }
.placa { padding: .9rem 1rem; border-radius: 16px; border: 1px solid rgb(15 23 42 / .1); background-color: #F8FAFC; background-image: radial-gradient(rgb(15 23 42 / .07) 1px, transparent 1.2px); background-size: 14px 14px; }
.placa-et { margin: 0 0 .2rem !important; font-family: var(--f-cifras); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.placa-cifra { margin: 0 0 .3rem !important; font-family: var(--f-cifras); font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 800; color: var(--obsidiana); }
.placa-d { margin: 0 !important; font-size: .86rem; line-height: 1.45; color: #475569; }
.placa-gana { border-color: rgb(16 185 129 / .55); }
.placa-gana .placa-cifra, .placa-ahorro .placa-cifra { color: #047857; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────── Micro-banners «Ruptura SaaS» ───────── */
.micro-banner[data-estilo="ruptura"] { display: block; min-height: 15rem; padding: 1.15rem 1.2rem; background: var(--noche); border: 1px solid rgb(255 255 255 / .08); border-radius: 16px; box-shadow: 0 10px 28px rgb(2 6 23 / .22); }
.micro-banner[data-estilo="ruptura"] .micro-banner-t { margin-bottom: .8rem; }
.ruptura { display: grid; gap: .5rem; align-items: center; }
.ruptura-bloque { padding: .75rem .9rem; border-radius: 12px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08); }
.ruptura-et { font-family: var(--f-cifras); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #CBD5E1; }
.ruptura-cifra { font-family: var(--f-cifras); font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 800; }
.ruptura-zapier .ruptura-cifra { color: #FDA4AF; }
.ruptura-make .ruptura-cifra { color: #6EE7B7; }
.ruptura-zapier { box-shadow: inset 3px 0 0 var(--rosa-coste); }
.ruptura-make { box-shadow: inset 3px 0 0 #10B981; }
.ruptura-d { font-size: .82rem; line-height: 1.4; color: #CBD5E1; }
.ruptura-flecha { justify-self: center; color: #94A3B8; font-size: 1.1rem; transform: rotate(90deg); }
.micro-banner[data-estilo="ruptura"] .micro-banner-accion { flex-direction: column; align-items: stretch; text-align: center; gap: .4rem; }
.micro-banner[data-estilo="ruptura"] .cta-micro { text-align: center; color: #CBD5E1; }
.ruptura-fuente { margin-top: .8rem; font-size: .75rem; line-height: 1.4; color: #94A3B8; }
@media (min-width: 720px) {
  .micro-banner[data-estilo="ruptura"] { min-height: 12rem; }
  .ruptura { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto; }
  .ruptura-flecha { transform: none; }
}
.ruptura { align-items: stretch; }
.ruptura-flecha { align-self: center; }
.ruptura-cifra { font-size: 1.1rem; white-space: nowrap; }
.hero-texto h1 { hyphens: manual; }
/* H1 de la portada: «Automatización» cabe entero sin partirse en cualquier ancho */
.hero-texto h1 { font-size: clamp(2rem, 10vw, 3.8rem); overflow-wrap: normal; }
@media (min-width: 960px) { .hero-texto h1 { font-size: clamp(2.6rem, 4.6vw, 3.8rem); } }

/* ───────── Euros junto al precio oficial en dólares ───────── */
.calc-alt { display: block; min-height: 1.3em; margin-top: .1rem; font-family: var(--f); font-size: .74rem; font-weight: 600; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-ahorro-dest .calc-alt { color: #D1FAE5; }
.calc-ahorro-res dd { min-height: 3.1em; }
.calc-divisa label { font-weight: 700; }
.precio-eur { display: block; margin-top: .2rem; font-family: var(--f); font-size: .8rem; color: #047857; }
.nota-eur { display: block; margin-top: .4rem; font-size: .76rem; line-height: 1.45; color: var(--suave); }
.nota-eur a { color: var(--coral-texto); }
.tabla-nota-eur { margin: -.6rem 0 1.4rem; max-width: var(--medida); }
.micro-banner .nota-eur, .ruptura-fuente .nota-eur { color: #94A3B8; }
.micro-banner .nota-eur a { color: #C4B5FD; }
.micro-banner[data-estilo="ruptura"] { min-height: 18rem; }
@media (min-width: 720px) { .micro-banner[data-estilo="ruptura"] { min-height: 14.5rem; } }
.pie-eur { grid-column: 1 / -1; max-width: 60rem; } .pie-eur .nota-eur { color: inherit; opacity: .85; }
.imp-barra-t { max-height: none; }
@media (max-width: 719px) { .imp-barra { height: 5.75rem; } .imp-barra-t { font-size: .8rem; line-height: 1.3; } .imp-con-barra .imp-cierre { bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px)); } .respiro { height: calc(7.5rem + env(safe-area-inset-bottom, 0px)); } }

/* ───────── Versión B: placas de imagen, baraja apilada, sello de verificación, patrón de nodos ───────── */
.placa-img { position: relative; margin: 0 0 1.6rem; padding: .5rem; border-radius: 16px; background: #0F172A; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px -18px rgb(124 58 237 / .35), 0 6px 18px rgb(2 6 23 / .18); }
.placa-img::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, rgb(124 58 237 / .18), transparent 60%); }
.placa-img img { position: relative; display: block; width: 100%; height: auto; border-radius: 11px; }
.prosa .placa-img { max-width: var(--medida); }
.placa-cabecera { margin: 0 0 1.75rem; }
.hero .placa-img { margin: 0; }
.baraja { position: relative; }
.baraja-hojas { position: relative; aspect-ratio: 1200 / 790; margin: 0; padding: 0; list-style: none; cursor: pointer; }
.hoja { position: absolute; inset: 0 0 auto 0; transform-origin: 50% 0; transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1), opacity .7s cubic-bezier(0.22, 1, 0.36, 1); }
.hoja .placa-img { margin: 0; }
.hoja[data-pos="0"] { z-index: 3; transform: none; }
.hoja[data-pos="1"] { z-index: 2; transform: translateY(7%) scale(.94); opacity: .92; }
.hoja[data-pos="2"] { z-index: 1; transform: translateY(14%) scale(.88); opacity: .8; }
.baraja-sig { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; padding: .4rem .9rem; border: 1px solid rgb(15 23 42 / .2); border-radius: 99px; background: #fff; color: var(--azul); font-weight: 700; font-size: .85rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hoja { transition: none; } }
.sello-verificado { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .25rem .75rem; border-radius: 99px; background: rgb(16 185 129 / .1); color: #047857; font-size: .82rem; font-weight: 700; }
.sello-punto { width: .55rem; height: .55rem; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgb(16 185 129 / .2); }
.seccion-cab .sello-verificado { margin-top: -.25rem; }
.precio-eur { font-family: var(--f-cifras); font-variant-numeric: tabular-nums; color: #047857; }
/* Pop-ups: cristal oscuro liso, sin imágenes ni patrones de fondo detrás del texto y del CTA. */
.imp-modal-caja, .imp-barra, .imp-cierre { background-image: none; }
/* Proporción fija por tamaño declarado: aunque el archivo tenga otras medidas, la placa no cambia de forma (CLS = 0) */
.placa-img img { object-fit: cover; }
.img-1200x675 { aspect-ratio: 1200 / 675; }
.img-1000x625 { aspect-ratio: 1000 / 625; }
.img-1200x514 { aspect-ratio: 1200 / 514; }


/* ═════════ Rediseño de revista: portada, artículo en 3 columnas, banners IAB y tarjetas ═════════ */
:root { --noche-1: #0B0F19; --noche-2: #0F172A; --noche-3: #1E1B4B; --noche-4: #312E81; }
[hidden] { display: none !important; }

/* Hero de la portada: solo el diagrama técnico FIG 01, sobre fondo oscuro que no compite con el H1 ni el CTA */
.hero .diagrama-flujo { padding: 0 1rem 1rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 1.25rem; background-color: var(--noche-2); background-image: linear-gradient(160deg, var(--noche-1), var(--noche-2) 55%, var(--noche-3)); box-shadow: 0 18px 40px -20px rgb(2 6 23 / .6); color: #E2E8F0; }
.hero .diagrama-flujo .placa-cab { background: rgb(255 255 255 / .05); border-bottom-color: rgb(255 255 255 / .1); color: #CBD5E1; }
.hero .diagrama-flujo .placa-cab span { color: #A5B4FC; }
.hero .diagrama-flujo text { fill: #F1F5F9; }
.hero .diagrama-flujo text.sub { fill: #94A3B8; }
.hero .diagrama-flujo .iso-bloque .cara-sup { fill: #1E293B; stroke: #94A3B8; }
.hero .diagrama-flujo .iso-bloque .cara-izq { fill: #172033; stroke: #94A3B8; }
.hero .diagrama-flujo .iso-bloque .cara-der { fill: #0F172A; stroke: #94A3B8; }
.hero .diagrama-flujo .iso-central .cara-sup { fill: #FDBA74; stroke: #FDBA74; }
.hero .diagrama-flujo .iso-central .cara-izq { fill: var(--coral); stroke: var(--coral); }
.hero .diagrama-flujo .iso-central .cara-der { fill: #C9483A; stroke: #C9483A; }
.hero .diagrama-flujo .iso-cable path { stroke: #64748B; }
.hero .diagrama-flujo figcaption { border-top-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .04); color: #CBD5E1; }
.hero .diagrama-flujo figcaption a { color: #FCA5A5; }

/* Tarjetas de artículo (portada, temas y relacionados): miniatura 16:9 (400 x 225), título y extracto */
.post-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--linea); border-radius: 1.1rem; box-shadow: var(--sombra); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) { .post-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); } }
.post-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.mini { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--noche-2); background-image: linear-gradient(135deg, var(--noche-1), var(--noche-3) 62%, #4C1D95); }
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-etq { position: absolute; left: .9rem; bottom: .8rem; padding: .15rem .6rem; border-radius: 99px; background: rgb(255 255 255 / .12); color: #E2E8F0; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.post-cuerpo { display: grid; align-content: start; gap: .45rem; padding: 1.05rem 1.2rem 1.25rem; }
.post-cuerpo .tipo { font-size: .8rem; font-weight: 700; color: var(--coral-texto); }
.post-cuerpo h3 { font-size: 1.15rem; line-height: 1.22; letter-spacing: -.02em; }
.post-cuerpo p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--suave); font-size: .95rem; line-height: 1.5; }
.post-grid-mini .post-cuerpo p { display: none; }
.post-grid-mini .post-cuerpo h3 { font-size: 1rem; }

/* Cabecera del artículo: fondo oscuro corporativo, H1 en blanco y la autora debajo */
.art-cab-oscura { padding: 1.25rem 0 2.25rem; background-color: var(--noche-2); background-image: linear-gradient(135deg, var(--noche-1), var(--noche-2) 58%, var(--noche-3)); color: #F8FAFC; }
.art-cab-oscura .migas { margin-bottom: 1rem; color: #94A3B8; }
.art-cab-oscura .migas a { color: #CBD5E1; }
.art-cab-oscura h1 { color: #FFFFFF; margin-bottom: 1rem; }
.art-cab-oscura .art-tipo { background: rgb(255 255 255 / .1); color: #E2E8F0; }
.art-cab-oscura .etiqueta-publi { background: rgb(255 255 255 / .07); border-left-color: var(--coral); color: #E2E8F0; }
.art-cab-oscura .etiqueta-publi a { color: #FCA5A5; }
.art-autor { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; color: #CBD5E1; font-size: .92rem; line-height: 1.45; }
.art-autor .avatar { width: 2.5rem; height: 2.5rem; font-size: .9rem; background: var(--noche-4); box-shadow: 0 0 0 2px rgb(255 255 255 / .2); }
.art-autor a { color: #FFFFFF; font-weight: 700; }
.art-cab-oscura .art-lede { margin: 0; color: #CBD5E1; font-size: 1.1rem; }

/* Banners de afiliado IAB: degradado oscuro CSS de respaldo; la imagen .webp, si existe, se superpone */
.banner-fondo { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; background-image: linear-gradient(135deg, var(--noche-1), var(--noche-3) 60%, var(--noche-4)); }
.banner-fondo img { width: 100%; height: 100%; object-fit: cover; }
.banner-lb .banner-fondo img { object-position: right center; } /* en móvil el banner crece en alto: se ven los nodos de la derecha */
.banner-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 15 25 / .78), rgb(11 15 25 / .45)); }
.banner-lb, .banner-lado { position: relative; isolation: isolate; overflow: hidden; color: #F8FAFC; border: 1px solid rgb(255 255 255 / .1); }
.banner-lb .etq-afi, .banner-lado .etq-afi, .cta-final .etq-afi { background: rgb(255 255 255 / .12); color: #FECACA; }
.banner-lb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; width: 100%; max-width: 728px; min-height: 90px; margin: 1.25rem auto 0; padding: .75rem 1.1rem; border-radius: .75rem; }
.banner-lb-t { flex: 1 1 15rem; margin: 0; max-width: 34ch; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.banner-lb-accion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.banner-lb .btn { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; }
@media (max-width: 640px) { .banner-lb { flex-direction: column; align-items: flex-start; } .banner-lb-accion { width: 100%; } .banner-lb .btn { flex: 1 1 auto; } }
.banner-lado { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .6rem; width: 100%; max-width: 300px; min-height: 400px; padding: 1.25rem; border-radius: 1rem; }
.banner-lado .banner-fondo::after { background: linear-gradient(180deg, rgb(11 15 25 / .35), rgb(11 15 25 / .9)); }
.banner-lado-t { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.banner-lado-d { margin: 0; color: #CBD5E1; font-size: .92rem; line-height: 1.45; }
.banner-lado .btn { width: 100%; }
/* El banner lateral 300 x 400 solo existe con la columna derecha (escritorio): en móvil ya está la caja final con el CTA */
@media (max-width: 1099px) { .banner-lado { display: none; } }

/* Artículo en 3 columnas: índice sticky | texto | resumen y banner sticky */
@media (min-width: 1000px) { .art-grid { grid-template-columns: minmax(0, 1fr); } .toc-lateral { display: none; } .toc-movil { display: block; } }
.art-grid { width: min(100% - 2.5rem, 80rem); padding-top: 2rem; }
.art-lado { display: grid; gap: 1rem; align-content: start; }
.lado-resumen { padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--linea); border-radius: 1rem; box-shadow: var(--sombra); }
.lado-resumen h2 { margin-bottom: .6rem; font-size: 1rem; letter-spacing: -.01em; }
.lado-resumen ul { display: grid; gap: .35rem; margin-bottom: .75rem; }
.lado-resumen li { display: flex; justify-content: space-between; gap: .75rem; font-size: .88rem; color: var(--suave); }
.lado-resumen strong { color: var(--azul); text-align: right; }
.lado-enlace { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; color: var(--azul); }
.lado-enlace svg { width: 1rem; height: 1rem; }
@media (min-width: 1100px) {
  .art-grid { grid-template-columns: 13.5rem minmax(0, 1fr) 18.75rem; gap: 2.5rem; }
  .toc-lateral { display: block; position: sticky; top: 1.5rem; align-self: start; }
  .toc-movil { display: none; }
  .art-lado { position: sticky; top: 1.5rem; align-self: start; }
}

/* Imagen técnica única a mitad del artículo (800 x 450) */
.art-img { margin: 1.75rem 0; max-width: var(--medida); }
.art-img img { display: block; width: 100%; height: auto; border-radius: .8rem; border: 1px solid var(--linea); object-fit: cover; }
.img-800x450 { aspect-ratio: 800 / 450; }
.img-400x225 { aspect-ratio: 400 / 225; }

/* Final del artículo: autora + CTA limpio (sin imagen de fondo) y artículos relacionados */
.art-final { display: grid; gap: 1.25rem; padding-block: 0 3rem; }
.art-final .firma { margin-top: 0; }
.cta-final { display: grid; justify-items: start; align-content: center; gap: .6rem; padding: 1.5rem; border-radius: 1.25rem; color: #F8FAFC; background-color: var(--noche-3); background-image: linear-gradient(135deg, var(--noche-3), var(--noche-4) 65%, #4C1D95); }
.cta-final-t { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.cta-final-d { margin: 0 0 .4rem; color: #E0E7FF; font-size: .95rem; line-height: 1.5; }
.art-relacionados { margin-top: .75rem; }
.art-relacionados h2 { margin-bottom: 1rem; font-size: 1.5rem; }
@media (min-width: 720px) { .art-final { grid-template-columns: 1.4fr 1fr; } .art-relacionados { grid-column: 1 / -1; } }
.art-cab-oscura .sello-verificado { background: rgb(16 185 129 / .14); color: #A7F3D0; }
.art-cab-oscura .sello-verificado .sello-punto { background: #34D399; }
.img-728x90 { aspect-ratio: 728 / 90; }
.img-300x400 { aspect-ratio: 300 / 400; }

/* Plantilla pública de Make: bloque práctico en el texto (sin imágenes, altura fijada por su propio contenido: CLS 0) */
.plantilla-make { max-width: var(--medida); margin: 1.6rem 0 2rem; padding: 1.25rem 1.35rem 1.3rem; border: 1px solid var(--linea); border-left: 4px solid var(--violeta); border-radius: .4rem 1rem 1rem .4rem; background: var(--marfil-2); box-shadow: var(--sombra); contain: layout style; }
.plantilla-eyebrow { margin: 0 0 .4rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.plantilla-eyebrow span { color: var(--violeta); font-weight: 700; }
.prosa .plantilla-t { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--azul); }
.prosa .plantilla-d { margin: 0 0 .6rem; font-size: 1rem; }
.prosa .plantilla-nombre { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.5; color: var(--suave); }
.plantilla-nombre cite { font-style: normal; font-weight: 700; color: var(--azul); }
.plantilla-url { font-family: var(--f-mono); font-size: .8rem; overflow-wrap: anywhere; }
.prosa .plantilla-pasos { margin: 0 0 .8rem; padding-left: 1.4rem; }
.prosa .plantilla-pasos li { margin-bottom: .35rem; font-size: 1rem; line-height: 1.55; }
.prosa .plantilla-nota { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: .5rem; background: rgb(124 58 237 / .07); font-size: .92rem; line-height: 1.5; }
.prosa .plantilla-accion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0; }
.plantilla-accion .btn { white-space: normal; text-align: center; }
/* Mientras carga (o si faltara) una imagen con hueco reservado, el hueco es de la paleta oscura, nunca azul ni vacío */
img[data-slot] { background-color: var(--noche-2); color: #CBD5E1; }


/* ═════════ Remate V2: hero con fondo, caja de veredicto, «De un vistazo», banners IAB y pop-ups discretos ═════════ */
/* Fondo temático con desenfoque suave (16 px) y superposición oscura; sin archivo queda el degradado. */
.art-cab-oscura, .hero-oscuro { position: relative; isolation: isolate; overflow: hidden; }
.hero-fondo { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; background-image: linear-gradient(135deg, var(--noche-1), var(--noche-2) 58%, var(--noche-3)); }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px); transform: scale(1.1); }
.hero-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 15 25 / .72), rgb(11 15 25 / .88)); }
.img-1600x600 { aspect-ratio: 1600 / 600; }
.art-cab-in { position: relative; }

/* Portada: hero oscuro con H1 en blanco */
.hero-oscuro { color: #F8FAFC; padding-block: 1.5rem 3.5rem; }
.hero-oscuro::before { display: none; }
.hero-oscuro .hero-texto h1 { color: #FFFFFF; }
.hero-oscuro .lede, .hero-oscuro .acciones-nota, .hero-oscuro .hero-micro, .hero-oscuro .responsable { color: #CBD5E1; }
.hero-oscuro .responsable a, .hero-oscuro .acciones-nota a { color: #FFFFFF; }
.hero-oscuro .etiqueta-publi { background: rgb(255 255 255 / .07); color: #E2E8F0; border-left-color: var(--coral); }
.hero-oscuro .etiqueta-publi a { color: #FCA5A5; }
.hero-oscuro .sello-verificado { background: rgb(16 185 129 / .14); color: #A7F3D0; }
.hero-oscuro .btn-secundario { background: transparent; color: #F8FAFC; border-color: rgb(255 255 255 / .4); }
.hero-oscuro .etq-afi { background: rgb(255 255 255 / .12); color: #FECACA; }
.hero-oscuro .cta-micro { color: #CBD5E1; }

/* Cabecera del artículo compacta: H1, autora, aviso de una línea y caja de veredicto dentro del primer pantallazo */
.art-cab-oscura { padding: .75rem 0 1.5rem; }
.art-cab-oscura .migas { margin-bottom: .35rem; }
.art-cab-oscura .art-tipo { margin-bottom: .5rem; }
.art-cab-oscura h1 { font-size: clamp(1.6rem, 4.2vw, 2.7rem); margin-bottom: .75rem; }
.etiqueta-linea { max-width: none; margin: 0 0 .9rem; padding: .5rem .8rem; font-size: .85rem; line-height: 1.4; }
.art-autor { margin-bottom: .75rem; }
.veredicto-caja { display: grid; gap: .75rem; max-width: 52rem; margin: 0 0 .9rem; padding: 1rem 1.15rem; border: 1px solid rgb(255 255 255 / .16); border-radius: 1rem; background: rgb(15 23 42 / .72); color: #F8FAFC; }
.vc-t { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.vc-et { display: block; margin-bottom: .15rem; color: #A5B4FC; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vc-datos { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.vc-datos li { display: grid; font-size: .85rem; color: #CBD5E1; }
.vc-datos strong { color: #FFFFFF; font-size: .95rem; }
.vc-accion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.vc-accion .btn { min-height: 48px; }
.veredicto-caja .etq-afi { background: rgb(255 255 255 / .12); color: #FECACA; }
@media (min-width: 720px) { .veredicto-caja { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; } .art-cab-oscura { padding: 1rem 0 1.75rem; } }
@media (max-width: 719px) {
  .art-cab-oscura .migas, .art-cab-oscura .art-tipo, .art-cab-oscura .sello-verificado { display: none; }
  .art-autor { font-size: .8rem; margin-bottom: .5rem; }
  .art-autor .avatar { display: none; }
  .etiqueta-linea { margin-bottom: .6rem; padding: .4rem .6rem; font-size: .78rem; line-height: 1.3; }
  .veredicto-caja { gap: .5rem; padding: .7rem .8rem; margin-bottom: 0; }
  .vc-t { font-size: .98rem; margin-bottom: .3rem; }
  .vc-et { display: none; }
  .vc-datos li { font-size: .75rem; } .vc-datos strong { font-size: .85rem; }
  .vc-accion .btn { width: 100%; min-height: 46px; }
  .vc-accion .etq-afi { display: none; }
}
.art-lede { margin: 0 0 1.5rem; font-size: 1.15rem; line-height: 1.55; color: var(--suave); }

/* «De un vistazo» */
.vistazo { margin-bottom: 2rem; }
.vistazo td small { display: block; margin-top: .2rem; color: var(--suave); font-size: .8rem; }
.vz-cta { display: block; margin-top: .5rem; }
.vz-cta .btn { min-height: 44px; padding: .45rem .9rem; font-size: .9rem; }

/* Banners IAB: leaderboard 728 x 90 (≥ 720 px), Medium Rectangle 300 x 250 (lateral ≥ 1100 px, integrado entre 720 y 1099 px) y 320 x 50 en móvil */
.banner-fila { margin-top: 1rem; }
.banner-fila .banner-lb { margin: 0 auto; }
@media (max-width: 719px) { .banner-fila { display: none; } }
.banner-mr { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .4rem; width: 300px; max-width: 100%; height: 250px; padding: 1rem; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: .9rem; color: #F8FAFC; }
.banner-mr .banner-fondo::after { background: linear-gradient(180deg, rgb(11 15 25 / .35), rgb(11 15 25 / .9)); }
.banner-mr .etq-afi { background: rgb(255 255 255 / .12); color: #FECACA; }
.banner-mr-t { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.banner-mr-d { margin: 0; color: #CBD5E1; font-size: .88rem; line-height: 1.35; }
.banner-mr .btn { width: 100%; min-height: 44px; padding: .45rem .9rem; font-size: .95rem; }
.banner-mr-inline { display: none; margin: 1.5rem auto; }
@media (min-width: 720px) and (max-width: 1099px) { .banner-mr-inline { display: flex; } .banner-mr-lado { display: none; } }
@media (max-width: 719px) { .banner-mr-inline, .banner-mr-lado { display: none; } }
.banner-m320 { position: relative; isolation: isolate; display: none; align-items: center; justify-content: space-between; gap: .5rem; width: 320px; max-width: 100%; height: 50px; margin: 1.5rem auto 0; padding: 0 .5rem 0 .75rem; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: .5rem; color: #F8FAFC; }
.banner-m320 .banner-fondo::after { background: rgb(11 15 25 / .6); }
.banner-m320-t { margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.2; }
.banner-m320 .btn { min-height: 40px; padding: .25rem .8rem; font-size: .85rem; flex: none; }
@media (max-width: 719px) { .banner-m320 { display: flex; } }
.img-300x250 { aspect-ratio: 300 / 250; }
.img-320x50 { aspect-ratio: 320 / 50; }

/* House ads en medidas IAB: 300 x 250 en pantallas anchas y 320 x 50 en móvil (reserva fija: CLS 0) */
.ad-reserva { display: flex; justify-content: center; }
.casa { width: 300px; max-width: 100%; height: 250px; grid-template-columns: 1fr; align-content: space-between; gap: .75rem; padding: 1rem; border-radius: .9rem; }
.casa-t { font-size: 1.15rem; }
.casa-d { font-size: .88rem; }
.casa .btn { justify-self: stretch; min-height: 44px; }
@media (min-width: 720px) { .casa { grid-template-columns: 1fr; padding: 1rem; gap: .75rem; justify-items: stretch; } }
@media (max-width: 719px) {
  .ad-reserva { margin-block: 1.25rem; }
  .casa { width: 320px; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .5rem 0 .75rem; border-radius: .5rem; }
  .casa-d { display: none; }
  .casa-t { margin: 0; font-size: .8rem; line-height: 1.2; letter-spacing: 0; }
  .casa .btn { min-height: 40px; padding: .25rem .8rem; font-size: .85rem; flex: none; }
}

/* Pop-ups discretos: la barra inferior no supera el 30 % de la altura de la pantalla */
.imp-barra { max-height: 30vh; }
.casa { margin-inline: auto; }

/* Móvil: cabecera del sitio y caja de veredicto más compactas para que el botón de afiliado quede sin hacer scroll */
@media (max-width: 719px) {
  .cab { padding-block: .35rem; gap: 0; }
  .marca { min-height: 40px; font-size: 1.05rem; }
  .marca svg { width: 1.8rem; height: 1.8rem; }
  .nav { flex-wrap: nowrap; width: 100%; overflow-x: auto; gap: 0 1.1rem; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; white-space: nowrap; min-height: 40px; font-size: .9rem; }
  .art-cab-oscura { padding-top: .5rem; padding-bottom: 1rem; }
  .art-cab-oscura h1 { font-size: 1.45rem; margin-bottom: .45rem; }
  .art-autor { margin-bottom: .4rem; }
  .etiqueta-linea { font-size: .72rem; padding: .3rem .5rem; margin-bottom: .45rem; }
  .vc-datos { gap: 0 .9rem; }
  .vc-datos li span { display: none; }
  .vc-t { margin-bottom: .2rem; }
}
.banner-lb { height: 90px; min-height: 90px; flex-wrap: nowrap; padding-block: 0; }
.banner-lb-t { flex: 1 1 auto; min-width: 0; font-size: .95rem; }
@media (max-width: 719px) { .banner-lb { height: auto; } }
.banner-m320 .etq-afi { margin-right: .3rem; padding: 0 .35rem; font-size: .6rem; background: rgb(255 255 255 / .14); color: #FECACA; }
.banner-m320-t { flex: 1 1 auto; min-width: 0; }

/* ═════════ Capturas reales bajo los H2 y banners con logotipo de Make ═════════ */
.img-real { margin: 1rem 0 1.6rem; max-width: var(--medida); }
.img-real img { display: block; width: 100%; height: auto; border-radius: .7rem; border: 1px solid var(--linea); background: #fff; box-shadow: var(--sombra); }
.img-real figcaption { margin-top: .55rem; font-size: .82rem; line-height: 1.45; color: var(--suave); }
.img-real .img-fuente { display: block; margin-top: .15rem; font-size: .78rem; }
.img-real .img-fuente a { color: var(--suave); }
.make-logo { display: block; flex: none; width: auto; }
/* Leaderboard 728 x 90: logotipo, mensaje, botón y marca de afiliado; el recorte del editor de Make asoma entre el texto y el botón */
.banner-lb { gap: .8rem; padding-inline: 14px; }
.make-logo-lb { width: 26px; height: 26px; }
.banner-lb-t { flex: 0 1 258px; font-size: .88rem; line-height: 1.25; }
.banner-lb-accion { flex: none; margin-left: auto; flex-direction: column; align-items: flex-end; gap: 3px; }
.banner-lb .etq-afi { margin: 0; font-size: .66rem; }
/* Medium Rectangle 300 x 250: logotipo y marca arriba, mensaje y botón abajo, captura del editor en el centro */
.banner-mr { justify-content: flex-start; align-items: stretch; gap: 0; padding: 12px 14px 14px; }
.banner-mr-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.make-logo-mr { width: 22px; height: 22px; }
.banner-mr .etq-afi { margin: 0; font-size: .66rem; }
.banner-mr-t { margin: auto 0 8px; font-size: 1.02rem; line-height: 1.2; }
/* Banner móvil 320 x 50 */
.banner-m320 { gap: 6px; padding: 0 8px; }
.make-logo-m { width: 22px; height: 22px; }
.banner-m320-t { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .7rem; line-height: 1.2; }
.banner-m320-t .etq-afi { display: block; width: max-content; margin: 0 0 1px; padding: 0 .3rem; font-size: .52rem; line-height: 1.3; }
.banner-m320 .btn { min-height: 38px; padding: .2rem .7rem; font-size: .8rem; }

/* Hero con captura real de fondo: desenfoque de 16 px y capa oscura más densa para que el H1 y el texto se lean siempre */
.hero-fondo img { filter: blur(16px) brightness(.6) saturate(1.25); }
.hero-fondo::after { background: linear-gradient(180deg, rgb(11 15 25 / .55), rgb(15 23 42 / .86)); }

/* Fondo de hero con captura real: más capa oscura para que el texto pequeño (migas, avisos) se lea siempre, también sobre zonas claras de la captura */
.hero-fondo img { filter: blur(16px) brightness(.6) saturate(1.3); }
.hero-fondo::after { background: linear-gradient(180deg, rgb(11 15 25 / .68), rgb(15 23 42 / .9)); }
/* Portada: el hero abarca varias pantallas; la captura ocupa la parte superior (sin ampliarla hasta volverla un borrón) y se funde con el degradado */
.hero-oscuro .hero-fondo img { height: 920px; object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }

/* ───────── Remate de la versión B (23 oct 2026) ───────── */
/* Cabeceras con imagen de fondo: se distinguen los nodos e interfaces reales (desenfoque de 2,5 px, sin resplandor claro) y el texto
   sigue legible gracias a una capa oscura limpia: más cerrada a la izquierda, donde va el texto, que a la derecha. */
.hero-fondo { background: #0B0F19; }
.hero-fondo img { filter: blur(2.5px); opacity: .35; transform: scale(1.02); }
.hero-fondo::after { background: linear-gradient(90deg, rgb(11 15 25 / .85) 0%, rgb(11 15 25 / .45) 100%); }

/* Cajas claras dentro de la cabecera oscura: texto oscuro explícito (heredaban el blanco de .hero-oscuro y no se leían). */
.hero-oscuro .veredicto, .hero-oscuro .guias, .hero-oscuro .confianza { color: #0F172A; }
.hero-oscuro .veredicto .cta-micro { color: #334155; }
.hero-oscuro .veredicto .etq-afi { background: rgb(124 58 237 / .12); color: #5B21B6; }
.hero-oscuro .guia p { color: var(--suave); }
/* CTA de afiliado del veredicto: botón morado sólido con texto blanco. */
a.btn.btn-coral.btn-violeta, a.btn.btn-coral.btn-violeta:link, a.btn.btn-coral.btn-violeta:visited, a.btn.btn-coral.btn-violeta[data-aff="make"] { background: #7C3AED; box-shadow: 0 6px 16px rgb(124 58 237 / .28); }
a.btn.btn-coral.btn-violeta:hover, a.btn.btn-coral.btn-violeta:focus-visible, a.btn.btn-coral.btn-violeta[data-aff="make"]:hover { background: #6D28D9; }

/* Logotipos oficiales de Make, n8n y Zapier (iconos cuadrados decorativos; el nombre va siempre al lado). */
.logo-herr { display: inline-block; flex: none; border-radius: 22%; vertical-align: middle; }
.herr-nombre { display: inline-flex; align-items: center; gap: .5rem; }
.hero-oscuro .logo-herr, .imp-barra .logo-herr { box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }
.placa-cifra .logo-herr { margin-right: .45rem; transform: translateY(-2px); }
.placa-logos { display: inline-flex; gap: .25rem; margin-left: .55rem; vertical-align: middle; }
.dg-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .5rem 0 0; font-size: .85rem; color: var(--suave); }
.dg-leyenda .herr-nombre { font-weight: 700; color: var(--azul); }
.imp-barra-t { display: flex; align-items: center; gap: .7rem; }

/* Hero de la portada: captura real y nítida del editor de Make con los logotipos de las tres plataformas. */
.escenario-hero { margin: 0; padding: 0 1rem 1rem; border: 1px solid rgb(255 255 255 / .12); border-radius: 1.25rem; background-color: var(--noche-2); background-image: linear-gradient(160deg, var(--noche-1), var(--noche-2) 55%, var(--noche-3)); box-shadow: 0 18px 40px -20px rgb(2 6 23 / .6); color: #E2E8F0; }
.escenario-hero .placa-cab { background: rgb(255 255 255 / .05); border-bottom-color: rgb(255 255 255 / .1); color: #CBD5E1; }
.escenario-hero .placa-cab span { color: #A5B4FC; }
.esc-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin: 0 0 .85rem; }
.esc-etq { flex-basis: 100%; font-family: var(--f-cifras); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.esc-logo { display: inline-flex; align-items: center; gap: .5rem; }
.esc-logo b { font-size: 1rem; font-weight: 800; color: #F8FAFC; }
.esc-img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 419; border-radius: .8rem; background: #F8F8F8; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6); }
.escenario-hero figcaption { margin-top: .8rem; font-size: .8rem; line-height: 1.5; color: #CBD5E1; }
.escenario-hero figcaption a { color: #C4B5FD; }

/* Tablas comparativas anchas (6 y 7 columnas): compactas para que quepan enteras en la columna de texto (684 px en escritorio).
   Si el hueco es menor aún, se muestran como fichas apiladas: consulta de contenedor, porque el hueco depende de las 3 columnas del artículo. */
.tabla-cont { container-type: inline-size; container-name: tabla; }
.tabla-densa table { min-width: 0; font-size: .8rem; }
.tabla-densa th, .tabla-densa td { padding: .55rem .4rem; }
.tabla-densa thead th { font-size: .7rem; }
.tabla-densa .btn-tabla { width: auto; min-height: 40px; padding: .45rem .7rem; font-size: .82rem; }
.tabla-densa .insignia-ganador { white-space: normal; }
@container tabla (max-width: 41rem) {
  .tabla-densa.tabla-apilable { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .tabla-densa table { font-size: .95rem; }
  .tabla-densa table, .tabla-densa tbody, .tabla-densa tr, .tabla-densa th, .tabla-densa td { display: block; }
  .tabla-densa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-densa tr { margin-bottom: 1rem; padding: .35rem 0; border: 1px solid var(--linea); border-radius: 1rem; background: #fff; box-shadow: var(--sombra); }
  .tabla-densa th, .tabla-densa td { padding: .55rem 1rem; border: 0; }
  .tabla-densa td::before { content: attr(data-etiqueta); display: block; margin-bottom: .15rem; font-size: .8rem; font-weight: 700; color: var(--suave); }
  .tabla-densa tbody th { font-size: 1.25rem; }
  .tabla-densa caption { display: block; padding: 0 0 .85rem; }
  .tabla-densa .btn-tabla { min-height: 44px; padding: .55rem .9rem; font-size: .9rem; }
  .tabla-densa tr.fila-ganadora { border-color: #10B981; box-shadow: 0 0 0 1px #10B981, var(--sombra); }
  .tabla-densa tr.fila-ganadora > * { background: transparent; box-shadow: none; }
}

/* Contraste (WCAG AA, 4,5:1): coral más oscuro en los botones con texto blanco, botón azul dentro del texto y etiqueta «Enlace de afiliado» sobre fondo claro. */
.btn-coral { background: #C8402F; }
.btn-coral:hover, .btn-coral:focus-visible { background: #B73A29; }
.prosa a.btn-azul, article a.btn-azul { color: var(--marfil); text-decoration: none; }
.etq-afi { color: #A3321F; }
.tabla-densa .btn-tabla svg { display: none; }
@container tabla (max-width: 41rem) { .tabla-densa .btn-tabla svg { display: block; } }

/* Barra inferior en móvil: dos filas (texto con el icono de Make y cierre arriba; el botón a todo el ancho abajo), para que el texto
   y la etiqueta «Enlace de afiliado» quepan enteros incluso a 320 px. */
.imp-barra-t > span { min-width: 0; }
@media (max-width: 719px) {
  .imp-barra { height: auto; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "t x" "c c"; gap: .35rem .5rem; padding: .55rem .5rem .6rem .8rem; }
  .imp-barra-t { grid-area: t; gap: .55rem; }
  .imp-cerrar-barra { grid-area: x; align-self: start; }
  .imp-barra-cta { grid-area: c; justify-self: stretch; }
  .imp-logo { width: 28px; height: 28px; }
  .imp-barra .etq-afi { margin-right: 0; }
  .respiro { height: calc(9.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ───────── Hero con placa de cristal, fondo de portada a blur(3px) y modal con indicador de ahorro (23 oct 2026) ───────── */
/* Portada: imagen de fondo (la fotografía de cabecera cuando exista imagenes/hero-foto.webp) con blur(3px) y la opacidad de siempre (.35). */
.hero-oscuro .hero-fondo img { filter: blur(3px); }
.hero-foto img { object-position: 50% 30%; }
.img-1920x1080 { aspect-ratio: 1920 / 1080; }
/* Placa de cristal translúcido tras el bloque de texto principal de la portada (H1, subtítulo, fecha y botones): contraste sin filtros pesados. */
.hero-oscuro .hero-texto { padding: 32px; background: rgba(11, 15, 25, 0.78); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-oscuro .hero-texto { background: rgba(11, 15, 25, 0.94); } }
@media (max-width: 719px) { .hero-oscuro .hero-texto { padding: 20px; } }
/* Modal de conversión: indicador de ahorro estimado frente a Zapier (barra y euros). */
.imp-modal-caja { max-height: calc(100vh - 3rem); overflow-y: auto; }
.imp-medidor { margin: 0 0 1.1rem; padding: .85rem .95rem .9rem; border: 1px solid var(--vidrio-borde); border-radius: .9rem; background: rgb(255 255 255 / .05); }
.imp-med-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin: 0 0 .5rem; font-size: .84rem; font-weight: 700; color: #F8FAFC; }
.imp-med-cab strong { font-family: var(--f-cifras); font-size: 1.5rem; line-height: 1; color: #6EE7B7; }
.imp-med-barra { display: block; width: 100%; height: auto; }
.imp-med-fondo { fill: rgb(255 255 255 / .16); }
.imp-med-valor { fill: #34D399; }
.imp-med-d { margin: .6rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--vidrio-suave); }
.imp-med-d strong { color: #F8FAFC; }
/* Dentro de la placa el texto ocupa menos ancho: titular algo menor y avisos más compactos para que el botón principal siga en la primera pantalla. */
.hero-oscuro .hero-texto h1 { font-size: clamp(1.8rem, 8.6vw, 3.2rem); margin-bottom: 1rem; }
@media (min-width: 960px) { .hero-oscuro .hero-texto h1 { font-size: clamp(2.1rem, 3.5vw, 3.2rem); } }
.hero-oscuro .hero-texto .etiqueta-publi { margin-bottom: 1.1rem; padding: .7rem .9rem; font-size: .85rem; }

/* ───────── Cierre del hero y de los impactos (24 oct 2026) ───────── */
/* Fotografía casi natural: sin desenfoque ni zoom, opacidad .88 y solo un degradado lateral suave tras la placa de cristal; la derecha, limpia. */
.hero-oscuro .hero-fondo img { filter: none; opacity: .88; transform: none; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.hero-oscuro .hero-fondo.hero-foto img { object-position: 100% 30%; }
.hero-oscuro .hero-fondo::after { background: linear-gradient(90deg, rgba(11, 15, 25, .82) 0%, rgba(11, 15, 25, .6) 28%, rgba(11, 15, 25, .16) 48%, rgba(11, 15, 25, 0) 62%); }
/* Placa de cristal: titular y subtítulo grandes, menos relleno vertical para que el botón principal siga en la primera pantalla. */
.hero-oscuro .hero-texto { padding: 24px 32px; }
@media (max-width: 719px) { .hero-oscuro .hero-texto { padding: 20px; } }
.hero-oscuro .hero-texto h1 { font-size: clamp(1.8rem, 8.6vw, 2.4rem); line-height: 1.08; margin-bottom: .9rem; }
@media (min-width: 720px) { .hero-oscuro .hero-texto h1 { font-size: clamp(2.4rem, 4.2vw, 3.5rem); } }
.hero-oscuro .hero-texto .lede { font-size: 1.2rem; line-height: 1.5; }
/* Lado derecho del hero libre: solo una píldora discreta con los logotipos de las tres plataformas, abajo a la derecha. */
.hero-grid { position: relative; }
.hero-pildora { display: none; }
@media (min-width: 960px) { .hero-pildora { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .5rem; background: rgba(11, 15, 25, .66); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.seccion .escenario-hero { max-width: 46rem; margin: 0 0 1.5rem; }
/* Modal: todo el fondo atenuado y desenfocado. */
.imp-modal { background: rgba(11, 15, 25, .65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Slide-in del 85 %: compacto, por encima de la barra en escritorio; en móvil la barra se oculta mientras está visible. */
.imp-cierre { padding: 1rem 1.1rem .9rem; }
.imp-cierre-t { margin: 0 2.25rem .3rem 0; font-size: 1.05rem; }
.imp-cierre-d { margin: 0 0 .75rem; font-size: .84rem; line-height: 1.45; }
.imp-cierre-d strong { color: #6EE7B7; }
.imp-cierre-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.imp-cierre-acc .imp-cta { width: auto; min-height: 44px; padding: .55rem 1rem; font-size: .92rem; }
@media (max-width: 719px) {
  .imp-con-cierre .imp-barra { display: none; }
  .imp-con-cierre.imp-con-barra .imp-cierre { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}
/* Márgenes y avisos más compactos dentro de la placa (el H1 y el subtítulo conservan su tamaño) para que el botón principal entre en la primera pantalla. */
.hero-oscuro .hero-texto .etiqueta-publi { margin-bottom: .75rem; padding: .6rem .8rem; font-size: .8rem; }
.hero-oscuro .hero-texto h1 { margin-bottom: .7rem; }
.hero-oscuro .hero-texto .sello-verificado { margin-bottom: .75rem; font-size: .76rem; }
.hero-oscuro .hero-texto .lede { margin-bottom: 1.1rem; }
.hero-oscuro { padding-top: 1rem; }
.hero-oscuro .hero-texto .etiqueta-publi { line-height: 1.4; }
.hero-oscuro .hero-texto h1 { margin-bottom: .6rem; }

/* ───────── Maquetación del hero, cabeceras de artículo y pop-ups (24 oct 2026, 2.ª pasada) ───────── */
/* Escritorio: la placa de cristal se pega a la izquierda (a ~40 px del borde de la pantalla) y gana ancho (≈ 54 % de la pantalla, hasta 50 rem y sin llegar a
   las gafas de la ejecutiva). El H1 y el subtítulo caben así en 2 líneas equilibradas y la placa queda mucho más baja. Los tamaños de letra salen del ancho
   real de la placa (cqw), con ~6 % de margen para que el corte en 2 líneas aguante fuentes algo más anchas. El resto del contenido del hero sigue centrado. */
@media (min-width: 960px) {
  .hero-oscuro .hero-grid { margin-inline: calc(50% - 50vw + clamp(2rem, 2.8vw, 3rem)); grid-template-columns: max(25rem, min(54vw, 50rem, 100vw - 37.5rem)) minmax(0, 1fr); gap: 0; }
  .hero-oscuro .hero-texto { container-type: inline-size; }
  .hero-oscuro .hero-texto h1 { font-size: clamp(1.9rem, 2.9vw, 2.7rem); text-wrap: balance; }
  .hero-oscuro .hero-texto .lede { max-width: none; font-size: clamp(1rem, 1.25vw, 1.15rem); text-wrap: balance; }
  .hero-oscuro .hero-texto .acciones-nota { max-width: none; }
  .hero-oscuro .hero-texto .acciones-cro { gap: .6rem .75rem; }
  .hero-oscuro .hero-texto .btn-grande { padding: .8rem 1.25rem; }
  .hero-oscuro .hero-texto .btn-secundario { padding: .7rem 1.1rem; }
}
@supports (width: 1cqw) {
  @media (min-width: 960px) {
    .hero-oscuro .hero-texto h1 { font-size: clamp(1.9rem, 5.85cqw, 2.9rem); }
    .hero-oscuro .hero-texto .lede { font-size: clamp(1rem, 2.46cqw, 1.2rem); }
    .hero-oscuro .hero-texto .btn-grande { font-size: clamp(.92rem, 2.3cqw, 1.05rem); }
    .hero-oscuro .hero-texto .btn-secundario { font-size: clamp(.88rem, 2.15cqw, .98rem); }
  }
}
/* Cabeceras oscuras de los artículos: la captura de fondo, más desenfocada y más tenue, para que no se lea ningún texto en inglés tras el H1 blanco.
   La fotografía de la portada (.hero-oscuro) no cambia. */
.art-cab-oscura .hero-fondo img { filter: blur(7px); opacity: .22; transform: scale(1.06); }
/* La barra inferior y el slide-in del 85 % no conviven (impactos.js); el slide-in tampoco pisa la píldora de logotipos del hero. */
.imp-con-cierre .hero-pildora { visibility: hidden; }

/* ───────── Hero de escritorio: placa centrada en vertical y algo más hacia el centro (≥ 960 px, 24 oct 2026) ───────── */
/* La fotografía se reduce un poco (caja de 760 px de alto en lugar de 920) para que la ejecutiva quede más a la derecha y la placa pueda acercarse sin tocar su
   cara. Las gafas empiezan en x ≈ min(ancho − 454 px, 66,4 % del ancho); la placa deja siempre 24 px de margen hasta ahí. La cuadrícula tiene alto mínimo y centra la placa. */
@media (min-width: 960px) {
  .hero-oscuro .hero-fondo img { height: 760px; }
  .hero-oscuro .hero-grid { --hero-izq: clamp(2rem, 9vw, 11rem); margin-inline: calc(50% - 50vw + var(--hero-izq)); align-items: center; min-height: clamp(34rem, 72vh, 44rem);
    grid-template-columns: max(25rem, min(54vw, 50rem, min(100vw - 454px, 66.4vw) - var(--hero-izq) - 24px)) minmax(0, 1fr); }
  .hero-oscuro .hero-pildora { bottom: .5rem; }
}

/* ───────── Cabecera y menú móvil estilo panel corporativo (< 960 px, 24 oct 2026) ───────── */
/* Barra fija y compacta: logotipo, botón píldora «Comparativa» y botón de menú. El menú es un panel claro con secciones (título y línea fina), enlaces de 48 px de alto
   y una tarjeta de llamada a la acción abajo. Desde 960 px nada de esto se ve y la cabecera es la de siempre (los envoltorios pasan a display: contents). */
.cab-cta, .menu-btn { display: none; }
.cab-panel, .nav-grupo { display: contents; }
.nav-t, .nav-card { display: none; }
@media (max-width: 959px) {
  html { scroll-padding-top: 4.5rem; }
  .cab { position: sticky; top: 0; z-index: 50; width: 100%; margin-inline: 0; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem; padding: .35rem 1.25rem; background: var(--marfil); border-bottom: 1px solid rgb(15 30 54 / .12); }
  .marca { margin-right: auto; min-height: 44px; }
  .cab-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 1rem; border-radius: 999px; background: var(--azul); color: var(--marfil); font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(15 30 54 / .16); border-radius: 999px; background: #FFFFFF; color: var(--azul); cursor: pointer; }
  .menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu-btn .mb-x, .menu-btn[aria-expanded="true"] .mb-a { display: none; }
  .menu-btn[aria-expanded="true"] .mb-x { display: block; }
  .cab-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 4rem); overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1.25rem 1.25rem; background: #FFFFFF; border-bottom: 1px solid rgb(15 30 54 / .12); box-shadow: 0 18px 32px rgb(15 30 54 / .14);
    visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .cab-abierto .cab-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav { display: block; width: auto; padding: 0; overflow: visible; gap: 0; -webkit-mask-image: none; mask-image: none; }
  .nav-grupo { display: block; padding-top: .9rem; }
  .nav-t { display: block; margin: 0; padding-bottom: .45rem; border-bottom: 1px solid rgb(15 30 54 / .12); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
  .nav a { display: flex; align-items: center; justify-content: flex-start; flex: none; height: auto; min-height: 48px; padding: 0 .25rem; border: 0; border-radius: 0; background: none; font-size: 1rem; font-weight: 600; white-space: normal; }
  .nav a:hover { background: none; text-decoration: underline; }
  .nav-card { display: block; margin-top: 1rem; padding: 1rem 1.1rem; border-radius: .9rem; background: rgb(124 58 237 / .08); }
  .nav-card p { margin: 0; }
  .nav-card-k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5B21B6; }
  .nav-card-t { margin: .2rem 0 .35rem !important; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--azul); }
  .nav-card a { display: inline-flex; gap: .4rem; min-height: 44px; padding: 0; font-weight: 700; color: #5B21B6; }
  .nav-card a svg { width: 1.1rem; height: 1.1rem; }
}
@media (max-width: 959px) and (scripting: none) {
  .menu-btn { display: none; }
  .cab { position: relative; flex-wrap: wrap; }
  .cab-panel { position: static; flex: 0 0 100%; visibility: visible; opacity: 1; transform: none; box-shadow: none; max-height: none; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .cab-panel { transition: none; } }

/* ───────── Landing «Alternativa a Zapier» y su página de gracias (tipo landing, 24 oct 2026) ───────── */
/* Clases con prefijo lp- para no chocar con el resto del sitio; los botones son los del sitio (.btn-coral, .btn-secundario). */
.lp-hero { padding-block: 2.25rem 2.75rem; border-bottom: 1px solid rgb(15 30 54 / .12); }
.lp-hero h1 { max-width: 46rem; margin: 0 0 .75rem; font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.lp-hero .etiqueta-publi { margin-bottom: 1.25rem; }
.lp-k { display: inline-block; margin: 0 0 1rem; padding: .25rem .75rem; border-radius: 999px; background: rgb(109 40 217 / .08); color: #5B21B6; font-size: .82rem; font-weight: 750; }
.lp-lede { max-width: 42rem; margin: 0 0 1.25rem; font-size: clamp(1.05rem, 2.4vw, 1.2rem); line-height: 1.6; color: var(--suave); }
.lp-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 .75rem; }
.lp-nota { font-size: .9rem; color: var(--suave); }
.lp-datos { display: grid; gap: .75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.lp-datos li { padding: 1rem 1.1rem; border: 1px solid rgb(15 30 54 / .12); border-radius: 14px; background: #FFFFFF; }
.lp-datos strong { display: block; font-family: var(--f-cifras); font-size: 1.35rem; letter-spacing: -.02em; }
.lp-datos span { font-size: .92rem; color: var(--suave); }
.lp-seccion { padding-block: 2.75rem; }
.lp-seccion + .lp-seccion { border-top: 1px solid rgb(15 30 54 / .12); }
.lp-alt { background: #FFFFFF; }
.lp-cab { max-width: 46rem; margin-bottom: 1.5rem; }
.lp-cab h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
.lp-cab p { color: var(--suave); }
.lp-tabla-cont { overflow-x: auto; border: 1px solid rgb(15 30 54 / .12); border-radius: 14px; background: #FFFFFF; }
.lp-tabla { width: 100%; border-collapse: collapse; font-size: .98rem; }
.lp-tabla caption { padding: .9rem 1rem; text-align: left; font-size: .86rem; color: var(--suave); caption-side: bottom; border-top: 1px solid rgb(15 30 54 / .12); }
.lp-tabla th, .lp-tabla td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(15 30 54 / .12); }
.lp-tabla thead th { background: var(--marfil-2); font-size: .85rem; letter-spacing: .02em; text-transform: uppercase; }
.lp-gana { background: rgb(4 120 87 / .08); }
.lp-cifra { font-family: var(--f-cifras); font-weight: 700; white-space: nowrap; }
@media (max-width: 639px) {
  .lp-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp-tabla, .lp-tabla tbody, .lp-tabla tr, .lp-tabla th, .lp-tabla td { display: block; width: 100%; }
  .lp-tabla tbody tr { padding: .75rem 0; border-bottom: 1px solid rgb(15 30 54 / .12); }
  .lp-tabla tbody th { padding-bottom: .25rem; border: 0; }
  .lp-tabla td { display: flex; justify-content: space-between; gap: 1rem; padding-block: .3rem; border: 0; }
  .lp-tabla td::before { content: attr(data-col); font-weight: 600; color: var(--suave); }
}
.lp-args { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lp-args li { padding: 1.25rem; border: 1px solid rgb(15 30 54 / .12); border-radius: 14px; background: #FFFFFF; }
.lp-args h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.lp-args p { margin: 0; color: var(--suave); font-size: .98rem; }
.lp-args small { display: block; margin-top: .6rem; font-size: .8rem; color: var(--suave); }
.lp-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: .75rem; border-radius: 999px; background: rgb(109 40 217 / .08); color: #5B21B6; font-weight: 800; }
.lp-calc { display: grid; gap: 1.5rem; padding: 1.25rem; border: 1px solid rgb(15 30 54 / .12); border-radius: 14px; background: #FFFFFF; }
.lp-campos { display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; }
.lp-campos legend { padding: 0; margin-bottom: .5rem; font-weight: 750; }
.lp-campo { display: grid; gap: .35rem; }
.lp-campo label { font-weight: 650; font-size: .95rem; }
.lp-ayuda { font-size: .82rem; color: var(--suave); }
.lp-campo input, .lp-campo select { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid rgb(15 30 54 / .3); border-radius: 10px; background: #FFFFFF; color: var(--azul); font: inherit; }
.lp-res { display: grid; gap: .75rem; align-content: start; }
.lp-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 0; }
.lp-cifras div { padding: .85rem 1rem; border-radius: 10px; background: var(--marfil-2); }
.lp-cifras dt { font-size: .8rem; font-weight: 650; color: var(--suave); }
.lp-cifras dd { margin: .15rem 0 0; font-family: var(--f-cifras); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.lp-cifras .lp-make { background: rgb(109 40 217 / .08); }
.lp-msj { margin: 0; padding: 1rem; border-radius: 10px; background: rgb(4 120 87 / .08); color: #064E3B; font-weight: 650; }
.lp-msj[data-caso="zapier"], .lp-msj[data-caso="volumen"] { background: rgb(217 119 6 / .1); color: #78350F; }
.lp-supuestos { font-size: .82rem; color: var(--suave); }
.lp-supuestos summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; color: var(--azul); }
.lp-supuestos ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.lp-honesto { padding: 1.25rem 1.4rem; border-left: 4px solid #D97706; border-radius: 0 14px 14px 0; background: rgb(217 119 6 / .1); }
.lp-honesto ul { margin: 0; padding-left: 1.1rem; }
.lp-honesto li + li { margin-top: .5rem; }
.lp-pasos { counter-reset: paso; display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.lp-pasos li { counter-increment: paso; position: relative; padding: 1rem 1rem 1rem 3.4rem; border: 1px solid rgb(15 30 54 / .12); border-radius: 14px; background: #FFFFFF; }
.lp-pasos li::before { content: counter(paso); position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--azul); color: var(--marfil); font-size: .85rem; font-weight: 800; }
.lp-pasos strong { display: block; }
.lp-pasos p { margin: .2rem 0 0; color: var(--suave); font-size: .96rem; }
.lp-faq { display: grid; gap: .6rem; }
.lp-faq details { border: 1px solid rgb(15 30 54 / .12); border-radius: 14px; background: #FFFFFF; }
.lp-faq summary { min-height: 48px; padding: 1rem 1.1rem; cursor: pointer; font-weight: 700; }
.lp-faq details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--suave); }
.lp-lead { display: grid; gap: 1.5rem; padding: 1.5rem; border-radius: 14px; background: var(--azul); color: #F8FAFC; }
.lp-lead h2 { margin: 0 0 .5rem; color: #FFFFFF; font-size: clamp(1.5rem, 4vw, 2rem); }
.lp-lead p { color: #CBD5E1; }
.lp-form { display: grid; gap: .8rem; }
.lp-form label { font-weight: 650; }
.lp-form input[type="email"] { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid rgb(255 255 255 / .35); border-radius: 10px; background: rgb(255 255 255 / .06); color: #FFFFFF; font: inherit; }
.lp-form input[type="email"]::placeholder { color: #94A3B8; }
.lp-form .btn { justify-self: start; }
.lp-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; font-weight: 400 !important; color: #CBD5E1; }
.lp-consent input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: #A78BFA; }
.lp-consent a { color: #FFFFFF; }
.lp-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-afiliacion { padding: 1rem 1.2rem; border: 1px dashed rgb(15 30 54 / .3); border-radius: 14px; font-size: .92rem; color: var(--suave); }
.lp-gracias { min-height: 55vh; border-bottom: 0; }
@media (min-width: 720px) {
  .lp-hero { padding-block: 3.5rem 4rem; }
  .lp-datos { grid-template-columns: repeat(3, 1fr); }
  .lp-seccion { padding-block: 4rem; }
  .lp-args { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .lp-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding: 2rem; }
  .lp-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem; align-items: center; }
}
@media (min-width: 1100px) { .lp-args { grid-template-columns: repeat(4, 1fr); } }

/* Espacios publicitarios reservados: selector por ID único, altura mínima y aislamiento (CLS = 0). */
#ad-slot-portada-1,
#ad-slot-guia-1,
#ad-slot-guia-2,
#ad-slot-comparativa-1,
#ad-slot-comparativa-2,
#ad-slot-n8nvps-1,
#ad-slot-n8nvps-2,
#ad-slot-vps-1,
#ad-slot-vps-2,
#ad-slot-make-facturacion-1,
#ad-slot-precios-make-1 { min-height: 250px; contain: layout style; }
@media (max-width: 719px) {
#ad-slot-portada-1,
#ad-slot-guia-1,
#ad-slot-guia-2,
#ad-slot-comparativa-1,
#ad-slot-comparativa-2,
#ad-slot-n8nvps-1,
#ad-slot-n8nvps-2,
#ad-slot-vps-1,
#ad-slot-vps-2,
#ad-slot-make-facturacion-1,
#ad-slot-precios-make-1 { min-height: 50px; }
}