/* ==========================================================================
   Abitmedia — Componentes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Primitivas de layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: 1360px; }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-block-start: 0; }
.section--tint { background: var(--color-background-2); }
.section--surface { background: var(--color-surface); }

.section-head {
  max-width: 62ch;
  margin-block-end: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.section-head--center .eyebrow::before { display: none; }

.section-head h2 { margin-block-end: var(--space-4); }

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.58;
}

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }

.stack > * + * { margin-block-start: var(--space-4); }
.stack-lg > * + * { margin-block-start: var(--space-6); }

.split {
  display: grid;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.split--reverse > :first-child { order: 2; }

/* --------------------------------------------------------------------------
   2. Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: .7rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .glyph { flex: none; }

/* CTA con halo animado, adaptado del sistema visual original de Pagomedios. */
.btn--cta {
  --cta-glow-a: #0B76FF;
  --cta-glow-b: #4A5BFF;
  --cta-glow-c: #1A2A9E;
  position: relative;
  z-index: 1;
  /* Azul apenas más profundo que el original para alcanzar contraste AA. */
  background: #006EEA;
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
  transition-duration: .25s;
}
.btn--cta::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
    var(--cta-glow-a), var(--cta-glow-b), var(--cta-glow-c), var(--cta-glow-a));
  background-size: 300% 100%;
  filter: blur(18px);
  opacity: .8;
  animation: cta-glow-move 12s linear infinite;
  transition: opacity .3s ease, filter .3s ease;
}
.btn--cta:hover {
  background: #0059C7;
  border-color: transparent;
  color: #fff;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn--cta:hover::before { opacity: 1; filter: blur(22px); }
.btn--cta.btn--sm::before { inset: -3px; filter: blur(13px); }

@keyframes cta-glow-move {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--cta::before { animation: none; }
}

/* Secundario: adopta el color de la solución activa */
.btn--brand {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-on);
}
.btn--brand:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: var(--brand-on);
}

.btn--outline {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
.btn--outline:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-color: var(--brand-strong);
}

.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--ghost:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}

/* Sobre fondos oscuros (hero, banda CTA, footer) */
.btn--on-dark {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
  color: #fff;
}

/* En las cabeceras de página y en la banda de cierre el botón secundario va
   SIN FONDO: sólo el contorno blanco sobre el degradado del hero o sobre la
   fotografía. Al no tener superficie propia no hay contraste que recalcular por
   marca —el texto se apoya en un fondo que ya está pensado para texto blanco— y
   el CTA principal queda como único elemento con peso. En hover sí aparece una
   superficie, para que el estado se note. */
.page-hero .btn--on-dark,
.cta-band .btn--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .72);
  backdrop-filter: none;
}

.page-hero .btn--on-dark:hover,
.cta-band .btn--on-dark:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
}

.btn--lg { min-height: 54px; padding: .9rem 1.9rem; font-size: var(--text-base); }
.btn--sm { min-height: 38px; padding: .45rem 1rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }
.btn--cta.btn--lg { padding: 18px 34px; font-size: 1.0625rem; line-height: 1; }
.btn--cta.btn--sm { padding: 12px 22px; font-size: .95rem; line-height: 1; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--brand);
  text-decoration: none;
}
.link-arrow .glyph {
  transition: transform var(--duration) var(--ease);
}
.link-arrow:hover .glyph { transform: translateX(3px); }
.link-arrow:hover { text-decoration: underline; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   3. Icon tiles — superficie propia para el icono
   --------------------------------------------------------------------------
   Los PNG Liquid Glass son piezas de vidrio translúcido CLARO: sobre una
   superficie blanca desaparecen. La tile les da un fondo con contraste propio
   —degradado corporativo en modo claro, superficie diferenciada en modo
   oscuro— de modo que el icono conserva su apariencia original sin recurrir a
   ningún filtro destructivo (invert, grayscale, brightness, hue-rotate).
   -------------------------------------------------------------------------- */

.icon-tile {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tile-size, 56px);
  block-size: var(--tile-size, 56px);
  flex: none;
  border-radius: calc(var(--tile-size, 56px) * .3);
  color: #fff;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--brand) 88%, white 12%) 0%,
      var(--brand) 46%,
      var(--brand-strong) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 6px 16px color-mix(in srgb, var(--brand) 34%, transparent);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

/* Brillo superior: el rasgo "liquid glass" del contenedor */
.icon-tile::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
  pointer-events: none;
}

.icon-tile .glyph { position: relative; z-index: 1; stroke-width: 1.55; }

/* El PNG conserva su proporción y su transparencia. Sin filtros. */
.icon-tile .icon-img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  filter: none;
}

.icon-tile--brand,
.icon-tile--neutral     { --brand: var(--color-primary); --brand-strong: var(--color-primary-hover); }
.icon-tile--pagomedios  { --brand: var(--pagomedios);  --brand-strong: var(--pagomedios-strong); }
.icon-tile--facturasoft { --brand: var(--facturasoft); --brand-strong: var(--facturasoft-strong); }
.icon-tile--ventrix     { --brand: var(--ventrix);     --brand-strong: var(--ventrix-strong); }
.icon-tile--tiendamaker { --brand: var(--tiendamaker); --brand-strong: var(--tiendamaker-strong); }

/* --- Variante para RECURSOS PROPIOS DE MARCA -----------------------------
   Los iconos de Pagomedios, FacturaSoft, Ventrix CRM, TiendaMaker y Abitmedia
   ya traen su propio color y su propia forma. La tile aquí sólo aporta una
   superficie neutra y un área de seguridad: no aplica degradado de color, no
   recorta el logotipo y no le añade brillos que compitan con su identidad. */
