/* ==========================================================================
   MORENA WEB CO — Í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Í
       - Franja superior
       - Contenedor
       - Encabezado
       - Presentación
       - Firma Morena Web
       - Texto
       - Imagen
       - Frase final
       - Franja inferior
       - Responsive Sobre Mí

   05. SERVICIOS
       - Contenedor
       - Encabezado
       - Tarjetas
       - Información de tarjeta
       - Acentuado
       - Descripción principal
       - Condiciones
       - Botón ver estructura
       - Precio y reserva
       - Precios
       - Botón reservar
       - CTA final
       - Responsive Servicios

   06. SERVICIOS — TABLA COMPARATIVA
       - Contenedor
       - Encabezado
       - Scroll horizontal
       - Tabla
       - Celdas
       - Bordes de columnas
       - Columna de características
       - Características
       - Iconos
       - Encabezados de planes
       - Colores de planes
       - Precios
       - Precio especial de apertura
       - Botones
       - Incluido en todos los servicios
       - Responsive Tabla Comparativa

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

   08. MODALES DE SERVICIOS
       - Modal
       - Fondo del modal
       - Apertura
       - Contenido
       - Botón cerrar
       - Animación
       - Responsive Modales de Servicios

   09. MODAL RESERVA
       - Contenedor
       - Botón cerrar
       - Pasos
       - Encabezado
       - Progreso
       - Formulario
       - Botones de navegación
       - Paso 2 — Resumen
       - Reserva 50%
       - Avisos
       - Paso 3 — Confirmación
       - Responsive Modal Reserva

   10. ESTO ES PARA TI SI...
       - Título
       - Tarjeta
       - Lista
       - Cierre
       - Botón
       - Franja inferior
       - Responsive Esto es para Ti

   11. CÓMO TRABAJO
       - Encabezado
       - Marco exterior
       - Barra superior
       - Tarjeta interior
       - Pasos
       - Botón
       - Franja inferior
       - Responsive Cómo Trabajo

   12. PREGUNTAS FRECUENTES
       - Encabezado
       - Lista
       - Preguntas
       - Icono
       - Respuestas
       - CTA final
       - Responsive Preguntas Frecuentes

   13. BARRA ANIMADA — CUPOS MORENA
       - Movimiento
       - Grupo
       - Separadores
       - Animación
       - Responsive Barra Cupos
       - Reducción de movimiento

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

   15. PRÓXIMAMENTE
       - Encabezado
       - Contenedor de servicios
       - Tarjetas
       - Título de tarjeta
       - Subtítulo de tarjeta
       - Descripción
       - Texto de aviso
       - Formulario
       - Botón
       - Mensaje del formulario
       - Texto final
       - Accesibilidad
       - Responsive Próximamente

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

   17. ANIMACIONES
       - Entrada del Hero
       - Aparición al hacer scroll
       - Cascada de "Esto es para ti"
       - Cascada de FAQ
       - Cascada de Próximamente
       - Hover de botones
       - Hover de tarjetas
       - Hover del logo
       - Reducción de movimiento

   ==========================================================================
   MORENA WEB CO — 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;
    color: var(--brown);
    font-family: var(--font-body);
    line-height: 1.6;
}

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 e 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ú móvil oculto */
header .menu-mobile {
    display: none;
}

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

@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
   Sigue sin hamburguesa
   ========================================================================== */

@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 {
        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 img {
        width: 85px;
        margin: 9px 0;
    }

    /* Ocultar menú normal */
    header .menu-principal {
        display: none;
    }

    /* Ocultar Trabajemos juntas del header */
    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-decoration: none;
        text-align: left;
    }

    /* Trabajemos juntas mobile */
    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 convertida en 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);
    }
}

/* ==========================================================================
   IPHONE PEQUEÑO
   ========================================================================== */

@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%;
    box-sizing: border-box;
    padding: 105px 24px 60px;
    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(60%, 700px);
    height: auto;
    margin: -20px auto -10px;
}

/* Texto posterior al título */
#hero .post-titulo h1 {
    max-width: 600px;
    margin: 0 auto 20px;
    color: var(--brown);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

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

/* Destacado */
#hero #destacado {
    display: inline-block;
    max-width: 700px;
    margin: 0 auto 10px;
    padding: 5px 15px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--rose-light);
    color: var(--brown);
    font-size: 13px;
    line-height: 1.3;
}

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

/* 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-radius: 999px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* 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: 95px 24px 55px;
    }

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

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

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

    #hero #destacado {
        max-width: 620px;
        font-size: 12px;
    }

    #hero .botones-hero {
        gap: 14px;
    }

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

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

@media (max-width: 820px) {

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

    #hero .titulo {
        width: min(75%, 520px);
        margin: -10px auto -5px;
    }

    #hero .post-titulo h1 {
        max-width: 500px;
        font-size: 16px;
        line-height: 1.35;
    }

    #hero #destacado {
        max-width: 520px;
    }
}

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

@media (max-width: 600px) {

    #hero {
        padding: 80px 20px 45px;
    }

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

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

    /* Texto */
    #hero .post-titulo h1 {
        max-width: 350px;
        margin: 0 auto 18px;
        font-size: 15px;
        line-height: 1.4;
    }

    /* Destacado */
    #hero #destacado {
        display: block;
        width: fit-content;
        max-width: 340px;
        margin: 0 auto;
        padding: 7px 14px;
        border-radius: 18px;
        font-size: 11px;
        line-height: 1.4;
    }

    /* Botones */
    #hero .botones-hero {
        flex-direction: column;
        width: 100%;
        max-width: 330px;
        gap: 11px;
        margin: 22px 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: 75px 16px 40px;
    }

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

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

    #hero .post-titulo h1 {
        max-width: 310px;
        font-size: 14px;
    }

    #hero #destacado {
        max-width: 300px;
        font-size: 10px;
    }

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

    #hero .botones-hero a {
        padding: 11px 16px;
        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: 0 0 40px;
    background: var(--rose-light);
}

/* Contenedor */
.sobremi-contenido {
    display: flow-root;
    width: min(90%, 500px);
    margin: 0 auto;
    padding-top: 30px;
}

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

.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 p.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;
}

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

/* ==========================================================================
   MINI LOGO
   ========================================================================== */

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

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

.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
   ========================================================================== */

.texto_sobremi {
    text-align: left;
}

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

.texto_sobremi strong {
    font-weight: 700;
}

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

.imagen_sobremi {
    float: right;
    display: block;
    width: 100%;
    max-width: 580px;
    height: auto;
    margin: 60px 0 10px;
    shape-outside: url("../img/fotomiaop.png");
    shape-margin: 20px;
}

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

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

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

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

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

@media (max-width: 1024px) {

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

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

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

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

    .presentacion {
        font-size: 15px;
    }

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

    .imagen_sobremi {
        margin-top: 45px;
    }

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

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

@media (max-width: 820px) {

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

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

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

    .imagen_sobremi {
        margin-top: 35px;
    }

    .frase_seccion {
        padding-right: 280px;
    }

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

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

@media (max-width: 600px) {

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

    .sobremi-contenido {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        width: min(88%, 430px);
        margin: 0 auto;
        padding-top: 15px;
    }

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

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

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

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

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

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

    /* Texto final antes de foto + frase */
    .texto_sobremi--cierre {
        order: 3;
        width: 100%;
    }

    /* Frase a la izquierda */
.frase_seccion {
    order: 4;
    flex: 0 0 40%;
    width: 40%;
    align-self: flex-start;
    margin: 45px 0 0;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    text-align: left;
}

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

    /* Imagen a la derecha */
    .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) {

    .sobremi-contenido {
        width: 88%;
    }

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

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

    .presentacion {
        font-size: 13px;
    }

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

    /* Frase izquierda */
    .frase_seccion {
        flex-basis: 38%;
        width: 38%;
        padding-right: 8px;
        padding-bottom: 20px;
    }

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

    /* Imagen derecha */
    .imagen_sobremi {
        flex-basis: 62%;
        width: 62%;
        margin-left: auto;
    }
}
/* ==========================================================================
   FRANJA INFERIOR
   ========================================================================== */

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

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

#servicios {
    width: 100%;
    margin: 0 auto;
    padding: 70px 40px 80px;
    box-sizing: border-box;
    background: var(--pastel-blue);
}

/* Contenedor */
#servicios .contenedor-servicios {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

#servicios .grid-servicios {
    display: grid;
    gap: 40px;
    width: 100%;
    margin-top: 40px;
}

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

