/*
Theme Name: Lightning Child - FunTech
Theme URI: https://funtechlearning.com
Description: Child theme de Lightning con la identidad visual de FunTech Learning Center (paleta real, tipografias Bricolage Grotesque + Hanken Grotesk, botones y enlaces aqua). Diseno claro/blanco con acentos de marca.
Author: FunTech Learning Center
Template: lightning
Version: 2.0.0
*/

/* ============================================================
   1) PALETA DE MARCA  ->  fuente de verdad, cambiala aqui
   Regla de proporcion: 70% blanco/navy - 20% aqua/azul - 10% calidos
   ============================================================ */
:root{
  /* Aqua y azules (protagonistas, ~20%) */
  --ft-aqua:#24D6CC;        /* aqua principal: titulos, lineas, botones */
  --ft-green:#41D3A8;       /* verde crecimiento: avance, exito */
  --ft-blue:#1D97D6;        /* azul aprendizaje: iconos, secciones */
  --ft-blue-deep:#0E6BBE;   /* azul profundo: sombras y degradados */

  /* Acentos calidos / creativos (uso moderado, ~10%) */
  --ft-orange:#F5B445;      /* naranja energia: color de boton primario */
  --ft-orange-deep:#E09B2E; /* naranja oscurecido para hover (texto navy legible) */
  --ft-gold:#F7CA49;        /* dorado acento: logros */
  --ft-coral:#F37F71;       /* coral humano: color de boton primario */
  --ft-coral-deep:#E0604A;  /* coral oscurecido para hover (texto navy legible) */
  --ft-purple:#AC75C4;      /* purpura creatividad: ideas */
  --ft-lavender:#BE73D5;    /* lavanda apoyo: detalles secundarios */

  /* Base y contraste (~70%) */
  --ft-navy:#04122A;        /* navy: texto principal sobre claro */
  --ft-navy-mid:#081F3C;    /* navy medio: paneles oscuros puntuales */
  --ft-gray:#B0BECD;        /* gris tecnologia: neutros, texto suave */
  --ft-white:#F8FAFC;       /* blanco contraste: superficies claras */

  /* Roles semanticos (tema CLARO) */
  --ft-bg:#FFFFFF;
  --ft-surface:var(--ft-white);
  --ft-text:var(--ft-navy);
  --ft-text-soft:#41506A;          /* navy aclarado, AA sobre blanco */
  --ft-line:rgba(4,18,42,.12);

  /* Enlaces: azul profundo para legibilidad AA sobre blanco
     (el aqua puro no contrasta como texto; se reserva para botones/lineas) */
  --ft-link:var(--ft-blue-deep);
  --ft-link-hover:var(--ft-blue);

  /* Boton de marca: fondo NARANJA ENERGIA + texto navy (combinacion legible AA) */
  --ft-btn-bg:var(--ft-orange);
  --ft-btn-bg-hover:var(--ft-orange-deep);
  --ft-btn-text:var(--ft-navy);
  --ft-radius:100px;

  /* Alias de tipografias (para header/footer y reuso) */
  --font-body:'Hanken Grotesk', sans-serif;
  --font-display:'Bricolage Grotesque', sans-serif;
}

/* ============================================================
   2) TIPOGRAFIAS  (las fuentes se cargan en functions.php)
   ============================================================ */