.icon-tile--brand-asset {
  background: var(--color-surface);
  color: inherit;
  box-shadow:
    inset 0 0 0 1px var(--color-border),
    0 4px 12px rgba(12, 23, 48, .10);
}
.icon-tile--brand-asset::after { display: none; }

/* El recurso de marca nunca se deforma ni se recorta */
.icon-tile--brand-asset .icon-img {
  object-fit: contain;
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* Variante suave para listas densas */
.icon-tile--soft {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}
.icon-tile--soft::after { display: none; }

/* --- Modo oscuro ---------------------------------------------------------
   Superficie diferenciada, borde ligeramente luminoso y sombra más profunda.
   El degradado de marca se mantiene (el icono necesita fondo oscuro) pero se
   atenúa para que no brille más que el contenido que lo rodea. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-tile {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      inset 0 0 0 1px rgba(255, 255, 255, .10),
      0 8px 20px rgba(0, 0, 0, .5);
  }
  :root:not([data-theme="light"]) .icon-tile::after {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  }
  :root:not([data-theme="light"]) .icon-tile--brand-asset {
    background: var(--color-surface-2);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .14),
      0 8px 20px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] .icon-tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 8px 20px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .icon-tile::after {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}
:root[data-theme="dark"] .icon-tile--brand-asset {
  background: var(--color-surface-2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    0 8px 20px rgba(0, 0, 0, .55);
}

/* --- Iconos sueltos sobre superficie oscura (header, footer) -------------
   Ahí el PNG Liquid Glass ya tiene contraste por sí mismo: no necesita tile
   ni filtro. Sólo se le da un realce muy leve al pasar el puntero. */
.icon-img { object-fit: contain; }
.icon-img--on-dark { opacity: .92; transition: opacity var(--duration) var(--ease); }
:where(a, button):hover > .icon-img--on-dark { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Tarjetas
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.card h3 { font-size: var(--text-lg); }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.card--hover:hover,
.card--hover:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand) 42%, var(--color-border));
}
.card--hover:hover .icon-tile { transform: scale(1.05) rotate(-2deg); }

/* Toda la tarjeta es clicable sin anidar enlaces */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card--flat { box-shadow: none; background: var(--color-surface-2); }
.card--outline { background: transparent; }

/* Tarjeta con imagen y cuerpo oscuro, basada en el tratamiento visual de
   pagomedios_html. La imagen ocupa la cabecera y el título se apoya sobre un
   degradado para conservar contraste independientemente del encuadre. */
.card--media-dark {
  gap: 0;
  padding: var(--space-3);
  overflow: hidden;
  background: #1C283B;
  color: #fff;
}
.card--media-dark:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card--media-dark .card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.45 / 1;
  border-radius: var(--radius-lg);
  background: #0D1D3A;
}
.card--media-dark .card__media::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(180deg, transparent, rgba(13, 29, 58, .9));
}
.card--media-dark .card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.card--media-dark:hover .card__media img { transform: scale(1.025); }
.card--media-dark .card__media-title {
  position: absolute;
  z-index: 1;
  inset-inline: var(--space-4);
  inset-block-end: var(--space-3);
  margin: 0;
  color: #8DCBFF;
  font-size: var(--text-2xl);
  line-height: 1.1;
}
.card--media-dark .card__body { padding: var(--space-4) var(--space-1) var(--space-2); }
.card--media-dark .card__body p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

@media (max-width: 760px) {
  .card--media-dark .card__media { aspect-ratio: 1.9 / 1; }
}

/* Tarjeta de solución (portada y listado) */
.solution-card {
  overflow: hidden;
  isolation: isolate;
}
.solution-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.solution-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.solution-card__cat {
  display: block;
  /* Reserva dos líneas para que el nombre de las cuatro soluciones quede
     alineado aunque la categoría ocupe una sola línea. */
  min-block-size: 2.6em;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
}
.solution-card__name { font-size: var(--text-xl); margin-block-start: .1rem; }
.solution-card__benefit {
  font-weight: 700;
  color: var(--color-text-strong);
  font-size: var(--text-base);
}
.solution-card__foot { margin-block-start: auto; padding-block-start: var(--space-3); }

/* Tarjeta de funcionalidad (icono + texto) */
.feature {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.feature__body h3 { font-size: var(--text-base); margin-block-end: .35rem; }
.feature__body p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   5. Indicadores
   -------------------------------------------------------------------------- */

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.metric__value {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--brand);
}
.metric__unit { font-size: var(--text-lg); font-weight: 700; }
.metric__label { font-weight: 700; color: var(--color-text-strong); font-size: var(--text-base); }
.metric__note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Valor aún no proporcionado por Abitmedia */
.metric--pending .metric__value {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  font-weight: 700;
}
.metric__pending-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px dashed currentColor;
}

/* --------------------------------------------------------------------------
   6. Carrusel de logos
   -------------------------------------------------------------------------- */

.logo-carousel { position: relative; }

.logo-carousel__viewport {
  overflow: hidden;
  /* Difuminado lateral para insinuar continuidad */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-carousel__track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: logo-scroll var(--carousel-duration, 46s) linear infinite;
}
.logo-carousel[data-paused="true"] .logo-carousel__track,
.logo-carousel__viewport:hover .logo-carousel__track,
.logo-carousel__viewport:focus-within .logo-carousel__track {
  animation-play-state: paused;
}

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

