/*
Theme Name:   EMMA Child
Theme URI:    https://emmaenergy.com
Description:  Child theme de Astra para el rediseño web de EMMA Energy. Tokens de marca, fuentes (Inter + Rubik) y estilos base orientados a conversión. No migrar de plataforma; proteger SEO.
Author:       EMMA Energy
Author URI:   https://emmaenergy.com
Template:     astra
Version:      7.46.0
Text Domain:  emma-child
*/

/* =========================================================
   TOKENS DE MARCA EMMA  (fuente: PLAN §6 / INSIGHTS)
   El naranja #FD830D es EXCLUSIVO para CTAs.
   ========================================================= */
:root {
  /* Morado de marca (oficial EMMA — NO usar índigo) */
  --emma-morado:       #4D4A9E;  /* principal: titulares, bandas, línea "predicho" */
  --emma-morado-deep:  #3A3877;  /* shade del morado SOLO para profundidad en gradientes */
  --emma-indigo:       #4D4A9E;  /* alias legado = morado #4D4A9E */
  --emma-indigo-deep:  #3A3877;  /* alias legado = morado profundo */
  --emma-violet:       #AC92EC;  /* morado claro: dato "real" */

  /* Datos / estados */
  --emma-green:        #8DC049;  /* positivo / ahorro (nunca decorativo) */

  /* CTA — SOLO botones de acción */
  --emma-cta:          #FD830D;
  --emma-cta-hover:    #e57407;

  /* Neutros / superficies */
  --emma-slate:        #516377;  /* texto cuerpo */
  --emma-surface:      #F6F6FB;  /* superficie clara */
  --emma-white:        #FFFFFF;

  /* Tipografía */
  --emma-font-head:    'Inter', system-ui, -apple-system, sans-serif;   /* titulares + cuerpo */
  --emma-font-data:    'Rubik', 'Inter', sans-serif;                    /* números héroe / sexy data */
}

/* =========================================================
   BASE
   ========================================================= */
body {
  font-family: var(--emma-font-head);
  color: var(--emma-slate);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p, li { font-weight: 400; }

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--emma-font-head);
  color: var(--emma-indigo);
  font-weight: 700;
}

/* Números héroe / cifras de ahorro */
.emma-data,
.emma-metric-number {
  font-family: var(--emma-font-data);
  font-weight: 600;
  color: var(--emma-indigo);
  line-height: 1;
}
.emma-data--green { color: var(--emma-green); }

/* FIX v1.9.1: cifras sobre banda morada.
   Sin esto, .emma-data (morado) se pinta sobre el fondo morado y
   las cifras blancas (24/7, ∞) quedan invisibles. */
.has-emma-morado-background-color .emma-data,
.emma-band-indigo .emma-data { color: var(--emma-white); }
.has-emma-morado-background-color .emma-data--green,
.emma-band-indigo .emma-data--green { color: var(--emma-green); }

/* =========================================================
   CTAs  (naranja exclusivo)
   ========================================================= */
.emma-cta,
.wp-block-button.is-style-emma-cta .wp-block-button__link,
.ast-button.emma-cta {
  background-color: var(--emma-cta);
  color: var(--emma-white);
  border: none;
  border-radius: 8px;
  font-family: var(--emma-font-head);
  font-weight: 600;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-block;
  transition: background-color .15s ease;
}
.emma-cta:hover,
.wp-block-button.is-style-emma-cta .wp-block-button__link:hover,
.ast-button.emma-cta:hover {
  background-color: var(--emma-cta-hover);
  color: var(--emma-white);
}

/* CTA secundario (contorno morado) — para no abusar del naranja */
.emma-cta--ghost {
  background: transparent;
  color: var(--emma-indigo);
  border: 2px solid var(--emma-indigo);
}
.emma-cta--ghost:hover {
  background: var(--emma-indigo);
  color: var(--emma-white);
}

/* =========================================================
   BANDAS / SECCIONES PREMIUM
   ========================================================= */
.emma-band-indigo {
  background: var(--emma-morado);
  color: var(--emma-white);
}
.emma-band-indigo h1,
.emma-band-indigo h2,
.emma-band-indigo h3 { color: var(--emma-white); }

.emma-surface { background: var(--emma-surface); }

