/* =========================================================
   PÁGINAS · estilos específicos, siempre con scope por la
   clase de página en <body> (page-home, page-banca, …).
   Las clases de tipo (page-inner, page-legal, page-blog,
   page-post) agrupan páginas que comparten anatomía.
   ========================================================= */

/* =================== HOME =================== */
/* Hero claro. Foto hero-home.jpg (1920×574): blanca hasta ~50% del ancho, cara del sujeto entre 69% y 78%.
   Móvil y tablet (<1200px): contenido sobre blanco sólido y la foto debajo, recortada sobre el sujeto.
   Desktop (≥1200px): la foto es el fondo del hero, anclada a la derecha; el contenido cae en la zona blanca. */
.page-home .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--white); }
.page-home .hero__inner { padding-block: var(--s-12) var(--s-8); }
.page-home .hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); max-width: 440px; }
.page-home .hero__lockup img { height: calc(var(--lockup-w) * var(--lockup-ratio)); width: auto; }
.page-home .hero__sub { font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; color: var(--brand-navy); }
.page-home .hero__content .btn { margin-top: var(--s-2); }
.page-home .hero__photo {
  display: block; width: 100%; height: clamp(220px, 48vw, 400px);
  object-fit: cover; object-position: 76% 30%;  /* centra la cara del sujeto en el recorte */
}

@media (min-width: 1200px) {
  .page-home .hero__inner {
    min-height: clamp(440px, 34vw, 600px);
    display: flex; align-items: center;
    padding-block: var(--s-16);
  }
  .page-home .hero__photo {
    position: absolute; inset: 0; z-index: -2; height: 100%;
    /* Anclada a la derecha: la cara nunca se desplaza hacia el contenido. En pantallas anchas la
       imagen escala por ancho y la zona blanca de la izquierda se mantiene completa. */
    object-position: 100% 20%;
  }
  /* Fundido blanco (no es overlay oscuro): disuelve el marco de ventana que trae la foto cerca de su
     borde izquierdo, que según el ancho de pantalla se leía como un corte de caja. */
  .page-home .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 18%, rgb(255 255 255 / 0) 48%);
  }
}

.page-home .genesys-band { margin-top: clamp(24px, 3vw, 40px); }

.page-home .integration h1 { font-size: var(--fs-h1); }
.page-home .integration .lead { margin-top: var(--s-5); }
.page-home .integration .chip-list { margin-top: var(--s-8); }
/* Recurso-8Ly.png ya trae el círculo naranjo: va sin marco ni sombra. Tope en su ancho nativo (461px). */
.page-home .integration__media { display: flex; justify-content: center; }
.page-home .integration__media img { width: 100%; max-width: 461px; height: auto; }

.page-home .desk { overflow: hidden; }
.page-home .desk .section-head { margin-bottom: var(--s-16); }

.page-home .channels__close { margin-top: var(--s-10); text-align: center; font-size: var(--fs-base); font-weight: 700; color: var(--navy); }

/* =================== PÁGINAS INTERIORES =================== */
.page-inner .intro-block { padding-block: var(--section-y) 0; }

/* =================== DOCUMENTOS LEGALES =================== */
.page-legal .legal-wrap { padding-block: var(--s-12) var(--section-y); }
.page-legal .draft-note { margin-bottom: var(--s-8); max-width: var(--measure); }
.page-legal .legal__updated { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--s-8); }

/* =================== BLOG Y POST =================== */
/* Sin estilos por página: todo el blog usa componentes de components.css
   (post-card, cat-filter, post-hero, post-cover, post-body, prose--article, post-foot, tag-list, share). */

/* =================== E-BOOK =================== */
/* Hero gris muy claro a dos columnas (texto + formulario | mockup del e-book) con el borde inferior en diagonal,
   como el original: el gris termina más arriba a la izquierda y baja hacia la derecha. */
.page-ebook .ebook-hero {
  --ebook-diag: clamp(40px, 7vw, 110px);
  background: var(--surface);
  padding-block: var(--s-10) calc(var(--s-12) + var(--ebook-diag));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--ebook-diag)));
}
.page-ebook .ebook-hero__grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 1024px) { .page-ebook .ebook-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); } }
.page-ebook .ebook-hero__copy { display: grid; gap: var(--s-4); justify-items: start; }
.page-ebook .ebook-hero__kicker { font-size: var(--fs-display); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--brand-orange); }   /* "muy grande", pedido del brief */
.page-ebook .ebook-hero__title { font-size: var(--fs-h1); color: var(--brand-navy); }
.page-ebook .ebook-hero .lead { max-width: 560px; color: var(--ink-600); }
.page-ebook .ebook-form { width: 100%; max-width: 520px; margin-top: var(--s-4); }
.page-ebook .ebook-hero__media { display: flex; justify-content: center; }
.page-ebook .ebook-hero__media img { width: min(100%, 520px); height: auto; }
.page-ebook .form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Cuerpo: columna de lectura */
.page-ebook .ebook-body .prose { margin-inline: auto; }

/* =================== INDUSTRIA (banca, educacion, cobranzas, telco, retail, salud) ===================
   Hero, ritmo y secciones compartidos también con Soluciones (marketing, engagement, soporte). */

/* ---------- Acento por industria (tokens en tokens.css). Los componentes de acento de
   components.css leen estas cuatro variables. ---------- */
.page-banca, .page-cobranzas { --accent: var(--accent-teal);   --accent-strong: var(--accent-teal-strong);  --accent-on-dark: var(--accent-teal);             --accent-ink: var(--navy-950); }
.page-educacion             { --accent: var(--accent-purple); --accent-strong: var(--accent-purple);       --accent-on-dark: var(--accent-purple-on-dark); --accent-ink: #fff; }
.page-telco                 { --accent: var(--accent-amber);  --accent-strong: var(--accent-amber-strong); --accent-on-dark: var(--accent-amber);            --accent-ink: var(--navy-950); }
.page-retail, .page-salud   { --accent: var(--accent-sky);    --accent-strong: var(--accent-sky-strong);   --accent-on-dark: var(--accent-sky);              --accent-ink: var(--navy-950); }

/* ---------- Ritmo vertical: ~120px desktop / ~72px móvil, fondos alternados blanco / gris / navy ---------- */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) main { overflow-x: clip; }   /* la tapa curva de las secciones navy sobresale 10% a cada lado */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-dark { background: var(--brand-navy); color: var(--ink-on-dark); }

