/*
 * Componentes globales. Las reglas de .fr-btn, .fr-field, .fr-input y .fr-check
 * son las del design system del Figma, traducidas de React a CSS plano: mismos
 * nombres de clase, mismas medidas, mismos estados.
 */

/* --- Botón --------------------------------------------------------------- */

.fr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  /* Nunca más ancho que donde vive, y con permiso para cortar el renglón.
     `white-space: nowrap` con alto fijo era una combinación sin salida: un botón de
     etiqueta larga en una pantalla angosta no tenía cómo entrar y se salía del
     contenedor —el de «Condiciones de reserva de clases» se iba 15 px a 390—.

     Cortar no cambia nada en los botones que ya entraban: un `inline-flex` se mide por
     su contenido, así que mientras haya lugar sigue en un renglón. El corte aparece solo
     cuando la alternativa era desbordar. */
  max-width: 100%;
  white-space: normal;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background var(--dur-rapida) var(--ease-suave), color var(--dur-rapida) var(--ease-suave),
    transform var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}
.fr-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* El alto va fijo, y **no** como `min-height`. Lo intenté al revés pensando en el botón
   que corta en dos renglones, y rompió algo que no se ve venir: el encabezado le pone
   `height: 32px` a su botón en móvil, y `min-height` siempre le gana a `height`, así que
   el de «Preventa» pasó de 32 a 40 px sin que nadie lo pidiera.

   Con alto fijo no hace falta: dos renglones de un `--lg` miden unos 42 px y entran en
   los 48. Solo una etiqueta de tres renglones se saldría, y a esa altura el problema es
   la etiqueta. */
.fr-btn--sm { height: 32px; padding: 0 16px; font-size: 12px; }
.fr-btn--md { height: 40px; padding: 0 22px; font-size: 13px; }
.fr-btn--lg { height: 48px; padding: 0 30px; font-size: 14px; }

/* Cada variante declara su color también en :hover. No es redundante: WordPress y
   varios plugins meten un `a:hover { color }` global, y como los botones son
   enlaces, sin esto la letra se les tiñe al pasar el puntero. */
.fr-btn--primary { background: var(--accent); color: var(--text-on-magenta); }
.fr-btn--primary:hover:not(:disabled),
.fr-btn--primary:focus-visible {
  background: var(--accent-luz);
  color: var(--text-on-magenta);
}

.fr-btn--outline { border-color: var(--republic-white); color: var(--republic-white); }
.fr-btn--outline:hover:not(:disabled),
.fr-btn--outline:focus-visible {
  background: var(--republic-white);
  color: var(--republic-black);
}

.fr-btn--ghost { color: var(--republic-white); }
.fr-btn--ghost:hover:not(:disabled),
.fr-btn--ghost:focus-visible {
  background: var(--concrete-grey);
  color: var(--republic-white);
}

.fr-btn--block { width: 100%; }

/* Profundidad al pasar el puntero: el botón se despega del fondo sobre una sombra
   de su propio color. Es la idea del halo de las tarjetas de planes, más
   contenida, porque un botón es chico y se repite mucho. Va dentro de
   (hover: hover) para que en pantallas táctiles el botón no quede "levantado"
   después de tocarlo. */
@media (hover: hover) {
  .fr-btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(221, 7, 7, 0.7);
  }
  .fr-btn--outline:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(242, 242, 242, 0.35);
  }
  .fr-btn--ghost:hover:not(:disabled) { transform: translateY(-1px); }
}

/* Con foco de teclado se suma el halo sin perder el anillo: la regla general de
   foco (base.css) también usa box-shadow, y sin repetirlo acá esta la pisaría. */
.fr-btn--primary:focus-visible { box-shadow: var(--focus-ring), 0 10px 24px -8px rgba(221, 7, 7, 0.7); }
.fr-btn--outline:focus-visible { box-shadow: var(--focus-ring), 0 10px 24px -10px rgba(242, 242, 242, 0.35); }

/* Al apretar vuelve a apoyarse: es la respuesta física del clic. Va después del
   hover para ganarle con la misma especificidad. */
.fr-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.fr-btn--primary:active:not(:disabled) { background: var(--accent-hover); }

@media (prefers-reduced-motion: reduce) {
  .fr-btn:hover:not(:disabled) { transform: none; }
}

/* --- Campos de formulario ------------------------------------------------ */

.fr-field { display: grid; gap: var(--space-2); font-family: var(--font-body); }

.fr-label {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-body);
}

.fr-input {
  width: 100%;
  height: 44px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  padding: 0 14px;
  outline: none;
  transition: border-color var(--dur-rapida) var(--ease-suave);
}
.fr-input::placeholder { color: var(--text-secondary); }
.fr-input:focus { border-color: var(--accent); }
.fr-input:disabled { opacity: 0.4; }

textarea.fr-input {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  line-height: var(--lh-body);
  min-height: 120px;
}
select.fr-input { cursor: pointer; }

/* Estado de error: lo pone el JS de validación y también PHP cuando el envío
   vuelve del servidor con campos rechazados. */
.fr-input--error { border-color: var(--error); }
.fr-error { font-size: var(--text-caption); color: var(--error); }

