/*
Theme Name: Apoyo a Venezuela
Theme URI: https://example.com/apoyoavenezuela
Author: Codex
Description: Block theme para la asociacion Apoyo a Venezuela. Inspirado en patron one-page Astute, adaptado a registro humanitario.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.6.3
License: GNU General Public License v2 or later
License URI: https://https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apoyoavenezuela
*/

:root {
  --av-radius-sm: 4px;
  --av-radius-md: 6px;
  --av-radius-lg: 10px;
  --av-shadow-soft: 0 24px 60px rgba(45, 58, 74, 0.10);
  --av-shadow-card: 0 18px 40px rgba(45, 58, 74, 0.08);
  --av-grid-gap: clamp(1.2rem, 2vw, 2rem);
  --av-section-pad: clamp(2.5rem, 5vw, 5rem);
  --av-color-dark: #1f2a36;
}

body {
  font-family: var(--wp--preset--font-family--raleway), "Iowan Old Style", Georgia, serif;
  text-wrap: pretty;
  background: var(--wp--preset--color--surface);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.av-section-title,
.av-news-title,
.av-team-name,
.av-archive-title,
.av-service-minimal h3,
.av-step-card h3,
.av-testimonial-name {
  font-family: var(--wp--preset--font-family--oswald), "Avenir Next Condensed", "Impact", sans-serif;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ============================================================
   CONSTRUCTION BANNER (página en fase de construcción)
   ============================================================ */
.av-construction-banner {
  background: linear-gradient(90deg, #FFD166 0%, #FFB8A1 50%, #7BC8BE 100%);
  color: var(--wp--preset--color--ink);
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(45, 58, 74, 0.12);
}
.av-construction-inner {
  max-width: var(--av-shell-max, 1180px);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.45;
}
.av-construction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(45, 58, 74, 0.85);
  color: #FFD166;
  margin-top: 0.05rem;
}
.av-construction-text strong {
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  margin-right: 0.4rem;
}
.av-construction-mail {
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}
.av-construction-mail:hover {
  color: var(--wp--preset--color--brand-coral);
}

/* ============================================================
   PENDING-ACTION TOAST
   ============================================================ */
.av-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 24px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 520px;
  width: calc(100% - 2rem);
  padding: 0.95rem 1rem 0.95rem 1.1rem;
  background: linear-gradient(135deg, #2D3A4A 0%, #3b4f66 100%);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.av-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.av-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 209, 102, 0.22);
  color: #FFD166;
}
.av-toast-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  line-height: 1.4;
  font-size: 0.9rem;
}
.av-toast-title {
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: #FFD166;
}
.av-toast-msg {
  color: rgba(255, 255, 255, 0.92);
}
.av-toast-mail {
  color: #FFD166;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.av-toast-mail:hover { color: #FFB8A1; }
.av-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  transition: color 0.18s ease, background 0.18s ease;
}
.av-toast-close:hover {
  color: #FFD166;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 600px) {
  .av-construction-inner { flex-wrap: wrap; }
  .av-construction-text { font-size: 0.84rem; }
}

/* ============================================================
   BACKGROUND GLOBAL
   ============================================================ */
.wp-site-blocks {
  min-height: 100vh;
  background: var(--wp--preset--color--surface);
}

/* Defensive: prevent horizontal scroll on mobile viewports. Some absolutely
   positioned elements (timeline marker, JS-positioned labels) can extend
   past their parent's overflow:hidden boundary in the layout sense, which
   inflates body.scrollWidth and creates horizontal scroll. Using overflow-x:
   clip (vs hidden) keeps vertical scrolling unaffected and doesn't create
   a scroll container — it just clips the layout at the viewport edge. */
html, body {
  overflow-x: clip;
}

.wp-site-blocks > .alignfull,
.wp-site-blocks main > .alignfull {
  margin-block: 0;
}

.av-shell {
  width: min(1280px, calc(100vw - 48px));
  margin-inline: auto;
}

.av-shell--wide {
  max-width: min(1280px, calc(100vw - 48px)) !important;
  width: 100%;
}

.wp-block-site-title a,
.wp-block-navigation-item__content,
a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.av-topbar {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--surface);
  font-size: 0.82rem;
  padding-block: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.av-topbar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.av-topbar p { margin: 0; }

.av-topbar-contact,
.av-topbar-social {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.av-topbar-icon {
  display: inline-block;
  margin-right: 0.25rem;
  opacity: 0.85;
}

.av-topbar-sep {
  opacity: 0.5;
  margin-inline: 0.1rem;
}

.av-topbar-social-link {
  color: var(--wp--preset--color--surface);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.av-topbar-social-link:hover {
  color: var(--wp--preset--color--brand-sun);
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.av-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid rgba(45, 58, 74, 0.10);
}

.av-site-header .av-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.av-site-header .wp-block-site-logo img,
.av-site-header .av-site-logo-img {
  max-height: 110px;
  width: auto;
}

.av-primary-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 1.4rem;
  font-size: 0.92rem;
}

.av-primary-nav a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  font-weight: 500;
}

.av-primary-nav a:hover {
  color: var(--wp--preset--color--brand-coral);
}

.av-top-actions .wp-block-button__link {
  box-shadow: var(--av-shadow-card);
}

/* ============================================================
   BOTONES REUTILIZABLES
   ============================================================ */
.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.45rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  font-family: inherit;
}

.av-btn--primary {
  background: var(--wp--preset--color--brand-sky);
  color: #ffffff;
  box-shadow: var(--av-shadow-card);
}

.av-btn--primary:hover {
  background: color-mix(in srgb, var(--wp--preset--color--brand-sky) 88%, var(--wp--preset--color--ink) 12%);
  transform: translateY(-1px);
}

/* Hero primary donation = brand-aqua (verde de la paleta) */
.av-btn--primary.av-btn--donate,
.av-btn.av-btn--donate {
  background: var(--wp--preset--color--brand-aqua);
  color: #ffffff;
}
.av-btn--primary.av-btn--donate:hover,
.av-btn.av-btn--donate:hover {
  background: color-mix(in srgb, var(--wp--preset--color--brand-aqua) 88%, var(--wp--preset--color--ink) 12%);
  transform: translateY(-1px);
}

.av-btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border-color: rgba(45, 58, 74, 0.25);
}

.av-btn--ghost:hover {
  background: rgba(45, 58, 74, 0.06);
}

.av-btn--ghost-light {
  color: var(--wp--preset--color--surface);
  border-color: rgba(255, 255, 255, 0.4);
}

.av-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
}

.av-btn--link {
  background: transparent;
  color: var(--wp--preset--color--brand-coral);
  padding: 0.5rem 0;
  border-radius: 0;
}

.av-btn--block {
  width: 100%;
}

.av-btn--sm {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.av-hero-shell {
  position: relative;
  overflow: hidden;
  padding-inline: 0;
}

.av-hero-slider {
  position: relative;
  min-height: clamp(520px, 68vw, 880px);
}

.av-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: av-slide-fade 18s infinite;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* When a slide is the active one (visible), restore pointer events
 * so the CTA buttons remain clickable. The JS adds .av-hero-slide--active. */
.av-hero-slide--active {
  pointer-events: auto;
}

.av-hero-slide--one {
  background-image:
    linear-gradient(180deg, rgba(45, 58, 74, 0.04) 0%, rgba(45, 58, 74, 0.28) 48%, rgba(45, 58, 74, 0.74) 100%),
    url('./assets/images/hero-1-rescue-laguaira.jpg');
  animation-delay: 0s;
}

.av-hero-slide--two {
  background-image:
    linear-gradient(180deg, rgba(45, 58, 74, 0.04) 0%, rgba(45, 58, 74, 0.32) 48%, rgba(45, 58, 74, 0.78) 100%),
    url('./assets/images/hero-2-destruction-laguaira.jpg');
  animation-delay: 6s;
}

.av-hero-slide--three {
  background-image:
    linear-gradient(180deg, rgba(45, 58, 74, 0.04) 0%, rgba(45, 58, 74, 0.32) 48%, rgba(45, 58, 74, 0.78) 100%),
    url('./assets/images/hero-3-rubble-catialamar.jpg');
  animation-delay: 12s;
}

@keyframes av-slide-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  33%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}

.av-hero-slider--paused .av-hero-slide {
  animation-play-state: paused;
}

.av-hero-overlay {
  min-height: clamp(520px, 68vw, 880px);
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 4vw, 4rem);
}

.av-hero-shell::before {
  content: "";
  position: absolute;
  inset: 2% auto auto -8%;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.35) 0%, rgba(255, 209, 102, 0) 70%);
  z-index: 1;
  pointer-events: none;
}

.av-hero-shell::after {
  content: "";
  position: absolute;
  inset: auto -7% 6% auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(123, 200, 190, 0.24) 0%, rgba(123, 200, 190, 0) 72%);
  z-index: 1;
  pointer-events: none;
}

.av-hero-content-card {
  position: relative;
  z-index: 2;
  max-width: min(800px, 100%);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 235, 0.88));
  border: 1px solid rgba(45, 58, 74, 0.10);
  border-radius: var(--av-radius-md);
  box-shadow: var(--av-shadow-soft);
  backdrop-filter: blur(14px);
}

.av-hero-title {
  font-family: var(--wp--preset--font-family--oswald), "Avenir Next Condensed", "Impact", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin-block: 0.8rem 0.9rem;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(20, 28, 38, 0.55), 0 0 4px rgba(20, 28, 38, 0.35);
}

.av-hero-lede {
  font-family: var(--wp--preset--font-family--raleway), Georgia, serif;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  margin-bottom: 1.4rem;
  max-width: 60ch;
  text-shadow: 0 1px 12px rgba(20, 28, 38, 0.5);
}

.av-hero-eyebrow {
  color: rgba(255, 255, 255, 0.92) !important;
}

.av-hero-eyebrow::before {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Dark overlay behind hero text for readability */
.av-hero-overlay {
  background: linear-gradient(180deg, rgba(20, 28, 38, 0) 0%, rgba(20, 28, 38, 0) 35%, rgba(20, 28, 38, 0.55) 75%, rgba(20, 28, 38, 0.78) 100%);
  position: relative;
}

.av-hero-overlay .av-shell {
  position: relative;
  z-index: 2;
}

.av-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.av-hero-dots {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 3;
}

.av-hero-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  animation: av-dot-fade 18s infinite;
}

.av-hero-dot--one { animation-delay: 0s; }
.av-hero-dot--two { animation-delay: 6s; }
.av-hero-dot--three { animation-delay: 12s; }

.av-hero-dot--active,
.av-hero-dot:hover {
  background: var(--wp--preset--color--brand-sun) !important;
  transform: scale(1.4);
  animation: none !important;
  cursor: pointer;
}

.av-hero-dot:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-sun);
  outline-offset: 4px;
}

@keyframes av-dot-fade {
  0%   { background: rgba(255, 255, 255, 0.5); }
  4%   { background: var(--wp--preset--color--brand-sun); }
  33%  { background: var(--wp--preset--color--brand-sun); }
  38%  { background: rgba(255, 255, 255, 0.5); }
  100% { background: rgba(255, 255, 255, 0.5); }
}

/* ============================================================
   EYEBROW + SECTION TITLES
   ============================================================ */
.av-eyebrow {
  /* Modern minimal: short rule + uppercase tracked text. No pill, no border. */
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  color: var(--wp--preset--color--ink);
  margin: 0 0 0.4rem;
}

.av-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 2px;
  border-radius: 0;
  background: var(--wp--preset--color--brand-coral);
  flex: 0 0 2.2rem;
}

.av-eyebrow--dark {
  color: var(--wp--preset--color--ink);
  background: transparent;
  border: 0;
}

.av-section-title {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 1rem;
  font-weight: 600;
}

.av-section-title--light {
  color: var(--wp--preset--color--surface);
}

.av-section-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(36, 49, 60, 0.78);
  margin-bottom: 1.8rem;
  max-width: 60ch;
}

/* ============================================================
   OVERLAP METRICS
   ============================================================ */
