:root {
  --brand: #6C6CF5;
  /* El JSON escribe --bg-claro / --word-claro; el tema decide cuál se usa. */
  --bg: var(--bg-claro, #EEF1FB);
  --word: var(--word-claro, #FFFFFF);
  --surface: #FFFFFF;
  --ink: #16182B;
  --muted: #5A5F7A;
  --linea: rgba(22, 24, 43, 0.12);
  --sombra: rgba(30, 32, 90, 0.55);
  --tilt: -8deg;
  --display: "alfarn-2", Impact, "Arial Black", sans-serif;
}

/* Modo oscuro: por preferencia del sistema, salvo que se haya elegido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #0D0F1C;
    --word: #13162A;
    --surface: #161A2B;
    --ink: #F2F3F8;
    --muted: #A0A5C0;
    --linea: rgba(255, 255, 255, 0.14);
    --sombra: rgba(0, 0, 0, 0.75);
  }
}

/* …y por elección explícita, que manda sobre el sistema. */
:root[data-tema="oscuro"] {
  --bg: #0D0F1C;
  --word: #13162A;
  --surface: #161A2B;
  --ink: #F2F3F8;
  --muted: #A0A5C0;
  --linea: rgba(255, 255, 255, 0.14);
  --sombra: rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6rem 1.25rem;
}

.marquee-bg {
  position: absolute;
  inset: -20% -30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  transform: rotate(var(--tilt));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  /* Las palabras se desvanecen hacia los costados: entran y salen en lugar de cortarse. */
  -webkit-mask-image: linear-gradient(to right, transparent 12%, #000 38%, #000 62%, transparent 88%);
  mask-image: linear-gradient(to right, transparent 12%, #000 38%, #000 62%, transparent 88%);
}

.row { overflow: hidden; flex: 0 0 auto; }

.track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation-name: slide;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.track.right { animation-direction: reverse; }

.track span {
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  font-size: calc(clamp(2.4rem, 5.2vw, 5rem) * var(--escala, 1));
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: var(--word);
  padding-right: 0.45em;
  white-space: nowrap;
}

/* El eslogan, cuando pasa por el fondo, va con más cuerpo que los rubros. */
.track span.destacada {
  color: color-mix(in srgb, var(--chip, var(--brand)) 16%, transparent);
  transition: color 0.25s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .track span.destacada {
    color: color-mix(in srgb, var(--chip, var(--brand)) 34%, transparent);
  }
}
:root[data-tema="oscuro"] .track span.destacada {
  color: color-mix(in srgb, var(--chip, var(--brand)) 34%, transparent);
}

@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

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

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* El logo es un SVG de tamaño fijo: el rectángulo lleva el color del país y las letras
   son un calado (mask) por el que se ven las palabras del fondo. */
/* Sombra por fuera: box-shadow (no filter) no se pinta dentro de la caja, así el calado
   de las letras queda limpio. */
.logo {
  display: block;
  line-height: 0;
  box-shadow: 0 34px 70px -28px var(--sombra), 0 12px 28px -14px var(--sombra), 0 4px 10px -6px var(--sombra);
}
#logo-svg {
  display: block;
  width: clamp(16rem, 40vw, 26rem);
  height: auto;
}
#logo-svg text {
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  /* Las letras del logo van más juntas que el texto corriente. */
  letter-spacing: -0.045em;
}
#logo-rect {
  fill: var(--brand);
  /* Apenas translúcido: las palabras del fondo se insinúan también sobre el color. */
  fill-opacity: 0.93;
  transition: fill 0.25s ease;
}
#logo-line2 {
  fill: #fff;
  transition: fill 0.25s ease;
}

/* En claro manda el calado; la copia sólida está apagada. */
#logo-line1-solido { display: none; fill: #fff; }

