/* ============================================================================
   VELA — sitio de promoción para artista en vivo
   Dirección visual: "Marquesina". Marquesina de teatro con bombillas, papel de
   afiche, boletas troqueladas, hoja de contactos de 35 mm y hoja de repertorio
   pegada con cinta.

   Tres capas de color:
   · --noche-*        constantes. El cromo (héroe, barra, lomo, menú, pie) vive
                      siempre en el escenario nocturno: es el ancla de identidad.
   · --fondo/--texto  la banda ACTUAL. Rotan con el tema.
   · --inv-*          el mundo contrario. `.invertida` los promueve a actuales,
                      así ningún componente necesita saber en qué tema está.
   ========================================================================== */

/* ---------------------------------------------------------------- tipografía */
@font-face{
  font-family:'Anton'; src:url('../media/fonts/Anton-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans'; src:url('../media/fonts/InstrumentSans-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono'; src:url('../media/fonts/DMMono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono'; src:url('../media/fonts/DMMono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* --------------------------------------------------------------------- tokens */

:root,
:root[data-theme="light"]{
  /* --- constantes del escenario (no rotan con el tema) --- */
  --noche:#150E1A; --noche-2:#221830; --noche-3:#2E2140;
  --noche-texto:#F3EADB; --noche-texto-2:#B4A3BF;
  --noche-linea:rgba(243,234,219,.16); --noche-linea-fuerte:rgba(243,234,219,.40);
  --gel:#FF3D6E;            /* gelatina de escenario — acento secundario */
  --bombilla:#FFB020;

  /* --- función de tarde: el papel es el suelo --- */
  --fondo:#F3EADB;  --fondo-2:#EADFCA;  --fondo-3:#E1D3B9;
  --texto:#170F1C;  --texto-2:#6A5A74;
  --linea:rgba(23,15,28,.16); --linea-fuerte:rgba(23,15,28,.42);
  --acento:#9A5300;                 /* ámbar oscurecido: legible sobre papel */
  --acento-vivo:#E8940F;
  --sombra:0 18px 40px -28px rgba(23,15,28,.55);
  --grano:.05;

  --inv-fondo:#150E1A; --inv-fondo-2:#221830; --inv-fondo-3:#2E2140;
  --inv-texto:#F3EADB; --inv-texto-2:#B4A3BF;
  --inv-linea:rgba(243,234,219,.16); --inv-linea-fuerte:rgba(243,234,219,.40);
  --inv-acento:#FFB020; --inv-acento-vivo:#FFC65A;
  --inv-sombra:0 22px 50px -30px rgba(0,0,0,.9);
  --inv-grano:.075;

  --ok:#2E9E7A; --aviso:#B4720B; --alto:#C6335A;

  --paso:clamp(4.5rem,9vw,8rem);
  --ancho:76rem;
  --lomo:3.5rem;
}

/* función de noche */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#150E1A;  --fondo-2:#221830;  --fondo-3:#2E2140;
    --texto:#F3EADB;  --texto-2:#B4A3BF;
    --linea:rgba(243,234,219,.16); --linea-fuerte:rgba(243,234,219,.40);
    --acento:#FFB020; --acento-vivo:#FFC65A;
    --sombra:0 22px 50px -30px rgba(0,0,0,.9);
    --grano:.075;

    --inv-fondo:#F3EADB; --inv-fondo-2:#EADFCA; --inv-fondo-3:#E1D3B9;
    --inv-texto:#170F1C; --inv-texto-2:#6A5A74;
    --inv-linea:rgba(23,15,28,.16); --inv-linea-fuerte:rgba(23,15,28,.42);
    --inv-acento:#9A5300; --inv-acento-vivo:#E8940F;
    --inv-sombra:0 18px 40px -28px rgba(23,15,28,.55);
    --inv-grano:.05;

    --ok:#43C9A0; --aviso:#FFB020; --alto:#FF6B94;
  }
}

/* el interruptor manual gana sobre el sistema — debe ir DESPUÉS de la media query */
:root[data-theme="dark"]{
  --fondo:#150E1A;  --fondo-2:#221830;  --fondo-3:#2E2140;
  --texto:#F3EADB;  --texto-2:#B4A3BF;
  --linea:rgba(243,234,219,.16); --linea-fuerte:rgba(243,234,219,.40);
  --acento:#FFB020; --acento-vivo:#FFC65A;
  --sombra:0 22px 50px -30px rgba(0,0,0,.9);
  --grano:.075;

  --inv-fondo:#F3EADB; --inv-fondo-2:#EADFCA; --inv-fondo-3:#E1D3B9;
  --inv-texto:#170F1C; --inv-texto-2:#6A5A74;
  --inv-linea:rgba(23,15,28,.16); --inv-linea-fuerte:rgba(23,15,28,.42);
  --inv-acento:#9A5300; --inv-acento-vivo:#E8940F;
  --inv-sombra:0 18px 40px -28px rgba(23,15,28,.55);
  --inv-grano:.05;

  --ok:#43C9A0; --aviso:#FFB020; --alto:#FF6B94;
}

.invertida{
  --fondo:var(--inv-fondo); --fondo-2:var(--inv-fondo-2); --fondo-3:var(--inv-fondo-3);
  --texto:var(--inv-texto); --texto-2:var(--inv-texto-2);
  --linea:var(--inv-linea); --linea-fuerte:var(--inv-linea-fuerte);
  --acento:var(--inv-acento); --acento-vivo:var(--inv-acento-vivo);
  --sombra:var(--inv-sombra); --grano:var(--inv-grano);
}

/* el cromo nocturno: promueve las constantes a tokens actuales */
.nocturna{
  --fondo:var(--noche); --fondo-2:var(--noche-2); --fondo-3:var(--noche-3);
  --texto:var(--noche-texto); --texto-2:var(--noche-texto-2);
  --linea:var(--noche-linea); --linea-fuerte:var(--noche-linea-fuerte);
  --acento:var(--bombilla); --acento-vivo:#FFC65A;
  --sombra:0 22px 50px -30px rgba(0,0,0,.9);
  --grano:.075;
}

/* ----------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:'Instrument Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,canvas,video,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}

:focus-visible{outline:2px solid var(--bombilla); outline-offset:3px; border-radius:2px}
::selection{background:var(--gel); color:#fff}

.salto{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--bombilla); color:#150E1A; padding:.6rem 1rem;
  font-weight:700; transition:top .18s ease;
}
.salto:focus{top:.75rem}

.oculto-visual{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* grano de película: une los dos mundos y evita el degradado plano */
body::after{
  content:''; position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:var(--grano); mix-blend-mode:overlay;
  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");
}

/* ------------------------------------------------------------------ tipografía */
.display{
  font-family:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  font-weight:400; text-transform:uppercase;
  line-height:.86; letter-spacing:-.012em;
  text-wrap:balance;
}

.mono{font-family:'DM Mono',ui-monospace,'Cascadia Mono',Consolas,monospace}

.rotulo{
  font-family:'DM Mono',ui-monospace,monospace; font-weight:500;
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acento);
  display:flex; align-items:center; gap:.9rem;
}
.rotulo::after{content:''; flex:1; height:1px; background:var(--linea)}

/* --------------------------------------------------------------------- layout */
.envoltorio{
  width:100%; max-width:var(--ancho);
  margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem);
}

.seccion{
  background:var(--fondo); color:var(--texto);
  padding-block:var(--paso);
  position:relative;
  /* la barra fija mide ~3.9rem: sin esto el título queda debajo al saltar por ancla */
  scroll-margin-top:4.5rem;
}
/* dos secciones consecutivas del mismo mundo se leen como un solo pliego */
.seccion--pegada{padding-top:0}

.seccion__cabecera{
  display:flex; flex-direction:column; gap:1.1rem;
  margin-bottom:clamp(2.5rem,5vw,3.75rem);
}
.seccion__titulo{font-size:clamp(2.5rem,7.5vw,5.25rem); margin:0}
.seccion__intro{margin:0; max-width:56ch; color:var(--texto-2)}

/* --------------------------------------------------------------- lomo lateral */
.lomo{
  position:fixed; left:0; top:0; bottom:0; width:var(--lomo); z-index:60;
  display:none; flex-direction:column; align-items:center;
  justify-content:space-between; padding-block:1.25rem;
  border-right:1px solid var(--linea);
  background:var(--fondo); color:var(--texto);
}
.lomo__marca{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:.6875rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--texto-2);
}
.lomo__hilo{flex:1; width:1px; background:var(--linea); margin-block:1.25rem}
.lomo__redes{display:flex; flex-direction:column; gap:.85rem}
.lomo__punto{
  display:block; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--texto-2); opacity:.5; transition:all .2s ease;
}
.lomo__enlace:hover .lomo__punto,
.lomo__enlace:focus-visible .lomo__punto{
  background:var(--bombilla); opacity:1; box-shadow:0 0 0 4px rgba(255,176,32,.2);
}

