/* =========================
   Variables de color
   ========================= */
:root {
    --fondo-pagina: #f4f5f7;
    --blanco: #ffffff;
    --texto: #25252b;
    --texto-suave: #6a6a73;

    /* Rojo tenue + vino */
    --rojo-tenue: #e55252;
    --rojo-vino: #7b1431;

    --borde-suave: #e0e2e7;
    --chip-fondo: #ffeaea;
    --chip-ubicacion-fondo: #ffe1e1;

    --sombra-suave: 0 18px 45px rgba(0, 0, 0, 0.08);
    --radio-card: 18px;
}

/* =========================
   Reset básico
   ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--fondo-pagina);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

/* =========================
   Layout general
   ========================= */
.page-wrapper {
    min-height: 100vh;
}

/* =========================
   HERO
   ========================= */
.hero {
    max-width: 1080px;
    margin: 24px auto 32px auto;
    padding: 32px 28px 36px;
    background-color: var(--blanco);
    border-radius: 24px;
    box-shadow: var(--sombra-suave);
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 2.3fr);
    gap: 32px;
    align-items: center;
}

.hero-texto {
    min-width: 0;
}

.hero-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rojo-vino);
    margin: 0 0 8px 0;
}

.hero h1 {
    font-size: 2rem;
    margin: 0 0 6px 0;
    color: var(--texto);
    font-weight: 700;
}

.hero-subtitulo {
    margin: 0 0 18px 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--texto-suave);
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.chip {
    font-size: 0.78rem;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.chip-ubicacion {
    background-color: var(--chip-ubicacion-fondo);
    color: var(--rojo-vino);
}

.chip-suave {
    background-color: #f5f5ff;
    color: #313168;
}

.chip-borde {
    border: 1px solid var(--borde-suave);
    color: var(--texto-suave);
    background-color: #ffffff;
}

.hero-descripcion {
    margin: 0 0 8px 0;
    font-size: 0.98rem;
    color: var(--texto);
}

.hero-lista {
    margin: 0 0 10px 18px;
    padding: 0;
    font-size: 0.96rem;
    color: var(--texto);
}

.hero-nota {
    margin: 0 0 18px 0;
    font-size: 0.9rem;
    color: var(--texto-suave);
}

/* Botón WhatsApp */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--rojo-tenue), var(--rojo-vino));
    color: #ffffff;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-whatsapp:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    opacity: 0.96;
}

.btn-icono {
    font-size: 1.2rem;
}

.hero-cta-nota {
    margin: 8px 0 0 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

/* HERO imagen */
.hero-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-imagen-card {
    background: #101015;
    border-radius: 26px;
    padding: 18px 18px 14px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.hero-imagen-card img {
    display: block;
    width: 260px;
    max-width: 100%;
    border-radius: 20px;
    background: radial-gradient(circle at top, #ffb2b2 0, #6b0f25 60%, #050308 100%);
}

.hero-imagen-caption {
    margin: 10px 0 0 0;
    font-size: 0.78rem;
    color: #e4e4eb;
}

/* =========================
   Secciones genéricas
   ========================= */
.seccion {
    max-width: 1080px;
    margin: 0 auto 28px auto;
    padding: 24px 22px 26px;
    background-color: var(--blanco);
    border-radius: var(--radio-card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.seccion-clara {
    background-color: #ffffff;
}

.seccion h2 {
    margin: 0 0 10px 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--texto);
}

.seccion-intro {
    margin: 0 0 18px 0;
    font-size: 0.95rem;
    color: var(--texto-suave);
}

/* =========================
   Áreas de aplicación
   ========================= */
.grid-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.area-card {
    border-radius: 14px;
    border: 1px solid var(--borde-suave);
    padding: 14px 14px 12px;
    background-color: #fafbff;
}

.area-card h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rojo-vino);
}

.area-card ul {
    margin: 0 0 4px 18px;
    padding: 0;
    font-size: 0.9rem;
    color: var(--texto);
}

/* =========================
   Casos reales
   ========================= */
.seccion-casos {
    background: radial-gradient(circle at top, #fff2f2 0, #ffffff 50%, #f6f7fb 100%);
}

.grid-casos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.caso-card {
    background-color: #ffffff;
    border-radius: 18px;
    border: 1px solid var(--borde-suave);
    padding: 16px 16px 14px;
}

.caso-card h3 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.caso-etiqueta {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: var(--rojo-vino);
    font-weight: 500;
}

.caso-imagenes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.caso-imagenes figure {
    margin: 0;
}

.caso-imagenes img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e3e3e9;
    display: block;
}

.caso-imagenes figcaption {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--texto-suave);
}

.caso-nota {
    margin: 0;
    font-size: 0.9rem;
    color: var(--texto);
}

/* =========================
   Cómo es una sesión
   ========================= */
.sesion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.sesion-paso {
    border-radius: 12px;
    border: 1px solid var(--borde-suave);
    padding: 12px 12px 10px;
    background-color: #fafbfd;
}

.sesion-paso h3 {
    margin: 0 0 6px 0;
    font-size: 0.98rem;
    color: var(--rojo-vino);
}

.sesion-paso p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--texto);
}

.sesion-nota {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background-color: #fff5f5;
    border: 1px solid #ffd3d3;
    font-size: 0.9rem;
    color: var(--texto);
}

/* =========================
   FAQ
   ========================= */
.seccion-faq {
    background-color: #ffffff;
}

.faq-item + .faq-item {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--borde-suave);
}

.faq-item h3 {
    margin: 0 0 4px 0;
    font-size: 0.98rem;
    font-weight: 600;
}

.faq-item p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--texto-suave);
}

/* =========================
   CTA Final
   ========================= */
.seccion-cta-final {
    text-align: center;
    background: linear-gradient(135deg, #fff4f4, #fff);
}

.seccion-cta-final h2 {
    margin-bottom: 6px;
}

.seccion-cta-final p {
    margin: 0 0 16px 0;
    font-size: 0.95rem;
    color: var(--texto-suave);
}

.btn-whatsapp-secundario {
    box-shadow: 0 10px 26px rgba(123, 20, 49, 0.36);
}

/* =========================
   Footer (ÚNICO)
   ========================= */
.site-footer {
    max-width: 1080px;
    margin: 0 auto 20px auto;
    padding: 10px 18px 4px;
    font-size: 0.8rem;
    color: var(--texto-suave);
    text-align: center;
}

.site-footer .footer-texto {
    margin: 0 0 4px 0;
}

.site-footer .footer-aviso {
    margin: 0 0 4px 0;
    font-size: 0.76rem;
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 840px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 22px 18px 24px;
        margin-top: 16px;
    }

    .hero-imagen-card img {
        width: 220px;
    }

    .seccion {
        margin: 0 10px 22px;
        padding: 20px 16px 22px;
    }

    .site-footer {
        margin: 0 10px 18px;
        padding: 10px 10px 6px;
    }
}