@charset "UTF-8";

/* ===========================================================================
   Colpsiaragua · sistema de diseño
   ---------------------------------------------------------------------------
   Un solo archivo, sin framework. Sustituye a Bootstrap + AOS + GLightbox +
   Swiper + PureCounter (≈10 MB de vendor) por ~30 KB propios.

   Identidad: se conserva la del sitio original — índigo profundo y verde
   menta, botones en forma de píldora y las ondas bajo el hero. Lo que cambia
   es el oficio: escala tipográfica, ritmo, contraste medido y una cabecera
   que ya no se come media pantalla.
   =========================================================================== */

:root {
  color-scheme: light;

  /* --- Color ---------------------------------------------------------------
     La identidad del sitio original: índigo profundo + verde menta. No se
     cambia, se afina. El índigo viene del encabezado y el hero; el menta,
     del botón "Consultar Profesional" y del subrayado del menú activo.

     Único ajuste real: el menta puro sobre blanco daba 1,9:1 de contraste.
     Se conserva vivo para fondos oscuros y superficies de botón (con texto
     índigo encima), y para texto sobre claro se usa su versión honda. */
  --brand:        oklch(0.34 0.155 276);
  --brand-deep:   oklch(0.27 0.150 276);
  --brand-dark:   oklch(0.21 0.120 276);
  --brand-wash:   oklch(0.955 0.022 276);
  --brand-line:   oklch(0.88 0.045 276);

  --mint:         oklch(0.80 0.155 166);  /* el verde de la marca, tal cual */
  --mint-bright:  oklch(0.86 0.150 168);
  --accent:       oklch(0.50 0.115 168);  /* misma familia, legible en claro */
  --accent-hover: oklch(0.43 0.105 170);
  --accent-wash:  oklch(0.955 0.030 168);
  --accent-line:  oklch(0.87 0.060 168);

  --bg:           oklch(0.986 0.003 276);
  --bg-sunken:    oklch(0.963 0.006 276);
  --surface:      oklch(1 0 0);
  --surface-alt:  oklch(0.978 0.005 276);

  --ink:          oklch(0.23 0.025 276);
  --ink-soft:     oklch(0.44 0.022 276);
  --ink-faint:    oklch(0.56 0.018 276);
  --ink-on-dark:  oklch(0.98 0.006 276);
  --ink-on-dark-soft: oklch(0.845 0.020 276);

  --line:         oklch(0.905 0.008 276);
  --line-strong:  oklch(0.84 0.012 276);

  --ok:           oklch(0.50 0.11 155);
  --ok-wash:      oklch(0.955 0.03 155);
  --warn:         oklch(0.505 0.115 72);
  --warn-wash:    oklch(0.96 0.035 80);
  --danger:       oklch(0.52 0.16 25);
  --danger-wash:  oklch(0.96 0.03 25);

  /* --- Tipografía ---------------------------------------------------------
     Literata (serif humanista, hecha para leer) da la voz institucional.
     Archivo (grotesca de señalética) sostiene la interfaz. Ejes distintos:
     no son dos sans parecidas peleando. */
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.34vw, 1.4rem);
  --step-2:  clamp(1.56rem, 1.43rem + 0.62vw, 1.95rem);
  --step-3:  clamp(1.95rem, 1.72rem + 1.1vw, 2.75rem);
  --step-4:  clamp(2.4rem, 1.98rem + 2.1vw, 3.9rem);

  /* --- Espacio y forma ----------------------------------------------------- */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --wrap: 74rem;
  --wrap-narrow: 46rem;
  /* 7rem por lado eran 224px de aire muerto por sección: con ocho secciones,
     1856px — el 24% de la portada — para 385 palabras en total. La página no
     se sentía espaciosa, se sentía vacía, y obligaba a desplazar mucho para
     encontrar lo siguiente. A 4rem cabe más en cada pantalla sin quitar ni
     una palabra, que es justo lo que el público pide: verlo todo de una vez. */
  --section-y: clamp(2.75rem, 5vw, 4rem);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --shadow-xs: 0 1px 2px oklch(0.25 0.03 245 / 0.06);
  --shadow-sm: 0 1px 2px oklch(0.25 0.03 245 / 0.05), 0 2px 6px oklch(0.25 0.03 245 / 0.05);
  --shadow-md: 0 2px 4px oklch(0.25 0.03 245 / 0.04), 0 8px 20px oklch(0.25 0.03 245 / 0.08);
  --shadow-lg: 0 4px 8px oklch(0.25 0.03 245 / 0.05), 0 20px 48px oklch(0.25 0.03 245 / 0.12);

  /* --- Movimiento ---------------------------------------------------------
     Curvas exponenciales hacia afuera: entra rápido y se posa. Sin rebote. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  /* --- Capas --------------------------------------------------------------
     Escala semántica. Nunca un 9999 suelto. */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-backdrop: 300;
  --z-sheet: 310;
  --z-modal: 400;
  --z-toast: 500;

  --header-h: 4rem;
}

/* ===========================================================================
   Base
   =========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in oklch, var(--accent) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}

a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-wash); color: var(--brand-deep); }

/* Saltar al contenido: el primer tabulador de la página. */
.skip {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: var(--z-toast);
  padding: 0.6rem 1rem;
  background: var(--brand-deep);
  color: var(--ink-on-dark);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: top var(--t-base) var(--ease-out);
}
.skip:focus { top: 0.75rem; color: var(--ink-on-dark); }

