/* ============================================================================
   Componentes
   ========================================================================== */

/* ---------------------------------------------------------------- cabecera */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgb(27 25 25 / .94);
  border-block-end: 1px solid rgb(255 255 255 / .10);
  color: var(--c-on-dark);
}
/* OJO: el blur va en el pseudo-elemento, NO en .site-header. Un
   backdrop-filter distinto de none crea bloque contenedor para los
   descendientes position:fixed, y el panel del menu movil es hijo de esta
   cabecera: con el filtro aqui, su "inset: var(--header-h) 0 0" se resolvia
   contra los 65px de la cabecera en vez de contra el viewport y el panel salia
   de 144px (solo padding) con 448px de contenido desbordando. */
@supports (backdrop-filter: blur(1px)) {
  .site-header { background: transparent; }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(27 25 25 / .86);
    backdrop-filter: blur(10px);
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}
.site-header__brand { display: flex; align-items: center; flex: 0 0 auto; }
.site-header__brand img { height: 2.25rem; width: auto; }
@media (min-width: 64rem) { .site-header__brand img { height: 2.75rem; } }

/* El sitio empieza bajo la barra fija. Un solo sitio donde se compensa. */
.site-main { padding-block-start: var(--header-h); }

/* --- navegacion -------------------------------------------------------------
   Sin JS la lista se ve siempre (apilada en movil). El boton y el panel
   plegable solo existen cuando `html.js` esta puesto, asi que la navegacion
   nunca depende de JavaScript para ser alcanzable.
   -------------------------------------------------------------------------- */
.nav-toggle { display: none; }

/* El <nav> se sirve con `hidden` puesto para que en movil no haya destello de
   menu abierto: html.js se pone en la cabecera, pero site.js va 21 KB de HTML
   mas abajo, y en esa ventana el panel a pantalla completa se pintaba encima de
   la pagina. Sin JavaScript no hay quien lo quite, asi que aqui se devuelve:
   la navegacion sigue siendo alcanzable con JS desactivado. */
html:not(.js) .site-nav[hidden] { display: block; }

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-5);
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;                 /* area de toque */
  padding-inline: var(--s-1);
  text-decoration: none;
  font-weight: 500;
  color: var(--c-on-dark-2);
  transition: color var(--dur-1) var(--ease-out);
}
.site-nav__link:hover { color: var(--c-on-dark); }
.site-nav__link[aria-current="page"] {
  color: var(--c-on-dark);
  box-shadow: inset 0 -2px 0 var(--c-green);
}

/* Complemento EXACTO de los 15 min-width:64rem del CSS y del de site.js.
   Con max-width:63.99rem quedaba una banda de 0,16px (1023,84-1024px,
   alcanzable con zoom o escalado no entero) en la que el JS ocultaba el panel
   y este bloque no sacaba la hamburguesa: ni menu, ni boton. */
@media not all and (min-width: 64rem) {
  html.js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; height: 2.75rem;
    margin-inline-end: calc(var(--s-1) * -1);
    color: var(--c-on-dark);
  }
  html.js .nav-toggle__bars,
  html.js .nav-toggle__bars::before,
  html.js .nav-toggle__bars::after {
    display: block; width: 22px; height: 2px; background: currentColor;
  }
  html.js .nav-toggle__bars { position: relative; }
  html.js .nav-toggle__bars::before,
  html.js .nav-toggle__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
  html.js .nav-toggle__bars::before { top: -7px; }
  html.js .nav-toggle__bars::after  { top:  7px; }

  html.js .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  html.js .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  html.js .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

  html.js .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    background: var(--c-ink);
    padding: var(--s-7) var(--gutter) var(--s-9);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html.js .site-nav[hidden] { display: none; }
  html.js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  html.js .site-nav__link {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    letter-spacing: var(--tr-display);
    min-height: 3.5rem;
    border-block-end: 1px solid rgb(255 255 255 / .12);
  }
  html.js .site-nav__link[aria-current="page"] { box-shadow: none; color: var(--c-green); }
  html.js .site-nav__cta { margin-block-start: var(--s-6); justify-content: center; }
  html:has(.site-nav:not([hidden])) { overflow: hidden; }   /* no scroll detras */

  /* Movil apaisado: el panel se queda en 311px de alto y con el relleno de
     vertical (48 + 96) casi la mitad era aire, con el CTA fuera de vista. */
  @media (max-height: 30rem) {
    html.js .site-nav { padding-block: var(--s-4) var(--s-5); }
    html.js .site-nav__link { min-height: 3rem; }
    html.js .site-nav__cta { margin-block-start: var(--s-4); }
  }
}

