@charset "UTF-8";
/* normalize / reset base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--light, #FFFFFF);
}

body {
  position: relative;
  min-height: 100%;
  color: var(--trust, #002856);
  font-family: var(--font-delight, "Delight", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* quito márgenes por defecto de los bloques de texto */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  font-weight: normal;
}

/* las listas que uso para navegación o estructura van sin estilos de lista */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* las imágenes nunca desbordan su contenedor */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* los enlaces heredan el color y no llevan subrayado por defecto */
a {
  color: inherit;
  text-decoration: none;
}

/* los controles heredan la tipografía en lugar de la del navegador */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* respeto la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* utilidad para texto solo accesible a lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ::selection {
  background-color: var(--nocturne);
  color: var(--cream);
} */
/*  header */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
:root {
  --header-height: 4.5rem;
  --header-inset: 0rem;
}

.header {
  position: fixed;
  top: var(--header-inset);
  left: var(--header-inset);
  right: var(--header-inset);
  z-index: var(--z-header);
}

/* Oculto por CSS para evitar flash antes de que revealHeader (header.js)
   lo anime. Sin JS (html.no-js) no aplica y el header se ve siempre. */
.js .header {
  opacity: 0;
}

.header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: var(--header-height);
  padding: var(--space-12) var(--page-margin);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Logo: isotipo en mobile, logotipo completo desde tablet */
.header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-img--mark {
  display: block;
}

.header__logo-img--full {
  display: none;
}