#servicios .encabezado-servicios {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

#servicios .encabezado-servicios h1 {
    margin: 0;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.05;
}

#servicios .encabezado-servicios p {
    max-width: 620px;
    margin: 12px auto 0;
    color: var(--maroon);
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
}

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

#servicios .tarjeta_focus,
#servicios .tarjeta_presencia,
#servicios .tarjeta_portafolio {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr);
    grid-template-areas: "info precio";
    width: 100%;
    margin: 0 auto 35px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--rose-pink);
    border-radius: 24px;
    background: var(--blush);
    box-shadow:
        6px 6px 0 var(--dusty-rose),
        10px 10px 30px rgba(78, 14, 26, 0.18);
}

#servicios .tarjeta_focus p,
#servicios .tarjeta_presencia p,
#servicios .tarjeta_portafolio p {
    color: var(--maroon);
}

/* ==========================================================================
   INFORMACIÓN DE TARJETA
   ========================================================================== */

#servicios .tarjeta-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px;
    box-sizing: border-box;
}

/* Título */
#servicios .contenido-tarjeta h2 {
    margin: 0;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
}

/* Acentuado */
#servicios .contenido-tarjeta .acentuado {
    margin: -5px 0 20px 30px;
    color: var(--rose-pink);
    font-family: var(--font-script);
    font-size: 18px;
    line-height: 1.1;
    text-align: left;
}

/* Descripción */
#servicios .para-que {
    width: 100%;
    margin: 0 0 15px;
    color: var(--maroon);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

/* ==========================================================================
   CONDICIONES
   ========================================================================== */

#servicios .condiciones {
    width: 100%;
    padding: 10px 18px;
    box-sizing: border-box;
    border-radius: 18px;
    background: rgba(252, 211, 230, 0.30);
}

#servicios .condiciones ul {
    margin: 0;
    padding-left: 18px;
}

#servicios .condiciones p,
#servicios .condiciones li {
    color: var(--brown);
    font-size: 12px;
    line-height: 1.35;
}

#servicios .condiciones li {
    margin-bottom: 4px;
}

#servicios .condiciones li:last-child {
    margin-bottom: 0;
}

#servicios .condiciones li::marker {
    color: var(--maroon);
}

/* ==========================================================================
   BOTÓN VER ESTRUCTURA
   ========================================================================== */

#servicios .boton-ver-detalles {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding-top: 28px;
}

#servicios .boton-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    margin: 0;
    padding: 12px 18px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background: var(--dusty-rose);
    color: var(--white);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

#servicios .boton-modal:hover {
    background: var(--rose-pink);
    color: var(--maroon);
    transform: translateY(-2px);
}

/* ==========================================================================
   PRECIO Y RESERVA
   ========================================================================== */

#servicios .cta-precios-reserva {
    grid-area: precio;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 25px 18px;
    box-sizing: border-box;
    background: rgba(252, 211, 230, 0.22);
    text-align: center;
}

#servicios .cta-precios-reserva img {
    display: block;
    width: 150px;
    max-width: 80%;
    height: auto;
    margin: 0 auto 12px;
    object-fit: contain;
}

/* Precio normal */
#servicios .precio_normal {
    margin: 4px 0 8px;
    color: var(--rose-pink);
    font-size: 16px;
    line-height: 1;
    text-align: center;
    text-decoration: line-through;
}

/* Precio apertura */
#servicios .precio_apertura {
    margin: 0;
    color: var(--maroon-deep);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Texto especial */
#servicios .especial {
    margin: 7px 0 15px;
    color: var(--maroon);
    font-size: 12px;
    font-style: italic;
    line-height: 1.3;
    text-align: center;
}

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

#servicios .boton-reservar-cupo-web {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    margin: 0;
    padding: 13px 15px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background: var(--maroon);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.10);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

#servicios .boton-reservar-cupo-web:hover {
    background: var(--maroon-hover);
    transform: translateY(-2px);
}

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

#servicios .cta_servicios {
    padding: 45px 0 0;
    text-align: center;
}

#servicios .cta_servicios1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    border-radius: 999px;
    background: var(--maroon);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.10);
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#servicios .cta_servicios1:hover {
    background: var(--rose-pink);
    color: var(--maroon);
    transform: translateY(-2px);
}

#servicios .cta_servicios1:visited {
    color: var(--white);
}

#servicios #cta_nota {
    max-width: 500px;
    margin: 15px auto 0;
    color: var(--maroon);
    font-size: 12px;
    font-style: italic;
    line-height: 1.3;
    text-align: center;
}

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

@media (max-width: 1024px) {

    #servicios {
        padding: 60px 30px 70px;
    }

    #servicios .contenedor-servicios {
        max-width: 680px;
    }

    #servicios .encabezado-servicios h1 {
        font-size: 32px;
    }

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

    #servicios .tarjeta_focus,
    #servicios .tarjeta_presencia,
    #servicios .tarjeta_portafolio {
        grid-template-columns: minmax(0, 1.45fr) minmax(205px, 0.75fr);
    }

    #servicios .tarjeta-info {
        padding: 27px;
    }

    #servicios .contenido-tarjeta h2 {
        font-size: 28px;
    }

    #servicios .cta-precios-reserva {
        padding: 22px 15px;
    }

    #servicios .cta-precios-reserva img {
        width: 135px;
    }

    #servicios .precio_apertura {
        font-size: 23px;
    }
}

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

@media (max-width: 760px) {

    #servicios {
        padding: 55px 24px 60px;
    }

    #servicios .contenedor-servicios {
        max-width: 560px;
    }

    #servicios .grid-servicios {
        gap: 32px;
        margin-top: 35px;
    }

    #servicios .encabezado-servicios h1 {
        font-size: 31px;
    }

    #servicios .encabezado-servicios p {
        max-width: 500px;
        font-size: 16px;
    }

    /* Tarjeta pasa a vertical */
    #servicios .tarjeta_focus,
    #servicios .tarjeta_presencia,
    #servicios .tarjeta_portafolio {
        grid-template-columns: 1fr;
        grid-template-areas:
            "info"
            "precio";
        border-radius: 22px;
    }

    #servicios .tarjeta-info {
        padding: 28px 26px;
    }

    #servicios .cta-precios-reserva {
        padding: 26px 24px 30px;
    }

    #servicios .cta-precios-reserva img {
        width: 140px;
        max-width: 150px;
    }

    #servicios .boton-reservar-cupo-web {
        max-width: 260px;
    }
}

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

@media (max-width: 600px) {

    #servicios {
        padding: 45px 18px 50px;
    }

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

    /* Encabezado */
    #servicios .encabezado-servicios {
        max-width: 360px;
    }

    #servicios .encabezado-servicios h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    #servicios .encabezado-servicios p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.4;
    }

    /* Separación tarjetas */
    #servicios .grid-servicios {
        gap: 28px;
        margin-top: 30px;
    }

    /* Tarjetas */
    #servicios .tarjeta_focus,
    #servicios .tarjeta_presencia,
    #servicios .tarjeta_portafolio {
        width: 100%;
        margin: 0 auto 28px;
        border-radius: 20px;
        box-shadow:
            4px 4px 0 var(--dusty-rose),
            7px 7px 20px rgba(78, 14, 26, 0.14);
    }

    /* Información */
    #servicios .tarjeta-info {
        padding: 25px 20px 24px;
    }

    #servicios .contenido-tarjeta h2 {
        font-size: 27px;
    }

    #servicios .contenido-tarjeta .acentuado {
        margin: -3px 0 18px 18px;
        font-size: 17px;
    }

    #servicios .para-que {
        margin-bottom: 15px;
        font-size: 13px;
        line-height: 1.5;
        text-align: left;
    }

    /* Condiciones */
    #servicios .condiciones {
        padding: 12px 15px;
        border-radius: 16px;
    }

    #servicios .condiciones ul {
        padding-left: 17px;
    }

    #servicios .condiciones p,
    #servicios .condiciones li {
        font-size: 12px;
        line-height: 1.4;
    }

    /* Ver estructura */
    #servicios .boton-ver-detalles {
        padding-top: 22px;
    }

    #servicios .boton-modal {
        max-width: 100%;
        padding: 11px 16px;
        font-size: 13px;
    }

    /* Zona precio */
    #servicios .cta-precios-reserva {
        padding: 25px 20px 28px;
    }

    #servicios .cta-precios-reserva img {
        width: 125px;
        max-width: 50%;
    }

    #servicios .precio_normal {
        font-size: 14px;
    }

    #servicios .precio_apertura {
        font-size: 23px;
    }

    #servicios .especial {
        max-width: 250px;
        margin-bottom: 14px;
        font-size: 11px;
    }

    #servicios .boton-reservar-cupo-web {
        width: 100%;
        max-width: 280px;
        padding: 12px 16px;
        font-size: 14px;
    }

    /* CTA final */
    #servicios .cta_servicios {
        padding-top: 35px;
    }

    #servicios .cta_servicios1 {
        width: 100%;
        max-width: 300px;
        padding: 11px 20px;
        box-sizing: border-box;
        font-size: 14px;
    }

    #servicios #cta_nota {
        max-width: 300px;
        font-size: 11px;
    }
}

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