.av-overlap-band {
  margin-top: -40px;
  position: relative;
  z-index: 5;
}

/* ============================================================
   CARDS BASE — modern flat panel (4px radius, hairline border, no shadow)
   ============================================================ */
.av-hero-card,
.av-surface-card,
.av-stat-card,
.av-panel-card,
.av-service-card,
.av-founder-quote,
.av-testimonial-card,
.av-countdown-card,
.av-about-text,
.av-about-figure {
  position: relative;
  border-radius: var(--av-radius-sm);
  border: 1px solid rgba(45, 58, 74, 0.10);
  background: var(--wp--preset--color--surface);
  box-shadow: none;
}

.av-hero-card {
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 235, 0.84));
  border: 1px solid rgba(45, 58, 74, 0.08);
}

.av-surface-card {
  background: #fff;
  border: 1px solid rgba(45, 58, 74, 0.08);
}

.av-panel-card {
  background: linear-gradient(180deg, rgba(33, 58, 74, 1), rgba(29, 49, 66, 0.94));
  color: white;
}

/* ============================================================
   METRICS GRID
   ============================================================ */
.av-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--av-grid-gap);
}

.av-metric-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  opacity: 0.85;
}

.av-stat-card {
  /* Colored card style — full brand-color background, white text, centered icon. */
  padding: 1.5rem 1.2rem 1.3rem;
  background: var(--wp--preset--color--ink);
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  position: relative;
  color: #ffffff;
  min-height: 240px;
  box-shadow: 0 4px 18px rgba(45, 58, 74, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Soft inner dividers (only between cards, not on first/last) */
.av-metric-grid--four .av-stat-card + .av-stat-card {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18), 0 4px 18px rgba(45, 58, 74, 0.10);
}
.av-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(45, 58, 74, 0.18);
}
.av-stat-card .av-stat-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  margin-bottom: 0.4rem;
}
.av-stat-card .av-stat-icon svg {
  width: 44px;
  height: 44px;
  stroke: #ffffff;
}
.av-stat-card h3 {
  font-family: var(--wp--preset--font-family--headings), sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  color: #ffffff;
  text-transform: none;
}
.av-stat-card p {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
  color: rgba(255, 255, 255, 0.94);
  flex: 1;
}
.av-stat-card .av-stat-readmore {
  display: inline-block;
  font-family: var(--wp--preset--font-family--headings), sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
  padding-bottom: 2px;
  margin-top: auto;
  padding-top: 0.6rem;
  transition: border-color 0.2s ease;
}
.av-stat-card .av-stat-readmore:hover {
  border-color: #ffffff;
}

/* Per-color background — each card uses its own brand color */
.av-stat-card--coral { background: var(--wp--preset--color--brand-coral); }
.av-stat-card--sun  { background: var(--wp--preset--color--brand-sun); }
.av-stat-card--aqua { background: var(--wp--preset--color--brand-aqua); }
.av-stat-card--sky  { background: var(--wp--preset--color--brand-sky); }

.av-stat-card--icon .av-stat-icon {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--wp--preset--color--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--ink);
  font-size: 1.25rem;
  font-weight: 700;
}
.av-stat-card--icon .av-stat-icon.av-stat-icon--sun   { color: var(--wp--preset--color--brand-sun); border-color: var(--wp--preset--color--brand-sun); }
.av-stat-card--icon .av-stat-icon.av-stat-icon--aqua  { color: var(--wp--preset--color--brand-aqua); border-color: var(--wp--preset--color--brand-aqua); }
.av-stat-card--icon .av-stat-icon.av-stat-icon--coral { color: var(--wp--preset--color--brand-coral); border-color: var(--wp--preset--color--brand-coral); }
.av-stat-card--icon .av-stat-icon.av-stat-icon--sky   { color: var(--wp--preset--color--brand-sky); border-color: var(--wp--preset--color--brand-sky); }
.av-stat-icon.av-stat-icon--sun   { color: var(--wp--preset--color--brand-sun); border-color: var(--wp--preset--color--brand-sun); }
.av-stat-icon.av-stat-icon--aqua  { color: var(--wp--preset--color--brand-aqua); border-color: var(--wp--preset--color--brand-aqua); }
.av-stat-icon.av-stat-icon--coral { color: var(--wp--preset--color--brand-coral); border-color: var(--wp--preset--color--brand-coral); }
.av-stat-icon.av-stat-icon--sky   { color: var(--wp--preset--color--brand-sky); border-color: var(--wp--preset--color--brand-sky); }

.av-stat-card strong {
  display: block;
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  line-height: 1;
  color: var(--wp--preset--color--ink);
  margin-bottom: 0.45rem;
}

.av-stat-card span {
  font-size: 0.92rem;
  color: rgba(36, 49, 60, 0.78);
  line-height: 1.4;
}

.av-icon-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
  font-weight: 700;
}

/* ============================================================
   FOUNDER (PRESIDENT MESSAGE)
   ============================================================ */
.av-founder-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: stretch;
}

.av-founder-figure {
  margin: 0;
  position: relative;
}

.av-founder-photo {
  height: 100%;
  min-height: 380px;
  border-radius: var(--av-radius-md);
  background-size: cover;
  background-position: center;
  box-shadow: var(--av-shadow-card);
}

.av-founder-photo--one {
  background-image:
    linear-gradient(180deg, rgba(36, 49, 60, 0.10), rgba(36, 49, 60, 0.30)),
    url('./assets/images/gallery-community-2.png');
}

.av-founder-caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(255, 255, 255, 0.94);
  padding: 0.7rem 1rem;
  border-radius: var(--av-radius-sm);
  box-shadow: var(--av-shadow-card);
  font-size: 0.9rem;
}

.av-founder-caption strong { display: block; }
.av-founder-caption span { color: rgba(36, 49, 60, 0.7); }

.av-founder-quote {
  background: #fff;
  border: 1px solid rgba(45, 58, 74, 0.08);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.av-founder-blockquote {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
  margin: 0 0 1.2rem;
  font-style: italic;
  border-left: 4px solid var(--wp--preset--color--brand-coral);
  padding-left: 1.1rem;
}

.av-founder-name {
  font-size: 0.92rem;
  color: rgba(36, 49, 60, 0.7);
  margin: 0;
}

/* ============================================================
   ABOUT CON FOTO LATERAL
   ============================================================ */
.av-about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: stretch;
}

.av-about-text {
  background: #fff;
  border: 1px solid rgba(45, 58, 74, 0.08);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  /* Grid children: default min-width:auto forces intrinsic content width,
     which makes .av-about-checks (an inner grid) overflow its parent.
     Setting min-width:0 lets the column shrink to its allocated track. */
  min-width: 0;
}

.av-about-checks {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.6rem;
  display: grid;
  gap: 0.65rem;
  /* Single-column grid defaults to auto, which is also intrinsic-content-width.
     Force it to take 100% of the available column width and wrap text. */
  grid-template-columns: minmax(0, 1fr);
}

.av-about-checks li {
  position: relative;
  padding-left: 3.4rem;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(36, 49, 60, 0.86);
  /* Long Spanish words like "comunicación" shouldn't blow up the column */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
}

.av-about-checks li::before {
  content: none;
}

/* Person SVG bullets (override the default ✓ circle) */
.av-about-checks--persons .av-about-check-mark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.6rem;
  background: transparent;
}

.av-about-checks--persons .av-about-check-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* No tinted badge — just the person SVG as bullet */
.av-about-checks--persons .av-about-check-mark { background: transparent; }

.av-about-figure {
  margin: 0;
  min-height: 380px;
  /* Same fix as .av-about-text: prevent intrinsic content width from
     expanding the grid track past the viewport. */
  min-width: 0;
}

.av-about-photo {
  height: 100%;
  min-height: 380px;
  border-radius: var(--av-radius-md);
  background-size: cover;
  background-position: center;
  box-shadow: var(--av-shadow-card);
}

.av-about-photo--one {
  background-image:
    linear-gradient(180deg, rgba(36, 49, 60, 0.06), rgba(36, 49, 60, 0.20)),
    url('./assets/images/gallery-community-1.png');
}

/* ============================================================
   SERVICES 6 CARDS
   ============================================================ */
.av-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--av-grid-gap);
  margin-top: 1.6rem;
}

.av-service-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(45, 58, 74, 0.10);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-radius: var(--av-radius-sm);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.av-service-card:hover {
  transform: translateY(-2px);
  border-color: var(--wp--preset--color--ink);
}

.av-service-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  display: inline-flex;
  background: transparent;
  border: 1.5px solid var(--wp--preset--color--ink);
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--wp--preset--color--brand-aqua), var(--wp--preset--color--brand-sky));
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
}

.av-service-card h3 {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: 1.4rem;
  margin: 0;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
}

.av-service-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(36, 49, 60, 0.78);
  margin: 0;
  flex: 1;
}

.av-service-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wp--preset--color--brand-sky);
  text-decoration: none;
}

.av-service-link:hover {
  text-decoration: underline;
}

.av-archive-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.av-service-link--archive {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--wp--preset--color--brand-sky);
  border-radius: 999px;
  color: var(--wp--preset--color--brand-sky);
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
}

.av-service-link--archive:hover {
  background: var(--wp--preset--color--brand-sky);
  color: var(--wp--preset--color--surface);
  text-decoration: none;
}

/* ============================================================
   STORY / TRANSPARENCY GRIDS (legacy)
   ============================================================ */
.av-steps-grid,
.av-card-grid,
.av-commerce-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--av-grid-gap);
}

.av-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.2rem, 2vw, 2.2rem);
  align-items: stretch;
}

.av-transparency-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--av-grid-gap);
}

/* ============================================================
   GALLERY (3 → 6 con masonry simulado)
   ============================================================ */
.av-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.av-gallery-grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.av-gallery-card {
  min-height: 260px;
  border-radius: var(--av-radius-md);
  overflow: hidden;
  box-shadow: var(--av-shadow-card);
  background-position: center;
  background-size: cover;
}

.av-gallery-card--one { background-image: url('./assets/images/gallery-community-1.png'); }
.av-gallery-card--two { background-image: url('./assets/images/gallery-community-2.png'); }
.av-gallery-card--three { background-image: url('./assets/images/gallery-community-3.png'); }

.av-gallery-card--tall { min-height: 360px; }

/* ============================================================
   STEPS / SHOPS / PSYCH
   ============================================================ */
.av-step-num {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--brand-aqua);
  margin-bottom: 0.4rem;
}

.av-card-grid .wp-block-group,
.av-steps-grid .wp-block-group,
.av-commerce-grid .wp-block-group {
  height: 100%;
}

.av-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.av-token {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(45, 58, 74, 0.08);
  font-size: 0.9rem;
}

.av-token::before {
  content: "";
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 999px;
  background: currentColor;
}

.av-psych-banner {
  background: linear-gradient(135deg, rgba(123, 200, 190, 0.16), rgba(106, 174, 230, 0.18));
  border: 1px solid rgba(123, 200, 190, 0.24);
}

.av-shop-highlight {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.18), rgba(255, 186, 138, 0.14));
  border: 1px solid rgba(255, 186, 138, 0.24);
}

.av-transparency-list {
  display: grid;
  gap: 0.9rem;
}

.av-transparency-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.av-transparency-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.av-notice-line {
  border-left: 4px solid var(--wp--preset--color--brand-aqua);
}

/* ============================================================
   COUNTDOWN BAND
   ============================================================ */
.av-countdown-band {
  background:
    radial-gradient(circle at top left, rgba(255, 209, 102, 0.18), transparent 40%),
    linear-gradient(135deg, #2D3A4A 0%, #1f2a36 100%);
  color: rgba(255, 255, 255, 0.92);
}

.av-countdown-band .av-eyebrow {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--wp--preset--color--brand-sun);
}

.av-countdown-band .av-eyebrow::before {
  background: var(--wp--preset--color--brand-coral);
}

.av-countdown-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
}

.av-countdown-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 1rem 0 1.5rem;
  max-width: 60ch;
}

.av-countdown-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.av-countdown-clocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.av-countdown-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--av-radius-md);
  padding: 1.4rem 1.6rem;
}

