/* ═══════════════════════════════════════════════════════════════════════════
   web/src/assets/css/inicio.css — la portada: "De 23:47 a 09:00" (docs/WEB_REDISENO.md).
   Usa los tokens de base.css.

   Índice: El cielo de noche · Comunes · 1 Portada (celular) · 2 Lo que se pierde (escenas,
           datos, ticket) · 3 La cuenta · 4 El giro (amanecer) · 5 El panel · 6 Lo que cambia ·
           7 Qué hace (bento) · 8 Precio · Fundadoras · 9 Pasos · 10 Preguntas · 11 Cierre ·
           Barra de celular · Lo que se esconde para animar · Celular · Movimiento reducido

   Lo de base es la versión quieta y completa (sin JavaScript o con "reducir movimiento").
   Lo que cambia con el movimiento lo prende web.mjs con clases: .dolores--fijo, .giro--vivo…
   ═══════════════════════════════════════════════════════════════════════════ */

.inicio {
  background: var(--noche-0);
}

.inicio main section {
  display: flow-root; /* que el margen del último hijo no se salga (dejaba una franja) */
  overflow-x: clip; /* lo que se inclina o flota (el celular, el panel) no ensancha la página */
}

/* ═══ El cielo de noche: queda quieto detrás de las tres primeras secciones ═══ */
.noche-envoltura {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--noche-0) 0%, var(--noche-1) 40%, #0b1332 100%);
}

.cielo {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  pointer-events: none;
}

.cielo::before {
  /* el fondo del cielo, más claro hacia el horizonte */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 120%, rgba(46, 73, 160, 0.45), transparent 60%),
    radial-gradient(90% 60% at 80% -10%, rgba(124, 92, 255, 0.18), transparent 60%);
}

.cielo-estrellas {
  position: absolute;
  inset: -20% 0;
  background: url(../img/estrellas-lejos.svg) 0 0 / 520px 520px repeat;
  opacity: 0.75;
  animation: titilar 7s ease-in-out infinite alternate;
}

.cielo-estrellas--cerca {
  background-image: url(../img/estrellas-cerca.svg);
  background-size: 860px 860px;
  opacity: 0.9;
  animation-duration: 11s;
  animation-delay: -4s;
}

@keyframes titilar {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 0.95;
  }
}

.aurora {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora--violeta {
  top: -30vh;
  left: -15vw;
  width: 75vw;
  height: 75vh;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.42), rgba(124, 92, 255, 0.12) 55%, transparent);
  animation: deriva-a 26s ease-in-out infinite alternate;
}

.aurora--turquesa {
  top: 5vh;
  right: -20vw;
  width: 65vw;
  height: 70vh;
  background: radial-gradient(closest-side, rgba(46, 230, 214, 0.22), rgba(46, 230, 214, 0.06) 55%, transparent);
  animation: deriva-b 32s ease-in-out infinite alternate;
}

.aurora--profunda {
  bottom: -35vh;
  left: 15vw;
  width: 90vw;
  height: 60vh;
  background: radial-gradient(closest-side, rgba(56, 84, 200, 0.35), transparent);
  animation: deriva-a 40s ease-in-out infinite alternate-reverse;
}

@keyframes deriva-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(8vw, 6vh, 0) scale(1.15);
  }
}

@keyframes deriva-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  to {
    transform: translate3d(-10vw, 8vh, 0) scale(0.95);
  }
}

.cielo-luna {
  position: absolute;
  top: 16vh;
  right: 9vw;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  box-shadow:
    inset 0.8rem -0.35rem 0 0 #fff4d6,
    0 0 2.5rem rgba(255, 244, 214, 0.22);
  rotate: -18deg;
}

.grano {
  position: absolute;
  inset: -50%;
  background: url(../img/grano.svg) 0 0 / 220px 220px repeat;
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: grano 1.2s steps(5) infinite;
}

@keyframes grano {
  0% {
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(-3%, 2%, 0);
  }
  40% {
    transform: translate3d(2%, -4%, 0);
  }
  60% {
    transform: translate3d(-4%, -1%, 0);
  }
  80% {
    transform: translate3d(3%, 3%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* ═══ Comunes de la portada ═══ */
.seccion-cabeza {
  max-width: 50rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.seccion-cabeza--centro {
  margin-inline: auto;
  text-align: center;
}

.seccion-sub {
  margin-top: 1.1rem;
  color: var(--suave);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
}

.nota-ejemplo {
  color: var(--suave);
  font-size: 0.8rem;
  opacity: 0.85;
}

.nota-ejemplo--centro {
  margin-top: 1.5rem;
  text-align: center;
}

.mock {
  position: relative;
  width: min(100%, 24rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.punto-vivo {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: latido 1.8s ease-out infinite;
}

@keyframes latido {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0.6rem transparent;
  }
}

/* Las burbujas de WhatsApp (modo oscuro de WhatsApp: son las de la app, no los colores de la marca). */
.wa-msj {
  position: relative;
  max-width: 85%;
  padding: 0.42rem 0.6rem 0.32rem;
  border-radius: 0.65rem;
  color: #e9edef;
  font-size: 0.84rem;
  line-height: 1.38;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.2);
  list-style: none;
}

.wa-msj--sale {
  align-self: flex-end;
  border-top-right-radius: 0.15rem;
  background: #005c4b;
}

.wa-msj--entra {
  align-self: flex-start;
  border-top-left-radius: 0.15rem;
  background: #202c33;
}

.wa-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  margin-top: 0.1rem;
  color: #c2d3d0;
  font-size: 0.66rem;
}

.wa-meta .ic {
  width: 0.95rem;
  height: 0.95rem;
  color: #53bdeb;
}

/* ═══ 1. Portada ═══ */
.portada {
  position: relative;
  overflow-x: clip;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--menu-alto) + 2.5rem) 0 5.5rem;
}

/* P1 de la fábrica (docs/WEB_FABRICA.md): un detalle de luz detrás del celular, no un fondo entero.
   Se recorta con un degradé redondo y se suma a la noche dibujada (screen). */
.portada-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(55% 65% at 72% 52%, #000 20%, transparent 78%);
  mask-image: radial-gradient(55% 65% at 72% 52%, #000 20%, transparent 78%);
}

.portada-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portada-media--celu {
  display: none;
}

.portada-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.portada-titulo {
  font-size: clamp(2.6rem, 1.1rem + 3.9vw, 4.7rem);
  font-weight: 750;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.portada-linea {
  display: block;
}

.portada-hora {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 30%, #9fb0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portada-hora * {
  background-image: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portada-pregunta {
  display: block;
  margin-top: 0.08em;
  padding: 0 0.08em 0.1em 0;
  font-size: 1.1em;
  line-height: 1.02;
}

.portada-sub {
  max-width: 35rem;
  margin: 1.6rem 0 2.1rem;
  color: var(--suave);
  font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.55;
}

.portada-sub strong {
  color: var(--texto);
  font-weight: 650;
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.portada-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  color: var(--suave);
  font-size: 0.92rem;
}

.portada-nota .ic {
  width: 1rem;
  height: 1rem;
  color: var(--turquesa);
}

.portada-demo {
  margin-top: 0.9rem;
  font-size: 0.95rem;
}

.portada-demo a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--texto);
  text-underline-offset: 3px;
}

.portada-demo .ic {
  color: var(--whatsapp);
}

.portada-bajar {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--suave);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.portada-bajar-linea {
  position: relative;
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
}

.portada-bajar-linea::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--turquesa));
  animation: gotea 2.2s var(--curva) infinite;
}

@keyframes gotea {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

/* El celular 3D (se inclina con el mouse: web.mjs mueve --rx y --ry) */
.portada-escena {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  perspective: 1500px;
}

.halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -52%;
  background:
    radial-gradient(closest-side, rgba(124, 92, 255, 0.34), rgba(46, 230, 214, 0.1) 55%, transparent 72%);
  pointer-events: none;
}

.celular-marco {
  --rx: 4deg;
  --ry: -11deg;
  position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(1deg);
  transform-style: preserve-3d;
}