@media (max-width: 390px) {

    #servicios {
        padding: 40px 15px 45px;
    }

    #servicios .encabezado-servicios h1 {
        font-size: 26px;
    }

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

    #servicios .tarjeta-info {
        padding: 22px 18px;
    }

    #servicios .contenido-tarjeta h2 {
        font-size: 25px;
    }

    #servicios .contenido-tarjeta .acentuado {
        margin-left: 15px;
        font-size: 16px;
    }

    #servicios .para-que {
        font-size: 12.5px;
    }

    #servicios .condiciones p,
    #servicios .condiciones li {
        font-size: 11.5px;
    }

    #servicios .precio_apertura {
        font-size: 22px;
    }
}

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

#comparativa-servicios {
    width: 100%;
    padding: 50px 0 55px;
    box-sizing: border-box;
    background: var(--blush);
}

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

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

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

#comparativa-servicios .encabezado-comparativa {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 0 25px;
    box-sizing: border-box;
    text-align: center;
}

#comparativa-servicios .encabezado-comparativa h2 {
    margin: 0 0 7px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
}

#comparativa-servicios .encabezado-comparativa p {
    margin: 0;
    color: var(--brown);
    font-size: 14px;
    line-height: 1.4;
}
#comparativa-servicios .encabezado-comparativa .indicacion {
    font-size: 10px;
    font-weight: 600;
    margin-top: 8px;
}

/* Indicación para scroll */
#comparativa-servicios .indicacion-scroll {
    display: none;
    margin: 10px 0 0;
    color: var(--maroon);
    font-size: 11px;
    font-style: italic;
    font-weight: 500;
    text-align: center;
}

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

#comparativa-servicios .tabla-scroll {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;

    scrollbar-width: thin;
    scrollbar-color: var(--rose-pink) #F3EDF0;

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

/* Scrollbar Chrome / Safari */
#comparativa-servicios .tabla-scroll::-webkit-scrollbar {
    height: 8px;
}

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

#comparativa-servicios .tabla-scroll::-webkit-scrollbar-thumb {
    border: 2px solid #F1EDEF;
    border-radius: 999px;
    background: var(--rose-pink);
}

#comparativa-servicios .tabla-scroll::-webkit-scrollbar-thumb:hover {
    background: #C86F95;
}

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

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

/* ===========CELDAS================= */

#comparativa-servicios .tabla-comparativa th,
#comparativa-servicios .tabla-comparativa td {
    padding: 7px 8px;
    box-sizing: border-box;
    border-right: 1px solid #EF8CAF;
    border-bottom: 1px solid #F2CCD9;
    border-left: 1px solid #EF8CAF;
    vertical-align: middle;
}

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

/* Borde superior */
#comparativa-servicios .tabla-comparativa thead th {
    border-top: 1px solid #EF8CAF;
    border-radius: 12px 12px 0 0;
}

/* Borde inferior */
#comparativa-servicios .tabla-comparativa tbody tr:last-child th,
#comparativa-servicios .tabla-comparativa tbody tr:last-child td {
    border-bottom: 1px solid #EF8CAF;
    border-radius: 0 0 12px 12px;
}

/* =============PRIMERA COLUMNA — CARACTERÍSTICAS======================= */

#comparativa-servicios .tabla-comparativa th:first-child,
#comparativa-servicios .tabla-comparativa td:first-child {
    position: -webkit-sticky;
    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 {
    z-index: 7;
    border-top: 1px solid #EF9FBA;
}

#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;
}

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

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

#comparativa-servicios .caracteristica {
    display: flex;
    align-items: center;
    gap: 7px;
}

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

/* =================ICONOS ================ */

#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 PLAN=================== */

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

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

#comparativa-servicios .icono-plan {
    display: block;
    width: 100px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 4px;
    object-fit: contain;
}

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

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

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

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

/* =============VITRINA — PRÓXIMAMENTE===================== */

#comparativa-servicios .tabla-comparativa th:nth-child(5),
#comparativa-servicios .tabla-comparativa td:nth-child(5) {
    background: #F4ECEC;
}

#comparativa-servicios .tabla-comparativa thead th:nth-child(5) {
    background: #F1E5E7;
}

#comparativa-servicios .tabla-comparativa thead th:nth-child(5) .icono-plan {
    opacity: 0.55;
    filter: saturate(0.65);
}

#comparativa-servicios .tabla-comparativa thead th:nth-child(5) .etiqueta-plan {
    background: var(--maroon);
    color: var(--blush);
}

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

#comparativa-servicios .precio-regular {
    color: #C86F95;
    font-size: 13px;
}

/* Precio especial */
#comparativa-servicios .fila-precio-apertura th,
#comparativa-servicios .fila-precio-apertura td {
    background: #F4CEDA;
}

#comparativa-servicios .fila-precio-apertura .precio-especial {
    margin: 0;
    color: var(--maroon);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

#comparativa-servicios .fila-precio-apertura .precio-1 {
    margin: 0;
    color: var(--maroon);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* ============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: 4px;
    margin: 0 4px;
    color: var(--maroon);
    font-size: 11px;
    line-height: 1.2;
}

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

#comparativa-servicios .btn-elegir-servicio {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 30px;
    padding: 8px 10px;
    box-sizing: border-box;

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

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

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;

    text-align: center;
    text-decoration: none;

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

#comparativa-servicios .btn-elegir-servicio:hover {
    background: var(--superdark);
    transform: translateY(-1px);
}

/* ================= INCLUIDO EN TODOS========================= */

#comparativa-servicios .incluido-todos {
    width: 100%;
    max-width: 760px;
    margin: 30px auto 0;
    padding: 22px 24px;
    box-sizing: border-box;
    border-radius: 18px;
    text-align: center;
}

#comparativa-servicios .incluido-todos-titulo {
    margin: 0 0 15px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
}

#comparativa-servicios .etiquetas-incluidas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#comparativa-servicios .etiquetas-incluidas span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 13px;

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

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

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
}

#comparativa-servicios .etiquetas-incluidas span img {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding-right: 6px;
    object-fit: contain;
}

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

@media (max-width: 1024px) {

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

    #comparativa-servicios .contenedor-comparativa {
        width: 92%;
    }

    #comparativa-servicios .encabezado-comparativa {
        margin-bottom: 24px;
    }

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

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

/* ==========================================================================
   IPAD VERTICAL / TABLET PEQUEÑA
   Empieza scroll horizontal
   ========================================================================== */

@media (max-width: 820px) {

    #comparativa-servicios .contenedor-comparativa {
        width: 94%;
    }

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

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

    /* Sombra para indicar que la primera columna está fija */
    #comparativa-servicios .columna-caracteristicas {
        box-shadow: 5px 0 10px rgba(78, 14, 26, 0.07);
    }
}

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

