/* ========================================
   MOTION · capa de movimiento compartida
   Se carga al final de <head> en TODAS las páginas,
   así gana sobre los estilos de cada sección y el
   comportamiento es idéntico en todo el sitio.
   ======================================== */

:root {
    --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Tipografía de los títulos principales (h1) ----------
   Una sola fuente para el h1 de TODAS las páginas. Para volver a
   Playfair basta con borrar este bloque. */
:root { --font-h1: 'Fraunces', 'Playfair Display', Georgia, serif; }
h1,
.hero-title,
.curso-title,
.qs-title,
.hero__title {
    font-family: var(--font-h1);
    font-optical-sizing: auto;
}

/* ---------- 1) Entrada escalonada de los hero ---------- */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

:is(.hero__inner, .curso-hero > .container, .qs-hero > .container,
    .docentes-hero > .container, .ea-hero > .container) > *,
.section.hero :is(.eyebrow, .hero__title, .hero__subtitle, .hero__scroll) {
    animation: riseIn .75s var(--ease-out) both;
}

:is(.hero__inner, .curso-hero > .container, .qs-hero > .container,
    .docentes-hero > .container, .ea-hero > .container) > :nth-child(1) { animation-delay: .05s; }
:is(.hero__inner, .curso-hero > .container, .qs-hero > .container,
    .docentes-hero > .container, .ea-hero > .container) > :nth-child(2) { animation-delay: .16s; }
:is(.hero__inner, .curso-hero > .container, .qs-hero > .container,
    .docentes-hero > .container, .ea-hero > .container) > :nth-child(3) { animation-delay: .27s; }
:is(.hero__inner, .curso-hero > .container, .qs-hero > .container,
    .docentes-hero > .container, .ea-hero > .container) > :nth-child(4) { animation-delay: .38s; }
.section.hero .eyebrow       { animation-delay: .05s; }

/* Contacto no tiene hero: entra el formulario y el panel de datos */
.contacto-content > * { animation: riseIn .75s var(--ease-out) both; }
.contacto-content > :nth-child(1) { animation-delay: .05s; }
.contacto-content > :nth-child(2) { animation-delay: .18s; }

.section.hero .hero__title   { animation-delay: .16s; }
.section.hero .hero__subtitle{ animation-delay: .27s; }
.section.hero .hero__scroll  { animation-delay: .45s; }

/* ---------- 2) Header que reacciona al scroll (desktop) ---------- */
.header {
    transition: background-color .35s ease, box-shadow .35s ease;
}

@media (min-width: 769px) {
    /* html y body con overflow-x:hidden convertían a <body> en un contenedor de
       scroll y el header sticky nunca se quedaba fijo. "clip" corta el desborde
       horizontal igual, sin crear ese contenedor. */
    html, body { overflow-x: clip; }

    /* Los anclas (#intensivos, #cursos...) no quedan tapados por el header fijo */
    section[id] { scroll-margin-top: 110px; }

    .header .header-top-inner { transition: padding .35s var(--ease-out); }
    .header .logo img { transition: width .35s var(--ease-out), height .35s var(--ease-out); }
    .header .logo span { transition: font-size .35s var(--ease-out); }

    .header.scrolled {
        background-color: rgba(8, 64, 32, .92);
        -webkit-backdrop-filter: blur(12px) saturate(1.2);
        backdrop-filter: blur(12px) saturate(1.2);
    }
    .header.scrolled .header-top-inner { padding: 6px 0; }
    .header.scrolled .logo img { width: 36px; height: 36px; }
    .header.scrolled .logo span { font-size: 1.1rem; }
}

/* ---------- 3) Cards vivas: mismo lenguaje en todo el sitio ---------- */
.curso-card,
.resena-card,
.docente-full-card,
.qs-valor-card,
.qs-fundador-card {
    transition: transform .35s var(--ease-out), border-color .35s ease,
                box-shadow .35s ease, opacity .35s ease;
}

.curso-card:hover,
.resena-card:hover,
.docente-full-card:hover,
.qs-valor-card:hover,
.qs-fundador-card:hover {
    border-color: rgba(232, 212, 160, .6);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .28),
                0 0 0 1px rgba(232, 212, 160, .22),
                0 0 34px rgba(232, 212, 160, .13);
}