/* ===========================================================================
   Estructura
   =========================================================================== */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--sunken { background: var(--bg-sunken); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ---------------------------------------------------------------------------
   Tres volúmenes de sección, no uno.
   Antes las ocho secciones gritaban igual: mismo relleno y los ocho h2 al
   mismo tamaño. Cuando todo pesa lo mismo, nada destaca, y eso es lo que hace
   que una página se lea como "cualquier página".

   --clave     : a lo que la gente viene (precios, cómo agremiarse).
   --compacta  : lo que acompaña (publicaciones, contacto).
   sin sufijo  : el resto.
   --------------------------------------------------------------------------- */
/* El realce de relleno solo en pantallas anchas: en un teléfono el alto es el
   recurso escaso y la jerarquía ya la marca el tamaño del titular. */
@media (min-width: 48.01rem) {
  .section--clave { padding-block: calc(var(--section-y) * 1.35); }
}
.section--clave > .wrap > .section-head h2 { font-size: var(--step-4); }

.section--compacta { padding-block: calc(var(--section-y) * 0.7); }
.section--compacta h2 { font-size: var(--step-2); }

.section-head {
  max-width: 46rem;
  /* Un título no necesita 52px de distancia con lo que anuncia. */
  margin-bottom: clamp(1.4rem, 2.4vw, 2.1rem);
}

.section-head p {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 62ch;
}

.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

.stack > * + * { margin-top: var(--flow, 1rem); }

/* ===========================================================================
   Cabecera · compacta por decisión
   ---------------------------------------------------------------------------
   La anterior medía ~120 px: logo de 80 px, 20 px de relleno arriba y abajo
   y un <h1> de 30 px. Se comía media pantalla de teléfono. Esta mide 64 px
   en reposo y 56 px al bajar.
   =========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;

  /* Arranca transparente: sobre la portada se ve la foto detrás del menú.
     La barra solo aparece al bajar. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    height var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    backdrop-filter var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.site-header[data-scrolled="true"] {
  --header-h: 3.5rem;
  background: color-mix(in oklch, var(--brand-deep) 96%, transparent);
  border-bottom-color: oklch(1 0 0 / 0.14);
  box-shadow: 0 6px 24px oklch(0.15 0.06 276 / 0.32);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header[data-scrolled="true"] { backdrop-filter: saturate(150%) blur(14px); }
}

/* Con el menú móvil abierto la barra se vuelve sólida aunque no se haya
   bajado: si no, el panel blanco flotaría bajo un encabezado invisible. */
.site-header:has(.nav-toggle[aria-expanded="true"]) {
  background: var(--brand-deep);
  border-bottom-color: oklch(1 0 0 / 0.14);
}

/* Sobre fondo claro (páginas internas) la cabecera se invierte. */
.site-header--solid {
  background: transparent;
  border-bottom-color: transparent;
  --nav-ink: var(--ink-soft);
  --nav-ink-active: var(--brand-deep);
  --nav-underline: var(--brand);
  --logo-ink: var(--brand-deep);
  --logo-sub: var(--ink-faint);
}

.site-header--solid[data-scrolled="true"] {
  background: color-mix(in oklch, var(--surface) 97%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px oklch(0.20 0.05 276 / 0.10);
}

/* Las páginas internas abren con una franja índigo detrás (.page-head),
   así que el logo y el menú van en claro hasta que la barra se asienta. */
.site-header--solid:not([data-scrolled="true"]) {
  --nav-ink: var(--ink-on-dark-soft);
  --nav-ink-active: var(--ink-on-dark);
  --nav-underline: var(--mint);
  --logo-ink: var(--ink-on-dark);
  --logo-sub: var(--ink-on-dark-soft);
}

.site-header--solid:not([data-scrolled="true"]) .nav-toggle {
  border-color: oklch(1 0 0 / 0.25);
  background: oklch(1 0 0 / 0.08);
}

.header-inner {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/* --- Marca --- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--logo-ink, var(--ink-on-dark));
  flex-shrink: 0;
}

/* El logo sigue siendo el protagonista, como en el sitio original: solo que
   a 38 px en vez de 80, y sin fondo blanco recortándolo. */
.brand img {
  width: 2.375rem;
  height: 2.375rem;
  object-fit: contain;
  transition: transform var(--t-base) var(--ease-out);
}

.site-header[data-scrolled="true"] .brand img { transform: scale(0.9); }

.brand-text { display: grid; line-height: 1.1; }

.brand-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-sub {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--logo-sub, var(--ink-on-dark-soft));
}

/* El subtítulo de la marca se retira antes de que empuje al botón
   «Agremiarse» fuera de la pantalla: con los dos visibles, la cabecera no
   entraba por debajo de 544 px y la página ganaba scroll horizontal. */
@media (max-width: 33.99rem) {
  .brand-sub { display: none; }
}

/* --- Navegación de escritorio --- */
.nav { display: none; }

@media (min-width: 71rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .nav a {
    position: relative;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--nav-ink, var(--ink-on-dark-soft));
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
  }

  .nav a::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.22rem;
    height: 2px;
    border-radius: 2px;
    background: var(--nav-underline, var(--mint));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base) var(--ease-out);
  }

  .nav a:hover,
  .nav a[aria-current="page"] { color: var(--nav-ink-active, var(--ink-on-dark)); }

  .nav a:hover::after,
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Acceso (agremiados y personal). En escritorio va junto al botón
   «Agremiarse»; en móvil vive dentro del menú, porque en la barra no cabe
   sin sacar la página de ancho a 320 px. */
.header-acceso {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nav-ink-active, var(--ink-on-dark));
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out);
}

.header-acceso:hover { background: color-mix(in oklch, currentColor 12%, transparent); }
.header-acceso[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

@media (min-width: 71rem) {
  .header-acceso { display: inline-flex; }
}

/* Recién aparece el menú de escritorio no cabe todo: a 1136 px la cabecera
   se pasaba 70 px. Hasta 84rem el acceso queda en su icono (el texto sigue
   ahí para lectores de pantalla) y los enlaces se aprietan un poco. */
@media (min-width: 71rem) and (max-width: 83.99rem) {
  .header-acceso { padding: 0.5rem; }
  .header-acceso-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav a { padding-inline: 0.5rem; }
  .nav a::after { left: 0.5rem; right: 0.5rem; }
}

.nav-sheet-acceso {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

/* --- Botón de menú móvil --- */
/* Flex en columna, NO grid.
   Con `display:grid` cada barra caía en su propia fila y `align-content`
   las estiraba para repartirse los 40px de alto: quedaban a 13,3px una de
   otra en vez de a 5,5, y la tercera se salía del recuadro. Además la
   animación de la X está calculada para esos 5,5px, así que al abrir las
   barras giraban pero no llegaban a cruzarse: dos rayas diagonales sueltas
   en lugar de una equis. */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid oklch(1 0 0 / 0.22);
  border-radius: var(--r-md);
  background: oklch(1 0 0 / 0.08);
  color: var(--logo-ink, var(--ink-on-dark));
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}

.site-header--solid .nav-toggle {
  border-color: var(--line-strong);
  background: var(--surface);
}

.nav-toggle:hover { background: oklch(1 0 0 / 0.16); }
.site-header--solid .nav-toggle:hover { background: var(--bg-sunken); }

@media (min-width: 71rem) { .nav-toggle { display: none; } }

.nav-toggle span {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav-toggle span + span { margin-top: 4px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Panel móvil --- */
.nav-sheet {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: var(--z-sheet);
  padding: 1rem var(--gutter) 1.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateY(-0.75rem);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}

.nav-sheet[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (min-width: 71rem) { .nav-sheet { display: none; } }

.nav-sheet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.nav-sheet a:last-of-type { border-bottom: 0; }
.nav-sheet a[aria-current="page"] { color: var(--accent); }
.nav-sheet .btn { margin-top: 1rem; width: 100%; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: oklch(0.2 0.03 245 / 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}

.nav-backdrop[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ===========================================================================
   Botones
   =========================================================================== */

.btn {
  /* Píldora: la forma de los botones del sitio original. */
  --btn-bg: var(--mint);
  --btn-ink: var(--brand-dark);
  --btn-border: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--btn-ink); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.btn[disabled],
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.btn--primary { --btn-bg: var(--mint); --btn-ink: var(--brand-dark); }
.btn--primary:hover { --btn-bg: var(--mint-bright); }

.btn--brand { --btn-bg: var(--brand-deep); --btn-ink: oklch(1 0 0); }
.btn--brand:hover { --btn-bg: var(--brand-dark); }

.btn--indigo { --btn-bg: var(--brand); --btn-ink: oklch(1 0 0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-border: var(--line-strong);
}
.btn--ghost:hover { --btn-bg: var(--surface); --btn-ink: var(--brand-deep); --btn-border: var(--brand); }

.btn--on-dark {
  --btn-bg: oklch(1 0 0 / 0.1);
  --btn-ink: var(--ink-on-dark);
  --btn-border: oklch(1 0 0 / 0.3);
}
.btn--on-dark:hover { --btn-bg: oklch(1 0 0 / 0.18); --btn-ink: oklch(1 0 0); }

.btn--danger { --btn-bg: var(--danger); --btn-ink: oklch(1 0 0); }
.btn--ok { --btn-bg: var(--ok); --btn-ink: oklch(1 0 0); }

.btn--sm { padding: 0.45rem 0.95rem; font-size: 0.8125rem; }
.btn--lg { padding: 0.9rem 1.6rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Onda de pulsación: confirma el toque sin esperar al servidor. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%),
              oklch(1 0 0 / 0.25) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.btn:hover::after { opacity: 1; }
.btn--ghost::after { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%),
                     oklch(0.34 0.155 276 / 0.1) 0%, transparent 55%); }

.btn .spinner { display: none; }
.btn[aria-busy="true"] .spinner { display: block; }
.btn[aria-busy="true"] .btn-label { opacity: 0.7; }

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-full);
  animation: spin 620ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   Portada
   =========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem));
  padding-bottom: clamp(4rem, 9vw, 7.5rem);
  background: var(--brand-deep);
  color: var(--ink-on-dark);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 32%;
  opacity: 0.85;
  transform: scale(1.06) translateY(var(--parallax, 0px));
  will-change: transform;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Velo denso donde va el texto, para que el blanco se lea siempre. */
    linear-gradient(100deg,
      oklch(0.24 0.135 276 / 0.94) 0%,
      oklch(0.26 0.145 276 / 0.86) 38%,
      oklch(0.28 0.150 276 / 0.62) 72%,
      oklch(0.30 0.155 276 / 0.55) 100%),
    /* Y un asentado hacia abajo, para que las ondas no corten en seco. */
    linear-gradient(to bottom,
      oklch(0.22 0.120 276 / 0.45) 0%,
      transparent 28%,
      transparent 72%,
      oklch(0.24 0.135 276 / 0.75) 100%);
}

.hero h1 { color: oklch(1 0 0); max-width: 18ch; }

/* El subrayado verde bajo "Colpsiaragua", como en el título original.
   Se dibuja al entrar, de izquierda a derecha. */
.subrayado-menta {
  position: relative;
  white-space: nowrap;
}

.subrayado-menta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.075em;
  min-height: 3px;
  border-radius: 999px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  animation: trazo 900ms var(--ease-out) 350ms forwards;
}

