/* ==========================================================================
   FADEFA — Design Tokens
   ========================================================================== */
:root {
  /* Colors — FADEFA institutional palette (blue / sky-blue only) */
  --color-primary: #053468;                    /* Azul institucional — brand, buttons, nav, títulos, enlaces */
  --color-primary-container: #03254A;          /* Azul profundo — footer, navbar oscuro, secciones de contraste */
  --color-on-primary: #ffffff;
  --color-secondary: #40B6DA;                  /* Celeste institucional — acentos, hover, líneas/íconos decorativos */
  --color-secondary-container: #03254A;        /* alias de azul profundo (compatibilidad) */
  --color-on-secondary: #ffffff;
  --color-surface-tint: rgba(3, 37, 74, 0.55); /* azul profundo atenuado — tono terciario/mutado */
  --color-background: #DDF4FA;                 /* Celeste claro — fondos suaves de separación entre secciones */
  --color-surface-container-lowest: #ffffff;
  --color-surface-variant: #DDF4FA;            /* Celeste claro — divisores y marcas de agua suaves */
  --color-outline-variant: rgba(64, 182, 218, 0.4); /* Celeste — bordes destacados / hover */
  --color-on-surface: #17212B;                 /* Negro suave */
  --color-on-surface-variant: rgba(23, 33, 43, 0.75); /* Negro suave atenuado — cuerpo de texto secundario */

  /* Typography */
  --font-base: 'Urbanist', sans-serif;

  /* Spacing */
  --unit: 8px;
  --gutter: 32px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --container-max: 1280px;
  --section-padding: 120px;
  --section-padding-mobile: 64px;

  /* Radius */
  --radius-card: 0.875rem; /* 14px */
  --radius-full: 9999px;   /* pill — used on all buttons */

  /* Header */
  --header-height: 80px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Lenis owns scroll smoothing; native smooth-scroll would fight its inertia. */
html { scroll-behavior: auto; }

/* Recommended Lenis hooks (studio-freight/lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
html, body {
  /* Safety net: nothing on this page should ever cause horizontal scroll on
     a phone, but this catches it (clips instead of scrolling) if something
     ever does — a stray fixed width, a long unbreakable word, etc.
     `clip` instead of `hidden`: hidden on both html and body turns body into
     its own scroll container, which on mobile (iOS Safari especially) makes
     touch scrolling intermittently get stuck on the wrong element. `clip`
     clips the same way without creating a scroll container. */
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body {
  margin: 0;
  font-family: var(--font-base);
  background: #ffffff; /* blanco predominante — var(--color-background) queda para secciones de separación */
  color: var(--color-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* height:auto para que los atributos width/height de las <img> solo reserven
   la proporción (evita saltos de layout) sin forzar la altura en píxeles. */
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: #DDF4FA; color: #03254A; }

/* Texto solo para lectores de pantalla y buscadores (H1 del Observatorio,
   títulos de los paneles de Legislación, contexto de links). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Links contextuales dentro de texto corrido */
.aftosa-copy a,
.explorer-panel-body a,
.pubs-related a,
.fmd-ar-summary a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.aftosa-copy a:hover,
.explorer-panel-body a:hover,
.pubs-related a:hover,
.fmd-ar-summary a:hover { color: var(--color-secondary); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-mobile);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--margin-desktop); }
}

/* Shared type utilities */
.rule { background: var(--color-secondary); }
.rule-hero { width: 48px; height: 4px; margin-bottom: 24px; }
.rule-card { width: 32px; height: 4px; margin-bottom: 16px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: var(--radius-full);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
/* Press/hover transform is owned by GSAP when it's available (js/main.js);
   a CSS `transition: transform` here would fight GSAP's own per-frame
   updates on the same property and produce a jittery "double animation".
   The .no-gsap block below is the only place transform-transition lives,
   and it only activates when GSAP never loaded at all. */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-container); }

/* Hero CTA — pill button with a circular icon badge */
.btn-hero-cta {
  padding: 6px 6px 6px 28px;
  gap: 20px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
}
.btn-hero-cta:hover { background: var(--color-primary-container); }

.hero-cta-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color .2s ease;
}
.hero-cta-icon .arrow-icon { color: var(--color-primary); font-size: 20px; }

/* The label is long ("CONOCÉ MÁS SOBRE FADEFA") — .btn's default nowrap
   would force it past the viewport edge on narrow phones, so it wraps to
   two lines by default and only goes single-line once there's room. */
.hero-cta-text { white-space: normal; line-height: 1.3; }
@media (min-width: 768px) {
  .hero-cta-text { white-space: nowrap; }
}

.btn-outline {
  width: 100%;
  justify-content: space-between;
  padding: 10px 18px;
  background: transparent;
  color: var(--color-on-primary);
  border: 1px solid rgba(255,255,255,0.3);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }

.arrow-icon { font-size: 18px; }
.arrow-icon-sm { font-size: 16px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  will-change: transform;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.nav-hidden { transform: translateY(-100%); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand { display: flex; align-items: center; gap: 16px; }
.brand-logo {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.brand-tagline {
  font-size: 10px;
  color: rgba(23,33,43,0.7);
  line-height: 1.3;
  white-space: nowrap;
  display: none;
}
@media (min-width: 768px) {
  .brand-tagline { display: block; }
}

.main-nav {
  display: none;
  align-items: center;
  gap: 32px;
}
/* 7 links + logo + CTA only fit on one line from ~1280px; below that the
   hamburger menu takes over instead of letting the labels wrap. */
@media (min-width: 1280px) {
  .main-nav { display: flex; }
}
@media (min-width: 1440px) {
  .main-nav { gap: 44px; }
}
.nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-on-surface-variant);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color .2s ease, transform .15s ease;
}
.nav-link:hover { color: var(--color-secondary); }
.nav-link:active { transform: scale(0.95); }
.nav-link.active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom-color: var(--color-secondary);
}
.nav-caret { font-size: 14px; transition: transform .2s ease; }

/* Observatorio dropdown — opens on click/tap (JS toggles .open) */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { padding: 0 0 4px; }
.nav-dropdown.open .nav-caret,
.mobile-nav-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  /* Centered via layout (not translate(-50%)) so the text lands on whole
     pixels — a fractional transform makes the labels render blurry. */
  left: -200px;
  right: -200px;
  margin-inline: auto;
  width: max-content;
  min-width: 200px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(3, 37, 74, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nav-dropdown-link {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.nav-dropdown-link:hover { color: var(--color-primary); background: var(--color-background); }
.nav-dropdown-link.active { color: var(--color-primary); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.icon-btn {
  padding: 8px;
  color: var(--color-primary);
  display: flex;
  transition: color .2s ease;
}
.icon-btn:hover { color: var(--color-secondary); }
.icon-btn .material-symbols-outlined { font-size: 24px; }
.menu-toggle { display: flex; }
@media (min-width: 1280px) {
  .menu-toggle { display: none; }
}

/* Mobile nav drawer */
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  background: var(--color-surface-container-lowest);
  border-top: 1px solid transparent;
  transition: max-height .35s ease, border-color .35s ease;
}
.mobile-nav.open {
  max-height: 720px;
  border-top-color: var(--color-outline-variant);
}
.mobile-nav-link {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  border-bottom: 1px solid var(--color-surface-variant);
}
.mobile-nav-link.active { color: var(--color-primary); }
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.mobile-nav-toggle .nav-caret { font-size: 20px; }
.mobile-subnav {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.mobile-subnav.open { max-height: 200px; }
.mobile-subnav-link {
  padding-left: 36px;
  font-weight: 500;
  background: var(--color-background);
}
@media (min-width: 1280px) {
  .mobile-nav { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  /* min-height, not height: on mobile the stacked title + text + button +
     observatory card can need more than 600px of room (long headline
     wrapping to 3 lines, etc.) — a fixed height there would vertically
     center-crop the content, jamming the title into the header and
     cutting the card off entirely. Letting the box grow keeps everything
     on-screen; 768px+ switches to a fixed height once the layout goes
     side-by-side and comfortably fits it. */
  min-height: 600px;
  overflow: hidden;
  margin-top: var(--header-height);
}
@media (min-width: 768px) { .hero { height: 700px; min-height: 0; } }
@media (min-width: 1024px) { .hero { height: 800px; } }

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(3,37,74,0.9), rgba(3,37,74,0.7) 45%, rgba(3,37,74,0) 80%);
}

.hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
@media (min-width: 768px) {
  .hero-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

.hero-content { width: 100%; padding-top: 48px; }
@media (min-width: 768px) {
  .hero-content { width: 60%; padding-top: 0; }
}
@media (min-width: 1024px) {
  .hero-content { width: 50%; }
}

.hero-title {
  color: var(--color-on-primary);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .hero-title { font-size: 64px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
}

.hero-text {
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 448px;
}
@media (min-width: 768px) {
  .hero-text { font-size: 18px; }
}

.observatory-wrap {
  width: 100%;
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .observatory-wrap { width: 40%; margin-top: 0; justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .observatory-wrap { width: 33.333%; }
}

/* On mobile this collapses to a single condensed pill — icon + title +
   arrow — that reads and behaves as one button (it's the <a> itself); the
   description and the full "IR AL OBSERVATORIO" label only reappear at
   768px+, once there's room for the full card treatment. */
.observatory-card {
  display: block;
  text-decoration: none;
  background: rgba(3,37,74,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 20px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(3,37,74,0.15);
  border: 1px solid rgba(64,182,218,0.25);
  width: auto;
  max-width: 100%;
  transition: border-color .2s ease, background-color .2s ease;
}
.observatory-card:hover { border-color: rgba(255,255,255,0.4); }
@media (min-width: 768px) {
  .observatory-card {
    padding: 24px;
    border-radius: var(--radius-card);
    width: 100%;
    max-width: 300px;
  }
}

.observatory-head { display: flex; align-items: center; gap: 14px; }
@media (min-width: 768px) {
  .observatory-head { margin-bottom: 14px; }
}
.observatory-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.observatory-logo { width: 28px; height: 28px; object-fit: contain; }
@media (min-width: 768px) {
  .observatory-icon { width: 52px; height: 52px; }
  .observatory-logo { width: 38px; height: 38px; }
}
.observatory-title {
  color: var(--color-on-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .observatory-title { font-size: 20px; font-weight: 600; letter-spacing: normal; white-space: normal; }
}
/* The full official name only shows once the card has room (768px+) — on
   mobile the title reads just "OBSERVATORIO", keeping the pill compact. */
.observatory-title-full { display: none; }
@media (min-width: 768px) {
  .observatory-title-full { display: inline; }
}

/* Compact mobile-only affordance arrow, sitting at the end of the head row
   in place of the full "IR AL OBSERVATORIO" button below (hidden on mobile). */
.observatory-arrow { color: #fff; flex-shrink: 0; }
@media (min-width: 768px) {
  .observatory-arrow { display: none; }
}

.observatory-text {
  display: none;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .observatory-text { display: block; }
}

.observatory-btn { display: none; }
@media (min-width: 768px) {
  .observatory-btn { display: inline-flex; }
}

/* ==========================================================================
   Mini Hero — shorter banner used on secondary pages (e.g. observatorio.html)
   Reuses .hero-media/.hero-overlay/.rule-hero/.hero-title/.hero-text so it
   rides the same GSAP entrance timeline as the main hero automatically.
   ========================================================================== */
.mini-hero {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  margin-top: var(--header-height);
}
@media (min-width: 768px) { .mini-hero { height: 380px; } }
@media (min-width: 1024px) { .mini-hero { height: 420px; } }

.mini-hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-on-primary);
  background: rgba(255,255,255,0.14);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.mini-hero-title {
  font-size: 28px;
  margin-bottom: 16px;
  max-width: 640px;
}
@media (min-width: 768px) {
  .mini-hero-title { font-size: 40px; }
}

/* Observatorio: the logo replaces the text title */
.mini-hero-logo-title { max-width: none; line-height: 0; }
.mini-hero-logo {
  width: auto;
  height: 110px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
@media (min-width: 768px) { .mini-hero-logo { height: 150px; } }
@media (min-width: 1024px) { .mini-hero-logo { height: 180px; } }

.mini-hero-text {
  max-width: 480px;
  margin-bottom: 0;
}

/* ==========================================================================
   Section eyebrow — pill label used above headings on light sections
   (dark-section equivalent is .mission-eyebrow, further down)
   ========================================================================== */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  background: rgba(5,52,104,0.08);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}

/* ==========================================================================
   About — Sobre Nosotros (intro)
   ========================================================================== */
.about {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-padding-mobile) 0;
  background: var(--color-surface-container-lowest);
}
@media (min-width: 768px) {
  .about { padding: var(--section-padding) 0; }
}

/* Decorative photo — bottom-left bleed, same recipe as .timeline-deco
   further down: a photo circle poking past the section edge with a thin
   curved line + dot drifting away from it. Desktop-only; on mobile the
   grid stacks to one column and there's no room for it without colliding
   with the heading. */
.about-deco { display: none; }
@media (min-width: 1024px) {
  .about-deco {
    display: block;
    position: absolute;
    bottom: -50px;
    left: -100px;
    width: 300px;
    height: 300px;
    z-index: -1;
  }
}
.about-deco-circle {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-variant);
}
.about-deco-circle img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Same brand-celeste wash as .timeline-deco-circle::after. */
.about-deco-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(64, 182, 218, 0.4);
}
.about-deco-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}
.about-deco-line path { fill: none; stroke: var(--color-secondary); stroke-width: 0.6; opacity: 0.75; }
.about-deco-line circle { fill: var(--color-secondary); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--gutter);
    align-items: start;
  }
}

.about-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .about-title { font-size: 56px; }
}
@media (min-width: 1024px) {
  .about-title { font-size: 64px; }
}
.about-title-accent { color: var(--color-secondary); }

