/* ============================================================
   REMEDIA — main.css
   Componentes COMPARTIDOS por todas las páginas.
   Lo que es exclusivo de una página vive en pages/[pagina].css

   REGLA: todo selector va prefijado con su componente.
   Cero !important. Cero colores hardcodeados: solo tokens.
   ============================================================ */


/* ===== GRADIENTE ==========================================
   Sistema parametrizado. Cada página define sus 4 paradas
   con --g1..--g4 y hereda animación, grano y comportamiento.
   Basado en la técnica iridescent cloud (oklab + grano overlay).
   ========================================================== */

.grad {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Paradas por defecto = HOME (alineadas al verde de marca).
     ⚠️ PENDIENTE: gradientes propios de cada página. */
  --g1: #0B0B0B;
  --g2: #0B2B1A;
  --g3: #1F8F52;
  --g4: #81FBA5;

  --grad-angle: 135deg;
  --grad-dur:   18s;

  background-image: linear-gradient(
    var(--grad-angle) in oklab,
    var(--g1) 12.5%,
    var(--g2) 37.5%,
    var(--g3) 62.5%,
    var(--g4) 87.5%
  );
  background-size: 320% 320%;
  background-position: 0% 50%;
  animation: grad-drift var(--grad-dur) ease-in-out infinite alternate;
}

@keyframes grad-drift {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Grano: rompe el banding del degradado */
.grad::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../img/grain.png") repeat;
  background-size: 128px 128px;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}

/* El contenido debe ir por encima del grano */
.grad > * { position: relative; z-index: 2; }

/* Video del degradado pre-renderizado (ver HTML, <video class="grad__video">).
   Se inserta como PRIMER hijo — por la regla de arriba (.grad > *) ya hereda
   position:relative + z-index:2, mismo nivel que el contenido real. Pero
   necesita quedar POR DEBAJO del grano (::after, z-index:1), si no lo tapa
   por completo. Esta regla va después en el archivo a propósito: misma
   especificidad que ".grad > *", gana por orden de cascada.
   Si el <video> no carga (navegador viejo, archivo roto, sección sin video
   todavía), el degradado CSS de arriba queda de respaldo — por eso el
   background-image de .grad NUNCA se borra aunque haya video.
   object-fit:cover porque el video (1280×640, 2:1) casi nunca calza con el
   alto real de la sección. */
.grad__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Variante de las bandas del home: casi todo negro, el verde
   solo asoma. Se logra empujando las paradas oscuras. */
.grad--banda {
  --grad-angle: 120deg;
  background-image:
    radial-gradient(120% 140% at 50% 130% in oklab,
      var(--g4) 0%,
      var(--g3) 22%,
      var(--g2) 45%,
      var(--g1) 72%);
  background-size: 160% 160%;
  background-position: 50% 100%;
  animation: grad-breathe var(--grad-dur) ease-in-out infinite alternate;
}

@keyframes grad-breathe {
  from { background-position: 40% 100%; background-size: 150% 150%; }
  to   { background-position: 60%  92%; background-size: 185% 185%; }
}


/* ===== BANDA (frase sobre el degradado) ====================
   Nació en el home (Banda A/B/Cierre, ver .grad--banda arriba) y se
   volvió compartido al reutilizarse en más páginas — texto centrado,
   una sola columna de lectura sobre el degradado animado.

   El color del texto no se define aquí: ya es blanco por default
   (--c-text en base.css), la banda solo hereda del body.

   ⚠️ CONFIRMAR: el padding-block (--sp-6, 64px) es una aproximación
   medida sobre el screenshot — la banda mide ~207px de alto con dos
   líneas adentro, y no hay una variable de sección específica para
   bandas angostas como esta (--sp-section es demasiado grande,
   pensada para secciones completas).
   ========================================================== */

