/* ============================================================
   1. VARIABLES MAESTRAS Y BASE
   ============================================================ */
:root {
    --cb-dark: #111827;           
    --cb-gold: #B0894C;           
    --cb-gold-alt: #B89B65;
    --cb-cream: #F9F5F0;
    --cb-cream-border: #E5D5B5;
    --cb-text-light: #f3f4f6;     
    --shadow-premium: 0 10px 30px -5px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

/* Textura de ruido sutil (Optimización Peso Cero) */
body::before {
    content: ""; 
    position: fixed; 
    inset: 0;
    /* Usamos un SVG matemático en lugar de un archivo PNG pesado */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03; /* Lo he subido un pelín a 0.03 porque el SVG es muy fino */
    pointer-events: none; 
    z-index: 9999;
}

body { 
    background-color: var(--cb-cream); 
    color: var(--cb-dark); 
    font-family: 'Montserrat', sans-serif; 
}

/* ============================================================
   2. HERO (PORTADA) - EFECTO PIRÁMIDE COMPACTO
   ============================================================ */
#hero-text-block p {
    line-height: 0.9 !important; 
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-word {
    color: var(--cb-gold) !important;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important; 
}

/* Tamaños para PC */
#word-salud { font-size: 1.2rem; letter-spacing: 12px; margin-bottom: 5px; }
#word-caracter { font-size: 2rem; letter-spacing: 6px; margin-bottom: 5px; }
#word-excelencia { font-size: 3rem; letter-spacing: 1px; }

#pyramid-line {
    background-color: var(--cb-gold) !important;
    height: 3px !important;
    width: 0px; /* Se anima por JS */
    margin: 10px auto 0 !important;
}

/* Tamaños para MÓVIL */
@media (max-width: 768px) {
    #word-salud { font-size: 0.9rem; letter-spacing: 8px; margin-bottom: 3px; }
    #word-caracter { font-size: 1.4rem; letter-spacing: 4px; margin-bottom: 3px; }
    #word-excelencia { font-size: 2.1rem; letter-spacing: 0px; }
    
    #pyramid-line {
        height: 2px !important;
        margin: 8px auto 0 !important;
    }
}

/* ============================================================
   3. CABECERAS DE PÁGINAS INTERNAS (INFO, CUIDADOS, RESEÑAS)
   ============================================================ */
.page-header { 
    padding-top: 140px; 
    padding-bottom: 2rem; 
    background-color: transparent; 
    text-align: center;
}

.cb-page-title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: var(--cb-dark);
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: 2px;
}

.cb-page-divider {
    height: 3px;
    width: 120px;
    background-color: var(--cb-gold);
    margin: 15px auto 0;
}

/* ============================================================
   4. TARJETAS PREMIUM (AFIJOS, SALUD, FILOSOFÍA Y CUIDADOS)
   ============================================================ */
.cb-card-elite {
    background: white !important;
    border: 1px solid var(--cb-cream-border) !important;
    border-radius: 20px !important;
    padding: 2.5rem 1.5rem !important;
    box-shadow: var(--shadow-premium) !important;
    transition: all 0.4s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.cb-card-elite:hover { 
    transform: translateY(-5px); 
    border-color: var(--cb-gold) !important; 
    box-shadow: 0 20px 40px rgba(176, 137, 76, 0.15) !important;
}

.cb-card-elite img { 
    height: 70px; 
    width: auto; 
    margin-bottom: 1.5rem; 
    object-fit: contain; 
}

.cb-card-elite h4 {
    color: var(--cb-dark) !important;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 700 !important;
}

.cb-card-elite p {
    color: var(--cb-dark) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.cb-card-elite div, 
.cb-badge-elite, 
.cb-badge-afijo {
    color: var(--cb-dark) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin-top: 1.2rem !important;
    opacity: 1 !important;
    text-transform: uppercase;
}

/* ============================================================
   5. GALERÍA DE ARTÍCULOS (CUIDADOS E INFO)
   ============================================================ */
.galeria-wrapper { background-color: transparent; width: 100%; }

.galeria-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; /* Centra las tarjetas cuando son pocas */
    gap: 2.5rem; 
    padding: 4rem 1.5rem 6rem; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.gato-card { 
    position: relative; display: block; overflow: hidden;
    border-radius: 20px; aspect-ratio: 4/3; text-decoration: none;
    background-color: #ffffff; 
    border: 1px solid var(--cb-cream-border);
    box-shadow: var(--shadow-premium);
    transition: all 0.4s ease;
    flex: 1 1 350px; 
    max-width: 500px; /* Límite para que no se deformen */
}

.gato-card:hover { 
    transform: translateY(-8px); 
    border-color: var(--cb-gold); 
    box-shadow: 0 20px 40px rgba(176, 137, 76, 0.15); 
}

.gato-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.gato-card:hover .gato-card__image { transform: scale(1.05); }

.gato-card__overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 4rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(17, 24, 39, 0.95) 0%, rgba(17, 24, 39, 0.4) 60%, transparent 100%);
    color: white; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end;
}