@media (max-width: 600px) {

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

    #comparativa-servicios .contenedor-comparativa {
        width: 100%;
    }

    /* Encabezado */
    #comparativa-servicios .encabezado-comparativa {
        width: 88%;
        max-width: 400px;
        margin: 0 auto 20px;
        padding: 0;
    }

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

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

    #comparativa-servicios .indicacion-scroll {
        display: block;
        margin-top: 10px;
        font-size: 10px;
    }

    /* Scroll */
    #comparativa-servicios .tabla-scroll {
        width: 100%;
        padding-bottom: 10px;
    }

    /* Tabla */
    #comparativa-servicios .tabla-comparativa {
        width: 760px;
        min-width: 760px;
        border-spacing: 5px 0;
    }

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

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

    /* Primera columna fija */
    #comparativa-servicios .columna-caracteristicas {
        width: 115px;
        min-width: 115px;
        max-width: 115px;
        padding: 8px 6px !important;
        box-shadow: 5px 0 9px rgba(78, 14, 26, 0.08);
    }

    /* Características */
    #comparativa-servicios .caracteristica {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

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

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

    /* Columnas de 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;
    }

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

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

    /* Precios */
    #comparativa-servicios .precio-regular {
        font-size: 12px;
    }

    #comparativa-servicios .fila-precio-apertura .precio-especial {
        font-size: 10px;
    }

    #comparativa-servicios .fila-precio-apertura .precio-1 {
        font-size: 14px;
    }

    /* Botones */
    #comparativa-servicios .cta-comparativa span {
        font-size: 10px;
    }

    #comparativa-servicios .btn-elegir-servicio {
        min-height: 28px;
        padding: 7px 8px;
        font-size: 10px;
    }

    /* Incluido en todos */
    #comparativa-servicios .incluido-todos {
        width: 88%;
        margin-top: 25px;
        padding: 18px 12px;
    }

    #comparativa-servicios .incluido-todos-titulo {
        font-size: 17px;
    }

    #comparativa-servicios .etiquetas-incluidas {
        gap: 6px;
    }

    #comparativa-servicios .etiquetas-incluidas span {
        padding: 6px 9px;
        font-size: 11px;
        white-space: normal;
    }

    #comparativa-servicios .etiquetas-incluidas span img {
        width: 25px;
        height: 25px;
        padding-right: 5px;
    }
}

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

@media (max-width: 390px) {

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

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

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

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

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

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

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

    #comparativa-servicios .incluido-todos {
        width: 90%;
    }
}

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

.no-sabe-elegir {
    width: 100%;
    padding: 20px 0 0;
    box-sizing: border-box;
}

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

.no-sabe-elegir .cta_servicios {
    position: relative;
    width: min(88%, 760px);
    margin: 40px auto 20px;
    padding: 28px 40px 30px;
    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;
    text-align: center;
}

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

/* ==========================================================================
   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;
    line-height: 1.2;

    text-align: center;
    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(88%, 760px);
    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: 650px;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.4;
}

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

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

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

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

@media (max-width: 1024px) {

    .no-sabe-elegir .cta_servicios {
        width: min(86%, 700px);
        margin-top: 35px;
        padding: 27px 35px 29px;
    }

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

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

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

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

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

@media (max-width: 820px) {

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

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

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

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

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

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

@media (max-width: 600px) {

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

    /* Tarjeta */
    .no-sabe-elegir .cta_servicios {
        width: calc(100% - 36px);
        max-width: 430px;
        margin: 30px auto 18px;
        padding: 25px 20px 26px;
        border-radius: 22px;
    }

    /* Título */
    .no-sabe-elegir .cta_servicios h2 {
        max-width: 320px;
        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%;
        min-width: 0;
        max-width: 310px;
        padding: 12px 18px;
        font-size: 13px;
    }

    /* Cupos */
    .no-sabe-elegir .mencion-cupos {
        width: calc(100% - 40px);
        max-width: 400px;
        margin: 24px auto 0;
    }

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

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

    .no-sabe-elegir::after {
        margin-top: 22px;
    }
}

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

@media (max-width: 390px) {

    .no-sabe-elegir .cta_servicios {
        width: calc(100% - 30px);
        padding: 23px 17px 24px;
    }

    .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 {
        width: calc(100% - 32px);
    }

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

    .no-sabe-elegir .mencion-cupos #cta_nota {
        max-width: 290px;
        font-size: 8.5px;
    }
}
/* ==========================================================================
   MODALES DE SERVICIOS
   ========================================================================== */

/* Modal */

#servicios dialog {
    width: 90vw;
    max-width: 600px;
    max-height: 85vh;
    padding: 20px;
    overflow: auto;
    border: none;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(239, 186, 195, 0.35);
}

/* Fondo del modal */

#servicios dialog::backdrop {
    background: rgba(227, 236, 244, 0.85);
}

/* Apertura */

#servicios dialog[open] {
    animation: modal-in 0.2s ease-out;
}

/* Contenido */

#servicios .modal-contenido-focus,
#servicios .modal-contenido-presencia,
#servicios .modal-contenido-portafolio {
    position: relative;
}

#servicios .modal-contenido-focus img,
#servicios .modal-contenido-presencia img,
#servicios .modal-contenido-portafolio img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}

/* Botón cerrar */

#servicios .boton-cerrar {
    position: sticky;
    top: 0;
    left: 100%;
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image: url("../img/cerrar-oscuro.svg");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transform: translate(50%, -50%);
}

#servicios .boton-cerrar:hover {
    background-image: url("../img/cerrar-claro.svg");
}

/* Animación */

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* RESPONSIVE MODALES DE SERVICIOS */

@media (max-width: 600px) {
    #servicios dialog {
        width: 94vw;
        max-height: 88vh;
        padding: 15px;
        border-radius: 13px;
    }

    #servicios .boton-cerrar {
        width: 28px;
        height: 28px;
    }
}

/* ==========================================================================
   MODAL RESERVA
   ========================================================================== */

#reservar-cupo-web {
    width: min(92%, 520px);
    max-height: 90vh;
    padding: 0;
    overflow: auto;
    border: none;
    border-radius: 22px;
    background: var(--blush);
    box-shadow: 0 18px 50px rgba(76, 19, 38, 0.16);
}

#reservar-cupo-web::backdrop {
    background: rgba(64, 34, 47, 0.35);
}

/* Contenedor */

#reservar-cupo-web .modal-reserva {
    position: relative;
    padding: 34px 36px 32px;
    color: var(--maroon);
}

/* Botón cerrar */

#reservar-cupo-web .cerrar-modal-reserva {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

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

#reservar-cupo-web .cerrar-modal-reserva::before {
    transform: rotate(45deg);
}

#reservar-cupo-web .cerrar-modal-reserva::after {
    transform: rotate(-45deg);
}

/* Pasos */

#reservar-cupo-web .paso-reserva {
    display: none;
}

#reservar-cupo-web .paso-reserva.activo {
    display: block;
}

/* Encabezado */

#reservar-cupo-web .encabezado-reserva {
    margin-bottom: 24px;
    text-align: center;
}

#reservar-cupo-web .titulo-reserva {
    margin: 0 0 4px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

#reservar-cupo-web .servicio-reserva {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--dusty-rose);
    font-size: 13px;
}

#reservar-cupo-web .servicio-reserva em {
    font-family: var(--font-display);
    font-style: italic;
}

#reservar-cupo-web .bajada-reserva {
    margin: 8px 0 0;
    color: var(--maroon);
    font-size: 13px;
}

/* Progreso */

#reservar-cupo-web .progreso-reserva {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto 25px;
}

#reservar-cupo-web .item-progreso {
    width: 72px;
    text-align: center;
}

#reservar-cupo-web .item-progreso span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
    border: 1px solid var(--dusty-rose);
    border-radius: 50%;
    background: var(--blush);
    color: var(--dusty-rose);
    font-size: 11px;
}

#reservar-cupo-web .item-progreso.activo span {
    border-color: var(--maroon);
    background: var(--maroon);
    color: var(--blush);
}

#reservar-cupo-web .item-progreso p {
    margin: 0;
    color: var(--maroon);
    font-size: 9px;
}

#reservar-cupo-web .linea-progreso {
    width: 58px;
    height: 1px;
    margin-top: 15px;
    background: var(--dusty-rose);
}

/* Formulario */

#reservar-cupo-web #form-reserva {
    display: grid;
    gap: 14px;
}