.rule-about { width: 64px; height: 4px; margin: 24px 0 0; }

.about-lead-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-on-surface-variant);
  max-width: 560px;
}
@media (min-width: 768px) {
  .about-lead { font-size: 20px; }
}

/* The historical detail paragraphs — same voice as .about-lead but a step
   down in size/weight so the opening sentence keeps reading as the intro. */
.about-detail {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  max-width: 620px;
}
@media (min-width: 768px) {
  .about-detail { font-size: 16px; }
}

/* ==========================================================================
   Timeline — Nuestra Historia
   ========================================================================== */
.timeline {
  position: relative;
  overflow: hidden;
  /* Scopes the deco elements' negative z-index to this section, so "behind
     the content" doesn't mean "behind the whole page" (a negative z-index
     with no isolating ancestor stacking context escapes past .timeline
     entirely and can end up under neighboring sections instead). */
  isolation: isolate;
  padding: var(--section-padding-mobile) 0;
  background: var(--color-background);
}
@media (min-width: 768px) {
  .timeline { padding: var(--section-padding) 0; }
}

.timeline-head { margin-bottom: 56px; }
@media (min-width: 768px) {
  .timeline-head { margin-bottom: 80px; }
}
.timeline-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .timeline-title { font-size: 44px; }
}

.timeline-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* The connecting line — sits behind every dot, left-aligned on mobile
   (where cards stack in a single column) and centered on desktop (where
   cards alternate left/right around it). Two layers: a dim static base
   (always visible — the safe fallback if JS/ScrollTrigger never loads)
   and a colored progress fill on top of it that js/main.js grows from 0
   to 100% height as the section scrolls through view, so the line reads
   as being "drawn" downward in sync with each node lighting up. */
.timeline-line,
.timeline-line-progress {
  position: absolute;
  top: 4px;
  left: 19px;
  width: 2px;
}
.timeline-line { bottom: 4px; background: var(--color-outline-variant); }
.timeline-line-progress {
  height: 0%;
  background: var(--color-secondary);
  z-index: 1;
}
@media (min-width: 1024px) {
  .timeline-line, .timeline-line-progress { left: 50%; transform: translateX(-50%); }
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 24px;
}
@media (min-width: 1024px) {
  .timeline-item { grid-template-columns: 1fr 64px 1fr; column-gap: 40px; }
}

.timeline-marker {
  grid-column: 1;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
@media (min-width: 1024px) {
  .timeline-marker { grid-column: 2; }
}
.timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: 4px solid var(--color-background);
  box-shadow: 0 0 0 2px var(--color-secondary), 0 4px 14px rgba(64,182,218,0.35);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
/* "Not reached yet" state — js/main.js adds .is-pending to every item up
   front (only once ScrollTrigger is confirmed available) and removes it
   item-by-item as the progress line scrolls past each one, so the dot
   lights up in sync with the line reaching it. Without JS, dots simply
   stay in their default lit-up state above — nothing to fix in that case. */
.timeline-item.is-pending .timeline-dot {
  background: rgba(23,33,43,0.15);
  box-shadow: 0 0 0 2px rgba(23,33,43,0.15);
  transform: scale(0.8);
}

.timeline-card {
  grid-column: 2;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  padding: 24px 28px;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.timeline-card:hover {
  box-shadow: 0 4px 20px rgba(3,37,74,0.1);
  border-color: var(--color-outline-variant);
}
@media (min-width: 1024px) {
  .timeline-card { grid-column: 3; }
  /* Alternate sides: even items hug the left rail and right-align their text */
  .timeline-item:nth-child(even) .timeline-card { grid-column: 1; text-align: right; }
}

.timeline-year {
  display: inline-block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .timeline-year { font-size: 30px; }
}

.timeline-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}
@media (min-width: 768px) {
  .timeline-text { font-size: 16px; }
}

/* Decorative background flourishes — NOT tied to any single milestone,
   just loose ambient detail scattered behind the track: a big soft circle
   (image placeholder for now) bleeding off the section's right edge, with
   a thin curved line + dot drifting toward it. .timeline needs position +
   overflow:hidden so these crop cleanly at the section edge instead of
   spilling into whatever comes below/beside it. Desktop-only — on mobile
   the track takes the full width and there's no room for them to bleed
   into without colliding with the cards. */
.timeline-deco { display: none; }
@media (min-width: 1024px) {
  .timeline-deco {
    display: block;
    position: absolute;
    right: -120px;
    width: 340px;
    height: 340px;
    z-index: -1;
  }
  .timeline-deco--1 { top: 6%; }
  .timeline-deco--2 { top: 58%; right: -180px; width: 300px; height: 300px; }

  /* Left-bleeding variants — same shape; the arc itself gets mirrored via
     .timeline-deco-line's transform, further down. */
  .timeline-deco--left { right: auto; }
  .timeline-deco--3 { top: 30%; left: -140px; width: 300px; height: 300px; }
  .timeline-deco--4 { top: 84%; left: -100px; width: 260px; height: 260px; }
}

/* Inset (not inset:0) on purpose — leaves a ring of empty space between the
   photo and the edge of .timeline-deco's box for .timeline-deco-line's arc
   to actually run through, hugging the circle instead of floating outside it. */
.timeline-deco-circle {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-variant);
}
.timeline-deco-circle img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Brand-celeste wash over the photo, echoing the sky-blue glow these had as
   placeholders. Plain alpha color (not a blended gradient) on purpose —
   it shows up reliably regardless of what's under it, where mix-blend-mode
   is pickier about the browser/compositing setup. */
.timeline-deco-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(64, 182, 218, 0.4);
}

/* The arc's radius (47, vs. the circle's ~42 in this same 0–100 space) is
   what makes it trace a ring just outside the photo instead of a line that
   veers off toward some unrelated point — same "orbit" technique as the
   virus illustration's annotation line up in the aftosa section. A percentage
   viewBox means one path works for every .timeline-deco size variant. */
.timeline-deco-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.timeline-deco--left .timeline-deco-line { transform: scaleX(-1); }
.timeline-deco-line path { fill: none; stroke: var(--color-secondary); stroke-width: 0.6; opacity: 0.75; }
.timeline-deco-line circle { fill: var(--color-secondary); }

/* ==========================================================================
   Mission — Nuestra Misión (full-bleed statement band)
   ========================================================================== */
.mission {
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  padding: var(--section-padding-mobile) 0;
  text-align: center;
}
@media (min-width: 768px) {
  .mission { padding: var(--section-padding) 0; }
}

.mission-inner { max-width: 820px; margin: 0 auto; }

.mission-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-on-primary);
  background: rgba(255,255,255,0.14);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 28px;
}

.mission-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
}
.mission-icon .material-symbols-outlined { font-size: 32px; color: var(--color-secondary); }

.mission-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0;
}
@media (min-width: 768px) {
  .mission-text { font-size: 22px; }
}
@media (min-width: 1024px) {
  .mission-text { font-size: 24px; }
}

/* ==========================================================================
   Pillars — Cómo Trabajamos
   ========================================================================== */
.pillars {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-padding-mobile) 0;
  background: var(--color-background);
}
@media (min-width: 768px) {
  .pillars { padding: var(--section-padding) 0; }
}

/* Purely decorative — same visual language as .timeline-deco / .about-deco:
   soft overlapping circles + a thin curved line with a dot, bleeding off
   the top-right corner, plus a small dot-grid tucked in the bottom-left.
   Desktop-only, same reasoning as the other -deco blocks. */
.pillars-deco, .pillars-deco-dots { display: none; }
@media (min-width: 1024px) {
  .pillars-deco {
    display: block;
    position: absolute;
    top: -100px;
    right: -110px;
    width: 420px;
    height: 420px;
    z-index: -1;
  }
  .pillars-deco-dots {
    display: block;
    position: absolute;
    bottom: 24px;
    left: -8px;
    width: 120px;
    height: 120px;
    z-index: -1;
    background-image: radial-gradient(var(--color-outline-variant) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
  }
}
.pillars-deco-circle { position: absolute; border-radius: 50%; }
.pillars-deco-circle--a {
  width: 420px;
  height: 420px;
  top: 0;
  right: 0;
  background: var(--color-background);
}
.pillars-deco-circle--b {
  width: 260px;
  height: 260px;
  top: 120px;
  right: 170px;
  background: rgba(64, 182, 218, 0.15);
}
.pillars-deco-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.pillars-deco-line path { fill: none; stroke: var(--color-secondary); stroke-width: 1; opacity: 0.6; }
.pillars-deco-line circle { fill: var(--color-secondary); }

.pillars-head { margin-bottom: 48px; }
@media (min-width: 768px) {
  .pillars-head { margin-bottom: 64px; }
}
.pillars-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .pillars-title { font-size: 44px; }
}
.rule-pillars { width: 64px; height: 4px; margin: 20px 0 0; }

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 768px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