.gato-card__name { 
    font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700; 
    line-height: 1.2; margin: 0 0 0.5rem 0; color: #ffffff; text-transform: uppercase;
}
.gato-card__details { 
    font-size: 0.85rem; margin: 0; text-transform: uppercase; 
    font-weight: 700; letter-spacing: 1px; color: var(--cb-gold);
}

/* ============================================================
   6. SECCIÓN DE RESEÑAS Y FORMULARIO DE INVITACIÓN
   ============================================================ */
.reviews-container {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 2.5rem; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem;
}

.review-card {
    background: white; border: 1px solid var(--cb-cream-border); border-radius: 20px;
    box-shadow: var(--shadow-premium); overflow: hidden; transition: all 0.4s ease;
    display: flex; flex-direction: column; flex: 1 1 450px; max-width: 600px;
}
.review-card:hover {
    transform: translateY(-5px); border-color: var(--cb-gold);
    box-shadow: 0 20px 40px rgba(176, 137, 76, 0.15);
}

.stars { color: var(--cb-gold); letter-spacing: 2px; font-size: 1.1rem;}

.editorial-quote { position: relative; padding: 0 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.editorial-quote::before {
    content: "“"; position: absolute; top: -15px; left: -5px;
    font-family: 'Cormorant Garamond', serif; font-size: 4rem; line-height: 1;
    color: var(--cb-gold); opacity: 0.4;
}
.editorial-quote::after {
    content: "”"; position: absolute; bottom: -35px; right: 0;
    font-family: 'Cormorant Garamond', serif; font-size: 4rem; line-height: 1;
    color: var(--cb-gold); opacity: 0.4;
}

.request-form-section {
    background-color: #fff; border: 1px solid var(--cb-cream-border);
    border-radius: 20px; box-shadow: var(--shadow-premium); padding: 3rem;
}

.form-input {
    width: 100%; padding: 1rem 1.2rem; border: 1px solid #e2e8f0;
    border-radius: 10px; font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem; color: var(--cb-dark); background-color: #f8fafc; transition: all 0.3s ease;
}
.form-input:focus {
    outline: none; border-color: var(--cb-gold); background-color: white;
    box-shadow: 0 0 0 4px rgba(176, 137, 76, 0.1);
}

.btn-premium {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1rem 3rem; background-color: var(--cb-dark); color: white;
    font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px; border-radius: 50px;
    transition: all 0.4s ease; cursor: pointer; border: none;
}
.btn-premium:hover {
    background-color: var(--cb-gold); transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(176, 137, 76, 0.3);
}

/* ============================================================
   7. EXTRAS (FILOSOFÍA, LAZY LOAD Y OTROS AJUSTES)
   ============================================================ */
.seo-dark-bg-icon { display: none !important; } 
.seo-dark-section { background-color: var(--cb-dark) !important; border-radius: 20px; }

.cb-glass-box {
    background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important; padding: 2.5rem !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.seo-dark-list li {
    display: flex !important; align-items: flex-start !important; gap: 12px !important;
    margin-bottom: 15px !important; color: var(--cb-text-light) !important; text-align: left !important;
}
.seo-dark-list svg {
    flex-shrink: 0 !important; width: 18px !important; height: 18px !important;
    color: var(--cb-gold) !important; margin-top: 4px;
}
.seo-list-text { color: var(--cb-text-light) !important; font-weight: 400 !important; }

.preview-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 30%, transparent 45%) !important;
}

.antispam { display: none !important; opacity: 0; position: absolute; left: -9999px; }

.youtube-lazy-load {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    border-radius: 0.75rem; background-size: cover; background-position: center;
    cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.youtube-lazy-load .play-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 68px; height: 48px; background: none; border: none; padding: 0; cursor: pointer; z-index: 10;
}
.youtube-lazy-load .play-button-bg { fill: #212121; fill-opacity: 0.8; transition: fill 0.2s; }
.youtube-lazy-load:hover .play-button-bg { fill: #f00; }
/* ============================================================
   8. PÁGINA DE ERROR 404 (CENTRADO ABSOLUTO ÉLITE)
   ============================================================ */
.error-main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;      /* Centra elementos horizontalmente */
    justify-content: center;   /* Centra contenido verticalmente */
    padding: 160px 1.5rem 80px;
    text-align: center;        /* Centra el texto interno */
    width: 100%;
    max-width: 1000px;         /* Evita que el texto se estire demasiado */
    margin: 0 auto;            /* Centra el contenedor en la pantalla */
}

.error-illustration {
    width: 100%;
    max-width: 350px;          /* Un poco más pequeño para mejor equilibrio */
    margin-bottom: 1.5rem;
}

/* Forzar centrado del título y el separador en la 404 */
.error-main-container .cb-page-title {
    text-align: center !important;
    width: 100%;
}

.error-main-container .cb-page-divider {
    margin: 15px auto 2rem !important; /* Centrado forzado */
}

/* Caja del contador */
.error-countdown-box {
    margin: 1rem 0 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cb-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Descripción inferior */
.error-text-detail {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4b5563;
    max-width: 600px;
    margin: 2.5rem auto 0;
    font-weight: 500;
}
/* ============================================================
   9. PÁGINAS LEGALES (PRIVACIDAD, COOKIES, AVISO LEGAL)
   ============================================================ */
.page-legal-container {
    max-width: 900px;
    margin: -1rem auto 4rem; 
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

.info-pill-elite {
    display: table;
    margin: 0 auto 3rem;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    background: white;
    border: 1px solid var(--cb-cream-border);
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    color: var(--cb-gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: var(--shadow-premium);
}

.page-legal-intro {
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 3.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}

.cb-card-legal {
    background: white;
    border: 1px solid var(--cb-cream-border);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-premium);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cb-card-legal:hover {
    transform: translateY(-5px);
    border-color: var(--cb-gold);
    box-shadow: 0 20px 40px rgba(176, 137, 76, 0.15);
}

.cb-card-legal-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--cb-cream);
    padding-bottom: 1.2rem;
}

.cb-card-legal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background: var(--cb-cream);
    border-radius: 50%;
    color: var(--cb-gold);
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.cb-card-legal h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    color: var(--cb-dark);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cb-card-legal h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cb-dark);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--cb-cream-border);
}