.sec--banda {
  padding-block: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sec--banda__text {
  max-width: 780px;   /* ⚠️ CONFIRMAR: ancho de lectura aproximado, medido a ojo */
  margin-inline: auto;
}

.sec--banda__title {
  font-size: var(--fs-h3);     /* confirmado: todos los títulos de divisores van en h3 */
  margin-bottom: var(--sp-2);  /* ⚠️ medido ~11px de tinta */
}

.sec--banda__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
  margin-bottom: var(--sp-4);   /* ⚠️ CONFIRMAR: aproximado, solo aplica cuando lleva kicker + CTA debajo */
}

.sec--banda__subtitle strong {
  font-weight: var(--fw-medium);   /* "semibold" del sistema = Roboto Medium 500, no bold */
}

/* "Tú decides" en Banda B del home: línea corta y en negrita entre el
   subtítulo y el CTA. ⚠️ CONFIRMAR: tamaño medido a ojo, sin verificar contra Figma. */
.sec--banda__kicker {
  font-family: var(--f-ui);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
}


/* ===== BOTONES ============================================
   Specs medidas de los SVG del cliente:
   píldora 24px alto · radio pill · padding-x 13px
   texto Roboto 14px · bola 24px · gap 4px
   flecha 11.67px · stroke 0.5px · caps redondos

   Hover (idéntico en las 3 variantes):
     bola + flecha → translateX(+5px)
     flecha        → rotate(-45deg)
   Sin cambio de color en hover — confirmado por el cliente.
   (Los SVG de Figma marcaban +2.14px; era deriva del artboard.)

   Los colores salen de --c-text / --c-bg, así que el botón se
   invierte solo en las secciones con data-theme="light".
   ========================================================== */

.btn-r {
  --btn-h:      24px;
  --btn-pad-x:  13px;
  --btn-gap:    4px;
  --btn-shift:  5px;    /* avance de la bola+flecha en hover */
  --btn-rotate: -45deg; /* giro de la flecha en hover */

  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);   /* ⚠️ CONFIRMAR: medí el asta en 0.094em → Regular */
  letter-spacing: var(--ls-ui);
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--c-text);
}

.btn-r__label {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding-inline: var(--btn-pad-x);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.btn-r__icon {
  flex: 0 0 auto;
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease);
}

.btn-r__arrow {
  width: var(--btn-h);
  height: var(--btn-h);
  display: block;
  transition: transform var(--dur) var(--ease);
  transform-origin: center;
}

.btn-r__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- El movimiento, igual en las 3 variantes --- */
.btn-r:hover .btn-r__icon,
.btn-r:focus-visible .btn-r__icon { transform: translateX(var(--btn-shift)); }

.btn-r:hover .btn-r__arrow,
.btn-r:focus-visible .btn-r__arrow { transform: rotate(var(--btn-rotate)); }

/* --- Variante: primario (relleno sólido) --- */
.btn-r--primary .btn-r__label,
.btn-r--primary .btn-r__icon {
  background-color: var(--c-text);
  color: var(--c-bg);
}

/* --- Variante: secundario (contorno 1px) --- */
.btn-r--secondary .btn-r__label,
.btn-r--secondary .btn-r__icon {
  border: 1px solid var(--c-text);
  color: var(--c-text);
}

/* --- Variante: texto (subrayado, sin bola) --- */
.btn-r--text .btn-r__label {
  height: auto;
  padding-inline: 0;
  text-decoration: underline;
  text-decoration-thickness: 0.68px;
  text-underline-offset: 1.4px;
}

.btn-r--text .btn-r__icon {
  border: 0;
  background: none;
}


/* ===== NAV ================================================
   Medido del export @2x (1440x60 real):
     alto barra 60px · contenedor 1120 (logo en x=160 = borde exacto)
     distribucion: space-between (logo | links | CTA)
     logo 130x25 · links Roboto 14px, gap ~40px
     hover = color del acento. Sin subrayado.
   Movil (375 real): padding 16px · items Newsreader 24px,
     ritmo 40px, alineados a la derecha, bullet 4px del acento.
   ========================================================== */

