/* ==========================================================================
   PANTERA FITNESS · SECCIONES
   Estilos de todo lo que está debajo de la primera pantalla. Se carga sin
   bloquear el primer pintado (ver index.html). Los tokens (colores, tiempos,
   curvas) están en styles.css.
   ========================================================================== */

/* ---------- Revelados con el scroll (solo con JS y sin "reducir movimiento") ---------- */
/* Títulos: cada línea sube desde una máscara. */
.anim [data-revela="titulo"] .p {
  display: inline-block; overflow: clip; vertical-align: top;
  padding: .14em 0 .16em; margin: -.14em 0 -.16em;
}
.anim [data-revela="titulo"] .p__i {
  display: inline-block;
  transition: transform var(--dur-lenta) var(--curva-salida);
  transition-delay: calc(var(--l, 0) * 90ms);
}
.anim [data-revela="titulo"]:not(.revelado) .p__i { transform: translateY(115%); }
/* Listas: entran escalonadas a lo largo de la diagonal de los tubos. */
.anim [data-revela="lista"] > * {
  transition: opacity .6s var(--curva-suave), transform var(--dur-lenta) var(--curva-salida);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.anim [data-revela="lista"]:not(.revelado) > * { opacity: 0; transform: translate(calc(var(--dist-1) * -1), var(--dist-2)); }
/* Fotos: barrido diagonal, ligado al scroll donde el navegador lo permite. */
.anim .revela-foto img { transition: clip-path var(--dur-lenta) var(--curva-salida); }
.anim .revela-foto:not(.revelado) img { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
@supports (animation-timeline: view()) {
  .anim .revela-foto img { animation: barrido linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
}
@keyframes barrido {
  from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
  to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); }
}

/* ---------- Espacios: filas que se abren ---------- */
.espacios h2 { margin-bottom: clamp(32px, 5vw, 64px); }
.espacio {
  display: grid; row-gap: 22px;
  padding-block: clamp(28px, 4.5vw, 52px);
  border-top: 1px solid var(--linea);
}
/* Toda la cabeza es clickeable y lo muestra: cursor de mano y una luz que aparece al pasar. */
.espacio__cabeza { position: relative; isolation: isolate; display: grid; gap: 16px 56px; cursor: pointer; }
.espacio__cabeza::before {
  content: ""; position: absolute; inset: -18px calc(var(--gutter) * -1); z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(233, 119, 64, .09), rgba(233, 119, 64, .02) 55%, transparent 80%);
  opacity: 0; transition: opacity var(--dur-media) var(--curva-suave);
}
.espacio__cabeza:hover::before { opacity: 1; }
.espacio__nombre {
  position: relative; overflow: hidden; margin: 0;
  font: 800 clamp(4.8rem, 2rem + 13vw, 11.5rem)/.8 var(--f-titulo);
  letter-spacing: -.025em; color: var(--texto-3);
  transition: transform var(--dur-media) var(--curva-salida);
}
.espacio.abierta .espacio__nombre, .espacio__cabeza:hover .espacio__nombre { color: var(--texto); }
.espacio__nombre::after { /* barrido de luz al pasar el mouse */
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 222, .22), transparent);
  transform: skewX(-28deg); opacity: 0; pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .espacio__cabeza:hover .espacio__nombre { transform: translateX(var(--dist-1)); }
  .espacio__cabeza:hover .espacio__nombre::after {
    opacity: 1; transform: translateX(560%) skewX(-28deg);
    transition: transform .9s var(--curva-salida), opacity var(--dur-destello);
  }
}
.espacio__titulo { margin-top: 14px; font: 600 1.0625rem/1.3 var(--f-texto); color: var(--naranja); letter-spacing: 0; }
.espacio__lado { display: grid; gap: 14px; justify-items: start; align-content: end; }
.espacio__clave { font: 800 clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem)/1.05 var(--f-titulo); margin: 0; }
.espacio__previa { margin: 0; color: var(--texto-2); }
.espacio.abierta .espacio__previa { display: none; }
/* El botón dice qué pasa: "Ver las 5 clases" / "Ocultar clases". */
.espacio__boton {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 22px;
  background: transparent; border: 2px solid var(--naranja); border-radius: 999px;
  font: 600 1rem/1 var(--f-texto); color: var(--naranja);
  transition: background-color var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida), transform 90ms;
}
.espacio__boton:active { transform: scale(.97); }
.espacio__cabeza:hover .espacio__boton, .espacio__boton:focus-visible { background: var(--naranja); color: #000; }
.espacio.abierta .espacio__boton { border-color: #55504a; color: var(--texto-2); }
.espacio.abierta .espacio__cabeza:hover .espacio__boton { background: transparent; border-color: var(--texto); color: var(--texto); }
html:not(.js) .espacio__boton, html:not(.js) .espacio__previa { display: none; }

.espacio__signo, .acordeon__signo { position: relative; width: 16px; height: 16px; flex: none; transition: transform var(--dur-media) var(--curva-salida); }
.espacio__signo::before, .espacio__signo::after, .acordeon__signo::before, .acordeon__signo::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--naranja);
  transition: transform var(--dur-media) var(--curva-salida);
}
.espacio__signo::before, .espacio__signo::after { background: currentColor; }
.espacio__signo::after, .acordeon__signo::after { transform: rotate(90deg); }
[aria-expanded="true"] > .espacio__signo, [aria-expanded="true"] > .acordeon__signo { transform: rotate(180deg); }
[aria-expanded="true"] > .espacio__signo::after, [aria-expanded="true"] > .acordeon__signo::after { transform: rotate(0deg); }