.cb-card-legal p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 1.2rem;
    margin-top: 0;
}

/* Viñetas personalizadas doradas */
.cb-card-legal ul.clean {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.cb-card-legal ul.clean li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4a5568;
}

.cb-card-legal ul.clean li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--cb-gold);
    border-radius: 50%;
}

.cb-card-legal ul.clean li strong {
    color: var(--cb-dark);
    font-weight: 700;
}

.cb-card-legal a {
    color: var(--cb-gold);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.cb-card-legal a:hover {
    color: var(--cb-dark);
    border-bottom-color: var(--cb-dark);
}

/* Diseño especial para la tarjeta de Responsable (Estilo Dark Luxury) */
.cb-card-legal-highlight {
    background: linear-gradient(145deg, #1f2937, #111827);
    border: 1px solid #374151;
    color: white;
}

.cb-card-legal-highlight h2,
.cb-card-legal-highlight p,
.cb-card-legal-highlight ul.clean li strong {
    color: white;
}

.cb-card-legal-highlight .cb-card-legal-icon {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.cb-card-legal-highlight .cb-card-legal-header { 
    border-bottom-color: rgba(255,255,255,0.1); 
}

/* Ajustes móvil */
@media (max-width: 768px) {
    .cb-card-legal { padding: 1.8rem 1.5rem; }
    .cb-card-legal-header { flex-direction: column; text-align: center; gap: 0.8rem; }
    .cb-card-legal h2 { font-size: 1.5rem; }
}
/* ============================================================
   10. CUADRÍCULA DE COOKIES (PÁGINA POLÍTICA DE COOKIES)
   ============================================================ */
.cb-cookie-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .cb-cookie-grid { grid-template-columns: repeat(2, 1fr); }
}

.cb-cookie-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #FAFAFA;
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid var(--cb-cream-border);
    transition: all 0.3s ease;
}

.cb-cookie-item:hover {
    border-color: var(--cb-gold);
    background: white;
    box-shadow: 0 10px 20px rgba(176, 137, 76, 0.1);
}

.cb-cookie-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: var(--cb-cream);
    color: var(--cb-gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.cb-cookie-content h3 {
    margin: 0 0 0.5rem 0 !important;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem !important;
    color: var(--cb-dark) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    padding: 0 !important;
}

.cb-cookie-content p {
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #4a5568 !important;
}

/* Integración fluida de la tabla generada automáticamente por Cookiebot */
#CookieDeclaration {
    margin-top: 1.5rem;
    font-family: 'Montserrat', sans-serif !important;
    color: #4a5568;
}
#CookieDeclaration a {
    color: var(--cb-gold) !important;
}
/* Ajuste extra para botones sueltos en textos legales */
.cb-legal-actions {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--cb-cream-border);
}

/* Mejora para la declaración de Cookiebot */
#CookieDeclaration {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    background: #FAFAFA;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px dashed var(--cb-cream-border);
    margin-top: 2rem;
}
#CookieDeclaration a { color: var(--cb-gold) !important; font-weight: 700; text-decoration: underline; }
/* ============================================================
   11. FOOTER (PIE DE PÁGINA)
   ============================================================ */
#site-footer {
    background-color: #0f1214; 
    color: #e5e7eb !important;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    border-top: 3px solid var(--cb-gold); 
    padding: 35px 20px 40px; 
    margin-top: auto;
    position: relative;
    z-index: 50;
}

.cb-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px; 
}

@media (min-width: 768px) {
    .cb-footer-container {
        grid-template-columns: 1.6fr 0.8fr 1fr; 
    }
}

.cb-brand-wrapper {
    display: flex;
    flex-direction: row;
    align-items: baseline; 
    flex-wrap: wrap; 
    gap: 6px; 
    margin-bottom: 10px;
}

.cb-brand-large, .cb-copyright-inline {
    font-size: 1.5rem; 
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.2;
    font-weight: 600;
}

.cb-brand-large {
    text-decoration: none;
}

