/* =========================================================
   LAYOUT · contenedores, grillas, header, footer, secciones
   ========================================================= */

/* ---------- Contenedores y secciones ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }
.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section--tight-top { padding-top: var(--s-12); }

.section-head { max-width: 760px; display: grid; gap: var(--s-4); margin-bottom: var(--s-12); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head h2 { font-size: var(--fs-h2); }

/* ---------- Grillas ---------- */
.split { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

.grid-3 { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }

.grid-cards { display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); } }

/* Bloques imagen/texto alternados con ritmo vertical constante */
.rows { display: grid; gap: clamp(64px, 8vw, 120px); }
.row { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 960px) {
  .row { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
  .row:nth-child(even) .row__media { order: 2; }
  .row--flip .row__media { order: 2; }   /* bloques sueltos (una fila por sección): alternar a mano */
}
.row__body { display: grid; gap: var(--s-4); align-content: center; max-width: 560px; }
.row__body h2 { font-size: var(--fs-h2); }
.row__body p { color: var(--ink-600); }

/* ---------- Barra de anuncio ---------- */
/* Barra de anuncio en azul marino: contrasta con el header blanco que va debajo.
   (La regla "solo clientes y footer en oscuro" aplica a fondos de sección, no a esta barra.) */
.announce { background: var(--brand-navy); color: var(--white); font-size: 0.875rem; font-weight: 500; }  /* 14px; blanco sobre navy ≈ 13:1 */
.announce a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 11px var(--gutter); text-align: center; line-height: 1.45;
  transition: color var(--t-fast) var(--ease);
}
.announce a:hover { color: var(--brand-300); }
.announce strong {
  flex: none; color: #fff; background: var(--brand-600); padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .06em;
}
.announce .arrow { width: 16px; height: 16px; flex: none; transition: transform var(--t) var(--ease); }
.announce a:hover .arrow { transform: translateX(3px); }
@media (max-width: 599px) { .announce__rest { display: none; } }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -14px rgb(var(--navy-900-rgb) / .22); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); height: var(--header-h); }