.espacio__cuerpo p { color: var(--texto-2); max-width: 54ch; margin: 0; }
.espacio__foto { overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%); }
.espacio__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.espacio__panel { display: grid; gap: 22px; }
@media (min-width: 900px) {
  /* Nombre gigante a la izquierda; a la derecha la promesa, qué hay adentro y el botón. */
  .espacio { grid-template-columns: 5fr 7fr; column-gap: 56px; }
  .espacio__cabeza { grid-column: 1 / -1; grid-template-columns: 5fr 7fr; grid-template-columns: subgrid; align-items: end; }
  .espacio__panel { grid-column: 2; }
  .espacio--sala .espacio__panel { grid-column: 1 / -1; grid-template-columns: 5fr 7fr; grid-template-columns: subgrid; }
  .espacio--sala .espacio__cuerpo { grid-column: 2; }
  .espacio--sala .espacio__foto { grid-column: 1 / -1; }
}

.chips { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--s3); }
.actividad {
  position: relative; display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr auto; align-items: baseline; gap: 4px 16px;
  width: 100%; padding: 12px 2px; background: none; border: 0; border-bottom: 1px solid var(--s3);
  text-align: left; color: var(--texto);
}
.actividad__nombre { font: 800 1.5rem/1.1 var(--f-titulo); transition: transform var(--dur-media) var(--curva-salida); }
.actividad__desc { color: var(--texto-2); font-size: .98rem; }
.actividad__ver { color: var(--naranja); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.actividad:hover .actividad__nombre { color: var(--naranja); transform: translateX(6px); }
@media (max-width: 560px) {
  .actividad { grid-template-columns: 1fr auto; }
  .actividad__desc { grid-column: 1 / -1; grid-row: 2; }
}

.comodidades { display: grid; gap: 32px; margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--linea); }
.comodidades__foto { overflow: hidden; clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%); }
.comodidades__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.comodidades__titulo { margin-bottom: 20px; }
.comodidades__lista { list-style: none; display: grid; gap: 14px; }
.comodidades__lista li { display: flex; gap: 14px; align-items: flex-start; color: var(--texto-2); }
.comodidades__lista strong { color: var(--texto); font-weight: 600; }
.comodidades__lista .i { color: var(--naranja); width: 28px; height: 28px; margin-top: -2px; }
@media (min-width: 900px) {
  .comodidades { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .comodidades__foto img { aspect-ratio: 4 / 4.2; }
}

/* ---------- Clases ---------- */
.clases__cabeza { margin-bottom: 32px; }
.hoy {
  background: var(--negro); border: 1px solid var(--linea);
  padding: 20px; margin-bottom: 36px; min-height: 176px;
}
.hoy__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.hoy__titulo { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.hoy__estado { color: var(--texto-2); font-size: .95rem; margin: 0; }
.hoy__proxima { font-size: 1.05rem; margin-bottom: 16px; }
.hoy__proxima strong { color: var(--naranja); }
.hoy__lista {
  list-style: none; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 6px; scrollbar-width: thin;
}
.hoy__item {
  flex: 0 0 auto; min-width: 128px; padding: 12px 14px; scroll-snap-align: start;
  background: var(--s2); border-top: 3px solid var(--s3);
}
.hoy__item .h { display: flex; align-items: center; gap: 8px; font: 800 1.5rem/1 var(--f-titulo); }
.hoy__item .a { display: block; font-weight: 600; margin-top: 6px; line-height: 1.2; }
.hoy__item .s { display: block; color: var(--texto-3); font-size: .85rem; margin-top: 2px; }
.hoy__item.paso { background: var(--s1); color: var(--texto-3); }
.hoy__item.paso .s { color: var(--texto-3); }
.hoy__item.proxima { background: var(--naranja); color: #000; border-top-color: #000; }
.hoy__item.proxima .s { color: #1f1208; }
.hoy__item.ahora { border-top-color: var(--naranja); background: #1d1410; }
.hoy__item.ahora .s { color: var(--texto-2); }
.hoy__vacio { color: var(--texto-2); margin: 0; }

/* Clase en curso: punto que late y barra de progreso con la hora de Buenos Aires. */
.pulso { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); flex: none; }
.pulso::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--naranja); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pulso::after { animation: pulso 1.8s var(--curva-salida) infinite; }
}
@keyframes pulso { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.clase__ahora { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; font-size: .8rem; font-weight: 600; color: var(--naranja); }
.clase__progreso { display: block; grid-column: 1 / -1; height: 3px; margin-top: 8px; background: var(--s3); overflow: hidden; }
.clase__progreso span { display: block; height: 100%; background: var(--naranja); transform-origin: 0 50%; transition: transform var(--dur-lenta) var(--curva-salida); }

.filtros { display: grid; gap: 18px; margin-bottom: 28px; }
.filtros__grupo { display: grid; gap: 8px; min-width: 0; }
.filtros__rotulo { font-size: .875rem; font-weight: 600; color: var(--texto-3); }
.filtros__opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros__opciones--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
/* Pestañas de día con subrayado deslizante. */
.pestanas { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linea); }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: none; min-height: 46px; padding: 0 12px; background: none; border: 0;
  font-weight: 600; font-size: .98rem; color: var(--texto-2);
}
.pestana:hover, .pestana[aria-selected="true"] { color: var(--texto); }
.pestana:focus-visible { outline-offset: -3px; }
.pestanas__linea {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 3px; background: var(--naranja);
  transform-origin: 0 0; transform: scaleX(0); pointer-events: none;
  transition: transform var(--dur-media) var(--curva-salida);
}
.filtro {
  flex: none; min-height: 44px; min-width: 48px; padding: 0 14px;
  background: var(--s2); border: 1px solid var(--linea); border-radius: var(--radio);
  font-weight: 600; font-size: .95rem; color: var(--texto-2);
  transition: background-color var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida), transform 90ms;
}
.filtro:hover { border-color: #5a5550; color: var(--texto); }
.filtro:active { transform: scale(.96); }
.filtro[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: #000; }
@media (min-width: 900px) {
  .filtros__opciones--scroll { flex-wrap: wrap; overflow: visible; }
  .pestanas { overflow: visible; align-self: start; justify-self: start; }
}

.grilla { display: grid; gap: 28px; min-height: 240px; }
.dia__titulo { display: flex; align-items: baseline; gap: 10px; font-size: 1.75rem; padding-bottom: 10px; border-bottom: 2px solid var(--texto); }
.dia__hoy { font: 600 .8rem/1 var(--f-texto); background: var(--naranja); color: #000; padding: 4px 7px; border-radius: 2px; }
.dia__lista { list-style: none; }
.clase {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 2px 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--s3);
}
.clase__hora { font: 800 1.45rem/1 var(--f-titulo); grid-row: span 2; }
.clase__nombre { font-weight: 600; line-height: 1.25; }
.clase__meta { color: var(--texto-3); font-size: .9rem; line-height: 1.35; }
.clase__salon::before {
  content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 6px; vertical-align: middle;
  background: var(--naranja); transform: rotate(-35deg);
}
.clase__salon--alma::before { background: var(--texto); transform: rotate(35deg); }
.clase.ahora { background: linear-gradient(90deg, rgba(233, 119, 64, .09), transparent 70%); }
.grilla__vacio { color: var(--texto-2); padding: 24px 0; }
@media (min-width: 1000px) {
  .grilla.semana { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .grilla.semana .clase { grid-template-columns: 1fr; gap: 3px; }
  .grilla.semana .clase__hora { grid-row: auto; font-size: 1.3rem; }
  .grilla.semana .dia__titulo { font-size: 1.5rem; }
  .grilla:not(.semana) { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px 48px; }
}
/* Al filtrar, View Transitions reacomoda cada clase con los tokens de movimiento. */
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
  animation-duration: var(--dur-media); animation-timing-function: var(--curva-salida);
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
/* Las clases que se van se apagan rápido; las que llegan se encienden después: sin cruces confusos. */
::view-transition-old(*):only-child { animation: vt-apagar 110ms var(--curva-entrada) both; }
::view-transition-new(*):only-child { animation: vt-encender 280ms var(--curva-salida) 120ms both; }
@keyframes vt-apagar { to { opacity: 0; } }
@keyframes vt-encender { from { opacity: 0; transform: translate(calc(var(--dist-1) * -.5), 8px); } }

/* ---------- Equipo ---------- */
.equipo__cabeza { margin-bottom: clamp(32px, 5vw, 56px); }
.equipo__lista { list-style: none; display: grid; column-gap: 64px; }
.persona {
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto 1fr; gap: 4px 20px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--linea);
}
.persona__avatar {
  position: relative; isolation: isolate;
  grid-row: span 3; width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--s2); color: var(--naranja);
  font: 800 1.7rem/1 var(--f-titulo); letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  transition: color 0s 110ms;
}
.persona__avatar::before { /* al pasar el mouse, el naranja entra en diagonal */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--naranja);
  clip-path: polygon(0 0, 0 0, -40% 100%, -40% 100%);
  transition: clip-path var(--dur-media) var(--curva-salida);
}
.persona__avatar img { width: 100%; height: 100%; object-fit: cover; }
.persona__nombre, .persona__rol { transition: transform var(--dur-media) var(--curva-salida); }
.persona__nombre { font-size: 2rem; }
.persona__rol { color: var(--texto); font-weight: 600; font-size: .98rem; margin: 4px 0 0; }
.persona__frase { color: var(--texto-2); margin: 2px 0 0; max-width: 44ch; }
@media (hover: hover) {
  .persona:hover .persona__avatar { color: #000; }
  .persona:hover .persona__avatar::before { clip-path: polygon(0 0, 140% 0, 100% 100%, -40% 100%); }
  .persona:hover .persona__nombre { transform: translateX(var(--dist-1)); }
  .persona:hover .persona__rol { transform: translateX(calc(var(--dist-1) * 1.6)); color: var(--naranja); }
}
@media (prefers-reduced-motion: no-preference) {
  .anim .equipo__lista.revelado .persona__avatar { animation: encender .8s linear backwards; animation-delay: calc(var(--i, 0) * 80ms + .25s); }
}
@media (min-width: 640px) { .equipo__lista { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 64px); } }

