.elementor-75 .elementor-element.elementor-element-42349ed{--display:flex;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-75 .elementor-element.elementor-element-717f730{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-75 .elementor-element.elementor-element-717f730 > .elementor-widget-container{margin:20px 20px 20px 20px;}.elementor-75 .elementor-element.elementor-element-717f730 .elementor-divider-separator{width:100%;}.elementor-75 .elementor-element.elementor-element-717f730 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-75 .elementor-element.elementor-element-bd26a75 > .elementor-widget-container{margin:-56px -400px -194px -400px;}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:767px){.elementor-75 .elementor-element.elementor-element-bd26a75 > .elementor-widget-container{margin:-316px -40px 0px -40px;}}/* Start custom CSS for html, class: .elementor-element-bd26a75 *//* ==========================================================================
   Variables de Color y Fuentes SocioCompras.com
   ========================================================================== */
:root {
    --color-azul-primario: #06327d; /* Azul oscuro del header de la imagen */
    --color-amarillo-destacado: #ffd034; /* Amarillo para highlights */
    --color-blanco: #FFFFFF;
    --color-texto-principal: #333333; /* Para texto general sobre fondo claro */
    --color-texto-secundario: #555555;
    --color-gris-muy-claro: #f8f9fa; /* Para fondos sutiles o inputs */
    --color-borde-input: #ced4da;
    --font-principal: 'Poppins', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

/* ==========================================================================
   Estilos Globales y Reset Básico
   ========================================================================== */
html {
    scroll-behavior: smooth;
    height: 100%;
}
body.sociocompras-captura-body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--color-azul-primario); /* Fondo azul oscuro para toda la página */
    font-family: var(--font-principal);
    font-weight: var(--font-weight-regular);
    color: var(--color-texto-principal);
    line-height: 1.6;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Para que el footer quede abajo */
}