/* Logo Lynn (cuadrado): solo escala proporcional (height fijo, width auto). Nunca recolorear ni invertir. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: var(--logo-h); width: auto; }
/* Separación lateral del logo respecto de la navegación (ver nota sobre área de protección en tokens.css) */
.header .logo { margin-inline-end: var(--s-6); }
.footer .logo img { height: var(--logo-footer-h); }
.footer .logo { margin-block-end: var(--s-4); }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--navy-50); color: var(--navy); }
.nav__link[aria-current="page"], .nav__link.is-current { color: var(--brand-700); }
.nav__link[aria-current="page"]::after, .nav__link.is-current::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand);
}
.nav__link .chev { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Ítem con link propio + chevron aparte que abre el submenú ("Sobre Nosotros") */
.nav__item--split { display: flex; align-items: center; }
.nav__item--split .nav__link { padding-right: 4px; }
.nav__toggle {
  display: grid; place-items: center; width: 28px; height: 40px; border-radius: var(--r-sm); color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__toggle:hover, .nav__toggle[aria-expanded="true"] { background: var(--navy-50); color: var(--navy); }
.nav__toggle .chev { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.nav__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.header__actions { display: flex; align-items: center; gap: var(--s-3); }
/* .header antepuesto para ganarle a .btn (components.css se carga después) */
.header .header__cta { display: none; }

.lang { display: none; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }
.lang > * { padding: 5px 10px; border-radius: var(--r-pill); }
.lang a { color: var(--ink-500); transition: color var(--t-fast) var(--ease); }
.lang a:hover { color: var(--navy); }
.lang [aria-current="true"] { background: var(--navy); color: #fff; }
.lang [aria-disabled="true"] { color: var(--ink-500); opacity: .5; cursor: not-allowed; }   /* EN: fase 2 */
.lang [aria-disabled="true"]:hover { color: var(--ink-500); }

.burger { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--navy); transition: background-color var(--t-fast) var(--ease); }
.burger:hover { background: var(--navy-50); }
.burger span { position: relative; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: background-color var(--t) var(--ease); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t-slow) var(--ease); }
.burger span::before { transform: translateY(-7px); }
.burger span::after { transform: translateY(7px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

@media (min-width: 768px) {
  .header .header__cta { display: inline-flex; min-height: 42px; padding: 10px 20px; }
}
@media (min-width: 1100px) {
  .nav { display: block; }
  .burger { display: none; }
  .lang { display: inline-flex; }
}

/* ---------- Menú móvil full-screen ---------- */
.mnav {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--white);
  padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0 at calc(100% - 38px) 36px); visibility: hidden;
  transition: clip-path var(--t-menu) var(--ease), visibility 0s linear var(--t-menu);
}
.mnav.is-open { clip-path: circle(150% at calc(100% - 38px) 36px); visibility: visible; transition-delay: 0s; }
.mnav__list > li {
  border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.mnav.is-open .mnav__list > li { opacity: 1; transform: none; }
.mnav.is-open .mnav__list > li:nth-child(2) { transition-delay: 40ms; }
.mnav.is-open .mnav__list > li:nth-child(3) { transition-delay: 80ms; }
.mnav.is-open .mnav__list > li:nth-child(4) { transition-delay: 120ms; }
.mnav.is-open .mnav__list > li:nth-child(5) { transition-delay: 160ms; }
.mnav.is-open .mnav__list > li:nth-child(6) { transition-delay: 200ms; }
.mnav__list > li > a, .mnav summary {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 4px;
  font-size: 1.25rem; font-weight: 700; color: var(--navy-900); letter-spacing: -0.02em; cursor: pointer; list-style: none;
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary .chev { width: 20px; height: 20px; color: var(--ink-500); transition: transform var(--t) var(--ease); }
.mnav details[open] summary .chev { transform: rotate(180deg); color: var(--brand); }
.mnav details ul { padding: 0 0 var(--s-4) var(--s-4); display: grid; gap: 2px; }
.mnav details a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink-600); font-weight: 500; }
.mnav details a:hover { background: var(--brand-50); color: var(--brand-700); }
.mnav__row { display: flex; align-items: center; justify-content: space-between; }
.mnav__row > a { flex: 1; padding: 18px 4px; font-size: 1.25rem; font-weight: 700; color: var(--navy-900); letter-spacing: -0.02em; }
.mnav__toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--ink-500); }
.mnav__toggle .chev { width: 20px; height: 20px; transition: transform var(--t) var(--ease); }
.mnav__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--brand); }
.mnav__split > ul { padding: 0 0 var(--s-4) var(--s-4); display: grid; gap: 2px; }
.mnav__split > ul[hidden] { display: none; }
.mnav__split > ul a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink-600); font-weight: 500; }
.mnav__split > ul a:hover { background: var(--brand-50); color: var(--brand-700); }
.mnav a[aria-current="page"] { color: var(--brand-700); font-weight: 700; }
.mnav__foot { margin-top: var(--s-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.mnav__foot .lang { display: inline-flex; }
@media (min-width: 1100px) { .mnav { display: none; } }

/* ---------- Hero de página interior (compacto, fondo claro) ----------
   Los únicos fondos oscuros del sitio son la sección de clientes y el footer. */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink-600);
  padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px);
}
.page-hero::before { /* acento gráfico azul de marca, sutil */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(38% 80% at 100% 0%, rgb(var(--blue-light-rgb) / .22), transparent 70%),
    radial-gradient(26% 60% at 92% 100%, rgb(var(--blue-rgb) / .10), transparent 70%);
}
.page-hero::after { /* grilla fina */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(rgb(var(--navy-rgb) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--navy-rgb) / .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(55% 90% at 90% 20%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(55% 90% at 90% 20%, #000 15%, transparent 70%);
}
.page-hero__inner { display: grid; gap: var(--s-4); max-width: 760px; justify-items: start; }
.page-hero h1 { color: var(--brand-navy); font-size: var(--fs-h1); }
.page-hero .lead { color: var(--ink-600); max-width: 640px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* ---------- Documento legal ---------- */
.legal { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 1024px) { .legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-16); } }
.legal__toc { display: none; }
@media (min-width: 1024px) {
  .legal__toc { display: block; position: sticky; top: calc(var(--header-h) + var(--s-6)); max-height: calc(100vh - var(--header-h) - var(--s-12)); overflow-y: auto; }
}
.legal__toc-mobile { margin-bottom: var(--s-4); }
@media (min-width: 1024px) { .legal__toc-mobile { display: none; } }

/* ---------- Artículo ---------- */
.article-layout { display: grid; gap: var(--s-10); }
.article-layout > * { min-width: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: var(--ink-on-dark); padding-block: var(--s-16) var(--s-8); font-size: var(--fs-sm); }
.footer__top { display: grid; gap: var(--s-10); padding-bottom: var(--s-10); border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 640px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s-8); } }
.footer__brand { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 640px) and (max-width: 1023px) { .footer__brand { grid-column: 1 / -1; } }
.footer__brand p { max-width: 320px; color: var(--ink-on-dark-muted); }
.footer__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: var(--s-4); }
.footer__links { display: grid; gap: var(--s-2); }
.footer__links a { color: var(--ink-on-dark); transition: color var(--t-fast) var(--ease); }
.footer__links a:hover, .footer__links a[aria-current="page"] { color: #fff; }
.footer__links a[aria-current="page"] { font-weight: 700; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-6); color: var(--ink-on-dark-subtle); font-size: var(--fs-xs); }
.footer__bottom a { color: #fff; font-weight: 700; transition: color var(--t-fast) var(--ease); }
.footer__bottom a:hover { color: var(--brand-300); }

/* ---------- Secciones compartidas (partials social-proof y cta-contacto) ---------- */
.partners { padding-block: var(--s-16) var(--section-y); }
.partners__title { font-size: var(--fs-h2); text-align: center; color: var(--navy-900); font-weight: 800; margin-bottom: var(--s-10); }   /* título de sección: mismo tamaño que el resto */

.clients { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-900); color: var(--ink-on-dark); }
.clients::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; left: 50%; top: -620px; transform: translateX(-50%); background: radial-gradient(circle, rgb(var(--blue-light-rgb) / .20), transparent 60%); }
.clients h2 { color: #fff; }
.clients__more { margin-top: var(--s-10); display: flex; justify-content: center; }

.contact { background: var(--surface); }
.contact__grid { display: grid; gap: var(--s-12); align-items: start; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.contact__intro { display: grid; gap: var(--s-5); }
.contact__intro h2 { font-size: var(--fs-h2); }

/* Bloques imagen/texto sobre fondo oscuro */
.on-dark .row__body p { color: var(--ink-on-dark); }
.on-dark .row__body h2 { color: #fff; }