@media (min-width:1180px){
  .lomo{display:flex}
  body{padding-left:var(--lomo)}
}

/* ------------------------------------------------------------------ barra sup. */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem clamp(1.25rem,4vw,2.5rem);
  background:color-mix(in srgb,var(--noche) 84%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  color:var(--texto);
  transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.barra.esta-visible{transform:translateY(0); border-bottom-color:var(--linea)}
@media (min-width:1180px){ .barra{left:var(--lomo)} }

.barra__marca{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:1.375rem; letter-spacing:.02em; line-height:1;
  display:flex; align-items:center; gap:.6rem;
}
/* el monograma viene sobre negro: mezclarlo con la barra evita el recuadro */
.barra__logo{
  width:2rem; height:2rem; flex:none;
  mix-blend-mode:screen; object-fit:contain;
}
@media (max-width:420px){ .barra__marca span{display:none} }
.barra__nav{display:none; gap:1.75rem; margin-left:auto}
.barra__enlace{
  font-family:'DM Mono',monospace; font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto-2);
  padding-block:.25rem; position:relative;
}
.barra__enlace::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--bombilla); transition:right .28s cubic-bezier(.22,1,.36,1);
}
.barra__enlace:hover,.barra__enlace[aria-current="true"]{color:var(--texto)}
.barra__enlace:hover::after,.barra__enlace[aria-current="true"]::after{right:0}