/* ----------------------------------------------------------------- botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

/* Relleno verde con tinta CARBON. Blanco sobre verde da 2,63:1 y falla AA. */
.btn--green { background: var(--c-green); color: var(--c-ink); }
.btn--green:hover { background: var(--c-green-press); }

.btn--ink { background: var(--c-ink); color: var(--c-on-dark); }
.btn--ink:hover { background: var(--c-ink-2); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--ghost:hover { background: var(--c-ink); color: var(--c-on-dark); }

.u-on-dark .btn--ghost { color: var(--c-on-dark); }
.u-on-dark .btn--ghost:hover { background: var(--c-on-dark); color: var(--c-ink); }
/* .hero es superficie oscura pero NO lleva la clase .u-on-dark (declara su
   color a mano), asi que la regla de arriba no casaba y el unico .btn--ghost
   del sitio salia con texto Y borde de carbon sobre --c-green-deep: 2,00:1.
   Blanco sobre ese verde da 8,73:1. */
.hero .btn--ghost { color: var(--c-on-dark); }
.hero .btn--ghost:hover { background: var(--c-on-dark); color: var(--c-ink); }

/* Enlace de texto con subrayado que crece al pasar. */
.link-more {
  display: inline-block;
  font-weight: 600;
  color: var(--c-green-ink);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--c-green);
  transition: box-shadow var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.link-more:hover { box-shadow: inset 0 -.7em 0 var(--c-green); color: var(--c-ink); }
.u-on-dark .link-more { color: var(--c-green); }
.u-on-dark .link-more:hover { color: var(--c-ink); }

/* ------------------------------------------------------ tarjeta de servicio
   La diagonal aparece aqui a escala de COMPONENTE, recortando solo la foto.
   Sin borde y sin sombra: no es una tarjeta de SaaS, es una foto con pie. */
/* container-type para que la diagonal de la tarjeta se mida contra el ancho de
   la propia tarjeta. Estaba cableada a 2.5rem, que en una de 368px rinde 6,2 y
   no los 3,43 grados del resto del sitio. var(--diag) no sirve (86,4px sobre
   368px serian 13 grados) y los porcentajes en clip-path resuelven por eje. */
.svc { display: flex; flex-direction: column; gap: var(--s-4); container-type: inline-size; }
.svc__media {
  aspect-ratio: 3 / 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6cqw));
}
.svc__title { font-size: var(--fs-h3); }
.svc__body { color: var(--c-mute); }

/* ------------------------------------------------------------ valor / bloque
   Sin caja: filete entre elementos. Evita la rejilla de tarjetas identicas. */
.value { padding-block: var(--s-6); border-block-start: 1px solid var(--c-line); }
.value__icon { width: 2.75rem; height: 2.75rem; margin-block-end: var(--s-4); }
.value__title { font-size: var(--fs-h3); margin-block-end: var(--s-2); }
.value__body { color: var(--c-mute); }
.u-on-dark .value { border-block-start-color: rgb(255 255 255 / .16); }

/* --------------------------------------------------------- proceso (3 pasos)
   Los numeros estan permitidos aqui porque esto SI es una secuencia. */
.steps { position: relative; }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); padding-block-end: var(--s-7); }
.step:last-child { padding-block-end: 0; }
.step__marker {
  position: relative;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  background: var(--c-green);
  color: var(--c-ink);
  border-radius: 50%;
  font-family: var(--ff-display);
  font-size: 1.25rem;
}
/* El conector punteado, en CSS: adios a Line-recta.svg y Line-recta-lateral.svg
   Va sobre el .step, NO sobre el marcador. Colgado del marcador, su altura era
   un calc contra el propio marcador y resolvia a 56px FIJOS, mientras el hueco
   real lo fija el texto del paso: de 79 a 176px segun el ancho. La linea se
   quedaba corta siempre, entre 23 y 120px. El .step ya es position:relative y
   su padding-block-end acaba justo donde empieza el marcador siguiente, asi
   que inset-block: 3.25rem 0 cubre el hueco entero a cualquier ancho. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 3.25rem 0;
  inset-inline-start: calc(1.625rem - 1px);   /* centro del marcador de 3.25rem */
  width: 0;
  border-inline-start: 2px dashed var(--c-line);
}
.u-on-dark .step:not(:last-child)::after { border-color: rgb(255 255 255 / .22); }
.step__title { font-size: var(--fs-h3); margin-block-end: var(--s-2); }
.step__body { color: var(--c-mute); }
.u-on-dark .step__body { color: var(--c-on-dark-2); }

