/* =====================================================================
   1ST AVENUE — Sistema de diseño
   Todos los colores son tokens: cambia aquí y cambia toda la web.
   ===================================================================== */
:root{
  /* --- Paleta (provisional, inspirada en la referencia + tema británico).
         Reemplazar por los colores de marca de 1st Avenue cuando lleguen. --- */
  --ink:#0B2240;          /* azul marino principal (textos y fondos oscuros) */
  --ink-2:#0E2C53;        /* navy un poco más claro para degradados */
  --accent:#D81E3F;       /* rojo británico (CTA, subrayados) */
  --accent-dark:#B01531;
  --gold:#E8B23A;         /* dorado (detalles, estrellas, badges) */
  --paper:#FFFFFF;
  --mist:#F4F6F9;         /* gris muy claro de secciones */
  --line:#E6EAF0;         /* líneas/bordes suaves */
  --muted:#5B6678;        /* texto secundario */

  /* Tipografía */
  --font-sans:"Agrandir","Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Agrandir Wide","Jost",var(--font-sans);

  /* Escala / ritmo */
  --radius:16px;
  --radius-pill:999px;
  --shadow-sm:0 2px 10px rgba(11,34,64,.06);
  --shadow:0 18px 50px -12px rgba(11,34,64,.22);
  --shadow-lg:0 40px 90px -20px rgba(11,34,64,.35);
  --container:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------- Base ----------------------------- */
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.avenue-display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.05;
}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

/* Scrollbar discreto */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* ------------------------- Utilidades --------------------------- */
.avenue-eyebrow,.avenue-eyebrow .elementor-heading-title{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase;
  color:var(--accent)!important;
}
.avenue-kicker-line::before{
  content:"";width:28px;height:2px;background:var(--accent);display:inline-block;margin-right:.6em;vertical-align:middle;
}
/* Palabra subrayada "a mano" (como la referencia) */
.avenue-underline{position:relative;white-space:nowrap}
.avenue-underline::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.34em;
  background:var(--gold);border-radius:3px;z-index:-1;opacity:.95;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);
}
.avenue-underline.is-drawn::after{transform:scaleX(1)}
.avenue-underline--red::after{background:var(--accent);opacity:.25}

/* ------------------------- Botones ------------------------------ */
/* a.avenue-btn = mi HTML ; .avenue-btn .elementor-button = widget botón de Elementor */
a.avenue-btn,
.avenue-btn .elementor-button{
  display:inline-flex!important;align-items:center;gap:.6em;
  padding:.95em 1.6em!important;border-radius:var(--radius-pill)!important;
  font-weight:700!important;font-size:1rem!important;letter-spacing:.01em;line-height:1!important;
  background:var(--accent)!important;color:#fff!important;border:0!important;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s!important;
  box-shadow:0 10px 24px -8px rgba(216,30,63,.55);text-decoration:none;
}
a.avenue-btn:hover,
.avenue-btn .elementor-button:hover{transform:translateY(-2px);background:var(--accent-dark)!important;box-shadow:0 16px 34px -8px rgba(216,30,63,.6)}
/* Ghost */
a.avenue-btn--ghost,
.avenue-btn--ghost .elementor-button{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 2px var(--line)}
a.avenue-btn--ghost:hover,
.avenue-btn--ghost .elementor-button:hover{box-shadow:inset 0 0 0 2px var(--ink)!important;background:transparent!important}
.avenue-btn--ghost .elementor-button *{color:inherit!important}
/* Dark */
a.avenue-btn--dark,
.avenue-btn--dark .elementor-button{background:var(--ink)!important}
a.avenue-btn--dark:hover,
.avenue-btn--dark .elementor-button:hover{background:var(--ink-2)!important}

/* --------------------- Tarjetas / superficies ------------------- */
.avenue-card{
  background:var(--paper);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  overflow:hidden;
}
.avenue-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

/* --------------------- Contadores / stats ----------------------- */
.avenue-stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--accent);line-height:1}
.avenue-stat__label{color:var(--muted);font-size:.95rem;margin-top:.4em}

