/* ============================================================
   BARISTA ACADEMY — MODERN LAYER 2026
   Editorial · alto contraste · movimiento sutil
   Se carga DESPUÉS de styles.css y enhancements.css
   ============================================================ */

:root{
  /* Fondo espresso más profundo y frío en las sombras */
  --m-ink:#140c07;
  --m-ink-2:#1f130c;
  --m-ink-3:#2b1a11;
  /* Papel cálido, casi textil */
  --m-paper:#faf5ec;
  --m-paper-2:#f2e9da;
  --m-line:rgba(20,12,7,.10);
  --m-line-soft:rgba(20,12,7,.06);
  /* Acentos: ámbar saturado + jade para señales de impacto */
  --m-amber:#f0a92c;
  --m-amber-hi:#ffc75a;
  --m-clay:#c25a35;
  --m-jade:#2f5d4a;
  /* Sombras con tinte cálido, no grises */
  --m-sh-1:0 1px 2px rgba(20,12,7,.05),0 8px 24px -12px rgba(20,12,7,.18);
  --m-sh-2:0 2px 4px rgba(20,12,7,.06),0 24px 48px -20px rgba(20,12,7,.28);
  --m-sh-3:0 40px 80px -32px rgba(20,12,7,.45);
  --m-spring:cubic-bezier(.22,1,.36,1);
  --m-r:18px;
  --m-r-lg:28px;
}

html{ -webkit-text-size-adjust:100% }

body{
  background:var(--m-paper);
  color:var(--m-ink);
  letter-spacing:-0.006em;
}

/* Grano fino global — le quita el aspecto "plantilla" */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- TIPOGRAFÍA: más grande, más apretada, más editorial ---------- */
h1,h2,h3,.section-head h2,.hero h1,.page-hero h1{
  letter-spacing:-0.035em;
  text-wrap:balance;
}
.hero h1{ font-size:clamp(2.9rem,7.2vw,6.4rem); line-height:.92; font-weight:300 }
.hero h1 em{ font-weight:500 }
.page-hero h1{ font-size:clamp(2.3rem,6vw,4.6rem); line-height:.96 }
.section-head h2{ font-size:clamp(2rem,4.6vw,3.7rem); line-height:1 }
.section-head p{ font-size:1.06rem; color:rgba(20,12,7,.62); max-width:56ch; margin-inline:auto }
.eyebrow{
  font-size:.7rem; letter-spacing:.22em; font-weight:700;
  display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:currentColor; opacity:.55;
}

/* ---------- HEADER: cristal, borde fino, sin bloque opaco ---------- */
.site-header{
  background:color-mix(in oklab, var(--m-ink) 78%, transparent)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(240,169,44,.14);
  box-shadow:none!important;
  transition:background .4s var(--m-spring),border-color .4s var(--m-spring);
}
.site-header__logo-text{ letter-spacing:-.02em }
.site-nav__link{ font-size:.9rem; font-weight:500; opacity:.85; transition:opacity .25s }
.site-nav__link:hover{ opacity:1 }
.site-nav__link::after{ height:1px; background:var(--m-amber-hi) }