.nav-main {
  --nav-gap:      40px;   /* ⚠️ medí 41-42.5px de tinta → ~40 de caja */
  --nav-logo-h:   20.3px;    /* 25px - 5% - 5% - 10%, a pedido de Abel */
  --nav-logo-h-m: 14.63px;   /* 18px - 5% - 5% - 10% */

  position: sticky;
  top: 0;
  z-index: 100;
  /* Vidrio esmerilado: deja ver el contenido detrás al hacer scroll, en vez
     de un fondo sólido. color-mix() sigue a --c-bg, así que invierte solo
     con data-theme="light" igual que el resto del sistema. */
  background-color: color-mix(in srgb, var(--c-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 24px -12px rgb(0 0 0 / 35%);
}

/* Línea inferior tipo SaaS premium: no es un --c-line plano, es un
   degradado que se apaga hacia los bordes (nunca toca el borde de la
   pantalla con fuerza) + la sombra de arriba para separar del contenido
   sin recurrir a una segunda línea dura. */
.nav-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-text) 14%, transparent) 20%,
    color-mix(in srgb, var(--c-text) 14%, transparent) 80%,
    transparent 100%);
  pointer-events: none;
}

.nav-main__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* --- Logo: mask + currentColor. Un solo archivo, hereda color. --- */
.nav-main__brand {
  flex: 0 0 auto;
  display: block;
  height: var(--nav-logo-h);
  aspect-ratio: 356 / 69;
  background-color: currentColor;
  color: var(--c-text);
  -webkit-mask: url("../img/logo-remedia.svg") no-repeat center / contain;
          mask: url("../img/logo-remedia.svg") no-repeat center / contain;
}