/* En oscuro el calado se apaga: el INN va sólido en blanco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) #logo-rect { mask: none; }
  :root:not([data-tema="claro"]) #logo-line1-solido { display: block; }
}
:root[data-tema="oscuro"] #logo-rect { mask: none; }
:root[data-tema="oscuro"] #logo-line1-solido { display: block; }

/* Qué hacemos, en una línea */
.intro {
  max-width: 32rem;
  margin: 1.1rem 0 0;
  font-size: clamp(0.9rem, 1.7vw, 1.02rem);
  line-height: 1.5;
  color: var(--muted);
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Países: sólo la bandera, recortada en esfera (o cuadro si el JSON lo pide). */
.countries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 12.2rem; /* 5 banderas por fila */
  margin-top: 0.5rem;
}
.countries a {
  --size: 2.1rem;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface);
  text-decoration: none;
  box-shadow: 0 0 0 2px var(--surface), 0 6px 14px -10px var(--sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.countries.is-square a { border-radius: 0.5rem; }

.countries .flag {
  font-size: var(--size);
  line-height: 1;
  /* la bandera es 3:2, se agranda para cubrir todo el recorte circular */
  transform: scale(1.75);
}
.countries .name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.countries a:hover,
.countries a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--chip, var(--brand)), 0 10px 18px -12px rgba(30, 32, 90, 0.9);
  outline: none;
}
.countries a.is-active {
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px var(--chip, var(--brand)), 0 10px 18px -12px rgba(30, 32, 90, 0.9);
}

/* --------- Transiciones --------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* El fondo sólo aparece: animar su `transform` le borraba la inclinación. */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes swap-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Entrada: logo, banderas y panel aparecen escalonados. */
.logo { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.countries { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.marquee-bg { animation: fade 1.1s ease both; }

/* Al cambiar de país: la línea del logo y las tarjetas vuelven a entrar. */
#logo-line2.swap { animation: swap-in 0.35s ease both; }
.service-card {
  animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.country-services-title.swap-title { animation: swap-in 0.35s ease both; }

@media (prefers-reduced-motion: reduce) {
  .logo, .countries, .intro, .marquee-bg, .service-card,
  .country-services-title.swap-title, #logo-line2.swap { animation: none; }
}

/* Servicios del país elegido */
.country-services {
  margin-top: 1.1rem;
  max-width: 44rem;
  text-align: center;
}
.country-services-title {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chip, var(--brand));
}
.country-services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 13rem;
  padding: 0.7rem 0.9rem;
  text-align: left;
  text-decoration: none;
  background: var(--surface);
  border-left: 3px solid var(--chip, var(--brand));
  box-shadow: 0 10px 24px -18px rgba(30, 32, 90, 0.9);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -18px rgba(30, 32, 90, 0.95);
}
.service-card strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink);
}
.service-card span {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(60, 60, 200, 0.8);
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--linea);
}

/* ---------- SERVICES ---------- */
.services {
  background: var(--surface);
  padding: clamp(3.5rem, 8vw, 6rem) 1.25rem;
}
.services h2, .cta h2 {
  margin: 0 auto 2.2rem;
  max-width: 60rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  max-width: 60rem;
  margin: 0 auto;
}
.card {
  background: var(--bg);
  border-radius: 1.25rem;
  padding: 1.6rem;
}
.card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 800; }
.card p { margin: 0; color: var(--muted); line-height: 1.55; }

/* ---------- CTA + FOOTER ---------- */
.cta {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 1.25rem;
}
.cta p { color: var(--muted); margin: 0 0 1.6rem; }

footer {
  background: var(--bg);
  color: var(--muted);
  border-top: 1px solid var(--linea);
  padding: 2rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
footer p { margin: 0; font-size: 0.9rem; opacity: 0.75; }
footer nav { display: flex; gap: 1.25rem; }
footer a { color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 600; opacity: 0.85; }
footer a:hover { opacity: 1; }

/* --------- Herramientas fijas: tema + menú inclusivo --------- */
.herramientas {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 0.5rem;
}

.a11y-boton,
.tema-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 12px 28px -16px var(--sombra);
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.a11y-boton:hover,
.tema-boton:hover { transform: translateY(-2px); color: var(--brand); border-color: var(--brand); }
.a11y-boton svg,
.tema-boton svg { width: 1.25rem; height: 1.25rem; }

.a11y-punto {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px var(--surface);
}

.a11y { position: relative; }
.a11y-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6rem);
  width: min(19rem, calc(100vw - 2rem));
  padding: 1rem;
  text-align: left;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--linea);
  border-radius: 1rem;
  box-shadow: 0 30px 60px -30px var(--sombra);
}
.a11y-titulo { margin: 0; font-size: 0.9rem; font-weight: 800; }
.a11y-nota { margin: 0.3rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }

.a11y-grupo { margin: 1rem 0 0; padding: 0; border: 0; }
.a11y-grupo legend { padding: 0; font-size: 0.75rem; font-weight: 800; }
.a11y-tamanos { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.a11y-tamanos button {
  flex: 1;
  padding: 0.45rem 0.3rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 0.5rem;
  cursor: pointer;
}
.a11y-tamanos button[aria-checked="true"] {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

.a11y-lista { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.a11y-lista button {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  color: inherit;
}
.a11y-lista button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.a11y-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  padding: 0.12rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  transition: background 0.15s ease;
}
.a11y-switch span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.a11y-lista button[aria-checked="true"] .a11y-switch { background: #059669; }
.a11y-lista button[aria-checked="true"] .a11y-switch span { transform: translateX(0.95rem); }
.a11y-etiqueta { display: block; font-size: 0.78rem; font-weight: 700; }
.a11y-detalle { display: block; font-size: 0.7rem; line-height: 1.4; color: var(--muted); }

.a11y-reset {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* --------- Ajustes de accesibilidad (WCAG 2.2) --------- */

/* 1.4.4 Redimensionar el texto */
:root[data-texto="grande"] body { zoom: 1.15; }
:root[data-texto="enorme"] body { zoom: 1.3; }

/* 1.4.6 Contraste mejorado: se reescriben los tokens, no los componentes. */
:root[data-contraste="si"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #000000;
  --muted: #26292F;
  --linea: rgba(0, 0, 0, 0.45);
}
:root[data-contraste="si"][data-tema="oscuro"] {
  --bg: #000000;
  --surface: #05070A;
  --ink: #FFFFFF;
  --muted: #E4E7EC;
  --linea: rgba(255, 255, 255, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root[data-contraste="si"]:not([data-tema="claro"]) {
    --bg: #000000;
    --surface: #05070A;
    --ink: #FFFFFF;
    --muted: #E4E7EC;
    --linea: rgba(255, 255, 255, 0.55);
  }
}
/* El fondo de palabras es decorativo y baja el contraste: se atenúa. */
:root[data-contraste="si"] .marquee-bg { opacity: 0.12; }

/* 2.3.3 Animación por interacción · 2.2.2 Pausar, detener, ocultar */
:root[data-movimiento="si"] *,
:root[data-movimiento="si"] *::before,
:root[data-movimiento="si"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* 1.4.1 El color no puede ser el único indicador */
:root[data-enlaces="si"] a:not(.btn):not(.countries a):not(.logo) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* 1.4.12 Espaciado del texto */
:root[data-espaciado="si"] body {
  line-height: 1.6;
  letter-spacing: 0.045em;
  word-spacing: 0.08em;
}
:root[data-espaciado="si"] p,
:root[data-espaciado="si"] li { line-height: 1.8; }

/* Países que todavía no operan: visibles, apagados y sin acción. */
.countries a.is-soon {
  filter: grayscale(1);
  opacity: 0.45;
  cursor: not-allowed;
}
.countries a.is-soon:hover {
  transform: none;
  box-shadow: 0 0 0 2px var(--surface), 0 6px 14px -10px var(--sombra);
}

/* Servicio que todavía no se ofrece */
.service-card.is-soon {
  filter: grayscale(1);
  opacity: 0.45;
  cursor: not-allowed;
}
.service-card.is-soon:hover { transform: none; }
/* La cinta cruza la tarjeta de esquina a esquina. */
.service-card.is-soon { position: relative; overflow: hidden; }
.cinta {
  position: absolute;
  left: -20%;
  top: 50%;
  width: 140%;
  padding: 0.25rem 0;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  color: var(--surface);
  background: var(--ink);
  transform: translateY(-50%) rotate(-20deg);
  pointer-events: none;
}

/* --------- Contacto y redes --------- */
.contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  align-items: flex-start;
  justify-content: center;
  margin-top: 1.6rem;
  padding: 0;
  background: transparent;
}
.contacto-bloque { text-align: center; }
.contacto h2 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.contacto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; justify-items: center; }
.contacto-lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.contacto-lista a { transition: color 0.15s ease; }
.contacto-lista a:hover { color: var(--chip, var(--brand)); }
.contacto-lista svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--chip, var(--brand));
  flex: 0 0 auto;
  transition: color 0.25s ease;
}

.redes { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.1rem;
  padding: 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.redes a svg { color: var(--chip, var(--brand)); transition: color 0.25s ease; }
.redes a:hover {
  transform: translateY(-2px);
  background: var(--chip, var(--brand));
  border-color: var(--chip, var(--brand));
  color: #fff;
}
.redes a:hover svg { color: currentColor; }
.redes svg { width: 1.05rem; height: 1.05rem; }