/* ==========================================================================
   MORENA IMPULSA — ÍNDICE GENERAL CSS
   ==========================================================================

   01. ESTILOS GENERALES
       - Fuentes
       - Variables
       - Reset básico
       - Contenedor general

   02. HEADER
       - Contenedor
       - Logo
       - Navegación
       - Responsive Header

   03. HERO
       - Pretítulo
       - Título
       - Texto posterior al título
       - Destacado
       - Botones
       - Responsive Hero

   04. SOBRE MÍ
       - Franjas decorativas
       - Contenedor
       - Encabezado
       - Firma Morena Impulsa
       - Texto
       - Imagen
       - Frase final
       - Responsive Sobre Mí

   05. SERVICIOS — TABLA COMPARATIVA
       - Contenedor
       - Encabezado superior
       - Nota Impulso Continuo
       - Contenedor scroll
       - Tabla
       - Celdas
       - Columna de características
       - Punto de partida
       - Mirada estratégica
       - Ruta 90 días
       - Impulso continuo
       - Características
       - Iconos
       - Encabezados de plan
       - Colores de planes
       - Entregables
       - Filas destacadas
       - Precios
       - Botones
       - Notas inferiores
       - Responsive Servicios

   06. AYUDA PARA ELEGIR
       - Tarjeta principal
       - Título
       - Texto
       - Botón
       - Mención de cupos
       - Franja inferior
       - Responsive Ayuda para Elegir

   07. ESTO ES PARA TI
       - Contenedor
       - Encabezado
       - Contenido
       - Cinta de fondo
       - Lista
       - Tarjetas
       - Movimiento visual de tarjetas
       - Ticket
       - Texto de tarjetas
       - Frase destacada
       - Cierre
       - Botón
       - Responsive Esto es para Ti

   08. CÓMO TRABAJO
       - Franja superior
       - Contenedor
       - Encabezado
       - Cuaderno
       - Pasos sobre el cuaderno
       - Visual de cada paso
       - Contenido de cada paso
       - Botón
       - Barra de cupos
       - Animación barra de cupos
       - Responsive Cómo Trabajo

   09. BARRA ANIMADA — CUPOS MORENA
       - Movimiento
       - Grupo de texto
       - Separadores
       - Animación
       - Responsive Barra Cupos

   10. CONTACTO
       - Contenedor
       - Título
       - Frase destacada
       - Texto
       - Imagen
       - Botón principal
       - WhatsApp
       - Responsive Contacto

   11. PREGUNTAS FRECUENTES
       - Encabezado
       - Lista
       - Pregunta
       - Icono + / −
       - Respuesta
       - CTA final
       - Responsive Preguntas Frecuentes

   12. PIE DE PÁGINA
       - Franja superior
       - Contenedor
       - Logo
       - Información
       - Instagram
       - Responsive Pie de Página

   ==========================================================================
   MORENA IMPULSA— ESTILOS GENERALES
   ========================================================================== */

/* Fuentes */

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bellefair';
    src: url('../fonts/Bellefair-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Variables */

:root {
    --blush: #FFF4F9;
    --rose-light: #FCD3E6;
    --rose-pink: #D584A1;
    --dusty-rose: #8D6775;
    --maroon: #4E0E1A;
    --maroon-hover: #3A0A13;
    --maroon-deep: #5C233C;
    --brown: #442C28;
    --superdark: #2A1520;
    --pastel-blue: #E3ECF4;
    --celeste: #B1CFD7;
    --cream: #F5F2EE;
    --white: #FFFFFF;

    --font-display: 'Fraunces', Georgia, serif;
    --font-script: 'Bellefair', Georgia, serif;
    --font-body: 'Montserrat', Arial, sans-serif;
}

/* Reset básico */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--brown);
}

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

/* Contenedor general */

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

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

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: var(--blush);
    border-bottom: 1px solid rgba(91, 28, 39, 0.08);
}

/* Contenedor */
header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(92%, 1200px);
    margin: 0 auto;
    padding: 0;
}

/* Logo */
header .logo {
    display: flex;
    align-items: center;
    justify-self: start;
}

header .logo img {
    display: block;
    width: 100px;
    height: auto;
    margin: 10px 0;
}

/* Navegación */
header .menu-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
}

header .btn-hero {
    color: var(--maroon);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

header .btn-hero:hover {
    color: var(--rose-pink);
}
header .btn-linea {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    color: var(--rose-pink);

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;

    text-decoration: none;
    white-space: nowrap;

    transition: color 0.2s ease;

    -webkit-tap-highlight-color: transparent;
}
header .btn-linea:hover {
    color: var(--maroon);
}
/* Botón Trabajemos juntas */
header .btn-trabajemos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;

    padding: 5px 12px;

    border: 1px solid var(--maroon);
    border-radius: 999px;

    background: transparent;
    color: var(--maroon);

    font-family: var(--font-body);
    font-size: 12px;
    font-style: italic;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

header .btn-trabajemos:hover {
    background: var(--maroon);
    color: var(--blush);
}

/* ==========================================================================
   HAMBURGUESA
   Oculta en desktop + iPad
   ========================================================================== */

header .menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 38px;
    height: 38px;
    padding: 7px;

    border: 0;
    background: transparent;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

header .menu-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;

    border-radius: 999px;
    background: var(--maroon);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* Menú mobile oculto por defecto */
header .menu-mobile {
    display: none;
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    header .container {
        width: 94%;
    }

    header .logo img {
        width: 90px;
    }

    header .menu-principal {
        gap: 22px;
    }

    header .btn-hero,
    header .btn-linea {
        font-size: 11px;
    }

    header .btn-trabajemos {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ==========================================================================
   IPAD VERTICAL / TABLET PEQUEÑA
   Mantiene menú completo
   ========================================================================== */

@media (min-width: 601px) and (max-width: 820px) {

    header .container {
        width: 95%;
    }

    header .logo img {
        width: 78px;
        margin: 9px 0;
    }

    header .menu-principal {
        gap: 13px;
    }

    header .btn-hero,
    header .btn-linea {
        font-size: 10px;
    }

    header .btn-trabajemos {
        padding: 5px 8px;
        font-size: 10px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   Hamburguesa solo aquí
   ========================================================================== */

@media (max-width: 600px) {

    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 90%;
        margin: 0 auto;
    }

    /* Logo */
    header .logo {
        display: flex;
        align-items: center;
    }

    header .logo img {
        width: 85px;
        height: auto;
        margin: 9px 0;
    }

    /* Ocultar navegación normal */
    header .menu-principal {
        display: none;
    }

    /* Ocultar Trabajemos juntas normal */
    header .btn-trabajemos {
        display: none;
    }

    /* Mostrar hamburguesa */
    header .menu-toggle {
        display: flex;
    }

    /* Menú desplegable */
    header .menu-mobile {
        position: absolute;
        top: 100%;
        left: 0;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-height: 0;

        padding: 0 5%;
        box-sizing: border-box;

        overflow: hidden;

        background: var(--blush);
        border-bottom: 1px solid rgba(91, 28, 39, 0.08);

        opacity: 0;
        visibility: hidden;

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            padding 0.35s ease;
    }

    /* Menú abierto */
    header .menu-mobile.active {
        max-height: 400px;
        padding-top: 18px;
        padding-bottom: 25px;

        opacity: 1;
        visibility: visible;
    }

    /* Links mobile */
    header .menu-mobile a {
        display: block;

        padding: 13px 0;

        border-bottom: 1px solid rgba(91, 28, 39, 0.1);

        color: var(--maroon);

        font-family: var(--font-body);
        font-size: 14px;

        text-align: left;
        text-decoration: none;
    }

    /* Trabajemos juntas dentro del menú */
    header .menu-mobile .menu-mobile-contacto {
        margin-top: 12px;
        padding: 10px 15px;

        border: 1px solid var(--maroon);
        border-radius: 999px;

        background: var(--maroon);
        color: var(--blush);

        font-style: italic;
        text-align: center;
    }

    /* Hamburguesa → X */
    header .menu-toggle.active span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    header .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    header .menu-toggle.active span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    header .container {
        width: 88%;
    }

    header .logo img {
        width: 78px;
    }

    header .menu-toggle {
        width: 34px;
        height: 34px;
    }

    header .menu-toggle span {
        width: 22px;
    }
}

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

#hero {
    width: 100%;
    padding: 125px 24px 60px;
    box-sizing: border-box;
    background: var(--blush);
    text-align: center;
}

/* Pretítulo */
#hero .pretitulo {
    margin: 0 0 3px;
    color: var(--brown);
    font-size: 16px;
    line-height: 1.3;
}

/* Título */
#hero .titulo {
    display: block;
    width: min(70%, 700px);
    height: auto;
    margin: -10px auto -5px;
}

/* Texto posterior al título */
#hero .post-titulo {
    position: relative;
    width: min(90%, 600px);
    margin: 10px auto 20px;
    padding: 8px 20px;
    box-sizing: border-box;
    border-radius: 27px;
    background: rgba(252, 211, 230, 0.43);
    color: var(--brown);
    font-size: 16px;
    line-height: 1.35;
}

#hero .post-titulo span {
    font-style: italic;
    font-weight: 700;
}

/* Pin */
#hero .pinche-post {
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 3;
    width: 50px;
    height: auto;
    margin: 0;
}

/* ==========================================================================
   DESTACADO
   ========================================================================== */

#hero .destacado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 90%;
    margin: 18px auto 10px;
}

#hero .destacado-texto {
    margin: 0;
    padding: 0;
    color: var(--brown);
    font-size: 14px;
    line-height: 1.4;
}

#hero .destacado-texto span {
    font-weight: 700;
}

#hero .ladoizq,
#hero .ladoder {
    flex-shrink: 0;
    width: 42px;
    min-width: 24px;
    height: auto;
    margin: -10px;
}

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

#hero .botones-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px auto 0;
}

#hero .botones-hero a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 200px;
    margin: 0;
    padding: 14px 24px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.10);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

/* Botón principal */
#hero .boton_hero1 {
    background: var(--maroon);
    color: var(--white);
}

#hero .boton_hero1:hover {
    background: var(--celeste);
    color: var(--brown);
    transform: translateY(-2px);
}

/* Botón secundario */
#hero .boton_hero2 {
    background: var(--white);
    color: var(--brown);
    font-weight: 400;
}

#hero .boton_hero2:hover {
    background: var(--rose-light);
    transform: translateY(-2px);
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    #hero {
        padding: 115px 24px 55px;
    }

    #hero .pretitulo {
        font-size: 15px;
    }

    #hero .titulo {
        width: min(75%, 620px);
        margin: -8px auto -3px;
    }

    #hero .post-titulo {
        max-width: 560px;
        font-size: 15px;
    }

    #hero .destacado-texto {
        font-size: 13px;
    }

    #hero .botones-hero a {
        padding: 13px 22px;
        font-size: 13px;
    }
}

/* ==========================================================================
   IPAD VERTICAL
   ========================================================================== */

@media (max-width: 820px) {

    #hero {
        padding: 105px 22px 50px;
    }

    #hero .titulo {
        width: min(82%, 520px);
        margin-top: -5px;
    }

    #hero .post-titulo {
        max-width: 500px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    #hero {
        padding: 95px 18px 45px;
    }

    /* Pretítulo */
    #hero .pretitulo {
        margin-bottom: 5px;
        font-size: 13px;
    }

    /* Título */
    #hero .titulo {
        width: 100%;
        max-width: 390px;
        margin: 0 auto -2px;
    }

    /* Caja posterior */
    #hero .post-titulo {
        width: 100%;
        max-width: 380px;
        margin: 12px auto 18px;
        padding: 10px 18px;
        border-radius: 20px;
        font-size: 13px;
        line-height: 1.4;
    }

    #hero .pinche-post {
        top: -16px;
        right: 5px;
        width: 40px;
    }

    /* Destacado */
    #hero .destacado {
        max-width: 360px;
        gap: 5px;
        margin: 16px auto 10px;
    }

    #hero .destacado-texto {
        font-size: 12px;
        line-height: 1.35;
    }

    #hero .ladoizq,
    #hero .ladoder {
        width: 32px;
        min-width: 20px;
        margin: -6px;
    }

    /* Botones */
    #hero .botones-hero {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        gap: 11px;
        margin: 20px auto 0;
    }

    #hero .botones-hero a {
        width: 100%;
        min-width: 0;
        padding: 12px 18px;
        font-size: 13px;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    #hero {
        padding: 90px 15px 40px;
    }

    #hero .pretitulo {
        font-size: 12px;
    }

    #hero .titulo {
        max-width: 340px;
    }

    #hero .post-titulo {
        max-width: 330px;
        padding: 9px 15px;
        font-size: 12px;
    }

    #hero .destacado {
        max-width: 310px;
    }

    #hero .destacado-texto {
        font-size: 11px;
    }

    #hero .ladoizq,
    #hero .ladoder {
        width: 28px;
    }

    #hero .botones-hero {
        max-width: 290px;
    }

    #hero .botones-hero a {
        font-size: 12px;
    }
}

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */

#sobre_mi {
    position: relative;
    width: 100%;
    background: var(--blush);
    overflow: hidden;
}

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