/* --- Chips y badges ------------------------------------------------------ */

.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--text-body-sm);
  color: var(--republic-white);
}

.fr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.fr-badge--accent { background: var(--accent); color: var(--text-on-magenta); }
.fr-badge--outline { border: 1px solid var(--accent); color: var(--accent); }
/* En gris, para lo que todavía no está disponible: el rojo es de lo que sí se puede
   hacer ahora y dos etiquetas rojas compitiendo confunden. */
.fr-badge--apagado { background: var(--steel); color: var(--text-body); }

/* El punto del badge "cupos limitados" parpadea con steps(1) para que sea un
   encendido/apagado seco, no un fundido. */
.fr-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: fr-flick 1s steps(1, end) infinite;
}
@keyframes fr-flick { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

/* --- Header -------------------------------------------------------------- */

.fr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
}
.fr-header__inner {
  /* Mismo criterio que .fr-container: el tope incluye los márgenes para que el
     logo quede alineado con el contenido de las secciones de abajo. */
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* 20px de alto es lo que mide el logotipo en el Figma (unos 245 px de ancho). El
   archivo está recortado a su contenido, sin margen transparente, así que esta
   altura es la del dibujo y no la de una caja con aire alrededor.

   El tamaño escala con el ancho de la ventana en vez de saltar en un breakpoint:
   el logotipo es muy apaisado —doce veces más ancho que alto—, así que en un
   teléfono angosto unos pocos píxeles de altura de más lo dejan empujando al
   botón y a la hamburguesa fuera de sitio. */
.fr-header__logo { flex-shrink: 1; min-width: 0; display: flex; align-items: center; }
.fr-header__logo img { height: clamp(11px, 3.4vw, 20px); width: auto; }

.fr-header__nav { display: flex; align-items: center; gap: var(--space-5); }
.fr-header__nav a {
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: color var(--dur-rapida) var(--ease-suave);
}
.fr-header__nav a:hover { color: var(--accent); }
.fr-header__nav a[aria-current="page"] { color: var(--accent); }

.fr-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Botón hamburguesa: solo existe en móvil, ver más abajo. */
.fr-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--republic-white);
  cursor: pointer;
}
/* La barra es .fr-burger__barra y no "span" a secas: el botón lleva además un
   segundo span con el texto para lectores de pantalla, y una regla por elemento
   también lo pintaba como barra — con su texto dentro, salía más larga que las
   otras dos. */
.fr-burger__barra {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--dur-rapida) var(--ease-suave);
}
.fr-burger__barra::before,
.fr-burger__barra::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-media) var(--ease-out);
}
.fr-burger__barra::before { top: -7px; }
.fr-burger__barra::after { top: 7px; }

/* Con el panel abierto la hamburguesa se convierte en una X. */
.fr-burger[aria-expanded="true"] .fr-burger__barra { background: transparent; }
.fr-burger[aria-expanded="true"] .fr-burger__barra::before { transform: translateY(7px) rotate(45deg); }
.fr-burger[aria-expanded="true"] .fr-burger__barra::after { transform: translateY(-7px) rotate(-45deg); }

/* En un teléfono angosto el encabezado tiene que meter logotipo, botón y
   hamburguesa en 320 px. Con las medidas de escritorio no entran y el botón se
   sale de la pantalla, así que acá se aprieta todo: el logotipo se limita por
   ancho —no por alto, que es lo que engaña con un dibujo tan apaisado—, el botón
   baja al tamaño chico y la hamburguesa se angosta. */
@media (max-width: 600px) {
  .fr-header__inner { gap: var(--space-3); }
  .fr-header__logo img {
    height: auto;
    max-height: 16px;
    max-width: 42vw;
  }
  .fr-header__actions { gap: var(--space-2); }
  .fr-header__actions .fr-btn { height: 32px; padding: 0 14px; font-size: 11px; }
  .fr-burger { width: 38px; }
}

@media (max-width: 900px) {
  .fr-burger { display: inline-flex; }

  /* El menú móvil se despliega bajo el header, a lo ancho.
     Se muestra y oculta con display, no encogiendo una altura: las variantes
     con grid-template-rows o max-height dependen de cuánto mida el contenido y
     ya dieron problemas acá (grid-template-rows solo encoge la primera fila, de
     modo que el segundo enlace quedaba visible con el menú cerrado). Con
     display no hay altura que calcular y el resultado no cambia si mañana se
     agrega un tercer enlace. La entrada se anima aparte, con opacidad. */
  .fr-header__nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    background: var(--black-soft);
    border-bottom: 1px solid var(--border-default);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .fr-header__nav[data-abierto="true"] {
    display: block;
    animation: fr-desplegar 180ms ease-out;
  }
  .fr-header__nav a {
    display: block;
    padding: var(--space-4) var(--gutter);
    border-top: 1px solid var(--steel);
  }
}