#reservar-cupo-web .campo-reserva {
    display: grid;
    gap: 6px;
}

#reservar-cupo-web .campo-reserva label {
    color: var(--maroon);
    font-size: 11px;
    font-weight: 600;
}

#reservar-cupo-web .campo-reserva input,
#reservar-cupo-web .campo-reserva select,
#reservar-cupo-web .campo-reserva textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(92, 30, 51, 0.18);
    border-radius: 8px;
    outline: none;
    background: rgba(255, 255, 255, 0.55);
    color: var(--maroon);
    font-size: 11px;
    line-height: 1.4;
}

#reservar-cupo-web .campo-reserva textarea {
    min-height: 85px;
    resize: vertical;
}

#reservar-cupo-web .campo-reserva input:focus,
#reservar-cupo-web .campo-reserva select:focus,
#reservar-cupo-web .campo-reserva textarea:focus {
    border-color: var(--dusty-rose);
}

#reservar-cupo-web .campo-reserva input::placeholder,
#reservar-cupo-web .campo-reserva textarea::placeholder {
    color: rgba(92, 30, 51, 0.45);
}

/* Botones de navegación */

#reservar-cupo-web .boton-continuar-reserva {
    width: 100%;
    margin-top: 4px;
    padding: 11px 18px;
    border: none;
    border-radius: 30px;
    background: var(--maroon);
    color: var(--blush);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

#reservar-cupo-web .boton-continuar-reserva:hover {
    background: var(--maroon-hover);
    transform: translateY(-1px);
}

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

/* Paso 2 — Resumen */

#reservar-cupo-web .resumen-servicio-reserva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 15px 17px;
    border-radius: 14px;
    background: rgba(244, 206, 218, 0.55);
}

#reservar-cupo-web .resumen-servicio-reserva > div:first-child {
    display: grid;
    gap: 2px;
}

#reservar-cupo-web .resumen-servicio-reserva strong {
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 18px;
}

#reservar-cupo-web .resumen-servicio-reserva span {
    color: var(--maroon);
    font-size: 9px;
}

#reservar-cupo-web .precio-resumen {
    display: grid;
    gap: 2px;
    text-align: right;
}

#reservar-cupo-web .precio-resumen strong {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
}

/* Reserva 50% */

#reservar-cupo-web .bloque-reserva-50 {
    margin-bottom: 16px;
    padding: 17px;
    border-radius: 14px;
    background: rgba(244, 206, 218, 0.75);
    text-align: center;
}

#reservar-cupo-web .bloque-reserva-50 p {
    margin: 0 0 7px;
    font-size: 10px;
}

#reservar-cupo-web .bloque-reserva-50 strong {
    display: block;
    margin-bottom: 5px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 26px;
}

#reservar-cupo-web .bloque-reserva-50 span {
    font-size: 9px;
}

/* Avisos */

#reservar-cupo-web .aviso-revision,
#reservar-cupo-web .aviso-correo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 13px;
    background: var(--pastel-blue);
}

#reservar-cupo-web .icono-aviso {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1px solid var(--maroon);
    border-radius: 50%;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 13px;
}

#reservar-cupo-web .aviso-revision p,
#reservar-cupo-web .aviso-correo p {
    margin: 0;
    font-size: 9px;
    line-height: 1.45;
}

/* Paso 3 — Confirmación */

#reservar-cupo-web .confirmacion-reserva {
    text-align: center;
}

#reservar-cupo-web .check-reserva {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 5px auto 18px;
    border-radius: 50%;
    background: var(--dusty-rose);
    color: var(--blush);
    font-size: 25px;
}

#reservar-cupo-web .confirmacion-reserva h2 {
    margin: 0;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 31px;
}

#reservar-cupo-web .subtitulo-confirmacion {
    margin: 3px 0 22px;
    color: var(--maroon);
    font-size: 14px;
}

#reservar-cupo-web .texto-confirmacion {
    max-width: 360px;
    margin: 0 auto 18px;
    color: var(--maroon);
    font-size: 10px;
    line-height: 1.5;
}

#reservar-cupo-web .lista-confirmacion {
    max-width: 330px;
    margin: 0 auto 20px;
    text-align: left;
}

#reservar-cupo-web .lista-confirmacion p {
    display: flex;
    gap: 9px;
    margin: 9px 0;
    font-size: 10px;
    line-height: 1.4;
}

#reservar-cupo-web .lista-confirmacion span {
    color: var(--dusty-rose);
    font-weight: 700;
}

#reservar-cupo-web .confirmacion-reserva .aviso-correo {
    max-width: 360px;
    margin: 0 auto 18px;
    text-align: left;
}

/* RESPONSIVE MODAL RESERVA */

@media (max-width: 600px) {
    #reservar-cupo-web {
        width: min(94%, 440px);
    }

    #reservar-cupo-web .modal-reserva {
        padding: 32px 20px 25px;
    }

    #reservar-cupo-web .titulo-reserva {
        font-size: 24px;
    }

    #reservar-cupo-web .linea-progreso {
        width: 35px;
    }

    #reservar-cupo-web .resumen-servicio-reserva {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #reservar-cupo-web .precio-resumen {
        text-align: left;
    }
}

/* ==========================================================================
   ESTO ES PARA TI SI...
   ========================================================================== */

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

/* Título */
#esto_es_para_ti h1 {
    margin: 0 0 18px;
    color: var(--blush);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

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

.tarjeta-lista {
    width: min(90%, 480px);
    margin: 0 auto;
    padding: 32px 28px;
    box-sizing: border-box;
    border-radius: 24px;
    background: var(--blush);
    text-align: left;
}

.tarjeta-lista ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarjeta-lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--brown);
    font-size: 14px;
    line-height: 1.6;
}

.tarjeta-lista li:last-child {
    margin-bottom: 0;
}

.tarjeta-lista li::before {
    content: "—";
    flex-shrink: 0;
    color: var(--maroon);
    font-weight: 700;
}

.tarjeta-lista li strong {
    color: var(--maroon);
    font-weight: 700;
}

/* ==========================================================================
   FRASE DE CIERRE
   ========================================================================== */

.frase-cierre-estoesparati {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(90%, 550px);
    margin: 36px auto 28px;
    gap: 25px;
}

.frase-cierre-fila {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.frase-cierre-fila img {
    flex-shrink: 0;
    width: 80px;
    height: auto;
    margin: -40px 0 0 -60px;
}

.frase-cierre-fila p {
    margin: 0;
    color: var(--blush);
    font-family: var(--font-body);
    font-size: 16px;
    font-style: italic;
    line-height: 1.3;
    text-align: center;
}

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

.boton-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    padding: 10px 40px;
    box-sizing: border-box;
    border: 2px solid var(--celeste);
    border-radius: 999px;
    background: var(--pastel-blue);
    color: var(--superdark);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

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

/* Franja inferior */
#esto_es_para_ti::after {
    content: "";
    display: block;
    width: calc(100% + 48px);
    height: 30px;
    margin-top: 60px;
    margin-left: -24px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--maroon) 0 32px,
        var(--rose-light) 32px 64px
    );
}

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

@media (max-width: 1024px) {

    #esto_es_para_ti {
        padding: 48px 24px 0;
    }

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

    .tarjeta-lista {
        max-width: 470px;
    }

    .frase-cierre-estoesparati {
        margin-top: 32px;
    }

    .frase-cierre-fila p {
        font-size: 15px;
    }

    .boton-final {
        font-size: 15px;
    }
}

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