/* --- Links --- */
.nav-main__links {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav-main__link {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

/* Hover y página actual son el mismo estado: el color del acento.
   Cada link trae su data-accent, así que --c-accent resuelve solo. */
.nav-main__link:hover,
.nav-main__link:focus-visible,
.nav-main__link.is-active { color: var(--c-accent); }

/* --- Hamburguesa (solo móvil) --- */
.nav-main__burger {
  display: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  cursor: pointer;
}
.nav-main__burger svg { width: 100%; height: 100%; display: block; }
.nav-main__burger .i-close { display: none; }
.nav-main__burger[aria-expanded="true"] .i-open  { display: none; }
.nav-main__burger[aria-expanded="true"] .i-close { display: block; }


/* ===== PANEL MÓVIL ======================================== */

.nav-panel {
  /* Longhands explícitos, no el shorthand "inset" — con var(--nav-h) de por
     medio el shorthand no resolvía right/bottom a 0 en todos los motores y
     el panel quedaba encogido al ancho de su contenido en vez de tapar
     toda la pantalla debajo del header. */
  position: fixed;
  top: var(--nav-h);
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - var(--nav-h));
  z-index: 99;
  background-color: var(--c-bg);
  padding: var(--sp-6) var(--gutter) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.nav-panel.is-open { visibility: visible; opacity: 1; }

.nav-panel__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.nav-panel__link {
  display: flex;
  align-items: center;
  gap: 10px;                       /* ⚠️ estimado del mockup */
  height: 40px;                    /* ritmo medido: 40px */
  font-family: var(--f-display);
  font-size: var(--fs-h3);         /* ⚠️ medí ~25px; h3=24 es lo más cercano del sistema */
  line-height: var(--lh-h3);
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

/* El bullet toma el acento de SU página, siempre visible */
.nav-panel__link::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--c-accent);
}

/* Página actual: texto en su color + cursiva */
.nav-panel__link.is-active {
  color: var(--c-accent);
  font-style: italic;
}

.nav-panel__foot {
  border-top: 1px solid var(--c-line);
  padding-top: 19px;               /* medido */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  font-size: var(--fs-body-m);
}
.nav-panel__foot a:first-child { text-decoration: underline; text-underline-offset: 2px; }

/* Bloquea el scroll del fondo con el panel abierto */
body.nav-open { overflow: hidden; }

/* ⚠️ PENDIENTE: breakpoint sin confirmar. Uso el lg de Bootstrap. */
@media (max-width: 991.98px) {
  .nav-main__links { display: none; }
  .nav-main__burger { display: block; }
  .nav-main__brand { height: var(--nav-logo-h-m); }
}
@media (min-width: 992px) {
  .nav-panel { display: none; }
}


/* ===== EYEBROW ============================================
   Badge de punto + texto, color del acento (cambia solo por
   página/sección vía --c-accent).

   Medido del screenshot de referencia (_no-tocar/home.png):
     alto ~22px · borde 1px · punto 6px · padding-inline ~6px
     gap punto→texto ~8px · texto Roboto 14px

   ⚠️ CONFIRMAR: el borde tiene esquina redondeada (~4px medidos).
   La regla del sistema es esquinas rectas salvo --radius-pill en
   botones — este badge no es un botón. Se implementa tal como se
   ve en el screenshot porque así se pidió explícitamente, pero es
   una excepción nueva que Abel debe validar.
   ========================================================== */

.eyebrow {
  --eyebrow-dot: 6px;

  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 6px;
  border: 1px solid var(--c-accent);
  border-radius: 4px;      /* ⚠️ CONFIRMAR — ver nota arriba */
  color: var(--c-accent);
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  line-height: 1;
  white-space: nowrap;
}

.eyebrow__dot {
  flex: 0 0 auto;
  width: var(--eyebrow-dot);
  height: var(--eyebrow-dot);
  border-radius: 50%;
  background-color: currentColor;
}


/* ===== MARQUEE ============================================
   Franja de borde a borde de la PANTALLA con loop infinito en CSS.
   Se usa dentro de .sec pero como hijo DIRECTO de <section> (el
   .sec base no tiene padding-inline), nunca dentro de .container.

   Loop infinito: el HTML duplica la lista de items dentro de
   .marquee__track (la copia va aria-hidden) y el track anima de
   0% a -50% — como la segunda mitad es idéntica a la primera,
   nunca se ve un corte ni un hueco vacío sin importar el ancho.

   Nació en el home (industrias, home.css) y se volvió compartido
   al reutilizarse en más páginas — por eso vive aquí y no en
   pages/*.css.
   ⚠️ CONFIRMAR: velocidad (40s/vuelta) y padding son aproximados. */

.marquee {
  margin-top: var(--sp-6);
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--sp-4);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

/* Solo pausa con mouse real. En touch, :hover se queda "pegado" tras el
   primer tap (no hay mouseleave) y el marquee se veía estático para
   siempre en móvil — @media(hover:hover) evita que esta regla aplique ahí. */
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}

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

/* Excepción de accesibilidad: base.css §10 mata TODAS las animaciones con
   `* { animation-duration: 0.01ms !important }` cuando el dispositivo pide
   movimiento reducido (muy común en móvil, a veces lo enciende solo el
   ahorro de batería). Eso congelaba el marquee y el segundero.
   Estos dos son movimientos suaves y continuos —no del tipo brusco/parallax
   que puede marear—, así que a pedido de Abel se dejan correr igual.
   Re-declarar con !important y una clase (gana en especificidad al `*`)
   restaura solo duración + repetición; el resto (nombre, easing) nunca lo
   tocó la regla global. El segundero está en la sección de relojes. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation-duration: 40s !important;
    animation-iteration-count: infinite !important;
  }
}

.marquee__list {
  display: flex;
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marquee__list li {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-h3);
  white-space: nowrap;
}

.marquee__list li::after {
  content: '•';
  display: inline-block;
  color: var(--c-accent);
  font-style: normal;
  margin-inline: var(--sp-4);   /* ⚠️ CONFIRMAR: aproximado */
}