.celular {
  position: relative;
  /* el ancho también lo limita el alto de la pantalla: en una compu baja el celular entra entero */
  width: min(clamp(16.5rem, 13rem + 8vw, 20.5rem), calc((100vh - 10rem) * 0.466));
  aspect-ratio: 9 / 19.3;
  padding: 0.62rem;
  border-radius: 3.1rem;
  background: linear-gradient(150deg, #3a4160 0%, #11152a 28%, #0a0d1a 60%, #2b3150 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 5px #05070f,
    0 60px 120px -30px rgba(0, 0, 0, 0.85),
    0 30px 80px -30px rgba(124, 92, 255, 0.45),
    -30px 30px 80px -40px rgba(46, 230, 214, 0.35);
  transform-style: preserve-3d;
}

.celular::before {
  /* un reflejo de vidrio sobre la pantalla */
  content: "";
  position: absolute;
  inset: 0.62rem;
  z-index: 4;
  border-radius: 2.55rem;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}

.celular-isla {
  position: absolute;
  top: 1.15rem;
  left: 50%;
  z-index: 5;
  width: 5.6rem;
  height: 1.6rem;
  border-radius: 1rem;
  background: #000;
  transform: translateX(-50%);
}

.celular-pantalla {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 2.55rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.025) 0 1px, transparent 1.5px) 0 0 / 22px 22px,
    #0b141a;
}

.wa-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.6rem 0.35rem 1.9rem;
  color: #e9edef;
  font-size: 0.8rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.wa-estado-iconos {
  display: flex;
  gap: 0.25rem;
}

.wa-estado-iconos .ic {
  width: 0.95rem;
  height: 0.95rem;
}

.wa-cabeza {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem 0.6rem 0.5rem;
  background: #1f2c34;
  color: #e9edef;
}

.wa-volver .ic {
  width: 1.2rem;
  height: 1.2rem;
  color: #aebac1;
}

.wa-avatar {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ee6d6, #7c5cff);
  color: #fff;
}

.wa-avatar .ic {
  width: 1.2rem;
  height: 1.2rem;
}

.wa-nombre {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
}

.wa-linea {
  display: grid;
  color: #8696a0;
  font-size: 0.74rem;
  line-height: 1.3;
}

.wa-linea > span {
  grid-area: 1 / 1;
  transition: opacity 0.25s;
}

.wa-linea-escribe {
  color: #06cf9c;
  opacity: 0;
}

.escribiendo .wa-linea-en {
  opacity: 0;
}

.escribiendo .wa-linea-escribe {
  opacity: 1;
}

.wa-charla {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.38rem;
  min-height: 0;
  padding: 0.8rem 0.7rem 0.6rem;
  overflow: hidden;
  list-style: none;
}

.wa-fecha {
  align-self: center;
  margin-bottom: auto;
  padding: 0.22rem 0.6rem;
  border-radius: 0.45rem;
  background: #182229;
  color: #8696a0;
  font-size: 0.68rem;
  list-style: none;
}

.wa-escribiendo.ve {
  display: flex;
}

.wa-escribiendo {
  display: none;
  align-self: flex-start;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  border-top-left-radius: 0.15rem;
  background: #202c33;
  list-style: none;
}

.wa-escribiendo span,
.mini-escribe span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #8696a0;
  animation: saltito 1.1s ease-in-out infinite;
}

.wa-escribiendo span:nth-child(2),
.mini-escribe span:nth-child(2) {
  animation-delay: 0.15s;
}

.wa-escribiendo span:nth-child(3),
.mini-escribe span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes saltito {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  30% {
    transform: translateY(-0.25rem);
    opacity: 1;
  }
}

.wa-barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem 1.1rem;
}

.wa-campo {
  flex: 1;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: #1f2c34;
  color: #8696a0;
  font-size: 0.8rem;
}

.wa-mic {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: #00a884;
  color: #fff;
}

.wa-mic .ic {
  width: 1.1rem;
  height: 1.1rem;
}

/* Las fichas de vidrio que saltan afuera del celular */
.ficha {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(34, 44, 88, 0.82), rgba(17, 24, 54, 0.78));
  color: var(--noche-texto);
  font-size: 0.85rem;
  line-height: 1.3;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.ficha--turno {
  top: 17%;
  left: -6%;
}

.ficha--recordatorio {
  right: -7%;
  bottom: 13%;
}

.ficha-icono {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(46, 230, 214, 0.28), rgba(124, 92, 255, 0.28));
  color: var(--turquesa);
}

.ficha-titulo {
  display: block;
  font-weight: 700;
}

.ficha-texto {
  display: block;
  color: var(--noche-suave);
  font-size: 0.8rem;
}

/* ═══ 2. Lo que se pierde ═══ */
.dolores {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
}

.dolores-grilla {
  display: grid;
  gap: 2rem;
}

.dolores-reloj {
  display: none;
}

.escenas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1.25rem;
}

/* Quieta (sin movimiento o en celular), la grilla de escenas y el ticket va junta y sin huecos: con 2
   columnas, 7 escenas + el ticket; con 3, el ticket ocupa las dos que deja la séptima escena. */
@media (min-width: 720px) {
  .dolores-escenario:not(.dolores--fijo) .dolores-grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .dolores-escenario:not(.dolores--fijo) .escenas {
    display: contents;
  }

  .dolores-escenario:not(.dolores--fijo) .ticket {
    align-self: center;
  }
}

@media (min-width: 1130px) {
  .dolores-escenario:not(.dolores--fijo) .dolores-grilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dolores-escenario:not(.dolores--fijo) .ticket {
    grid-column: span 2;
  }
}

.escena {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
}

.escena-cuando {
  display: flex;
  flex-direction: column;
  font-family: var(--letra-titulo);
}

.escena-dia {
  color: var(--suave);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.escena-hora {
  font-size: 2.9rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.escena-titulo {
  margin-top: 0.5rem;
  font-size: 1.4rem;
}

.escena-visual {
  position: relative;
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 15rem;
  padding: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.1rem;
  background: radial-gradient(120% 90% at 50% 0%, rgba(124, 92, 255, 0.1), transparent 60%), rgba(3, 5, 12, 0.55);
}

.escena-costo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--perdida);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.35;
}

.escena-costo-rotulo {
  color: rgba(255, 90, 110, 0.78);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* El dato de la escena, con su fuente */
.escena-dato {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid rgba(255, 213, 158, 0.55);
  border-radius: 0 0.7rem 0.7rem 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--noche-texto);
  font-size: 0.88rem;
  line-height: 1.45;
}

.escena-dato-rotulo {
  color: var(--dorado);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.escena-dato cite {
  color: var(--noche-suave);
  font-size: 0.76rem;
  font-style: normal;
}

/* Escena: nadie contesta */
.mock-wa {
  overflow: hidden;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.2rem;
  background: #0b141a;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.mock-wa-cabeza {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: #1f2c34;
  color: #e9edef;
}

.mock-avatar {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  background: #6a7a84;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.mock-wa-nombre {
  display: block;
  font-size: 0.9rem;
  font-weight: 650;
}

.mock-wa-sub {
  display: block;
  color: #8696a0;
  font-size: 0.72rem;
}

.mock-wa-charla {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 0.8rem 1rem;
  list-style: none;
}

.mock-silencio {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 0.4rem;
  margin: 0.3rem 0;
  padding: 0.3rem 0.75rem;
  border-radius: 0.5rem;
  background: #182229;
  color: #8e9ca6;
  font-size: 0.74rem;
  list-style: none;
}

.mock-silencio .ic {
  width: 0.95rem;
  height: 0.95rem;
}

.wa-msj--golpe {
  box-shadow: 0 0 0 1px rgba(255, 90, 110, 0.7), 0 0 28px rgba(255, 90, 110, 0.3);
}

/* Escena: el presupuesto que se enfría */
.presupuesto-doc {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 1.1rem;
  background: #f5f7fc;
  color: #0b1220;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.presupuesto-cabeza {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.presupuesto-icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 0.75rem;
  background: #e5eaf4;
  color: #3f4a60;
}

.presupuesto-titulo {
  display: block;
  font-weight: 700;
}

.presupuesto-sub {
  display: block;
  color: #4a5569;
  font-size: 0.85rem;
}

.presupuesto-enviado {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  color: #4a5569;
  font-size: 0.72rem;
  font-weight: 600;
}

.presupuesto-enviado .ic {
  color: #2f8fd8;
}

.presupuesto-lineas {
  margin: 0.9rem 0 0.7rem;
  list-style: none;
}

.presupuesto-lineas li {
  height: 0.55rem;
  margin: 0.55rem 0;
  border-radius: 0.3rem;
  background: #dfe5f0;
}

.presupuesto-lineas li:nth-child(1) {
  width: 92%;
}

.presupuesto-lineas li:nth-child(2) {
  width: 74%;
}

.presupuesto-lineas li:nth-child(3) {
  width: 84%;
}

.presupuesto-lineas li:nth-child(4) {
  width: 46%;
  background: #cfd7e6;
}

.presupuesto-fecha {
  color: #4a5569;
  font-size: 0.75rem;
}

.escarcha {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 15% 15%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(50% 45% at 90% 85%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(135deg, rgba(196, 226, 255, 0.78), rgba(150, 196, 255, 0.4) 45%, rgba(214, 236, 255, 0.8));
  color: #ffffff;
  opacity: 0.7;
  -webkit-backdrop-filter: blur(1.5px) saturate(0.4);
  backdrop-filter: blur(1.5px) saturate(0.4);
}

.escarcha .ic {
  width: 3.8rem;
  height: 3.8rem;
  filter: drop-shadow(0 0 14px rgba(120, 180, 255, 0.95));
}

.presupuesto-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
}

.presupuesto-dias li {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(160, 200, 255, 0.28);
  border-radius: 999px;
  background: rgba(160, 200, 255, 0.1);
  color: #c3dbff;
  font-size: 0.8rem;
}

.presupuesto-dias span {
  color: #eef5ff;
  font-weight: 700;
}

/* Escena: "hoy no puedo ir" */
.mock-noti {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.1rem;
  background: rgba(44, 52, 80, 0.88);
  color: #fff;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mock-noti-icono,
.noti-icono {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 0.55rem;
  background: var(--whatsapp);
  color: #fff;
}

.mock-noti-app {
  display: block;
  color: #b9c2dc;
  font-size: 0.7rem;
}

.mock-noti-texto {
  display: block;
  font-size: 0.92rem;
  font-weight: 650;
}

.agenda {
  padding: 1rem;
  border-radius: 1.1rem;
  background: #f5f7fc;
  color: #0b1220;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.agenda-titulo {
  margin-bottom: 0.6rem;
  color: #4a5569;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agenda-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
}

.agenda-lista li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #e1e6ef;
  border-radius: 0.65rem;
  background: #fff;
  font-size: 0.88rem;
}

.agenda-lista time {
  width: 2.8rem;
  color: #4a5569;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.agenda-cancela {
  --c: 1; /* 0 → 1: el turno se cancela (web.mjs lo anima) */
  position: relative;
  isolation: isolate;
}

.agenda-cancela::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid #ffc2cb;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, #fff4f5 0 7px, #ffe2e7 7px 14px);
  opacity: var(--c);
}

