/*
 * 14-hero-typography.css - Capa V2 de tipografia del hero (titulo base + capa de atmosfera) y enfasis en parrafos.
 * Origen: index.html, <style> #1 (lineas 403-470). Contenido identico al original.
 */
/* =========================================================
   V2 — HERO TYPOGRAPHY / SILHOUETTE ATMOSPHERE
   ========================================================= */
.hero-title{
  position:relative!important;
  isolation:isolate;
  display:block!important;
  width:max-content;
  max-width:96vw;
}
.hero-title-base,
.hero-title-atmo{
  display:block;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-transform:inherit;
}
.hero-title-base{
  color:#fff!important;
  position:relative;
  z-index:1;
}
.hero-title-atmo{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  color:transparent!important;
  background:
    radial-gradient(ellipse 32% 58% at 50% 70%,
      rgba(255,191,104,.98) 0%,
      rgba(255,130,74,.94) 28%,
      rgba(191,92,122,.9) 54%,
      rgba(111,91,156,.72) 76%,
      transparent 100%);
  -webkit-background-clip:text;
  background-clip:text;
  mix-blend-mode:screen;
  opacity:.94;
  filter:saturate(1.25) contrast(1.08);
  transform:translate3d(calc((var(--mx,50%) - 50%) * .018),calc((var(--my,50%) - 50%) * .012),0);
  transition:transform .18s ease-out,opacity .35s ease;
}
.hero-title-atmo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 25%,rgba(255,180,95,.5) 52%,rgba(255,112,73,.9) 76%,transparent 92%);
  -webkit-background-clip:text;
  background-clip:text;
  mix-blend-mode:screen;
  opacity:.5;
}
.hero-sub{
  font-size:clamp(15px,1.35vw,20px)!important;
  line-height:1.65!important;
  max-width:min(760px,82vw)!important;
  letter-spacing:.015em!important;
  opacity:.92!important;
  text-shadow:0 3px 24px rgba(0,0,0,.45);
}
.story-copy p strong,
.benefit p strong{
  color:#fff;
  font-weight:700;
}