/* ---------- Hero: banda navy a todo el ancho con textura de puntos al 5% ---------- */
/* Sin alto fijo ni min-height: la altura la define el contenido (o el banner, en desktop) */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-band { background: var(--brand-navy); border-bottom: 0; color: #fff; padding-block: 48px 56px; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-band::before { background: radial-gradient(45% 85% at 82% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-band::after {
  background-image: radial-gradient(circle, #fff 1.2px, transparent 1.7px);
  background-size: 18px 18px; opacity: .05;
  mask-image: linear-gradient(100deg, transparent 15%, #000 60%);
  -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 60%);
}
/* Breadcrumb, badge, H1, bajada y botón leídos como un bloque: 12px entre piezas, 20px antes del botón */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-band .page-hero__inner { gap: var(--s-3); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-band .page-hero__actions { margin-top: var(--s-2); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-band .lead { color: #fff; max-width: 34rem; }

/* H1 en la display de marca, mayúsculas por CSS; la primera frase en el color de acento, el resto en blanco */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 1.04; color: #fff;   /* Eziear viene con tracking muy abierto */
  font-size: var(--fs-h1); text-wrap: balance;
}
/* H1 largos (más de ~34 caracteres): menor tamaño y la frase de acento en línea, sin forzar salto.
   Objetivo: máximo 3 líneas a 1440px. */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-h1--long { line-height: 1.1; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-h1__accent { display: block; color: var(--accent-on-dark); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-h1--long .ind-h1__accent { display: inline; }

/* Dos columnas: contenido | banner. El banner tiene un alto definido (--hero-img-h) que manda sobre
   el de la banda y se apoya en su borde inferior; el bloque de la izquierda se centra respecto a él. */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) :is(.ind-hero__media, .ind-hero__deco) { display: none; }
@media (min-width: 960px) {
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) { --hero-img-h: clamp(380px, 30vw, 460px); }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero--media { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-band:has(.ind-hero--media) { padding-top: 64px; padding-bottom: 0; }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero--media .page-hero__inner { padding-block: 0 64px; }   /* mismo aire abajo que arriba: centrado óptico */
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) :is(.ind-hero__media, .ind-hero__deco) { display: flex; justify-content: center; align-self: stretch; height: var(--hero-img-h); }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero__media { align-items: flex-end; }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero__media img { height: var(--hero-img-h); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero__media.has-circle::before { width: calc(var(--hero-img-h) * .84); max-width: 100%; }
  /* Telco no tiene banner: composición gráfica con el color de acento, del mismo alto */
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero__deco { align-items: center; }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero__orb {
    display: grid; place-items: center; width: calc(var(--hero-img-h) * .62); aspect-ratio: 1; border-radius: 50%;
    background: var(--accent); color: var(--navy-950);
    box-shadow: 0 0 0 20px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 0 44px color-mix(in srgb, var(--accent) 9%, transparent);
  }
  :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-hero__orb-icon { width: 42%; height: 42%; }
}

/* ---------- Secciones ---------- */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .row__actions { margin-top: var(--s-2); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-text { margin-bottom: 0; max-width: 820px; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-text h2 { font-size: var(--fs-h2); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .on-dark .ind-text .lead { color: #fff; }   /* texto bajo el título en secciones navy */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-text__media { margin-top: var(--s-10); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-text__media img { max-height: 520px; }

/* <picture> (WebP + PNG de respaldo) no participa del layout: el <img> sigue siendo el que se
   centra y se limita en .ind-media, .ind-hero__media e .ind-card__img */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) :is(.ind-media, .ind-hero__media, .ind-card__img) picture { display: contents; }

/* Imágenes de sección: PNG/WebP transparentes, sueltas y en su proporción natural (sin caja, sin recorte).
   width/height auto + topes: nunca se agrandan por sobre su tamaño real. */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-media { display: flex; justify-content: center; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-media img { width: auto; height: auto; max-width: 100%; max-height: 540px; }

/* Banca: "Experiencia de Pagos" y "Nuevos Clientes", dos tarjetas sobre la sección navy */
.page-banca .ind-cards { display: grid; gap: var(--s-6); align-items: stretch; }
@media (min-width: 900px) { .page-banca .ind-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-banca .ind-card {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-8);
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); border-radius: var(--r-xl);
}
.page-banca .ind-card h2 { font-size: var(--fs-h3); }
.page-banca .ind-card p { color: var(--ink-on-dark); }
.page-banca .ind-card__img { margin-top: auto; padding-top: var(--s-4); display: flex; justify-content: center; }
.page-banca .ind-card__img img { width: auto; height: auto; max-width: 100%; max-height: 360px; }
.page-banca .ind-card__img .lang-swap__slide picture { display: contents; }

/* Retail: "Que tu cliente no abandone su compra": 3 puntos con ícono */
.page-retail .ind-list { display: grid; gap: var(--s-5); margin-top: var(--s-2); }
.page-retail .ind-list__item { display: flex; align-items: flex-start; gap: var(--s-4); }
.page-retail .ind-list__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent-strong);
}
.page-retail .ind-list__icon svg { width: 22px; height: 22px; }
.page-retail .ind-list__item p { color: var(--ink-600); padding-top: var(--s-2); }

/* Banca, sección "Complementa…": mockup | (título, párrafo, diagrama), 50/50 alineado al tope.
   Título en dos pesos, todo en azul marino (sin acento); barra navy por defecto. */
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro { display: grid; gap: var(--s-10); }
@media (min-width: 960px) { :is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro { grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; } }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__body { display: grid; gap: var(--s-5); align-content: start; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__body h2 { font-size: var(--fs-h2); }
.page-banca .ind-intro__body .title-2t strong { color: var(--brand-navy); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__body p { color: var(--ink-600); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__body p strong { color: var(--brand-navy); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__media { display: flex; justify-content: center; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__media img { width: auto; height: auto; max-width: 100%; max-height: 580px; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__diagram { margin-top: var(--s-4); }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__diagram picture { display: contents; }
:is(.page-banca, .page-educacion, .page-cobranzas, .page-telco, .page-retail, .page-salud, .page-marketing, .page-engagement, .page-soporte) .ind-intro__diagram img { width: 100%; max-width: 400px; height: auto; }

/* Cobranzas: la foto va más chica que en Banca; el chat es/en bajo el texto */
.page-cobranzas .ind-intro__media img { max-height: 440px; }
.page-cobranzas .ind-intro__diagram img { max-width: 380px; }

/* =================== SOLUCIONES (marketing, engagement, soporte) ===================
   Ritmo vertical y sección navy curva: los de Industria (selectores compartidos arriba). El hero NO es el
   de Industria: es claro, como el del home. Son producto, no industria: acento naranjo de marca en las tres. */
.page-marketing, .page-engagement, .page-soporte { --accent: var(--brand-orange-dark); --accent-strong: var(--brand-orange-deep); --accent-on-dark: var(--brand-orange); --accent-ink: #fff; }

/* Tres pasos unidos por flechas curvas (SVG inline, navy). Móvil: apilados, flecha vertical. */
:is(.page-marketing, .page-engagement, .page-soporte) .sol-steps { --sol-gap: 88px; display: grid; gap: var(--sol-gap); margin-top: var(--s-16); }
.sol-step {
  position: relative; display: grid; gap: var(--s-1); justify-items: center; max-width: 21rem; margin-inline: auto;
  text-align: center; font-size: var(--fs-base); font-weight: 600; line-height: 1.5; color: var(--brand-navy);
}
.sol-step strong { font-size: var(--fs-h3); font-weight: 800; color: var(--accent-strong); }
.sol-step__arrow {
  position: absolute; left: 50%; top: calc(100% + var(--sol-gap) / 2); width: 72px; height: 36px;
  color: var(--brand-navy); transform: translate(-50%, -50%) rotate(90deg);
}
.sol-step__arrow--down { transform: translate(-50%, -50%) rotate(90deg) scaleY(-1); }
@media (min-width: 900px) {
  :is(.page-marketing, .page-engagement, .page-soporte) .sol-steps { --sol-gap: 104px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .sol-step__arrow { left: calc(100% + var(--sol-gap) / 2); top: 50%; width: 84px; height: 42px; transform: translate(-50%, -50%); }
  .sol-step__arrow--down { transform: translate(-50%, -50%) scaleY(-1); }
}

/* Eyebrow naranjo + H2 grande navy con barra corta */
:is(.page-marketing, .page-engagement, .page-soporte) .sol-head h2 { font-size: var(--fs-h2); font-weight: 800; color: var(--brand-navy); }
:is(.page-marketing, .page-engagement, .page-soporte) .sol-head .has-bar { --bar-color: var(--accent); }

/* Íconos del original (PNG/WebP naranjos de trazo, ~48px): sueltos, sin caja, en su tamaño real */
.sol-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; }
.sol-icon picture { display: contents; }
.sol-icon img { width: auto; height: auto; max-width: 100%; max-height: 100%; }

/* Tres tarjetas con ícono */
.sol-cards { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .sol-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sol-card {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-8);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.sol-card .sol-icon { margin-bottom: var(--s-2); }
.sol-card h3 { font-size: var(--fs-h3); line-height: 1.3; color: var(--brand-navy); }
.sol-card p { color: var(--ink-600); }

/* Cuatro bloques de detalle en grilla 2×2. El título se centra con el ícono, así un bloque sin
   párrafo (COPY PENDIENTE en Soporte) se ve completo. */
.sol-blocks { display: grid; gap: var(--s-10) var(--s-12); }
@media (min-width: 768px) { .sol-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sol-block { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-2); align-items: start; }
.sol-block .sol-icon { grid-row: span 2; }
.sol-block h3 { display: flex; align-items: center; min-height: 52px; font-size: var(--fs-h3); line-height: 1.3; color: var(--brand-navy); }
.sol-block p { color: var(--ink-600); }

/* Imagen (recorte sobre círculo naranjo) | los cuatro bloques en una columna */
.sol-detail { display: grid; gap: var(--s-12); }
@media (min-width: 960px) { .sol-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: center; } }
.sol-detail__media { display: flex; justify-content: center; }
.sol-detail__media picture { display: contents; }
.sol-detail__media img { width: auto; height: auto; max-width: 100%; max-height: 480px; }
.sol-detail .sol-blocks { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }

/* ---------- Soporte (sin tarjetas ni sección navy) ---------- */

/* "Ofrece soporte humano…": eyebrow + H2 + fila de íconos (soporte-banner.png) | foto del equipo */
.page-soporte .sol-split { display: grid; gap: var(--s-12); }
@media (min-width: 960px) { .page-soporte .sol-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-16); align-items: center; } }
.page-soporte .sol-split .sol-head { margin-bottom: 0; }
.page-soporte .sol-split__banner { margin-top: var(--s-10); max-width: 440px; }
.page-soporte .sol-split__banner picture, .page-soporte .sol-split__photo picture { display: contents; }
.page-soporte .sol-split__banner img { width: 100%; height: auto; }
.page-soporte .sol-split__photo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }

/* Cuatro acordeones (<details>): tarjeta blanca con borde sutil; ícono naranjo, título y chevron.
   Un cuerpo vacío (COPY PENDIENTE: solo el comentario) se oculta, así el bloque se ve completo cerrado. */
.sol-accs { display: grid; gap: var(--s-4); }
.sol-acc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.sol-acc[open] { border-color: color-mix(in srgb, var(--brand-orange) 30%, var(--line)); box-shadow: var(--shadow-sm); }
.sol-acc summary {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: inherit;
  list-style: none; cursor: pointer; font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--brand-navy);
}
.sol-acc summary::-webkit-details-marker { display: none; }
.sol-acc .sol-icon { width: 44px; height: 44px; }
.sol-acc__title { flex: 1; }
.sol-acc__chev { flex: none; width: 20px; height: 20px; color: var(--brand-navy); transition: transform var(--t) var(--ease); }
.sol-acc[open] .sol-acc__chev { transform: rotate(180deg); color: var(--brand-600); }
.sol-acc__body { padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 44px + var(--s-4)); color: var(--ink-600); }
.sol-acc__body:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .sol-acc, .sol-acc__chev { transition: none; } }

/* Hero claro: contenido a la izquierda sobre blanco; foto en la mitad derecha que se funde hacia el blanco.
   La altura la define la foto (3:2). Móvil y tablet: contenido arriba, foto debajo a todo el ancho. */
.sol-hero { background: var(--white); overflow: hidden; }
.sol-hero__inner {
  display: grid; justify-items: start; gap: var(--s-4);
  max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding: var(--s-10) var(--gutter);
}
.sol-hero .breadcrumb { margin-bottom: var(--s-2); }
.sol-hero__eyebrow { font-size: var(--fs-base); font-weight: 400; color: var(--brand-navy); }
.sol-hero__title {
  font-size: var(--fs-h1); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--brand-navy); text-wrap: balance;
}
.sol-hero__title span { display: block; color: var(--brand-orange); }   /* texto grande en negrita: 3,2:1 sobre blanco (AA grande) */
.sol-hero__inner .btn { margin-top: var(--s-2); }
.sol-hero__media { position: relative; }
.sol-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 960px) {
  .sol-hero {
    display: grid; align-items: center;
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, calc(var(--container) / 2)) [mid] minmax(0, calc(var(--container) / 2)) [content-end] minmax(var(--gutter), 1fr) [full-end];
  }
  .sol-hero__inner { grid-column: content-start / mid; grid-row: 1; position: relative; z-index: 1; max-width: none; margin: 0; padding: var(--s-12) var(--s-10) var(--s-12) 0; }
  .sol-hero__media { grid-column: mid / full-end; grid-row: 1; align-self: stretch; }
  .sol-hero__media img { height: 100%; max-height: 600px; }
  .sol-hero__media::after {   /* fundido blanco hacia la izquierda, como en el home (no es overlay oscuro) */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--white) 0%, rgb(255 255 255 / .85) 12%, rgb(255 255 255 / 0) 50%);
  }
}

/* Variante con banner ancho del original (Marketing: marketing-hero.png, 2032×608, ya fundido a blanco
   por la izquierda): igual que el home. Bajo 1200px la foto va debajo, recortada sobre la persona; desde
   1200px es el fondo del hero a todo el ancho y su alto define el del hero. Sin fundido extra. */
.sol-hero--wide .sol-hero__media picture { display: contents; }
.sol-hero--wide .sol-hero__media img { aspect-ratio: auto; height: clamp(220px, 48vw, 400px); object-fit: cover; object-position: 82% 30%; }
@media (min-width: 960px) {
  .sol-hero--wide { display: block; }
  .sol-hero--wide .sol-hero__inner { max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding: var(--s-10) var(--gutter); }
  .sol-hero--wide .sol-hero__media::after { content: none; }
}
@media (min-width: 1200px) {
  .sol-hero--wide { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sol-hero--wide :is(.sol-hero__inner, .sol-hero__media) { grid-area: 1 / 1; }
  .sol-hero--wide .sol-hero__inner { width: 100%; align-self: center; }
  .sol-hero--wide .sol-hero__media img { height: 100%; max-height: none; object-position: 100% 30%; }
  .sol-hero--wide .sol-hero__inner > * { max-width: 520px; }
}

/* Sección navy (tarjetas; en Soporte, la de los bloques): eyebrow naranjo, H2 blanco, barra naranja.
   El eyebrow usa --brand-300: el naranjo de marca no llega a 4,5:1 sobre navy en texto chico. */
:is(.page-marketing, .page-engagement, .page-soporte) .ind-dark .sol-head h2 { color: #fff; }
:is(.page-marketing, .page-engagement, .page-soporte) .ind-dark .sol-head .has-bar { --bar-color-dark: var(--brand-orange); }
:is(.page-marketing, .page-engagement, .page-soporte) .ind-dark .eyebrow::before { background: var(--brand-orange); }
.on-dark .sol-card { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); box-shadow: none; }
.on-dark :is(.sol-card, .sol-block) h3 { color: #fff; }
.on-dark :is(.sol-card, .sol-block) p { color: var(--ink-on-dark); }

/* =================== SOBRE NOSOTROS =================== */
.page-sobre-nosotros { --accent: var(--brand-orange-dark); --accent-strong: var(--brand-orange-deep); --accent-on-dark: var(--brand-orange); --accent-ink: #fff; }

/* ---------- Hero: principal-scaled.jpg de fondo a todo el ancho, con un fundido blanco de izquierda a
   derecha bajo el título (como el home: velo claro, nunca oscuro). Las personas quedan a la derecha. ---------- */
.about-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(260px, 20vw + 120px, 400px); background: var(--white); }
.about-hero__media { position: absolute; inset: 0; z-index: -2; }
.about-hero__media picture { display: contents; }
.about-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; }
.about-hero::before {   /* móvil: el título cae sobre la foto, velo más parejo */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .85) 55%, rgb(255 255 255 / .55) 100%);
}
.about-hero__inner { width: 100%; padding-block: var(--s-12); }
.about-hero__text { display: grid; justify-items: start; gap: var(--s-3); }
.about-hero .breadcrumb { margin-bottom: var(--s-3); }
.about-hero__title { font-size: var(--fs-h1); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; color: var(--brand-navy); }
.about-hero__title strong { font-weight: 800; color: var(--brand-orange); }   /* texto grande en negrita: AA grande */
@media (min-width: 768px) {
  /* fundido de izquierda a derecha + un velo blanco suave (25%) sobre toda la foto, como en Modelo de entrega */
  .about-hero::before {
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 22%, rgb(255 255 255 / .88) 34%, rgb(255 255 255 / .5) 48%, rgb(255 255 255 / .25) 62%);
  }
  .about-hero__inner { padding-block: var(--s-16); }
}

