/* =========================================================
   WEEBLINE — SISTEMA GLOBAL
   Colores, tipografias y componentes compartidos
   ========================================================= */

:root {

    /* MARCA */
    --color-principal: #1c1c24;
    --color-acento: #ff5945;
    --color-acento-hover: #e94b39;
    --color-acento-boton: #d13e2c;
    --color-acento-boton-hover: #bf3425;
    --color-acento-texto: #c43e2c;

    /* TEXTO */
    --color-texto: #1C1C24;
    --color-texto-suave: #8f8f97;

    /* SUPERFICIES */
    --color-blanco: #ffffff;
    --color-fondo: #ffffff;
    --color-fondo-suave: #f5f5f4;

    /* LINEAS */
    --color-borde: #dfdfdf;
    --color-borde-fuerte: #cccccc;

    /* ESTADOS Y CONTRASTES */
    --color-texto-inverso: #ffffff;
    --color-texto-inverso-suave: #eeeeee;
    --color-texto-inverso-secundario: #d2d2d5;
    --color-texto-muted: #999999;
    --color-texto-muted-claro: #aaaaaa;
    --color-fondo-placeholder: #e6e6e5;
    --color-fondo-seleccion: #fff8f6;
    --color-deshabilitado: #c9cdd3;
    --color-negro: #000000;

    /* TIPOGRAFIAS */
    --fuente-titulos: "Plus Jakarta Sans", sans-serif;
    --fuente-texto: "Manrope", sans-serif;

    /* ESTRUCTURA */
    --ancho-contenido: 1180px;
    --padding-lateral: 48px;

    /* FORMAS */
    --radio-boton: 4px;

    /* ESPACIADO */
    --seccion: 120px;

    /* ESCALA TIPOGRAFICA GLOBAL */
    --texto-base: 17px;
    --texto-secundario: 15px;
    --texto-pequeno: 13px;
    --texto-micro: 12px;
    --titulo-h1: clamp(46px, 6vw, 68px);
    --titulo-hero: clamp(50px, 5.4vw, 72px);
    --titulo-h2: clamp(34px, 4vw, 52px);
    --titulo-h3: 22px;
    --texto-destacado: 23px;
    --texto-display: 44px;
    --icono-pequeno: 18px;
    --icono-normal: 24px;
    --icono-grande: 30px;
    --icono-destacado: 38px;

    /* ESPACIADO GLOBAL */
    --espacio-xs: 10px;
    --espacio-sm: 18px;
    --espacio-md: 28px;
    --espacio-lg: 48px;
    --espacio-xl: 75px;
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-principal);
    font-family: var(--fuente-texto);
    font-size: var(--texto-base);
    line-height: 1.7;
}

img {
    display: block;
    max-width: 100%;
}

.icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--color-principal);
    font-family: var(--fuente-titulos);
}

h1 {
    font-size: var(--titulo-h1);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.045em;
}

h2 {
    font-size: var(--titulo-h2);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -.035em;
}

h3 {
    font-size: var(--titulo-h3);
    line-height: 1.3;
}

