/* ==========================================================================
   Capa opcional «cristal Apple» · El Presagio
   Se carga DESPUÉS de styles.css y solo cambia tres cosas:
     1. La navegación: a la izquierda la marca (el logo a color, tal cual, y
        «El Presagio» en Bodoni Moda); a la derecha una cápsula de Liquid Glass
        (iOS 26) con Casos · Nosotros y la burbuja de oro «Agenda una llamada».
        Andamio CSS válido en Chrome, Safari e iOS: tinte, canto de luz fino y
        desigual (dos focos: arriba-izquierda fuerte, abajo-derecha débil),
        bisel saturado, sombra exterior suave y sombra interior que da grosor.
        La refracción real (lensing) la añade apple.js solo en Chromium.
        Al pasar el puntero, una burbujita de cristal se desplaza entre los
        enlaces como el indicador de pestañas de iOS (apple.js la coloca).
     2. El botón de oro es cristal tintado de oro: oro casi opaco (el texto
        sigue a 9:1), canto de luz, grosor, brillo que sigue al puntero,
        hundimiento al pulsar y muelle al soltar.
     3. Las cifras cuentan con números tabulares (apple.js) y los H2 aparecen
        por líneas con un escalonado más corto. Párrafos y tarjetas, quietos.
   Radios: dos variables. La cápsula necesita radio enorme (es lo que hace que
   el cristal parezca una lente); el botón se cambia en UNA línea:
   --apple-r-boton: 999px (cápsula, en prueba) · 2px (esquina de la marca).
   ========================================================================== */
:root {
  --apple-r-capsula: 999px;
  --apple-r-boton: 999px;
  /* Muelle rápido con un rebote suave (oscilador k=400, c=24, 560 ms) */
  --spring-snap: linear(0, 0.026 2.1%, 0.094 4.2%, 0.19 6.3%, 0.651 14.6%, 0.752 16.7%, 0.84 18.8%, 0.914 20.8%, 0.973 22.9%, 1.02 25%, 1.053 27.1%, 1.076 29.2%, 1.094 33.3%, 1.08 39.6%, 1.004 56.3%, 1);
}

/* --------------------------------------------------------------------------
   1. Navegación · marca a la izquierda, cápsula de cristal a la derecha
   La barra (.ep-nav) es transparente, ocupa el ancho y se alinea con .ep-wrap.
   El material se define con variables en dos temas: claro (héroe y secciones
   claras) y oscuro (.is-oscuro, sobre las secciones de tinta). En oscuro el
   cristal es MÁS CLARO que el fondo, como en iOS en modo oscuro.
   -------------------------------------------------------------------------- */
.ep-nav {
  --nav-h: 38px; /* altura de las piezas dentro de la cápsula */
  /* Material claro */
  --tinte: 255 255 255;
  --tinte-a: .42;
  --burbuja-a: .66;
  --luz-1: rgb(255 255 255 / 1);     /* canto: foco arriba-izquierda */
  --luz-2: rgb(255 255 255 / .62);   /* canto: segundo foco abajo-derecha */
  --luz-0: rgb(255 255 255 / .16);   /* canto: tramos en sombra */
  --luz-sup: rgb(255 255 255 / .62); /* línea interior superior */
  --filo: rgb(31 26 20 / .08);       /* hairline exterior: el borde de la lente */
  --grosor: rgb(74 58 40 / .14);     /* línea interior inferior */
  --cuerpo: rgb(74 58 40 / .1);      /* sombra interior baja: grosor */
  --sombra: 0 1px 2px rgb(31 26 20 / .06), 0 12px 30px rgb(31 26 20 / .15);
  --sombra-burbuja: 0 1px 2px rgb(31 26 20 / .07), 0 4px 10px rgb(31 26 20 / .08);
  --reflejo: linear-gradient(160deg, rgb(255 255 255 / .5), rgb(255 255 255 / .1) 38%, transparent 62%);
  top: 0;
  gap: 16px;
  padding: 12px max(clamp(24px, 5vw, 64px), calc((100% - 1240px) / 2));
  background-color: transparent;
  box-shadow: none;
  transition: color .4s ease, padding .45s var(--ease-presagio);
}