/* ---------- BOTONES: pill, borde vivo, hover con resorte ---------- */
.btn{
  border-radius:999px; font-weight:600; letter-spacing:-.01em;
  transition:transform .45s var(--m-spring), box-shadow .45s var(--m-spring), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn--primary{
  background:var(--m-amber); color:var(--m-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -10px rgba(240,169,44,.75);
}
.btn--primary:hover{
  background:var(--m-amber-hi); transform:translateY(-3px) scale(1.015);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 20px 40px -14px rgba(240,169,44,.9);
}
.btn--ghost{ border:1px solid rgba(250,245,236,.28); backdrop-filter:blur(8px) }
.btn--ghost:hover{ border-color:var(--m-amber-hi); color:var(--m-amber-hi); transform:translateY(-2px) }
.btn--dark{ background:var(--m-ink); color:var(--m-paper) }
.btn--dark:hover{ background:var(--m-ink-3); transform:translateY(-2px) }

/* ---------- HERO: malla de gradientes + viñeta, sin degradado plano ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(240,169,44,.20) 0%, transparent 46%),
    radial-gradient(110% 90% at 88% 78%, rgba(194,90,53,.26) 0%, transparent 52%),
    radial-gradient(90% 70% at 50% 120%, rgba(47,93,74,.22) 0%, transparent 60%),
    linear-gradient(168deg, var(--m-ink) 0%, var(--m-ink-2) 58%, var(--m-ink-3) 100%);
}
.hero::before{
  background-image:
    linear-gradient(rgba(250,245,236,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,245,236,.05) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.5;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}
.hero__badge{
  background:rgba(250,245,236,.07);
  border:1px solid rgba(240,169,44,.32);
  backdrop-filter:blur(10px);
  font-size:.74rem; letter-spacing:.13em; border-radius:999px;
}
.hero__lead{ font-size:clamp(1.06rem,1.5vw,1.22rem); color:rgba(250,245,236,.78) }
.hero__image{ border-radius:var(--m-r-lg); box-shadow:var(--m-sh-3) }
.hero__trust{ border-top:1px solid rgba(250,245,236,.12) }
.hero__trust-num{ font-size:1.5rem; letter-spacing:-.03em; color:var(--m-amber-hi) }
.hero__trust-label{ font-size:.7rem; letter-spacing:.13em; color:rgba(250,245,236,.5) }
.hero__visual-card{
  border-radius:var(--m-r); box-shadow:var(--m-sh-2);
  border:1px solid var(--m-line-soft);
}

/* ---------- PAGE HERO ---------- */
.page-hero,.page-hero--gift{
  background:
    radial-gradient(110% 80% at 10% 10%, rgba(240,169,44,.18) 0%, transparent 45%),
    radial-gradient(110% 80% at 90% 85%, rgba(194,90,53,.22) 0%, transparent 50%),
    linear-gradient(168deg, var(--m-ink) 0%, var(--m-ink-2) 60%, var(--m-ink-3) 100%);
}
.page-hero__tagline{
  border-radius:999px; backdrop-filter:blur(10px);
  border:1px solid rgba(240,169,44,.3)!important;
  background:rgba(250,245,236,.07)!important;
  color:var(--m-amber-hi)!important;
}
.page-hero__breadcrumb{ font-size:.74rem; letter-spacing:.14em; display:flex; justify-content:center; flex-wrap:wrap; width:100% }

/* ---------- TARJETAS: borde fino, radio grande, hover elevado ---------- */
.course-card,.testimonial,.occasion-tile,.config-panel,.catalog__widget,
.booking__widget,.risk-free,.usp__item,.sidebar-box,.mag-card,.blog-card{
  border-radius:var(--m-r)!important;
}
.course-card{
  border:1px solid var(--m-line)!important;
  box-shadow:var(--m-sh-1)!important;
  transition:transform .5s var(--m-spring), box-shadow .5s var(--m-spring), border-color .35s;
}
.course-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--m-sh-2)!important;
  border-color:rgba(240,169,44,.45)!important;
}
/* Combo (Bestseller): dunkler Grund, damit er sich abhebt und gut lesbar bleibt */
.course-card--featured{
  border-color:var(--m-amber)!important;
  background:linear-gradient(168deg,#1f130c 0%,#2b1a11 55%,#3a2416 100%)!important;
  color:var(--m-paper)!important;
}
.course-card--featured .course-card__title{ color:var(--m-amber-hi)!important }
.course-card--featured .course-card__subtitle{ color:rgba(250,245,236,.75)!important }
.course-card--featured .course-card__price,
.course-card--featured .course-card__price-num,
.course-card--featured .course-card__price-currency{ color:#fff!important }
.course-card--featured .course-card__price-old{ color:rgba(250,245,236,.55)!important }
.course-card--featured .course-card__features li{ color:rgba(250,245,236,.92)!important }
/* .course-card__check ist ein gefülltes goldenes Plättchen mit dunkler Glyphe —
   die Glyphe NICHT umfärben, sonst steht Amber auf Amber. */
.course-card--featured .course-card__icon{ filter:none }
.course-card--featured .course-card__btn{
  background:var(--m-amber)!important; color:var(--m-ink)!important; border-color:var(--m-amber)!important;
}
.course-card--featured .course-card__btn:hover{ background:var(--m-amber-hi)!important }
.course-card__badge{ border-radius:999px; letter-spacing:.12em; font-size:.66rem; background:var(--m-ink)!important; color:var(--m-amber-hi)!important; font-weight:700 }
.course-card__price-num{ letter-spacing:-.045em }
.course-card__btn{
  border-radius:999px;
  transition:transform .4s var(--m-spring), background .3s, color .3s;
}
.course-card__btn:hover{ transform:translateY(-2px) }

/* ---------- SECCIONES: ritmo y separadores finos ---------- */
.courses,.occasions,.compare,.testimonials,.faq,.catalog,.promises{
  border-top:1px solid var(--m-line-soft);
}
.usp{ background:var(--m-paper-2); border-color:var(--m-line-soft) }
.usp__item{ border-right:1px solid var(--m-line-soft) }
.usp__icon{ border-radius:14px; box-shadow:var(--m-sh-1) }

/* ---------- FAQ: sin caja, línea fina, + que gira ---------- */
.faq__item{
  border:0!important; border-bottom:1px solid var(--m-line)!important;
  border-radius:0!important; background:transparent!important;
}
.faq__question{ font-weight:600; letter-spacing:-.015em; padding-block:1.15rem }
.faq__icon{ transition:transform .4s var(--m-spring) }
.faq__item[open] .faq__icon{ transform:rotate(45deg) }

/* ---------- TABLAS / COMPARATIVAS ---------- */
.compare__table{ border-radius:var(--m-r-lg)!important; border:1px solid var(--m-line)!important }
.compare__cell--head{ background:var(--m-ink)!important }
.compare__cell--head.is-featured{ background:var(--m-clay)!important }
.portal-compare__col--us{ background:var(--m-ink)!important }

/* ---------- FRANJAS OSCURAS: malla en vez de degradado plano ---------- */
.steps,.booking,.final-cta,.bildung:not(.bildung--light),.mx-milestones{
  background:
    radial-gradient(100% 80% at 85% 12%, rgba(240,169,44,.16) 0%, transparent 48%),
    radial-gradient(100% 80% at 12% 88%, rgba(194,90,53,.20) 0%, transparent 52%),
    linear-gradient(165deg, var(--m-ink) 0%, var(--m-ink-2) 62%, var(--m-ink-3) 100%)!important;
}
.step__num{ font-size:3.4rem; letter-spacing:-.05em; color:var(--m-amber) }

/* ---------- FINAL CTA ---------- */
.final-cta__inner h2{ font-size:clamp(2.1rem,5vw,3.6rem); line-height:1 }
.final-cta__scarcity{ backdrop-filter:blur(10px) }

/* ---------- TOPBAR: más discreta ---------- */
.topbar{
  background:linear-gradient(90deg, var(--m-clay) 0%, #a8481f 55%, var(--m-clay) 100%);
  font-size:.78rem; letter-spacing:.01em;
}

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--m-ink)!important }
.site-footer__title{ font-size:.72rem; letter-spacing:.18em }
.site-footer__links a{ opacity:.72; transition:opacity .25s, transform .3s var(--m-spring); display:inline-block }
.site-footer__links a:hover{ opacity:1; transform:translateX(3px) }
.site-footer__social a{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(250,245,236,.07); border:1px solid rgba(250,245,236,.12);
  transition:transform .4s var(--m-spring), background .3s;
}
.site-footer__social a:hover{ transform:translateY(-3px); background:rgba(240,169,44,.2) }

/* ---------- REVEAL AL SCROLL ---------- */
/* Gate de seguridad: el contenido solo se oculta si modern.js está realmente
   ejecutándose. Si el script falla, no carga o el usuario tiene JS desactivado,
   todo queda visible. */
@media (prefers-reduced-motion:no-preference){
  html.js-reveal [data-reveal]{
    opacity:0; transform:translateY(26px);
    transition:opacity .8s var(--m-spring), transform .8s var(--m-spring);
  }
  html.js-reveal [data-reveal].is-in{ opacity:1; transform:none }
  html.js-reveal [data-reveal][data-reveal-d="1"]{ transition-delay:.08s }
  html.js-reveal [data-reveal][data-reveal-d="2"]{ transition-delay:.16s }
  html.js-reveal [data-reveal][data-reveal-d="3"]{ transition-delay:.24s }
}

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float{
  border-radius:18px!important;
  box-shadow:0 12px 32px -10px rgba(37,211,102,.7)!important;
  transition:transform .45s var(--m-spring);
}
.whatsapp-float:hover{ transform:translateY(-4px) scale(1.05) }

/* ---------- Enlaces por defecto (para lo que añada el editor) ---------- */
main a:not([class]),.faq__answer a,.story__text a{
  color:var(--m-clay); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; transition:color .25s;
}
main a:not([class]):hover,.faq__answer a:hover,.story__text a:hover{ color:var(--m-ink) }

/* ---------- Foco visible y accesible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--m-amber); outline-offset:3px; border-radius:6px;
}

/* ---------- Móvil: tipografía más grande y fluida ---------- */
@media (max-width:640px){
  html{ font-size:17px }
  body{ line-height:1.65 }
  p,li,.faq__answer,.spec__value,.incl__list li,.outcome__text,.learn__text,.mx-org__text,.mx-more__card p,.step__text,.why__item-text,.story__text,.course-card__features li,.testimonial__text,.faq__question{ font-size:1.02rem }
  .hero h1{ font-size:clamp(2.5rem,11vw,3.4rem); line-height:1.02 }
  .page-hero h1{ font-size:clamp(2.1rem,9.5vw,3rem); line-height:1.05 }
  .hero__lead,.page-hero__lead{ font-size:1.12rem; line-height:1.6 }
  .section-head h2{ font-size:clamp(1.9rem,8.5vw,2.6rem); line-height:1.08 }
  .section-head p{ font-size:1.05rem }
  .eyebrow{ font-size:.78rem }
  .hero__badge,.page-hero__tagline{ font-size:.82rem }
  .hero__trust-num{ font-size:1.7rem }
  .hero__trust-label{ font-size:.78rem }
  .btn{ font-size:1.02rem; padding:1.05rem 1.6rem; min-height:52px }
  .site-header__cta{ font-size:.92rem; padding:.75rem 1.2rem }
  .course-card__title,.outcome__title,.learn__title,.incl__title,.mx-org__name,.step__title,.why__item-title{ font-size:1.3rem }
  .course-card__price-num{ font-size:2.8rem }
  .step__num{ font-size:2.6rem }
  .faq__question{ padding-block:1.25rem; font-size:1.05rem }
  .site-footer__links a,.site-footer__about,.site-footer__contact{ font-size:.98rem }
  .topbar{ font-size:.82rem; height:34px }
  body.has-topbar .site-header{ top:34px }
  body.has-topbar .mobile-menu{ top:calc(var(--header-height) + 34px) }
  .mobile-menu__link{ font-size:1.9rem }
  .sticky-cta__price{ font-size:1.5rem }
  .sticky-cta__price small{ font-size:.78rem }
  .sticky-cta .btn{ font-size:.98rem }
  .inquiry__field>span{ font-size:.8rem }
  .inquiry__field input,.inquiry__field select,.inquiry__field textarea{ font-size:1.05rem }
  body::after{ opacity:.025 }
}
@media (max-width:400px){
  html{ font-size:16px }
  .hero h1{ font-size:2.3rem }
  .page-hero h1{ font-size:2rem }
}