.pillar-card {
  position: relative;
  padding: 40px 32px 32px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.pillar-card:hover {
  box-shadow: 0 4px 20px rgba(3,37,74,0.1);
  border-color: var(--color-outline-variant);
}

.pillar-index {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 48px;
  font-weight: 800;
  color: var(--color-surface-variant);
  line-height: 1;
  z-index: 0;
}

.pillar-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.pillar-icon .material-symbols-outlined { font-size: 26px; color: #fff; }

.pillar-title {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.pillar-text {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}

/* Soft circle bleeding from the card's bottom-right corner, echoing the
   section-level deco above — same idea as .timeline-deco-circle but plain
   color, no photo. .pillar-card's own overflow:hidden clips it. */
.pillar-deco {
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--color-background);
  z-index: 0;
}

/* ==========================================================================
   Comisión Directiva — tres niveles: presidente (card oscura con foto),
   mesa directiva (3 cards iguales con monograma) y la base de vocales /
   asesores / coordinación (listado compacto en un panel celeste). El
   contenido lo arma js/comision.js dentro de #comisionBody.
   ========================================================================== */
.comision {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-padding-mobile) 0;
  background: #ffffff;
}
@media (min-width: 768px) {
  .comision { padding: var(--section-padding) 0; }
}
.comision-deco-dots { display: none; }
@media (min-width: 1024px) {
  .comision-deco-dots {
    display: block;
    position: absolute;
    top: 48px;
    right: -8px;
    width: 120px;
    height: 120px;
    z-index: -1;
    background-image: radial-gradient(var(--color-outline-variant) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
  }
}

.comision-head { margin-bottom: 48px; }
@media (min-width: 900px) {
  .comision-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 64px;
  }
}
.comision-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .comision-title { font-size: 44px; }
}
.comision-lead {
  max-width: 420px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}
@media (min-width: 900px) {
  .comision-lead { margin-top: 0; }
}

.comision-body {
  display: grid;
  gap: var(--gutter);
}

/* Shared bits */
.comision-role {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(5,52,104,0.08);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}
.comision-role--light {
  color: #fff;
  background: rgba(64,182,218,0.22);
}
.comision-sigla {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-primary);
  border: 1px solid rgba(5,52,104,0.2);
  border-radius: var(--radius-full);
  vertical-align: 1px;
}

/* Monogram — initials inside a soft circle, wrapped by the same curved
   line + dot used by the -deco blocks across the site. */
.comision-mono {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.comision-mono-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.comision-mono-arc path { fill: none; stroke: var(--color-secondary); stroke-width: 2; }
.comision-mono-arc circle { fill: var(--color-secondary); }
.comision-mono-text {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: var(--color-background);
  transition: background-color .3s ease, color .3s ease;
}
.comision-mono--lg { width: 160px; height: 160px; margin: 0; }
.comision-mono--lg .comision-mono-text { width: 124px; height: 124px; font-size: 44px; }

/* Level 1 — Presidente */
.comision-pres {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: var(--radius-card);
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(64,182,218,0.22) 0%, rgba(64,182,218,0) 55%),
    var(--color-primary-container);
  transition: box-shadow .3s ease;
}
.comision-pres:hover { box-shadow: 0 18px 44px rgba(3,37,74,0.28); }
@media (min-width: 768px) {
  .comision-pres { grid-template-columns: minmax(260px, 38%) 1fr; min-height: 360px; }
}

.comision-pres-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .comision-pres-media { aspect-ratio: auto; }
}
.comision-pres-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1);
}
.comision-pres:hover .comision-pres-img { transform: scale(1.04); }
/* Melts the photo into the card's navy so it doesn't read as a pasted box */
.comision-pres-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,37,74,0) 55%, rgba(3,37,74,0.95) 100%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .comision-pres-media::after {
    background: linear-gradient(90deg, rgba(3,37,74,0) 62%, rgba(3,37,74,0.9) 100%);
  }
}

.comision-pres-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 24px 36px;
}
@media (min-width: 768px) {
  .comision-pres-body { padding: 48px 56px; }
}
.comision-pres-name {
  margin-top: 18px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .comision-pres-name { font-size: 42px; }
}
.comision-pres-rule { width: 48px; height: 4px; margin: 22px 0; }
.comision-pres-entity {
  max-width: 440px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}
.comision-pres-entity .comision-sigla {
  display: table;
  margin-bottom: 10px;
  color: var(--color-secondary);
  border-color: rgba(64,182,218,0.5);
}
.comision-pres-watermark {
  position: absolute;
  right: 24px;
  bottom: -0.22em;
  font-size: 220px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 767px) {
  .comision-pres-watermark { font-size: 140px; right: 12px; }
}

/* Level 2 — Mesa directiva */
.comision-mesa {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 768px) {
  .comision-mesa { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
  .comision-mesa { gap: var(--gutter); }
}
.comision-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
/* Celeste bar that sweeps in along the top edge on hover */
.comision-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.comision-card:hover {
  box-shadow: 0 10px 32px rgba(3,37,74,0.12);
  border-color: var(--color-outline-variant);
}
.comision-card:hover::before { transform: scaleX(1); }
.comision-card:hover .comision-mono-text { background: var(--color-primary); color: #fff; }
.comision-card:hover .comision-mono-arc { transform: rotate(90deg); }
.comision-card-name {
  margin: 14px 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}
.comision-card-entity {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-on-surface-variant);
}
.comision-card-entity .comision-sigla { display: table; margin-bottom: 8px; }

/* Level 3 — Vocales, asesores y coordinación */
.comision-base {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 32px 24px;
  background: var(--color-background);
  border-radius: var(--radius-card);
}
@media (min-width: 560px) {
  .comision-base { grid-template-columns: repeat(2, 1fr); padding: 36px 32px; }
}
@media (min-width: 1100px) {
  .comision-base { grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 40px; }
  .comision-group + .comision-group {
    padding-left: 28px;
    border-left: 1px solid rgba(5,52,104,0.12);
  }
}
.comision-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 18px;
}
.comision-group-title::before {
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--color-secondary);
}
.comision-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.comision-item + .comision-item { margin-top: 18px; }
.comision-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: var(--color-secondary);
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}
.comision-item-name {
  display: block;
  padding-top: 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.comision-item-entity {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-on-surface-variant);
}
.comision-item-entity .comision-sigla { font-size: 10.5px; padding: 1px 7px; margin-right: 6px; }

/* ==========================================================================
   Aftosa — ¿Qué es la Fiebre Aftosa?
   ========================================================================== */
.aftosa {
  padding: var(--section-padding-mobile) 0;
  background: var(--color-background);
}
@media (min-width: 768px) {
  .aftosa { padding: var(--section-padding) 0; }
}

/* Block 1 — title/copy, the virus visual, 3 pull-out facts and the
   "no confundir" comparison, laid out as 4 columns once there's room
   (title|visual|facts|compare), each of the last two separated by a thin
   rule; stacks to a single column on mobile in that same reading order. */
.aftosa-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (min-width: 1024px) {
  .aftosa-hero {
    grid-template-columns: 1.05fr 1fr 0.8fr 0.8fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 72px;
  }
}

.aftosa-intro { position: relative; }

/* Giant faint numeral behind the title — desktop only, purely decorative. */
.aftosa-watermark {
  display: none;
}
@media (min-width: 1024px) {
  .aftosa-watermark {
    display: block;
    position: absolute;
    top: 4px;
    left: -4px;
    font-size: 160px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-surface-variant);
    opacity: .6;
    z-index: 0;
    pointer-events: none;
  }
}

.aftosa-intro > :not(.aftosa-watermark) { position: relative; z-index: 1; }

.aftosa-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .aftosa-title { font-size: 40px; }
}
@media (min-width: 1024px) {
  .aftosa-title { font-size: 46px; }
}
.aftosa-subtitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .aftosa-subtitle { font-size: 19px; }
}
.aftosa-intro .rule-about { margin-top: 20px; margin-bottom: 20px; }

/* Shared body-copy style used across both blocks' paragraphs */
.aftosa-copy { display: flex; flex-direction: column; gap: 20px; }
.aftosa-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  max-width: 680px;
}
@media (min-width: 768px) {
  .aftosa-copy p { font-size: 17px; }
}
.aftosa-copy em { color: var(--color-on-surface); }

/* Visual — the provided virus/hoof composite. Its leader line (dot + bend
   + horizontal stub) is already baked into the PNG, ending at ~76.6%
   width / 13.1% height of the image — the label below just picks up
   right where that line stops, no CSS-drawn line needed on top of it.
   `justify-self: center` (not flex+justify-content) is what makes those
   percentages line up with the image's own edges instead of the wider
   grid cell around it — a flex-centered image can render narrower than
   its container, which would throw the label's position off. */
/* Gentle floating drift on the whole visual (image + its line/tag overlay
   move together, so the annotation stays glued to the illustration).
   Applied to the container rather than just the <img> on purpose — it's
   also what .aftosa-hero/.aftosa-cause-grid's one-time GSAP scroll-reveal
   animates in on `transform`, but that only ever runs once on scroll-in
   (a y-slide + fade); this loops forever and simply takes over the same
   property once it's running, which is fine here — the fade-in still
   plays, just without the slide nuance. */
.aftosa-visual {
  position: relative;
  justify-self: center;
  animation: aftosa-float 5s ease-in-out infinite;
}
.aftosa-visual-img { display: block; max-width: 100%; height: auto; }
@keyframes aftosa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .aftosa-visual { animation: none; }
}
.aftosa-visual-tag { display: none; }
@media (min-width: 1024px) {
  .aftosa-visual-tag {
    display: block;
    position: absolute;
    left: 78%;
    top: 10%;
  }
  .aftosa-visual-tag-text {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--color-primary);
  }
}

/* Block 2's visual has no leader line baked into its PNG (unlike block 1's),
   so it's drawn here instead — an inline SVG rather than a rotated CSS div,
   since a viewBox matching the image's own pixel size scales the line/dot
   uniformly with it at any breakpoint without distorting into an ellipse. */
.aftosa-visual-line {
  display: none;
}
@media (min-width: 1024px) {
  .aftosa-visual-line {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.aftosa-visual-line path {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 4;
}
.aftosa-visual-line circle { fill: var(--color-secondary); }

.aftosa-visual-tag--cause { left: 80%; top: 2%; }

/* The 3 pull-out facts — short highlights of the paragraphs to the left,
   not a replacement for them. */
.aftosa-facts {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .aftosa-facts { border-left: 1px solid var(--color-surface-variant); padding-left: 32px; }
}
.aftosa-fact {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-surface-variant);
}
.aftosa-fact:first-child { padding-top: 0; }
.aftosa-fact:last-child { border-bottom: none; padding-bottom: 0; }
.aftosa-fact-index {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.aftosa-fact-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.aftosa-fact-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-on-surface-variant);
}