#sobre_mi::before {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    margin-bottom: 40px;
    background: var(--rose-light);
}

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

#sobre_mi .sobremi-contenido {
    display: flow-root;
    width: min(88%, 720px);
    margin: 0 auto;
    padding-top: 30px;
}


/* ==========================================================================
   ENCABEZADO
   ========================================================================== */

#sobre_mi .encabezado {
    margin-bottom: 28px;
}

#sobre_mi h1 {
    margin: 0 0 -10px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
    text-align: left;
}

#sobre_mi .acentuado {
    margin: 0 0 20px 30px;
    color: var(--rose-pink);
    font-family: var(--font-script);
    font-size: 22px;
    line-height: 1.2;
    text-align: left;
}

#sobre_mi .presentacion {
    margin: 0;
    color: var(--brown);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

/* ==========================================================================
   FIRMA MINI
   ========================================================================== */

#sobre_mi .brand-mini {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    padding-right: 34px;
}

#sobre_mi .brand-mini strong {
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
}

#sobre_mi .brand-mini em {
    position: absolute;
    right: 0;
    bottom: -4px;
    color: var(--maroon);
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
}

/* ==========================================================================
   TEXTO
   ========================================================================== */

#sobre_mi .texto_sobremi {
    text-align: left;
}

#sobre_mi .texto_sobremi p {
    margin: 0 0 20px;
    color: var(--brown);
    font-size: 15px;
    line-height: 1.6;
}

#sobre_mi .texto_sobremi strong {
    font-weight: 700;
}

/* ==========================================================================
   IMAGEN
   ========================================================================== */

#sobre_mi .imagen_sobremi {
    float: right;
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: -15px -15px 20px 0;

    shape-outside: url("../img/fotomiaop.png");
    shape-margin: 10px;
}

/* ==========================================================================
   FRASE FINAL
   ========================================================================== */

#sobre_mi .frase_seccion {
    margin: 0;
    padding-top: 20px;
    padding-right: 350px;
    text-align: left;
}

#sobre_mi .frase_seccion p {
    margin: 0 0 15px;
    color: var(--brown);
    font-family: var(--font-display);
    font-size: 13px;
    font-style: italic;
    line-height: 1.3;
}

#sobre_mi .frase_seccion strong {
    color: var(--maroon-deep);
    font-weight: 700;
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    #sobre_mi::before {
        margin-bottom: 35px;
    }

    #sobre_mi .sobremi-contenido {
        width: min(86%, 520px);
        padding-top: 25px;
    }

    #sobre_mi h1 {
        font-size: 34px;
    }

    #sobre_mi .acentuado {
        font-size: 21px;
    }

    #sobre_mi .presentacion {
        font-size: 15px;
    }

    #sobre_mi .texto_sobremi p {
        font-size: 14px;
    }

    #sobre_mi .imagen_sobremi {
        max-width: 390px;
    }

    #sobre_mi .frase_seccion {
        padding-right: 300px;
    }
}

/* ==========================================================================
   IPAD VERTICAL
   ========================================================================== */

@media (max-width: 820px) {

    #sobre_mi .sobremi-contenido {
        width: min(88%, 500px);
    }

    #sobre_mi h1 {
        font-size: 32px;
    }

    #sobre_mi .acentuado {
        margin-left: 25px;
        font-size: 20px;
    }

    #sobre_mi .frase_seccion {
        padding-right: 275px;
    }

    #sobre_mi .frase_seccion p {
        font-size: 12px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   Frase izquierda + imagen derecha
   ========================================================================== */

@media (max-width: 600px) {

    #sobre_mi::before {
        height: 5px;
        margin-bottom: 25px;
    }

    #sobre_mi .sobremi-contenido {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        width: min(88%, 430px);
        margin: 0 auto;
        padding: 15px 0 0;
    }

    /* Encabezado */
    #sobre_mi .encabezado {
        order: 1;
        width: 100%;
        margin-bottom: 22px;
    }

    #sobre_mi h1 {
        margin-bottom: -5px;
        font-size: 29px;
        line-height: 1.1;
    }

    #sobre_mi .acentuado {
        margin: 3px 0 18px 20px;
        font-size: 18px;
    }

    #sobre_mi .presentacion {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Texto principal */
    #sobre_mi .texto_sobremi {
        order: 2;
        width: 100%;
    }

    #sobre_mi .texto_sobremi p {
        margin-bottom: 17px;
        font-size: 13px;
        line-height: 1.6;
    }

    /* Texto cierre */
    #sobre_mi .texto_sobremi--cierre {
        order: 3;
        width: 100%;
    }

    /* Frase a la izquierda */
    #sobre_mi .frase_seccion {
        order: 4;

        flex: 0 0 40%;
        width: 40%;

        align-self: flex-start;

        margin: 30px 0 0;
        padding: 0 12px 0 0;
        box-sizing: border-box;

        text-align: left;
    }

    #sobre_mi .frase_seccion p {
        margin: 0;
        font-size: 11px;
        line-height: 1.45;
    }

    /* Imagen a la derecha */
    #sobre_mi .imagen_sobremi {
        order: 5;

        float: none;

        flex: 0 0 60%;
        width: 60%;
        max-width: none;
        height: auto;

        margin: 15px 0 0 auto;

        shape-outside: none;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    #sobre_mi .sobremi-contenido {
        width: 88%;
    }

    #sobre_mi h1 {
        font-size: 27px;
    }

    #sobre_mi .acentuado {
        margin-left: 15px;
        font-size: 17px;
    }

    #sobre_mi .presentacion {
        font-size: 13px;
    }

    #sobre_mi .texto_sobremi p {
        font-size: 12.5px;
    }

    /* Frase izquierda */
    #sobre_mi .frase_seccion {
        flex-basis: 38%;
        width: 38%;
        margin-top: 25px;
        padding-right: 8px;
    }

    #sobre_mi .frase_seccion p {
        font-size: 10px;
        line-height: 1.4;
    }

    /* Imagen derecha */
    #sobre_mi .imagen_sobremi {
        flex-basis: 62%;
        width: 62%;
        margin-left: auto;
    }
}

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

#sobre_mi::after {
    content: "";
    display: block;
    width: 100%;
    height: 30px;
    margin-top: 0;
    background: repeating-linear-gradient(90deg,
            var(--maroon) 0 32px,
            var(--rose-light) 32px 64px);
}

/* ==========================================================================
   SECCION SERVICIOS
   ========================================================================== */

#servicios {
    background: var(--pastel-blue);
    padding: 45px 0;
    border-bottom: 5px solid var(--rose-light);
}

.contenedor-servicios {
    width: min(82%, 980px);
    margin: 0 auto;
}

/* Encabezado */

.encabezado-servicios {
    width: min(100%, 800px);
    margin: 30px auto 24px;
    text-align: center;
}

.encabezado-servicios h2 {
    margin: 0 0 7px;
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1;
    font-weight: 700;
    color: var(--maroon);
}

.encabezado-servicios p {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.2;
    color: var(--brown);
}

.encabezado-servicios span {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.3;
    color: var(--dusty-rose);
}

#selector-descripcion {
    margin-top: 0;
    font-size: 11px;
    text-align: center;
    color: var(--rose-pink);
}

/* Colores de cada plan */

#tab-punto-partida,
#punto-partida {
    --plan-color: #E67FA3;
    --plan-soft: #FCE8F0;
    --plan-bg: #FFF9FB;
}

#tab-mirada-estrategica,
#mirada-estrategica {
    --plan-color: #AF82D9;
    --plan-soft: #F1E8FA;
    --plan-bg: #FCFAFE;
}

#tab-ruta-90-dias,
#ruta-90-dias {
    --plan-color: #D6A445;
    --plan-soft: #F7EDD8;
    --plan-bg: #FFFCF6;
}

#tab-impulso-continuo,
#impulso-continuo {
    --plan-color: #6EB2C4;
    --plan-soft: #E7F3F6;
    --plan-bg: #F9FCFD;
}

/* Selector de planes */

.selector-planes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-bottom: 16px;
}

.plan-tab {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 9px;
    min-height: 70px;
    padding: 10px 12px;
    border: 1.5px solid var(--plan-soft);
    border-radius: 12px;
    background: var(--plan-bg);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.plan-tab:hover {
    transform: translateY(-1px);
    border-color: var(--plan-color);
    box-shadow: 0 6px 16px rgba(78, 14, 26, 0.05);
}

.plan-tab.activo {
    border: 2px solid var(--plan-color);
    background: var(--white);
    box-shadow: 0 8px 20px rgba(78, 14, 26, 0.07);
}

.plan-tab.activo::after {
    content: "✓";
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--plan-color);
    border-radius: 50%;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    color: var(--plan-color);
    box-shadow: 0 4px 10px rgba(78, 14, 26, 0.07);
}

.numero-plan {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--plan-soft);
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    color: var(--plan-color);
}

.plan-tab.activo .numero-plan {
    background: var(--plan-color);
    color: var(--white);
}

.info-plan {
    min-width: 0;
}

.info-plan h3 {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.05;
    font-weight: 700;
    color: var(--maroon);
}

.info-plan p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 9.5px;
    line-height: 1.25;
    color: var(--brown);
}

.icono-flecha {
    display: none;
}

/* Panel de detalle */

.detalle-plan {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid rgba(78, 14, 26, 0.1);
    border-top: 3px solid var(--plan-color);
    border-radius: 15px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(78, 14, 26, 0.04);
}

.detalle-plan[hidden] {
    display: none;
}

.detalle-plan-info {
    display: flex;
    flex-direction: column;
    padding: 22px 26px 20px;
    border-right: 1px solid rgba(78, 14, 26, 0.08);
}

.detalle-plan-entregable {
    padding: 22px 24px 20px;
    background: var(--plan-bg);
}

/* Título del plan */

.titulo-detalle {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.numero-detalle {
    min-width: 58px;
    padding-right: 13px;
    border-right: 1px solid rgba(78, 14, 26, 0.14);
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: var(--plan-color);
}

.titulo-detalle h3 {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 23px;
    line-height: 1;
    color: var(--maroon);
}

.titulo-detalle p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.3;
    color: var(--brown);
}

/* Información del plan */

.bloque-detalle {
    margin-bottom: 15px;
}

.bloque-detalle h4 {
    position: relative;
    margin: 0 0 6px;
    padding-left: 27px;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--superdark);
}

.bloque-detalle h4::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--plan-color);
    border-radius: 50%;
    background: var(--plan-soft);
    transform: translateY(-50%);
}

.bloque-detalle p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--brown);
}

/* Pasos */

.pasos-plan {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.paso-plan {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.paso-plan>span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--plan-color);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    color: var(--white);
}

.paso-plan p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 10.5px;
    line-height: 1.32;
    color: var(--brown);
}

.paso-plan strong {
    font-weight: 700;
    color: var(--superdark);
}

/* Pie del plan */

.pie-plan {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 0.9fr;
    align-items: stretch;
    gap: 0;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(78, 14, 26, 0.12);
}

.boton-plan {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-right: 14px;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--plan-color);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.boton-plan:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
    box-shadow: 0 7px 16px rgba(78, 14, 26, 0.1);
}

.precio-plan,
.duracion-plan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 13px;
    border-left: 1px solid rgba(78, 14, 26, 0.12);
}

.precio-plan {
    text-align: right;
}

.boton-plan {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-right: 14px;
    padding: 8px 12px;

    border: none;
    outline: none;
    appearance: none;

    border-radius: 9px;
    background: var(--plan-color);

    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.precio-plan span,
.duracion-plan span {
    margin-bottom: 2px;
    font-family: var(--font-body);
    font-size: 8.5px;
    line-height: 1.2;
    color: var(--brown);
}

.precio-plan strong {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.1;
    color: var(--plan-color);
}

.duracion-plan strong {
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--superdark);
}

/* Encabezado de entregables */

.encabezado-entregable {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.icono-entregable {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--plan-color);
    border-radius: 50%;
    background: var(--plan-soft);
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--plan-color);
}

.encabezado-entregable h4 {
    margin: 0 0 2px;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--superdark);
}

.encabezado-entregable p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--brown);
}

.encabezado-entregable strong {
    color: var(--superdark);
}

/* Mockup principal */

.mockup-entregable {
    padding: 14px;
    border: 1px solid rgba(78, 14, 26, 0.06);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 8px 20px rgba(68, 44, 40, 0.07);
}

.mockup-entregable h5 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--superdark);
    text-align: center;
}

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

.mockup-bloque {
    min-height: 82px;
    padding: 10px;
    border-radius: 8px;
    background: var(--plan-soft);
}

.mockup-bloque:nth-child(2) {
    opacity: 0.9;
}

.mockup-bloque:nth-child(3) {
    opacity: 0.8;
}

.mockup-bloque>span {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-size: 7px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--superdark);
}

.linea-mockup {
    width: 100%;
    height: 5px;
    margin-bottom: 9px;
    border-radius: 20px;
    background: rgba(68, 44, 40, 0.11);
}

.linea-mockup.corta {
    width: 70%;
}

.mockup-acciones {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(78, 14, 26, 0.07);
    border-radius: 8px;
    background: var(--white);
}

.mockup-acciones span {
    font-family: var(--font-body);
    font-size: 7px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--superdark);
}