/* =========================================================
   ACCESIBILIDAD / MOVIMIENTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
:focus-visible {
  outline: 3px solid var(--emma-violet);
  outline-offset: 2px;
}

/* =========================================================
   v7.5 — HEADER TRANSPARENTE (Astra) SOBRE EL HERO
   El sitio usa "Header transparente" de Astra: el header va en
   position:absolute (~80px de alto) MONTADO sobre la primera
   seccion. El hero necesita padding-top suficiente para que su
   contenido (badge / eyebrow / H1) no quede debajo del menu.
   Home ya lo tenia por CSS adicional (104px); aqui se hace en el
   theme para TODAS las plantillas y con especificidad que gana a
   reglas sueltas (incl. CSS adicional viejo). Solo aplica cuando el
   header transparente esta activo. Fallback opaco = padding del hero.
   ========================================================= */
body.ast-theme-transparent-header .wp-block-group.alignfull[class*="emma-"] > *:first-child{
  padding-top:104px;
}

/* =========================================================
   v7.30 — HEADER CON FONDO (se apaga el header transparente)
   Decision 31-jul-2026: el header transparente dejaba el menu
   ilegible sobre el hero morado de Nosotros (y sobre cualquier
   seccion morada al hacer sticky). Se apaga "Header transparente"
   en el Customizer de Astra; la regla de arriba (104px) queda
   inactiva sola, porque depende de la clase del body.
   Aqui solo se asegura el borde inferior fino que separa el
   header del hero claro.
   ========================================================= */
body:not(.ast-theme-transparent-header) .site-header{
  border-bottom:1px solid rgba(77,74,158,.12);
}

/* =========================================================
   v7.36 — HEADER TRANSPARENTE ARRIBA, SOLIDO AL BAJAR
   Decision 17-ago-2026 (revierte parte de v7.30/v7.35): el header
   vuelve a ser transparente sobre el hero, porque la franja blanca
   con linea cortaba la pagina. Los heroes del sitio son claros
   (#F6F6FB), asi que el menu va en slate y se lee sin problema.
   Al hacer scroll el header se pega CON FONDO, que es donde estaba
   el riesgo real: pasar sobre una banda morada.
   Las paginas de hero oscuro (Nosotros) arrancan solidas por PHP
   (ver emma_heroes_oscuros en functions.php).
   ========================================================= */
/* arriba del todo: transparente, menu legible sobre superficie clara */
body.ast-theme-transparent-header .site-header{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
/* v7.41 — Los DOS botones del menu quedan fuera de esta regla. Antes decia
   `.site-header .menu-link` a secas: con !important y especificidad (0,3,1)
   se comia el color blanco del CTA naranja y el morado del secundario, que
   viven en el CSS adicional con especificidad (0,2,1). Sintoma: el boton
   "Comenzar gratis" con letra gris sobre naranja. */
body.ast-theme-transparent-header .site-header .menu-item:not(.emma-nav-cta):not(.emma-nav-demo) > .menu-link,
body.ast-theme-transparent-header .site-header .ast-header-html a{
  color:var(--emma-slate) !important;
}
body.ast-theme-transparent-header .site-header .menu-item:not(.emma-nav-cta):not(.emma-nav-demo) > .menu-link:hover,
body.ast-theme-transparent-header .site-header .menu-item:not(.emma-nav-cta):not(.emma-nav-demo) > .menu-link:focus{
  color:var(--emma-morado) !important;
}
/* al pegarse: fondo blanco y sombra fina en vez de linea dura */
#ast-fixed-header,
.ast-header-sticked .site-header{
  background:#fff !important;
  border-bottom:0 !important;
  box-shadow:0 1px 0 rgba(77,74,158,.10), 0 8px 26px rgba(77,74,158,.07) !important;
}
/* v7.41 — mismo arreglo en el header pegado. Aqui era peor: `#ast-fixed-header
   .menu-link` lleva un ID, especificidad (1,1,1), le gana a todo. */
#ast-fixed-header .menu-item:not(.emma-nav-cta):not(.emma-nav-demo) > .menu-link,
.ast-header-sticked .site-header .menu-item:not(.emma-nav-cta):not(.emma-nav-demo) > .menu-link{
  color:var(--emma-slate) !important;
}
#ast-fixed-header .menu-item:not(.emma-nav-cta):not(.emma-nav-demo) > .menu-link:hover,
.ast-header-sticked .site-header .menu-item:not(.emma-nav-cta):not(.emma-nav-demo) > .menu-link:hover{
  color:var(--emma-morado) !important;
}

/* =========================================================
   v7.41 — COLOR DE LOS DOS BOTONES DEL HEADER, EN EL TEMA
   La geometria (fondo, radio, padding) sigue viviendo en el CSS
   adicional del Customizer; aqui se fija SOLO el color del texto,
   que es lo que se rompio, y con especificidad suficiente para
   ganarle a cualquier regla de menu, pegado o no.
   ========================================================= */
body .site-header .emma-nav-cta > .menu-link,
body #ast-fixed-header .emma-nav-cta > .menu-link{
  color:var(--emma-white) !important;
}
body .site-header .emma-nav-demo > .menu-link,
body #ast-fixed-header .emma-nav-demo > .menu-link{
  color:var(--emma-morado) !important;
}
body .site-header .emma-nav-demo > .menu-link:hover,
body #ast-fixed-header .emma-nav-demo > .menu-link:hover{
  color:var(--emma-white) !important;
}

