/* ============================================================
   PREMIUM DESIGN TOKENS — expertos.pe
   Paleta: Dark Premium Serio (esmeralda institucional + blancos)
   Uso:
     - Fuente única de verdad de colores, sombras, radios, tipografía.
     - Pensado para enqueue desde functions.php (vía wp_enqueue_style).
     - Mientras se valida el piloto, las páginas pueden inlinear este
       archivo en un bloque <style> al inicio del HTML.
   ============================================================ */

/* ============================================================
   HARD DARK BASE — solo en las páginas custom (EM templates +
   home). NO se fuerza en /acceso/, /mi-cuenta/, /carrito/ ni
   pages default de WP/WooCommerce que tienen su propio estilo.
   ============================================================ */
body.home,
body[class*="page-template-pagina-"]{
  background-color: #08090a !important;
  background-image: none !important;
}

:root {
  /* ---------- Superficies / fondos ---------- */
  --em-bg:            #08090a;             /* fondo base, casi negro neutro */
  --em-bg-soft:       #0c1014;             /* secciones alternadas */
  --em-surface:       rgba(255,255,255,.04);  /* cards translúcidas */
  --em-surface-2:     rgba(255,255,255,.06);  /* cards hover/elev */
  --em-surface-3:     rgba(255,255,255,.085); /* botones ghost */

  /* ---------- Líneas / bordes ---------- */
  --em-line:          rgba(255,255,255,.08);
  --em-line-strong:   rgba(255,255,255,.16);
  --em-line-brand:    rgba(20,184,102,.32);

  /* ---------- Marca: esmeralda institucional ---------- */
  --em-brand:         #14b866;   /* primario sobrio */
  --em-brand-hover:   #18cf72;   /* hover */
  --em-brand-deep:    #0e8c4d;   /* profundidad / sombras */
  --em-brand-soft:    #6fd9a3;   /* highlights, badges suaves */
  --em-brand-ink:     #04140c;   /* texto sobre brand */
  --em-brand-glow:    rgba(20,184,102,.18);
  --em-brand-glow-2:  rgba(20,184,102,.10);

  /* Acento dorado (uso muy ocasional para "lujo": premium, exclusivo) */
  --em-gold:          #c9a35a;
  --em-gold-soft:     #d9c896;

  /* ---------- Texto ---------- */
  --em-text:          #f4f1eb;
  --em-text-soft:     #c8d0d8;
  --em-text-mute:     #8a949f;
  --em-text-on-brand: var(--em-brand-ink);

  /* ---------- Sombras (escala consistente) ---------- */
  --em-shadow-sm:     0 6px 16px rgba(0,0,0,.32);
  --em-shadow-md:     0 16px 38px rgba(0,0,0,.42);
  --em-shadow-lg:     0 28px 64px rgba(0,0,0,.55);
  --em-shadow-brand:  0 14px 38px rgba(20,184,102,.18);
  --em-shadow-inset:  inset 0 1px 0 rgba(255,255,255,.06);

  /* ---------- Radios ---------- */
  --em-r-sm:          10px;
  --em-r-md:          14px;
  --em-r-lg:          22px;
  --em-r-xl:          28px;
  --em-r-pill:        999px;

  /* ---------- Tipografía ---------- */
  --em-font-sans:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --em-font-serif:    'Cormorant Garamond', 'Fraunces', Georgia, 'Times New Roman', serif;
  --em-tracking-tight: -.028em;
  --em-tracking-display: -.035em;
  --em-tracking-wide:  .12em;

  /* ---------- Espaciado (8pt grid) ---------- */
  --em-s-1:  4px;
  --em-s-2:  8px;
  --em-s-3:  12px;
  --em-s-4:  16px;
  --em-s-5:  24px;
  --em-s-6:  32px;
  --em-s-7:  48px;
  --em-s-8:  64px;
  --em-s-9:  96px;

  /* ---------- Layout ---------- */
  --em-container:     1240px;
  --em-container-sm:  860px;
  --em-gutter:        20px;

  /* ---------- Transiciones ---------- */
  --em-ease:          cubic-bezier(.2,.8,.2,1);
  --em-fast:          .18s var(--em-ease);
  --em-base:          .28s var(--em-ease);
}

/* ============================================================
   UTILIDADES OPCIONALES
   Clases usables como atajo en cualquier página. No son obligatorias.
   ============================================================ */

.em-display{
  font-family: var(--em-font-serif);
  font-weight: 700;
  letter-spacing: var(--em-tracking-display);
  line-height: 1.02;
  color: var(--em-text);
}

.em-eyebrow{
  display:inline-block;
  font: 800 11px/1 var(--em-font-sans);
  letter-spacing: var(--em-tracking-wide);
  text-transform: uppercase;
  color: var(--em-brand-soft);
}