/* La barra nunca se pinta: el cristal es la cápsula */
.ep-nav.is-scrolled,
.ep-nav.is-oscuro {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.ep-nav.is-scrolled { --nav-h: 34px; padding-top: 8px; padding-bottom: 8px; }

/* Material oscuro */
.ep-nav.is-oscuro {
  --tinte-a: .1;
  --burbuja-a: .16;
  --luz-1: rgb(255 255 255 / .62);
  --luz-2: rgb(255 255 255 / .32);
  --luz-0: rgb(255 255 255 / .07);
  --luz-sup: rgb(255 255 255 / .3);
  --filo: rgb(0 0 0 / .4);
  --grosor: rgb(0 0 0 / .35);
  --cuerpo: rgb(0 0 0 / .25);
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 14px 34px rgb(0 0 0 / .42);
  --sombra-burbuja: 0 1px 2px rgb(0 0 0 / .25), 0 4px 10px rgb(0 0 0 / .25);
  --reflejo: linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .03) 38%, transparent 62%);
}

/* Material de cristal: la cápsula siempre; la marca solo al bajar */
.ep-nav__links,
.ep-nav__marca {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border-radius: var(--apple-r-capsula);
}

.ep-nav__links,
.ep-nav.is-scrolled .ep-nav__marca {
  background-color: rgb(var(--tinte) / var(--tinte-a));
  /* Blur corto: cristal, no plástico esmerilado. Saturación para que no quede gris. */
  -webkit-backdrop-filter: blur(7px) saturate(185%) brightness(1.06);
  backdrop-filter: blur(7px) saturate(185%) brightness(1.06);
  box-shadow:
    inset 0 1px 1px var(--luz-sup),            /* línea de luz superior */
    inset 0 -1px 1px var(--grosor),            /* grosor inferior */
    inset 0 -9px 14px -10px var(--cuerpo),     /* sombra interior baja */
    0 0 0 1px var(--filo),                     /* hairline: el borde de la lente */
    var(--sombra);                             /* sombra exterior suave */
}

/* Canto de luz fino y desigual (anillo de 1,5 px enmascarado al borde) con
   bisel: más saturación y brillo justo en el filo, lo más parecido al lensing
   sin url(). Lo ven Safari e iOS. */
.ep-nav__links::before,
.ep-nav__marca::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--luz-1) 0%, var(--luz-0) 30%, var(--luz-0) 64%, var(--luz-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ep-nav__links::before,
.ep-nav.is-scrolled .ep-nav__marca::before {
  -webkit-backdrop-filter: blur(1px) saturate(230%) brightness(1.25);
  backdrop-filter: blur(1px) saturate(230%) brightness(1.25);
}

/* Reflejo direccional: la luz entra por arriba a la izquierda */
.ep-nav__links::after,
.ep-nav__marca::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--reflejo);
}

.ep-nav.is-oscuro .ep-nav__links::after,
.ep-nav.is-oscuro .ep-nav__marca::after { mix-blend-mode: screen; }

/* La pastilla de la marca aparece al bajar */
.ep-nav__marca::before,
.ep-nav__marca::after { opacity: 0; transition: opacity .4s ease; }
.ep-nav.is-scrolled .ep-nav__marca::before,
.ep-nav.is-scrolled .ep-nav__marca::after { opacity: 1; }

/* Marca: el logo a color (tal cual, sin máscara) + «El Presagio» en Bodoni Moda */
.ep-nav__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--nav-h) + 10px);
  margin-left: -12px; /* la pastilla sobresale; el logo queda al hilo del contenido */
  padding: 0 14px 0 10px;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  color: inherit;
  transition:
    color .4s ease, background-color .4s ease, box-shadow .4s ease,
    height .45s var(--ease-presagio);
}

.ep-nav__logo {
  flex: none;
  display: block;
  width: auto;
  height: 34px;
}

.ep-nav__logo,
.ep-nav__nombre { position: relative; z-index: 1; }
.ep-nav__nombre { translate: 0 1px; } /* óptico: la Bodoni asienta algo alta */

/* Cápsula */
.ep-nav__links {
  gap: 2px;
  padding: 5px 5px 5px 6px;
  transition: background-color .4s ease, box-shadow .4s ease;
}

