/* ==========================================================
   NOTA SOBRE LOS ":hover" DE ESTE ARCHIVO
   ----------------------------------------------------------
   Van envueltos en "@media (hover:hover)". En un movil no existe
   pasar por encima: el navegador finge un hover al tocar y lo
   deja PUESTO hasta que toques otra cosa. Resultado: pulsas un
   boton, te lleva a otro sitio, vuelves y el boton sigue
   iluminado como si tuvieras el dedo encima.

   La envoltura va rule a rule y en su sitio, no agrupada al
   final: una media query no cambia la especificidad ni el orden,
   asi que la cascada queda exactamente igual que antes en un
   ordenador, y en el movil esas reglas sencillamente no existen.
   ========================================================== */

/* ==========================================================
   EL CALENDARIO DE RESERVAS Y EL CONSENTIMIENTO
   ----------------------------------------------------------
   Estas 89 reglas vivían dentro de styles.css, la hoja de la web
   anterior. La portada nueva necesita el calendario, pero NO
   necesita las otras seiscientas reglas que la acompañan.

   Y no es cuestión de peso, es que hacen daño. Al cargar
   styles.css entera en la portada nueva, sesenta de sus reglas
   alcanzaban a elementos de aquí. Medido, dos destrozos claros:

     · las cuatro fichas de «Somos EM» se quedaban con opacidad
       cero —invisibles— porque .entra--cadena las apaga esperando
       a un guion que en esta portada no existe;
     · y la sección «Próximamente» se pintaba de negro justo donde
       el fondo tiene que acabar en blanco para coser con el pie.

   Así que se trae el componente, no la casa entera. Las reglas son
   las mismas, copiadas por posición exacta del fichero original y
   conservando su @media; lo único añadido son las variables de
   color que usaban, que estaban en el :root de styles.css.

   IMPORTANTE: esas variables van ENCERRADAS en los tres
   contenedores del calendario, no en :root. Si se soltaran arriba,
   --ink y --paper pisarían los colores de la portada y habríamos
   cambiado un problema por otro.
   ========================================================== */
.rsv, .waiver-overlay, .popup-overlay{
  --white:  #ffffff;
  --paper:  #f6f4ef;
  --paper-2:  #efece5;
  --ink:  #0a0a0a;
  --ink-soft:  #1a1a1a;
  --mute:  #6a6a6a;
  --line:  #e6e2d9;
  --line-strong:  #cfc9bc;
  --sans:   "Space Grotesk", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif:  "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --r-rect:  clamp(20px, 3vw, 34px);
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --r-chico:   14px;
  --r-medio:   20px;

  /* Y EL COLOR DEL BOTÓN, TAMBIÉN AQUÍ DENTRO.
     ----------------------------------------------------------
     El botón de esta web saca su relleno de --texto y su letra de
     --fondo: sobre negro sale blanco, sobre blanco sale negro, y
     por eso vale igual en la portada y en las páginas de dentro.

     Pero estas tarjetas son SIEMPRE claras, y flotan sobre una
     portada que es negra. Ahí --texto vale blanco, así que
     "Continuar" y "Confirmar reserva" salían de blanco sobre una
     tarjeta blanca: el recuadro desaparecía y quedaba la palabra
     suelta, pegada al campo del correo. Se veía como texto, no
     como botón, y en un móvil eso significa que no se pulsa.

     Encerrando las dos variables aquí, el botón hace su cuenta con
     el color de la TARJETA en vez de con el de la página que hay
     debajo. Sale oscuro, que es lo que toca sobre claro, y sigue
     sin haber una versión aparte del botón. */
  --texto: var(--ink);
  --fondo: var(--white);
}