@keyframes trazo { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .subrayado-menta::after { animation: none; transform: scaleX(1); }
}

/* --- Ondas del pie del hero -----------------------------------------------
   El remate ondulado del sitio original. Se conserva, con el mismo vaivén
   lento, y se apaga entero si el visitante pidió menos movimiento. */
.hero-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 0;
  width: 100%;
  height: clamp(3.5rem, 7vw, 6rem);
  pointer-events: none;
}

.hero-waves use { fill: var(--bg); }

.hero-waves .wave1 use { opacity: 0.32; animation: vaiven 9s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; }
.hero-waves .wave2 use { opacity: 0.22; animation: vaiven 12s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; }
.hero-waves .wave3 use { opacity: 1; animation: vaiven 16s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; }

@keyframes vaiven {
  0% { transform: translate3d(-90px, 0, 0); }
  50% { transform: translate3d(85px, 0, 0); }
  100% { transform: translate3d(-90px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-waves use { animation: none !important; }
}

.hero-lead {
  margin-top: 1.25rem;
  max-width: 54ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-on-dark-soft);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.85rem 0.35rem 0.5rem;
  border: 1px solid oklch(1 0 0 / 0.22);
  border-radius: var(--r-full);
  background: oklch(1 0 0 / 0.08);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-on-dark);
}

.hero-eyebrow .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: oklch(0.78 0.16 155);
  box-shadow: 0 0 0 0 oklch(0.78 0.16 155 / 0.6);
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 0.5rem oklch(0.78 0.16 155 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.78 0.16 155 / 0); }
}

/* Tarjeta de consulta rápida sobre la portada. */
.hero-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid oklch(1 0 0 / 0.16);
  border-radius: var(--r-xl);
  background: oklch(1 0 0 / 0.07);
  box-shadow: 0 24px 60px oklch(0.15 0.03 245 / 0.35);
}

@supports (backdrop-filter: blur(1px)) {
  .hero-card { backdrop-filter: blur(16px) saturate(140%); }
}

.hero-card h2 {
  font-size: var(--step-1);
  color: oklch(1 0 0);
  margin-bottom: 0.4rem;
}

.hero-card p {
  font-size: 0.9375rem;
  color: var(--ink-on-dark-soft);
  margin-bottom: 1.25rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid oklch(1 0 0 / 0.14);
}

.hero-stat dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-on-dark-soft);
}

.hero-stat dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  color: oklch(1 0 0);
  font-variant-numeric: tabular-nums;
}

.hero-card-logo { display: block; margin: 0 auto 1.5rem; max-width: 9.5rem; }

/* ---------------------------------------------------------------------------
   La portada en teléfono
   ---------------------------------------------------------------------------
   En escritorio el hero es de dos columnas y cabe de un vistazo. Apilado en un
   teléfono medía 1476px: 1,75 pantallas, y con la barra del navegador encima
   eran casi tres desplazamientos para pasar de la portada. Nadie recorre eso
   para llegar a los precios.

   No se quita nada ni se reescribe ningún texto: se ajusta el tamaño de lo que
   solo estaba grande por herencia del escritorio. El reparto era: tarjeta
   566px, párrafo 251px, logo de la tarjeta 187px y 184px de puro relleno.
   --------------------------------------------------------------------------- */
/* Escalón 1 · todo el rango en que el hero va APILADO (por debajo de 60rem,
   que es donde .hero-grid deja de tener dos columnas). Aquí el ahorro viene
   del relleno y del logo, que a una columna sobran. Sin este escalón, una
   tableta de 900px se quedaba con el hero de 1318px del principio. */
@media (max-width: 59.99rem) {
  .hero {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 3rem;
  }

  .hero-grid { gap: 2.25rem; }
  .hero-card { padding: 1.5rem; }
  .hero-card-logo { margin-bottom: 1.25rem; max-width: 6rem; }
}

/* Escalón 2 · teléfonos. Lo de arriba no basta cuando además la pantalla es
   estrecha: el párrafo se parte en siete renglones y los tres datos se apilan. */
@media (max-width: 48rem) {
  .hero {
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: 2.5rem;
  }

  .hero-grid { gap: 2rem; }

  /* 20px de cuerpo es tamaño de escritorio: en un móvil convertía el párrafo
     institucional en siete renglones. */
  .hero-lead {
    margin-top: 0.9rem;
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  /* Los dos botones, en fila y a mitad cada uno.
     Con `flex-wrap` medían 151 + 185 + 12 = 348px y la caja a 360px de
     pantalla son 323: se pasaban por 25px y el segundo caía debajo. Repartirlos
     al 50% los hace caber siempre, y de paso quedan del mismo tamaño en vez de
     uno ancho y otro estrecho. El relleno lateral baja porque a media columna
     1,6rem por lado se come el texto. */
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }

  .hero-actions .btn {
    width: 100%;
    padding-inline: 0.7rem;
    gap: 0.4rem;
    font-size: 0.9375rem;
  }

  /* Las tres cifras (agremiados, periodo, sede) no se muestran en teléfono.
     Son contexto institucional, no lo que alguien viene a resolver desde el
     móvil, y costaban 126px justo entre los botones y la consulta: empujaban
     hacia abajo la única acción de la portada. En escritorio se conservan tal
     cual, donde comparten fila con la tarjeta y no le quitan sitio a nada. */
  .hero-stats { display: none; }

  .hero-card { padding: 1.25rem; }
  .hero-card p { margin-bottom: 1rem; }

  /* El logo ya está en la cabecera, a dos dedos de aquí. Repetirlo aquí
     costaba 187px de alto sin decir nada nuevo, y además retrasaba la única
     pregunta que importa en esa tarjeta. */
  .hero-card-logo { display: none; }

  /* Las ondas son remate decorativo: a pantalla completa no hacen falta 56px. */
  .hero-waves { height: 2.25rem; }
}

/* ===========================================================================
   Tarjetas y paneles
   =========================================================================== */

.card {
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.card--hover:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); }

.grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

/* min(100%, X) evita que una columna exija mas ancho del que hay: sin esa
   guarda, en un telefono de 320px estas rejillas sacaban la pagina 18px a la
   derecha. Es el mismo patron que ya usaba .recaudos. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* --- Valores del colegio: fila numerada, no una rejilla de tarjetas iguales */
