/* ==========================================================================
   Componentes y layout — PyCon Panamá 2026

   Índice
   1. Layout          — container, section, page-header
   2. Encabezado      — header, navegación, submenú, botón móvil
   3. Hero            — portada de inicio
   4. Botones
   5. Tarjetas        — card-grid, card
   6. Acordeón        — preguntas frecuentes
   7. Contenido       — texto largo, enlaces
   8. Pie de página
   9. Formularios   — registro y ponentes
   10. Sedes
   11. Patrocinadores — niveles, rejilla de logos, estado pendiente

   Todas las media queries están en responsive.css.
   ========================================================================== */


/* ==========================================================================
   1. Layout
   ========================================================================== */

/* Un único contenedor centra todo el sitio con el mismo ancho y márgenes. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* Ritmo vertical uniforme entre bloques de contenido. */
.section {
  padding-block: var(--section-y);
}

/* Banda alterna para separar visualmente secciones consecutivas. */
.section--alt {
  background: var(--surface-muted);
  border-block: 1px solid var(--border-soft);
}

/* Encabezado de sección: título y, si aporta algo nuevo, una bajada. */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.section h2 {
  font-size: var(--fs-h2);
}

.section-text {
  max-width: var(--measure);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* Cabecera de las páginas internas: da jerarquía y evita que el contenido
   arranque pegado al header. */
.page-header {
  padding-block: calc(var(--section-y) * 0.75);
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
  border-bottom: 1px solid var(--border-soft);
}

.page-header .section-header {
  margin-bottom: 0;
}

.page-header h1 {
  font-size: var(--fs-h2);
}


/* ==========================================================================
   2. Encabezado
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

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

/* --- Navegación ---------------------------------------------------------- */

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-list a,
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.nav-list a:hover,
.submenu-toggle:hover {
  color: var(--accent);
  background: var(--accent-softer);
}

/* Página actual: el usuario siempre sabe dónde está. */
.nav-list a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
}

/* --- Submenú ------------------------------------------------------------- */

.nav-item-has-children {
  position: relative;
}

.submenu-toggle::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: var(--space-2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}

.nav-item-has-children.open > .submenu-toggle::after {
  transform: translateY(1px) rotate(-135deg);
}

.submenu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 30;
  display: none;
  min-width: 230px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.nav-item-has-children:hover .submenu,
.nav-item-has-children:focus-within .submenu,
.nav-item-has-children.open .submenu {
  display: block;
}

.submenu a {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* --- Botón de menú (móvil) ----------------------------------------------- */

.nav-toggle {
  display: none;               /* responsive.css lo muestra en móvil */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;                 /* área táctil mínima recomendada */
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: background var(--transition);
}

.nav-toggle:hover {
  background: var(--accent-soft);
}

/* Tres barras horizontales que se cruzan al abrir. */
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: transform var(--transition), opacity var(--transition);
}

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

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

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


/* ==========================================================================
   3. Hero
   ========================================================================== */

.hero-section {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
}


/* ==========================================================================
   Forms
   ========================================================================== */

.container form {
  max-width: 820px;
  margin: 0 auto;
}

.form-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 8px 24px rgba(2,6,23,0.06);
  border: 1px solid rgba(17,24,39,0.04);
}

label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: var(--input-padding);
  border-radius: var(--input-radius);
  font-size: var(--fs-base);
  color: var(--text);
  box-shadow: none;
  transition: box-shadow var(--transition), border-color var(--transition);
}

textarea { resize: vertical; min-height: 120px; max-height: 400px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(47,140,255,0.12);
  border-color: var(--accent);
}

/* Required field visual hint */
input:required, textarea:required, select:required {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
}

input:invalid, textarea:invalid {
  border-color: var(--color-error);
}

/* Buttons */
.btn { padding: var(--btn-padding); border-radius: var(--btn-radius); display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); border: 1px solid transparent; }
.btn-primary:hover { filter: brightness(0.96); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-color); border: 1px solid rgba(17,24,39,0.06); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } }

label { font-weight: 600; }

.form-note { font-size: 0.9rem; color: var(--text-secondary); margin-top: calc(var(--space-2) * -1); }

/* Form utilities inspired by python_panama_website (Bootstrap-like) */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; margin-bottom: var(--space-2); font-weight: 700; }
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 1rem);
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: calc(var(--input-radius) - 2px);
}
.form-control::placeholder { color: var(--text-secondary); }
.form-control:focus { box-shadow: 0 0 0 4px rgba(47,140,255,0.12); border-color: var(--accent); }
.form-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); background-position: right .75rem center, right .5rem center; background-size: .45rem .45rem, .45rem .45rem; background-repeat: no-repeat; padding-right: 2.5rem; }

.form-check { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.form-check-input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; }
.form-check-label { margin: 0; }