.agenda-trat {
  position: relative;
  opacity: calc(1 - var(--c) * 0.5);
}

.agenda-trat::after {
  content: "";
  position: absolute;
  top: 55%;
  right: 0;
  left: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(var(--c));
  transform-origin: left;
}

.agenda-hueco {
  opacity: var(--c);
  margin-left: auto;
  color: #c42a41;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agenda-espera {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  color: #5c6679;
  font-size: 0.8rem;
}

.agenda-espera span {
  font-style: italic;
}

/* Escena: el que no vuelve */
.ficha-paciente {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem;
  border-radius: 1.1rem;
  background: #f5f7fc;
  color: #0b1220;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.mock-avatar--grande {
  width: 3.2rem;
  height: 3.2rem;
  background: #dfe5f0;
  color: #4a5569;
}

.mock-avatar--grande .ic {
  width: 1.6rem;
  height: 1.6rem;
}

.ficha-nombre {
  display: block;
  font-weight: 700;
}

.ficha-ultima {
  display: block;
  color: #4a5569;
  font-size: 0.88rem;
}

.ficha-proximo {
  display: block;
  margin-top: 0.15rem;
  color: #c42a41;
  font-size: 0.78rem;
  font-weight: 650;
}

.meses {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.3rem;
  list-style: none;
}

.meses li {
  padding: 0.42rem 0;
  border-radius: 0.45rem;
  background: rgba(255, 90, 110, 0.14);
  color: #ffc1c9;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* Escena: el domingo */
.mock-domingo {
  overflow: hidden;
  width: min(100%, 21rem);
  padding: 1.1rem 1rem 1.2rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(90% 60% at 50% 115%, #ff9a52 0%, rgba(230, 90, 40, 0.75) 30%, transparent 70%),
    radial-gradient(60% 40% at 15% 20%, rgba(255, 190, 120, 0.25), transparent 70%),
    linear-gradient(180deg, #2a1433 0%, #4a1c2c 55%, #7a2d1f 100%);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.brasas span {
  position: absolute;
  bottom: -0.5rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #ffc58a;
  box-shadow: 0 0 0.6rem 0.2rem rgba(255, 140, 60, 0.8);
  opacity: 0;
  animation: brasa 5.5s linear infinite;
}

.brasas span:nth-child(1) {
  left: 12%;
}

.brasas span:nth-child(2) {
  left: 34%;
  animation-delay: -1.2s;
  animation-duration: 6.5s;
}

.brasas span:nth-child(3) {
  left: 58%;
  animation-delay: -2.6s;
}

.brasas span:nth-child(4) {
  left: 76%;
  animation-delay: -3.8s;
  animation-duration: 7s;
}

.brasas span:nth-child(5) {
  left: 90%;
  animation-delay: -0.6s;
}

@keyframes brasa {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate3d(1.2rem, -18rem, 0);
    opacity: 0;
  }
}

.bloqueo {
  position: relative;
  color: #fff;
  text-align: center;
}

.bloqueo-hora {
  font-family: var(--letra-titulo);
  font-size: 3.6rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.bloqueo-fecha {
  margin: 0.25rem 0 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.notis {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: left;
  list-style: none;
}

.notis li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: rgba(30, 14, 22, 0.55);
  color: #fff;
  font-size: 0.85rem;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

.noti-app {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.noti-texto {
  display: block;
  font-weight: 650;
}

.notis time {
  align-self: flex-start;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
}

/* Escena: recepcionista a la fuerza */
.sillon-tarjeta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 1.1rem;
  background: #f5f7fc;
  color: #0b1220;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.sillon-icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 0.8rem;
  background: #d7f5f2;
  color: #0a7d79;
}

.sillon-rotulo {
  display: block;
  color: #4a5569;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sillon-texto {
  display: block;
  font-weight: 700;
}

.sillon-curso {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  color: #0a7d79;
  font-size: 0.74rem;
  font-weight: 700;
}

.sin-leer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: 1.1rem;
  background: rgba(37, 211, 102, 0.08);
  color: #eafff2;
}

.sin-leer-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.9rem;
  background: var(--whatsapp);
  color: #fff;
}

.sin-leer-icono .ic {
  width: 1.7rem;
  height: 1.7rem;
}

.sin-leer-globo {
  position: absolute;
  top: -0.5rem;
  right: -0.6rem;
  display: grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #d42a42; /* el rojo de lo que se pierde, más oscuro: el número blanco pasa AA */
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px #0a1024;
}

.sin-leer b {
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
}

.sin-leer-sub {
  display: block;
  color: var(--noche-suave);
  font-size: 0.82rem;
}

/* Escena: las reseñas que nadie pide (un buscador cualquiera, sin marcas) */
.mock-resenas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(100%, 22rem);
}

.busqueda {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #eef1ff;
  font-size: 0.95rem;
}

.busqueda-icono {
  display: grid;
  opacity: 0.75;
}

.busqueda-icono .ic {
  width: 1.05rem;
  height: 1.05rem;
}

.resultados {
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.resultado {
  --elegida: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--turquesa) calc(var(--elegida) * 75%), rgba(255, 255, 255, 0.1));
  border-radius: 1rem;
  background: #111826;
  color: #c9cfdb;
  box-shadow: 0 0 0 calc(var(--elegida) * 4px) rgba(46, 230, 214, 0.14), 0 24px 50px -24px rgba(0, 0, 0, 0.7);
}

.resultado--aurora {
  --elegida: 0;
  opacity: 0.6; /* la que no eligió (con movimiento, se apaga al final de la escena) */
}

.resultado-nombre {
  color: #f2f4fa;
  font-weight: 650;
}

.resultado-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
}

.resultado-nota b {
  color: #f2f4fa;
  font-variant-numeric: tabular-nums;
}

.estrellas {
  position: relative;
  display: inline-flex;
}

.estrellas-vacias,
.estrellas-llenas {
  display: inline-flex;
  gap: 1px;
}

.estrellas-vacias {
  color: rgba(255, 255, 255, 0.2);
}

.estrellas-llenas {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: #f6c453;
}

.estrellas .ic {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}

.estrellas--39 .estrellas-llenas {
  width: 78%;
}

.estrellas--48 .estrellas-llenas {
  width: 96%;
}

.resultado-ultima {
  color: #9aa3b5;
  font-size: 0.8rem;
  font-style: italic;
}

.resultado-elegida {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(46, 230, 214, 0.16);
  color: #7ff3e8;
  font-size: 0.75rem;
  font-weight: 700;
}

