/* Wisdom Academy — Estilo de la marca para la página pública (index.html y wisdom_*_page.html), aprobado por el CEO el 2026-10-13.
   Mismas reglas que css/marca.css (portal), adaptadas a la página: se carga AL FINAL del <head>.
   · Azul del logo #0D2B45; turquesa #19B6B9 solo fondo/forma; turquesa oscuro #0E7C7E para letras turquesa y botones; lima solo resaltador.
   · Outfit en títulos, botones y etiquetas (reemplaza Anton y la letra de máquina); Inter en el texto. Sin mayúsculas forzadas.
   · Botones en píldora, tarjetas redondeadas, sin sombras duras ni cruces decorativas. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary: #0D2B45; --accent: #19B6B9; --accent-ink: #0E7C7E; --teal-soft: #E8F7F7; --yellow: #E6FF00;
  --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Outfit', 'Inter', system-ui, sans-serif; --font-mono: 'Outfit', 'Inter', system-ui, sans-serif;
  --shadow: 0 10px 30px rgba(13, 43, 69, .08); --shadow-btn: 0 10px 22px rgba(14, 124, 126, .28);
}
body { font-family: var(--font-sans); background-image: none !important; }
body * { text-transform: none !important; letter-spacing: normal !important; }

/* Títulos: Outfit en lugar de Anton */
h1, h2, h3, h4, .hero-title, .section-title, .cta-band h2, .card-title, .row-title, .step-num, .row-id, .footer-heading,
.kicker, .section-eyebrow, .card-index, .row-meta, .meta-title, .btn-login, .btn-solid, .btn-ghost, .btn-primary, .dropbtn, .nav-menu a, label {
  font-family: var(--font-display) !important;
}
.hero-title { font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.03em !important; font-size: clamp(3rem, 8vw, 7rem) !important; }
@media (max-width: 768px) { .hero-title { font-size: clamp(2.8rem, 14vw, 4.4rem) !important; } }
/* "Inglés que" en turquesa oscuro y "conecta." en azul con el resaltador lima (pedido del CEO 2026-10-13) */
.hero-title .c1, .hero-title .c2 { color: var(--accent-ink) !important; }
.hero-title .c3 { color: var(--primary) !important; }
.hero-title .c3 { position: relative; display: inline-block !important; z-index: 0; }
.hero-title .c3::after { content: ''; position: absolute; left: -.06em; right: -.06em; bottom: .08em; height: .32em; background: var(--yellow); border-radius: 999px; z-index: -1; transform: rotate(-1.5deg); }
.section-title, .cta-band h2 { font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; font-size: clamp(2.2rem, 5vw, 4rem) !important; }
h2, h3, .card-title, .row-title { font-weight: 700 !important; letter-spacing: -0.01em !important; }
.step-num, .row-id { font-weight: 800 !important; }
.kicker, .section-eyebrow, .card-index { color: var(--accent-ink) !important; font-weight: 600 !important; font-size: .9rem !important; }
.kicker::before, .card-index::before { content: none !important; }
.hero-meta span, .meta-title, .footer-meta, .footer-bottom, .mock-caption, .mock-kpis small, .mock-bar span { font-size: max(.78rem, 12px) !important; }

/* Botones en píldora */
.btn-login, .btn-solid, .btn-ghost, .btn-primary, .mobile-login, button[type=submit] {
  border-radius: 999px !important; box-shadow: none; transform: none !important; font-weight: 700 !important; min-height: 44px;
}
.btn-login { background: var(--accent-ink) !important; color: #fff !important; border: 0 !important; padding: 10px 22px !important; box-shadow: var(--shadow-btn) !important; }
.btn-login:hover { background: #0B6B6D !important; color: #fff !important; }
.btn-solid, .btn-primary, button[type=submit] { background: var(--accent-ink) !important; color: #fff !important; border: 0 !important; box-shadow: var(--shadow-btn) !important; }
.btn-solid:hover, .btn-primary:hover, button[type=submit]:hover { background: #0B6B6D !important; box-shadow: var(--shadow-btn) !important; }
.cta-band .btn-solid { background: var(--primary) !important; color: #fff !important; box-shadow: 0 10px 22px rgba(0,0,0,.2) !important; }
.btn-ghost { background: #fff !important; color: var(--primary) !important; border: 1.5px solid #E3E8EC !important; }
.mobile-login { background: var(--accent-ink) !important; color: #fff !important; text-align: center; }
.menu-toggle-btn { min-width: 44px !important; min-height: 44px !important; border-radius: 12px !important; }

/* Tarjetas, campos y adornos */
.card, .editorial-card, .channel-card, .form-box, .hero-card, .contact-info, .tech-row, .feature-list .ic, .mock, .lead-box {
  border-radius: 18px !important;
}
.card, .editorial-card, .channel-card, .form-box, .hero-card { box-shadow: var(--shadow) !important; }
.feature-list .ic { border-radius: 12px !important; }
input:not([type=checkbox]):not([type=radio]), select, textarea { border-radius: 12px !important; min-height: 46px; }
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(25, 182, 185, .18) !important; }
.crosshair, .top-left, .top-right, .bottom-left, .bottom-right { display: none !important; }
.wa-float, .wa-float .wa-tip { border-radius: 999px !important; }
.navbar .logo-img, .navbar .logo img { height: 40px !important; width: auto !important; }
@media (max-width: 768px) { .navbar .logo-img, .navbar .logo img { height: 34px !important; } }

/* Sin sombras duras desplazadas del estilo anterior */
.form-box, .channel-card, .card, .editorial-card, .lead-box, .hero-card { box-shadow: var(--shadow) !important; border-radius: 22px !important; }
/* La tarjeta grande de Formación e Interpretación (en la portada la rejilla no es tarjeta) */
.hero-grid:has(.hero-copy, .hero-text) { box-shadow: var(--shadow) !important; border-radius: 22px !important; overflow: hidden; }
/* Las rejillas de tarjetas usaban el fondo gris como línea divisoria: con tarjetas redondeadas se separan con aire */
.cards, .contact-grid { background: transparent !important; gap: 16px !important; border: 0 !important; }
/* Casillas de verificación del tamaño normal (los estilos de campos de cada página las agrandaban) */
input[type=checkbox], input[type=radio] { width: 20px !important; height: 20px !important; min-height: 0 !important; padding: 0 !important; flex: 0 0 auto; accent-color: var(--accent-ink); }