.ep-nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 14px;
  border-radius: var(--apple-r-capsula);
  line-height: 1;
  opacity: .82;
  transition: background-color .18s ease-out, opacity .3s ease, height .45s var(--ease-presagio);
}

/* Sin JS (o sin puntero fino) el enlace se marca él mismo */
.ep-nav__link:hover,
.ep-nav__link:focus-visible { background-color: rgb(31 26 20 / .07); opacity: 1; }
.ep-nav__link[aria-current="page"] { opacity: 1; background-color: rgb(31 26 20 / .06); }
.ep-nav.is-oscuro .ep-nav__link:hover,
.ep-nav.is-oscuro .ep-nav__link:focus-visible { background-color: rgb(255 255 255 / .12); }
.ep-nav.is-oscuro .ep-nav__link[aria-current="page"] { background-color: rgb(255 255 255 / .1); }

/* Con la burbuja (apple.js), el enlace no se pinta: lo hace la burbuja */
.ep-nav__links.has-burbuja .ep-nav__link:hover,
.ep-nav__links.has-burbuja .ep-nav__link:focus-visible,
.ep-nav__links.has-burbuja .ep-nav__link[aria-current="page"] { background-color: transparent; }

/* Burbujita de cristal que se desplaza entre los enlaces (indicador de
   pestañas de iOS). apple.js la crea, la mide y la mueve con transform. */
.ep-nav__burbuja {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--nav-h);
  border-radius: var(--apple-r-capsula);
  pointer-events: none;
  opacity: 0;
  background-color: rgb(var(--tinte) / var(--burbuja-a));
  box-shadow:
    inset 0 1px 1px var(--luz-sup),
    inset 0 -1px 1px var(--grosor),
    0 0 0 1px var(--filo),
    var(--sombra-burbuja);
  transition:
    transform .55s var(--spring-snap),
    width .55s var(--spring-snap),
    opacity .22s ease,
    background-color .4s ease, box-shadow .4s ease;
}

.ep-nav__burbuja::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--luz-1) 0%, var(--luz-0) 32%, var(--luz-0) 66%, var(--luz-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ep-nav__burbuja.is-visible { opacity: 1; }
.ep-nav__burbuja.is-salto { transition: none; } /* aparece en su sitio, sin deslizar desde cero */

/* La burbuja de oro: cristal tintado de oro (#E8B939 al 92 %, texto #1F1A14 · ≥ 8:1
   sobre cualquier fondo de la web). Mismo material que .ep-btn. */
.ep-nav__cta {
  --mx: 50%;
  --my: 30%;
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  margin-left: 6px;
  padding: 0 18px;
  line-height: 1;
  border-radius: var(--apple-r-boton);
  color: #1F1A14;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .3), rgb(255 255 255 / .06) 48%, rgb(120 80 0 / .06) 100%),
    rgb(232 185 57 / .92);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .6),
    inset 0 -1px 1px rgb(120 80 0 / .3),
    inset 0 -8px 12px -8px rgb(120 80 0 / .2),
    0 0 0 1px rgb(120 80 0 / .14),
    0 1px 2px rgb(31 26 20 / .12),
    0 6px 16px rgb(31 26 20 / .12);
  transition:
    transform 560ms var(--spring-snap),
    box-shadow .25s ease-out,
    height .45s var(--ease-presagio);
}

/* Brillo especular que sigue al puntero (--mx/--my los pone apple.js) */
.ep-nav__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(110px 70px at var(--mx) var(--my), rgb(255 255 255 / .6), rgb(255 255 255 / .16) 45%, transparent 72%),
    radial-gradient(34px 34px at var(--mx) var(--my), rgb(255 253 235 / .55), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease-out;
}

