:root{
  --bg:#fffdfd;
  --text:#000;
  --muted:#222;
  --line:#F2BC26;

  --orange:#F2BC26;
  --orange-soft: rgba(242,188,38,.18);
  --orange-200: rgba(242,188,38,.55);
  --orange-cta:#F2BC26;

  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.12);
  --radius:16px;
  --radius-lg:22px;

  /* ✅ Control central del padding del layout */
  --pad:24px;
}

*{ box-sizing:border-box; min-width:0; }

html,body{
  margin:0;
  width:100%;
  overflow-x:hidden;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; height:auto; }

a{ color:inherit; text-decoration:none; }

/* ✅ Unifica contenedor (tú usas a36-container en el index) */
.a36-container,
.container{
  max-width:1100px;
  margin:0 auto;
  padding: var(--pad);
}

/* =========================
   NAV
   ========================= */

/* =========================
   NAV  (FIX: 1 sola línea en escritorio)
   ========================= */

.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:72px;
}

/* Logo */
.brand{
  font-size:42px;
  font-weight:900;
  letter-spacing:-.03em;
  text-transform:none;
  flex:0 0 auto;        /* ✅ no se aplasta */
  white-space:nowrap;   /* ✅ nunca parte */
}

/* Menú desktop */
.menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;

  flex:1 1 auto;        /* ✅ ocupa el espacio restante */
  min-width:0;

  flex-wrap:nowrap;     /* ✅ PROHIBIDO saltar a otra línea */
  white-space:nowrap;   /* ✅ mantiene todo en una línea */
}

.menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:14px;
  background:var(--orange);
  font-weight:900;
  font-size:16px;

  white-space:nowrap;   /* ✅ “Necesito un profesional” no se parte */
}

/* ✅ FIX hamburguesa: barras una encima de otra */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  padding:10px;
}

.nav-toggle .bar{
  display:block !important;
  width:26px;
  height:2px;
  background:#111;
  border-radius:2px;
  margin:0 !important;
}

/* ✅ Ajuste fino en pantallas “justas” para que siga en 1 línea */
@media (max-width: 1100px){
  .brand{ font-size:38px; }
  .menu{ gap:8px; }
  .menu a{ padding:9px 12px; font-size:15px; }
}

/* =========================
   MOBILE (menú hamburguesa)
   ========================= */

@media (max-width: 820px){
  .nav-inner{ flex-wrap:nowrap; }
  .brand{ font-size:34px; }

  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }

  .menu{
    position:absolute;
    left:0; right:0;
    top:72px;
    display:block;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:10px 18px 16px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);

    max-height:0;
    overflow:hidden;
    transition:max-height .2s ease;

    white-space:normal;     /* ✅ en móvil sí permite varias líneas */
  }

  .menu a{
    display:block;
    margin:10px 0;
    width:100%;
    text-align:center;
    border-radius:16px;
    white-space:normal;     /* ✅ en móvil puede partir texto */
  }

  body.nav-open .menu{ max-height:420px; }
}

/* =========================
   HERO
   ========================= */

.a36-hero{
  padding: 24px 0 10px;
}

.a36-hero img{
  width:100%;
  max-width:980px;
  border-radius:12px;
}

/* =========================
   CTA SECTIONS (tipos)
   ========================= */

.a36-cta{
  padding: 18px 0;
}

.a36-cta h2{
  margin:0;
  color:#d39b00;
  letter-spacing:.5px;
}

.a36-cta p{
  margin:10px 0 12px;
  color:#d39b00;
}

.a36-cta .cta-btn{
  display:inline-block;
  background:#d39b00;
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-size:14px;
}

/* =========================
   ABOUT – f16.png (✅ FIX DEFINITIVO)
   ========================= */

.a36-about{
  padding: 10px 0 24px;
}

.a36-about-title{
  text-align:center;
  margin:0 0 14px;
  color:#d39b00;
}

/* El contenedor del banner controla tamaño y evita overflow */
.a36-about-banner{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  line-height:0;
  background:#000; /* por si tarda en cargar */
}

/* ✅ Aquí está la magia: en móvil tendrá “presencia” como foto 4 */
.a36-about-banner img{
  width:100%;
  height: clamp(180px, 42vw, 420px);
  object-fit: cover;
  object-position: center;
  display:block;
}