.barra__acciones{display:flex; align-items:center; gap:.6rem; margin-left:auto}
@media (min-width:900px){
  .barra__nav{display:flex}
  .barra__acciones{margin-left:0}
}

.barra__progreso{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gel),var(--bombilla));
}

/* ------------------------------------------------------------------- botones */
.boton{
  --b-fondo:var(--acento-vivo); --b-texto:#150E1A;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.4rem; border:0; cursor:pointer;
  background:var(--b-fondo); color:var(--b-texto);
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .55rem),calc(100% - .55rem) 100%,0 100%);
  transition:transform .18s ease, filter .18s ease;
}
.boton:hover{transform:translateY(-2px); filter:brightness(1.08)}
.boton:active{transform:translateY(0)}

.boton--fantasma{
  --b-fondo:transparent; --b-texto:var(--texto);
  box-shadow:inset 0 0 0 1px var(--linea-fuerte);
}
.boton--fantasma:hover{--b-texto:var(--acento); filter:none}

.icono-boton{
  display:grid; place-items:center; width:2.25rem; height:2.25rem;
  border:1px solid var(--linea); background:transparent; cursor:pointer;
  color:var(--texto); transition:border-color .2s ease, color .2s ease;
}
.icono-boton:hover{border-color:var(--bombilla); color:var(--bombilla)}
.icono-boton svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6}

@media (min-width:900px){ .icono-boton--menu{display:none} }

/* --------------------------------------------------------------- menú móvil */
.menu{
  position:fixed; inset:0; z-index:100;
  background:var(--fondo); color:var(--texto);
  display:flex; flex-direction:column; justify-content:center;
  gap:.35rem; padding:clamp(1.5rem,6vw,4rem);
  transform:translateY(-100%); transition:transform .45s cubic-bezier(.76,0,.24,1);
}
/* `display:flex` pisaba el atributo hidden del navegador: el menú seguía en la
   página, sólo desplazado fuera de pantalla y alcanzable por lector de voz */
.menu[hidden]{display:none}
.menu.esta-abierto{transform:translateY(0)}
.menu__enlace{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(2rem,10vw,3.5rem); line-height:1.06;
  color:var(--texto-2); transition:color .18s ease, transform .18s ease;
}
.menu__enlace:hover{color:var(--bombilla); transform:translateX(.6rem)}
.menu__cerrar{position:absolute; top:1rem; right:1.25rem}
.menu__pie{
  margin-top:2.5rem; font-family:'DM Mono',monospace; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-2);
}

/* --------------------------------------------------------------------- héroe */
.hero{
  background:var(--fondo); color:var(--texto);
  position:relative; overflow:hidden;
  min-height:100svh; display:flex; align-items:center;
  padding-block:6rem 4.5rem;
}

/* cenitales: dos conos de luz que respiran detrás del texto */
.hero__luces{position:absolute; inset:0; pointer-events:none}
.hero__cono{
  position:absolute; top:-30%; width:52vw; height:130%;
  filter:blur(38px); opacity:.5;
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  animation:respirar 9s ease-in-out infinite;
}
.hero__cono--a{left:-6vw; background:linear-gradient(180deg,rgba(255,176,32,.5),transparent 72%)}
.hero__cono--b{right:-6vw; background:linear-gradient(180deg,rgba(255,61,110,.42),transparent 72%); animation-delay:-4.5s}
@keyframes respirar{
  0%,100%{opacity:.32; transform:translateY(0) scaleX(1)}
  50%    {opacity:.6;  transform:translateY(-1.5%) scaleX(1.06)}
}

.hero__lienzo{position:absolute; inset:0; width:100%; height:100%; opacity:.5}
.hero__contenido{position:relative; z-index:2; width:100%}

.hero__reja{display:grid; gap:clamp(1.5rem,4vw,2.75rem)}
/* el retrato sólo entra cuando hay sitio de sobra: en pantallas estrechas el
   inicio se queda tipográfico y la foto vive en la galería */
.hero__retrato{display:none}
@media (min-width:1020px){
  .hero__reja{grid-template-columns:1.25fr .92fr; align-items:center}
  .hero__retrato{display:block; position:relative; margin:0}
}
.hero__retrato img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 16%;
  filter:saturate(.85) contrast(1.06);
}
/* baño de luz de escenario sobre la foto, para que no parezca pegada encima */
.hero__retrato::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:soft-light;
  background:linear-gradient(205deg,rgba(255,176,32,.5),transparent 46%,rgba(255,61,110,.42));
}
/* marco montado: hilo ámbar por dentro, como una copia enmarcada */
.hero__retrato::after{
  content:''; position:absolute; inset:.7rem; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.42);
}

/* marquesina con bombillas */
.marquesina{
  position:relative;
  padding:clamp(1.75rem,4vw,3rem) clamp(1.5rem,4vw,3rem);
  border:1px solid var(--linea-fuerte);
  background:color-mix(in srgb,var(--noche) 55%,transparent);
  backdrop-filter:blur(3px);
}
@property --giro{syntax:'<angle>'; initial-value:0deg; inherits:false}