.logo-carousel__item {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: clamp(9rem, 14vw, 12rem);
  block-size: clamp(5rem, 7vw, 6.25rem);
  padding: var(--space-2);
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* Variante para logotipos sueltos sin tarjeta incorporada */
.logo-carousel--framed .logo-carousel__item {
  padding: var(--space-3);
  background: #fff;                      /* conservan sus colores originales */
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.logo-carousel__item img {
  max-block-size: 100%;
  max-inline-size: 100%;
  object-fit: contain;
}

/* Sin animación: se convierte en una lista desplazable manualmente */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logo-carousel__track { animation: none; }
}

.logo-carousel__controls {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-4);
}

/* Rejilla estática de logos (alianzas, medios de pago) */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-4);
  align-items: center;
}

/* --------------------------------------------------------------------------
   7. Preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: var(--space-3); }

.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.faq__item[open] {
  border-color: color-mix(in srgb, var(--brand) 46%, var(--color-border));
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  color: var(--color-text-strong);
  cursor: pointer;
  list-style: none;
  min-block-size: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--color-surface-2); }

.faq__sign {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  transition: transform var(--duration) var(--ease);
}
.faq__item[open] .faq__sign { transform: rotate(45deg); }

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   8. Migas de pan
   -------------------------------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--text-xs);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li { display: flex; align-items: center; gap: .35rem; }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text-strong); font-weight: 700; }
.breadcrumbs .sep { color: var(--color-border-strong); }

/* --------------------------------------------------------------------------
   9. Placeholders de material gráfico pendiente
   -------------------------------------------------------------------------- */

.placeholder {
  position: relative;
  display: grid;
  place-content: center;
  gap: .4rem;
  aspect-ratio: var(--ph-ratio, 16 / 9);
  inline-size: 100%;
  padding: var(--space-5);
  text-align: center;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 10px,
      color-mix(in srgb, var(--color-border) 40%, transparent) 10px 11px),
    var(--color-surface-2);
  color: var(--color-text-muted);
}
.placeholder__mark {
  justify-self: center;
  padding: .2rem .6rem;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.placeholder__label { font-size: var(--text-sm); font-weight: 600; }
.placeholder__path {
  font-size: var(--text-xs);
  opacity: .7;
  word-break: break-all;
}
.placeholder--logo { aspect-ratio: 5 / 2; padding: var(--space-3); }

/* Dentro de contenedores con alto fijo, el placeholder se ajusta a la caja
   en lugar de imponer su proporción y desbordar el contenido. */
.alliance-card__logo .placeholder,
.logo-carousel__item .placeholder,
.page-hero__logo .placeholder {
  aspect-ratio: auto;
  block-size: 100%;
  inline-size: 100%;
  padding: var(--space-2);
}

/* --------------------------------------------------------------------------
   10. Cabecera del sitio
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* Fondo plano: sin degradado. El volumen lo aporta la luz animada. */
  background: var(--header-base);
  color: var(--color-header-text);
  border-block-end: 0;
  transition: box-shadow var(--duration) var(--ease);
  /* Contexto propio para que la capa de luz quede detrás del contenido
     sin necesidad de recortar el header (los desplegables se salen de su
     caja y no deben cortarse). */
  isolation: isolate;
}

/* --- Luz difusa del header ------------------------------------------------
   Dos focos muy difuminados que recorren el header lentamente, como una luz
   suave pasando por encima. Van en una capa aparte —con su propio
   overflow: hidden— para no recortar los menús desplegables, que sí deben
   poder salirse del header.
   Se anima transform (compuesto en GPU), no background-position: no provoca
   repintados del header en cada fotograma. */
.site-header__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.site-header__beam {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Foco principal: el azul más claro del par */
.site-header__beam--1 {
  inset-block: -220%;
  inset-inline-start: -25%;
  inline-size: 70%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--header-glow) 92%, #1B3ACB) 0%,
    color-mix(in srgb, var(--header-glow) 70%, transparent) 45%,
    transparent 100%);
  filter: blur(26px);
  opacity: .9;
  animation: header-beam-1 26s ease-in-out infinite alternate;
}

/* Realce claro: la «luz» propiamente dicha, muy tenue */
.site-header__beam--2 {
  inset-block: -260%;
  inset-inline-end: -20%;
  inline-size: 52%;
  background: radial-gradient(closest-side,
    rgba(120, 160, 255, .30) 0%,
    rgba(90, 130, 240, .12) 48%,
    transparent 100%);
  filter: blur(34px);
  opacity: .85;
  animation: header-beam-2 34s ease-in-out infinite alternate;
}

@keyframes header-beam-1 {
  from { transform: translate3d(-6%, 0, 0)  scale(1);    }
  to   { transform: translate3d(58%, 0, 0)  scale(1.18); }
}
@keyframes header-beam-2 {
  from { transform: translate3d(8%, 0, 0)   scale(1.12); }
  to   { transform: translate3d(-52%, 0, 0) scale(1);    }
}

/* Con movimiento reducido la luz se queda quieta, pero no desaparece:
   el header conserva su profundidad. */
@media (prefers-reduced-motion: reduce) {
  .site-header__beam { animation: none; }
  .site-header__beam--1 { transform: translate3d(26%, 0, 0); }
  .site-header__beam--2 { transform: translate3d(-22%, 0, 0); }
}
.site-header[data-scrolled="true"] { box-shadow: 0 10px 30px rgba(4, 16, 52, .28); }

.site-header a { color: inherit; }
/* El CTA azul conserva texto blanco dentro del header. */
.site-header .btn--cta { color: #fff; }

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--header-min-h, 72px);   /* nunca var(--header-h): ver variables.css */
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.brand img, .brand svg { block-size: clamp(34px, 3.9vw, 46px); inline-size: auto; }
.brand__fallback {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -.03em;
}