.resultado-elegida .ic {
  width: 0.8rem;
  height: 0.8rem;
}

/* El ticket de la semana */
.ticket {
  position: relative;
  width: min(100%, 21rem);
  margin-inline: auto;
  font-family: var(--letra-mono);
}

.ticket-ranura {
  position: relative;
  z-index: 2;
  height: 0.9rem;
  margin: 0 -0.7rem;
  border-radius: 0.5rem;
  background: linear-gradient(#000, #1c2236);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 12px 20px -8px rgba(0, 0, 0, 0.9);
}

.ticket-papel {
  --diente: 9px;
  position: relative;
  margin-top: -0.45rem;
  padding: 1.5rem 1.25rem calc(1.5rem + var(--diente));
  background: linear-gradient(180deg, #e9e6dc 0, #fbfaf5 1.2rem);
  color: #1d1b16;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
}

.ticket-cabeza {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.ticket-sub {
  margin: 0.2rem 0 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed #a9a597;
  color: #555044;
  font-size: 0.74rem;
  text-align: center;
}

.ticket-lineas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-size: 0.79rem;
  line-height: 1.35;
  list-style: none;
}

.ticket-lineas li {
  display: flex;
  gap: 0.6rem;
}

.ticket-cant {
  min-width: 1ch;
  font-weight: 800;
}

.ticket-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed #a9a597;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticket-signo {
  color: #c42a41;
  font-family: var(--letra-titulo);
  font-size: 1.8rem;
  letter-spacing: 0;
}

.ticket .boton {
  width: 100%;
}

.dolores--final .ticket {
  filter: drop-shadow(0 0 50px rgba(255, 90, 110, 0.35));
}

.dolores--final .ticket-signo {
  animation: late 1.6s ease-in-out infinite;
}

/* En compu, con movimiento: la sección queda fija y cambia una escena por pantalla (web.mjs). */
.dolores--fijo {
  display: flex;
  align-items: center;
  height: 100vh;
  padding-top: var(--menu-alto);
}

.dolores--fijo .dolores-grilla {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  height: min(44rem, calc(100vh - var(--menu-alto) - 2.5rem));
}

.dolores--fijo .dolores-reloj {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.dolores-reloj-dia {
  margin-bottom: 0.9rem; /* que no quede pegado a los números grandes */
  color: var(--suave);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reloj {
  display: flex;
  font-family: var(--letra-titulo);
  font-size: clamp(4.6rem, 8.6vw, 9rem);
  font-weight: 250;
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dolores-reloj .reloj--largo,
.giro-reloj .reloj--largo {
  font-size: clamp(3rem, 5.4vw, 5.6rem);
}

.reloj-c {
  display: inline-grid;
  overflow-x: visible;
  overflow-y: clip;
  margin-block: -0.1em;
  padding-block: 0.1em;
}

.reloj-c > span {
  grid-area: 1 / 1;
}

.dolores-reloj-titulo {
  margin-top: 1.2rem;
  font-family: var(--letra-titulo);
  font-size: clamp(1.5rem, 2.3vw, 2.2rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.dolores-progreso {
  display: flex;
  gap: 0.4rem;
  margin-top: 2.2rem;
  list-style: none;
}

.dolores-progreso li {
  width: 1.9rem;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  transition: background-color 0.4s;
}

.dolores-progreso li.hecho {
  background: var(--perdida);
}

.dolores--fijo .escenas {
  position: relative;
  display: block;
  height: 100%;
}

.dolores--fijo .escena {
  position: absolute;
  inset: 0;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  visibility: hidden;
}

.dolores--fijo .escena.activa {
  visibility: visible;
}

.dolores--fijo .escena-cabeza {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.dolores--fijo .escena-visual {
  flex: 0 1 auto;
  min-height: min(30rem, calc(100vh - var(--menu-alto) - 14rem)); /* abajo van el costo y el dato */
  border-radius: 1.8rem;
}

.dolores--fijo .mock {
  zoom: 1.14;
}

.dolores--fijo .escena-costo {
  flex-direction: row;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 1.15rem;
}

.dolores--fijo .escena-costo-rotulo {
  white-space: nowrap;
}

.dolores--fijo .escena-dato {
  font-size: 0.84rem;
}

/* ═══ 3. La cuenta ═══ */
.cuenta {
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(5rem, 10vw, 8rem);
}

.cuenta-aviso {
  display: block;
  margin-top: 0.3rem;
  color: var(--dorado);
  font-size: 0.92rem;
}

.cuenta-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.cuenta-controles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.control {
  display: grid;
  grid-template-areas:
    "etiqueta valor"
    "ayuda ayuda"
    "rango rango";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.7rem 1rem;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s, background-color 0.25s;
}

.control:focus-within {
  border-color: rgba(46, 230, 214, 0.5);
  background: rgba(46, 230, 214, 0.05);
}

.control-etiqueta {
  grid-area: etiqueta;
  color: var(--suave);
  font-size: 0.9rem;
  line-height: 1.35;
}

.control-ayuda {
  grid-area: ayuda;
  margin-top: -0.35rem;
  color: var(--noche-suave);
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* La facturación no suma a lo que se pierde: va aparte, a lo ancho (es para sacar el %). */
.control[data-control="facturacion"] {
  grid-column: 1 / -1;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.02);
}

.cuenta-medir {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.2rem 0.3rem;
  color: var(--noche-suave);
  font-size: 0.88rem;
  line-height: 1.45;
}

.cuenta-medir .ic {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  color: var(--dorado);
}

.control-valor {
  display: flex;
  flex-direction: column;
  grid-area: valor;
  align-items: flex-end;
  text-align: right;
}

.control-valor b {
  font-family: var(--letra-titulo);
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.control-valor span {
  color: var(--suave);
  font-size: 0.75rem;
}

.control[data-tipo="plata"] .control-valor {
  flex-direction: row-reverse;
  align-items: baseline;
  gap: 0.3rem;
}

.control[data-tipo="plata"] .control-valor span {
  font-size: 0.85rem;
  font-weight: 600;
}

.control-rango {
  --p: 50%;
  grid-area: rango;
  width: 100%;
  height: 1.6rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

html:not(.js) .control-rango {
  display: none;
}

.control-rango::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violeta), var(--turquesa) var(--p), rgba(255, 255, 255, 0.13) var(--p));
}

.control-rango::-webkit-slider-thumb {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: calc(3px - 0.675rem);
  border: 3px solid var(--turquesa);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(46, 230, 214, 0.16), 0 4px 12px rgba(0, 0, 0, 0.45);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.2s;
}

.control-rango:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(46, 230, 214, 0.22), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.control-rango::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.13);
}

.control-rango::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violeta), var(--turquesa));
}

.control-rango::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--turquesa);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(46, 230, 214, 0.16);
}