/* Acciones: Log in / Demo / Menú */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.header__login {
  font-size: var(--fs-18);
  font-weight: var(--weight-semibold);
  color: var(--trust, #002856);
  white-space: nowrap;
  padding-right: var(--space-12);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: fit-content;
  border-radius: 12px;
  font-size: var(--fs-18);
  font-weight: var(--weight-semibold);
  letter-spacing: 2%;
  padding: var(--space-16) var(--space-20);
  white-space: nowrap;
}

.btn--accent {
  background: var(--accent, #F18A00);
  color: var(--trust, #002856);
}

/* Variante outline: borde+texto trust sobre fondo transparente. Primer uso
   en subservices.css, definida aquí junto al resto de variantes de .btn. */
.btn--outline {
  background: transparent;
  border: 2px solid var(--trust, #002856);
  color: var(--trust, #002856);
}

.header__toggle {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  background: var(--trust, #002856);
  color: var(--light, #ffffff);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.header__toggle-label {
  display: none;
  font-size: var(--fs-18);
  font-weight: var(--weight-semibold);
}

.header__toggle-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
  flex-shrink: 0;
}

.header__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}

.header__toggle-bar:nth-child(1) {
  top: 0;
}

.header__toggle-bar:nth-child(2) {
  top: 5px;
}

.header__toggle-bar:nth-child(3) {
  top: 10px;
}

.header__toggle.is-open .header__toggle-bar:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.header__toggle.is-open .header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.header__toggle.is-open .header__toggle-bar:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Overlay de navegación — siempre a pantalla completa, con transición */
.header-nav[hidden] {
  display: none;
}

.header-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  padding: calc(var(--header-height) + var(--header-inset) + var(--space-24)) var(--page-margin) var(--space-32);
  background: var(--light, #ffffff);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.header-nav.is-open {
  opacity: 1;
}

/* Solo overflow:hidden, sin height:100%: forzarlo reseteaba el scroll a 0
   y la página saltaba arriba justo antes de abrirse el menú. */
html.has-nav-open,
html.has-nav-open body {
  overflow: hidden;
}

.header-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.header-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.header-nav__link {
  font-size: var(--fs-32);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
  line-height: var(--lh-110);
}

.header-nav__list.has-open-item .header-nav__item:not(.is-open) .header-nav__link {
  opacity: 0.35;
}

.header-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--trust, #002856);
  padding: var(--space-4);
  cursor: pointer;
}

.header-nav__toggle-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.header-nav__toggle-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.header-nav__toggle-bar--h {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}

.header-nav__toggle-bar--v {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
}

.header-nav__toggle[aria-expanded=true] .header-nav__toggle-bar--v {
  transform: translate(-50%, -50%) rotate(90deg);
}

.header-nav__submenu-panel {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}

.header-nav__item.is-open .header-nav__submenu-panel {
  grid-template-rows: 1fr;
}

.header-nav__submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: 0;
  padding-left: var(--space-16);
  overflow: hidden;
  min-height: 0;
  transition: margin-top 0.3s ease;
}

/* El margin-top solo se aplica con el submenú abierto, para no descuadrar
   el gap al colapsar el panel a 0. */
.header-nav__item.is-open .header-nav__submenu {
  margin-top: var(--space-16);
}

.header-nav__sublink {
  font-size: var(--fs-24);
  font-weight: var(--weight-regular);
  color: var(--trust, #002856);
}

/* Meta: contacto / social / idioma */
.header-nav__meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-size: var(--fs-14);
}

.header-nav__contact,
.header-nav__social {
  display: none;
  flex-direction: column;
}

.header-nav__contact a,
.header-nav__social a {
  color: var(--trust, #002856);
}

.header-nav__lang {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--trust, #002856);
}

.header-nav__lang-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-20);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.header-nav__lang-btn.is-active {
  opacity: 1;
}

/* ==========================================================================
   TABLET (>= 768px) — mismo comportamiento que mobile (acordeón + overlay
   full screen), solo cambian tamaños/paddings
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --header-height: 5rem;
    --header-inset: var(--space-24);
  }
  .header {
    padding: 0 var(--space-24);
  }
  .header__bar {
    border-radius: var(--space-16);
    padding: var(--space-12);
  }
  .header__logo {
    padding: var(--space-4);
  }
  .header__logo-img--mark {
    display: none;
  }
  .header__logo-img--full {
    display: block;
  }
  .header__toggle-label {
    display: inline;
  }
  .header__toggle {
    width: auto;
    height: auto;
    padding: var(--space-16) var(--space-24);
  }
  .btn {
    padding: var(--space-16) var(--space-24);
    height: auto;
  }
  .header-nav {
    padding: calc(var(--header-height) + var(--header-inset) + var(--space-40)) var(--page-margin) var(--space-32);
  }
  .header-nav__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .header-nav__contact,
  .header-nav__social {
    display: flex;
    gap: var(--space-8);
    font-size: var(--fs-18);
    font-weight: var(--weight-medium);
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px) — submenú por hover, posicionado junto a su enlace
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --header-inset: var(--space-32);
  }
  .header-nav__toggle {
    display: none;
  }
  .header {
    padding: 0 var(--space-32);
  }
  /* Sin esto el <li> se estira al 100% (flex column por defecto) y el
     submenú queda fuera de pantalla en vez de junto al texto. */
  .header-nav__list {
    align-items: flex-start;
  }
  /* relative en el <li> (no en el row): el submenú es hermano del row, y
     el absolute necesita anclarse aquí para no afectar al resto de opciones. */
  .header-nav__item {
    position: relative;
  }
  .header-nav__link {
    font-size: var(--fs-56);
    transition: opacity 0.2s ease;
  }
  .header-nav__submenu-panel {
    position: absolute;
    top: 6px;
    left: 540px;
    min-width: 34rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .header-nav__submenu {
    margin-top: 0;
    padding-left: 0;
    overflow: visible;
  }
  .header-nav__sublink {
    font-size: var(--fs-32);
  }
  /* Visibilidad controlada por JS ("is-open", mouseenter/focusin) en vez
     de :hover puro, para poder retrasar el cierre al cruzar hasta el submenú. */
  .header-nav__item.is-open .header-nav__submenu-panel {
    opacity: 1;
    visibility: visible;
  }
  /* --------------------------------------------------------------------
     Hover — solo en desktop
     -------------------------------------------------------------------- */
  .header__login {
    transition: color 0.2s ease;
  }
  .header__login:hover {
    color: var(--control, #1C5EA5);
  }
  .btn {
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .btn--accent:hover {
    background: var(--control, #1C5EA5);
    color: var(--light, #ffffff);
  }
  .btn--outline:hover {
    background: var(--trust, #002856);
    border-color: var(--trust, #002856);
    color: var(--light, #ffffff);
  }
  .header__toggle {
    transition: background-color 0.2s ease;
  }
  .header__toggle:hover {
    background: var(--control, #1C5EA5);
  }
  /* Línea de arriba sube y la de abajo baja, separándose. Solo con el menú
     cerrado: abierto ya forma la aspa. */
  .header__toggle:not(.is-open):hover .header__toggle-bar:nth-child(1) {
    top: -2px;
  }
  .header__toggle:not(.is-open):hover .header__toggle-bar:nth-child(3) {
    top: 12px;
  }
  .header-nav__sublink {
    transition: color 0.2s ease;
  }
  .header-nav__sublink:hover {
    color: var(--control, #1C5EA5);
  }
  .header-nav__contact a,
  .header-nav__social a {
    transition: color 0.2s ease;
  }
  .header-nav__contact a:hover,
  .header-nav__social a:hover {
    color: var(--control, #1C5EA5);
  }
  .header-nav__lang-btn {
    transition: color 0.2s ease, opacity 0.2s ease;
  }
  .header-nav__lang-btn:hover {
    color: var(--control, #1C5EA5);
  }
}
/*  footer */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.footer {
  background: var(--light, #ffffff);
  padding: var(--space-48) var(--page-margin) var(--space-32);
}

/* En el blog el footer lleva --clarity (body.page-blog) para verse como
   una superficie continua con blog-list/newsletter. */
.page-blog .footer {
  background: var(--clarity, #EBF5FF);
}

/* Logo + claim */
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  text-align: center;
}

.footer__logo {
  display: inline-flex;
}

.footer__logo-img {
  width: 216px;
  height: auto;
}

.footer__claim {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-32);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-120);
}

.footer__claim-label {
  color: var(--trust, #002856);
}

.footer__claim-highlight {
  color: var(--accent, #F18A00);
}

/* Divisores */
.footer__divider {
  display: block;
  border: 0;
  height: 1px;
  background: var(--muted, rgba(51, 51, 51, 0.1882352941));
  margin: var(--space-32) 0;
}

/* 2 columnas en mobile/tablet, 3 en desktop — el orden del JSON ya coincide
   con la colocación deseada en ambos casos. */
.footer__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-16);
  row-gap: var(--space-32);
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Contacto y Social (5ª y 6ª columna): a ancho completo solo en mobile,
   para que el email no se corte en dos líneas */
.footer__column:nth-child(5),
.footer__column:nth-child(6) {
  grid-column: 1/-1;
}

.footer__column-title {
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: var(--trust, #002856);
  opacity: 0.5;
}

.footer__column-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.footer__link {
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
  word-break: break-word;
}

/* Legales + copyright */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12) var(--space-24);
}

.footer__legal-link {
  font-size: var(--fs-14);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
}

.footer__copyright {
  font-size: var(--fs-14);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .footer {
    padding: var(--space-64) var(--page-margin) var(--space-40);
  }
  .footer__top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-16);
    text-align: left;
  }
  /* A partir de tablet vuelven a su columna normal dentro del grid de 2 */
  .footer__column:nth-child(5),
  .footer__column:nth-child(6) {
    grid-column: auto;
  }
  .footer__legal {
    justify-content: center;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .footer {
    padding: var(--space-80) var(--page-margin) var(--space-40);
  }
  .footer__top {
    grid-template-columns: repeat(3, 1fr);
    align-items: self-start;
    column-gap: var(--space-24);
  }
  .footer__logo-img {
    width: 196px;
    padding-top: var(--space-12);
  }
  .footer__claim {
    font-size: var(--fs-48);
    grid-column: span 2;
  }
  /* 3 columnas → 2 filas de 3, en el mismo orden del JSON */
  .footer__columns {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-24);
  }
  /* Copyright a la izquierda, legales a la derecha, en una sola fila */
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .footer__copyright {
    order: 1;
  }
  .footer__legal {
    order: 2;
    justify-content: flex-end;
  }
  /* --------------------------------------------------------------------
     Hover — solo en desktop
     -------------------------------------------------------------------- */
  .footer__link {
    transition: color 0.2s ease;
  }
  .footer__link:hover {
    color: var(--control, #1C5EA5);
  }
  /* Título de columna como link: gana opacidad completa en hover para
     distinguirse de los títulos no clicables (siempre al 50%). */
  a.footer__column-title {
    transition: color 0.2s ease, opacity 0.2s ease;
  }
  a.footer__column-title:hover {
    color: var(--control, #1C5EA5);
    opacity: 1;
  }
  .footer__legal-link {
    transition: color 0.2s ease;
  }
  .footer__legal-link:hover {
    color: var(--control, #1C5EA5);
  }
}
/*  hero (home) */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
/* Flecha reutilizada en el CTA del hero y en las cards de persona.
   width/height en "em" para heredar el tamaño del texto que la acompaña. */
.icon-arrow {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* A sangre en mobile: navy y cards no tienen radius propio, se recortan
   con el overflow:hidden del contenedor. */
.hero {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  margin-top: var(--space-104);
}

/* Ocultos por CSS para evitar flash antes de que hero.js los anime
   (mismo mecanismo que .js .header, ver header.css). */
.js .hero,
.js .hero__intro,
.js [data-hero-card] {
  opacity: 0;
}

.hero__intro {
  background: var(--trust, #002856);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/* Eyebrow + título agrupados: solo 2 hijos directos en .hero__intro
   (head/foot), para repartir espacio con justify-content sin separarlos. */
.hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.hero__eyebrow {
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  color: var(--light, #ffffff);
  letter-spacing: 2%;
}

.hero__title {
  font-size: var(--fs-40);
  font-weight: var(--weight-medium);
  line-height: var(--lh-110);
  color: var(--light, #ffffff);
  letter-spacing: 1%;
}

.hero__title-accent {
  color: var(--accent, #F18A00);
}

/* text y cta juntos en .hero__foot: en desktop se empuja el bloque entero
   al final de .hero__intro con justify-content: space-between. */
.hero__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.hero__text {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--light, #ffffff);
  letter-spacing: 2%;
}

.hero__cta {
  align-self: flex-start;
  gap: var(--space-8);
}

/* En mobile, 3 filas dentro del mismo bloque claro, sin radius propio. */
.hero__cards {
  display: flex;
  flex-direction: column;
  background: var(--clarity, #EBF5FF);
}

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  padding: var(--space-40);
  color: var(--trust, #002856);
}

.hero-card__default {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-card + .hero-card {
  border-top: 2px solid var(--light, #ffffff);
}

.hero-card__icon {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  border: 2px solid var(--trust, #002856);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Grosor del trazo en una variable: se puede ajustar por breakpoint sin
   tocar los SVG de los iconos. */
.hero-card__icon-svg {
  width: 44px;
  height: 44px;
  stroke-width: var(--hero-icon-stroke, 1.5);
}

.hero-card__row {
  display: flex;
  flex-direction: row;
  gap: var(--space-8);
  align-items: baseline;
}

.hero-card__label {
  font-size: var(--fs-24);
  font-weight: var(--weight-medium);
}

/* El contenido expandido (hover) solo existe visualmente en desktop */
.hero-card__hover {
  display: none;
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .hero {
    border-radius: 0;
    overflow: visible;
    margin: var(--space-140) var(--page-margin) var(--space-80) var(--page-margin);
    gap: var(--space-20);
  }
  .hero__intro {
    border-radius: 16px;
    padding: var(--space-48) var(--space-40);
  }
  .hero__title {
    font-size: var(--fs-56);
    max-width: 650px;
  }
  .hero__text {
    font-size: var(--fs-18);
    max-width: 650px;
  }
  .hero__cards {
    flex-direction: row;
    background: transparent;
    gap: var(--space-20);
  }
  .hero-card {
    flex: 1;
    /* Sin min-width:0 el item no se encoge por debajo de su contenido
       (icono 172px + padding) y desborda el contenedor con 3 en fila. */
    min-width: 0;
    border-radius: 16px;
    background: var(--clarity, #EBF5FF);
  }
  .hero-card + .hero-card {
    border-top: 0;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .hero {
    flex-direction: row;
    align-items: stretch;
    margin: var(--space-140) var(--page-margin) var(--space-32) var(--page-margin);
  }
  .hero__intro {
    flex: 1.7;
    padding: var(--space-48);
    justify-content: space-between;
  }
  .hero__eyebrow {
    font-size: var(--fs-18);
  }
  .hero__title {
    font-size: var(--fs-64);
    max-width: 90%;
  }
  .hero__text {
    font-size: var(--fs-20);
    max-width: 80%;
  }
  .hero-card__row {
    display: none;
  }
  .hero__cards {
    flex: 1;
    flex-direction: column;
  }
  .hero-card {
    justify-content: center;
    padding: var(--space-40);
  }
  .hero-card:hover .hero-card__default {
    visibility: hidden;
  }
  .hero-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-40);
    background: var(--accent, #F18A00);
    color: var(--trust, #002856);
    text-align: left;
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  }
  .hero-card:hover .hero-card__hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease;
  }
  .hero-card__hover-title,
  .hero-card__hover-text,
  .hero-card__hover-cta {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .hero-card:hover .hero-card__hover-title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 0.03s;
  }
  .hero-card:hover .hero-card__hover-text {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 0.08s;
  }
  .hero-card:hover .hero-card__hover-cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 0.13s;
  }
  .hero-card__hover-title {
    font-size: var(--fs-48);
    line-height: var(--lh-110);
    font-weight: var(--weight-medium);
    color: var(--trust, #002856);
  }
  .hero-card__hover-text {
    font-size: var(--fs-20);
    font-weight: var(--weight-regular);
    line-height: var(--lh-140);
    letter-spacing: 2%;
    color: var(--trust, #002856);
  }
  .hero-card__hover-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    background: var(--trust, #002856);
    color: var(--light, #ffffff);
    font-size: var(--fs-18);
    font-weight: var(--weight-semibold);
    border-radius: 12px;
    padding: var(--space-20) var(--space-24);
    margin-top: var(--space-20);
    transition: background-color 0.2s ease;
  }
  .hero-card__hover-cta:hover {
    background: var(--control, #1C5EA5);
  }
  .hero__cta:hover .icon-arrow,
  .hero-card__hover-cta:hover .icon-arrow {
    transform: translateX(4px);
  }
}
/* about-hero (Quiénes somos): título + imagen con dos notas. En mobile/tablet
   apiladas debajo de la imagen; en desktop se recortan con clip-path SVG
   (ver about-hero.njk) sobre una silueta con muesca — detalle en la media
   query de 1440px. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.about-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-104) var(--page-margin) var(--space-64) var(--page-margin);
}

/* Ocultos por CSS para evitar flash antes de que about-hero.js los anime
   (mismo mecanismo que .js .header, ver header.css). Scopeado a .about-hero
   porque estas clases se reutilizan en .service-hero, que no las inicializa. */
.js .about-hero .about-hero__title,
.js .about-hero .about-hero__figure,
.js .about-hero .about-hero__note--tech,
.js .about-hero .about-hero__note--since {
  opacity: 0;
}

/* Misma escala tipográfica que .hero__title (home): es también un H1 de
   cabecera, aunque aquí vaya sobre fondo claro y sin tarjeta navy. */
.about-hero__title {
  font-size: var(--fs-40);
  font-weight: var(--weight-medium);
  line-height: var(--lh-110);
  letter-spacing: 1%;
}

.about-hero__title-dark {
  color: var(--trust, #002856);
}

.about-hero__title-accent {
  color: var(--accent, #F18A00);
}

/* En mobile/tablet es una columna normal: imagen + notas apiladas. En
   desktop pasa a ser el contexto de posicionamiento de las notas (ver
   media query de 1440px). */
.about-hero__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about-hero__figure {
  margin: 0;
  aspect-ratio: 16/9;
  border-radius: 0;
  overflow: hidden;
  border-radius: 16px;
}

.about-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__note {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
  letter-spacing: 2%;
}

.about-hero__note strong {
  font-weight: var(--weight-semibold);
}

/* Envuelve las notas aparte de la figura para que el grid/max-width de
   tablet no afecte a la imagen (sigue a ancho completo). */
.about-hero__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .about-hero {
    padding: var(--space-140) var(--page-margin) var(--space-80) var(--page-margin);
    gap: var(--space-40);
  }
  .about-hero__media {
    gap: var(--space-48);
  }
  .about-hero__title {
    font-size: var(--fs-56);
    max-width: 700px;
  }
  .about-hero__note {
    font-size: var(--fs-20);
  }
  /* Grid de 3 columnas: "since" ocupa 1-2 y "tech" 2-3, así al compartir la
     columna 2 no caben en la misma fila y el grid empuja "tech" abajo — sale
     el mosaico sin márgenes fijos. Sustituido por el layout con muesca a
     partir de 1440px. */
  .about-hero__notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-56) var(--space-40);
    max-width: 1024px;
    margin-inline: auto;
  }
  .about-hero__note--since {
    grid-column: 1/3;
  }
  .about-hero__note--tech {
    grid-column: 2/4;
  }
}
/* ==========================================================================
   DESKTOP (>= 1440px)
   Breakpoint propio del módulo: entre 1024 y 1439px el texto no cabe en la
   muesca. Por debajo se usa el layout de tablet (imagen + notas apiladas).
   ========================================================================== */
@media (min-width: 1440px) {
  .about-hero {
    padding: var(--space-140) var(--page-margin) var(--space-104) var(--page-margin);
    gap: var(--space-48);
  }
  .about-hero__title {
    font-size: var(--fs-64);
    max-width: 900px;
  }
  /* Los valores (noteW, notchH, radiusPx...) se calculan en about-hero.njk
     y llegan por style="" inline; no tocar números aquí.

     Silueta con SVG clip-path (path único con arco en los 8 vértices, no
     <rect>): las 2 esquinas cóncavas de las muescas no se pueden redondear
     con rectángulos. rx/ry calculados para un ancho de referencia de 1400px
     (imagen 21:9); recalcular con esa fórmula si el contenido real se aleja
     mucho. rx ≠ ry para compensar el aspect ratio y que el radio salga
     circular, no elíptico. */
  .about-hero__media {
    display: block;
    position: relative;
  }
  /* Las notas pasan a absolute; se anula el grid/max-width de tablet por
     claridad aunque ya no tenga efecto. */
  .about-hero__notes {
    display: block;
    max-width: none;
    margin-inline: 0;
  }
  .about-hero__image {
    height: 100%;
    object-fit: cover;
    clip-path: url(#about-hero-mask);
  }
  /* flex column sobre el wrapper (no sobre el <p>): centra el texto
     verticalmente sin convertir el <p> con <strong> mixto en flex container,
     que rompería el párrafo en items sueltos. */
  .about-hero__note--tech,
  .about-hero__note--since {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .about-hero__note--tech {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--note-w);
    height: var(--notch-h);
    padding: var(--space-32);
  }
  .about-hero__note--since {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--note-w);
    height: var(--notch-h);
    padding: var(--space-32);
  }
}
/* section-head — bloque reutilizable de eyebrow + título (+ descripción
   opcional), común a los módulos secundarios (no al hero, que es un h1 a
   otra escala). Cada módulo aporta su propio layout desde su CSS; aquí
   solo lo idéntico en todos: tamaños, pesos, gap y color base. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  letter-spacing: 2%;
  color: var(--trust, #002856);
}

.section-head__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #F18A00);
  flex-shrink: 0;
}

.section-head__title {
  font-size: var(--fs-36);
  font-weight: var(--weight-medium);
  line-height: var(--lh-110);
  letter-spacing: 1%;
}

.section-head__title-dark {
  color: var(--trust, #002856);
}

.section-head__title-accent {
  color: var(--accent, #F18A00);
}

/* Slot opcional para párrafo bajo el título; hereda el gap del flex column
   de .section-head sin margin propio. */
.section-head__description {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .section-head__eyebrow {
    font-size: var(--fs-20);
  }
  .section-head__title {
    font-size: var(--fs-48);
    max-width: 650px;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .section-head__title {
    font-size: var(--fs-56);
  }
}
/*  pain-points (home) */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.pain-points {
  padding: var(--space-64) var(--page-margin) var(--space-24) var(--page-margin);
  background: var(--light, #ffffff);
}

/* Tamaños/gap de eyebrow y título viven en section-head.css (compartido
   con otros módulos); aquí solo queda el layout propio de pain-points. */
/* Lista numerada: en mobile, número encima del texto */
.pain-points__list {
  margin-top: var(--space-64);
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* Opacidad (0.5 → 1) controlada por GSAP directamente, no por clase CSS. */
.pain-points__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  color: var(--trust, #002856);
}

.pain-points__item-number {
  font-size: var(--fs-48);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
}

.pain-points__item-text {
  font-size: var(--fs-28);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .pain-points {
    padding: var(--space-40) var(--page-margin);
  }
  .pain-points__intro {
    gap: var(--space-12);
  }
  .pain-points__list {
    gap: var(--space-80);
    padding: 0 0 0 var(--space-48);
  }
  .pain-points__item-number {
    flex-shrink: 0;
    width: 2.5rem;
  }
  .pain-points__item-number {
    font-size: var(--fs-56);
  }
  .pain-points__item-text {
    font-size: var(--fs-32);
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .pain-points {
    display: flex;
    align-items: flex-start;
    gap: var(--space-64);
  }
  /* Sticky: align-items:flex-start en el padre evita que .pain-points__intro
     se estire a la altura de la lista (si no, no habría margen para flotar).
     "top" deja hueco para el header fijo. */
  .pain-points__intro {
    flex: 1;
    position: sticky;
    top: calc(var(--header-height, 5rem) + var(--header-inset, 2rem) + var(--space-32));
  }
  /* margin-top retrasa la entrada de la lista para que no aparezca a la
     vez que el eyebrow/título. 80vh es un valor de partida, ajustar a ojo. */
  .pain-points__list {
    flex: 1;
    margin-top: 60vh;
    gap: var(--space-140);
    padding: 0;
  }
}
/* text-media (home) — módulo repetible de imagen + texto, alternando
   "imagePosition" (left/right) en desktop. En mobile/tablet siempre va
   apilado con la imagen arriba. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.text-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-24) var(--page-margin) var(--space-64) var(--page-margin);
}

/* Div-máscara: fuerza el 1:1 y recorta la imagen (object-fit) sin importar
   las proporciones reales del archivo que suba el cliente. */
.text-media__figure {
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
}

.text-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reutiliza .section-head (mismo tamaño/gap que pain-points), sin eyebrow. */
.text-media__content {
  gap: var(--space-24);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .text-media__figure {
    overflow: hidden;
    max-width: 640px;
  }
  .text-media {
    padding: var(--space-24) var(--page-margin) var(--space-80) var(--page-margin);
  }
  .text-media__content {
    max-width: 640px;
  }
  .section-head__description {
    font-size: var(--fs-20);
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .text-media {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-80);
    padding: var(--space-104) var(--page-margin) var(--space-104) var(--page-margin);
  }
  .text-media__figure,
  .text-media__content {
    flex: 1;
  }
  /* imagePosition: "right" → la imagen pasa a la segunda columna. Sin
     efecto en mobile/tablet (order solo se define aquí). */
  .text-media--reverse .text-media__figure {
    order: 2;
  }
}
/* chain-tabs (home): en mobile/tablet, lista vertical con los 4 paneles
   siempre abiertos. En desktop, acordeón horizontal — un panel abierto,
   el resto colapsados con la etiqueta en vertical (JS en chain-tabs.js). */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
/* A sangre en mobile (como el hero): el bloque navy toca los bordes,
   solo el título respeta el margen. Padding lateral normal desde tablet. */
.chain-tabs {
  padding: var(--space-24) 0 var(--space-32) 0;
}

.chain-tabs__head {
  padding: 0 var(--page-margin);
  margin-bottom: var(--space-40);
  text-align: center;
  align-items: center;
}

/* width:100% explícito: el padre tiene align-items:center, así que sin
   esto el contenedor se encogería a su contenido. */
.chain-tabs__panels {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--trust, #002856);
  border-radius: 20px;
  overflow: hidden;
}

/* La etiqueta vertical solo tiene sentido en el acordeón de desktop */
.chain-tabs__label {
  display: none;
}

.chain-tabs__panel {
  padding: var(--space-56) var(--space-32);
}

.chain-tabs__panel + .chain-tabs__panel {
  border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.chain-tabs__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  color: var(--light, #ffffff);
}

.chain-tabs__icon {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  border: 2px solid var(--trace, #EBF5FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chain-tabs__icon-svg {
  width: 80px;
  height: 80px;
  stroke-width: 2px;
}

/* vector-effect: non-scaling-stroke mantiene el trazo en 2px reales aunque
   el icono escale entre breakpoints. Mismo fix que service-hero.css. */
.chain-tabs__icon-svg path {
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.chain-tabs__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}

.chain-tabs__title {
  font-size: var(--fs-32);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
}

.chain-tabs__description {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
}

.chain-tabs__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-16);
}

.chain-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-18);
  font-weight: var(--weight-semibold);
  color: var(--light, #ffffff);
}

/* Variante "tags + cta" (producers): título+descripción en .chain-tabs__intro,
   tags+botón en .chain-tabs__list-wrap. En desktop, .chain-tabs__body--tags
   reparte el alto con space-between (ver media query 1024px). El botón
   reutiliza .btn.btn--accent.hero__cta sin CSS propio. */
.chain-tabs__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.chain-tabs__list-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  width: 100%;
}

/* Etiquetas de texto plano separadas por línea, sin flecha (no son
   enlaces) — en vez de la lista de enlaces de arriba. */
.chain-tabs__tags {
  display: flex;
  flex-direction: column;
}

.chain-tabs__tag {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--light, #ffffff);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .chain-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-40) var(--page-margin) var(--space-64) var(--page-margin);
  }
  /* El icono flota en la esquina inferior derecha (position:relative en
     el panel ancla ese absolute); el texto queda arriba a la izquierda. */
  .chain-tabs__panel {
    position: relative;
    min-height: 600px;
    padding: var(--space-48) var(--space-40);
  }
  .chain-tabs__panels {
    border-radius: 16px;
  }
  .chain-tabs__content {
    align-items: flex-start;
    text-align: left;
  }
  .chain-tabs__icon {
    position: absolute;
    right: var(--space-40);
    bottom: var(--space-48);
    width: 220px;
    height: 220px;
  }
  .chain-tabs__icon-svg {
    width: 120px;
    height: 120px;
  }
  .chain-tabs__title {
    font-size: var(--fs-40);
  }
  .chain-tabs__description {
    font-size: var(--fs-20);
  }
  .chain-tabs__link {
    font-size: var(--fs-20);
  }
  .chain-tabs__list-wrap {
    max-width: 50%;
  }
}
/* ==========================================================================
   TABLET, SOLO 768–1023px
   El icono es absolute, así que .chain-tabs__icon-wrap queda vacío pero
   seguía generando un gap fantasma como hijo flex. display:contents lo
   saca del cálculo de layout sin afectar al icono. Acotado a 1023px porque
   en desktop el wrapper vuelve a ser una caja real (50%, icono no absoluto).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .chain-tabs__icon-wrap {
    display: contents;
  }
  /* min-height no sirve como referencia para height:100% en el hijo, así
     que se encadena flex:1 (panel → content → body) en vez de porcentajes.
     :has() para no afectar a la variante de links (home). */
  .chain-tabs__panel:has(.chain-tabs__body--tags) {
    display: flex;
    flex-direction: column;
  }
  .chain-tabs__panel:has(.chain-tabs__body--tags) .chain-tabs__content {
    flex: 1;
  }
  .chain-tabs__body--tags {
    flex: 1;
    justify-content: space-between;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .chain-tabs__panels {
    background: var(--light, #FFFFFF);
  }
  .chain-tabs__head {
    margin-bottom: var(--space-64);
  }
  .chain-tabs__panels {
    flex-direction: row;
    align-items: stretch;
    max-width: 1600px;
  }
  /* Acordeón suave: todos los paneles comparten flex-basis (88px) y solo
     cambia flex-grow (0 colapsado, 1 activo), así transiciona sin saltos.
     overflow:hidden evita que el contenido del panel activo fuerce su
     tamaño mientras está colapsado. */
  .chain-tabs__panel {
    overflow: hidden;
    padding: 0;
    background: var(--trace, #D4E9FF);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: flex-grow 0.45s ease, background-color 0.2s ease;
  }
  .chain-tabs__panel + .chain-tabs__panel {
    border-top: 0;
    border-left: 2px solid var(--light, #ffffff);
  }
  /* Solo en paneles colapsados: el activo no tiene hover porque ya está
     abierto. */
  .chain-tabs__panel:not(.chain-tabs__panel--active):hover {
    background: var(--control, #1C5EA5);
  }
  .chain-tabs__panel:not(.chain-tabs__panel--active):hover .chain-tabs__label {
    color: var(--light, #ffffff);
  }
  .chain-tabs__panel:not(.chain-tabs__panel--active) {
    align-items: flex-start;
  }
  /* Etiqueta vertical siempre visible: única cosa visible en colapsado,
     franja lateral en activo. Sin rotate(180deg) para que se lea de
     arriba a abajo. */
  .chain-tabs__label {
    display: flex;
    writing-mode: vertical-rl;
    padding: var(--space-24) var(--space-20);
    white-space: nowrap;
    font-size: var(--fs-20);
    font-weight: var(--weight-medium);
    color: var(--trust, #002856);
    transition: color 0.2s ease;
  }
  /* position:absolute (ancla: panel, relative desde tablet) para que la
     aparición sea solo un cambio de opacidad. "left" deja sitio a la
     etiqueta (88px). IMPORTANTE: layout, tamaños y posiciones deben ser
     iguales en colapsado y activo — si dependieran de --active, se vería
     un salto al cerrar mientras la opacidad aún se desvanece. */
  .chain-tabs__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 88px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: var(--space-32) var(--space-40) var(--space-40) 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  /* Panel activo: ocupa el espacio restante, fondo navy. */
  .chain-tabs__panel--active {
    flex-grow: 1;
    min-height: 560px;
    background: var(--trust, #002856);
    cursor: default;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
  }
  .chain-tabs__panel--active .chain-tabs__label {
    color: var(--light, #ffffff);
  }
  /* Solo opacidad/visibilidad, nada de layout (ver comentario arriba). */
  .chain-tabs__panel--active .chain-tabs__content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease 0.25s, visibility 0s linear 0s;
  }
  /* 50% de ancho, centra el icono (align-self:stretch para altura completa).
     Va primero en el HTML (aparece arriba en mobile/tablet); en desktop
     pasa a la derecha vía order, sin tocar el DOM. */
  .chain-tabs__icon-wrap {
    flex: 0 0 50%;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
  }
  .chain-tabs__icon {
    position: static;
    width: 420px;
    height: 420px;
    flex-shrink: 0;
    border: 4px solid var(--trace, #EBF5FF);
  }
  .chain-tabs__icon-svg {
    width: 220px;
    height: 220px;
  }
  .chain-tabs__body {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* Solo la variante tags+cta se estira: el padre tiene align-items:
     flex-start, así que sin esto .chain-tabs__body mediría solo su
     contenido, no el alto completo del panel. */
  .chain-tabs__body--tags {
    align-self: stretch;
    justify-content: space-between;
  }
  .chain-tabs__title {
    font-size: var(--fs-36);
  }
  .chain-tabs__link {
    transition: color 0.2s ease;
  }
  .chain-tabs__link:hover {
    color: var(--accent, #F18A00);
  }
  .chain-tabs__link:hover .icon-arrow {
    transform: translateX(4px);
  }
}
/* cta-banner — foto de fondo con capa negra al 60%, eyebrow + título + botón
   encima. En mobile la altura la marca el contenido; en tablet/desktop pasa
   a aspect-ratio 16:9 fijo con el contenido en absolute. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* Absolute para que la imagen no condicione la altura del bloque; en mobile
   la marca .cta-banner__content, que sigue en flujo normal. */
/* border-radius propio (no solo el de .cta-banner): la animación de
   cta-banner.js anima su clip-path (máscara), no un transform, así que
   la imagen se queda fija a tamaño completo y solo crece la ventana que
   la recorta — el radio debe coincidir con el "round" de ese clip-path. */
.cta-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 16px;
  overflow: hidden;
}

/* Capa oscura sobre la foto con ::before en vez de un div extra en el HTML:
   negro puro al 60%, por encima de la imagen y por debajo del contenido. */
.cta-banner__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.cta-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* position:relative + z-index: sin esto .cta-banner__media (absolute)
   pintaría por encima aunque vaya antes en el DOM. */
.cta-banner__content {
  position: relative;
  z-index: 2;
  align-items: center;
  text-align: center;
  gap: var(--space-32);
  padding: var(--space-56) var(--space-32);
}

/* section-head está pensado para fondo claro; aquí el fondo es una foto
   oscurecida, así que eyebrow y "dark" pasan a blanco. El acento se queda
   en su naranja de siempre. */
.cta-banner .section-head__eyebrow,
.cta-banner .section-head__title-dark {
  color: var(--light, #ffffff);
}

.cta-banner__button {
  gap: var(--space-8);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .cta-banner {
    aspect-ratio: 16/9;
    margin: 0 var(--page-margin);
  }
  .cta-banner__content {
    position: absolute;
    inset: 0;
    justify-content: center;
    padding: var(--space-64) var(--page-margin);
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .cta-banner__content {
    padding: var(--space-80) var(--page-margin);
  }
  .cta-banner__button:hover .icon-arrow {
    transform: translateX(4px);
  }
}
/* text-reveal — texto que se va coloreando letra a letra según el scroll
   (--control al 50% → --control al 100% → --trust). Color inicial fijado
   por CSS: si el script no carga, el texto se ve igual, solo sin animar.
   Animación real en text-reveal.js. Módulo genérico, se repite en varias
   páginas, no solo home. */
.text-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-24);
  padding: var(--space-64) var(--page-margin);
}

.text-reveal__icon svg {
  display: block;
}

/* Un único h2 para todo el bloque, sin jerarquía título/descripción: es
   una frase continua. El espacio entre párrafos lo da .text-reveal__block. */
.text-reveal__text {
  font-size: var(--fs-32);
  font-weight: var(--weight-medium);
  line-height: var(--lh-130);
  max-width: 820px;
}

.text-reveal__block {
  display: block;
}

.text-reveal__block + .text-reveal__block {
  margin-top: var(--space-24);
}

/* Estado base; el JS anima este color hacia --control y luego --trust. */
.text-reveal__char {
  color: var(--control-35);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .text-reveal {
    padding: var(--space-80) var(--page-margin);
    gap: var(--space-32);
    line-height: var(--lh-120);
  }
  .text-reveal__text {
    font-size: var(--fs-48);
    max-width: 920px;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .text-reveal {
    padding: var(--space-180) var(--page-margin);
    gap: var(--space-40);
  }
  .text-reveal__text {
    font-size: var(--fs-56);
    line-height: var(--lh-110);
    max-width: 1040px;
  }
}
/* stats — panel navy con section-head (blanco/naranja) y tarjetas de
   cifra+descripción. Mobile: lista de 1 columna. Tablet: bento de 2. Desktop:
   intro en columna fija a la izquierda, tarjetas en grid de 2 a la derecha. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.stats {
  background: var(--trust, #002856);
  padding: var(--space-64) var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  border-radius: 20px;
}

.stats__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Fondo oscuro: el eyebrow y el "dark" del título (normalmente navy)
   pasan a blanco, igual que en cta-banner. El accent se queda naranja. */
.stats .section-head__eyebrow,
.stats .section-head__title-dark {
  color: var(--light, #ffffff);
}

/* "Food Experts" / "en cifras." son siempre 2 líneas fijas, no una frase
   que envuelva: cada parte va en su propio bloque. */
.stats__head .section-head__title-dark,
.stats__head .section-head__title-accent {
  display: block;
}

/* Punteado decorativo: solo se ve en desktop (ver esa media query). */
.stats__decoration {
  display: none;
}

.stats__decoration svg {
  display: block;
}

.stats__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.stats__card {
  background: var(--trace, #D4E9FF);
  border-radius: 20px;
  min-height: 200px;
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stats__value {
  font-size: var(--fs-40);
  font-weight: var(--weight-regular);
  line-height: var(--lh-110);
  color: var(--trust, #002856);
}

.stats__description {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .stats {
    margin: var(--space-40) var(--page-margin);
    border-radius: 16px;
    padding: var(--space-56) var(--space-40);
  }
  .stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
  }
  .stats__card {
    border-radius: 16px;
    min-height: 280px;
  }
  .stats__value {
    font-size: var(--fs-56);
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .stats {
    margin: var(--space-40) var(--page-margin) var(--space-24) var(--page-margin);
    padding: var(--space-80) var(--space-64);
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-64);
  }
  .stats__intro {
    flex: 0 0 380px;
    justify-content: space-between;
  }
  /* Se activa solo aquí: en mobile/tablet no cabe sin apretar el resto
     del contenido. */
  .stats__decoration {
    display: block;
  }
  .stats__decoration svg {
    width: 474px;
    height: auto;
  }
  .stats__grid {
    flex: 1;
    align-content: start;
  }
  .stats__value {
    font-size: var(--fs-72);
  }
  .stats__description {
    font-size: var(--fs-20);
  }
  .stats__card {
    min-height: 264px;
  }
}
/* values — section-head + tarjetas icono/nombre. En desktop, título y
   descripción pasan a ir en fila. Tarjetas: 1 columna mobile, 2 tablet
   (bento), 3 desktop. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.values {
  background: var(--light, #ffffff);
  padding: var(--space-64) var(--page-margin) var(--space-32) var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.values__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.values__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.values__card {
  background: var(--trace, #D4E9FF);
  border-radius: 20px;
  min-height: 300px;
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Caja fija de 120x120 con el icono centrado dentro: se puede sustituir
   sin tocar el layout de la tarjeta. */
.values__icon {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.values__icon svg {
  display: block;
  width: 100px;
  height: 100px;
}

.values__card-title {
  font-size: var(--fs-24);
  font-weight: var(--weight-regular);
  line-height: var(--lh-130);
  color: var(--trust, #002856);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .values {
    padding: var(--space-56) var(--page-margin) var(--space-64) var(--page-margin);
  }
  .values__card {
    border-radius: 16px;
  }
  /* flex + wrap en vez de grid: si la última fila no se completa,
     justify-content:center reparte el hueco en vez de pegar a la izquierda. */
  .values__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-24);
  }
  .values__card {
    flex: 0 1 calc((100% - var(--space-24)) / 2);
    min-height: 340px;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .values {
    padding: var(--space-104) var(--page-margin) var(--space-64) var(--page-margin);
  }
  /* Título y descripción en fila, cada uno a un lado. */
  .values__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-64);
  }
  .values__intro {
    max-width: 640px;
  }
  .values .section-head__description {
    max-width: 420px;
  }
  .values__card {
    flex-basis: calc((100% - 2 * var(--space-24)) / 3);
    min-height: 380px;
  }
  .values__card-title {
    font-size: var(--fs-32);
  }
}
/* user-hero — hero de páginas de perfil de usuario: foto con capa negra al
   45% (mismo mecanismo que cta-banner), eyebrow+título y descripción. En
   desktop se recorta un hueco (clip-path SVG, ver user-hero.njk) y la
   descripción pasa a vivir ahí en navy — mismo mecanismo que about-hero
   pero con un único hueco. Aspect-ratio por breakpoint: mobile sin ratio,
   tablet 6:4, desktop 16:9. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.user-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin-top: var(--space-104);
}

/* Nacen ocultos para evitar flash antes de la animación de user-hero.js
   (interruptor no-js/js en base.njk). */
.js .user-hero,
.js .user-hero__eyebrow,
.js .user-hero__title,
.js .user-hero__description {
  opacity: 0;
}

.user-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.user-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.user-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-140);
  padding: var(--space-48) var(--space-32);
  color: var(--light, #ffffff);
}

.user-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.user-hero__eyebrow {
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  color: var(--light, #ffffff);
  letter-spacing: 2%;
}

.user-hero__title {
  font-size: var(--fs-40);
  font-weight: var(--weight-medium);
  line-height: var(--lh-110);
  color: var(--light, #ffffff);
  letter-spacing: 1%;
}

.user-hero__description {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--light, #ffffff);
  letter-spacing: 2%;
}

.user-hero__description strong {
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .user-hero {
    aspect-ratio: 6/4;
    border-radius: 16px;
    margin: var(--space-140) var(--page-margin) 0 var(--page-margin);
  }
  .user-hero__content {
    position: absolute;
    inset: 0;
    justify-content: space-between;
    gap: 0;
    border-radius: 16px;
    padding: var(--space-48) var(--space-40);
  }
  .user-hero__title {
    font-size: var(--fs-56);
    max-width: 600px;
  }
  .user-hero__description {
    font-size: var(--fs-20);
    max-width: 650px;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   Layout general. El recorte de la imagen y la posición de la descripción
   dentro del hueco van en su propio breakpoint más abajo.
   ========================================================================== */
@media (min-width: 1024px) {
  .user-hero {
    aspect-ratio: 16/9;
    margin: var(--space-140) var(--page-margin) var(--space-32) var(--page-margin);
  }
  .user-hero__content {
    padding: var(--space-48);
  }
  .user-hero__title {
    font-size: var(--fs-64);
    max-width: 80%;
  }
}
/* ==========================================================================
   RECORTE DE LA IMAGEN (>= 1440px)
   Breakpoint propio, igual que about-hero: entre 1024 y 1439px la
   descripción no cabe bien en el hueco.
   ========================================================================== */
@media (min-width: 1440px) {
  /* Por debajo de 1440px la imagen es un rectángulo normal. */
  .user-hero__media {
    clip-path: url(#user-hero-mask);
  }
  /* La descripción sale del flujo y pasa al hueco inferior derecho
     (--note-w/--notch-h, ver user-hero.njk), de blanco a navy. flex column
     (no solo align-items) evita que el <p> con texto+strong se rompa en
     columnas si fuera flex-direction:row. */
  .user-hero__description {
    font-size: var(--fs-24);
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--note-w);
    height: var(--notch-h);
    max-width: none;
    padding: var(--space-40);
    color: var(--trust, #002856);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* advantages — "Ventajas": section-head + lista numerada de tarjetas, mismo
   lenguaje visual que values__card. Numeración vía contador CSS sobre el
   <ol> (no viene del dato, a diferencia de pain-points). En tablet/desktop
   efecto "escalera" (impares izq, pares dcha) dentro de un contenedor fijo
   de 920px, lo bastante estrecho para que las tarjetas se solapen un poco. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.advantages {
  padding: var(--space-32) var(--page-margin) var(--space-64) var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.advantages__list {
  list-style: none;
  counter-reset: advantages;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.advantages__item {
  counter-increment: advantages;
  background: var(--trace, #D4E9FF);
  border-radius: 20px;
  min-height: 300px;
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Círculo solo con borde, tono trust-80 (mismo neutro que text-reveal para
   el estado "sin leer"). */
.advantages__item-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--trust-80);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--fs-20);
  font-weight: var(--weight-semibold);
  color: var(--trust-80);
}

.advantages__item-number::before {
  content: counter(advantages);
}

.advantages__item-text {
  font-size: var(--fs-24);
  font-weight: var(--weight-regular);
  line-height: var(--lh-130);
  color: var(--trust, #002856);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .advantages {
    padding: var(--space-40) var(--page-margin);
  }
  .advantages__list {
    --advantages-card-w: 448px;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
    gap: var(--space-32);
  }
  .advantages__item {
    width: 100%;
    max-width: var(--advantages-card-w);
    min-height: 340px;
    border-radius: 16px;
  }
  /* Escalera: impares a la izquierda (align-self inicial), pares a la
     derecha. Solo tablet/desktop. */
  .advantages__item:nth-child(even) {
    align-self: flex-end;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .advantages {
    padding: var(--space-64) var(--page-margin);
    gap: var(--space-64);
  }
  .advantages__list {
    --advantages-card-w: 568px;
    gap: var(--space-40);
  }
  .advantages__item {
    min-height: 380px;
    padding: var(--space-40);
  }
  .advantages__item-text {
    font-size: var(--fs-32);
  }
}
/* faq — acordeón, una pregunta abierta a la vez. El alto del panel lo anima
   GSAP en faq.js (scrollHeight en px); se descartó grid-template-rows
   0fr↔1fr porque con párrafos que hacen wrap se veía un salto brusco.
   .faq__answer-wrap con height:0 es solo el estado de partida — sin JS,
   la pregunta abierta por defecto se ve igualmente entera vía
   .faq__item--active. */
/* Título en dos líneas, cada una de un color (a diferencia del resto de
   módulos, que resaltan una frase dentro de un párrafo corrido). Scopeado
   a .faq. */
.faq .section-head__title-dark,
.faq .section-head__title-accent {
  display: block;
}

/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.faq {
  padding: var(--space-32) var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.faq__item {
  background: var(--trace-40);
  border-radius: 20px;
  transition: background 0.4s ease;
}

.faq__item--active {
  background: var(--trace, #D4E9FF);
}

.faq__question-wrap {
  margin: 0;
}

.faq__question {
  width: 100%;
  padding: var(--space-24);
  background: none;
  border: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-20);
  font-weight: var(--weight-medium);
  line-height: var(--lh-130);
  color: var(--trust, #002856);
  cursor: pointer;
}

.faq__question-text {
  font-size: var(--fs-24);
}

/* Icono +/-: dos barras superpuestas; la vertical rota de 90° (+) a 0°
   (se superpone a la horizontal y forma "-"). */
.faq__icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.faq__icon-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq__icon-bar--v {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.faq__item--active .faq__icon-bar--v {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer-wrap {
  height: 0;
  overflow: hidden;
}

/* Estado de partida sin JS: la pregunta abierta por defecto se ve entera.
   En cuanto carga faq.js, GSAP toma el control del alto. */
.faq__item--active .faq__answer-wrap {
  height: auto;
}

.faq__item--active .faq__answer-inner {
  padding-bottom: var(--space-24);
}

.faq__answer {
  padding: 0 var(--space-24) 0 var(--space-24);
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
}

.faq__answer + .faq__answer {
  margin-top: var(--space-16);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .faq {
    padding: var(--space-32) var(--page-margin);
  }
  .faq__item {
    border-radius: 16px;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .faq {
    padding: var(--space-32) var(--page-margin) var(--space-80) var(--page-margin);
  }
  /* Único ancho fijo del módulo: la lista se estrecha y centra sola
     (mismo criterio que advantages). */
  .faq__list {
    max-width: 960px;
    margin-inline: auto;
  }
  .faq__question {
    font-size: var(--fs-24);
    padding: var(--space-32);
  }
  .faq__answer {
    padding: 0 var(--space-32) 0 var(--space-32);
    font-size: var(--fs-20);
  }
  .faq__item--active .faq__answer-inner {
    padding-bottom: var(--space-32);
  }
  /* Hover solo en desktop: en mobile/tablet no hay puntero persistente. */
  .faq__item:hover {
    background: var(--trace, #D4E9FF);
  }
}
/* service-hero — cabecera de páginas interiores de módulo. Dos bloques:
   1) .service-hero__head — tarjeta navy con icono, migas de pan y H1.
   2) Bloque de foto con muesca: reutiliza tal cual las clases de about-hero
      (.about-hero__media/__figure/__image/__notes/__note, ver about-hero.css
      para la técnica del clip-path) mismo breakpoint 1440px. Las muescas
      salen en esquinas opuestas (arriba-izq/abajo-dcha) vía el <path>
      reflejado a mano en service-hero.njk, sin transform en la imagen.
      Todo scopeado bajo .service-hero para no tocar el about-hero real. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.service-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-104) var(--page-margin) var(--space-4) var(--page-margin);
}

/* Nacen ocultos para evitar flash antes de la animación de service-hero.js
   (interruptor no-js/js en base.njk). */
.js .service-hero__head,
.js .service-hero__icon,
.js .service-hero__crumb,
.js .service-hero__title {
  opacity: 0;
}

/* Mismo mecanismo para la foto de about-hero: aquí los modificadores son
   "top-left"/"bottom-right" en vez de "tech"/"since", se oculta por la
   clase base .about-hero__note. */
.js .service-hero .about-hero__figure,
.js .service-hero .about-hero__note {
  opacity: 0;
}

.service-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-40);
  background: var(--trust, #002856);
  border-radius: 20px;
  padding: var(--space-48) var(--space-32);
}

.service-hero__icon {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 2px solid var(--trace, #D4E9FF);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* % en vez de px fijos: cada servicio trae su propio icono con viewBox
   distinto, así una sola regla vale para todos y escala sola con el
   tamaño de .service-hero__icon en cada breakpoint. */
.service-hero__icon svg {
  width: 55%;
  height: 55%;
}

/* Trazo fijo en 2px reales sea cual sea el tamaño del icono. Va al <path>,
   no al <svg>, porque una regla en el <svg> raíz no pisa el stroke-width
   que cada <path> ya trae. non-scaling-stroke evita que el trazo escale
   junto con el dibujo. Mismo fix que chain-tabs.css. */
.service-hero__icon svg path {
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.service-hero__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.service-hero__crumb {
  font-size: var(--fs-16);
  font-weight: var(--weight-regular);
  color: var(--light, #ffffff);
}

.service-hero__crumb a {
  color: inherit;
  text-decoration: none;
}

.service-hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-40);
  font-weight: var(--weight-medium);
  line-height: var(--lh-110);
  letter-spacing: 1%;
}

.service-hero__title-accent {
  color: var(--accent, #F18A00);
}

.service-hero__title-dark {
  color: var(--light, #ffffff);
}

/* ==========================================================================
   TABLET (>= 768px)
   Layout de escritorio: la tarjeta pasa a fila (icono a la derecha), la
   foto activa el recorte con muesca.
   ========================================================================== */
@media (min-width: 768px) {
  .service-hero {
    padding: var(--space-140) var(--page-margin) var(--space-80) var(--page-margin);
    gap: var(--space-32);
  }
  .service-hero__head {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    text-align: left;
    padding: var(--space-48);
    gap: var(--space-40);
    min-height: 400px;
    border-radius: 16px;
  }
  .service-hero__icon {
    order: 2;
    align-self: end;
    flex-shrink: 0;
  }
  .service-hero__info {
    order: 1;
    align-items: flex-start;
    justify-content: space-between;
  }
  .service-hero__title {
    font-size: var(--fs-56);
  }
  /* Mosaico de notas bajo la foto (768–1439px), mismo criterio que
     about-hero__note--since/--tech (ver about-hero.css), pero con
     modificadores propios porque about-hero.css no los define. */
  .service-hero .about-hero__note--top-left {
    grid-column: 1/3;
  }
  .service-hero .about-hero__note--bottom-right {
    grid-column: 2/4;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .service-hero {
    padding: var(--space-140) var(--page-margin) var(--space-104) var(--page-margin);
  }
  .service-hero__head {
    min-height: 340px;
  }
  .service-hero__crumb a {
    transition: color 0.2s ease;
  }
  .service-hero__crumb a:hover {
    color: var(--connect, #3794F4);
  }
  .service-hero__title {
    font-size: var(--fs-72);
    line-height: var(--lh-110);
  }
  .service-hero__icon {
    width: 244px;
    height: 244px;
  }
}
/* ==========================================================================
   RECORTE DE LA FOTO (>= 1440px)
   Breakpoint propio, igual que about-hero: por debajo el texto de las
   notas no cabe en la muesca y la foto se queda apilada normal.
   ========================================================================== */
@media (min-width: 1440px) {
  .service-hero .about-hero__media {
    display: block;
    position: relative;
  }
  .service-hero .about-hero__notes {
    display: block;
    max-width: none;
    margin-inline: 0;
  }
  .service-hero .about-hero__image {
    height: 100%;
    object-fit: cover;
    /* Path reflejado a mano en service-hero.njk para las muescas
       arriba-izq/abajo-dcha, sin transform: scaleX (eso espejaba también
       el alt visible mientras la imagen no carga). */
    clip-path: url(#service-hero-mask);
  }
  .service-hero .about-hero__note--top-left,
  .service-hero .about-hero__note--bottom-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    width: var(--note-w);
    height: var(--notch-h);
    padding: var(--space-32);
  }
  .service-hero .about-hero__note--top-left {
    top: 0;
    left: 0;
  }
  .service-hero .about-hero__note--bottom-right {
    bottom: 0;
    right: 0;
  }
}
/* subservices — listado de herramientas de un servicio. Stack en columna
   en mobile/tablet; en desktop (≥1024px) slider propio sin scroll ni
   librería: tarjetas en la misma celda de grid, crossfade de opacity vía
   la clase --active al hacer clic en los puntos de paginación. */
/* @property debe ser una regla de nivel superior (no dentro de la media
   query) para que el navegador la registre; si no, animar
   --subservices-dot-progress salta de golpe en vez de interpolar. */
@property --subservices-dot-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.subservices {
  padding: var(--space-56) 0;
}

.subservices__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding: var(--space-56) 0;
  background: var(--trace, #D4E9FF);
  border-radius: 20px;
}

.subservices__head {
  padding: 0 var(--page-margin);
}

.subservices__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}

.subservices__slide {
  width: 100%;
  height: auto;
  padding: 0 var(--page-margin);
}

.subservices__slide:not(:first-child) {
  padding-top: var(--space-48);
  border-top: 1px solid var(--trace, #D4E9FF);
}

.subservices__slide + .subservices__slide {
  border-top: 2px solid var(--light, #FFFFFF);
}

.subservices__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* Agrupa título + info para el gap entre ambos; en desktop pasa a
   display:contents para que cada uno vaya a su propia celda de grid. */
.subservices__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* display:contents en mobile/tablet: el icono queda como hijo directo de
   .card. En desktop pasa a ser la mitad derecha de la fila. */
.subservices__icon-wrap {
  display: contents;
}

.subservices__icon {
  align-self: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 2px solid var(--trust, #002856);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* % en vez de px fijos: cada tarjeta trae su propio icono con proporción
   nativa distinta (mismo criterio que service-hero.css). */
.subservices__icon svg {
  width: 55%;
  height: 55%;
}

/* Trazo fijo en 2px reales pase lo que pase el tamaño del icono — mismo
   fix que service-hero.css/chain-tabs.css. */
.subservices__icon svg path {
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.subservices__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.subservices__title {
  font-size: var(--fs-40);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
  color: var(--trust, #002856);
}

.subservices__subtitle {
  font-size: var(--fs-24);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-130);
  color: var(--trust, #002856);
}

.subservices__description,
.subservices__outro {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
}

.subservices__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
  list-style-type: disc;
}

.subservices__bullets li::marker {
  color: var(--trust, #002856);
}

.subservices__cta {
  align-self: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-24);
  border-color: var(--connect, #3794F4);
  color: var(--connect, #3794F4);
}

/* Oculta hasta desktop: por debajo de 1024px no hay crossfade que señalar. */
.subservices__pagination {
  display: none;
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .subservices {
    padding: var(--space-40) var(--page-margin);
  }
  .subservices__head {
    padding: var(--space-48) var(--space-40);
  }
  .subservices__inner {
    gap: var(--space-56);
    border-radius: 16px;
  }
  .subservices__stack {
    gap: var(--space-64);
  }
  .subservices__icon {
    align-self: flex-start;
  }
  .subservices__slide:not(:first-child) {
    padding-top: var(--space-64);
  }
  .subservices__card {
    width: 100%;
    max-width: 100%;
  }
  .subservices__title {
    font-size: var(--fs-40);
  }
  .subservices__subtitle,
  .subservices__description,
  .subservices__outro,
  .subservices__bullets {
    font-size: var(--fs-18);
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   Slider propio sin scroll: tarjetas en la misma celda de grid,
   subservices.js cambia cuál lleva --active; el cambio visual es una
   transition de opacity, sin GSAP ni ScrollTrigger.
   ========================================================================== */
@media (min-width: 1024px) {
  .subservices {
    display: flex;
    justify-content: center;
    padding: var(--space-64) var(--page-margin) var(--space-24) var(--page-margin);
  }
  .subservices__inner {
    position: relative;
    padding: var(--space-104) var(--space-80);
    max-width: 1600px;
    width: 100%;
  }
  .subservices__stack {
    display: grid;
    position: relative;
  }
  .subservices__slide {
    grid-area: 1/1;
    width: auto;
    padding: 0;
    opacity: 0;
    /* Curva propia (no "ease") y 0.9s para que el crossfade se note pausado. */
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    /* Sin esto, las tarjetas en opacity:0 se comen los clics/hover de la
       que sí se ve al compartir la misma celda de grid. */
    pointer-events: none;
  }
  .subservices__slide--active {
    opacity: 1;
    pointer-events: auto;
  }
  .subservices__slide:not(:first-child) {
    padding-top: 0;
    border-top: 0;
  }
  .subservices__head {
    padding: 0;
  }
  /* Fila de altura fija (stretch, no grid). Izquierda (.body) reparte su
     alto con justify-content:center; derecha (.icon-wrap) centra el icono
     en ambos ejes. */
  .subservices__card {
    display: flex;
    flex-direction: row;
    gap: var(--space-56);
    max-width: none;
    height: 560px;
  }
  .subservices__body {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 2;
    gap: var(--space-40);
  }
  /* El icono va antes que .body en el DOM (sale arriba en mobile/tablet);
     order:2 lo manda a la derecha aquí sin reordenar el marcado. */
  .subservices__icon-wrap {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 2;
  }
  .subservices__icon {
    width: 280px;
    height: 280px;
    align-self: center;
  }
  .subservices__info {
    max-width: 640px;
  }
  .subservices__title {
    font-size: var(--fs-48);
  }
  .subservices__inner {
    gap: var(--space-24);
  }
  /* Anula el max-width:650px de section-head.css, scopeado a este módulo
     para no afectar a los demás usos. */
  .subservices__head .section-head__title {
    max-width: none;
    width: 60%;
  }
  /* Avance automático: lo dispara el final del relleno del punto activo
     (@keyframes subservices-dot-fill + "animationend" en subservices.js). */
  .subservices__pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    position: absolute;
    top: 58%;
    right: var(--space-40);
    transform: translateY(-50%);
  }
  .subservices__dot {
    --subservices-dot-progress: 0%;
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Los dos stops llevan porcentaje explícito: en conic-gradient el
       atajo "0" a secas no es fiable como en linear/radial-gradient. */
    background: conic-gradient(var(--trust, #002856) 0% var(--subservices-dot-progress), var(--control-35, rgba(28, 94, 165, 0.2078431373)) var(--subservices-dot-progress) 100%);
    cursor: pointer;
    transition: width 0.25s ease, height 0.25s ease;
  }
  /* Los navegadores no interpolan de forma fiable entre dos conic-gradient,
     así que el hover va en un ::before aparte y se transiciona su opacity. */
  .subservices__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(var(--trust, #002856) 0% var(--subservices-dot-progress), var(--control, #1C5EA5) var(--subservices-dot-progress) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  /* Solo en puntos inactivos: el activo ya se distingue por su relleno. */
  .subservices__dot:not(.subservices__dot--active):hover::before {
    opacity: 1;
  }
  .subservices__dot--active {
    width: 14px;
    height: 14px;
    /* Duración fijada por JS vía --subservices-fill-duration; 5s es el
       valor de respaldo si el JS no llega a fijarla. */
    animation: subservices-dot-fill var(--subservices-fill-duration, 5s) linear forwards;
  }
  /* Pausa el relleno al pausar en hover (subservices.js). */
  .subservices__inner--paused .subservices__dot--active {
    animation-play-state: paused;
  }
  @keyframes subservices-dot-fill {
    from {
      --subservices-dot-progress: 0%;
    }
    to {
      --subservices-dot-progress: 100%;
    }
  }
  .subservices__cta:hover .icon-arrow {
    transform: translateX(4px);
  }
}
/* value-points — bloque navy de "argumentos": título + intro y lista
   numerada donde cada punto trae título y párrafo propios (a diferencia de
   pain-points/advantages, de una sola línea). En desktop, item-body arranca
   al 50% del ancho y item-number queda colgado a su izquierda. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.value-points {
  padding: var(--space-56) 0;
}

.value-points__inner {
  background: var(--trust, #002856);
  border-radius: 20px;
  padding: var(--space-48) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}

.value-points__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.value-points__title {
  font-size: var(--fs-40);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
}

.value-points__title-accent {
  color: var(--accent, #F18A00);
}

/* "dark" es el nombre que usa el resto del proyecto para "sin acento"; en
   fondo navy eso es blanco, se mantiene por coherencia con esos componentes. */
.value-points__title-dark {
  color: var(--light, #ffffff);
}

.value-points__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.value-points__intro p {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--light, #ffffff);
}

.value-points__list {
  list-style: none;
  counter-reset: value-points;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
}

.value-points__item {
  counter-increment: value-points;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.value-points__item-number {
  font-size: var(--fs-48);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
  color: var(--light, #ffffff);
}

.value-points__item-number::before {
  content: counter(value-points, decimal-leading-zero) ".";
}

.value-points__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.value-points__item-title {
  font-size: var(--fs-28);
  font-weight: var(--weight-medium);
  line-height: var(--lh-130);
  color: var(--light, #ffffff);
}

.value-points__item-text {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--light, #FFFFFF);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .value-points {
    padding: var(--space-80) var(--page-margin);
  }
  .value-points__inner {
    padding: var(--space-64) var(--space-48);
    gap: var(--space-64);
    border-radius: 16px;
  }
  .value-points__title {
    font-size: var(--fs-48);
  }
  .value-points__list {
    gap: var(--space-140);
  }
  .value-points__item-number {
    font-size: var(--fs-56);
  }
  .value-points__item-title {
    font-size: var(--fs-32);
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .value-points {
    padding: var(--space-104) var(--page-margin);
  }
  .value-points__inner {
    padding: var(--space-80) var(--space-64);
    gap: var(--space-80);
  }
  .value-points__head {
    max-width: 720px;
  }
  /* item-body arranca al 50% del ancho; item-number queda colgado a su
     izquierda, fuera del flujo, centrado en vertical. */
  .value-points__item {
    position: relative;
    display: block;
  }
  .value-points__item-number {
    position: absolute;
    top: 10%;
    left: 0;
    width: 96px;
    transform: translateY(-50%);
  }
  .value-points__item-body {
    margin-left: 51.6%;
  }
  .value-points__item-text {
    font-size: var(--fs-20);
  }
}
/* contact (/contacto/) — cabecera vía section-head (H1 real de página) +
   datos de contacto, y al lado un formulario en tarjeta --trace. Apilado
   en mobile/tablet, dos columnas en desktop. Breakpoint propio (>=1320px,
   no el estándar 1024px): por debajo el formulario queda demasiado
   estrecho a dos columnas. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.contact {
  display: flex;
  flex-direction: column;
}

/* Nacen ocultos para evitar flash antes de la animación de contact.js
   (interruptor no-js/js en base.njk). */
.js .contact,
.js .contact .section-head__eyebrow,
.js .contact .section-head__title,
.js .contact .section-head__description,
.js .contact__info,
.js .contact__form {
  opacity: 0;
}

.contact__intro {
  padding: var(--space-104) var(--page-margin) var(--space-64) var(--page-margin);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-top: var(--space-8);
}

.contact__info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact__info-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
  opacity: 0.5;
}

.contact__info-label svg {
  flex-shrink: 0;
}

.contact__info-value {
  font-size: var(--fs-18);
  font-weight: var(--weight-semibold);
  color: var(--trust, #002856);
}

/* -------------------------------------------------------------------- */
/* Formulario                                                            */
/* -------------------------------------------------------------------- */
.contact__form {
  background: var(--trace, #D4E9FF);
  border-radius: 20px;
  padding: var(--space-40) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact__field label {
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
}

.contact__field input,
.contact__field textarea {
  font-family: var(--font-delight);
  font-size: var(--fs-16);
  font-weight: var(--weight-regular);
  color: var(--trust, #002856);
  background: var(--light, #ffffff);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: var(--space-16) var(--space-20);
  width: 100%;
}

.contact__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: var(--trust, #002856);
  opacity: 0.4;
}

/* Estado de error (ver form-validation.js), visible en cualquier breakpoint. */
.contact__field input.is-invalid,
.contact__field textarea.is-invalid {
  border-color: var(--error, #D64545);
}

/* El <input> es la caja visible (appearance:none); el <span> hermano es
   el "tick", más fiable entre navegadores que un ::after sobre el input. */
.contact__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  cursor: pointer;
}

/* position:relative para que el tick (hermano del input) se superponga
   en vez de colocarse al lado. */
.contact__checkbox-control {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--trust, #002856);
  background: transparent;
  margin-top: 2px;
}

.contact__checkbox input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.contact__checkbox input[type=checkbox]:checked {
  background: var(--trust, #002856);
  border-color: var(--trust, #002856);
}

/* Estado de error del checkbox (ver form-validation.js). */
.contact__checkbox-control.is-invalid {
  border-color: var(--error, #D64545);
}

.contact__checkbox-box {
  position: absolute;
  top: 6px;
  left: 4px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--light, #ffffff);
  border-bottom: 2px solid var(--light, #ffffff);
  transform: rotate(-45deg);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.contact__checkbox input[type=checkbox]:checked + .contact__checkbox-box {
  opacity: 1;
}

.contact__checkbox-label {
  font-size: var(--fs-16);
  font-weight: var(--weight-regular);
  color: var(--trust, #002856);
  line-height: var(--lh-140);
  padding-top: 3px;
}

.contact__checkbox-label a {
  color: var(--trust, #002856);
  text-decoration: underline;
}

.contact__recaptcha {
  font-size: var(--fs-14);
  font-weight: var(--weight-regular);
  line-height: var(--lh-140);
  color: var(--trust, #002856);
  padding-bottom: var(--space-16);
}

.contact__recaptcha a {
  color: var(--trust, #002856);
  text-decoration: underline;
  opacity: 1;
}

.contact__submit {
  gap: var(--space-8);
  align-self: flex-start;
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .contact {
    padding: var(--space-140) 0 var(--space-80) 0;
  }
  .contact__form {
    margin: 0 var(--page-margin);
    padding: var(--space-40);
    max-width: 780px;
    border-radius: 16px;
  }
}
/* ==========================================================================
   DESKTOP (>= 1320px — breakpoint propio de .contact, ver comentario
   inicial del archivo)
   ========================================================================== */
@media (min-width: 1320px) {
  .contact {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--space-140) var(--page-margin) var(--space-104) var(--page-margin);
    gap: var(--space-64);
  }
  .contact__intro {
    flex: 1;
    padding-top: 0;
  }
  .contact__form {
    flex: 1.2;
    padding: var(--space-48);
    max-width: 100%;
  }
  .contact__submit:hover .icon-arrow {
    transform: translateX(4px);
  }
  /* --------------------------------------------------------------------
     Hover / focus — solo en desktop
     -------------------------------------------------------------------- */
  .contact__info-value {
    transition: color 0.2s ease;
  }
  .contact__info-value:hover {
    color: var(--control, #1C5EA5);
  }
  .contact__field input,
  .contact__field textarea {
    transition: border-color 0.2s ease;
  }
  .contact__field input:hover,
  .contact__field textarea:hover {
    border-color: var(--trust-80, rgba(0, 40, 86, 0.5019607843));
  }
  .contact__field input:focus,
  .contact__field textarea:focus {
    outline: none;
    border-color: var(--trust, #002856);
  }
  .contact__checkbox input[type=checkbox] {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  .contact__checkbox:hover input[type=checkbox] {
    border-color: var(--control, #1C5EA5);
  }
  .contact__checkbox input[type=checkbox]:checked:hover {
    background: var(--control, #1C5EA5);
    border-color: var(--control, #1C5EA5);
  }
  .contact__checkbox-label a {
    transition: color 0.2s ease;
  }
  .contact__checkbox-label a:hover {
    color: var(--control, #1C5EA5);
  }
  .contact__recaptcha a {
    transition: color 0.2s ease;
  }
  .contact__recaptcha a:hover {
    color: var(--control, #1C5EA5);
  }
}
/* contact-send — lo que el contacto necesita para enviar de verdad y el diseño de la agencia no traía */
/* El campo trampa: fuera de la vista, del lector de pantalla y del tabulador, pero dentro del formulario. */
.contact__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Lo que se le dice a quien escribe al volver del envío: gracias, o por qué no ha salido. */
.contact__status {
  margin: 0 0 var(--space-24);
  padding: var(--space-16) var(--space-20);
  border-radius: 8px;
  background: var(--clarity);
  color: var(--trust);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.contact__status--limit,
.contact__status--failed,
.contact__status--unverified {
  background: rgba(214, 69, 69, 0.0784313725);
  color: var(--error);
}

/* Turnstile: sin nada que preguntar mide 0, pero el gap del formulario le daría hueco. Cuando pregunta,
   contact-turnstile.js le pone is-visible y recupera su sitio, separado de la casilla de la política. */
.contact__turnstile {
  margin-top: calc(-1 * var(--space-24));
}

.contact__turnstile.is-visible {
  margin-top: 0;
}

/* post (/blog/articulo-ejemplo/) — cabecera + .article-body (h2-h4, listas,
   imágenes, enlaces). max-width propio en desktop: 940px (línea cómoda de
   lectura), a diferencia del resto del sitio. Fondo --clarity, como el
   resto de /blog/. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.post {
  background: var(--clarity, #EBF5FF);
  padding: var(--space-104) var(--page-margin) 0 var(--page-margin);
}

/* Nacen ocultos para evitar flash antes de la animación de post.js
   (interruptor no-js/js en base.njk). */
.js .post__header,
.js .post__title,
.js .post__meta,
.js .post__image,
.js .post__body > * {
  opacity: 0;
}

.post__title {
  font-size: var(--fs-32);
  font-weight: var(--weight-medium);
  line-height: var(--lh-110);
  color: var(--trust, #002856);
  letter-spacing: 1%;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-14);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
  margin-top: var(--space-24);
}

.post__image {
  width: 190px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  margin-top: var(--space-32);
}

.post__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post__body {
  margin-top: var(--space-32);
}

/* -------------------------------------------------------------------- */
/* .article-body — tipografía del contenido enriquecido (viene de un      */
/* campo HTML en blogPost.json, ver post.njk: {{ blogPost.content|safe }} */
/* como vendría de un editor WYSIWYG/Gutenberg real).                     */
/* -------------------------------------------------------------------- */
.article-body {
  display: flex;
  flex-direction: column;
}

.article-body h2 {
  font-size: var(--fs-28);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
  color: var(--trust, #002856);
  margin: var(--space-20) 0 var(--space-20) 0;
}

.article-body h3 {
  font-size: var(--fs-24);
  font-weight: var(--weight-medium);
  line-height: var(--lh-120);
  color: var(--trust, #002856);
  margin: var(--space-16) 0 var(--space-12) 0;
}

.article-body h4 {
  font-size: var(--fs-20);
  font-weight: var(--weight-medium);
  line-height: var(--lh-130);
  color: var(--trust, #002856);
  margin-bottom: var(--space-12);
}

.article-body p {
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
  margin-bottom: var(--space-20);
}

.article-body ul,
.article-body ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-left: var(--space-32);
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
  margin-bottom: var(--space-20);
}

.article-body ul {
  list-style-type: disc;
}

.article-body ol {
  list-style-type: decimal;
}

.article-body li::marker {
  color: var(--trust, #002856);
  font-size: 1.2rem;
}

.article-body a {
  color: var(--trust, #002856);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* aspect-ratio fijo en el <img> + object-fit:cover: evita salto de layout
   mientras carga la imagen. */
.article-body__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0 0 var(--space-20) 0;
}

.article-body__figure img {
  display: block;
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.article-body figcaption {
  font-size: var(--fs-16);
  font-weight: var(--weight-regular);
  color: var(--trust, #002856);
  opacity: 0.7;
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .post {
    padding-top: var(--space-140);
  }
  .post__title {
    font-size: var(--fs-48);
  }
  .article-body h2 {
    font-size: var(--fs-40);
  }
  .article-body h3 {
    font-size: var(--fs-32);
  }
  .article-body h4 {
    font-size: var(--fs-24);
  }
  .article-body p {
    font-size: var(--fs-20);
  }
  .article-body ul,
  .article-body ol {
    padding-left: var(--space-32);
    font-size: var(--fs-20);
  }
  .article-body__figure {
    margin: var(--space-20) 0 var(--space-32) 0;
  }
}
/* ==========================================================================
   DESKTOP (>= 1024px — ancho máximo propio de .post, ver comentario
   inicial del archivo)
   ========================================================================== */
@media (min-width: 1024px) {
  .post {
    padding-bottom: var(--space-24);
  }
  /* max-width en header/body, no en .post: así el fondo --clarity sigue
     a sangre y solo el contenido queda centrado. */
  .post__header,
  .post__body {
    max-width: 940px;
    margin-inline: auto;
  }
  .post__title {
    font-size: var(--fs-56);
  }
  .post__image {
    margin-top: var(--space-56);
    margin-bottom: var(--space-48);
  }
  .article-body a {
    transition: color 0.2s ease;
  }
  .article-body a:hover {
    color: var(--connect, #3794F4);
  }
  .post__meta-category {
    transition: color 0.2s ease;
  }
  .post__meta-category:hover {
    color: var(--control, #1C5EA5);
  }
}
/* legal (/legal-notice/, /privacy-policy/, /cookie-policy/) — reutiliza
   .post__header/__title/__body/.article-body de post.css sin duplicar
   reglas. Única diferencia: fondo --light en vez de --clarity, y sin meta,
   imagen destacada, relacionados ni newsletter/cta. */
/* Sin post.js: su entrada esconde el texto 1,6 s y anima cada párrafo por separado, y un texto legal
   tiene cientos. */
.js .legal .post__header,
.js .legal .post__title,
.js .legal .post__body > * {
  opacity: 1;
}

.legal {
  background: var(--light, #ffffff);
  padding: var(--space-104) var(--page-margin) var(--space-56) var(--page-margin);
}

@media (min-width: 768px) {
  .legal {
    padding-top: var(--space-140);
    padding-bottom: var(--space-64);
  }
}
@media (min-width: 1024px) {
  .legal {
    padding-bottom: var(--space-80);
  }
}
/* post.css no cubre las tablas de los textos legales. */
.legal .post__body,
.legal .article-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal .article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-32) 0;
  font-size: var(--fs-16);
  line-height: var(--lh-140);
  color: var(--trust, #002856);
}

.legal .article-body th,
.legal .article-body td {
  padding: var(--space-12) var(--space-16);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}

.legal .article-body tbody tr + tr td,
.legal .article-body thead + tbody td {
  border-top: 1px solid var(--trace, #D4E9FF);
}

.legal .article-body thead th {
  background: var(--trace, #D4E9FF);
  font-weight: var(--weight-semibold);
  vertical-align: middle;
}

.legal .article-body tbody tr:nth-child(odd) td {
  background: var(--light, #ffffff);
}

.legal .article-body tbody tr:nth-child(even) td {
  background: var(--clarity, #EBF5FF);
}

.legal .article-body tbody tr:hover td {
  background: var(--trace, #D4E9FF);
}

/* En móvil la tabla de cookies no cabe: se desplaza dentro de su caja y cada
   celda guarda un ancho legible en vez de partir las palabras. */
@media (max-width: 767px) {
  .legal .article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .legal .article-body th,
  .legal .article-body td {
    min-width: 8rem;
  }
}
.legal .legal__note {
  font-size: var(--fs-16);
}

/* form-validation (contact, newsletter) — mensaje de error bajo el campo
   (ver form-validation.js). El borde .is-invalid vive en cada componente. */
.field-error {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--weight-medium);
  color: var(--error, #D64545);
  margin-top: var(--space-8);
}

/* pppl-checker (/pppl-cb-checker/) — construido sobre la base de
   newsletter.css (misma tarjeta --trace, mismo patrón de intro+form).
   Formulario de un solo campo, sin checkbox ni recaptcha, con un aviso de
   resultado de 3 estados controlado por pppl-checker.js. */
/* ==========================================================================
   MOBILE (base, mobile-first — sin media query)
   ========================================================================== */
.pppl-checker {
  background: var(--light, #ffffff);
  padding: var(--space-104) 0 var(--space-32) 0;
}

.pppl-checker__inner {
  background: var(--trace, #D4E9FF);
  border-radius: 20px;
  padding: var(--space-56) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/* Nacen ocultos para evitar flash antes de la animación de pppl-checker.js
   (interruptor no-js/js en base.njk). */
.js .pppl-checker__inner,
.js .pppl-checker__title,
.js .pppl-checker__description,
.js .pppl-checker__panel {
  opacity: 0;
}

.pppl-checker__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.pppl-checker__title {
  font-size: var(--fs-40);
  font-weight: var(--weight-medium);
  line-height: var(--lh-110);
  letter-spacing: 1%;
}

.pppl-checker__title-dark {
  color: var(--trust, #002856);
}

.pppl-checker__title-accent {
  color: var(--accent, #F18A00);
}

.pppl-checker__description {
  font-size: var(--fs-20);
  font-weight: var(--weight-regular);
  line-height: var(--lh-150);
  color: var(--trust, #002856);
}

.pppl-checker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.pppl-checker__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.pppl-checker__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pppl-checker__field label {
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
}

.pppl-checker__field input {
  font-family: var(--font-delight);
  font-size: var(--fs-16);
  font-weight: var(--weight-regular);
  color: var(--trust, #002856);
  background: var(--light, #ffffff);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: var(--space-16) var(--space-20);
  width: 100%;
}

.pppl-checker__field input::placeholder {
  color: var(--trust-80, rgba(0, 40, 86, 0.5019607843));
}

/* Estado de error (ver form-validation.js): igual que .newsletter__field
   input.is-invalid, fuera de la media query de desktop. */
.pppl-checker__field input.is-invalid {
  border-color: var(--error, #D64545);
}

.pppl-checker__submit {
  gap: var(--space-8);
  align-self: flex-start;
}

/* Oculto por defecto (ver pppl-checker.js). [hidden] necesita su propia
   regla porque el display:flex de abajo, al ser también declaración de
   autor, gana igual al [hidden] del user agent (mismo caso que
   .header-nav[hidden]). */
.pppl-checker__result {
  display: flex;
  background: var(--clarity, #EBF5FF);
  border-radius: 8px;
  padding: var(--space-20);
}

.pppl-checker__result-state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.pppl-checker__result[hidden],
.pppl-checker__result-state[hidden] {
  display: none;
}

.pppl-checker__result-state svg {
  flex-shrink: 0;
  padding-top: 2px;
  box-sizing: content-box;
}

.pppl-checker__result-title {
  font-size: var(--fs-20);
  font-weight: var(--weight-medium);
  color: var(--trust, #002856);
  line-height: var(--lh-140);
}

.pppl-checker__result-description {
  font-size: var(--fs-16);
  font-weight: var(--weight-regular);
  color: var(--trust, #002856);
  line-height: var(--lh-140);
  margin-top: var(--space-4);
}

.pppl-checker__result-state[data-pppl-state=valid] svg {
  color: var(--success, #2F9E52);
}

.pppl-checker__result-state[data-pppl-state=invalid] svg {
  color: var(--accent, #F18A00);
}

.pppl-checker__result-state[data-pppl-state=not-found] svg {
  color: var(--error, #D64545);
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .pppl-checker {
    padding: var(--space-140) var(--page-margin) var(--space-40) var(--page-margin);
  }
  .pppl-checker__inner {
    padding: var(--space-56) var(--space-40);
    border-radius: 16px;
  }
  .pppl-checker__title {
    font-size: var(--fs-48);
  }
  .pppl-checker__description {
    max-width: 600px;
  }
  .pppl-checker__form {
    width: 100%;
    max-width: 540px;
  }
}
/* ==========================================================================
   DESKTOP (>= 1340px — mismo breakpoint propio que .newsletter/.contact:
   por debajo, el formulario junto al título queda demasiado estrecho)
   ========================================================================== */
@media (min-width: 1340px) {
  .pppl-checker__inner {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--space-80);
    gap: var(--space-140);
  }
  .pppl-checker__intro {
    flex: 3;
    /* 60% */
  }
  .pppl-checker__panel {
    flex: 2;
    /* 40% */
    padding-top: var(--space-80);
  }
  .pppl-checker__title {
    font-size: var(--fs-56);
  }
  .pppl-checker__description {
    font-size: var(--fs-24);
  }
  .pppl-checker__field {
    flex: 1;
  }
  /* --------------------------------------------------------------------
     Hover / focus — solo en desktop
     -------------------------------------------------------------------- */
  .pppl-checker__submit:hover .icon-arrow {
    transform: translateX(4px);
  }
  .pppl-checker__field input {
    transition: border-color 0.2s ease;
  }
  .pppl-checker__field input:hover {
    border-color: var(--trust-80, rgba(0, 40, 86, 0.5019607843));
  }
  .pppl-checker__field input:focus {
    outline: none;
    border-color: var(--trust, #002856);
  }
}
/* cookie-banner — el aviso de cookies. No venía en el diseño de la agencia: usa sus colores, su tipografía y sus
   botones. */
.cookie-banner {
  position: fixed;
  right: var(--page-margin);
  bottom: var(--page-margin);
  left: var(--page-margin);
  z-index: calc(var(--z-header) + 1);
  display: flex;
  justify-content: center;
}

.cookie-banner[hidden],
.cookie-banner [hidden] {
  display: none;
}

.cookie-banner__inner {
  width: 100%;
  max-width: 720px;
  padding: var(--space-24);
  border-radius: 20px;
  background: var(--light);
  color: var(--trust);
  box-shadow: 0 8px 32px rgba(0, 40, 86, 0.18);
}

.cookie-banner__title {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-20);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-130);
}

.cookie-banner__text {
  margin: 0 0 var(--space-16);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.cookie-banner__text a {
  color: inherit;
  text-decoration: underline;
}

.cookie-banner__options {
  display: grid;
  gap: var(--space-12);
  margin: 0 0 var(--space-16);
}

.cookie-banner__option {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.cookie-banner__option input {
  margin-top: var(--space-4);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* El enlace "Configuración de cookies" del pie es un botón: abre el banner, no lleva a ninguna página. */
button.footer__legal-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* event-banner — idea aparte: en la portada, el aviso que lleva a la landing de Fruit Attraction 2026
   (Components/_EventBanner). No venía en el diseño: usa sus colores, su tipografía y su botón, y no se esconde bajo
   .js, así que no necesita script. */
.event-banner {
  padding: var(--space-24) var(--page-margin) 0;
}

.event-banner__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-24);
  border-radius: 20px;
  background: var(--trust, #002856);
  color: var(--light, #ffffff);
  text-decoration: none;
}

.event-banner__eyebrow {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--fs-16);
  font-weight: var(--weight-semibold);
  color: var(--accent, #F18A00);
}

.event-banner__title {
  display: block;
  font-size: var(--fs-24);
  font-weight: var(--weight-medium);
  line-height: var(--lh-130);
}

.event-banner__button {
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .event-banner__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-40);
    padding: var(--space-32) var(--space-40);
  }
  .event-banner__card:hover .btn--accent {
    background: var(--control, #1C5EA5);
    color: var(--light, #ffffff);
  }
  .event-banner__card:hover .icon-arrow {
    transform: translateX(4px);
  }
}
/* tipografía */
@font-face {
  font-family: "Delight";
  src: url("../type/Delight-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("../type/Delight-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("../type/Delight-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* variables */
:root {
  /* colores */
  --trust: #002856;
  --control: #1C5EA5;
  --connect: #3794F4;
  --trace: #D4E9FF;
  --clarity: #EBF5FF;
  --light: #ffffff;
  --accent: #F18A00;
  --muted: #33333330; /* gris para títulos de columna del footer y copyright */
  --trust-80: #00285680;
  --control-35: #1C5EA535;
  --trace-40: #D4E9FF66; /* trace al 40% — estado por defecto de las tarjetas de faq */
  --error: #D64545; /* fuera de la paleta de marca, reservado para estados de error de formulario (ver form-validation.css) */
  --success: #2F9E52; /* fuera de la paleta de marca, reservado para el estado "PPPL activo" del checker (ver pppl-checker.css) */
  /* z-index */
  --z-header: 100;
  /* font */
  --font-delight: "Delight", sans-serif;
  /* font sizes */
  --fs-72: 4.5rem;
  --fs-64: 4rem;
  --fs-56: 3.5rem;
  --fs-48: 3rem;
  --fs-40: 2.5rem;
  --fs-36: 2.25rem;
  --fs-32: 2rem;
  --fs-28: 1.75rem;
  --fs-24: 1.5rem;
  --fs-20: 1.25rem;
  --fs-18: 1.12rem;
  --fs-16: 1rem;
  --fs-14: 0.8rem;
  --fs-12: 0.7rem;
  /* font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  /* line heights */
  --lh-110: 1.1;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;
  /* spacing */
  --page-margin: clamp(1rem, 0.333rem + 2.778vw, 2rem);
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-104: 6.5rem;
  --space-140: 8.75rem;
  --space-180: 11.25rem;
}

/* tablet */
/* desktop */

/*# sourceMappingURL=styles.css.map */