.mockup-acciones .linea-mockup {
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE SERVICIOS — TABLET / IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    #servicios {
        padding: 45px 0;
    }

    .contenedor-servicios {
        width: 92%;
        max-width: 900px;
    }

    .encabezado-servicios {
        width: min(100%, 720px);
        margin: 25px auto 22px;
    }

    .encabezado-servicios h2 {
        font-size: 28px;
    }

    .encabezado-servicios p {
        font-size: 15px;
    }

    /* Selector en 2 columnas para iPad */
    .selector-planes {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .plan-tab {
        min-height: 72px;
    }

    /* Panel */
    .detalle-plan {
        grid-template-columns: 1fr 1fr;
    }

    .detalle-plan-info {
        padding: 22px 22px 20px;
    }

    .detalle-plan-entregable {
        padding: 22px 20px;
    }

    .titulo-detalle h3 {
        font-size: 22px;
    }

    .pie-plan {
        grid-template-columns: 1.1fr 0.9fr 0.9fr;
    }
}

/* ==========================================================================
   IPAD VERTICAL / TABLET PEQUEÑA
   ========================================================================== */

@media (max-width: 820px) {

    #servicios {
        padding: 42px 0;
    }

    .contenedor-servicios {
        width: 92%;
        max-width: 650px;
    }

    .encabezado-servicios {
        margin: 20px auto 22px;
    }

    .encabezado-servicios h2 {
        font-size: 27px;
        line-height: 1.08;
    }

    .encabezado-servicios p {
        font-size: 14px;
        line-height: 1.35;
    }

    /* ===============================================================
       SELECTOR HORIZONTAL
       =============================================================== */

    .selector-planes {
        display: flex;
        gap: 10px;

        width: auto;

        margin-right: -4%;
        margin-left: -4%;
        padding: 8px 4% 14px;

        overflow-x: auto;
        overflow-y: visible;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 4%;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .selector-planes::-webkit-scrollbar {
        display: none;
    }

    .plan-tab {
        flex: 0 0 225px;
        width: 225px;
        min-width: 225px;
        min-height: 72px;

        scroll-snap-align: start;
    }

    /* Panel de detalle vertical */
    .detalle-plan {
        grid-template-columns: 1fr;
        margin-bottom: 28px;
    }

    .detalle-plan-info {
        padding: 24px 22px;
        border-right: 0;
        border-bottom: 1px solid rgba(78, 14, 26, 0.08);
    }

    .detalle-plan-entregable {
        padding: 24px 22px;
    }

    /* Pie */
    .pie-plan {
        grid-template-columns: 1fr 1fr;
        row-gap: 14px;
    }

    .boton-plan {
        grid-column: 1 / -1;
        width: 100%;
        margin-right: 0;
    }

    .precio-plan {
        padding-left: 0;
        border-left: 0;
        text-align: left;
    }

    .duracion-plan {
        padding-right: 0;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    #servicios {
        padding: 38px 0;
    }

    .contenedor-servicios {
        width: 90%;
        max-width: 430px;
    }

    /* Encabezado */
    .encabezado-servicios {
        width: 100%;
        max-width: 370px;
        margin: 15px auto 20px;
    }

    .encabezado-servicios h2 {
        font-size: 25px;
        line-height: 1.1;
    }

    .encabezado-servicios p {
        font-size: 13px;
        line-height: 1.4;
    }

    .encabezado-servicios span {
        margin-top: 5px;
        font-size: 10px;
        line-height: 1.35;
    }

    #selector-descripcion {
        margin-top: 3px;
        font-size: 10px;
    }

    /* ====SELECTORES====== */

    .selector-planes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        width: 100%;
        margin: 0 0 20px;
        padding: 0;

        overflow: visible;
    }

    .plan-tab {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 7px;

        width: 100%;
        min-width: 0;
        min-height: 72px;

        padding: 9px 8px;
        box-sizing: border-box;

        scroll-snap-align: none;
    }

    .numero-plan {
        width: 36px;
        height: 36px;
        min-width: 36px;

        font-size: 15px;
    }

    .info-plan {
        min-width: 0;
    }

    .info-plan h3 {
        margin: 0 0 2px;
        font-size: 12px;
        line-height: 1.05;
    }

    .info-plan p {
        margin: 0;
        font-size: 8px;
        line-height: 1.2;
    }

    .plan-tab.activo::after {
        top: -6px;
        right: -5px;

        width: 22px;
        height: 22px;

        font-size: 10px;
    }
}

/* ======DETALLE PLAN====== */

.detalle-plan {
    width: 100%;
    margin-bottom: 25px;
    border-radius: 13px;
}

.detalle-plan-info {
    padding: 22px 18px;
}

.detalle-plan-entregable {
    padding: 22px 18px;
}

/* Título */
.titulo-detalle {
    gap: 10px;
    margin-bottom: 18px;
}

.numero-detalle {
    min-width: 45px;
    padding-right: 9px;
    font-size: 28px;
}

.titulo-detalle h3 {
    font-size: 20px;
    line-height: 1.05;
}

.titulo-detalle p {
    font-size: 11px;
    line-height: 1.35;
}

/* Información */
.bloque-detalle {
    margin-bottom: 16px;
}

.bloque-detalle h4 {
    padding-left: 25px;
    font-size: 10px;
}

.bloque-detalle h4::before {
    width: 17px;
    height: 17px;
}

.bloque-detalle p {
    font-size: 11px;
    line-height: 1.45;
}

/* Pasos */
.pasos-plan {
    gap: 6px;
}

.paso-plan {
    gap: 7px;
}

.paso-plan p {
    font-size: 10px;
    line-height: 1.4;
}

/* =========PRECIO + DURACIÓN + BOTÓN========= */

.pie-plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    padding-top: 15px;
}

.boton-plan {
    grid-column: 1 / -1;
    order: 3;

    width: 100%;
    min-height: 42px;

    margin: 0;
    padding: 10px 14px;

    font-size: 11px;
    border-radius: 999px;
}

.precio-plan,
.duracion-plan {
    padding: 0;
    border-left: 0;
    text-align: left;
}

.precio-plan span,
.duracion-plan span {
    font-size: 8px;
}

.precio-plan strong {
    font-size: 17px;
}

.duracion-plan strong {
    font-size: 10px;
}

/* ===============================================================
       ENTREGABLE
       =============================================================== */

.encabezado-entregable {
    gap: 9px;
    margin-bottom: 14px;
}

.icono-entregable {
    width: 31px;
    height: 31px;
    font-size: 14px;
}

.encabezado-entregable h4 {
    font-size: 10px;
}

.encabezado-entregable p {
    font-size: 10px;
}

/* Mockup */
.mockup-entregable {
    padding: 12px;
    border-radius: 10px;
}

.mockup-entregable h5 {
    font-size: 11px;
}

.mockup-grid {
    grid-template-columns: 1fr;
    gap: 7px;
}

.mockup-bloque {
    min-height: 65px;
    padding: 9px;
}

.mockup-acciones {
    grid-template-columns: 1fr;
    gap: 7px;
}

.mockups-varios {
    grid-template-columns: 1fr;
}


/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    #servicios {
        padding: 35px 0;
    }

    .contenedor-servicios {
        width: 90%;
    }

    .encabezado-servicios h2 {
        font-size: 23px;
    }

    .encabezado-servicios p {
        font-size: 12px;
    }

    /* Selector */
    .plan-tab {
        flex-basis: 190px;
        width: 190px;
        min-width: 190px;

        grid-template-columns: 36px 1fr;
    }

    .numero-plan {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    .info-plan h3 {
        font-size: 12px;
    }

    .info-plan p {
        font-size: 8.5px;
    }

    /* Detalle */
    .detalle-plan-info,
    .detalle-plan-entregable {
        padding: 20px 16px;
    }

    .numero-detalle {
        min-width: 42px;
        font-size: 26px;
    }

    .titulo-detalle h3 {
        font-size: 19px;
    }

    .titulo-detalle p {
        font-size: 10px;
    }

    .bloque-detalle p {
        font-size: 10.5px;
    }

    .paso-plan p {
        font-size: 9.5px;
    }

    .precio-plan strong {
        font-size: 16px;
    }

    .boton-plan {
        font-size: 10px;
    }
}



/* ==========================================================================
   SERVICIOS — TABLA COMPARATIVA
   ========================================================================== */

#comparativa-servicios {
    padding: 45px 20px;
    background: var(--blush);
}

#comparativa-servicios .contenedor-comparativa {
    width: min(82%, 980px);
    margin: 40px auto;
}

/* Encabezado */

#comparativa-servicios .superior-comparativa {
    display: grid;
    grid-template-columns: 145px repeat(4, 1fr);
    gap: 7px;
    align-items: start;
    margin-bottom: 6px;
}

#comparativa-servicios .encabezado-comparativa {
    grid-column: 1 / 5;
    width: 100%;
    margin: 0;
    padding: 0 25px;
    text-align: left;
    margin-bottom: 0px;

}

#comparativa-servicios .encabezado-comparativa h2 {
    margin: 0 0 7px;
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1;
    color: var(--maroon);
}

#comparativa-servicios .encabezado-comparativa p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.3;
    color: var(--brown);
}

#comparativa-servicios .encabezado-comparativa .indicacion {
    font-size: 10px;
    font-weight: 600;
    margin-top: 8px;
}

#comparativa-servicios .indicacion-scroll {
    display: none;
}

/* Nota Impulso continuo */

#comparativa-servicios .fila-nota-impulso {
    display: grid;
    grid-template-columns: 145px repeat(4, 1fr);
    gap: 7px;
    width: 100%;
    min-width: 760px;
    margin-bottom: 8px;
}

#comparativa-servicios .nota-impulso {
    grid-column: 5/ 6;
    margin: 0;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--pastel-blue);
    text-align: center;

}

#comparativa-servicios .nota-impulso h4 {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.1;
    color: var(--maroon);
}

#comparativa-servicios .nota-impulso p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 9px;
    line-height: 1.2;
    color: var(--brown);
}

#cta_nota {
    margin-top: 60px !important;
    margin-bottom: 0;
}

/* Scroll */

#comparativa-servicios .tabla-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;

    /* Firefox y navegadores compatibles */
    scrollbar-width: thin;
    scrollbar-color: var(--rose-pink) #f3edf0;
}

/* Chrome, Safari y Edge */
#comparativa-servicios .tabla-scroll::-webkit-scrollbar {
    height: 9px;
}

#comparativa-servicios .tabla-scroll::-webkit-scrollbar-track {
    background: #f1edef;
    border-radius: 999px;
}

#comparativa-servicios .tabla-scroll::-webkit-scrollbar-thumb {
    border: 2px solid #f1edef;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rose-light),
            var(--rose-pink));
}

#comparativa-servicios .tabla-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, var(--rose-pink), #c86f95);
}

/* Tabla */

#comparativa-servicios .tabla-comparativa {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 7px 0;
    background: var(--blush);
    font-family: var(--font-body);
}

#comparativa-servicios .tabla-comparativa th,
#comparativa-servicios .tabla-comparativa td {
    padding: 6px 7px;
    vertical-align: middle;
}

#comparativa-servicios .tabla-comparativa td {
    min-width: 115px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--brown);
    text-align: center;
}

/* Columna características */

#comparativa-servicios .tabla-comparativa th:first-child,
#comparativa-servicios .tabla-comparativa td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    border-right: 1px solid #EF9FBA;
    border-bottom: 1px solid #EFC5D3;
    border-left: 1px solid #EF9FBA;
    background: var(--blush);
}

#comparativa-servicios .tabla-comparativa thead th:first-child {
    border-top: 1px solid #EF9FBA;
    border-radius: 12px 12px 0 0;

}

#comparativa-servicios .tabla-comparativa tbody tr:last-child th:first-child,
#comparativa-servicios .tabla-comparativa tbody tr:last-child td:first-child {
    border-bottom: 1px solid #EF9FBA;
    border-radius: 0 0 12px 12px;
}

#comparativa-servicios .columna-caracteristicas {
    width: 145px;
    min-width: 145px;
    max-width: 145px;
    color: var(--maroon);
    text-align: left;
}

/* Punto de partida */

#comparativa-servicios .tabla-comparativa th:nth-child(2),
#comparativa-servicios .tabla-comparativa td:nth-child(2) {
    border-right: 1px solid #EF8CAF;
    border-bottom: 1px solid #F2CCD9;
    border-left: 1px solid #EF8CAF;
}

#comparativa-servicios .tabla-comparativa thead th:nth-child(2) {
    border-top: 1px solid #EF8CAF;
    border-radius: 12px 12px 0 0;
}

#comparativa-servicios .tabla-comparativa tbody tr:last-child td:nth-child(2) {
    border-bottom: 1px solid #EF8CAF;
    border-radius: 0 0 12px 12px;
}

/* Mirada estratégica */

#comparativa-servicios .tabla-comparativa th:nth-child(3),
#comparativa-servicios .tabla-comparativa td:nth-child(3) {
    border-right: 1px solid #B98AD4;
    border-bottom: 1px solid #DFCCE9;
    border-left: 1px solid #B98AD4;
}

#comparativa-servicios .tabla-comparativa thead th:nth-child(3) {
    border-top: 1px solid #B98AD4;
    border-radius: 12px 12px 0 0;
}

