/* ==========================================================================
   Mythos — Componentes

   La librería. Todo lo que se repite en más de una página vive aquí y en
   ningún otro sitio.

   REGLA: antes de escribir CSS nuevo para una página, busca el componente aquí.
   Si no existe pero se parece a uno, añádele un modificador. Solo se crea un
   componente nuevo cuando de verdad no hay nada parecido.

   Lo que NO va aquí: posiciones y tamaños de una página concreta. Eso va en el
   CSS de esa página, y siempre como una clase de sitio (`.my-home__algo`),
   nunca cambiando el componente por debajo.

   La rejilla (.my-grid) NO está aquí: vive en base.css porque el pie, que es
   global, también la necesita.

   Catálogo visual: vista-previa-componentes.html
   ========================================================================== */


/* ==========================================================================
   1 · TARJETA
   Una sola base para juegos, público, opiniones, entradas y cualquier futura.
   Antes eran cuatro definiciones con el mismo cuerpo.
   ========================================================================== */

.my-card {
  --card-pad: 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius-lg);
  overflow: hidden;
}

/* Con relleno propio. Se omite cuando la tarjeta lleva imagen arriba, porque
   entonces el relleno lo pone .my-card__body. */
.my-card--pad { padding: var(--card-pad); }

/* Reacciona al ratón. Se pone solo si la tarjeta entera es pulsable. */
.my-card--hover {
  transition: transform .35s var(--my-ease),
              border-color .35s var(--my-ease),
              box-shadow .35s var(--my-ease);
}
.my-card--hover:hover,
.my-card--hover:focus-within {
  transform: translateY(-4px);
  border-color: var(--my-gold);
  box-shadow: var(--my-shadow);
}

/* Tarjeta que ES un enlace. */
a.my-card { text-decoration: none; color: inherit; display: flex; }

.my-card__media {
  position: relative;
  aspect-ratio: var(--media-ratio, 16 / 10);
  overflow: hidden;
  background: var(--my-surface-2);
}
.my-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.05);
  transition: transform .7s var(--my-ease), filter .7s var(--my-ease);
}
.my-card--hover:hover .my-card__media img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.05);
}
/* Degradado inferior para que el texto respire si se solapa. */
.my-card__media--fade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(18, 18, 26, .95) 100%);
}

.my-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--card-pad);
}
.my-card__body > :last-child { margin-bottom: 0; }

/* Pie de tarjeta: se pega abajo aunque los cuerpos midan distinto, así las
   tarjetas de una misma fila alinean sus botones. */
.my-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: auto; padding-top: 1.25rem;
  border-top: 1px solid var(--my-line);
}

/* Etiqueta superpuesta sobre la imagen. */
/* La etiqueta puede llevar icono delante.

   Era una caja de texto suelto. Con un SVG dentro hace falta que sea flex y que
   el icono se alinee al centro optico del texto, no a su caja: en versalitas de
   .7rem con interletraje, un icono alineado a la linea base se ve caido. */
/* La etiqueta de la esquina es LA UBICACIÓN, y por eso deja de ser un rótulo
   dorado: el oro es el acento de las acciones —los botones, los precios— y una
   dirección no es una acción. Va en cristal oscuro sobre la foto, que además la
   hace legible caiga donde caiga la imagen. */
.my-card__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .38em;
  padding: .4rem .8rem;
  background: rgba(7, 7, 10, .72);
  border: 1px solid rgba(249, 191, 0, .35);
  backdrop-filter: blur(6px);
  color: var(--my-gold);
  font-family: var(--my-font-body); font-weight: 600; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 100px;
}

/* Y el distintivo del juego destacado, en la esquina CONTRARIA.

   Iban los dos a la izquierda, uno encima de otro, y se leían como una sola
   cosa: «TOP El Palmar». Son dos datos distintos —dónde está y qué puesto
   ocupa— así que ocupan esquinas distintas. Este sí es oro macizo: es el único
   sitio de la tarjeta donde la marca se pone una medalla. */
.my-card__tag--top {
  left: auto; right: 1rem;
  background: linear-gradient(135deg, #FFC85A, var(--my-gold) 45%, #B87E00);
  border-color: transparent;
  backdrop-filter: none;
  color: var(--my-void);
  font-size: .72rem;
  letter-spacing: .18em;
  box-shadow: 0 6px 20px -6px rgba(249, 191, 0, .55);
}
.my-card__tag svg {
  width: 1.05em; height: 1.05em;
  flex: none;
  margin-top: -.05em;
}

.my-card__title { font-size: var(--my-h3); margin-bottom: .6rem; }
/* El enlace del título NO se pinta de azul: hereda el blanco del titular y
   pasa a dorado al pasar el ratón, como el resto del sitio. */
.my-card__title a { color: inherit; text-decoration: none; }
.my-card__title a:hover { color: var(--my-gold); }
.my-card__text  { color: var(--my-text-dim); font-size: .975rem; margin-bottom: 1.5rem; }
.my-card__icon  { width: 28px; height: 28px; color: var(--my-gold); margin-bottom: 1rem; }
/* Los logotipos de marca conservan su color, no el acento del sitio. */
.my-card__icon--whatsapp { color: var(--my-whatsapp); }
.my-card__more  {
  font-family: var(--my-font-body); font-weight: 600; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--my-amber);
  margin-top: auto;
}


/* ==========================================================================
   3 · ETIQUETAS Y DISTINTIVOS
   ========================================================================== */

/* Píldora de dato: jugadores, duración, dificultad, categoría… */
.my-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem;
  background: var(--my-surface-2);
  border: 1px solid var(--my-line);
  border-radius: 100px;
  font-size: .8rem; color: var(--my-text);
}
.my-chip svg { width: 14px; height: 14px; color: var(--my-amber); flex: none; }
.my-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Distintivo con contenido mixto: la valoración de Google, por ejemplo. */
.my-badge {
  display: inline-flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding: .7rem 1.1rem;
  background: rgba(18, 18, 26, .72);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius-lg);
  backdrop-filter: blur(6px);
}
.my-badge__figure {
  font-family: var(--my-font-mono); font-weight: 500; font-size: 1.5rem;
  color: var(--my-gold); line-height: 1;
}
.my-badge__meta { font-size: var(--my-small); color: var(--my-text-dim); }
.my-badge__meta strong { color: var(--my-text); font-weight: 600; }

.my-stars { color: var(--my-gold); letter-spacing: .1em; font-size: .95rem; }


/* Precio destacado: la cifra en mono, las palabras pequeñas encima y debajo. */
.my-precio { line-height: 1.2; margin: 0; }
.my-precio span {
  display: block; font-size: .75rem; color: var(--my-text-dim);
  text-transform: uppercase; letter-spacing: .1em;
}
.my-precio strong {
  font-family: var(--my-font-mono); font-size: 1.4rem;
  color: var(--my-white); font-weight: 600;
}


/* ==========================================================================
   4 · CIFRAS
   ========================================================================== */