/* ===== CLIENTES (grid de logos) ===========================
   Título + subtítulo + imagen de logos + nota. home-logos.svg
   trae los ~47 logos ya armados en una sola pieza (viewBox
   1122×379 — calza casi 1:1 con el contenedor de 1120px), así
   que no se reconstruye ninguna grilla en CSS.

   Nació en el home (home.css) y se volvió compartido al
   reutilizarse en más páginas.
   ⚠️ CONFIRMAR: espaciados aproximados sobre el screenshot. */

.clientes__title {
  margin-bottom: var(--sp-2);
}

.clientes__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
}

.clientes__logos {
  width: 100%;
  height: auto;
  margin-top: var(--sp-6);
}

.clientes__note {
  margin-top: var(--sp-5);
  font-style: italic;
  text-align: center;
}


/* ===== FOOTER ============================================= */
/* .footer-main — wordmark + columnas + relojes JS.
   Compartido en las 8 páginas, siempre sobre fondo oscuro (no lleva
   data-theme, así que no se invierte con Los Resultados).

   Medidas de esta sección tomadas a ojo sobre el screenshot de
   referencia — ⚠️ CONFIRMAR contra Figma. */

.footer-main {
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--c-line);
}

/* --- Wordmark: mismo truco que el logo del nav (mask + currentColor),
   un solo archivo. Ocupa el ancho completo del container; el alto sale
   solo del aspect-ratio real del SVG (356×69). --- */
.footer-main__wordmark {
  width: 100%;
  aspect-ratio: 356 / 69;
  background-color: var(--c-text);
  -webkit-mask: url("../img/logo-remedia.svg") no-repeat left center / contain;
          mask: url("../img/logo-remedia.svg") no-repeat left center / contain;
  margin-bottom: var(--sp-6);   /* ⚠️ CONFIRMAR: aproximado */
}

.footer-main__grid {
  margin-bottom: var(--sp-6);   /* ⚠️ CONFIRMAR: aproximado */
}

.footer-main__about { margin-bottom: var(--sp-5); } /* solo pega en el stack móvil */

/* .footer-main__col es flex (gap: sp-3) + su título ya trae margin-bottom
   propio (sp-1) → título-texto en esas columnas queda separado sp-3+sp-1.
   .footer-main__about NO es flex (el párrafo necesita fluir normal junto a
   los íconos sociales debajo), así que el título de acá necesita ese mismo
   total puesto directo en su margin-bottom para que quede a la misma
   altura que "Únete". */
.footer-main__about .footer-main__col-title {
  margin-bottom: calc(var(--sp-3) + var(--sp-1));
}

.footer-main__desc {
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
  padding-right: 10px;   /* a pedido de Abel, evita que el texto toque la columna vecina */
}

.footer-main__social {
  display: flex;
  gap: var(--sp-3);
}

.footer-main__social svg {
  width: 17px;    /* 24px - 30%, a pedido de Abel */
  height: 17px;
  color: var(--c-text-muted);   /* gris, no el blanco de Remedia */
  transition: color var(--dur) var(--ease);
}

/* Colores de marca fijos, no el acento dinámico de la página — a
   pedido de Abel: LinkedIn siempre azul, WhatsApp siempre verde. */
.footer-main__social a[aria-label*="LinkedIn"]:hover svg,
.footer-main__social a[aria-label*="LinkedIn"]:focus-visible svg { color: var(--p-azul); }

.footer-main__social a[aria-label*="WhatsApp"]:hover svg,
.footer-main__social a[aria-label*="WhatsApp"]:focus-visible svg { color: var(--p-verde); }

/* Instagram: cuenta pendiente, "desactivado" a propósito. NO es <a> (sin
   href) — es un <span> enfocable con teclado (tabindex) que muestra un
   tooltip en hover/focus. Como pide Abel: al rollover se pone gris, no
   toma ningún acento. */
.footer-main__social-disabled {
  position: relative;
  display: inline-flex;
  cursor: not-allowed;
}

.footer-main__social-disabled:hover svg,
.footer-main__social-disabled:focus-visible svg { color: var(--c-text-muted); }