@media (max-width: 600px) {

    #esto_es_para_ti {
        padding: 42px 18px 0;
    }

    /* Título */
    #esto_es_para_ti h1 {
        margin-bottom: 16px;
        font-size: 29px;
    }

    /* Tarjeta */
    .tarjeta-lista {
        width: 100%;
        max-width: 400px;
        padding: 25px 20px;
        border-radius: 20px;
    }

    .tarjeta-lista li {
        gap: 9px;
        margin-bottom: 11px;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Frase */
    .frase-cierre-estoesparati {
        width: 100%;
        max-width: 390px;
        margin: 30px auto 24px;
        gap: 20px;
    }

    .frase-cierre-fila {
        gap: 8px;
    }

    .frase-cierre-fila img {
        width: 60px;
        margin: -25px 0 0 -15px;
    }

    .frase-cierre-fila p {
        max-width: 260px;
        font-size: 13px;
        line-height: 1.35;
    }

    /* Botón */
    .boton-final {
        width: 100%;
        max-width: 310px;
        padding: 11px 18px;
        font-size: 13px;
    }

    /* Franja */
    #esto_es_para_ti::after {
        width: calc(100% + 36px);
        height: 25px;
        margin-top: 45px;
        margin-left: -18px;
        background-image: repeating-linear-gradient(
            90deg,
            var(--maroon) 0 26px,
            var(--rose-light) 26px 52px
        );
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO
   ========================================================================== */

@media (max-width: 390px) {

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

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

    .tarjeta-lista {
        padding: 22px 18px;
    }

    .tarjeta-lista li {
        font-size: 12.5px;
    }

    .frase-cierre-fila img {
        width: 52px;
        margin-left: -8px;
    }

    .frase-cierre-fila p {
        max-width: 230px;
        font-size: 12px;
    }

    .boton-final {
        max-width: 285px;
        font-size: 12px;
    }

    #esto_es_para_ti::after {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
}


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

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

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

#como_trabajo .encabezado-como-trabajo {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

#como_trabajo .encabezado-como-trabajo h1 {
    margin: 40px 0 6px;
    padding-right: 90px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

#como_trabajo #ct-subtitulo {
    margin: -15px 0 25px;
    padding-left: 90px;
    color: var(--rose-pink);
    font-family: var(--font-script);
    font-size: 20px;
    line-height: 1.2;
}

/* ==========================================================================
   MARCO EXTERIOR
   ========================================================================== */

#como_trabajo .ruta-trabajo {
    position: relative;
    width: min(90%, 550px);
    margin: 0 auto 15px;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid var(--blush);
    border-radius: 14px;
    background: var(--superdark);
    box-shadow:
        6px 6px 0 rgba(78, 14, 26, 0.18),
        10px 10px 30px rgba(78, 14, 26, 0.18);
}

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */

#como_trabajo .topbar-trabajo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 8px;
}

#como_trabajo .topbar-puntos,
#como_trabajo .topbar-equis {
    display: block;
    width: auto;
    height: 25px;
}

#como_trabajo .topbar-equis {
    cursor: pointer;
}

/* ==========================================================================
   TARJETA INTERIOR
   ========================================================================== */

#como_trabajo .card-trabajo {
    padding: 30px 34px 28px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--white);
    text-align: left;
}

/* Pasos */
#como_trabajo .card-trabajo h2 {
    margin: 0 0 3px;
    color: var(--maroon);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

#como_trabajo .card-trabajo p {
    margin: 0 0 22px;
    color: var(--maroon);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

#como_trabajo .card-trabajo p:last-child {
    margin-bottom: 0;
}

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

#como_trabajo .boton-como-trabajo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(90%, 350px);
    margin: 25px auto 40px;
    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;
}

#como_trabajo .boton-como-trabajo:hover {
    background: var(--rose-pink);
    color: var(--white);
    transform: translateY(-2px);
}

/* Franja inferior */
#como_trabajo::after {
    content: "";
    display: block;
    width: calc(100% + 48px);
    height: 5px;
    margin-top: 70px;
    margin-left: -24px;
    background: var(--rose-light);
}

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

@media (max-width: 1024px) {

    #como_trabajo {
        padding: 55px 24px 70px;
    }

    #como_trabajo .encabezado-como-trabajo h1 {
        margin-top: 30px;
        padding-right: 70px;
        font-size: 32px;
    }

    #como_trabajo #ct-subtitulo {
        padding-left: 70px;
        font-size: 19px;
    }

    #como_trabajo .ruta-trabajo {
        max-width: 530px;
    }

    #como_trabajo .card-trabajo {
        padding: 28px 30px;
    }

    #como_trabajo .boton-como-trabajo {
        font-size: 15px;
    }
}

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

@media (max-width: 600px) {

    #como_trabajo {
        padding: 45px 18px 55px;
    }

    /* Encabezado */
    #como_trabajo .encabezado-como-trabajo {
        max-width: 390px;
    }

    #como_trabajo .encabezado-como-trabajo h1 {
        margin: 20px 0 5px;
        padding-right: 35px;
        font-size: 29px;
        line-height: 1.1;
    }

    #como_trabajo #ct-subtitulo {
        margin: -10px 0 22px;
        padding-left: 35px;
        font-size: 17px;
    }

    /* Marco */
    #como_trabajo .ruta-trabajo {
        width: 100%;
        max-width: 430px;
        padding: 9px;
        border-radius: 13px;
    }

    /* Barra superior */
    #como_trabajo .topbar-trabajo {
        padding: 1px 5px 7px;
    }

    #como_trabajo .topbar-puntos,
    #como_trabajo .topbar-equis {
        height: 20px;
    }

    /* Tarjeta */
    #como_trabajo .card-trabajo {
        padding: 24px 20px;
        border-radius: 10px;
    }

    #como_trabajo .card-trabajo h2 {
        font-size: 13px;
    }

    #como_trabajo .card-trabajo p {
        margin-bottom: 18px;
        font-size: 11.5px;
        line-height: 1.45;
    }

    /* Botón */
    #como_trabajo .boton-como-trabajo {
        width: 100%;
        max-width: 310px;
        margin: 22px auto 30px;
        padding: 11px 17px;
        font-size: 13px;
    }

    /* Franja inferior */
    #como_trabajo::after {
        width: calc(100% + 36px);
        margin-top: 50px;
        margin-left: -18px;
    }
}

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

@media (max-width: 390px) {

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

    #como_trabajo .encabezado-como-trabajo h1 {
        padding-right: 25px;
        font-size: 27px;
    }

    #como_trabajo #ct-subtitulo {
        padding-left: 25px;
        font-size: 16px;
    }

    #como_trabajo .card-trabajo {
        padding: 21px 17px;
    }

    #como_trabajo .card-trabajo h2 {
        font-size: 12.5px;
    }

    #como_trabajo .card-trabajo p {
        font-size: 11px;
    }

    #como_trabajo .boton-como-trabajo {
        max-width: 285px;
        font-size: 12px;
    }

    #como_trabajo::after {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */

#faq {
    width: 100%;
    margin-top: -40px;
    padding: 60px 24px 80px;
    box-sizing: border-box;
    overflow-x: hidden;
    background: var(--blush);
    text-align: center;
}

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

#faq .encabezado-faq {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}

#faq .encabezado-faq h1 {
    margin: 0 0 40px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

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

#faq .lista-faq {
    width: min(90%, 650px);
    margin: 0 auto 100px;
    text-align: left;
}

/* Cada pregunta */
#faq .faq-item {
    width: 100%;
    border-bottom: 1px solid var(--rose-light);
}

#faq .faq-item:first-child {
    border-top: 1px solid var(--rose-light);
}

/* ==========================================================================
   PREGUNTA
   ========================================================================== */

#faq .faq-pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 4px;
    box-sizing: border-box;
    color: var(--maroon);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Oculta marcador nativo Safari / Chrome */
#faq .faq-pregunta::-webkit-details-marker {
    display: none;
}

#faq .faq-pregunta::marker {
    display: none;
}

/* ==========================================================================
   ICONO FLECHA
   ========================================================================== */

#faq .faq-icono {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border-right: 2px solid var(--maroon);
    border-bottom: 2px solid var(--maroon);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

#faq .faq-item[open] .faq-icono {
    transform: rotate(225deg);
}

/* ==========================================================================
   RESPUESTA
   ========================================================================== */

#faq .faq-respuesta-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

#faq .faq-item[open] .faq-respuesta-wrap {
    grid-template-rows: 1fr;
}

#faq .faq-respuesta {
    min-height: 0;
    margin: 0 0 20px;
    padding: 0 35px 0 4px;
    overflow: hidden;
    color: var(--maroon);
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
}

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

#faq .faq-cta {
    width: min(90%, 650px);
    margin: 40px auto 0;
    text-align: center;
}

#faq .faq-cta h2 {
    margin: 0 0 16px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

#faq .faq-boton-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    padding: 14px 32px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--pastel-blue);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.10);
    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;
    -webkit-tap-highlight-color: transparent;
}

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

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