/* ---------- Visión: etiqueta (ícono + H2) y la visión como declaración grande | imagen con halo cálido.
   Menos aire que el resto: la imagen ya es alta y viene justo después del hero. ---------- */
.page-sobre-nosotros .about-vision-sec { padding-block: var(--section-y); }
.about-vision { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 960px) { .about-vision { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-16); } }
.about-vision__body { display: grid; gap: var(--s-6); max-width: 34rem; }
.about-vision__label { display: flex; align-items: center; gap: var(--s-4); }
.about-vision__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-50); color: var(--brand-orange-dark); }
.about-vision__icon svg { width: 28px; height: 28px; }
.about-vision__label h2 { font-size: var(--fs-h2); font-weight: 800; color: var(--brand-navy); }
.about-vision__statement {
  position: relative; padding-left: var(--s-6); border-left: 4px solid var(--brand-orange);
  font-size: var(--fs-base); font-weight: 500; line-height: var(--lh-body); color: var(--brand-navy);
}
.about-vision__media { position: relative; display: flex; justify-content: center; isolation: isolate; }
.about-vision__media::before {   /* halo cálido detrás del círculo */
  content: ""; position: absolute; z-index: -1; inset: 6% 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(254 79 31 / .16), rgb(254 79 31 / 0));
}
.about-vision__media picture { display: contents; }
.about-vision__media img { width: auto; height: auto; max-width: 100%; max-height: 440px; }