#comparativa-servicios .tabla-comparativa tbody tr:last-child td:nth-child(3) {
    border-bottom: 1px solid #B98AD4;
    border-radius: 0 0 12px 12px;
}

/* Ruta 90 días */

#comparativa-servicios .tabla-comparativa th:nth-child(4),
#comparativa-servicios .tabla-comparativa td:nth-child(4) {
    border-right: 1px solid #E5AA52;
    border-bottom: 1px solid #EED8B6;
    border-left: 1px solid #E5AA52;
}

#comparativa-servicios .tabla-comparativa thead th:nth-child(4) {
    border-top: 1px solid #E5AA52;
    border-radius: 12px 12px 0 0;
}

#comparativa-servicios .tabla-comparativa tbody tr:last-child td:nth-child(4) {
    border-bottom: 1px solid #E5AA52;
    border-radius: 0 0 12px 12px;
}

/* Impulso continuo */

#comparativa-servicios .tabla-comparativa th:nth-child(5),
#comparativa-servicios .tabla-comparativa td:nth-child(5) {
    border-right: 1px solid #63AFC1;
    border-bottom: 1px solid #C6DFE5;
    border-left: 1px solid #63AFC1;
}

#comparativa-servicios .tabla-comparativa thead th:nth-child(5) {
    border-top: 1px solid #63AFC1;
    border-radius: 12px 12px 0 0;
}

#comparativa-servicios .tabla-comparativa tbody tr:last-child td:nth-child(5) {
    border-bottom: 1px solid #63AFC1;
    border-radius: 0 0 12px 12px;
}

/* Características */

#comparativa-servicios .caracteristica,
#comparativa-servicios .img-referencia {
    display: flex;
    align-items: center;
    gap: 6px;
}

#comparativa-servicios .caracteristica span {
    font-size: 10px;
    font-weight: 520;
    line-height: 1.15;
}

#comparativa-servicios .icono-caracteristica {
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    object-fit: contain;
}

#comparativa-servicios .icono-centrado {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0 auto;
    object-fit: contain;
}

#comparativa-servicios .icono-izquierda {
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

/* Encabezados de los planes */

#comparativa-servicios .encabezado-plan {
    min-width: 135px;
    padding: 14px 8px !important;
    text-align: center;
}

#comparativa-servicios .encabezado-plan h3,
#comparativa-servicios .columna-caracteristicas h3 {
    margin: 5px 0 5px;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.05;
    color: var(--maroon);
    text-align: center;
}

#comparativa-servicios .icono-plan {
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 3px;
    object-fit: contain;
}

#comparativa-servicios .etiqueta-plan {
    display: inline-block;
    margin-top: 2px;
    padding: 4px 7px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    color: var(--maroon);
}

/* Colores */

#comparativa-servicios .plan-rosa {
    background: #FFF0F6;
}

#comparativa-servicios .plan-rosa .etiqueta-plan {
    background: var(--rose-light);
}

#comparativa-servicios .plan-morado {
    background: #F7F0FA;
}

#comparativa-servicios .plan-morado .etiqueta-plan {
    background: #EAD8F1;
}

#comparativa-servicios .plan-naranjo {
    background: #FFF8EF;
}

#comparativa-servicios .plan-naranjo .etiqueta-plan {
    background: #F4DFC3;
}

#comparativa-servicios .plan-azul {
    background: #F1F7F9;
}

#comparativa-servicios .plan-azul .etiqueta-plan {
    background: #DBECEF;
}

/* Entregables */

#comparativa-servicios .fila-entregable td {
    padding-top: 7px;
    padding-bottom: 7px;
}

#comparativa-servicios .entregable {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#comparativa-servicios .entregable img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

#comparativa-servicios .entregable span {
    font-size: 9.5px;
    line-height: 1.15;
}

/* Filas destacadas */

#comparativa-servicios .fila-entregable th,
#comparativa-servicios .fila-ideal th {
    background: #FFF0F5;
}

#comparativa-servicios .fila-entregable td:nth-child(2),
#comparativa-servicios .fila-ideal td:nth-child(2) {
    background: #FFF0F5;
}

#comparativa-servicios .fila-entregable td:nth-child(3),
#comparativa-servicios .fila-ideal td:nth-child(3) {
    background: #F5EDF9;
}

#comparativa-servicios .fila-entregable td:nth-child(4),
#comparativa-servicios .fila-ideal td:nth-child(4) {
    background: #FFF4E6;
}

#comparativa-servicios .fila-entregable td:nth-child(5),
#comparativa-servicios .fila-ideal td:nth-child(5) {
    background: #EAF6F8;
}

/* Precios */

#comparativa-servicios .fila-precio td {
    padding: 7px;
}

#comparativa-servicios .fila-precio p {
    margin: 4px 0 3px;
    font-size: 13px;
    line-height: 1;
    font-weight: 550;
}

#comparativa-servicios .precio-rosa,
#comparativa-servicios .precio-1 {
    color: #B36781;
}

#comparativa-servicios .precio-2 {
    color: #A167C3;
}

#comparativa-servicios .precio-3 {
    color: #CB9E63;
}

#comparativa-servicios .precio-4 {
    margin-bottom: 0;
    color: #397886;
}

#comparativa-servicios .fila-precio small {
    display: block;
    margin: 2px 0 4px;
    font-size: 8.5px;
    line-height: 1.1;
    color: var(--dusty-rose);
}

#comparativa-servicios .precio-especial {
    color: var(--maroon);
    font-size: 15px;
    font-weight: 700;
    margin: 4px 0 3px;
}
/* Precio especial */
#comparativa-servicios .fila-precio-especial th,
#comparativa-servicios .fila-precio-especial td {
    background: #F4CEDA;
}
/* Botones */

#comparativa-servicios .fila-botones th,
#comparativa-servicios .fila-botones td {
    padding-top: 10px;
    padding-bottom: 10px;
}

#comparativa-servicios .cta-comparativa {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 4px;
    font-size: 11px;
    line-height: 1.1;
    color: var(--maroon);
}

#comparativa-servicios .cta-comparativa span {
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--brown);
}

#comparativa-servicios .btn-elegir-impulsa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 7px 10px;
    border: 1px solid var(--maroon);
    border-radius: 50px;
    background: var(--maroon);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 500;
    color: var(--blush);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    font-family: var(--font-body);
}

#comparativa-servicios .btn-elegir-impulsa:hover {
    transform: translateY(-1px);
    background: var(--rose-light);
    color: #3A0A13;
}

/* Notas inferiores */

#comparativa-servicios .notas-comparativa {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.2fr;
    align-items: center;
    gap: 8px;
    width: 85%;
    margin: 8px auto 0;
    padding: 0;
}

#comparativa-servicios .notas-comparativa p {
    margin: 0;
    font-size: 9px;
    line-height: 1.2;
    color: var(--brown);
    text-align: left;
}

#comparativa-servicios .nota-destacada {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--maroon);
}

#comparativa-servicios .icono-nota {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    object-fit: contain;
}

/* ==========================================================================
   RESPONSIVE TABLA COMPARATIVA — TABLET / IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    #comparativa-servicios {
        padding: 45px 0;
    }

    #comparativa-servicios .contenedor-comparativa {
        width: 92%;
        margin: 35px auto;
    }

    #comparativa-servicios .encabezado-comparativa h2 {
        font-size: 28px;
    }

    #comparativa-servicios .encabezado-comparativa p {
        font-size: 14px;
    }

    /* Scroll horizontal */
    #comparativa-servicios .tabla-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    #comparativa-servicios .tabla-comparativa {
        width: 820px;
        min-width: 820px;
    }

    /* Nota Impulso continuo */
    #comparativa-servicios .fila-nota-impulso {
        width: 820px;
        min-width: 820px;
        grid-template-columns: 145px repeat(4, 1fr);
    }

    /* Aviso deslizar */
    #comparativa-servicios .indicacion-scroll {
        display: block;
        margin: 10px 0 8px;
        color: var(--maroon);
        font-size: 10px;
        font-style: italic;
        font-weight: 600;
        text-align: center;
    }

    /* Primera columna */
    #comparativa-servicios .columna-caracteristicas {
        width: 145px;
        min-width: 145px;
        max-width: 145px;

        box-shadow: 5px 0 9px rgba(78, 14, 26, 0.06);
    }
}

/* ==========================================================================
   IPAD VERTICAL
   ========================================================================== */

@media (max-width: 820px) {

    #comparativa-servicios {
        padding: 40px 0;
    }

    #comparativa-servicios .contenedor-comparativa {
        width: 94%;
        margin: 30px auto;
    }

    #comparativa-servicios .encabezado-comparativa {
        width: 92%;
        padding: 0;
    }

    #comparativa-servicios .encabezado-comparativa h2 {
        font-size: 27px;
        line-height: 1.1;
    }

    #comparativa-servicios .encabezado-comparativa p {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Tabla mantiene ancho para no comprimir */
    #comparativa-servicios .tabla-comparativa {
        width: 790px;
        min-width: 790px;
    }

    #comparativa-servicios .fila-nota-impulso {
        width: 790px;
        min-width: 790px;
    }

    /* Primera columna fija */
    #comparativa-servicios .tabla-comparativa th:first-child,
    #comparativa-servicios .tabla-comparativa td:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 5;
    }

    #comparativa-servicios .columna-caracteristicas {
        width: 135px;
        min-width: 135px;
        max-width: 135px;
    }

    #comparativa-servicios .encabezado-plan {
        min-width: 140px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    #comparativa-servicios {
        padding: 35px 0 40px;
    }

    #comparativa-servicios .contenedor-comparativa {
        width: 100%;
        margin: 25px auto;
    }

    /* ==========================================================================
       ENCABEZADO
       ========================================================================== */

    #comparativa-servicios .superior-comparativa {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    #comparativa-servicios .encabezado-comparativa {
        width: 88%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    #comparativa-servicios .encabezado-comparativa h2 {
        font-size: 24px;
        line-height: 1.1;
    }

    #comparativa-servicios .encabezado-comparativa p {
        font-size: 12.5px;
        line-height: 1.4;
    }

    #comparativa-servicios .indicacion-scroll {
        display: block;
        margin: 10px auto;
        font-size: 10px;
        text-align: center;
    }

    /* ==========================================================================
       SCROLL
       ========================================================================== */

    #comparativa-servicios .tabla-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        padding: 0 0 10px;

        scrollbar-width: thin;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* ==========================================================================
       TABLA
       ========================================================================== */

    #comparativa-servicios .tabla-comparativa {
        width: 750px;
        min-width: 750px;
        border-spacing: 5px 0;
    }

    #comparativa-servicios .tabla-comparativa th,
    #comparativa-servicios .tabla-comparativa td {
        padding: 7px 6px;
    }

    #comparativa-servicios .tabla-comparativa td {
        font-size: 9px;
        line-height: 1.25;
    }

    /* ==========================================================================
       PRIMERA COLUMNA FIJA
       ========================================================================== */

    #comparativa-servicios .tabla-comparativa th:first-child,
    #comparativa-servicios .tabla-comparativa td:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 6;

        background: var(--blush);

        box-shadow: 5px 0 9px rgba(78, 14, 26, 0.08);
    }

    #comparativa-servicios .tabla-comparativa thead th:first-child {
        z-index: 8;
    }

    #comparativa-servicios .columna-caracteristicas {
        width: 115px;
        min-width: 115px;
        max-width: 115px;

        padding: 8px 6px !important;
    }

    /* ==========================================================================
       CARACTERÍSTICAS
       ========================================================================== */

    #comparativa-servicios .caracteristica {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #comparativa-servicios .caracteristica span {
        font-size: 8.5px;
        line-height: 1.2;
    }

    #comparativa-servicios .icono-caracteristica {
        width: 20px;
        height: 20px;
    }

    #comparativa-servicios .icono-centrado,
    #comparativa-servicios .icono-izquierda {
        width: 15px;
        height: 15px;
    }

    /* ==========================================================================
       PLANES
       ========================================================================== */

    #comparativa-servicios .encabezado-plan {
        width: 145px;
        min-width: 145px;
        padding: 10px 6px !important;
    }

    #comparativa-servicios .encabezado-plan h3,
    #comparativa-servicios .columna-caracteristicas h3 {
        font-size: 14px;
        line-height: 1.05;
    }

    #comparativa-servicios .icono-plan {
        width: 38px;
        height: 38px;
    }

    #comparativa-servicios .etiqueta-plan {
        padding: 4px 6px;
        font-size: 8px;
    }

    /* ==========================================================================
       NOTA IMPULSO CONTINUO
       ========================================================================== */

    #comparativa-servicios .fila-nota-impulso {
        width: 750px;
        min-width: 750px;
        grid-template-columns: 115px repeat(4, 145px);
        gap: 5px;
        margin: 0 0 10px;
    }

    #comparativa-servicios .nota-impulso {
        grid-column: 5 / 6;
        width: 100%;
        padding: 6px 8px;
        border-radius: 9px;
    }

    #comparativa-servicios .nota-impulso h4 {
        font-size: 12px;
    }

    #comparativa-servicios .nota-impulso p {
        font-size: 8px;
        line-height: 1.2;
    }

    #comparativa-servicios .nota-impulso::after {
        bottom: -5px;
        width: 10px;
        height: 10px;
    }
}