/* ------------------------------------------------------------ testimonios
   El desplazamiento lo hace CSS (scroll-snap). El JS solo anade flechas y
   puntos: se puede borrar entero y el carrusel sigue arrastrandose con el dedo.
*/
.quotes__track {
  --peek: calc(var(--s-5) + 2.5rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 26rem);
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--s-2);
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track > * { scroll-snap-align: start; display: flex; }
/* La tarjeta siguiente tiene que ASOMAR o el carrusel parece una rejilla de
   tres. La aritmetica es asomo = resta - hueco, asi que se resta el hueco mas
   el asomo que se quiere: 40px medidos a 768 (13,0% de la tarjeta) y a 1440
   (11,0%), en linea con el 9,2% que ya funcionaba a 375. */
@media (min-width: 48rem) {
  .quotes__track { grid-auto-columns: calc((100% - var(--s-5) - var(--peek)) / 2); }
}
@media (min-width: 64rem) {
  .quotes__track { grid-auto-columns: calc((100% - 2 * var(--s-5) - var(--peek)) / 3); }
}

.quote {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6);
  background: rgb(255 255 255 / .05);
  border-block-start: 3px solid var(--c-green);
  margin: 0;
}
.quote__stars { display: flex; gap: 2px; color: var(--c-green); }
.quote__stars svg { width: 1rem; height: 1rem; fill: currentColor; }
.quote__text { font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0; }
.u-on-dark .quote__text { color: var(--c-on-dark); }
.quote__by { margin-block-start: auto; padding-block-start: var(--s-3); }
.quote__name { font-family: var(--ff-display); font-size: 1.125rem; letter-spacing: .01em; }
.quote__role { font-size: var(--fs-sm); color: var(--c-on-dark-2); }

.quotes__nav { display: flex; gap: var(--s-3); align-items: center; margin-block-start: var(--s-6); }
.quotes__btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  color: var(--c-on-dark);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3);
  transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.quotes__btn:hover:not([disabled]) { background: var(--c-green); color: var(--c-ink); box-shadow: none; }
.quotes__btn[disabled] { opacity: .35; cursor: default; }
.quotes__btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
/* El chevron no cae centrado en su viewBox: sin este nudge se ve descuadrado */
[data-carousel-prev] svg { margin-inline-end: 2px; }
[data-carousel-next] svg { margin-inline-start: 2px; }
.quotes__dots { display: flex; gap: var(--s-2); margin-inline-start: auto; }
.quotes__dot {
  width: 2.75rem; height: 2.75rem;              /* area de toque completa... */
  display: grid; place-items: center;
}
.quotes__dot::before {                           /* ...con un punto pequeno dentro */
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: rgb(255 255 255 / .32);
  transition: background-color var(--dur-1) var(--ease-out);
}
.quotes__dot[aria-current="true"]::before { background: var(--c-green); transform: scale(1.4); }

/* -------------------------------------------------------------- logos cliente
   Catorce marcas ajenas con proporciones muy dispares: 158x181 y 122x200 casi
   verticales, 360x290, 460x132, 931x304, 301x70, 144x37... Una fila de altura
   fija haria que las verticales se vieran diminutas y las apaisadas dominaran,
   asi que cada logo lleva un factor optico --s propio: no se escala por pixeles,
   se iguala por peso visual.

   Nunca se deforman: max-width y max-height con width/height en auto, que es lo
   que hace object-fit: contain sin necesidad de recortar nada.

   OJO, UN logo trae fondo BLANCO OPACO y solo se disimula porque esta franja va
   sobre --c-paper (#ffffff) PURO. Si se mueve a --c-paper-2 o a un plano de
   color, aparece la caja:
     - logo-servientrega.png    25,3% de pixeles blancos opacos
   Antes eran dos: el JPEG de Miami Agro Import era el otro, y ha salido del
   sitio con la lista nueva. Los ocho logos que entran se han comprobado uno a
   uno y ninguno trae caja: el de Champion venia como JPEG opaco de su propia
   web y se le ha extraido el fondo blanco a alfa antes de entrar. No es un
   recoloreado: el alfa sale de la distancia al blanco y el color se
   des-premultiplica, asi que recompuesto sobre blanco se desvia 5/255 como
   mucho del original. (Bouquet Collection parece tener caja, pero es su propio
   marco: 0% opaco. El blanco de Alpine Fresh son las cumbres y el texto de
   dentro de su escudo, no un fondo: sus cuatro esquinas estan a alfa 0.)

   Son marcas de terceros: ni se recolorean ni se les aplica el verde de SSS.
   El gris de reposo es una atenuacion, no un tinte.

   EXCEPCION, UNA, y con el cliente delante: logo-beacon-fisheries.svg. Beacon
   solo publica su marca en reverso -- el faro en naranja y TODO el rotulo en
   fill:#fff -- porque su web es de fondo oscuro. Sobre esta franja el nombre
   desaparecia y quedaba un glifo sin identificar. Revisada su biblioteca entera,
   el Archive y los directorios del sector: no existe version sobre claro.
   Se ha cambiado UNA declaracion, la del rotulo, de #fff a #133363. Ese azul no
   es inventado: es el de lighthouse-illustration.svg, 1131 paths, un activo de
   marca suyo de peso, asi que la pieza se queda dentro de su paleta. El faro
   (#f26432) y toda la geometria estan intactos.
   Sigue siendo un lockup que Beacon no ha publicado, y se nota en :hover, que es
   donde la franja quita el grayscale. Cuando manden su variante primaria, se
   sustituye el fichero entero y esta excepcion se borra de aqui.
   -------------------------------------------------------------------------- */
