/* =============================================================================
   components.css — Las piezas.
   Cada bloque dice arriba de dónde sale y qué principio lo sostiene.
   ========================================================================== */

/* =============================================================================
   1. BOTONES — píldora (radio 40–50 px)
   Fitts: 48 px de alto mínimo, nunca menos de 44.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  min-height: 52px; padding: 0.9rem 1.9rem;
  border-radius: var(--r-pill); border: 2px solid transparent;
  font-size: var(--t-small); font-weight: 700; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease),
              background-color var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Sobre fondo verde */
.btn--claro { background: var(--blanco); color: var(--verde-texto); }
.btn--claro:hover { background: var(--verde-papel); }
.btn--fantasma {
  background: transparent; color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.72);                 /* ≥ 3:1 sobre verde */
}
.btn--fantasma:hover { background: rgba(255, 255, 255, 0.14); }

.btn__icono { width: 1.15em; height: 1.15em; flex: none; }

/* =============================================================================
   2. INICIO
   Banda del color de marca + antetítulo + nombre en grande + una lámina 3D
   que sale del borde inferior e invade la sección blanca. El color es el
   verde del logo y la lámina es la flota con la canasta.
   ========================================================================== */
.hero {
  position: relative;
  /* Gradiente del verde del logo: arriba profundo (para que el texto blanco
     rinda 9,9:1) y abajo el verde de marca exacto. Nunca hay negro.          */
  background: linear-gradient(180deg, #06511F 0%, #0A6B2C 52%, #0D8236 100%);
  color: var(--blanco);
  text-align: center;
  padding-top: clamp(3.5rem, 9vw, 6.5rem);
  padding-bottom: 0;
  overflow: visible;          /* la lámina TIENE que salirse por abajo         */
  display: flow-root;         /* corta el colapso de márgenes: sin esto, el
                                 margen negativo de la lámina arrastraría a la
                                 sección entera y no habría cruce.            */
}
/* Entre celular y tablet (hasta ~900 px) el antetítulo cabe en una o dos
   líneas centradas casi tan anchas como el contenedor, y el sello (esquina
   superior derecha) se solapaba con la última palabra ("transporte").
   Más aire arriba para que nunca se toquen, en todo ese rango.              */
@media (max-width: 900px) {
  .hero { padding-top: 7.5rem; }
}
.hero__in { position: relative; z-index: 2; }
.hero__eyebrow { color: var(--verde-claro); }              /* 5,39:1 mínimo     */
.hero__titulo { margin-top: var(--s-5); }
/* El título es el logo real en su versión vectorial blanca, agrandado.    */
.hero__logo {
  height: clamp(4rem, 12vw, 8.5rem);
  width: auto;
  margin-inline: auto;
}
.hero__lead {
  margin: var(--s-5) auto 0;
  max-width: 40rem;
  color: #FFFFFF;
  font-size: var(--t-lead);
  line-height: 1.5;
  font-weight: 500;
}
.bandera-co-inline {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 0.35em;
  border-radius: 2px;
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: -0.5px;
}
/* La lámina cruza el borde inferior del bloque verde y sigue sobre el blanco:
   el corte entre secciones deja de ser una línea y pasa a ser un objeto.
   La imagen tiene fondo transparente para que esto sea posible.             */
.hero__arte {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(-9.5rem, -9vw, -3.5rem); /* así se sale hacia el blanco */
  padding-inline: clamp(1rem, 4vw, 2rem);
  pointer-events: none;
}

/* Las farolas: un resplandor con degradado sobre la posición real de cada
   faro en la foto, que parpadea todo el tiempo — CSS puro, sin scroll ni
   JavaScript de por medio.                                                 */
.farol-flota {
  position: absolute;
  width: 4.4%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 247, 214, 0.95) 0%,
    rgba(255, 214, 120, 0.55) 42%,
    rgba(255, 214, 120, 0) 72%);
  filter: blur(1.5px);
  pointer-events: none;
  animation: parpadeoFarol 2.2s ease-in-out infinite;
}
@keyframes parpadeoFarol {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 1; }
}
/* "Reducir movimiento": la luz se queda encendida y fija, sin parpadear.   */
@media (prefers-reduced-motion: reduce) {
  .farol-flota { animation: none; opacity: 0.85; }
}

.hero__arte img { width: 100%; height: auto; }

/* El sello: hijo directo de .hero (no de .hero__arte), en la esquina
   superior derecha del héroe, con una leve rotación.                       */
.sello-pais {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 4vw, 2.5rem);
  z-index: 3;
  width: clamp(5.5rem, 9vw, 8rem);
  height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 12px 24px rgba(9, 48, 26, 0.35));
}
@media (max-width: 640px) {
  .sello-pais { width: 4rem; top: 0.75rem; right: 0.75rem; }
}

/* =============================================================================
   3. CIFRAS — el pico de la página
   ========================================================================== */
#numeros { padding-top: calc(var(--pad-seccion) + clamp(3rem, 7vw, 8rem)); overflow: hidden; }
.cifras-bloque { position: relative; isolation: isolate; }

.cifras {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3rem) 0;
}
/* Debajo de 480 px, "+100.000" no cabe en media columna sin desbordarse:
   una sola columna evita el corte en los celulares angostos. El minmax(0, 1fr)
   en vez de 1fr a secas es lo que obliga a las columnas a repartirse el ancho
   en partes iguales SIEMPRE, en vez de estirarse para nunca partir el número
   (que es justo lo que provocaba que una cifra se dibujara encima de la
   siguiente en pantallas medianas y grandes).                              */
