/* IVELA Community Health: página tentativa.
   Identidad: el verde del logo, una serif fina como su wordmark y un río que acompaña
   la página porque la idea central es "medicina que llega más lejos". */

:root {
  --selva: #2F4A35;
  --selva-oscura: #22372A;
  --hoja: #7A9A6A;
  --rio: #7FA7A0;
  --rio-borde: #5C8780;
  --papel: #F5F7F1;
  --blanco: #FFFFFF;
  --tinta: #1E2B22;
  --tinta-suave: #4A5A4F;
  --linea: #D7DED2;
  --maracuya: #E9B949;

  --fuente-titulo: 'Gilda Display', 'Didot', 'Bodoni 72', Georgia, serif;
  --fuente-texto: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t-h1: clamp(2.7rem, 1.6rem + 4.6vw, 5.4rem);
  --t-h2: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  --t-h3: 1.25rem;
  --t-entradilla: clamp(1.1rem, 1rem + .4vw, 1.3rem);

  --ancho: 1120px;
  --margen: clamp(1.25rem, 5vw, 3rem);
  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--maracuya);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

p {
  margin: 0;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 50;
  background: var(--selva);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 999px;
  text-decoration: none;
}

.saltar:focus {
  top: 1rem;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--margen);
}

/* ---------- Río que acompaña la página ---------- */