/* Edge-to-edge SOLO en móvil, sin 100vw hacks raros */
@media (max-width: 900px){
  :root{ --pad:16px; }

  .a36-about-banner{
    border-radius:0;
    /* saca el banner del padding del contenedor */
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
  }
}

/* =========================
   COLLAGE 2x2 (responsive)
   ========================= */

.a36-collage{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  max-width:680px;
  margin:26px auto 0;
}

.a36-collage img{
  width:100%;
  border-radius:12px;
}

@media (max-width: 520px){
  .a36-collage{
    grid-template-columns:1fr;
  }
}

/* =========================
   SECCIONES grandes con imagen centrada
   ========================= */

.a36-big-title{
  margin:0 0 14px;
  color:#d39b00;
  letter-spacing:.5px;
  text-align:center;
}

.a36-big-img{
  width:100%;
  max-width:980px;
  border-radius:12px;
}

/* 2 columnas -> 1 columna en móvil */
.a36-two-col{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 820px){
  .a36-two-col{ grid-template-columns:1fr; }
}

/* SOBRE NOSOTROS bloque */
.a36-about-block{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:0;
  overflow:hidden;
  border-radius:12px;
}
@media (max-width: 820px){
  .a36-about-block{ grid-template-columns:1fr; }
  .a36-about-block > div:last-child{ border-radius:0; }
}

.a36-about-block img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.a36-yellow{
  background:#F2BC26;
  padding:18px;
}

.a36-yellow h3{
  margin:0 0 10px;
  color:#111;
  letter-spacing:.6px;
}

.a36-yellow p{
  margin:0;
  color:#111;
  line-height:1.35;
  font-size:12px;
}

/* HISTORIAS grid */
.a36-quotes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:stretch;
}
@media (max-width: 900px){
  .a36-quotes{ grid-template-columns:1fr; }
}

.a36-quote{
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  text-align:left;
}

.a36-quote .mark{
  width:44px;height:44px;
  border-radius:10px;
  background:#F2BC26;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  margin-bottom:10px;
}

/* =========================
   MOBILE (general + menú hamburguesa)
   ========================= */

@media (max-width: 820px){
  .nav-inner{ flex-wrap:nowrap; }
  .brand{ font-size:34px; }

  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }

  .menu{
    position:absolute;
    left:0; right:0;
    top:72px;
    display:block;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:10px 18px 16px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);

    max-height:0;
    overflow:hidden;
    transition:max-height .2s ease;
  }
  .menu a{
    display:block;
    margin:10px 0;
    width:100%;
    text-align:center;
    border-radius:16px;
  }
  body.nav-open .menu{ max-height:420px; }

  /* Hero no debe “romper” */
  .a36-hero img{ border-radius:12px; }
}

/* =========================================================
   UI KIT (forms, botones, cards) — NO rompe lógica, solo pinta bien
   ========================================================= */

h1,h2,h3{ letter-spacing:-.02em; }
h2{ font-size: clamp(22px, 2.8vw, 34px); margin: 10px 0 10px; }
.sub{ color:#555; margin: 6px 0 14px; }
.p{ color:#222; line-height:1.5; }
.orange{ color: var(--orange); font-weight:800; }

hr{ border:none; border-top:1px solid rgba(0,0,0,.08); }

.form{
  width:100%;
  max-width: 820px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding:16px;
}

.label{
  display:block;
  font-weight:800;
  font-size: 14px;
  margin: 6px 0 8px;
}

.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 16px; /* ✅ iOS no hace zoom */
  outline: none;
}
.input:focus{
  border-color: rgba(242,188,38,.8);
  box-shadow: 0 0 0 4px rgba(242,188,38,.18);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.06);
  background: var(--orange);
  color:#111;
  font-weight: 900;
  letter-spacing:.02em;
  padding: 12px 14px;
  border-radius: 16px;
  cursor:pointer;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.btn:hover{ filter: brightness(.98); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.btn.secondary{
  background: #fff;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:none;
}

.out{
  margin-top:12px;
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(242,188,38,.12);
  border: 1px solid rgba(242,188,38,.25);
}

.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);
}
.card.soft{
  background: rgba(242,188,38,.10);
  border:1px solid rgba(242,188,38,.22);
  box-shadow:none;
}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:720px){
  .row{ grid-template-columns:1fr; }
  .actions{ flex-direction:column; }
  .btn{ width:100%; }
  .form{ padding:14px; }
}