.av-countdown-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-sun);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.av-countdown-value {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 1;
  margin: 0 0 0.5rem;
  color: var(--wp--preset--color--surface);
  font-weight: 600;
}

.av-countdown-value--small {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.2;
}

.av-countdown-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* ============================================================
   CTA MID (SÚMATE HOY)
   ============================================================ */
.av-cta-mid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 247, 235, 0.7), rgba(123, 200, 190, 0.14));
  border: 1px solid rgba(45, 58, 74, 0.08);
  border-radius: var(--av-radius-md);
  padding: clamp(1.8rem, 3vw, 2.6rem);
}

.av-cta-mid-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.av-faq-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.av-faq-item {
  background: #fff;
  border: 1px solid rgba(45, 58, 74, 0.10);
  border-radius: var(--av-radius-sm);
  padding: 1rem 1.3rem;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.av-faq-item[open] {
  border-color: var(--wp--preset--color--brand-aqua);
  box-shadow: var(--av-shadow-card);
}

.av-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--wp--preset--color--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.av-faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--wp--preset--color--brand-coral);
  font-weight: 400;
  transition: transform 0.18s ease;
}

.av-faq-item[open] summary::after {
  content: "−";
}

.av-faq-body {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(45, 58, 74, 0.08);
  color: rgba(36, 49, 60, 0.82);
  line-height: 1.55;
}

.av-faq-body p { margin: 0; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.av-testimonials-band {
  background:
    radial-gradient(circle at bottom right, rgba(106, 174, 230, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(255, 247, 235, 0.6), rgba(255, 255, 255, 1));
}

.av-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--av-grid-gap);
  margin-top: 1.6rem;
}

.av-testimonial-card::before {
  content: "“";
  position: absolute;
  top: -0.4rem;
  left: 0.9rem;
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--wp--preset--color--brand-sun);
  opacity: 0.6;
}

.av-testimonial-quote {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(36, 49, 60, 0.86);
  margin: 0;
  padding-top: 1.4rem;
  font-style: italic;
}

.av-testimonial-name {
  font-size: 0.9rem;
  color: rgba(36, 49, 60, 0.65);
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(45, 58, 74, 0.08);
}

.av-testimonial-name strong {
  color: var(--wp--preset--color--ink);
  font-weight: 700;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.av-contact-band {
  background:
    radial-gradient(circle at top left, rgba(255, 209, 102, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 247, 235, 0.85) 100%);
}

.av-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}

.av-contact-info {
  padding-block: 0.5rem;
}

.av-contact-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.96rem;
  color: rgba(36, 49, 60, 0.85);
}

.av-contact-list strong {
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  display: inline-block;
  min-width: 5.5rem;
}

.av-contact-form {
  background: rgba(45, 58, 74, 0.62);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--av-radius-md);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  gap: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.av-form-row {
  display: grid;
  gap: 0.4rem;
}

.av-form-row--check {
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.88rem;
  color: rgba(36, 49, 60, 0.78);
  line-height: 1.4;
}

.av-form-row--check input {
  margin-top: 0.18rem;
}

.av-form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  letter-spacing: 0.02em;
}

.av-form-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(45, 58, 74, 0.16);
  background: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--wp--preset--color--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.av-form-input:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand-aqua);
  box-shadow: 0 0 0 3px rgba(123, 200, 190, 0.25);
}

textarea.av-form-input { resize: vertical; min-height: 120px; }

/* ============================================================
   FOOTER
   ============================================================ */
.av-site-footer {
  background:
    linear-gradient(180deg, rgba(32, 52, 74, 0.98), rgba(27, 44, 61, 1)),
    var(--wp--preset--color--ink);
  color: rgba(255,255,255,0.86);
}
/* Footer spans 100% of the viewport: relax the inner av-shell
 * constraint to full width with a small inline gutter. */
.av-site-footer > .wp-block-group.av-shell {
  width: 100%;
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* ============================================================
   FLAG BADGE (CSS-only, no emoji rendering issues)
   ============================================================ */
.av-flag {
  display: inline-block;
  width: 22px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.av-flag--es {
  background: linear-gradient(to right,
    #aa151b 0%, #aa151b 25%,
    #f1bf00 25%, #f1bf00 75%,
    #aa151b 75%, #aa151b 100%);
}
.av-contact-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0.2rem 0 0;
}
.av-contact-flag .av-flag {
  width: 24px;
  height: 16px;
}

/* (NEWSLETTER single-row rules live in the original block at line 1635) */

.av-site-footer a {
  color: white;
}

.av-footer-columns {
  row-gap: 2rem;
}

.av-footer-newsletter {
  margin-top: 1rem;
  display: grid;
  gap: 0.4rem;
  /* Grid item — without min-width:0 the row inside expands to fit its
     intrinsic content (input + button side-by-side), overflowing the
     viewport on tiny phones. minmax(0, 1fr) on the column prevents
     intrinsic-content inflation (same fix as .av-about-grid). */
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.av-footer-newsletter-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-sun);
}

.av-footer-newsletter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 100%;
  width: 100%;
  /* Flex children can also blow up via min-width:auto on intrinsic
     content. min-width:0 on the input lets it actually shrink. */
  min-width: 0;
}

.av-footer-newsletter-row .av-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.av-footer-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: auto;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: white;
  font-size: 0.9rem;
  font-family: inherit;
}

.av-footer-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.av-footer-newsletter-input:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand-sun);
  background: rgba(255, 255, 255, 0.14);
}

.av-footer-newsletter-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.av-footer-news {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.av-footer-news li {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.av-footer-news li:last-child { border-bottom: 0; padding-bottom: 0; }

.av-footer-news-date {
  font-size: 0.78rem;
  color: var(--wp--preset--color--brand-sun);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.av-footer-news a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.35;
}

.av-footer-news a:hover {
  color: var(--wp--preset--color--brand-sun);
}

.av-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.av-footer-nav a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.95rem;
}

.av-footer-nav a:hover {
  color: var(--wp--preset--color--brand-sun);
}

.av-footer-mini-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.av-footer-mini-tile {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  display: block;
}

.av-footer-mini-tile--one   { background-image: url('./assets/images/gallery-community-1.png'); }
.av-footer-mini-tile--two   { background-image: url('./assets/images/gallery-community-2.png'); }
.av-footer-mini-tile--three { background-image: url('./assets/images/gallery-community-3.png'); }

.av-footer-gallery-link {
  font-size: 0.9rem;
  color: var(--wp--preset--color--brand-sun);
  text-decoration: none;
}

.av-footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem 0.4rem;
}

.av-footer-bar p { margin: 0; }

.av-footer-social {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
}

.av-footer-social a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 600;
}

.av-footer-social a:hover {
  color: var(--wp--preset--color--brand-sun);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .av-metric-grid,
  .av-metric-grid--four,
  .av-steps-grid,
  .av-card-grid,
  .av-commerce-grid,
  .av-services-grid,
  .av-testimonials-grid,
  .av-gallery-grid,
  .av-gallery-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .av-transparency-grid,
  .av-story-grid,
  .av-founder-grid,
  .av-about-grid,
  .av-countdown-grid,
  .av-cta-mid,
  .av-contact-grid {
    /* minmax(0, 1fr) instead of 1fr — prevents grid items from forcing the
       track wider than the viewport via min-width:auto on intrinsic
       content (the most common cause of horizontal overflow on mobile). */
    grid-template-columns: minmax(0, 1fr);
  }

  .av-hero-dots { display: none; }
}

@media (max-width: 781px) {
  .av-shell {
    width: min(100vw - 28px, 100%);
  }

  .av-site-header .wp-block-site-logo img,
  .av-site-header .av-site-logo-img {
    max-height: 80px;
  }

  .av-hero-slider,
  .av-hero-overlay {
    min-height: 560px;
  }

  .av-site-header .av-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  .av-primary-nav {
    justify-content: flex-start;
    gap: 0.5rem 0.9rem;
    font-size: 0.88rem;
  }

  .av-metric-grid,
  .av-metric-grid--four,
  .av-steps-grid,
  .av-card-grid,
  .av-commerce-grid,
  .av-services-grid,
  .av-testimonials-grid,
  .av-gallery-grid,
  .av-gallery-grid--six {
    grid-template-columns: 1fr;
  }

  .av-topbar-inner { flex-direction: column; align-items: flex-start; }
  .av-cta-mid-actions { align-items: stretch; }
  .av-cta-mid-actions .av-btn { width: 100%; }
}

/* ============================================================
   ARCHIVE PAGES (CPT av_accion, av_voluntario)
   ============================================================ */
.av-archive {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.av-archive-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 2rem;
}

.av-filter-link {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(45, 58, 74, 0.16);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.av-filter-link:hover {
  border-color: var(--wp--preset--color--brand-aqua);
  color: var(--wp--preset--color--brand-coral);
}

.av-filter-link--active {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--ink);
}

.av-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.av-archive-card {
  background: #ffffff;
  border: 1px solid rgba(45, 58, 74, 0.10);
  border-radius: var(--av-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.18s ease;
}

.av-archive-card:hover {
  border-color: var(--wp--preset--color--ink);
}

.av-archive-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(45, 58, 74, 0.06);
}

.av-archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.av-archive-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.2), rgba(123, 200, 190, 0.2));
}

.av-archive-body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.av-archive-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
}

.av-tag {
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(123, 200, 190, 0.16);
  color: #1f5a55;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.av-archive-title {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(2 * 1.25 * 1.35rem);
}

.av-archive-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.av-archive-title a:hover {
  color: var(--wp--preset--color--brand-coral);
}

.av-archive-excerpt {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(36, 49, 60, 0.78);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(3 * 1.5 * 0.92rem);
}

.av-archive-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wp--preset--color--brand-coral);
  text-decoration: none;
  margin-top: 0.4rem;
}

.av-archive-link:hover {
  text-decoration: underline;
}

.av-archive-empty,
.av-empty {
  font-size: 0.95rem;
  color: rgba(36, 49, 60, 0.7);
  padding: 1.2rem 1.5rem;
  background: rgba(45, 58, 74, 0.04);
  border-radius: var(--av-radius-sm);
  border-left: 3px solid var(--wp--preset--color--brand-aqua);
}

@media (max-width: 1024px) {
  .av-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .av-archive-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TEAM ROW (home + archive)
   ============================================================ */
.av-team-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.av-team-card {
  background: #ffffff;
  border: none;
  border-left: 1px solid var(--wp--preset--color--brand-coral);
  border-radius: 0;
  overflow: hidden;
  text-align: center;
  padding: 1.2rem 0.9rem 1.1rem;
  transition: border-color 0.18s ease;
}
.av-team-row > .av-team-card:nth-child(2n) { border-left-color: var(--wp--preset--color--brand-aqua); }
.av-team-row > .av-team-card:nth-child(3n) { border-left-color: var(--wp--preset--color--brand-sky); }
.av-team-row > .av-team-card:nth-child(4n) { border-left-color: var(--wp--preset--color--brand-sun); }
.av-team-row > .av-team-card:last-child { border-right: 1px solid var(--wp--preset--color--brand-sun); }

.av-team-card:hover {
  border-color: var(--wp--preset--color--ink);
}

.av-team-photo {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(45, 58, 74, 0.06);
}

.av-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.av-team-photo-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  /* Default person silhouette: head + shoulders in a circle, in ink color */
  background-color: #ffffff;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232D3A4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='32' cy='24' r='11'/><path d='M12 56 C 12 44, 20 38, 32 38 C 44 38, 52 44, 52 56'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  border: 1px solid rgba(45, 58, 74, 0.10);
  border-radius: 999px;
  background-clip: padding-box;
}

.av-team-name {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 0.25rem;
  color: var(--wp--preset--color--ink);
}