.values { display: grid; gap: 0; border-top: 1px solid var(--line); }

.value {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-base) var(--ease-out);
}

@media (min-width: 48rem) {
  .value {
    grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.value:hover { background: color-mix(in oklch, var(--accent-wash) 60%, transparent); }

.value-num {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.value h3 { font-size: var(--step-0); font-family: var(--font-ui); font-weight: 600; margin: 0; }
.value p { color: var(--ink-soft); font-size: 0.9375rem; margin: 0; }

/* ===========================================================================
   Etiquetas de estado
   =========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--r-full);
  background: currentColor;
}

.badge--ok { background: var(--ok-wash); color: var(--ok); border-color: color-mix(in oklch, var(--ok) 22%, transparent); }
.badge--warn { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 25%, transparent); }
.badge--danger { background: var(--danger-wash); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 22%, transparent); }
.badge--info { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-line); }
.badge--mute { background: var(--bg-sunken); color: var(--ink-soft); border-color: var(--line); }
.badge--plain::before { display: none; }

/* ===========================================================================
   Formularios
   =========================================================================== */

/* align-content:start es lo que mantiene simétrica la fila de dos columnas.
   Sin esto, el campo sin nota de ayuda se estira para igualar al de al lado y
   su recuadro sale más alto: era el caso de "Teléfono" contra "Correo". */
.field { display: grid; gap: 0.4rem; align-content: start; }

.field > label,
.label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.field .hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.field .req { color: var(--danger); font-weight: 600; }
.field .opt { color: var(--ink-faint); font-weight: 500; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.68rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}

.textarea { min-height: 7rem; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23566' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--ink-faint); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-wash);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: color-mix(in oklch, var(--danger-wash) 45%, var(--surface));
}

.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3.5px var(--danger-wash); }

.error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--danger);
}

.error:empty { display: none; }

.form-grid {
  display: grid;
  gap: 1.15rem;
}

@media (min-width: 40rem) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: 1 / -1; }

  /* Un área de texto junto a un campo de una línea descuadra la fila. En vez de
     dejar el borde inferior desparejo, el área crece hasta el alto de la fila y
     las dos columnas cierran a la misma altura. */
  .form-grid--2 > .field:has(> .textarea) { align-content: stretch; }
  .form-grid--2 > .field > .textarea { min-height: 6rem; }
}

fieldset { border: 0; padding: 0; min-width: 0; }

legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* --- Selector de flujo (nuevo / viejo agremiado) --- */
.choice-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 46rem) { .choice-grid { grid-template-columns: 1fr 1fr; } }

.choice {
  position: relative;
  display: block;
  padding: 1.5rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out);
}

.choice:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-sm);
}

.choice:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 3px; }

.choice-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.choice p { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 0.9rem; }

.choice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }

.choice li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.choice li svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--accent); }

/* --- Zona de carga de recaudos --- */
.dropzone {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  transition:
    border-color var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out);
}

.dropzone:hover,
.dropzone[data-dragging="true"] { border-color: var(--accent); background: var(--accent-wash); }

.dropzone[data-state="ok"] {
  border-style: solid;
  border-color: color-mix(in oklch, var(--ok) 45%, transparent);
  background: color-mix(in oklch, var(--ok-wash) 55%, var(--surface));
}

.dropzone[data-state="error"] {
  border-style: solid;
  border-color: var(--danger);
  background: color-mix(in oklch, var(--danger-wash) 45%, var(--surface));
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }

.dz-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* En teléfono el nombre largo del recaudo ("Título universitario (anverso)")
   se pega a la insignia del peso. Se permite que la insignia baje a su propia
   línea en vez de estrujar el título. */
@media (max-width: 26rem) {
  .dz-head { flex-wrap: wrap; gap: 0.5rem; }
  .dz-head > div { flex: 1 1 100%; }
}

.dz-title { font-size: 0.9375rem; font-weight: 600; }
.dz-help { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.15rem; }

.dz-body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3rem;
}

.dz-thumb {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-faint);
  overflow: hidden;
}

.dz-thumb img { width: 100%; height: 100%; object-fit: cover; }

.dz-meta { min-width: 0; flex: 1; }

.dz-name {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-info { font-size: 0.75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dz-info[data-tone="error"] { color: var(--danger); font-weight: 500; }
.dz-info[data-tone="ok"] { color: var(--ok); font-weight: 500; }

.dz-clear {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  z-index: var(--z-raised);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.dz-clear:hover { color: var(--danger); border-color: var(--danger); }

/* ===========================================================================
   Aranceles
   =========================================================================== */

.tariffs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.tariff {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.tariff:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }

.tariff[data-featured="true"] {
  border-color: var(--brand-deep);
  background: var(--brand-deep);
  color: var(--ink-on-dark);
}

.tariff[data-featured="true"] .tariff-year { color: oklch(1 0 0); }
.tariff[data-featured="true"] .tariff-note { color: var(--ink-on-dark-soft); }
.tariff[data-featured="true"] li { border-color: oklch(1 0 0 / 0.14); color: var(--ink-on-dark-soft); }
.tariff[data-featured="true"] .tariff-amount { color: oklch(1 0 0); }
.tariff[data-featured="true"] .tariff-total { border-color: oklch(1 0 0 / 0.2); color: oklch(1 0 0); }

.tariff-year {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.tariff-note { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.25rem; }

.tariff ul { list-style: none; padding: 0; margin: 1.25rem 0 0; flex: 1; }

.tariff li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.tariff-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tariff-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.tariff-total b {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Los cuatro aranceles, visibles a la vez
   ---------------------------------------------------------------------------
   En teléfono cada tarjeta medía 292px: las cuatro sumaban 1168px y era
   IMPOSIBLE verlas juntas, que es justo lo que hace falta para comparar y
   saber cuál te toca. No se esconde nada ni se pide ningún clic: la misma
   información se dispone como fila comparable en vez de como tarjeta suelta.

   El año y el total suben a la primera línea —que es lo que se recorre con la
   vista al comparar— y los conceptos quedan debajo, tal cual, completos.
   --------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .tariffs { gap: 0.6rem; }

  .tariff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 1rem;
    padding: 0.9rem 1rem;
  }

  .tariff > div { grid-column: 1; grid-row: 1; }
  .tariff-year { font-size: 1.0625rem; }
  .tariff-note { font-size: 0.75rem; margin-top: 0.1rem; }

  .tariff-total {
    grid-column: 2; grid-row: 1;
    flex-direction: column; align-items: flex-end;
    margin: 0; padding: 0; border: 0; gap: 0;
  }

  .tariff-total span { font-size: 0.625rem; opacity: .75; }
  .tariff-total b { font-size: 1.6rem; line-height: 1.05; }

  /* Los conceptos, completos pero en dos renglones apretados. */
  .tariff ul { grid-column: 1 / -1; grid-row: 2; margin: 0; }

  .tariff li {
    padding: 0.2rem 0;
    border: 0;
    font-size: 0.8125rem;
    gap: 0.75rem;
  }

  .tariff-amount { font-size: 0.875rem; }
}

/* En escritorio ya se veían las cuatro; lo que sobraba era altura. */
@media (min-width: 48.01rem) {
  .tariff { padding: 1.25rem; }
  .tariff ul { margin-top: 0.9rem; }
  .tariff li { padding: 0.5rem 0; }
  .tariff-total { margin-top: 0.8rem; padding-top: 0.75rem; }
}

/* ===========================================================================
   Datos de pago
   =========================================================================== */

.pay-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.pay-card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.pay-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}

.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.pay-row:last-child { border-bottom: 0; padding-bottom: 0; }

.pay-row dt { font-size: 0.8125rem; color: var(--ink-soft); flex-shrink: 0; }

.pay-row dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-word;
}

/* El dato que el botón "Copiar" lee. Va marcado para que lo copiado y lo que
   se ve en pantalla salgan siempre del mismo sitio. */
.pay-value { user-select: all; }

/* En teléfono, etiqueta y dato no caben en la misma línea: el número de cuenta
   empujaba el botón a un renglón suelto y "N° de cuenta" quedaba descolgado.
   La etiqueta pasa arriba y el dato ocupa el ancho completo, que es como se
   lee y se copia un número de veinte dígitos. */
@media (max-width: 30rem) {
  .pay-row { display: block; }
  .pay-row dt { margin-bottom: 0.25rem; }

  .pay-row dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    word-break: normal;
  }

  /* Un número de cuenta no se parte por la mitad si se puede evitar. */
  .pay-value { overflow-wrap: anywhere; }
}

