/* ==========================================================================
   ATLANTICO-V2.CSS
   Nueva identidad visual — Instituto Atlántico
   Paleta: 60% #F1F1F1 · 25% #E7E7E7 · 10% #FC6401 · 5% #FFC247
   Tipografías: Satoshi (títulos/subtítulos/texto) · Geist (datos/interfaz/código)
   Este archivo se carga DESPUÉS de style.css y atlantico.css, y sobreescribe
   únicamente lo necesario para el nuevo tema visual.
   ========================================================================== */

:root {
  --atl-bg-light: #F1F1F1;      /* 60% - fondo principal */
  --atl-bg-secondary: #E7E7E7;  /* 25% - fondo secundario / tarjetas / franjas */
  --atl-primary: #FC6401;       /* 10% - color de marca / acento principal */
  --atl-secondary: #FFC247;     /* 5%  - acento secundario / hover suave */

  --atl-text-dark: #1d2025;     /* texto principal sobre fondo claro */
  --atl-text-body: #505050;     /* texto de párrafos */
  --atl-text-muted: #8a8a8a;    /* texto secundario */
  --atl-white: #ffffff;

  --font-satoshi: 'Satoshi', 'Roboto', sans-serif;
  --font-geist: 'Geist', 'Roboto', sans-serif;
}

/* ==========================================================================
   1. TIPOGRAFÍA BASE
   ========================================================================== */

body {
  font-family: var(--font-satoshi);
  font-weight: 400; /* Satoshi Regular */
  color: var(--atl-text-body);
  background-color: var(--atl-bg-light);
}

/* Títulos: Satoshi Bold */
h1, h2, h3, h4 {
  font-family: var(--font-satoshi);
  font-weight: 700;
  color: var(--atl-text-dark);
}

/* Subtítulos: Satoshi Medium */
h5, h6,
.section-title h5,
.footer-title h6 {
  font-family: var(--font-satoshi);
  font-weight: 500;
  color: var(--atl-text-dark);
}

/* Textos y contenidos: Satoshi Regular */
p {
  font-family: var(--font-satoshi);
  font-weight: 400;
  color: var(--atl-text-body);
}

/* Datos, tecnología, interfaces, código: Geist Regular/Medium */
.navigation, .navbar, nav,
input, textarea, select, button, .main-btn,
.courses-tab, .nice-select, table, code, pre,
.footer-address, .footer-link {
  font-family: var(--font-geist);
}

/* ==========================================================================
   2. COLOR DE MARCA (reemplaza el azul #07294d del tema original)
   ========================================================================== */

.section-title h5::before {
  background-color: var(--atl-primary);
}
.section-title h2 {
  color: var(--atl-text-dark);
}

/* ==========================================================================
   3. HEADER — barra superior
   ========================================================================== */

.header-top {
  background-color: var(--atl-primary);
  border-bottom: 0;
}
.header-contact ul li,
.header-contact ul li a {
  color: var(--atl-white);
}
.header-right .social ul li a {
  color: var(--atl-white);
}
.header-right .social ul li a:hover {
  color: var(--atl-text-dark);
}
.header-right .social ul li a svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  display: inline-block;
}

/* Franja "CURSOS DE EXTENSIÓN PROFESIONAL" */
.header-slogan p {
  color: var(--atl-text-muted) !important;
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  margin: 0;
}

/* ==========================================================================
   4. HEADER — navegación principal
   ========================================================================== */

.navigation {
  background-color: var(--atl-white);
  border-bottom: 1px solid var(--atl-bg-secondary);
}
.navigation .navbar .navbar-nav li a {
  color: var(--atl-text-dark);
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 13px;
}
.navigation .navbar .navbar-nav > li > a.active,
.navigation .navbar .navbar-nav > li:hover > a {
  color: var(--atl-primary);
}
.navbar .navbar-toggler .icon-bar {
  background-color: var(--atl-text-dark);
}

/* Submenú (dropdown) */
.navigation .navbar .navbar-nav li .sub-menu {
  background-color: var(--atl-white);
  border: 1px solid var(--atl-bg-secondary);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
  width: 220px;
}
.navigation .navbar .navbar-nav li .sub-menu li a {
  color: var(--atl-text-dark);
  border-bottom: 1px solid var(--atl-bg-secondary);
  font-size: 13px;
}
.navigation .navbar .navbar-nav li .sub-menu li a.active,
.navigation .navbar .navbar-nav li .sub-menu li a:hover {
  color: var(--atl-primary);
  background-color: var(--atl-bg-light);
  padding-left: 20px;
}

/* Menú de CURSOS: primer nivel = categorías */
.sub-menu--categories {
  width: 220px;
}
.sub-menu--categories > li.has-children {
  position: relative;
}

/* Segundo nivel (flyout): oculto por defecto */
.navigation .navbar .navbar-nav li .sub-menu.sub-menu--flyout {
  top: 0 !important;
  left: 100% !important;
  width: 200px;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Solo en ESCRITORIO: el segundo nivel se abre con hover, hacia el lado */
@media (min-width: 992px) {
  .sub-menu--categories > li.has-children:hover > .sub-menu.sub-menu--flyout {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ============================================
   MÓVIL/TÁCTIL: CUALQUIER submenú (de cualquier
   nivel: CURSOS, categorías, cursos) se controla
   por clic vía JS con la clase .open. Nunca por
   :hover. Se apila verticalmente.
   ============================================ */
@media (max-width: 991px) {
  /* Flecha para CUALQUIER ítem del menú con submenú (todos los niveles),
     solo en móvil. En desktop el submenú se abre con hover, sin flecha.
     Requiere que el <li> tenga la clase .has-children (ver header-nuevo.php). */
  .navigation .navbar .navbar-nav li.has-children > a::after {
    content: '\f105'; /* flecha fontawesome hacia la derecha */
    font-family: FontAwesome;
    float: right;
    margin-right: 5px;
    pointer-events: none;
  }
  .navigation .navbar .navbar-nav li.has-children.open > a::after {
    content: '\f107'; /* flecha fontawesome hacia abajo */
  }

  .navigation .navbar .navbar-nav li .sub-menu {
    display: block !important; /* anula el display:none del tema base (Edubin) */
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }

  /* FIX: esta regla iguala la especificidad de
     .sub-menu.sub-menu--flyout (5 clases) para poder
     ganarle en móvil. Sin esto, "left:100% !important"
     del flyout de escritorio seguía ganando por tener
     mayor especificidad que la regla genérica de arriba,
     empujando el submenú fuera de la pantalla. */
  .navigation .navbar .navbar-nav li .sub-menu.sub-menu--flyout {
    display: block !important;
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }

  .navigation .navbar .navbar-nav li.open > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* FIX: mismo motivo, para que el estado "abierto" del
     flyout también se aplique correctamente en móvil */
  .navigation .navbar .navbar-nav li.open > .sub-menu.sub-menu--flyout {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

}

/* Enlace "VIRTUAL" en rojo del tema original -> ahora en color de marca */
.navigation .navbar .navbar-nav li a[style*="color"] {
  color: var(--atl-primary) !important;
}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */

.main-btn {
  background-color: var(--atl-primary);
  border-color: var(--atl-primary);
  color: var(--atl-white);
  font-family: var(--font-geist);
  font-weight: 500;
}
.main-btn:hover {
  background-color: var(--atl-secondary);
  border-color: var(--atl-secondary);
  color: var(--atl-text-dark);
}

/* ==========================================================================
   6. RESPONSIVE — menú móvil agrupado
   ========================================================================== */

/* Desactivar el controlador propio de la plantilla que puede superponerse
   al área de la flecha en móvil e interceptar el toque */
.sub-nav-toggler {
  display: none !important;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.footer-top {
  background-color: var(--atl-bg-secondary);
}
.footer-about p,
.footer-address ul li .cont p {
  color: var(--atl-text-body);
}
.footer-about ul li a {
  background-color: var(--atl-white);
  color: var(--atl-text-dark);
}
.footer-about ul li a:hover {
  background-color: var(--atl-primary);
  color: var(--atl-white);
}
.footer-title h6 {
  color: var(--atl-text-dark);
}
.footer-link ul li a {
  color: var(--atl-text-body);
}
.footer-link ul li a:hover {
  color: var(--atl-primary);
}
.footer-link ul li a i {
  color: var(--atl-primary);
}
.footer-address ul li .icon i {
  color: var(--atl-primary);
}
.footer-copyright {
  background-color: var(--atl-bg-light);
  border-top: 1px solid var(--atl-bg-secondary);
}
.footer-copyright .copyright p {
  color: var(--atl-text-body);
}
.back-to-top {
  background-color: var(--atl-primary);
  color: var(--atl-white);
}
.back-to-top:hover {
  background-color: var(--atl-secondary);
  color: var(--atl-text-dark);
}

/* ==========================================================================
   8. PAGE BANNER — franja de título en páginas internas (Nosotros, etc.)
   El tema usa data-overlay + un ::before con background-color para la capa
   de color sobre la imagen de fondo. Sobreescribimos ese color aquí.
   ========================================================================== */

#page-banner[data-overlay]::before,
.bg_cover[data-overlay]::before {
  background-color: var(--atl-text-dark) !important;
}


/* ==========================================================================
   9. SISTEMA DE DISEÑO "V2" — COMPONENTES COMPARTIDOS
   Extraído del <style> que estaba embebido solo en index.php, para poder
   reutilizar el mismo lenguaje visual (tarjetas, grids, tipografía grande,
   animaciones) en cualquier página: about.php, cursos.php, contact.php, etc.
 
   PEGA TODO ESTE BLOQUE AL FINAL DE css/atlantico_v2.css
   (después de la sección "8. PAGE BANNER")
 
   IMPORTANTE: puedes borrar el <style> repetido dentro de index.php una vez
   confirmes que la home se sigue viendo igual con estas reglas ya en el CSS
   global (no es obligatorio hacerlo ahora, ambos pueden convivir).
   ========================================================================== */
 
/* --- Animación de aparición al hacer scroll --- */
.reveal-v2 {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-v2.on { opacity: 1; transform: none; }
.reveal-v2-d1 { transition-delay: 0.08s; }
.reveal-v2-d2 { transition-delay: 0.16s; }
 
/* --- Etiqueta pequeña "eyebrow" + título de sección --- */
.section-eyebrow-v2 {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-geist);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--atl-text-muted);
  margin-bottom: 1rem;
}
.section-eyebrow-v2::before {
  content: ''; display: block; width: 18px; height: 1px;
  background: var(--atl-text-muted);
}
.section-h2-v2 {
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.03em; line-height: 1.08;
  color: var(--atl-text-dark);
}
.section-h2-v2 .acc { color: var(--atl-primary); }
 
/* --- Botones --- */
.hero-v2-btn-outline {
  display: inline-flex; align-items: center;
  border: 1.5px solid #D4D4D4;
  color: var(--atl-text-body);
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  font-family: var(--font-geist);
  font-size: 0.9rem; font-weight: 500;
  transition: border-color 0.3s, color 0.3s;
}
.hero-v2-btn-outline:hover { border-color: var(--atl-text-dark); color: var(--atl-text-dark); }
 
/* --- Texto de fondo gigante decorativo (watermark) --- */
.hero-v2-bgtext {
  position: absolute; right: -2%; bottom: -8%;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: clamp(7rem, 18vw, 15rem);
  line-height: 0.85; letter-spacing: -0.05em;
  color: rgba(0,0,0,0.04);
  user-select: none; pointer-events: none; white-space: nowrap; z-index: 0;
}
 
/* --- Encabezado tipo hero (etiqueta + h1 + bajada + acciones) --- */
.hero-v2-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-geist);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--atl-primary);
  margin-bottom: 1.25rem;
}
.hero-v2-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--atl-primary); }
.hero-v2-h1 {
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 0.98; letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.hero-v2-h1 span { display: block; }
.hero-v2-h1 .line-solid { color: var(--atl-text-dark); }
.hero-v2-h1 .line-orange { color: var(--atl-primary); }
.hero-v2-h1 .line-stroke { -webkit-text-stroke: 2px var(--atl-text-dark); color: transparent; }
.hero-v2-sub {
  font-family: var(--font-satoshi);
  font-size: 1rem; color: var(--atl-text-body);
  line-height: 1.75; max-width: 480px; margin-bottom: 2rem;
}
.hero-v2-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
 
/* --- Tarjeta "bloque oscuro" con watermark + cita (usada en Nosotros) --- */
.nosotros-v2-visual { position: relative; }
.nosotros-v2-block {
  background: var(--atl-text-dark);
  border-radius: 20px;
  aspect-ratio: 4/5;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2.25rem; overflow: hidden; position: relative;
}
.nosotros-v2-watermark {
  position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  letter-spacing: -0.06em; line-height: 0.85;
  color: rgba(255,255,255,0.05);
  user-select: none;
}
.nosotros-v2-quote {
  position: relative; z-index: 1;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: #fff; letter-spacing: -0.02em; line-height: 1.35;
}
.nosotros-v2-quote span { color: var(--atl-secondary); }
.nosotros-v2-float {
  position: absolute; top: 2rem; right: -1rem;
  background: var(--atl-secondary);
  border-radius: 14px; padding: 1.1rem 1.35rem;
  min-width: 140px;
}
.nosotros-v2-float-num {
  font-family: var(--font-satoshi);
  font-weight: 700; font-size: 2.2rem; letter-spacing: -0.04em;
  color: var(--atl-text-dark); line-height: 1;
}
.nosotros-v2-float-lbl {
  font-family: var(--font-geist);
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(0,0,0,0.5); margin-top: 4px;
}
.nosotros-v2-text {
  font-family: var(--font-satoshi);
  font-size: 0.95rem; color: var(--atl-text-body);
  line-height: 1.75; margin-top: 1.5rem; max-width: 480px;
}
 
/* --- Lista numerada de ventajas/beneficios --- */
.ventajas-v2 { display: flex; flex-direction: column; border-top: 1px solid #D4D4D4; margin-top: 1.5rem; }
.ventaja-v2 { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.3rem 0; border-bottom: 1px solid #D4D4D4; }
.ventaja-v2-n {
  font-family: var(--font-geist);
  font-size: 0.65rem; letter-spacing: 0.1em; color: var(--atl-primary);
  min-width: 26px; margin-top: 3px;
}
.ventaja-v2-title {
  font-family: var(--font-satoshi);
  font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em;
  color: var(--atl-text-dark); margin-bottom: 3px;
}
.ventaja-v2-desc { font-family: var(--font-satoshi); font-size: 0.83rem; color: var(--atl-text-body); line-height: 1.6; }
 
/* --- Grid de tarjetas (usado para Programas en index, y ahora Valores en about) --- */
.cursos-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5px;
  background: #D4D4D4;
  border: 1.5px solid #D4D4D4;
  border-radius: 16px;
  overflow: hidden;
}
.curso-v2-card {
  background: #fff;
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: background 0.3s;
  position: relative;
}
.curso-v2-card::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid var(--atl-primary);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.curso-v2-card:hover { background: var(--atl-bg-light); }
.curso-v2-card:hover::after { opacity: 1; }
.curso-v2-emoji {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--atl-bg-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  transition: background 0.3s;
}
.curso-v2-emoji img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0) saturate(100%); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.curso-v2-card:hover .curso-v2-emoji { background: var(--atl-primary); }
.curso-v2-card:hover .curso-v2-emoji img { filter: brightness(0) invert(1); opacity: 1; }
.curso-v2-badge {
  font-family: var(--font-geist);
  font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  border: 1px solid #D4D4D4; color: var(--atl-text-muted);
}
.curso-v2-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.curso-v2-name {
  font-family: var(--font-satoshi);
  font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--atl-text-dark);
}
.curso-v2-desc { font-family: var(--font-satoshi); font-size: 0.83rem; color: var(--atl-text-body); line-height: 1.65; flex: 1; }
.curso-v2-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1rem; border-top: 1px solid #D4D4D4; margin-top: auto;
}
.curso-v2-hrs {
  font-family: var(--font-geist);
  font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--atl-text-muted);
}
.curso-v2-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #D4D4D4;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--atl-text-muted);
  transition: all 0.3s;
}
.curso-v2-card:hover .curso-v2-arrow { background: var(--atl-primary); border-color: var(--atl-primary); color: #fff; }
 
/* --- Grid de tarjetas grandes (Modalidad en index; Misión/Visión en about) --- */
.modalidad-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: #D4D4D4;
  border: 1.5px solid #D4D4D4;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 2.5rem;
}
.modalidad-v2-grid--2 { grid-template-columns: repeat(2, 1fr); }
.modalidad-v2-card {
  background: #fff;
  padding: 2.25rem;
  position: relative;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.modalidad-v2-card.is-popular { background: var(--atl-bg-light); }
.modalidad-v2-badge-pop {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: var(--atl-primary);
  color: #fff;
  font-family: var(--font-geist);
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
}
.modalidad-v2-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--atl-bg-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.modalidad-v2-card.is-popular .modalidad-v2-icon { background: #fff; }
.modalidad-v2-title {
  font-family: var(--font-satoshi);
  font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em;
  color: var(--atl-text-dark);
}
.modalidad-v2-desc {
  font-family: var(--font-satoshi);
  font-size: 0.88rem; color: var(--atl-text-body); line-height: 1.65;
  max-width: 340px;
}
.modalidad-v2-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 6px; }
.modalidad-v2-list span {
  font-family: var(--font-geist);
  font-size: 0.78rem; color: var(--atl-text-body);
  display: flex; align-items: center; gap: 8px;
}
.modalidad-v2-list span::before { content: '→'; color: var(--atl-primary); font-weight: 700; }
@media (max-width: 767px) { .modalidad-v2-grid, .modalidad-v2-grid--2 { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 991px) { .modalidad-v2-grid { grid-template-columns: 1fr; } }
 
/* --- CTA final oscuro con botón de WhatsApp --- */
.cta-v2-section { background: var(--atl-text-dark); padding: 6rem 0; }
.cta-v2-section .section-eyebrow-v2 { color: rgba(255,255,255,0.35); }
.cta-v2-section .section-eyebrow-v2::before { background: rgba(255,255,255,0.35); }
.cta-v2-section .section-h2-v2 { color: #fff; }
.cta-v2-section .section-h2-v2 .acc { color: var(--atl-secondary); }
.cta-v2-inner { display: flex; justify-content: space-between; align-items: center; gap: 3rem; flex-wrap: wrap; }
.cta-v2-right { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 260px; }
.cta-v2-desc { font-family: var(--font-satoshi); font-size: 0.9rem; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 320px; }
.btn-wa-v2 {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  padding: 0.9rem 1.75rem; border-radius: 8px;
  font-family: var(--font-geist);
  font-size: 0.9rem; font-weight: 700;
  transition: background 0.3s, transform 0.3s;
}
.btn-wa-v2:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); }
.btn-wa-v2-icon {
  width: 22px; height: 22px; background: rgba(255,255,255,0.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.cta-v2-info { font-family: var(--font-geist); font-size: 0.72rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.3); }
 
/* --- Botón flotante de WhatsApp (global) --- */
.whatsapp-float {
  position: fixed; bottom: 25px; right: 25px;
  width: 58px; height: 58px;
  background-color: #25D366; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 999;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
@media (max-width: 767px) {
  .whatsapp-float { width: 52px; height: 52px; font-size: 26px; bottom: 18px; right: 18px; }
}
 
@media (max-width: 991px) {
  .hero-v2-bgtext { display: none; }
  .nosotros-v2-float { right: 0.5rem; }
}
 
/* ==========================================================================
   10. BANNER FOTOGRÁFICO DE PÁGINA INTERNA (Nosotros, Cursos, Contacto, etc.)
   Distinto al hero-v2 de la home: es una foto real a todo el ancho con
   overlay oscuro, para páginas internas que no deben "verse como el index".
   ========================================================================== */
.page-banner-v2 {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-banner-v2::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,32,37,0.25) 0%, rgba(29,32,37,0.88) 100%);
}
 
/* Variante SIN foto: fondo oscuro de marca + watermark grande, para páginas
   donde no hay fotografía institucional disponible */
.page-banner-v2--brand {
  background-color: var(--atl-text-dark);
  background-image: none !important;
}
.page-banner-v2--brand::before { background: none; }
.page-banner-v2--brand .page-banner-v2-watermark {
  position: absolute;
  top: 50%; right: -1%;
  transform: translateY(-50%);
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.05);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.page-banner-v2--brand .page-banner-v2-inner::before {
  content: '';
  display: block;
  width: 40px; height: 3px;
  background: var(--atl-primary);
  margin-bottom: 1.25rem;
}
.page-banner-v2-inner { position: relative; z-index: 1; width: 100%; padding-bottom: 2.75rem; padding-top: 7rem; }
.page-banner-v2-crumb {
  font-family: var(--font-geist);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
  display: flex; gap: 8px; align-items: center;
}
.page-banner-v2-crumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.page-banner-v2-crumb a:hover { color: #fff; }
.page-banner-v2-crumb .sep { opacity: 0.4; }
.page-banner-v2-title {
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
 
/* --- Fila de cifras en línea (sin tarjeta), para secciones de introducción --- */
.about-stats-row {
  display: flex;
  gap: 2.75rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #D4D4D4;
}
.about-stat { display: flex; flex-direction: column; gap: 4px; }
.about-stat .num {
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: -0.03em;
  color: var(--atl-text-dark);
}
.about-stat .num span { color: var(--atl-primary); }
.about-stat .lbl {
  font-family: var(--font-geist);
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--atl-text-muted);
}
@media (max-width: 575px) {
  .page-banner-v2 { min-height: 260px; }
  .page-banner-v2-inner { padding-top: 5rem; }
}