p {
    color: var(--color-texto);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.contenedor {
    width: min(
        calc(100% - var(--padding-lateral)),
        var(--ancho-contenido)
    );
    margin: 0 auto;
}

.seccion {
    padding: var(--seccion) 0;
}


/* =========================================================
   TEXTOS COMPARTIDOS
   ========================================================= */

.sobrelinea {
    margin: 0 0 18px;
    color: var(--color-acento-texto);
    font-size: var(--texto-micro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.enlace-simple,
.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    transition: color .2s ease;
}

.enlace-simple:hover,
.enlace-flecha:hover {
    color: var(--color-acento);
}


/* =========================================================
   BOTONES
   ========================================================= */

.boton {
    min-height: 51px;
    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 0;
    border-radius: var(--radio-boton);

    background: var(--color-acento-boton);
    color: var(--color-blanco);

    font-weight: 700;
    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.boton:hover {
    background: var(--color-acento-boton-hover);
    transform: translateY(-2px);
}

.boton-oscuro {
    background: var(--color-principal);
}

.boton-oscuro:hover {
    background: var(--color-negro);
}


/* =========================================================
   HEADER
   ========================================================= */

.header {
    position: sticky;
    z-index: 100;
    top: 0;

    background: rgba(255,255,255,.95);
    border-bottom: 1px solid rgba(0,0,0,.07);

    backdrop-filter: blur(12px);
}

.header-interior {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    flex: 0 0 auto;
}

.logo img {
    width: 158px;
    height: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 25px;

    font-size: var(--texto-pequeno);
    font-weight: 600;
}

.nav > a:not(.boton) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color .2s ease;
}

.acceso-clientes .icon {
    font-size: var(--icono-pequeno);
}

.nav > a:not(.boton):hover {
    color: var(--color-acento);
}

.boton-nav {
    min-height: 40px;
    padding: 0 18px;
}

.menu-boton {
    display: none;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.form-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.campo {
    margin-bottom: 22px;
}

.campo label {
    display: block;
    margin-bottom: 7px;

    font-size: var(--texto-micro);
    font-weight: 700;
}

.campo input,
.campo textarea,
.campo select {
    width: 100%;
    padding: 13px 2px;

    border: 0;
    border-bottom: 1px solid var(--color-borde-fuerte);
    border-radius: 0;
    outline: 0;

    background: transparent;
    color: var(--color-principal);
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
    border-color: var(--color-acento);
}

.campo textarea {
    min-height: 120px;
    resize: vertical;
}

.trampa {
    position: absolute;
    left: -9999px;

    opacity: 0;
    pointer-events: none;
}

.respuesta {
    margin-top: 15px;
    font-size: var(--texto-pequeno);
    font-weight: 700;
}


/* =========================================================
   FOOTER
   Mismo diseño que Blog / Ayuda
   ========================================================= */

/* Footer estatico centralizado */
.footer{margin-top:0;padding:0;background:var(--color-blanco);border-top:1px solid var(--color-borde)}
.footer-boletin{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:80px;align-items:center;padding-top:72px;padding-bottom:72px;border-bottom:1px solid var(--color-borde)}
.footer-etiqueta{display:block;margin-bottom:14px;color:var(--color-acento);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.footer-boletin h2{max-width:650px;margin:0 0 14px;font-size:clamp(28px,3vw,42px);line-height:1.12}.footer-boletin-texto p{max-width:620px;margin:0;color:var(--color-texto)}
.boletin-campos{display:flex;width:100%}.boletin-campos input{min-width:0;flex:1;height:52px;padding:0 16px;border:1px solid var(--color-borde);border-right:0;border-radius:0;background:var(--color-blanco);color:var(--color-principal);font:inherit;outline:none}.boletin-campos input:focus{border-color:var(--color-principal)}.boletin-campos button{height:52px;padding:0 22px;border:1px solid var(--color-principal);border-radius:0;background:var(--color-principal);color:var(--color-blanco);font:inherit;font-weight:700;white-space:nowrap}
.boletin-legal{margin:10px 0 0;color:var(--color-texto-suave);font-size:12px;line-height:1.5}.boletin-legal a{color:inherit;text-decoration:underline}.boletin-respuesta{min-height:20px;margin:10px 0 0;color:var(--color-texto);font-size:12px;font-weight:600;line-height:1.5}.boletin-respuesta.exito{color:var(--color-principal)}.boletin-respuesta.error{color:var(--color-acento)}.boletin-campos button:disabled{cursor:wait;opacity:.65}
.footer-principal{display:grid;grid-template-columns:230px minmax(0,1fr);gap:90px;padding-top:70px;padding-bottom:70px}.footer-marca img{display:block;width:108px;height:auto;margin-bottom:18px}.footer-marca p{margin:0;color:var(--color-texto);font-size:14px;line-height:1.65}.redes{display:flex;gap:14px;margin-top:24px}.redes a{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--color-borde);border-radius:0;color:var(--color-principal);font-size:17px;text-decoration:none}.redes a:hover{border-color:var(--color-principal)}
.footer-columnas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px}.footer-columnas>div{display:flex;flex-direction:column;align-items:flex-start}.footer-columnas strong{margin-bottom:20px;color:var(--color-principal);font-size:14px}.footer-columnas a{margin-bottom:12px;color:var(--color-texto);font-size:14px;line-height:1.4;text-decoration:none}.footer-columnas a:hover{color:var(--color-principal)}.footer-inferior{display:flex;justify-content:space-between;gap:30px;padding-top:24px;padding-bottom:24px;border-top:1px solid var(--color-borde);color:var(--color-texto-suave);font-size:12px}.footer-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.footer-boletin{grid-template-columns:1fr;gap:35px}.footer-principal{grid-template-columns:1fr;gap:50px}.footer-columnas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:45px}}@media(max-width:560px){.footer-boletin{padding-top:55px;padding-bottom:55px}.boletin-campos{display:block}.boletin-campos input,.boletin-campos button{width:100%;border:1px solid var(--color-borde)}.boletin-campos button{margin-top:10px;border-color:var(--color-principal)}.footer-columnas{grid-template-columns:1fr 1fr;gap:38px 24px}.footer-inferior{flex-direction:column;gap:8px}}


/* =========================================================
   ANIMACIONES
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity .6s ease,
        transform .6s ease;
}

.reveal.reveal-imagen {
    transform:
        translateY(14px)
        scale(.985);
}

.reveal.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .nav {
        position: absolute;
        top: 72px;
        left: 0;

        width: 100%;
        padding: 25px;

        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 20px;

        background: var(--color-blanco);
        border-bottom: 1px solid var(--color-borde);
    }

    .nav.activo {
        display: flex;
    }

    .menu-boton {
        width: 38px;
        height: 38px;
        padding: 8px;

        border: 0;
        background: transparent;

        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }

    .menu-boton span {
        width: 100%;
        height: 2px;

        background: var(--color-principal);
    }
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --padding-lateral: 32px;
        --seccion: 80px;
    }

    .header-interior {
        min-height: 66px;
    }

    .logo img {
        width: 145px;
    }

    .nav {
        top: 66px;
    }

    .form-fila {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-columnas {
        grid-template-columns: 1fr 1fr;
        gap: 45px 30px;
    }

    .footer-inferior {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .reveal,
    .reveal.reveal-imagen {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .boton {
        transition: none;
    }
}


/* =========================================================
   BLOQUES REUTILIZABLES
   Estos componentes pueden usarse en cualquier pagina.
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */

.hero {
    padding: 82px 0 96px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 72px;
}

.hero h1 {
    max-width: 720px;
    margin: 0;

    font-size: var(--titulo-hero);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.05em;
}

.hero h1 em {
    color: var(--color-acento);
    font-style: normal;
}

.hero-texto {
    max-width: 555px;
    margin: 27px 0 0;

    color: var(--color-texto);
    font-size: var(--texto-base);
    line-height: 1.7;
}

.hero-acciones {
    margin-top: 32px;

    display: flex;
    align-items: center;
    gap: 27px;
}

.hero-datos {
    margin-top: 31px;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    color: var(--color-texto);
    font-size: var(--texto-micro);
    font-weight: 600;
}

.hero-datos span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-datos .icon {
    color: var(--color-acento);
    font-size: var(--icono-pequeno);
}

.hero-foto {
    position: relative;
    min-width: 0;
}

.hero-foto > img {
    width: 100%;
    height: 565px;
    object-fit: cover;
}

.hero-mensaje {
    position: absolute;
    right: -18px;
    bottom: 24px;

    width: 270px;
    padding: 18px 19px;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    background: var(--color-blanco);
    border: 1px solid rgba(28,28,36,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.09);
}

.hero-mensaje > .icon {
    color: var(--color-acento);
    font-size: var(--icono-grande);
}

.hero-mensaje strong,
.hero-mensaje span {
    display: block;
}

.hero-mensaje strong {
    font-size: var(--texto-secundario);
}

.hero-mensaje span {
    margin-top: 2px;

    color: var(--color-texto);
    font-size: var(--texto-micro);
}


/* =========================================================
   FRANJA
   ========================================================= */

.franja {
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
}

.franja-interior {
    min-height: 104px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.franja p {
    max-width: 550px;
    margin: 0;

    color: var(--color-principal);
    font-size: var(--texto-base);
    line-height: 1.5;
}

.franja-puntos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 25px;

    color: var(--color-texto);
    font-size: var(--texto-pequeno);
}

.franja-puntos span::before {
    content: "";

    width: 6px;
    height: 6px;
    margin-right: 9px;

    display: inline-block;

    border-radius: 50%;
    background: var(--color-acento);
}


/* =========================================================
   BLOQUE EDITORIAL
   ========================================================= */

.editorial {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 88px;
}