.av-team-rol {
  font-size: 0.85rem;
  color: var(--wp--preset--color--brand-coral);
  margin: 0 0 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.av-team-social {
  display: inline-flex;
  gap: 0.4rem;
}

.av-team-social a {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(45, 58, 74, 0.06);
  color: var(--wp--preset--color--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.av-team-social a:hover {
  background: var(--wp--preset--color--brand-coral);
  color: white;
}

@media (max-width: 1024px) {
  .av-team-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .av-team-row { grid-template-columns: 1fr; }
}

/* ============================================================
   SINGLE PAGES (CPT)
   ============================================================ */
.av-single {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.av-breadcrumb {
  font-size: 0.9rem;
  margin: 0 0 1.4rem;
}

.av-breadcrumb a {
  color: var(--wp--preset--color--brand-coral);
  text-decoration: none;
  font-weight: 600;
}

.av-breadcrumb a:hover {
  text-decoration: underline;
}

.av-single figure img,
.av-single .wp-block-post-featured-image img {
  border-radius: var(--av-radius-md);
  width: 100%;
  height: auto;
  display: block;
  margin-block: 1.6rem;
}

.av-single .wp-block-post-content > * {
  max-width: 70ch;
  margin-inline: auto;
}

.av-single-nav {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(45, 58, 74, 0.10);
}

.av-single-nav-link {
  font-size: 0.92rem;
  color: var(--wp--preset--color--brand-coral);
  text-decoration: none;
  font-weight: 600;
}

.av-single-nav-link:hover {
  text-decoration: underline;
}

.av-single-voluntario-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
  margin-block: 1.4rem 2rem;
}

.av-single-voluntario-photo img {
  border-radius: var(--av-radius-md);
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.av-single-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.4rem;
}

@media (max-width: 781px) {
  .av-single-voluntario-grid {
    grid-template-columns: 1fr;
  }
  .av-single-voluntario-photo {
    max-width: 18rem;
    margin: 0 auto;
  }
}

/* ============================================================
   VIDEO BLOCK (Fase 3) — bloque honesto sin video real todavía
   ============================================================ */
.av-video-block {
  position: relative;
  border-radius: var(--av-radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(36, 49, 60, 0.92), rgba(20, 30, 40, 0.96));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  box-shadow: var(--av-shadow-soft);
}

.av-video-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 209, 102, 0.10), transparent 70%);
  pointer-events: none;
}

.av-video-play {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}

.av-video-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.9rem 0 0.9rem 1.4rem;
  border-color: transparent transparent transparent var(--wp--preset--color--ink);
  margin-left: 0.25rem;
}

.av-video-play:hover {
  transform: scale(1.06);
  background: white;
}

.av-video-overlay {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  z-index: 1;
  text-align: left;
}

.av-video-overlay p {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-sun);
  font-weight: 600;
}

.av-video-overlay h3 {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  margin: 0.2rem 0 0;
  font-weight: 600;
}

/* Modal para video: cuando esté listo el real, reemplazar el placeholder
   con un <video controls> o <iframe>. Por ahora muestra aviso honesto. */
.av-video-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 40, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
}

.av-video-modal[aria-hidden="false"] {
  display: flex;
}

.av-video-modal-inner {
  background: white;
  border-radius: var(--av-radius-md);
  padding: 2rem;
  max-width: 32rem;
  text-align: center;
}

.av-video-modal-inner h4 {
  font-family: var(--wp--preset--font-family--serif-display);
  font-size: 1.5rem;
  margin: 0 0 0.7rem;
}

.av-video-modal-inner p {
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(36, 49, 60, 0.78);
  margin: 0 0 1.2rem;
}

.av-video-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

/* ============================================================
   ASTUTE-CLONE ADDITIONS — Header right + Donate button + Lg btn
   ============================================================ */
.av-header-right {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.av-site-header .av-primary-nav {
  gap: 1.4rem;
}

.av-btn-donate .wp-block-button__link {
  background: var(--wp--preset--color--brand-coral);
  color: var(--wp--preset--color--surface);
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  box-shadow: var(--av-shadow-card);
  transition: transform 0.18s ease, background 0.18s ease;
}
.av-btn-donate .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--brand-coral) 90%, var(--wp--preset--color--ink) 10%);
  transform: translateY(-1px);
}

.av-btn--lg {
  padding: 1rem 1.8rem;
  font-size: 1rem;
}

/* ============================================================
   HERO OVERLAY — Centered content (text + buttons visible above the fold)
   ============================================================ */
.av-hero-overlay {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 78vh, 820px);
  padding-top: 6rem;
  padding-bottom: 11rem; /* leave room for metric band overlap */
}
.av-hero-overlay--bottom-left {
  align-items: center;
}
.av-hero-content {
  max-width: 640px;
  color: white;
  padding-left: 5px;
}
.av-hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
  margin: 0 0 1rem 0;
  position: relative;
  padding-left: 2.5rem;
}
.av-hero-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 2px;
  background: var(--wp--preset--color--brand-coral);
  transform: translateY(-50%);
}

/* ============================================================
   SECTION HEADING PATTERNS
   ============================================================ */
.av-section-heading-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: 3rem;
  align-items: start;
}
.av-section-heading-split h2 { margin: 0; }
.av-section-heading-split > div > h2 { margin: 0.5rem 0 0 0; }

.av-section-lede--with-divider {
  border-left: 3px solid var(--wp--preset--color--brand-coral);
  padding-left: 1.4rem;
  margin: 0;
}

.av-section-heading-centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem auto;
}
.av-section-heading-centered h2 { margin: 0.5rem 0 1.2rem 0; }
.av-section-heading-centered .av-section-lede { margin: 0 auto; max-width: 600px; }

.av-section-heading-centered--light h2,
.av-section-heading-centered--light .av-section-lede,
.av-section-heading-centered--light .av-eyebrow {
  color: white;
}

.av-eyebrow--light {
  color: white !important;
}

.av-section-lede--light {
  color: rgba(255, 255, 255, 0.9) !important;
}

.av-star-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 1.4rem 0 1.4rem 0;
  color: var(--wp--preset--color--brand-coral);
}
.av-star-divider span {
  display: inline-block;
  width: 80px;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
}
.av-star-divider svg { flex-shrink: 0; }

.av-star-divider--light {
  color: white;
}

/* ============================================================
   SERVICES — Minimalist style (icon circle + title + text, no card)
   ============================================================ */
.av-services-minimal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  margin-top: 2rem;
}
.av-service-minimal {
  text-align: center;
  padding: 1rem 0.5rem;
}
.av-service-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
  margin-bottom: 1.4rem;
  background: var(--wp--preset--color--surface);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.av-service-icon-circle--sun {
  border-color: var(--wp--preset--color--brand-sun);
  color: var(--wp--preset--color--brand-sun);
}
.av-service-icon-circle--coral {
  border-color: var(--wp--preset--color--brand-coral);
  color: var(--wp--preset--color--brand-coral);
}
.av-service-icon-circle--aqua {
  border-color: var(--wp--preset--color--brand-aqua);
  color: var(--wp--preset--color--brand-aqua);
}
.av-service-icon-circle--sky {
  border-color: var(--wp--preset--color--brand-sky);
  color: var(--wp--preset--color--brand-sky);
}
.av-service-minimal:hover .av-service-icon-circle--sun {
  background: var(--wp--preset--color--brand-sun);
  color: var(--wp--preset--color--ink);
}
.av-service-minimal:hover .av-service-icon-circle--coral {
  background: var(--wp--preset--color--brand-coral);
  color: var(--wp--preset--color--ink);
}
.av-service-minimal:hover .av-service-icon-circle--aqua {
  background: var(--wp--preset--color--brand-aqua);
  color: var(--wp--preset--color--surface);
}
.av-service-minimal:hover .av-service-icon-circle--sky {
  background: var(--wp--preset--color--brand-sky);
  color: var(--wp--preset--color--surface);
}
.av-person-icon { display: block; }
.av-service-minimal h3 {
  margin: 0 0 0.6rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}
.av-service-minimal p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: rgba(45, 58, 74, 0.78);
}

/* ============================================================
   MEDIA ARCHIVES — Filter pills + 8-photo gallery grid
   ============================================================ */
.av-archive-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 2.5rem 0;
}
.av-filter-pill {
  background: transparent;
  border: 1.5px solid rgba(45, 58, 74, 0.25);
  color: var(--wp--preset--color--ink);
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  font-family: inherit;
}
.av-filter-pill:hover {
  border-color: var(--wp--preset--color--brand-coral);
  color: var(--wp--preset--color--brand-coral);
}
.av-filter-pill--active {
  background: var(--wp--preset--color--brand-coral);
  border-color: var(--wp--preset--color--brand-coral);
  color: white;
}

.av-archive-grid--8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.av-archive-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

/* Archive card thumb variants (used by both Media Archives + CPT archive) */
.av-archive-thumb--community-1 { background-image: url('./assets/images/gallery-community-1.png'); }
.av-archive-thumb--community-2 { background-image: url('./assets/images/gallery-community-2.png'); }
.av-archive-thumb--community-3 { background-image: url('./assets/images/gallery-community-3.png'); }

/* ============================================================
   ABOUT — Photo with red overlay card (Astute President Message)
   ============================================================ */
.av-about-figure {
  position: relative;
  margin: 0;
}
.av-about-figure .av-about-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--av-radius-md);
}
.av-about-photo--one {
  background-image: url('./assets/images/hero-3-rubble-catialamar.jpg');
}
.av-about-overlay {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: rgba(45, 58, 74, 0.32);
  color: white;
  padding: 1.6rem 1.8rem;
  max-width: 60%;
  border-radius: var(--av-radius-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.av-about-overlay h3 {
  margin: 0 0 0.6rem 0;
  font-size: 1.2rem;
  color: white;
}
.av-about-overlay p {
  margin: 0 0 0.5rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: white;
}
.av-about-signature {
  font-style: italic;
  opacity: 0.9;
  margin-top: 0.6rem !important;
}

/* ============================================================
   GOALS — Tabs + video/image panel + FAQ accordion
   ============================================================ */
.av-goals-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.av-tab-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.av-tab {
  flex: 1;
  background: var(--wp--preset--color--ink);
  color: white;
  border: none;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px 4px 0 0;
  transition: background 0.18s ease;
}
.av-tab--active {
  background: var(--wp--preset--color--brand-sky);
  color: var(--wp--preset--color--surface);
}
.av-goals-media {
  position: relative;
}
.av-goals-video {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--av-radius-sm);
  overflow: hidden;
}
.av-goals-video-thumb {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2D3A4A 0%, #1f2a36 100%);
  background-size: cover;
  background-position: center;
}
.av-goals-video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(45, 58, 74, 0.4);
}
.av-goals-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-coral);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--av-shadow-soft);
  z-index: 2;
}
.av-goals-play span {
  font-size: 1.6rem;
  margin-left: 4px;
}
.av-goals-panel {
  background: var(--wp--preset--color--surface);
  padding: 1.6rem;
  border-radius: var(--av-radius-sm);
  border: 1px solid rgba(45, 58, 74, 0.08);
}
.av-goals-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.av-goals-list li {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(45, 58, 74, 0.1);
  font-size: 0.95rem;
  line-height: 1.5;
}
.av-goals-list li:last-child { border-bottom: 0; }

/* FAQ Accordion */
.av-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.av-faq-row {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(45, 58, 74, 0.18);
  border-radius: 0;
  overflow: visible;
}
.av-faq-row summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--wp--preset--color--ink);
  transition: background 0.18s ease;
}
.av-faq-row summary::-webkit-details-marker { display: none; }
.av-faq-row summary:hover {
  background: rgba(45, 58, 74, 0.04);
}
.av-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wp--preset--color--ink);
  color: white;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.av-faq-row[open] .av-faq-icon {
  background: var(--wp--preset--color--brand-sky);
}
.av-faq-title {
  flex: 1;
}
.av-faq-chevron {
  color: var(--wp--preset--color--brand-sky);
  font-size: 1rem;
  font-weight: 700;
}
.av-faq-row[open] {
  background: transparent;
  border-top-color: var(--wp--preset--color--brand-sky);
}
.av-faq-row[open] summary {
  color: var(--wp--preset--color--ink);
  background: rgba(45, 58, 74, 0.04);
}
.av-faq-row[open] .av-faq-icon {
  background: white;
  color: var(--wp--preset--color--brand-coral);
}
.av-faq-row[open] .av-faq-chevron {
  color: white;
}
.av-faq-body {
  padding: 0 1.3rem 1.3rem 3.6rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
}
.av-faq-row:not([open]) .av-faq-body { padding: 0; }

