:root {
  --azul: #11456d;
  --azul-hover: #163f60;
  --menta: #a8d5c4;
  --texto: #141414;
  --fondo: #ffffff;
  --fondo-alt: #f4f4f4;
  --fondo-alt-2: #ebedef;
  --texto-sec: #949494;
  --borde: #d6d6d6;
  --enlace: #1032cf;
  --enlace-hover: #3374ff;
  --whatsapp: #25d366;
  --error: #b3261e;
  --exito: #1e7d46;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
}

h1,
h2,
h3 {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 16px;
}

h1 {
  font-size: 32px;
  color: var(--texto);
}

h2 {
  font-size: 21px;
  color: var(--azul);
}

h3 {
  font-size: 16px;
  color: var(--texto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--enlace);
  text-decoration: none;
}

a:hover {
  color: var(--enlace-hover);
}

img {
  max-width: 100%;
  display: block;
  border-radius: 12px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  background: var(--fondo);
  z-index: 20;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.logo .club {
  color: var(--menta);
  text-transform: lowercase;
}

.logo .sanios {
  color: var(--azul);
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Same bug, same fix as .btn[hidden] above (see its comment): .main-nav's
   own display: flex is an author rule, so it beats the UA stylesheet's
   hidden-attribute default regardless of specificity. Only surfaced once
   #cuenta gained a second <nav class="main-nav"> (#panel-nav, issue #193
   follow-up) toggled via the `hidden` property exactly like every other
   section on this page — before that, every .main-nav on the site was
   permanently visible, so the bug had no observable case. */
.main-nav[hidden] {
  display: none;
}

.main-nav a {
  color: var(--texto);
  font-weight: 600;
  font-size: 14px;
}

.main-nav a[aria-current='page'] {
  color: var(--azul);
  border-bottom: 2px solid var(--menta);
  padding-bottom: 4px;
}

/* Language selector */

.lang-select {
  position: relative;
}

.lang-select summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--azul);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-select summary::-webkit-details-marker {
  display: none;
}

.lang-select[open] summary {
  border-color: var(--azul);
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.12);
  overflow: hidden;
}

.lang-menu a {
  display: block;
  padding: 10px 14px;
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
}

.lang-menu a:hover {
  background: var(--fondo-alt);
}

.lang-menu a[aria-current='true'] {
  color: var(--azul);
  font-weight: 700;
}

/* ---------- Sections ---------- */

section {
  padding: 64px 0;
}

.section-alt {
  background: var(--fondo-alt);
}

.zigzag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.zigzag.reverse {
  direction: rtl;
}

.zigzag.reverse > * {
  direction: ltr;
}

.eyebrow {
  color: var(--menta);
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--azul);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  border: none;
  border-radius: var(--radius);
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn:hover {
  background: var(--azul-hover);
  color: #fff;
}

/* .btn's own display: inline-flex above is an author rule, so it beats
   the UA stylesheet's hidden-attribute default (display: none) regardless
   of specificity — a button carrying both class="btn" and hidden stayed
   visible. Confirmed live on /cuenta/: consent-retry-btn rendered with
   display: inline-flex while its hidden property was true. This restores
   the browser default for exactly that combination, everywhere the class
   is used, across all four language pages that share this stylesheet.
   Checked every HTML page under public/ (recursively) and every script
   under public/shared/ for class="btn" next to hidden, and every place
   that sets .hidden = true; the only elements carrying both are retry
   buttons, all meant to disappear. */
.btn[hidden] {
  display: none;
}

.btn-ghost {
  background: transparent;
  color: var(--azul);
  border: 1px solid var(--azul);
}

.btn-ghost:hover {
  background: var(--fondo-alt);
  color: var(--azul);
}

/* Compact button sizing for the site header, so the "Entrar" link lines up
   with the nav and the language selector instead of towering over them.
   Exists so that sizing lives here once rather than as an inline style
   repeated on every page's header. */
.btn-header {
  padding: 8px 20px;
  font-size: 14px;
}

/* ---------- Cards / grids ---------- */

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 24px;
}

.section-alt .card {
  background: var(--fondo);
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  counter-reset: step;
}

.step {
  text-align: center;
}

.step .num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  margin: 0 auto 12px;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pillar-card {
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 28px;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.pillar-card:hover {
  box-shadow: 0 12px 32px rgba(17, 69, 109, 0.12);
  transform: translateY(-2px);
}

.pillar-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--menta);
  margin-bottom: 16px;
}

/* ---------- Pipeline / status ---------- */

.status-track {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-pill {
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-sec);
}

.status-pill.active {
  border-color: var(--azul);
  color: var(--azul);
  background: rgba(17, 69, 109, 0.06);
}

.status-arrow {
  color: var(--borde);
}

/* ---------- FAQ ---------- */

.faq-item {
  border-bottom: 1px solid var(--borde);
  padding: 18px 0;
}

.faq-item summary {
  cursor: pointer;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--texto);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin-top: 12px;
  color: var(--texto);
}

/* ---------- Form ---------- */

.signup-form {
  display: grid;
  gap: 14px;
  max-width: 420px;
}

.signup-form input,
.signup-form select {
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--texto);
}

.signup-form label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--texto-sec);
  font-weight: 400;
}

.signup-form label.checkbox input {
  width: auto;
  margin-top: 3px;
}

/* Inline form-level error message. Named for what it IS: the login page
   previously reused `.form-success` (undefined here) with an inline colour
   override, which read as a success state in the markup. */
.form-error {
  color: var(--error);
  font-size: 14px;
  margin: 0;
}

/* Real success state this time, distinct from .form-error above (see its
   comment) — used by /cuenta's "código enviado" confirmation. */
.form-success {
  color: var(--exito);
  font-size: 14px;
  margin: 0;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--fondo-alt-2);
  padding: 48px 0 32px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.footer-legal {
  border-top: 1px solid var(--borde);
  padding-top: 20px;
  font-size: 13px;
  color: var(--texto-sec);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- WhatsApp float ---------- */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  z-index: 30;
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* ---------- Translation notice ---------- */

.translation-notice {
  background: #fff7e6;
  border: 1px solid #f0d9a6;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 14px;
  margin-bottom: 32px;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .zigzag,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .zigzag.reverse {
    direction: ltr;
  }

  .grid-4,
  .grid-3,
  .steps,
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-nav {
    display: none;
  }

  h1 {
    font-size: 26px;
  }
}

@media (max-width: 520px) {
  .grid-4,
  .grid-3,
  .steps,
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}