/* =========================================================
   v7.6 — BOTON SECUNDARIO UNIFICADO (arregla el "verde delgado")
   Sintoma: el boton secundario ("Comenzar gratis") se veia RELLENO
   VERDE y con letra muy fina al lado del CTA naranja.
   Causa: el color de boton global del tema padre (Astra) pinta
   .wp-block-button__link con !important y gana a las reglas por
   plantilla (.emma-producto .is-style-outline ..., etc.), que solo
   declaraban background:transparent sin !important. La tipografia
   tambien la heredaba de Astra (peso liviano).
   Solucion: un unico estilo de secundario, siempre de CONTORNO,
   nunca relleno, con el mismo tamano y peso (600) que el CTA
   naranja. Se refuerza con !important para no depender del
   Customizer de Astra. El naranja #FD830D sigue siendo exclusivo
   del CTA primario.
   ========================================================= */
body .wp-block-button.is-style-emma-ghost .wp-block-button__link,
body .wp-block-button.is-style-outline .wp-block-button__link,
body a.emma-btn-ghost {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--emma-morado) !important;
  border: 1px solid rgba(77, 74, 158, .38) !important;
  border-radius: 8px !important;
  font-family: var(--emma-font-head) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
body .wp-block-button.is-style-emma-ghost .wp-block-button__link:hover,
body .wp-block-button.is-style-outline .wp-block-button__link:hover,
body a.emma-btn-ghost:hover {
  border-color: var(--emma-morado) !important;
  color: var(--emma-morado) !important;
  background-color: rgba(77, 74, 158, .06) !important;
}

/* Variante sobre banda oscura: contorno blanco, nunca relleno de color.
   Se usa [class*="final"] a proposito: cubre .final y .emma-final en las
   11 plantillas sin depender de que alguien recuerde agregar la clase a
   esta lista. Todas las secciones "final" del sitio son la banda morada
   oscura; la CTA clara de Nosotros usa .cta-light y no entra aqui. */
