/* ============================================================
   Pablo Juliano · «Tinta roja» para las páginas interiores
   (/eventos, /eventos/<localidad>, /gracias, /voluntarios,
   /confirmar, /baja, /actividad).

   Va DESPUÉS de site.css, voluntariado.css y del <style> de cada
   página: cambia los tokens viejos por los de marca.css y repinta
   los títulos, botones, formularios y bandas. Reglas del rojo: ver
   el encabezado de marca.css.
   ============================================================ */

:root {
  --font-serif: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rojo: #C8141C;
  --rojo-hondo: #A30F17;
  --rojo-afiche: #DA141A;
  --marino: #031336;
  --niebla: #F4F6FA;
  --rosa: #FDF0EF;

  --ink: #031336;
  --ink-secondary: #4A5568;
  --ink-tertiary: #5B6472;
  --navy: #031336;

  --accent: #C8141C;
  --accent-hover: #A30F17;
  --accent-surface: #FDF0EF;
  --accent-text: #A30F17;

  --red: #C8141C;
  --red-hover: #A30F17;
  --red-surface: #FDF0EF;
  --violet: #C8141C;
  --violet-surface: #FDF0EF;
  --violet-wash: #FDF0EF;
  --violet-text: #A30F17;

  --blue: #0B509E;
  --sun: #031336;
  --sun-hover: #0B2A5E;
  --sun-surface: #F4F6FA;
  --sun-text: #031336;
  --sky-wash: #F4F6FA;
  --sun-wash: #F4F6FA;
  --surface-warm: #F4F6FA;

  --band: #F4F6FA;
  --band-kicker: #4A5568;

  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 1px 0 rgba(3, 19, 54, 0.08);
  --shadow-lift: 0 1px 0 rgba(3, 19, 54, 0.08);
}

body { font-family: var(--font-sans); color: var(--marino); font-size: 17px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Nav: la firma PABLO / JULIANO con el trazo rojo ---------- */
body .site-nav {
  position: relative;
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(3, 19, 54, 0.12);
}
body .site-nav .container { height: auto; min-height: 84px; padding-top: 14px; padding-bottom: 14px; }
body .brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 22px;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--marino);
}
body .brand-text { display: block; width: min-content; white-space: normal; }
body .brand-dot {
  width: 46px;
  height: 4px;
  margin: 0;
  border-radius: 0;
  background: var(--rojo-afiche);
  align-self: flex-start;
  transform: rotate(-4deg);
}
body .nav-links a { font-size: 16px; font-weight: 600; color: var(--marino); }
body .nav-links a:hover { color: var(--marino); text-decoration: underline; text-decoration-color: var(--rojo-afiche); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body .nav-links a[aria-current="page"] { color: var(--rojo-hondo); }
@media (max-width: 640px) {
  body .brand { font-size: 20px; }
  body .nav-links a { font-size: 15px; }
}

/* ---------- Encabezado de página: título rojo + trazo marino ---------- */
body .page-hero { background: none; padding: 3rem 0 1.5rem; }
body .page-hero h1 {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(2.75rem, 9vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--rojo);
  margin: 0.8rem 0 1.2rem;
}
body .page-hero h1::after {
  content: '';
  display: block;
  width: min(200px, 50%);
  height: 7px;
  margin-top: 1.4rem;
  background: var(--marino);
  transform: rotate(-2deg);
  transform-origin: left center;
}
body .page-hero.centrado h1 { margin-left: auto; margin-right: auto; }
body .page-hero.centrado .bajada { margin-left: auto; margin-right: auto; }
body .page-hero.centrado h1::after { margin-left: auto; margin-right: auto; transform-origin: center; }
/* La ciudad en la página de cada encuentro: en marino, sin cursiva */
body .page-hero h1 .localidad { color: var(--marino); font-style: normal; }
body .page-hero .bajada { font-size: 1.1rem; line-height: 1.55; color: var(--marino); }

body .kicker {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-secondary);
}
body .kicker::before {
  width: 18px;
  height: 4px;
  border-radius: 0;
  background: var(--rojo-afiche);
  box-shadow: none;
  transform: rotate(-4deg);
}