/* --- Navegación de escritorio --- */
.nav { margin-inline-start: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .75rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-header-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease);
}
.nav__link:hover { background: var(--color-header-hover); color: #fff; }
.nav__link .glyph { transition: transform var(--duration) var(--ease); opacity: .8; }
.nav__item[data-open="true"] > .nav__link { background: var(--color-header-hover); }
.nav__item[data-open="true"] > .nav__link .glyph { transform: rotate(180deg); }

/* Indicador de página actual: no depende sólo del color */
.nav__link[aria-current="page"] { font-weight: 700; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: .75rem;
  inset-block-end: -.15rem;
  block-size: 3px;
  border-radius: 3px;
  background: var(--color-cta);
}

/* --- Desplegable --- */
.nav__panel {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: calc(100% + .55rem);
  z-index: var(--z-dropdown);
  inline-size: min(700px, 88vw);
  transform: translateX(-50%) translateY(-.4rem);
  padding: var(--space-5);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration);
}
.nav__item[data-open="true"] > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__panel-intro {
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.nav__panel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: var(--space-2);
  margin: 0; padding: 0;
  list-style: none;
}
/* Estructura uniforme: una columna fija para el icono y otra flexible para el
   texto. Todos los contenedores de icono miden lo mismo aunque los PNG tengan
   proporciones distintas, de modo que los textos quedan alineados entre sí sin
   necesidad de márgenes particulares para cada opción. */
.nav__panel-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration) var(--ease);
}
.nav__panel-link:hover { background: var(--color-surface-2); color: var(--color-text); }

/* Caja de icono de tamaño fijo, común a todas las opciones del megamenú */
.nav__panel-icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
}
.nav__panel-text { display: grid; gap: .15rem; min-inline-size: 0; }
.nav__panel-text strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.nav__panel-text span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }
/* El reset pinta los <svg> como bloque; el marcador de enlace externo tiene
   que quedarse en la misma línea que la etiqueta, no caer a un renglón propio. */
.glyph--external {
  display: inline-block;
  vertical-align: -.12em;
  margin-inline-start: .3rem;
}

/* --- Acciones del header --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: none;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--radius);
  color: var(--color-header-text);
  background: transparent;
  transition: background-color var(--duration) var(--ease);
}
.icon-btn:hover { background: var(--color-header-hover); }

.header-actions .btn--cta { margin-inline-start: .4rem; }

/* Selector de tema: se muestra el icono del tema al que se va a cambiar */
.theme-toggle { position: relative; }
.theme-toggle__sun,
.theme-toggle__moon { display: grid; place-items: center; }
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun  { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: grid; }
}

/* --- Botón de menú móvil --- */
.nav-toggle { display: none; }

/* --- Menú móvil --- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h, 72px) 0 0 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-1rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration);
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__inner { padding: var(--space-5) var(--gutter) var(--space-8); }

.mobile-nav__group + .mobile-nav__group { border-block-start: 1px solid var(--color-border); }

.mobile-nav__link,
.mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: 52px;
  padding: var(--space-3) 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-strong);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.mobile-nav__summary::-webkit-details-marker { display: none; }
.mobile-nav__group[open] .mobile-nav__summary .glyph { transform: rotate(180deg); }
.mobile-nav__summary .glyph { transition: transform var(--duration) var(--ease); color: var(--color-text-muted); }

.mobile-nav__sub { padding-block-end: var(--space-4); display: grid; gap: .15rem; }
.mobile-nav__sublink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-block-size: 52px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
}
.mobile-nav__sublink:hover { background: var(--color-surface-2); color: var(--color-text); }
.mobile-nav__sublink .nav__panel-icon { inline-size: 40px; block-size: 40px; }
.mobile-nav__sublink strong { display: block; font-weight: 600; }
.mobile-nav__sublink .nav__panel-text span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

.mobile-nav__actions {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   11. Modal de búsqueda
   -------------------------------------------------------------------------- */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(3rem, 9vh, 7rem) var(--gutter) var(--space-5);
  background: rgba(6, 16, 44, .62);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), visibility var(--duration);
}
.search-modal[data-open="true"] { opacity: 1; visibility: visible; }

.search-modal__panel {
  inline-size: min(42rem, 100%);
  max-block-size: min(78vh, 42rem);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-.8rem) scale(.985);
  transition: transform var(--duration) var(--ease);
}
.search-modal[data-open="true"] .search-modal__panel { transform: translateY(0) scale(1); }

.search-modal__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.search-modal__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  font-size: var(--text-lg);
  color: var(--color-text-strong);
}
.search-modal__input:focus { outline: none; }
.search-modal__input::placeholder { color: var(--color-text-muted); }
/* El botón nativo de limpiar duplicaría la "X" del modal */
.search-modal__input::-webkit-search-cancel-button,
.search-modal__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.search-modal__close {
  display: inline-grid;
  place-items: center;
  inline-size: 40px; block-size: 40px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
}
.search-modal__close:hover { background: var(--color-surface-2); color: var(--color-text-strong); }

.search-modal__results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  margin: 0;
  list-style: none;
}