.cuenta-resultado {
  position: sticky;
  top: calc(var(--menu-alto) + 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  overflow: hidden;
  border: 1px solid rgba(255, 90, 110, 0.28);
  border-radius: 1.6rem;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 90, 110, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: 0 50px 100px -50px rgba(255, 90, 110, 0.45);
}

.cuenta-rotulo {
  color: #ffc1c9;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cuenta-cifra {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.4rem 0 0.6rem;
  color: #fff;
  font-family: var(--letra-titulo);
  font-size: clamp(3.4rem, 6.5vw, 5.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.cuenta-moneda {
  color: #ffc1c9;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0;
}

.cuenta-anio {
  color: var(--suave);
  font-size: 1.05rem;
}

.cuenta-anio b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.cuenta-parte {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  background: rgba(255, 90, 110, 0.12);
  color: #ffd5da;
  font-size: 0.95rem;
  line-height: 1.4;
}

.cuenta-parte b {
  color: #fff;
  font-family: var(--letra-titulo);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cuenta-barras {
  display: grid;
  gap: 0.55rem;
  margin: 1.6rem 0 1.4rem;
}

.barra {
  position: relative;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
}

.barra-relleno {
  --ancho: 100%;
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ancho);
  border-radius: inherit;
  transition: width 0.55s var(--curva);
}

.barra--perdida .barra-relleno {
  background: linear-gradient(90deg, #9e1f35, var(--perdida));
}

.barra--asistente .barra-relleno {
  background: linear-gradient(90deg, #0a8a86, var(--turquesa));
}

.barra-texto {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.9rem;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 650;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cuenta-alcanza {
  font-size: 1.08rem;
  line-height: 1.45;
}

.cuenta-alcanza b {
  color: var(--turquesa);
}

.cuenta-fija {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: 1.02rem;
}

.cuenta-nota {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2rem;
  color: var(--suave);
  font-size: 0.95rem;
}

.cuenta-nota .ic {
  color: var(--turquesa);
}

/* ═══ 4. El giro: la misma noche, con el asistente (amanece) ═══ */
.giro {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  /* sin movimiento: el cielo va de noche a amanecer de arriba abajo */
  background: linear-gradient(180deg, #0b1332 0%, #16215a 22%, #3b2f74 42%, #8a4a8a 58%, #e0788a 72%, #ffb38a 86%, #ffd9b0 100%);
}

.giro-cielo {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
}

/* P2: la luz de la persiana, arriba (donde sale el sol) y apagándose hacia abajo. */
.giro-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 90%);
}

.giro-escenario {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 11vw, 8.5rem) 0 2rem;
}

.giro-grilla {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.giro-cabeza h2 {
  text-shadow: 0 2px 30px rgba(20, 12, 50, 0.45);
}

.giro .etiqueta {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(5, 7, 15, 0.35);
  color: #f3e9ff;
}

.giro .serif {
  color: var(--dorado);
}

.giro-reloj {
  display: grid;
  justify-items: start;
  margin-top: 2rem;
}

.giro-momento,
.giro-rebobina {
  grid-area: 1 / 1;
}

.giro-reloj .reloj {
  grid-area: 2 / 1;
  margin-top: 0.9rem; /* separado del momento del día */
}

.giro-momento {
  color: #f3e9ff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(20, 12, 50, 0.5);
}

.giro-rebobina {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--dorado);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
}

.giro-rebobina .ic {
  width: 1.1rem;
  height: 1.1rem;
}

.giro-reloj .reloj {
  font-size: clamp(4rem, 7.5vw, 7.5rem);
  text-shadow: 0 0 40px rgba(255, 213, 158, 0.25);
}

.linea-tiempo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.6rem;
  background: rgba(8, 10, 28, 0.6);
  box-shadow: 0 40px 80px -40px rgba(5, 7, 15, 0.8);
  list-style: none;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.linea-tiempo li {
  position: relative;
  display: grid;
  grid-template-columns: 3.3rem 2.1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.9rem;
  transition: opacity 0.45s, background-color 0.45s;
}

.linea-tiempo li::before {
  /* la línea que une los íconos */
  content: "";
  position: absolute;
  top: 50%;
  left: calc(0.6rem + 3.3rem + 0.8rem + 1.05rem - 1px);
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.12);
  z-index: -1;
}

.linea-tiempo li:last-child::before {
  display: none;
}

.linea-tiempo time {
  color: var(--dorado);
  font-family: var(--letra-titulo);
  font-size: 1.02rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.lt-icono {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  background: #12304a;
  color: var(--turquesa);
  box-shadow: 0 0 0 1px rgba(46, 230, 214, 0.25);
}

.lt-icono .ic {
  width: 1.1rem;
  height: 1.1rem;
}

.linea-tiempo p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.95rem;
  line-height: 1.38;
}

.linea-tiempo strong {
  color: #fff;
  font-weight: 700;
}

.linea-tiempo q {
  color: #dffcf9;
  font-style: italic;
}

.linea-tiempo li:last-child .lt-icono {
  background: linear-gradient(135deg, #ffd59e, #ffb38a);
  color: #5a2a0c;
  box-shadow: 0 0 20px rgba(255, 213, 158, 0.55);
}

.familia {
  position: relative;
  isolation: isolate;
  max-width: 62rem;
  margin: 2.5rem auto clamp(4rem, 8vw, 6rem);
  padding: clamp(2rem, 5vw, 3.6rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 2rem;
  background: linear-gradient(135deg, #fff6ea 0%, #ffe6cf 55%, #ffd5b1 100%);
  color: #3a1d0b;
  box-shadow: 0 50px 100px -50px rgba(120, 50, 10, 0.6);
}

/* P3: la mesa del domingo, del lado derecho de la tarjeta, fundida con el dorado. */
.familia-media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 60%;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent);
  mask-image: linear-gradient(270deg, #000 30%, transparent);
}

.familia-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.familia-brillo {
  position: absolute;
  top: -45%;
  right: -12%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 196, 120, 0.9), transparent);
}

.familia-texto {
  font-family: var(--letra-titulo);
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.5rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.familia-texto .serif {
  display: block;
  margin-top: 0.6rem;
  color: #9a3510;
  font-size: 1.12em;
}

/* Con movimiento (web.mjs): el cielo en capas que amanece atado al scroll. Va adentro del escenario
   (que en compu queda fijo): abajo del escenario sigue el color con el que termina el amanecer. */
.giro--vivo {
  background: linear-gradient(180deg, #ffd59e 0%, #ffe2c2 55%, #ffd9b0 100%);
}

.giro--vivo .giro-cielo {
  display: block;
}

.giro-capa {
  position: absolute;
  inset: 0;
}

.giro-capa--noche {
  background: linear-gradient(180deg, #0b1332 0%, #0a1024 55%, #141d48 100%);
}

.giro-capa--alba {
  background: linear-gradient(180deg, #19265e 0%, #33307a 34%, #6c4190 56%, #c95f88 72%, #ffab86 88%, #ffd59e 100%);
  opacity: 0;
}

.giro-capa--manana {
  background: linear-gradient(180deg, #2f4f96 0%, #53629f 40%, #d98a8c 70%, #ffcfa3 88%, #ffe7c8 100%);
  opacity: 0;
}

.giro-estrellas {
  position: absolute;
  inset: 0;
  background:
    url(../img/estrellas-cerca.svg) 0 0 / 860px 860px repeat,
    url(../img/estrellas-lejos.svg) 0 0 / 520px 520px repeat;
}

.giro-sol {
  position: absolute;
  bottom: -18vmin;
  left: 58%;
  width: 46vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0%, #ffe3b0 26%, rgba(255, 190, 130, 0.65) 46%, rgba(255, 170, 120, 0) 70%);
  transform: translateY(70%);
}

.giro-horizonte {
  position: absolute;
  inset: auto 0 0;
  height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(255, 213, 158, 0.3));
}

.giro--vivo .linea-tiempo li {
  opacity: 0.32;
}

.giro--vivo .linea-tiempo li.encendido {
  opacity: 1;
}

.giro--vivo .linea-tiempo li.actual {
  background: rgba(255, 255, 255, 0.07);
}

.giro--fijo .giro-escenario {
  display: flex;
  align-items: center;
  height: 100vh;
  padding: var(--menu-alto) 0 1rem;
}

.giro--fijo .linea-tiempo li {
  padding-block: 0.38rem;
}

/* ═══ 5. El panel (día) ═══ */
.panel-sec {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, #ffd9b0 0%, var(--dia-fondo) 22rem);
}

/* En modo oscuro el día también es oscuro: el amanecer baja de a poco hasta ese color. */
@media (prefers-color-scheme: dark) {
  .giro {
    background: linear-gradient(180deg, #0b1332 0%, #16215a 20%, #3b2f74 38%, #8a4a8a 52%, #e0788a 64%, #ffb38a 76%, #c98479 88%, #3a2a3f 100%);
  }

  .giro--vivo {
    background: linear-gradient(180deg, #ffd59e 0%, #e7a98c 38%, #9c6070 72%, #3a2a3f 100%);
  }

  .panel-sec {
    background: linear-gradient(180deg, #3a2a3f 0%, var(--dia-fondo) 18rem);
  }
}

.panel-escena {
  position: relative;
  perspective: 2000px;
}

/* Las capturas del panel de verdad (web/src/assets/img/panel, con una clínica de ejemplo). */
.panel-captura {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--dia-borde);
  border-radius: 1.2rem;
  background: var(--dia-superficie);
  box-shadow: var(--dia-sombra);
  transform-origin: 50% 0%;
}

.panel-ventana {
  display: flex;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--dia-borde);
  background: var(--dia-superficie-2);
}

.panel-ventana span {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--dia-borde);
}

.panel-captura img,
.panel-mini img {
  display: block;
  width: 100%;
  height: auto;
}

/* En compu, que entre entero en la pantalla (la captura es 16:10). */
@media (min-width: 701px) {
  .panel-escena {
    max-width: min(100%, calc((100vh - var(--menu-alto) - 8rem) * 1.6));
    margin-inline: auto;
  }
}

.panel-mas {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  max-width: 68rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.panel-mini {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}

.panel-mini picture {
  display: block;
  overflow: hidden;
  border: 1px solid var(--dia-borde);
  border-radius: 1rem;
  background: var(--dia-superficie);
  box-shadow: var(--dia-sombra);
}

.panel-mini figcaption {
  color: var(--dia-suave);
  font-size: 0.95rem;
  line-height: 1.45;
}

.panel-mini figcaption b {
  color: var(--dia-texto);
}

.senalador {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 16rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: #0b1220;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.3;
  box-shadow: 0 24px 50px -20px rgba(11, 18, 32, 0.6);
}

.senalador-punto {
  width: 0.65rem;
  height: 0.65rem;
  flex: none;
  border-radius: 50%;
  background: var(--turquesa);
  box-shadow: 0 0 0 4px rgba(46, 230, 214, 0.25);
}

/* Sobre la captura: uno cuelga del borde de abajo, debajo de la lista de hoy; el otro, debajo de
   "Requiere atención" (donde la captura está vacía), para no tapar nada del panel. */
.senalador--agenda {
  bottom: -2.4rem;
  left: 28%;
}

.senalador--atencion {
  top: 66%;
  right: -1.5rem;
}

.panel--fijo .panel-escenario {
  display: flex;
  align-items: center;
  height: 100vh;
  padding-top: var(--menu-alto);
}

/* ═══ 6. Lo que cambia: más plata y más tiempo ═══ */
.cambia {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(1rem, 3vw, 2rem);
}

.cambia-grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 66rem;
  margin: 0 auto;
}

.cambia-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--dia-borde);
  border-radius: 1.75rem;
  background:
    radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--dia-acento) 11%, transparent), transparent 60%),
    var(--dia-superficie);
  box-shadow: var(--dia-sombra);
}

.cambia--tiempo {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(255, 179, 138, 0.22), transparent 60%),
    var(--dia-superficie);
}

.cambia-icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--dia-acento) 13%, transparent);
  color: var(--dia-acento-fuerte);
}

