/*
 * autopress.es — hoja única, sin build.
 *
 * El despliegue no ejecuta `npm run build`, así que el sitio no puede depender
 * de compilar assets. Todo va aquí, con variables CSS para el tema.
 */

:root {
    /*
     * Tres colores y nada más: blanco, rojo y gris muy flojo.
     *
     * Antes la base era cálida —papel hueso, líneas tostadas, verde y ámbar— y
     * eso arrastraba toda la página hacia el tierra. Los grises de aquí son
     * neutros a propósito: con un rojo tan saturado, un gris cálido al lado
     * tira a rosa sucio.
     */
    --tinta: #14181d;
    --tinta-suave: #4d535a;
    --tinta-tenue: #868c93;
    --papel: #ffffff;
    --papel-gris: #f9f9f9;
    --linea: #ececec;
    --acento: #c8102e;
    /* Apenas un tinte, para aros de foco y fondos mínimos. */
    --acento-claro: #fdecef;
    --acento-oscuro: #990c22;
    --radio: 10px;
    --ancho: 1120px;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.1em; }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.estrecho { max-width: 720px; }

/* ---------- Cabecera ---------- */

.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 250, 248, 0.88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cabecera.desplazada { border-bottom-color: var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; gap: 32px; height: 68px; }

.marca { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; color: var(--tinta); text-decoration: none; letter-spacing: -0.02em; }
.marca span { color: var(--acento); }

.menu { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.menu a { color: var(--tinta-suave); text-decoration: none; font-size: 0.95rem; position: relative; padding: 4px 0; }
.menu a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: var(--acento); transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s ease;
}
.menu a:hover { color: var(--tinta); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--tinta); }
/* El botón es un botón, no un enlace del menú: ni hereda el gris ni lleva subrayado. */
.menu a.boton { padding: 10px 18px; }
.menu a.boton::after { display: none; }
.menu a.boton-principal { color: #fff; }
.menu a.boton-principal:hover { color: #fff; }

.abrir-menu { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tinta); }

/* ---------- Botones ---------- */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--radio); border: 1px solid transparent;
    font-size: 0.97rem; font-weight: 500; font-family: var(--sans);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.boton:active { transform: translateY(1px); }
.boton-principal { background: var(--acento); color: #fff; box-shadow: 0 1px 2px rgba(20, 24, 29, 0.16); }
.boton-principal:hover { background: var(--acento-oscuro); box-shadow: 0 4px 14px rgba(200, 16, 46, 0.24); }
.boton-secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton-secundario:hover { border-color: var(--tinta-tenue); background: var(--papel-gris); }
.boton-grande { padding: 15px 30px; font-size: 1.03rem; }

/* ---------- Secciones ---------- */

.seccion { padding: 88px 0; }
.seccion-gris { background: var(--papel-gris); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion-cabeza { max-width: 660px; margin-bottom: 52px; }
.seccion-cabeza h2 + p, .seccion-cabeza h1 + p { margin-top: 16px; }
.seccion-cabeza p { color: var(--tinta-suave); font-size: 1.1rem; margin-bottom: 0; }

.etiqueta {
    display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--acento); margin-bottom: 16px;
}

/* ---------- Portada ---------- */

.portada { padding: 96px 0 76px; position: relative; overflow: hidden; }
.portada::before {
    content: ""; position: absolute; top: -180px; right: -140px; width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(200, 16, 46, 0.09), transparent 68%);
    pointer-events: none;
}
/*
 * Ancho suficiente para que cada mitad del titular quepa en su línea: con el
 * salto puesto a mano, el ancho estrecho lo partía en cuatro renglones.
 */
.portada h1 { max-width: 27ch; margin-bottom: 22px; }
/*
 * Trazo de rotulador sobre el titular.
 *
 * El truco para que NO parezca un rectángulo: los cuatro radios distintos y en
 * dos ejes, más un giro de medio grado. Así los bordes salen desiguales, como
 * cuando se pasa un subrayador a mano y se va un poco.
 *
 * `box-decoration-break: clone` hace que, si algún día parte de línea, el
 * trazo se pinte en las dos y no quede una caja abierta a medias.
 */