.alert { padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.alert-success { background: rgba(16,185,129,0.06); color: var(--color-success); border-left: 4px solid var(--color-success); }
.alert-danger { background: rgba(220,38,38,0.04); color: var(--color-error); border-left: 4px solid var(--color-error); }

.btn-lg { padding: 14px 22px; font-size: 1.05rem; }
.btn-outline-primary { background: transparent; border: 1px solid rgba(47,140,255,0.12); color: var(--accent); }

.form-info-box { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: rgba(47,140,255,0.03); }
.form-info-box i { font-size: 1.2rem; color: var(--accent); }
.data-protection-box { padding: var(--space-3); background: rgba(0,0,0,0.02); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }

.me-2 { margin-right: .5rem; }

button[type="submit"], .btn {
  cursor: pointer;
}

.form-message {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--form-message-bg);
  color: var(--text);
}

.form-message.error { border-left: 4px solid var(--color-error); color: var(--color-error); background: rgba(220,38,38,0.04); }
.form-message.success { border-left: 4px solid var(--color-success); color: var(--color-success); background: rgba(5,150,105,0.04); }

.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }

@media (max-width: 600px) {
  .form-actions { flex-direction: column; align-items: stretch; }
}

.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--space-7);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-section h1 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-5);
}

.hero-section h1 span {
  color: var(--accent);
}

.hero-text {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
  color: var(--text-secondary);
}

.hero-tagline {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* El dato es el titular de la tarjeta: no necesita un rótulo que lo anuncie. */
.hero-card h2 {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h3);
}

.hero-card ul {
  display: grid;
  gap: var(--space-3);
}

.hero-card li {
  position: relative;
  padding-left: var(--space-5);
}

.hero-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * 0.5em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--highlight);
}


/* ==========================================================================
   4. Botones
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  border: none;
  min-height: 48px;            /* área táctil cómoda en móvil */
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background-color var(--transition), color var(--transition),
    transform var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn-secondary {
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}


/* ==========================================================================
   5. Tarjetas
   ========================================================================== */

/* Rejilla que se reacomoda sola y siempre llena la fila. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-5);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;                /* todas las tarjetas de una fila igualan alto */
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card h3 {
  font-size: var(--fs-h3);
}

.card p {
  color: var(--text-secondary);
}

/* Tarjeta que es un enlace: el título hace de rótulo, sin un "ver más" que
   repita lo que el título ya dice. Cada tarjeta toma un color de la paleta
   secundaria en su borde superior, en el orden en que aparece en el HTML;
   es decoración de posición, no una categoría con significado propio. */
.card--link h3 {
  color: var(--accent);
}

.card--link {
  --card-accent: var(--accent);
  border-top: 4px solid var(--card-accent);
}

.card-grid .card--link:nth-of-type(6n + 2) { --card-accent: var(--color-teal); }
.card-grid .card--link:nth-of-type(6n + 3) { --card-accent: var(--color-amber); }
.card-grid .card--link:nth-of-type(6n + 4) { --card-accent: var(--color-green); }
.card-grid .card--link:nth-of-type(6n + 5) { --card-accent: var(--color-sky); }
.card-grid .card--link:nth-of-type(6n + 6) { --card-accent: var(--color-orange); }

.card--link:hover,
.card--link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
  border-top-color: var(--card-accent);
}

/* --------------------------------------------------------------------------
   Agenda / cronograma
   -------------------------------------------------------------------------- */

