/* ==========================================================================
   Mythos — Primitivas globales

   Se carga en TODO el sitio, porque la cabecera y el pie lo necesitan.

   Por eso aquí NO hay tipografía de contenido: si estas reglas cambiaran los
   h1/h2/p, reescribirían de golpe las diez páginas que siguen hechas con
   Elementor. Eso vive en pages.css, que solo se carga en nuestras plantillas.

   Regla al añadir algo aquí: pregúntate si puede romper una página de
   Elementor. Si la respuesta no es un no rotundo, va en pages.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Margen de aterrizaje para las anclas.
 *
 * La cabecera es pegajosa y mide 76 px, así que al saltar a un #ancla el título
 * de destino quedaba justo debajo, tapado. `scroll-margin-top` le dice al
 * navegador dónde parar de verdad. Va en todo lo que tenga id, para que valga
 * también para los que vengan. */
[id] { scroll-margin-top: 100px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body.my { margin: 0; }

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

/* --- Contenedor --------------------------------------------------------- */

.my-wrap {
  width: min(100% - 2.5rem, var(--my-max));
  margin-inline: auto;
}


/* ==========================================================================
   1 · REJILLA
   Sustituye a las seis definiciones repetidas de `repeat(auto-fit, minmax(…))`.
   El ancho mínimo de columna se controla con --min; los modificadores solo lo
   cambian. `min(100%, …)` evita que desborde en móvil.
   ========================================================================== */

.my-grid {
  display: grid;
  gap: var(--my-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr));
}
.my-grid--2 { --min: 340px; }   /* dos columnas: juegos, ubicación */
.my-grid--3 { --min: 280px; }   /* tres: opiniones */
.my-grid--blog { --min: 330px; } /* entradas: necesitan más ancho para que el
                                     texto no se corte en líneas cortísimas */
.my-grid--4 { --min: 220px; }   /* cuatro: pasos, público, cifras */

/* Cuatro elementos que no caben en cuatro columnas.
 *
 * `auto-fit` mete tres y deja el cuarto solo en la segunda fila, que es justo
 * lo que peor se ve. Entre 560 y 1100px pasa siempre, porque cuatro columnas
 * de 220px más los huecos necesitan más de 1000px de contenedor. Dos filas de
 * dos quedan equilibradas y las tarjetas respiran más. */
@media (min-width: 561px) and (max-width: 1099px) {
  .my-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Un solo elemento en la rejilla.
 *
 * `auto-fit` colapsa las columnas vacías, así que una tarjeta sola se estiraba
 * a lo ancho de toda la fila y salía como una caja enorme. En vez de cambiar a
 * `auto-fill` —que deja las tarjetas más pequeñas de lo debido cuando sí están
 * todas— se limita el caso concreto: si solo hay una, conserva el tamaño de
 * una tarjeta normal y se centra. */
.my-grid > :only-child {
  max-width: 560px;
  margin-inline: auto;
}

/* Columna simple con separación uniforme. */
.my-stack { display: grid; gap: var(--my-gap); }


/* --- Botones ------------------------------------------------------------ */

/* Especificidad (0,2,0) a propósito: `.my-nav a` y `.my-footer a` son (0,1,1)
   y le ganarían a un `.my-btn` suelto, dejando el texto del botón del color
   del menú sobre el fondo dorado. */
.my .my-btn {
  --btn-bg: var(--my-gold);
  --btn-fg: var(--my-void);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 2rem;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--my-font-body);
  font-size: .9rem;
  font-weight: 600;
  /* Explícito: <button> y <a> heredan la altura de línea de forma distinta, y
     sin fijarla un botón salía 9 px más alto que el enlace de al lado. */
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--btn-bg);
  border-radius: var(--my-radius);
  cursor: pointer;
  transition: transform .25s var(--my-ease), box-shadow .25s var(--my-ease), background-color .25s var(--my-ease);
}
.my .my-btn:hover {
  color: var(--btn-fg);
  background: var(--my-amber);
  border-color: var(--my-amber);
  transform: translateY(-2px);
  box-shadow: var(--my-glow);
}
.my .my-btn:active { transform: translateY(0); }

.my .my-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--my-white);
  border-color: var(--my-line);
}
.my .my-btn--ghost:hover {
  background: var(--my-gold-dim);
  border-color: var(--my-gold);
  color: var(--my-white);
  box-shadow: none;
}

/* WhatsApp.
 *
 * Es una VARIANTE del botón, no otro botón: misma caja, mismo tipo, mismo
 * comportamiento. Solo cambian el color y el logotipo, que son de marca ajena
 * y por eso se respetan tal cual. */
.my .my-btn--whatsapp {
  --btn-bg: var(--my-whatsapp);
  --btn-fg: var(--my-white);
  border-color: var(--my-whatsapp);
}
.my .my-btn--whatsapp:hover {
  background: var(--my-whatsapp-dark);
  border-color: var(--my-whatsapp-dark);
  color: var(--my-white);
  box-shadow: 0 0 0 1px rgba(37, 211, 102, .3), 0 12px 40px -12px rgba(37, 211, 102, .35);
}
.my .my-btn--whatsapp svg { width: 20px; height: 20px; flex: none; }


/* --- Utilidades --------------------------------------------------------- */

.my-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.my .my-skip {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--my-gold); color: var(--my-void);
  font-weight: 600; text-decoration: none;
}
.my .my-skip:focus { top: 1rem; }