/* ==========================================================================
       ENTREGABLES
       ========================================================================== */

#comparativa-servicios .entregable {
    gap: 4px;
}

#comparativa-servicios .entregable img {
    width: 24px;
    height: 24px;
}

#comparativa-servicios .entregable span {
    font-size: 8.5px;
    line-height: 1.2;
}

/* ==========================================================================
       PRECIOS
       ========================================================================== */

#comparativa-servicios .fila-precio p {
    font-size: 11.5px;
}

#comparativa-servicios .fila-precio small {
    font-size: 7.5px;
}

#comparativa-servicios .precio-especial {
    font-size: 13px;
}

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

#comparativa-servicios .cta-comparativa {
    gap: 4px;
    margin: 0 2px;
}

#comparativa-servicios .cta-comparativa span {
    font-size: 8px;
}

#comparativa-servicios .btn-elegir-impulsa {
    width: 100%;
    min-height: 29px;

    padding: 7px 6px;

    font-size: 9px;
    line-height: 1.15;

    text-align: center;
}

/* ==========================================================================
       NOTAS INFERIORES
       ========================================================================== */

#comparativa-servicios .notas-comparativa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 28px;

    width: fit-content;
    max-width: none;

    margin: 18px auto 0;
}

#comparativa-servicios .notas-comparativa p {
    margin: 0;
    font-size: 8.5px;
    line-height: 1.35;
    white-space: nowrap;
}

#comparativa-servicios .icono-nota {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

#cta_nota {
    margin-top: 35px !important;
}


/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    #comparativa-servicios .encabezado-comparativa {
        width: 86%;
    }

    #comparativa-servicios .encabezado-comparativa h2 {
        font-size: 22px;
    }

    #comparativa-servicios .encabezado-comparativa p {
        font-size: 12px;
    }

    /* Tabla */
    #comparativa-servicios .tabla-comparativa {
        width: 720px;
        min-width: 720px;
    }

    /* Nota */
    #comparativa-servicios .fila-nota-impulso {
        width: 720px;
        min-width: 720px;
        grid-template-columns: 108px repeat(4, 140px);
    }

    /* Primera columna */
    #comparativa-servicios .columna-caracteristicas {
        width: 108px;
        min-width: 108px;
        max-width: 108px;
    }

    #comparativa-servicios .caracteristica span {
        font-size: 8px;
    }

    /* Planes */
    #comparativa-servicios .encabezado-plan {
        width: 140px;
        min-width: 140px;
    }

    #comparativa-servicios .encabezado-plan h3,
    #comparativa-servicios .columna-caracteristicas h3 {
        font-size: 13px;
    }

    #comparativa-servicios .entregable span {
        font-size: 8px;
    }

    #comparativa-servicios .btn-elegir-impulsa {
        font-size: 8.5px;
    }

    #comparativa-servicios .notas-comparativa {
        width: 86%;
    }
}

/* ==========================================================================
   SOLICITUD MORENA IMPULSA
   ========================================================================== */

#modal-solicitud-impulsa {
    --color-plan: #e47aa2;
    --color-plan-suave: #f9e1ea;

    width: min(92%, 520px);
    max-height: 90vh;
    padding: 0;
    border: none;
    border-radius: 22px;
    background: #fff9fb;

    overflow: auto;
}

#modal-solicitud-impulsa[data-plan="punto-partida"] {
    --color-plan: #e47aa2;
    --color-plan-suave: #f9e1ea;
}

#modal-solicitud-impulsa[data-plan="mirada-estrategica"] {
    --color-plan: #a978dc;
    --color-plan-suave: #eee2f8;
}

#modal-solicitud-impulsa[data-plan="ruta-90-dias"] {
    --color-plan: #dda83d;
    --color-plan-suave: #f9edcf;
}

#modal-solicitud-impulsa[data-plan="impulso-continuo"] {
    --color-plan: #6fb5c8;
    --color-plan-suave: #e2f1f5;
}

#modal-solicitud-impulsa::backdrop {
    background: rgba(234, 120, 160, 0.38);
}

.modal-impulsa {
    position: relative;
    padding: 34px 36px 30px;
    color: var(--maroon);
}

/* Cerrar */
.cerrar-modal-impulsa {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.cerrar-modal-impulsa::before,
.cerrar-modal-impulsa::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 5px;
    width: 18px;
    height: 1.5px;
    background: var(--maroon);
}

.cerrar-modal-impulsa::before {
    transform: rotate(45deg);
}

.cerrar-modal-impulsa::after {
    transform: rotate(-45deg);
}

/* Pasos */
.paso-impulsa {
    display: none;
}

.paso-impulsa.activo {
    display: block;
}

/* Encabezado */
.encabezado-solicitud-impulsa {
    margin-bottom: 22px;
    text-align: center;
}

.titulo-solicitud-impulsa {
    margin: 0 0 5px;
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--maroon);
}

.plan-seleccionado-impulsa {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-plan);
}

.plan-seleccionado-impulsa em {
    font-family: var(--font-display);
    font-style: italic;
}

/* Progreso */
.progreso-impulsa {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto 25px;
}

.item-progreso-impulsa {
    width: 76px;
    text-align: center;
}

.item-progreso-impulsa>span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
    border: 1px solid var(--color-plan);
    border-radius: 50%;
    background: #fff9fb;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-plan);
}

.item-progreso-impulsa.activo>span {
    background: var(--color-plan);
    color: white;
}

.item-progreso-impulsa p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--maroon);
}

.linea-progreso-impulsa {
    width: 55px;
    height: 1px;
    margin-top: 15px;
    background: var(--color-plan);
    opacity: 0.45;
}

/* Formulario */
#form-solicitud-impulsa {
    display: grid;
    gap: 14px;
}

.campo-impulsa {
    display: grid;
    gap: 6px;
}

.campo-impulsa label {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--maroon);
}

.campo-impulsa input,
.campo-impulsa select,
.campo-impulsa textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(91, 20, 43, 0.18);
    border-radius: 9px;
    background: white;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.4;
    color: var(--maroon);
    outline: none;
}

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

.campo-impulsa input:focus,
.campo-impulsa select:focus,
.campo-impulsa textarea:focus {
    border-color: var(--color-plan);
    box-shadow: 0 0 0 2px var(--color-plan-suave);
}

.campo-impulsa input::placeholder,
.campo-impulsa textarea::placeholder {
    color: rgba(91, 20, 43, 0.42);
}

/* Botón principal */
.boton-continuar-impulsa {
    width: 100%;
    margin-top: 5px;
    padding: 12px 18px;
    border: none;
    border-radius: 30px;
    background: var(--color-plan);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.boton-continuar-impulsa:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.boton-volver-impulsa {
    display: block;
    margin: 15px auto 0;
    padding: 3px 0;
    border: none;
    border-bottom: 1px solid var(--maroon);
    background: transparent;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--maroon);
    cursor: pointer;
}

/* Paso 2 */
.resumen-plan-impulsa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 20px 0 16px;
    padding: 17px;
    border-radius: 15px;
    background: var(--color-plan-suave);
}

.resumen-plan-impulsa>div:first-child {
    display: grid;
    gap: 3px;
}

.resumen-plan-impulsa strong {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.1;
    color: var(--maroon);
}

.resumen-plan-impulsa span {
    font-family: var(--font-body);
    font-size: 9px;
    line-height: 1.35;
    color: var(--maroon);
}

.precio-plan-revision {
    display: grid;
    gap: 3px;
    min-width: 145px;
    text-align: right;
}

.precio-plan-revision strong {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
}

/* Aviso */
.aviso-impulsa {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pastel-blue);
}

.aviso-impulsa p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 9px;
    line-height: 1.5;
    color: var(--maroon);
}

/* Confirmación */
.confirmacion-impulsa {
    text-align: center;
}

.check-impulsa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: var(--color-plan);
    font-size: 25px;
    color: white;
}

.confirmacion-impulsa h2 {
    margin: 0 0 5px;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.1;
    color: var(--maroon);
}

.confirmacion-impulsa>p {
    max-width: 380px;
    margin: 0 auto 20px;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
    color: var(--maroon);
}

.lista-confirmacion-impulsa {
    max-width: 350px;
    margin: 0 auto 20px;
    padding: 15px 18px;
    border-radius: 14px;
    background: var(--color-plan-suave);
    text-align: left;
}

.lista-confirmacion-impulsa p {
    margin: 8px 0;
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.4;
    color: var(--maroon);
}

.tiempo-respuesta-impulsa {
    font-weight: 600;
}

/* Mobile */
@media (max-width: 600px) {
    #modal-solicitud-impulsa {
        width: min(94%, 440px);
    }

    .modal-impulsa {
        padding: 32px 20px 25px;
    }

    .titulo-solicitud-impulsa {
        font-size: 24px;
    }

    .linea-progreso-impulsa {
        width: 32px;
    }

    .resumen-plan-impulsa {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .precio-plan-revision {
        min-width: 0;
        text-align: left;
    }
}

/* ==========================================================================
   AYUDA PARA ELEGIR
   ========================================================================== */

.no-sabe-elegir {
    width: 100%;
    padding: 35px 24px 25px;
    box-sizing: border-box;
    background: var(--blush);
}

/* ==========================================================================
   TARJETA PRINCIPAL
   ========================================================================== */

.no-sabe-elegir .cta_servicios {
    position: relative;
    width: min(90%, 760px);
    margin: 0 auto;
    padding: 28px 30px 26px;
    box-sizing: border-box;
    border: 1px solid var(--rose-pink);
    border-radius: 28px;
    background: var(--rose-light);
    box-shadow:
        0 10px 25px rgba(78, 14, 26, 0.12),
        0 4px 10px rgba(78, 14, 26, 0.08);
    text-align: center;
}

/* Título */
.no-sabe-elegir .cta_servicios h2 {
    margin: 0 0 7px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

/* Texto */
.no-sabe-elegir .cta_servicios p {
    max-width: 470px;
    margin: 0 auto 20px;
    color: var(--brown);
    font-size: 14px;
    line-height: 1.45;
}

/* ==========================================================================
   BOTÓN
   ========================================================================== */

.no-sabe-elegir .cta_servicios1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 285px;
    padding: 12px 28px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--maroon);
    box-shadow: 0 5px 12px rgba(78, 14, 26, 0.18);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.no-sabe-elegir .cta_servicios1:hover {
    background: var(--maroon-deep);
    box-shadow: 0 8px 18px rgba(78, 14, 26, 0.22);
    color: var(--white);
    transform: translateY(-2px);
}

.no-sabe-elegir .cta_servicios1:visited {
    color: var(--white);
}

/* ==========================================================================
   MENCIÓN CUPOS
   ========================================================================== */

.no-sabe-elegir .mencion-cupos {
    width: min(90%, 850px);
    margin: 30px auto 0;
}

.no-sabe-elegir .mencion-cupos p {
    margin: 0;
    color: var(--maroon);
    text-align: center;
}

.no-sabe-elegir .mencion-cupos>p:first-child {
    max-width: 700px;
    margin: 0 auto 10px;
    font-size: 16px;
    line-height: 1.4;
}

/* Nota */
.no-sabe-elegir #cta_nota {
    max-width: 780px;
    margin: 0 auto;
    color: var(--maroon);
    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

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

.no-sabe-elegir::after {
    content: "";
    display: block;
    width: calc(100% + 48px);
    height: 5px;
    margin-top: 30px;
    margin-left: -24px;
    background: var(--rose-light);
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    .no-sabe-elegir {
        padding: 35px 22px 22px;
    }

    .no-sabe-elegir .cta_servicios {
        width: min(88%, 700px);
        padding: 27px 28px 27px;
    }

    .no-sabe-elegir .cta_servicios h2 {
        font-size: 27px;
    }

    .no-sabe-elegir .cta_servicios p {
        font-size: 14px;
    }

    .no-sabe-elegir .mencion-cupos {
        width: min(88%, 760px);
    }

    .no-sabe-elegir .mencion-cupos>p:first-child {
        font-size: 15px;
    }

    .no-sabe-elegir #cta_nota {
        font-size: 10.5px;
    }

    .no-sabe-elegir::after {
        width: calc(100% + 44px);
        margin-left: -22px;
    }
}

/* ==========================================================================
   IPAD VERTICAL
   ========================================================================== */