body,
.entry-content,
p, li {
  font-family:'Hanken Grotesk', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.site-name-text,
.entry-title,
.section-title,
.vk_heading_title {
  font-family:'Bricolage Grotesque', sans-serif;
  letter-spacing:-.02em;
  color:var(--ft-text);
}

/* ============================================================
   3) TEXTO Y ENLACES
   ============================================================ */
body{ color:var(--ft-text); }

a        { color:var(--ft-link); }
a:hover,
a:focus  { color:var(--ft-link-hover); }

::selection{ background:var(--ft-aqua); color:var(--ft-navy); }

/* Foco visible para accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--ft-aqua);
  outline-offset:2px;
}

/* ============================================================
   4) BOTONES DE MARCA  (aqua, redondeados)
   Se aplican SOLO a botones por defecto. NO se tocan los botones
   que ya traen un color propio elegido en el editor
   (clases .has-*-background-color) ni los de WooCommerce, para no
   romper CTAs intencionales ni la tienda.
   ============================================================ */
.btn-primary,
.vk_button_link.btn-primary,
.wp-block-button__link:not([class*="has-"]):not([class*="background-color"]),
.more-link,
input[type="submit"],
button[type="submit"],
.wpforms-submit,
.srfm-submit-btn,
.page_top_btn{
  background-color:var(--ft-btn-bg);
  border-color:var(--ft-btn-bg);
  color:var(--ft-btn-text);
  border-radius:var(--ft-radius);
  font-weight:700;
  transition:.2s ease;
}
.btn-primary:hover,
.vk_button_link.btn-primary:hover,
.wp-block-button__link:not([class*="has-"]):not([class*="background-color"]):hover,
.more-link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpforms-submit:hover,
.srfm-submit-btn:hover,
.page_top_btn:hover{
  background-color:var(--ft-btn-bg-hover);
  border-color:var(--ft-btn-bg-hover);
  color:var(--ft-navy);
  filter:none;
  transform:translateY(-2px);
}

/* Boton secundario "ghost" -> contorno aqua sobre claro */
.btn-ghost,
.vk_button_link.btn-outline-primary{
  background:transparent;
  border:2px solid var(--ft-btn-bg);
  color:var(--ft-text);
  border-radius:var(--ft-radius);
  font-weight:700;
}
.btn-ghost:hover,
.vk_button_link.btn-outline-primary:hover{
  background:var(--ft-btn-bg);
  color:var(--ft-navy);
}

/* ============================================================
   5) ACENTOS GLOBALES DE MARCA  (sutiles, sin volver oscuro el sitio)
   ============================================================ */
/* Linea de marca bajo el header */
.siteHeader{ border-bottom:3px solid var(--ft-aqua); }

/* Menu principal: enlace activo / hover en aqua */
.gMenu > li > a:hover,
.gMenu > .current-menu-item > a,
.gMenu > .current_page_item > a{
  color:var(--ft-link);
}

/* Titulos de seccion del tema con guino de marca */
.vk_heading.vk_heading-style-01 .vk_heading_title:after,
.section-title-border:after{
  border-color:var(--ft-aqua);
}

/* Listas y vinetas dentro del contenido */
.entry-content ul > li::marker{ color:var(--ft-aqua); }

/* Citas / blockquote con barra coral (acento calido 10%) */
.entry-content blockquote{
  border-left:4px solid var(--ft-coral);
}

/* Footer: filo superior aqua, manteniendo el fondo actual */
.siteFooter{ border-top:3px solid var(--ft-aqua); }

/* ============================================================
   6) CONSISTENCIA CON PULSE  (bloques UAGB/Spectra y contenido)
   Las paginas internas usaban Cardo (titulos) e Inter (cuerpo).
   Aqui unificamos SOLO tokens: tipografia, enlaces, botones y
   acentos. No se tocan layouts ni fondos. !important puntual
   para ganarle a los estilos que UAGB fija desde el editor.
   ============================================================ */

/* 6.1 Titulos -> Bricolage Grotesque (reemplaza Cardo) */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.wp-block-heading,
.uagb-heading-text,
.uagb-ifb-title,
.uagb-ifb-title-prefix,
.uagb-tabs__panel .uagb-tabs-list,
.vk_heading_title{
  font-family:'Bricolage Grotesque', sans-serif !important;
  letter-spacing:-.02em;
}

/* 6.2 Cuerpo y texto de bloques -> Hanken Grotesk (reemplaza Inter)
   Se evita tocar iconos (fa/dashicons) que fijan su propia fuente. */
.entry-content p, .entry-content li,
.uagb-ifb-desc,
.uagb-tab-content-wrap,
.uagb-faq-content{
  font-family:'Hanken Grotesk', sans-serif !important;
}

/* BLINDAJE DE ICONOS: nunca heredan las fuentes de marca
   (FontAwesome / dashicons mantienen su propia fuente) */
i.fa, i.fas, i.far, i.fab, i.fal,
i[class*="fa-"], .fa, .fas, .far, .fab,
.uagb-ifb-icon i, .uagb-icon i,
[class^="dashicons"], [class*=" dashicons"]{
  font-family:revert !important;
}

/* 6.3 Enlaces de contenido (no botones) -> azul profundo legible */
.entry-content a:not([class*="button"]):not([class*="btn"]):not(.uagb-button__link):not(.uagb-infobox-cta-link){
  color:var(--ft-link);
}
.entry-content a:not([class*="button"]):not([class*="btn"]):not(.uagb-button__link):not(.uagb-infobox-cta-link):hover{
  color:var(--ft-link-hover);
}

/* 6.4 TODOS los botones -> marca aqua + texto navy, redondeados
   (incluye los que tenian color propio, p.ej. el naranja del Home,
   y los de WooCommerce, por decision de unificar todo) */
.uagb-button__link,
.uagb-buttons-repeater.wp-block-button__link,
.uagb-infobox-cta-link,
.wp-block-button__link,
.vk_button_link.btn,
.vk_button_link.btn.has-background,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .button, .woocommerce #respond input#submit{
  background-color:var(--ft-btn-bg) !important;
  background-image:none !important;
  border-color:var(--ft-btn-bg) !important;
  color:var(--ft-btn-text) !important;
  border-radius:var(--ft-radius) !important;
  font-weight:700 !important;
  transition:.2s ease;
}
.uagb-button__link:hover,
.uagb-buttons-repeater.wp-block-button__link:hover,
.uagb-infobox-cta-link:hover,
.wp-block-button__link:hover,
.vk_button_link.btn:hover,
.vk_button_link.btn.has-background:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button:hover, .woocommerce #respond input#submit:hover{
  background-color:var(--ft-btn-bg-hover) !important;
  border-color:var(--ft-btn-bg-hover) !important;
  color:var(--ft-btn-text) !important;
  transform:translateY(-2px);
}
/* Texto interno del boton VK (caption/txt) hereda el navy */
.vk_button_link.btn .vk_button_link_txt,
.vk_button_link.btn .vk_button_link_caption{ color:var(--ft-navy) !important; }