/* La banda va dentro del contenedor, no de borde a borde: antes medía 946 px
   en un sitio de 906 y se salía del ancho del resto de la página. */
.my-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--my-line);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius-lg);
  overflow: hidden;
}
.my-stat { background: var(--my-surface); padding: 1.5rem 1.25rem; text-align: center; }
.my-stat__label {
  display: block;
  font-size: .72rem; color: var(--my-text-dim);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.my-stat__value {
  display: block;
  font-family: var(--my-font-mono); font-weight: 500; font-size: 1.5rem;
  color: var(--my-gold); line-height: 1.1;
}


/* ==========================================================================
   5 · TABLA
   Vale para precios y para cualquier otra. Scroll dentro de su caja: la página
   nunca se desplaza en horizontal.
   ========================================================================== */

.my-tablewrap { overflow-x: auto; }
.my-table {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.my-table caption {
  text-align: left; color: var(--my-text-dim);
  font-size: var(--my-small); padding-bottom: 1rem;
}
.my-table th, .my-table td {
  padding: .95rem 1rem; text-align: left;
  border-bottom: 1px solid var(--my-line);
}
.my-table thead th {
  font-family: var(--my-font-body); font-weight: 600; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--my-amber);
  border-bottom-color: rgba(249, 191, 0, .25);
}
.my-table tbody th { font-weight: 600; color: var(--my-white); }
.my-table td { color: var(--my-text); }
.my-table td strong { color: var(--my-white); font-family: var(--my-font-mono); }
.my-table tbody tr:hover { background: var(--my-surface); }
.my-table__sub { display: block; font-size: .8rem; color: var(--my-text-dim); font-family: var(--my-font-mono); }


/* ==========================================================================
   6 · PASOS
   Los números son información: describen una secuencia real. No se usan como
   adorno en listas que no tengan orden.
   ========================================================================== */

.my-steps { counter-reset: step; }
.my-step { position: relative; padding-top: 2.5rem; }
.my-step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--my-font-display); font-size: 3rem; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(249, 191, 0, .35);
}
.my-step h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.my-step p  { font-size: .95rem; color: var(--my-text-dim); }


/* ==========================================================================
   7 · ACORDEÓN
   <details> nativo: funciona sin JavaScript y es accesible de serie.
   ========================================================================== */

.my-faq { max-width: none; }
.my-faq details { border-bottom: 1px solid var(--my-line); }
.my-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: var(--my-font-body); font-weight: 600;
  font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
  color: var(--my-white);
  list-style: none;
  transition: color .2s var(--my-ease);
}
.my-faq summary::-webkit-details-marker { display: none; }
.my-faq summary:hover { color: var(--my-gold); }
.my-faq summary::after {
  content: ""; flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--my-amber);
  border-bottom: 2px solid var(--my-amber);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .3s var(--my-ease);
}
.my-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.my-faq__answer {
  padding: 0 0 1.5rem;
  color: var(--my-text-dim); font-size: .975rem;
}


/* ==========================================================================
   8 · PORTADA DE PÁGINA
   `.my-hero` es la grande de inicio. `--page` es la de páginas interiores:
   misma familia, la mitad de alta y sin ocupar toda la pantalla.
   ========================================================================== */

.my-hero {
  position: relative;
  display: grid; align-items: center;
  min-height: min(88svh, 780px);
  padding-block: clamp(4rem, 2rem + 8vw, 7rem);
  isolation: isolate;
  overflow: hidden;
}
.my-hero--page {
  min-height: 0;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* Sin entradilla, el relleno de abajo se queda sin nada que sostener.
   El CSS es el mismo que en el resto de páginas —esa parte estaba bien—, pero
   en las que sí llevan entradilla ese espacio va ocupado por texto y en las que
   no, queda un vacío que se lee como un fallo. Se recorta a la mitad. */
.my-hero--sin-sub { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

.my-hero__media { position: absolute; inset: 0; z-index: -2; }
/* El póster va envuelto para servir WebP con JPG detrás. Sin posicionar ese
   envoltorio, la imagen con height:100% no tendría contra qué resolver el
   porcentaje: el elemento picture es inline y no da altura.

   (Sin etiquetas literales en el comentario: la vista previa cuenta etiquetas
   para avisar de las descompensadas, y un ejemplo dentro del CSS le hace
   contar de más.) */
.my-hero__media picture { display: block; position: absolute; inset: 0; }
.my-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* El vídeo va DENTRO de .my-hero__media, así que hereda su z-index -2 y queda
   por debajo del doble velo (-1). Esto importa: el vídeo no aclara el héroe ni
   se salta el tinte violeta, se tiñe exactamente igual que la foto. */
/* El selector lleva el contenedor delante a proposito, y no sobra.

   En pages.css hay un reset: `.my-tpl img, .my-tpl svg, .my-tpl video`, con
   `height: auto`. Eso es (0,1,1). Una sola clase, `.my-hero__video`, es
   (0,1,0) y PIERDE, asi que el video se quedaba con el alto intrinseco por
   defecto de la etiqueta —150px— y `object-fit: cover` recortaba 326px por
   arriba y por abajo: se veia una franja del centro de la escena, encuadrada
   distinto que el poster.

   La imagen de al lado se libraba de casualidad: `.my-hero__media img` tambien
   es (0,1,1) y va despues en el archivo, asi que gana por orden. */
.my-hero__media .my-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.22,.61,.36,1);
}

/* Aparece cuando hay fotogramas de verdad (`canplay`), no cuando empieza a
   cargar: si no, se cuela un parpadeo entre el póster y el primer cuadro. */
.my-hero__media .my-hero__video.is-listo { opacity: 1; }

/* La escena, a la derecha y desvanecida por la izquierda.

   Ocupaba el ancho entero. La mitad izquierda era una mancha de humo que el
   texto tapaba de todas formas —y que se llevaba la mayor parte de los bits del
   video, porque el humo en movimiento es lo mas caro que hay de codificar—.

   Se recorta al 5:4 alrededor del arqueologo y se ancla a la derecha. El
   desvanecido va con `mask-image`, no con un degradado pintado encima: asi lo
   heredan la foto Y el video con una sola regla, y funciona sobre cualquier
   fondo. Un degradado superpuesto habria que repintarlo si cambia el fondo, y
   se le olvidaria el video.

   `object-position: right` importa: `cover` recorta por los dos lados a la vez,
   y aqui interesa que recorte SOLO por la izquierda, que es el lado que ya esta
   desvaneciendose. Recortando por la derecha se comeria el relieve de la pared.

   Solo a partir de 900px. Por debajo manda el recorte vertical, que ya llena la
   pantalla del telefono y no necesita convivir con el texto al lado. */