/* "No confundir" — Fiebre Aftosa vs. Mano-Pie-Boca, as a typographic
   comparison rather than an icon callout. */
.aftosa-compare {
  display: block;
}
@media (min-width: 1024px) {
  .aftosa-compare { border-left: 1px solid var(--color-surface-variant); padding-left: 32px; }
}
.aftosa-compare-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.aftosa-compare-versus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 0;
}
.aftosa-compare-a, .aftosa-compare-b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-primary);
}
.aftosa-compare-sign { font-size: 20px; font-weight: 800; color: var(--color-primary); }
.aftosa-compare .rule-card { margin-top: 16px; }
.aftosa-compare-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

.aftosa-divider {
  border-top: 1px solid var(--color-surface-variant);
  margin: 0 0 56px;
}
@media (min-width: 768px) {
  .aftosa-divider { margin-bottom: 72px; }
}

/* Block 2 — cause, serotypes. Mirrors block 1's visual language (watermark
   numeral, eyebrow, .rule-about, .aftosa-copy) but as a simpler 2-column
   grid — visual on the left, everything else on the right, per request. */
.aftosa-cause-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) {
  .aftosa-cause-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--gutter);
    align-items: center;
  }
}

.aftosa-cause { position: relative; }
.aftosa-cause > :not(.aftosa-watermark) { position: relative; z-index: 1; }
.aftosa-cause .rule-about { margin-top: 20px; margin-bottom: 20px; }
.aftosa-cause > .aftosa-copy { margin-bottom: 20px; }

.aftosa-cause-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 20px;
}

/* The 7 serotypes get their own showcase row instead of running text —
   each chip echoes the numbered-index motif already used on .pillar-card.
   Stays at 4 columns even on desktop here (rather than 7, like when this
   grid had the full section width to itself) since this column only ever
   gets about half the container. */
.serotypes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
@media (min-width: 480px) {
  .serotypes-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .serotypes-grid { margin-bottom: 40px; }
}

.serotype-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 8px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  text-align: center;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.serotype-chip:hover {
  box-shadow: 0 4px 20px rgba(3,37,74,0.1);
  border-color: var(--color-outline-variant);
}
.serotype-index {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-surface-tint);
}
.serotype-code {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

/* The two closing notes, side by side once there's room, divided by a
   thin rule — same divider language as .aftosa-facts/.aftosa-compare. */
.aftosa-notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .aftosa-notes { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}
.aftosa-note { min-width: 0; }
@media (min-width: 640px) {
  .aftosa-note + .aftosa-note { border-left: 1px solid var(--color-surface-variant); padding-left: var(--gutter); }
}
.aftosa-note-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(64,182,218,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.aftosa-note-icon .material-symbols-outlined { color: var(--color-secondary); font-size: 20px; }
.aftosa-note-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.aftosa-note-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

.aftosa-cta { margin-top: 8px; }
@media (min-width: 768px) {
  .aftosa-cta { margin-top: 16px; }
}
.btn-lg {
  padding: 16px 36px;
  font-size: 14px;
  gap: 12px;
}
.btn-lg .arrow-icon-sm { font-size: 20px; }
@media (min-width: 768px) {
  .btn-lg { padding: 18px 44px; font-size: 15px; }
  .btn-lg .arrow-icon-sm { font-size: 22px; }
}

/* ==========================================================================
   La Fiebre Aftosa en Argentina
   ========================================================================== */
.zonas {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-padding-mobile) 0;
  background: linear-gradient(160deg, #ffffff 0%, var(--color-background) 100%);
}
@media (min-width: 768px) {
  .zonas { padding: var(--section-padding) 0; }
}

/* Purely decorative — same recipe as .vigilancia-deco/.pillars-deco: soft
   overlapping circles + a thin curved line with a dot, plus a faded
   Argentina silhouette and a small dot-grid, all built at one fixed size
   (560x560, tuned for desktop) and scaled down as a single unit via
   `transform` on mobile/tablet — cheaper and much simpler than re-tuning
   every child's position per breakpoint, and it keeps the cluster's
   proportions identical at every size. transform-origin stays pinned to
   the corner the whole thing bleeds from, so top/right below is where the
   *visible* corner ends up at any scale, not the pre-scale layout box. */
.zonas-deco {
  display: block;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 560px;
  height: 560px;
  z-index: -1;
  transform: scale(0.3);
  transform-origin: top right;
  pointer-events: none;
}
@media (min-width: 480px) {
  .zonas-deco { transform: scale(0.4); }
}
@media (min-width: 768px) {
  .zonas-deco { transform: scale(0.55); }
}
@media (min-width: 1024px) {
  .zonas-deco { top: -80px; right: -60px; transform: none; }
}
.zonas-deco-circle { position: absolute; border-radius: 50%; }
.zonas-deco-circle--a { width: 460px; height: 460px; top: 20px; right: 20px; background: rgba(64, 182, 218, 0.1); }
.zonas-deco-circle--b { width: 300px; height: 300px; top: 100px; right: 100px; background: rgba(64, 182, 218, 0.12); }
.zonas-deco-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.zonas-deco-line path { fill: none; stroke: var(--color-secondary); stroke-width: 1; opacity: 0.6; }
.zonas-deco-line circle { fill: var(--color-secondary); }
.zonas-deco-map {
  position: absolute;
  right: 180px;
  bottom: -20px;
  width: 260px;
  height: auto;
  filter: grayscale(1) brightness(1.75);
  opacity: 0.55;
}
/* Nested inside .zonas-deco (rather than positioned off .zonas directly)
   so it scales down together with the circles/line/map as one cluster. */
.zonas-deco-dots {
  position: absolute;
  top: 300px;
  left: 10px;
  width: 110px;
  height: 90px;
  background-image: radial-gradient(var(--color-outline-variant) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

.zonas-head {
  position: relative;
  max-width: 640px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .zonas-head { margin-bottom: 64px; }
}
.zonas-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .zonas-title { font-size: 44px; }
}
.zonas-title-accent { color: var(--color-secondary); }
.zonas-head .rule-about { margin-top: 20px; margin-bottom: 20px; }
.zonas-lead { max-width: 620px; }

/* Two status cards, side by side — icon, title and a small "explore"
   arrow on the left; a huge faint letter bleeding off the right edge
   marks each one as its own category (A/B) rather than a ranked list. */
.zonas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .zonas-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gutter); margin-bottom: 40px; }
}
.zona-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
  transition: box-shadow .3s ease;
}
.zona-card:hover { box-shadow: 0 10px 32px rgba(3,37,74,0.14); }
.zona-card-body { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 20px; max-width: 70%; }
.zona-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 10px rgba(64, 182, 218, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.zona-icon .material-symbols-outlined { color: #fff; font-size: 26px; }
.zona-card-text { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.zona-title { font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--color-primary); }
.zona-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, border-color .3s ease;
}
.zona-arrow .material-symbols-outlined { font-size: 16px; color: var(--color-primary); transition: color .3s ease; }
.zona-card:hover .zona-arrow { background: var(--color-primary); border-color: var(--color-primary); }
.zona-card:hover .zona-arrow .material-symbols-outlined { color: #fff; }
.zona-letter {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  font-size: 90px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-surface-variant);
}
/* Soft circle bleeding from the card's bottom-left corner, echoing
   .accion-deco/.pillar-deco elsewhere on the page. */
.zona-deco {
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--color-background);
  opacity: 0.7;
  z-index: 0;
}

/* Key-idea callout — a soft filled card (no border accent — flat colored
   left borders read as an AI-generated-slide cliché), same icon-badge
   recipe as .aftosa-note-icon, with a small dot-grid echoing the section
   decoration instead. */
.callout {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.06);
  padding: 28px 32px;
  margin-bottom: 32px;
}
.callout-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(64,182,218,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.callout-icon { color: var(--color-secondary); font-size: 22px; }
.callout-text {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--color-on-surface);
}
@media (min-width: 768px) {
  .callout-text { font-size: 17px; }
}
.callout-deco-dots { display: none; }
@media (min-width: 1024px) {
  .callout-deco-dots {
    display: block;
    flex-shrink: 0;
    width: 70px;
    height: 56px;
    margin-left: auto;
    background-image: radial-gradient(var(--color-outline-variant) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    opacity: 0.7;
  }
}

.zonas-cta { margin-bottom: 40px; }

/* Disclaimer note — sober footnote treatment, deliberately lighter than
   .callout: a thin top rule instead of a filled box, smaller/muted text. */
.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--color-surface-variant);
}
.note-icon-inline { color: var(--color-surface-tint); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.note-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}
@media (min-width: 768px) {
  .note-text { font-size: 13.5px; }
}

/* ==========================================================================
   Libre de Fiebre Aftosa no significa dejar de vigilar
   ========================================================================== */
.vigilancia {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-padding-mobile) 0;
  background: linear-gradient(160deg, #ffffff 0%, var(--color-background) 100%);
}
@media (min-width: 768px) {
  .vigilancia { padding: var(--section-padding) 0; }
}

/* Purely decorative — same recipe as .pillars-deco: soft overlapping
   circles + a thin curved line with a dot, bleeding off the top-right
   corner, plus a small dot-grid tucked in the bottom-right. Desktop-only,
   same reasoning as every other -deco block on the page. */
.vigilancia-deco, .vigilancia-deco-dots { display: none; }
@media (min-width: 1024px) {
  .vigilancia-deco {
    display: block;
    position: absolute;
    top: -120px;
    right: 260px;
    width: 480px;
    height: 480px;
    z-index: -1;
  }
  .vigilancia-deco-dots {
    display: block;
    position: absolute;
    bottom: 40px;
    right: 32px;
    width: 120px;
    height: 120px;
    z-index: -1;
    background-image: radial-gradient(var(--color-outline-variant) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
  }
}
.vigilancia-deco-circle { position: absolute; border-radius: 50%; }
.vigilancia-deco-circle--a { width: 480px; height: 480px; top: 0; right: 0; background: var(--color-background); }
.vigilancia-deco-circle--b { width: 280px; height: 280px; top: 90px; right: 140px; background: rgba(64, 182, 218, 0.15); }
.vigilancia-deco-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.vigilancia-deco-line path { fill: none; stroke: var(--color-secondary); stroke-width: 1; opacity: 0.6; }
.vigilancia-deco-line circle { fill: var(--color-secondary); }

/* Head + photo, side by side once there's room — mirrors .aftosa-hero's
   "title block next to a floated visual" composition. */
.vigilancia-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}
@media (min-width: 1024px) {
  .vigilancia-hero { grid-template-columns: 1.1fr 1fr; gap: var(--gutter); margin-bottom: 64px; }
}

.vigilancia-head { max-width: 560px; }
.vigilancia-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .vigilancia-title { font-size: 44px; }
}
.vigilancia-title-accent { color: var(--color-secondary); }
.vigilancia-head .rule-about { margin-top: 20px; margin-bottom: 20px; }

/* Photo — a big circle bleeding off the section's right edge (same
   "soft circle + photo" recipe as .timeline-deco-circle), duotoned to the
   brand celeste via the same plain-alpha wash rather than mix-blend-mode,
   with a vertical tagline sitting to its left. Desktop-only: there isn't
   room for a bleeding circle once the grid stacks to one column. */