@media (min-width: 480px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cifra { text-align: center; padding-inline: var(--s-4); position: relative; min-width: 0; }
.cifra + .cifra::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--linea);
}
@media (max-width: 479px) {
  .cifra + .cifra::before { display: none; }
}
@media (min-width: 480px) and (max-width: 859px) {
  .cifra:nth-child(odd)::before { display: none; }
}
.cifra__n {
  display: block;
  font-size: var(--t-cifra); font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--verde-marca);        /* texto grande: exige 3:1, rinde 4,93:1  */
}
/* "+100.000" es la cifra más larga: a partir de 2 y 4 columnas, el tamaño de
   var(--t-cifra) es más ancho que la columna y se monta sobre la de al lado.
   Un tamaño más chico y propio para cada reparto de columnas lo evita.      */
@media (min-width: 480px) and (max-width: 859px) {
  .cifra__n { font-size: clamp(2rem, 6vw, 3.5rem); }
}
@media (min-width: 860px) {
  .cifra__n { font-size: clamp(2rem, 3.4vw, 3rem); }
}
.cifra__k {
  display: block; margin-top: var(--s-4);
  font-size: var(--t-small); font-weight: 700; color: var(--tinta);
}
.cifra__d {
  display: block; margin-top: var(--s-2);
  font-size: var(--t-micro); color: var(--gris); line-height: 1.5;
}

/* =============================================================================
   4. TARJETAS DE SERVICIO
   Tarjeta blanca de radio 40 px, sombra suave, y un objeto flotando sobre
   el borde superior que rompe el marco.
   ========================================================================== */
.tarjeta {
  position: relative;
  background: var(--blanco);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: clamp(4.5rem, 8vw, 5.5rem) var(--s-6) var(--s-7);
  margin-top: clamp(2.75rem, 5vw, 3.5rem);
  text-align: center;
  transition: transform var(--dur-media) var(--ease),
              box-shadow var(--dur-media) var(--ease);
}
.tarjeta:hover, .tarjeta:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
}
.tarjeta__ico {
  position: absolute; top: clamp(-2.75rem, -5vw, -3.5rem); left: 50%;
  transform: translateX(-50%);
  width: clamp(96px, 18vw, 124px); height: clamp(96px, 18vw, 124px);
  border-radius: 50%;
  background: var(--blanco);
  overflow: hidden;                 /* recorta el fondo blanco de la lámina    */
  box-shadow: 0 12px 28px -14px rgba(9, 48, 26, 0.35);
}
.tarjeta__ico img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta__t { font-size: var(--t-h3); }
.tarjeta__d { margin-top: var(--s-4); color: var(--gris); font-size: var(--t-small); line-height: 1.65; }

/* =============================================================================
   5. RAZONES — lista 01…04 sobre la fotografía
   Las palabras clave se resaltan con una barra de color de marca (verde
   manzana del logo, con tinta oscura encima: 6,35:1). El resalte NUNCA es
   el único canal — la palabra también va en negrita.
   ========================================================================== */
.razones { display: grid; gap: clamp(1.25rem, 2.6vw, 1.75rem); }
.razon {
  display: grid; grid-template-columns: 2.75rem 1fr;
  gap: var(--s-4); align-items: baseline;
  padding-bottom: clamp(1.25rem, 2.6vw, 1.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.razon:last-child { border-bottom: 0; padding-bottom: 0; }
.razon__n {
  font-size: var(--t-small); font-weight: 700;
  color: var(--verde-claro);        /* 6,42:1 en el peor píxel de la foto      */
  letter-spacing: 0.04em;
}
.razon__t {
  font-size: clamp(1.0625rem, 2.1vw, 1.375rem);
  line-height: 1.45; font-weight: 500; color: var(--blanco);
  letter-spacing: -0.015em;
}
.marca {
  background: var(--verde-hoja);
  color: var(--tinta);              /* 6,35:1 medido                           */
  font-weight: 800;
  padding: 0.06em 0.34em;
  border-radius: 0.22em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* =============================================================================
   6. LÁMINA DE LA CANASTA
   La ilustración vive sobre su propio papel: así se lee como lámina impresa
   y no como una foto mal recortada sobre blanco.
   ========================================================================== */
.lamina {
  border-radius: var(--r-card);
  overflow: hidden;
  background: #F7F1E2;             /* el papel de la propia ilustración        */
  box-shadow: var(--sombra-card);
}
.lamina img { width: 100%; }

.lamina--centrada { max-width: 900px; margin-inline: auto; }

/* El video institucional, dentro del mismo marco .lamina. object-fit:cover
   llena el recuadro sin deformarse aunque el video no sea 16:9 exacto.      */
.video-marco { position: relative; aspect-ratio: 16 / 9; background: #0A0A08; }
.video-marco video { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-audio {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;   /* Fitts / WCAG 2.5.5: nunca menos de 44        */
  border-radius: 50%;
  background: rgba(10, 10, 8, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--blanco);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
.video-audio:hover, .video-audio:focus-visible {
  background: var(--verde-marca);
  border-color: var(--verde-marca);
}
.video-audio__icon { width: 18px; height: 18px; display: inline-flex; }
.video-audio__icon svg { width: 100%; height: 100%; }
.video-audio[data-state="muted"] .video-audio__icon--unmuted,
.video-audio[data-state="unmuted"] .video-audio__icon--muted { display: none; }

/* =============================================================================
   7. CIERRE Y PIE
   ========================================================================== */
.cierre { text-align: center; }
.cierre__acciones,
.cierre__redes {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center;
}

.pie {
  background: var(--verde-tinta); color: rgba(255, 255, 255, 0.86);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: var(--t-small);
}
.pie__centro {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-6); text-align: center;
}
.pie__logo {
  height: 38px; width: auto;   /* ya usa la versión vectorial blanca, sin filtro */
}