.search-result a {
  display: grid;
  gap: .2rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.search-result a:hover,
.search-result[data-active="true"] a {
  background: var(--color-primary-light);
}
.search-result__section {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}
.search-result__title { font-weight: 700; color: var(--color-text-strong); font-size: var(--text-sm); }
.search-result__desc { font-size: var(--text-xs); color: var(--color-text-muted); }
.search-result mark {
  background: color-mix(in srgb, var(--color-cta) 55%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 .1em;
}

.search-modal__state {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.search-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
kbd {
  display: inline-block;
  min-inline-size: 1.4em;
  padding: .1em .4em;
  border: 1px solid var(--color-border-strong);
  border-block-end-width: 2px;
  border-radius: 5px;
  background: var(--color-surface);
  font-size: .92em;
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. Banda de CTA comercial
   -------------------------------------------------------------------------- */

/* Cierre comercial a sangre, al modo de la banda final de thunes.com
   (.banner-item-image): fotografía de fondo → velo oscuro → una sola columna
   centrada. El archivo de escritorio es el mismo que entregó diseño como
   «image-footer-contact-desktop-scaled-1.avif»; aquí vive con el nombre
   descriptivo del proyecto. Por debajo de 700 px entra la versión vertical.

   El texto NUNCA se apoya directamente en la foto: entre ambos va
   .cta-band__veil, que garantiza el contraste AA del blanco sea cual sea la
   zona de la imagen que quede detrás. */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  /* Banda alta, como la de la referencia: el bloque respira y el cierre pesa
     lo mismo que el hero de apertura. */
  padding-block: clamp(5.5rem, 3.4rem + 8vw, 10rem);
  background: var(--color-footer);
  color: #fff;
  text-align: center;
}

/* --- Capa 1: la fotografía ----------------------------------------------- */
.cta-band__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../assets/images/image-footer-contact-mobile-1.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Escritorio: el encuadre apaisado que entregó diseño. El vertical de arriba
   se queda para móvil, que es donde la franja azul oscuro cae detrás del
   texto; el apaisado ahí recortaría justo esa zona.

   Mantiene el «cover» de la regla base: la foto llena la banda de borde a
   borde, aunque eso recorte algo de su alto. */
@media (min-width: 700px) {
  .cta-band__image {
    background-image: url("../assets/images/cta-contacto-fondo.avif");
  }
}

/* Móvil: el encuadre vertical mide 390x705, bastante más alto que la banda que
   dibujan el padding y el contenido, así que con «cover» se recortaba más de
   un tercio de la foto. Un alto mínimo le da aire para mostrarse sin que la
   banda llegue a comerse la pantalla entera. */
@media (max-width: 705px) {
  .cta-band { min-block-size: 34rem; }
}
/* NO hay capa de velo: la fotografía se ve tal cual, en escritorio y en móvil.
   Lo que sostiene la legibilidad del texto es la propia imagen —azul muy
   oscuro en toda la franja del mensaje— más la sombra de texto de .cta-band__title
   y .cta-band__lead. Si algún día se cambia la fotografía por una más clara,
   hay que revisar ahí el contraste. */

/* --- Contenido ------------------------------------------------------------ */
.cta-band .container { inline-size: 100%; }
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  max-inline-size: 52rem;
  margin-inline: auto;
  text-align: center;
}

/* Interlineado propio: el 1.08 general dejaba las dos líneas del título
   pegadas sobre la fotografía, donde no hay fondo plano que las separe. */
.cta-band__title,
.cta-band h2 {
  margin: 0;
  color: #fff;
  font-size: var(--text-4xl);
  line-height: 1.16 !important;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(2, 8, 28, .45);
}
.cta-band__title .title-highlight { line-height: inherit; }

.cta-band__lead,
.cta-band p {
  max-inline-size: 58ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, .92);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  text-shadow: 0 1px 14px rgba(2, 8, 28, .4);
}

.cta-band__actions { margin-block-start: var(--space-2); }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   13. Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  padding-block-start: var(--section-y-sm);
}
.site-footer a { color: var(--color-footer-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(15rem, 1.35fr) repeat(auto-fit, minmax(9.5rem, 1fr));
  padding-block-end: var(--space-7);
}

.footer-brand img, .footer-brand svg { block-size: 40px; inline-size: auto; }
.footer-brand p {
  margin-block-start: var(--space-4);
  color: var(--color-footer-muted);
  font-size: var(--text-sm);
  max-inline-size: 34ch;
}

.footer-col h2 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
  margin-block-end: var(--space-4);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.footer-col li { font-size: var(--text-sm); }
.footer-col a { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 28px; }

.footer-contact {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--color-footer-line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.footer-contact__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-footer-muted);
}
.footer-contact__item .glyph { color: var(--color-cta); margin-block-start: .15rem; flex: none; }
.footer-contact__item strong { display: block; color: #fff; font-weight: 700; }

.footer-social { display: flex; gap: .4rem; flex-wrap: wrap; }
.footer-social a {
  display: inline-grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.footer-social a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-footer-line);
  font-size: var(--text-xs);
  color: var(--color-footer-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* --------------------------------------------------------------------------
   14. Utilidades
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.chip--cta { background: color-mix(in srgb, var(--color-cta) 30%, transparent); color: var(--color-cta-text); border-color: var(--color-cta); }
.chip--on-dark { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }

.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 34%, transparent);
  font-size: var(--text-sm);
  font-weight: 600;
}
.notice .glyph { flex: none; margin-block-start: .1rem; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.checklist .glyph { flex: none; color: var(--brand); margin-block-start: .18rem; }

/* Pasos numerados */
.steps { counter-reset: step; display: grid; gap: var(--space-4); }
.steps__item {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.steps__num {
  counter-increment: step;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-on);
  font-weight: 700;
  font-size: var(--text-sm);
}
.steps__num::before { content: counter(step); }
.steps__item h3 { font-size: var(--text-base); margin-block-end: .25rem; }
.steps__item p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Imágenes de contenido y placeholders editables
   -------------------------------------------------------------------------- */

.media {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--media-ratio, 16 / 9);
  object-fit: var(--media-fit, cover);
  object-position: var(--media-position, center);
}
/* En 'contain' la imagen respira y nunca se recorta ni se deforma */
.media[style*="contain"] { block-size: auto; max-block-size: 100%; }