@media (max-width: 1024px) {

    #faq {
        margin-top: -30px;
        padding: 55px 24px 70px;
    }

    #faq .encabezado-faq h1 {
        margin-bottom: 35px;
        font-size: 34px;
    }

    #faq .lista-faq {
        max-width: 620px;
        margin-bottom: 85px;
    }

    #faq .faq-pregunta {
        padding: 19px 4px;
        font-size: 14px;
    }

    #faq .faq-respuesta {
        font-size: 13.5px;
    }
}

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

@media (max-width: 820px) {

    #faq {
        margin-top: -25px;
        padding: 50px 22px 65px;
    }

    #faq .lista-faq {
        width: min(90%, 580px);
        margin-bottom: 75px;
    }

    #faq .encabezado-faq h1 {
        font-size: 32px;
    }

    #faq .faq-pregunta {
        gap: 14px;
        font-size: 13.5px;
    }

    #faq .faq-respuesta {
        padding-right: 30px;
        font-size: 13px;
    }
}

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

@media (max-width: 600px) {

    #faq {
        margin-top: -20px;
        padding: 45px 18px 55px;
    }

    /* Título */
    #faq .encabezado-faq {
        max-width: 390px;
    }

    #faq .encabezado-faq h1 {
        margin-bottom: 28px;
        font-size: 29px;
        line-height: 1.1;
    }

    /* Lista */
    #faq .lista-faq {
        width: 100%;
        max-width: 430px;
        margin: 0 auto 60px;
    }

    /* Pregunta */
    #faq .faq-pregunta {
        gap: 12px;
        padding: 17px 3px;
        font-size: 13px;
        line-height: 1.4;
    }

    /* Flecha */
    #faq .faq-icono {
        width: 10px;
        height: 10px;
        margin-right: 3px;
        border-right-width: 1.5px;
        border-bottom-width: 1.5px;
    }

    /* Respuesta */
    #faq .faq-respuesta {
        margin-bottom: 17px;
        padding: 0 25px 0 3px;
        font-size: 12.5px;
        line-height: 1.55;
    }

    /* CTA */
    #faq .faq-cta {
        width: 100%;
        max-width: 390px;
        margin-top: 35px;
    }

    #faq .faq-cta h2 {
        max-width: 310px;
        margin: 0 auto 15px;
        font-size: 18px;
        line-height: 1.25;
    }

    #faq .faq-boton-whatsapp {
        width: 100%;
        max-width: 300px;
        min-width: 0;
        padding: 12px 20px;
        font-size: 13px;
    }
}

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

@media (max-width: 390px) {

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

    #faq .encabezado-faq h1 {
        font-size: 27px;
    }

    #faq .faq-pregunta {
        padding: 16px 2px;
        font-size: 12.5px;
    }

    #faq .faq-respuesta {
        padding-right: 20px;
        font-size: 12px;
    }

    #faq .faq-cta h2 {
        max-width: 280px;
        font-size: 17px;
    }

    #faq .faq-boton-whatsapp {
        max-width: 280px;
        font-size: 12px;
    }
}

/* ==========================================================================
   BARRA ANIMADA — CUPOS MORENA
   ========================================================================== */

.barra-cupos {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    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 */

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

.barra-cupos-grupo span {
    flex-shrink: 0;
    padding: 0 14px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 20px;
    font-style: italic;
}

/* Separadores */

.barra-cupos-grupo .barra-cupos-punto {
    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 10px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra-cupos-track {
        animation: none;
    }
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */

#contacto {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 40px 80px 80px;
    background: var(--blush);
}

/* Imagen */

#contacto > img {
    flex-shrink: 0;
    width: 180px;
    height: auto;
    margin-top: -120px;
}

/* Contenedor */

#contacto .contenedor-contacto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 550px;
    text-align: left;
}

/* Título */

#contacto .contenedor-contacto h1 {
    margin: 0 0 24px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
}

#contacto .contenedor-contacto h1 strong {
    font-weight: 700;
}

/* Texto */

#contacto .contenedor-contacto p {
    margin: 0 0 24px;
    color: var(--maroon);
    font-size: 18px;
    line-height: 1.3;
}

#contacto .contenedor-contacto p strong {
    font-weight: 700;
}

/* Botón principal */

#contacto .boton-cuentame {
    display: inline-block;
    width: auto;
    margin-bottom: 50px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--maroon);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
    color: var(--blush);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#contacto .boton-cuentame:hover {
    background: var(--celeste);
    color: var(--maroon);
    transform: translateY(-2px);
}

/* WhatsApp */

#contacto #pregunta-whatsapp {
    margin: 0 0 16px;
    color: var(--rose-pink);
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
}

#contacto .boton-whatsapp {
    display: inline-block;
    width: auto;
    margin-bottom: 24px;
    padding: 10px 15px;
    border-radius: 999px;
    background: var(--rose-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
    color: var(--maroon);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

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

/* ==========================================================================
   CONTACTO — MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    #contacto {
        position: relative;
        padding-top: 0;
    }

    #contacto .telefono-contacto {
        position: absolute;
        top: -55px;
        left: 20px;
        z-index: 2;
        width: 105px;
        height: auto;
        margin: 0;
    }

    /* Contenido */

    #contacto .contenedor-contacto {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
        padding-top: 0;
        box-sizing: border-box;
        text-align: left;
    }

    /* Título al lado derecho del teléfono */

    #contacto .contenedor-contacto h1 {
        width: calc(100% - 125px);
        min-height: 245px;
        margin: 0 0 15px 80px;
        padding-top: 45px;
        box-sizing: border-box;
        color: var(--maroon);
        font-size: 28px;
        line-height: 1.03;
        text-align: left;
    }

    /* En mobile dejamos que el título se corte naturalmente */

    #contacto .contenedor-contacto h1 br {
        display: none;
    }

    /* Texto principal */

    #contacto .contenedor-contacto > p:not(#pregunta-whatsapp) {
        width: 100%;
        margin: 0 0 25px;
        font-size: 14px;
        line-height: 1.4;
        text-align: left;
    }

    /* Botón principal */

    #contacto .boton-cuentame {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        margin: 0 0 38px;
        padding: 12px 22px;
        box-sizing: border-box;
    }

    /* Pregunta WhatsApp */

    #contacto #pregunta-whatsapp {
        margin: 0 0 16px;
        font-size: 14px;
        line-height: 1.3;
        text-align: left;
    }

    /* Botón WhatsApp */

    #contacto .boton-whatsapp {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        padding: 12px 18px;
        box-sizing: border-box;
    }
}


/* ==========================================================================
   IPHONE PEQUEÑO
   ========================================================================== */

@media (max-width: 390px) {

    #contacto {
        padding-right: 16px;
        padding-left: 16px;
    }

    #contacto .telefono-contacto {
        left: 16px;
        width: 95px;
    }

    #contacto .contenedor-contacto h1 {
        width: calc(100% - 110px);
        min-height: 225px;

        margin-left: 110px;
        padding-top: 45px;

        font-size: 25px;
    }

    #contacto .contenedor-contacto > p:not(#pregunta-whatsapp) {
        font-size: 13px;
    }

    #contacto #pregunta-whatsapp {
        font-size: 13px;
    }
}
/* ==========================================================================
   PRÓXIMAMENTE
   ========================================================================== */

#proximamente {
    padding: 60px 24px 80px;
    background: var(--pastel-blue);
    text-align: center;
}

/* Encabezado */

#proximamente .encabezado-proximamente h1 {
    margin: 0 0 16px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 36px;
    font-style: italic;
    font-weight: 700;
}

#proximamente .encabezado-proximamente p {
    max-width: 550px;
    margin: 0 auto 40px;
    color: var(--maroon);
    font-size: 16px;
    line-height: 1.5;
}

/* Contenedor de servicios */

#proximamente .proximos-servicios {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 550px;
    margin: 0 auto;
}

/* Tarjetas */

#proximamente .tarjeta-vitrina,
#proximamente .tarjeta-tuesencia {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    width: 100%;
    margin-bottom: 40px;
    padding: 24px 32px;
    border: 1px solid var(--rose-pink);
    border-radius: 16px;
    background: var(--blush);
    text-align: left;
}