.cb-tagline {
    color: #9ca3af; 
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 380px;
    margin-top: 8px;
}

.cb-footer-title {
    font-family: 'Cormorant Garamond', serif; 
    color: var(--cb-gold);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cb-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cb-footer-list li {
    margin-bottom: 8px; 
}

.cb-footer-link {
    color: #e5e7eb !important; 
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cb-footer-link:hover {
    color: var(--cb-gold) !important;
    transform: translateX(5px);
}

.cb-social-icons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.cb-social-link {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.15);
    text-decoration: none;
}

.cb-social-link:hover {
    background: var(--cb-gold);
    border-color: var(--cb-gold);
    transform: translateY(-3px);
}

.cb-social-link svg { 
    width: 18px; 
    height: 18px; 
    stroke-width: 2; 
}

.cb-seo-info {
    margin-top: 15px; 
    margin-bottom: 15px; 
    padding-top: 0; 
    border-top: none; 
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.6;
}

.cb-seo-info strong {
    color: #e5e7eb;
}
/* ============================================================
   12. PÁGINA DE CONTACTO (ESTILO ÉLITE UNIFICADO)
   ============================================================ */
.page-contact-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 160px 20px 80px;
}

.cb-contact-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--cb-gold);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.cb-contact-subtitle {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    color: var(--cb-gray);
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 500;
}

.cb-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 900px) {
    .cb-contact-grid { grid-template-columns: 1.2fr 0.8fr; gap: 60px; }
}

/* Tarjeta del Formulario */
.cb-card-form {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid var(--cb-cream-border, #E5D5B5);
}

.cb-form-group { margin-bottom: 25px; }
.cb-form-group label { 
    display: block; 
    margin-bottom: 10px; 
    font-weight: 700; 
    font-size: 0.85rem; 
    text-transform: uppercase;
    color: var(--cb-dark);
}

.cb-form-control {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    background: #fdfcf9;
    transition: all 0.3s ease;
}

.cb-form-control:focus {
    outline: none;
    border-color: var(--cb-gold);
    box-shadow: 0 0 0 4px rgba(176, 137, 76, 0.1);
}

/* BOTÓN DE ENVÍO PREMUM */
.cb-btn-submit {
    width: 100%;
    background: var(--cb-gold);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(176, 137, 76, 0.3);
}

.cb-btn-submit:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(176, 137, 76, 0.45);
    filter: brightness(1.1);
}

/* INFO BOX Y ELIMINACIÓN DE AZULES */
.cb-info-box h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 20px; }

.cb-contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    background: white;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #f1f1f1;
    text-decoration: none !important; /* Quita subrayado */
    transition: all 0.3s ease;
}

/* Forzamos que el texto no sea azul */
.cb-contact-item p, .cb-contact-item span, .cb-contact-item h4 {
    color: var(--cb-dark) !important;
    text-decoration: none !important;
}

.cb-contact-item:hover { 
    transform: translateX(10px); 
    border-color: var(--cb-gold);
}

.cb-contact-item:hover p {
    color: var(--cb-gold) !important;
}

.cb-icon-circle {
    width: 45px; height: 45px;
    background: var(--cb-gold);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* REDES SOCIALES (Efecto igual al footer) */
.cb-social-row {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    justify-content: center;
}

.cb-social-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cb-dark) !important;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.cb-social-btn:hover {
    background: var(--cb-gold);
    border-color: var(--cb-gold);
    color: white !important;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(176, 137, 76, 0.3);
}

.cb-social-btn svg { width: 22px; height: 22px; stroke-width: 2; }




/* ============================================================
   13--- Estilos del Modal de Login (Efecto Cristal) 
   ============================================================ */




/* 1. Fondo oscuro y borroso del modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Asegura que esté por encima de todo */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 2. Contenedor del formulario con efecto 3D */
.modal-content {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    max-width: 400px;
    width: 90%;
    /* Sombra multicapa para efecto de profundidad */
    box-shadow: 
        0px 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0px 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0px 12.5px 10px rgba(0, 0, 0, 0.06),
        0px 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0px 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0px 100px 80px rgba(0, 0, 0, 0.12);
    transform: translateY(-20px) perspective(1000px); /* Añadimos perspectiva para la animación */
    transition: transform 0.4s ease, opacity 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    opacity: 0;
}

.modal-backdrop.is-visible .modal-content {
    transform: translateY(0) perspective(1000px) rotateX(0); /* Estado final de la animación */
    opacity: 1;
}

/* Efecto sutil al pasar el ratón */
.modal-content:hover {
    transform: translateY(-5px) perspective(1000px) rotateX(2deg);
}

/* 3. Botón para cerrar el modal */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #888;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: #333;
}

/* 4. Estilos específicos del formulario */
/* 4. Estilos específicos del formulario (AHORA PARA TODOS LOS MODALES) */
#modalFormContainer h2, #modalFormContainerAccion h2, #modalFormContainerRegistro h2 {
    text-align: center;
    color: #b08828;
    margin-bottom: 20px;
}
#modalFormContainer label, #modalFormContainerAccion label, #modalFormContainerRegistro label {
    font-size: 1em;
    color: #333;
    margin-top: 10px;
    margin-bottom: 5px;
    display: block;
}
#modalFormContainer input[type="email"], #modalFormContainerAccion input[type="email"], #modalFormContainerRegistro input[type="email"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(176, 136, 40, 0.3);
    border-radius: 8px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}