/* =========================================================
   CHAT — pantalla completa, grande, legible, MUY móvil-friendly
   ========================================================= */

/* ✅ IMPORTANTE: para que el chat use el alto REAL del móvil (iOS incluido) */
.chat-page{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* antes: min-height: calc(100vh - 120px); */
  height: calc(100dvh - 120px);  /* 🔥 dvh = viewport real en móvil */
  min-height: 0;                 /* 🔥 permite encoger */
}

.chat-title{
  margin: 8px 0 0;
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight: 1000;
  letter-spacing: .02em;
}

.chat-mode-actions .btn{
  flex:1;
}

/* ✅✅✅ AQUÍ ESTÁ EL ARREGLO DEL “HUECO ROJO” */
.chatbox{
  flex: 1;
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow-y:auto;

  min-height: 0;    /* 🔥 clave: NO forzar altura mínima */
  max-height: none; /* 🔥 no limites */
}

/* Mensajes */
.msg{ display:flex; margin: 10px 0; }
.msg.me{ justify-content:flex-end; }
.msg.bot{ justify-content:flex-start; }

.bubble{
  max-width: 82%;
  padding: 12px 14px;
  border-radius: 18px;
  line-height:1.35;
  font-size: 15px;
  border:1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.bubble.me{
  background: rgba(242,188,38,.22);
  border-color: rgba(242,188,38,.30);
}
.bubble.bot{
  background:#fff;
}

.chat-form{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  flex: 0 0 auto;   /* 🔥 NO se comprime */
}

#inputWrap{ width:100%; }

.chat-actions .btn{ flex: 1; }

@media (max-width:820px){
  .chatbox{
    padding: 12px;
    min-height: 0;     /* 🔥 aseguramos override */
    max-height: none;  /* 🔥 aseguramos override */
  }
  .bubble{ max-width: 92%; font-size: 16px; }
  .chat-mode-actions{ flex-direction:column; }
}

/* Footer */
.footer{
  margin: 18px 0 30px;
  opacity:.8;
  font-size: 13px;
}

/* =========================================================
   Banner azul (fazul.png) + texto encima (overlay) ✅ FIX cortes
   ========================================================= */

.a36-banner-overlay{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  line-height:0;
  background:#001b2b;
}

/* ✅ Más altura para que el texto siempre “quepa” */
.a36-banner-overlay .a36-about-banner-img{
  width:100%;
  height: clamp(260px, 46vw, 560px); /* antes era más bajo */
  object-fit: cover;
  object-position: 50% 45%;          /* encuadre un pelín mejor */
  display:block;
  filter: saturate(1.05) contrast(1.05);
}

/* Capa oscura */
.a36-banner-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.38) 45%,
    rgba(0,0,0,.30) 100%
  );
  pointer-events:none;
}

/* ✅ Texto: ahora TIENE padding real arriba y no se sale */
.a36-banner-text{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  /* clave: margen superior extra + safe-area */
  padding:
    calc(18px + env(safe-area-inset-top))
    clamp(14px, 3vw, 34px)
    18px;

  color:#fff;
  line-height:1.15;
}

/* ✅ Título: controlado para que no “corte” arriba */
.a36-banner-text h3{
  margin:0 0 10px;
  padding-top: 6px;                /* extra por si el iPhone recorta */
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: clamp(14px, 2.1vw, 26px);
  line-height:1.05;
  max-width: 920px;
  text-wrap: balance;
}

/* ✅ Párrafos: un pelín más compactos */
.a36-banner-text p{
  margin: 10px 0 0;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size: clamp(12px, 1.35vw, 16px);
  line-height:1.22;
  max-width: 980px;
  opacity:.96;
}

/* =========================================================
   Banner azul alineado con el resto de imágenes
   ========================================================= */

.a36-banner-overlay{
  border-radius:18px;      /* igual que las demás imágenes */
  margin: 0 auto;          /* centrado */
  max-width: 100%;
}

/* En móvil se comporta IGUAL que la imagen de debajo */
@media (max-width: 900px){
  .a36-banner-overlay{
    border-radius:16px;    /* mismo radio que cards/imágenes */
  }

  .a36-banner-overlay .a36-about-banner-img{
    height: 300px;         /* altura estable y elegante */
  }
}