.vigilancia-visual { display: none; }
@media (min-width: 1024px) {
  .vigilancia-visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    position: relative;
    height: 460px;
  }
}
.vigilancia-visual-photo {
  position: relative;
  flex-shrink: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-variant);
  margin-right: -64px;
}
.vigilancia-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(0.85) contrast(1.05);
}
/* Brand-celeste wash over the photo — same technique/reasoning as
   .timeline-deco-circle::after. */
.vigilancia-visual-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(64, 182, 218, 0.4);
}
.vigilancia-visual-tag { max-width: 120px; }
.vigilancia-visual-tag-text {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}
.vigilancia-visual-tag-rule { width: 28px; height: 3px; margin-top: 14px; }

/* The 7 surveillance actions — split into a 4-card row and a 3-card row
   (rather than one 7-item grid that wraps unevenly) so the last row's
   cards stretch to fill the width instead of leaving a gap. */
.acciones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .acciones-grid--row1 { grid-template-columns: repeat(2, 1fr); }
  .acciones-grid--row2 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .acciones-grid--row1 { grid-template-columns: repeat(4, 1fr); }
  .acciones-grid--row2 { grid-template-columns: repeat(3, 1fr); }
  .acciones-grid { gap: 24px; margin-bottom: 24px; }
}
.acciones-grid--row2 { margin-bottom: 48px; }
@media (min-width: 768px) {
  .acciones-grid--row2 { margin-bottom: 64px; }
}

.accion-card {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
  transition: box-shadow .3s ease;
}
.accion-card:hover { box-shadow: 0 10px 32px rgba(3,37,74,0.14); }

.accion-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.accion-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.accion-icon .material-symbols-outlined { color: #fff; font-size: 24px; }
.accion-index {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-surface-variant);
  line-height: 1;
}
.accion-title {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  min-height: 44px;
}

/* Soft circle bleeding from the card's bottom-right corner — same idea as
   .pillar-deco, toned down since these cards are smaller. */
.accion-deco {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-background);
  opacity: 0.6;
  z-index: 0;
}

.vigilancia-copy { position: relative; margin-bottom: 0; }

/* ==========================================================================
   Features
   ========================================================================== */
.features {
  padding: var(--section-padding-mobile) 0;
  background: var(--color-surface-container-lowest);
}
@media (min-width: 768px) {
  .features { padding: var(--section-padding) 0; }
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow .3s ease;
}
.feature-card:hover { box-shadow: 0 4px 20px rgba(3,37,74,0.1); }

.feature-media { position: absolute; inset: 0; z-index: 0; }
.feature-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  transition: opacity .3s ease;
}
.feature-card:hover .feature-bg { opacity: 0.5; }
.feature-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0) 100%);
}

.feature-body {
  position: relative;
  z-index: 10;
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
}

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.feature-icon .material-symbols-outlined { font-size: 28px; color: #fff; }
.feature-icon--navy { background: var(--color-primary); }
.feature-icon--crimson { background: var(--color-primary-container); }
.feature-icon--slate { background: var(--color-surface-tint); }

.feature-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
}
.feature-title--navy { color: var(--color-primary); }
.feature-title--crimson { color: var(--color-primary); margin-bottom: 16px; }

.feature-text {
  color: var(--color-on-surface-variant);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
  flex-grow: 1;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: auto;
  transition: color .2s ease;
}
.feature-link--navy { color: var(--color-primary); }
.feature-link--navy:hover { color: var(--color-secondary); }
.feature-link--crimson { color: var(--color-primary); }
.feature-link--crimson:hover { color: var(--color-secondary); }
.feature-link--slate { color: var(--color-primary); }
.feature-link--slate:hover { color: var(--color-surface-tint); }

/* ==========================================================================
   Quick Access — 6-card icon grid
   ========================================================================== */
.quick-access {
  padding: var(--section-padding-mobile) 0;
  background: var(--color-background);
}
@media (min-width: 768px) {
  .quick-access { padding: var(--section-padding) 0; }
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .quick-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; }
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.quick-card:hover {
  box-shadow: 0 4px 20px rgba(3,37,74,0.1);
  border-color: var(--color-outline-variant);
}
.quick-icon {
  font-size: 32px;
  color: var(--color-primary);
}
.quick-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--color-primary);
}
.quick-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface-variant);
}

/* ==========================================================================
   Dashboard — Noticias / Informes / Alertas
   ========================================================================== */
.dashboard {
  padding: 0 0 var(--section-padding-mobile);
  background: var(--color-background);
}
@media (min-width: 768px) {
  .dashboard { padding-bottom: var(--section-padding); }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
}

.dashboard-col { display: flex; flex-direction: column; }

.dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-surface-variant);
}
.dashboard-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  transition: color .2s ease;
}
.dashboard-link:hover { color: var(--color-secondary); }

/* Noticias */
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-surface-variant);
}
.news-item:last-child { border-bottom: none; }
.news-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant);
}
.news-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-on-surface);
  transition: color .2s ease;
}
.news-item:hover .news-title { color: var(--color-secondary); }

/* Informes */
.report-list { display: flex; flex-direction: column; }
.report-item { border-bottom: 1px solid var(--color-surface-variant); }
.report-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
}
.report-item:last-child { border-bottom: none; }
.report-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(64,182,218,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.report-icon .material-symbols-outlined { font-size: 18px; color: var(--color-secondary); }
.report-body { display: flex; flex-direction: column; gap: 2px; }
.report-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-on-surface);
  transition: color .2s ease;
}
.report-item:hover .report-title { color: var(--color-secondary); }
.report-meta {
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

/* Alertas */
.alert-list { display: flex; flex-direction: column; }
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-surface-variant);
}
.alert-item:last-child { border-bottom: none; }
.alert-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.alert-dot--high { background: var(--color-primary-container); }
.alert-dot--medium { background: var(--color-primary); }
.alert-dot--low { background: var(--color-surface-tint); }
.alert-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-on-surface-variant);
}
.alert-text strong { color: var(--color-on-surface); font-weight: 700; }

/* ==========================================================================
   Situación Mundial — mapa interactivo del estatus oficial de fiebre aftosa
   (OMSA). Dibujado en SVG por js/fmd-map.js a partir de data/fmd-status.json;
   este bloque sólo define su piel visual.
   ========================================================================== */
.fmd-section { padding: var(--section-padding-mobile) 0; background: #ffffff; }
@media (min-width: 768px) {
  .fmd-section { padding: var(--section-padding) 0; }
}

.fmd-head { max-width: 760px; margin-bottom: 40px; }
@media (min-width: 768px) {
  .fmd-head { margin-bottom: 56px; }
}
.fmd-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
  margin-bottom: 12px;
}
.fmd-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .fmd-title { font-size: 36px; }
}
.rule-fmd { width: 64px; height: 4px; margin: 20px 0 16px; }
.fmd-subtitle { font-size: 14px; font-weight: 600; color: var(--color-on-surface-variant); }

.fmd-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 1024px) {
  .fmd-body { flex-direction: row; align-items: flex-start; gap: 40px; }
}

/* Card that frames the SVG — matches .quick-card / .pillar-card's surface
   treatment (white, hairline border, soft shadow) so the map reads as part
   of the same design system rather than a bolted-on widget. */
.fmd-map-card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
@media (min-width: 768px) {
  .fmd-map-card { padding: 20px; }
}

.fmd-map-canvas {
  position: relative;
  width: 100%;
  /* Fixed box, independent of the SVG's own viewBox — this is what lets the
     "zoom into Argentina" interaction animate the aspect ratio itself
     (portrait, matching the OMSA reference crop) instead of reflowing the
     page. Matches the base viewBox's own 960/470 ratio at rest. */
  aspect-ratio: 960 / 470;
  transition: aspect-ratio .65s cubic-bezier(.65,0,.35,1);
  background: var(--color-background);
  border-radius: calc(var(--radius-card) - 6px);
  overflow: hidden;
}
.fmd-map-canvas.is-ar-zoomed { aspect-ratio: 2 / 3; }
.fmd-svg { display: block; width: 100%; height: 100%; }
.fmd-svg.is-ar-zoomed .fmd-country { pointer-events: none; }

.fmd-map-loading {
  margin: 0;
  padding: 72px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-on-surface-variant);
}
.fmd-map-loading.fmd-map-error { color: var(--color-primary); font-weight: 600; }

.fmd-country {
  stroke: #ffffff;
  stroke-width: 0.5;
  transition: filter .15s ease, stroke .15s ease, stroke-width .15s ease;
}
.fmd-country.is-interactive { cursor: pointer; }
.fmd-country.is-static { cursor: default; }
.fmd-country.is-interactive:hover,
.fmd-country.is-interactive.is-active {
  filter: brightness(1.14);
  stroke: var(--color-primary);
  stroke-width: 1.2;
}

.fmd-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-on-surface-variant);
  background: rgba(255,255,255,0.8);
  border-radius: var(--radius-full);
  pointer-events: none;
}

/* ==========================================================================
   Zoom a Argentina — callout "Ver más", botón de volver, marcador con pulso
   y las 4 zonas sanitarias. Todo vive dentro del mismo mapa (fmd-map.js
   anima viewBox + aspect-ratio del contenedor); nada de esto abre un modal.
   ========================================================================== */

/* Pin/ping en el centroide de Argentina, dibujado dentro del propio SVG. */
.fmd-ar-marker-ring {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: fmd-ar-pulse 2.2s ease-out infinite;
}
.fmd-ar-marker-dot { fill: var(--color-secondary); stroke: #fff; stroke-width: 1.5; }
.fmd-ar-connector { stroke: var(--color-secondary); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .8; }
@keyframes fmd-ar-pulse {
  0%   { transform: scale(0.4); opacity: .9; }
  70%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fmd-ar-marker-ring { animation: none; opacity: .5; }
}

/* "Ver más" — un control cliqueable, deliberadamente distinto del hover que
   ya tienen los demás países: pill sólida + badge circular, mismo lenguaje
   que .btn-hero-cta en el resto del sitio. */
.fmd-ar-cta {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 4px 4px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 18px rgba(3,37,74,0.3);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
  z-index: 5;
}
.fmd-ar-cta:hover { background: var(--color-primary-container); }
.fmd-ar-cta-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmd-ar-cta-badge .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }
.fmd-ar-cta-text { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }

/* "Volver" — esquina fija, no sigue ninguna coordenada del mapa. */
.fmd-ar-back {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  background: rgba(3,37,74,0.85);
  backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}
.fmd-ar-back:hover { background: var(--color-primary-container); }
.fmd-ar-back .material-symbols-outlined { font-size: 18px; }

/* Estado oculto compartido por .fmd-ar-cta / .fmd-ar-back mientras dura la
   transición — evita que sigan clickeables mientras se desvanecen. */
.fmd-ar-cta[hidden], .fmd-ar-back[hidden] { display: none; }

/* Zonas sanitarias — el asset trazado de images/argentina-zones.svg,
   inyectado como <g> dentro del mismo <svg> del mapa mundial. Su opacidad
   (0 en reposo, animada a 1/0 al abrir/cerrar) se maneja con el atributo
   SVG `opacity` desde fmd-map.js, no desde acá — así no compite en la
   cascada con una regla de hoja de estilos. */
.fmd-ar-zone path {
  stroke: #ffffff;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  transition: filter .15s ease, stroke-width .15s ease;
}
.fmd-ar-zone path:hover,
.fmd-ar-zone.is-active path {
  filter: brightness(1.1);
  stroke-width: 1.4;
}
.fmd-svg:not(.is-ar-zoomed) .fmd-ar-zones { pointer-events: none; }

/* Panel propio de Argentina — título, subtítulo y leyenda de las 4 zonas,
   debajo del mapa mientras dura el zoom. */
.fmd-ar-panel { margin-top: 18px; }
.fmd-ar-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
}
.fmd-ar-subtitle {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-on-surface-variant);
}
.fmd-ar-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}
@media (min-width: 640px) {
  .fmd-ar-legend { grid-template-columns: repeat(2, 1fr); }
}
.fmd-ar-legend-item { display: flex; align-items: flex-start; gap: 10px; }
.fmd-ar-legend-swatch {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 4px;
}
.fmd-ar-legend-text { font-size: 12.5px; line-height: 1.45; color: var(--color-on-surface-variant); }
.fmd-ar-legend-text strong { display: block; color: var(--color-on-surface); font-weight: 600; }

/* Mobile: targets táctiles cómodos para "Ver más"/"Volver" (>= 44px). */
@media (max-width: 767px) {
  .fmd-ar-cta { padding: 5px 16px 5px 5px; }
  .fmd-ar-cta-badge { width: 34px; height: 34px; }
  .fmd-ar-back { min-height: 44px; }
}

/* Legend */
.fmd-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 0 0;
}
@media (min-width: 1024px) {
  .fmd-legend { width: 260px; }
}
.fmd-legend-item { display: flex; align-items: flex-start; gap: 10px; }
.fmd-legend-swatch {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 4px;
}
.fmd-legend-text { font-size: 13px; line-height: 1.45; color: var(--color-on-surface-variant); }

/* Tooltip — one shared floating element, positioned by fmd-map.js */
.fmd-tooltip {
  position: fixed;
  z-index: 200;
  max-width: 240px;
  padding: 10px 14px;
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(3,37,74,0.25);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}
.fmd-tooltip[hidden] { display: none; }
.fmd-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-primary-container);
}
.fmd-tooltip-country { display: block; font-size: 13px; font-weight: 700; }
.fmd-tooltip-status { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.85); }

/* Accessible detail list — always available, not just a JS-failure fallback */
/* Resumen en texto del estatus de Argentina (escrito por scripts/build.mjs) */
.fmd-ar-summary {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-surface-variant);
  max-width: 860px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}
.fmd-ar-summary-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}
.fmd-ar-summary-list { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.fmd-ar-summary-list li { padding-left: 14px; position: relative; }
.fmd-ar-summary-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.fmd-ar-summary-list strong { color: var(--color-on-surface); }
.fmd-ar-summary-map { width: 220px; margin-top: 16px; }

.fmd-detail {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-surface-variant);
}
.fmd-detail summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}
.fmd-detail summary::-webkit-details-marker { display: none; }
.fmd-detail summary::before { content: '+'; color: var(--color-secondary); font-weight: 800; }
.fmd-detail[open] summary::before { content: '\2013'; }
.fmd-detail-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .fmd-detail-groups { grid-template-columns: repeat(3, 1fr); }
}
.fmd-detail-group h3 {
  padding-bottom: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-surface-variant);
}
.fmd-detail-group ul { display: flex; flex-direction: column; gap: 6px; }
.fmd-detail-group li { font-size: 13px; line-height: 1.4; color: var(--color-on-surface-variant); }

/* ==========================================================================
   Logos Marquee — infinite right-to-left loop, same bg as the footer
   ========================================================================== */
.logos-marquee {
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  padding: 56px 0 64px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .logos-marquee { padding: 72px 0 88px; }
}

.marquee-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-on-primary);
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .marquee-title { font-size: 28px; margin-bottom: 48px; }
}

.marquee-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  /* translateX(-50%) = exactly one .marquee-group, since both groups are
     identical — so the loop restarts seamlessly. */
  /* Duration scales with group width (12 logos per group): ~60s keeps the
     logos drifting at roughly 20-30px/s on phones and desktops alike. */
  animation: marquee-scroll 60s linear infinite;
}
/* Each group is at least as wide as the screen: with only 6 logos a group
   is ~800px on desktop, and if it's narrower than the viewport the right
   side runs empty halfway through every loop. space-around spreads the
   logos out when there's room to spare. No flex `gap` here on purpose
   (the seam between groups wouldn't get it) — each logo owns its trailing
   margin instead, so both groups stay pixel-identical. */
.marquee-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  min-width: 100vw;
}
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }

.marquee-logo {
  height: 32px;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 64px;
  opacity: 0.8;
  transition: opacity .2s ease;
}
.marquee-logo:hover { opacity: 1; }
@media (min-width: 768px) {
  .marquee-logo { height: 42px; margin-right: 80px; }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Contacto — última sección de la home, justo antes del footer.
   Un panel en el mismo azul profundo del footer, pero flotando sobre un
   fondo celeste claro: así tiene presencia propia y no se funde con el
   footer que viene debajo. Los datos los completa js/contact.js.
   ========================================================================== */
.contacto {
  padding: var(--section-padding-mobile) 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-background) 100%);
}
@media (min-width: 768px) {
  .contacto { padding: var(--section-padding) 0; }
}

.contacto-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 40px 24px 24px;
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(3,37,74,0.18);
}
/* Mismo recurso decorativo que el resto del sitio: círculo suave celeste
   asomando por una esquina. */
.contacto-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  top: -200px;
  left: -160px;
  border-radius: 50%;
  background: rgba(64, 182, 218, 0.12);
}
@media (min-width: 768px) {
  .contacto-panel { padding: 56px 48px 48px; }
}
@media (min-width: 1024px) {
  .contacto-panel {
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    padding: 64px;
    align-items: stretch;
  }
}

.contacto-eyebrow {
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
  background: rgba(64, 182, 218, 0.14);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}
.contacto-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .contacto-title { font-size: 56px; }
}
.contacto-info .rule-about { margin: 20px 0; }
.contacto-lead {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  max-width: 460px;
  margin-bottom: 32px;
}

.contacto-list { display: flex; flex-direction: column; gap: 12px; }
.contacto-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background-color .25s ease, border-color .25s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.contacto-item:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(64, 182, 218, 0.4);
  transform: translateX(4px);
}
.contacto-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(64, 182, 218, 0.5);
  color: var(--color-secondary);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.contacto-icon .material-symbols-outlined { font-size: 22px; }
.contacto-item:hover .contacto-icon {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary-container);
}
.contacto-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contacto-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.contacto-value {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-on-primary);
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .contacto-value { font-size: 17px; }
}
.contacto-value a {
  background-image: linear-gradient(var(--color-secondary), var(--color-secondary));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .2s ease, background-size .3s ease;
}
.contacto-value a:hover { color: var(--color-secondary); background-size: 100% 1px; }

.contacto-value--email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.contacto-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.contacto-copy .material-symbols-outlined { font-size: 15px; }
.contacto-copy:hover { color: var(--color-on-primary); border-color: var(--color-secondary); }
.contacto-copy.is-copied {
  color: var(--color-primary-container);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.contacto-map {
  position: relative;
  min-height: 300px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.06); /* se ve mientras carga el iframe */
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}
@media (min-width: 1024px) {
  .contacto-map { min-height: 440px; }
}
.contacto-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.contacto-directions {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(3,37,74,0.25);
}
.contacto-directions:hover { background: var(--color-secondary); color: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  width: 100%;
  padding-top: 64px;
  padding-bottom: 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

.footer-brand .brand { margin-bottom: 0; }
.brand-logo--footer { filter: brightness(0) invert(1); }
.brand-tagline--footer { display: block; color: rgba(255,255,255,0.7); }

.footer-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.footer-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}

.footer-list { display: flex; flex-direction: column; gap: 12px; }
.footer-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}
.footer-icon { font-size: 20px; margin-top: 2px; }
.footer-list a { transition: color .2s ease; }
.footer-list a:hover { color: var(--color-secondary); }

.social-row { display: flex; align-items: center; gap: 16px; }
.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease;
}
.social-btn:hover { background: var(--color-on-primary); color: var(--color-primary); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-legal { display: flex; align-items: center; gap: 16px; }

/* Links a todas las secciones (los escribe scripts/build.mjs) */
.footer-nav { margin: -16px 0 32px; }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
@media (min-width: 768px) {
  .footer-nav ul { justify-content: flex-start; }
}
.footer-nav a { transition: color .2s ease; }
.footer-nav a:hover { color: var(--color-secondary); }
.footer-legal a { transition: color .2s ease; }
.footer-legal a:hover { color: var(--color-on-primary); }

/* ==========================================================================
   Legislación — página de referencia/consulta (legislacion.html)
   Prioriza legibilidad y escaneo rápido: tabs + tabla estática + buscador
   client-side. Los datos viven en data/legislacion.json (ver js/legislacion.js).
   ========================================================================== */
.legis-section {
  padding: var(--section-padding-mobile) 0;
}
@media (min-width: 768px) {
  .legis-section { padding: var(--section-padding) 0; }
}

.legis-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .legis-head { flex-direction: row; align-items: center; justify-content: space-between; }
}

.legis-updated {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-on-surface-variant);
}

.legis-search-wrap {
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .legis-search-wrap { width: 340px; flex-shrink: 0; }
}
.legis-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-on-surface-variant);
  pointer-events: none;
}
.legis-search {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-on-surface);
}
.legis-search:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(64,182,218,0.18);
}
.legis-search::-webkit-search-cancel-button { cursor: pointer; }

.legis-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-surface-variant);
  padding-bottom: 16px;
}
.legis-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-variant);
  border-radius: var(--radius-full);
  transition: background-color .2s ease, color .2s ease;
}
.legis-tab:hover { color: var(--color-primary); }
.legis-tab.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.legis-panel[hidden] { display: none; }

.legis-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
}
@media (max-width: 700px) {
  .legis-table-wrap { border: none; overflow-x: visible; }
}

.legis-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
@media (max-width: 700px) {
  .legis-table { min-width: 0; }
}

.legis-table thead th {
  text-align: left;
  padding: 14px 20px;
  background: var(--color-background);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}
.legis-table thead th:first-child { border-top-left-radius: var(--radius-card); }
.legis-table thead th:last-child { border-top-right-radius: var(--radius-card); }

.legis-table tbody tr { border-top: 1px solid var(--color-surface-variant); }
.legis-table tbody tr:hover { background: rgba(64,182,218,0.06); }

.legis-table td {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
  vertical-align: top;
}

.legis-norma { font-weight: 700; }

.legis-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
}
.legis-link:hover { text-decoration: underline; }
.legis-link-icon { font-size: 15px; }