.editorial-foto img {
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.numero-editorial {
    display: block;
    margin-bottom: 24px;

    color: var(--color-texto-muted-claro);
    font-size: var(--texto-pequeno);
}

.editorial-contenido h2 strong {
    display: block;
    margin-top: 8px;

    color: var(--color-acento);
    font-weight: 600;
}

.editorial-textos {
    max-width: 590px;
    margin: 30px 0 34px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.editorial-textos p {
    margin: 0;

    color: var(--color-texto);
    font-size: var(--texto-secundario);
}


/* =========================================================
   COMO FUNCIONA
   ========================================================= */

.proceso-seccion {
    background: var(--color-fondo-suave);
}

.titulo-dividido {
    margin-bottom: 64px;

    display: grid;
    grid-template-columns: 1fr .65fr;
    align-items: end;
    gap: 80px;
}

.titulo-dividido > p {
    margin: 0 0 5px;

    color: var(--color-texto);
    font-size: var(--texto-secundario);
}

.proceso {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--color-borde-fuerte);
}

.proceso-item {
    position: relative;
    padding: 34px 28px 8px 0;
}

.proceso-item:not(:last-child) {
    margin-right: 28px;
    padding-right: 28px;

    border-right: 1px solid var(--color-borde);
}

.proceso-icono {
    height: 65px;
}

.proceso-icono .icon {
    color: var(--color-acento);
    font-size: var(--icono-grande);
}

.proceso-item > span {
    color: var(--color-texto-muted);
    font-size: var(--texto-micro);
}

.proceso-item h3 {
    margin: 13px 0 8px;

    font-size: var(--titulo-h3);
    font-weight: 600;
}

.proceso-item p {
    margin: 0;

    color: var(--color-texto);
    font-size: var(--texto-secundario);
}


/* =========================================================
   QUE INCLUYE
   ========================================================= */

.incluye-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 105px;
}

.incluye-intro {
    position: sticky;
    top: 130px;
    align-self: start;
}

.incluye-intro > p:not(.sobrelinea) {
    margin: 25px 0;
    color: var(--color-texto);
}

.incluye-lista {
    border-top: 1px solid var(--color-borde);
}

.incluye-item {
    padding: 27px 0;

    display: grid;
    grid-template-columns: 65px 1fr;

    border-bottom: 1px solid var(--color-borde);
}

.incluye-item > .icon {
    color: var(--color-acento);
    font-size: var(--icono-grande);
}

.incluye-item h3 {
    margin: 0 0 7px;

    font-size: var(--titulo-h3);
    font-weight: 600;
}

.incluye-item p {
    max-width: 520px;
    margin: 0;

    color: var(--color-texto);
    font-size: var(--texto-secundario);
}


/* =========================================================
   TESTIMONIOS
   ========================================================= */

.testimonios {
    background: var(--color-principal);
    color: var(--color-blanco);
}

.testimonios h2 {
    color: var(--color-blanco);
}

.testimonios .sobrelinea {
    color: var(--color-acento);
}

.testimonios-cabecera {
    max-width: 790px;
    margin-bottom: 52px;
}

.testimonios-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 22px;
}

.testimonial {
    margin: 0;
    border: 1px solid rgba(255,255,255,.14);
}

.testimonial-principal {
    min-height: 440px;
    padding: 48px;

    display: flex;
    flex-direction: column;
}

.testimonial-principal > .icon {
    color: var(--color-acento);
    font-size: var(--icono-destacado);
}

.testimonial-principal > p {
    max-width: 620px;
    margin: 42px 0;

    flex: 1;

    color: var(--color-texto-inverso-suave);

    font-family: var(--fuente-titulos);
    font-size: var(--texto-destacado);
    line-height: 1.5;
}

.testimonios-secundarios {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
}

.testimonios-secundarios .testimonial {
    padding: 32px;

    display: flex;
    flex-direction: column;
}

.testimonios-secundarios p {
    margin: 0 0 30px;

    flex: 1;

    color: var(--color-texto-inverso-secundario);
    font-size: var(--texto-secundario);
}

.testimonial footer strong,
.testimonial footer span {
    display: block;
}

.testimonial footer strong {
    font-size: var(--texto-secundario);
}

.testimonial footer span {
    margin-top: 3px;

    color: var(--color-texto-suave);
    font-size: var(--texto-micro);
}

.provisional {
    display: block;
    margin-top: 20px;

    color: var(--color-texto);
}


/* =========================================================
   DOMINIO
   ========================================================= */

.dominio-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 105px;
}

.dominio-contenido > p:not(.sobrelinea) {
    max-width: 520px;
    color: var(--color-texto);
}

.dominio-ejemplo {
    border: 1px solid var(--color-borde);
}

.dominio-url {
    padding: 15px 20px;

    display: flex;
    align-items: center;
    gap: 9px;

    border-bottom: 1px solid var(--color-borde);
    background: var(--color-fondo-suave);

    color: var(--color-texto);
    font-size: var(--texto-pequeno);
}