.bombillas{position:absolute; inset:-.7rem; pointer-events:none}
.bombillas__capa{position:absolute; inset:0}
.bombillas__lado{position:absolute}
.bombillas__lado--arriba,.bombillas__lado--abajo{
  left:0; right:0; height:1.4rem;
  background-image:radial-gradient(circle,var(--bombilla) 0 2.6px,transparent 3.1px);
  background-size:1.65rem 1.4rem; background-position:center;
}
.bombillas__lado--arriba{top:0}
.bombillas__lado--abajo{bottom:0}
.bombillas__lado--izq,.bombillas__lado--der{
  top:1.4rem; bottom:1.4rem; width:1.4rem;
  background-image:radial-gradient(circle,var(--bombilla) 0 2.6px,transparent 3.1px);
  background-size:1.4rem 1.65rem; background-position:center;
}
.bombillas__lado--izq{left:0}
.bombillas__lado--der{right:0}

.bombillas__capa--base{opacity:.26}
.bombillas__capa--brillo{
  filter:drop-shadow(0 0 6px rgba(255,176,32,.85));
  -webkit-mask-image:conic-gradient(from var(--giro),transparent 0deg,#000 26deg,transparent 74deg,transparent 360deg);
  mask-image:conic-gradient(from var(--giro),transparent 0deg,#000 26deg,transparent 74deg,transparent 360deg);
  animation:rodar 5.5s linear infinite;
}
@keyframes rodar{to{--giro:360deg}}

.hero__eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.1rem;
  font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--texto-2);
  margin-bottom:1.75rem;
}
.punto-vivo{
  display:inline-block; vertical-align:.05em; margin-right:.55rem;
  width:.5rem; height:.5rem; border-radius:50%; background:var(--ok);
  animation:latir 2.4s ease-out infinite;
}
@keyframes latir{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}
  70%{box-shadow:0 0 0 .55rem transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.sello-demo{
  font-family:'DM Mono',monospace; font-size:.625rem; letter-spacing:.2em;
  padding:.2rem .5rem; color:var(--gel);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gel) 55%,transparent);
}

.hero__nombre{
  font-size:clamp(3.25rem,16vw,13rem); margin:0;
  display:flex; flex-wrap:wrap; gap:0 .26em;
}
/* la palabra es la unidad indivisible: el salto de línea va entre palabras */
.hero__palabra{display:inline-flex; white-space:nowrap}
.hero__letra{display:inline-block}

.hero__tagline{
  margin:1.5rem 0 0; max-width:46ch;
  font-size:clamp(1.0625rem,.95rem + .7vw,1.5rem);
  line-height:1.45;
}

.hero__generos{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; font-family:'DM Mono',monospace; font-size:.75rem}
.genero{padding:.3rem .7rem; color:var(--texto-2); box-shadow:inset 0 0 0 1px var(--linea)}

.hero__acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem}

.hero__pie{
  position:absolute; left:0; right:0; bottom:1.75rem; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto-2);
}
.hero__scroll{display:flex; align-items:center; gap:.6rem}
.hero__scroll i{display:block; width:2.5rem; height:1px; background:var(--linea-fuerte); position:relative; overflow:hidden}
.hero__scroll i::after{
  content:''; position:absolute; inset:0; background:var(--bombilla);
  animation:deslizar 2.2s ease-in-out infinite;
}
@keyframes deslizar{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ------------------------------------------------------------ cinta rodante */
.cinta{
  background:var(--bombilla); color:#150E1A;
  padding-block:.7rem; overflow:hidden;
  border-block:1px solid rgba(21,14,26,.25);
  display:flex;
}
.cinta__pista{
  display:flex; flex:none; align-items:center; gap:2.5rem; padding-right:2.5rem;
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:.9375rem; letter-spacing:.06em; white-space:nowrap;
  animation:correr 42s linear infinite;
}
.cinta__pieza{display:flex; align-items:center; gap:2.5rem}
.cinta__pieza::after{content:'✦'; font-size:.7rem; opacity:.55}
@keyframes correr{to{transform:translateX(-100%)}}

/* ------------------------------------------------------------------- biografía */
.bio{display:grid; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (min-width:900px){ .bio{grid-template-columns:1.35fr 1fr} }
/* sin cifras la segunda columna sólo llevaría la cita y dejaría un hueco largo */
.bio--simple{grid-template-columns:1fr !important; gap:1.75rem}

.bio__texto{display:flex; flex-direction:column; gap:1.25rem}
.bio__texto p{margin:0; max-width:60ch; color:var(--texto-2)}
.bio__texto p:first-of-type{font-size:1.125rem; color:var(--texto)}

.cita{
  margin:.5rem 0 0; padding-left:1.25rem;
  border-left:3px solid var(--gel);
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(1.25rem,3vw,1.875rem); line-height:1.08;
}

.cifras{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea)}
.cifra{background:var(--fondo); padding:1.4rem 1.1rem}
.cifra__valor{
  font-family:'Anton',Impact,sans-serif; font-size:clamp(2.25rem,5vw,3.25rem);
  line-height:1; color:var(--acento); font-variant-numeric:tabular-nums;
}
.cifra__etiqueta{
  display:block; margin-top:.4rem;
  font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-2);
}