@keyframes fr-desplegar {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* --- Sponsors y footer --------------------------------------------------- */

.fr-marcas {
  background: var(--concrete-raised);
  padding-block: var(--space-4);
}
.fr-marcas__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.fr-marcas__label {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--republic-white);
}
/* Los logos se igualan por altura visual, no por caja: el cuadrado de Itaú y la
   franja apaisada de adidas se verían de tamaños muy distintos si ambos usaran
   la misma altura.

   Nota sobre los nombres: esta sección se llama "marcas" y no "sponsors", y los
   archivos son marca-itau.png / marca-adidas.png. No es capricho — los
   bloqueadores de publicidad traen reglas genéricas contra clases y rutas que
   contienen "sponsor", y con los nombres anteriores los logos no llegaban a
   cargar en los navegadores que tienen uno instalado. */
.fr-marcas__logo { height: 44px; width: auto; object-fit: contain; }
.fr-marcas__logo--ancho { height: 30px; }

/* En el teléfono el rótulo va arriba y centrado, con los dos logos juntos debajo: en
   una sola línea los tres elementos quedan apretados. El rótulo ocupa el renglón
   entero y la envoltura —que ya era `wrap`— manda los logos al siguiente, donde el
   `justify-content: center` los deja centrados. */
@media (max-width: 720px) {
  .fr-marcas__inner { gap: var(--space-4) var(--space-6); }
  .fr-marcas__label { flex-basis: 100%; text-align: center; }
}

.fr-footer { background: var(--republic-black); padding-block: var(--space-7); }
.fr-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.fr-footer__mark { width: 46px; height: auto; margin-bottom: var(--space-4); }
.fr-footer__slogan { color: var(--text-secondary); font-size: var(--text-body-sm); }
.fr-footer__col-title {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.fr-footer__links { display: grid; gap: var(--space-3); font-size: var(--text-body-sm); }
.fr-footer__links a:hover { color: var(--accent); }
.fr-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
/* Acá el copyright va centrado y termina a más de 500 px de la burbuja flotante, así
   que no hace falta reservarle un hueco: hacerlo solo lo descentraría. En el tema
   institucional sí se reserva, porque ahí las redes van a la derecha de esa misma fila
   y la burbuja se les montaba encima. */
.fr-footer__social a { color: var(--republic-white); }
.fr-footer__social a:hover { color: var(--accent); }
.fr-footer__bottom {
  border-top: 1px solid var(--steel);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}

@media (max-width: 720px) {
  .fr-footer__inner { flex-direction: column; gap: var(--space-5); }
  .fr-footer__bottom { text-align: left; }
}

/* --- Botón flotante de WhatsApp ------------------------------------------- */

.fr-wa {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  background: var(--republic-white);
  color: var(--republic-black);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
  transition: transform var(--dur-rapida) var(--ease-suave), background-color var(--dur-rapida) var(--ease-suave);
}
.fr-wa:hover { background: #fff; transform: translateY(-2px); }
.fr-wa:focus-visible { box-shadow: var(--focus-ring); outline: none; }

@media (prefers-reduced-motion: reduce) {
  .fr-wa { transition: none; }
  .fr-wa:hover { transform: none; }
}

@media print {
  .fr-wa { display: none; }
}

/* --- Entrada al aparecer en pantalla --------------------------------------- */

/* Los elementos con data-fr-revelar arrancan invisibles y entran cuando llegan a
   la pantalla (revelar.js les pone .is-visible). Todo depende de la clase fr-js
   en <html>, que se agrega en el <head>: sin JavaScript no se esconde nada.

   Se anima con `translate` y `scale`, no con `transform`, a propósito: son
   propiedades independientes que se suman al transform que el elemento ya tenga
   (el hover de los planes, la rotación de las fotos) en lugar de pisarlo.

   El relleno es "backwards": aplica el estado inicial durante la demora
   escalonada y, al terminar, suelta el elemento. Con "both" quedaría fijado en
   el estado final y anularía cualquier hover que use las mismas propiedades. */
.fr-js [data-fr-revelar]:not(.is-visible) { opacity: 0; }

.fr-js [data-fr-revelar].is-visible {
  animation: fr-revelar-arriba 800ms var(--ease-out) var(--fr-retraso, 0ms) backwards;
}
.fr-js [data-fr-revelar="imagen"].is-visible {
  animation-name: fr-revelar-imagen;
  animation-duration: 1100ms;
}

@keyframes fr-revelar-arriba {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fr-revelar-imagen {
  from { opacity: 0; scale: 1.04; }
  to { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-js [data-fr-revelar]:not(.is-visible) { opacity: 1; }
}

/* Variantes de dirección. La de abajo es la de siempre; las laterales hacen que
   no todo entre igual: el texto del hero desde la izquierda, el carrusel desde la
   derecha, los dos planes uno desde cada lado, una fila de tarjetas de a una
   desde el costado. El recorrido lateral es mayor que el vertical porque el ojo
   lo lee más corto. */
.fr-js [data-fr-revelar="izquierda"].is-visible { animation-name: fr-revelar-izquierda; }
.fr-js [data-fr-revelar="derecha"].is-visible { animation-name: fr-revelar-derecha; }

@keyframes fr-revelar-izquierda {
  from { opacity: 0; translate: -48px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fr-revelar-derecha {
  from { opacity: 0; translate: 48px 0; }
  to { opacity: 1; translate: 0 0; }
}