.em-card{
  background: linear-gradient(180deg, var(--em-surface), var(--em-surface-2));
  border: 1px solid var(--em-line);
  border-radius: var(--em-r-lg);
  box-shadow: var(--em-shadow-md), var(--em-shadow-inset);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.em-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--em-r-md);
  font: 700 14px/1.1 var(--em-font-sans);
  letter-spacing: .005em;
  text-decoration: none;
  border: 1px solid var(--em-line-strong);
  background: var(--em-surface-2);
  color: var(--em-text);
  box-shadow: var(--em-shadow-sm);
  transition: transform var(--em-fast), background var(--em-fast),
              border-color var(--em-fast), box-shadow var(--em-fast);
  cursor: pointer;
}
.em-btn:hover{
  transform: translateY(-2px);
  border-color: var(--em-line-brand);
  background: var(--em-surface-3);
}

.em-btn--primary{
  background: linear-gradient(135deg, var(--em-brand) 0%, var(--em-brand-hover) 100%);
  color: var(--em-brand-ink);
  border-color: transparent;
  box-shadow: var(--em-shadow-brand);
}
.em-btn--primary:hover{
  filter: brightness(1.04);
  box-shadow: 0 18px 44px rgba(20,184,102,.26);
}

.em-btn--ghost{
  background: transparent;
  border-color: var(--em-line);
  color: var(--em-text-soft);
}
.em-btn--ghost:hover{
  color: var(--em-text);
  border-color: var(--em-line-brand);
}

.em-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--em-r-pill);
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  color: var(--em-text-soft);
  font: 800 11px/1 var(--em-font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.em-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--em-line-strong), transparent);
  border: 0;
  margin: var(--em-s-7) 0;
}

/* Fondo "premium" reutilizable para secciones hero/landing */
.em-bg-premium{
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--em-brand-glow-2), transparent 60%),
    linear-gradient(180deg, #050709 0%, #0a0d11 50%, #060809 100%);
}

/* ============================================================
   PERFORMANCE — render diferido fuera de viewport
   Aplicar a secciones largas/pesadas (debajo del fold) para que
   el navegador no calcule layout/paint hasta que estén cerca de
   la pantalla. Ahorra mucho TBT en páginas largas (presentacion,
   kaisen, cursospremium).
   ============================================================ */
.em-defer{
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* Para imágenes/iframes que no requieren reservar tamaño exacto */
.em-defer-sm{
  content-visibility: auto;
  contain-intrinsic-size: 1px 400px;
}

/* ============================================================
   FALLBACK para imágenes rotas — solo en thumbs/tiles de cursos.
   Antes era global y rompía texto alternativo en formularios de
   login y otros componentes WP/WooCommerce.
   ============================================================ */
.thumb img,
.em-pl-thumb img,
.tile img{
  /* Si la imagen no carga, el browser NO muestra el icono roto;
     muestra el gradiente oscuro del thumb. */
  background: linear-gradient(180deg, #10161c, #0d1218);
  font-size: 0;
  color: transparent;
}

/* ============================================================
   NATIVE APP FEEL — comportamientos, no estilos visuales.
   Solo afectan cómo el navegador responde a gestos / navegación.
   ============================================================ */

/* 1) Quita el rebote / pull-to-refresh blanco al hacer scroll en móvil.
      El usuario ya no ve el "flash" de fondo blanco al tirar la página. */
html{
  overscroll-behavior-y: none;
}

/* 2) Elimina el delay de 300ms en taps de iOS y mejora la respuesta.
      Aplica a todo lo táctil: links, botones, controles de form, dock. */
a, button, [role="button"], input, select, textarea, label, summary{
  touch-action: manipulation;
}

/* 3) Feedback visual inmediato al tocar (como apps nativas).
      Sutil: 0.7 opacidad solo durante el tap, vuelve al 100% al soltar. */
@media (hover: none) and (pointer: coarse){
  a:active,
  button:active,
  [role="button"]:active{
    opacity: .72;
    transition: opacity .05s ease;
  }
}

/* 4) Safe areas para iPhone con notch / home indicator.
      Variables que cualquier elemento fijo puede consumir. */
:root{
  --em-safe-top:    env(safe-area-inset-top, 0px);
  --em-safe-right:  env(safe-area-inset-right, 0px);
  --em-safe-bottom: env(safe-area-inset-bottom, 0px);
  --em-safe-left:   env(safe-area-inset-left, 0px);
}

/* 5) View Transitions API — fade suave entre páginas (Chrome/Edge/Safari TP).
      En navegadores que no la soportan, fallback es navegación normal sin error. */
@view-transition{
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .22s;
  animation-timing-function: var(--em-ease);
}

::view-transition-old(root){
  animation-name: em-fade-out;
}
::view-transition-new(root){
  animation-name: em-fade-in;
}

@keyframes em-fade-out{
  to{ opacity: 0; }
}
@keyframes em-fade-in{
  from{ opacity: 0; }
}