/* Versión sobre fondo claro (Capacitaciones): borde dorado + anillo suave */
.choose__card { transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; }
.choose__card:hover {
    border-color: rgba(232, 212, 160, .95);
    box-shadow: 0 30px 70px -30px rgba(8, 64, 32, .45),
                0 0 0 1px rgba(232, 212, 160, .55);
}

.curso-card h3 { transition: color .3s ease; }
.curso-card:hover h3 { color: var(--dorado); }

.curso-image img { transition: transform .6s var(--ease-out); }
.curso-card:hover .curso-image img { transform: scale(1.07); }

/* Botón "Ver más": flecha que se desliza */
.btn-taller-cta::after {
    content: "→";
    display: inline-block;
    margin-left: 8px;
    transition: transform .3s var(--ease-out);
}
.btn-taller-cta:hover::after,
.curso-card:hover .btn-taller-cta::after {
    transform: translateX(5px);
}

/* ---------- Botones del hero: jerarquía clara ----------
   1. Ver talleres  -> verde sólido (principal, sin cambios)
   2. Intensivos    -> verde oscuro con texto dorado y punto "en vivo"
   3. Contáctanos   -> transparente con marco (estilo original)       */
.hero-buttons { align-items: center; gap: 1rem 1.25rem; }

.hero-buttons .btn-intensivo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--verde-oscuro);
    border-color: var(--verde-oscuro);
    color: var(--dorado);
    box-shadow: 0 10px 28px -12px rgba(8, 64, 32, .65);
    animation: none;
}
.hero-buttons .btn-intensivo:hover {
    background-color: var(--verde-medio);
    border-color: var(--verde-medio);
    color: var(--dorado);
}
.hero-buttons .btn-intensivo::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dorado);
    animation: liveDot 2s ease-out infinite;
}
@keyframes liveDot {
    0%   { box-shadow: 0 0 0 0 rgba(232, 212, 160, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(232, 212, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 212, 160, 0); }
}

/* Subtítulo del hero: más contraste */
.hero-subtitle {
    color: #26352c;
    font-weight: 500;
}

/* ---------- 4) Cartel superior de intensivos ---------- */
.promo-bar {
    position: relative;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(100deg, var(--dorado) 0%, #f3e6bd 45%, var(--dorado) 100%);
    background-size: 220% 100%;
    animation: promoShine 9s ease-in-out infinite alternate;
    color: var(--verde-oscuro);
    font-family: var(--font-texto);
    font-size: .86rem;
    overflow: hidden;
    max-height: 60px;
    transition: max-height .4s var(--ease-out), opacity .3s ease;
}

@keyframes promoShine {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

.promo-bar.is-closing { max-height: 0; opacity: 0; }

.promo-bar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
    padding: 10px 48px 10px 20px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .01em;
}

.promo-bar__tag {
    background: var(--verde-oscuro);
    color: var(--dorado);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    padding: 5px 10px 4px;
    border-radius: 50px;
}

.promo-bar__cta {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(8, 64, 32, .45);
    transition: text-decoration-color .25s ease;
}
.promo-bar__cta i { display: inline-block; font-style: normal; transition: transform .3s var(--ease-out); }
.promo-bar__link:hover .promo-bar__cta { text-decoration-color: var(--verde-oscuro); }
.promo-bar__link:hover .promo-bar__cta i { transform: translateX(4px); }

.promo-bar__close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--verde-oscuro);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.promo-bar__close:hover { background: rgba(8, 64, 32, .12); }

@media (max-width: 640px) {
    .promo-bar { font-size: .78rem; }
    .promo-bar__link { gap: 8px; padding: 9px 40px 9px 14px; }
    .promo-bar__cta { display: none; }
}

/* ---------- Respeto a "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}