/* Título de tarjeta */

#proximamente .titulo-tarjeta {
    margin: 0;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
}

/* Subtítulo de tarjeta */

#proximamente .subtitulo-tarjeta {
    margin: 0;
    color: var(--rose-pink);
    font-family: var(--font-script);
    font-size: 18px;
}

/* Descripción */

#proximamente .descripcion {
    flex-basis: 100%;
    margin: 8px 0 0;
    color: var(--maroon);
    font-size: 14px;
    line-height: 1.4;
}

/* Texto de aviso */

#proximamente .texto-aviso {
    max-width: 480px;
    margin: 0 0 24px;
    color: var(--maroon);
    font-size: 16px;
    line-height: 1.4;
}

/* Formulario */

#proximamente .form-aviso {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
}

#proximamente .form-aviso input[type="email"] {
    min-width: 200px;
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    outline: none;
    background: var(--blush);
    color: var(--maroon);
    font-size: 15px;
}

#proximamente .form-aviso input[type="email"]::placeholder {
    color: var(--rose-pink);
}

#proximamente .form-aviso input[type="email"]:focus {
    box-shadow: 0 0 0 2px var(--rose-pink);
}

/* Botón */

#proximamente .form-aviso button {
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    background: var(--maroon);
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

#proximamente .form-aviso button:hover {
    background: var(--superdark);
    transform: translateY(-2px);
}

/* Mensaje del formulario */

#proximamente .form-aviso-mensaje {
    min-height: 20px;
    margin: 8px 0 0;
    font-size: 14px;
}

#proximamente .form-aviso-mensaje.exito {
    color: var(--rose-pink);
}

#proximamente .form-aviso-mensaje.error {
    color: var(--superdark);
}

/* Texto final */

#proximamente .texto-final {
    color: var(--maroon);
    font-size: 15px;
    line-height: 1.5;
}

#proximamente .texto-final a {
    color: var(--rose-pink);
    font-weight: 700;
    text-decoration: none;
}

#proximamente .texto-final a:hover {
    text-decoration: underline;
}

/* Accesibilidad */

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

/* RESPONSIVE PRÓXIMAMENTE */

@media (max-width: 600px) {
    #proximamente {
        padding: 50px 20px 65px;
    }

    #proximamente .encabezado-proximamente h1 {
        font-size: 31px;
    }

    #proximamente .encabezado-proximamente p {
        margin-bottom: 32px;
        font-size: 15px;
    }

    #proximamente .tarjeta-vitrina,
    #proximamente .tarjeta-tuesencia {
        margin-bottom: 30px;
        padding: 22px 20px;
    }

    #proximamente .titulo-tarjeta {
        font-size: 24px;
    }

    #proximamente .subtitulo-tarjeta {
        font-size: 17px;
    }

    #proximamente .descripcion {
        font-size: 13px;
    }

    #proximamente .texto-aviso {
        font-size: 14px;
    }

    #proximamente .form-aviso {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
    }

    #proximamente .form-aviso input[type="email"] {
        width: 100%;
        min-width: 0;
    }

    #proximamente .form-aviso button {
        width: 100%;
    }

    #proximamente .texto-final {
        font-size: 14px;
    }
}

/* ==========================================================================
   PIE DE PÁGINA — MORENA WEB
   ========================================================================== */

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 (al cargar la página) ---------- */
@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 ----------
   La clase "reveal" arranca invisible/corrida hacia abajo. JS (script.js)
   agrega "en-vista" cuando el elemento entra en pantalla, y ahí se anima. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.en-vista {
  opacity: 1;
  transform: translateY(0);
}

/* Cascada especial para la lista "Esto es para ti si..." — en vez del
   fade-up genérico, cada ítem entra deslizándose desde la izquierda con
   más espacio entre uno y otro, para que se note la cascada. */
.tarjeta-lista li.reveal {
  transform: translateX(-28px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tarjeta-lista li.reveal.en-vista {
  transform: translateX(0);
}

.tarjeta-lista li.reveal:nth-child(1) {
  transition-delay: 0.05s;
}

.tarjeta-lista li.reveal:nth-child(2) {
  transition-delay: 0.25s;
}

.tarjeta-lista li.reveal:nth-child(3) {
  transition-delay: 0.45s;
}

.tarjeta-lista li.reveal:nth-child(4) {
  transition-delay: 0.65s;
}

.faq-item.reveal:nth-child(1) {
  transition-delay: 0.02s;
}

.faq-item.reveal:nth-child(2) {
  transition-delay: 0.06s;
}

.faq-item.reveal:nth-child(3) {
  transition-delay: 0.10s;
}

.faq-item.reveal:nth-child(4) {
  transition-delay: 0.14s;
}

.faq-item.reveal:nth-child(5) {
  transition-delay: 0.18s;
}

.faq-item.reveal:nth-child(n+6) {
  transition-delay: 0.2s;
}

.proximos-servicios .reveal:nth-child(1) {
  transition-delay: 0.05s;
}

.proximos-servicios .reveal:nth-child(2) {
  transition-delay: 0.2s;
}

/* Stagger (retraso escalonado) dentro de grupos con varios ítems */
.tarjeta-lista li.reveal:nth-child(1) {
  transition-delay: 0.05s;
}

.tarjeta-lista li.reveal:nth-child(2) {
  transition-delay: 0.15s;
}

.tarjeta-lista li.reveal:nth-child(3) {
  transition-delay: 0.25s;
}

.tarjeta-lista li.reveal:nth-child(4) {
  transition-delay: 0.35s;
}

.faq-item.reveal:nth-child(1) {
  transition-delay: 0.02s;
}

.faq-item.reveal:nth-child(2) {
  transition-delay: 0.06s;
}

.faq-item.reveal:nth-child(3) {
  transition-delay: 0.10s;
}

.faq-item.reveal:nth-child(4) {
  transition-delay: 0.14s;
}

.faq-item.reveal:nth-child(5) {
  transition-delay: 0.18s;
}

.faq-item.reveal:nth-child(n+6) {
  transition-delay: 0.2s;
}

.proximos-servicios .reveal:nth-child(1) {
  transition-delay: 0.05s;
}

.proximos-servicios .reveal:nth-child(2) {
  transition-delay: 0.2s;
}

/* ---------- Hover: botones (se suman a los cambios de color que ya tenías) ---------- */
.boton_hero1,
.boton_hero2,
.cta_servicios1,
.boton-final,
.boton-como-trabajo,
.contenedor-servicios button,
.boton-cuentame,
.boton-whatsapp,
.faq-boton-whatsapp,
.form-aviso button,
header .btn {
  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,
.cta_servicios1:hover,
.boton-final:hover,
.boton-como-trabajo:hover,
.contenedor-servicios button:hover,
.boton-cuentame:hover,
.boton-whatsapp:hover,
.faq-boton-whatsapp:hover,
.form-aviso button:hover {
  transform: translateY(-3px);
}

header .btn:hover {
  transform: translateY(-2px);
}

/* ---------- Hover: tarjetas ---------- */
.tarjeta_impulso,
.tarjeta_presencia,
.tarjeta-vitrina,
.tarjeta-tuesencia {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tarjeta_impulso:hover,
.tarjeta_presencia:hover {
  transform: translateY(-6px);
  box-shadow:
    6px 10px 0 var(--dusty-rose),
    14px 18px 34px rgba(78, 14, 26, 0.22);
}

.tarjeta-vitrina:hover,
.tarjeta-tuesencia:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(78, 14, 26, 0.12);
}

/* Logo con leve respiro al pasar el mouse */
header .logo img {
  transition: transform 0.25s ease;
}

header .logo:hover img {
  transform: scale(1.04);
}

/* ---------- Respeta a quienes prefieren menos movimiento ---------- */
@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,
  .cta_servicios1,
  .boton-final,
  .boton-como-trabajo,
  .contenedor-servicios button,
  .boton-cuentame,
  .boton-whatsapp,
  .faq-boton-whatsapp,
  .form-aviso button,
  header .btn,
  .tarjeta_impulso,
  .tarjeta_presencia,
  .tarjeta-vitrina,
  .tarjeta-tuesencia,
  header .logo img {
    transition: none;
  }
}