/* Antes era una rejilla de 2/3/6 columnas, elegida porque SEIS se divide por los
   tres numeros y no dejaba huerfano a ningun ancho. Con CATORCE ya no vale: 14
   solo se divide por 2 y por 7. En vez de buscar otro reparto que se rompa con
   la marca quince, se pasa a flex con wrap y centrado, y asi el numero de logos
   deja de importar: una fila corta queda centrada, no varada a la izquierda.
   Medido: 2 por fila a 375, 4 a 768, 5 a 1024, 6 a 1200 y 7 a 1440 -> 7+7 justo.

   align-items: stretch, NO center, y min-height 5rem, NO 3.5rem. Las celdas no
   son igual de altas por dentro: Bouquet Collection es vertical y renderiza 73px,
   y "American Consolidation & Logistics" parte en tres lineas. Con center y alto
   segun contenido cada celda caia a una altura distinta y la fila salia desigual.
   5rem cubre el logo mas alto (3,5rem x 1,3 = 72,8px) y un nombre de tres lineas
   (3 x 15px x 1,25 = 56px). */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--s-6);
  margin-block-start: var(--s-7);
}
.logos__item {
  display: grid;
  place-items: center;
  min-height: 5rem;
  flex: 0 1 8.5rem;
}
.logos__item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(3.5rem * var(--s, 1));
  object-fit: contain;
  filter: grayscale(1);
  /* .66 dejaba la mitad de las marcas por debajo de 3:1 de gris medio sobre
     blanco. Con .78 todas pasan de 3:1 sin recolorear nada: el gris sigue
     siendo atenuacion, no tinte. */
  opacity: .78;
}
/* Rotulo para una marca de la que no haya activo oficial. HOY NO LO USA NINGUNA
   CELDA -- las catorce llevan logo -- pero se queda: es un estado del componente,
   no codigo muerto, y en el README quedan dos marcas que podrian necesitarlo.
   Va en la tipografia de
   CUERPO, no en Anton: el display gritaria mas que los logos en gris, que es
   justo lo contrario de lo que hace esta franja. Y se atenua con COLOR, no con
   opacidad: --c-mute #5c6167 sobre --c-paper da 6,25:1 y cumple AA como texto,
   mientras que los logos de al lado son imagenes y no tienen que cumplirlo. Por
   eso los dos se apagan de forma distinta. */
.logos__wordmark {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
  color: var(--c-mute);
}
@media (prefers-reduced-motion: no-preference) {
  .logos__item img { transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
  .logos__wordmark { transition: color var(--dur-2) var(--ease-out); }
}
.logos__item:hover img, .logos__item:focus-within img { filter: none; opacity: 1; }
.logos__item:hover .logos__wordmark,
.logos__item:focus-within .logos__wordmark { color: var(--c-ink); }

/* ------------------------------------------------------------------ formularios */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-weight: 600; font-size: var(--fs-sm); }
.field__hint { font-size: var(--fs-sm); color: var(--c-mute); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-4);
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-mute); }
.field input:hover, .field textarea:hover { border-color: var(--c-mute); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--c-green-ink);
  box-shadow: 0 0 0 var(--focus-w) rgb(67 181 86 / .32);
}
.field textarea { min-height: 9rem; resize: vertical; }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset__legend {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-display);
  padding: 0;
  margin-block-end: var(--s-2);
}
.fieldset__note { color: var(--c-mute); font-size: var(--fs-sm); margin-block-end: var(--s-5); max-width: 56ch; }