/* ⚠️ EXCEPCIÓN EXPLÍCITA a "esquinas rectas" (CLAUDE.md): a pedido directo
   de Abel este tooltip lleva esquinas redondeadas y fondo negro
   semitransparente — look "aclaración de SaaS", no un componente de
   layout del sistema de diseño. No usar este radio en ningún otro lado. */
.footer-main__social-tooltip {
  position: absolute;
  bottom: calc(100% + var(--sp-3));
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.94);
  white-space: nowrap;
  background-color: rgb(40 40 40 / 92%);   /* más claro que --p-negro puro: se pierde contra el fondo si no */
  color: var(--p-blanco);
  font-size: var(--fs-body-s);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.footer-main__social-disabled:hover .footer-main__social-tooltip,
.footer-main__social-disabled:focus-visible .footer-main__social-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.footer-main__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);             /* ⚠️ CONFIRMAR: aproximado */
  margin-bottom: var(--sp-5);   /* solo pega en el stack móvil */
  font-size: var(--fs-body-m);
}

.footer-main__col-title {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-1);
}

.footer-main__col a {
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.footer-main__col a:hover,
.footer-main__col a:focus-visible { color: var(--c-text-muted); }

.footer-main__address { color: var(--c-text-muted); }

.footer-main__unete-text {
  font-size: var(--fs-body-m);   /* igual que .footer-main__desc — heredaba fs-body-l del body, quedaba más grande */
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}

/* Excepción puntual a pedido de Abel: este link SÍ toma el color del
   acento de su página (Únete = azul) en hover/focus. El resto de
   .btn-r NO cambia de color por diseño — el override queda acotado
   a esta clase, no toca el componente compartido. */
.footer-main__unete-link:hover,
.footer-main__unete-link:focus-visible { color: var(--c-accent); }

/* --- Relojes -------------------------------------------------
   Cara al doble de tamaño (24px → 48px) y de columna: reloj arriba,
   ciudad abajo, todo centrado — a pedido de Abel.
   Segundero verde con barrido continuo tipo mecánico/automático (no
   "tic" de cuarzo): se anima con CSS @keyframes a velocidad real
   (60s por vuelta) en vez de reposicionarse por JS cada rato, así
   nunca se ve un salto. El JS solo sincroniza su animation-delay una
   vez al cargar — ver main.js. */
.footer-main__clocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;       /* distribuidos horizontalmente y centrados en su fila */
  gap: var(--sp-5);              /* ⚠️ CONFIRMAR: aproximado */
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-line);
  margin-bottom: var(--sp-5);
}

.footer-main__clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-m);
  text-align: center;
}

.footer-main__clock-city {
  color: var(--c-text);   /* blanco de Remedia — antes heredaba el gris del bloque */
}

.footer-main__clock-date {
  font-size: var(--fs-body-s);
  color: var(--c-text-muted);   /* el mismo gris que tenían las ciudades */
}

.footer-main__clock-face {
  width: 48px;
  height: 48px;
  color: var(--c-text);
}

.footer-main__clock-hand {
  stroke: currentColor;
  stroke-linecap: round;
  transform-origin: 16px 16px;
}

.footer-main__clock-hand--h { stroke-width: 1.5; }
.footer-main__clock-hand--m { stroke-width: 1; }

.footer-main__clock-hand--s {
  stroke: var(--c-accent);
  stroke-width: 0.75;
  animation: footer-clock-sweep 60s linear infinite;
}

@keyframes footer-clock-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Excepción de accesibilidad — misma razón que el marquee (ver nota junto a
   @keyframes marquee-scroll): el barrido del segundero se dejaba correr aun
   con movimiento reducido, porque si no el reloj se ve detenido en móvil. */
@media (prefers-reduced-motion: reduce) {
  .footer-main__clock-hand--s {
    animation-duration: 60s !important;
    animation-iteration-count: infinite !important;
  }
}

/* --- Línea legal ------------------------------------------- */
.footer-main__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-body-s);
  color: var(--c-text-muted);
}