/* ---------- Plataforma Cloud: barra corta arriba + titular en dos tonos; tres tarjetas navy numeradas ---------- */
.about-title { font-size: var(--fs-h2); font-weight: 400; line-height: 1.25; color: var(--brand-navy); text-wrap: balance; }
.about-title::before { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; margin: 0 auto var(--s-5); background: var(--brand-orange); }
.about-title strong { font-weight: 800; color: var(--brand-orange); }   /* titular grande en negrita: AA grande */
.about-cards { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-10) var(--s-8) var(--s-8);
  background: var(--brand-navy); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.about-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gradient-warm); }   /* filo superior cálido */
.about-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.about-card__num {
  position: absolute; top: var(--s-4); right: var(--s-6);
  font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: rgb(255 255 255 / .07);   /* número decorativo, no es texto */
}
.about-card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-lg); background: rgb(254 79 31 / .14); color: var(--brand-orange); }
.about-card__icon svg { width: 28px; height: 28px; }
.about-card p { color: #fff; line-height: var(--lh-body); }
@media (prefers-reduced-motion: reduce) { .about-card { transition: none; } .about-card:hover { transform: none; } }

/* ---------- Cuatro pasos: banda con degradé magenta→naranjo (--gradient-warm) y anillos finos de fondo;
   círculos blancos a caballo sobre su borde superior. Columnas 1 y 4 más anchas (textos el doble de largos)
   para emparejar alturas, con divisores finos. Tablet: 2×2; móvil: apiladas, ícono arriba de cada una. ---------- */
.about-steps {
  --step-icon: 72px; display: grid; gap: var(--s-10);
  padding: var(--s-10) var(--s-6); border-radius: var(--r-2xl); color: #fff;
  background:
    radial-gradient(circle at 100% 0%, transparent 0 239px, rgb(255 255 255 / .16) 240px 241.5px, transparent 242px),
    radial-gradient(circle at 100% 0%, transparent 0 359px, rgb(255 255 255 / .1) 360px 361.5px, transparent 362px),
    var(--gradient-warm);
  box-shadow: 0 30px 60px -30px rgb(202 54 108 / .45);
}
.about-step { display: grid; gap: var(--s-3); align-content: start; }
.about-step__icon {
  display: grid; place-items: center; width: var(--step-icon); height: var(--step-icon); border-radius: 50%;
  background: #fff; color: var(--brand-orange-dark); box-shadow: 0 10px 24px -10px rgb(var(--navy-900-rgb) / .35);
}
.about-step__icon svg { width: 32px; height: 32px; }
.about-step__num { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.about-step p { color: #fff; font-size: var(--fs-base); line-height: 1.6; }
@media (min-width: 700px) and (max-width: 1199.98px) { .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-10); gap: var(--s-10) var(--s-12); } }
/* Desde 1200px: 4 columnas (con 16px de texto, a menos ancho quedan demasiado angostas) */
@media (min-width: 1200px) {
  .about-steps {
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 0; margin-top: calc(var(--step-icon) / 2);
    padding: calc(var(--step-icon) / 2 + var(--s-8)) var(--s-6) var(--s-12);
  }
  .about-step { position: relative; padding-inline: var(--s-6); }
  .about-step + .about-step { border-left: 1px solid rgb(255 255 255 / .28); }
  .about-step__icon { position: absolute; left: var(--s-6); top: calc(-1 * (var(--step-icon) + var(--s-8))); }
}

/* =================== MODELO DE ENTREGA CONTINUA =================== */
.page-modelo-entrega { --accent: var(--brand-orange-dark); --accent-strong: var(--brand-orange-deep); --accent-on-dark: var(--brand-orange); --accent-ink: #fff; }

/* Hero: mismo tratamiento que Sobre Nosotros (foto de fondo a todo el ancho, fundido blanco de izquierda a
   derecha bajo el título). La persona de la foto queda a la derecha. */
.me-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(280px, 24vw + 100px, 420px); background: var(--white); }
.me-hero__media { position: absolute; inset: 0; z-index: -2; }
.me-hero__media picture { display: contents; }
.me-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; }
.me-hero::before {   /* móvil: el título cae sobre la foto, velo más parejo */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .85) 55%, rgb(255 255 255 / .55) 100%);
}
.me-hero__inner { display: grid; justify-items: start; gap: var(--s-4); width: 100%; padding-block: var(--s-12); }
.me-hero__title {
  font-size: var(--fs-h1); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--brand-navy);
}
.me-hero__title span { display: block; color: var(--brand-orange); }   /* texto grande en negrita: AA grande */
@media (min-width: 768px) {
  /* fundido de izquierda a derecha + un velo blanco suave (25%) sobre toda la foto */
  .me-hero::before { background: linear-gradient(90deg, var(--white) 0%, var(--white) 24%, rgb(255 255 255 / .88) 36%, rgb(255 255 255 / .5) 50%, rgb(255 255 255 / .25) 64%); }
  .me-hero__inner { padding-block: var(--s-16); }
}

/* Franja introductoria: angosta, a todo el ancho, texto centrado entre dos bordes sutiles */
.me-intro { border-block: 1px solid var(--line); background: var(--white); padding-block: var(--section-y); }
.me-intro p { max-width: 62rem; margin-inline: auto; text-align: center; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-600); text-wrap: balance; }
.me-intro strong { display: block; font-weight: 800; color: var(--brand-navy); }

/* Persona (círculo navy, en el PNG) | H2 en dos pesos + barra + párrafo. Poco aire abajo: la flecha une
   esta sección con los beneficios. */
.page-modelo-entrega .me-main { padding-bottom: var(--s-8); }
.me-split { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 960px) { .me-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-16); } }
.me-split__media { display: flex; justify-content: center; }
.me-split__media picture { display: contents; }
.me-split__media img { width: auto; height: auto; max-width: 100%; max-height: 480px; }
.me-split__body { display: grid; gap: var(--s-6); }
.me-split__body h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.3; color: var(--brand-navy); --bar-color: var(--brand-orange); }
.me-split__body h2 strong { font-weight: 800; }
.me-split__body p { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-600); }

/* Flecha curva de transición, centrada, apuntando hacia abajo */
.me-arrow { display: flex; justify-content: center; color: var(--brand-orange); }
.me-arrow svg { width: 52px; height: 78px; }