/* ============================================================
   COUNTDOWN — Astute 4 red boxes with colons
   ============================================================ */
.av-countdown-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem auto;
}
.av-countdown-intro .av-section-title { color: white; }
.av-countdown-intro .av-countdown-lede { color: rgba(255, 255, 255, 0.85); margin: 1rem auto 0; }

.av-countdown-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.av-countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.4rem;
}
.av-countdown-num {
  margin: 0;
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  position: relative;
  display: inline-block;
  animation: av-num-tick 1s ease-out;
}
@keyframes av-num-tick {
  0% { transform: translateY(-4px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}
.av-countdown-lab {
  margin: 0.6rem 0 0 0;
  font-family: var(--wp--preset--font-family--raleway), Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
  color: white;
}
.av-countdown-colon {
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
  align-self: center;
  line-height: 1;
  margin: 0 -0.4rem;
  transform: translateY(-0.7em);
}

/* ============================================================
   MODERN TIMELINE TRACK (motion / dynamic)
   ============================================================ */
.av-timeline-track {
  position: relative;
  height: 120px;
  margin: 2rem auto 4rem;
  max-width: 920px;
  overflow: visible;
  padding: 0 24px;
}
.av-timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.18) 8%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.18) 92%,
    rgba(255,255,255,0) 100%);
  transform: translateY(-50%);
  overflow: hidden;
}
.av-timeline-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: av-line-shimmer 4s linear infinite;
}
@keyframes av-line-shimmer {
  0%   { left: -30%; }
  100% { left: 130%; }
}
.av-timeline-markers {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.av-timeline-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: background 0.4s, transform 0.4s;
}
.av-timeline-marker--past {
  background: rgba(255, 255, 255, 0.85);
}
.av-timeline-marker--current {
  background: white;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.16), 0 0 0 14px rgba(255,255,255,0.08);
  animation: av-marker-pulse 2s ease-in-out infinite;
}
@keyframes av-marker-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0.16), 0 0 0 14px rgba(255,255,255,0.08); }
  50%      { box-shadow: 0 0 0 10px rgba(255,255,255,0.24), 0 0 0 22px rgba(255,255,255,0.04); }
}
.av-timeline-now {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 38px));
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  /* Hard cap so the marker can't push past the track right edge and
     inflate body scrollWidth on mobile. The label inside is centered
     (text-align:center), so a max-width on the wrapper is safe. */
  max-width: 70px;
}
.av-timeline-now::after {
  content: '';
  position: absolute;
  bottom: -32px;
  left: 50%;
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, white, transparent);
}
.av-timeline-now-label {
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: white;
  background: rgba(255,255,255,0.18);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.45);
  white-space: nowrap;
}

/* ============================================================
   MOTION FEED (recent activity ticker)
   ============================================================ */
.av-motion-feed {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: left;
}
.av-motion-feed-title {
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 1.4rem;
  text-align: center;
  position: relative;
}
.av-motion-feed-title::before,
.av-motion-feed-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.25);
}
.av-motion-feed-title::before { left: calc(50% - 130px); }
.av-motion-feed-title::after  { right: calc(50% - 130px); }
.av-motion-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  max-height: 180px;
  overflow: hidden;
}
.av-motion-feed-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.92rem;
  line-height: 1.45;
  animation: av-feed-slide 0.6s ease-out;
}
.av-motion-feed-item:last-child { border-bottom: none; }
@keyframes av-feed-slide {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}
.av-motion-feed-time {
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-sun);
  opacity: 0.92;
}
.av-motion-feed-text {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--wp--preset--font-family--raleway), Georgia, serif;
}

@media (max-width: 767px) {
  .av-timeline-track { height: 100px; margin: 1rem auto 2.5rem; }
  .av-timeline-now { transform: translate(-50%, calc(-50% - 32px)); }
  .av-timeline-now::after { height: 24px; bottom: -26px; }
  .av-timeline-now-label {
    font-size: 0.62rem;
    padding: 0.25rem 0.5rem;
    /* On mobile, the JS-driven marker can sit near the right edge;
       clamp the label so it can't overflow the viewport. */
    white-space: normal;
    max-width: 80px;
    text-align: center;
  }
  .av-motion-feed-item { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.5rem 0; }
  .av-motion-feed-title::before, .av-motion-feed-title::after { width: 30px; }
  .av-motion-feed-title::before { left: calc(50% - 70px); }
  .av-motion-feed-title::after  { right: calc(50% - 70px); }
}
.av-countdown-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ============================================================
   GALLERY — 2x3 grid with dark gap between photos (Astute style)
   ============================================================ */
.av-gallery-grid--six-dark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--wp--preset--color--ink);
  padding: 10px;
  border-radius: var(--av-radius-md);
}
.av-gallery-tile {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.av-gallery-tile--one { background-image: url('./assets/images/gallery-community-1.png'); }
.av-gallery-tile--two { background-image: url('./assets/images/gallery-community-2.png'); }
.av-gallery-tile--three { background-image: url('./assets/images/gallery-community-3.png'); }

/* ============================================================
   TESTIMONIALS — Card with avatar + role + 5-star rating
   ============================================================ */
.av-testimonials-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
.av-testimonial-card {
  background: transparent;
  padding: 1.6rem 1.2rem;
  border-radius: 0;
  border: none;
  border-top: 3px solid var(--wp--preset--color--ink);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.av-testimonial-card--sun   { border-top-color: var(--wp--preset--color--brand-sun); }
.av-testimonial-card--aqua  { border-top-color: var(--wp--preset--color--brand-aqua); }
.av-testimonial-card--coral { border-top-color: var(--wp--preset--color--brand-coral); }
.av-testimonial-card--sky   { border-top-color: var(--wp--preset--color--brand-sky); }
.av-testimonial-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.av-testimonial-avatar {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(45, 58, 74, 0.1);
  flex-shrink: 0;
}
.av-testimonial-avatar--one { background-image: url('./assets/images/gallery-community-1.png'); }
.av-testimonial-avatar--two { background-image: url('./assets/images/gallery-community-2.png'); }
.av-testimonial-avatar--three { background-image: url('./assets/images/gallery-community-3.png'); }
.av-testimonial-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}
.av-testimonial-role {
  margin: 0;
  font-size: 0.82rem;
  color: var(--wp--preset--color--brand-coral);
  font-weight: 500;
}
.av-testimonial-quote {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(45, 58, 74, 0.82);
  flex: 1;
}
.av-testimonial-stars {
  color: var(--wp--preset--color--brand-coral);
  font-size: 1rem;
  letter-spacing: 0.1em;
}

/* ============================================================
   VIDEO HERO — Full-width image with centered play btn (Astute Vote Video Live)
   ============================================================ */
.av-video-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(45, 58, 74, 0.85) 0%, rgba(31, 42, 54, 0.7) 100%),
              url('./assets/images/gallery-community-2.png') center/cover no-repeat;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-video-hero-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  color: white;
  padding: 2rem;
  font-family: inherit;
}
.av-video-hero-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-coral);
  color: white;
  margin-bottom: 1.6rem;
  box-shadow: 0 0 0 8px rgba(255, 184, 161, 0.25);
  transition: transform 0.18s ease;
}
.av-video-hero-trigger:hover .av-video-hero-play {
  transform: scale(1.05);
}
.av-video-hero-title {
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: white;
}
.av-video-hero-sub {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

/* av_video CPT — featured-image background + dark overlay + relative title */
.av-video-hero-trigger {
  position: relative;
  overflow: hidden;
}
.av-video-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.av-video-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45, 58, 74, 0.78) 0%, rgba(31, 42, 54, 0.62) 100%);
  z-index: 1;
}
.av-video-hero-trigger > .av-video-hero-title,
.av-video-hero-trigger > .av-video-hero-sub {
  position: relative;
  z-index: 2;
}

/* Modal iframe wrapper — used when av_video CPT provides a real URL */
.av-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  margin-bottom: 1rem;
  border-radius: 0;
  overflow: hidden;
}
.av-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.av-video-modal-closer {
  display: block;
  margin: 0.4rem auto 0;
}

/* Empty-state placeholder for av_acciones_feed (no posts yet) */
.av-empty--feed {
  margin: 1rem 0 0;
  padding: 1rem 1.2rem;
  background: rgba(45, 58, 74, 0.06);
  border-left: 3px solid var(--wp--preset--color--brand-coral, #FFB8A1);
  font-size: 0.92rem;
  color: var(--wp--preset--color--ink, #2D3A4A);
}

/* ============================================================
   DONATIONS PREDEFINED CARDS
   ============================================================ */
.av-donate-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 1rem;
}
.av-donate-card {
  background: transparent;
  padding: 1.8rem 1rem 1.4rem;
  border-radius: 0;
  border: none;
  border-top: 3px solid var(--wp--preset--color--ink);
  box-shadow: none;
  text-align: center;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.av-donate-card--sun   { border-top: 3px solid var(--wp--preset--color--brand-sun); }
.av-donate-card--aqua  { border-top: 3px solid var(--wp--preset--color--brand-aqua); }
.av-donate-card--coral { border-top: 3px solid var(--wp--preset--color--brand-coral); }
.av-donate-card--sky   { border-top: 3px solid var(--wp--preset--color--brand-sky); }
.av-donate-card:hover {
  transform: translateY(-2px);
  border-color: var(--wp--preset--color--ink);
}
.av-donate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.av-donate-icon--sun   { color: var(--wp--preset--color--brand-sun); border-color: var(--wp--preset--color--brand-sun); }
.av-donate-icon--aqua  { color: var(--wp--preset--color--brand-aqua); border-color: var(--wp--preset--color--brand-aqua); }
.av-donate-icon--coral { color: var(--wp--preset--color--brand-coral); border-color: var(--wp--preset--color--brand-coral); }
.av-donate-icon--sky   { color: var(--wp--preset--color--brand-sky); border-color: var(--wp--preset--color--brand-sky); }
.av-donate-card h3 {
  margin: 0 0 0.6rem 0;
  font-size: 1.18rem;
  color: var(--wp--preset--color--ink);
}
.av-donate-card p {
  margin: 0 0 1rem 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(45, 58, 74, 0.78);
}

/* ============================================================
   CONTACT — 3-col info row + 2-col form (Astute pattern)
   ============================================================ */
.av-contact-band {
  background: linear-gradient(135deg, rgba(45, 58, 74, 0.94) 0%, rgba(31, 42, 54, 0.9) 100%),
              url('./assets/images/gallery-community-3.png') center/cover no-repeat fixed;
  color: white;
}
.av-contact-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 0 auto 3rem auto;
  max-width: 980px;
  text-align: center;
}
.av-contact-info-cell {
  padding: 1.6rem 1rem;
}
.av-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--brand-coral);
  margin-bottom: 0.8rem;
}
.av-contact-label {
  margin: 0.6rem 0 0.4rem 0;
  font-size: 1.1rem;
}
.av-contact-label strong { font-weight: 700; color: white; }
.av-contact-info-cell p {
  margin: 0.2rem 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.96rem;
}
.av-contact-soon {
  display: inline-block;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: var(--wp--preset--color--brand-coral);
  color: white;
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.av-contact-form {
  max-width: 980px;
  margin: 0 auto;
}
.av-contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.av-contact-submit-row {
  text-align: center;
  margin-top: 1.5rem;
}
.av-form-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  padding: 0.9rem 0.2rem;
  font-size: 1rem;
  color: white;
  font-family: inherit;
  transition: border-color 0.18s ease;
}
.av-form-input:focus {
  outline: none;
  border-bottom-color: var(--wp--preset--color--brand-coral);
}
.av-form-input--textarea {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 0.9rem;
  resize: vertical;
}
.av-form-input--textarea:focus {
  border-color: var(--wp--preset--color--brand-coral);
}
.av-form-label {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.av-form-row--check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  margin-top: 1rem;
}
.av-form-row--check input { margin-top: 0.2rem; }

/* ============================================================
   STEPS GRID — Apoyo psicológico 3-step section
   ============================================================ */
.av-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.av-step-card {
  background: transparent;
  padding: 1.6rem 0.5rem 1.4rem;
  border-radius: 0;
  border: none;
  border-top: 3px solid var(--wp--preset--color--brand-sun);
  position: relative;
  box-shadow: none;
}
.av-step-num {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--brand-coral);
  margin-bottom: 0.8rem;
}
.av-step-card h3 {
  margin: 0 0 0.6rem 0;
  font-size: 1.18rem;
  color: var(--wp--preset--color--ink);
}
.av-step-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(45, 58, 74, 0.78);
}

/* ============================================================
   NEWS GRID — Latest News (av_noticia CPT)
   ============================================================ */
.av-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.av-news-card {
  background: transparent;
  border-radius: 0;
  border: none;
  border-top: 3px solid var(--wp--preset--color--ink);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease;
}
.av-news-card--sun   { border-top-color: var(--wp--preset--color--brand-sun); }
.av-news-card--aqua  { border-top-color: var(--wp--preset--color--brand-aqua); }
.av-news-card--sky   { border-top-color: var(--wp--preset--color--brand-sky); }
.av-news-card:hover {
  border-color: var(--wp--preset--color--ink);
}
.av-news-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: rgba(45, 58, 74, 0.06);
  background-size: cover;
  background-position: center;
}
.av-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.av-news-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--wp--preset--color--brand-sun) 0%, var(--wp--preset--color--brand-aqua) 100%);
}
.av-news-body {
  padding: 1.4rem 1.4rem 1.6rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.av-news-meta {
  display: flex;
  gap: 1.4rem;
  margin: 0 0 0.6rem 0;
  font-size: 0.82rem;
  color: rgba(45, 58, 74, 0.6);
}
.av-news-meta span { display: inline-flex; gap: 0.3rem; align-items: center; }
.av-news-title {
  margin: 0 0 0.6rem 0;
  font-size: 1.16rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}
.av-news-title a {
  color: inherit;
  text-decoration: none;
}
.av-news-title a:hover { color: var(--wp--preset--color--brand-coral); }
.av-news-excerpt {
  margin: 0 0 1rem 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(45, 58, 74, 0.75);
  flex: 1;
}
.av-news-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.av-news-link:hover {
  color: var(--wp--preset--color--brand-coral);
}

/* ============================================================
   SINGLE VIDEO PLAYER (single-av_video.html)
   ============================================================ */
.av-single-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--av-radius-sm);
  overflow: hidden;
  margin: 1.5rem 0;
}
.av-single-video iframe,
.av-single-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* ============================================================
   RESPONSIVE — Tablet / Mobile
   ============================================================ */
@media (max-width: 1023px) {
  .av-services-minimal-grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; }
  .av-archive-grid--8 { grid-template-columns: repeat(3, 1fr); }
  .av-goals-grid { grid-template-columns: 1fr; gap: 2rem; }
  .av-testimonials-row { grid-template-columns: repeat(2, 1fr); }
  .av-news-grid { grid-template-columns: repeat(2, 1fr); }
  .av-gallery-grid--six-dark { grid-template-columns: repeat(2, 1fr); }
  .av-donate-cards { grid-template-columns: repeat(2, 1fr); }
  .av-steps-grid { grid-template-columns: 1fr; }
  .av-contact-info-row { grid-template-columns: 1fr; }
  .av-section-heading-split { grid-template-columns: 1fr; }
  .av-shell { width: min(100%, calc(100vw - 32px)); }
  /* Top bar stack on tablet */
  .av-topbar-inner { flex-direction: column; gap: 0.4rem; align-items: flex-start; }
  .av-site-header .av-shell { flex-wrap: wrap; gap: 1rem; }
  .av-primary-nav { gap: 1rem; font-size: 0.88rem; }
  /* Hero overlay shorter on tablet */
  .av-hero-overlay { min-height: 540px; padding-top: 4rem; }
  /* Countdown fits 4 boxes inline */
  .av-countdown-rect { min-width: 130px; padding: 1.2rem 1rem; }
  .av-countdown-num { font-size: clamp(2.2rem, 4vw, 3rem); }
  /* Video hero shorter */
  .av-video-hero { min-height: 420px; }
  /* Footer columns wrap */
  .av-footer-columns { flex-wrap: wrap; }
  .av-footer-columns > .wp-block-column { flex-basis: 48% !important; }
}

@media (max-width: 767px) {
  /* Typography fluid reduction on mobile */
  :root { --av-shell-pad: 1rem; }
  .av-shell { width: min(100%, calc(100vw - 24px)); }

  .av-section-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .av-hero-title { font-size: clamp(1.4rem, 5.5vw, 1.9rem); line-height: 1.1; }
  .av-hero-lede { font-size: 0.94rem; }

  .av-services-minimal-grid { grid-template-columns: 1fr; gap: 2rem; }
  .av-archive-grid--8 { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .av-archive-grid--3 { grid-template-columns: 1fr; }
  .av-testimonials-row { grid-template-columns: 1fr; }
  .av-news-grid { grid-template-columns: 1fr; }
  .av-gallery-grid--six-dark { grid-template-columns: 1fr; gap: 6px; padding: 6px; }
  .av-donate-cards { grid-template-columns: 1fr; }
  .av-contact-form-row { grid-template-columns: 1fr; }

  /* Countdown: 2x2 grid instead of 4 inline */
  .av-countdown-row { gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
  .av-countdown-rect { min-width: calc(50% - 0.5rem); padding: 0.9rem 0.5rem; }
  .av-countdown-num { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .av-countdown-lab { font-size: 0.74rem; }
  .av-countdown-colon { display: none; }

  .av-hero-content { padding: 0 0.5rem; }
  .av-about-overlay { position: static; max-width: 100%; margin-top: -1rem; border-radius: 0 0 var(--av-radius-md) var(--av-radius-md); }
  .av-tab { padding: 0.7rem 0.5rem; font-size: 0.82rem; }
  .av-hero-overlay { min-height: 480px; padding-bottom: 2.5rem; padding-top: 3rem; }

  /* Header wraps: nav below logo */
  .av-site-header .av-shell { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .av-header-right { width: 100%; flex-wrap: wrap; gap: 0.6rem; }
  .av-primary-nav { width: 100%; flex-wrap: wrap; gap: 0.5rem 0.9rem; font-size: 0.84rem; }
  .av-btn-donate .wp-block-button__link { padding: 0.6rem 1rem; font-size: 0.78rem; }

  /* Section padding reduced */
  .wp-block-group[style*="padding-top"] { padding-top: 2rem !important; }
  .wp-block-group[style*="padding-bottom"] { padding-bottom: 2rem !important; }

  /* Filter pills wrap */
  .av-archive-filter { gap: 0.4rem; }
  .av-filter-pill { padding: 0.45rem 1rem; font-size: 0.76rem; }

  /* Video hero: smaller play btn */
  .av-video-hero { min-height: 360px; }
  .av-video-hero-play { width: 80px; height: 80px; margin-bottom: 1.2rem; }
  .av-video-hero-title { font-size: 1.4rem; }

  /* Steps cards stack tighter */
  .av-step-card { padding: 1.4rem 1.2rem; }
  .av-step-num { font-size: 0.78rem; }

  /* FAQ: smaller */
  .av-faq-row summary { padding: 0.85rem 1rem; font-size: 0.9rem; }
  .av-faq-body { padding: 0 1rem 1rem 3rem; font-size: 0.88rem; }

  /* Footer: single column */
  .av-footer-columns > .wp-block-column { flex-basis: 100% !important; margin-bottom: 1.4rem; }
  .av-footer-newsletter-row { flex-direction: column; gap: 0.4rem; }
  .av-footer-newsletter-input { width: 100%; }
  .av-footer-bar { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .av-footer-mini-gallery { grid-template-columns: repeat(3, 1fr) !important; }

  /* Goals video thumb shorter on mobile */
  .av-goals-video { aspect-ratio: 16 / 10; }

  /* Contact form full-width fields */
  .av-form-input { font-size: 0.95rem; }

  /* Section heading centered: tighter margins */
  .av-section-heading-centered { margin-bottom: 1.8rem; }
  .av-star-divider { margin: 1rem 0; }
  .av-star-divider span { width: 50px; }
}

@media (max-width: 380px) {
  /* Tiny phones: iPhone SE 1st gen */
  .av-hero-title { font-size: 1.3rem; }
  .av-section-title { font-size: 1.4rem !important; }
  .av-primary-nav { font-size: 0.78rem; }
  .av-btn { padding: 0.7rem 1.1rem; font-size: 0.85rem; }
}

/* The Momentos carousel is now provided by the bundled "Smart Post" plugin
 * (post-carousel). It ships its own CSS via Swiper; we don't redefine styles
 * here. To customize the look, drop a stylesheet at:
 *   themes/apoyoavenezuela/assets/css/post-carousel-custom.css
 * and enqueue it from functions.php. */

/* =============================================================================
 * Tanda 12 visual refinements (2026-06-28).
 *
 *  - Sticky site header background = solid white
 *  - Donate button color = brand-aqua (closest green in paleta)
 *  - Smart Post card heights = uniform + title clamp-2 + readmore at bottom
 *  - Service icons = larger (fills circle)
 *  - Timeline markers = day number in red, AHORA badge clamped to viewport
 *  - Volunteer category pill = shown on card top
 * ========================================================================== */

/* --- 1. Site header = solid white instead of translucent surface --- */
.av-site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(45, 58, 74, 0.10);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

/* --- 2. Donate button = brand-aqua (verde de la paleta) --- */
.av-btn-donate .wp-block-button__link {
  background: var(--wp--preset--color--brand-aqua);
  color: #ffffff;
}
.av-btn-donate .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--brand-aqua) 88%, var(--wp--preset--color--ink) 12%);
}

/* --- 3. Smart Post cards: uniform heights + title clamp + readmore alignment ---
 * The plugin outputs .sp-pcp-post > .pcp-post-thumb-wrapper (image) +
 * .sp-pcp-post-details > .sp-pcp-title + .sp-pcp-post-meta + .sp-pcp-post-content
 * (with .sp-pcp-readmore at the bottom). We:
 *   a) make the .sp-pcp-post a flex column that fills its slide
 *   b) force the title to 2 lines with ellipsis so all cards align
 *   c) push the readmore button to the bottom of the card
 */
.sp-pcp-row .sp-pcp-post,
.sp-pcp-row .pcp-item-,
.sp-pcp-section .sp-pcp-post,
.swiper-slide .sp-pcp-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 460px;
}
.sp-pcp-row .sp-pcp-post-details,
.swiper-slide .sp-pcp-post-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sp-pcp-row h2.sp-pcp-title,
.swiper-slide h2.sp-pcp-title,
.swiper-slide .sp-pcp-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Min-height reserves space for 2 lines so cards align even if one title
   * has only 1 line. Adjust line-height factor if title styling changes. */
  min-height: calc(2 * 1.3em);
  line-height: 1.3;
  font-size: 1.05rem;
  margin: 0.4rem 0 0.6rem;
  max-width: 100%;
  word-break: break-word;
  /* Keep the title element itself as a block so clamp works; the inner <a>
   * can still be styled normally. */
  overflow-wrap: anywhere;
}
.sp-pcp-row .sp-pcp-post-content,
.swiper-slide .sp-pcp-post-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 0.4rem;
}
.sp-pcp-row .sp-pcp-post-content > p,
.swiper-slide .sp-pcp-post-content > p {
  flex: 1;
  /* Excerpt: 3 lines max */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.6rem;
}
.sp-pcp-row .sp-pcp-readmore,
.swiper-slide .sp-pcp-readmore {
  margin-top: auto;
  align-self: stretch;
  display: block !important;
  text-align: center;
  width: 100%;
  padding: 0 !important;
  border-top: 1px solid var(--wp--preset--color--brand-sky);
  background: var(--wp--preset--color--brand-sky);
}
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a,
.sp-pcp-row .sp-pcp-readmore a,
.swiper-slide .sp-pcp-readmore a,
#galeria a.pcp-readmore-link {
  display: block !important;
  width: 100%;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0;
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none;
  text-align: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a:hover,