/* ---------- Planes ---------- */
.planes__cabeza { margin-bottom: 28px; }
.matricula {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 16px 20px; margin-bottom: 28px; background: var(--negro);
  border-left: 4px solid var(--naranja); max-width: 780px;
}
.matricula strong { font: 800 1.7rem/1 var(--f-titulo); }
.matricula span { color: var(--texto-2); }

.pago { display: inline-flex; padding: 4px; gap: 4px; background: var(--negro); border: 1px solid var(--linea); border-radius: 4px; margin-bottom: 24px; max-width: 100%; }
.pago__op {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radio); background: none;
  font-weight: 600; color: var(--texto-2);
  transition: background-color var(--dur-rapida), color var(--dur-rapida), transform 90ms;
}
.pago__op:active { transform: scale(.96); }
.pago__op[aria-pressed="true"] { background: var(--texto); color: #000; }

.planes__lista { display: grid; gap: 16px; min-height: 420px; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--s2); padding: 26px 22px 24px; border-top: 3px solid var(--s3);
}
/* Plan destacado: un borde de luz recorre el perímetro (una capa que gira, solo transform). */
.plan--destacado { isolation: isolate; overflow: hidden; background: transparent; border: 0; padding: 32px 24px 26px; }
.plan--destacado::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--naranja); }
.plan--destacado::after { content: ""; position: absolute; inset: 8px 2px 2px; z-index: -1; background: var(--negro); }
.plan__luz {
  position: absolute; z-index: -2; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; margin: -90% 0 0 -90%;
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(255, 214, 180, .9) 86%, #fff3e6 89%, transparent 93%);
  pointer-events: none; display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .plan__luz { display: block; animation: girar 7s linear infinite; }
}
@keyframes girar { to { transform: rotate(1turn); } }
.plan__marca { align-self: flex-start; font: 600 .85rem/1 var(--f-texto); background: var(--naranja); color: #000; padding: 6px 9px; border-radius: 2px; margin: 0; }
.plan__nombre { font-size: 2.2rem; }
.plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.plan__monto { display: inline-block; font: 800 clamp(2.9rem, 2.2rem + 2vw, 3.6rem)/.9 var(--f-titulo); letter-spacing: -.01em; }
.plan__unidad { color: var(--texto-2); font-size: .95rem; }
/* Sello de ahorro: entra "estampado" (escala y giro, sin rebote). */
.sello {
  align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em;
  margin: 2px 0 0; padding: 7px 14px 8px 12px; max-width: 100%;
  background: var(--naranja); color: #000; transform: rotate(-4deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.sello__a { font-weight: 600; font-size: .9rem; }
.sello__monto { font: 800 1.55rem/1 var(--f-titulo); }
.sello__b { flex-basis: 100%; font-size: .8rem; line-height: 1.3; }
.plan__datos { list-style: none; display: grid; gap: 8px; color: var(--texto-2); font-size: .98rem; margin: 0; }
.plan__datos li { padding-left: 16px; position: relative; }
.plan__datos li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--texto-3); }
.plan__beneficio { border-top: 1px solid var(--linea); padding-top: 14px; color: var(--texto); font-size: .98rem; margin: 0; }
.plan__total { font-size: .95rem; color: var(--texto-2); margin: 0; }
.plan__total strong { color: var(--texto); }
.plan .btn { margin-top: auto; }
@media (min-width: 980px) {
  .planes__lista { grid-template-columns: 1fr 1fr 1.18fr; align-items: stretch; gap: 20px; }
  .plan--destacado { margin-top: -14px; padding: 36px 30px 30px; }
}