/* -------------------------------------------------------- boletas (servicios) */
.boletas{display:grid; gap:1.25rem}
@media (min-width:720px){ .boletas{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .boletas{grid-template-columns:repeat(3,1fr)} }

.boleta{
  position:relative; display:flex; flex-direction:column;
  background:var(--fondo-2); box-shadow:inset 0 0 0 1px var(--linea);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.boleta:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--linea-fuerte),var(--sombra)}
.boleta--destacada{box-shadow:inset 0 0 0 2px var(--acento)}
.boleta--destacada:hover{box-shadow:inset 0 0 0 2px var(--acento),var(--sombra)}

.boleta__marca{
  position:absolute; top:0; right:0; z-index:2;
  background:var(--acento); color:var(--fondo);
  font-family:'DM Mono',monospace; font-weight:500; font-size:.625rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.25rem .6rem;
}

.boleta__cuerpo{padding:1.6rem 1.5rem 1.35rem; display:flex; flex-direction:column; gap:.85rem; flex:1}
.boleta__titulo{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:1.5rem; line-height:1.02; margin:0;
}
.boleta__resumen{margin:0; color:var(--texto-2); font-size:.9375rem}
.boleta__incluye{list-style:none; margin:.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.boleta__incluye li{position:relative; padding-left:1.15rem; font-size:.875rem; color:var(--texto-2); line-height:1.5}
.boleta__incluye li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:.4rem; height:.4rem; background:var(--gel);
}

/* el troquel: línea perforada + dos muescas que "cortan" la tarjeta */
.boleta__talon{
  position:relative;
  border-top:2px dashed var(--linea-fuerte);
  padding:1rem 1.5rem 1.15rem;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem;
  font-family:'DM Mono',monospace;
}
.boleta__talon::before,.boleta__talon::after{
  content:''; position:absolute; top:0; width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--fondo); transform:translateY(-50%);
}
.boleta__talon::before{left:-.55rem}
.boleta__talon::after{right:-.55rem}
.boleta__precio{font-weight:500; font-size:1.0625rem; color:var(--acento); font-variant-numeric:tabular-nums}
.boleta__meta{font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-2)}
.boleta__nota{
  flex-basis:100%; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-2); opacity:.85;
}

/* repertorio del show: una sola lista para los tres formatos */
.repertorio-show{
  margin-top:1.5rem; padding:1.25rem 1.4rem;
  box-shadow:inset 0 0 0 1px var(--linea);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1.5rem;
}
.repertorio-show__clave{
  font-family:'DM Mono',monospace; font-size:.625rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--acento); flex:none;
}
.repertorio-show__lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; flex:1;
}
.repertorio-show__lista li{
  font-family:'DM Mono',monospace; font-size:.75rem; color:var(--texto-2);
  padding:.2rem .55rem; box-shadow:inset 0 0 0 1px var(--linea);
}

/* --------------------------------------------------- hoja de contactos (fotos) */
.hoja{background:var(--fondo-2); padding:clamp(.85rem,2vw,1.35rem); box-shadow:inset 0 0 0 1px var(--linea)}
.hoja__perf{
  height:.5rem; margin-block:.4rem; opacity:.32;
  background-image:repeating-linear-gradient(90deg,var(--linea-fuerte) 0 .38rem,transparent .38rem 1.05rem);
}
.hoja__tira{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.5rem,1.4vw,.85rem)}
@media (min-width:640px){ .hoja__tira{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .hoja__tira{grid-template-columns:repeat(4,1fr)} }

.fotograma{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--noche); cursor:pointer; overflow:hidden; aspect-ratio:1/1;
}
.fotograma__img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1)}
.fotograma:hover .fotograma__img{transform:scale(1.05)}
.fotograma__num{
  position:absolute; left:.4rem; top:.4rem; z-index:2;
  font-family:'DM Mono',monospace; font-size:.625rem; letter-spacing:.1em;
  color:var(--bombilla); text-shadow:0 1px 3px rgba(0,0,0,.8);
  font-variant-numeric:tabular-nums;
}
.fotograma__pie{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:.55rem .5rem .45rem;
  font-family:'DM Mono',monospace; font-size:.6875rem; color:#F3EADB;
  background:linear-gradient(transparent,rgba(10,6,13,.88));
  opacity:0; transform:translateY(.35rem); transition:all .25s ease;
}
.fotograma:hover .fotograma__pie,.fotograma:focus-visible .fotograma__pie{opacity:1; transform:none}

/* marca de lápiz graso: en una hoja de contactos señala la toma elegida */
.fotograma__marca{position:absolute; inset:6%; z-index:3; pointer-events:none; overflow:visible}
.fotograma__marca ellipse{
  fill:none; stroke:var(--gel); stroke-width:1.8; opacity:.72;
  stroke-linecap:round; stroke-dasharray:236 26;
  transform-origin:center; transform:rotate(-7deg);
}

/* --------------------------------------------------------------------- videos */
.videos{display:grid; gap:1.25rem}
@media (min-width:920px){ .videos{grid-template-columns:1.6fr 1fr} }

