/* =========================================================
   Kanvas v6
   Estructura, estilos y animaciones calcados del rediseño de
   First Digital Labs; solo cambia el branding (paleta, tipografías,
   símbolo, imágenes y contenido de Kanvas).
   ========================================================= */

@font-face {
  font-family: "Clash Display";
  src: url("../assets/fonts/ClashDisplay-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Branding Kanvas */
  --primary: #d2f65a;          /* lima Kanvas */
  --primary-light: #effcc2;    /* lima claro (título hero) */
  --text-black: #191919;       /* negro Kanvas */
  --surface-hover: #2b2b2b;

  /* Neutros del sistema */
  --white: #fff;
  --surface-primary: #f6f6f6;
  --surface-secondary: #ececec;
  --text-primary: #55575b;
  --text-bright: #77797d;
  --line-soft: rgba(140, 142, 146, .2);

  --font-display: "Clash Display", "Inter", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text-black);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 500; }

/* ---------- Layout ---------- */
.page-wrapper { overflow-x: clip; }
.page-padding { padding-left: 2rem; padding-right: 2rem; }
.container-large { width: 100%; max-width: 90rem; margin: 0 auto; position: relative; }
.container-medium { width: 100%; max-width: 75rem; margin: 0 auto; }
.padding-section { padding-top: 7.5rem; padding-bottom: 7.5rem; }
.padding-top-section { padding-top: 7.5rem; }
.max-width-xsmall { max-width: 24rem; width: 100%; }
.max-width-medium { max-width: 35rem; }