.cambia--tiempo .cambia-icono {
  background: rgba(255, 179, 138, 0.28);
  color: #9a4a12;
}

.cambia-icono .ic {
  width: 1.5rem;
  height: 1.5rem;
}

.cambia-tarjeta h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.cambia-tarjeta .lista-check {
  gap: 0.8rem;
  color: var(--dia-suave);
}

.cambia-tarjeta .lista-check b {
  color: var(--dia-texto);
}

.cambia--tiempo .lista-check .ic {
  background: rgba(255, 179, 138, 0.28);
  color: #9a4a12;
}

@media (prefers-color-scheme: dark) {
  .cambia--tiempo {
    background:
      radial-gradient(110% 70% at 100% 0%, rgba(255, 179, 138, 0.12), transparent 60%),
      var(--dia-superficie);
  }

  .cambia--tiempo .cambia-icono,
  .cambia--tiempo .lista-check .ic {
    background: rgba(255, 179, 138, 0.16);
    color: var(--durazno);
  }
}

/* Lo que no hace una persona: no falta, no se enferma… (a lo ancho, abajo de las dos tarjetas) */
.cambia-siempre {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 66rem;
  margin: 1.25rem auto 0;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--dia-borde);
  border-radius: 1.25rem;
  background: var(--dia-superficie-2);
  color: var(--dia-suave);
  font-size: 1.02rem;
  line-height: 1.5;
}

.cambia-siempre .ic {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  padding: 0.22rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dia-acento) 14%, transparent);
  color: var(--dia-acento);
}

.cambia-siempre b {
  color: var(--dia-texto);
}

/* ═══ 7. Qué hace: grilla "bento" ═══ */
.que-hace {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(13rem, auto);
  gap: 1rem;
}

.bento-tarjeta {
  --x: 50%;
  --y: -30%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--dia-borde);
  border-radius: 1.5rem;
  background: var(--dia-superficie);
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
}

.bento-tarjeta::before {
  /* el brillo que sigue al mouse (web.mjs mueve --x e --y) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(26rem circle at var(--x) var(--y), rgba(46, 230, 214, 0.13), transparent 45%);
}

.bento-tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(18rem circle at var(--x) var(--y), rgba(46, 230, 214, 0.75), rgba(124, 92, 255, 0.35) 30%, transparent 55%);
  -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);
  pointer-events: none;
}

.bento-tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--dia-sombra);
}

.bento-tarjeta h3 {
  font-size: 1.3rem;
}

.bento-tarjeta p {
  color: var(--dia-suave);
  font-size: 0.97rem;
  line-height: 1.5;
}

.bento-icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.4rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--dia-acento) 12%, transparent);
  color: var(--dia-acento);
}

.bento-icono .ic {
  width: 1.3rem;
  height: 1.3rem;
}

.bento-visual {
  display: grid;
  flex: 1;
  place-items: center;
  margin-bottom: 1rem;
}

.bento--contesta {
  grid-row: span 2;
  grid-column: span 2;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(124, 92, 255, 0.12), transparent 70%),
    var(--dia-superficie);
}

.bento--audios,
.bento--persona {
  grid-column: span 2;
}

.bento--plata {
  grid-column: span 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas:
    "icono titulo visual"
    "icono texto visual";
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 0.3rem;
}

.bento--plata .bento-icono {
  grid-area: icono;
  margin: 0;
}

.bento--plata h3 {
  grid-area: titulo;
  align-self: end;
}

.bento--plata p {
  grid-area: texto;
  align-self: start;
}

.bento--plata .bento-visual {
  grid-area: visual;
  margin: 0;
}

/* Las animaciones chicas de cada tarjeta */
.mini-charla {
  display: grid;
  grid-template-areas:
    "hora"
    "pregunta"
    "respuesta";
  gap: 0.7rem;
  width: min(100%, 26rem);
  padding: 1.2rem 1.2rem 1.4rem;
  border-radius: 1.2rem;
  background: #0b141a;
  box-shadow: 0 30px 50px -25px rgba(11, 18, 32, 0.6);
}

.mini-hora {
  display: flex;
  grid-area: hora;
  align-items: center;
  justify-self: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #182229;
  color: #aebac1;
  font-size: 0.75rem;
  font-weight: 600;
}

.mini-hora .ic {
  width: 0.9rem;
  height: 0.9rem;
  color: #ffe2a6;
}

.mini-msj {
  max-width: 85%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.8rem;
  color: #e9edef;
  font-size: 0.92rem;
  line-height: 1.35;
}

.mini-msj--entra {
  grid-area: pregunta;
  justify-self: start;
  border-top-left-radius: 0.2rem;
  background: #202c33;
}

.mini-msj--sale {
  grid-area: respuesta;
  justify-self: end;
  border-top-right-radius: 0.2rem;
  background: #005c4b;
  animation: aparece-respuesta 6s var(--curva) infinite;
}

.mini-escribe {
  display: flex;
  grid-area: respuesta;
  align-self: start;
  justify-self: end;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.8rem;
  border-top-right-radius: 0.2rem;
  background: #005c4b;
  animation: escribe-y-sale 6s var(--curva) infinite;
}

.mini-escribe span {
  background: #9fd9c9;
}

@keyframes escribe-y-sale {
  0%,
  8% {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  14%,
  38% {
    opacity: 1;
    transform: none;
  }
  44%,
  100% {
    opacity: 0;
  }
}

@keyframes aparece-respuesta {
  0%,
  42% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
  }
  50%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

.mini-audio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(100%, 20rem);
  padding: 0.7rem 0.9rem;
  border-radius: 1rem;
  background: #005c4b;
  color: #e9edef;
  box-shadow: 0 24px 40px -24px rgba(11, 18, 32, 0.6);
}

.mini-play {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.mini-play .ic {
  width: 1rem;
  height: 1rem;
}

.onda {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 3px;
  height: 2rem;
}

.onda i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: #9fd9c9;
  transform-origin: center;
  animation: onda 1.3s ease-in-out infinite alternate;
}

.onda i:nth-child(3n) {
  animation-delay: -0.4s;
}

.onda i:nth-child(3n + 1) {
  animation-delay: -0.9s;
}

.onda i:nth-child(4n) {
  animation-duration: 0.9s;
}

.onda i:nth-child(5n + 2) {
  animation-duration: 1.6s;
}

@keyframes onda {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}

.mini-dur {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* Agenda, recuerda y confirma: el recordatorio con sus dos botones */
.mini-confirma {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.mini-recuerda {
  padding: 0.5rem 0.8rem;
  border-radius: 0.8rem;
  background: var(--dia-superficie-2);
  color: var(--dia-texto);
  font-size: 0.8rem;
  font-weight: 600;
}

.mini-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.mini-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--dia-borde);
  border-radius: 999px;
  color: var(--dia-suave);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 650;
}

.mini-boton--si {
  border-color: transparent;
  background: var(--dia-acento);
  color: var(--dia-superficie);
  animation: late 2.4s ease-in-out infinite;
}

.mini-boton .ic {
  width: 0.8rem;
  height: 0.8rem;
}

/* Pide la reseña */
.mini-resena {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.mini-estrellas {
  display: flex;
  gap: 0.15rem;
  color: #e5a50a;
}

.mini-estrellas .ic {
  width: 1.25rem;
  height: 1.25rem;
}

.mini-cita {
  color: var(--dia-suave);
  font-family: var(--letra-serif);
  font-size: 1.15rem;
  font-style: italic;
}

/* Link de reservas */
.mini-link {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
}

.mini-qr {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.8rem;
  background: var(--dia-superficie-2);
  color: var(--dia-texto);
}

.mini-qr .ic {
  width: 2.6rem;
  height: 2.6rem;
}

.mini-url {
  color: var(--dia-acento-fuerte);
  font-family: var(--letra-mono);
  font-size: 0.72rem;
}

/* Campañas */
.mini-campana {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--dia-superficie-2);
}

.mini-campana-titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--dia-texto);
  font-size: 0.85rem;
  font-weight: 650;
}

