@import url("https://fonts.googleapis.com/css?family=Raleway:400,400italic,700&display=swap");

/* ==============================================
   1. VARIABLES GLOBALES (TEMA CLÁSICO / NARANJA)
   ============================================== */
:root {
    --container-width: 1020px;
  --container-width-large: 960px;
  --container-width-medium: 720px;

  /* Paleta Original */
  --main-foreground: #333333;
  --main-background: #ebd0b5;
  --accent-color: #8C7853 !important; 

  /* Botones */
  --button-background: #2d3e46;
  --button-foreground: #ffffff;

  /* Header Naranja */
  --header-background: #d77f5e;
  --header-foreground: #333333;
  --header-transparent-foreground: #333;

  /* Footer Verde */
  --footer-background: #4b6661;
  --footer-foreground: #ffffff;

  /* Auxiliares */
  --label-background: #c9d2c6;
  --label-foreground: #333333;
  --adbar-background: #ebd0b5;
  --adbar-foreground: #333333;
  --newsletter-background: #eff2ee;
  --newsletter-foreground: #333333;
  --services-background: #eff2ee;
  --services-foreground: #333333;

  /* Opacidades */
  --main-foreground-opacity-10: #3333331a;
  --main-foreground-opacity-20: #33333333;
  --main-foreground-opacity-30: #3333334d;
  --main-foreground-opacity-50: #33333380;
  --main-foreground-opacity-80: #333333cc;
  --main-background-opacity-20: #ebd0b533;
  --main-background-opacity-50: #ebd0b580;
  
  /* Colores Estado */
  --success: #4bb98c;
  --danger: #dd7774;
  --warning: #dc8f38;
  --info: #71b5dc;

  /* Fuentes */
  --heading-font: "Raleway", sans-serif;
  --body-font: "Raleway", sans-serif;

  /* Tamaños */
  --h1: 28px; --h2: 24px; --h3: 20px; --font-base: 16px; --font-small: 14px;
  
  /* Grid & Layout */
  --gutter: 15px;
  --border-radius: 4px;
  --border-solid: 1px solid;
}

/* ==============================================
   REGLA: H1 SIEMPRE BLANCOS Y FOOTER RALEWAY
   ============================================== */
/* H1 Blancos con sombra para legibilidad en Hero */
h1, .h1, .hero-title {
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgb(0, 0, 0); /* Sombra suave para que no se pierda */
}

/* Footer siempre Raleway (Independiente del tema) */
footer, .site-footer, .footer-heading, .footer-link {
    font-family: "Raleway", sans-serif !important;
}

/* ==============================================
   2. TEMA LUJO / LE PURE (Con Profundidad)
   ============================================== */
body.theme-luxury {
    /* Fondo Gris Niebla (Rompe el blanco plano) */
    --main-background: #F9F9F9 !important;
    
    /* Texto Gris Oscuro (Más natural que negro puro) */
    --main-foreground: #222222 !important;

    /* Header y Tarjetas: Blanco Puro (Crea contraste con el fondo gris) */
    --header-background: #FFFFFF !important;
    --header-foreground: #000000 !important;
    
    /* Acento: Gris Medio */
    --accent-color: #666666 !important;
    --button-background: #000000 !important;
    --button-foreground: #ffffff !important;
    
    /* Footer Negro Suave */
    --footer-background: #1A1A1A !important;
    --footer-foreground: #E0E0E0 !important;
}

/* Tipografía Lujo */
body.theme-luxury .head-main,
body.theme-luxury h2, 
body.theme-luxury h3,
body.theme-luxury .nav-link-custom {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Ajustes de Profundidad Lujo (Tarjetas blancas sobre fondo gris) */
body.theme-luxury .producto-card,
body.theme-luxury .credential-card,
body.theme-luxury .card {
    background-color: #FFFFFF !important;
    border: 1px solid #EAEAEA !important;
}
body.theme-luxury .head-main-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; /* Sombra sutil */
}

/* ==============================================
   3. TEMA IDENTIDAD (Botánica - Texto Claro)
   ============================================== */