/* ✅ Si quieres que en móvil NO recorte nada, activa esto:
   (por defecto lo dejo en cover porque se ve más pro)

@media (max-width: 900px){
  .a36-banner-overlay .a36-about-banner-img{
    object-fit: contain;
    background:#001b2b;
  }
}
*/
/* =========================================================
   CHAT — FIX: recortar chatbox en móvil para subir botones
   ========================================================= */

/* 1) NO obligues al chat a ocupar toda la pantalla */
.chat-page{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* ✅ quitamos el "full height" que provoca el hueco */
  min-height: 0 !important;
  height: auto !important;
}

/* 2) Chatbox con altura CONTROLADA (más bajo) */
.chatbox{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow-y:auto;

  /* ✅ clave: NO flex:1 -> no rellena el hueco */
  flex: 0 0 auto !important;

  /* ✅ altura normal en desktop/tablet */
  height: clamp(260px, 45vh, 520px);
}

/* 3) En móvil lo hacemos aún más bajo para que SUBAN los botones */
@media (max-width:820px){
  .chatbox{
    padding: 12px;
    height: clamp(220px, 34vh, 360px); /* 🔥 aquí se recorta el hueco */
  }
}

/* 4) El formulario no necesita cambios, pero aseguramos que no se estire */
.chat-form{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  flex: 0 0 auto;
}
/* =========================
   iOS Safari: evitar que la barra inferior tape el formulario
   ========================= */

/* Usa viewport real en móviles modernos */
.chat-page{
  min-height: 0;
  height: calc(100dvh - 120px);
}

/* Zona segura inferior (notch/barra) + extra para Safari */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --chat-bottom-gap: 92px; /* 🔥 sube/baja esto si quieres más aire */
}

/* El formulario se “pega” abajo pero por ENCIMA de la barra de Safari */
.chat-form{
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px);

  /* ✅ clave: deja espacio para la barra de Safari */
  padding-bottom: calc(var(--safe-bottom) + var(--chat-bottom-gap));
}

/* Para que el scroll no esconda el final del chat detrás del formulario */
.chatbox{
  scroll-padding-bottom: calc(var(--safe-bottom) + var(--chat-bottom-gap) + 20px);
}

/* En iPhone, además, añade margen global por si el form no es sticky por estructura */
@media (max-width:820px){
  body{
    padding-bottom: calc(var(--safe-bottom) + 20px);
  }
}
/* ✅ FIX: no asoma la “curvita naranja” del menú cuando está cerrado */
@media (max-width:820px){

  /* menú CERRADO */
  .menu{
    max-height: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: none; /* evita clicks fantasma */
  }

  /* menú ABIERTO */
  body.nav-open .menu{
    max-height: 520px !important;
    padding: 10px 18px 16px !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.12) !important;
    pointer-events: auto;
  }
}
/* =========================
   FOOTER
========================= */

.a36-footer{
  border-top:1px solid #e5e5e5;
  margin-top:60px;
  padding:40px 0;
  background:#fafafa;
}

.a36-footer-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}

.footer-link{
  font-size:18px;
  color:#555;
  text-decoration:underline;
}

.footer-link:hover{
  opacity:.7;
}

.footer-copy{
  font-size:16px;
  color:#777;
}

/* Responsive */
@media (max-width:768px){
  .a36-footer{
    padding:30px 16px;
  }
}
/* =========================
   LEGAL PAGE
========================= */

.legal-page{
  padding:60px 0;
}

.legal-page h1{
  font-size:32px;
  margin-bottom:30px;
}

.legal-page h2{
  margin-top:40px;
  font-size:22px;
}

.legal-page p,
.legal-page li{
  line-height:1.7;
  color:#333;
  font-size:16px;
}

.legal-page ul{
  margin-left:20px;
}

/* Cookies banner */
.a36-cookies{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:9999;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding:14px 14px;
  display:none;
}

.a36-cookies .row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}

.a36-cookies p{
  margin:0;
  color:#333;
  line-height:1.5;
  font-size:14px;
}

.a36-cookies .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.a36-btn{
  border:0;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:600;
}