/* 5. Contenedor para la contraseña y el icono del ojo */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Ajusta el padding del input para que el texto no choque con el icono */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    width: 100%;
    /* El cambio clave está aquí: padding-right ajustado para el icono */
    padding: 12px 50px 12px 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(176, 136, 40, 0.3);
    border-radius: 8px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}

//* === 6. Estilo para el icono de visibilidad (Ojo 👁️ con animación) === */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 44px; /* espacio para el botón */
}

/* Contenedor del ojo */
.toggle-password-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: color 0.2s ease;
  z-index: 3; /* asegura que esté por encima del autocompletado del navegador */
}

.toggle-password-icon:hover {
  color: #333;
}

.toggle-password-icon:focus-visible {
  outline: 2px solid #6da3ff;
  outline-offset: 2px;
}

/* Iconos internos */
.toggle-password-icon svg {
  position: absolute;
  stroke: currentColor;
  width: 20px;
  height: 20px;
  transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.2s ease-out;
}

/* --- ESTADO INICIAL (contraseña oculta) --- */
.toggle-password-icon .icon-eye-open {
  transform: scaleY(0);
  opacity: 0;
}
.toggle-password-icon .icon-eye-closed {
  transform: scaleY(1);
  opacity: 1;
}

/* --- ESTADO VISIBLE (al hacer clic) --- */
.toggle-password-icon.password-visible .icon-eye-open {
  transform: scaleY(1);
  opacity: 1;
}
.toggle-password-icon.password-visible .icon-eye-closed {
  transform: scaleY(0);
  opacity: 0;
}

/* 7. Opciones adicionales ("Recordarme") */
.input-options {
    margin-top: 5px;
    margin-bottom: 15px;
}
.remember-me-label {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #555;
    cursor: pointer;
}
.remember-me-label input[type="checkbox"] {
    margin-right: 5px;
    accent-color: #b08828;
}

/* 8. Botón de "Entrar" centrado y estilizado */
.btn-login {
    display: block;
    width: 80%;
    max-width: 250px;
    margin: 20px auto 15px auto;
    padding: 12px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 50px;
    border: none;
    background-color: #b08828;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-login:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(176, 136, 40, 0.4);
}

/* 9. Enlaces de acción (Registrarse, Recuperar contraseña) */
.login-actions {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}
.login-actions span {
    display: block;
    margin-bottom: 8px;
}
.login-actions a {
    color: #b08828;
    text-decoration: none;
    font-weight: bold;
}
.login-actions a:hover {
    text-decoration: underline;
}

/* 10. Contenedor para mensajes de error/éxito */
.modal-message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid transparent;
    color: #c0392b; /* Rojo para errores */
    background-color: #f5b7b12e;
    border-color: #c0392b4d;
}