.prereveal__text em, .hero__phrase em, .popup__title em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400;
  font-size: var(--serif-cuerpo, 1.04em);
  padding: 0 0.02em;
}
.popup-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,15,15,0.55);
  backdrop-filter: blur(8px) saturate(0.85);
  -webkit-backdrop-filter: blur(8px) saturate(0.85);
  display: grid; place-items: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 500ms var(--ease-out);
}
.popup-overlay.is-open { opacity: 1; pointer-events: auto; }
.popup {
  position: relative;
  background: var(--white);
  border-radius: var(--r-rect);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 520px; width: 100%;
  text-align: center;
  transform: scale(0.94) translateY(20px);
  transition: transform 500ms var(--ease-out);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
}
.popup-overlay.is-open .popup { transform: scale(1) translateY(0); }
.popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px; color: var(--mute);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
@media (hover:hover){.popup__close:hover{ background: var(--paper); color: var(--ink); }}
.popup__title {
  margin: 0 0 0.8rem;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: -0.02em; line-height: 1.1;
}
.popup__body { margin: 0 0 2rem; color: var(--mute); font-size: 0.98rem; max-width: 40ch; margin-left: auto; margin-right: auto; }
.waiver-overlay {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(15,15,15,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.waiver-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ==========================================================
   EL ELECTOR — QUEDADA O GRUPO
   ----------------------------------------------------------
   Vive dentro de .waiver, así que el papel, el filo, la sombra y
   la tipografía ya vienen puestos. Aquí sólo van las dos fichas.

   Se apilan SIEMPRE, también en pantalla ancha. Puestas en dos
   columnas se leen como un menú de precios y obligan a comparar;
   apiladas se leen como dos ofertas, que es lo que son. Y de paso
   no hay que mantener dos maquetaciones.
   ========================================================== */
.elige__opciones{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-top:1.2rem;
}
.elige__op{
  display:block;
  padding:clamp(.95rem, 3.4vw, 1.25rem);
  border:1px solid #e6e2d9;
  border-radius:16px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s var(--ease, cubic-bezier(.22,.61,.36,1)),
             background .2s var(--ease, cubic-bezier(.22,.61,.36,1)),
             transform .13s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.elige__ojo{
  display:block;
  font-family:var(--sans, inherit);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#8a8a8a;
}
.elige__titulo{
  display:block;
  margin-top:.35rem;
  font-family:var(--sans, inherit);
  /* Se encoge con la pantalla en vez de partirse en cuatro líneas:
     "Quedada Efecto Mariposa × Anzest" es largo y en un móvil
     estrecho, a cuerpo fijo, ocupaba media tarjeta. */
  font-size:clamp(1rem, 4.2vw, 1.12rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.015em;
  color:#0a0a0a;
  text-wrap:balance;
}
/* La equis de la colaboración, en la serif cursiva de la marca —la
   misma que en el sello y en los correos. Es un signo, no una letra
   más de la frase. */
.elige__titulo i{
  font-family:var(--serif, Georgia, serif);
  font-style:italic;
  font-weight:400;
  padding:0 .06em;
}
.elige__texto{
  display:block;
  margin-top:.4rem;
  font-family:var(--sans, inherit);
  font-size:.85rem;
  line-height:1.5;
  color:#5b5b5b;
  text-wrap:pretty;
}
.elige__mas{
  display:inline-flex;
  align-items:center;
  gap:.34rem;
  margin-top:.75rem;
  font-family:var(--sans, inherit);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#0a0a0a;
}
/* La flecha avanza un pelo al pasar por encima. Dos píxeles: lo
   justo para que la ficha conteste, no para que se mueva. */
.elige__mas svg{
  transition:transform .18s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.elige__op:active{ transform:scale(.985) }
@media (hover:hover) and (pointer:fine){
  .elige__op:hover{ border-color:#0a0a0a; background:#faf9f6 }
  .elige__op:hover .elige__mas svg{ transform:translateX(2px) }
}
.elige__op:focus-visible{
  outline:2px solid #0a0a0a;
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .elige__op, .elige__mas svg{ transition:none }
  .elige__op:active{ transform:none }
}
.waiver {
  background: var(--white);
  border-radius: var(--r-rect);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 620px; width: 100%;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  transform: scale(0.95) translateY(20px);
  transition: transform 400ms var(--ease-out);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
  position: relative;
}
.waiver-overlay.is-open .waiver { transform: scale(1) translateY(0); }
.waiver__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px; color: var(--mute);
}
@media (hover:hover){.waiver__close:hover{ background: var(--paper); color: var(--ink); }}
.waiver__title {
  margin: 0 0 0.4rem;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: -0.01em;
}
.waiver__lead { margin: 0 0 1.2rem; color: var(--mute); font-size: 0.95rem; }
.waiver__body { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.waiver__body ul { list-style: disc; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.waiver__accept { display: flex; align-items: flex-start; gap: 0.7rem; margin: 1.2rem 0; font-size: 0.95rem; color: var(--ink); cursor: pointer; }
.waiver__accept input { margin-top: 0.25rem; cursor: pointer; }
.waiver__cta {
  width: 100%; justify-content: center;
  background: var(--ink); color: var(--white);
  padding: 1.1rem 2rem;
  opacity: 0.4; pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.waiver.is-accepted .waiver__cta { opacity: 1; pointer-events: auto; }
.rsv {
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center;
  padding: clamp(0.8rem, 3vw, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 0s linear 260ms;
}
.rsv.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.rsv__scrim { position: absolute; inset: 0; background: rgba(10,10,10,0.55); }
.rsv__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-radius: 24px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  transform: translateY(14px) scale(0.985);
  transition: transform 320ms var(--ease-out);
}
.rsv.is-open .rsv__panel { transform: none; }
.rsv__cerrar {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px; color: var(--mute);
  transition: background 200ms, color 200ms;
}
@media (hover:hover){.rsv__cerrar:hover{ background: var(--paper); color: var(--ink); }}
.rsv__titulo {
  margin: 0 0 0.3rem;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: -0.02em; line-height: 1.1;
  padding-right: 2.5rem;   /* deja sitio a la aspa */
}
.rsv__titulo em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); }
.rsv__sub { margin: 0 0 1.4rem; color: var(--mute); font-size: 0.92rem; }
.rsv__paso { display: none; }
.rsv__paso.is-activo { display: block; }
.rsv__cargando { color: var(--mute); font-size: 0.9rem; padding: 1.5rem 0; text-align: center; }
.rsv__dia { border-top: 1px solid var(--line); padding: 0.9rem 0; }
.rsv__dia:first-child { border-top: 0; }
.rsv__dia-nombre {
  font-family: var(--sans); font-weight: 700;
  font-size: 0.95rem; margin: 0 0 0.55rem;
}
.rsv__horas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rsv__hora {
  font-family: var(--sans); font-weight: 600;
  font-size: 0.92rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white); color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
@media (hover:hover){.rsv__hora:hover:not(:disabled){ background: var(--ink); color: var(--white); border-color: var(--ink); }}
.rsv__hora small { font-size: 0.72rem; font-weight: 500; opacity: 0.65; }
.rsv__hora:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.rsv__vacio { color: var(--mute); font-size: 0.9rem; padding: 1.2rem 0; }
.rsv__atras {
  font-family: var(--sans); font-size: 0.85rem; color: var(--mute);
  padding: 0; margin-bottom: 0.8rem;
  transition: color 180ms;
}
@media (hover:hover){.rsv__atras:hover{ color: var(--ink); }}
.rsv__elegido {
  margin: 0 0 1.2rem; padding: 0.8rem 1rem;
  background: var(--paper); border-radius: 14px;
  font-family: var(--sans); font-weight: 700; font-size: 0.97rem;
}
.rsv__form { display: flex; flex-direction: column; gap: 0.85rem; }
.rsv__campo { display: flex; flex-direction: column; gap: 0.3rem; }
.rsv__campo > span { font-size: 0.82rem; color: var(--mute); font-weight: 600; }
.rsv__campo > span i { font-style: normal; font-weight: 400; opacity: 0.75; }
.rsv__campo input,
.rsv__campo textarea {
  font: inherit; font-size: 0.97rem; color: var(--ink);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--white);
  width: 100%; resize: vertical;
  transition: border-color 180ms var(--ease);
}
.rsv__campo input:focus,
.rsv__campo textarea:focus { outline: none; border-color: var(--ink); }
.rsv__campo input[aria-invalid="true"] { border-color: #b3261e; }
.rsv__trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
.rsv__acepta {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; color: var(--mute); line-height: 1.45;
  margin-top: 0.2rem;
}
.rsv__acepta input { margin-top: 0.18rem; flex: 0 0 auto; }
.rsv__acepta a { text-decoration: underline; color: var(--ink); }
.rsv__error {
  margin: 0; padding: 0.7rem 0.9rem;
  background: #fdecea; color: #8c1d18;
  border-radius: 12px; font-size: 0.88rem;
}
.rsv__enviar { justify-content: center; width: 100%; margin-top: 0.3rem; }
.rsv__enviar[disabled] { opacity: 0.55; pointer-events: none; }
.rsv__pie {
  margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--mute); font-size: 0.82rem; line-height: 1.5;
}
.rsv__previa {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border-radius: 12px;
  color: var(--mute);
  font-size: 0.82rem;
  line-height: 1.45;
}
.cta, .mega-foot__cta, .fam__cta, .fam__pag, .rsv__enviar {
  box-shadow: 0 0 0 5px rgba(17,17,17,0.055), 0 4px 14px rgba(0,0,0,0.10);
}
.rsv__registro {
  margin: -0.2rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  animation: reg-entra 260ms var(--ease-out);
}
.rsv__registro.es-si { background: rgba(17,17,17,0.05); color: var(--ink); }
.rsv__registro.es-no { background: rgba(17,17,17,0.06); color: var(--ink); border-left: 3px solid var(--ink); }
.rsv__registro a { color: var(--ink); text-decoration: underline; font-weight: 600; }
.cat, .fam__foto, .pronto__marco, .method-hero__stage,
.reg__doc, .reto, .perfil__cifra, .juego__panel,
.map-wrap, .rsv__panel, .perfil__oferta {
  border-radius: var(--r-medio);
}
.rsv__campo input, .rsv__campo textarea,
.reg__doc-texto, .parq__extra textarea { border-radius: var(--r-chico); }
.rsv__gente {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 0 0.2rem;
  border-top: 1px solid var(--line);
}
.rsv__gente-lista { display: grid; gap: 0.55rem; }
.rsv__persona {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
  animation: gente-entra 260ms var(--ease-out);
}
.rsv__persona input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}
.rsv__persona input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rsv__quitar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--mute);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
@media (hover:hover){.rsv__quitar:hover{ background: var(--ink); color: var(--white); }}
.rsv__mas {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--mute);
  font-family: var(--sans); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease), background-color 200ms var(--ease);
}
.rsv__mas:focus-visible{
  border-style: solid; border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2, #f4f2ee);
}
@media (hover:hover){.rsv__mas:hover{
  border-style: solid; border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2, #f4f2ee);
}}
.rsv__mas[disabled] { opacity: 0.4; cursor: default; }
.rsv__mas span { font-size: 1.05rem; line-height: 1; }
.rsv__gente-nota {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--mute);
  text-wrap: pretty;
}
h1, h2, h3, h4,
.page__title, .sec__title, .cat__title, .why-em__title,
.fam__title, .rsv__titulo, .confirmar__titulo,
.mega-foot__signup-title, .mega-foot__title,
.hero__small, .step__title, .faq__q {
  text-wrap: balance;
}
p, li, figcaption, blockquote,
.page__lead, .sec__lead, .cat__body, .why-em__text,
.fam__cita-txt, .rsv__sub, .rsv__pie, .confirmar__texto,
.confirmar__nota, .step__body, .faq__a {
  text-wrap: pretty;
}


@media (max-width:480px){
.rsv { padding: 0; }
.rsv__panel { max-height: 100dvh; height: 100dvh; border-radius: 0; width: 100%; }
}

@media (max-width:520px){
.rsv__persona { grid-template-columns: 1fr auto; }
.rsv__persona input:nth-child(2) { grid-column: 1 / -1; }
}


/* ==========================================================
   LA PUERTA DE ENTRADA — el pie del formulario
   ----------------------------------------------------------
   Lo único que la puerta no hereda del consentimiento. En móvil
   el botón ocupa el ancho porque es la única acción que hay;
   a partir de 520 px se encoge a su tamaño natural.
   ========================================================== */
/* Aire entre el campo y el botón. Con 1 rem el "Continuar" quedaba
   pegado a la caja del correo —en el móvil, a doce píxeles— y las
   dos cosas se leían como una sola. Escribir y confirmar son dos
   gestos distintos y necesitan verse como dos. */
/* La puerta de reserva vive ahora en boton-em.css: la crea
   entrar-em.js en las doce páginas y esta hoja solo la carga la
   portada. */