.legis-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.legis-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.legis-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.legis-badge--vigente { background: rgba(46,125,50,0.12); color: #2E7D32; }
.legis-badge--vigente .legis-badge-dot { background: #2E7D32; }
.legis-badge--modificada { background: rgba(21,101,192,0.12); color: #1565C0; }
.legis-badge--modificada .legis-badge-dot { background: #1565C0; }
.legis-badge--proxima { background: rgba(120,144,156,0.15); color: #546E7A; }
.legis-badge--proxima .legis-badge-dot { background: #78909C; }
.legis-status-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-on-surface-variant);
  max-width: 240px;
}

.legis-plain-status { color: var(--color-on-surface-variant); }

.legis-empty {
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-on-surface-variant);
}

/* Mobile: rows become stacked cards instead of a horizontally-scrolling
   table — each <td> is labeled with its column header via data-label. */
@media (max-width: 700px) {
  .legis-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legis-table, .legis-table tbody, .legis-table tr, .legis-table td { display: block; width: 100%; }
  .legis-table tr[hidden] { display: none; }
  .legis-table tr {
    margin-bottom: 16px;
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-card);
    padding: 4px 16px;
  }
  .legis-table tbody tr:hover { background: none; }
  .legis-table td {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid var(--color-surface-variant);
  }
  .legis-table td:first-child { border-top: none; }
  .legis-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
}

/* ==========================================================================
   Publicaciones — biblioteca de descargas (publicaciones.html)
   Grid de cards estáticas; datos en data/publicaciones.json (ver
   js/publicaciones.js). Mismo tratamiento de superficie que .quick-card.
   ========================================================================== */
.pubs-section {
  padding: var(--section-padding-mobile) 0;
}
@media (min-width: 768px) {
  .pubs-section { padding: var(--section-padding) 0; }
}

.pubs-updated {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-on-surface-variant);
  margin-bottom: 32px;
}
.pubs-related {
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

.pubs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .pubs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pubs-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.pub-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.pub-card:hover {
  box-shadow: 0 4px 20px rgba(3,37,74,0.1);
  border-color: var(--color-outline-variant);
}

.pub-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
.pub-icon-tile .material-symbols-outlined { font-size: 24px; color: #ffffff; }
.pub-icon-tile--pdf { background: #C0392B; }
.pub-icon-tile--docx { background: var(--color-secondary); }
.pub-icon-tile--xlsx { background: #2E7D32; }
.pub-icon-tile--pptx { background: #D35400; }
.pub-icon-tile--generic { background: var(--color-primary); }

.pub-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pub-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
}
.pub-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface-variant);
}
.pub-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-on-surface-variant);
  opacity: 0.8;
}

.pub-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: background-color .2s ease;
}
.pub-download:hover { background: var(--color-primary-container); }
.pub-download .material-symbols-outlined { font-size: 18px; }

.pubs-empty {
  padding: 64px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-on-surface-variant);
}

/* ==========================================================================
   Scroll-reveal fallback (native IntersectionObserver path — used only when
   GSAP/ScrollTrigger are unavailable; see js/main.js)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Hover/press fallback (pure CSS — used only when GSAP is unavailable)

   When GSAP is present it owns every transform-based hover/press motion
   exclusively via js/main.js. Giving those same elements a CSS
   `transition: transform` at the same time would make the browser try to
   animate BETWEEN each of GSAP's own per-frame inline updates, producing a
   jittery, rubber-band "double animation". So the transform-transition for
   each of these only exists here, scoped under html.no-gsap — a class
   js/main.js adds to <html> if (and only if) GSAP never loaded.
   ========================================================================== */
.no-gsap .btn {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.no-gsap .btn:active { transform: scale(0.96); }

.no-gsap .hero-cta-icon .arrow-icon,
.no-gsap .btn-outline .arrow-icon,
.no-gsap .feature-link .arrow-icon-sm,
.no-gsap .dashboard-link .arrow-icon-sm {
  transition: transform .2s ease;
}
.no-gsap .btn-hero-cta:hover .arrow-icon { transform: translateX(4px); }
.no-gsap .btn-outline:hover .arrow-icon { transform: translateX(4px); }
.no-gsap .feature-link:hover .arrow-icon-sm { transform: translateX(4px); }
.no-gsap .dashboard-link:hover .arrow-icon-sm { transform: translateX(4px); }

.no-gsap .feature-card,
.no-gsap .quick-card,
.no-gsap .pillar-card,
.no-gsap .timeline-card,
.no-gsap .serotype-chip,
.no-gsap .accion-card,
.no-gsap .zona-card,
.no-gsap .comision-pres,
.no-gsap .comision-card {
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.no-gsap .feature-card:hover,
.no-gsap .quick-card:hover,
.no-gsap .pillar-card:hover,
.no-gsap .timeline-card:hover,
.no-gsap .serotype-chip:hover,
.no-gsap .accion-card:hover,
.no-gsap .zona-card:hover,
.no-gsap .comision-pres:hover,
.no-gsap .comision-card:hover { transform: translateY(-6px); }

/* ==========================================================================
   aftosa.html — ¿A quiénes afecta y cómo se manifiesta?
   One section, three blocks split by thin dividers. Reuses the home's
   .aftosa-watermark numerals, .section-eyebrow and .rule-about so it reads
   as a continuation of "¿Qué es la Fiebre Aftosa?".
   ========================================================================== */
.manif {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-padding-mobile) 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-background) 100%);
}
@media (min-width: 768px) {
  .manif { padding: var(--section-padding) 0; }
}

/* Decorative circles + curved line, same recipe as .vigilancia-deco. */
.manif-deco, .manif-deco-dots { display: none; }
@media (min-width: 1024px) {
  .manif-deco {
    display: block;
    position: absolute;
    top: -140px;
    right: -80px;
    width: 480px;
    height: 480px;
    z-index: -1;
  }
  .manif-deco-dots {
    display: block;
    position: absolute;
    top: 120px;
    left: 32px;
    width: 120px;
    height: 120px;
    z-index: -1;
    background-image: radial-gradient(var(--color-outline-variant) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
  }
}
.manif-deco-circle { position: absolute; border-radius: 50%; }
.manif-deco-circle--a { width: 480px; height: 480px; top: 0; right: 0; background: var(--color-background); }
.manif-deco-circle--b { width: 260px; height: 260px; top: 120px; right: 200px; background: rgba(64, 182, 218, 0.15); }
.manif-deco-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.manif-deco-line path { fill: none; stroke: var(--color-secondary); stroke-width: 1; opacity: 0.6; }
.manif-deco-line circle { fill: var(--color-secondary); }

.manif-head { max-width: 720px; margin-bottom: 48px; }
@media (min-width: 768px) { .manif-head { margin-bottom: 72px; } }
.manif-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
@media (min-width: 768px) { .manif-title { font-size: 44px; } }
@media (min-width: 1024px) { .manif-title { font-size: 50px; } }
.manif-title-accent { color: var(--color-secondary); }

.manif-divider {
  border-top: 1px solid var(--color-outline-variant);
  margin: 56px 0;
}
@media (min-width: 768px) { .manif-divider { margin: 80px 0; } }

/* Shared block pieces */
.manif-block { display: grid; grid-template-columns: 1fr; gap: 40px; }
.manif-intro { position: relative; }
.manif-intro > :not(.aftosa-watermark) { position: relative; z-index: 1; }
.manif-intro .aftosa-watermark { top: -36px; left: -12px; }

.manif-kicker {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  margin-bottom: 16px;
}
@media (min-width: 768px) { .manif-kicker { font-size: 26px; } }
.manif-lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  max-width: 620px;
}
@media (min-width: 768px) { .manif-lead { font-size: 17px; } }
.manif-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

/* Block 1 — origen + especies */
@media (min-width: 1024px) {
  .manif-block--origen { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
}

.manif-dates {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.manif-date {
  padding: 20px 20px 22px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
}
.manif-date-year {
  display: block;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin-bottom: 10px;
}
@media (min-width: 768px) { .manif-date-year { font-size: 46px; } }
.manif-date-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.manif-date-place {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-on-surface-variant);
}
.manif-date-place .material-symbols-outlined { font-size: 16px; color: var(--color-secondary); }

.manif-species {
  padding: 28px 24px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
}
@media (min-width: 768px) { .manif-species { padding: 36px; } }

.species-group + .species-group {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-surface-variant);
}
.species-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.species-group-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.species-group-icon .material-symbols-outlined { color: #fff; font-size: 20px; }
.species-group-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.species-group-count {
  margin-left: auto;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-surface-variant);
}

.species-chips, .vector-chips, .lesion-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.species-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-background);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  transition: border-color .2s ease, background-color .2s ease;
}
.species-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.species-chip:hover { border-color: var(--color-outline-variant); background: #fff; }

/* Lab use — deliberately quieter: small, muted, no card of its own. */
.species-lab {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface-variant);
  border: 1px dashed var(--color-outline-variant);
  border-radius: 10px;
}
.species-lab .material-symbols-outlined { font-size: 18px; color: var(--color-surface-tint); }
.species-lab strong { font-weight: 700; color: var(--color-on-surface); }

/* Block 2 — comportamiento: copy + vectors on the left, two stats right */
@media (min-width: 1024px) {
  .manif-block--comport { grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: center; }
}
.manif-block--comport .manif-lead { margin-bottom: 28px; }

.vector-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
}
.vector-chip .material-symbols-outlined {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-secondary);
  background: rgba(64,182,218,0.12);
}

.manif-stats { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .manif-stats { grid-template-columns: 1fr 1fr; gap: 24px; } }

.manif-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
  transition: box-shadow .3s ease;
}
@media (min-width: 640px) { .manif-stat { min-height: 300px; } }
.manif-stat:hover { box-shadow: 0 10px 32px rgba(3,37,74,0.14); }
.manif-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(64,182,218,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
}
.manif-stat-icon .material-symbols-outlined { color: var(--color-secondary); font-size: 26px; }
.manif-stat-value {
  display: block;
  margin-top: 32px;
  font-size: 64px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}
@media (min-width: 1024px) { .manif-stat-value { font-size: 72px; } }
.manif-stat-unit { font-size: 0.55em; margin-left: 2px; letter-spacing: 0; }
.manif-stat-label {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.manif-stat-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-on-surface-variant);
}