.main-container-captura {
    width: 100%;
    max-width: 700px; /* Ancho máximo del contenido central */
    margin: 0 auto; /* Centrar el contenedor */
    background-color: var(--color-blanco); /* Fondo blanco para el contenido */
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    border-radius: 0 0 12px 12px; /* Redondeo solo abajo si el header es full-width */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.cta-lanzamiento .nota-urgencia {
    display: block; /* O inline-block */
    margin-top: 8px;
    font-weight: bold;
    color: var(--color-rojo-urgencia); /* O un amarillo/azul que contraste pero llame la atención */
    font-style: italic; /* Opcional */
    font-size: 0.9em; /* Un poco más pequeño o del mismo tamaño */
}

/* ==========================================================================
   Header de la Landing de Captura
   ========================================================================== */
   

.header-captura {
    background-color: var(--color-azul-primario);
    padding: 20px;
    text-align: center; /* Centrar el logo si está aquí */
    border-bottom: 4px solid var(--color-amarillo-destacado);
    /* Si el logo de la imagen es parte del header y no de una sección separada: */
    /* background-image: url('images/logo-sociocompras-blanco.png'); /* Ruta a tu logo blanco */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: contain; O un tamaño específico */
    /* min-height: 80px; /* Ajustar según el tamaño del logo */
}
.logo-captura { /* Si el logo es una etiqueta img dentro del header */
    max-height: 165px; /* Ajusta según tu logo */
    width: auto;
    margin-bottom: 0px; /* Espacio si hay más elementos en el header */
}


/* ==========================================================================
   Contenido Principal de Captura
   ========================================================================== */
.content-captura {
    padding: 30px 25px 40px 25px; /* Padding generoso */
    text-align: center;
    flex-grow: 1;
}

.hero-captura .pretitle-captura {
    display: block;
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-azul-primario);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.hero-captura h1 {
    font-size: 2.2rem; /* Ajustado al de la imagen */
    font-weight: var(--font-weight-extrabold);
    color: var(--color-azul-primario);
    line-height: 1.25;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.hero-captura h1 .highlight-amarillo {
    color: var(--color-amarillo-destacado);
}

.hero-captura .subtitulo-hero-captura {
    font-size: 1.05rem;
    color: var(--color-texto-secundario);
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto 30px auto;
}
.hero-captura .subtitulo-hero-captura .highlight-amarillo {
    color: var(--color-azul-primario); /* O amarillo más oscuro si el texto es más claro */
    font-weight: var(--font-weight-bold);
}

/* Sección Countdown (ya provista anteriormente, se integra aquí) */
.lanzamiento-countdown-section {
    background-color: transparent; /* El fondo ya es blanco por .content-captura */
    padding: 20px 0px 30px 0px; /* Menos padding vertical ya que es parte del flujo */
    text-align: center;
}
/* ... (otros estilos) ... */

.countdown-timer {
    margin: 25px auto 15px auto; /* Ajustar margen */
    background-color: var(--color-azul-primario);
    padding: 20px 15px 25px 15px; /* Padding general */
    border-radius: 8px;
    display: inline-block; /* Para que se ajuste al contenido */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.countdown-texto-superior {
    color: var(--color-blanco);
    font-family: var(--font-principal);
    font-size: 1.1rem; /* Un poco más pequeño si el contador es más complejo */
    font-weight: 700; /* Bold */
    padding-bottom: 15px; /* Espacio antes de los bloques */
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Línea separadora sutil */
    margin-bottom: 15px;
}

.countdown-bloques {
    display: flex; /* Para alinear los bloques D, H, M, S */
    justify-content: center;
    align-items: baseline; /* Alinear por la base de los números */
    gap: 15px; /* Espacio entre bloques */
}

.bloque-tiempo {
    text-align: center;
    min-width: 65px; /* Ancho mínimo para cada bloque */
}

.numero-tiempo {
    font-family: var(--font-principal);
    font-size: 2.8rem; /* Tamaño de los números */
    font-weight: 800; /* ExtraBold */
    color: var(--color-amarillo-destacado); /* Números en amarillo */
    line-height: 1;
    display: block;
    padding: 5px 0; /* Espacio vertical para el número */
    /* background-color: rgba(255,255,255,0.1); /* Fondo sutil para cada número si se desea */
    /* border-radius: 4px; */
}

.etiqueta-tiempo {
    font-family: var(--font-principal);
    font-size: 0.8rem; /* Tamaño de "Días", "Horas", etc. */
    font-weight: 500; /* Medium */
    color: var(--color-blanco);
    text-transform: uppercase;
    display: block;
    margin-top: 5px;
    letter-spacing: 0.5px;
}

.fecha-lanzamiento {
    background-color: transparent; /* Ya no necesita fondo propio si el timer lo tiene */
    color: var(--color-texto-secundario); /* Color para fondo blanco */
    font-family: var(--font-principal);
    font-size: 1rem;
    font-weight: 700; /* Bold */
    padding: 0; /* Sin padding extra */
    display: block;
    margin-top: 5px; /* Espacio después del contador */
    margin-bottom: 30px;
}

/* ... (resto de tus estilos) ... */
/* Los estilos de .countdown-timer, .fecha-lanzamiento, etc., son los mismos que te di antes */
.countdown-timer { margin: 20px auto 10px auto; display: inline-block; }
.countdown-texto-superior {
    background-color: var(--color-azul-primario); color: var(--color-blanco);
    font-size: 1.1rem; font-weight: 700; padding: 8px 15px;
    border-radius: 6px 6px 0 0; display: block; text-transform: uppercase;
}
.countdown-numero {
    background-color: var(--color-azul-primario); color: var(--color-blanco);
    font-size: 5.5rem; font-weight: 800; line-height: 1;
    padding: 10px 15px 0px 15px; display: block;
}
.countdown-texto-inferior {
    background-color: var(--color-azul-primario); color: var(--color-blanco);
    font-size: 1.8rem; font-weight: 700; padding: 0px 15px 12px 15px;
    border-radius: 0 0 6px 6px; display: block; text-transform: uppercase;
}
.fecha-lanzamiento {
    background-color: var(--color-azul-primario); color: var(--color-blanco);
    font-size: 1rem; font-weight: 500; padding: 7px 12px;
    border-radius: 4px; display: inline-block; margin-top: -2px; /* Para que se pegue un poco */
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.cta-lanzamiento { /* Párrafo antes del botón del formulario */
    font-size: 1rem; color: var(--color-texto-secundario); line-height: 1.6;
    max-width: 550px; margin: 0 auto 20px auto;
}
.cta-lanzamiento .highlight-texto-fuerte {
    color: var(--color-azul-primario); font-weight: 700;
}

/* Estilos para el Iframe Container y el Formulario */
.form-section-captura {
    margin-top: 10px; /* Espacio después del countdown */
}
.iframe-container {
    max-width: 480px; /* Ancho del formulario como en la imagen */
    margin: 0 auto 20px auto;
    background-color: var(--color-blanco);
    padding: 20px; /* Espacio alrededor del iframe si es necesario */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.sub-cta-captura {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-azul-primario);
    margin-top: 25px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sub-cta-captura .highlight-amarillo {
    color: var(--color-amarillo-destacado);
}

.privacidad-nota-captura {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    margin-top: 20px;
}

/* ==========================================================================
   Footer de la Landing de Captura
   ========================================================================== */
.footer-captura {
    background-color: var(--color-gris-muy-claro); /* Fondo claro para el footer */
    color: var(--color-texto-secundario);
    padding: 20px;
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid var(--color-borde-input);
    margin-top: auto; /* Empuja el footer hacia abajo */
}
.footer-captura p {
    margin: 0;
}

/* ==========================================================================
   Estilos para el Formulario DENTRO DEL IFRAME (Fluent Forms)
   Estos estilos los aplicarías en la configuración de Fluent Forms o
   como CSS personalizado en WordPress si es posible.
   Aquí simulo cómo se deberían ver para que coincidan.
   ========================================================================== */

/* Si necesitas apuntar a elementos específicos DENTRO del iframe desde el CSS de la página contenedora,
   NO ES POSIBLE directamente debido a la política de mismo origen.
   Los estilos del formulario deben aplicarse en la página del propio formulario o
   a través de las opciones de personalización de Fluent Forms.

   El CSS que te di anteriormente para ".formulario-mejorado-sc"
   es el que deberías intentar replicar usando las opciones de Fluent Forms:
   - Labels: Poppins Medium, color #555, tamaño 1rem.
   - Inputs: Padding generoso (14px 18px), fondo #f8f9fa, borde #e0e0e0, radius 6px.
             Placeholder color #999. Focus con borde amarillo.
   - Botón Submit: Grande, amarillo (#ffd034), texto azul (#06327d) o negro, Poppins Bold,
                   uppercase, padding generoso (16px 20px), radius 8px.
*//* End custom CSS */