/* Dentro de una banda, una imagen vertical no debe estirar la fila:
   se limita su alto y se centra, conservando proporción. */
.media-frame { display: grid; place-items: center; }
.media-band .media[style*="contain"] {
  max-block-size: 26rem;
  inline-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
}
.media-band .media-placeholder { max-block-size: 26rem; }

/* Marco de navegador para capturas de pantalla */
.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.media-frame--browser { padding-block-start: 34px; }
.media-frame--browser::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 34px;
  background: var(--color-surface-2);
  border-block-end: 1px solid var(--color-border);
}
/* Los tres puntos de la barra del navegador */
.media-frame--browser::after {
  content: "";
  position: absolute;
  inset-block-start: 13px;
  inset-inline-start: 14px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  box-shadow: 14px 0 0 var(--color-border-strong), 28px 0 0 var(--color-border-strong);
}
.media-frame--soft { background: var(--color-surface-2); padding: var(--space-4); }
.media-frame--plain { border: 0; box-shadow: none; background: none; }

/* Composición alternada de texto e imagen */
.media-band {
  display: grid;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
/* En escritorio se alterna el lado; en móvil el texto SIEMPRE va primero */
@media (min-width: 880px) {
  .media-band--reverse > :first-child { order: 2; }
}

/* Pila de imágenes sin contenedor (frame: 'none').
   No lleva caja, borde ni sombra: las capturas se apoyan directamente sobre
   el fondo de la sección. Con dos imágenes se reparten el alto de la banda,
   de modo que añadir la segunda no hace crecer la sección. */
.media-stack {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  align-content: center;
}
.media-stack .media,
.media-stack .media-placeholder {
  inline-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
}
/* Los topes van por encima del max-block-size: 26rem general de .media-band
   y están calculados para que la pareja ocupe prácticamente el mismo alto que
   la columna de texto: añadir la segunda imagen no estira la banda. */
.media-band .media-stack--pair { gap: var(--space-3); }
.media-band .media-stack--pair > :nth-child(1) { max-block-size: 9rem; }
.media-band .media-stack--pair > :nth-child(2) { max-block-size: 11rem; }

/* --------------------------------------------------------------------------
   Tira de logotipos de plataforma (plugins de integración)
   --------------------------------------------------------------------------
   Logotipos de terceros: se muestran tal cual, sin recolorear, sobre una
   superficie clara que les da contraste en modo oscuro igual que en claro.
   -------------------------------------------------------------------------- */
.plugin-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.plugin-logos li {
  display: grid;
  place-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
}
.plugin-logos img {
  display: block;
  block-size: 1.75rem;
  inline-size: auto;
  max-inline-size: 100%;
}

/* Dúo de imágenes */
.media-duo {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* --- Placeholder editable ------------------------------------------------- */
.media-placeholder {
  position: relative;
  display: grid;
  place-content: center;
  gap: .35rem;
  inline-size: 100%;
  aspect-ratio: var(--media-ratio, 16 / 9);
  padding: var(--space-5);
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
/* En desarrollo se distingue y muestra la ficha técnica */
.media-placeholder.is-dev {
  border: 1.5px dashed var(--color-border-strong);
  background:
    repeating-linear-gradient(135deg, transparent 0 10px,
      color-mix(in srgb, var(--color-border) 42%, transparent) 10px 11px),
    var(--color-surface-2);
}
.media-placeholder__tag {
  justify-self: center;
  padding: .2rem .65rem;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.media-placeholder__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-strong);
  word-break: break-all;
}
.media-placeholder__spec { font-size: var(--text-xs); }
.media-placeholder__path { font-size: var(--text-xs); opacity: .75; word-break: break-all; }
/* Producción: superficie neutra y muda */
.media-placeholder__mark {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-border) 60%, transparent);
}

/* Marco de figura para capturas de producto */
.figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.figure img { inline-size: 100%; object-fit: cover; }
.figure--contain { padding: var(--space-4); background: var(--color-surface-2); }
.figure--contain img { object-fit: contain; }
.figure figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-block-start: 1px solid var(--color-border);
}

/* Botón de volver arriba */
.to-top {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: 90;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration);
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-surface-2); }

/* Badges de tienda de aplicaciones (dibujados, no imágenes externas) */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-invert);
  color: var(--color-text-invert);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.store-badge:hover { transform: translateY(-2px); color: var(--color-text-invert); opacity: .92; }