.manif-stat--dark { background: var(--color-primary); }
.manif-stat--dark .manif-stat-value { color: #fff; }
.manif-stat--dark .manif-stat-text { color: rgba(255,255,255,0.75); }

/* 10×10 unit chart — 99 faint dots + 1 lit dot, drawn with a single
   background so there are no 100 DOM nodes. */
.manif-dotgrid {
  --dot-gap: 11px;
  position: relative;
  flex-shrink: 0;
  width: calc(var(--dot-gap) * 10);
  height: calc(var(--dot-gap) * 10);
  margin-bottom: auto;
  background-image: radial-gradient(circle, rgba(255,255,255,0.28) 2.5px, transparent 3px);
  background-size: var(--dot-gap) var(--dot-gap);
}
.manif-dotgrid::after {
  content: '';
  position: absolute;
  top: calc(var(--dot-gap) / 2 - 4px);
  left: calc(var(--dot-gap) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(64,182,218,0.3);
}

/* Block 3 — signos clínicos */
.manif-block--signos { gap: 0; }
.manif-intro--wide { margin-bottom: 40px; }
.manif-block--signos .manif-lead { margin-bottom: 16px; }

.lesion-tag {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.signos-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) {
  .signos-grid { grid-template-columns: repeat(2, 1fr); }
  .signo-card--feature { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .signos-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.signo-card {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
  transition: box-shadow .3s ease;
}
.signo-card:hover { box-shadow: 0 10px 32px rgba(3,37,74,0.14); }
.signo-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.signo-icon .material-symbols-outlined { color: #fff; font-size: 24px; }
.signo-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.signo-text { font-size: 14px; line-height: 1.6; color: var(--color-on-surface-variant); }

/* Miocarditis — the most serious consequence, so it gets the wide dark card. */
.signo-card--feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-primary);
}
@media (min-width: 640px) {
  .signo-card--feature { flex-direction: row; align-items: flex-start; padding: 32px; }
}
.signo-card--feature .signo-icon { background: var(--color-secondary); margin-bottom: 0; }
.signo-card--feature .signo-body { position: relative; z-index: 1; }
.signo-card--feature .signo-title { color: #fff; font-size: 20px; }
.signo-card--feature .signo-text { color: rgba(255,255,255,0.78); max-width: 460px; }
.signo-quote {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
  border: 1px solid rgba(64,182,218,0.5);
  border-radius: var(--radius-full);
}
.signo-card--feature::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(64,182,218,0.12);
  pointer-events: none;
}

.no-gsap .manif-stat,
.no-gsap .signo-card {
  transition: box-shadow .3s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.no-gsap .manif-stat:hover,
.no-gsap .signo-card:hover { transform: translateY(-6px); }

/* ==========================================================================
   aftosa.html — La enfermedad, en detalle (interactive tabs)
   Four tab "cards" (numbered, like .accion-card) driving one content panel.
   The active tab turns dark and grows a small notch pointing at the panel.
   ========================================================================== */
.explorer {
  position: relative;
  padding: var(--section-padding-mobile) 0;
  background: #ffffff;
}
@media (min-width: 768px) {
  .explorer { padding: var(--section-padding) 0; }
}

.explorer-head { max-width: 720px; margin-bottom: 40px; }
@media (min-width: 768px) { .explorer-head { margin-bottom: 56px; } }
.explorer-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
@media (min-width: 768px) { .explorer-title { font-size: 44px; } }
@media (min-width: 1024px) { .explorer-title { font-size: 50px; } }
.explorer-title-accent { color: var(--color-secondary); }
.explorer-head .rule-about { margin-top: 20px; margin-bottom: 20px; }
.explorer-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-on-surface-variant);
}

/* Tabs */
.explorer-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  .explorer-tabs { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
}

.explorer-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px;
  text-align: left;
  background: var(--color-background);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (min-width: 768px) {
  .explorer-tab { padding: 24px 22px; }
}
.explorer-tab:hover { border-color: var(--color-outline-variant); background: #fff; box-shadow: 0 4px 24px rgba(3,37,74,0.08); }
.explorer-tab:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }

.explorer-tab-index {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(5,52,104,0.12);
  transition: color .25s ease;
}
@media (min-width: 768px) { .explorer-tab-index { font-size: 36px; top: 20px; right: 22px; } }

.explorer-tab-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  transition: background-color .25s ease;
}
@media (min-width: 768px) { .explorer-tab-icon { width: 52px; height: 52px; } }
.explorer-tab-icon .material-symbols-outlined { color: #fff; font-size: 22px; }

.explorer-tab-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
  transition: color .25s ease;
}
@media (min-width: 768px) { .explorer-tab-label { font-size: 17px; } }

.explorer-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 10px 32px rgba(3,37,74,0.18);
}
.explorer-tab.is-active .explorer-tab-index { color: rgba(255,255,255,0.18); }
.explorer-tab.is-active .explorer-tab-icon { background: var(--color-secondary); }
.explorer-tab.is-active .explorer-tab-label { color: #fff; }
/* Notch pointing down at the panel — desktop only, where tabs sit in one row */
@media (min-width: 1024px) {
  .explorer-tab.is-active::after {
    content: '';
    position: absolute;
    left: 32px;
    bottom: -9px;
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 3px;
    transform: rotate(45deg);
  }
}

/* Panel */
.explorer-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 28px 24px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
}
@media (min-width: 768px) {
  .explorer-panel { padding: 48px; }
}
@media (min-width: 1024px) {
  .explorer-panel { grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: 56px; }
}
.explorer-panel[hidden] { display: none; }
.explorer-panel:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
.explorer-panel.is-entering { animation: explorer-in .45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes explorer-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .explorer-panel.is-entering { animation: none; }
}

.explorer-panel-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 10px;
}
.explorer-panel-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-bottom: 20px;
}
@media (min-width: 768px) { .explorer-panel-title { font-size: 32px; } }

/* Body copy for the real content once it replaces the placeholder */
.explorer-panel-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  max-width: 620px;
}
.explorer-panel-body p + p { margin-top: 16px; }

/* Placeholder — temporary, clearly marked so it isn't mistaken for content */
.explorer-placeholder {
  padding: 20px;
  border: 1px dashed var(--color-outline-variant);
  border-radius: 10px;
  background: rgba(64,182,218,0.05);
}
.explorer-placeholder p { font-size: 14px; font-style: italic; }

.explorer-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-surface-tint);
  font-size: 13px;
  font-weight: 600;
}
.explorer-media .material-symbols-outlined { font-size: 36px; color: var(--color-secondary); }
.explorer-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Panels whose image is a wide strip (e.g. Etiología): text on top, image
   below at its natural size instead of the 4:3 side slot. */
.explorer-panel--stacked { grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) {
  .explorer-panel--stacked { grid-template-columns: 1fr; gap: 40px; align-items: start; }
}
.explorer-panel--stacked .explorer-panel-body p { max-width: 860px; }
.explorer-figure { margin: 0; }
.explorer-figure img {
  display: block;
  width: 100%;
  max-width: 741px;
  height: auto;
  border-radius: var(--radius-card);
}

/* ==========================================================================
   Carousel (aftosa.html — Sintomatología)
   Slides are stacked in one grid cell and cross-fade, so the block is always
   as tall as its tallest slide: no layout jump between captions of
   different lengths. Photos are small, so they're shown with `contain` on a
   dark frame and never upscaled past their natural size.
   ========================================================================== */
.carousel { --frame-h: 300px; }
@media (min-width: 768px) { .carousel { --frame-h: 460px; } }

.carousel-viewport { position: relative; }
.carousel-track { display: grid; }
.carousel-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-slide, .carousel-slide.is-active { transition: none; }
}

.carousel-frame {
  height: var(--frame-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--color-primary-container);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.carousel-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

.carousel-caption {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: #000;
  max-width: 760px;
}
.carousel-caption::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--color-secondary);
}
@media (min-width: 768px) { .carousel-caption { font-size: 18px; } }

/* Arrows sit on the photo frame, vertically centered on it (not on the
   frame + caption block). */
.carousel-arrow {
  position: absolute;
  top: calc(var(--frame-h) / 2);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 6px 20px rgba(3,37,74,0.25);
  transition: background-color .2s ease, color .2s ease;
  z-index: 2;
}
@media (min-width: 768px) { .carousel-arrow { width: 52px; height: 52px; } }
.carousel-arrow:hover { background: var(--color-secondary); color: #fff; }
.carousel-arrow:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
.carousel-arrow .material-symbols-outlined { font-size: 22px; }
.carousel-arrow--prev { left: 12px; }
.carousel-arrow--next { right: 12px; }
@media (min-width: 768px) {
  .carousel-arrow--prev { left: 20px; }
  .carousel-arrow--next { right: 20px; }
}

.carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-surface-variant);
}
.carousel-counter {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-surface-tint);
  font-variant-numeric: tabular-nums;
}
.carousel-counter strong { font-size: 18px; font-weight: 800; color: var(--color-primary); }

.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-outline-variant);
  transition: width .3s ease, background-color .3s ease;
}
.carousel-dot:hover { background: var(--color-secondary); }
.carousel-dot.is-active { width: 28px; background: var(--color-primary); }
.carousel-dot:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }

/* Transmisión — text + diagram side by side, then the centered table and
   the footnote copy. */
.explorer-split { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) {
  .explorer-split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
}
.explorer-figure--diagram img {
  max-width: 100%;
  border: 1px solid var(--color-surface-variant);
}

.infect-block {
  width: 100%;
  max-width: 760px;
  margin: 8px auto 0;
}
.infect-heading {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary);
  margin-bottom: 16px;
  text-align: center;
}
.infect-table-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-surface-variant);
  box-shadow: 0 4px 24px rgba(3,37,74,0.07);
}
.infect-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}
.infect-table thead th {
  padding: 16px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-primary);
}
.infect-table tbody tr { border-top: 1px solid var(--color-surface-variant); }
.infect-table tbody tr:nth-child(even) { background: rgba(221,244,250,0.45); }
.infect-table tbody tr:hover { background: rgba(64,182,218,0.1); }
.infect-table tbody th,
.infect-table td { padding: 14px 20px; vertical-align: top; }
.infect-table tbody th {
  width: 42%;
  font-weight: 600;
  color: var(--color-on-surface);
}
.infect-table td strong {
  display: inline;
  font-weight: 800;
  color: var(--color-primary);
}
.infect-table td span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-on-surface-variant);
}
.infect-table td .infect-ref {
  display: inline;
  margin-left: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
}
@media (max-width: 479px) {
  .infect-table { font-size: 14px; }
  .infect-table thead th { padding: 12px 14px; font-size: 11px; }
  .infect-table tbody th, .infect-table td { padding: 12px 14px; }
}

.explorer-notes p { max-width: 860px; }

/* 3-column variant (Supervivencia: material | invierno | verano) */
.infect-table--3col tbody th { width: 40%; }
.infect-table--3col td { width: 30%; }
.infect-season { display: inline-flex; align-items: center; gap: 6px; }
.infect-season .material-symbols-outlined { font-size: 16px; color: var(--color-secondary); }
.explorer-notes + .infect-block { margin-top: 24px; }

/* Explorer panels: body copy in black instead of the muted grey */
.explorer-panel-body p { color: var(--color-on-surface); }

/* "Volver arriba" — jumps back to the topic cards; scroll-margin keeps
   them clear of the fixed header once it slides back in. */
.explorer-tabs { scroll-margin-top: calc(var(--header-height) + 32px); }
.explorer-back { display: flex; justify-content: center; margin-top: 16px; }
@media (min-width: 768px) { .explorer-back { margin-top: 24px; } }

/* Mid-size button (between .btn and .btn-lg) */
.btn-md { padding: 13px 28px; font-size: 13px; gap: 10px; }
.btn-md .arrow-icon-sm { font-size: 18px; }

/* ==========================================================================
   404 — Página no encontrada
   ========================================================================== */
.notfound-title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}
.notfound-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 17px;
}
.notfound-links li:first-child { margin-bottom: 12px; }
.notfound-links a:not(.btn) {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: 3px;
}
.notfound-links a:not(.btn):hover { color: var(--color-secondary); }