.mini-campana-titulo .ic {
  width: 1rem;
  height: 1rem;
  color: var(--dia-acento);
}

.mini-campana-sub {
  color: var(--dia-suave);
  font-size: 0.75rem;
}

/* Aprende lo que no sabía */
.mini-aprende {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
}

.mini-pregunta {
  padding: 0.45rem 0.75rem;
  border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
  background: var(--dia-superficie-2);
  color: var(--dia-texto);
  font-size: 0.78rem;
}

.mini-faq {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--dia-acento-fuerte);
  font-size: 0.75rem;
  font-weight: 650;
}

.mini-faq .ic {
  width: 0.85rem;
  height: 0.85rem;
}

@keyframes late {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.mini-seguimiento {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 1.1rem;
}

.mini-seguimiento::before {
  content: "";
  position: absolute;
  top: 1.45rem;
  right: 1rem;
  left: 1rem;
  height: 2px;
  background: linear-gradient(90deg, var(--dia-borde), var(--dia-acento));
}

.mini-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--dia-suave);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.mini-dia::before {
  content: "";
  order: -1;
  width: 0.8rem;
  height: 0.8rem;
  margin-bottom: 0.3rem;
  border: 2px solid var(--dia-acento);
  border-radius: 50%;
  background: var(--dia-superficie);
}

.mini-dia b {
  color: var(--dia-texto);
  font-weight: 650;
}

.mini-telegram {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 23rem);
  padding: 0.8rem 1rem;
  border: 1px solid var(--dia-borde);
  border-radius: 1rem;
  background: var(--dia-fondo);
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 24px 40px -28px rgba(11, 18, 32, 0.5);
}

.mini-telegram b {
  display: block;
}

.mini-telegram-icono {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 50%;
  background: #229ed9;
  color: #fff;
}

.mini-telegram-icono .ic {
  width: 1.2rem;
  height: 1.2rem;
}

/* Y en el panel: lo que tiene el panel, en chips */
.en-el-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 2rem;
}

.en-el-panel-titulo {
  color: var(--dia-texto);
  font-weight: 650;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--dia-borde);
  border-radius: 999px;
  background: var(--dia-superficie);
  color: var(--dia-suave);
  font-size: 0.9rem;
}

.chips .ic {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--dia-acento);
}

/* El mes, en plata: un recorte del panel de verdad (Métricas → Lo que hizo tu recepcionista) */
.mini-panel {
  display: block;
  width: min(100%, 25rem);
  overflow: hidden;
  border: 1px solid var(--dia-borde);
  border-radius: 0.9rem;
  box-shadow: 0 20px 40px -24px rgba(11, 18, 32, 0.35);
}

.mini-panel img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lista de espera e invitación a volver (tarjetas chicas de "Qué hace") */
.mini-espera,
.mini-volver {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
}

.mini-libre,
.mini-ultima {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--dia-superficie-2);
  color: var(--dia-suave);
  font-size: 0.78rem;
  font-weight: 650;
}

.mini-fila {
  display: flex;
  gap: 0.4rem;
}

.mini-fila i {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--dia-superficie-2);
  box-shadow: inset 0 0 0 1.5px var(--dia-borde);
}

.mini-fila .mini-tomo {
  background: var(--dia-acento);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dia-acento) 20%, transparent);
  animation: late 2.4s ease-in-out infinite;
}

.mini-fila .ic {
  width: 1.1rem;
  height: 1.1rem;
}

.mini-invita {
  max-width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.8rem;
  border-top-right-radius: 0.2rem;
  align-self: flex-end;
  background: #005c4b;
  color: #e9edef;
  font-size: 0.85rem;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .mini-escribe {
    display: none;
  }

  .mini-msj--sale {
    animation: none !important;
    opacity: 1;
  }
}

/* ═══ 8. Precio ═══ */
.precio-sec {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

@property --angulo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.precio {
  position: relative;
  isolation: isolate;
  max-width: 60rem;
  margin: 0 auto;
  padding: 2px;
  border-radius: 2rem;
}

.precio-borde,
.precio-borde::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--angulo), #7c5cff, #2ee6d6, #ffd59e, #ff8fa3, #7c5cff);
  animation: girar 7s linear infinite;
}

.precio-borde::after {
  content: "";
  z-index: -1;
  opacity: 0.4;
  filter: blur(28px);
}

@keyframes girar {
  to {
    --angulo: 360deg;
  }
}

.precio-interior {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border-radius: calc(2rem - 2px);
  background: var(--dia-superficie);
}

.precio-cifra {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-family: var(--letra-titulo);
}

.precio-moneda {
  margin-top: 0.7rem;
  color: var(--dia-suave);
  font-size: 1.7rem;
  font-weight: 650;
}

.precio-cifra b {
  font-size: clamp(5rem, 3rem + 7vw, 8rem);
  font-weight: 750;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.precio-mes {
  align-self: flex-end;
  margin-bottom: 0.5rem;
  color: var(--dia-suave);
  font-size: 1.1rem;
  font-weight: 550;
}

.precio-dia {
  margin-top: 1.1rem;
  color: var(--dia-acento);
  font-size: 1.1rem;
  font-weight: 700;
}

.precio-extra {
  margin: 0.25rem 0 1.4rem;
  color: var(--dia-suave);
}

.precio-eco {
  margin-bottom: 1.4rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 90, 110, 0.3);
  border-radius: 0.9rem;
  background: rgba(255, 90, 110, 0.07);
  font-size: 0.95rem;
  line-height: 1.45;
}

.precio-eco b {
  color: #b8243a;
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  .precio-eco b {
    color: #ff8595;
  }
}

.precio-eco[hidden] {
  display: none;
}

.lista-check {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  list-style: none;
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.45;
}

.lista-check .ic {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  padding: 0.22rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dia-acento) 14%, transparent);
  color: var(--dia-acento);
}

.precio-nota {
  margin-top: 1.6rem;
  color: var(--dia-suave);
  font-size: 0.9rem;
  text-align: center;
}

/* ═══ Clínicas fundadoras (sale sólo con condiciones en config.json) ═══ */
.fundadoras {
  padding: 0 0 clamp(3rem, 6vw, 5rem);
}

.fundadoras-caja {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--dia-borde);
  border-radius: 1.6rem;
  background: var(--dia-superficie);
}

.fundadoras-caja h2 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}

.fundadoras-caja .lista-check {
  margin-top: 1.4rem;
}

/* ═══ 9. Cómo se empieza ═══ */
.pasos-sec {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.pasos {
  --progreso: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
}

.pasos::before,
.pasos::after {
  /* la línea que une los pasos (web.mjs la dibuja con --progreso) */
  content: "";
  position: absolute;
  top: 1.75rem;
  right: calc(100% / 3 - 1.75rem);
  left: 1.75rem;
  height: 2px;
  background: var(--dia-borde);
}

.pasos::after {
  background: linear-gradient(90deg, var(--violeta), var(--turquesa));
  transform: scaleX(var(--progreso));
  transform-origin: left;
}

.paso {
  position: relative;
}

.paso-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violeta), var(--turquesa));
  color: #fff;
  font-family: var(--letra-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--dia-fondo);
  transition: background 0.5s, color 0.5s;
}

.pasos--vivo .paso:not(.encendido) .paso-num {
  background: var(--dia-superficie-2);
  color: var(--dia-suave);
}

.paso h3 {
  margin-bottom: 0.45rem;
  font-size: 1.4rem;
}