.condiciones { display: grid; gap: 22px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linea); }
.condiciones h3 { font: 600 1.0625rem/1.3 var(--f-texto); margin-bottom: 6px; letter-spacing: 0; }
.condiciones p { color: var(--texto-2); margin: 0; max-width: 46ch; }
.condiciones__item:first-child h3 { color: var(--naranja); }
@media (min-width: 820px) { .condiciones { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Selector ¿Cuál me conviene?: una pregunta a la vez. */
.selector {
  margin-top: clamp(48px, 7vw, 88px); padding: clamp(22px, 4vw, 44px);
  background: var(--negro); border: 1px solid var(--linea);
  display: grid; gap: 24px;
}
.selector__cabeza h3 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: 10px; }
.selector__cabeza p { color: var(--texto-2); margin: 0; }
.selector__progreso { display: none; list-style: none; gap: 8px; margin-top: 22px; }
.paso-a-paso .selector__progreso { display: flex; }
.selector__progreso li { position: relative; width: 30px; height: 5px; background: var(--s3); transform: skewX(-40deg); }
.selector__progreso li::after {
  content: ""; position: absolute; inset: 0; background: var(--naranja); opacity: 0;
  transition: opacity var(--dur-media) var(--curva-suave);
}
.selector__progreso li.hecho::after { opacity: .45; }
.selector__progreso li.actual::after { opacity: 1; }
.selector fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.selector legend { font-weight: 600; font-size: 1.0625rem; margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; }
.paso-a-paso legend { font: 800 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.05 var(--f-titulo); margin-bottom: 16px; }
.selector__n { font: 800 1.35rem/1 var(--f-titulo); color: var(--naranja); }
.paso-a-paso .selector__n { font-size: 1em; }
.selector__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.selector__atras {
  min-height: 44px; padding: 0 4px; background: none; border: 0; font-weight: 600; color: var(--texto-2);
}
.selector__atras:hover { color: var(--texto); }
.selector__atras:disabled { opacity: .35; cursor: default; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { position: relative; display: inline-flex; }
.opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opciones span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid #55504a; border-radius: var(--radio); font-size: .98rem; line-height: 1.25;
  transition: background-color var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida), transform 90ms;
}
.paso-a-paso .opciones span { min-height: 52px; padding: 10px 18px; font-size: 1.05rem; }
.opciones label:hover span { border-color: var(--texto); }
.opciones label:active span { transform: scale(.97); }
.opciones input:checked + span { background: var(--naranja); border-color: var(--naranja); color: #000; font-weight: 600; }
.opciones input:focus-visible + span { outline: 3px solid var(--luz); outline-offset: 2px; }
@media (min-width: 900px) {
  .selector { grid-template-columns: 5fr 7fr; column-gap: 56px; }
  .selector__cabeza { grid-column: 1; grid-row: 1 / span 4; }
  .selector fieldset, .selector__nav { grid-column: 2; }
  .selector__resultado { grid-column: 1 / -1; }
}
.selector__resultado { border-top: 1px solid var(--linea); padding-top: 22px; min-height: 64px; }
.selector__resultado p { color: var(--texto-2); margin: 0 0 10px; max-width: 64ch; }
.recomendacion__titulo { font: 800 clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem)/.95 var(--f-titulo); color: var(--texto) !important; margin-bottom: 14px !important; text-wrap: balance; }
.recomendacion__titulo em { display: inline-block; font-style: normal; color: var(--naranja); }
.recomendacion__titulo em.encender { text-shadow: 0 0 .2em rgba(233, 119, 64, .6), 0 0 .6em rgba(233, 119, 64, .3); }
@media (prefers-reduced-motion: no-preference) {
  .recomendacion__titulo em.encender { animation: encender .9s linear .2s backwards; }
}
.recomendacion__cifras { color: var(--texto) !important; font-weight: 600; }
.recomendacion .btn { margin-top: 10px; }