body.theme-identity {
    /* Fondo Suave */
    --main-background: #F4EDEC !important;
    --main-foreground: #362C14 !important;
    
    /* Header Verde Botica */
    --header-background: #3A4535 !important;
    --header-foreground: #F4EDEC !important;
    
    /* Acento Arcilla */
    --accent-color: #8C7853 !important; 
    --button-background: #A83939 !important;
    --button-foreground: #ffffff !important;

    /* Footer Café */
    --footer-background: #362C14 !important;
    --footer-foreground: #EBD0B4 !important;
    
    --adbar-background: #EBD0B4 !important;
    --adbar-foreground: #362C14 !important;
}

/* Estilo Serif Científico */

body.theme-identity h2, 
body.theme-identity h3 {
    font-family: "Times New Roman", Times, serif !important;
    font-weight: 400 !important;
}
/* Texto menú claro */
body.theme-identity .nav-link-custom {
    color: #F4EDEC !important;
}

/* ==============================================
   4. TEMA OLIVA (TIERROSO / NATURAL)
   ============================================== */
body.theme-olive {
    /* Fondo Piedra Caliza (Grisáceo cálido) */
    --main-background: #E6E4DD !important; 
    
    /* Texto Verde Bosque Profundo */
    --main-foreground: #2A332C !important;

    /* Header: Verde Musgo Oscuro (Tierroso) */
    --header-background: #556B2F !important; 
    --header-foreground: #F0EFEA !important;

    /* Acento: Bronce Antiguo */
    --accent-color: #8C7853 !important; 
    
    /* Botones: Verde Seco */
    --button-background: #3A4535 !important;
    --button-foreground: #F0EFEA !important;

    /* Footer: Tierra Húmeda */
    --footer-background: #3E3B36 !important;
    --footer-foreground: #D9D7CE !important;
}

/* Estilo Orgánico */
body.theme-olive h2, 
body.theme-olive h3,
body.theme-olive {
    font-family: "Raleway", sans-serif !important;
    font-style: italic;
    color: #3A4535 !important; 
}

/* Texto menú Oliva */
body.theme-olive .nav-link-custom,
body.theme-olive .btn-menu-trigger, 
body.theme-olive .header-icon-svg {
    color: #F0EFEA !important;
    stroke: #F0EFEA !important;
}

/* ==============================================
   FIXES GENERALES (Secciones Home)
   ============================================== */
/* Forzar que las secciones del index tomen el color del tema */
body[class*="theme-"] .section-newsletter-home-colors,
body[class*="theme-"] .section-institutional-home,
body[class*="theme-"] .section-categories-home,
body[class*="theme-"] .philosophy-section,
body[class*="theme-"] .method-section {
    background-color: #ffffff !important;
    color: var(--main-foreground) !important;
}

body[class*="theme-"] .section-newsletter-home-colors h2,
body[class*="theme-"] .section-newsletter-home-colors p {
    color: var(--main-foreground) !important;
}

/* Excepción: Newsletter en Identidad/Oliva usa el color del header */
body.theme-identity .section-newsletter-home-colors,
body.theme-olive .section-newsletter-home-colors {
    background-color: var(--header-background) !important;
    color: var(--header-foreground) !important;
}

/* ==============================================
   FIX FINAL: BOTONES VISIBLES
   ============================================== */
/* Mantenemos el borde redondeado original */
.btn, .btn-primary, .btn-comprar, .btn-soft {
    border-radius: 4px !important;
}

/* Regla para que los botones transparentes tengan texto OSCURO en reposo */
body.theme-luxury .btn-comprar,
body.theme-identity .btn-comprar,
body.theme-olive .btn-comprar,
body.theme-luxury .btn-soft,
body.theme-identity .btn-soft,
body.theme-olive .btn-soft,
body.theme-luxury .btn-outline-secondary,
body.theme-identity .btn-outline-secondary,
body.theme-olive .btn-outline-secondary {
    color: var(--main-foreground) !important;       
    border-color: var(--main-foreground) !important; 
    background-color: transparent !important;
}

/* Regla Hover: Al pasar el mouse, fondo de color y texto BLANCO */
body.theme-luxury .btn-comprar:hover,
body.theme-identity .btn-comprar:hover,
body.theme-olive .btn-comprar:hover,
body.theme-luxury .btn-soft:hover,
body.theme-identity .btn-soft:hover,
body.theme-olive .btn-soft:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

/* El botón del Hero en Identidad/Oliva debe ser blanco de inicio por el fondo oscuro */
body.theme-identity .hero-section .btn-soft,
body.theme-olive .hero-section .btn-soft {
    color: #ffffff !important;
    border-color: #ffffff !important;
}