/* 11. Animación de bienvenida */
@keyframes fadeInScaleUp {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.welcome-animation {
    text-align: center;
    animation: fadeInScaleUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.welcome-animation h2 {
    color: #b08828;
    font-size: 2.5em;
    margin: 0;
}

.welcome-animation p {
    font-size: 1.2em;
    color: #333;
}
/* ================================================================= */
/* ===== FIN: ESTILOS COMPLETOS PARA LOGIN Y MENÚ DE USUARIO ====== */
/* ================================================================= */
/* --- ESTILOS PARA EL MODAL DE REGISTRO --- */
.modal-content-registro {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    position: relative;
    width: 95%;
    max-width: 850px; /* Más ancho que el de login */
    max-height: 90vh; /* Altura máxima para que no ocupe toda la pantalla */
    overflow-y: auto; /* Permite scroll si el contenido es muy largo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* Animación de entrada (igual que el login) */
    transform: translateY(-20px) perspective(1000px);
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

/* El contenedor del formulario dentro del modal no necesita el fondo blanco ni la sombra */
.modal-content-registro .container {
    background: transparent;
    box-shadow: none;
    padding: 1rem; /* Un poco menos de padding para ajustarse mejor */
}

/* Estado visible */
.modal-backdrop.is-visible .modal-content-registro {
    transform: translateY(0) perspective(1000px) rotateX(0);
    opacity: 1;
}

/* Aviso flotante reutilizable (estilo login) */
#cb-toast{position:fixed;top:1.25rem;right:1.25rem;z-index:5002;min-width:280px;max-width:92vw;
  padding:.9rem 1rem;border-radius:14px;font:500 15px system-ui,-apple-system,Segoe UI,Roboto;
  color:#0c1414;background:#fefefe;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 38px rgba(0,0,0,.16);
  opacity:0;transform:translateY(-10px);transition:opacity .28s,transform .28s;display:none}
#cb-toast.visible{opacity:1;transform:translateY(0)}
#cb-toast.ok{border-color:rgba(16,145,60,.25);box-shadow:0 10px 32px rgba(16,145,60,.18)}
#cb-toast.warn{border-color:rgba(221,140,0,.25);box-shadow:0 10px 32px rgba(221,140,0,.18)}

/* ============================================================
   SISTEMA DE COOKIES (Optimizado y Accesible)
   ============================================================ */
#cb-cookie-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    padding: 20px; transition: opacity 0.4s ease;
}
#cb-cookie-modal {
    background: var(--cb-cream, #F9F5F0);
    border: 1px solid var(--cb-gold, #B0894C);
    border-radius: 20px; padding: 2.5rem 2rem;
    max-width: 500px; width: 100%; text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(20px); transition: transform 0.4s ease;
}
#cb-cookie-overlay.visible #cb-cookie-modal { transform: translateY(0); }
.cb-cookie-icon { width: 60px; height: 60px; border-radius: 50%; background: white; color: var(--cb-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.cb-cookie-title { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: #111827; text-transform: uppercase; margin: 0 0 1rem; }
.cb-cookie-text { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; line-height: 1.6; color: #4b5563; margin: 0 0 2rem; }
.cb-cookie-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }
@media(min-width: 480px){ .cb-cookie-actions { flex-direction: row; } }
.cb-cookie-actions button { font-family: 'Montserrat', sans-serif; font-weight: 700; padding: 0.8rem 1.5rem; border-radius: 50px; cursor: pointer; transition: all 0.3s; flex: 1; text-transform: uppercase; }

/* Correcciones de Accesibilidad (Contraste) */
.cb-btn-gold { background: var(--cb-gold); color: #111827; border: none; }
.cb-btn-outline { background: transparent; color: #111827; border: 1px solid #111827; }
.cb-cookie-link { font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: #111827; text-decoration: underline; font-weight: 600; transition: color 0.2s;}
.cb-cookie-link:hover { color: var(--cb-gold); }

/* ============================================================
   TARJETAS DE PADRES (CAMADAS) - ESTILO PREMIUM
   ============================================================ */

/* Contenedor principal de la tarjeta */
.cb-parent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

/* El recuadro de la foto (Aspecto 4:5, esquinas súper redondeadas) */
.cb-parent-img-container {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    background-color: #f5f5f5;
    cursor: pointer;
}

/* Pista del carrusel nativo (Oculta la barra de scroll) */
.cb-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
}
.cb-slider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Cada foto dentro del carrusel */
.cb-slider-item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    position: relative;
}

/* La imagen en sí con efecto zoom al pasar el ratón */
.cb-parent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
@media (min-width: 768px) {
    .cb-parent-img-container:hover .cb-parent-img {
        transform: scale(1.05);
    }
}

/* Overlay de la Lupa (Solo visible en PC al pasar el ratón) */
.cb-parent-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
@media (min-width: 768px) {
    .cb-parent-overlay { display: flex; }
    .cb-parent-img-container:hover .cb-parent-overlay { opacity: 1; }
}

/* El círculo blanco de la lupa */
.cb-parent-lupa {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 50%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(1rem);
    transition: all 0.3s ease;
}
.cb-parent-img-container:hover .cb-parent-lupa {
    transform: translateY(0);
}

/* Flechas del Slider */
.cb-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0; /* Ocultas por defecto */
}
@media (min-width: 768px) {
    .cb-parent-img-container:hover .cb-slider-arrow { opacity: 1; }
}
.cb-slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.cb-slider-arrow.left { left: 0.75rem; }
.cb-slider-arrow.right { right: 0.75rem; }

/* Textos inferiores */
.cb-parent-info {
    margin-top: 1.5rem;
    text-align: center;
    padding: 0 0.5rem;
    width: 100%;
}
.cb-parent-label {
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    display: block;
}
.cb-parent-title {
    font-size: 1.875rem;
    font-weight: 800;
    color: #111827;
    font-family: 'Playfair Display', serif;
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .cb-parent-title { font-size: 2.25rem; } }

.cb-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.125rem;
    transition: all 0.3s ease;
}

/* === COLORES ESPECÍFICOS (PADRE AZUL / MADRE ROSA) === */
/* Padre */
.cb-father .cb-parent-label, 
.cb-father .cb-parent-link { color: #2563eb; }
.cb-father .cb-parent-link:hover { color: #1e40af; border-color: #2563eb; }
.cb-father .cb-parent-overlay { background: rgba(30, 58, 138, 0.1); }
.cb-father .cb-parent-lupa, .cb-father .cb-slider-arrow { color: #2563eb; }

/* Madre */
.cb-mother .cb-parent-label, 
.cb-mother .cb-parent-link { color: #db2777; }
.cb-mother .cb-parent-link:hover { color: #9d174d; border-color: #db2777; }
.cb-mother .cb-parent-overlay { background: rgba(131, 24, 67, 0.1); }
.cb-mother .cb-parent-lupa, .cb-mother .cb-slider-arrow { color: #db2777; }
/* ============================================================
   TARJETAS DE PADRES (CAMADAS) - DISEÑO PREMIUM
   ============================================================ */
.cb-parents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    justify-items: center;
    align-items: start;
}
@media (min-width: 768px) {
    .cb-parents-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem;
    }
}

.cb-parent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px; /* Ancho máximo idéntico para los dos */
}

/* El recuadro de la foto (Aspecto 4:5, esquinas premium) */
.cb-parent-img-box {
    width: 100%;
    aspect-ratio: 4 / 5; 
    border-radius: 2rem; 
    overflow: hidden;
    position: relative;
    background-color: #f3f4f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

/* Pista del carrusel nativo */
.cb-parent-slider {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Ocultar scrollbar Firefox */
    -ms-overflow-style: none; /* Ocultar scrollbar IE/Edge */
}
.cb-parent-slider::-webkit-scrollbar {
    display: none; /* Ocultar scrollbar Chrome/Safari */
}

.cb-parent-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
    position: relative;
}

.cb-parent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

@media (min-width: 768px) {
    .cb-parent-img-box:hover .cb-parent-img {
        transform: scale(1.05); /* Efecto Zoom en PC */
    }
}

/* Efecto Lupa Hover */
.cb-parent-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none; /* Oculto en móvil por defecto, se activa en PC */
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.cb-parent-lupa {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 50%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    transform: translateY(1rem);
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .cb-parent-overlay { display: flex; }
    .cb-parent-img-box:hover .cb-parent-overlay { opacity: 1; }
    .cb-parent-img-box:hover .cb-parent-lupa { transform: translateY(0); }
}

/* Colores específicos del Overlay Padre / Madre */
.cb-father .cb-parent-overlay { background-color: rgba(37, 99, 235, 0.15); }
.cb-mother .cb-parent-overlay { background-color: rgba(219, 39, 119, 0.15); }
.cb-father .cb-parent-lupa svg { color: #2563eb; width: 1.75rem; height: 1.75rem; }
.cb-mother .cb-parent-lupa svg { color: #db2777; width: 1.75rem; height: 1.75rem; }

/* Flechas y etiqueta de Galería */
.cb-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
    opacity: 0;
    transition: all 0.3s ease;
}
@media (min-width: 768px) {
    .cb-parent-img-box:hover .cb-slider-arrow { opacity: 1; }
}
.cb-slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.cb-slider-arrow.left { left: 0.75rem; }
.cb-slider-arrow.right { right: 0.75rem; }
.cb-father .cb-slider-arrow { color: #2563eb; }
.cb-mother .cb-slider-arrow { color: #db2777; }

.cb-slider-badge {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 10;
}

/* Textos Padre/Madre */
.cb-parent-info {
    margin-top: 1.5rem;
    text-align: center;
    width: 100%;
    padding: 0 0.5rem;
}
.cb-parent-label {
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    display: block;
}
.cb-father .cb-parent-label { color: #2563eb; }
.cb-mother .cb-parent-label { color: #db2777; }

.cb-parent-name {
    font-size: 2.25rem;
    font-weight: 800;
    color: #111827;
    font-family: 'Playfair Display', serif;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.cb-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.125rem;
    transition: all 0.3s ease;
}
.cb-father .cb-parent-link { color: #2563eb; }
.cb-father .cb-parent-link:hover { border-color: #2563eb; color: #1e40af; }
.cb-mother .cb-parent-link { color: #db2777; }
.cb-mother .cb-parent-link:hover { border-color: #db2777; color: #be185d; }

.cb-padres-header { text-align: center; margin-bottom: 3rem; }
.cb-padres-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; color: #111827; }
.cb-padres-desc { font-size: 1.125rem; color: #4b5563; max-width: 800px; margin: 0 auto; line-height: 1.7; }
/* ============================================================
   SECCIÓN GALERÍA (CAMADAS) - DISEÑO PREMIUM CUSTOM
   ============================================================ */
.cb-gallery-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.cb-gallery-title {
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    font-family: 'Playfair Display', serif;
}
@media (min-width: 768px) {
    .cb-gallery-title { font-size: 3rem; }
}

/* Estilo si la galería solo tiene 1 foto */
.cb-gallery-single-wrap {
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
}
.cb-gallery-single-img {
    max-height: 80vh;
    width: auto;
    object-fit: contain;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 0.3s ease;
}
.cb-gallery-single-img:hover {
    transform: scale(1.02);
}

/* Estilo para las fotos dentro del Carrusel 3D */
.cb-gallery-carousel-wrap {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}
.cb-gallery-carousel-img {
    border-radius: 1.5rem;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    cursor: pointer;
  /* ============================================================
   SECCIÓN DATOS TÉCNICOS (BENTO BOX PREMIUM)
   ============================================================ */
.cb-datos-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 860px) {
    .cb-datos-wrapper.has-image {
        grid-template-columns: 1.2fr 1fr;
        max-width: 1200px;
        gap: 4rem;
    }
}

.cb-datos-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cb-datos-header { margin-bottom: 0.5rem; }
.cb-datos-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    font-family: 'Playfair Display', serif;
    margin: 0;
    line-height: 1.2;
}

/* Grid de Tarjetas Flotantes */
.cb-bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.cb-bento-card {
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 1.5rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    height: 100%;
    box-sizing: border-box;
}
.cb-bento-card:hover {
    box-shadow: 0 10px 20px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    transform: translateY(-3px);
}

/* Los círculos de los iconos */
.cb-bento-icon {
    width: 48px;
    height: 48px;
    min-width: 48px; /* Evita que se encoja */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Vital para que no se deforme */
}

.cb-bento-info { display: flex; flex-direction: column; }
.cb-bento-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}
.cb-bento-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
}
.cb-bento-value a { text-decoration: none; transition: opacity 0.3s; }
.cb-bento-value a:hover { opacity: 0.7; }

/* Colores Temáticos por Tarjeta */
.cb-bento-card.bento-nacimiento .cb-bento-icon { background: rgba(212, 175, 55, 0.15); color: #d4af37; }
.cb-bento-card.bento-dias .cb-bento-icon { background: rgba(46, 204, 113, 0.15); color: #27ae60; }
.cb-bento-card.bento-padre .cb-bento-icon { background: rgba(37, 99, 235, 0.15); color: #2563eb; }
.cb-bento-card.bento-madre .cb-bento-icon { background: rgba(219, 39, 119, 0.15); color: #db2777; }
.cb-bento-card.bento-gatitos .cb-bento-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.cb-bento-card.bento-padre .cb-bento-value a { color: #2563eb; }
.cb-bento-card.bento-madre .cb-bento-value a { color: #db2777; }

/* Texto descriptivo debajo de las tarjetas */
.cb-datos-text {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.8;
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    margin-top: 1rem;
}

/* Imagen de la sección */
.cb-datos-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.cb-datos-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
    cursor: pointer;
}
.cb-datos-img-wrap:hover img { transform: scale(1.05); }
 /* ============================================================
   SECCIÓN CONDICIONES (2 ACORDEONES: PRECIOS Y CONTRATOS)
   ============================================================ */
.cb-condiciones-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.cb-condiciones-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--cb-dark);
    text-align: center;
    margin-bottom: 3rem;
}
@media (min-width: 768px) { 
    .cb-condiciones-title { font-size: 3rem; } 
}

.cb-condiciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 768px) {
    .cb-condiciones-grid { grid-template-columns: 1fr 1fr; }
}

.cb-mini-accordion {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: var(--shadow-premium);
    border: 1px solid var(--cb-cream-border);
    overflow: hidden;
    transition: all 0.4s ease;
}
.cb-mini-accordion:hover {
    border-color: var(--cb-gold);
    box-shadow: 0 20px 40px rgba(176, 137, 76, 0.15);
}

.cb-mini-accordion summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: var(--cb-cream);
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}
.cb-mini-accordion[open] summary {
    border-bottom-color: var(--cb-cream-border);
}
.cb-mini-accordion summary::-webkit-details-marker { display: none; }

.cb-mini-accordion-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cb-mini-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: rgba(176, 137, 76, 0.1);
    color: var(--cb-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =========================================================
   ¡EL SEGURO ANTI-GIGANTES DIRECTO AL SVG!
   ========================================================= */
.cb-svg-fixed {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.cb-mini-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cb-dark);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cb-mini-arrow {
    color: var(--cb-gold);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-mini-accordion[open] .cb-mini-arrow { transform: rotate(180deg); }

.cb-mini-content {
    padding: 1.5rem;
    background: #ffffff;
}

/* Cajas interiores */
.cb-price-box {
    background: #FAFAFA;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border: 1px solid var(--cb-cream-border);
}
.cb-price-box:last-child { margin-bottom: 0; }

.cb-price-label { font-weight: 700; color: #4b5563; font-size: 0.95rem; }
.cb-price-value { font-weight: 800; font-size: 1.1rem; }
.cb-price-value.compania { color: #27ae60; background: rgba(39,174,96,0.1); padding: 0.35rem 0.85rem; border-radius: 8px; }
.cb-price-value.cria { color: #2563eb; background: rgba(37,99,235,0.1); padding: 0.35rem 0.85rem; border-radius: 8px; }

.cb-pdf-list-wrapper { display: flex; flex-direction: column; gap: 0.75rem; }
.cb-pdf-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--cb-cream-border);
    color: var(--cb-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}
.cb-pdf-item:hover {
    border-color: var(--cb-gold);
    background: var(--cb-cream);
    transform: translateX(6px);
}

/* Iconos dentro de PDF (Evitar gigantes) */
.cb-svg-pdf-red { width: 24px !important; height: 24px !important; min-width: 24px !important; flex-shrink: 0 !important; color: #ef4444; }
.cb-svg-pdf-gold { width: 20px !important; height: 20px !important; min-width: 20px !important; flex-shrink: 0 !important; color: var(--cb-gold); }

.cb-pdf-name { flex-grow: 1; font-weight: 600; font-size: 0.95rem; }

.cb-empty-box {
    font-size: 0.95rem;
    color: #6b7280;
    font-style: italic;
    background: #FAFAFA;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px dashed var(--cb-cream-border);
    text-align: center;
    margin: 0;
}