/* Aviso cuando los datos bancarios no superan la verificación de integridad.
   Es deliberadamente severo: aquí no se publica ninguna cuenta. */
.pay-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--danger);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.pay-alert > svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--danger); }
.pay-alert p + p { margin-top: 0.4rem; color: var(--ink-soft); }

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}

.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn[data-copied="true"] { color: var(--ok); border-color: var(--ok); background: var(--ok-wash); }

/* ===========================================================================
   Galería
   =========================================================================== */

/* 15rem de mínimo dejaba UNA sola columna en un teléfono: cuatro miniaturas
   cuadradas a ancho completo sumaban 1722px —dos pantallas— para doce
   palabras de contenido. Era el mayor desperdicio de la portada. Con 9,5rem
   entran dos por fila y las cuatro publicaciones se ven a la vez, que es lo
   que se espera de un mosaico. */
.gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

/* El mínimo va por tramos, no uno solo: con 9,5rem en escritorio salían SIETE
   columnas diminutas para cuatro publicaciones, y con 15rem en el teléfono
   salía una sola. Cada ancho pide el suyo. */
@media (min-width: 48.01rem) {
  .gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
}

.gallery-item {
  position: relative;
  display: block;
  /* Cuadrado, que es el formato nativo de Instagram. En 4/3 horizontal estas
     publicaciones perdían la cabeza y el pie del arte. */
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  overflow: hidden;
  cursor: zoom-in;
  isolation: isolate;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(to top, oklch(0.2 0.03 245 / 0.88), transparent);
  color: oklch(1 0 0);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  transform: translateY(0.35rem);
  opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

.gallery-item:hover figcaption,
.gallery-item:focus-visible figcaption { transform: translateY(0); opacity: 1; }

/* Visor */
/* Visor de imágenes
   -------------------------------------------------------------------------
   El diálogo se maquetó como columna flexible porque los flyers del colegio
   son verticales: con una altura fija la imagen se salía por arriba de la
   pantalla y el botón de cerrar quedaba fuera del área visible. Ahora la
   imagen cede altura al pie y al botón, nunca al revés. */
.lightbox {
  width: min(92vw, 56rem);
  max-width: 92vw;
  max-height: 92svh;

  /* El reset `* { margin: 0 }` de mas arriba pisa el `margin: auto` que el
     navegador aplica a un <dialog> modal, y el visor quedaba pegado a la
     esquina superior izquierda en vez de centrado en la pantalla. */
  margin: auto;

  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  overflow: visible;
}

/* Un <dialog> está en display:none mientras está cerrado: el flex solo se
   aplica cuando se abre, o se vería siempre. */
.lightbox[open] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lightbox::backdrop {
  background: oklch(0.16 0.04 276 / 0.9);
  backdrop-filter: blur(6px);
}

.lightbox img {
  width: 100%;
  min-height: 0;          /* sin esto el flex no deja encoger la imagen */
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--brand-dark);
}

.lightbox figcaption {
  flex-shrink: 0;
  color: oklch(1 0 0);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
}

.lightbox figcaption:empty { display: none; }

/* El botón vive DENTRO del diálogo, sobre la esquina de la imagen: colgado
   por fuera desaparecía en cuanto la imagen ocupaba toda la altura. */
.lightbox-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid oklch(1 0 0 / 0.35);
  border-radius: var(--r-md);
  background: oklch(0.16 0.04 276 / 0.65);
  color: oklch(1 0 0);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) {
  .lightbox-close { backdrop-filter: blur(8px); }
}

.lightbox-close:hover { background: oklch(0.16 0.04 276 / 0.9); }

/* ===========================================================================
   Preguntas frecuentes
   =========================================================================== */

.faq { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}

.faq-q:hover { color: var(--accent); }

.faq-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--accent);
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(1 0 0);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-out);
}

.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }

.faq-a > div { overflow: hidden; }

.faq-a p {
  padding-bottom: 1.35rem;
  max-width: 68ch;
  color: var(--ink-soft);
}

/* ===========================================================================
   Consulta pública
   =========================================================================== */

.search-box { position: relative; }

.search-box .input {
  padding-left: 2.75rem;
  padding-right: 3rem;
  font-size: var(--step-0);
}

.search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.search-status {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--ink-faint);
}

.result-list { display: grid; gap: 0.75rem; }

.result {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.result-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.result-main { min-width: 0; flex: 1; }

.result-name { font-weight: 600; line-height: 1.3; }

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.result-legend { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.3rem; }

/* Esqueleto de carga: mantiene el alto y evita el salto de la página. */
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--line) 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.empty {
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  text-align: center;
}

.empty svg { margin: 0 auto 1rem; color: var(--ink-faint); }
.empty h3 { margin-bottom: 0.4rem; }
.empty p { color: var(--ink-soft); max-width: 42ch; margin-inline: auto; }

/* ===========================================================================
   Directorio
   =========================================================================== */

.directory { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

.member {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.member:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.member-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
  background: linear-gradient(140deg, var(--accent-wash), color-mix(in oklch, var(--clay-wash) 70%, var(--surface)));
  color: var(--brand-deep);
  font-size: 0.8125rem;
  font-weight: 700;
}

.member-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.member-meta { font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   Avisos
   =========================================================================== */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.notice svg { flex-shrink: 0; margin-top: 0.15rem; }
.notice strong { display: block; margin-bottom: 0.15rem; }
.notice p { color: var(--ink-soft); }

.notice--info { background: var(--accent-wash); border-color: var(--accent-line); }
.notice--info > svg { color: var(--accent); }
.notice--ok { background: var(--ok-wash); border-color: color-mix(in oklch, var(--ok) 22%, transparent); }
.notice--ok > svg { color: var(--ok); }
.notice--warn { background: var(--warn-wash); border-color: color-mix(in oklch, var(--warn) 25%, transparent); }
.notice--warn > svg { color: var(--warn); }
.notice--danger { background: var(--danger-wash); border-color: color-mix(in oklch, var(--danger) 22%, transparent); }
.notice--danger > svg { color: var(--danger); }

/* --- Mensajes flotantes --- */
.toaster {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-toast);
  display: grid;
  gap: 0.6rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  line-height: 1.45;
  pointer-events: auto;
  animation: toast-in var(--t-base) var(--ease-out) both;
}

.toast[data-leaving="true"] { animation: toast-out var(--t-base) var(--ease-in-out) both; }

.toast--ok > svg { color: var(--ok); }
.toast--error > svg { color: var(--danger); }
.toast--info > svg { color: var(--accent); }
.toast > svg { flex-shrink: 0; margin-top: 0.1rem; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(1.5rem); }
}