/* ---------- Títulos que usaban la serif ---------- */
body .section-title,
body .relato h2,
body .form-card h2,
body .gracias h2,
body .gracias-final h2,
body .listo h2,
body .card h2,
body .estado-lista h2,
body .proximos-card h2,
body .encuentro-localidad,
body .encuentro-fecha .dia,
body .contador-colectivo strong {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
body .relato h2 { font-size: 2rem; }
body .form-card h2,
body .gracias h2,
body .listo h2,
body .gracias-final h2 { font-size: 2rem; color: var(--rojo); }
body .card h2 { font-size: 1.6rem; }
body .encuentro-localidad { font-size: clamp(1.9rem, 4vw, 2.4rem); text-transform: uppercase; }
body .section-title { color: var(--rojo); }

/* Lo que estaba en mayúscula chica pasa a minúscula */
body .tag,
body .lista-titulo,
body .encuentro-fecha .dia-semana,
body .encuentro-fecha .mes { letter-spacing: 0.02em; }
body .lista-titulo { text-transform: none; font-size: 1rem; color: var(--ink-secondary); }
body .tag { text-transform: none; font-size: 0.85rem; }

/* ---------- Botones ---------- */
body .btn {
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: 10px;
  border-width: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
}
body .btn:active { transform: translateY(1px); }
body .btn-primary { background: var(--rojo); color: #FFFFFF; }
body .btn-primary:hover { background: var(--rojo-hondo); box-shadow: none; }
body .btn-sun { background: var(--marino); color: #FFFFFF; }
body .btn-sun:hover { background: #0B2A5E; box-shadow: none; }
body .btn-ghost { background: transparent; color: var(--marino); box-shadow: inset 0 0 0 2px var(--marino); }
body .btn-ghost:hover { background: var(--marino); color: #FFFFFF; }
body .nav-links .btn { min-height: 44px; padding: 0 1rem; font-size: 1.1rem; color: #FFFFFF; background: var(--rojo); }
body .link-arrow { color: var(--marino); text-decoration: underline; text-decoration-color: var(--rojo-afiche); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Tarjetas y formularios ---------- */
body .card,
body .form-card {
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  background: var(--rosa);
}
body .campo label { font-size: 15px; font-weight: 600; color: var(--marino); }
body .campo .ayuda { font-size: 14px; color: var(--ink-secondary); }
body .campo input,
body .campo textarea,
body .campo select {
  min-height: 52px;
  border: 2px solid rgba(3, 19, 54, 0.22);
  border-radius: 10px;
  background-color: #FFFFFF;
  color: var(--marino);
  font-size: 17px;
}
body .campo textarea { min-height: 120px; padding-top: 0.8rem; }
body .campo select {
  padding: 0 42px 0 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23031336' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
body .campo input:focus,
body .campo textarea:focus,
body .campo select:focus { border-color: var(--marino); box-shadow: 0 0 0 3px rgba(11, 80, 158, 0.25); }
body input[type="checkbox"],
body input[type="radio"] { accent-color: var(--rojo); }

/* Errores en marino con borde (el rojo es para actuar, no para avisar) */
body .mensaje-estado.error {
  background: #FFFFFF;
  border: 2px solid var(--marino);
  color: var(--marino);
  font-weight: 600;
}
body .mensaje-estado.info { background: var(--niebla); border: 0; color: var(--marino); }

body .gracias .tilde,
body .listo .tilde { background: #FFFFFF; color: var(--rojo); }

/* ---------- Lista de encuentros (/eventos) ---------- */
body .encuentro {
  border: 0;
  border-radius: 14px;
  background: var(--niebla);
  box-shadow: none;
}
body .encuentro:hover { transform: none; box-shadow: inset 0 0 0 2px var(--marino); }
body .encuentro-fecha { border-radius: 10px; background: var(--rojo); }
body .encuentro-fecha .dia-semana,
body .encuentro-fecha .mes { color: #FFFFFF; }
body .encuentro-fecha::after { background: var(--marino); }
body .encuentro-ir {
  min-height: 48px;
  border-radius: 10px;
  background: var(--rojo);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
}
body .encuentro:hover .encuentro-ir { background: var(--rojo-hondo); }
body .estado-lista { border-radius: 14px; background: var(--niebla); }

/* ---------- Página de cada encuentro ---------- */
body .dato-chip { border: 2px solid rgba(3, 19, 54, 0.18); font-weight: 600; }
body a.dato-chip:hover { border-color: var(--marino); box-shadow: none; }
body .dato-chip.pendiente { background: var(--rosa); border-color: transparent; color: var(--rojo-hondo); }
body .paso-fila { border-radius: 10px; background: var(--niebla); }
body .paso-fila .num { background: var(--marino); }

/* ---------- Banda final (antes era marino con texto blanco) ---------- */
body .proximos-card {
  border-radius: 16px;
  background: var(--niebla);
  color: var(--marino);
}
body .proximos-card h2 { font-size: clamp(2rem, 5vw, 2.75rem); color: var(--rojo); }
body .proximos-card p { color: var(--marino); }
body .proximos-card .btn-sun { background: var(--rojo); color: #FFFFFF; }
body .proximos-card .btn-sun:hover { background: var(--rojo-hondo); box-shadow: none; }
body .proximos-card .btn-ghost { background: transparent; color: var(--marino); border-color: transparent; box-shadow: inset 0 0 0 2px var(--marino); }
body .proximos-card .btn-ghost:hover { background: var(--marino); color: #FFFFFF; }

/* ---------- Compartir y pie ---------- */
body .share-btn { width: 44px; height: 44px; border: 2px solid rgba(3, 19, 54, 0.22); color: var(--marino); }
body .share-btn:hover { color: var(--marino); border-color: var(--marino); background: #FFFFFF; }
body .site-footer { border-top: 1px solid rgba(3, 19, 54, 0.12); }
body .site-footer p { color: var(--ink-secondary); font-size: 14px; }
body .site-footer a { color: var(--marino); }
body .footer-social a { border: 2px solid rgba(3, 19, 54, 0.22); color: var(--marino); width: 44px; height: 44px; }
body .footer-social a:hover { border-color: var(--marino); color: var(--marino); }

/* ---------- «Contanos un poco de vos» en /voluntarios (mismas piezas que marca.css) ---------- */
body .mas-datos { margin-bottom: 1.1rem; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(3, 19, 54, 0.22); }
body .mas-datos summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
body .mas-datos summary::-webkit-details-marker { display: none; }
body .mas-datos summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-right: 2.5px solid var(--marino); border-bottom: 2.5px solid var(--marino); transform: rotate(45deg) translate(-2px, -2px); }
body .mas-datos[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
body .mas-datos .opcional { font-weight: 400; color: var(--ink-secondary); }
body .mas-datos > .campo { margin: 0; padding: 4px 16px 18px; }
body .mas-datos legend { margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--marino); }
body .opcion span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(3, 19, 54, 0.22); font-size: 15px; font-weight: 600; }
body .opcion input:checked + span { background: var(--marino); color: #FFFFFF; box-shadow: none; font-weight: 600; }
body .opcion input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }