/* Reset acotado, tipografías y utilidades compartidas por las dos páginas. */

/* Las tres familias vienen del propio archivo de Figma y se sirven desde el
   tema: ninguna depende de Google Fonts, así el sitio no filtra visitas a un
   tercero ni queda sin tipografía si ese dominio está bloqueado. */
@font-face {
  font-family: 'Phonk';
  src: url('../fonts/phonk.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Rock Salt';
  src: url('../fonts/rock-salt.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
/* Inter es variable: un solo archivo por subset cubre de 100 a 900, por eso
   hay dos @font-face y no diez. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

/* WordPress envuelve la salida del tema en .wp-site-blocks y le aplica su propio
   layout: un margen entre hijos y, según la configuración, un ancho máximo con
   relleno lateral. Las secciones de este tema van a sangre y manejan su ancho con
   .fr-container, así que ese envoltorio tiene que ser transparente: sin márgenes,
   sin tope de ancho y sin relleno. */
.wp-site-blocks {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
.wp-site-blocks > *,
.wp-site-blocks > * + * {
  margin-block-start: 0;
  margin-block-end: 0;
  max-width: none;
}

html {
  -webkit-text-size-adjust: 100%;
  /* El header es sticky: sin este margen, al saltar a #planes o #actividades el
     título de la sección queda tapado por la barra. Se suma un respiro para que
     la sección no arranque pegada al borde del header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

/* Desplazamiento suave para los saltos entre secciones.
   Va directo sobre `html`: la variante con `:focus-within` depende de que el
   enlace reciba el foco al hacer clic, y eso no pasa en todos los navegadores
   (Safari, por ejemplo, no se lo da), así que en varios el suavizado no llegaba
   a aplicarse nunca.
   El caso del salto inicial —entrar con una URL que ya trae #planes— lo maneja
   nav.js, que desactiva el suavizado hasta que la página termina de cargar.
   El bloque de prefers-reduced-motion de más abajo lo anula para quien haya
   pedido menos movimiento. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* height:auto es imprescindible, no decorativo: las imágenes llevan los
   atributos width y height del HTML (para que el navegador reserve el espacio y
   la página no salte al cargar), y sin esto esa altura queda fija y pisa
   cualquier aspect-ratio que se defina después. */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* El rojo al pasar el puntero es para los enlaces de texto, no para los botones:
   un botón rojo con la letra roja se vuelve ilegible.
   Esta regla vivía en theme.json, pero de ahí WordPress la emite como
   `a:hover` global y alcanzaba también a los botones, que son enlaces. */
a:not(.fr-btn):hover { color: var(--accent); }
button { font: inherit; }

/* Un solo anillo de foco para todo el sitio, siempre visible sobre negro. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-check);
}

/* Quien navegue con "reducir movimiento" activado no debería recibir el
   carrusel automático ni las sílabas animadas del banner. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* --container son los 1280 px de CONTENIDO del Figma, no el ancho de la caja.
   Con box-sizing: border-box un max-width de 1280 dejaría 1184 útiles una vez
   descontados los márgenes laterales, así que el gutter se suma al tope: a
   1440 px de ventana el contenido va de x=80 a x=1360, igual que en el archivo
   de diseño. */
.fr-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.fr-section { padding-block: var(--section-y); }

/* Visible solo para lectores de pantalla. */
.fr-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: fuera de pantalla hasta que recibe foco por teclado. */
.fr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--text-on-magenta);
  padding: 12px 24px;
  font-weight: 600;
}
.fr-skip-link:focus { left: 0; }

/* Título de sección: display en caja alta con una palabra manuscrita al lado.
   En móvil la manuscrita baja a su propia línea porque a 390px no entra. */
.fr-section-title {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
/* El punto de «Fit Republic.».
   Phonk lo dibuja como un rectángulo y la identidad de la marca lo quiere redondo,
   como en el logotipo. Inter en su peso más alto tiene el punto circular y ya está
   cargada, así que no hace falta una fuente más: se cambia solo ese carácter, que
   el PHP envuelve en un <span> (ver fr_punto_marca()). El tamaño está calculado
   para que el círculo mida lo mismo de alto que el cuadrado de Phonk: 36/39 de su
   cuerpo. */
.fr-punto {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.92em;
  letter-spacing: 0;
}

.fr-section-title .script {
  font-family: var(--font-script);
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
  /* Rock Salt tiene una caja muy alta; sin esto el interlineado se dispara. */
  line-height: 1;
  display: inline-block;
}
.fr-section-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  margin-top: var(--space-3);
}

.fr-section-head { text-align: center; margin-bottom: var(--space-6); }
.fr-section-head .fr-section-subtitle { color: var(--republic-white); }

/* Textura de graffiti de la marca. Se usa como fondo repetido y muy tenue en
   las franjas oscuras; queda detrás de todo y nunca intercepta clics. */
.fr-graffiti-bg { position: relative; isolation: isolate; }
.fr-graffiti-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--graffiti-url);
  background-size: 900px;
  background-repeat: repeat;
  opacity: 0.08;
  pointer-events: none;
}

/* --- Páginas sueltas del editor ------------------------------------------- */

/* Una página que no arma el tema —condiciones de reserva, y mañana preguntas
   frecuentes o bases y condiciones— sale del editor de bloques con etiquetas
   desnudas, y el reset de arriba las deja sin aire, sin viñeta y sin jerarquía: un
   muro de texto. Acá se les devuelve lo mínimo para que se lean.

   Va atado a `.fr-prosa`, la clase que `templates/page.html` le pone al contenido, y
   no a `main` ni a la etiqueta suelta: así no se mete con las secciones que arma el
   tema, que tienen su propio tratamiento y conviven con estas en la misma página. */
.fr-prosa { color: var(--text-body); }
.fr-prosa > * + * { margin-top: var(--space-4); }
.fr-prosa p { font-size: var(--text-body-lg); line-height: 1.6; text-wrap: pretty; }

/* El título de sección ya lo pone la plantilla con `.fr-section-title`, así que acá el
   primer nivel que aparece es el `h2`. Va en la familia de titulares y en caja alta,
   como el resto del sitio. */
.fr-prosa h2 {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.fr-prosa h3 {
  margin-top: var(--space-5);
  font-size: var(--text-body-lg);
  font-weight: 700;
}
.fr-prosa h2:first-child,
.fr-prosa h3:first-child { margin-top: 0; }

/* `list-style: none` del reset: hay que devolver la viñeta y la sangría, porque acá la
   lista es una enumeración de verdad y no una fila de tarjetas. */
.fr-prosa ul,
.fr-prosa ol {
  padding-left: 1.25em;
  list-style: disc;
}
.fr-prosa ol { list-style: decimal; }
.fr-prosa li { font-size: var(--text-body-lg); line-height: 1.6; }
.fr-prosa li + li { margin-top: var(--space-2); }

.fr-prosa strong { color: var(--republic-white); }
.fr-prosa a {
  color: var(--accent-luz);
  text-decoration: underline;
}
.fr-prosa a:hover { color: var(--republic-white); }

/* El `code` del ejemplo de contraseña: se lee como algo para copiar tal cual. */
.fr-prosa code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--concrete-raised, rgba(255, 255, 255, 0.08));
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* En el teléfono el cuerpo baja un escalón: a 18 px el renglón de esta página entra en
   muy pocas palabras y se lee peor que a 16. */
@media (max-width: 560px) {
  .fr-prosa p,
  .fr-prosa li { font-size: var(--text-body-md); }
}