.rio {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.rio path {
  fill: none;
  stroke: var(--rio);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: .55;
}

main,
.pie {
  position: relative;
  z-index: 1;
}

/* ---------- Barra ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .85rem var(--margen);
  padding-top: max(.85rem, env(safe-area-inset-top, 0px));
  background: rgba(245, 247, 241, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}

.barra.con-borde {
  border-bottom-color: var(--linea);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--selva);
  margin-right: auto;
}

.marca-hoja {
  width: 2.4rem;
  height: 2.4rem;
  fill: none;
  stroke: var(--selva);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.marca-texto {
  display: grid;
  line-height: 1;
}

.marca-nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.55rem;
  letter-spacing: .28em;
}

.marca-sub {
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--tinta-suave);
  margin-top: .25rem;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.6rem;
}

.menu a {
  text-decoration: none;
  font-weight: 500;
  font-size: .97rem;
  color: var(--tinta);
  padding: .3rem 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}

.menu a:hover {
  color: var(--selva);
  border-bottom-color: var(--hoja);
}

.menu-boton {
  display: none;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--selva);
  font: 600 1rem/1.2 var(--fuente-texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.boton-principal {
  background: var(--selva);
  color: #fff;
}

.boton-principal:hover {
  background: var(--selva-oscura);
  border-color: var(--selva-oscura);
}

.boton-secundario {
  background: transparent;
  color: var(--selva);
}

.boton-secundario:hover {
  background: rgba(47, 74, 53, .08);
}

.boton-maracuya {
  background: var(--maracuya);
  border-color: var(--maracuya);
  color: var(--selva-oscura);
}

.boton-maracuya:hover {
  background: #f3c95f;
  border-color: #f3c95f;
}

.boton-barra {
  min-height: 2.6rem;
  padding: .5rem 1.25rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

/* ---------- Portada ---------- */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-antetitulo {
  color: var(--selva);
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.hero h1 {
  color: var(--selva-oscura);
  max-width: 11ch;
}

.hero-bajada {
  margin-top: 1.5rem;
  font-size: var(--t-entradilla);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 34rem;
}

.hero-ruta {
  margin: 0;
}

.hero-ruta svg {
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
  display: block;
}

.hero-ruta figcaption {
  text-align: center;
  font-size: .9rem;
  color: var(--tinta-suave);
  margin-top: .8rem;
}

.ruta-fondo {
  fill: var(--blanco);
}

.ruta-borde {
  fill: none;
  stroke: var(--selva);
  stroke-width: 1.6;
}

.ruta-selva {
  fill: #E3EADD;
}

.ruta-rio-borde {
  fill: none;
  stroke: var(--rio-borde);
  stroke-width: 22;
  stroke-linecap: round;
  opacity: .35;
}

.ruta-rio {
  fill: none;
  stroke: var(--rio);
  stroke-width: 16;
  stroke-linecap: round;
}

.ruta-camino {
  fill: none;
  stroke: var(--selva);
  stroke-width: 2.2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.ruta-paradas circle {
  fill: var(--blanco);
  stroke: var(--selva);
  stroke-width: 2.5;
}

.ruta-paradas .parada-origen {
  fill: var(--selva);
}

.ruta-paradas text {
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 600;
  fill: var(--selva-oscura);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--blanco);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.mascara-camino {
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* trazado de la ruta al cargar: el único movimiento que no dispara el usuario */
.hero-ruta.is-trazando .mascara-camino {
  animation: trazarRuta 2.2s var(--ease) both;
}

.hero-ruta.is-trazando .ruta-paradas g {
  animation: aparecerParada .5s var(--ease) both;
}

.hero-ruta.is-trazando .ruta-paradas g:nth-child(2) { animation-delay: .7s; }
.hero-ruta.is-trazando .ruta-paradas g:nth-child(3) { animation-delay: 1.3s; }
.hero-ruta.is-trazando .ruta-paradas g:nth-child(4) { animation-delay: 1.9s; }

@keyframes trazarRuta {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes aparecerParada {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Secciones ---------- */

.seccion {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.seccion-blanca {
  background: var(--blanco);
}

.seccion-selva {
  background: var(--selva);
  color: #F1F5EE;
}

.seccion-selva h2 {
  color: #fff;
}

.entradilla {
  margin-top: 1.1rem;
  font-size: var(--t-entradilla);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 38rem;
}

.seccion-selva .entradilla {
  color: #DCE6D7;
}

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* pilares: voluntariado, salud, comunidad */
.pilares {
  margin: 0;
  display: grid;
  gap: 1.6rem;
}

.pilar {
  padding-left: 1.4rem;
  border-left: 2px solid var(--hoja);
}

.pilar dt {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  color: var(--selva);
  line-height: 1.2;
}

.pilar dd {
  margin: .3rem 0 0;
  color: var(--tinta-suave);
}

/* fundadoras */
.fundadoras {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}

.fundadoras h3 {
  color: var(--tinta-suave);
  font-weight: 500;
  font-size: 1rem;
}

.fundadoras ul {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}

.persona {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.persona-retrato {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--selva);
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  color: var(--selva);
  background: var(--blanco);
  flex-shrink: 0;
  overflow: hidden;
}

.persona-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-datos {
  display: grid;
  line-height: 1.35;
}

.persona-nombre {
  font-weight: 600;
  font-size: 1.1rem;
}

.persona-rol {
  font-size: .9rem;
  color: var(--tinta-suave);
  letter-spacing: .08em;
}

.persona-datos a {
  font-size: .92rem;
  color: var(--selva);
  text-underline-offset: 3px;
}

/* brigadas */
.brigadas {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.brigada {
  margin: 0;
}

.brigada-imagen {
  position: relative;
  aspect-ratio: 5 / 6;
  max-width: 100%;
  border-radius: 999px 999px 18px 18px;
  overflow: hidden;
  background: #E3EADD;
}

.brigada-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mientras no haya foto: una hoja del logo sobre verde claro */
.brigada-vacia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, transparent 0 4.4rem, rgba(47, 74, 53, .18) 4.4rem 4.5rem, transparent 4.5rem),
    radial-gradient(circle at 50% 46%, transparent 0 6rem, rgba(47, 74, 53, .1) 6rem 6.1rem, transparent 6.1rem);
}

.brigada-vacia svg {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 3.2rem;
  height: 3.2rem;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: var(--selva);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: .55;
}

.brigada figcaption {
  margin-top: .9rem;
}

.brigada-nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  color: var(--selva-oscura);
  line-height: 1.2;
}

.brigada-detalle {
  color: var(--tinta-suave);
  font-size: .95rem;
}

.nota-enlace {
  margin-top: 2rem;
}

.nota-enlace a {
  color: var(--selva);
  font-weight: 600;
  text-underline-offset: 4px;
}

/* pasos de una brigada: sí es una secuencia, por eso van numerados */
.pasos {
  list-style: none;
  counter-reset: paso;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.pasos li {
  counter-increment: paso;
  position: relative;
  padding-top: 3.6rem;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  color: var(--selva);
  border: 1.5px solid var(--selva);
  background: var(--papel);
}

.pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.3rem;
  left: 3.2rem;
  right: -.9rem;
  border-top: 1.5px dashed var(--hoja);
}

.pasos h3 {
  color: var(--selva-oscura);
}

.pasos p {
  margin-top: .4rem;
  color: var(--tinta-suave);
}

/* voluntariado */
#voluntariado .boton {
  margin-top: 2rem;
}

.nota {
  margin-top: .9rem;
  font-size: .95rem;
  color: #C9D7C4;
  max-width: 30rem;
}

.roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.3rem;
}

.roles li {
  display: grid;
  gap: .2rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.roles li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.roles strong {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.55rem;
  color: #fff;
}

.roles span {
  color: #DCE6D7;
}

/* cómo ayudar */
.ayudas {
  margin: 2.5rem 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.ayuda {
  background: var(--blanco);
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--linea);
}

.ayuda h3 {
  color: var(--selva-oscura);
}

.ayuda p {
  margin-top: .6rem;
  color: var(--tinta-suave);
}

/* ---------- Pie ---------- */

.pie {
  background: var(--selva-oscura);
  color: #DCE6D7;
  padding-top: clamp(3.5rem, 7vw, 5rem);
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}

.pie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem;
}

.pie-logo {
  width: 7.5rem;
  height: auto;
  border-radius: 50%;
  margin-bottom: 1.2rem;
  background: var(--papel);
}

.pie-marca {
  font-family: var(--fuente-titulo);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  letter-spacing: .28em;
  color: #fff;
  line-height: 1;
}

.pie-lema {
  margin-top: .8rem;
  font-size: 1.1rem;
}

.pie-titulo {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
}

.pie-enlaces {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.pie-enlaces a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: .15rem;
  transition: color .25s ease, border-color .25s ease;
}

.pie-enlaces a:hover {
  color: var(--maracuya);
  border-color: var(--maracuya);
}

.pie-legal {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .88rem;
  color: #AFC0AA;
}

/* ---------- Pantallas medianas y pequeñas ---------- */

@media (max-width: 960px) {
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }

  .pasos li:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 860px) {
  .menu-boton {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--selva);
    background: transparent;
    color: var(--selva);
    font: 600 .95rem/1 var(--fuente-texto);
    cursor: pointer;
  }

  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    padding: .5rem var(--margen) 1.25rem;
    display: none;
  }

  .menu.is-abierto {
    display: block;
  }

  .menu ul {
    flex-direction: column;
    gap: 0;
  }

  .menu a {
    display: block;
    padding: .8rem 0;
    border-bottom: 1px solid var(--linea);
  }

  .boton-barra {
    display: none;
  }

  .hero-grid,
  .dos-columnas,
  .pie-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    max-width: 12ch;
  }

  .hero-ruta svg {
    max-width: 22rem;
  }

  .brigadas,
  .ayudas {
    grid-template-columns: minmax(0, 1fr);
  }

  .brigada-imagen {
    aspect-ratio: 16 / 10;
    border-radius: 18px;
  }

  .rio {
    display: none;
  }
}

@media (max-width: 540px) {
  .pasos {
    grid-template-columns: minmax(0, 1fr);
  }

  .pasos li::after {
    display: none;
  }

  .marca-sub {
    display: none;
  }

  .pie-legal {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}