.monitor{
  position:relative; background:#0B070E; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linea-fuerte);
  aspect-ratio:16/9; width:100%; padding:0; border:0; cursor:pointer; display:block;
}
.monitor__medio{width:100%; height:100%; object-fit:cover}
/* barrido de tubo: muy leve, sólo insinúa el monitor de control */
.monitor::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%);
}
.monitor__capa{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  justify-content:flex-end; gap:.35rem; padding:1.25rem;
  background:linear-gradient(transparent 45%,rgba(10,6,13,.85));
  color:#F3EADB; text-align:left;
}
.monitor__titulo{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(1.25rem,3vw,2rem); line-height:1; margin:0;
}
.monitor__sub{
  font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; color:#B4A3BF;
  display:flex; gap:.75rem; align-items:center; flex-wrap:wrap;
}
.monitor__play{position:absolute; inset:0; z-index:4; display:grid; place-items:center}
.monitor__play i{
  display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%;
  background:color-mix(in srgb,var(--bombilla) 92%,transparent); color:#150E1A;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.monitor:hover .monitor__play i{transform:scale(1.12)}
.monitor__play svg{width:1.35rem; height:1.35rem; fill:currentColor; margin-left:.15rem}

/* con un solo video, el monitor ocupa todo el ancho en vez de dejar un hueco */
.videos--sola{grid-template-columns:1fr}
.videos--sola .videos__lista{display:none}

.videos__lista{display:grid; gap:1.25rem; grid-auto-rows:min-content}
@media (max-width:919px){ .videos__lista{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} }
.videos__lista .monitor__titulo{font-size:1.0625rem}
.videos__lista .monitor__play i{width:2.75rem; height:2.75rem}
.videos__lista .monitor__play svg{width:.95rem; height:.95rem}

.nota-subida{
  margin-top:1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem;
  font-family:'DM Mono',monospace; font-size:.75rem; color:var(--texto-2);
  padding:.9rem 1.1rem; box-shadow:inset 0 0 0 1px var(--linea); line-height:1.5;
}
.nota-subida strong{color:var(--acento); font-weight:500}

/* --------------------------------------------------------------------- música */
.pistas{display:flex; flex-direction:column; border-top:1px solid var(--linea)}
.pista{
  display:grid; align-items:center; gap:.5rem 1.1rem;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:'boton titulo dur' 'boton onda dur';
  padding:1.05rem .25rem; border-bottom:1px solid var(--linea);
  transition:background .2s ease;
}
.pista:hover{background:var(--fondo-2)}
@media (max-width:600px){
  .pista{grid-template-columns:auto 1fr; grid-template-areas:'boton titulo' 'boton onda' 'dur dur'}
}

.pista__boton{
  grid-area:boton; width:2.5rem; height:2.5rem; border:0; cursor:pointer;
  display:grid; place-items:center; border-radius:50%;
  background:transparent; box-shadow:inset 0 0 0 1px var(--linea-fuerte);
  color:var(--texto); transition:all .2s ease;
}
.pista__boton:hover{background:var(--acento); color:var(--fondo); box-shadow:none}
.pista__boton svg{width:.85rem; height:.85rem; fill:currentColor}

.pista__titulo{grid-area:titulo; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .75rem}
.pista__nombre{font-weight:600; font-size:1.0625rem}
.pista__lanzamiento{
  font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texto-2);
}
.pista__onda{grid-area:onda; width:100%; height:2.25rem; opacity:.85}
.pista__dur{
  grid-area:dur; font-family:'DM Mono',monospace; font-size:.8125rem;
  color:var(--texto-2); font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------- repertorio (agenda) */
.repertorio{
  position:relative; background:var(--fondo-2); padding:clamp(1.5rem,4vw,2.5rem);
  box-shadow:inset 0 0 0 1px var(--linea); transform:rotate(-.35deg);
}
.repertorio__cinta{
  position:absolute; width:5.5rem; height:1.75rem; top:-.85rem;
  background:color-mix(in srgb,var(--bombilla) 42%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bombilla) 62%,transparent);
}
.repertorio__cinta--izq{left:8%; transform:rotate(-4deg)}
.repertorio__cinta--der{right:8%; transform:rotate(3deg)}

.fecha{
  display:grid; gap:.15rem 1.25rem; align-items:baseline;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:'dia sala estado' 'dia ciudad estado';
  padding:1rem .25rem; border-bottom:1px dashed var(--linea);
  font-variant-numeric:tabular-nums;
}
.fecha:last-child{border-bottom:0}
@media (max-width:640px){
  .fecha{grid-template-columns:auto 1fr; grid-template-areas:'dia sala' 'dia ciudad' 'dia estado'; gap:.25rem 1rem}
}