@media (max-width: 820px) {

    .no-sabe-elegir {
        padding-top: 32px;
    }

    .no-sabe-elegir .cta_servicios {
        width: min(90%, 620px);
        padding: 26px 25px;
        border-radius: 25px;
    }

    .no-sabe-elegir .cta_servicios h2 {
        font-size: 26px;
    }

    .no-sabe-elegir .cta_servicios p {
        max-width: 430px;
        font-size: 13.5px;
    }

    .no-sabe-elegir .cta_servicios1 {
        min-width: 260px;
        font-size: 14px;
    }

    .no-sabe-elegir .mencion-cupos {
        width: min(90%, 620px);
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    .no-sabe-elegir {
        padding: 30px 18px 20px;
    }

    /* Tarjeta */
    .no-sabe-elegir .cta_servicios {
        width: 100%;
        max-width: 430px;
        padding: 24px 20px 25px;
        border-radius: 22px;
    }

    /* Título */
    .no-sabe-elegir .cta_servicios h2 {
        max-width: 310px;
        margin: 0 auto 8px;
        font-size: 24px;
        line-height: 1.1;
    }

    /* Texto */
    .no-sabe-elegir .cta_servicios p {
        max-width: 320px;
        margin-bottom: 18px;
        font-size: 13px;
        line-height: 1.45;
    }

    /* Botón */
    .no-sabe-elegir .cta_servicios1 {
        width: 100%;
        max-width: 300px;
        min-width: 0;
        padding: 12px 18px;
        font-size: 13px;
    }

    /* Cupos */
    .no-sabe-elegir .mencion-cupos {
        width: 100%;
        max-width: 400px;
        margin-top: 24px;
    }

    .no-sabe-elegir .mencion-cupos>p:first-child {
        max-width: 330px;
        margin: 0 auto 12px;
        font-size: 13px;
        line-height: 1.45;
    }

    .no-sabe-elegir #cta_nota {
        max-width: 340px;
        font-size: 9px;
        line-height: 1.45;
        text-align: center;
    }

    /* Franja inferior */
    .no-sabe-elegir::after {
        width: calc(100% + 36px);
        margin-top: 25px;
        margin-left: -18px;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    .no-sabe-elegir {
        padding-right: 15px;
        padding-left: 15px;
    }

    .no-sabe-elegir .cta_servicios {
        padding: 22px 17px 23px;
    }

    .no-sabe-elegir .cta_servicios h2 {
        max-width: 280px;
        font-size: 22px;
    }

    .no-sabe-elegir .cta_servicios p {
        max-width: 280px;
        font-size: 12px;
    }

    .no-sabe-elegir .cta_servicios1 {
        max-width: 280px;
        padding: 11px 15px;
        font-size: 12px;
    }

    .no-sabe-elegir .mencion-cupos>p:first-child {
        max-width: 290px;
        font-size: 12px;
    }

    .no-sabe-elegir #cta_nota {
        max-width: 300px;
        font-size: 8.5px;
    }

    .no-sabe-elegir::after {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
}

/* ==========================================================================
   ESTO ES PARA TI
   ========================================================================== */

#esto_es_para_ti {
    width: 100%;
    padding: 45px 24px 50px;
    box-sizing: border-box;
    background: var(--blush);
    text-align: center;
}

/* Contenedor */
#esto_es_para_ti .contenedor-para-ti {
    width: min(88%, 820px);
    margin: 0 auto;
}

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */

#esto_es_para_ti .encabezado-para-ti {
    position: relative;
    z-index: 3;
}

#esto_es_para_ti h1 {
    margin: 0 0 25px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

/* ==========================================================================
   CONTENIDO
   ========================================================================== */

#esto_es_para_ti .contenido-para-ti {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 15px 0;
}

/* Cinta de fondo */
#esto_es_para_ti .cinta-para-ti {
    position: absolute;
    top: -75px;
    left: 50%;
    z-index: 1;

    width: 650px;
    max-width: 110%;
    height: auto;

    object-fit: contain;
    pointer-events: none;

    transform: translateX(-50%);
}

/* ==========================================================================
   LISTA
   ========================================================================== */

#esto_es_para_ti .lista-para-ti {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    width: min(95%, 520px);
    margin: 0 auto;
}

/* ==========================================================================
   TARJETAS
   ========================================================================== */

#esto_es_para_ti .item-para-ti {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 75px minmax(0, 1fr);
    align-items: center;

    width: 90%;
    max-width: 400px;
    min-height: 100px;

    margin: 0 auto 12px;
    padding: 10px;
    box-sizing: border-box;

    border: 1px solid #CDA6B1;
    border-radius: 14px;

    background: #FFF9F8;

    box-shadow: 0 8px 25px rgba(78, 14, 26, 0.04);

    transform-origin: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* Movimiento editorial */
#esto_es_para_ti .item-para-ti:nth-child(1) {
    transform: translateX(-5px) rotate(-1deg);
}

#esto_es_para_ti .item-para-ti:nth-child(2) {
    transform: translateX(5px) rotate(0.7deg);
}

#esto_es_para_ti .item-para-ti:nth-child(3) {
    transform: translateX(-3px) rotate(-0.8deg);
}

#esto_es_para_ti .item-para-ti:nth-child(4) {
    transform: translateX(4px) rotate(0.6deg);
}

#esto_es_para_ti .item-para-ti:hover {
    box-shadow: 0 12px 30px rgba(78, 14, 26, 0.08);
    transform: translateY(-3px) rotate(0);
}

/* ==========================================================================
   TICKET
   ========================================================================== */

#esto_es_para_ti .ticket {
    display: block;
    justify-self: center;
    align-self: center;

    width: 44px;
    height: auto;

    object-fit: contain;
}

/* ==========================================================================
   TEXTO TARJETAS
   ========================================================================== */

#esto_es_para_ti .item-para-ti p {
    min-width: 0;
    margin: 0;
    padding: 8px;

    color: var(--brown);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    text-align: left;
}

#esto_es_para_ti .item-para-ti strong {
    display: inline;

    padding: 2px 8px;

    border-radius: 8px;

    background: var(--rose-light);
    color: var(--maroon);

    font-weight: 700;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ==========================================================================
   CIERRE
   ========================================================================== */

#esto_es_para_ti .cierre-para-ti {
    margin: 25px 0 18px;

    color: var(--maroon);

    font-size: 16px;
    line-height: 1.4;
}

#esto_es_para_ti .cierre-para-ti .acentuado {
    margin-top: -8px;

    color: var(--rose-pink);

    font-size: 16px;
}

/* ==========================================================================
   BOTÓN
   ========================================================================== */

#esto_es_para_ti .boton-para-ti {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(100%, 400px);

    margin: 0 auto 30px;
    padding: 12px 20px;
    box-sizing: border-box;

    border-radius: 999px;

    background: var(--pastel-blue);

    box-shadow:
        6px 6px 0 rgba(78, 14, 26, 0.18),
        10px 10px 30px rgba(78, 14, 26, 0.18);

    color: var(--maroon);

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#esto_es_para_ti .boton-para-ti:hover {
    background: var(--rose-pink);
    color: var(--white);
    transform: translateY(-2px);
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    #esto_es_para_ti {
        padding: 45px 22px 45px;
    }

    #esto_es_para_ti .contenedor-para-ti {
        width: min(88%, 760px);
    }

    #esto_es_para_ti h1 {
        font-size: 30px;
    }

    #esto_es_para_ti .cinta-para-ti {
        top: -65px;
        width: 620px;
        max-width: 115%;
    }

    #esto_es_para_ti .lista-para-ti {
        max-width: 500px;
    }

    #esto_es_para_ti .item-para-ti {
        max-width: 390px;
    }

    #esto_es_para_ti .boton-para-ti {
        max-width: 380px;
        font-size: 15px;
    }
}

/* ==========================================================================
   IPAD VERTICAL
   ========================================================================== */

@media (max-width: 820px) {

    #esto_es_para_ti {
        padding: 42px 20px 40px;
    }

    #esto_es_para_ti .contenedor-para-ti {
        width: min(92%, 650px);
    }

    #esto_es_para_ti h1 {
        font-size: 29px;
    }

    #esto_es_para_ti .cinta-para-ti {
        top: -55px;
        width: 580px;
        max-width: 120%;
    }

    #esto_es_para_ti .item-para-ti {
        width: 92%;
        grid-template-columns: 65px minmax(0, 1fr);
    }

    #esto_es_para_ti .item-para-ti p {
        font-size: 13.5px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    #esto_es_para_ti {
        padding: 40px 18px 35px;
        overflow: hidden;
    }

    #esto_es_para_ti .contenedor-para-ti {
        width: 100%;
        max-width: 430px;
    }

    /* Título */
    #esto_es_para_ti h1 {
        margin-bottom: 22px;
        font-size: 27px;
        line-height: 1.1;
    }

    /* Contenido */
    #esto_es_para_ti .contenido-para-ti {
        padding: 10px 0;
    }

    /* Cinta */
    #esto_es_para_ti .cinta-para-ti {
        top: -38px;

        width: 500px;
        max-width: 135%;
    }

    /* Lista */
    #esto_es_para_ti .lista-para-ti {
        width: 100%;
        max-width: 390px;
        gap: 8px;
    }

    /* Tarjetas */
    #esto_es_para_ti .item-para-ti {
        grid-template-columns: 55px minmax(0, 1fr);

        width: 94%;
        max-width: 360px;
        min-height: 95px;

        margin-bottom: 10px;
        padding: 9px;

        border-radius: 13px;
    }

    /* Movimiento más suave en mobile */
    #esto_es_para_ti .item-para-ti:nth-child(1) {
        transform: rotate(-0.5deg);
    }

    #esto_es_para_ti .item-para-ti:nth-child(2) {
        transform: rotate(0.4deg);
    }

    #esto_es_para_ti .item-para-ti:nth-child(3) {
        transform: rotate(-0.4deg);
    }

    #esto_es_para_ti .item-para-ti:nth-child(4) {
        transform: rotate(0.3deg);
    }

    #esto_es_para_ti .item-para-ti:hover {
        transform: translateY(-2px) rotate(0);
    }

    /* Ticket */
    #esto_es_para_ti .ticket {
        width: 42px;
    }

    /* Texto */
    #esto_es_para_ti .item-para-ti p {
        padding: 6px;
        font-size: 12.5px;
        line-height: 1.4;
    }

    #esto_es_para_ti .item-para-ti strong {
        padding: 2px 5px;
        border-radius: 6px;
    }

    /* Cierre */
    #esto_es_para_ti .cierre-para-ti {
        max-width: 330px;
        margin: 23px auto 17px;

        font-size: 14px;
        line-height: 1.4;
    }

    #esto_es_para_ti .cierre-para-ti .acentuado {
        margin-top: -5px;
        font-size: 14px;
    }

    /* Botón */
    #esto_es_para_ti .boton-para-ti {
        width: 100%;
        max-width: 310px;

        margin-bottom: 25px;

        padding: 11px 18px;

        font-size: 13px;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    #esto_es_para_ti {
        padding-right: 15px;
        padding-left: 15px;
    }

    #esto_es_para_ti h1 {
        font-size: 25px;
    }

    #esto_es_para_ti .cinta-para-ti {
        top: -32px;
        width: 460px;
    }

    #esto_es_para_ti .item-para-ti {
        grid-template-columns: 48px minmax(0, 1fr);

        width: 96%;
        min-height: 90px;

        padding: 8px;
    }

    #esto_es_para_ti .ticket {
        width: 37px;
    }

    #esto_es_para_ti .item-para-ti p {
        padding: 5px;
        font-size: 11.5px;
    }

    #esto_es_para_ti .cierre-para-ti {
        max-width: 290px;
        font-size: 13px;
    }

    #esto_es_para_ti .cierre-para-ti .acentuado {
        font-size: 13px;
    }

    #esto_es_para_ti .boton-para-ti {
        max-width: 285px;
        font-size: 12px;
    }
}

/* ==========================================================================
   CÓMO TRABAJO
   ========================================================================== */

#como_trabajo {
    position: relative;
    width: 100%;
    padding: 100px 20px 50px;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--blush);
}

/* Franja superior */
#como_trabajo::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 30px;
    background: repeating-linear-gradient(90deg,
            var(--rose-light) 0 32px,
            var(--maroon) 32px 64px);
}

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

#como_trabajo .contenedor-como-trabajo {
    width: min(100%, 1000px);
    margin: 0 auto;
    text-align: center;
}

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */

#como_trabajo .encabezado-como-trabajo {
    width: min(90%, 650px);
    margin: 0 auto 25px;
}

#como_trabajo .encabezado-como-trabajo h2 {
    margin: 0;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05;
}

#como_trabajo #ct-subtitulo {
    margin: 12px 0 0;
    color: var(--rose-pink);
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.2;
}

#como_trabajo #mini-descripcion {
    max-width: 600px;
    margin: 16px auto 0;
    color: var(--maroon);
    font-size: 14px;
    line-height: 1.4;
}

/* ==========================================================================
   CUADERNO
   ========================================================================== */

#como_trabajo .cuaderno-wrapper {
    position: relative;
    width: min(100%, 580px);
    margin: 20px auto 30px;
}

#como_trabajo .cuaderno-base {
    display: block;
    width: 100%;
    height: auto;
}

/* Pasos sobre cuaderno */
#como_trabajo .pasos-cuaderno {
    position: absolute;
    top: 7%;
    right: 10%;
    bottom: 7%;
    left: 13%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Cada paso */
#como_trabajo .paso-cuaderno {
    position: relative;

    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;

    margin: 0 0 18px;
    padding: 0 0 18px;

    text-align: left;
}

#como_trabajo .paso-cuaderno:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 0;
    left: 0;
    border-bottom: 3px dotted #E6A3B5;
}

/* ==========================================================================
   VISUAL DE PASOS
   ========================================================================== */

#como_trabajo .paso-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

#como_trabajo .numero-como-trabajo {
    display: block;
    color: var(--rose-pink);
    font-family: var(--font-display);
    font-size: 31px;
    line-height: 1;
}