/* ---------- Visita (bloque naranja) ---------- */
.visita {
  position: relative; background: var(--naranja); color: #000;
  margin-top: calc(var(--d) * -1);
  padding: calc(var(--d) + clamp(56px, 8vw, 112px)) 0 calc(var(--d) + clamp(56px, 8vw, 112px));
  clip-path: polygon(0 0, 100% var(--d), 100% 100%, 0 calc(100% - var(--d)));
}
.visita :focus-visible { outline-color: #000; }
.visita__envase { display: grid; gap: 40px; }
.visita h2 { font-size: clamp(2.9rem, 1.6rem + 6vw, 6.6rem); max-width: 11ch; }
.visita__bajada { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); max-width: 34ch; font-weight: 600; }
.pasos { list-style: none; display: grid; gap: 18px; }
.pasos li { display: grid; grid-template-columns: 3rem 1fr; gap: 12px; align-items: start; padding-top: 16px; border-top: 2px solid #000; max-width: 44ch; }
.pasos__n { font: 800 3rem/.8 var(--f-titulo); }
.pasos strong { font-weight: 600; }

.form-visita {
  position: relative; overflow: hidden;
  display: grid; gap: 22px; align-content: start; background: #000; color: var(--texto); padding: clamp(22px, 4vw, 36px);
}
.form-visita :focus-visible { outline-color: var(--luz); }
.campo { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo label, .campo legend { font-weight: 600; padding: 0; margin-bottom: 0; }
.campo legend { margin-bottom: 8px; }
.campo__caja { position: relative; display: block; }
.campo__caja::after { /* marco de error: parpadea como un tubo */
  content: ""; position: absolute; inset: 0; border: 2px solid var(--naranja); border-radius: var(--radio);
  opacity: 0; pointer-events: none;
}
.campo__caja:has([aria-invalid="true"])::after { opacity: 1; }
.campo input[type="text"], .campo select {
  width: 100%; min-height: 52px; padding: 0 14px;
  background: var(--s2); border: 1px solid #5a554f; border-radius: var(--radio); color: var(--texto);
  font-size: 1.0625rem;
}
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto) 50%), linear-gradient(135deg, var(--texto) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
.campo__error { color: var(--naranja); font-weight: 600; font-size: .95rem; margin: 0; }
.form-visita .btn { background: var(--naranja); color: #000; min-height: 56px; }
.form-visita .btn:hover { background: var(--naranja-vivo); }
.form-visita__nota { margin: 0; color: var(--texto-2); font-size: .95rem; min-height: 1.5em; }
/* Confirmación: "Abriendo WhatsApp…" con tres tubos que se encienden. */
.form-visita__estado {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: rgba(0, 0, 0, .95); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-media) var(--curva-suave);
}
.form-visita.enviando .form-visita__estado { opacity: 1; pointer-events: auto; }
.form-visita__tubos { display: flex; gap: 16px; }
.form-visita__tubos i {
  display: block; width: 5px; height: 46px; border-radius: 3px; background: var(--luz);
  box-shadow: 0 0 12px 2px rgba(255, 220, 180, .5); transform: rotate(38deg); opacity: .15;
}
.form-visita__tubos i:nth-child(2) { transform: rotate(-38deg); }
.form-visita.enviando .form-visita__tubos i { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .form-visita.enviando .form-visita__tubos i { animation: encender .7s linear backwards; }
  .form-visita.enviando .form-visita__tubos i:nth-child(2) { animation-delay: .14s; }
  .form-visita.enviando .form-visita__tubos i:nth-child(3) { animation-delay: .28s; }
}
.form-visita__estado-txt { font: 800 2rem/1 var(--f-titulo); }
@media (min-width: 900px) {
  .visita__envase { grid-template-columns: 1.1fr 1fr; gap: 40px 72px; align-items: start; }
  .visita__texto { grid-column: 1; grid-row: 1; }
  .pasos { grid-column: 1; grid-row: 2; }
  .form-visita { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Comunidad: carrusel-collage ---------- */
.comunidad { padding-top: clamp(56px, 8vw, 110px); }
.carrusel { margin-top: clamp(24px, 4vw, 44px); }
.carrusel__pista {
  position: relative; display: flex; align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(50% - 50vw); padding: 10px var(--borde) 28px; scroll-padding-inline: var(--borde);
  cursor: grab;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline-offset: -3px; }
.carrusel__pista.arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carrusel__foto { position: relative; flex: none; scroll-snap-align: start; }
.carrusel__foto + .carrusel__foto { margin-left: 12px; }
.carrusel__foto img { width: 100%; object-fit: cover; background: var(--s2); pointer-events: none; }
.carrusel__foto figcaption { margin-top: 10px; font-weight: 600; font-size: .92rem; color: var(--texto-2); }
.carrusel__foto--alta { width: min(72vw, 360px); }
.carrusel__foto--alta img { aspect-ratio: 3 / 4; clip-path: polygon(0 0, 100% 0, 100% 100%, 9% 100%); }
.carrusel__foto--ancha { width: min(90vw, 640px); margin-top: 56px; }
.carrusel__foto--ancha img { aspect-ratio: 16 / 7.4; clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%); }
.carrusel__foto--media { width: min(64vw, 300px); margin-top: 24px; }
.carrusel__foto--media img { aspect-ratio: 4 / 5; clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); }
.carrusel__foto--cuadrada { width: min(80vw, 420px); margin-top: 88px; }
.carrusel__foto--cuadrada img { aspect-ratio: 5 / 4; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
@media (min-width: 900px) {
  /* En pantallas grandes las fotos se superponen un poco, como un collage. */
  .carrusel__foto + .carrusel__foto { margin-left: -28px; }
  .carrusel__foto:nth-child(even) { z-index: 1; }
  .carrusel__foto:nth-child(odd) figcaption, .carrusel__foto:nth-child(even) figcaption { padding-left: 36px; }
  .carrusel__foto:first-child figcaption { padding-left: 0; }
}
.carrusel__controles { display: flex; align-items: center; gap: 18px; }
.carrusel__boton {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  background: none; border: 1px solid #55504a; border-radius: 50%; color: var(--texto);
  transition: border-color var(--dur-rapida), transform 90ms;
}
.carrusel__boton:hover { border-color: var(--texto); }
.carrusel__boton:active { transform: scale(.94); }
.carrusel__boton:disabled { opacity: .35; cursor: default; }
.carrusel__flecha { width: 11px; height: 11px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(2px) rotate(45deg); }
.carrusel__boton--sig .carrusel__flecha { transform: translateX(-2px) rotate(-135deg); }
.carrusel__indicador { display: flex; gap: 8px; }
.carrusel__indicador span { position: relative; width: 24px; height: 5px; background: var(--s3); transform: skewX(-40deg); }
.carrusel__indicador span::after {
  content: ""; position: absolute; inset: 0; background: var(--naranja);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-media) var(--curva-salida);
}
.carrusel__indicador span.activa::after { transform: scaleX(1); }

.promesas { margin-top: clamp(56px, 8vw, 104px); display: grid; gap: 20px; }
.promesas h3 { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.promesas ul { list-style: none; }
.promesas li {
  font: 800 clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem)/1.08 var(--f-titulo);
  padding: 16px 0; border-top: 1px solid var(--linea); max-width: 34ch;
}
.promesas li:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 900px) { .promesas { grid-template-columns: 4fr 8fr; gap: 56px; } }