.paso p {
  max-width: 22rem;
  color: var(--dia-suave);
}

.demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 3rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--dia-borde);
  border-radius: 1.3rem;
  background: var(--dia-superficie);
}

.demo p {
  max-width: 40rem;
}

/* ═══ 10. Preguntas ═══ */
.preguntas-sec {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.preguntas-grilla {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(1rem, 5vw, 4rem);
}

.faq details {
  border-bottom: 1px solid var(--dia-borde);
}

.faq details:first-child {
  border-top: 1px solid var(--dia-borde);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  font-family: var(--letra-titulo);
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) center / 0.8rem 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 0.8rem no-repeat,
    var(--dia-superficie-2);
  transition: rotate 0.35s var(--curva);
}

.faq details[open] summary::after {
  rotate: 45deg;
}

.faq summary:hover {
  color: var(--dia-acento);
}

.faq p {
  max-width: 42rem;
  margin: -0.3rem 0 1.4rem;
  color: var(--dia-suave);
}

.faq a {
  color: var(--dia-acento);
}

/* ═══ 11. Cierre ═══ */
.cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(6rem, 13vw, 11rem) 0 clamp(6rem, 12vw, 10rem);
  background: linear-gradient(180deg, var(--dia-fondo) 0%, #ffeedd 26%, #ffcfa6 64%, #ffa27d 100%);
  color: #2a1405;
  text-align: center;
}

.cierre-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cierre-sol {
  position: absolute;
  bottom: -38rem;
  left: 50%;
  width: min(72rem, 140vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffbef 0%, #ffe2ae 30%, rgba(255, 179, 138, 0.55) 55%, transparent 72%);
  transform: translateX(-50%);
  animation: respirar 9s ease-in-out infinite alternate;
}

.cierre-rayos {
  position: absolute;
  bottom: -60rem;
  left: 50%;
  width: 120rem;
  aspect-ratio: 1;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.2) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 70%);
  mask: radial-gradient(closest-side, #000 25%, transparent 70%);
  transform: translateX(-50%);
  animation: girar-rayos 90s linear infinite;
}

@keyframes respirar {
  from {
    transform: translateX(-50%) scale(1);
  }
  to {
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes girar-rayos {
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* P4: luz de mañana, alrededor del sol del cierre. */
.cierre-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 100%, #000 25%, transparent 80%);
  mask-image: radial-gradient(70% 80% at 50% 100%, #000 25%, transparent 80%);
}

.cierre h2 {
  max-width: 19ch;
  margin: 0 auto 1.3rem;
  font-size: clamp(2.3rem, 1.3rem + 3.8vw, 4.6rem);
}

.cierre .serif {
  display: block;
  color: #a8360f;
}

.cierre-sub {
  max-width: 34rem;
  margin: 0 auto 2.2rem;
  color: #5c2e12;
  font-size: 1.15rem;
}

.cierre-nota {
  margin-top: 1.1rem;
  color: #5c2e12;
  font-size: 0.92rem;
}

@media (prefers-color-scheme: dark) {
  .cierre {
    background: linear-gradient(180deg, var(--dia-fondo) 0%, #231a36 30%, #5a2a44 68%, #a24a3c 100%);
    color: #fff4ea;
  }

  .cierre-sol {
    background: radial-gradient(closest-side, #ffe6b8 0%, #ffb36b 28%, rgba(255, 120, 80, 0.45) 55%, transparent 72%);
  }

  .cierre .serif {
    color: #ffd59e;
  }

  .cierre-sub,
  .cierre-nota {
    color: #f5dccb;
  }
}

/* ═══ Barra fija de celular: "Agendar una llamada" después de la portada ═══ */
.barra-agendar {
  display: none;
}

@media (max-width: 760px) {
  html.js .barra-agendar {
    position: fixed;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    z-index: 40;
    display: block;
    transform: translateY(160%);
    transition: transform 0.45s var(--curva);
  }

  html.js .barra-agendar.visible {
    transform: none;
  }

  .barra-agendar .boton {
    width: 100%;
    padding-block: 1rem;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  }
}

/* ═══ Lo que se esconde para animarlo (sólo con JavaScript y movimiento) ═══
   Si web.mjs no arranca, pronto.js pone .sin-movimiento y todo aparece quieto. */
html.js:not(.sin-movimiento) .entra,
html.js:not(.sin-movimiento) .portada-titulo,
html.js:not(.sin-movimiento) .ficha {
  opacity: 0;
}

html.js:not(.sin-movimiento) .wa-charla [data-paso]:not(.ve) {
  display: none;
}

/* ═══ Celular y pantallas chicas ═══ */
@media (max-width: 1100px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento--plata {
    grid-column: span 2;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icono titulo"
      "icono texto"
      "visual visual";
  }

  .bento--plata .bento-visual {
    margin-top: 1rem;
  }

  .senalador--atencion {
    right: -0.5rem;
  }

  .senalador--agenda {
    left: -0.5rem;
  }
}

@media (max-width: 960px) {
  .portada-grilla,
  .cuenta-grilla,
  .giro-grilla,
  .preguntas-grilla,
  .precio-interior,
  .cambia-grilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada {
    padding-top: calc(var(--menu-alto) + 2rem);
  }

  .portada-escena {
    margin-top: 1rem;
  }

  .portada-bajar {
    display: none;
  }

  .cuenta-resultado {
    position: relative;
    top: 0;
  }

  .panel-escena {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .senalador {
    position: relative;
    inset: auto;
    max-width: none;
  }

  .senalador:first-of-type {
    margin-top: 0.8rem;
  }
}

@media (max-width: 760px) {
  .portada-media--compu {
    display: none;
  }

  .portada-media {
    -webkit-mask-image: radial-gradient(90% 45% at 50% 72%, #000 20%, transparent 80%);
    mask-image: radial-gradient(90% 45% at 50% 72%, #000 20%, transparent 80%);
  }

  .familia-media {
    inset: 0 0 auto 0;
    width: 100%;
    height: 60%;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
    mask-image: linear-gradient(180deg, #000 30%, transparent);
  }

  .panel-mas {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada-media--celu {
    display: block;
  }

  .cuenta-controles {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento--contesta,
  .bento--audios,
  .bento--persona,
  .bento--plata {
    grid-row: auto;
    grid-column: auto;
  }

  .pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .pasos::before,
  .pasos::after {
    top: 1.75rem;
    right: auto;
    bottom: 1.75rem;
    left: 1.75rem;
    width: 2px;
    height: auto;
  }

  .pasos::after {
    background: linear-gradient(180deg, var(--violeta), var(--turquesa));
    transform: scaleY(var(--progreso));
    transform-origin: top;
  }

  .paso {
    min-height: 3.5rem;
    padding-left: 5rem;
  }

  .paso-num {
    position: absolute;
    top: 0;
    left: 0;
  }

  /* En celular las fichas van abajo del celular, una al lado de la otra: encima tapaban la charla. */
  .portada-escena {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    gap: 0.9rem 0.5rem;
  }

  .portada-escena > .celular-marco,
  .portada-escena > .nota-ejemplo {
    grid-column: 1 / -1;
  }

  .ficha {
    position: relative;
    inset: auto;
  }

  .celular {
    width: 15.5rem;
  }

  .cielo-luna {
    top: 17vh;
    right: 8vw;
    width: 2.6rem;
    height: 2.6rem;
  }

  .linea-tiempo {
    padding: 0.6rem;
  }

  .linea-tiempo li {
    grid-template-columns: 2.9rem 1.9rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.5rem 0.4rem;
  }

  .linea-tiempo li::before {
    left: calc(0.4rem + 2.9rem + 0.6rem + 0.95rem - 1px);
  }

  .lt-icono {
    width: 1.9rem;
    height: 1.9rem;
  }

  .linea-tiempo p {
    font-size: 0.9rem;
  }

  .escena-visual {
    padding: 1rem 0.8rem;
  }
}

@media (max-width: 420px) {
  .portada-titulo {
    font-size: 2.55rem;
  }

  .botones .boton {
    flex: 1 1 100%;
  }

  .ficha {
    padding: 0.55rem 0.8rem 0.55rem 0.55rem;
    font-size: 0.78rem;
  }

  .ficha-icono {
    width: 2rem;
    height: 2rem;
  }
}

/* ═══ Movimiento reducido: el cielo y los brillos quedan quietos ═══ */
@media (prefers-reduced-motion: reduce) {
  .aurora,
  .grano,
  .cielo-estrellas,
  .cierre-sol,
  .cierre-rayos,
  .precio-borde,
  .precio-borde::after {
    animation: none;
  }
}