/* Tres beneficios de igual alto. Los títulos nunca se cortan dentro de una palabra: sin guiones y con
   columnas anchas (3 columnas solo desde 900px); overflow-wrap solo como red de seguridad. */
.page-modelo-entrega .me-benefits-sec { padding-top: var(--s-8); }
.me-benefits { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .me-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.me-benefit {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-10) var(--s-8);
  text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.me-benefit__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--brand-50); color: var(--brand-orange-dark); }
.me-benefit__icon svg { width: 32px; height: 32px; }
.me-benefit h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.3; color: var(--brand-orange-deep); hyphens: none; overflow-wrap: normal; text-wrap: balance; }
.me-benefit h3::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; margin: var(--s-3) auto 0; background: var(--brand-orange); }
.me-benefit p { color: var(--brand-navy); line-height: var(--lh-body); }

/* =================== TÉRMINOS Y CONDICIONES (de Lynn y de Seguridad: documentos legales) =================== */
/* Hero: mismo tratamiento que Sobre Nosotros y Modelo de entrega (foto de fondo a todo el ancho, fundido blanco
   de izquierda a derecha y velo blanco suave encima). La persona de la foto queda a la derecha. */
.legal-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(260px, 20vw + 120px, 400px); background: var(--white); }
.legal-hero__media { position: absolute; inset: 0; z-index: -2; }
.legal-hero__media picture { display: contents; }
.legal-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 25%; }
.legal-hero::before {   /* móvil: el título cae sobre la foto, velo más parejo */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .85) 55%, rgb(255 255 255 / .55) 100%);
}
.legal-hero__inner { width: 100%; padding-block: var(--s-12); }
/* Términos de Lynn: encuadre más abajo en la foto (se ven hombros y teléfono; la persona sube en la banda) */
.page-terminos-lynn .legal-hero__media img { object-position: 60% 45%; }
.legal-hero .breadcrumb { margin-bottom: var(--s-4); }
@media (min-width: 768px) {
  .legal-hero::before { background: linear-gradient(90deg, var(--white) 0%, var(--white) 24%, rgb(255 255 255 / .88) 36%, rgb(255 255 255 / .5) 50%, rgb(255 255 255 / .25) 64%); }
  .legal-hero__inner { padding-block: var(--s-16); }
}
.legal-hero__title { font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--brand-navy); }
.legal-hero__title span { display: block; font-weight: 400; text-transform: none; color: var(--brand-orange); }   /* 40px: AA grande */

/* Párrafo del original bajo el título (fuera del hero por su largo), en ancho de lectura */
.legal-terms__intro { max-width: 70ch; margin-bottom: var(--s-4); font-size: var(--fs-base); line-height: 1.7; color: var(--ink-600); }

/* "Estos términos se aplican…": título más chico que el H1, y debajo las 11 secciones como acordeones */
.page-legal .legal-terms { padding-top: var(--section-y); }
.legal-terms__title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.25; color: var(--brand-navy); margin: var(--s-10) 0 var(--s-4); }
.legal-terms__title--caps { letter-spacing: -0.01em; }   /* el original lo escribe en mayúsculas: se respeta tal cual */
.legal-accs { display: grid; gap: var(--s-3); margin-top: var(--s-8); }
.legal-acc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-acc[open] { border-color: color-mix(in srgb, var(--brand-orange) 30%, var(--line)); box-shadow: var(--shadow-sm); }
.legal-acc summary {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: inherit;
  list-style: none; cursor: pointer; font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--brand-navy);
}
.legal-acc summary::-webkit-details-marker { display: none; }
.legal-acc__title { flex: 1; }
.legal-acc__chev { flex: none; width: 20px; height: 20px; color: var(--brand-navy); transition: transform var(--t) var(--ease); }
.legal-acc[open] .legal-acc__chev { transform: rotate(180deg); color: var(--brand-600); }
@media (prefers-reduced-motion: reduce) { .legal-acc__chev { transition: none; } }
.legal-num { color: var(--brand-orange-deep); }
.legal-acc__body { max-width: 70ch; padding: 0 var(--s-6) var(--s-6); }
.legal-acc__body h3 { margin-top: var(--s-6); font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--brand-navy); }
.legal-acc__body > :first-child { margin-top: 0; }
.legal-acc__body p { margin-top: var(--s-2); font-size: var(--fs-base); line-height: 1.7; color: var(--ink-600); }
.legal-items { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding-left: var(--s-5); border-left: 2px solid var(--line); }
.legal-items li { font-size: var(--fs-base); line-height: 1.7; color: var(--ink-600); }
.legal-items strong { color: var(--brand-navy); }