/* ---------- Instagram (opcional) ---------- */
.instagram__grilla { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 28px 0 24px; }
.instagram__post { display: block; overflow: hidden; aspect-ratio: 1; background: var(--s2); }
.instagram__post img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--curva-salida); }
.instagram__post:hover img { transform: scale(1.05); }
@media (min-width: 820px) { .instagram__grilla { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

/* ---------- Testimonios ---------- */
.testimonios__lista { display: grid; gap: 20px; margin-top: 32px; }
.testimonio { margin: 0; padding: 24px 0; border-top: 3px solid var(--naranja); }
.testimonio p { font-size: 1.2rem; max-width: 52ch; }
.testimonio footer { color: var(--texto-2); font-size: .95rem; }
@media (min-width: 820px) { .testimonios__lista { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; } }

/* ---------- Preguntas ---------- */
.preguntas__envase { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .preguntas__envase { grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
  .preguntas__envase > div:first-child { position: sticky; top: calc(var(--barra) + 24px); }
}
.acordeon { border-top: 1px solid var(--linea); }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__h { font: inherit; margin: 0; }
.acordeon__boton {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%;
  padding: 20px 0; background: none; border: 0; text-align: left;
  font: 600 1.125rem/1.35 var(--f-texto); color: var(--texto);
}
.acordeon__boton:hover { color: var(--naranja); }
.acordeon__panel p { color: var(--texto-2); max-width: 62ch; padding-bottom: 22px; margin: 0; }

/* ---------- Ubicación ---------- */
.ubicacion__grilla { display: grid; gap: 32px; margin-top: clamp(24px, 4vw, 44px); }
.direccion { font: 800 clamp(2rem, 1.5rem + 2vw, 2.8rem)/1 var(--f-titulo); margin-bottom: 10px; }
.direccion span { display: block; font: 400 1.0625rem/1.5 var(--f-texto); color: var(--texto-2); margin-top: 8px; }
.ubicacion__sub { font: 600 1.0625rem/1.3 var(--f-texto); letter-spacing: 0; margin: 28px 0 8px; }
.horarios { border-collapse: collapse; width: 100%; max-width: 420px; }
.horarios th, .horarios td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.horarios th { color: var(--texto-2); padding-right: 16px; }
.horarios td { font-weight: 600; text-align: right; }
.horarios tr.hoy-fila th, .horarios tr.hoy-fila td { color: var(--naranja); }
.ubicacion__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ubicacion__cartel { overflow: hidden; }
.ubicacion__cartel img { width: 100%; aspect-ratio: 4 / 4.5; object-fit: cover; }
.ubicacion__cartel figcaption { color: var(--texto-3); font-size: .9rem; margin-top: 10px; }
.mapa { min-height: 340px; background: var(--s2); position: relative; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.05); }
.mapa__espera { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; margin: 0; text-align: center; color: var(--texto-3); }
@media (min-width: 900px) {
  .ubicacion__grilla { grid-template-columns: 1fr 1fr; gap: 40px 56px; }
  .mapa { grid-column: 1 / -1; min-height: 420px; }
}
@media (min-width: 1180px) {
  .ubicacion__grilla { grid-template-columns: 1.05fr .8fr 1.25fr; }
  .mapa { grid-column: auto; min-height: 100%; }
}

/* ---------- Pie ---------- */
.pie { position: relative; padding-bottom: 40px; }
.pie__envase { display: grid; gap: 28px; }
.pie__logo { width: 120px; height: auto; }
.pie__datos p { color: var(--texto-2); margin: 0 0 4px; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie__nav a { color: var(--texto-2); text-decoration: none; padding: 10px 0; font-weight: 600; }
.pie__nav a:hover { color: var(--texto); }
.pie__legal { color: var(--texto-3); font-size: .875rem; margin: 0; padding-top: 20px; border-top: 1px solid var(--linea); }
@media (min-width: 900px) {
  .pie__envase { grid-template-columns: auto 1fr auto; align-items: center; gap: 28px 56px; }
  .pie__legal { grid-column: 1 / -1; }
}
@media (max-width: 899.98px) { .pie { padding-bottom: 104px; } }

/* ---------- Botón flotante (celular): anillo de pulso cada tanto, no continuo ---------- */
.flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--naranja); color: #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  transform: translateY(130%); transition: transform var(--dur-media) var(--curva-salida);
}
.flotante::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--naranja);
  opacity: 0; pointer-events: none;
}
.flotante .i { width: 30px; height: 30px; }
.flotante.visible { transform: none; }
.flotante.visible:active { transform: scale(.93); transition-duration: 90ms; }
@media (prefers-reduced-motion: no-preference) {
  .flotante.visible::after { animation: anillo 9s var(--curva-salida) 2s infinite; }
}
@keyframes anillo {
  0% { transform: scale(1); opacity: .85; }
  14%, 100% { transform: scale(1.75); opacity: 0; }
}
@media (min-width: 900px) { .flotante { display: none; } }