/* ═══════════════════════════════════════════════════════════════
   V2GO — GLOBAL
   Reset, tipografía, y las PRIMITIVAS DE MARCA sacadas del feed:
   píldoras, formas orgánicas, foto fundida a blanco y firma vertical.
   Importar DESPUÉS de tokens.css
   ═══════════════════════════════════════════════════════════════ */

/* ─── GEOMANIST — única familia, como en las piezas ────────────
   OJO: el cliente solo entregó Light y Bold. En su ZIP los archivos
   `geomanist-regular-webfont.ttf` y `-italic-` vienen en 0 bytes, así
   que NO se declaran: si se declaran, el navegador falla al cargarlos
   y resuelve el peso 400 con Arial.
   La itálica se sintetiza (oblicua) a partir de Light, que en una
   geométrica se ve bien. PENDIENTE: pedir los pesos reales. */
@font-face {
  font-family: 'Geomanist';
  src: url('../assets/fonts/Geomanist-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geomanist';
  src: url('../assets/fonts/Geomanist-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ═══ RESET ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-padding-top: 110px;
  background-color: var(--hueso);
}

body {
  font-family: var(--fuente);
  font-weight: var(--p-light);
  font-size: var(--t-md);              /* 19px */
  line-height: var(--lh-relaxed);
  color: var(--navy-70);
  background-color: var(--hueso);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg, picture { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: 0; background: none; font: inherit; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--ambar); color: var(--navy); }

a, button, input, select, textarea, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(247, 174, 31, 0.20);
}

/* ═══ CONTENEDORES ════════════════════════════════════════════ */
.v2-wrap, .v2-wrap--ancho, .v2-wrap--full {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.v2-wrap        { max-width: var(--wrap); }
.v2-wrap--ancho { max-width: var(--wrap-ancho); }
.v2-wrap--full  { max-width: none; }

/* ═══ SECCIONES ═══════════════════════════════════════════════ */
.v2-sec { padding-block: var(--sec-py); position: relative; }
.v2-sec--lg    { padding-block: var(--sec-py-lg); }
.v2-sec--hueso { background-color: var(--hueso); }
.v2-sec--hueso2{ background-color: var(--hueso-2); }
.v2-sec--arena { background-color: var(--arena); }

/* Navy como FONDO: solo en momentos puntuales, no como default */
.v2-sec--navy { background-color: var(--navy); color: rgba(255,255,255,0.78); }
.v2-sec--navy h1, .v2-sec--navy h2, .v2-sec--navy h3, .v2-sec--navy h4 { color: #fff; }
.v2-sec--navy p { color: rgba(255,255,255,0.74); }

/* ═══ TIPOGRAFÍA ══════════════════════════════════════════════
   Los titulares de la marca van en Geomanist LIGHT a tamaño grande
   —así son los banners reales— con Bold e itálica para la jerarquía
   dentro de la misma frase. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente);
  font-weight: var(--p-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  color: var(--navy);
  text-wrap: balance;
}

.v2-t1 { font-size: clamp(2.5rem, 6.4vw, var(--t-5xl)); line-height: 1.02; letter-spacing: var(--ls-mega); }
.v2-t2 { font-size: clamp(2rem, 4.6vw, var(--t-4xl));  line-height: var(--lh-tight); letter-spacing: var(--ls-mega); }
.v2-t3 { font-size: clamp(1.5rem, 2.8vw, var(--t-2xl)); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }

/* Los tres gestos tipográficos de la marca */
.v2-neg { font-weight: var(--p-bold); }                    /* énfasis */
.v2-ita { font-style: italic; font-weight: var(--p-book); } /* calidez */
.v2-amb { color: var(--ambar-texto); font-weight: var(--p-bold); }
.v2-sec--navy .v2-amb, .v2-sobre-foto .v2-amb { color: var(--ambar); }

p { line-height: var(--lh-relaxed); }
.v2-lead {
  font-size: clamp(var(--t-lg), 2.1vw, var(--t-xl));
  line-height: var(--lh-normal);
  color: var(--navy-70);
  max-width: 42ch;
  text-wrap: pretty;
}
strong, b { font-weight: var(--p-bold); color: var(--navy); }

/* ═══ PÍLDORA — la unidad gráfica de la marca ═════════════════
   En el feed las frases clave viven dentro de píldoras ámbar o navy.
   Aquí sirven de etiqueta de sección, de destacado y de botón. */
.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.65rem 1.25rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-wide);
  background-color: var(--ambar);
  color: var(--navy);
}
.v2-pill--navy  { background-color: var(--navy); color: #fff; }
.v2-pill--navy .v2-amb { color: var(--ambar); }
.v2-pill--linea { background-color: transparent; border: 1.5px solid var(--navy-22); color: var(--navy); }
.v2-pill--velo  { background-color: var(--ambar-velo); color: var(--ambar-texto); }
.v2-pill--sm    { padding: 0.45rem 0.95rem; font-size: var(--t-xs); }

/* Etiqueta de sección: píldora pequeña con punto */
.v2-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.5rem 1.1rem 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  background-color: var(--ambar-velo);
  color: var(--ambar-texto);
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-wide);
}
.v2-tag::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background-color: var(--ambar);
  flex: none;
}
.v2-tag--navy { background-color: var(--navy-06); color: var(--navy); }
.v2-tag--navy::before { background-color: var(--navy); }
.v2-sec--navy .v2-tag, .v2-sobre-foto .v2-tag {
  background-color: rgba(255,255,255,0.14);
  color: #fff;
}
.v2-sec--navy .v2-tag::before, .v2-sobre-foto .v2-tag::before { background-color: var(--ambar); }