/* =================== LEA (submarca: azul primario, naranjo de acento) =================== */
.page-lea { --accent: var(--brand-blue); --accent-strong: var(--brand-blue); --accent-on-dark: var(--brand-blue-light); --accent-ink: #fff; --lea-curve: clamp(36px, 5vw, 80px); }
.page-lea main { overflow-x: clip; }

/* Textura diagonal muy sutil (CSS, no imagen) para el hero y "Por qué complementar" */
.lea-texture {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .7) 0 2px, transparent 2px 46px),
                    linear-gradient(120deg, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 60%);
}

/* Botón azul marino sólido (tríptico) */
.lea-btn--navy { --btn-bg: var(--brand-navy); --btn-fg: #fff; }
.lea-btn--navy:hover { --btn-bg: var(--navy-950); box-shadow: 0 10px 24px -10px rgb(var(--navy-950-rgb) / .6); }
.lea-btn--navy svg { width: 18px; height: 18px; }

/* ---------- 1. Hero ---------- */
.lea-hero { position: relative; overflow: hidden; }
.lea-hero__grid { display: grid; gap: var(--s-10); align-items: center; padding-block: var(--s-12); }
@media (min-width: 960px) { .lea-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-16); padding-block: var(--s-12); } }
/* Poco aire entre el hero y la primera sección (el hero ya tiene su propio padding) */
.page-lea .lea-what { padding-top: var(--section-y); }
.lea-hero__body { display: grid; justify-items: start; gap: var(--s-6); }
.lea-hero__title { font-size: var(--fs-h1); font-weight: 500; line-height: 1.2; color: var(--brand-navy); }
.lea-hero__title strong { font-weight: 800; color: var(--brand-blue); }
.lea-hero__logo { display: block; margin-top: var(--s-5); }
.lea-hero__logo img { width: clamp(200px, 22vw, 300px); height: auto; }
.lea-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lea-hero__media { position: relative; display: flex; justify-content: center; isolation: isolate; }
.lea-hero__mark { position: absolute; z-index: -1; inset: 50% auto auto 50%; width: min(120%, 560px); transform: translate(-55%, -50%); opacity: .08; }
.lea-hero__mark img, .lea-hero__photo img { display: block; width: 100%; height: auto; }
.lea-hero__photo { width: min(100%, 357px); }

/* ---------- 2. Qué es LEA / 5. Por qué complementar: imagen | texto ---------- */
.lea-split { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 960px) { .lea-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); } }
.lea-split__media { display: flex; justify-content: center; }
.lea-split__media picture { display: contents; }
.lea-split__media img { width: auto; height: auto; max-width: 100%; max-height: 520px; }
.lea-split__body { display: grid; gap: var(--s-4); max-width: 34rem; }
.lea-split__icon img { width: 88px; height: auto; display: block; }
.lea-split__body p { color: var(--ink-600); line-height: var(--lh-body); }
.lea-split__body strong { color: var(--brand-blue); }

/* ---------- 3. Banda azul: borde superior curvo (CSS), burbuja sobre la curva y laptop (con su arco naranjo, que
   viene en el PNG) que sobresale ~15% de su alto por debajo de la banda. Móvil y tablet: contenido dentro. ---------- */
.lea-band { position: relative; isolation: isolate; margin-top: var(--lea-curve); background: var(--brand-blue); color: #fff; }
.lea-band::before {   /* tapa convexa: media elipse más ancha que la pantalla */
  content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: calc(-1 * var(--lea-curve)); height: calc(var(--lea-curve) * 2);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: inherit;
}
.lea-band__grid { position: relative; display: grid; gap: var(--s-10); align-items: center; padding-block: var(--s-16) var(--s-12); }
.lea-band__bubble { position: absolute; z-index: 1; top: calc(-1 * var(--lea-curve) - 8px); left: var(--gutter); width: 96px; }
.lea-band__bubble img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgb(var(--navy-900-rgb) / .25)); }
.lea-band__text { max-width: 32rem; font-size: var(--fs-h3); line-height: 1.55; color: #fff; }   /* frase destacada de la banda: nivel h3 de la escala (a pedido) */
.lea-band__text strong { font-weight: 800; color: #fff; }
.lea-band__media { display: flex; justify-content: center; }
.lea-band__media picture { display: contents; }
.lea-band__media img { display: block; width: 100%; max-width: 640px; height: auto; }
@media (min-width: 960px) {
  .lea-band__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-12); padding-block: 0; }
  /* el laptop sube sobre la curva: así no queda una franja azul vacía arriba y el texto sube con él */
  .lea-band__media { margin-top: calc(-0.7 * var(--lea-curve)); }
  /* La banda termina al ~85% del laptop: margen negativo = 15% de su alto. El % de un margen se mide sobre el ancho
     del contenedor; el laptop ocupa ese ancho completo y su alto es 0,522 × ancho.
     Como la fila de la grilla mide solo la parte visible, el texto queda centrado respecto de ella. */
  .lea-band__media img { margin-bottom: -8%; }   /* sobresale ~15% de su alto (0,15 × 0,522 ≈ 8%) */
  .lea-band__body { padding-block: var(--s-6); }
}