/* ============================================================= */
/*  MOTOR DE EFECTOS — estados base (los activa effects.js)       */
/* ============================================================= */
@media (prefers-reduced-motion:no-preference){
  /* Estado inicial por CLASE (Elementor). Solo se ocultan si hay JS activo
     (html.avenue-js); sin JS, el contenido se ve siempre. */
  html.avenue-js .avenue-reveal{opacity:0}
  html.avenue-js .avenue-stagger>*{opacity:0}

  /* Revelado al hacer scroll */
  [data-reveal]{opacity:0;transform:translateY(28px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform}
  [data-reveal].is-in{opacity:1;transform:none}
  [data-reveal="left"]{transform:translateX(-36px)}
  [data-reveal="right"]{transform:translateX(36px)}
  [data-reveal="zoom"]{transform:scale(.94)}
  [data-reveal].is-in{transform:none}

  /* Stagger para hijos (tarjetas, listas) */
  [data-stagger]>*{opacity:0;transform:translateY(26px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  [data-stagger].is-in>*{opacity:1;transform:none}

  /* Parallax suave */
  [data-parallax]{will-change:transform}
}

/* Header con scroll (encogido / fondo) — clases que añade effects.js */
body.avenue-scrolled .avenue-header,
.avenue-header.is-stuck{box-shadow:var(--shadow-sm);backdrop-filter:saturate(1.2) blur(8px)}

/* Botón flotante WhatsApp */
.avenue-wa{
  position:fixed;right:18px;bottom:18px;z-index:9999;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  transition:transform .3s var(--ease)}
.avenue-wa:hover{transform:scale(1.08)}

/* ============================================================= */
/*  TIPOGRAFÍA — utilidades (se aplican como "Clase CSS" en Elementor) */
/* ============================================================= */
/* Selectores combinados: valen tanto si la clase está en el elemento (mi HTML)
   como si Elementor la pone en el wrapper del widget (.elementor-heading-title dentro). */
.avenue-h1,.avenue-h1 .elementor-heading-title{font-size:clamp(2.4rem,6vw,4.3rem)!important;line-height:1.02!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--ink)}
.avenue-h2,.avenue-h2 .elementor-heading-title{font-size:clamp(1.9rem,4vw,3rem)!important;line-height:1.08!important;font-weight:800!important;letter-spacing:-.015em!important;color:var(--ink)}
.avenue-h3,.avenue-h3 .elementor-heading-title{font-size:clamp(1.3rem,2.4vw,1.7rem)!important;font-weight:700!important;color:var(--ink)}
.avenue-lead,.avenue-lead p,.avenue-lead .elementor-widget-container{font-size:clamp(1.05rem,1.6vw,1.3rem)!important;line-height:1.6!important;color:var(--muted)}
.avenue-lead-light,.avenue-lead-light p,.avenue-lead-light *{color:rgba(255,255,255,.85)!important}
.avenue-white,.avenue-white *{color:#fff!important}
.avenue-accent,.avenue-accent .elementor-heading-title{color:var(--accent)!important}
.avenue-center{text-align:center}

/* ============================================================= */
/*  SECCIONES / COMPONENTES                                        */
/* ============================================================= */

/* Hero */
.avenue-hero{position:relative;overflow:hidden}
.avenue-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1200px 600px at 78% 12%,rgba(216,30,63,.20),transparent 60%),
             radial-gradient(900px 500px at 8% 90%,rgba(232,178,58,.12),transparent 55%)}
.avenue-hero>.elementor-container{position:relative;z-index:2}
.avenue-badge{display:inline-flex;align-items:center;gap:.55em;padding:.5em 1em;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(4px)}
.avenue-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,178,58,.25)}

/* Partners / certificadoras */
.avenue-partners img{filter:grayscale(1);opacity:.65;transition:all .4s var(--ease);max-height:52px;width:auto}
.avenue-partners img:hover{filter:none;opacity:1}

/* Stats */
.avenue-stats .elementor-counter-number-wrapper{font-family:var(--font-display);font-weight:800;color:var(--accent);
  font-size:clamp(2.6rem,5vw,3.8rem);line-height:1}
.avenue-stats .elementor-counter-title{color:var(--muted);font-weight:600;margin-top:.5em;font-size:.98rem}

/* Banner Cambridge */
.avenue-cambridge{position:relative;overflow:hidden}
.avenue-cambridge::before{content:"★";position:absolute;right:-10px;top:-30px;font-size:260px;line-height:1;
  color:rgba(255,255,255,.05);pointer-events:none}

/* Tarjetas método/cursos (icon-box) */
.avenue-feature .elementor-icon-box-icon{margin-bottom:1rem}
.avenue-feature .elementor-icon{background:rgba(216,30,63,.08);color:var(--accent)!important;
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-size:26px;transition:all .4s var(--ease)}
.avenue-feature:hover .elementor-icon{background:var(--accent);color:#fff!important;transform:rotate(-6deg) scale(1.06)}
.avenue-feature .elementor-icon-box-title{font-weight:700;font-size:1.2rem}

/* Tarjeta elegante (presencial/online, cursos) */
.avenue-tile{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.avenue-tile:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.avenue-tile--dark{background:linear-gradient(160deg,var(--ink),var(--ink-2));border:0}
.avenue-tile--dark *{color:#fff!important}

/* Reseñas */
.avenue-review{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.avenue-review:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.avenue-review .stars{color:var(--gold);letter-spacing:2px}

/* Separadores de sección con curva/altura */
.avenue-section{padding-top:clamp(3.5rem,8vw,7rem)!important;padding-bottom:clamp(3.5rem,8vw,7rem)!important}

/* ------------------------- Responsive --------------------------- */
@media (max-width:768px){
  :root{--radius:13px}
  .avenue-cambridge::before{font-size:160px}
}