.sp-pcp-row .sp-pcp-readmore a:hover,
.swiper-slide .sp-pcp-readmore a:hover,
#galeria a.pcp-readmore-link:hover {
  background: var(--wp--preset--color--ink) !important;
  color: #ffffff !important;
}
/* Replace the hardcoded English "Read More" with Spanish "Ver más" */
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a,
.sp-pcp-row .sp-pcp-readmore a,
.swiper-slide .sp-pcp-readmore a,
#galeria a.pcp-readmore-link {
  font-size: 0 !important;
}
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a::after,
.sp-pcp-row .sp-pcp-readmore a::after,
.swiper-slide .sp-pcp-readmore a::after,
#galeria a.pcp-readmore-link::after {
  content: "Ver más →";
  font-size: 0.78rem;
}

/* Image: keep aspect ratio so cards align */
.sp-pcp-row .pcp-post-thumb-wrapper,
.swiper-slide .pcp-post-thumb-wrapper {
  flex: 0 0 auto;
}
.sp-pcp-row .sp-pcp-post-thumb-area,
.swiper-slide .sp-pcp-post-thumb-area {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  max-height: 260px;
  overflow: hidden;
}
.sp-pcp-row .sp-pcp-post-thumb-wrapper,
.swiper-slide .sp-pcp-post-thumb-wrapper,
.sp-pcp-row .sp-pcp-post-thumb-area,
.swiper-slide .sp-pcp-post-thumb-area,
.sp-pcp-row .sp-pcp-thumb,
.swiper-slide .sp-pcp-thumb {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sp-pcp-row .sp-pcp-post-thumb-area img,
.swiper-slide .sp-pcp-post-thumb-area img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  display: block;
}
/* Compact details: kill the empty P tag margins + reduce padding */
.sp-pcp-row .sp-pcp-post-details,
.swiper-slide .sp-pcp-post-details {
  padding: 0.9rem 1.1rem 1rem !important;
}
.sp-pcp-row .sp-pcp-post-details p:empty,
.swiper-slide .sp-pcp-post-details p:empty,
.sp-pcp-row .sp-pcp-post-details p:only-child:empty,
.swiper-slide .sp-pcp-post-details p:only-child:empty {
  display: none;
}
.sp-pcp-row .sp-pcp-post-content,
.swiper-slide .sp-pcp-post-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- 4. Service icons: larger, fills the circle --- */
.av-service-icon-circle {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-service-icon-circle .av-service-icon-svg,
.av-service-icon-svg {
  width: 70px;
  height: 70px;
  stroke-width: 1.6;
}
@media (max-width: 600px) {
  .av-service-icon-circle { width: 76px; height: 76px; }
  .av-service-icon-circle .av-service-icon-svg,
  .av-service-icon-svg { width: 56px; height: 56px; }
}

/* --- 5. Timeline markers: day number label in red, AHORA inside viewport ---
 * Smart post carousel adds wrapper classes around the plugin output that can
 * shift the timeline track; we add a per-marker label injected by JS in the
 * home template. CSS just styles it.
 */
.av-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: auto;
}
.av-timeline-marker-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  transition: background 0.4s, transform 0.4s;
}
.av-timeline-marker--past .av-timeline-marker-dot {
  background: rgba(255, 255, 255, 0.85);
}
.av-timeline-marker--current .av-timeline-marker-dot {
  width: 18px;
  height: 18px;
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.16), 0 0 0 14px rgba(255,255,255,0.08);
  animation: av-marker-pulse 2s ease-in-out infinite;
}
.av-timeline-marker-label {
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #ff4d4d;            /* rojo para el día */
  letter-spacing: 0.06em;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  position: absolute;
  top: 28px;                 /* debajo del dot */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 3px;
}
/* Edge-anchored labels: first and last markers stay inside the track. */
.av-timeline-marker[data-edge="first"] .av-timeline-marker-label {
  left: 0;
  transform: translateX(0);
  text-align: left;
}
.av-timeline-marker[data-edge="last"] .av-timeline-marker-label {
  left: auto;
  right: 0;
  transform: translateX(0);
  text-align: right;
}
.av-timeline-marker--current .av-timeline-marker-label {
  color: #ffffff;
  font-weight: 600;
  top: 36px;
}

/* AHORA badge: clamp to viewport right edge with right-anchored positioning.
 * The JS still sets `left: <pct>%`; we additionally cap the visual right side
 * with a max-width and `right: 0` for the last marker scenario. */
.av-timeline-now {
  position: absolute;
  top: 50%;
  transform: translate(-50%, calc(-50% - 64px));
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  /* Reserve a bit more room and never let the badge escape the right edge. */
  max-width: 90px;
  /* When JS positions the AHORA at the right end, shift it inward. */
}
@media (max-width: 600px) {
  .av-timeline-now-label {
    font-size: 0.62rem;
    padding: 0.2rem 0.5rem;
  }
}

/* --- 6. Volunteer category pill on the team card --- */
.av-vol-card .av-vol-categoria {
  display: inline-block;
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-aqua);
  background: rgba(123, 200, 190, 0.12);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  margin: 0 0 0.45rem;
}

/* --- 7. Noticia card: featured image with consistent aspect + title clamp --- */
.av-noticia-card,
#noticias .sp-pcp-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
}
#noticias h2.sp-pcp-title,
#noticias .sp-pcp-title {
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.3em);
  font-size: 1.1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#noticias .sp-pcp-post-thumb-area {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
#noticias .sp-pcp-post-thumb-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   VISION / MISION / QUIENES SOMOS — canonical content blocks
   ============================================================ */
.av-canonical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.2rem 0 1.6rem;
}
@media (max-width: 1023px) {
  .av-canonical-grid { grid-template-columns: 1fr; }
}

.av-canonical-block {
  background: #ffffff;
  border-radius: var(--av-radius-sm);
  border: 1px solid rgba(45, 58, 74, 0.10);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 4px 14px rgba(45, 58, 74, 0.06);
}
.av-canonical-block--vision  { border-top: 3px solid var(--wp--preset--color--brand-sky); }
.av-canonical-block--mision  { border-top: 3px solid var(--wp--preset--color--brand-coral); }
.av-canonical-block--quienes { border-top: 3px solid var(--wp--preset--color--brand-aqua); }

.av-canonical-block--empty { opacity: 0.7; }

.av-canonical-title {
  font-family: var(--wp--preset--font-family--headings), sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--wp--preset--color--ink);
}
.av-canonical-content {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(36, 49, 60, 0.86);
  overflow-wrap: anywhere;
}
.av-canonical-content p { margin: 0 0 0.6rem; }
.av-canonical-content p:last-child { margin-bottom: 0; }

/* ============================================================
   AV-VOL-PAIS — small flag + country name on volunteer card
   ============================================================ */
.av-vol-pais {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: rgba(36, 49, 60, 0.78);
  margin: 0 0 0.45rem;
}
.av-vol-pais-flag {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  /* Slight offset so the emoji baseline matches the text baseline */
  transform: translateY(1px);
}
.av-vol-pais-name {
  font-weight: 500;
}

/* ============================================================
   AV-EYEBROW — section identifier (replaces the oval pill)
   Two variants: with-rule (line above) and with-number
   ============================================================ */
.av-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  margin: 0 0 0.4rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.av-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 2px;
  background: var(--wp--preset--color--brand-coral);
  flex: 0 0 2.2rem;
}
.av-eyebrow--dark { color: var(--wp--preset--color--ink); }
.av-eyebrow--coral::before { background: var(--wp--preset--color--brand-coral); }
.av-eyebrow--aqua::before  { background: var(--wp--preset--color--brand-aqua); }
.av-eyebrow--sky::before   { background: var(--wp--preset--color--brand-sky); }
.av-eyebrow--sun::before   { background: var(--wp--preset--color--brand-sun); }

/* ============================================================
   WHITE BG — Sección "Nuestra colaboración" (servicios)
   Full-bleed: bg spans the entire viewport width; inner content
   keeps the .av-shell max-width. Done by pulling the section
   edge-to-edge with .alignfull + a negative-margin reset.
   ============================================================ */
#servicios {
  background: #ffffff;
  border-top: 1px solid rgba(45, 58, 74, 0.06);
  border-bottom: 1px solid rgba(45, 58, 74, 0.06);
  position: relative;
}
/* If #servicios sits inside an .av-shell parent, the white bg
   would be clipped by the parent's width. Bump the section out. */
#servicios {
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding-left:  max(20px, calc(50vw - 600px));
  padding-right: max(20px, calc(50vw - 600px));
}

/* ============================================================
   SCROLL ANIMATIONS — IntersectionObserver-driven fade-up
   Reduced motion + sticky header offset respected.
   ============================================================ */
/* Default state: elements are visible. JS progressively enhances by adding
   the .av-anim-init class which sets opacity: 0; the IO then adds
   .is-visible to bring them back. If JS doesn't run, or if the IO never
   fires (e.g. user has reduced motion, or the element never enters the
   viewport), the content stays visible. */
[data-av-anim] {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
[data-av-anim].av-anim-init {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}
[data-av-anim="fade-up"].is-visible,
[data-av-anim="fade-in"].is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
/* Stagger inside the same group (cards inside a grid). Same progressive
   enhancement: default visible, JS adds .av-anim-init to hide them before
   animating in. */
.av-metric-grid--four > *,
.av-services-minimal-grid > *,
.av-canonical-grid > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.av-metric-grid--four.av-anim-init > *,
.av-services-minimal-grid.av-anim-init > *,
.av-canonical-grid.av-anim-init > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
}
.av-metric-grid--four.is-visible > *,
.av-services-minimal-grid.is-visible > *,
.av-canonical-grid.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.av-metric-grid--four.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.av-metric-grid--four.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.av-metric-grid--four.is-visible > *:nth-child(3) { transition-delay: 0.20s; }
.av-metric-grid--four.is-visible > *:nth-child(4) { transition-delay: 0.28s; }
.av-services-minimal-grid.is-visible > *:nth-child(odd)  { transition-delay: 0.05s; }
.av-services-minimal-grid.is-visible > *:nth-child(even) { transition-delay: 0.15s; }
.av-canonical-grid.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.av-canonical-grid.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.av-canonical-grid.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
/* Honor user OS-level reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-av-anim],
  .av-metric-grid--four > *,
  .av-services-minimal-grid > *,
  .av-canonical-grid > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   MOMENTOS — cards pegadas horizontalmente con SOLO border-right
   de la paleta. Border-radius 0 para que el bloque se sienta como
   un grid de paneles sólido, no como cards flotantes.
   v19n: removed border-left, single colored right border per card
         (rotating paleta) for clean horizontal flow.
   ============================================================ */
#galeria .sp-pcp-row {
  gap: 0;
}
#galeria .sp-pcp-row > [class*="sp-pcp-col"],
#galeria .sp-pcp-row > .pcp-col,
#galeria .swiper-slide {
  padding: 0;
}
#galeria .sp-pcp-post {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--wp--preset--color--brand-coral);
  background: #ffffff;
  box-shadow: none;
  margin: 0;
}
#galeria .sp-pcp-row > *:nth-child(2n) .sp-pcp-post,
#galeria .swiper-slide:nth-child(2n) .sp-pcp-post {
  border-right-color: var(--wp--preset--color--brand-aqua);
}
#galeria .sp-pcp-row > *:nth-child(3n) .sp-pcp-post,
#galeria .swiper-slide:nth-child(3n) .sp-pcp-post {
  border-right-color: var(--wp--preset--color--brand-sky);
}
#galeria .sp-pcp-row > *:nth-child(4n) .sp-pcp-post,
#galeria .swiper-slide:nth-child(4n) .sp-pcp-post {
  border-right-color: var(--wp--preset--color--brand-sun);
}
#galeria .sp-pcp-row > *:last-child .sp-pcp-post,
#galeria .swiper-slide:last-child .sp-pcp-post {
  border-right: 1px solid var(--wp--preset--color--brand-coral);
}
#galeria .sp-pcp-post-thumb-wrapper,
#galeria .pcp-post-thumb-wrapper {
  border-radius: 0;
}