/* ---------- 4. Capacidades: dos columnas, ícono circular a la izquierda; deja lugar al laptop que sobresale ---------- */
.page-lea .lea-caps-sec { padding-top: var(--section-y); }
@media (min-width: 960px) { .page-lea .lea-caps-sec { padding-top: calc(var(--section-y) + 52px); } }   /* 15% de un laptop de ≤340px de alto */
.lea-caps { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .lea-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-16); } }
.lea-caps__col { display: grid; gap: var(--s-8); align-content: start; }
.lea-cap { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.lea-cap__icon img { display: block; width: 64px; height: auto; }
.lea-cap p { color: var(--ink-600); line-height: var(--lh-body); }
.lea-cap strong.is-blue { color: var(--brand-blue); }
.lea-cap strong.is-orange { color: var(--brand-orange-deep); }   /* texto chico: naranjo oscuro para AA */

/* ---------- 5. Por qué complementar Genesys Cloud ---------- */
.lea-why__icon img { max-height: 280px; }   /* ilustración de apoyo: más chica que las fotos de sección */
.lea-why__title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.25; color: var(--brand-blue); }
.lea-why__title span { color: var(--brand-orange); }   /* título grande en negrita: AA grande */

/* ---------- 6. CTA final: foto oscura con overlay; formulario en tarjeta translúcida con blur ---------- */
.lea-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-y); color: #fff; background: var(--navy-950); }
.lea-cta__bg { position: absolute; inset: 0; z-index: -2; }
.lea-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.lea-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--navy-950-rgb) / .9) 0%, rgb(var(--navy-950-rgb) / .72) 55%, rgb(var(--navy-950-rgb) / .55) 100%); }
.lea-cta__grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 960px) { .lea-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s-16); } }
.lea-cta__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.lea-cta__check img { display: block; width: 48px; height: 48px; margin-top: 4px; }
.lea-cta__head h2 { font-size: var(--fs-h2); line-height: 1.25; color: #fff; }
.lea-cta__head h2 span { color: var(--brand-orange); }
.lea-form {
  padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl);
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5);
}
.lea-form .form-status.is-success { background: rgb(255 255 255 / .92); }
/* select con etiqueta flotante fija (siempre tiene valor) y chevron propio */
.field--select select {
  width: 100%; height: 60px; padding: 24px 44px 8px 16px; border-radius: var(--r-md);
  background: #fff; border: 1.5px solid var(--line-strong); font: inherit; font-size: 1rem; color: var(--ink); appearance: none; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field--select select:hover { border-color: var(--line-hover); }
.field--select select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(var(--navy-rgb) / .14); }
.field--select label { transform: translateY(-11px) scale(.78); color: var(--navy); font-weight: 600; }
.field__chev { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; }

/* =================== CENTRO DE RECURSOS (acento azul) =================== */
.page-recursos { --accent: var(--brand-blue); --accent-strong: var(--brand-blue); --accent-on-dark: var(--brand-blue-light); --accent-ink: #fff; }

/* Hero: foto (lado derecho del banner original) en la mitad derecha, fundido blanco de izquierda a derecha */
.rc-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(300px, 22vw + 140px, 460px); background: var(--white); }
.rc-hero__media { position: absolute; inset: 0; z-index: -2; }
.rc-hero__media picture { display: contents; }
.rc-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.rc-hero::before {   /* móvil: el texto cae sobre la foto, velo más parejo */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .88) 60%, rgb(255 255 255 / .6) 100%);
}
.rc-hero__inner { display: grid; justify-items: start; gap: var(--s-4); width: 100%; padding-block: var(--s-12); }
.rc-hero .breadcrumb { margin-bottom: var(--s-2); }
.rc-hero__title { max-width: 18ch; font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; color: var(--brand-blue); }
.rc-hero__lead { max-width: 34rem; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-600); }
@media (min-width: 768px) {
  .rc-hero__media { left: 42%; }
  .rc-hero::before { background: linear-gradient(90deg, var(--white) 0%, var(--white) 42%, rgb(255 255 255 / .75) 52%, rgb(255 255 255 / .2) 72%, rgb(255 255 255 / .1) 100%); }
  .rc-hero__inner { padding-block: var(--s-16); }
}

/* Títulos de sección en azul; primera sección con poco aire tras el hero */
.rc-title { color: var(--brand-blue); }
.page-recursos .rc-news { padding-top: var(--section-y); }

/* ---------- Carrusel (JS: assets/js/carousel.js) ---------- */
.carousel {
  position: relative; max-width: 960px; margin-inline: auto; padding: clamp(12px, 2vw, 20px) clamp(12px, 2vw, 20px) var(--s-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.carousel__viewport { overflow: hidden; border-radius: var(--r-lg); touch-action: pan-y; }
.carousel__track { display: flex; transition: transform 450ms var(--ease); }
.carousel__slide { flex: 0 0 100%; aspect-ratio: 16 / 9; background: var(--surface); }
.carousel__slide picture { display: contents; }
.carousel__slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.carousel__btn {
  position: absolute; top: calc(50% - var(--s-4)); transform: translateY(-50%); z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgb(255 255 255 / .92); color: var(--brand-navy); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.carousel__btn:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn--prev { left: clamp(4px, 1.5vw, 28px); }
.carousel__btn--next { right: clamp(4px, 1.5vw, 28px); }
.carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--s-4); }
.carousel__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--line-strong); transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.carousel__dot::after { content: ""; position: absolute; inset: -8px; }   /* área táctil de 26px */
.carousel__dot { position: relative; }
.carousel__dot:hover { background: var(--line-hover); }
.carousel__dot[aria-current="true"] { background: var(--brand-blue); transform: scale(1.25); }
@media (max-width: 599px) { .carousel__btn { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } }

/* ---------- Temas de interés: 3×2 / 2 / 1, tarjetas de igual alto con "Ver más" al pie ---------- */
.topic-grid { display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-6) var(--s-6);
  text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.topic-card__icon img { display: block; width: 72px; height: 72px; margin-bottom: var(--s-2); }
.topic-card h3 { font-size: var(--fs-h3); line-height: 1.3; color: var(--brand-blue); }
.topic-card p { color: var(--ink-600); line-height: var(--lh-body); }
.topic-card__link {
  margin-top: auto; padding-top: var(--s-3); display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--brand-blue); text-underline-offset: 3px;
}
.topic-card__link:hover { text-decoration: underline; }
.topic-card__link svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.topic-card__link:hover svg { transform: translateX(3px); }

/* =================== 404 =================== */
.page-404 .links-404 { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.page-404 .links-404 a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--navy);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.page-404 .links-404 a:hover { border-color: var(--navy); }