#como_trabajo .elemento-cuaderno {
    display: block;
    width: 47px;
    max-height: 47px;
    margin-top: 8px;
    object-fit: contain;
}

/* ==========================================================================
   CONTENIDO PASOS
   ========================================================================== */

#como_trabajo .paso-contenido {
    min-width: 0;
    padding-left: 8px;
}

#como_trabajo .paso-contenido h3 {
    margin: 0 0 7px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
}

#como_trabajo .paso-contenido p {
    margin: 0;
    color: var(--maroon);
    font-size: 13.5px;
    line-height: 1.3;
}

/* ==========================================================================
   BOTÓN
   ========================================================================== */

#como_trabajo .boton-como-trabajo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 365px;

    padding: 15px 34px;
    box-sizing: border-box;

    border-radius: 50px;

    background: var(--pastel-blue);
    color: var(--maroon);

    font-size: 19px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

#como_trabajo .boton-como-trabajo:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ==========================================================================
   BARRA DE CUPOS
   ========================================================================== */

#como_trabajo .barra-cupos {
    position: relative;
    left: 50%;

    width: 100vw;

    margin-top: 50px;
    margin-left: -50vw;

    padding: 10px 0;

    overflow: hidden;

    background: var(--superdark);
}

#como_trabajo .barra-cupos-track {
    display: flex;
    width: max-content;
    animation: barra-cupos-scroll 25s linear infinite;
}

#como_trabajo .barra-cupos-grupo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

#como_trabajo .barra-cupos-grupo span {
    padding: 0 14px;

    color: var(--white);

    font-family: var(--font-display);
    font-size: 20px;
    font-style: italic;
}

#como_trabajo .barra-cupos-punto {
    color: var(--rose-pink);
}

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

#como_trabajo .animacion-cuaderno {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}

#como_trabajo .paso-cuaderno {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

#como_trabajo .paso-cuaderno .elemento-cuaderno {
    transform: scale(0.9);
    transition: transform 0.5s ease;
}

#como_trabajo .boton-como-trabajo {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

/* Sección visible */
#como_trabajo.animado .animacion-cuaderno {
    opacity: 1;
    transform: translateY(0);
}

#como_trabajo.animado .paso-cuaderno {
    opacity: 1;
    transform: translateY(0);
}

#como_trabajo.animado .paso-cuaderno .elemento-cuaderno {
    transform: scale(1);
}

#como_trabajo.animado .paso-cuaderno:nth-child(1) {
    transition-delay: 0.15s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(2) {
    transition-delay: 0.27s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(3) {
    transition-delay: 0.39s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(4) {
    transition-delay: 0.51s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(5) {
    transition-delay: 0.63s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(1) .elemento-cuaderno {
    transition-delay: 0.22s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(2) .elemento-cuaderno {
    transition-delay: 0.34s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(3) .elemento-cuaderno {
    transition-delay: 0.46s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(4) .elemento-cuaderno {
    transition-delay: 0.58s;
}

#como_trabajo.animado .paso-cuaderno:nth-child(5) .elemento-cuaderno {
    transition-delay: 0.70s;
}

#como_trabajo.animado .boton-como-trabajo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.78s;
}

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

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

    #como_trabajo .animacion-cuaderno,
    #como_trabajo .paso-cuaderno,
    #como_trabajo .paso-cuaderno .elemento-cuaderno,
    #como_trabajo .boton-como-trabajo {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #como_trabajo .barra-cupos-track {
        animation: none;
    }
}

/* ==========================================================================
   ANIMACIÓN BARRA CUPOS
   ========================================================================== */

@keyframes barra-cupos-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    #como_trabajo {
        padding: 90px 22px 45px;
    }

    #como_trabajo .encabezado-como-trabajo {
        max-width: 620px;
    }

    #como_trabajo .encabezado-como-trabajo h2 {
        font-size: 34px;
    }

    #como_trabajo #ct-subtitulo {
        font-size: 17px;
    }

    #como_trabajo #mini-descripcion {
        max-width: 560px;
        font-size: 13px;
    }

    #como_trabajo .cuaderno-wrapper {
        max-width: 560px;
    }

    #como_trabajo .boton-como-trabajo {
        min-width: 340px;
        font-size: 17px;
    }
}

/* ==========================================================================
   IPAD VERTICAL
   ========================================================================== */

@media (max-width: 820px) {

    #como_trabajo {
        padding: 85px 20px 45px;
    }

    #como_trabajo .encabezado-como-trabajo {
        width: min(90%, 560px);
    }

    #como_trabajo .encabezado-como-trabajo h2 {
        font-size: 32px;
    }

    #como_trabajo #mini-descripcion {
        font-size: 12.5px;
    }

    #como_trabajo .cuaderno-wrapper {
        width: min(100%, 520px);
    }

    #como_trabajo .pasos-cuaderno {
        right: 11%;
        left: 12%;
    }

    #como_trabajo .paso-cuaderno {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    #como_trabajo .numero-como-trabajo {
        font-size: 28px;
    }

    #como_trabajo .elemento-cuaderno {
        width: 43px;
    }

    #como_trabajo .paso-contenido h3 {
        font-size: 18px;
    }

    #como_trabajo .paso-contenido p {
        font-size: 12px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    #como_trabajo {
        padding: 75px 14px 40px;
    }

    /* Franja */
    #como_trabajo::before {
        height: 25px;
        background: repeating-linear-gradient(90deg,
                var(--rose-light) 0 24px,
                var(--maroon) 24px 48px);
    }

    /* Encabezado */
    #como_trabajo .encabezado-como-trabajo {
        width: 88%;
        max-width: 390px;
        margin-bottom: 18px;
    }

    #como_trabajo .encabezado-como-trabajo h2 {
        font-size: 28px;
        line-height: 1.08;
    }

    #como_trabajo #ct-subtitulo {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.2;
    }

    #como_trabajo #mini-descripcion {
        max-width: 330px;
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.4;
    }

    /* Cuaderno */
    #como_trabajo .cuaderno-wrapper {
        width: 100%;
        max-width: 430px;
        margin: 25px auto 25px;
    }

    #como_trabajo .pasos-cuaderno {
        top: 7%;
        right: 10%;
        bottom: 7%;
        left: 10%;
    }

    /* Pasos */
    #como_trabajo .paso-cuaderno {
        grid-template-columns: 42px minmax(0, 1fr);

        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    #como_trabajo .paso-cuaderno:not(:last-child)::after {
        border-bottom-width: 2px;
    }

    /* Número + imagen */
    #como_trabajo .numero-como-trabajo {
        font-size: clamp(21px, 6vw, 26px);
    }

    #como_trabajo .elemento-cuaderno {
        width: clamp(30px, 9vw, 39px);
        max-height: 39px;
        margin-top: 4px;
    }

    /* Texto */
    #como_trabajo .paso-contenido {
        padding-left: 4px;
    }

    #como_trabajo .paso-contenido h3 {
        margin-bottom: 3px;
        font-size: clamp(13px, 3.7vw, 16px);
        line-height: 1.05;
    }

    #como_trabajo .paso-contenido p {
        font-size: clamp(9px, 2.7vw, 11px);
        line-height: 1.2;
    }

    /* Botón */
    #como_trabajo .boton-como-trabajo {
        width: 100%;
        max-width: 310px;
        min-width: 0;

        padding: 12px 18px;

        font-size: 14px;
        line-height: 1.2;
    }

    /* Barra cupos */
    #como_trabajo .barra-cupos {
        margin-top: 38px;
        padding: 8px 0;
    }

    #como_trabajo .barra-cupos-grupo span {
        padding: 0 10px;
        font-size: 16px;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    #como_trabajo {
        padding: 70px 10px 35px;
    }

    #como_trabajo .encabezado-como-trabajo h2 {
        font-size: 26px;
    }

    #como_trabajo #ct-subtitulo {
        font-size: 14px;
    }

    #como_trabajo #mini-descripcion {
        max-width: 290px;
        font-size: 11px;
    }

    #como_trabajo .cuaderno-wrapper {
        max-width: 370px;
    }

    #como_trabajo .pasos-cuaderno {
        top: 7%;
        right: 9%;
        left: 9%;
    }

    #como_trabajo .paso-cuaderno {
        grid-template-columns: 37px minmax(0, 1fr);

        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    #como_trabajo .numero-como-trabajo {
        font-size: 21px;
    }

    #como_trabajo .elemento-cuaderno {
        width: 32px;
        max-height: 32px;
    }

    #como_trabajo .paso-contenido {
        padding-left: 3px;
    }

    #como_trabajo .paso-contenido h3 {
        font-size: 12px;
    }

    #como_trabajo .paso-contenido p {
        font-size: 8.5px;
        line-height: 1.15;
    }

    #como_trabajo .boton-como-trabajo {
        max-width: 280px;
        font-size: 12px;
    }

    #como_trabajo .barra-cupos-grupo span {
        font-size: 14px;
    }
}


/* ==========================================================================
   BARRA ANIMADA — CUPOS MORENA
   ========================================================================== */

.barra-cupos {
    position: relative;
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
    background: var(--superdark);
}

/* Movimiento */

.barra-cupos-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: barra-cupos-scroll 25s linear infinite;
}

/* Grupo de texto */

.barra-cupos-grupo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.barra-cupos-grupo span {
    padding: 0 12px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 20px;
    font-style: italic;
    line-height: 1.2;
}

/* Separadores */

.barra-cupos-grupo .barra-cupos-punto {
    padding: 0 4px;
    color: var(--rose-pink);
    font-style: normal;
}

/* Animación */

@keyframes barra-cupos-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* RESPONSIVE BARRA CUPOS */

@media (max-width: 600px) {
    .barra-cupos {
        padding: 8px 0;
    }

    .barra-cupos-grupo span {
        padding: 0 9px;
        font-size: 17px;
    }

    .barra-cupos-grupo .barra-cupos-punto {
        padding: 0 3px;
    }
}


/* ==========================================================================
   CONTACTO
   ========================================================================== */

#contacto {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(100svh - 40px);
    padding: 60px 24px 25px;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--blush);
}

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

#contacto .contacto-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
        "titulo visual"
        "destacado visual"
        "texto visual"
        "boton boton"
        "whatsapp whatsapp";
    align-items: center;
    column-gap: 20px;
    row-gap: 12px;

    width: min(100%, 780px);
    margin: 30px auto;
}

/* Distribución interna */
#contacto .contenedor-contacto {
    display: contents;
}

/* ==========================================================================
   TÍTULO
   ========================================================================== */

#contacto .contenedor-contacto h2 {
    grid-area: titulo;
    align-self: end;

    margin: 0;

    color: var(--maroon);

    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.05;

    text-align: left;
}

#contacto .contenedor-contacto h2 strong {
    display: block;
    font-weight: 700;
}

/* ==========================================================================
   DESTACADO
   ========================================================================== */

#contacto .con-fondo {
    grid-area: destacado;
    align-self: start;

    width: fit-content;
    max-width: 300px;

    margin: 4px 0 0;
    padding: 10px 13px;
    box-sizing: border-box;

    border-radius: 10px;

    background: rgba(252, 211, 230, 0.55);

    color: var(--brown);

    font-size: 14px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.3;

    text-align: left;
}

/* ==========================================================================
   TEXTO
   ========================================================================== */

#contacto .texto-contacto {
    grid-area: texto;
    align-self: start;

    max-width: 310px;
    margin: 0;

    color: var(--brown);

    font-size: 13px;
    line-height: 1.45;

    text-align: left;
}

/* ==========================================================================
   VISUAL
   ========================================================================== */

#contacto .contacto-visual {
    grid-area: visual;

    position: relative;

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

    width: 100%;
    height: 390px;
    min-height: 0;
}

/* Escritorio */
#contacto .escritorio-contacto {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 40%;

    width: 96%;
    max-width: 400px;
    height: auto;

    margin-top: 50px;

    transform: translateX(-50%);
}

/* Objetos */
#contacto .cosas-escritorio {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    max-width: 380px;
    height: auto;

    object-fit: contain;

    transform: translateX(-10px);
}

/* ==========================================================================
   BOTÓN PRINCIPAL
   ========================================================================== */

#contacto .boton-cuentame {
    grid-area: boton;

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

    width: min(100%, 520px);

    margin-top: 2px;
    padding: 12px 15px;
    box-sizing: border-box;

    border-radius: 12px;

    background: var(--maroon);
    color: var(--white);

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

#contacto .boton-cuentame:hover {
    background: var(--maroon-deep);
    transform: translateY(-2px);
}

/* ==========================================================================
   WHATSAPP
   ========================================================================== */

#contacto .contacto-whatsapp {
    grid-area: whatsapp;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    width: 100%;
    margin-top: 0;

    text-align: center;
}

#contacto .contacto-whatsapp p {
    margin: 0;

    color: var(--brown);

    font-family: var(--font-display);
    font-size: 14px;
    font-style: italic;
    line-height: 1.25;
}

#contacto .contacto-whatsapp a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(100%, 420px);

    padding: 10px 20px;
    box-sizing: border-box;

    border: 2px solid var(--celeste);
    border-radius: 14px;

    background: transparent;
    color: var(--maroon);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