.schedule-container {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.session-card {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.session-card > div {
  min-width: 0;
}

.session-time {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.session-title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-md);
  color: var(--text);
}

.session-speaker,
.session-bio {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.session-bio {
  margin-top: var(--space-2);
}

.session-badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-opening {
  border-left-color: var(--highlight);
}

.session-keynote {
  border-left-color: var(--accent);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
}

.session-break {
  border-left-color: var(--color-teal);
  background: rgba(14, 147, 196, 0.04);
}


/* ==========================================================================
   6. Acordeón (preguntas frecuentes)
   ========================================================================== */

.details-accordion {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}

.details-accordion details {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.details-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 700;
  list-style: none;
}

/* Oculta el triángulo nativo en Safari/Chrome */
.details-accordion summary::-webkit-details-marker {
  display: none;
}

.details-accordion summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.details-accordion details[open] summary::after {
  content: "–";
}

.faq-answer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  color: var(--text-secondary);
}


/* ==========================================================================
   7. Contenido
   ========================================================================== */

/* Bloque de texto largo (código de conducta, políticas). */
.prose {
  max-width: var(--measure);
  color: var(--text-secondary);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h3 {
  margin-top: var(--space-6);
  color: var(--text);
  font-size: var(--fs-h3);
}

.prose ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
  list-style: disc;
}

.internal-link,
.prose a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.internal-link:hover,
.prose a:hover {
  color: var(--accent-hover);
}

/* --- Documento largo (código de conducta, políticas) -------------------- */

.prose h2 {
  margin-top: var(--space-7);
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ol {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
  list-style: decimal;
}

.prose strong {
  color: var(--text);
}

/* Un botón dentro de un bloque de texto largo conserva su propio color. Sin
   esto, `.prose a` —una clase más un tipo— le gana en especificidad a
   `.btn-primary` y el texto del botón queda del mismo color que su fondo, es
   decir, invisible. */
.prose .btn {
  text-decoration: none;
}

.prose .btn-primary {
  color: var(--btn-primary-color);
}

.prose .btn-secondary {
  color: var(--btn-secondary-color);
}

/* Bloque destacado dentro del texto: la regla que no se puede pasar por alto. */
.prose .callout {
  padding: var(--space-4) var(--space-5);
  background: var(--accent-softer);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}

.prose .callout > * + * {
  margin-top: var(--space-3);
}

/* Variante para lo urgente: qué hacer si hay alguien en peligro. */
.prose .callout--urgent {
  background: rgba(255, 202, 58, 0.14);
  border-left-color: var(--highlight);
}

/* Índice del documento: navegación, no lectura. */
.doc-toc {
  max-width: var(--measure);
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.doc-toc h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.doc-toc ol {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
  list-style: decimal;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.doc-meta {
  max-width: var(--measure);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}


/* ==========================================================================
   8. Pie de página
   ========================================================================== */

.site-footer {
  margin-top: auto;
  padding-block: var(--space-6);
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.footer-social {
  display: flex;
  gap: var(--space-2);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* área táctil mínima */
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
}

.footer-social a:hover {
  color: var(--accent);
  background: var(--accent-softer);
}


/* ==========================================================================
   9. Formularios (Registro & Speaker)
   ========================================================================== */

.registro-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: start;
  width: 100%;
}

.registro-aside,
.registro-panel {
  min-width: 0;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 2vw, 2rem);
  box-sizing: border-box;
}

.registro-aside {
  background: linear-gradient(180deg, rgba(47, 140, 255, 0.08), rgba(255, 255, 255, 0.95));
}

.registro-aside ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-secondary);
}

.registro-aside li + li {
  margin-top: 0.6rem;
}

.registro-form {
  display: grid;
  gap: 1.1rem;
  width: 100%;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}

.field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}

.field label {
  font-weight: 700;
  color: var(--text);
  font-size: var(--fs-sm);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  box-sizing: border-box;
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(47, 140, 255, 0.18);
  border-color: var(--accent);
}

.checkboxes {
  display: grid;
  gap: 0.6rem;
}

.checkbox-item {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.checkbox-item input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
}

/* Aclaración común a las casillas: se alinea con su texto, no con la casilla. */
.checkbox-note {
  margin: 0;
  padding-left: 1.7rem;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.status-message {
  min-height: 1.5rem;
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--accent);
  word-break: break-word;
}

.status-message.error {
  color: #d9534f;
}

.status-message.success {
  color: #28a745;
}


/* ==========================================================================
   10. Sedes
   ========================================================================== */

/* Dos sedes: una fila en escritorio, apiladas en móvil. Mismo ancho mínimo
   que .card-grid para que el sitio mantenga un solo ritmo de tarjetas. */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-5);
}

.venue-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.venue-card h2 {
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.venue-mode {
  color: var(--text-secondary);
}

.venue-details {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.venue-detail dt {
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.venue-detail dd {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* El enlace al mapa queda al pie de la tarjeta aunque las direcciones
   ocupen distinto alto. */
.venue-map-link {
  margin-top: auto;
}


/* ==========================================================================
   11. Patrocinadores
   ========================================================================== */

/* Un nivel de patrocinio: su título y la rejilla de marcas que lo componen.
   El orden de los niveles y el de las marcas dentro de cada uno lo define el
   HTML, no el CSS: es una decisión de la organización, no de diseño. */
.sponsor-tier + .sponsor-tier {
  margin-top: var(--space-7);
}

.sponsor-tier-name {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.sponsor-tier-note {
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
}

/* Los logos vienen en proporciones dispares. La rejilla les da a todos la
   misma caja y el logo se ajusta dentro, para que ninguna marca se vea más
   grande solo porque su archivo lo es. */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}

/* Nivel principal: menos marcas por fila, cajas más altas. */
.sponsor-grid--lead {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 150px;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.sponsor-grid--lead .sponsor-card {
  min-height: 200px;
}

/* La tarjeta entera es el enlace al sitio del patrocinador: área de clic
   grande y un solo destino por marca, sin un «ver más» que repita el logo. */
a.sponsor-card:hover,
a.sponsor-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

.sponsor-card img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.sponsor-grid--lead .sponsor-card img {
  max-height: 104px;
}

.sponsor-card-name {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* Marca acordada pero todavía sin anuncio público: se reserva el espacio sin
   mostrar el logo ni el nombre. Nunca se presenta como confirmada. */
.sponsor-card--pending {
  background: var(--surface-muted);
  border-style: dashed;
  border-color: var(--border);
  box-shadow: none;
  color: var(--text-secondary);
}

.sponsor-card--pending .sponsor-card-name {
  font-style: italic;
}

/* Ningún patrocinador confirmado todavía: se dice, no se deja el hueco. */
.sponsor-empty {
  max-width: var(--measure);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}

.sponsor-empty > * + * {
  margin-top: var(--space-3);
}