@media (min-width: 900px) {
  .my-hero--marca .my-hero__media {
    left: auto;
    width: min(64%, 940px);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 20%, #000 34%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 20%, #000 34%);
  }
  .my-hero--marca .my-hero__media img,
  .my-hero--marca .my-hero__media .my-hero__video { object-position: right center; }

  /* El velo, aligerado sobre la escena.

     Estaba calculado para una imagen a pantalla completa por DEBAJO del texto:
     con el titular encima, la foto tenia que oscurecerse casi a negro para que
     el texto se leyera. Ahora el texto no esta encima de nada —cae sobre la
     parte que la mascara ha vuelto transparente— asi que el mismo velo ya no
     protege ninguna lectura: solo apaga lo unico que se quiere ver.

     Se conserva lo que sí hacia falta:

       · La parada opaca de arriba. La cabecera no se superpone al heroe, y sin
         ese punto exacto se veria la costura entre el menu y la imagen.
       · El oscurecido de la izquierda, ahora mas corto y cerrando a
         transparente en vez de a 0,45: es el respaldo por si un titular largo
         invade el arranque del desvanecido.
       · El cierre de abajo, para que la imagen no choque en seco con la banda
         de cifras. */
  .my-hero--marca::before {
    background:
      radial-gradient(88% 78% at 8% 45%, rgba(11,11,16,.92) 0%, rgba(11,11,16,.42) 38%, rgba(11,11,16,0) 66%),
      linear-gradient(
        180deg,
        var(--my-void) 0,
        rgba(7,7,10,.42) 4rem,
        rgba(41,40,68,.10) 45%,
        rgba(11,11,16,.24) 78%,
        var(--my-bg) 100%
      );
  }
}

/* Doble velo: oscurece para que el texto se lea y tiñe de violeta para el aire
   misterioso.

   La primera parada del degradado vertical es **opaca**, para que el borde de
   arriba del héroe tenga exactamente el color de la cabecera y no se vea el
   corte entre el menú y la foto.

   Los números salen de medirlo, no de tantear. La cabecera es `--my-void` al
   82% sobre `--my-bg`, que compone `rgb(8,8,11)`; el arranque opaco de aquí es
   `rgb(7,7,10)`. Un punto por canal: invisible.

   Opaco solo en la costura, no una banda: la cabecera no se superpone al héroe
   —la foto empieza justo debajo, no por detrás— así que cualquier franja opaca
   se comería foto de verdad en vez de esconderse tras el menú.

   El resto del velo se abrió después de medir cuánta imagen llegaba de verdad
   al ojo. A 1440x780 pasaba el 2,4% arriba, el 12,9% en el centro y el 4,8%
   abajo: el fondo estaba tapado al 95%, y la niebla y la bicicleta caían justo
   en el tramo que el degradado cerraba a negro opaco.

   Tres cambios, todos comprobados contra el contraste del titular:

     · La caída de arriba es más corta y más abierta (6rem al 60%, antes 9rem
       al 85%). La costura con la cabecera no se toca: la parada de 0 sigue
       siendo opaca.
     · Se añade una parada al 76%. Antes el tramo del 45% al final subía en
       línea recta hasta el negro, y se comía el suelo de la escena.
     · El radial baja su suelo del 55% al 45%. Ese suelo se aplicaba a TODA la
       escena, también al lado derecho, donde no hay texto que proteger.

   Ahora pasa el 9,8% / 17,6% / 10,5%, y el titular sigue en 18,67:1 (AAA):
   el centro del radial, que es el que va sobre el texto, no se ha tocado. */
.my-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 15% 45%, rgba(11,11,16,.94) 0%, rgba(11,11,16,.72) 42%, rgba(11,11,16,.45) 70%),
    linear-gradient(
      180deg,
      var(--my-void) 0,
      rgba(7,7,10,.60) 6rem,
      rgba(41,40,68,.26) 45%,
      rgba(11,11,16,.46) 76%,
      var(--my-bg) 100%
    );
}
/* Grano de película: quita el aspecto plano digital. */
.my-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: var(--my-noise);
}
/* Sin imagen de fondo el velo sobra; basta el degradado. */
.my-hero--plain::before {
  background: linear-gradient(180deg, var(--my-void) 0%, rgba(41,40,68,.28) 60%, var(--my-bg) 100%);
}

.my-hero__inner { max-width: 780px; }

/* --- Hero con marca -------------------------------------------------------
 *
 * Solo la portada. Una columna, y estrecha: el mensaje ocupa la izquierda y la
 * derecha queda libre para la escena.
 *
 * Eran dos columnas, con el logotipo grande a la derecha equilibrando el peso.
 * Eso tenia sentido cuando esa mitad era fondo. Con la foto ahi, el logotipo
 * caia justo encima de la cabeza y la antorcha —dos cosas que quieren ser lo
 * primero que se mira, una sobre la otra— y ademas repetia la marca que ya esta
 * en la cabecera dos centimetros mas arriba.
 *
 * En las páginas interiores no se usa: la cabecera ya lleva el logotipo. */
.my-hero--marca .my-hero__inner {
  max-width: none;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .my-hero--marca .my-hero__inner {
    grid-template-columns: minmax(0, min(52%, 620px));
  }
}

.my-hero__logo { margin: 0; }
.my-hero__logo img {
  width: 100%;
  height: auto;
  /* Un halo muy leve lo despega del fondo cuando la foto de detrás es clara. */
  filter: drop-shadow(0 18px 45px rgba(0, 0, 0, .55));
}

/* En móvil no hay dos columnas: el logotipo va arriba y a tamaño contenido,
   para no empujar el titular fuera de la primera pantalla. */
@media (max-width: 899px) {
  .my-hero__logo { order: -1; }
  .my-hero__logo img { width: clamp(140px, 34vw, 210px); }
}
/* --- Las cinco voces ------------------------------------------------------
 *
 * Ocupan el mismo sitio que ocupaban dentro del JPG: una fila repartida bajo el
 * mensaje. Pequeñas y calladas a propósito: el distintivo de 4,9 ya da la cifra,
 * esto solo pone el tono.
 *
 * En móvil se envuelven en varias filas en vez de encogerse hasta no leerse. */
.my-voces {
  list-style: none; margin: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.1rem, .4rem + 3vw, 3.25rem);
}
.my-voces__item { text-align: center; }
.my-voces__cita {
  display: block;
  font-family: var(--my-font-display);
  font-size: clamp(.85rem, .75rem + .4vw, 1.1rem);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--my-text);
}
/* Las estrellas van un punto más pequeñas que en el distintivo: aquí son
   acompañamiento, no el dato. */
.my-voces .my-stars { font-size: .78rem; }

/* En móvil las estrellas se van.

   No es por ahorrar: el distintivo de 4,9 con sus cinco estrellas está tres
   centímetros más arriba, así que aquí repetirlas cinco veces solo gasta alto.
   Y el alto en móvil es exactamente lo que separa a los botones de quedarse
   fuera de la primera pantalla: con estrellas la fila medía 137px, sin ellas
   baja a menos de la mitad.

   Las citas se quedan, más pequeñas y en gris: aportan tono, no dato. */
@media (max-width: 699px) {
  .my-voces { gap: .55rem 1.15rem; margin-top: 1.75rem; }
  .my-voces .my-stars { display: none; }
  .my-voces__cita {
    font-size: .82rem; letter-spacing: .1em;
    color: var(--my-text-dim);
  }
}

.my-hero__kicker {
  display: block;
  font-size: clamp(.8rem, .7rem + .5vw, 1.05rem);
  letter-spacing: .32em; font-weight: 500;
  color: var(--my-amber);
  margin-bottom: .9rem;
}
.my-hero__sub {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem);
  color: var(--my-text);
  max-width: 56ch;
  margin-bottom: 2rem;
}

/* El logotipo encima del titular.

   Es el mismo PNG de la cabecera servido más grande. Lleva sombra propia porque
   cae sobre la foto y, sin ella, el trazo fino de la tipografía se pierde en las
   zonas claras del fuego. */
.my-hero__logo {
  margin: 0 0 1.4rem;
  line-height: 0;
}
.my-hero__logo img {
  width: clamp(150px, 20vw, 230px);
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .85));
}


/* La valoración de Google SOBRE LA FOTO.

   La versión de caja —fondo translúcido, borde y desenfoque— funciona dentro de
   una sección, y por eso sigue existiendo en el blog. Sobre el héroe no: un
   recuadro gris flotando encima de una fotografía la parte en dos y se lee como
   un cajetín pegado, no como parte de la imagen.

   Aquí se quita todo el envoltorio y lo que sostiene el dato es la propia
   tipografía: la cifra grande en la display de la marca, las estrellas en oro y
   el recuento en versalitas. La legibilidad la dan las sombras y el degradado
   del héroe, no una caja. */
.my-badge--hero {
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  gap: .9rem;
  align-items: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .9);
}
.my-badge--hero .my-badge__figure {
  font-family: var(--my-font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.4rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: .01em;
}
.my-badge--hero .my-stars {
  font-size: 1.05rem;
  letter-spacing: .14em;
  /* El oro de las estrellas, encendido: sobre la foto el plano queda apagado. */
  filter: drop-shadow(0 0 10px rgba(249, 191, 0, .45));
}

/* La raya que separa la cifra del recuento. Es un borde, no un carácter: así no
   lo lee el lector de pantalla ni aparece al copiar el texto. */
.my-badge--hero .my-badge__meta {
  padding-left: .9rem;
  border-left: 1px solid rgba(249, 191, 0, .34);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--my-text);
}
.my-badge--hero .my-badge__meta strong {
  display: block;
  color: var(--my-white);
  font-size: .95rem;
  letter-spacing: .04em;
}

/* En vertical la cifra y las estrellas se quedan juntas y el recuento baja a su
   propia línea: con el móvil a 375 px, la raya vertical dejaba el «753 reseñas»
   en dos renglones partidos. */
@media (max-width: 520px) {
  .my-badge--hero { gap: .55rem; }
  .my-badge--hero .my-badge__meta {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
  .my-badge--hero .my-badge__meta strong { display: inline; }
}


/* ==========================================================================
   9 · MIGAS DE PAN
   Refuerzan la jerarquía del sitio para Google y sitúan al visitante que llega
   desde una búsqueda a una página interior.
   ========================================================================== */

.my-breadcrumb { margin-bottom: 1.5rem; font-size: .8rem; }
.my-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.my-breadcrumb li { display: flex; align-items: center; gap: .5rem; color: var(--my-text-dim); }
.my-breadcrumb li + li::before { content: "›"; color: var(--my-line); }
.my-breadcrumb a { color: var(--my-text-dim); text-decoration: none; }
.my-breadcrumb a:hover { color: var(--my-gold); }
.my-breadcrumb [aria-current] { color: var(--my-text); }


/* ==========================================================================
   10 · GRUPO DE BOTONES
   ========================================================================== */

.my-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.my-actions--center { justify-content: center; }


/* ==========================================================================
   11 · CIERRE
   ========================================================================== */

.my-cta {
  position: relative; text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(41, 40, 68, .6) 0%, transparent 65%),
    var(--my-void);
}
.my-cta__inner { max-width: 640px; margin-inline: auto; }
.my-cta .my-lead { margin-inline: auto; margin-bottom: 2rem; }


/* ==========================================================================
   12 · DATOS DE CONTACTO
   ========================================================================== */

.my-nap { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.my-nap li { display: flex; gap: .85rem; align-items: flex-start; }
.my-nap svg { width: 20px; height: 20px; color: var(--my-amber); flex: none; margin-top: .2rem; }
.my-nap strong {
  display: block; color: var(--my-white); font-size: .8rem;
  font-family: var(--my-font-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: .15rem;
}
.my-nap a { color: var(--my-text); text-decoration: none; }
.my-nap a:hover { color: var(--my-gold); }


/* ==========================================================================
   13 · MAPA BAJO DEMANDA
   El iframe de Google trae ~500 KB de terceros. No se carga hasta que se pulsa.
   ========================================================================== */

.my-map {
  position: relative; aspect-ratio: 4 / 3;
  border: 1px solid var(--my-line); border-radius: var(--my-radius-lg);
  overflow: hidden; background: var(--my-surface);
}
.my-map iframe {
  width: 100%; height: 100%; border: 0;
  display: block;
}


/* El calendario de reservas.

   Parece el mapa y no lo es: el mapa tiene una proporción fija y el calendario
   crece con lo que enseña —el selector de juego, el mes, las horas libres y
   luego el formulario—, así que aquí NO se toca el alto ni se le imponen
   dimensiones al iframe. Solo el ancho.

   Tampoco lleva fondo ni borde: el calendario trae su propia tarjeta blanca con
   esquinas redondeadas, y meterla dentro de otra caja oscura le dibujaba un
   marco alrededor. */
.my-reservas {
  margin-top: 3rem;
}
.my-reservas iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* El «Powered by Titan Escape» que el embed añade debajo del calendario: su
   color es para fondo claro y aquí cae sobre el fondo oscuro de la sección. */
.my-reservas a[href*="titanescape"] {
  color: var(--my-text-dim) !important;
  opacity: 1 !important;
}


/* ==========================================================================
   14 · CONTENIDO DE WORDPRESS
   Envuelve lo que se escribe en el editor. Es lo que permite que las páginas de
   texto se editen en WordPress sin tocar el código.
   ========================================================================== */

/* Ocupa todo el contenedor, como el resto de la página.
 *
 * A ese ancho la línea se hace larga, así que el texto va algo más grande y
 * con más aire entre líneas: es lo que evita que el ojo se pierda al volver al
 * principio del renglón. */
.my-prose {
  max-width: none;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height: 1.85;
}
.my-prose > :last-child { margin-bottom: 0; }
.my-prose h2 { font-size: var(--my-h2); margin-top: 2.5em; }
.my-prose h3 { font-size: var(--my-h3); margin-top: 2em; }
.my-prose > :first-child { margin-top: 0; }
.my-prose ul, .my-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.my-prose li { margin-bottom: .5em; }
.my-prose li::marker { color: var(--my-amber); }
.my-prose a {
  color: var(--my-gold); text-decoration: underline;
  text-decoration-color: var(--my-gold-dim); text-underline-offset: 3px;
}
.my-prose a:hover { color: var(--my-white); text-decoration-color: var(--my-gold); }
.my-prose img { border-radius: var(--my-radius-lg); margin-block: 2rem; }
.my-prose blockquote {
  margin: 2rem 0; padding-left: 1.5rem;
  border-left: 2px solid var(--my-amber);
  color: var(--my-text); font-size: 1.05rem;
}
.my-prose strong { color: var(--my-white); }


/* ==========================================================================
   15 · FORMULARIO
   Estiliza tanto un formulario propio como el de un plugin (Contact Form 7,
   Elementor), porque también apunta a las etiquetas y no solo a las clases.
   ========================================================================== */

.my-form { display: grid; gap: 1.15rem; }
.my-form label {
  display: block;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--my-text); margin-bottom: .5rem;
}
.my-form input[type="text"],
.my-form input[type="email"],
.my-form input[type="tel"],
.my-form textarea,
.my-form select {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius);
  color: var(--my-white);
  font-family: var(--my-font-body); font-size: 1rem;
  transition: border-color .2s var(--my-ease);
}
.my-form input:focus, .my-form textarea:focus, .my-form select:focus {
  border-color: var(--my-gold); outline: none;
}
.my-form input::placeholder, .my-form textarea::placeholder { color: var(--my-text-dim); }
.my-form textarea { min-height: 140px; resize: vertical; }
.my-form__check {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .9rem; color: var(--my-text-dim);
}
.my-form__check input { margin-top: .25rem; accent-color: var(--my-gold); flex: none; }
.my-form__check label {
  font-size: .9rem; font-weight: 400; text-transform: none;
  letter-spacing: 0; margin: 0; color: inherit;
}
.my-form button[type="submit"] { justify-self: start; }


/* ==========================================================================
   16 · AVISO
   Para advertencias de un juego o condiciones de un bono.
   ========================================================================== */

.my-note {
  padding: 1.25rem 1.5rem;
  background: var(--my-surface);
  border-left: 2px solid var(--my-amber);
  border-radius: 0 var(--my-radius) var(--my-radius) 0;
  font-size: .95rem; color: var(--my-text-dim);
}
.my-note strong { color: var(--my-white); }
.my-note--alert { border-left-color: var(--my-red); }
.my-note ul { margin: .5em 0 0; padding-left: 1.2em; }


/* ==========================================================================
   17 · CITA
   ========================================================================== */

/* CUATRO COLUMNAS, pero con las cuentas hechas.

   Las reseñas iban en `my-grid--4`, la rejilla de las tarjetas de icono, y ahí
   el hueco entre tarjetas es el general del sitio: hasta 2,5 rem. Con cuatro
   columnas eso se come 7,5 rem de la fila y deja cada reseña en 270 px, de los
   que 60 son relleno interior. Resultado: renglones de dos palabras.

   El ancho se recupera por donde sobraba, no quitando columnas: hueco de 1 rem
   en vez de 2,5 y relleno de 1,35 rem en vez de 1,9. Eso devuelve unos 50 px de
   texto por tarjeta, que son dos o tres palabras más por línea.

   Y las columnas entran por tramos: cuatro solo a partir de 1140 px, donde cada
   una pasa de 250 px; dos en tableta y una en el móvil. Cuatro columnas en una
   pantalla de 1000 px serían otra vez el problema de antes. */
.my-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 680px) {
  .my-quotes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1140px) {
  .my-quotes { grid-template-columns: repeat(4, 1fr); }
}

.my-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.1rem;
  overflow: hidden;

  /* AQUÍ ESTABA EL HUECO.

     La reseña es un `<figure>`, y el navegador le pone de fábrica
     `margin: 1em 40px`. En una rejilla eso no se ve como un margen: se ve como
     una columna que no llena su sitio, con 80 px muertos entre tarjeta y
     tarjeta —cinco veces el hueco real de la rejilla— y la tarjeta encogida
     dentro de su celda. Las tarjetas de las cuatro claves son `<div>` y por eso
     sí llenaban el ancho.

     El reinicio de `base.css` no toca `figure` porque en una entrada de blog ese
     margen es el que separa una imagen del texto. Se quita aquí, donde estorba. */
  margin: 0;
}

/* La comilla de fondo. Decorativa y enorme, recortada por la tarjeta: da peso
   de cita sin ocupar sitio ni competir con el texto. */
.my-quote::before {
  content: "\201C";
  position: absolute;
  top: -.38em;
  right: .1em;
  font-family: var(--my-font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--my-gold);
  opacity: .08;
  pointer-events: none;
}

/* El texto baja a .92rem y las palabras se parten antes que desbordar: en una
   columna estrecha, «combinaciones» sola ya mide más de media línea. */
.my-quote blockquote {
  margin: 0 0 1.1rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--my-text);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* El autor, abajo del todo y alineado con las demás tarjetas aunque las reseñas
   tengan distinto largo. */
.my-quote__author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  margin-top: auto;
  padding-top: .95rem;
  border-top: 1px solid var(--my-line);
  font-size: .8rem;
  color: var(--my-text-dim);
}
/* La inicial y el nombre, en la misma línea; la fecha, debajo y a todo el
   ancho de la tarjeta. */
.my-quote__persona {
  display: flex;
  align-items: center;
  gap: .6rem;
}
/* El nombre, en una sola línea aunque sea largo: «Adrián Martínez Navarro» en
   una columna de 250 px se partía en tres renglones y empujaba la tarjeta. */
.my-quote__author strong {
  display: block;
  color: var(--my-white);
  font-weight: 600;
  line-height: 1.25;
}

/* La inicial en un círculo: es lo que distingue una reseña de otra de un
   vistazo, y evita tener que servir la foto de perfil de nadie. */
.my-quote__avatar {
  flex: none;
  width: 2.15rem; height: 2.15rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--my-surface-2);
  border: 1px solid rgba(249, 191, 0, .28);
  color: var(--my-gold);
  font-family: var(--my-font-display);
  font-size: 1.1rem; font-weight: 700; line-height: 1;
}
.my-quote__meta {
  display: block;
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--my-text-dim);
}

.my-quote:hover { border-color: rgba(249, 191, 0, .3); }
.my-quote .my-stars { font-size: .9rem; margin-bottom: .9rem; }


/* ==========================================================================
   18 · RESERVA
   El calendario lo pinta el plugin de reservas, sea cual sea, dentro de un
   iframe que se estiliza él solo.

   No se le imponen estilos por dentro a propósito: cada plugin monta su
   interfaz a su manera y pisarla suele romperla.
   ========================================================================== */

/* Contenedor sin nada visual, a propósito.
 *
 * Llevaba borde y esquinas redondeadas, y se veía un reborde gris alrededor
 * del calendario en las tres páginas donde sale. El motivo: el widget ya se
 * pinta con fondo blanco y 12px de radio, así que nuestro borde quedaba por
 * fuera y, al no coincidir los dos radios, en las esquinas asomaba el fondo
 * oscuro de la página. Dos marcos, uno encima del otro.
 *
 * El widget se enmarca solo. Aquí no hace falta añadir nada. */