/* ===========================================================================
   Pie
   =========================================================================== */

.site-footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--brand-dark);
  color: var(--ink-on-dark-soft);
}

.footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.1);
}

@media (min-width: 50rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
}

.site-footer h4 {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(1 0 0);
}

.site-footer a { color: var(--ink-on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: oklch(1 0 0); text-decoration: underline; }

.footer-links { list-style: none; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9375rem; }

.footer-contact { display: grid; gap: 0.7rem; font-size: 0.9375rem; }

.footer-contact > div { display: flex; align-items: flex-start; gap: 0.6rem; }
.footer-contact svg { flex-shrink: 0; margin-top: 0.2rem; opacity: 0.7; }

.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.footer-brand img { width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); background: oklch(1 0 0 / 0.95); padding: 3px; }
.footer-brand span { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: oklch(1 0 0); }

.social { display: flex; gap: 0.5rem; margin-top: 1.25rem; }

.social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.social a:hover { background: oklch(1 0 0 / 0.12); border-color: oklch(1 0 0 / 0.35); transform: translateY(-2px); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.8125rem;
}

/* ===========================================================================
   Movimiento · revelado al entrar en pantalla
   ---------------------------------------------------------------------------
   El contenido es visible por defecto. La clase .js-reveal solo la pone el
   script si el navegador soporta IntersectionObserver: si el JS no carga,
   la página se ve completa igual.
   =========================================================================== */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 1.25rem));
  transition:
    opacity var(--t-slow) var(--ease-out-soft),
    transform var(--t-slow) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal][data-revealed="true"] { opacity: 1; transform: none; }

/* ===========================================================================
   Utilidades
   =========================================================================== */

/* El atributo `hidden` tiene que ganarle a cualquier display de autor. Sin
   esto, una clase con `display:grid` lo anula en silencio y el elemento sigue
   en pantalla: era lo que hacía aparecer el botón de quitar archivo en
   recaudos donde todavía no se había elegido nada. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

.divider { height: 1px; border: 0; background: var(--line); margin-block: clamp(2rem, 4vw, 3rem); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

/* ===========================================================================
   Movimiento reducido
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* El revelado pasa a ser un fundido instantáneo, no un salto. */
  .js-reveal [data-reveal] { transform: none; opacity: 1; }
  .hero::before { transform: scale(1.06); }
  .btn:hover { transform: none; }
  .card--hover:hover,
  .tariff:hover,
  .member:hover,
  .choice:hover { transform: none; }
}

/* ===========================================================================
   Impresión
   =========================================================================== */

@media print {
  .site-header, .site-footer, .nav-sheet, .toaster, .btn, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .tariff { border-color: #ccc; box-shadow: none; break-inside: avoid; }
}

/* ===========================================================================
   Bloques de contenido con imagen
   ---------------------------------------------------------------------------
   Los dos apartados de "Servicios" del sitio original: texto a un lado,
   imagen al otro, alternando el orden.
   =========================================================================== */

.feature {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 52rem) {
  .feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .feature--reverse .feature-text { order: 2; }
  .feature--reverse .feature-media { order: 1; }
}

.feature-text h3 {
  font-size: var(--step-2);
  margin-bottom: 0.85rem;
}

.feature-text p + p { margin-top: 0.85rem; }
.feature-text > p:first-of-type { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; }

.feature-media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Fondo claro: al no recortar, un afiche con proporción distinta deja franja
     a los lados y debe leerse como marco, no como hueco. */
  background: var(--surface);
}

/* Estas imágenes son flyers y tablas de aranceles: llevan texto dentro, así que
   NO se recortan. Antes iban forzadas a 4/3 con object-fit:cover y se comían el
   pie del flyer. Conservan su proporción real; el tope solo evita que un afiche
   muy vertical desborde la fila. */
.feature-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
  transition: transform var(--t-slow) var(--ease-out);
}

.feature-media:hover img { transform: scale(1.03); }

/* --- Lista con marca de verificación --- */
.check-list { list-style: none; padding: 0; display: grid; gap: 1rem; }

.check-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.check-list li > svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--accent); }
.check-list strong { display: block; margin-bottom: 0.15rem; }
.check-list span span,
.check-list li > span { font-size: 0.9375rem; color: var(--ink-soft); }
.check-list strong { font-size: var(--step-0); color: var(--ink); }

/* ===========================================================================
   Preguntas frecuentes · con imagen al lado
   =========================================================================== */

.faq-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 58rem) {
  .faq-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr); }
  .faq-media { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.faq-media { margin: 0; }
.faq-media .gallery-item { box-shadow: var(--shadow-lg); }

/* ===========================================================================
   Contacto
   =========================================================================== */

.contact-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 56rem) {
  .contact-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.contact-info { display: grid; gap: 0.5rem; }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.contact-item:last-child { border-bottom: 0; }

.contact-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent);
}

.contact-item h3 {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}

.contact-item p { font-size: 0.9375rem; color: var(--ink); line-height: 1.5; }

/* ===========================================================================
   Encabezado de página interna
   =========================================================================== */

.page-head {
  padding-top: calc(var(--header-h) + clamp(2.25rem, 5vw, 3.5rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(170deg, var(--brand-deep) 0%, var(--brand) 100%);
  color: var(--ink-on-dark);
  margin-top: calc(var(--header-h) * -1);
}

.page-head h1 {
  color: oklch(1 0 0);
  font-size: var(--step-3);
  max-width: 22ch;
}

.page-head > .wrap > p {
  margin-top: 0.85rem;
  max-width: 62ch;
  color: var(--ink-on-dark-soft);
  font-size: var(--step-1);
  line-height: 1.55;
}

.migas {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
  font-size: 0.8125rem;
  color: var(--ink-on-dark-soft);
}

.migas a { color: var(--mint); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* ===========================================================================
   Formulario por pasos
   =========================================================================== */

.paso {
  display: grid;
  gap: 1rem 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
}

.paso:last-of-type { border-bottom: 0; }

@media (min-width: 44rem) {
  .paso { grid-template-columns: 2.75rem minmax(0, 1fr); }
}

.paso-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  background: var(--brand);
  color: oklch(1 0 0);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}

.paso--final .paso-num { background: var(--mint); color: var(--brand-dark); }

.paso-cuerpo h2 { font-size: var(--step-2); margin-bottom: 0.35rem; }
.paso-cuerpo > p.muted { max-width: 64ch; font-size: 0.9375rem; }

.recaudos {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* --- Flyer de apoyo junto al formulario --- */
.flyer-aside {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  background: var(--brand-wash);
}

@media (min-width: 44rem) {
  .flyer-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); }
}

.flyer-aside h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.flyer-aside .gallery-item { border-radius: var(--r-md); box-shadow: var(--shadow-md); }

/* ===========================================================================
   Confirmación de solicitud
   =========================================================================== */

.sello-ok {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
  border-radius: var(--r-full);
  background: var(--mint);
  color: var(--brand-dark);
  animation: sello 620ms var(--ease-out) both;
}

@keyframes sello {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.linea-tiempo { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }

.linea-tiempo li {
  position: relative;
  padding: 0 0 1.35rem 2.15rem;
  border-left: 2px solid var(--line);
}

.linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 0; }

.linea-tiempo li::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0.25rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 2px solid var(--line-strong);
}

.linea-tiempo li[data-estado="hecho"] { border-left-color: var(--accent); }
.linea-tiempo li[data-estado="hecho"]::before { background: var(--accent); border-color: var(--accent); }