/* ═══ FORMAS ORGÁNICAS ════════════════════════════════════════
   El recurso más reconocible del feed: círculos y arcos grandes,
   navy y ámbar, que entran por las esquinas y recortan la foto.
   Vienen de los nodos del isotipo. AQUÍ el azul es forma, no fondo. */
.v2-blob {
  position: absolute;
  border-radius: var(--r-pill);
  pointer-events: none;
  z-index: 1;
}
.v2-blob--navy  { background-color: var(--navy); }
.v2-blob--ambar { background-color: var(--ambar); }
.v2-blob--velo  { background-color: var(--ambar-velo); }
.v2-blob--arena { background-color: var(--arena); }

/* Medio círculo (arco), como los del feed */
.v2-arco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 999px 999px;   /* arco hacia abajo */
}
.v2-arco--arriba { border-radius: 999px 999px 0 0; }
.v2-arco--navy   { background-color: var(--navy); }
.v2-arco--ambar  { background-color: var(--ambar); }

/* ═══ FIRMA VERTICAL ══════════════════════════════════════════
   «Logística» al borde, tal cual las piezas. */
.v2-vert {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: var(--t-sm);
  font-weight: var(--p-light);
  letter-spacing: 0.14em;
  color: var(--navy-50);
  pointer-events: none;
  user-select: none;
}
.v2-vert--claro { color: rgba(255,255,255,0.62); }

/* ═══ BOTONES — píldora, siempre ══════════════════════════════ */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--fuente);
  font-weight: var(--p-bold);
  font-size: var(--t-base);
  line-height: 1;
  padding: 1.125rem 2rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: background-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease),
              transform var(--d-fast) var(--ease);
}
.v2-btn svg { flex: none; transition: transform var(--d-base) var(--ease); }
.v2-btn:hover svg { transform: translateX(4px); }
.v2-btn:hover { transform: translateY(-2px); }
.v2-btn:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }

.v2-btn--ambar { background-color: var(--ambar); color: var(--navy); border-color: var(--ambar); }
.v2-btn--ambar:hover { background-color: var(--ambar-claro); border-color: var(--ambar-claro); box-shadow: var(--sh-media); }