/* Canto de luz desigual del oro */
.ep-nav__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .12) 34%, rgb(255 255 255 / .06) 66%, rgb(255 255 255 / .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ep-nav__cta:hover,
.ep-nav.is-oscuro .ep-nav__cta,
.ep-nav.is-oscuro .ep-nav__cta:hover { color: #1F1A14; }

.ep-nav__cta:hover {
  transform: scale(1.03);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .7),
    inset 0 -1px 1px rgb(120 80 0 / .3),
    inset 0 -8px 12px -8px rgb(120 80 0 / .2),
    0 0 0 1px rgb(120 80 0 / .14),
    0 2px 6px rgb(31 26 20 / .1),
    0 12px 26px rgb(31 26 20 / .2);
}

.ep-nav__cta:hover::before,
.ep-nav__cta:active::before { opacity: 1; }

/* Hundimiento: baja rápido (70 ms); al soltar vuelve con el muelle (560 ms) */
.ep-nav__cta:active {
  transform: scale(.965) translateY(1px);
  box-shadow:
    inset 0 2px 6px rgb(60 40 0 / .38),
    inset 0 1px 0 rgb(255 255 255 / .2),
    0 0 0 1px rgb(120 80 0 / .14),
    0 2px 6px rgb(31 26 20 / .12);
  transition-duration: 70ms, 70ms, .45s;
}

/* Foco visible, redondo como la pieza */
.ep-nav__marca:focus-visible,
.ep-nav__link:focus-visible {
  outline: 2px solid #C66B2D;
  outline-offset: 2px;
  border-radius: var(--apple-r-capsula);
}

.ep-nav__cta:focus-visible {
  outline: 2px solid #C66B2D;
  outline-offset: 2px;
  border-radius: var(--apple-r-boton);
}

/* Móvil: marca a la izquierda y, a la derecha, la cápsula solo con la burbuja de
   oro. Casos y Nosotros siguen en el pie. */
@media (max-width: 560px) {
  .ep-nav { --nav-h: 36px; gap: 10px; padding: 10px 14px; }
  .ep-nav.is-scrolled { --nav-h: 34px; padding-top: 8px; padding-bottom: 8px; }
  .ep-nav__marca {
    height: calc(var(--nav-h) + 10px);
    gap: 8px;
    margin-left: -10px;
    padding: 0 12px 0 8px;
    font-size: 19px;
    letter-spacing: -0.005em;
  }
  .ep-nav__logo { height: 29px; }
  .ep-nav__links { gap: 0; padding: 5px; }
  .ep-nav__link,
  .ep-nav__burbuja { display: none; }
  .ep-nav__cta { display: inline-flex; margin-left: 0; padding: 0 16px; font-size: 13.5px; }
}

@media (max-width: 359px) {
  /* Solo el logo (el botón se ve entero); el nombre sigue para lectores de pantalla */
  .ep-nav__nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ep-nav__marca { padding-right: 10px; }
}

/* Peldaño 1: legible siempre. Safari no entiende esta media query, por eso
   el valor por defecto ya es legible y el cristal es la mejora. */
@media (prefers-reduced-transparency: reduce) {
  .ep-nav__links,
  .ep-nav.is-scrolled .ep-nav__marca {
    background-color: rgb(251 250 245 / .97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ep-nav.is-oscuro .ep-nav__links,
  .ep-nav.is-oscuro.is-scrolled .ep-nav__marca { background-color: rgb(49 43 37 / .97); }
  .ep-nav__links::before,
  .ep-nav__marca::before,
  .ep-nav__burbuja::before { display: none; }
  .ep-nav__cta,
  .ep-btn:not(.ep-btn--linea) {
    background: #E8B939;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-nav__cta:hover,
  .ep-nav__cta:active { transform: none; }
  .ep-nav__burbuja { transition: opacity .2s ease; }
}

/* --------------------------------------------------------------------------
   2. Botón de oro de cristal (#E8B939 al 92 % sobre tinta #1F1A14 · ≥ 8:1)
   -------------------------------------------------------------------------- */
.ep-btn:not(.ep-btn--linea) {
  --mx: 50%;
  --my: 30%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 15px 30px;
  border-radius: var(--apple-r-boton);
  background-image: none;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .3), rgb(255 255 255 / .06) 48%, rgb(120 80 0 / .06) 100%),
    rgb(232 185 57 / .92);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  /* Capa de cristal sobre el oro: canto superior de luz y grosor inferior */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .6),
    inset 0 -1px 1px rgb(120 80 0 / .3),
    inset 0 -8px 12px -8px rgb(120 80 0 / .2),
    0 0 0 1px rgb(120 80 0 / .14),
    0 1px 2px rgb(31 26 20 / .12),
    0 6px 16px rgb(31 26 20 / .12);
  transition:
    transform 560ms var(--spring-snap),
    box-shadow .25s ease-out,
    gap .4s cubic-bezier(.65, 0, .35, 1);
}

/* Brillo especular que sigue al puntero (--mx/--my los pone apple.js) */
.ep-btn:not(.ep-btn--linea)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(110px 70px at var(--mx) var(--my), rgb(255 255 255 / .6), rgb(255 255 255 / .16) 45%, transparent 72%),
    radial-gradient(34px 34px at var(--mx) var(--my), rgb(255 253 235 / .55), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease-out;
}

/* Canto de luz desigual del oro */
.ep-btn:not(.ep-btn--linea)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .12) 34%, rgb(255 255 255 / .06) 66%, rgb(255 255 255 / .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ep-btn:not(.ep-btn--linea):hover {
  color: #1F1A14;
  transform: scale(1.03);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .7),
    inset 0 -1px 1px rgb(120 80 0 / .3),
    inset 0 -8px 12px -8px rgb(120 80 0 / .2),
    0 0 0 1px rgb(120 80 0 / .14),
    0 2px 6px rgb(31 26 20 / .1),
    0 12px 26px rgb(31 26 20 / .2);
}