.linea-tiempo li[data-estado="actual"]::before {
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

.linea-tiempo strong { display: block; font-size: 0.9375rem; }
.linea-tiempo span { font-size: 0.8125rem; color: var(--ink-soft); }

/* ===========================================================================
   Leyenda de estados
   =========================================================================== */

.leyenda {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}

.leyenda h2 {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.leyenda dl { display: grid; gap: 0.75rem; margin: 0; }

.leyenda dl > div {
  display: grid;
  gap: 0.35rem 1rem;
  align-items: baseline;
}

@media (min-width: 34rem) {
  .leyenda dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

.leyenda dd { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

/* ===========================================================================
   Acceso administrativo
   =========================================================================== */

.acceso {
  min-height: 100svh;
  display: grid;
  align-items: stretch;
}

@media (min-width: 58rem) {
  .acceso { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}

.acceso-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
  max-width: 30rem;
  width: 100%;
  margin-inline: auto;
}

.acceso-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  align-self: flex-start;
}

.acceso-volver:hover { color: var(--accent); }

.acceso-marca { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 2rem; }
.acceso-nombre { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.acceso-sub { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

.acceso h1 { font-size: var(--step-2); }

.acceso .hint {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.acceso .hint svg { flex-shrink: 0; margin-top: 0.15rem; }

.acceso-arte {
  display: none;
  place-content: center;
  padding: 3rem;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: var(--ink-on-dark);
  text-align: center;
}

@media (min-width: 58rem) { .acceso-arte { display: grid; } }

.acceso-arte img { width: min(16rem, 60%); margin: 0 auto 2rem; opacity: 0.95; }

.acceso-arte p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  color: oklch(1 0 0);
}

/* ===========================================================================
   Página Nosotros
   =========================================================================== */

.nosotros-intro {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 54rem) {
  .nosotros-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.nosotros-media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.nosotros-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Cifras sueltas, sin caja: no son tarjetas de producto. */
.hechos {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.hechos dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hechos dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* --- Cierre con llamada a la acción --- */
.cierre {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  background: var(--brand-wash);
}

@media (min-width: 46rem) {
  .cierre { grid-template-columns: minmax(0, 1fr) auto; }
}

.cierre h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.cierre p { color: var(--ink-soft); font-size: 0.9375rem; max-width: 52ch; }

/* ===========================================================================
   Textos largos sin espacios
   ---------------------------------------------------------------------------
   Un correo como colegiopsicologosaragua01@gmail.com no tiene dónde partirse:
   en una columna estrecha se salía del contenedor y empujaba toda la página
   a lo ancho. Se le permite romper, pero solo donde hace falta.
   =========================================================================== */

.footer-contact a,
.footer-contact span,
.contact-item p,
.contact-item a,
.enlaces-sede p,
.result-meta span,
.dato dd {
  overflow-wrap: anywhere;
}

/* La rejilla debe poder encogerse: sin esto, `min-width: auto` de las
   columnas del grid impide que el contenido largo se ajuste. */
.footer-grid > *,
.contact-layout > *,
.nosotros-intro > * { min-width: 0; }

/* Datos de contacto en dos columnas cuando hay sitio: una lista de cinco
   renglones a lo largo de una página ancha deja medio lienzo vacío. */
@media (min-width: 46rem) {
  .contact-info--doble {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }

  .contact-info--doble .contact-item:nth-last-child(-n+2) { border-bottom: 0; }
}

/* En pantallas muy estrechas el CTA de la cabecera se aprieta un poco para
   dejar sitio a la marca y al botón de menú. Son 2 px de diferencia, pero
   bastan para que la página gane scroll horizontal. */
/* Teléfonos muy estrechos (≤384px). En 320px la marca, el botón "Agremiarse"
   y la hamburguesa se pasaban por 2px y sacaban la página entera; el sobrante
   es poco, pero basta para que el navegador deje desplazar a los lados y el
   texto quede cortado. El nombre no se abrevia: se aprieta el aire. */
@media (max-width: 24rem) {
  .header-inner { gap: 0.5rem; }
  .header-actions { gap: 0.35rem; }
  .header-actions .btn--sm { padding-inline: 0.6rem; font-size: 0.76rem; }
  .brand { gap: 0.45rem; }
  .brand-name { font-size: 1.0625rem; }
  .brand img { width: 30px; height: 30px; }
  .nav-toggle { width: 2.25rem; height: 2.25rem; }
}

/* ===========================================================================
   Material: grano, luz y el Ψ como estructura
   ---------------------------------------------------------------------------
   Nada de esto cambia un color ni una palabra. Es lo que separa una página
   "correcta" de una que parece hecha por alguien: superficie con textura,
   luz que viene de un sitio, y el símbolo de la marca haciendo de material
   en vez de aparecer dos veces como adorno.
   =========================================================================== */

/* --- Grano ----------------------------------------------------------------
   Una capa de ruido al 3,5% sobre TODA la página. No se ve; se nota. Es lo
   que quita el aspecto de relleno plano y hace que las secciones se lean como
   una misma superficie en vez de como bloques de color pegados. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* En impresión el grano solo gasta tinta. */
@media print { body::after { display: none; } }

/* --- El Ψ como estructura -------------------------------------------------
   El logo, enorme y al 4,5%, detrás de las dos secciones clave. Se desplaza
   más lento que el contenido (--psi-y lo mueve el script), así que la página
   deja de ser un único plano. Va DETRÁS de todo: no toca la legibilidad. */
.section--marca {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--marca::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 50%;
  right: -6%;
  width: min(40rem, 78%);
  aspect-ratio: 1 / 1;
  opacity: 0.045;
  background: var(--psi-img) no-repeat center / contain;
  transform: translate3d(0, calc(-50% + var(--psi-y, 0px)), 0);
}

/* La segunda sección clave lo pone del otro lado: si las dos lo llevan en el
   mismo sitio, deja de leerse como composición y parece una marca de agua
   repetida. */
/* Alternan de lado: si las tres la llevan en el mismo sitio deja de leerse
   como composición y parece una marca de agua repetida. */
#agremiacion::before { right: auto; left: -8%; }
#pago::before { right: auto; left: -10%; width: min(30rem, 60%); opacity: 0.032; }

/* Teléfono: el símbolo se reduce y se queda quieto. A ese tamaño el paralaje
   no aporta y sí cuesta batería. */
@media (max-width: 48rem) {
  .section--marca::before { width: 22rem; opacity: 0.04; transform: translate3d(0, -50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .section--marca::before { transform: translate3d(0, -50%, 0) !important; }
}

@media print { .section--marca::before { display: none; } }

/* ===========================================================================
   Movimiento que le queda a cada cosa
   ---------------------------------------------------------------------------
   Había 21 elementos con EXACTAMENTE la misma entrada. Un desvanecido idéntico
   repetido veintiuna veces no se lee como intención: se lee como plantilla.
   Aquí cada tipo de elemento entra como le corresponde —un titular se enfoca,
   una imagen se acerca, una tarjeta sube— reutilizando el mismo sistema y la
   misma curva, sin añadir ni una dependencia.

   Nota de especificidad: el estado revelado de cada variante se escribe
   explícitamente porque empata en peso con la regla base y, al ir después en
   la hoja, ganaría por orden y dejaría el elemento congelado en su estado
   inicial.
   =========================================================================== */

/* Un titular se enfoca: entra desenfocado y poco desplazado. */
.js-reveal .section-head[data-reveal] {
  --reveal-y: 0.6rem;
  filter: blur(5px);
  transition:
    opacity var(--t-slow) var(--ease-out-soft),
    transform var(--t-slow) var(--ease-out-soft),
    filter var(--t-slow) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .section-head[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Una imagen no sube: se acerca. */
.js-reveal .feature-media[data-reveal],
.js-reveal .faq-media[data-reveal] {
  transform: scale(0.972);
}
.js-reveal .feature-media[data-reveal][data-revealed="true"],
.js-reveal .faq-media[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}

/* Las publicaciones son un mosaico: entran desde más cerca y escalonadas. */
.js-reveal .gallery-item[data-reveal] { transform: scale(0.93); }
.js-reveal .gallery-item[data-reveal][data-revealed="true"] { opacity: 1; transform: none; }

/* Una tarjeta de arancel sube un poco más: el recorrido se nota al comparar. */
.js-reveal .tariff[data-reveal] { --reveal-y: 1.9rem; }

/* Los avisos entran los últimos y casi sin desplazarse: rematan, no compiten. */
.js-reveal .notice[data-reveal] { --reveal-y: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .section-head[data-reveal],
  .js-reveal .feature-media[data-reveal],
  .js-reveal .faq-media[data-reveal],
  .js-reveal .gallery-item[data-reveal] {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

/* ===========================================================================
   Peso visual donde no hay imagen
   ---------------------------------------------------------------------------
   Cuatro de las ocho secciones no tenían una sola imagen: eran bloques de
   texto flotando en relleno, y por eso se sentían las más huecas. En vez de
   meter fotos de archivo —que no dirían nada— cada tarjeta usa su PROPIO
   icono como material: enorme, al 4%, recortado por la esquina. Es el mismo
   recurso que el Ψ de fondo, a otra escala, así que la página se lee como un
   sistema y no como cuatro parches distintos.
   =========================================================================== */

.pay-card,
#agremiacion .card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.pay-card > h3 > svg,
#agremiacion .card > .badge > svg {
  /* El icono original sigue en su sitio y a su tamaño. */
  position: static;
}

.pay-card::after,
#agremiacion .card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -1.75rem;
  bottom: -2.25rem;
  width: 9.5rem;
  height: 9.5rem;
  opacity: 0.04;
  background: var(--psi-img) no-repeat center / contain;
  pointer-events: none;
}

/* La tarjeta destacada de agremiación lleva la marca en claro sobre oscuro. */
#agremiacion .card::after { opacity: 0.05; }

/* En teléfono la marca se reduce: a ancho completo una figura de 9,5rem
   compite con el texto en vez de acompañarlo. */
@media (max-width: 48rem) {
  .pay-card::after,
  #agremiacion .card::after { width: 6.5rem; height: 6.5rem; right: -1.25rem; bottom: -1.5rem; }
}

/* --- El número de cuenta, que es el dato que la gente viene a copiar ------ */
.pay-row dd .pay-value { font-size: 1.0625rem; letter-spacing: 0.01em; }

@media print {
  .pay-card::after,
  #agremiacion .card::after { display: none; }
}

/* ===========================================================================
   Mi cuenta (agremiados)
   ---------------------------------------------------------------------------
   Todo a la vista, sin pestañas: el estado arriba, y debajo datos, recaudos
   y contraseña, uno tras otro. Es el mismo público que la portada.
   =========================================================================== */

.cuenta { max-width: 60rem; }

.cuenta-estado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
}

.cuenta-dato {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.cuenta-dato-etq {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cuenta-dato strong { font-size: 1.0625rem; }

.cuenta-h2 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.cuenta-bajada { font-size: 0.9375rem; max-width: 62ch; }

/* Marca de «este dato lo valida el colegio», junto a la etiqueta. */
.cuenta-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  vertical-align: 0.05em;
}

.mis-recaudos {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.mi-recaudo {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: 1rem;
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}

/* El estado se lee en el fondo, no en un contorno. */
.mi-recaudo[data-estado="rechazado"] { background: color-mix(in oklch, var(--danger) 8%, var(--surface)); }
.mi-recaudo[data-estado="aprobado"] { background: color-mix(in oklch, var(--ok) 7%, var(--surface)); }
.mi-recaudo[data-estado="observado"] { background: color-mix(in oklch, var(--warn) 8%, var(--surface)); }

.mi-recaudo-cerrado {
  display: flex;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.mi-recaudo-cerrado svg { flex-shrink: 0; margin-top: 0.15rem; }

.mi-recaudo-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.mi-recaudo-cab > div { min-width: 0; }

.mi-recaudo-nota {
  display: flex;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--danger);
}

.mi-recaudo-nota svg { flex-shrink: 0; margin-top: 0.15rem; }

.mi-recaudo-ver {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

/* Dentro de la tarjeta el dropzone va compacto: la cabecera ya la puso el
   recaudo y aquí solo hace falta la franja para elegir el archivo. */
.mi-recaudo .dropzone { padding: 0.8rem; background: var(--surface); }

.cuenta-clave-obligatoria { max-width: 40rem; }

@media (max-width: 26rem) {
  .mi-recaudo-cab { flex-wrap: wrap; }
}

/* ===========================================================================
   Diálogos (SweetAlert2) con la voz del sitio
   ---------------------------------------------------------------------------
   Los botones son los mismos .btn de todo el sitio (buttonsStyling:false);
   aquí solo se ajusta la caja para que no parezca una pieza prestada.
   =========================================================================== */

.swal2-container { padding: 16px; }

.dlg.swal2-popup {
  width: min(32rem, 100%);
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: var(--r-lg);
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 60px oklch(0.2 0.05 276 / 0.25);
}

.dlg .dlg-titulo {
  padding: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}

.dlg .dlg-texto {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.dlg .dlg-acciones {
  gap: 0.6rem;
  width: 100%;
  margin-top: 1.4rem;
}

.dlg .dlg-acciones .btn { margin: 0; }

.dlg .swal2-icon { margin: 0.25rem auto 0.5rem; transform: scale(0.8); }

.dlg .dlg-input.swal2-textarea,
.dlg .dlg-input.swal2-input,
.dlg .dlg-input.swal2-file {
  width: 100%;
  margin: 1rem 0 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 0.9375rem;
  box-shadow: none;
}

.dlg .dlg-input.swal2-textarea { min-height: 6.5rem; padding: 0.7rem 0.85rem; }
.dlg .dlg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* Casilla «crear su usuario…»: una fila legible, no un checkbox perdido. */
/* Sin display propio: SweetAlert la muestra u oculta con estilo en línea, y
   forzarlo aquí dejaba una casilla vacía cuando no correspondía. */
.dlg .swal2-checkbox {
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-wash);
  text-align: left;
}

.dlg .swal2-checkbox input { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--accent); }
.dlg .swal2-checkbox .swal2-label { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); }

.dlg .dlg-pie { font-size: 0.8125rem; color: var(--ink-soft); border-top-color: var(--line); }
.dlg .dlg-validacion { margin: 0.75rem 0 0; font-size: 0.85rem; background: var(--danger-wash); color: var(--danger); }
.dlg .swal2-loader { border-color: var(--accent) transparent var(--accent) transparent; }

/* Formularios dentro de un diálogo (Usuarios). */
.dlg .dlg-form { text-align: left; }
.dlg .dlg-quien { margin: 0 0 0.9rem; font-weight: 600; color: var(--ink); text-align: center; }
.dlg .dlg-campo { display: grid; gap: 0.35rem; margin-top: 0.8rem; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.dlg .dlg-campo .input { font-weight: 400; }
.dlg .dlg-nota { margin-top: 0.5rem; font-size: 0.8rem; color: var(--ink-faint); }
.dlg .dlg-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.875rem; color: var(--ink); }
.dlg .dlg-check input { margin-top: 0.2rem; accent-color: var(--accent); }

.dlg .swal2-file { padding: 0.55rem 0.6rem; background: var(--surface-alt); }
.dlg .swal2-file::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}