/* ============================================================
   MOMENTOS — cards touching (no gap) on home carousel + archive grid
   Smart Post renders 2 ways: `.sp-pcp-row` (archive / static grid) AND
   `.swiper-container` + `.swiper-slide` (home page carousel). Both
   need gap:0 so the cards are flush against each other. The visual
   separation comes from the border-left on each card.
   ============================================================ */
#galeria .sp-pcp-row,
#galeria .swiper-container {
  gap: 0 !important;
}
#galeria .swiper-slide {
  padding: 0 !important;
  margin: 0 !important;
  /* Override the data-carousel="spaceBetween":20 by negative margin trick */
  width: calc(25% - 0px) !important;
}
#galeria .sp-pcp-row > *,
#galeria .sp-pcp-post {
  min-width: 0;
  border-radius: 0;
}
/* Override JS-set spaceBetween via data attr: the JS sets inline
   margin-right on each slide. Force 0. */
#galeria .swiper-wrapper {
  display: flex;
}
#galeria .swiper-slide { margin-right: 0 !important; }

/* ============================================================
   OBJETIVOS — full-width white background (same technique as servicios)
   ============================================================ */
#objetivos {
  background: #ffffff;
  border-top: 1px solid rgba(45, 58, 74, 0.06);
  border-bottom: 1px solid rgba(45, 58, 74, 0.06);
  position: relative;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding-left:  max(20px, calc(50vw - 600px));
  padding-right: max(20px, calc(50vw - 600px));
}

/* ============================================================
   EQUIPO ARCHIVE — touching cards with paleta border separators
   ============================================================ */
.av-archive-grid {
  gap: 0 !important;
}
.av-archive-card.av-vol-card {
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--wp--preset--color--brand-coral);
  padding: 1.2rem 0.9rem 1.1rem;
}
.av-archive-grid > .av-archive-card.av-vol-card:nth-child(2n) { border-left-color: var(--wp--preset--color--brand-aqua); }
.av-archive-grid > .av-archive-card.av-vol-card:nth-child(3n) { border-left-color: var(--wp--preset--color--brand-sky); }
.av-archive-grid > .av-archive-card.av-vol-card:nth-child(4n) { border-left-color: var(--wp--preset--color--brand-sun); }
.av-archive-grid > .av-archive-card.av-vol-card:last-child { border-right: 1px solid var(--wp--preset--color--brand-sun); }

/* ============================================================
   CATEGORY FILTER — pill UI at top of the team section
   Renders automatically from the categoria pills already in the cards
   via data-av-categoria="..." attribute (set by the render function).
   ============================================================ */
.av-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.6rem;
  font-family: var(--wp--preset--font-family--oswald), sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.av-cat-filter-label {
  color: rgba(36, 49, 60, 0.55);
  margin-right: 0.6rem;
  font-weight: 500;
}
.av-cat-filter-btn {
  border: 0;
  background: rgba(45, 58, 74, 0.06);
  color: var(--wp--preset--color--ink);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.av-cat-filter-btn:hover { background: rgba(45, 58, 74, 0.12); }
.av-cat-filter-btn.is-active {
  background: var(--wp--preset--color--brand-sky);
  color: #ffffff;
  transform: scale(1.04);
}
.av-cat-filter-btn + .av-cat-filter-btn {
  border-left: 1px solid rgba(45, 58, 74, 0.12);
  border-radius: 999px;
}
/* Cards hidden by the filter */
.av-team-card.is-filtered-out,
.av-archive-card.av-vol-card.is-filtered-out {
  display: none;
}

/* ============================================================
   MOMENTOS — galeria refinements (v19e)
   - swiper-slide padding: 5px on each side
   - "Ver más" button: centered at bottom of the card
   - All cards: same height (uniform across the row)
   ============================================================ */
#galeria .swiper-slide {
  padding: 5px !important;
  box-sizing: border-box;
}
#galeria .sp-pcp-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 460px; /* uniform height — same as archive cards */
  background: #ffffff;
}
#galeria .sp-pcp-post-details {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.1rem 1.2rem 1.2rem;
}
#galeria .sp-pcp-post-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#galeria .sp-pcp-post-content p {
  flex: 1 1 auto;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(36, 49, 60, 0.78);
}
/* "Ver más" button: centered at the bottom of the card */
#galeria .sp-pcp-readmore {
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a,
.sp-pcp-row .sp-pcp-readmore a,
.swiper-slide .sp-pcp-readmore a,
#galeria a.pcp-readmore-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--wp--preset--color--brand-sky);
  color: #ffffff !important;
  background: var(--wp--preset--color--brand-sky) !important;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a:hover,
.sp-pcp-row .sp-pcp-readmore a:hover,
.swiper-slide .sp-pcp-readmore a:hover,
#galeria a.pcp-readmore-link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--brand-sky) 85%, var(--wp--preset--color--ink) 15%) !important;
  transform: translateY(-1px);
}
/* Replace hardcoded English text with Spanish "Ver más" */
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a,
.sp-pcp-row .sp-pcp-readmore a,
.swiper-slide .sp-pcp-readmore a,
#galeria a.pcp-readmore-link {
  font-size: 0 !important;
}
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a::after,
.sp-pcp-row .sp-pcp-readmore a::after,
.swiper-slide .sp-pcp-readmore a::after,
#galeria a.pcp-readmore-link::after {
  content: "Ver más →";
  font-size: 0.78rem;
}

/* ============================================================
   MOMENTOS — keep swiper flex (so JS carousel works) + equal heights
   via JS (av-momentos-equalize in functions.php). No CSS grid here
   because the swiper needs display:flex + transform: translate3d
   to scroll. margin-right forced 0 so cards are flush.
   IMPORTANT: do NOT use align-items: stretch on the wrapper —
   it causes a circular sizing (slide → card → details grow to
   fill wrapper, then wrapper grows to slide, ad infinitum).
   ============================================================ */
#galeria .swiper-wrapper {
  display: flex !important;
  align-items: flex-start;
}
#galeria .swiper-slide {
  margin-right: 0 !important;
  padding: 5px !important;
  box-sizing: border-box;
  width: calc(25% - 0px) !important;
  height: auto !important;
}
#galeria .sp-pcp-post {
  height: auto;
  display: flex;
  flex-direction: column;
}
#galeria .sp-pcp-post-details {
  flex: 0 0 auto !important;
  height: auto !important;
}
#galeria .sp-pcp-post-content {
  flex: 0 0 auto !important;
}
/* Mobile: 1 card per view, full width */
@media (max-width: 600px) {
  #galeria .swiper-slide {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ============================================================
   HEADER — sticky on the WHOLE template part (not just inner)
   The outer <header class="wp-block-template-part"> is static,
   so the topbar scrolls away. Make the wrapper sticky too.
   ============================================================ */
header.wp-block-template-part:has(.av-site-header) {
  position: sticky;
  top: 0;
  z-index: 50;
}
header.wp-block-template-part:has(.av-site-header) + .wp-block-group,
header.wp-block-template-part:has(.av-site-header) ~ main {
  position: relative;
  z-index: 1;
}

/* ============================================================
   MOBILE BOTTOM BAR — fixed nav strip on mobile (<= 767px)
   4 large tappable items: Inicio / Equipo / Noticias / Donar.
   Donar is highlighted in coral. Hidden on desktop.
   Bottom padding on body compensates for the fixed bar so the
   footer is not covered.
   ============================================================ */
.av-mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  /* Hide desktop topbar and the in-header Donar pill on mobile;
     they live in the bottom bar / drawer now. !important needed because
     .wp-block-buttons > .wp-block-button { display: inline-block } has
     higher specificity (.av-btn-donate is one class). */
  .av-topbar { display: none !important; }
  .av-btn-donate { display: none !important; }

  /* Reserve space for the fixed bottom bar so footer is reachable */
  body { padding-bottom: 64px; }

  .av-mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #ffffff;
    border-top: 1px solid rgba(45, 58, 74, 0.10);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    justify-content: space-around;
    align-items: stretch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  }

  .av-mobile-bar-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    font-family: var(--wp--preset--font-family--oswald), sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 8px;
    transition: color 0.18s ease, background 0.18s ease;
  }

  .av-mobile-bar-item svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .av-mobile-bar-item:active,
  .av-mobile-bar-item:focus-visible {
    background: rgba(123, 200, 190, 0.10);
    outline: none;
  }

  .av-mobile-bar-item--donate {
    color: #ffffff;
    background: var(--wp--preset--color--brand-coral);
    margin: -8px 2px 0 2px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(255, 184, 161, 0.45);
  }

  .av-mobile-bar-item--donate:active,
  .av-mobile-bar-item--donate:focus-visible {
    background: color-mix(in srgb, var(--wp--preset--color--brand-coral) 88%, var(--wp--preset--color--ink) 12%);
  }

  /* Brand on mobile: smaller font, ellipsis if it overflows */
  .av-site-header .av-site-brand-name {
    font-size: 1.25rem;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .av-site-header .av-site-logo-img,
  .av-site-header .wp-block-site-logo img {
    max-height: 50px;
  }
}

/* ============================================================
   SMOOTH SCROLL + sticky-header offset
   When clicking menu items (#anchor), scroll smoothly to the
   target minus the sticky header height. Honors prefers-reduced-motion.
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* sticky header height */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   SITE BRAND — logo + site name in a clickable link (v19l)
   Replaces the standalone wp:site-logo with a link wrapping
   the logo + the site name "Apoyo a Venezuela".
   ============================================================ */
.av-site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  text-transform: none;
  white-space: nowrap;
}
.av-site-brand:hover {
  color: var(--wp--preset--color--brand-sky);
  text-decoration: none;
}
.av-site-brand:hover img {
  transform: scale(1.04);
  transition: transform 0.25s ease;
}
.av-site-brand .custom-logo,
.av-site-brand img {
  max-height: 70px;
  width: auto;
  transition: transform 0.25s ease;
}
.av-site-brand-name {
  display: inline-block;
  margin-left: 4px;
  font-family: "Gochi Hand", "Comic Sans MS", cursive;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
}
@media (max-width: 600px) {
  .av-site-brand-name {
    font-size: 1.35rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .av-site-brand .custom-logo,
  .av-site-brand img {
    max-height: 50px;
  }
  .av-site-brand {
    gap: 0.6rem;
  }
}

/* ============================================================
   HERO PHOTO CREDIT — AP byline moved above the stat cards (v20)
   ============================================================ */
.av-hero-credit {
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 4;
  margin: 0;
  transform: translateX(-50%);
  padding: 5px 14px;
  font-family: var(--wp--preset--font-family--body, "Raleway", sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.42);
  border-radius: 3px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .av-hero-credit {
    right: 8px;
    bottom: 8px;
    font-size: 0.6rem;
    padding: 3px 7px;
    max-width: 75%;
    text-align: right;
  }
}


/* =============================================================
 * Tanda 24: WPForms /contacto form polish
 * Disable Spanish hyphenation on field labels
 * ============================================================= */
.wpforms-field-label,
.wpforms-field-sublabel,
.wpforms-form .wpforms-field-label,
.wpforms-form label {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.wpforms-field-checkbox .wpforms-field-label,
.wpforms-field-checkbox label {
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}
.av-contact-form .wpforms-field-label {
  white-space: normal;
  word-wrap: break-word;
}

/* Tanda 24: footer newsletter form (mailto fallback) */
.av-footer-newsletter-submit {
  flex: 0 0 auto;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 0;
  background: var(--wp--preset--color--brand-sun);
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s ease;
}
.av-footer-newsletter-submit:hover { filter: brightness(1.08); }
.av-footer-newsletter-hint {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}