/* 6.5 Acentos: separadores y bordes de bloques en aqua */
.wp-block-separator:not(.is-style-dots),
.uagb-separator{ border-color:var(--ft-aqua) !important; color:var(--ft-aqua) !important; }

/* ============================================================
   7) QUITAR EL BANNER DE TITULO DE LIGHTNING
   La franja azul con el titulo de pagina (.page-header) y el
   breadcrumb no existen en Pulse y se sentian desconectados.
   El contenido de cada pagina ya trae su propio encabezado.
   (Reversible: borra este bloque para recuperarlos.)
   ============================================================ */
.page-header{ display:none !important; }
.breadcrumb{ display:none !important; }

/* ============================================================
   8) ESCALA TIPOGRAFICA TIPO PULSE  (paginas internas)
   Igualamos color y tamano de los titulos al de la landing
   Pulse (navy, Bricolage, escala mas contenida). NO afecta a
   titulos de tarjetas/infoboxes (.uagb-ifb-title) para no
   romper sus layouts. Reversible: borra este bloque.
   ============================================================ */
/* Color navy de marca (reemplaza negro puro / has-black-color) */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.uagb-heading-text, .wp-block-heading{
  color:var(--ft-text) !important;
  line-height:1.08;
}
/* Escala de tamanos alineada con Pulse */
.entry-content h1, h1.uagb-heading-text, h1.wp-block-heading{
  font-size:clamp(2.2rem,4.5vw,3.3rem) !important; font-weight:800 !important;
}
.entry-content h2, h2.uagb-heading-text, h2.wp-block-heading{
  font-size:clamp(1.7rem,3.2vw,2.5rem) !important; font-weight:700 !important;
}
.entry-content h3, h3.uagb-heading-text, h3.wp-block-heading{
  font-size:clamp(1.25rem,2vw,1.55rem) !important; font-weight:700 !important;
}
/* Cuerpo a escala Pulse (lectura comoda, no gigante) */
.entry-content p, .uagb-ifb-desc{
  font-size:clamp(1rem,1.1vw,1.12rem);
}

/* Titulos de infobox: SOLO se unifica el tipo de letra (Bricolage, en
   la seccion 6.1). El color se deja en su valor normal del editor. */

/* ============================================================
   9) VINETAS = CHECK AQUA  (C12)
   En Home/Services las listas usaban el logo como vineta. Ocultamos
   esa imagen y ponemos un check aqua de marca. Reversible.
   ============================================================ */
