.elementor-170 .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-170 .elementor-element.elementor-element-717f730{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-170 .elementor-element.elementor-element-717f730 > .elementor-widget-container{margin:20px 20px 20px 20px;}.elementor-170 .elementor-element.elementor-element-717f730 .elementor-divider-separator{width:100%;}.elementor-170 .elementor-element.elementor-element-717f730 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-170 .elementor-element.elementor-element-bd26a75 > .elementor-widget-container{margin:-505px -400px -194px -400px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:767px){.elementor-170 .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 (BASADO EN LOGO y Manual)
   ========================================================================== */
:root {
    --color-azul-logo: #06327d;
    --color-amarillo-logo-accent: #ffd034;
    --color-verde-ahorro: #2A9D8F;
    --color-rojo-urgencia: #d9534f;
    --color-gris-claro: #F4F4F4;
    --color-negro-carbon: #1D1D1D;
    --color-blanco: #FFFFFF;
    --color-gris-texto-footer: #CCCCCC;
    --color-gris-bordes: #e0e0e0;
    --color-gris-oscuro-texto: #333333;
    --color-texto-seccion-oscura: #f0f0f0;

    --font-principal: 'Poppins', sans-serif;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

/* ==========================================================================
   Estilos Globales y Reset Básico
   ========================================================================== */
html {
    scroll-behavior: smooth;
}
body.sociocompras-planes-body { /* Cambiar si usas otra clase para el body de esta página */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--color-blanco);
    font-family: var(--font-principal);
    font-weight: var(--font-weight-medium);
    color: var(--color-negro-carbon);
    line-height: 1.7;
    font-size: 16px;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--color-amarillo-logo-accent);
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
}
a:hover {
    opacity: 0.85;
}

h1, h2, h3, h4 {
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75em; /* Espacio base inferior para títulos */
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }


.section-title {
    color: var(--color-azul-logo);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2rem;
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.section-title-light { /* Para fondos oscuros */
    color: var(--color-blanco);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2rem;
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.highlight-hero {
    color: var(--color-amarillo-logo-accent);
    font-weight: var(--font-weight-extrabold);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.highlight-dark {
    color: var(--color-azul-logo);
    font-weight: var(--font-weight-bold);
}
.highlight {
    color: var(--color-amarillo-logo-accent);
    font-weight: var(--font-weight-bold);
}
.text-center { text-align: center; }

/* Botones Genéricos 10X */
.btn-10x {
    display: inline-block;
    padding: 16px 38px;
    font-family: var(--font-principal);
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease, color 0.2s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-10x:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.btn-10x:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.btn-10x-main, .btn-primary-10x { /* Botón principal destacado */
    background-color: var(--color-amarillo-logo-accent);
    color: var(--color-azul-logo);
}
.btn-10x-main:hover, .btn-primary-10x:hover {
    background-color: #e6b800; /* Amarillo más oscuro al hover */
}
.btn-secondary-10x { /* Si usas un botón secundario destacado */
    background-color: var(--color-verde-ahorro);
    color: var(--color-blanco);
}
.btn-secondary-10x:hover {
    background-color: #22867a; /* Verde más oscuro */
}

/* ==========================================================================
   Header Específico Página de Planes (reutiliza de landing lotes)
   ========================================================================== */
.site-header-lotes {
    background-color: var(--color-azul-logo);
    color: var(--color-blanco);
    padding: 10px 0;
    border-bottom: 5px solid var(--color-amarillo-logo-accent);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-container-lotes {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-logo-img-lotes { max-height: 45px; }
.header-tagline-lotes {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: none;
}
@media (min-width: 768px) {
    .header-tagline-lotes { display: block; }
}
.tagline-text-lotes .highlight-hero{ font-size: 1.1em; }
.btn-header-lotes {
    background-color: var(--color-amarillo-logo-accent);
    color: var(--color-azul-logo);
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: var(--font-weight-extrabold);
    border-radius: 6px;
    text-transform: uppercase;
}
.btn-header-lotes:hover { opacity: 0.9; }

/* ==========================================================================
   Hero Section Página de Planes
   ========================================================================== */
/* En style-planes.css */

/* ==========================================================================
   Hero Section Página de Planes
   ========================================================================== */
.hero-planes-section {
    background-color: var(--color-azul-logo); /* Fallback color sólido */
    background-image: linear-gradient(rgba(6, 50, 127, 0.88), rgba(6, 50, 127, 0.95)), url('images/fondo-ingredientes-calidad.jpg'); /* Ajusta la opacidad del gradiente si es necesario */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--color-blanco);
    padding: 80px 20px 70px 20px;
    text-align: center;
    min-height: 50vh; /* Opcional: para darle una altura mínima */
    display: flex; /* Para centrar verticalmente el contenido si es necesario */
    flex-direction: column;
    justify-content: center;
}

.hero-planes-content { /* Contenedor interno para el texto */
    max-width: 900px; /* O el ancho que prefieras */
    margin-left: auto;
    margin-right: auto;
}

.hero-planes-pretitle {
    display: block;
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    opacity: 0.9;
    color: var(--color-amarillo-logo-accent); /* Hacer el pretitle amarillo para destacar */
}

.hero-planes-content h1 {
    font-size: 2.8rem; /* Ajustar si es muy grande para el espacio */
    font-weight: var(--font-weight-extrabold);
    margin-top: 0; /* Resetear margen superior */
    margin-bottom: 25px;
    line-height: 1.25; /* Importante para evitar superposición */
    color: var(--color-blanco); /* Asegurar que el texto base del h1 sea blanco */
}

.hero-planes-content h1 .highlight-hero {
    color: var(--color-amarillo-logo-accent); /* Los destacados en amarillo */
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.3); // Opcional para más pop */
}

.hero-planes-subtext {
    font-size: 1.25rem; /* Tamaño legible */
    line-height: 1.7; /* Buen espaciado de línea */
    /* max-width: 850px; // Ya está en .hero-planes-content */
    margin: 0 auto 30px auto; /* Espacio después del subtexto */
    opacity: 0.95;
    color: var(--color-blanco); /* Asegurar que el párrafo sea blanco */
}

.hero-planes-subtext strong.highlight-hero {
    /* La clase .highlight-hero ya debería aplicar el color amarillo y el peso */
    /* No necesita un estilo específico aquí a menos que quieras algo diferente */
}
}

/* ==========================================================================
   Sección Opciones de Compra
   ========================================================================== */
.opciones-compra-section {
    padding: 70px 20px;
}
.opciones-compra-section .section-title .highlight {
    /* color: var(--color-verde-ahorro); Podrías usar otro color para diferenciar */
}
.opciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px; /* Más espacio */
    margin-top: 40px;
}
@media (min-width: 800px) { /* Ajustar breakpoint si es necesario */
    .opciones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.opcion-card {
    background-color: var(--color-blanco);
    padding: 35px 30px; /* Más padding */
    border-radius: 10px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.12); /* Sombra más notoria */
    display: flex;
    flex-direction: column;
    text-align: center;
    border-top: 6px solid transparent; /* Espacio para borde superior temático */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.opcion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.opcion-card.opcion-suscriptor { border-top-color: var(--color-amarillo-logo-accent); }
.opcion-card.opcion-lotes { border-top-color: var(--color-verde-ahorro); }

.opcion-card .icon-opcion {
    font-size: 3.2rem; /* Iconos más grandes */
    margin-bottom: 25px;
}
.opcion-card.opcion-suscriptor .icon-opcion { color: var(--color-amarillo-logo-accent); }
.opcion-card.opcion-lotes .icon-opcion { color: var(--color-verde-ahorro); }

.opcion-card h3 {
    color: var(--color-azul-logo);
    font-size: 1.6rem; /* Títulos más grandes */
    margin-bottom: 20px;
    font-weight: var(--font-weight-extrabold);
}
.opcion-card p {
    font-size: 1rem;
    color: var(--color-gris-oscuro-texto);
    margin-bottom: 18px;
    flex-grow: 1; /* Para que el botón quede abajo si el texto varía */
}
.opcion-card ul {
    list-style: none;
    padding-left: 0;
    text-align: left;
    margin-bottom: 25px;
    font-size: 0.95rem;
    color: var(--color-gris-oscuro-texto);
}
.opcion-card ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}
.opcion-card ul li i {
    color: var(--color-azul-logo); /* Iconos de check en azul */
    margin-right: 12px;
    margin-top: 5px;
    font-size: 0.9em;
}
.btn-opcion {
    margin-top: auto;
    width: 100%;
    padding: 16px 20px !important;
    font-size: 1.1rem !important;
    font-weight: var(--font-weight-extrabold) !important;
}
.opcion-suscriptor .btn-opcion { /* Botón para suscriptores */
    background-color: var(--color-amarillo-logo-accent);
    color: var(--color-azul-logo);
}
.opcion-suscriptor .btn-opcion:hover { background-color: #e6b800; }

.btn-outline-10x-planes { /* Botón para ver lotes */
    border: 2px solid var(--color-verde-ahorro);
    color: var(--color-verde-ahorro);
    background-color: transparent;
}
.btn-outline-10x-planes:hover {
    background-color: var(--color-verde-ahorro);
    color: var(--color-blanco);
}

/* ==========================================================================
   Plans Section (Reutilizar de SocioCompras principal, con ajustes)
   ========================================================================== */
.plans-section-10x {
    padding: 80px 20px;
}
.plans-subtext-10x {
    font-size: 1.15rem;
    max-width: 800px;
    margin: 0 auto 40px auto;
    text-align: center;
    line-height: 1.7;
}
.plans-grid-10x { /* Reutilizar de CSS principal */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.plan-card-10x { /* Reutilizar y asegurar estilos */
    background-color: var(--color-blanco); padding: 30px; border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08); display: flex; flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plan-card-10x:hover { transform: translateY(-10px); box-shadow: 0 10px 35px rgba(0,0,0,0.12); }
.plan-card-featured-10x { /* Reutilizar */
    border: 3px solid var(--color-amarillo-logo-accent); transform: scale(1.05); position: relative;
}
.plan-card-featured-10x:hover { transform: scale(1.08) translateY(-10px); }
.plan-badge-10x { /* Reutilizar */
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    background-color: var(--color-amarillo-logo-accent); color: var(--color-azul-logo);
    padding: 8px 20px; border-radius: 20px; font-size: 0.9rem; font-weight: var(--font-weight-extrabold);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.plan-title-10x { /* Reutilizar */
    color: var(--color-azul-logo); font-size: 1.6rem; font-weight: var(--font-weight-extrabold); margin-bottom: 5px;
}
.plan-card-featured-10x .plan-title-10x { margin-top: 15px; }
.plan-subtitle-10x { display: block; font-size: 0.9rem; font-weight: var(--font-weight-medium); color: var(--color-gris-oscuro-texto); margin-bottom:10px;}
.plan-price-10x { color: var(--color-azul-logo); font-size: 2rem; font-weight: var(--font-weight-extrabold); margin-bottom: 5px; }
.plan-period-10x { font-size: 0.9em; font-weight: var(--font-weight-medium); color: var(--color-gris-oscuro-texto); }
.plan-ideal-for-10x { font-size: 0.95rem; margin-bottom:20px; color: var(--color-gris-oscuro-texto); }
.plan-features-10x { /* Reutilizar */
    list-style: none; padding-left: 0; margin-bottom: 25px; flex-grow:1;
}
.plan-features-10x li { margin-bottom: 10px; font-size: 1rem; display: flex; align-items: center; }
.plan-features-10x li i { color: var(--color-verde-ahorro); margin-right: 10px; }
.btn-plan-10x { /* Reutilizar */
    width: 100%; margin-top: auto; padding: 15px 20px !important; font-size: 1.1rem !important;
}
.plans-contact-cta-10x { /* Reutilizar */
    text-align: center; margin-top: 40px; font-size: 1.1rem;
}
.link-contact-10x { /* Reutilizar */
    font-weight: var(--font-weight-bold); text-decoration: underline;
}

/* ==========================================================================
   FAQs Section (Reutilizar de landing lotes)
   ========================================================================== */
.faqs-lotes-section-10x { padding: 70px 20px; }
.faq-accordion { max-width: 800px; margin: 30px auto 0 auto; }
.faq-item {
    background-color: var(--color-blanco); margin-bottom: 15px; border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08); border: 1px solid var(--color-gris-bordes);
}
.faq-question {
    background-color: transparent; border: none; width: 100%; text-align: left;
    padding: 18px 20px; font-family: var(--font-principal); font-size: 1.1rem;
    font-weight: var(--font-weight-bold); color: var(--color-azul-logo); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: background-color 0.2s ease;
}
.faq-question:hover { background-color: rgba(255, 208, 52, 0.05); } /* Amarillo más sutil */
.faq-question i { transition: transform 0.35s ease-out; color: var(--color-gris-oscuro-texto); }
.faq-question.active i { transform: rotate(180deg); }
.faq-answer {
    padding-left: 20px; padding-right: 20px; padding-top: 0; padding-bottom: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out;
    line-height: 1.7; font-size: 0.95rem; color: var(--color-gris-oscuro-texto);
}
.faq-answer p { margin-bottom: 10px; }
.faq-answer strong.highlight-dark { color: var(--color-azul-logo); font-weight: var(--font-weight-bold); }

/* ==========================================================================
   Footer (Reutilizar de landing lotes)
   ========================================================================== */
.site-footer-lotes-10x {
    background-color: var(--color-negro-carbon);
    color: var(--color-gris-texto-footer);
    padding: 30px 20px;
    text-align: center;
    font-size: 0.9rem;
}
.site-footer-lotes-10x p { margin: 6px 0; }
.site-footer-lotes-10x a { color: var(--color-amarillo-logo-accent); text-decoration: underline; }
.site-footer-lotes-10x a:hover { opacity: 0.8; }/* End custom CSS */