.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

/* Turnstile, encima del boton y en su mismo contenedor: en el de empleo los bloques
   van a --s-9 y como bloque propio quedaria a 96px del boton que protege. El alto es
   el del widget en tamano normal (300x65), reservado para que el boton no salte cuando
   llega el iframe de Cloudflare. line-height: 0 porque el iframe es inline y hereda el
   interlineado del cuerpo: sin esto media 75px, y el boton saltaba 10px al cargar. */
.cf-turnstile { min-height: 65px; line-height: 0; margin-block-end: var(--s-4); }

/* ============================================================================
   IMPORTANTE — paneles de resultado del formulario.

   `display: none` venia de css/webflow.css:326, que este rediseno borra.
   js/form-submit.js solo hace display:'block' al enviar; NUNCA los oculta al
   cargar. Sin esta regla los dos mensajes se ven siempre, en las dos paginas
   con formulario, y sin lanzar ningun error. No borrar.
   ========================================================================== */
.w-form-done, .w-form-fail { display: none; }

/* Sin radio: --r-1 y --r-2 estan reservados a botones y campos, y esto no es
   ni lo uno ni lo otro. Se separa con el filete inset, como el resto. */
.w-form-done, .w-form-fail {
  padding: var(--s-5) var(--s-6);
  font-weight: 600;
}
.w-form-done { background: rgb(67 181 86 / .14); box-shadow: inset 0 0 0 1px var(--c-green); color: var(--c-ink); }
.w-form-fail { background: rgb(179 38 30 / .08); box-shadow: inset 0 0 0 1px var(--c-danger); color: var(--c-danger); }
.w-form-done:focus-visible, .w-form-fail:focus-visible { outline-offset: 4px; }

/* --------------------------------------------------------------- pie de pagina */
.site-footer { background: var(--c-ink); color: var(--c-on-dark); }
.footer-cta { text-align: center; }
.footer-cta__title { font-size: var(--fs-h1); margin-inline: auto; }   /* el max-width real son 24ch, mas abajo */
.footer-body { display: grid; gap: var(--s-8); padding-block: var(--section-y); }
@media (min-width: 48rem) { .footer-body { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-col__title {
  font-family: var(--ff-display);
  font-size: 1.125rem;
  letter-spacing: .02em;
  margin-block-end: var(--s-4);
  color: var(--c-green);
}
.footer-col li + li { margin-block-start: var(--s-3); }
.footer-col a, .footer-col span { color: var(--c-on-dark-2); text-decoration: none; overflow-wrap: anywhere; }
.footer-col a { display: inline-flex; align-items: center; min-height: 2.75rem; transition: color var(--dur-1) var(--ease-out); }
.footer-col a:hover { color: var(--c-on-dark); }
.footer-address {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--c-on-dark);
  font-style: normal;
}
.footer-partner { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-block-start: var(--s-5); }
.footer-partner img { height: 2.5rem; width: auto; }
.footer-legal {
  border-block-start: 1px solid rgb(255 255 255 / .14);
  padding-block: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-on-dark-2);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between;
}
/* La firma de Senavia. color: inherit porque los enlaces sin clase van en --c-green-ink,
   que sobre --c-ink da 3,4:1 y no llega a AA. Conserva el subrayado del navegador, con
   el offset de base.css: con el color del texto, es lo que lo distingue (WCAG 1.4.1). */
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--c-on-dark); }

/* --- pie: piezas nombradas, para no maquetar con estilos en linea ---------- */
.footer-cta__title { max-width: 24ch; }
.footer-cta__lead { margin-inline: auto; margin-block-start: var(--s-5); color: rgb(27 25 25 / .80); }
.footer-cta__actions { margin-block-start: var(--s-7); }
.footer-col__list { margin-block-start: var(--s-5); }
.footer-col__note { margin-block-start: var(--s-5); color: var(--c-on-dark-2); }
.footer-partner__name { font-weight: 600; color: var(--c-on-dark); }
.footer-partner__role { color: var(--c-on-dark-2); font-size: var(--fs-sm); }
.footer-cta__logo { width: min(16rem, 62vw); height: auto; margin: 0 auto var(--s-6); }

/* --- pulsado: el mismo gesto en todo lo que se pulsa ---------------------- */
.quotes__btn:active:not([disabled]), .nav-toggle:active, .anchor-chip:active { transform: translateY(1px); }