.resaltado {
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 0.04em 0.4em 0.12em 0.34em;
    background: var(--acento);
    border-radius: 0.6em 1.3em 0.5em 1.1em / 1.1em 0.45em 1.2em 0.55em;
    transform: rotate(-0.55deg);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Un segundo trazo, más corto y desplazado: el rotulador nunca cubre igual. */
.resaltado::before {
    content: "";
    position: absolute;
    left: 0.1em;
    right: 0.55em;
    bottom: -0.04em;
    height: 0.42em;
    background: var(--acento);
    border-radius: 1em 0.6em 1.2em 0.5em / 0.5em 1.1em 0.45em 1em;
    transform: rotate(0.7deg);
    z-index: -1;
}

.portada .entrada { font-size: 1.2rem; color: var(--tinta-suave); max-width: 54ch; margin-bottom: 32px; }
.portada .acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.portada .letra-pequena { font-size: 0.9rem; color: var(--tinta-tenue); }

/*
 * En rejilla y no en flex: así las cifras ocupan todo el ancho de la portada
 * en columnas iguales, en vez de apelotonarse a la izquierda.
 */
.cifras {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--linea);
}
.cifra strong { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1.1; }
.cifra span { font-size: 0.9rem; color: var(--tinta-tenue); }

/* ---------- Rejillas ---------- */

.rejilla { display: grid; gap: 28px; }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }

.tarjeta {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20, 24, 29, 0.07); border-color: #d6d1c8; }
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p { color: var(--tinta-suave); margin-bottom: 0; font-size: 0.97rem; }

/*
 * La tarjeta que cierra la rejilla de ventajas: misma caja, pero en el color de
 * marca para que se lea como lo que es —una invitación— y no como una ventaja
 * más de la lista.
 */
.tarjeta-cta {
    background: var(--acento); border-color: var(--acento);
    display: flex; flex-direction: column;
}
.tarjeta-cta:hover { border-color: var(--acento-oscuro); }
.tarjeta-cta h3 { color: #fff; }
.tarjeta-cta p { color: rgba(255, 255, 255, 0.86); }
.tarjeta-cta .boton { margin-top: auto; align-self: flex-start; background: #fff; color: var(--acento-oscuro); }
.tarjeta-cta .boton:hover { background: var(--papel-gris); color: var(--acento-oscuro); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }

/* ---------- Beneficios ---------- */

/*
 * Se distingue a propósito de `.tarjeta`: más abajo hay otra rejilla de seis
 * bloques —los argumentos de confianza— y dos parrillas idénticas seguidas se
 * leen como la misma sección repetida. Aquí manda la barra de acento y el
 * titular; allí, la caja.
 */
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }

.beneficio { padding-left: 20px; border-left: 2px solid var(--acento); }
.beneficio h3 { margin-bottom: 8px; font-size: 1.14rem; }
.beneficio p { color: var(--tinta-suave); font-size: 0.97rem; margin-bottom: 0; }

@media (max-width: 900px) {
    .beneficios { grid-template-columns: 1fr 1fr; gap: 28px 30px; }
}

@media (max-width: 620px) {
    .beneficios { grid-template-columns: 1fr; }
}

/* ---------- Sectores ---------- */

.sectores {
    margin-top: 54px; padding-top: 34px;
    border-top: 1px solid var(--linea);
    text-align: center;
}

/* Encima de los beneficios: la línea separadora va debajo, no arriba. */
.sectores-arriba {
    margin-top: 0; margin-bottom: 46px;
    padding-top: 0; padding-bottom: 34px;
    border-top: 0; border-bottom: 1px solid var(--linea);
}

/*
 * Mismo tratamiento que los titulares de los bloques de debajo —serif, mismo
 * cuerpo y mismo color— para que se lea como uno más y no como un epígrafe
 * de otra jerarquía. Es un <h3> de verdad, así que hereda la tipografía.
 */
.sectores-titulo {
    margin-bottom: 22px;
    font-size: 1.14rem;
    color: var(--tinta);
}

.sectores ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}

.sectores li {
    padding: 7px 16px; border-radius: 100px;
    border: 1px solid var(--acento); background: var(--acento);
    font-size: 0.92rem; color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sectores li:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }

/* ---------- Pasos ---------- */

/*
 * Los pasos, uno debajo de otro, cada uno en su tarjeta horizontal: número a
 * la izquierda y contenido a la derecha. El hilo discontinuo baja del pie de
 * una tarjeta a la siguiente, alineado con el círculo, para que se lea como
 * un recorrido.
 *
 * Va en <ol> a propósito: es una lista ordenada de verdad, y así el número lo
 * entiende también quien navegue con lector de pantalla.
 */
.pasos {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 20px;
}

.paso {
    position: relative;
    display: grid; grid-template-columns: 42px 1fr; column-gap: 22px; align-items: start;
    background: #fff; border: 1px solid var(--linea); border-radius: 12px;
    padding: 24px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.paso:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 24, 29, 0.06); border-color: #d6d1c8; }

/* El hilo: del pie de esta tarjeta a la siguiente, bajo el círculo. */
.paso:not(:last-child)::after {
    content: ""; position: absolute;
    top: 100%; left: calc(28px + 21px); height: 20px;
    border-left: 1.5px dashed var(--linea);
}

.paso-marca {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 1.5px solid var(--acento); border-radius: 50%;
    background: var(--papel);
    font-family: var(--serif); font-size: 1.05rem; color: var(--acento);
}

.paso-cuerpo { padding-top: 6px; }
.paso h3 { margin-bottom: 8px; font-size: 1.12rem; }
.paso p { color: var(--tinta-suave); margin-bottom: 0; font-size: 0.97rem; }

@media (max-width: 560px) {
    .paso { padding: 20px 22px; column-gap: 16px; grid-template-columns: 38px 1fr; }
    .paso-marca { width: 38px; height: 38px; font-size: 1rem; }
    .paso:not(:last-child)::after { left: calc(22px + 19px); }
}

/* ---------- Planes ---------- */

.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.plan {
    background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 32px 28px;
    display: flex; flex-direction: column; height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(20, 24, 29, 0.08); }
.plan-destacado { border-color: var(--acento); box-shadow: 0 8px 30px rgba(200, 16, 46, 0.12); position: relative; }
.plan-destacado::before {
    content: "El más contratado"; position: absolute; top: -12px; left: 28px;
    background: var(--acento); color: #fff; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px;
}
.plan h3 { font-size: 1.35rem; margin-bottom: 4px; }
.plan .gancho { color: var(--tinta-tenue); font-size: 0.92rem; margin-bottom: 20px; }
.plan .precio { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.plan .precio small { font-size: 0.95rem; font-family: var(--sans); color: var(--tinta-tenue); font-weight: 400; }
.plan .a-consultar { font-family: var(--serif); font-size: 1.7rem; color: var(--tinta-suave); }
.plan .volumen { font-weight: 600; margin: 18px 0 4px; }
.plan .detalle { color: var(--tinta-suave); font-size: 0.93rem; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 28px; border-top: 1px solid var(--linea); padding-top: 22px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; font-size: 0.95rem; color: var(--tinta-suave); }
.plan li svg { flex: 0 0 auto; margin-top: 4px; color: var(--acento); }
.plan .boton { margin-top: auto; width: 100%; }

/* ---------- Selector de volumen ---------- */

.selector { margin-bottom: 4px; }

/* El precio va pegado al conmutador si no se separa a mano. */
.selector .precio { margin-bottom: 6px; }

/* Los dos conmutadores del plan miden lo mismo pero dicen cosas distintas: el
 * de pago va arriba y en gris, para que no compita con el del volumen. */
.selector-pago { margin-bottom: 14px; }
/* Más específico que `.selector-periodo button.activo`, que si no gana por
 * orden y los dos conmutadores saldrían del mismo verde. */
.selector .selector-pago button.activo { background: var(--tinta); }

.selector [data-ahorro] { min-height: 1.2em; margin-bottom: 16px; color: var(--acento); }

.selector-periodo {
    display: inline-flex; padding: 3px; gap: 2px; margin-bottom: 18px;
    background: var(--papel-gris); border: 1px solid var(--linea); border-radius: 100px;
}
.selector-periodo button {
    border: 0; background: none; cursor: pointer; border-radius: 100px;
    padding: 6px 14px; font-family: var(--sans); font-size: 0.85rem; color: var(--tinta-suave);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.selector-periodo button.activo { background: var(--acento); color: #fff; }
.selector-periodo button:not(.activo):hover { color: var(--tinta); }

.selector-cifra { display: flex; align-items: baseline; gap: 8px; }
.selector-cifra strong { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.selector-cifra span { font-size: 0.95rem; color: var(--tinta-tenue); }

.selector input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
    margin: 20px 0 10px; border-radius: 4px; background: var(--linea); cursor: pointer;
}
.selector input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--acento); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(20, 24, 29, 0.3);
}
.selector input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff;
    background: var(--acento); box-shadow: 0 1px 4px rgba(20, 24, 29, 0.3);
}
.selector input[type="range"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

.selector-nota { font-size: 0.88rem; color: var(--tinta-tenue); margin: 0; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
    cursor: pointer; padding: 22px 40px 22px 0; position: relative; list-style: none;
    font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; color: var(--acento); font-family: var(--sans); font-weight: 300;
    transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--tinta-suave); padding-right: 40px; margin: -4px 0 22px; }