.my-booking {
  position: relative;
}

/* Y por si algún día el plugin no se pone borde: los iframes traen uno por
   defecto en varios navegadores. */
.my-booking iframe {
  border: 0;
  display: block;
  max-width: 100%;
}

/* Para plugins con interfaz clara.
 *
 * Muchos calendarios se pintan sobre blanco y no se dejan cambiar sin pelear.
 * Antes que forzarlos a oscuro y arriesgar que algo quede ilegible, se les da
 * un fondo claro y se enmarcan: se lee como una pieza aparte, a propósito. */
.my-booking--claro {
  background: #fff;
  color: #1C1C21;
  padding: .5rem;
}


/* ==========================================================================
   19 · ENTRADA DEL BLOG
   Piezas que solo existen en un artículo. Van aquí y no en un CSS aparte
   porque las comparten todas las entradas.
   ========================================================================== */

/* Imagen de cabecera del artículo. */
.my-post__cover { margin: 0 0 2.5rem; }
.my-post__cover img {
  width: 100%;
  /* Proporción fija: sin ella, una foto vertical ocupa toda la pantalla y
     empuja el texto fuera de la vista. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--my-radius-lg);
  border: 1px solid var(--my-line);
}
.my-post__cover figcaption {
  margin-top: .75rem;
  font-size: .85rem; color: var(--my-text-dim);
}

/* Índice. Solo aparece con tres subtítulos o más. */
.my-toc {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius-lg);
}
.my-toc ol {
  list-style: none; margin: 0; padding: 0;
  counter-reset: toc;
  display: grid; gap: .6rem;
}
.my-toc li { display: flex; gap: .75rem; align-items: baseline; }
.my-toc li::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--my-font-mono); font-size: .8rem;
  color: var(--my-amber); flex: none;
}
.my-toc a { color: var(--my-text); text-decoration: none; }
.my-toc a:hover { color: var(--my-gold); text-decoration: underline; }

/* Ficha del negocio al pie del artículo: contexto para quien llega
   directamente desde una búsqueda y no sabe de quién es esta web. */
.my-post__about {
  margin: 3rem 0 0;
  border-left: 2px solid var(--my-amber);
}

/* Anterior / siguiente. */
.my-post__nav {
  display: grid; gap: var(--my-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--my-line);
}
.my-post__nav-link {
  display: block;
  padding: 1.25rem 1.5rem;
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius-lg);
  text-decoration: none;
  transition: border-color .3s var(--my-ease), transform .3s var(--my-ease);
}
.my-post__nav-link:hover { border-color: var(--my-gold); transform: translateY(-3px); }
.my-post__nav-link span {
  display: block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--my-amber); margin-bottom: .4rem;
}
.my-post__nav-link strong { color: var(--my-white); font-weight: 600; font-size: .975rem; }
.my-post__nav-link--next { text-align: right; }


/* ==========================================================================
   20 · OCASIONES
   Fila compacta de enlaces bajo el bloque de público. Son un «para qué», no un
   «con quién», así que no compiten con las tarjetas de arriba.
   ========================================================================== */

.my-ocasiones {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--my-line);
}
.my-ocasiones__intro {
  font-size: .95rem; color: var(--my-text-dim);
  margin-bottom: 1rem;
}
/* Píldora pulsable: misma caja que la informativa, con estado al pasar. */
.my-chip--link {
  text-decoration: none;
  transition: border-color .25s var(--my-ease), color .25s var(--my-ease);
}
.my-chip--link:hover { border-color: var(--my-gold); color: var(--my-white); }




/* ==========================================================================
   21 · PRECIOS
   Sustituye a la tabla. Cinco filas por dos columnas era mucha superficie para
   un dato que se resume en una frase: cuantos más seáis, menos paga cada uno.
   Aquí cada tamaño de grupo es una celda, y la fila entera cabe de un vistazo.
   ========================================================================== */

.my-precios { margin: 0; }
.my-precios__cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.my-precios__juego {
  font-family: var(--my-font-display); font-size: 1.5rem;
  text-transform: uppercase; color: var(--my-white); margin: 0;
}
.my-precios__desde { font-size: .875rem; color: var(--my-text-dim); margin: 0; }
.my-precios__desde strong {
  font-family: var(--my-font-mono); font-size: 1.25rem; color: var(--my-gold);
}

/* Una celda por tamaño de grupo. Se reparten solas y en móvil bajan a dos por
   fila sin que haya que tocar nada. */
.my-precios__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.my-precios__item {
  text-align: center;
  padding: .85rem .5rem;
  background: var(--my-surface-2);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius);
  transition: border-color .25s var(--my-ease);
}
.my-precios__grupo {
  display: block; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--my-text-dim); margin-bottom: .4rem;
}
/* El número de jugadores es el dato por el que se busca la fila: va más
   grande que la palabra que lo acompaña. */
.my-precios__grupo b {
  font-family: var(--my-font-mono); font-size: 1.05rem; font-weight: 500;
  color: var(--my-text); letter-spacing: 0;
}
.my-precios__persona {
  display: block;
  font-family: var(--my-font-mono); font-size: 1.3rem; font-weight: 500;
  color: var(--my-gold); line-height: 1.2;
}
.my-precios__total {
  display: block; font-size: .72rem; color: var(--my-text-dim); margin-top: .25rem;
}


/* ==========================================================================
   22 · ARTÍCULO CON COLUMNA LATERAL
   Un artículo a 1200 px de ancho deja líneas de más de 100 caracteres, y el
   ojo se pierde al volver al principio del renglón. La columna lateral resuelve
   las dos cosas a la vez: acorta la línea a una medida cómoda y ocupa el hueco
   con algo útil, en vez de dejarlo vacío.
   ========================================================================== */

.my-articulo {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .my-articulo { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* La columna lateral acompaña al scroll: el índice y la llamada a la acción
   siguen a mano cuando el artículo es largo. */
.my-articulo__lado { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .my-articulo__lado { position: sticky; top: 96px; }
}

.my-lado__bloque {
  padding: 1.5rem;
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius-lg);
}
.my-lado__bloque .my-eyebrow { margin-bottom: 1rem; }

/* En la columna lateral el índice pierde su caja: ya la pone el bloque. */
.my-articulo__lado .my-toc {
  margin: 0; padding: 0;
  background: none; border: 0;
}


/* ==========================================================================
   23 · COMPARATIVA DE JUEGOS
   Responde al «¿cuál de los dos?» sin obligar a leerse las dos fichas.
   ========================================================================== */

.my-comparativa { gap: 0; }
.my-comparativa__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.my-comparativa__juego {
  font-family: var(--my-font-display); font-size: 1.6rem;
  text-transform: uppercase; color: var(--my-white); margin: 0;
}

.my-comparativa__lista {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; gap: .75rem;
  flex: 1;
}
.my-comparativa__lista li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .975rem; color: var(--my-text);
}
/* Marca de verificación dibujada con dos bordes: sin icono que cargar. */
.my-comparativa__lista li::before {
  content: "";
  flex: none;
  width: 6px; height: 11px;
  margin-top: .35rem;
  border-right: 2px solid var(--my-gold);
  border-bottom: 2px solid var(--my-gold);
  transform: rotate(45deg);
}
.my-comparativa .my-btn { align-self: flex-start; margin-top: auto; }