.a36-btn.primary{
  background: var(--orange, #F2BC26);
  color:#000;
}

.a36-btn.secondary{
  background:#f3f3f3;
  color:#111;
}

.a36-cookies a{
  text-decoration:underline;
}

@media (max-width:640px){
  .a36-cookies .row{ flex-direction:column; }
  .a36-cookies .actions{ justify-content:flex-start; }
}
/* =========================
   DONACIONES (estilo Wikipedia-ish)
========================= */

.donate-page{ padding: 28px 0 60px; }

.donate-wrap{ max-width: 860px; }

.donate-title{ font-size: 34px; margin: 8px 0 8px; }
.donate-subtitle{ font-size: 16px; color: #444; margin: 0 0 18px; line-height: 1.5; }

.donate-card{
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
}

.donate-section-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.donate-tabs{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.donate-tab{
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  padding: 12px 10px;
  font-weight: 700;
  cursor: pointer;
}

.donate-tab.is-active{
  background: #2a4b8d; /* azul “wikipedia-ish” */
  border-color: #2a4b8d;
  color: #fff;
}

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

.donate-amt{
  height: 78px;
  border: 2px solid #d0d0d0;
  border-radius: 10px;
  background: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.donate-amt.is-selected{
  border-color: #2a4b8d;
  box-shadow: 0 0 0 3px rgba(42,75,141,.15);
}

.donate-other{
  height: 78px;
  border: 2px solid #d0d0d0;
  border-radius: 10px;
  background: #fff;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.donate-other-label{
  font-weight: 700;
  font-size: 16px;
  color: #111;
}

.donate-other-input input{
  width: 100%;
  height: 36px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 18px;
}

.donate-contact{ margin-top: 18px; }

.donate-radio{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0;
  color: #111;
}

.donate-radio input{ margin-top: 4px; }

.donate-legal{
  margin: 10px 0 0;
  color: #444;
  line-height: 1.5;
}

.donate-legal a{ text-decoration: underline; }

.donate-payments{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.pay-btn{
  border: 2px solid #d0d0d0;
  border-radius: 12px;
  background: #fff;
  padding: 16px 14px;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: #111;
}

.pay-btn:hover{ opacity: .85; }

.pay-card .pay-icons{
  font-weight: 700;
  color: #555;
  font-size: 14px;
}

.donate-bank{
  margin-top: 4px;
  text-align: left;
}

.donate-bank a{
  color: #2a4b8d;
  text-decoration: underline;
  font-weight: 700;
}

.donate-summary{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: #444;
}

.donate-summary strong{ color:#111; }

/* Responsive */
@media (max-width: 900px){
  .donate-wrap{ padding: 0 16px; }
}

@media (max-width: 720px){
  .donate-tabs{ grid-template-columns: 1fr; }
  .donate-amounts{ grid-template-columns: repeat(2, 1fr); }
  .donate-amt{ height: 74px; font-size: 20px; }
  .donate-other{ height: 74px; }
}
/* =========================
   HEADER / NAV
========================= */

.a36-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Contenedor de botones */
.a36-nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;        /* 🔥 IMPIDE SALTO DE LÍNEA */
  white-space:nowrap;      /* 🔥 Fuerza todo en una línea */
}

/* Botones del menú */
.a36-nav a{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:var(--orange);
  font-weight:600;
}

/* Evita que el logo empuje demasiado */
.a36-logo{
  flex-shrink:0;
}

/* =========================================================
   ACCESIBILIDAD WCAG 2.2 AAA — mejoras globales sin cambiar diseño
   ========================================================= */
.a36-skip-link{
  position:absolute;
  left:16px;
  top:10px;
  z-index:10000;
  transform:translateY(-160%);
  background:#111;
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.a36-skip-link:focus{ transform:translateY(0); outline:3px solid var(--orange); outline-offset:3px; }

.visually-hidden,
.a36-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid #111;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(242,188,38,.38);
}

:where(button,.btn,.a36-btn,.cta-btn,.a36-tab-btn,.donate-tab,.donate-amt,.pay-btn,[role="button"]){
  min-height:44px;
  min-width:44px;
}

:where(input,textarea,select)::placeholder{ color:#555; opacity:1; }
:where(input,textarea,select)[aria-invalid="true"]{ border-color:#9b1c1c!important; box-shadow:0 0 0 4px rgba(155,28,28,.12)!important; }
:where(label,.label,.a36-label){ cursor:pointer; }

[aria-disabled="true"],:disabled{ cursor:not-allowed!important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}

@media (prefers-contrast: more){
  :root{ --muted:#000; }
  .sub,.p,.a36-muted,.footer-copy{ color:#111!important; }
  .menu a,.cta-btn,.btn,.a36-btn{ border:2px solid #111; }
}