.ep-btn:not(.ep-btn--linea):hover::before,
.ep-btn:not(.ep-btn--linea):active::before { opacity: 1; }

/* Hundimiento: baja rápido (70 ms); al soltar vuelve con el muelle (560 ms) */
.ep-btn:not(.ep-btn--linea):active {
  transform: scale(.965) translateY(1px);
  box-shadow:
    inset 0 2px 6px rgb(60 40 0 / .38),
    inset 0 1px 0 rgb(255 255 255 / .2),
    0 0 0 1px rgb(120 80 0 / .14),
    0 2px 6px rgb(31 26 20 / .12);
  transition-duration: 70ms, 70ms, .4s;
}

.ep-btn:not(.ep-btn--linea) > span { position: relative; z-index: 1; }

/* Imán: el envoltorio se desplaza; el texto se queda un poco atrás (apple.js) */
[data-iman] {
  display: inline-block;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   3. Cifras que cuentan y H2 por líneas
   -------------------------------------------------------------------------- */
[data-contador] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Titulares: 1,05 s con expo-out y escalonado de 60 ms (el de la casa es 90) */
.ep-line__inner {
  transition-duration: 1.05s;
  transition-delay: calc(var(--ep-i, 0) * 60ms);
}

/* --------------------------------------------------------------------------
   Movimiento reducido: styles.css ya apaga transiciones y animaciones; aquí
   se evita además el salto de escala al pasar el puntero.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ep-btn:not(.ep-btn--linea):hover,
  .ep-btn:not(.ep-btn--linea):active,
  .ep-nav__cta:active { transform: none; }
}

/* Telón de entrada (V1, mejorado): tinta, el logo a color respirando y el nombre; sube como un telón.
   Solo la primera visita de la sesión; nunca con movimiento reducido. */
.ep-veil {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; align-content: center; gap: 18px;
  background: #1F1A14;
  transition: transform .95s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.ep-veil__logo {
  width: 72px; height: auto;
  animation: ep-veil-respira 1.6s ease-in-out infinite;
}
.ep-veil__nombre {
  font-family: 'Bodoni Moda', Didot, serif; font-weight: 500; font-size: 26px;
  letter-spacing: -.01em; color: #FBFAF5; margin: 0;
  opacity: 0; transform: translateY(8px);
  animation: ep-veil-nombre .7s .2s cubic-bezier(.2, .7, .2, 1) forwards;
}
.ep-veil__linea {
  width: 120px; height: 1px; background: rgba(232, 185, 57, .25); overflow: hidden; position: relative;
}
.ep-veil__linea::after {
  content: ""; position: absolute; inset: 0; background: #E8B939;
  transform: scaleX(0); transform-origin: left;
  animation: ep-veil-carga .9s .15s cubic-bezier(.65, 0, .35, 1) forwards;
}
.ep-veil.is-lifting { transform: translateY(-101%); }
@keyframes ep-veil-respira { 0%, 100% { transform: scale(.94); opacity: .8 } 50% { transform: scale(1.04); opacity: 1 } }
@keyframes ep-veil-nombre { to { opacity: 1; transform: none } }
@keyframes ep-veil-carga { to { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .ep-veil { display: none } }