/* Campo señuelo del formulario.
 *
 * Fuera de pantalla en vez de `display:none`: algunos robots detectan el
 * `display:none` y se saltan el campo, que es justo lo que no interesa. */
.my-form__trampa {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   24 · VENTANA MODAL
   Para la pasarela del bono regalo, que es externa y va en un iframe.
   ========================================================================== */

.my-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
  background: rgba(7, 7, 10, .82);
  backdrop-filter: blur(6px);
  animation: my-modal-entra .2s var(--my-ease);
}
/* `hidden` por sí solo lo pierde `display:flex`: hay que forzarlo. */
.my-modal[hidden] { display: none; }

@keyframes my-modal-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .my-modal { animation: none; }
}

.my-modal__caja {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 680px;
  height: min(90dvh, 900px);
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius-lg);
  overflow: hidden;
  box-shadow: var(--my-shadow);
}

/* En móvil, a pantalla completa.
 *
 * La pasarela mide más de 1.100 px de alto, así que dentro de un marco de 660
 * hay que desplazarse por dentro del iframe. Eso al tacto se siente mal: el
 * dedo no sabe si arrastra la página o el contenido. Dándole toda la pantalla
 * se reduce ese scroll anidado al mínimo. */
@media (max-width: 640px) {
  .my-modal { padding: 0; }
  .my-modal__caja {
    max-width: none;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

.my-modal__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem .85rem 1.25rem;
  border-bottom: 1px solid var(--my-line);
  background: var(--my-surface-2);
  flex: none;
}
.my-modal__titulo {
  margin: 0;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--my-amber);
}
/* Botón de cerrar.
 *
 * Fondo dorado y aspa negra, no un contorno tenue: es el único mando de la
 * ventana y tiene que verse a la primera. Los colores van explícitos —también
 * el trazo del SVG— porque en el fondo claro de la pasarela algún estilo ajeno
 * lo teñía y el aspa se perdía. */
.my-modal__cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  padding: 0;
  background: var(--my-gold);
  color: var(--my-void);
  border: 0; border-radius: var(--my-radius);
  cursor: pointer;
  transition: background-color .2s var(--my-ease), transform .2s var(--my-ease);
}
.my-modal__cerrar:hover {
  background: var(--my-amber);
  color: var(--my-void);
  transform: scale(1.06);
}
.my-modal__cerrar svg {
  width: 18px; height: 18px;
  stroke: var(--my-void);
  stroke-width: 2.5;
  fill: none;
}

/* La pasarela se pinta sobre blanco y no se deja cambiar: se le da fondo claro
   en vez de forzarla a oscuro y arriesgar que algo quede ilegible. */
.my-modal__marco {
  flex: 1;
  width: 100%; border: 0;
  background: #fff;
  display: block;
}

/* Con la ventana abierta, la página de detrás no se desplaza. */
body.my-modal-abierta { overflow: hidden; }

/* El botón del bono lleva el icono de regalo delante. */
.my .my-btn svg { width: 18px; height: 18px; flex: none; }


/* Flecha del botón que baja al calendario.
 *
 * Un vaivén muy corto: lo justo para leerse como «esto te lleva ahí abajo»
 * sin convertirse en un adorno que distraiga. */
.my-btn svg:last-child { animation: my-apunta 2.4s ease-in-out infinite; }

@keyframes my-apunta {
  0%, 60%, 100% { transform: translateY(0); }
  75%           { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .my-btn svg:last-child { animation: none; }
}

/* ==========================================================================
   20 · BUSCADOR
   Sale en el 404 y en la página de resultados. El marcado está en
   searchform.php, que WordPress usa solo en cuanto el archivo existe.
   ========================================================================== */

.my-search {
  display: flex;
  gap: .75rem;
  max-width: 520px;
  margin-inline: auto;
}

.my-search__campo {
  flex: 1;
  min-width: 0;                      /* si no, el input desborda el flex */
  padding: .85rem 1.1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--my-white);
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  border-radius: var(--my-radius);
}

.my-search__campo::placeholder { color: var(--my-text-dim); }

.my-search__campo:focus-visible {
  outline: 2px solid var(--my-gold);
  outline-offset: 2px;
  border-color: var(--my-gold);
}

/* La X que Chrome mete en los input de tipo search: se pinta oscura sobre
   fondo oscuro y no se ve. */
.my-search__campo::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

.my-search__btn { flex: none; }
.my-search__btn svg { width: 18px; height: 18px; }

/* En móvil el botón cabe justo, y «Buscar» al lado de la lupa lo desborda.
   La lupa sola se entiende igual y el texto sigue ahí para los lectores. */
@media (max-width: 480px) {
  .my-search__btn span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}


/* ==========================================================================
   21 · PÁGINA 404
   Solo la cabecera: las salidas, los planes y el blog reutilizan las tarjetas
   y las fichas que ya existen.
   ========================================================================== */

/* ── El 404 ────────────────────────────────────────────────────────────────
   Usa el héroe estándar —de ahí le vienen el velo y el relleno, que es lo que
   le faltaba y lo que lo hacía parecer de otra web— pero por dentro se compone
   centrado, no a la izquierda como las páginas normales.

   Aquí el centrado sí tiene sentido: no hay nada que leer en orden, hay un
   golpe visual y cuatro salidas. En una página de contenido sería un estorbo. */
.my-404 .my-hero__inner {
  max-width: none;
  text-align: center;
}

/* Los párrafos vuelven a centrarse. Los selectores van dobles a propósito:
   `.my-tpl p` fija `margin: 0 0 1.15em` y, al ganar por especificidad, se
   llevaba por delante el `auto` que centra. */
.my-404 .my-hero__sub,
.my-404 .my-404__pista { margin-inline: auto; }

.my-404 .my-hero__sub { max-width: 46ch; }
.my-404 .my-404__pista { max-width: 52ch; margin-top: 1rem; }

/* El número, a tamaño de cartel. Es el elemento con el que se topa quien llega:
   que se vea de lejos y se entienda antes de leer nada. */
.my-404 .my-404__codigo {
  font-family: var(--my-font-display, var(--my-font-mono));
  font-size: clamp(7rem, 26vw, 17rem);
  line-height: .78;
  letter-spacing: -.02em;
  margin: 0 0 .2rem;
  color: transparent;
  -webkit-text-stroke: 3px var(--my-line-soft);
}

/* «Error 404» también sube de tamaño: acompaña al número en vez de ser una
   etiqueta perdida encima del titular. */