body [class*="final"] .wp-block-button.is-style-emma-ghost .wp-block-button__link,
body [class*="final"] .wp-block-button.is-style-outline .wp-block-button__link,
body [class*="final"] a.emma-btn-ghost,
body .hero-dark .wp-block-button.is-style-emma-ghost .wp-block-button__link,
body .hero-dark .wp-block-button.is-style-outline .wp-block-button__link,
body .hero-dark a.emma-btn-ghost,
body .emma-band-indigo .wp-block-button.is-style-emma-ghost .wp-block-button__link,
body .emma-band-indigo .wp-block-button.is-style-outline .wp-block-button__link,
body .has-emma-morado-background-color .wp-block-button.is-style-emma-ghost .wp-block-button__link,
body .has-emma-morado-deep-background-color .wp-block-button.is-style-emma-ghost .wp-block-button__link {
  color: var(--emma-white) !important;
  border-color: rgba(255, 255, 255, .45) !important;
}
body [class*="final"] .wp-block-button.is-style-emma-ghost .wp-block-button__link:hover,
body [class*="final"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
body [class*="final"] a.emma-btn-ghost:hover,
body .hero-dark .wp-block-button.is-style-emma-ghost .wp-block-button__link:hover,
body .hero-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
body .hero-dark a.emma-btn-ghost:hover,
body .emma-band-indigo .wp-block-button.is-style-emma-ghost .wp-block-button__link:hover {
  border-color: var(--emma-white) !important;
  background-color: rgba(255, 255, 255, .10) !important;
}

/* El CTA naranja tambien se blinda contra el color global de Astra,
   para que el par (naranja solido + contorno) sea estable en todas
   las plantillas. */
body .wp-block-button.is-style-emma-cta .wp-block-button__link {
  background-color: var(--emma-cta) !important;
  background-image: none !important;
  color: var(--emma-white) !important;
  border: 1px solid var(--emma-cta) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  padding: 14px 28px !important;
}
body .wp-block-button.is-style-emma-cta .wp-block-button__link:hover {
  background-color: var(--emma-cta-hover) !important;
  border-color: var(--emma-cta-hover) !important;
}

/* Botones en HTML plano (.btn-ghost / .cta-ghost): mismo peso, por
   si Astra o el navegador imponen otro. */
body .btn-ghost, body .cta-ghost, body .btn-cta, body .cta-btn {
  font-weight: 600;
  font-family: var(--emma-font-head);
}

/* =========================================================
   v7.6 — CTA FINAL DE LA DEMO, IGUAL EN TODO EL SITIO
   El bloque aprobado en Inicio (titulo + parrafo + linea micro +
   par de botones) se replico en todas las paginas que mencionan la
   demo. Estas reglas dan a .micro y .cta-row el mismo aspecto en
   plantillas cuyo CSS propio no los tenia definidos (soluciones,
   producto, casos, FAQ, funciones, nosotros).
   ========================================================= */
/* La linea micro va como en INICIO: lila y mas chica que el parrafo,
   no como una segunda bajada. Lleva !important porque las reglas por
   plantilla (.emma-soluciones .emma-final p, 18px; .emma-casos .final p,
   16.5px; etc.) tienen mas especificidad y se la comian, y por eso en
   las otras paginas salia igual que el parrafo. Sin guion verde: eso es
   del eyebrow, no de esta linea. */
body [class*="final"] .micro,
body .cta-light .micro,
body .is-surface .micro {
  color: var(--emma-violet) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

body [class*="final"] .wp-block-buttons.cta-row,
body .cta-light .wp-block-buttons.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 26px;
}
body .sec.final .micro { margin-bottom: 6px; }

/* =========================================================
   v7.6 — ESPACIO EN BLANCO ENTRE SECCIONES
   Sintoma: en Producto (y en Soluciones, Nosotros, Casos) aparecia una
   franja blanca entre el hero y la seccion siguiente, por ejemplo antes
   de "El corazon de EMMA".
   Causa: WordPress separa los bloques hermanos de un grupo con
   margin-block (block gap). Como las secciones traen su propio fondo,
   ese margen deja ver el blanco del contenedor. Home, Areas, Planes y
   Start ya lo anulaban en su CSS propio; las demas plantillas no.
   Fix: anularlo para todos los wrappers emma-*, que ya manejan su
   espaciado con el padding de .emma-sec / .sec.
   ========================================================= */
/* Solo el wrapper exterior de cada plantilla (.alignfull.emma-*), para
   no tocar el espaciado interno de las secciones. */
.wp-block-group.alignfull[class*="emma-"] > * {
  margin-top: 0;
  margin-bottom: 0;
}
.wp-block-group.alignfull[class*="emma-"] > * + * {
  margin-block-start: 0;
}


/* =========================================================
   v7.8 — EYEBROW UNIFICADO EN TODO EL SITIO
   Sintoma: en "Ve donde se pierde" (y en las otras 3 paginas de
   Funciones) la linea del eyebrow salia MORADA y no verde, y el
   texto se veia mas chico que en Inicio.
   Causa: emma-funcion.css pintaba el eyebrow con --phase (el color
   de fase de cada pagina del ciclo) en vez del canon del sitio, y
   usaba 12px en vez de 12.5px. Casos y el CTA del blog tambien
   estaban en 12px.
   Canon (el de Inicio, .emma-home .eyebrow):
     Rubik 600 · 12.5px · letter-spacing .14em · MAYUSCULAS
     texto  #4D4A9E (morado)   |  sobre fondo oscuro #C9BEF0 (lila)
     linea  ::before 22x2px  fondo #8DC049 (verde)  radio 2px  gap 9px
   El verde es SOLO la linea del eyebrow; nunca el texto.
   Las reglas por plantilla ya cumplen el canon; esto queda como
   red de seguridad para cualquier plantilla nueva que lo olvide
   (sin !important, para no pisar las variantes sobre fondo oscuro).
   ========================================================= */
.eyebrow {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emma-morado);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--emma-green);
  border-radius: 2px;
}