/* ---------- Cierre ---------- */

/*
 * El cierre en verde de marca, con un degradado y un halo suave arriba: en
 * negro plano cortaba la página en seco y no se parecía a nada más del sitio.
 * El halo va en un pseudoelemento, así que el contenido necesita su propia
 * capa para quedar por encima.
 */
.cierre {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--acento) 0%, var(--acento-oscuro) 100%);
    border-radius: 22px;
    padding: 76px 48px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(200, 16, 46, 0.2);
}

.cierre::before {
    content: "";
    position: absolute; top: -55%; left: 50%; transform: translateX(-50%);
    width: 760px; height: 760px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 62%);
    pointer-events: none;
}

.cierre-contenido { position: relative; }

.cierre h2 { color: #fff; margin-bottom: 14px; }
/* Dos líneas a este ancho: el párrafo es el que tiene que enganchar. */
.cierre p { color: rgba(255, 255, 255, 0.9); max-width: 62ch; margin: 0 auto 34px; font-size: 1.06rem; }

.cierre .boton-principal { background: #fff; color: var(--acento-oscuro); font-weight: 600; }
.cierre .boton-principal:hover {
    background: var(--papel-gris); color: var(--acento-oscuro);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
}

/*
 * Separada del botón: pegada parecía parte de él.
 *
 * El selector lleva la etiqueta a propósito: `.cierre p` tiene más
 * especificidad que una clase suelta y le imponía `margin-top: 0`, así que la
 * separación no se aplicaba nunca.
 */
.cierre p.cierre-letra-pequena {
    margin: 32px auto 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 700px) {
    .cierre { padding: 52px 26px; border-radius: 18px; }
}

/* ---------- Formulario ---------- */

.formulario { display: grid; gap: 18px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 6px; }
.campo input, .campo textarea, .campo select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio);
    font-family: var(--sans); font-size: 1rem; background: #fff; color: var(--tinta);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
    outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}