.store-badge__text { display: grid; line-height: 1.15; }
.store-badge__text small { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
/* Hereda el color del badge: el reset pinta <strong> con el color de texto
   general, que sobre la superficie invertida quedaría ilegible. */
.store-badge__text strong { font-size: var(--text-sm); font-weight: 700; color: inherit; }

/* --------------------------------------------------------------------------
   Palabra destacada dentro de un título
   --------------------------------------------------------------------------
   DESACTIVADO EN TODO EL SITIO: la palabra destacada ya no cambia de color y
   se lee con el mismo tono que el resto del título.

   El marcado no se ha tocado —heading() sigue envolviendo la palabra en
   <span class="title-highlight">—, así que para recuperar el acento basta con
   devolver a estas dos reglas sus colores:

     .title-highlight                            { color: var(--page-accent); }
     .hero/.page-hero/.cta-band .title-highlight { color: var(--color-cta); }

   (sobre las superficies oscuras del hero y la banda CTA el acento de marca
   no llega a AA; de ahí que allí el color fuese el amarillo corporativo.)
   -------------------------------------------------------------------------- */
.title-highlight {
  color: inherit;
  /* Hereda SIEMPRE el interlineado del título: si se le dejase el de la caja
     en línea, las dos líneas de un h2 partido volverían a juntarse justo en
     el tramo destacado. */
  line-height: inherit;
  /* Y no introduce su propio ritmo vertical dentro del título. */
  display: inline;
  padding-block: 0;
}

.hero .title-highlight,
.page-hero .title-highlight,
.cta-band .title-highlight { color: inherit; }

/* --------------------------------------------------------------------------
   Pestañas horizontales («En detalle»)
   --------------------------------------------------------------------------
   Fila de pestañas con icono + etiqueta corta sobre una línea base continua;
   la pestaña activa marca su segmento con --brand, es decir, con el color de
   la solución en cuyo mini landing está (y con el azul corporativo fuera de
   ellas). Debajo, un único panel de contenido. Reduce mucho el alto frente a
   apilar todos los bloques, y evita recorrer una columna larguísima.
   -------------------------------------------------------------------------- */

.tabs { position: relative; }

/* --- Barra de pestañas --- */
.tabs__bar {
  position: relative;
  margin-block-end: clamp(var(--space-6), 4vw, var(--space-8));
}
/* Línea base continua bajo toda la fila */
.tabs__bar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--color-border);
}

.tabs__list {
  display: flex;
  gap: clamp(var(--space-2), 2vw, var(--space-6));
  justify-content: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Los indicadores activos se dibujan sobre la línea base */
  padding-block-end: 0;
}
.tabs__list::-webkit-scrollbar { display: none; }

.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: none;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + 2px);
  min-block-size: 56px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.tabs__tab:hover { color: var(--color-text-strong); }

/* Indicador del estado activo: segmento grueso sobre la línea base */
.tabs__tab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background-color var(--duration) var(--ease);
}
.tabs__tab[aria-selected="true"] {
  color: var(--brand);
  font-weight: 600;
}
.tabs__tab[aria-selected="true"]::after { background: var(--brand); }

/* El foco debe verse aunque la pestaña no esté activa */
.tabs__tab:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

.tabs__icon {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: none;
}
/* Los iconos Liquid Glass son vidrio CLARO: sobre una superficie clara no se
   leerían. El disco sólido del color de la página les da el contraste, igual
   que hace .icon-tile en el resto del sitio. No se usa ningún filtro. */
.tabs__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand);
  opacity: .5;
  transition: opacity var(--duration) var(--ease);
}
.tabs__tab:hover .tabs__icon::before { opacity: .72; }
.tabs__tab[aria-selected="true"] .tabs__icon::before { opacity: 1; }
.tabs__icon .icon-img,
.tabs__icon .glyph { position: relative; z-index: 1; }

/* Pistas de desplazamiento cuando la fila no cabe */
.tabs[data-scroll-start="true"] .tabs__bar,
.tabs[data-scroll-end="true"] .tabs__bar { --hint: 1; }
.tabs__bar::before {
  content: "";
  position: absolute;
  inset-block: 0 2px;
  inset-inline-end: 0;
  inline-size: 3rem;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--color-background));
  transition: opacity var(--duration) var(--ease);
  z-index: 1;
}
.tabs[data-scroll-end="true"] .tabs__bar::before { opacity: 1; }
.section--tint .tabs__bar::before { background: linear-gradient(90deg, transparent, var(--color-background-2)); }
.section--surface .tabs__bar::before { background: linear-gradient(90deg, transparent, var(--color-surface)); }

/* --- Panel --- */
/* --------------------------------------------------------------------------
   Alto homogéneo de la columna de imagen
   --------------------------------------------------------------------------
   Las cuatro mini landings comparten esta sección, así que su imagen mide lo
   mismo en todas: una caja de alto fijo donde cada captura se acomoda con la
   proporción que tenga. Sin esto la banda medía lo que midiera el archivo
   —de 297 px a 416 px según la solución y la pestaña—, de modo que la página
   daba un salto al cambiar de pestaña y las cuatro landings no coincidían.

   Cada imagen conserva su `fit`: las capturas y los mockups (`contain`) se
   ven enteras y centradas dentro de la caja, y las fotografías (`cover`) la
   llenan y se recortan. Es el único número que hay que tocar si algún día la
   sección tiene que crecer o encoger.
   -------------------------------------------------------------------------- */
.tabs__panel .media-band > figure {
  block-size: var(--tab-media-h, 26rem);
  /* Fila que ocupa toda la caja: así la imagen puede estirarse hasta el alto
     del contenedor sin depender de un porcentaje, que aquí sería circular. */
  grid-auto-rows: 1fr;
  align-content: stretch;
}
.tabs__panel .media-band > figure > .media,
.tabs__panel .media-band > figure > .media-placeholder {
  align-self: stretch;
  justify-self: stretch;
  inline-size: 100%;
  block-size: auto;
  max-block-size: none;
  min-block-size: 0;
  aspect-ratio: auto;
}
@media (max-width: 880px) {
  /* Apilado, la imagen ya no tiene que igualar a la columna de texto. */
  .tabs__panel .media-band > figure { --tab-media-h: 17rem; }
}

.tabs__panel:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 6px;
  border-radius: var(--radius-lg);
}
.tabs__panel[hidden] { display: none !important; }

/* Entrada breve, sin desplazamientos que muevan el layout */
.tabs__panel.is-entering { animation: tab-in .26s var(--ease) both; }
@keyframes tab-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tabs__panel.is-entering { animation: none; }
  .tabs__list { scroll-behavior: auto; }
}