.uagb-icon-list__source-image{ display:none !important; }
.uagb-icon-list__source-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25em; height:1.25em;
}
.uagb-icon-list__source-wrap::before{
  content:"\2713";              /* check */
  color:var(--ft-aqua);
  font-weight:900;
  font-size:1.05em;
  line-height:1;
}

/* C13: ocultar el logo de cliente de baja calidad (logod.jpg).
   Stopgap reversible; lo ideal es quitarlo en el editor de la galeria. */
img[src*="logod"]{ display:none !important; }

/* ============================================================
   10) HEADER / MENU / FOOTER COHERENTES CON PULSE
   ============================================================ */
/* 10.1 Fuente de marca en menu y footer */
.gMenu a, .gMenu a, .navbar-header, .vk-mobile-nav,
.siteFooter, .siteFooter p, .copySection{
  font-family:var(--font-body);
}

/* 10.2 Header sticky: blanco, sombra MUY sutil solo al hacer scroll */
.siteHeader{
  position:sticky; top:0; z-index:1000;
  background:#fff;
  transition:box-shadow .25s ease;
}
.siteHeader.is-scrolled{ box-shadow:0 6px 24px -12px rgba(4,18,42,.25); }
/* Logo del header (icono redondo) a tamano comodo */
.siteHeader .navbar-header img, .siteHeader .site-header-logo img{ max-height:58px; width:auto; }

/* 10.3 Estados del menu */
.gMenu > li > a{ transition:color .2s ease; }
.gMenu > li > a:hover{ color:var(--ft-blue-deep); }
.gMenu > .current-menu-item > a,
.gMenu > .current_page_item > a,
.gMenu > .current-menu-ancestor > a{
  box-shadow:inset 0 -2px 0 var(--ft-aqua);   /* subrayado teal 2px */
}

/* 10.4 Boton PULSE tipo pill (.menu-pulse-cta).
   Usa el color CTA del sitio (--ft-btn-bg) para coherencia con los demas botones. */
.gMenu > li.menu-pulse-cta{ margin-left:auto; display:flex; align-items:center; }
/* Pill: el icono de latido va como IMAGEN DE FONDO a la izquierda (a prueba de
   balas: no depende de flex ni ::before, asi nunca se apila sobre el texto). */
.gMenu > li.menu-pulse-cta > a{
  background-color:var(--ft-green);      /* pill teal/verde de marca */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2304122A'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h3l2%205%204-12%202%207h3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:18px center;
  background-size:16px 16px;
  color:var(--ft-navy) !important;
  border-radius:999px;
  padding:.6rem 1.25rem .6rem 2.5rem !important;   /* espacio izq para el icono */
  font-weight:700; line-height:1.2;
  box-shadow:none !important;
  white-space:nowrap;
  transition:.2s ease;
}
.gMenu > li.menu-pulse-cta > a .gMenu_name{ display:inline; }
.gMenu > li.menu-pulse-cta > a:hover{
  filter:brightness(.93); transform:translateY(-1px);
}
@keyframes ftp-beat{
  0%{box-shadow:0 0 0 0 rgba(4,18,42,.45)}
  70%{box-shadow:0 0 0 7px rgba(4,18,42,0)}
  100%{box-shadow:0 0 0 0 rgba(4,18,42,0)}
}

/* 10.5 Footer: ocultar credito "Powered by WordPress / Lightning / VK"
   (el copyright lo editas tu en el panel; aqui solo se oculta el credito) */
.siteFooter .copySection p + p{ display:none !important; }

/* 10.6 Header en una sola fila, logo y menu CENTRADOS verticalmente (desktop).
   El padre comun de logo (.navbar-header) y menu (#gMenu_outer) es
   .siteHeadContainer; ahi va el flex. Se anula el float del logo. */
@media (min-width:1025px){
  .siteHeader .siteHeadContainer{ display:flex; align-items:center; }
  .siteHeader .navbar-header{ margin-bottom:0; float:none; width:auto; }
  .siteHeader .navbar-brand.siteHeader_logo{ float:none; width:auto; margin:0; padding:0; line-height:0; }
  .siteHeader #gMenu_outer{ flex:1; }
}
.siteHeader .siteHeader_logo img{ max-height:50px; width:auto; }