.fecha__dia{
  grid-area:dia; font-family:'DM Mono',monospace; font-weight:500;
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--acento); min-width:5.5rem;
}
.fecha__sala{grid-area:sala; font-weight:600; font-size:1.0625rem}
.fecha__ciudad{grid-area:ciudad; font-family:'DM Mono',monospace; font-size:.75rem; color:var(--texto-2); letter-spacing:.06em}
.estado{
  grid-area:estado; justify-self:start; white-space:nowrap;
  font-family:'DM Mono',monospace; font-size:.625rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.25rem .6rem;
}
@media (min-width:641px){ .estado{justify-self:end} }
.estado--entradas{color:var(--ok);      box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 45%,transparent)}
.estado--preventa{color:var(--ok);      box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 45%,transparent)}
.estado--ultimas {color:var(--aviso);   box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aviso) 55%,transparent)}
.estado--agotado {color:var(--texto-2); box-shadow:inset 0 0 0 1px var(--linea); text-decoration:line-through}
.estado--privado {color:var(--texto-2); box-shadow:inset 0 0 0 1px var(--linea)}

/* --------------------------------------------------------------- testimonios */
.testimonios{display:grid; gap:1.25rem}
@media (min-width:840px){ .testimonios{grid-template-columns:repeat(3,1fr)} }

.testimonio{
  display:flex; flex-direction:column; gap:1.1rem;
  padding:1.6rem 1.5rem; box-shadow:inset 0 0 0 1px var(--linea);
}
.testimonio__comilla{
  font-family:'Anton',Impact,sans-serif; font-size:2.75rem; line-height:.6;
  color:var(--gel); height:1.1rem;
}
.testimonio__texto{margin:0; font-size:1rem; line-height:1.6}
.testimonio__autor{margin-top:auto; display:flex; flex-direction:column; gap:.15rem}
.testimonio__nombre{font-weight:600; font-size:.9375rem}
.testimonio__rol{
  font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texto-2);
}

/* --------------------------------------------------------------------- redes */
/* auto-fill + borde por tarjeta: con pocos perfiles no queda un bloque de
   celdas vacías, que era lo que pasaba al pintar el fondo en la rejilla */
.redes{display:grid; gap:1px; grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}

.red{
  background:var(--fondo); padding:1.35rem 1.25rem;
  display:flex; flex-direction:column; gap:.35rem;
  position:relative; transition:background .2s ease;
  box-shadow:0 0 0 1px var(--linea);
}
.red:hover{background:var(--fondo-2)}
.red__nombre{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:1.125rem; display:flex; align-items:center; gap:.45rem;
}
.red__usuario{font-family:'DM Mono',monospace; font-size:.8125rem; color:var(--texto-2); word-break:break-all}
.red__seguidores{
  margin-top:.5rem; font-family:'DM Mono',monospace; font-weight:500;
  font-size:.9375rem; color:var(--acento); font-variant-numeric:tabular-nums;
}
.red__check{width:.85rem; height:.85rem; fill:var(--ok); flex:none}
.red__flecha{
  position:absolute; right:1.1rem; top:1.25rem; width:.9rem; height:.9rem;
  stroke:var(--texto-2); fill:none; stroke-width:1.8;
  transition:transform .2s ease, stroke .2s ease;
}
.red:hover .red__flecha{transform:translate(2px,-2px); stroke:var(--acento)}

.redes__nota{
  margin-top:1.1rem; font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.1em; color:var(--texto-2); line-height:1.6;
  display:flex; align-items:flex-start; gap:.5rem;
}
.redes__nota svg{width:.85rem; height:.85rem; fill:var(--ok); flex:none; margin-top:.25rem}

/* ------------------------------------------------------------------ contacto */
.contacto{display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:start}
@media (min-width:900px){ .contacto{grid-template-columns:1fr 1.15fr} }

.pase{
  background:var(--fondo-2); padding:clamp(1.5rem,3.5vw,2.25rem);
  box-shadow:inset 0 0 0 1px var(--linea);
  display:flex; flex-direction:column; gap:1.35rem;
}
.pase__perforacion{
  width:3.5rem; height:.5rem; border-radius:999px;
  background:var(--fondo); box-shadow:inset 0 0 0 1px var(--linea-fuerte);
  margin-inline:auto;
}
.pase__fila{display:flex; flex-direction:column; gap:.2rem}
.pase__clave{
  font-family:'DM Mono',monospace; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--texto-2);
}
.pase__valor{font-size:1rem; font-weight:600; word-break:break-word}
.pase__valor a:hover{color:var(--acento)}

.formulario{display:grid; gap:1.1rem}
.campo{display:flex; flex-direction:column; gap:.4rem}
.campo__etiqueta{
  font-family:'DM Mono',monospace; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--texto-2);
}
.campo__control{
  width:100%; padding:.75rem .9rem; background:transparent;
  border:0; box-shadow:inset 0 0 0 1px var(--linea-fuerte);
  transition:box-shadow .18s ease;
}
.campo__control:focus{outline:0; box-shadow:inset 0 0 0 2px var(--acento)}
.campo__control::placeholder{color:var(--texto-2); opacity:.7}
textarea.campo__control{resize:vertical; min-height:7rem}
select.campo__control{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.2rem,calc(100% - .75rem) 1.2rem;
  background-size:.35rem .35rem; background-repeat:no-repeat;
}
.campo--doble{display:grid; gap:1.1rem}
@media (min-width:560px){ .campo--doble{grid-template-columns:1fr 1fr} }