/* ---------- Tipografía ---------- */
.heading-style-h1 {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.035em;
}
.heading-style-h2-large {
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -.04em;
}
.heading-style-h2 {
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1.125;
  font-weight: 300;
  letter-spacing: -.04em;
}
.heading-style-h3 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -.045em;
}
.heading-style-h4 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -.03em;
}
.heading-style-h5 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -.04em;
}
.text-color-white { color: var(--white); }
.text-color-black { color: var(--text-black); }
.text-color-primary-light { color: var(--primary-light); }
/* Hero: colores de la referencia, que acompañan la imagen turquesa */
.home-header_container .text-color-primary-light { color: #adffec; }
.home-header_container .tag-icon { background: #4afab4; }
.text-style-muted { opacity: .85; }
.text-size-medium { font-size: 1.125rem; line-height: 1.5; }
.text-size-regular { font-size: 1rem; line-height: 1.5; color: var(--text-primary); }
.text-size-small { font-size: .875rem; line-height: 1.5; color: var(--text-primary); }
.text-style-3lines { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.caption {
  color: var(--text-bright);
  letter-spacing: .065em;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 600;
}
.caption.is-small { font-size: .688rem; line-height: 1.3; letter-spacing: 2px; }

.is-link { transition: color .3s, border-color .3s; }
.text-size-medium.is-link { text-decoration: underline; text-underline-offset: 2px; }
.text-size-medium.is-link:hover { color: var(--text-primary); text-decoration: none; }
.heading-style-h4.is-link { line-height: 1; border-bottom: 1px solid transparent; }
.heading-style-h4.is-link:hover { border-bottom-color: var(--text-primary); color: var(--text-primary); }
.link { color: var(--text-primary); text-decoration: underline; transition: color .3s; }
.link:hover { color: var(--surface-hover); }

/* ---------- Botones ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3.25rem;
  padding: 0 1.5rem;
  border: 1px solid var(--text-black);
  border-radius: 3rem;
  background-color: var(--text-black);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .145em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: all .3s;
}
.button:hover { border-color: var(--surface-hover); background-color: var(--surface-hover); }
.button.is-secondary { background-color: transparent; color: var(--text-black); }
.button.is-secondary:hover { background-color: var(--text-black); border-color: var(--text-black); color: #fff; }
.button.is-small { height: 2.25rem; padding: 0 .875rem; font-size: .688rem; letter-spacing: .175em; }
.button.max-width-full { width: 20rem; max-width: 100%; }
.button.is-icon {
  width: 3.25rem; height: 3.25rem; padding: .8rem;
  background: #fff; color: var(--text-black);
  border-color: var(--surface-secondary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
}
.button.is-icon svg { width: 24px; height: 24px; flex: none; }
.button.is-icon:hover { background-color: var(--text-black); border-color: var(--text-black); color: #fff; }
.button.is-social { width: 3.25rem; height: 3.25rem; padding: .5rem; background: transparent; color: var(--text-black); }
.button.is-social svg { width: 24px; height: 24px; }
.button.is-social:hover { border-color: var(--surface-hover); background-color: var(--surface-secondary); color: var(--surface-hover); }
.button-group { display: flex; align-items: center; gap: 1rem; }
.button-group.align-center { justify-content: center; }
.button-link { display: inline-flex; font-size: 1rem; line-height: 1.5; text-decoration: underline; text-underline-offset: 2px; transition: color .3s; }
.button-link:hover { color: var(--surface-hover); text-decoration: none; }

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.25rem; padding: 0 .5rem;
  border-radius: 4px;
  background: var(--surface-secondary);
  color: var(--text-black);
  font-size: .688rem; line-height: 1.3; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.badge.is-large {
  height: 2rem; padding: 0 .75rem; border-radius: 8px;
  background: var(--primary);
  font-size: .875rem; font-weight: 500; letter-spacing: .1375em;
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: 60px;
  padding: 0 2rem;
  display: flex; align-items: center;
  background-color: rgba(255, 255, 255, .98);
}
.navbar_container {
  width: 100%; max-width: 90rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.navbar_logo-link { display: inline-flex; align-items: center; gap: 6px; height: 20px; color: var(--text-black); }
.navbar_logo-mark { width: 15px; height: 20px; fill: currentColor; }
.navbar_logo-text { font-family: var(--font-body); font-weight: 700; font-size: 1.3125rem; letter-spacing: -.045em; line-height: 1; margin-top: -1px; }
/* Centrado sin transform: el panel desplegable es position:fixed y un transform en un ancestro lo encerraría. */
.navbar_menu { position: absolute; left: 0; right: 0; width: fit-content; margin: 0 auto; }
.navbar_menu-center { display: flex; align-items: center; justify-content: center; }
.navbar_link {
  display: inline-block;
  margin: 0 .75rem;
  padding: .563rem 0;
  border-bottom: 1px solid transparent;
  color: var(--text-black);
  font-size: .688rem; line-height: 1.5; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  transition: all .3s;
}
.navbar_link:hover, .navbar_link.is-current { border-bottom-color: var(--text-black); color: #000; }
.navbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--surface-secondary); opacity: 0; transition: opacity .3s;
}
.navbar:has(.navbar_dropdown:hover)::after,
.navbar:has(.navbar_dropdown:focus-within)::after { opacity: 1; }
.navbar_dropdown:hover > .navbar_link,
.navbar_dropdown:focus-within > .navbar_link { border-bottom-color: var(--text-black); color: #000; }
/* Panel a todo el ancho que baja desde la barra, con los links grandes al centro. */
.navbar_dropdown-list {
  position: fixed; top: 60px; left: 0; right: 0; z-index: -1;
  padding: 2.5rem 1rem 3.25rem;
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  background: #fff;
  border-radius: 0 0 24px 24px;
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility .3s;
}
/* Puente invisible para que el hover no se corte entre el link y el panel. */
.navbar_dropdown-list::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.navbar_dropdown:hover .navbar_dropdown-list,
.navbar_dropdown:focus-within .navbar_dropdown-list { opacity: 1; visibility: visible; transform: none; }
.navbar_dropdown-link {
  color: var(--text-black);
  font-size: 1.75rem; line-height: 1.35; font-weight: 300; letter-spacing: -.035em;
  opacity: .9;
  transition: opacity .2s, color .2s;
}
.navbar_dropdown-link:hover { opacity: 1; color: #000; }
.navbar_dropdown-list:hover .navbar_dropdown-link:not(:hover) { opacity: .45; }
/* Velo que desenfoca y oscurece la página mientras hay un panel abierto. */
.navbar_blur-overlay {
  position: fixed; inset: 60px 0 0 0; z-index: 99;
  background: rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s, visibility .3s;
}
.navbar:has(.navbar_dropdown:hover) + .navbar_blur-overlay,
.navbar:has(.navbar_dropdown:focus-within) + .navbar_blur-overlay { opacity: 1; visibility: visible; }
.navbar_menu-button { display: none; }

/* ---------- Hero ---------- */
.section_home-header {
  background-image: linear-gradient(0deg, var(--surface-primary) 31%, var(--surface-primary) 75%, #fff 85%);
}
.navbar_spacer { height: 76px; }
.home-header_container {
  position: relative; z-index: 0;
  height: 660px;
  padding-top: 64px;
  border: 1px solid var(--surface-secondary);
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px;
  text-align: center;
  background: #fff;
}
.home-header_content { display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform; }
.home-header_container .text-color-white { color: var(--text-black); }
.home-header_container .text-style-muted { color: #5c6166; }

/* Mapa de puntos: cubre todo el hero y no usa mask, para que en el scroll solo se animen
   transform y opacity. Rosario queda fijo en 50% / 66% del hero y el wrapper "move" es el
   que lo desplaza. El dibujo (map-*.svg, 4000x2600) es mucho más grande que lo visible para
   que al scrollear se pueda alejar; Rosario está en su 50% / 34.615%. --map-w es el ancho
   equivalente al encuadre inicial (1600 unidades del dibujo). */
.home-header_map {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  container-type: size;
}
.home-header_map-move, .home-header_map-zoom { position: absolute; inset: 0; }
.home-header_map-move { will-change: transform; }
.home-header_map-zoom { transform-origin: 50% 66%; will-change: transform; }
.home-header_map-inner {
  --map-w: max(100cqw, 900px);
  --map-land: #cdd2d6;
  --map-home: #a9afb4;
  position: absolute;
  width: calc(var(--map-w) * 2.5); aspect-ratio: 4000 / 2600;
  left: 50%; margin-left: calc(var(--map-w) * -1.25);
  top: calc(66cqh - var(--map-w) * 2.5 * .65 * .34615);
  transform-origin: 50% 34.615%;
}
/* Trama hexagonal de puntos recortada con la silueta de cada país. El patrón va
   pre-rasterizado en una máscara (map-local-*.webp, 4000x2600, generada desde
   map-land.svg / map-ar.svg con paso de 9 px): dibujar el radial-gradient en cada
   cuadro del scroll era lo que trababa la transición. El color sale del background,
   así que se sigue animando --map-land / --map-home. */
.home-header_map-layer {
  --c: var(--map-land);
  position: absolute; inset: 0;
  background: var(--c);
  -webkit-mask: url("../assets/img/brand/map-local-land.webp") 0 0 / 100% 100% no-repeat;
  mask: url("../assets/img/brand/map-local-land.webp") 0 0 / 100% 100% no-repeat;
}
.home-header_map-layer.is-home {
  --c: var(--map-home);
  -webkit-mask-image: url("../assets/img/brand/map-local-ar.webp");
  mask-image: url("../assets/img/brand/map-local-ar.webp");
}
/* Mundo entero: planisferio ya punteado (map-world*.webp, 480° con Rosario al centro).
   El tamaño en px y el origen de escala los calcula fitWorld() en main.js. */
.home-header_world-wrap {
  position: absolute; left: 0; top: 0;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.home-header_world { display: block; width: 100%; height: 100%; max-width: none; }
.home-header_world.is-small { display: none; }
@media screen and (max-width: 767px) {
  .home-header_world { display: none; }
  .home-header_world.is-small { display: block; }
}
/* Overlay blanco que reemplaza la mask de arriba: tapa la mitad superior del mapa (sólido
   hasta 0.5 del hero, transparente en 0.61) y se va en la fase 2. */
.home-header_map-fade {
  position: absolute; left: 0; right: 0; top: -100%; bottom: 39%;
  background: linear-gradient(to bottom, #fff 0%, #fff 93.2%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
/* Fundidos de los costados: blancos en los bordes, transparentes hacia el centro. */
.home-header_map-sides {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  --side-w: 0px;
  background-image:
    linear-gradient(to right, #fff 0, #fff calc(100% - 60px), rgba(255, 255, 255, 0) 100%),
    linear-gradient(to left, #fff 0, #fff calc(100% - 60px), rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: var(--side-w) 100%, var(--side-w) 100%;
}
.home-header_outro {
  position: absolute; left: 1rem; right: 1rem; top: 13%; z-index: 1;
  margin: 0; text-align: center; color: var(--text-black);
  opacity: 0; pointer-events: none;
}
/* Punto de ubicación: punto verde, aro fino fijo y dos ondas que se expanden. */
.home-header_pin {
  --pin: #1fbf75;
  position: absolute; left: 50%; top: 66%;
  width: 0; height: 0;
}
.home-header_pin-dot, .home-header_pin-ring {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.home-header_pin-dot {
  width: 9px; height: 9px; background: var(--pin);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--pin);
}
.home-header_pin-ring {
  width: 22px; height: 22px; border: 1px solid var(--pin);
  opacity: 0;
}
.home-header_pin.is-live .home-header_pin-ring { animation: pin-ping 2.8s cubic-bezier(.2, .6, .3, 1) infinite; }
.home-header_pin.is-live .home-header_pin-ring + .home-header_pin-ring { animation-delay: 1.4s; }
@keyframes pin-ping {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); }
}
.home-header_pin-label {
  position: absolute; left: 18px; top: 0; transform: translateY(-50%);
  padding: 5px 11px;
  border: 1px solid var(--surface-secondary); border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text-black);
  font-size: .688rem; line-height: 1.4; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.tag-item {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px;
  margin-bottom: 40px;
  border: 1px solid var(--surface-secondary); border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  font-size: .875rem; line-height: 1.25; font-weight: 500;
}
.tag-icon {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--text-black);
}
.tag-icon svg { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.heading-animation { display: flex; flex-direction: column; align-items: center; }
.home-header_animation-words { height: 5rem; overflow: hidden; display: flex; justify-content: center; }
.home-header_typewriter { white-space: nowrap; height: 5rem; }
/* Guion bajo debajo de la última letra: la sigue mientras escribe y borra, fijo mientras
   se mueve y parpadeando en las pausas. Sin texto queda solo, en el mismo lugar. */
.typewriter_last { position: relative; display: inline-block; }
.typewriter_last::after,
.typewriter_cursor {
  height: .07em;
  background: currentColor;
  animation: typewriter-blink 1s steps(1) infinite;
}
.typewriter_last::after { content: ""; position: absolute; left: 0; right: .035em; bottom: .02em; }
.typewriter_cursor { display: none; width: .5em; vertical-align: -.16em; }
.home-header_typewriter.is-empty .typewriter_cursor { display: inline-block; }
.home-header_typewriter.is-typing .typewriter_last::after,
.home-header_typewriter.is-typing .typewriter_cursor { animation: none; }
@keyframes typewriter-blink { 50% { opacity: 0; } }
.home-header_container .max-width-xsmall { margin-top: 8px; }
.home-header_container .text-style-muted { font-size: 1rem; line-height: 1.5; text-wrap: balance; }
.home-header_cta { margin-top: 32px; }

/* ---------- Logos ---------- */
.section_logo {
  background: var(--surface-primary);
  border-bottom: 1px solid var(--surface-secondary);
}
.section_logo .container-large { padding: 2rem 0; }
.logo-loop_component { position: relative; max-width: 100rem; overflow: hidden; display: flex; }
.logo-loop_caption {
  position: absolute; inset: 0 auto 0 0; z-index: 2;
  display: flex; align-items: center;
  padding: 2px 7rem 0 0;
  background-image: linear-gradient(270deg, rgba(246, 246, 246, 0), var(--surface-primary) 35%);
  color: var(--text-bright);
  font-size: .688rem; line-height: 1.5; font-weight: 600;
  letter-spacing: .075em; text-transform: uppercase;
}
.logo-loop_gradient {
  position: absolute; inset: 0 0 0 auto; z-index: 2; width: 6rem;
  background-image: linear-gradient(90deg, rgba(246, 246, 246, 0) 11%, var(--surface-primary) 95%);
}
.logo-loop_inner { display: flex; flex: none; animation: logo-loop 40s linear infinite; }
.logo_list { display: flex; flex: none; align-items: center; justify-content: space-around; }
.logo_wrapper { display: flex; align-items: center; justify-content: center; height: 72px; padding: 1rem 1.75rem; flex: none; }
.logo_logo { height: 40px; width: auto; max-width: 150px; object-fit: contain; opacity: .45; filter: grayscale(1); }
.logo_logo.is-tall { height: 40px; }
@keyframes logo-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- About ---------- */
.section_about { background: var(--surface-primary); }
.about_component { display: flex; justify-content: space-between; align-items: flex-start; gap: 6.3rem; }
.about_content { display: flex; flex-direction: column; gap: 2rem; flex: 0 1 393px; }
.about_content h2 { max-width: 32rem; }
.icon-badge, .icon-badge svg { width: 48px; height: 48px; display: block; }
.about_list { flex: 1 1 auto; max-width: 706px; display: flex; flex-direction: column; align-items: center; gap: 2.25rem; }
.about_item { width: 100%; max-width: 600px; }
.about_title-wrapper { display: flex; align-items: center; gap: 1.25rem; }
.icon-embed-large { width: 52px; height: 52px; flex: none; color: var(--text-black); display: flex; }
.icon-embed-large svg { width: 100%; height: 100%; }
.item-details-list { margin-left: 78px; margin-top: 8px; }
.item-details-wrapper {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: 1px solid var(--surface-secondary);
  color: var(--text-primary);
  font-size: 1rem; line-height: 1.2;
}

/* ---------- Misión ---------- */
.section_dependable { background: var(--surface-primary); }
.section_dependable .caption { margin-bottom: 1.45rem; }
.dependable_heading { max-width: 70rem; margin-bottom: 3rem; }
.js .dependable_heading .ink-word { color: #c6c8ca; }
.layout_component { display: grid; grid-template-columns: 1fr 1fr; gap: 5.4rem; align-items: center; }
.layout_item-list { display: grid; gap: 2rem; }
.layout_item-text-wrapper { display: flex; flex-direction: column; gap: .5rem; }
.audited-items { display: flex; gap: 1rem; margin-top: 3rem; }
.audited-label { display: flex; flex-direction: column; gap: 4px; padding: .75rem 1rem; border-radius: 8px; background: var(--surface-secondary); }
.audited-text { height: 24px; display: flex; align-items: center; font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-black); }
.section_dependable .button-group { margin-top: 3.5rem; }

/* Órbita (reemplaza la animación lottie de la referencia) */
.orbit { position: relative; width: 100%; max-width: 571px; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; --r: 33.8cqw; }
.orbit_lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit_spin-slow { transform-origin: 290px 290px; animation: spin 60s linear infinite; }
.orbit_spin-reverse { transform-origin: 290px 290px; animation: spin 90s linear infinite reverse; }
.orbit_ring { position: absolute; inset: 0; animation: spin 26.4s linear infinite; }
.orbit_icon {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: rotate(var(--a));
}
.orbit_icon > span {
  position: absolute; left: -25px; top: -25px;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #f3fcd2, #dff59a);
  box-shadow: 0 0 0 6px rgba(210, 246, 90, .18);
  color: var(--text-black);
  transform: translateY(calc(var(--r, 196px) * -1)) rotate(calc(var(--a) * -1));
  animation: counter-spin 26.4s linear infinite;
}
.orbit_icon svg { width: 22px; height: 22px; }
.orbit_center {
  position: absolute; left: 50%; top: 50%;
  width: 104px; height: 104px; margin: -52px 0 0 -52px;
  animation: pulse 6.6s ease-in-out infinite;
}
.orbit_center svg { width: 100%; height: 100%; display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counter-spin {
  from { transform: translateY(calc(var(--r, 196px) * -1)) rotate(calc(var(--a) * -1)); }
  to { transform: translateY(calc(var(--r, 196px) * -1)) rotate(calc(var(--a) * -1 - 360deg)); }
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- Identidad primero ---------- */
.section_compliance { background: #fff; }
.image-layout_component { display: grid; grid-template-columns: 1fr 1fr; gap: 7.2rem; align-items: start; }
.image-layout_content { padding-top: 2rem; max-width: 40rem; }
.image-layout_content .caption { margin-bottom: 1.45rem; }
.image-layout_content h2 { margin-bottom: 2rem; }
.image-layout_content p { margin-bottom: 1.7rem; }
.image-wrapper { border-radius: 16px; overflow: hidden; max-width: 42rem; aspect-ratio: 1; }
.image { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Proyectos (card con símbolo) ---------- */
.section_flow { background: #fff; }
.explore_component {
  position: relative; overflow: hidden;
  min-height: 682px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
  padding: 3rem 0 0 3.5rem;
  border-radius: 16px;
  background-color: var(--surface-primary);
  background-image: var(--explore-image, url("../assets/img/brand/symbol-waves.webp"));
  background-repeat: no-repeat;
  background-size: 600px auto;
  background-position: right 9% top 30%;
}
.explore_column { display: flex; flex-direction: column; gap: 2rem; width: 100%; max-width: 49.5rem; }
.headline { display: flex; }
.items { max-width: 24rem; }
.item-wrapper {
  display: flex; align-items: center; justify-content: flex-start; gap: 1rem;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.125rem; line-height: 1.5; color: var(--text-black);
}
.item-wrapper.is-first { padding: 8px 0 16px; border-bottom: 0; color: var(--text-primary); }
.icon-embed-xsmall { width: 24px; height: 24px; display: flex; flex: none; }
.icon-embed-xsmall svg { width: 100%; height: 100%; }
.explore_button { margin-bottom: 3rem; }

/* ---------- Trabajos (slider) ---------- */
.section_news { background: var(--surface-primary); }
.header-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.75rem; }
.news_wrapper { position: relative; margin-left: -1.5rem; padding-left: 1.375rem; }
.slider_list { overflow: hidden; padding-left: 10px; margin-right: -8.5rem; }
.slider_track { display: flex; gap: 2rem; will-change: transform; }
.slider_gradient { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.slider_gradient.is-left {
  left: 0; width: 40px;
  background-image: linear-gradient(90deg, var(--surface-primary) 9%, rgba(246, 246, 246, .74) 38%, rgba(246, 246, 246, 0));
  opacity: 0; transition: opacity .3s;
}
.slider_gradient.is-left.is-visible { opacity: 1; }
.slider_gradient.is-right {
  right: -2px; width: 192px;
  background-image: linear-gradient(90deg, rgba(246, 246, 246, 0), rgba(246, 246, 246, .74) 60%, var(--surface-primary));
}
.button.is-slider { position: absolute; top: 75px; z-index: 3; }
.button.is-slider.is-right { right: 0; }
.button.is-slider.is-left { left: 0; display: none; }
.button.is-slider.is-left.is-visible { display: inline-flex; }
.card { flex: 0 0 305px; display: flex; flex-direction: column; border-radius: 4px; }
.card-link_block { position: relative; display: block; }
.card-category {
  position: absolute; z-index: 1; top: 16px; left: 16px;
  padding: 0 8px; border-radius: 4px;
  background: #fff;
  font-size: .688rem; line-height: 2; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.card-img_wrapper { height: 191px; border-radius: 16px; overflow: hidden; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-img { transform: scale(1.04); }
.card-body { padding-top: 19px; display: flex; flex-direction: column; align-items: flex-start; }
.post-meta { display: flex; margin-bottom: 12px; font-size: .875rem; line-height: 1.5; color: var(--text-primary); }
.by-word { margin: 0 5px; }
.card .heading-style-h4 { font-size: 1.75rem; line-height: 1.15; }

/* ---------- FAQ ---------- */
.section_faq { background: var(--surface-primary); border-top: 1px solid var(--surface-secondary); border-bottom: 1px solid var(--surface-secondary); }
.faq_component { display: grid; grid-template-columns: .8fr 1fr; gap: 6.3rem; align-items: start; }
.faq_content { max-width: 23.25rem; }
.faq_content h2 { margin-bottom: 1rem; }
.faq_content p { color: var(--text-primary); margin-bottom: 3rem; }
.faq_list { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
.faq_accordion { background: var(--surface-secondary); border: 1px solid var(--surface-secondary); border-radius: 14px; overflow: hidden; }
.faq_question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 18px 24px;
  text-align: left; color: var(--text-black);
}
.faq_icon-wrapper { width: 24px; height: 24px; flex: none; display: flex; transition: transform .3s; }
.faq_icon-wrapper svg { width: 100%; height: 100%; }
.faq_accordion.is-open .faq_icon-wrapper { transform: rotate(180deg); }
.faq_answer { height: 0; overflow: hidden; padding: 0 24px; transition: height .4s ease; }
.faq_answer-inner { padding: 8px 0 24px; color: var(--text-primary); font-size: 1rem; line-height: 1.5; }
.faq_answer-inner p + p { margin-top: 1rem; }

/* ---------- CTA ---------- */
.section_cta { position: relative; overflow: hidden; height: 480px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cta-background { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cta-background svg { height: 816px; width: auto; flex: none; overflow: visible; }
.section_cta .page-padding { position: relative; width: 100%; }
.cta_content { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta_content h2 { margin-bottom: 2rem; }
.cta_content .button-link { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.footer_section { background: var(--surface-primary); border-top: 1px solid var(--surface-secondary); padding-top: 7.5rem; }
.footer_top-wrapper { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 10rem; }
.footer_left-wrapper { max-width: 17.2rem; display: flex; flex-direction: column; align-items: flex-start; }
.footer_left-wrapper h2 { margin-bottom: 1.5rem; }
.social-button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--text-black); border-radius: 100px;
  transition: all .3s;
}
.social-button:hover { background: var(--text-black); color: #fff; }
.social-button-icon { width: 16px; height: 16px; }
.social-button-text { font-size: .875rem; line-height: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.footer_menu-wrapper { flex: 1; max-width: 45rem; display: flex; justify-content: space-between; gap: 2rem; }
.footer_link-list { display: flex; flex-direction: column; align-items: flex-start; }
.footer_link-list .caption { margin-bottom: 8px; }
.footer_link { padding: 8px 0; font-size: .875rem; line-height: 1.5; transition: color .3s; }
.footer_link:hover { color: var(--surface-hover); text-decoration: underline; }
.footer_social-caption { margin-top: 32px; max-width: 160px; }
.footer_social-list { display: flex; gap: 8px; margin-top: 8px; }
.important_disclosures {
  margin-top: 4.5rem;
  padding: 2rem;
  display: flex; flex-direction: column; gap: 17px;
  background: #fff; border-radius: 16px;
}
.important_disclosures h2 { margin-bottom: 4px; }
.important_disclosures p { font-size: .875rem; line-height: 1.5; color: var(--text-bright); }
.footer_bottom-wrapper {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.7rem 2rem 1.75rem;
  color: var(--text-bright);
  font-size: .688rem; line-height: 1.5; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.copyrights_wrapper { display: flex; align-items: center; gap: 8px; }
.icon-1x1-xxsmall { width: 16px; height: 16px; flex: none; }
.footer_legal-link:hover { text-decoration: underline; }

/* ---------- Splash de carga: insignia circular oscura con el isotipo ----------
   Solo con JS. Si algo falla, la animación de respaldo la saca a los 3 s. */
.splash { display: none; }
.js .splash {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  animation: splash-fallback .4s 3s forwards;
}
.splash_badge {
  position: relative;
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--text-black);
}
.splash_mark { width: 22px; height: 29px; fill: #fff; margin-left: -1px; }
.splash_ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--text-black);
  opacity: 0;
}
@keyframes splash-fallback { to { opacity: 0; visibility: hidden; } }

/* ---------- Animación de entrada (estado inicial, JS la completa) ---------- */
.js [fade-in], .js [fade-list] > * { opacity: 0; }
.js .home-header_map-inner, .js .home-header_pin { opacity: 0; }
.js .home-header_reveal { opacity: 0; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991px) {
  .navbar_menu-button {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 24px; height: 24px; margin-right: 12px;
  }
  .navbar_menu-button span { display: block; height: 1.5px; width: 18px; background: var(--text-black); transition: transform .3s, opacity .3s; }
  .navbar_menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .navbar_menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navbar_menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .navbar_container { justify-content: flex-start; }
  .navbar_container > .button { margin-left: auto; }
  .navbar_menu {
    position: fixed; left: 0; right: 0; top: 60px; transform: none;
    height: calc(100vh - 60px); overflow-y: auto;
    background: #fff; padding: 1.5rem 2rem;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .navbar_menu.is-open { opacity: 1; visibility: visible; }
  .navbar_menu-center { flex-direction: column; align-items: stretch; }
  .navbar_link { margin: 0; padding: 1rem 0; font-size: .875rem; border-bottom: 1px solid var(--surface-secondary); display: block; }
  .navbar_dropdown-list { position: static; opacity: 1; visibility: visible; transform: none; border-radius: 0; align-items: flex-start; gap: 0; padding: .5rem 0 1rem; }
  .navbar_dropdown-list::before { display: none; }
  .navbar_dropdown-link { font-size: 1.375rem; line-height: 1.6; }
  .navbar_dropdown-list:hover .navbar_dropdown-link:not(:hover) { opacity: .9; }
  .navbar::after, .navbar_blur-overlay { display: none; }

  .heading-style-h1 { font-size: 4rem; }
  .home-header_typewriter { height: 4rem; }
  .home-header_animation-words { height: 4rem; }
  .about_component { flex-direction: column; gap: 4rem; }
  .about_content { flex: none; }
  .about_list { max-width: none; align-items: stretch; }
  .about_item { max-width: none; }
  .layout_component, .image-layout_component, .faq_component { grid-template-columns: 1fr; gap: 3rem; }
  .explore_component { background-size: 460px auto; background-position: right -80px bottom -260px; min-height: 760px; }
  .footer_top-wrapper { flex-direction: column; gap: 4rem; }
  .footer_menu-wrapper { max-width: none; width: 100%; }
}

@media (max-width: 767px) {
  .page-padding { padding-left: 1.25rem; padding-right: 1.25rem; }
  .navbar { padding: 0 1.25rem; }
  .padding-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .padding-top-section { padding-top: 4.5rem; }
  .heading-style-h1 { font-size: 3rem; }
  .home-header_typewriter { height: 3rem; }
  .home-header_animation-words { height: 3rem; }
  .heading-style-h2-large { font-size: 2.25rem; }
  .heading-style-h2 { font-size: 2rem; }
  .heading-style-h3 { font-size: 2rem; }
  .heading-style-h4 { font-size: 1.5rem; }
  .home-header_container { height: 560px; padding: 40px 1rem 0; }
  .home-header_pin-label { left: 0; top: 20px; transform: translateX(-50%); }
  .tag-item { margin-bottom: 28px; }
  .home-header_container .max-width-xsmall { max-width: 18rem; }
  .logo-loop_caption { padding-right: 2rem; }
  .hide-mobile-portrait { display: none !important; }
  .item-details-list { margin-left: 0; }
  .explore_component { padding: 2rem 1.5rem 0; background-image: none; min-height: 0; }
  .explore_button .button { width: 100%; }
  .news_wrapper { margin-left: 0; padding-left: 0; }
  .slider_list { margin-right: 0; padding-left: 0; overflow: visible; }
  .slider_track { flex-direction: column; gap: 2.5rem; transform: none !important; }
  .card { flex: none; }
  .card-img_wrapper { height: auto; aspect-ratio: 305 / 191; }
  .slider_gradient, .button.is-slider { display: none !important; }
  .faq_content .button-group .button, .cta_content .button { width: 100%; }
  .section_cta { height: 440px; }
  .cta-background svg { height: 640px; }
  .footer_section { padding-top: 4.5rem; }
  .footer_menu-wrapper { flex-direction: column; gap: 2.5rem; }
  .important_disclosures { padding: 1.5rem; }
  .footer_bottom-wrapper { flex-direction: column; align-items: flex-start; padding: 1.5rem 0 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 479px) {
  .audited-items { flex-direction: column; align-items: flex-start; }
  .audited-text { white-space: nowrap; }
  /* Palabras largas del hero ("Estandarizamos") en teléfonos angostos. */
  .home-header_typewriter { font-size: 2.375rem; height: 2.5rem; }
  .home-header_animation-words { height: 2.5rem; }
}

/* Barra de vista previa (solo visible para usuarios del panel) */
.preview-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 200;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  padding: 10px 12px 10px 18px;
  border-radius: 12px;
  background: var(--text-black); color: #fff;
  font-size: .875rem; line-height: 1.4;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
  max-width: calc(100% - 32px);
}
.preview-bar a {
  flex: none; padding: 6px 12px; border-radius: 8px;
  background: #fff; color: var(--text-black); font-weight: 500;
}