.campo textarea { min-height: 130px; resize: vertical; }
.error { color: #b3261e; font-size: 0.87rem; margin-top: 5px; }
.aviso-ok {
    background: var(--acento-claro); border: 1px solid #bcdcd0; color: var(--acento-oscuro);
    padding: 18px 20px; border-radius: var(--radio); margin-bottom: 26px;
}

/* ---------- Pie ---------- */

.pie { border-top: 1px solid var(--linea); padding: 52px 0 36px; margin-top: 40px; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pie a { color: var(--tinta-suave); text-decoration: none; font-size: 0.93rem; display: block; margin-bottom: 8px; }
.pie a:hover { color: var(--acento); }
.pie .legal { font-size: 0.87rem; color: var(--tinta-tenue); width: 100%; padding-top: 28px; margin-top: 12px; border-top: 1px solid var(--linea); }

/* ---------- Transición AJAX ---------- */

#principal { animation: entrar 0.34s ease both; }
#principal.saliendo { opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; }

@keyframes entrar {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.barra-carga {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--acento); z-index: 100; transition: width 0.2s ease, opacity 0.3s ease;
}

/* Aparición al hacer scroll */
/*
 * Solo se oculta cuando el JS ha marcado el documento. Si el script no carga o
 * falla, el contenido se ve entero: media página en blanco por una animación
 * sería un desastre, y para Google también.
 */
.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
.js .revelar.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .rejilla-3, .planes { grid-template-columns: 1fr; }
    .rejilla-2 { grid-template-columns: 1fr; }
    .seccion { padding: 64px 0; }
}

@media (max-width: 480px) {
    /*
     * En un móvil estrecho «Contenido automático» no cabe a 2.3rem y el
     * titular desbordaba a lo ancho, que es lo único que la página no puede
     * permitirse: el cuerpo nunca debe hacer scroll horizontal.
     */
    .portada h1 { font-size: 1.95rem; }
}

@media (max-width: 700px) {
    /*
     * El giro exige `inline-block`, y un `inline-block` no parte de línea: en
     * un móvil el trazo se saldría de la pantalla. Aquí vuelve a ser `inline`,
     * que sí parte —y con `box-decoration-break` se pinta en las dos líneas—,
     * a cambio de perder la inclinación, que a ese tamaño no se aprecia.
     */
    .resaltado { display: inline; transform: none; }
    .resaltado::before { display: none; }

    .cifras { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
    .abrir-menu { display: block; }
    .menu {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        background: var(--papel); border-bottom: 1px solid var(--linea);
        flex-direction: column; gap: 0; padding: 12px 24px 20px; align-items: stretch;
    }
    .menu.abierto { display: flex; }
    .menu a { padding: 12px 0; border-bottom: 1px solid var(--linea); }
    .menu .boton { margin-top: 12px; }
    .campo-doble { grid-template-columns: 1fr; }
    .portada { padding: 60px 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   Blog
   --------------------------------------------------------------------------
   Es la única parte del sitio que renderiza contenido: el de los clientes
   vive en su WordPress y estos son nuestros artículos. El cuerpo llega como
   HTML saneado del generador, así que aquí se estilan las etiquetas que puede
   traer —encabezados, listas, cita, índice y tabla— y no clases nuestras.
   ========================================================================== */

.portada-blog { padding: 84px 0 56px; }
.seccion-blog { padding: 0 0 88px; }

.articulos-rejilla {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}

/* ---------- Tarjeta de artículo ---------- */

.articulo-tarjeta {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.articulo-tarjeta:hover {
    transform: translateY(-3px); box-shadow: 0 12px 34px rgba(20, 24, 29, 0.08);
    border-color: #d6d1c8;
}

/* Toda la tarjeta es el enlace: un objetivo pequeño en móvil se falla. */
.articulo-tarjeta a { display: block; color: inherit; text-decoration: none; height: 100%; }

.articulo-tarjeta-imagen { aspect-ratio: 16 / 9; overflow: hidden; background: var(--papel-gris); }
.articulo-tarjeta-imagen img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.45s ease;
}
.articulo-tarjeta:hover .articulo-tarjeta-imagen img { transform: scale(1.035); }

.articulo-tarjeta-cuerpo { padding: 24px 26px 28px; }
.articulo-tarjeta-cuerpo h3 { margin: 0 0 10px; font-size: 1.2rem; }
.articulo-tarjeta-entradilla { color: var(--tinta-suave); font-size: 0.95rem; margin: 0 0 16px; }

.articulo-tarjeta-seguir {
    font-size: 0.88rem; font-weight: 600; color: var(--acento);
    display: inline-flex; align-items: center; gap: 6px;
}
.articulo-tarjeta-seguir::after { content: "→"; transition: transform 0.2s ease; }
.articulo-tarjeta:hover .articulo-tarjeta-seguir::after { transform: translateX(4px); }

/* La más reciente, a todo lo ancho y con la imagen al lado del texto. */
.articulo-tarjeta-grande { margin-bottom: 26px; }
.articulo-tarjeta-grande a { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.articulo-tarjeta-grande .articulo-tarjeta-imagen { aspect-ratio: auto; height: 100%; min-height: 300px; }
.articulo-tarjeta-grande .articulo-tarjeta-cuerpo {
    padding: 40px; display: flex; flex-direction: column; justify-content: center;
}
.articulo-tarjeta-grande h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.articulo-tarjeta-grande .articulo-tarjeta-entradilla { font-size: 1.02rem; }

/*
 * Sin imagen de portada la tarjeta grande no puede ser de dos columnas: la
 * segunda se quedaba vacía. Pasa a una sola y el texto se centra, que es lo
 * que hace que siga leyéndose como la pieza destacada.
 */
.articulo-tarjeta-grande.sin-portada a { grid-template-columns: 1fr; }
.articulo-tarjeta-grande.sin-portada .articulo-tarjeta-cuerpo { padding: 46px 48px; max-width: 46rem; }

/* ---------- Fecha y minutos de lectura ---------- */

.articulo-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 0.83rem; color: var(--tinta-tenue); margin: 0 0 12px;
    letter-spacing: 0.01em;
}

/* ---------- Paginación ---------- */

.paginacion {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin-top: 52px;
}
.paginacion-boton {
    display: inline-block; padding: 10px 20px; border: 1px solid var(--linea);
    border-radius: 999px; background: #fff; color: var(--tinta); font-size: 0.92rem;
    font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.paginacion-boton:hover { border-color: var(--acento); color: var(--acento); }
.paginacion-boton.inactivo { color: var(--tinta-tenue); background: transparent; border-style: dashed; }
.paginacion-cuenta { font-size: 0.9rem; color: var(--tinta-tenue); }

.blog-vacio {
    text-align: center; padding: 60px 24px; border: 1px dashed var(--linea);
    border-radius: var(--radio); background: #fff;
}
.blog-vacio h2 { font-size: 1.6rem; margin-bottom: 12px; }
.blog-vacio p { color: var(--tinta-suave); margin: 0; }

/* ==========================================================================
   La ficha del artículo
   ========================================================================== */

.articulo-cabecera { padding: 56px 0 32px; }
.articulo-migas { font-size: 0.83rem; color: var(--tinta-tenue); display: flex; gap: 8px; margin-bottom: 18px; }
.articulo-migas a { color: var(--acento); text-decoration: none; font-weight: 600; }
.articulo-migas a:hover { text-decoration: underline; }

.articulo-cabecera h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 18px; }
.articulo-cabecera .articulo-meta { margin-bottom: 20px; }

/*
 * La entradilla es un párrafo de entrada, no una cita. Llevaba un filete
 * verde a la izquierda y parecía un blockquote, así que se confundía con el
 * bloque de respuesta directa que sí va más abajo en el cuerpo. Se distingue
 * del resto por tamaño y color, que es suficiente.
 */
.articulo-entradilla {
    font-size: 1.16rem; line-height: 1.62; color: var(--tinta-suave);
    margin: 0;
}

.articulo-portada { margin: 40px 0 48px; }
.articulo-portada img {
    width: 100%; max-height: 480px; object-fit: cover; display: block;
    border-radius: var(--radio); border: 1px solid var(--linea);
}

/* ---------- El cuerpo ---------- */

.articulo-cuerpo { font-size: 1.06rem; line-height: 1.78; color: #23292f; }
.articulo-cuerpo > *:first-child { margin-top: 0; }

.articulo-cuerpo h2 {
    font-size: clamp(1.5rem, 2.8vw, 1.95rem); margin: 52px 0 16px;
    /* Ancla del índice: sin esto, la cabecera fija tapa el encabezado. */
    scroll-margin-top: 92px;
}
.articulo-cuerpo h3 { font-size: 1.3rem; margin: 36px 0 12px; scroll-margin-top: 92px; }
.articulo-cuerpo h4 { font-size: 1.1rem; margin: 28px 0 10px; scroll-margin-top: 92px; }

.articulo-cuerpo p { margin: 0 0 1.25em; }
.articulo-cuerpo a { color: var(--acento); font-weight: 500; }
.articulo-cuerpo strong { font-weight: 650; color: var(--tinta); }

.articulo-cuerpo ul, .articulo-cuerpo ol { margin: 0 0 1.4em; padding-left: 24px; }
.articulo-cuerpo li { margin-bottom: 9px; }
.articulo-cuerpo li::marker { color: var(--acento); }

/*
 * La respuesta directa. Fondo blanco y el color solo en el filete: lleno de
 * verde competía con el índice, que también es un bloque destacado, y la
 * página tenía dos cajas de color peleándose antes del primer apartado.
 */
.articulo-cuerpo blockquote {
    margin: 34px 0; padding: 26px 30px; background: #fff;
    border: 1px solid var(--linea); border-left: 4px solid var(--acento);
    border-radius: 0 var(--radio) var(--radio) 0;
    font-family: var(--serif); font-size: 1.14rem; line-height: 1.55; color: var(--acento-oscuro);
}
.articulo-cuerpo blockquote p:last-child { margin-bottom: 0; }

.articulo-cuerpo img { max-width: 100%; height: auto; border-radius: var(--radio); }

/* El índice que escribe el generador: <nav class="indice"> con su lista. */
.articulo-cuerpo .indice {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 24px 28px; margin: 0 0 40px;
}
.articulo-cuerpo .indice::before {
    content: "En este artículo"; display: block; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-tenue);
    margin-bottom: 14px;
}
.articulo-cuerpo .indice ul { margin: 0; padding: 0; list-style: none; }
.articulo-cuerpo .indice li { margin-bottom: 8px; padding-left: 16px; position: relative; }
.articulo-cuerpo .indice li::before {
    content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px;
    border-radius: 50%; background: var(--acento);
}
.articulo-cuerpo .indice a { text-decoration: none; font-weight: 500; }
.articulo-cuerpo .indice a:hover { text-decoration: underline; }

/*
 * Tabla comparativa. El saneador la envuelve en .ap-tabla para que haga scroll
 * en móvil en vez de desbordar la página, que es lo único que no se perdona.
 */
.articulo-cuerpo .ap-tabla { overflow-x: auto; margin: 34px 0; -webkit-overflow-scrolling: touch; }
.articulo-cuerpo table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; }
.articulo-cuerpo th, .articulo-cuerpo td {
    border: 1px solid var(--linea); padding: 12px 14px; text-align: left; vertical-align: top;
}
.articulo-cuerpo th { background: var(--papel-gris); font-weight: 650; }
.articulo-cuerpo tbody tr:nth-child(even) { background: rgba(244, 242, 238, 0.5); }

/* La atribución de fuente que añade la ingesta al final del cuerpo. */
.articulo-cuerpo hr { border: 0; border-top: 1px solid var(--linea); margin: 44px 0 28px; }
.articulo-cuerpo .ap-fuente, .articulo-cuerpo em:last-child { color: var(--tinta-tenue); font-size: 0.92rem; }

.articulo-etiquetas {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 44px 0 0;
    padding-top: 28px; border-top: 1px solid var(--linea);
}
.articulo-etiquetas span {
    font-size: 0.82rem; color: var(--tinta-suave); background: var(--papel-gris);
    border: 1px solid var(--linea); border-radius: 999px; padding: 5px 13px;
}

/* ---------- Responsive del blog ---------- */

@media (max-width: 900px) {
    .articulos-rejilla { grid-template-columns: repeat(2, 1fr); }
    .articulo-tarjeta-grande a { grid-template-columns: 1fr; }
    .articulo-tarjeta-grande .articulo-tarjeta-imagen { min-height: 0; aspect-ratio: 16 / 9; }
    .articulo-tarjeta-grande .articulo-tarjeta-cuerpo { padding: 28px; }
    .seccion-blog { padding-bottom: 64px; }
}

@media (max-width: 620px) {
    .articulos-rejilla { grid-template-columns: 1fr; }
    .portada-blog { padding: 60px 0 40px; }
    .articulo-cuerpo { font-size: 1.02rem; }
    .articulo-cuerpo blockquote { padding: 20px 22px; font-size: 1.06rem; }
    .articulo-cuerpo .indice { padding: 20px 22px; }
    .paginacion { gap: 12px; }
    .paginacion-boton { padding: 9px 15px; font-size: 0.88rem; }
}