.v2-btn--navy { background-color: var(--navy); color: #fff; border-color: var(--navy); }
.v2-btn--navy:hover { background-color: var(--navy-suave); border-color: var(--navy-suave); box-shadow: var(--sh-media); }
.v2-btn--navy .v2-amb { color: var(--ambar); }

.v2-btn--linea { background-color: transparent; color: var(--navy); border-color: var(--navy-22); }
.v2-btn--linea:hover { border-color: var(--navy); background-color: var(--navy); color: #fff; }

.v2-btn--claro { background-color: #fff; color: var(--navy); border-color: #fff; }
.v2-btn--claro:hover { background-color: var(--ambar); border-color: var(--ambar); }

.v2-btn--lg { font-size: var(--t-lg); padding: 1.375rem 2.5rem; }
.v2-btn--block { width: 100%; }

/* Enlace con flecha en círculo */
.v2-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-base);
  font-weight: var(--p-bold);
  color: var(--navy);
  transition: gap var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.v2-link i {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background-color: var(--ambar);
  color: var(--navy);
  font-style: normal;
  flex: none;
  transition: background-color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.v2-link:hover { gap: var(--s-4); color: var(--ambar-texto); }
.v2-link:hover i { background-color: var(--navy); color: #fff; transform: translateX(3px); }
.v2-sec--navy .v2-link { color: #fff; }
.v2-sec--navy .v2-link:hover { color: var(--ambar); }

/* ═══ FOTOGRAFÍA ══════════════════════════════════════════════
   Como en los banners: la foto real se funde a blanco por un lado.
   Nada de filtros duros ni overlays de color plano. */
.v2-foto { position: relative; overflow: hidden; background-color: var(--arena); border-radius: var(--r-lg); }
.v2-foto img { width: 100%; height: 100%; object-fit: cover; }
.v2-foto--redonda { border-radius: var(--r-pill); }
.v2-foto--alta   { aspect-ratio: 3 / 4; }
.v2-foto--ancha  { aspect-ratio: 16 / 10; }
.v2-foto--cuadro { aspect-ratio: 1 / 1; }

/* Degradado a blanco — el gesto de los banners de la marca */
.v2-foto--funde::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 26%, rgba(250,249,247,0.55) 58%, var(--hueso) 88%);
}
.v2-foto--funde-abajo::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(27,40,50,0.82) 0%, rgba(27,40,50,0.18) 46%, transparent 72%);
}

/* Acercamiento lento: la foto nunca está del todo quieta */
.v2-foto--vive img { animation: v2-vive 30s var(--ease-soft) infinite alternate; }
@keyframes v2-vive {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* ═══ TARJETA ═════════════════════════════════════════════════ */
.v2-card {
  background-color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-suave);
  overflow: hidden;
}

/* ═══ PRIMITIVAS DE INFOGRAFÍA ════════════════════════════════
   Las figuras que sí gustaron, revestidas con el lenguaje de la
   marca: trazos redondeados, nodos circulares, nada anguloso. */
.v2-fig { width: 100%; height: auto; display: block; overflow: visible; }
.v2-fig__grid  { stroke: var(--navy-12); stroke-width: 1.5; fill: none; }
.v2-fig__eje   { stroke: var(--navy-22); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.v2-fig__linea { stroke: var(--navy); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.v2-fig__suave { stroke: var(--navy-22); stroke-width: 2; fill: none; stroke-linecap: round; }
.v2-fig__nodo       { fill: var(--navy); }
.v2-fig__nodo--amb  { fill: var(--ambar); }
.v2-fig__nodo--claro{ fill: var(--navy-22); }
.v2-fig__r1 { fill: var(--navy); }
.v2-fig__r2 { fill: var(--ambar); }
.v2-fig__r3 { fill: var(--ambar-velo); }
.v2-fig__r4 { fill: var(--arena); }
.v2-fig__r5 { fill: var(--arena-2); }
.v2-fig__txt {
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: var(--p-bold);
  fill: var(--navy);
}
.v2-fig__txt--sm  { font-size: 11.5px; font-weight: var(--p-light); fill: var(--navy-50); }
.v2-fig__txt--amb { fill: var(--ambar-texto); }
.v2-sec--navy .v2-fig__txt { fill: #fff; }
.v2-sec--navy .v2-fig__txt--sm { fill: rgba(255,255,255,0.62); }
.v2-sec--navy .v2-fig__txt--amb { fill: var(--ambar); }
.v2-sec--navy .v2-fig__linea { stroke: rgba(255,255,255,0.85); }
.v2-sec--navy .v2-fig__suave { stroke: rgba(255,255,255,0.3); }
.v2-sec--navy .v2-fig__grid  { stroke: rgba(255,255,255,0.16); }
.v2-sec--navy .v2-fig__nodo  { fill: #fff; }

/* Animaciones de figura */
.v2-draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.is-in .v2-draw { animation: v2-draw var(--d-draw) var(--ease) forwards; }
@keyframes v2-draw { to { stroke-dashoffset: 0; } }

.v2-pop { opacity: 0; transform: scale(0.6); transform-origin: center; transform-box: fill-box; }
.is-in .v2-pop { animation: v2-pop 560ms var(--ease) forwards; animation-delay: var(--delay, 0ms); }
@keyframes v2-pop { to { opacity: 1; transform: scale(1); } }

.v2-rise { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; }
.is-in .v2-rise { animation: v2-rise 760ms var(--ease) forwards; animation-delay: var(--delay, 0ms); }
@keyframes v2-rise { to { transform: scaleY(1); } }

.v2-fade { opacity: 0; }
.is-in .v2-fade { animation: v2-fade 700ms var(--ease) forwards; animation-delay: var(--delay, 0ms); }
@keyframes v2-fade { to { opacity: 1; } }

.v2-up { opacity: 0; transform: translateY(30px); }
.is-in .v2-up, .v2-up.is-in { animation: v2-up 860ms var(--ease) forwards; animation-delay: var(--delay, 0ms); }
@keyframes v2-up { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .v2-draw { stroke-dashoffset: 0; }
  .v2-pop, .v2-rise, .v2-fade, .v2-up { opacity: 1; transform: none; animation: none !important; }
  .v2-foto--vive img { animation: none; }
}

/* ═══ ACCESIBILIDAD ═══════════════════════════════════════════ */
.v2-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }

.v2-skip {
  position: absolute; top: -100%; left: var(--s-4); z-index: 9999;
  background: var(--navy); color: #fff;
  padding: var(--s-4) var(--s-6); border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: var(--p-bold); font-size: var(--t-base);
  transition: top var(--d-fast);
}
.v2-skip:focus { top: 0; }

/* ═══ WHATSAPP FLOTANTE ═══════════════════════════════════════ */
.v2-wa {
  position: fixed; z-index: 1200;
  right: calc(22px + env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: var(--r-pill);
  background-color: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -10px rgba(37, 211, 102, 0.55);
  transition: transform var(--d-fast) var(--ease);
}
.v2-wa:hover { transform: scale(1.08); }
.v2-wa svg { width: 28px; height: 28px; }
@media (max-width: 600px) {
  .v2-wa { width: 54px; height: 54px; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* Etiqueta pequeña de apoyo (pies de figura, notas) */
.v2-tech {
  font-size: var(--t-sm);
  font-weight: var(--p-book);
  letter-spacing: var(--ls-norm);
  color: var(--navy-50);
  line-height: 1.5;
}
.v2-sec--navy .v2-tech { color: rgba(255,255,255,0.6); }

/* ─── Alias de las primitivas de figura ───────────────────────
   Los SVG de las secciones ya usaban estos nombres; se mantienen
   para no reescribir cada trazado. */
.v2-fig__axis  { stroke: var(--navy-22); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.v2-fig__line  { stroke: var(--navy); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.v2-fig__soft  { stroke: var(--navy-22); stroke-width: 2; fill: none; stroke-linecap: round; }
.v2-fig__node        { fill: var(--navy); }
.v2-fig__node--ambar { fill: var(--ambar); }
.v2-fig__node--rojo  { fill: var(--ambar-hondo); }
.v2-fig__node--soft  { fill: var(--navy-22); }
.v2-fig__f1 { fill: var(--navy); }
.v2-fig__f2 { fill: var(--ambar); }
.v2-fig__f3 { fill: var(--ambar-hondo); }
.v2-fig__f4 { fill: var(--arena); }
.v2-fig__f5 { fill: var(--arena-2); }
.v2-fig__label {
  font-family: var(--fuente);
  font-size: 12.5px;
  font-weight: var(--p-bold);
  fill: var(--navy);
}
.v2-fig__label--on { fill: var(--ambar-texto); }
.v2-fig__value { font-family: var(--fuente); font-weight: var(--p-bold); font-size: 26px; fill: var(--navy); }
.v2-sec--navy .v2-fig__axis { stroke: rgba(255,255,255,0.3); }
.v2-sec--navy .v2-fig__line { stroke: #fff; }
.v2-sec--navy .v2-fig__soft { stroke: rgba(255,255,255,0.3); }
.v2-sec--navy .v2-fig__node { fill: #fff; }
.v2-sec--navy .v2-fig__f1 { fill: #fff; }
.v2-sec--navy .v2-fig__f4 { fill: rgba(255,255,255,0.16); }
.v2-sec--navy .v2-fig__f5 { fill: rgba(255,255,255,0.10); }
.v2-sec--navy .v2-fig__label { fill: #fff; }
.v2-sec--navy .v2-fig__label--on { fill: var(--ambar); }


/* ═══════════════════════════════════════════════════════════════
   OPCIÓN 2 «PORTADA» — overrides
   La imagen manda: secciones a sangre, texto encima, formas que
   recortan la foto. Es el registro de los posts del feed.
   ═══════════════════════════════════════════════════════════════ */

/* Bloque a sangre con foto de fondo y texto encima */
.v2-full {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
}
.v2-full__bg { position: absolute; inset: 0; z-index: -2; }
.v2-full__bg img { width: 100%; height: 100%; object-fit: cover; }
.v2-full__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(18,36,47,0.90) 0%, rgba(18,36,47,0.62) 42%, rgba(18,36,47,0.18) 78%);
}
.v2-full h1, .v2-full h2, .v2-full h3 { color: #fff; }
.v2-full p { color: rgba(255,255,255,0.82); }
.v2-full .v2-tag { background-color: rgba(255,255,255,0.16); color: #fff; }
.v2-full .v2-tag::before { background-color: var(--ambar); }

/* Arco de marca que recorta la imagen (el gesto de los posts) */
.v2-arc {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
}
.v2-arc--navy  { background-color: var(--navy); }
.v2-arc--ambar { background-color: var(--ambar); }

/* En esta opción las secciones claras van sobre blanco pleno */
.v2-sec--hueso  { background-color: #fff; }
.v2-sec--hueso2 { background-color: var(--hueso-2); }