#contacto .contacto-whatsapp a:hover {
    background: var(--pastel-blue);
    transform: translateY(-2px);
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    #contacto {
        min-height: auto;
        padding: 60px 24px 45px;
    }

    #contacto .contacto-grid {
        width: min(92%, 720px);
        column-gap: 18px;
    }

    #contacto .contenedor-contacto h2 {
        font-size: 30px;
    }

    #contacto .con-fondo {
        max-width: 280px;
        font-size: 13px;
    }

    #contacto .texto-contacto {
        max-width: 290px;
        font-size: 12.5px;
    }

    #contacto .contacto-visual {
        height: 360px;
    }

    #contacto .escritorio-contacto {
        max-width: 370px;
    }

    #contacto .cosas-escritorio {
        max-width: 350px;
    }

    #contacto .boton-cuentame {
        max-width: 480px;
    }
}

/* ==========================================================================
   IPAD VERTICAL
   ========================================================================== */

@media (max-width: 820px) {

    #contacto {
        padding: 55px 22px 40px;
    }

    #contacto .contacto-grid {
        grid-template-columns: 0.95fr 1.05fr;
        width: min(94%, 680px);
    }

    #contacto .contenedor-contacto h2 {
        font-size: 28px;
    }

    #contacto .con-fondo {
        max-width: 250px;
        padding: 9px 11px;
        font-size: 12px;
    }

    #contacto .texto-contacto {
        max-width: 260px;
        font-size: 12px;
    }

    #contacto .contacto-visual {
        height: 330px;
    }

    #contacto .escritorio-contacto {
        max-width: 335px;
    }

    #contacto .cosas-escritorio {
        max-width: 320px;
    }

    #contacto .boton-cuentame {
        max-width: 440px;
        font-size: 13px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    #contacto {
        display: block;
        min-height: auto;

        padding: 45px 18px 40px;
    }

    #contacto .contacto-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "titulo"
            "destacado"
            "texto"
            "visual"
            "boton"
            "whatsapp";

        width: 100%;
        max-width: 430px;

        margin: 0 auto;

        row-gap: 17px;
    }

    /* Título */
    #contacto .contenedor-contacto h2 {
        justify-self: center;

        max-width: 340px;

        font-size: 28px;
        line-height: 1.05;

        text-align: center;
    }

    /* Destacado */
    #contacto .con-fondo {
        justify-self: center;

        width: fit-content;
        max-width: 320px;

        margin: 0;
        padding: 9px 12px;

        font-size: 12px;
        line-height: 1.35;

        text-align: center;
    }

    /* Texto */
    #contacto .texto-contacto {
        justify-self: center;

        width: 100%;
        max-width: 340px;

        font-size: 12px;
        line-height: 1.45;

        text-align: center;
    }

    /* ===============================================================
   ILUSTRACIÓN — MOBILE
   =============================================================== */

    #contacto .contacto-visual {
        position: relative;
        width: 100%;
        height: 300px;
        min-height: 0;
        margin: 15px auto 0;
    }

    /* Base / escritorio */
    #contacto .escritorio-contacto {
        position: absolute;
        right: auto;
        bottom: 0;
        left: 50%;

        width: 88%;
        max-width: 300px;
        height: auto;

        margin: 0;

        transform: translateX(-50%);
    }

    /* Elementos sobre escritorio */
    #contacto .cosas-escritorio {
        position: absolute;
        top: 58%;
        left: 50%;

        width: 82%;
        max-width: 285px;
        height: auto;

        margin: 0;

        transform: translate(-50%, -50%);
    }

    #contacto .texto-contacto {
        justify-self: center;
        width: 100%;
        max-width: 340px;
        margin-bottom: 40px;

        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }

    /* Botón principal */
    #contacto .boton-cuentame {
        width: 100%;
        max-width: 310px;

        margin: 2px auto 0;
        padding: 12px 18px;

        border-radius: 999px;

        font-size: 13px;
        line-height: 1.2;
    }

    /* WhatsApp */
    #contacto .contacto-whatsapp {
        gap: 10px;
        margin-top: 5px;
    }

    #contacto .contacto-whatsapp p {
        max-width: 300px;

        font-size: 13px;
        line-height: 1.3;
    }

    #contacto .contacto-whatsapp a {
        width: 100%;
        max-width: 290px;

        padding: 11px 17px;

        border-radius: 999px;

        font-size: 13px;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    #contacto {
        padding: 40px 15px 35px;
    }

    #contacto .contacto-grid {
        max-width: 360px;
        row-gap: 15px;
    }

    #contacto .contenedor-contacto h2 {
        max-width: 300px;
        font-size: 25px;
    }

    #contacto .con-fondo {
        max-width: 290px;
        font-size: 11px;
    }

    #contacto .texto-contacto {
        max-width: 300px;
        font-size: 11.5px;
    }

    #contacto .contacto-visual {
        height: 270px;
    }

    #contacto .escritorio-contacto {
        max-width: 290px;
    }

    #contacto .cosas-escritorio {
        max-width: 275px;
    }

    #contacto .boton-cuentame {
        max-width: 280px;
        font-size: 12px;
    }

    #contacto .contacto-whatsapp p {
        max-width: 270px;
        font-size: 12px;
    }

    #contacto .contacto-whatsapp a {
        max-width: 270px;
        font-size: 12px;
    }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */

#faq {
    padding: 65px 24px 55px;
    background: var(--pastel-blue);
}

/* Encabezado */

#faq .encabezado-faq {
    width: min(90%, 700px);
    margin: 0 auto 25px;
    text-align: center;
}

#faq .encabezado-faq h1 {
    margin: 0;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 38px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.1;
}

/* Lista */

#faq .lista-faq {
    width: min(100%, 720px);
    margin: 0 auto;
}

/* Pregunta */

#faq .faq-item {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid rgba(213, 132, 161, 0.55);
    border-radius: 10px;
    background: var(--blush);
}

#faq .faq-item:nth-of-type(even) {
    background: #FAEEE9;
}

#faq .faq-pregunta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 62px;
    padding: 16px 52px 16px 18px;
    color: var(--brown);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    list-style: none;
}

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

#faq .faq-pregunta::marker {
    content: "";
}

/* Icono + / − */

#faq .faq-icono {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(141, 103, 117, 0.55);
    border-radius: 50%;
    transform: translateY(-50%);
}

#faq .faq-icono::before,
#faq .faq-icono::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: rgba(141, 103, 117, 0.65);
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

#faq .faq-icono::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

#faq .faq-item[open] .faq-icono::after {
    transform: translate(-50%, -50%) rotate(0);
}

/* Respuesta */

#faq .faq-respuesta-wrap {
    margin: 0 14px;
    border-top: 1px solid rgba(141, 103, 117, 0.45);
}

#faq .faq-respuesta {
    margin: 0;
    padding: 8px 4px 15px;
    color: var(--brown);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

/* CTA final */

#faq .faq-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 35px;
    text-align: center;
}

#faq .faq-cta::before {
    content: "♡";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--rose-light);
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 1;
}

#faq .faq-cta h2 {
    margin: 0 0 12px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

#faq .faq-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 440px);
    padding: 13px 25px;
    border: 1px solid var(--rose-pink);
    border-radius: 999px;
    background: var(--maroon-deep);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

#faq .faq-cta a:hover {
    background: var(--maroon);
    transform: translateY(-2px);
}

/* RESPONSIVE PREGUNTAS FRECUENTES */

@media (max-width: 600px) {
    #faq {
        padding: 50px 18px 45px;
    }

    #faq .encabezado-faq {
        width: 95%;
        margin-bottom: 22px;
    }

    #faq .encabezado-faq h1 {
        font-size: 31px;
    }

    #faq .faq-item {
        margin-bottom: 10px;
    }

    #faq .faq-pregunta {
        min-height: 58px;
        padding: 14px 45px 14px 15px;
        font-size: 14px;
    }

    #faq .faq-icono {
        right: 14px;
        width: 22px;
        height: 22px;
    }

    #faq .faq-respuesta {
        padding: 8px 2px 14px;
        font-size: 13px;
    }

    #faq .faq-cta {
        margin-top: 30px;
    }

    #faq .faq-cta h2 {
        font-size: 17px;
    }

    #faq .faq-cta a {
        width: min(100%, 380px);
        font-size: 15px;
    }
}

/* ==========================================================================
   PIE DE PÁGINA — MORENA IMPULSA
   ========================================================================== */

footer {
    position: relative;
    width: 100%;
    background: var(--blush);
    border-top: 1px solid rgba(91, 28, 39, 0.08);
}

/* Franja superior */
footer::before {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background: var(--rose-light);
}

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

footer .piedepagina {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 45px;

    width: min(88%, 1000px);

    margin: 0 auto;
    padding: 42px 0 38px;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

footer .logopie {
    display: block;
    justify-self: start;

    width: auto;
    height: 48px;
}

/* ==========================================================================
   CENTRO — LEGALES
   ========================================================================== */

footer .piecentro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;

    gap: 5px;

    text-align: center;
}

footer .piecentro p {
    margin: 0;

    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.45;
}

footer .piecentro a {
    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

footer .piecentro a:hover {
    color: var(--maroon);
}

/* ==========================================================================
   DERECHA — CONTACTO
   ========================================================================== */

footer .pie-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;

    gap: 2px;

    text-align: right;
}

footer .pie-derecha p {
    margin: 0;

    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
}

footer .pie-derecha a {
    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

footer .pie-derecha a:hover {
    color: var(--maroon);
}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */

footer .pie-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 8px 0 5px;

    line-height: 0;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

footer .pie-instagram:hover {
    opacity: 0.75;
    transform: translateY(-2px);
}

footer .pie-instagram img {
    display: block;

    width: 24px;
    height: 24px;

    object-fit: contain;
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 820px) {

    footer .piedepagina {
        gap: 28px;
        width: 92%;
        padding: 38px 0 34px;
    }

    footer .logopie {
        height: 42px;
    }

    footer .piecentro a,
    footer .piecentro p,
    footer .pie-derecha p,
    footer .pie-derecha a {
        font-size: 10px;
    }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    footer .piedepagina {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;

        width: min(86%, 390px);

        padding: 32px 0 28px;

        text-align: center;
    }

    /* Logo */
    footer .logopie {
        order: 1;

        width: auto;
        height: 40px;

        margin-bottom: 22px;
    }

    /* Contacto */
    footer .pie-derecha {
        order: 2;

        align-items: center;

        width: 100%;
        margin-bottom: 22px;

        text-align: center;
    }

    footer .pie-derecha p {
        font-size: 11px;
        line-height: 1.6;
    }

    footer .pie-derecha a {
        font-size: 11px;
    }

    footer .pie-instagram {
        margin: 10px 0 6px;
    }

    footer .pie-instagram img {
        width: 23px;
        height: 23px;
    }

    /* Legales */
    footer .piecentro {
        order: 3;

        width: 100%;

        padding-top: 18px;

        border-top: 1px solid rgba(91, 28, 39, 0.1);
    }

    footer .piecentro p,
    footer .piecentro a {
        font-size: 10px;
        line-height: 1.5;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO
   ========================================================================== */

@media (max-width: 390px) {

    footer .piedepagina {
        width: 84%;
        padding: 28px 0 25px;
    }

    footer .logopie {
        height: 37px;
        margin-bottom: 20px;
    }

    footer .pie-derecha p,
    footer .pie-derecha a {
        font-size: 10.5px;
    }

    footer .piecentro p,
    footer .piecentro a {
        font-size: 9.5px;
    }
}

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

/* Entrada del Hero */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#hero .pretitulo,
#hero .titulo,
#hero .post-titulo,
#hero .destacado,
#hero .botones-hero {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
}

#hero .pretitulo {
    animation-delay: 0.05s;
}

#hero .titulo {
    animation-delay: 0.15s;
}

#hero .post-titulo {
    animation-delay: 0.3s;
}

#hero .destacado {
    animation-delay: 0.45s;
}

#hero .botones-hero {
    animation-delay: 0.6s;
}

/* Aparición al hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.en-vista {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ en cascada */
.faq-item.reveal:nth-child(1) {
    transition-delay: 0.05s;
}

.faq-item.reveal:nth-child(2) {
    transition-delay: 0.12s;
}

.faq-item.reveal:nth-child(3) {
    transition-delay: 0.19s;
}

.faq-item.reveal:nth-child(4) {
    transition-delay: 0.26s;
}

/* Botones */
.boton_hero1,
.boton_hero2,
.boton-plan,
.cta_servicios1,
.btn-trabajemos {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

.boton_hero1:hover,
.boton_hero2:hover,
.boton-plan:hover,
.cta_servicios1:hover,
.btn-trabajemos:hover {
    transform: translateY(-3px);
}

/* Logo */
header .logo img {
    transition: transform 0.25s ease;
}

header .logo:hover img {
    transform: scale(1.04);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {

    #hero .pretitulo,
    #hero .titulo,
    #hero .post-titulo,
    #hero .destacado,
    #hero .botones-hero {
        animation: none;
        opacity: 1;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .boton_hero1,
    .boton_hero2,
    .boton-plan,
    .cta_servicios1,
    .btn-trabajemos,
    header .logo img {
        transition: none;
    }
}