.footer-main__legal-links {
  display: flex;
  gap: var(--sp-4);
}

.footer-main__legal-links a:hover,
.footer-main__legal-links a:focus-visible { color: var(--c-text); }

@media (max-width: 991.98px) {
  .footer-main__clocks { gap: var(--sp-4); }
}


/* ===== COMPONENTE VALOR (acordeón nativo <details>) ==========
   Nació en la-firma.css (sec--valores) y se volvió compartido al
   reusarse en el-problema.css (sec--ecosistema). Título siempre
   visible, solo el cuerpo colapsa; ícono +/− propio (mismo patrón
   que .perfil__icon en esto-es-para-ti.css). Requiere un wrapper con
   [data-acordeon] (ver main.js) alrededor de la lista de <details>.
   ============================================================ */

.valor {
  border-bottom: 1px solid var(--c-line);
}

.valor__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
}

.valor__toggle::-webkit-details-marker { display: none; }
.valor__toggle::marker { content: none; }

.valor__toggle h3 {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--c-text-muted);
  font-style: normal;
  transition: color .2s ease;
}

.valor[open] .valor__toggle h3 {
  font-style: italic;
}

/* Ícono +/-: mismas dos barras superpuestas que .perfil__icon
   (esto-es-para-ti.css), la vertical desaparece con [open]. */
.valor__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.valor__icon::before,
.valor__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--c-text-muted);
  transform: translate(-50%, -50%);
  transition: background-color .2s ease;
}
.valor__icon::before { width: 16px; height: 1px; }
.valor__icon::after  { width: 1px; height: 16px; }
.valor[open] .valor__icon::after { display: none; }

.valor__body {
  padding-bottom: var(--sp-4);
}

.valor__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
  padding-right: var(--sp-5);   /* que el texto no invada el control +/- al expandir */
  transition: color .2s ease;
}

.valor__desc + .valor__desc {
  margin-top: var(--sp-3);
}

.valor__desc strong {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

/* Hover o abierto: título + párrafos pasan a blanco Remedia */
.valor:hover .valor__toggle h3,
.valor[open] .valor__toggle h3,
.valor:hover .valor__desc,
.valor[open] .valor__desc {
  color: var(--c-text);
}

.valor:hover .valor__icon::before,
.valor:hover .valor__icon::after,
.valor[open] .valor__icon::before {
  background-color: var(--c-text);
}


/* ===== COMPONENTE PRUEBAS (LAS 3 PRUEBAS) =====================
   Nació en esto-es-para-ti.css (sec--pruebas) y se volvió compartido
   al reusarse en el-problema.css (sec--pruebas). Todo centrado, una
   sola columna de lectura (mismo criterio que .sec--banda__text) —
   título + subtítulo, lista numerada con título + descripción
   separados por línea, y un cierre en el acento de la página + CTA.
   Los números van en la tipografía display (Newsreader), no Roboto.
   ============================================================ */

.sec--pruebas__text,
.sec--pruebas__list,
.sec--pruebas__close {
  max-width: 780px;   /* ⚠️ CONFIRMAR: mismo ancho de lectura que .sec--banda__text, aproximado */
  margin-inline: auto;
  text-align: center;
}

.sec--pruebas__title {
  margin-bottom: var(--sp-2);
}

.sec--pruebas__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
  color: var(--c-text-muted);
}

.sec--pruebas__list {
  list-style: none;
  margin-top: var(--sp-6);
  margin-bottom: 0;
  padding: 0;
}

.prueba {
  display: flex;
  gap: var(--sp-4);
  text-align: left;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}

.prueba__num {
  flex: 0 0 auto;
  width: 32px;   /* ⚠️ CONFIRMAR: aproximado */
  font-family: var(--f-display);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
}

.prueba__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}

.prueba__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
}

.sec--pruebas__close {
  margin-top: var(--sp-6);
}

.sec--pruebas__kicker {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}

@media (max-width: 575.98px) {
  .prueba { gap: var(--sp-3); }
}