/* Two Warriors Academy — capa del sitio sobre el sistema de diseño.
 *
 * Aquí vive lo que la maqueta resolvía con atributos style-hover y con
 * JavaScript de medición de anchura: estados de interacción y puntos de
 * ruptura. Pasarlo a CSS real hace que la cabecera y el menú funcionen sin
 * JavaScript, que es lo que pide el brief de accesibilidad.
 */

a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.btn { white-space: nowrap; }

/* — salto al contenido — */
.salto {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--color-text); color: var(--color-bg);
  padding: 12px 18px; font-weight: 700;
}
.salto:focus { left: 0; }

/* — contenedores — */
.envoltorio { max-width: 1280px; margin: 0 auto; padding-inline: 20px; }
.franja { border-bottom: 2px solid var(--color-text); }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--color-bg); border-bottom: 2px solid var(--color-text); }
.cabecera-fila {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 24px; min-height: 72px;
}
.cabecera-marca { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.cabecera-acciones { display: flex; align-items: center; gap: 10px; }

.nav-escritorio { display: none; align-items: stretch; }
.nav-enlace {
  display: flex; align-items: center; padding: 0 13px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
}
.nav-enlace:hover { color: var(--color-accent-700); }
.nav-enlace > span { padding-bottom: 3px; border-bottom: 3px solid transparent; }
.nav-enlace[aria-current="page"] > span { border-bottom-color: var(--color-accent); }

.cabecera-tel, .cabecera-cta { display: none; }
.cabecera-tel { align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }

/* Menú móvil: <details>/<summary>, sin JavaScript y con estado anunciado. */
.menu-movil > summary {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 13px 0;
  background: var(--color-text); color: var(--color-bg);
  cursor: pointer; list-style: none;
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil > summary:hover { background: var(--color-accent); }
.menu-movil[open] > summary { background: var(--color-accent); }
.menu-movil-panel {
  position: absolute; left: 0; right: 0;
  border-top: 2px solid var(--color-text); background: var(--color-bg);
}
.menu-movil-panel nav { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; }
.menu-movil-enlace {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 20px;
  border-bottom: 1px solid var(--color-neutral-300);
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.menu-movil-enlace:hover { background: var(--color-accent-100); }

@media (min-width: 700px) {
  .cabecera-tel, .cabecera-cta { display: flex; }
}
@media (min-width: 1060px) {
  .nav-escritorio { display: flex; }
  .menu-movil { display: none; }
}

/* ── Enlaces de bloque que cambian de fondo al pasar por encima ────────── */
.tarjeta-enlace:hover { background: var(--color-accent-100); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-700); }
.enlace-claro { color: #fff; }
.enlace-claro:hover { color: var(--color-accent-400); }
.enlace-pie { color: var(--color-neutral-200); }
.enlace-pie:hover { color: var(--color-accent-400); }

/* ── Botón flotante de WhatsApp ───────────────────────────────────────── */
.wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 18px 0 16px;
  background: var(--color-accent-fondo); color: #fff;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-md);
}
.wa-flotante:hover { background: var(--color-accent-700); color: #fff; }
@media (max-width: 520px) {
  .wa-flotante { padding: 0; width: 56px; justify-content: center; }
  .wa-flotante span { display: none; }
}

/* ── Hueco de imagen sin foto todavía ─────────────────────────────────── */
.hueco {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  background: var(--color-neutral-200); color: var(--color-neutral-600);
  font-size: 12px; line-height: 1.4;
  border: 1px dashed var(--color-neutral-400);
}
.foto-cubre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-contiene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Aquí manda la foto: el hueco toma su proporción en vez de imponerle una, así
   que nunca sobra fondo ni se recorta nada, sea cual sea la forma del cartel.
   No provoca saltos de maqueta porque el <img> lleva width y height declarados
   y el navegador reserva el sitio con esa proporción antes de descargarla. */
.foto-propia { display: block; width: 100%; height: auto; }

/* ── Filtros de público (peques / adultos) ────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 2px; }
.filtro {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 2px solid var(--color-text); background: var(--color-bg); color: var(--color-text);
}
.filtro:hover { background: var(--color-accent-100); color: var(--color-text); }
.filtro[aria-current="true"] { background: var(--color-text); color: var(--color-bg); }

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */
.faq { border-top: 2px solid var(--color-text); }
.faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.25;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover { color: var(--color-accent-700); }
.faq > summary::after { content: "+"; font-size: 24px; font-weight: 400; line-height: 1; }
.faq[open] > summary::after { content: "−"; }
.faq-cuerpo { padding: 0 0 20px; max-width: 62ch; color: var(--color-neutral-800); }

/* ── Formulario público ───────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
.campo .input { min-height: 48px; }
.campo textarea.input { min-height: 130px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-error {
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--color-accent-100); border-left: 4px solid var(--color-accent);
  font-size: 14px;
}
.aviso-ok {
  padding: 18px 20px; margin-bottom: 20px;
  background: var(--color-text); color: #fff; font-size: 15px;
}

/* ── ¿Para quién es la plaza? ─────────────────────────────────────────── */
/* Son radios de verdad, no botones con JavaScript: el valor llega al servidor
   aunque el navegador no ejecute scripts. */
.quien { display: flex; flex-wrap: wrap; border: 2px solid var(--color-text); }
.quien-opcion { flex: 1 1 160px; display: flex; cursor: pointer; }
.quien-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.quien-opcion span {
  flex: 1; display: flex; align-items: center;
  min-height: 48px; padding: 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-right: 2px solid var(--color-text);
}
.quien-opcion:last-child span { border-right: 0; }
.quien-opcion:hover span { background: var(--color-accent-100); }
.quien-opcion:has(input:checked) span { background: var(--color-text); color: var(--color-bg); }
.quien-opcion:has(input:focus-visible) span { outline: 2px solid var(--color-accent); outline-offset: -4px; }

.tarjeta-wa:hover { background: var(--color-accent-600) !important; color: #fff; }

/* Los campos del menor solo se piden cuando la plaza es para un menor.
   Sin JavaScript se muestran siempre, que es el peor caso aceptable. */
[hidden] { display: none !important; }