.dominio-url .icon {
    color: var(--color-acento);
}

.dominio-pantalla {
    min-height: 320px;
    padding: 62px 52px;
}

.linea-naranja {
    width: 42px;
    height: 5px;

    display: block;
    margin-bottom: 35px;

    background: var(--color-acento);
}

.dominio-pantalla strong {
    display: block;

    font-family: var(--fuente-titulos);
    font-size: var(--texto-display);
    font-weight: 600;
    letter-spacing: -.04em;
}

.dominio-pantalla p {
    color: var(--color-texto);
}


/* =========================================================
   BLOG
   ========================================================= */

.blog-seccion {
    background: var(--color-fondo-suave);
}

.blog-cabecera {
    margin-bottom: 60px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}

.blog-cabecera > div {
    max-width: 700px;
}

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

.blog-card {
    padding-bottom: 15px;
}

.blog-imagen {
    aspect-ratio: 16 / 10;
    margin-bottom: 22px;

    overflow: hidden;
    background: var(--color-fondo-placeholder);
}

.blog-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imagen-temporal {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-texto-muted);
    font-size: var(--texto-micro);
}

.blog-meta {
    color: var(--color-acento);

    font-size: var(--texto-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-card h3 {
    min-height: 77px;
    margin: 9px 0 17px;

    font-size: var(--titulo-h3);
    font-weight: 600;
    line-height: 1.35;
}

.blog-card > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: var(--texto-pequeno);
    font-weight: 700;
}

.blog-card > a:hover {
    color: var(--color-acento);
}


/* =========================================================
   LLAMADA COMERCIAL
   ========================================================= */

.llamada {
    background: var(--color-acento);
    color: var(--color-blanco);
}

.llamada h2 {
    color: var(--color-blanco);
}

.llamada .sobrelinea {
    color: var(--color-blanco);
    opacity: .8;
}

.llamada-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 100px;
}

.llamada-derecha > p {
    max-width: 480px;
    margin-top: 0;
    color: var(--color-blanco);
}