.formulario__acciones{display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center}
.formulario__nota{font-size:.8125rem; color:var(--texto-2); margin:0; max-width:34ch}
.campo__error{font-family:'DM Mono',monospace; font-size:.6875rem; color:var(--alto); min-height:1rem}

/* --------------------------------------------------------------------- pie */
.pie{background:var(--fondo); color:var(--texto); padding-block:clamp(3rem,6vw,4.5rem) 2rem; overflow:hidden}
.pie__marca{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(3.5rem,16vw,11rem); line-height:.82; margin:0;
  opacity:.14; letter-spacing:-.02em; user-select:none; pointer-events:none;
  white-space:nowrap;
}
.pie__barra{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  align-items:center; margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--linea);
  font-family:'DM Mono',monospace; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto-2);
}
.pie__enlaces{display:flex; flex-wrap:wrap; gap:1.25rem}
.pie__enlaces a:hover{color:var(--bombilla)}

/* ------------------------------------------------------------------- visor */
.visor{
  position:fixed; inset:0; z-index:150; display:none;
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(8,5,11,.94); backdrop-filter:blur(6px);
}
.visor.esta-abierto{display:flex}
.visor__caja{position:relative; width:min(100%,68rem); display:flex; flex-direction:column; gap:.9rem}
.visor__medio{width:100%; max-height:76vh; object-fit:contain; background:#0B070E; box-shadow:0 40px 90px -50px #000}
.visor__accion{display:flex; justify-content:center; margin:.9rem 0 0}
.visor__pie{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  font-family:'DM Mono',monospace; font-size:.75rem; color:#B4A3BF; letter-spacing:.1em;
}
.visor__cerrar{
  position:absolute; top:-3rem; right:0; width:2.5rem; height:2.5rem;
  display:grid; place-items:center; background:transparent; cursor:pointer;
  border:1px solid rgba(243,234,219,.28); color:#F3EADB;
}
.visor__cerrar:hover{border-color:var(--bombilla); color:var(--bombilla)}
.visor__cerrar svg{width:1rem; height:1rem; stroke:currentColor; stroke-width:2; fill:none}
.visor__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  background:rgba(21,14,26,.7); border:1px solid rgba(243,234,219,.2);
  color:#F3EADB; cursor:pointer;
}
.visor__nav:hover{background:var(--bombilla); color:#150E1A; border-color:var(--bombilla)}
.visor__nav--ant{left:-1.25rem}
.visor__nav--sig{right:-1.25rem}
.visor__nav svg{width:1rem; height:1rem; stroke:currentColor; stroke-width:2; fill:none}
@media (max-width:720px){
  .visor__nav--ant{left:.25rem} .visor__nav--sig{right:.25rem}
  .visor__cerrar{top:.25rem; right:.25rem; background:rgba(21,14,26,.8)}
}

/* --------------------------------------------------------- burbuja WhatsApp
   Verde de marca a propósito: es un código que la gente reconoce de lejos.
   z-index 95 la deja sobre el grano (90) pero bajo el menú (100) y el visor. */
.burbuja{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:95;
  display:flex; align-items:center; gap:0;
  height:3.5rem; padding:0 1rem; border-radius:999px;
  background:#25D366; color:#fff;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.55), 0 0 0 4px rgba(37,211,102,.16);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, gap .22s ease;
}
.burbuja svg{width:1.65rem; height:1.65rem; fill:currentColor; flex:none}
.burbuja__texto{
  font-family:'DM Mono',monospace; font-weight:500; font-size:.8125rem;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .28s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.burbuja:hover,.burbuja:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -8px rgba(0,0,0,.6), 0 0 0 6px rgba(37,211,102,.22);
  gap:.6rem;
}
.burbuja:hover .burbuja__texto,
.burbuja:focus-visible .burbuja__texto{max-width:8rem; opacity:1}

@media (max-width:600px){
  .burbuja{right:.85rem; bottom:.85rem; height:3.25rem; padding:0 .8rem}
  /* en móvil no hay hover: la etiqueta sólo estorbaría */
  .burbuja__texto{display:none}
}
@media (prefers-reduced-motion: reduce){
  .burbuja__texto{display:none}
}

/* ------------------------------------------------------------ estados vacíos
   Una sección sin contenido real dice que aún no lo hay, en vez de inventarlo. */
.vacio{
  padding:2.5rem 1.5rem; text-align:center;
  box-shadow:inset 0 0 0 1px var(--linea);
  display:flex; flex-direction:column; gap:.5rem; align-items:center;
}
.vacio__titulo{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:1.25rem; color:var(--texto);
}
.vacio__nota{
  font-family:'DM Mono',monospace; font-size:.75rem; letter-spacing:.08em;
  color:var(--texto-2); max-width:46ch; line-height:1.7; margin:0;
}

/* ---------------------------------------------------------------- revelados */
.revelar{opacity:0; transform:translateY(1.35rem); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.revelar.esta-dentro{opacity:1; transform:none}
.revelar[data-retraso="1"]{transition-delay:.08s}
.revelar[data-retraso="2"]{transition-delay:.16s}
.revelar[data-retraso="3"]{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revelar{opacity:1; transform:none}
  .hero__cono{opacity:.42}
}