.my-404 .my-hero__kicker {
  font-size: clamp(1rem, .8rem + .9vw, 1.5rem);
  letter-spacing: .38em;
  margin-bottom: .9rem;
}

/* El titular, un escalón por encima del de una página normal. */
.my-404 h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); }

.my-404 .my-404__buscador { display: flex; justify-content: center; }
.my-404 .my-404__buscador .my-search { margin-inline: auto; }


/* Una tarjeta que es un enlace entero.
 *
 * `.my-card--hover` ya trae el realce; esto solo evita que el texto salga
 * subrayado y azul por ser un <a>, y mantiene la tarjeta como bloque. */
a.my-card { display: block; text-decoration: none; color: inherit; }
a.my-card:hover .my-card__title { color: var(--my-gold); }

/* El párrafo de «cómo llegar». Tenía el margen en línea en la plantilla. */
.my-location__intro { margin-bottom: 2rem; }

/* Separación estándar entre un encabezado de sección y su rejilla. Estaba
   escrita como `style="margin-top:3rem"` en cada plantilla. */
.my-grid--sep { margin-top: 3rem; }

.my-404__buscador { margin-top: 2.5rem; }

/* Tarjeta compacta: la de los bloques de navegación, con el título un punto
   más pequeño y sin margen bajo el texto. Eran dos estilos en línea por
   tarjeta. */
.my-card--compacta .my-card__title { font-size: 1.1rem; }
.my-card--compacta .my-card__text { margin-bottom: 0; }
.my-bloque--sep { margin-top: 2rem; }

/* La marca a la que pertenece un juego, cuando no es el nuestro. Va debajo del
   título y en pequeño: identifica sin competir con el nombre de la sala. */
.my-card__marca {
  font-family: var(--my-font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--my-gold);
  margin: -.35rem 0 .6rem;
}

/* El pie de una tarjeta cuya reserva es de otra marca: ocupa el sitio del
   precio, para que la fila no baile de altura entre unas tarjetas y otras. */
.my-precio--otro strong { color: var(--my-text); }


/* -------------------------------------------------------------------------
 * Premios
 *
 * Una sola fila, siempre. Son seis ediciones SEGUIDAS del mismo premio, y
 * partirlas en dos filas —o meter cada una en su caja— cuenta seis cosas
 * sueltas en lugar de una racha.
 *
 * Por eso las medallas encogen en vez de envolverse: `flex: 0 1` con un ancho
 * base y `min-width: 0` deja que la fila se estreche en el móvil sin romperse.
 * ---------------------------------------------------------------------- */

/* La fila va sobre un escenario: un resplandor ancho detrás y una línea de oro
   que la sostiene. Sin él, seis PNG en gris sobre un fondo negro parecen un pie
   de página de logotipos; con él, la sección pesa lo que tiene que pesar.

   El resplandor funde hacia el MISMO oro con alfa 0, nunca hacia `transparent`:
   eso último interpola hacia el negro y deja una bruma gris. */
.my-premios {
	list-style: none;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.75rem) 0 0;
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(.75rem, 2.5vw, 2.5rem);
}
.my-premios::before {
	content: "";
	position: absolute;
	left: 50%; top: 10%;
	width: min(900px, 100%); height: 85%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(249, 191, 0, .13), rgba(249, 191, 0, 0) 70%);
	pointer-events: none;
}
/* La línea de oro que sostiene la fila, desvanecida por los extremos. */
.my-premios::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -1.5rem;
	width: min(720px, 90%); height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(249, 191, 0, 0), rgba(249, 191, 0, .45), rgba(249, 191, 0, 0));
	pointer-events: none;
}

.my-premio {
	position: relative;
	flex: 0 1 8.5rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
	text-align: center;
}

/* La peana de cada medalla.

   Existe para poder poner algo DETRÁS del PNG —el resplandor— sin tocar la
   imagen, y para que el apagado y el encendido ocurran sobre un elemento que
   ocupa sitio fijo: animar la imagen sola movía la fila entera al pasar el
   ratón. */
.my-premio__medalla {
	position: relative;
	display: block;
	width: 100%;
	transition: transform .45s var(--my-ease);
}

/* El resplandor dorado. Apagado hasta que alguien se acerca.

   Es un degradado radial hacia el MISMO oro con alfa 0, no hacia
   `transparent`: fundir a transparente se va hacia el negro y sobre el fondo
   azulado deja una bruma gris en vez de un halo. */
.my-premio__medalla::before {
	content: "";
	position: absolute;
	inset: -22%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(249, 191, 0, .38), rgba(249, 191, 0, 0) 68%);
	opacity: 0;
	transition: opacity .45s var(--my-ease);
	pointer-events: none;
}

/* Las medallas van en gris y se encienden de una en una.

   Seis medallas doradas a la vez compiten con el oro de la marca y la fila se
   vuelve ruido. En gris cuentan lo que importa de un vistazo —son seis, son
   seguidas— y el color se gana al mirarlas. */
.my-premio img {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	filter: grayscale(1) brightness(.85);
	opacity: .78;
	transition: filter .45s var(--my-ease), opacity .45s var(--my-ease);
}

.my-premio:hover .my-premio__medalla,
.my-premio:focus-within .my-premio__medalla {
	transform: translateY(-8px) scale(1.07);
}
.my-premio:hover .my-premio__medalla::before,
.my-premio:focus-within .my-premio__medalla::before {
	opacity: 1;
}
.my-premio:hover img,
.my-premio:focus-within img {
	filter: none;
	opacity: 1;
}

.my-premio__ano {
	font-family: var(--my-font-mono);
	font-size: .8125rem;
	letter-spacing: .08em;
	color: var(--my-text-dim);
	font-variant-numeric: tabular-nums;
	transition: color .45s var(--my-ease);
}
.my-premio:hover .my-premio__ano,
.my-premio:focus-within .my-premio__ano {
	color: var(--my-gold);
}

/* Al pasar el ratón por la fila, las demás se apagan un poco: es lo que hace
   que la que miras parezca encenderse de verdad y no solo crecer. */
.my-premios:hover .my-premio:not(:hover) img {
	opacity: .45;
}

/* En el móvil, DOS FILAS DE TRES en vez de seis apretadas.

   La fila cabía siempre porque las medallas encogían, y a 375 px eso son seis
   discos de 45 px: no se distingue qué son ni se lee el «TOP ROOM» de dentro.
   Partidas en dos filas miden el doble y siguen contando lo mismo, que son
   seis y seguidas. */
@media (max-width: 560px) {
	.my-premios {
		flex-wrap: wrap;
		gap: 1.25rem .75rem;
	}
	.my-premio { flex: 0 1 27%; }
	.my-premios::after { bottom: -1rem; }
}

/* Quien pidió menos movimiento se queda con el color y el apagado —que son
   información— y sin el salto ni la escala. */
@media (prefers-reduced-motion: reduce) {
	.my-premio__medalla,
	.my-premio img,
	.my-premio__ano { transition: none; }
	.my-premio:hover .my-premio__medalla,
	.my-premio:focus-within .my-premio__medalla { transform: none; }
}