.periodos {
    margin: 25px 0 30px;

    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.periodos span {
    padding: 7px 13px;

    border: 1px solid rgba(255,255,255,.5);

    font-size: var(--texto-micro);
}

.llamada .boton {
    background: var(--color-principal);
}

.llamada .boton:hover {
    background: var(--color-negro);
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-seccion {
    background: var(--color-fondo-suave);
}

.faq-grid {
    display: grid;
    grid-template-columns: .72fr 1fr;
    gap: 95px;
}

.faq {
    border-top: 1px solid var(--color-borde-fuerte);
}

.faq details {
    border-bottom: 1px solid var(--color-borde-fuerte);
}

.faq summary {
    position: relative;

    padding: 23px 45px 23px 0;

    list-style: none;
    cursor: pointer;

    font-weight: 600;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";

    position: absolute;
    right: 4px;

    color: var(--color-acento);
    font-size: var(--icono-normal);
}

.faq details[open] summary::after {
    content: "−";
}

.faq details p {
    max-width: 600px;
    margin: -5px 45px 25px 0;

    color: var(--color-texto);
    font-size: var(--texto-secundario);
}


/* =========================================================
   BLOQUE DE CONTACTO
   ========================================================= */

.contacto-grid {
    display: grid;
    grid-template-columns: .72fr 1fr;
    gap: 95px;
}

.contacto-intro > p:not(.sobrelinea) {
    max-width: 420px;
    color: var(--color-texto);
}

.formulario {
    padding-top: 5px;
}

.boton-formulario {
    margin-top: 10px;
}

.boton-formulario:disabled {
    opacity: .6;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.cta-final {
    padding: 88px 0;
    background: var(--color-fondo-suave);
}

.cta-final-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.cta-final h2 {
    max-width: 750px;
}

.cta-final .boton-oscuro {
    flex-shrink: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .hero-grid,
    .editorial,
    .incluye-grid,
    .dominio-grid,
    .llamada-grid,
    .faq-grid,
    .contacto-grid {
        grid-template-columns: 1fr;
    }

    .hero-foto {
        max-width: 650px;
    }

    .franja-interior {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .franja-puntos {
        justify-content: flex-start;
    }

    .editorial {
        gap: 60px;
    }

    .titulo-dividido {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .proceso {
        grid-template-columns: 1fr 1fr;
    }

    .incluye-grid,
    .dominio-grid,
    .llamada-grid,
    .faq-grid,
    .contacto-grid {
        gap: 65px;
    }

    .incluye-intro {
        position: static;
    }

    .testimonios-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width: 650px) {

    .hero {
        padding: 58px 0 70px;
    }

    .hero h1 {
        font-size: var(--titulo-hero);
        line-height: 1.04;
    }

    .hero-grid {
        gap: 45px;
    }

    .hero-acciones {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-acciones .enlace-simple {
        justify-content: center;
    }

    .hero-foto > img {
        height: 410px;
    }

    .hero-mensaje {
        right: 12px;
        left: 12px;
        bottom: 12px;

        width: auto;
    }

    .editorial-foto img {
        height: 430px;
    }

    .editorial-textos {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .proceso {
        grid-template-columns: 1fr;
    }

    .proceso-item {
        padding: 30px 0;

        border-bottom: 1px solid var(--color-borde);
    }

    .proceso-item:not(:last-child) {
        margin: 0;
        padding-right: 0;

        border-right: 0;
    }

    .testimonios-cabecera {
        margin-bottom: 45px;
    }

    .testimonial-principal {
        min-height: auto;
        padding: 35px 25px;
    }

    .testimonial-principal > p {
        margin: 30px 0 50px;
        font-size: var(--texto-destacado);
    }

    .blog-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card h3 {
        min-height: 0;
    }

    .cta-final-grid {
        align-items: flex-start;
        flex-direction: column;
        gap: 35px;
    }

    .franja-interior {
        min-height: auto;
        padding: 38px 0;
    }

    .franja-puntos {
        gap: 12px 20px;
    }

    .incluye-item {
        grid-template-columns: 48px 1fr;
    }

    .dominio-pantalla {
        min-height: 260px;
        padding: 48px 32px;
    }

    .dominio-pantalla strong {
        font-size: var(--texto-display);
    }

    .llamada-grid,
    .faq-grid,
    .contacto-grid {
        gap: 48px;
    }
}
/* =========================================================
   BLOQUE DE ALCANCE
   ========================================================= */
.para-quien { border-top: 1px solid var(--color-borde); }
.para-quien-cabecera { max-width: 760px; margin-bottom: 60px; }
.para-quien-cabecera > p:not(.sobrelinea) { max-width: 650px; margin: 24px 0 0; }
.para-quien-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-borde); }
.para-quien-bloque { padding: 42px 55px 20px 0; }
.para-quien-bloque + .para-quien-bloque { padding-left: 55px; border-left: 1px solid var(--color-borde); }
.para-quien-bloque > .icon { display: block; margin-bottom: 25px; color: var(--color-acento); font-size: var(--icono-grande); }
.para-quien-bloque h3 { margin: 0 0 13px; font-size: var(--titulo-h3); font-weight: 600; }
.para-quien-bloque p { max-width: 500px; margin: 0 0 24px; font-size: var(--texto-secundario); }
@media (max-width: 650px) {
  .para-quien-cabecera { margin-bottom: 42px; }
  .para-quien-grid { grid-template-columns: 1fr; }
  .para-quien-bloque, .para-quien-bloque + .para-quien-bloque { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--color-borde); }
}


/* =========================================================
   CONTENIDO EDITORIAL / LEGAL
   Usa el ancho de .contenedor; no define un ancho de pagina.
   ========================================================= */

.legal { max-width: none; }
.legal-cabecera { max-width: none; margin-bottom: var(--espacio-xl); }
.legal-cabecera h1 { margin: 0; }
.legal-fecha { margin: var(--espacio-sm) 0 0; color: var(--color-texto-suave); font-size: var(--texto-pequeno); }
.legal-contenido { max-width: none; }
.legal-contenido h2 { margin: 65px 0 20px; }
.legal-contenido p, .legal-contenido li { color: var(--color-texto); font-size: var(--texto-base); line-height: 1.8; }
.legal-contenido p { margin: 0 0 20px; }
.legal-contenido ul, .legal-contenido ol { margin: 20px 0 28px; padding-left: 25px; }
.legal-contenido li { margin-bottom: 9px; }
.legal-contenido strong { color: var(--color-principal); }
.legal-contenido a { color: var(--color-acento); }
.legal-contenido a:hover { text-decoration: underline; }

@media (max-width:650px){
  .legal-cabecera { margin-bottom: 55px; }
  .legal-contenido h2 { margin-top: 50px; }
}