/* La cifra y su etiqueta forman un bloque único y accesible */
.metric__figure { display: grid; gap: var(--space-2); margin: 0; }
.metric__figure .metric__value { display: flex; align-items: baseline; gap: .3rem; }

/* Los archivos originales son blancos. Se tiñen de oscuro en el tema claro
   para mostrarlos directamente, sin tarjetas ni contenedores visibles. */
.logo-carousel__item img {
  filter: brightness(0) saturate(100%);
  opacity: .76;
  transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.logo-carousel__item:hover img,
.logo-carousel__item:focus-within img {
  opacity: 1;
  transform: scale(1.03);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-carousel__item img { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] .logo-carousel__item img { filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .logo-carousel__item img { transition: none; }
}

/* Selector de tema dentro del menú móvil: botón de ancho completo con texto */
.mobile-nav .theme-toggle { justify-content: center; gap: .5rem; }
.mobile-nav .theme-toggle .theme-toggle__sun,
.mobile-nav .theme-toggle .theme-toggle__moon { display: none; }
:root:not([data-theme="dark"]) .mobile-nav .theme-toggle .theme-toggle__sun { display: grid; }
:root[data-theme="dark"] .mobile-nav .theme-toggle .theme-toggle__moon { display: grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mobile-nav .theme-toggle .theme-toggle__sun { display: none; }
  :root:not([data-theme="light"]) .mobile-nav .theme-toggle .theme-toggle__moon { display: grid; }
}

/* --------------------------------------------------------------------------
   Separación entre secciones consecutivas
   --------------------------------------------------------------------------
   La banda alterna no se apoya sólo en el color: un filete superior e inferior
   marca el límite de forma explícita, de modo que la separación también se
   percibe en pantallas con poco contraste o en escala de grises.
   -------------------------------------------------------------------------- */
.section--tint {
  border-block: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

/* --------------------------------------------------------------------------
   Decoraciones de sección
   -------------------------------------------------------------------------- */

/* --- Figura apoyada en el borde inferior --------------------------------- */
/* Una figura centrada al pie de la sección, sobre la línea que la cierra. El
   relleno inferior se amplía para que nunca toque las tarjetas de arriba. */
.section--figure-bottom {
  position: relative;

  /* ANCHO DE LA IMAGEN — es el único valor que hay que tocar.
     El hueco que se reserva abajo se deduce solo a partir de él y de la
     proporción del archivo, así que no hay un segundo número que ajustar. */
  --figure-bottom-w: min(38rem, 100% - 2 * var(--space-5));
  --figure-bottom-ratio: 1583 / 177;     /* ancho / alto de tarjetas-aceptadas.svg */

  /* Separación entre la figura y el filete que cierra la sección. Una tira
     horizontal de logotipos necesita aire; un dispositivo recortado que deba
     apoyarse en la línea se declara con 0. */
  --figure-bottom-gap: var(--space-6);

  padding-block-end: calc(var(--section-y) + var(--figure-bottom-gap)
                          + var(--figure-bottom-w) / (var(--figure-bottom-ratio)));
}
.section-figure--bottom {
  position: absolute;
  inset-block-end: var(--figure-bottom-gap);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: var(--figure-bottom-w);
  margin: 0;
  line-height: 0;       /* sin hueco de línea base bajo la imagen */
  pointer-events: none;
}
.section-figure--bottom .media {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Si alguna vez el archivo no cuadra con la proporción declarada, el sobrante
     de `contain` se va arriba y la imagen sigue tocando el borde inferior. */
  object-position: bottom center;
}
@media (max-width: 700px) {
  .section--figure-bottom { --figure-bottom-w: min(20rem, 100% - 2 * var(--space-4)); }
}

/* --- Marca de agua del isotipo ------------------------------------------- */
/* El PNG de origen es monocromo, así que se usa como máscara y el color lo
   pone un token: así la marca de agua funciona igual en claro y en oscuro sin
   recolorear ningún logotipo de marca. */
.section--rings {
  position: relative;
  isolation: isolate;
}
.section--rings::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: clamp(11rem, 24vw, 22rem);
  aspect-ratio: 639 / 674;
  background: var(--rings-ink);
  -webkit-mask: url("../assets/images/anillos-abitmedia.webp") no-repeat right bottom / contain;
  mask: url("../assets/images/anillos-abitmedia.webp") no-repeat right bottom / contain;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   CTA de las mini landings — única excepción: color por servicio
   --------------------------------------------------------------------------
   Conserva exactamente la misma forma, tamaño, sombra, transición y elevación
   del CTA global. Sólo cambian fondo, borde y color de texto. La regla se
   limita a <main>, por lo que el CTA del header permanece ámbar.
   -------------------------------------------------------------------------- */
[data-solution] main .btn--cta {
  /* El halo sale del propio color del servicio. Si ese color necesita un halo
     hecho a mano —porque aclararlo con blanco lo deslava—, la solución declara
     --cta-halo-a/b/c y esos mandan. */
  --cta-glow-a: var(--cta-halo-a, var(--cta-color));
  --cta-glow-b: var(--cta-halo-b, color-mix(in srgb, var(--cta-color) 72%, #FFFFFF));
  --cta-glow-c: var(--cta-halo-c, var(--cta-color-deep));
  background: var(--cta-color);
  border-color: transparent;
  color: var(--cta-on);
  box-shadow: none;
}
[data-solution] main .btn--cta:hover {
  background: var(--cta-color-deep);
  border-color: transparent;
  color: var(--cta-on);
  box-shadow: none;
}