/* Página de compra con las tarjetas de la home (propuesta 1 elegida por Andrea, 11 nov). Medidas de somoseito.io en vivo:
   1440, seis columnas a todo el ancho y tarjeta de 328 px; 390, dos columnas y 200 px; título HB Hue 54/50 (36/35), relleno 5/10,
   radio 12, carta-sello de 75, descripción Suisse 14/14 y carta-precio Greed 12/12 a 15 px debajo. Hover: su color, como .pass-header:hover. */
.compra-vuelta[data-estado="elegir"]{width:auto;margin-bottom:200px}
.compra-vuelta[data-estado="elegir"] .billete{display:block;filter:none;transition:none}
.compra-vuelta[data-estado="elegir"] .billete:hover{translate:none;rotate:none;filter:none}
.compra-vuelta[data-estado="elegir"] .comanda{min-height:0;padding:0;background:none;border-radius:0}
.compra-escenario{contain:paint} /* Recorta la fila sin ser zona de scroll; WebKit no respeta overflow-x:clip para el ancho de la página. */
.compra-vuelta[data-estado="elegir"] #compra-titulo{margin:16px 0 28px;font:400 56px/1 var(--t-hue);letter-spacing:-.02em;color:#333}
.compra-vuelta[data-estado="elegir"] :is(#compra-plazo,#compra-explica,.enlaces){display:none}
.oculto{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

.compra-pases{display:grid;grid-template-columns:repeat(auto-fill,218px);gap:10px}
@media (min-width:1100px){.compra-pases{grid-template-columns:repeat(6,minmax(0,1fr))}}
.carta-pase{position:relative;display:block;cursor:pointer;color:#000;-webkit-tap-highlight-color:transparent}
.carta{display:flex;flex-direction:column;gap:15px;transform-origin:50% 0;transition:transform .42s var(--sal),opacity .42s var(--sal)}
.carta-cab{position:relative;display:block;height:328px;padding:5px 10px;border-radius:12px;background:#fff;overflow:hidden;transition:background-color .35s var(--sal)}
.carta-nombre{display:block;font:400 54px/50px var(--t-hue);letter-spacing:-.5px;color:#333}
.carta-sello{position:absolute;right:0;bottom:0;width:75px;height:auto;transform:rotate(-90deg)}
.carta-pie{display:flex;justify-content:space-between;gap:12px;min-height:65px}
.carta-desc{width:65%;font:400 14px/14px var(--t-suisse)}
.carta-precio{width:30%;text-align:right;font:400 12px/12px var(--t-greed);letter-spacing:1px}
.carta-pase:hover .carta-cab{background:var(--c)}
/* Microanimación al elegir (Andrea, 11 nov): el color se llena desde el centro y el sello gira un poco; 380 ms, solo clip-path y transform. */
.carta-cab::before{content:"";position:absolute;inset:0;background:var(--c);clip-path:circle(0 at 50% 55%);transition:clip-path .38s var(--sal)}
.carta-pase:has(:checked) .carta-cab::before{clip-path:circle(150% at 50% 55%)}
.carta-nombre{position:relative}
.carta-sello{transition:transform .38s var(--sal)}
.carta-pase:has(:checked) .carta-sello{transform:rotate(-82deg)}
/* Ticket (Andrea y Gonzalo, 11 nov: «que en vez de que parezcan cartas, sean tickets»): mordisco semicircular a cada lado, a 95 px
   del pie del bloque, y línea de troquel punteada entre las dos muescas. Solo CSS (radial-gradient en máscara), también en Safari. */
.carta-cab{--muesca:10px;--m:calc(100% - 95px);
  -webkit-mask:radial-gradient(circle var(--muesca) at 0 var(--m),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% var(--m),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--muesca) at 0 var(--m),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% var(--m),#0000 97%,#000) right/51% 100% no-repeat}
.carta-cab::after{content:"";position:absolute;left:calc(var(--muesca) + 6px);right:calc(var(--muesca) + 6px);top:var(--m);border-top:1px dotted rgba(0,0,0,.28);pointer-events:none}
.carta-pase.carta-foto .carta-cab::after{display:none}
.carta-pase:has(:focus-visible) .carta{outline:2px solid #000;outline-offset:3px} /* En la carta, que no lleva la máscara del ticket ni el clip-path: así se ve también sin elegir y en Unlimited. */
/* Unlimited: su imagen de la home, a la misma proporción, sin borde. La clase es .carta-foto: .foto es la foto del perfil (perfil.css) y la giraba y recortaba. */
.carta-pase.carta-foto .carta-cab{background:#fff url("/mi-eito/cuenta/unlimited-pase.jpg") 50%/100% 100%}
.carta-pase.carta-foto .carta-nombre{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.carta-pase.carta-foto .carta-sello{display:none}
/* Unlimited es una imagen con su nombre dentro: al elegirla o pasar el ratón no se tapa con el color (auditoría r2). */
.carta-pase.carta-foto .carta-cab::before{display:none}
.carta-pase.carta-foto:hover .carta-cab{background:#fff url("/mi-eito/cuenta/unlimited-pase.jpg") 50%/100% 100%}

/* Escena: fila con la elegida al centro, grande; las demás a los lados, más pequeñas y apagadas.
   Andrea, 11 nov: sin el rectángulo claro de la tarjeta cortada en el borde: las de los lados se funden con el fondo. */
.compra-pases.escena{display:flex;position:relative;align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:28px calc(50% - 109px) 100px} /* Galería: se desplaza con dedo, rueda y flechas; abajo, hueco para la elegida que crece (×1,2). */
.compra-pases.escena::-webkit-scrollbar{display:none}
.escena .carta-pase{scroll-snap-align:center}
.escena .carta-pase{flex:0 0 218px}
.escena .carta-pase:has(:checked){z-index:1}
.escena .carta-pase:has(:checked) .carta{transform:scale(var(--grande,1.2))}
/* Apagadas sin transparencia (Andrea, 11 nov: «quita el rectángulo claro»): tarjeta blanca opaca, nombre y sello en gris. */
.escena .carta-pase:not(:has(:checked)) .carta{transform:scale(.8) translateY(12%)}
.escena .carta-pase:not(:has(:checked)) .carta-nombre{color:#8c8c8c}
.escena .carta-pase:not(:has(:checked)) .carta-sello{opacity:.3}
.escena .carta-pase.carta-foto:not(:has(:checked)) .carta-cab{filter:grayscale(1) contrast(.35) brightness(1.5)}
.escena .carta-pase:not(:has(:checked)) .carta-pie{opacity:0}
.escena .carta-pase:not(:has(:checked)):hover .carta-nombre{color:#333}
.compra-escenario:has(.escena){-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.compra-todos{display:inline-flex;align-items:center;min-height:44px;margin:0 0 8px;padding:0;border:0;background:none;color:#000;cursor:pointer;font:400 15px/20px var(--t-greed);letter-spacing:1px;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}

/* Barra de pago fija: «Pagar» como el COMPRAR de la web (#ebebeb, pastilla) y «Pago seguro con Square» pequeño debajo. */
.compra-resumen{position:fixed;left:50%;bottom:16px;z-index:5;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px;row-gap:2px;width:min(860px,calc(100% - 32px));padding:18px 20px;border-radius:12px;background:#fff;transform:translateX(-50%);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.compra-resumen p{margin:0}
.compra-resumen .etq{font:400 13px/16px var(--t-greed);letter-spacing:1px;text-transform:uppercase;color:var(--tinta-suave)}
.compra-resumen-nombre{font:400 28px/1 var(--t-hue)}
.compra-resumen-plazo{font-size:14px;color:var(--tinta-suave)}
.compra-resumen-precio{font:400 16px/1.2 var(--t-greed);letter-spacing:1px}
.compra-pago{grid-column:2;grid-row:1/span 4;display:grid;justify-items:center;gap:8px}
.compra-pagar{min-width:160px;min-height:44px;padding:0 28px;border:0;border-radius:72px;background:#ebebeb;color:#000;cursor:pointer;font:400 16px/1 var(--t-suisse);transition:transform .2s var(--sal)}
.compra-pagar:disabled{color:#5c5c5c;cursor:default}
.compra-pago small{font-size:12px;line-height:16px;color:#5c5c5c}
@media (hover:hover) and (pointer:fine){.compra-pagar:not(:disabled):hover{transform:scale(1.1)}}
.compra-vuelta:not([data-estado="elegir"]) :is(.compra-resumen,.compra-pases,.compra-todos){display:none}

@media (max-width:767px){
  .compra-vuelta[data-estado="elegir"] #compra-titulo{font-size:40px}
  .compra-pases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carta-cab{height:200px}
  .carta-nombre{font-size:36px;line-height:35px}
  .escena .carta-pase{flex-basis:176px}
  .compra-pases.escena{padding:20px calc(50% - 88px) 70px}
  .compra-resumen{left:0;right:0;bottom:0;width:auto;transform:none;column-gap:16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-radius:12px 12px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.1)}
  .compra-resumen-plazo{display:none}
  .compra-resumen-nombre{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.carta-cab,.carta,.compra-pagar,.carta-sello,.carta-cab::before{transition:none}}