/* ===== Fuentes self-hosted (antes Google Fonts) ===== */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Peso 600 (SemiBold): faltaba -- solo habia 400/500/700 autohospedados.
   Sin este weight, .usos-card-tag pedia 600 y el navegador hacia match
   con el 700 disponible (mas cercano hacia arriba), asi que CRECER/
   MAXIMIZAR/OPTIMIZAR se veian en negrita real en vez del semibold del
   artefacto. */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/inter-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/inter-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/inter-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/inter-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Serif';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-300-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto Serif';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-300-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Serif';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto Serif';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/roboto-serif-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Serif Text -- fuente real del artefacto para titulares (self-hosted,
   mismo criterio que el resto: nada de <link> a Google Fonts). Solo
   existe en weight 400 normal (no hay bold ni italic en la familia). */
/* latin-ext */
@font-face {
  font-family: 'DM Serif Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dm-serif-text-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dm-serif-text-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== bloque original: <style> ((sin id)) ===== */


/* ═══════════════════════════════════════════════════
   RESET + TOKENS
   Mismos tokens de color/tipografia que cococo_hero_social.html (se
   reusan los assets del sitio: logo, badge Forbes, foto del equipo,
   fuentes). --pink-cta es una excepcion deliberada: el rosa de marca
   puro (#FF1493) con texto blanco da 3.64:1 de contraste, por debajo
   del 4.5:1 que exige WCAG AA para texto chico. #D9117D (85% del brillo
   original, misma familia de magenta) da 4.85:1. Mismo criterio ya
   aplicado en el nav del sitio principal.
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #FFFFFF;
  --ink:     #000913;
  --mid:     rgba(0,9,19,.65);
  --low:     rgba(0,9,19,.40);
  --rule:    #86A4BA;
  --pink-cta:#FF1493;
}

html, body {
  width: 100%;
  background: var(--bg);
  /* overflow-x:clip (no "hidden"): las secciones fusionadas de
     seccion_articulo_standalone.html usan el truco full-bleed
     (width:100vw; margin-left:calc(50% - 50vw)) para el carrusel de
     casos y el marquee de logos. Sin este clip en el ancestro, ese
     100vw desborda el body y aparece scroll horizontal. "hidden" en
     vez de "clip" convertiria el eje Y en "auto" y crearia un segundo
     scroller anidado (el bug de "primer scroll se traba" documentado
     en el archivo original). */
  overflow-x: clip;
}

/* ═══════════════════════════════════════════════════
   CONTENEDOR
   Componente autocontenido (no asume que es la pagina completa): centra
   con un max-width en pantallas grandes en vez de ir full-bleed hasta
   1920px (la imagen, a aspect-ratio fijo, se volveria absurdamente alta
   si el contenedor no tuviera techo). Mobile-first: 100% de ancho hasta
   que el contenido empieza a sentirse demasiado ancho para leerse comodo.
═══════════════════════════════════════════════════ */
.hero-v2 {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg);
  /* Compensa el espacio que el nav ya no ocupa en el flujo normal al
     pasar a position:fixed (ver SECCION 1 mas abajo): alto real de la
     barra + un respiro chico antes de que arranque el contenido.
     Valores por breakpoint, no una sola formula clamp, porque el alto
     de la barra tambien cambia en saltos por breakpoint (no de forma
     continua). */
  padding-top: 74px;
}
@media (min-width: 768px) {
  .hero-v2 { padding-top: 84px; }
}
/* Ya NO sube a 960px en desktop (>=900px): esa medida solo la
   necesitaba la foto del hero cuando vivia adentro de .hero-v2 -- ahora
   que la foto es full-bleed (ver .v2-image-section) y el nav tiene su
   propio ancho independiente (ver SECCION 1), lo unico que queda
   adentro de .hero-v2 es el titulo y la barra social. Se quedan en
   760px, el mismo ancho fijo que .problem-article (el texto del
   articulo, mas abajo) y que .vm-head-inner (el articulo oscuro), para
   que los tres bloques queden alineados en vez de que el titulo/barra
   social se vean mas anchos que el texto que los sigue. Subido de
   640 a 760px a pedido explicito: 640 se sentia "apretado" en
   desktop -- 720 sigue dentro del rango legible (65-70 caracteres por
   linea aprox, el ideal clasico son 45-75) pero respira mas. */
@media (min-width: 1200px) {
  .hero-v2 { padding-top: 98px; }
}

/* ═══════════════════════════════════════════════════
   SECCION 1 — NAV
   Plano y minimalista: barra full-width, pegada al borde superior del
   viewport (top:0, sin margen, sin esquinas redondeadas, sin sombra),
   fondo solido + un hairline inferior -- no la version "pildora
   flotante" (con margen/blur/sombra) de una iteracion anterior. Fixed
   y persistente durante TODO el scroll del sitio. .v2-nav-inner centra
   el contenido con el mismo max-width que .hero-v2, para que quede
   alineado al margen del resto de la pagina.
   Layout clasico "logo izq / acciones der": logo a la izquierda, y a
   la derecha un grupo (.v2-nav-actions) con el CTA seguido del boton
   de menu, pegados entre si -- vuelve al patron de 2 bloques (flex
   space-between) despues de probar el layout de 3 columnas con logo
   centrado.

   ── DESKTOP (>=900px), comportamiento distinto a proposito ──
   El resto del sitio usa .v2-nav-inner con el mismo max-width que
   .hero-v2 (960px) para quedar alineado al margen del contenido. El
   nav es la EXCEPCION: en desktop pierde ese tope y usa el ancho
   completo del viewport (max-width:none), como cualquier nav de
   sitio "grande" -- el contenido de la pagina puede seguir centrado
   en su columna angosta, pero la barra de navegacion en si misma se
   siente como el borde real del sitio, no como un elemento mas
   flotando dentro de la columna.
   Tambien cambia la composicion: en mobile el menu vive en un panel
   desplegable (boton hamburguesa -> .v2-menu-panel). En desktop no
   tiene sentido esconder 3 links detras de un boton cuando hay de
   sobra espacio horizontal para mostrarlos directo en la barra, como
   en cualquier nav de escritorio -- asi que >=900px: el boton
   hamburguesa se oculta, y aparece .v2-nav-links (los mismos 3 items
   de .v2-menu-panel, ahora inline) entre el logo y el CTA.
═══════════════════════════════════════════════════ */
.v2-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 500;
  background: var(--bg);
  border-bottom: 1px solid #F6FBFF;
}
.v2-nav-inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(20px, 6vw, 32px);
}
@media (min-width: 768px) {
  .v2-nav-inner { padding: 16px clamp(20px, 6vw, 32px); }
}
@media (min-width: 900px) {
  .v2-nav-inner {
    max-width: none;
    padding: 16px clamp(28px, 4vw, 48px);
  }
}
@media (min-width: 1200px) {
  .v2-nav-inner { padding: 20px clamp(40px, 4vw, 72px); }
}

/* Links de navegacion inline (solo desktop, >=900px) -- version en
   barra de los mismos 3 items de .v2-menu-panel (Home/Blog/Contacto,
   puede subir a 5). Oculto por completo en mobile/tablet: .display:none
   por defecto, mobile-first, se activa solo desde 900px via la regla
   de mas abajo (junto con ocultar el boton hamburguesa). */
.v2-nav-links {
  display: none;
  align-items: center;
  gap: 32px;
  margin-left: 44px;
}
/* .nav__link del artefacto, literal: IBM Plex Mono SemiBold 16/1/10%,
   mayusculas (texto en HTML se queda en case normal por semantica/
   accesibilidad, el uppercase es solo visual), color ink con hover a
   rosa. La raya (antes ::after de 2px) sube a 4px con radio 2, mismo
   tratamiento que .nav__raya -- solo visible en el link activo, igual
   que el artefacto (el hover NO la activa, solo cambia el color). */
.v2-nav-link {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  transition: color 200ms ease;
}
.v2-nav-link:hover { color: var(--pink); }
.v2-nav-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}
.v2-nav-link.is-active { color: var(--ink); }
.v2-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 4px;
  border-radius: 2px;
  background: var(--pink);
}
@media (min-width: 1200px) {
  .v2-nav-links { gap: 48px; margin-left: 52px; }
}
/* Interruptor mobile -> desktop: a partir de 900px, el hamburguesa
   desaparece, los links inline aparecen, y el CTA se empuja al borde
   derecho real de la barra (antes lo hacia justify-content:space-between
   del padre con solo 2 hijos; ahora hay 3 hijos -- logo/links/actions --
   asi que el margin-left:auto en .v2-nav-actions es lo que garantiza que
   se quede pegado a la derecha sin importar cuanto espacio ocupen los
   links). El panel/scrim del menu mobile se bloquean por completo en
   desktop (display:none !important) como salvaguarda: si alguien abre el
   menu en mobile y despues agranda la ventana, no debe quedar un panel
   "abierto" flotando sobre un layout que ya no lo necesita. */
@media (min-width: 768px) {
  .v2-nav-links { display: flex; }
  .v2-nav-actions { margin-left: auto; }
  .v2-menu-btn { display: none !important; }
  .v2-menu-panel, .v2-menu-scrim { display: none !important; }
}

.v2-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.v2-logo-mark {
  height: 18px;
  width: auto;
  display: block;
  transition: opacity 150ms cubic-bezier(0.16,1,0.3,1);
}
.v2-logo:hover .v2-logo-mark { opacity: 0.72; }
@media (min-width: 768px) {
  .v2-logo-mark { height: 20px; }
}
@media (min-width: 1200px) {
  .v2-logo-mark { height: 24px; }
}

.v2-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .v2-nav-actions { gap: 12px; }
}
@media (min-width: 1200px) {
  .v2-nav-actions { gap: 14px; }
}

/* CTA en pill (a diferencia del sitio principal, que lo pide cuadrado
   por un pedido explicito anterior): asi se ve en la imagen de
   referencia para este fragmento -- border-radius:100px. Altura fija
   (34/38/42px) igualada a .v2-menu-btn, ver comentario de SECCION 1.
   Antes usaba --pink-cta (#D9117D, una variante mas oscura pensada solo
   para este boton) con letter-spacing muy apretado (0.03em) y sin sombra
   -- se veia como un componente aparte del resto del sitio. Ahora usa el
   mismo rosa de marca (var(--pink), #FF1493), el mismo letter-spacing
   (0.08em) y el mismo glow rosa que el resto de la familia de CTAs del
   sitio (.stat-cta/.pink-band-btn-primary/.cta-btn) -- mismo padding
   proporcional y radio de pildora, escalado al alto disponible del nav
   (34/38/42px) en vez de la version grande (19px 34px) que usan esos
   otros botones, que no cabe en una barra de navegacion. */
.v2-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 34px;
  padding: 0 20px;
  background: var(--pink);
  border: none;
  color: #FFFFFF;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.16,1,0.3,1),
              transform 80ms ease;
}
@media (min-width: 768px) {
  .v2-cta { height: 38px; padding: 0 22px; font-size: 0.78rem; }
}
@media (min-width: 1200px) {
  .v2-cta { height: 42px; padding: 0 24px; font-size: 0.82rem; }
  .v2-agenda-btn { height: 50px; padding: 0 32px; font-size: 18px; border-width: 0; }
}
.v2-cta:hover { background: #E00D80; }
.v2-cta:active { transform: scale(0.98); }

/* Variante "tinta" (igual que el boton SIGUENOS del artefacto): mismo
   pill plano de .v2-cta, solo cambia el color de fondo. */
.v2-cta--tinta { background: var(--ink); }
.v2-cta--tinta:hover { background: #01213F; }
/* Variante clara: para usar sobre fondos oscuros (footer, articulo
   .vm) -- mismo pill plano, fondo blanco y texto/icono en tinta. */
.v2-cta--claro { background: #FFFFFF; color: var(--ink); }
.v2-cta--claro:hover { background: #F6FBFF; }
/* Icono tal cual el artefacto (.btn__icono + #ico-linkedin-premium): un
   solo SVG con fill-rule evenodd que YA dibuja la placa redondeada y
   recorta las letras "in" adentro -- con fill:currentColor (blanco,
   heredado del texto del boton) el resultado es placa blanca con las
   letras en el color de fondo del boton, sin necesidad de armar un
   fondo/circulo aparte. Proporcion icono/boton y gap calcados del
   artefacto (24px de icono en un boton de 44px, gap 16px) escalados a
   los 34/38/42px de este boton -- no son valores inventados sueltos. */
.v2-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e7e7e7;
  color: var(--ink);
  transition: background-color 200ms cubic-bezier(0.16,1,0.3,1);
}
.v2-follow:hover { background: #dcdcdc; }
.v2-follow-icon { width: 18px; height: 18px; flex-shrink: 0; }
@media (min-width: 768px) {
  .v2-follow { width: 40px; height: 40px; }
  .v2-follow-icon { width: 20px; height: 20px; }
}
@media (min-width: 1200px) {
  .v2-follow { width: 50px; height: 50px; }
  .v2-follow-icon { width: 22px; height: 22px; }
}
/* Mismo corte que el resto del nav (768px, ver .v2-nav-links): en
   mobile con hamburguesa no hay sitio para dos CTAs junto al logo. */
@media (max-width: 767px) {
  .v2-follow { display: none; }
}

/* Popover "Agendar": elegir region antes de ir al calendario -- prototipo
   sobre el CTA del header. El boton reusa .v2-cta tal cual (mismo pill
   rosa) y solo suma la flechita; el panel cuelga debajo, alineado a la
   derecha del boton para no salirse de la pantalla. */
.v2-agenda { position: relative; }
.v2-agenda-caret {
  width: 9px; height: 6px;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.v2-agenda-btn[aria-expanded="true"] .v2-agenda-caret { transform: rotate(180deg); }

.v2-agenda-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--bg, #FFFFFF);
  border: 1px solid var(--rule, #86A4BA);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0,9,19,0.10);
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.16,1,0.3,1),
              transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.v2-agenda-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mega-panel (inspirado en el menu de bundl.com, pedido explicito): 3
   verticales -- intro/checklist a la izquierda, una columna por persona
   a la derecha -- separadas por una linea fina, no por tarjetas propias.
   Ancho topeado a 40px menos que el viewport para que no desborde en
   pantallas angostas donde aun se muestra el nav de escritorio (1024). */
.v2-agenda-panel--mega {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  width: min(720px, calc(100vw - 40px));
  padding: 28px;
}
.v2-agenda-intro,
.v2-agenda-person {
  padding: 0 24px;
  border-left: 1px solid var(--rule, #86A4BA);
}
.v2-agenda-intro { padding-left: 0; border-left: none; }

/* Subheading + titular, calcados de .modal-contacto__titulo (el modal
   nuevo del artefacto) -- tamano y tipo literales, no un valor propio. */
.v2-agenda-intro-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--mid, rgba(0,9,19,.65));
}
.v2-agenda-intro-heading {
  margin-top: 12px;
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 5.5vw, 2.75rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink, #000913);
}
.v2-agenda-intro-heading em {
  font-style: normal;
  color: var(--pink);
}
.v2-agenda-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.v2-agenda-checklist li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: var(--ink, #000913);
}
.v2-check {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--pink);
}

/* Columna de persona: foto vertical de esquinas redondeadas (no circular,
   pedido explicito), nombre+bandera, email y telefono clicables, y el CTA
   de agendar al fondo de la columna -- mismas 2 columnas para Juan Carlos
   y Camilo, mismo patron. */
.v2-agenda-person {
  display: flex;
  flex-direction: column;
}
.v2-agenda-person-photo {
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,9,19,0.08);
  background: var(--rule, #86A4BA);
}
.v2-agenda-person-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-agenda-person-name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #000913);
}
/* Hora local de cada persona (JS la rellena, ver script) -- con AM/PM,
   a pedido explicito (el artefacto la muestra en 24h). */
.v2-agenda-person-time {
  margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  /* Gris mas claro que el email/telefono (--mid) para que se lea como
     dato secundario, pero sin bajar a --low -- a este tamano ya raspa
     la legibilidad. */
  color: rgba(0, 9, 19, 0.5);
}
.v2-agenda-option-flags { display: inline-flex; gap: 4px; }
/* Banderas planas propias (SVG, proporcion 3:2) en vez de los emoji del
   sistema -- pedido explicito: se ven "menos emoji" y con un mismo trazo
   fino en todas, sin el brillo/relieve que le mete cada OS a su emoji. */
.v2-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  outline: 1px solid rgba(0,9,19,0.14);
  outline-offset: -0.5px;
  display: inline-block;
  flex-shrink: 0;
}
.v2-agenda-person-contact {
  display: block;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--mid, rgba(0,9,19,.65));
  text-decoration: none;
}
.v2-agenda-person-contact:hover { color: var(--pink); }

/* Dos acciones por persona (videollamada / whatsapp), no una sola --
   pedido explicito, calcado de los botones del modal del artefacto:
   la principal (videollamada) rellena en rosa, la secundaria
   (whatsapp) en contorno tinta. Mismos iconos que el artefacto. */
.v2-agenda-person-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.v2-agenda-person-cta {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 1.5px solid var(--ink, #000913);
  border-radius: 100px;
  color: var(--ink, #000913);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.v2-agenda-person-cta:hover { background: var(--ink, #000913); color: #FFFFFF; }
.v2-agenda-person-cta--principal {
  background: var(--pink);
  border-color: var(--pink);
  color: #FFFFFF;
}
.v2-agenda-person-cta--principal:hover { background: #E00D80; border-color: #E00D80; }
.v2-agenda-person-cta-izq {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.v2-agenda-person-cta-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Franja "SIN COMPROMISO" (calcada del artefacto), full-width al fondo
   del panel -- por eso vive fuera de las 3 columnas con grid-column. */
.v2-agenda-tag {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  /* Sin border-top propio: las rayas rosa a los lados del texto ya
     separan esta fila del resto, una linea gris encima era redundante. */
  margin-top: 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mid, rgba(0,9,19,.65));
}
.v2-agenda-tag-raya { flex: 1 0 0; height: 1px; background: rgba(0,9,19,0.1); }

@media (max-width: 900px) {
  /* .v2-nav es position:fixed, asi que .v2-agenda-panel (absolute
     dentro de ese contexto) queda pegado al viewport y NO se mueve al
     hacer scroll de la pagina -- en mobile, con 2 personas + checklist
     + fotos, el panel mide mas que el alto de pantalla y el resto
     queda inalcanzable (ni se ve ni hay como llegar ahi). max-height +
     overflow-y:auto le da su propio scroll interno, acotado al alto
     disponible bajo el boton (nav ~60px + los 12px de separacion). */
  .v2-agenda-panel {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .v2-agenda-panel--mega {
    grid-template-columns: 1fr;
    width: min(340px, calc(100vw - 40px));
    padding: 24px;
    row-gap: 24px;
  }
  .v2-agenda-intro,
  .v2-agenda-person { padding: 0; border-left: none; }
  .v2-agenda-person { padding-top: 20px; border-top: 1px solid var(--rule, #86A4BA); }
  .v2-agenda-tag { margin-top: 4px; }
}

/* Boton hamburguesa real (3 lineas, no un "+"): el icono ocupa casi
   toda su caja (sin la "chip" circular de padding vacio de la version
   anterior) -- caja 34/38/42px igualada a la altura de .v2-cta, icono
   26/29/32px (antes 19/21px), esquinas apenas redondeadas (8px) en vez
   de circulo. Abre .v2-menu-panel (ver mas abajo); las 3 lineas se
   animan a una "X" cuando aria-expanded="true" -- affordance clasica de
   "cerrar" que confirma que el menu esta abierto. */
.v2-menu-btn {
  position: relative;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms cubic-bezier(0.16,1,0.3,1);
}
@media (min-width: 768px) {
  .v2-menu-btn { width: 38px; height: 38px; }
}
@media (min-width: 1200px) {
  .v2-menu-btn { width: 42px; height: 42px; border-radius: 9px; }
}
.v2-menu-btn:hover { background-color: rgba(0,9,19,0.06); }
.v2-menu-btn:active { background-color: rgba(0,9,19,0.1); }
.v2-menu-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.v2-menu-btn svg { width: 26px; height: 26px; position: relative; }
@media (min-width: 768px) {
  .v2-menu-btn svg { width: 29px; height: 29px; }
}
@media (min-width: 1200px) {
  .v2-menu-btn svg { width: 32px; height: 32px; }
}
.v2-menu-btn svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), opacity 150ms ease;
}
.v2-menu-btn[aria-expanded="true"] .v2-bar-top { transform: translateY(4px) rotate(45deg); }
.v2-menu-btn[aria-expanded="true"] .v2-bar-mid { opacity: 0; }
.v2-menu-btn[aria-expanded="true"] .v2-bar-bottom { transform: translateY(-4px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .v2-menu-btn svg path { transition: none; }
}

/* Panel desplegable del menu: aparece pegado justo debajo del nav
   (mismo fondo + hairline, para leerse como una extension de la barra,
   no un elemento distinto), con hasta 5 items (Home/Blog/Contacto por
   ahora). Lista en el mismo lenguaje visual que el resto del sitio:
   indice mono + titulo serif + punto de item activo (mismo patron que
   .nav-items del sitio principal). Scrim detras cierra el menu al
   hacer click fuera. */
.v2-menu-panel {
  position: fixed;
  top: 66px;
  left: 0; right: 0;
  z-index: 495;
  background: var(--bg);
  border-bottom: 1px solid #F6FBFF;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), opacity 180ms ease;
}
.v2-menu-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .v2-menu-panel { top: 74px; }
}
@media (min-width: 1200px) {
  .v2-menu-panel { top: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-menu-panel { transition: opacity 150ms ease; }
}

.v2-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(0,9,19,0.28);
  opacity: 0;
  transition: opacity 200ms ease;
}
.v2-menu-scrim.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v2-menu-scrim { transition: none; }
}

.v2-menu-list-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px clamp(20px, 6vw, 32px) 12px;
}
@media (min-width: 900px) {
  .v2-menu-list-wrap { max-width: 960px; }
}
.v2-menu-list { list-style: none; }
.v2-menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.v2-menu-list li:last-child .v2-menu-link { border-bottom: none; }
.v2-menu-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--low);
  letter-spacing: 0.08em;
  width: 20px;
  flex-shrink: 0;
}
.v2-menu-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  flex: 1;
  transition: color 150ms ease;
}
.v2-menu-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}
.v2-menu-list li.is-active .v2-menu-num { color: var(--pink-cta); }
.v2-menu-list li.is-active .v2-menu-title { color: var(--ink); font-weight: 500; }
.v2-menu-list li.is-active .v2-menu-dot { background: var(--pink-cta); }
.v2-menu-link:hover .v2-menu-title { color: var(--ink); }
.v2-menu-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════
   SECCION 2 — IMAGEN + BADGE FORBES
   Mismo asset (foto del equipo, recorte/sticker con canal alfa) y mismo
   badge (SVG completo) que cococo_hero_social.html. El badge SI se
   alinea al viewport completo (ver .v2-forbes-badge-wrap mas abajo):
   en desktop .hero-v2 queda centrado con margenes a los lados, y el
   badge no debe quedar pegado al borde angosto de la imagen sino al
   borde real de la pantalla, como un sello que "sale" del contenido.
═══════════════════════════════════════════════════ */
/* Full-bleed: rompe el max-width de .hero-v2 (640/960px) para que la
   foto llegue de borde a borde de la pantalla, sin importar el ancho
   de la columna de contenido que la rodea (titulo, nav, barra social
   siguen dentro de esa columna angosta -- SOLO la imagen sale). Mismo
   truco full-bleed que usa el resto del sitio (width:100vw +
   margin-left/right:calc(50% - 50vw)), ahora aplicado tambien aca. */
.v2-image-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--bg);
}
.v2-image-wrap {
  width: 100%;
  aspect-ratio: 1836 / 1617;
  background: transparent;
}
@media (min-width: 768px) {
  .v2-image-wrap { aspect-ratio: 1800 / 764; }
}
.v2-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  display: block;
}
@media (min-width: 768px) {
  .v2-image-wrap img { object-fit: cover; }
}
/* Wrap full-bleed: rompe el max-width de .hero-v2 (640/960px) para que
   el badge pueda pegarse al borde REAL de la pantalla, no al borde
   angosto de la columna de contenido. Mismo truco de siempre
   (left:50% + width:100vw + translateX(-50%)) pero version "absolute"
   -- el de margin-left:calc(50% - 50vw) que usa el resto del sitio es
   para elementos en flujo normal, este wrap ya es position:absolute
   (ancla su "top" a .v2-image-section, que sigue siendo position:
   relative) asi que necesita la variante con transform. */
.v2-forbes-badge-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
/* Tamaño: ya NO es un % del ancho de la imagen (esa logica lo hacia
   encoger en desktop, porque la imagen desktop es un banner mucho mas
   bajo que el de mobile -- ver historial de esta regla). Ahora es un
   sello independiente, con su propio tamaño en clamp(vw) que CRECE en
   desktop en vez de encoger: mobile ~90-130px, desktop 130-170px,
   desktop grande 150-200px. */
.v2-forbes-badge {
  position: absolute;
  top: 14px;
  right: 0;
  width: clamp(90px, 22vw, 130px);
  pointer-events: none;
}
.v2-forbes-badge svg { width: 100%; height: auto; display: block; }
@media (min-width: 768px) {
  .v2-forbes-badge { top: 18px; width: clamp(130px, 9vw, 170px); }
}
@media (min-width: 1200px) {
  .v2-forbes-badge { top: 22px; width: clamp(150px, 8vw, 200px); }
}

/* ═══════════════════════════════════════════════════
   SECCION 3 — TAG + TITULO
   Mismas clases/valores que .social-byline/.social-headline del sitio
   principal, con el ORDEN invertido: en la imagen de referencia el tag
   "COCOCO.VENTURES" va arriba del titular (en el sitio principal el h1
   va primero en el DOM) -- aca se corrige ese orden.

   ── SISTEMA DE ESPACIADO foto/titulo/barra-social/texto (mismas 3
   reglas, ambos articulos) ──
   REGLA A -- foto → titulo: clamp(24px,5vw,32px). Separa la foto del
   titular lo suficiente para que no se sientan pegados, sin abrir un
   salto de seccion (siguen siendo la misma "unidad" visual: foto +
   su historia).
   REGLA B -- titulo → barra social: clamp(14px,3vw,18px), la mas chica
   de las 3. El like/compartir/tiempo-de-lectura es METADATA del
   titular (como un byline de revista): debe leerse pegado a el, no
   como un bloque aparte.
   REGLA C -- barra social → texto del articulo: clamp(40px,8vw,56px),
   la mas grande. Marca el quiebre real: termina la "cabecera" (foto +
   titulo + metadata) y arranca la lectura del articulo -- necesita el
   respiro mas generoso de los tres para que el ojo entienda que
   cambio de modo (de "escanear" a "leer").
   Jerarquia resultante A > B, C > A: ni una escalera pareja ni saltos
   al azar -- el tamaño del espacio comunica que tan pegados estan dos
   elementos entre si. */
.v2-title-section {
  padding: clamp(24px, 5vw, 32px) clamp(20px, 6vw, 32px) 0; /* REGLA A */
}
.v2-headline {
  font-family: 'Roboto Serif', serif;
  /* Techo subido de 3rem a 3.75rem (pedido explicito: el titulo perdia
     protagonismo en desktop). Con el 8.5vw sin tocar, el piso/crecimiento
     en mobile queda identico -- antes el techo se alcanzaba a los ~565px
     de viewport y de ahi para arriba quedaba plano en 48px sin importar
     cuanto espacio hubiera disponible; ahora se sigue alcanza recien a
     los ~753px, y el plano resultante es 60px (antes 48px) en cualquier
     resolucion de tablet/desktop en adelante. Misma regla aplicada
     identica en .vm-headline (version dark de este mismo titulo). */
  font-size: clamp(1.9rem, 8.5vw, 3.75rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.v2-headline em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* ═══════════════════════════════════════════════════
   SECCION 4 — BOTONES SOCIALES
   Nota de diseño: el sitio principal habia sacado esta fila de
   like/comentario/repost a proposito ("simulan actividad social que no
   existe, ruido decorativo para un sitio B2B"). Se reincorpora aca
   pura y exclusivamente porque la imagen de referencia de este
   fragmento la pide explicitamente -- por eso los botones de la
   izquierda son elementos ESTATICOS (span, no button): no prometen una
   accion real de "me gusta" que no existe en el sitio. "Compartir" si
   es un boton real (misma logica que el sitio principal: es una accion
   genuina).
═══════════════════════════════════════════════════ */
.v2-social-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sin padding vertical propio: antes sumaba padding-top + margin-top
     (dos fuentes de espacio haciendo el mismo trabajo, el gap real
     terminaba siendo el doble de lo que parecia en el codigo). Ahora
     el gap hacia el titulo lo define UNA sola cosa: el margin-top de
     abajo (REGLA B). El padding horizontal se queda, es el que alinea
     esta fila con el titulo/foto de arriba. */
  padding: 0 clamp(20px, 6vw, 32px);
  /* REGLA B subida: antes clamp(14px,3vw,18px) -- en mobile (donde el
     3vw queda por debajo del piso en cualquier ancho de telefono normal)
     esto se quedaba pegado exactamente en 14px, sentido como demasiado
     cerca del titulo. Piso subido a 20px, techo a 26px -- sigue siendo
     la mas chica de las 3 (REGLA A > B, C > A se mantiene: A pinnea en
     24px, C ahora en 48px), pero con mas aire real. */
  margin-top: clamp(20px, 3vw, 26px); /* REGLA B */
}
.v2-social-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Tiempo de lectura, estilo Medium: texto suelto, sin pill/borde, no
   compite con el boton de like que es la unica accion real de la fila.
   Mismo tamaño/color/tracking que el texto de "Compartir" (mismo peso
   visual, aunque uno sea texto libre y el otro un boton con borde). El
   icono usa 1em para calzar con el tamaño del texto que lo acompaña. */
.v2-read-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.v2-read-time svg { width: 1em; height: 1em; flex-shrink: 0; }
/* Like real (antes era un <span aria-hidden> decorativo/fake). Ahora es
   un <button> de verdad: focuseable por teclado, con aria-pressed, y
   "solo suma" -- un solo click activa el estado, sin toggle de vuelta
   (pedido explicito: no es un contador que sube y baja). */
.v2-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #86A4BA;
  border-radius: 100px;
  color: var(--ink);
  background: #FFFFFF;
  font: inherit;
  cursor: pointer;
  transition: border-color 200ms cubic-bezier(0.16,1,0.3,1), background-color 200ms cubic-bezier(0.16,1,0.3,1);
}
.v2-social-pill:hover { border-color: var(--ink); }
.v2-social-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.v2-social-pill svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 260ms cubic-bezier(0.34,1.56,0.64,1), fill 200ms, stroke 200ms; }
.v2-social-pill.is-liked { border-color: #FF1493; background: rgba(255,20,147,0.06); }
.v2-social-pill.is-liked svg { fill: #FF1493; stroke: #FF1493; transform: scale(1.12); }
.v2-social-pill.is-liked .v2-social-count { color: #FF1493; }
.v2-social-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--mid);
}
.v2-share-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid #86A4BA;
  border-radius: 100px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: #FFFFFF;
  text-decoration: none;
  transition: border-color 200ms cubic-bezier(0.16,1,0.3,1), transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.v2-share-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.v2-share-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }



/* ===== bloque original: <style> ((sin id)) ===== */


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

:root {
  --bg:   #FFFFFF;
  --ink:  #000913;
  --mid:  rgba(0,9,19,.65);
  --low:  rgba(0,9,19,.40);
  --rule: #86A4BA;
  --paper: #F6FBFF; /* gris editorial: fondo de la tabla de clientes, entre --bg y --rule */
  --navy: #000913;
  --gold: #FF1493;
  --pink: #FF1493;
  --cyan: #00BFFF;
  --green:#6BFF00;
  --black:#000913;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
}

/* ═══════════════════════════════════════════════════
   PAGE WRAPPER  mobile-first, centers on desktop
═══════════════════════════════════════════════════ */
.page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  /* clip (no hidden): recorta el desborde horizontal de las secciones
     full-bleed SIN convertir a .page en un contenedor de scroll vertical.
     Con 'hidden', el eje Y se volvía 'auto' y creaba un segundo scroller
     anidado -> el bug del "primer scroll se traba". */
  overflow-x: clip;
}

/* Noise texture */
.page::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Inner content wrapper  max-width centered */
.inner {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
}

@media (min-width: 768px) {
  .inner { max-width: 720px; }
}
@media (min-width: 1024px) {
  .inner { max-width: 900px; }
}

/* ═══════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════ */
/* ── NAV FLOTANTE ─────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: transparent;
  transition: background 400ms cubic-bezier(0.16,1,0.3,1), backdrop-filter 400ms cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.nav.scrolled {
  /* Blanco 100% opaco (antes rgba(255,255,255,0.90) + blur): al ser
     completamente opaco, el backdrop-filter ya no tenia efecto visible
     (nada detras se transparenta), asi que se quito por ser codigo muerto. */
  background: #FFFFFF;
}
.nav-inner {
  width: 100%;
  padding: 0 28px;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .nav-inner { padding: 0 40px; height: 64px; }
}
@media (min-width: 1200px) {
  .nav-inner { padding: 0 56px; }
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  position: relative;
  /* Se estira a todo el alto de .nav-inner (56/64px) para que el logo
     (100% de ese alto, ver .nav-logo-img) quede al ras arriba y abajo de
     la barra -- el badge SVG esta diseñado justamente asi: esquinas
     superiores rectas (al ras del borde del nav) y solo las inferiores
     redondeadas, como una pestaña. */
  align-self: stretch;
  opacity: 1;
  transition: opacity 200ms cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}
/* Dos logos (dark/color), SVG vectorial (no PNG raster) -- se cruzan en
   opacity segun el estado del nav: dark por default (nav transparente,
   sobre la foto del hero, se lee como un badge/pestaña blanca flotando,
   esquinas superiores rectas al ras del borde del nav), color cuando el
   nav se pone opaco/blanco (.nav.scrolled), mismo lenguaje "badge" que el
   resto del sitio (Forbes badge, chips de la banda rosa). El de color va
   position:absolute sobre el de dark para que el cambio sea un crossfade,
   no un salto de layout. Altura 100%: ocupa todo el alto de .nav-logo
   (que a su vez ocupa todo el alto de .nav-inner, ver arriba). */
.nav-logo-img {
  height: 100%;
  width: auto;
  display: block;
  transition: opacity 300ms cubic-bezier(0.16,1,0.3,1);
}
.nav-logo-color {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
}
.nav.scrolled .nav-logo-dark { opacity: 0; }
.nav.scrolled .nav-logo-color { opacity: 1; }

/* Hamburguesa premium */
.hamburger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end;
  gap: 6px; cursor: pointer;
  background: none; border: none; padding: 4px;
  border-radius: 8px;
  opacity: 0.75;
  transition: opacity 200ms cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}
.hamburger:hover { opacity: 1; }
.hamburger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1),
              opacity 200ms cubic-bezier(0.16,1,0.3,1),
              width 320ms cubic-bezier(0.16,1,0.3,1);
  transform-origin: right center;
}
.hamburger span:nth-child(1) { width: 26px; }
.hamburger span:nth-child(2) { width: 18px; }
.hamburger span:nth-child(3) { width: 22px; }
.hamburger.open span:nth-child(1) { width: 24px; transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { width: 24px; transform: translateY(-8px) rotate(-45deg); }

.nav-drawer {
  background: var(--bg);
  overflow: hidden;
  max-height: 0;
  transition: max-height 380ms cubic-bezier(0.16,1,0.3,1), border-color 300ms cubic-bezier(0.16,1,0.3,1);
}
.nav-drawer.open { max-height: 360px; border-bottom-color: var(--rule); }
.nav-drawer-inner {
  max-width: 430px; margin: 0 auto;
  padding: 16px 24px 20px;
}
@media (min-width: 768px) {
  .nav-drawer-inner { max-width: 720px; padding: 16px 32px 20px; }
}
.nav-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--low); margin-bottom: 12px; display: block;
}
.nav-items { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.nav-items li {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.nav-items li:last-child { border-bottom: none; }
.nav-num { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--low); letter-spacing: 0.08em; width: 20px; flex-shrink: 0; }
.nav-title { font-family: 'Roboto Serif', serif; font-size: 1rem; font-weight: 400; color: var(--mid); flex: 1; }
.nav-items li.active .nav-title { color: var(--ink); font-weight: 500; }
.nav-items li.active .nav-num { color: var(--navy); }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.nav-items li.active .nav-dot { background: var(--navy); }

/* ═══════════════════════════════════════════════════
   SECTION 1  HERO (sello stamp)
   El titulo flota sobre la foto en todos los tamaños (overlay). Foto
   actual: cuadrada (2048x2048, misma composición que V3 pero en mayor
   resolución), con margen generoso a los lados de las 2 personas de las
   puntas (a diferencia de una foto anterior, panoramica, que tocaba el
   borde). El "cover" en este caso siempre recorta el ancho y deja
   el alto completo (las caras nunca se recortan verticalmente), pero las
   caras estan bajas en el encuadre (zona de caras ~19%-49% del alto). Por
   eso en mobile el contenedor usa 4/5 (mas alto que ancho) en vez de 1/1:
   mismo recorte horizontal seguro, pero mas alto en px = mas espacio libre
   abajo de las caras para el titulo, sin taparlas. En desktop el max-height
   ya fuerza un rectangulo ancho sin importar el aspect-ratio declarado.
═══════════════════════════════════════════════════ */
.s-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 340px;
  max-height: 640px;
  background: var(--ink);
  z-index: 1;
  margin-top: 0;
}
@media (min-width: 768px) {
  .s-hero { min-height: 460px; max-height: 760px; }
}
.s-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(0,9,19,0.45) 0%,
      rgba(0,9,19,0.08) 16%,
      rgba(0,9,19,0) 36%,
      rgba(0,9,19,0.05) 52%,
      rgba(0,9,19,0.62) 82%,
      rgba(0,9,19,0.8) 100%);
}
.hero-photo-clip {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.seal-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* 130% dejaba el "cover" efectivo mucho mas angosto de lo necesario. 110%
     es lo minimo que alcanza para el slide del parallax (hasta 34px) y el
     zoom Ken Burns, sin angostar de mas el recorte horizontal (el recorte
     efectivo aqui es ancho:alto*1.1, y como la foto es cuadrada eso solo
     recorta un poco mas de ancho, nunca el alto). */
  height: 110%;
  pointer-events: none;
}
.seal-frame {
  width: 100%; height: 100%;
}
.seal-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  /* El recorte de "cover" aqui siempre es horizontal (foto cuadrada en un
     contenedor mas alto que ancho), asi que el eje Y no recorta nada; 30%
     solo define el punto de origen del zoom Ken Burns, cerca de la zona de
     las caras (~19%-49% del alto). */
  object-position: 50% 30%;
  display: block;
  transform-origin: 50% 30%;
  animation: kenBurnsZoom 16s ease-in-out infinite alternate;
  animation-delay: 1s;
}
@keyframes kenBurnsZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .seal-photo { animation: none; }
  .editorial-callout::before { animation: none; }
}

/* Headline flotando sobre la foto en todos los tamaños */
/* Horizontal unificado con el resto de las secciones (mismo clamp(24,7vw,40)
   que .s-intro/.s-pink-band). Vertical: EXCEPCION documentada a la regla
   unificada, porque la card de Jorge (.stat-standalone) se monta encima de
   este padding-bottom con un margin-top negativo (overlap conector, ver esa
   clase). Si este padding fuera el generico clamp(48,8vw,64) el overlap
   (76-120px) seria mayor que el propio padding y se comeria el titulo. Regla:
   padding_lado_overlap = overlap + colchon minimo de aire, calculado con el
   mismo valor absoluto que usa el margin-top de la card, asi los dos quedan
   atados y nunca se desincronizan. Colchon subido a clamp(32,5vw,40) (antes
   clamp(20,3vw,32)) -- en mobile el minimo de 20px se sentia muy pegado
   entre el titulo y la card, pedido explicito de mas aire ahi. Sin
   padding-top: es un overlay anclado abajo (bottom:0) sobre la foto, no
   tiene borde superior propio del que alejarse. */
/* Sin max-width: antes se topaba en min(90vw,960px) desde 768px y en
   min(70vw,1180px) desde 1200px (para limitar el "measure" tipografico),
   pero eso dejaba de aprovechar el ancho horizontal completo que el resto
   de las secciones si usa. Ahora el titulo ocupa el 100% del ancho del
   hero, solo descontando el padding horizontal unificado -- consistente
   con la regla del resto del sitio, en todas las resoluciones. */
.hero-headline-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 0 clamp(24px, 7vw, 40px) calc(clamp(76px, 17vw, 120px) + clamp(32px, 5vw, 40px));
}
#s-hero .hero-headline-wrap .section-tag {
  color: rgba(255,255,255,0.85);
  opacity: 1;
}
#s-hero .hero-headline-wrap .headline { margin-bottom: 0; }
#s-hero .hero-headline-wrap h1 {
  color: #FFFFFF;
  text-shadow: 0 6px 28px rgba(0,9,19,0.4), 0 1px 4px rgba(0,9,19,0.3);
}
#s-hero .hero-headline-wrap h1 em {
  color: #FFFFFF;
  font-style: normal;
  font-weight: 400;
  /* Subrayado dibujado con background (compatible con Edge/todos los navegadores) */
  text-decoration: none;
  background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Forbes badge */
#forbes-badge {
  position: fixed;
  top: 52px; right: -12px;
  width: clamp(150px, 22vw, 210px);
  z-index: 50;
  pointer-events: none;
}
#forbes-badge img { width: 100%; height: auto; display: block; }
#forbes-badge svg { width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════
   SECTION 2  INTRO (H1 + stat + logos + testimoniales)
   Solid beige  rises over hero
═══════════════════════════════════════════════════ */
.s-intro {
  background: var(--bg);
  position: relative;
  z-index: 11; /* por encima de s-press (10), para que la card de cierre pueda montarse sobre esa seccion */
  padding: clamp(32px, 8vw, 56px) clamp(24px, 7vw, 40px) clamp(48px, 8vw, 64px);
}

/* Gradient fade top edge (desactivado: la tarjeta ahora flota sobre el hero) */
.s-intro::before {
  content: '';
  position: absolute;
  top: -32px; left: 0; right: 0; height: 32px;
  background: transparent;
  pointer-events: none;
  z-index: -1;
}

/* Headline */
.section-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.55rem, 2.8vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 14px;
  opacity: 0.6;
}
.headline { margin-bottom: 48px; }
/* ═══════════════════════════════════════════════════
   TITULO DEL HERO — reescrito desde cero. Sin reglas de numero de
   lineas ni breakpoints a medida: una sola formula de tipografia fluida
   (clamp + vw), el wrap lo decide el navegador de forma natural segun
   el ancho real de pantalla en cada momento — practica estandar para
   titulares de hero (el mismo patron que usan la mayoria de los sitios
   con tipografia fluida). El numero de lineas resultante varia segun el
   dispositivo (tipicamente 2-4 en este texto) y eso es normal, no un
   defecto a corregir. */
.headline h1 {
  font-family: 'Roboto Serif', serif;
  font-size: clamp(1.75rem, 1rem + 4vw, 4.5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.headline h1 em { font-style: italic; font-weight: 400; color: var(--pink); }
/* Stat block */
/* ── STAT STANDALONE (bloque suelto: conecta la foto hero con el contenido de abajo) ──
   Full-bleed: rompe el .inner y llena el ancho de la pagina (igual que el titulo del
   hero), respetando solo el borde horizontal general del sitio via padding.
   Entrada: la card ya llega completa (sin crecer de 0 ni armarse por partes),
   cae desde arriba y "aterriza" en su lugar — un solo movimiento, con un
   pequeño rebote al asentarse (back-out easing) en vez de un fundido/crecimiento. */
.stat-standalone {
  position: relative;
  z-index: 4;
  width: 100vw;
  /* Overlap con el hero: la card debe montarse sobre la foto para funcionar
     como conector visual entre el hero y esta seccion. El margin-top no
     solo tiene que "alcanzar" la foto -- primero tiene que cancelar el
     padding-top de .s-intro (el padre de esta card, ver esa clase), que
     empuja a esta card hacia abajo ANTES de que el margin negativo actue.
     Sin restarlo, el overlap real hacia la foto queda mas corto de lo
     pensado. Card de "SALIDA" (regla fija del sitio): 20% de su propio
     alto asoma hacia arriba (el hero), 80% se queda abajo (nativo, dentro
     de .s-intro). Como el alto de la card es fluido (texto responsive,
     no un numero fijo), --card-overlap-jorge lo calcula JS midiendo el
     alto real de #quote-card-jorge y aplicando ese 20% -- ver
     applyCardOverlapRules() en el script. El valor de respaldo (76px) es
     solo para el primer frame antes de que JS corra. */
  margin-top: calc(-1 * (clamp(32px, 8vw, 56px) + var(--card-overlap-jorge, 76px)));
  margin-bottom: clamp(32px, 7vw, 56px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(24px, 7vw, 48px); /* 48px a 1920px, grid del sitio */
  padding-right: clamp(24px, 7vw, 48px);
}

/* ── QUOTE DE CIERRE (Eduardo): mismo componente que la card de Jorge
   arriba (comparten la clase .quote-card-testimonial — foto circular con
   acento cyan, cita, autor, LinkedIn), pero SIN el wrapper flotante
   (.stat-standalone) que hace que la de Jorge se superponga a la seccion
   anterior. Esta vive en flujo normal, dentro de la seccion beige — el
   full-bleed usa el mismo padding horizontal que .stat-standalone (mismo
   ancho efectivo de card), sin el overlap ni la animacion de "caida"
   reservada para las cards flotantes; solo el fade-up generico (.reveal). */
.stat-block {
  text-align: center;
}

/* ── Quote card: card blanca premium, base compartida por Jorge y Eduardo
   (ambos agregan la clase .quote-card-testimonial encima). El full-bleed
   de Jorge lo maneja .stat-standalone (flotante); el de Eduardo lo maneja
   .quote-standalone-wrap (en flujo normal, ver mas abajo); aqui la card
   solo llena el 100% del area ya inseteda por cualquiera de los dos. */
.quote-card {
  position: relative;
  /* Antes blanco puro (#FFFFFF), igual que el fondo del sitio -- ahora
     que el sitio es blanco puro, la card usa el tono que antes tenia el
     fondo (#F6FBFF, blanco con un ligero tinte azul) para seguir
     distinguiendose de la pagina detras en vez de fundirse con ella. */
  background: #F6FBFF;
  border: 1px solid #86A4BA;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0,9,19,0.04), 0 24px 64px rgba(0,9,19,0.08);
  width: 100%;
  /* Antes 1200px. Alineado a la misma columna de lectura de 760px que
     .hero-v2/.editorial-block/.art-frame .problem-article/.vm-head-inner/
     .vm-close-callout (pedido explicito: Jorge y Eduardo, mismas dos cards
     que comparten esta clase base .quote-card, deben respetar el mismo
     max-width que el resto del contenido en desktop). */
  max-width: 760px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: clamp(44px, 9vw, 68px);
  margin-left: auto;
  padding: clamp(32px, 7vw, 48px) clamp(28px, 6.5vw, 40px);
  text-align: left;
}
.quote-card-text {
  font-family: 'Roboto Serif', serif;
  /* Escala propia (independiente del texto del articulo): la cita es un
     momento destacado, no parrafo de lectura, asi que necesita mas
     presencia. Fluido con un piso legible en mobile chico (~16.8px) y un
     techo que no la vuelva abrumadora en pantallas grandes (~22.4px) — un
     solo clamp, sin salto brusco al pasar a desktop. */
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  font-weight: 400; font-style: italic;
  line-height: 1.55; color: var(--ink);
  letter-spacing: 0.015em;
  margin: 0 0 24px;
}
.quote-card-text strong {
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
}
.quote-card-text::before {
  content: '\201C';
  display: block;
  font-family: 'Roboto Serif', serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 2.8rem);
  line-height: 0.5;
  color: var(--gold);
  margin-bottom: 14px;
}
.quote-card-author { display: flex; align-items: center; gap: 14px; }
.quote-card-photo {
  width: 48px; height: 48px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; background: var(--rule);
  box-shadow: 0 0 0 1px rgba(0,9,19,0.06);
}

.quote-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.quote-card-meta { display: flex; flex-direction: column; gap: 2px; }
.quote-card-name {
  font-family: 'Roboto Serif', serif;
  font-size: clamp(0.85rem, 3.2vw, 0.95rem); font-weight: 500; font-style: normal;
  color: var(--ink); line-height: 1.2;
  letter-spacing: -0.005em;
}
.quote-card-company {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.58rem, 2.4vw, 0.65rem); font-weight: 500;
  color: var(--mid); letter-spacing: 0.12em; text-transform: uppercase;
}
.quote-card-linkedin {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--mid);
  background: rgba(0,9,19,0.04);
  transition: background 200ms cubic-bezier(0.16,1,0.3,1), color 200ms cubic-bezier(0.16,1,0.3,1);
}
.quote-card-linkedin:hover { background: rgba(0,9,19,0.08); color: var(--ink); }
.quote-card-linkedin svg { width: 14px; height: 14px; display: block; }
.quote-card-linkedin-label { display: none; }

/* ── Jorge: rediseño editorial (mobile-first) ──
   Card mas plana y silenciosa (sombra minima + borde fino, no "drop shadow" de
   app); un solo acento de marca (Blue Co) en vez del ring arcoiris de 3 colores;
   el simbolo de comillas vuelve a marcar el inicio de la cita (arriba del
   texto, en mobile y desktop); y una regla fina que separa la cita de la
   atribucion, como un pull-quote editorial. */
.quote-card-testimonial {
  box-shadow: 0 1px 2px rgba(0,9,19,0.03);
  border: 1px solid rgba(0,9,19,0.07);
}

/* ── Contenido: la card ya llega completa y armada (ver .stat-standalone
   arriba) — nada se dibuja ni entra por partes aqui, todo esta visible desde
   el primer frame en que la card cae y aterriza. ── */
.quote-card-testimonial .quote-card-col-text {
  position: relative;
  /* Sin barra de acento en mobile: la barra cyan no aportaba (peso visual
     extra sin funcion), asi que aqui no hay padding-left reservado para
     ella. En desktop (900px+) si se reintroduce como acento de la columna
     de texto, ver media query mas abajo. */
}
.quote-card-testimonial .quote-card-author {
  position: relative;
  padding-top: clamp(20px, 5vw, 24px);
  margin-top: clamp(20px, 5vw, 24px);
}
.quote-card-testimonial .quote-card-author::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(0,9,19,0.08);
}
.quote-card-testimonial .quote-card-photo {
  width: 56px; height: 56px;
  padding: 2px;
  background: var(--cyan);
  box-shadow: none;
}
.quote-card-testimonial .quote-card-photo img {
  border-radius: 50%;
}
.quote-card-testimonial .quote-card-name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.quote-card-testimonial .quote-card-company {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.82rem, 0.5vw + 0.7rem, 0.95rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.quote-card-testimonial .quote-card-linkedin {
  /* Mismo tamaño que la foto de Jorge (56x56) para que ambos círculos
     pesen igual junto al nombre, en vez del botón pequeño genérico. */
  width: 56px; height: 56px;
  transition: background 200ms cubic-bezier(0.16,1,0.3,1),
              color 200ms cubic-bezier(0.16,1,0.3,1);
}
.quote-card-testimonial .quote-card-linkedin-mark {
  width: 26px; height: 26px;
}

/* Antes habia un @media (min-width:900px) aca que reescribia por completo
   el layout de estas cards en desktop (grid horizontal 2 columnas, foto
   72px, barra de acento cyan, LinkedIn con wordmark en vez de icono solo,
   etc). Pedido explicito: Jorge y Eduardo deben verse igual en mobile y en
   desktop, usando el diseño de mobile como base (mismo stack vertical,
   mismos iconos, misma foto 56px, mismo LinkedIn solo-icono) — se elimino
   ese bloque entero, asi que ahora las reglas base de arriba (sin media
   query) son las unicas que aplican en cualquier resolucion. */

/* Ya no hay medallon claro detras del sello: vive directo sobre el fondo
   beige de .s-social-proof (ya no hay card blanca de por medio) -- la
   tinta oscura del PNG tiene contraste de sobra sin necesitar un disco de
   respaldo, y el usuario pidio explicitamente que el fondo del sello
   quede transparente. */
/* Antes: margin-bottom:0, porque el bloque "También reconocidos en" seguia
   justo despues (sin espacio propio). Ese bloque se movio a la card del
   sello/logo (.pink-band-card, debajo de .pink-band-editorial) -- ahora
   .stat-trio es el ultimo hijo de esta card otra vez, asi que recupera su
   margin-bottom normal para que la card no termine sin aire abajo. */
/* Sin tag "¿Qué hacemos?": el titular queda solo, centrado igual que el
   resto de la card (sello, carrusel, contador, stat-trio). */

/* Protagónico: titular grande, ahora es la frase de misión (sin repetir
   años/meses/días, que ya viven en el .stat-trio de arriba). Sigue sin
   max-width en ch: el salto de línea lo decide el ancho real del contenedor.
   Formula (no un clamp arbitrario): igual que .headline h1 del hero, el
   tamaño es funcion lineal del vw en vez de un clamp con techo/piso fijos.
   Aqui el ancho disponible no es simplemente 100vw menos un padding fijo:
   son DOS paddings anidados, el de .stat-standalone (clamp 24-48px) y el
   de esta card (clamp 28-40px) — ambos tambien en vw. Se simuló el wrap de
   "CoCoCo ejecuta apuestas estratégicas para empresas, empresarios y
   family offices." palabra por palabra (todo el texto en weight 300
   parejo, sin enfasis) contra ese ancho disponible real en cada punto de
   300 a 767px, se ajustó una recta con margen de seguridad sobre esa
   curva, y se verificó que el resultado nunca pasa de 3 líneas en todo
   ese rango. */
/* Carrusel de logos premium: vive dentro de la card clara de la banda rosa
   (.pink-band-card), debajo del titular, como prueba social inmediata bajo
   la promesa (a diferencia de
   clients-table-card, la tabla editorial de texto que vive fuera, mas
   abajo, con nombre+ciudad+año). Deriva lenta y continua, pausa al hover
   (detalle premium), y funde a --ink en los bordes. El espacio hacia el
   elemento siguiente ya lo resuelve el "gap" de .pink-band-card —
   el unico margen propio que conserva es el horizontal negativo, para
   hacer breakout a todo el ancho de esa columna (el carrusel es el unico
   hijo pensado para sangrar de borde a borde, todo lo demas respeta el
   padding normal de la seccion). */
.brand-marquee {
  position: relative;
  width: 100%;
  /* Igual al padding horizontal de .pink-band-card (clamp(24,7vw,40),
     unificado con el resto de las secciones), para que el breakout
     llegue exacto al borde de la card. */
  margin: 0 calc(-1 * clamp(24px, 7vw, 40px));
  overflow: hidden;
}
.brand-marquee::before,
.brand-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: clamp(44px, 10vw, 88px); z-index: 2; pointer-events: none;
}
.brand-marquee::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.brand-marquee::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.brand-marquee-track {
  display: flex; align-items: center;
  width: max-content;
  padding: 8px 0;
  will-change: transform;
}
/* Logos mas grandes y protagonicos (antes clamp(28,6.4vw,38)/max-width
   clamp(64,18vw,92)) -- sigue siendo fluido con vw, solo con piso/techo
   mas altos, asi que se sigue achicando/agrandando segun la resolucion. */
.brand-marquee-item {
  display: flex; align-items: center; justify-content: center;
  height: clamp(40px, 9vw, 56px);
  margin: 0 clamp(24px, 6vw, 40px);
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1);
}
.brand-marquee-item svg {
  height: 100%; width: auto;
  max-width: clamp(90px, 24vw, 130px);
  object-fit: contain; display: block;
}
.brand-marquee-item:hover { transform: scale(1.1); }
.brand-marquee-divider {
  width: 1px; height: clamp(20px, 4.5vw, 26px);
  background: var(--rule);
  flex-shrink: 0;
}
/* Convertido en titulo real: MISMAS reglas/formato/tamaño/estilo que
   .v2-headline / .vm-headline (los titulos de los dos articulos de
   arriba) -- pedido explicito. Una sola formula de clamp para todas
   las resoluciones (nada de tratamiento distinto en mobile vs
   desktop), mismo font-family/weight/line-height/letter-spacing/color,
   y el texto envuelve de forma natural (sin spans forzados a su propia
   linea ni nowrap) exactamente igual que un <h1>/<h2> real -- se
   abandona el viejo mecanismo de "4 lineas fijas" de mobile. */
.stat-text {
  display: block;
  /* Mobile: 100% de .pink-band-top-row, que ahi va apilado (columna) y
     mide lo mismo que .pink-band-card (max 640px) -- igual que se veia
     antes. Desktop: el propio .pink-band-top-row ya se sale del
     max-width:640px (ver esa regla), y aqui el titular pasa a flex:1
     dentro de la fila (sello a la izquierda, titular ocupando el resto
     del ancho a la derecha), en vez de intentar salirse el solo. */
  width: 100%;
  font-family: 'Roboto Serif', serif;
  font-size: clamp(1.9rem, 8.5vw, 3.75rem);
  font-weight: 300; font-style: normal;
  line-height: 1.14; color: var(--ink);
  letter-spacing: -0.02em;
  /* Izquierda, igual que .v2-headline/.vm-headline (el titulo real):
     ese h1 no declara text-align (queda a la izquierda por defecto, sin
     override en ningun breakpoint) -- aca hace falta declararlo porque
     el padre (.pink-band-card) es text-align:center y si no se fuerza
     la alineacion se heredaria centrada. */
  text-align: left;
}
@media (min-width: 768px) {
  .stat-text {
    width: auto;
    flex: 1;
  }
}
/* Ya no hay ningun override propio de mobile para .stat-text: igual que
   el titulo real (.v2-headline), la alineacion, el tamaño y el estilo
   son exactamente los mismos en cualquier resolucion. */
@media (min-width: 768px) {
  /* En desktop el titular vuelve a fluir naturalmente (ver .stat-text
     flex:1 junto al sello) -- en flujo inline normal, estos spans no
     rompen linea por si solos, el texto envuelve donde el navegador
     decida segun el ancho disponible, igual que un <p> normal. */
  .stat-text-line { display: inline; }
}
/* "en modo emprendedor.": mismo tipo que el resto de la frase, en italica
   y en rosa de marca -- el acento de color marca el cierre del titular
   sin romper la unidad tipografica (mismo tamaño/peso que el resto). */
.stat-text-modern {
  font-style: italic;
  color: var(--pink);
}
/* "8 años": mismo acento de color que .stat-text-modern, pero SIN
   italica (pedido explicito: solo el color, el peso/estilo del resto de
   la frase se queda igual). */
.stat-text-pink {
  color: var(--pink);
}
/* Banda rosa: el CTA intermedio mas importante del html (de aqui sale el
   lead). Layout izquierda igual que .s-venturemode/.s-cta (no centrado):
   mismo lenguaje que esos dos bloques promocionales, para que se sienta
   coherente con el resto del sitio en vez de una estetica de banner de
   e-commerce pegada encima. El "punch" viene de la escala tipografica
   (titulo enorme, Inter 800) y de un gradiente radial sutil en vez de
   rosa plano, no de fotografia ni de un color ajeno a la marca. */
.s-pink-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Antes un radial-gradient con un "hotspot" blanco arriba a la izquierda
     (justo donde vive el logo/titulo) que se desvanecia hacia el rosa de
     marca -- pedido explicito: ese brillo blanco chocaba visualmente con
     el texto blanco encima, se veia raro/sucio en vez de premium. Rosa
     de marca solido, sin gradiente ni glow: contraste limpio y parejo
     para el logo/texto blanco en toda la card. */
  background: var(--pink);
  /* Horizontal unificado con el resto de las secciones (mismo
     clamp(24,7vw,40) que .s-intro). Vertical: EXCEPCION deliberada, mas
     aire que el resto. Top: cancela el overlap dinamico que usa la card
     de prensa para meterse (var(--card-overlap-press), 20% de su alto) +
     colchon de respiro fijo (clamp(64,14vw,100) + clamp(56,10vw,76)) antes
     del titular -- ese colchon (sin los overlaps, que se cancelan con el
     margin negativo de cada card) es el espacio vacio REAL que se ve
     entre el borde de la card de arriba y el contenido de esta seccion.
     Bottom: usa exactamente el mismo colchon (clamp(64,14vw,100) +
     clamp(56,10vw,76)), a proposito, para que el espacio vacio visible
     entre el boton "Me interesa" y la card de Eduardo
     sea IDENTICO al de arriba -- mas el overlap dinamico de Eduardo
     (var(--card-overlap-eduardo), 20% de su alto, card de "salida" igual
     que Jorge) para cancelar su propio margin negativo. Ambas variables
     las calcula JS midiendo el alto real de cada card, ver
     applyCardOverlapRules(). */
  padding: calc(clamp(64px, 14vw, 100px) + var(--card-overlap-press, 30px) + clamp(56px, 10vw, 76px)) clamp(24px, 7vw, 40px) calc(var(--card-overlap-eduardo, 65px) + clamp(64px, 14vw, 100px) + clamp(56px, 10vw, 76px));
  text-align: left;
  position: relative;
  /* Entrada "fade + scale" del bloque completo (no del sistema global
     .reveal, que quedo neutralizado a proposito para que el resto de la
     pagina aparezca de un jalon). Este es el unico elemento del sitio con
     animacion de entrada por scroll -- excepcion pedida explicitamente
     para la franja rosa, ahora mas dramatica: entra un poco mas abajo Y
     ligeramente encogida (scale 0.95), sube a su lugar y crece a tamaño
     real al mismo tiempo que aparece -- mismo lenguaje que usan sitios
     premium para revelar secciones grandes. Solo opacity+transform (nunca
     propiedades de layout), asi que anima en la GPU sin jank en ningun
     celular. Se activa via IntersectionObserver dedicado, ver JS. */
  opacity: 0;
  transform: translateY(56px) scale(0.95);
  transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.s-pink-band.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pink-band-inner {
  /* Antes max-width:640px + margin:0 auto: doble limitador de ancho junto
     con el nuevo tope de .s-pink-band (760px) -- redundante y mas angosto
     de lo necesario. Ahora ocupa el 100% del padding-box de la card (el
     tope real de ancho ya lo pone .s-pink-band) y se convierte en el
     layout flex que separa contenido (logo+titulo+checklist) de la accion
     (boton): columna apilada en mobile, fila con el boton a la derecha en
     desktop -- ver @media abajo. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Subido de clamp(36,7vw,48) a clamp(42,7vw,54): pedido explicito de
     que el CTA se sienta como el cierre natural del componente, con mas
     aire respecto al statement de arriba. */
  gap: clamp(42px, 7vw, 54px);
}
.pink-band-main{
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  /* Sin gap uniforme: pedido explicito de diferenciar los dos saltos
     (logo->titulo mas amplio que titulo->tags) -- ver margin-bottom
     propio en .pink-band-logo y .pink-band-headline. */
}
.pink-band-action{ width: 100%; }
@media (min-width: 900px) {
  .pink-band-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.5vw, 32px);
  }
  .pink-band-main{ width: auto; flex: 1 1 auto; }
  .pink-band-action{ width: auto; flex: 0 0 auto; }
}
/* Propuestas de valor como chips/tags (no lista editorial con bullets):
   pildoras con borde, tipografia mono chica igual que el resto de labels
   del sitio -- se leen como feature-tags de producto tecnologico. Margen
   inferior propio eliminado: el espacio hacia el logo/titulo de arriba y
   el boton de abajo ahora lo controla el gap de .pink-band-main/
   .pink-band-inner, una sola fuente de ritmo vertical en vez de margenes
   sueltos en cada pieza. */
.pink-band-list {
  list-style: none;
  /* Subido de clamp(24,5vw,30) a clamp(32,6vw,40): pedido explicito de
     separar mas claramente los chips del statement de abajo (antes se
     sentian pegados). row-gap chico / column-gap un poco mayor: pedido
     explicito de reducir el espacio VERTICAL entre chips cuando envuelven
     a mas de una fila, sin apretar el espacio horizontal entre ellos. */
  margin: 0 0 clamp(32px, 6vw, 40px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 8px;
  column-gap: 12px;
}
.pink-band-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  /* Reducido de clamp(0.85rem,3vw,0.95rem) a clamp(0.7rem,2.4vw,0.78rem):
     pedido explicito de que dejen de parecer botones y se conviertan en
     "compact proof chips". */
  font-size: clamp(0.7rem, 2.4vw, 0.78rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.32);
  /* Padding vertical reducido drasticamente (antes 11px) -- la altura es
     lo que mas los hacia leer como botones. Horizontal tambien reducido,
     pero manteniendo proporcion de pildora. */
  padding: 6px 14px;
  border-radius: 100px;
  /* Microinteraccion sutil (pedido explicito): desplazamiento horizontal
     chico al hover, 180-220ms. */
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.pink-band-list li:hover {
  transform: translateX(4px);
}
.pink-band-check {
  display: inline-flex;
  flex-shrink: 0;
  color: #FFFFFF;
  opacity: 0.85;
}
.pink-band-check svg { width: 9px; height: 9px; }
.pink-band-copy {
  font-family: 'Inter', sans-serif;
  /* Antes clamp(0.94rem, 2.4vw, 1.02rem) = ~15-16.3px, y en la practica
     pegado al minimo (15px) en casi cualquier celular (el cruce a valores
     mayores empieza recien ~627px de viewport). 15px queda corto para
     lectura comoda, sobretodo para alguien mayor. Subido a 16.8-18.4px,
     con mas rango de vw para que realmente respire mas en pantallas
     grandes en vez de quedar plano todo el tiempo en mobile. */
  /* Techo subido de 1.15rem a 1.35rem y piso de 1.05rem a 1.15rem (pedido
     explicito: "hazla mas protagonica") -- deja de leerse como texto legal
     chico y pasa a sentirse como una segunda linea del mensaje, no una
     nota al pie. */
  font-size: clamp(1.15rem, 3.2vw, 1.35rem);
  /* Bajado de 400 a 300: jerarquia editorial explicita -- la primera
     frase ("Nosotros nos encargamos.") queda en negrilla (ver
     .pink-band-copy strong, 700) y la segunda mas ligera (300), en vez
     de ambas al mismo peso. line-height mas compacto (antes 1.5): pedido
     explicito de que el bloque se sienta mas ajustado/editorial. */
  font-weight: 300;
  line-height: 1.35;
  /* Antes rgba(255,255,255,0.82): contraste ~2.77:1 contra el rosa de marca
     (#FF1493), por debajo del minimo de accesibilidad (4.5:1 para texto de
     este tamaño). Subido a blanco solido -- practicamente el maximo
     contraste posible sobre este rosa especifico (ni al 100% se alcanza
     4.5:1, el rosa de marca es demasiado vibrante/claro para eso, haria
     falta oscurecer el fondo detras del texto para cerrar esa brecha del
     todo). */
  color: #FFFFFF;
  max-width: 520px;
  /* Ahora es el ultimo hijo de .pink-band-main (orden invertido: lista
     arriba, descripcion abajo, pedido explicito) -- sin margen propio, el
     salto hacia el boton ya lo pone el gap de .pink-band-inner. */
  margin: 0;
}
.pink-band-copy strong{
  font-weight: 700;
}
.pink-band-row {
  display: flex;
  width: 100%;
}
.pink-band-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #FFFFFF;
  color: var(--pink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.82rem, 2.8vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  /* Antes width:100% en mobile (boton a todo el ancho): pedido explicito
     de reducir su ancho y dejarle mas margen lateral -- ahora, en mobile
     y desktop por igual, el boton mide lo que su contenido/padding
     necesita (igual que el resto de los elementos del banner, todos
     alineados por el borde izquierdo, ninguno estirado a proposito) en
     vez de ocupar todo el ancho de la card. */
  width: auto;
  /* Padding vertical reducido (antes 20px): el boton se sentia demasiado
     alto para el resto del sistema, ya mas compacto tras este rediseño. */
  padding: 15px 32px;
  border-radius: 100px;
  /* Sombra muy suave y difusa (antes dos sombras, una de ellas un glow
     blanco bastante marcado) -- apenas perceptible, sin la animacion de
     pulso continuo (no es una de las microinteracciones pedidas). */
  box-shadow: 0 4px 16px rgba(0,9,19,0.10);
  transition: box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
}
.pink-band-btn-primary svg {
  width: 14px; height: 14px; flex-shrink: 0;
  /* Microinteraccion sutil (pedido explicito): solo la flecha se
     desplaza al hover, no el boton entero. */
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
@media (min-width: 900px) {
  .pink-band-btn-primary { padding: 16px 36px; }
}
.pink-band-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(0,9,19,0.14);
}
.pink-band-btn-primary:hover svg {
  transform: translateX(5px);
}

/* Seccion nueva, entre la banda rosa y VentureMode: aloja el contenido
   del sello (.pink-band-card, sin fondo propio -- ver esa regla). Fondo
   transparente a proposito -- no tiene color propio, asi que se ve el
   beige de .page/body detras, sin competir ni con el rosa de arriba ni
   con el navy de VentureMode que viene despues. Padding unificado igual
   que el resto de las secciones, en flujo normal (sin overlap ni cover;
   la banda rosa tiene su propio efecto de fondo fijo via
   background-attachment, ver .s-pink-band). */
.s-social-proof {
  position: relative;
  background: transparent;
  /* BUG real encontrado: .s-social-proof vive anidado dentro de
     <section class="s-intro"><div class="inner">, que ya tiene su
     propio padding. Sin este breakout, el padding de aca se sumaba
     ENCIMA del de .s-intro/.inner -- un doble margen que hacia que todo
     el contenido de adentro (sello, titular, carrusel, editorial)
     quedara mas metido hacia el centro que la card de Eduardo (que si
     escapa correctamente via el mismo truco). Mismo mecanismo full-bleed
     que .pink-band-quote-wrap/.s-pink-band: escapa a 100vw y aplica su
     propio padding como UNICO gutter, sin heredar el de .inner. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Horizontal: antes clamp(24,7vw,40) -- no coincidia con el gutter real
     de "El problema" (.stat-standalone usa clamp(24,7vw,48)). Mismo techo
     (48px) ahora, para que el margen izquierdo/derecho de esta seccion
     sea IDENTICO al de arriba en cualquier resolucion, no solo parecido.
     Abajo: duplicado a proposito (antes clamp(48,8vw,64)) -- pedido
     explicito de mas separacion antes de la seccion siguiente. */
  padding: clamp(32px, 8vw, 56px) clamp(24px, 7vw, 48px) clamp(96px, 16vw, 128px);
}
/* Conector entre la banda rosa y la seccion del sello: la card de quote
   de Eduardo (mismo componente .quote-card.quote-card-testimonial que
   Jorge al inicio del sitio y que el cierre mas abajo -- se duplica a
   proposito, ver conversacion) se mete un poco en la banda rosa por
   arriba, funcionando como puente entre las dos secciones. .quote-card ya
   trae su propio fondo/radio/sombra/padding, asi que este wrapper solo
   se encarga de la posicion (el mismo overlap que tenia la card negra que
   reemplaza). Vive como primer hijo de .s-social-proof (que viene DESPUES
   de .s-pink-band en el DOM), asi que pinta por encima de la banda rosa
   por orden natural, sin necesitar z-index. */
.pink-band-quote-wrap {
  /* Mismas reglas horizontales que .stat-standalone/.quote-standalone-wrap
     (los otros dos lugares donde vive .quote-card): full-bleed +
     clamp(24,7vw,48) de padding lateral -- antes dependia del padding
     propio de .s-social-proof (clamp(24,7vw,40), un numero distinto), asi
     que aunque se veian casi iguales, no eran la MISMA regla. Ahora es
     literal la misma formula en los 3 lugares. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(24px, 7vw, 48px);
  padding-right: clamp(24px, 7vw, 48px);
  /* margin-top: cancela el padding-top de .s-social-proof y sigue
     subiendo mas para el overlap real hacia la seccion de arriba. En
     este archivo esa seccion de arriba es .vm (el articulo oscuro, no
     la banda rosa original) y .s-social-proof usa padding-top
     clamp(48px,10vw,80px) -- ver la regla adaptada de .s-social-proof
     mas abajo (antes era clamp(32,8vw,56), el valor original, que ya no
     aplica en este html). El termino fijo de overlap (65px) se queda
     igual al original. --card-overlap-eduardo nunca llega a calcularse
     por JS en este archivo (aplyCardOverlapRules() no esta implementado
     aqui), asi que el valor de respaldo (65px) es, en la practica, el
     valor real todo el tiempo -- por eso .vm tambien sincroniza su
     padding-bottom con este mismo numero (ver esa regla). */
  margin-top: calc(-1 * (clamp(48px, 10vw, 80px) + var(--card-overlap-eduardo, 65px)));
}
.pink-band-quote-wrap .quote-card {
  margin-top: 0;
  /* Mas espacio en blanco hacia el sello/logo de abajo, pedido explicito
     (antes usaba el margin-bottom compartido de .quote-card, clamp(44,
     9vw,68), igual que Jorge/Eduardo en el resto del sitio). Se sube
     bastante mas aca, en mobile y desktop, sin tocar el valor compartido
     para no afectar esas otras cards. */
  margin-bottom: clamp(72px, 14vw, 112px);
}
/* Sin card: el contenido (sello + tagline + carrusel de logos + CTA
   suave) vive directo sobre el fondo de .s-social-proof, que a su vez es
   transparente y deja ver el --bg beige de la pagina -- ya no hay caja
   blanca de por medio, todo se siente "parte del fondo". El nombre de la
   clase se mantiene por no romper referencias (vivio dentro de la banda
   rosa un tiempo, y antes de eso era su propia seccion full-bleed blanca
   .s-showcase-dark). Sin padding propio: .s-social-proof ya tiene
   exactamente el mismo padding (era el mismo valor unificado en ambas),
   asi que ponerlo aca tambien lo duplicaria. El sello ya no necesita el
   truco de "asomar por encima del borde de la card" (no hay borde): entra
   en flujo normal, como cualquier otro hijo del stack. */
.pink-band-card {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Antes clamp(28,6vw,40): quedaba apretado entre sello/titulo, carrusel
     de logos, texto editorial y CTA. Mas aire entre cada bloque. */
  gap: clamp(40px, 8vw, 56px);
  text-align: center;
  position: relative;
}
/* Mobile: sin el tope de 640px -- el usuario pidio explicitamente que en
   mobile TODO el contenido de esta seccion aproveche el 100% del ancho
   disponible dentro del gutter de la seccion (el mismo clamp(24,7vw,40)
   de .s-social-proof), no un ancho de "columna de lectura" mas angosto.
   El tope de 640px se queda solo para desktop (>=768px), donde sigue
   teniendo sentido como medida de columna. */
@media (max-width: 767px) {
  .pink-band-card {
    max-width: none;
    width: 100%;
  }
}
/* ── REDISEÑO "EDITORIAL PLANA" (variante elegida, reemplaza el intento
   anterior de "dos tonos" con sub-card -- no gusto). Sin cajas ni bordes
   propios: todo sigue flotando sobre el beige de la pagina, igual que
   antes. El "wow"/premium viene del ritmo (el gap grande ya existente de
   .pink-band-card, clamp(40,8vw,56), separa TODAS las piezas por igual,
   nada de margenes chicos sueltos) y de un motivo divisor entre el
   capitulo de identidad (sello+titular) y el de prueba/credibilidad
   (logos, cifras, prensa): el simbolo real de "Logo small mono.svg"
   (circulo + bowtie/X + cuadrado, el mismo mono-icono de marca), no un
   dibujo aproximado en CSS. fill="currentColor" en el SVG + color aca
   para poder controlarlo como cualquier otro texto/icono del sitio. */
/* ═══════════════════════════════════════════════════
   PROBLEM ARTICLE — vive entre el quote de Jorge y el
   editorial-block existente. Reutiliza .editorial-block (misma
   tipografia Roboto Serif, mismo drop cap en la primera
   letra): se lee como continuacion del mismo fragmento de revista,
   no como un modulo de producto aparte.
═══════════════════════════════════════════════════ */

/* ── TEXTO EDITORIAL (estilo fragmento de revista de negocios): entre el
   quote de Jorge y el sello. .stat-block es text-align:center para sus
   demas hijos, asi que aqui se re-alinea a la izquierda (lectura normal de
   parrafo). Sin medida de columna fija (ni em ni ch): el ancho real del
   contenedor decide el salto de linea. Tipografia Roboto Serif (fuente
   oficial del sitio, usada en todo el sistema), con itálicas reales, para
   que se sienta como un recorte de publicación insertado, no como parte
   del resto de la marca CoCoCo. Drop cap real via ::first-letter, en tinta
   (no navy) para que lea como tipografia editorial neutra y no como un
   acento de marca. ── */
.editorial-block {
  /* Medida de columna (max-width): en mobile no hace nada (el contenedor
     ya es mas angosto que esto), pero en desktop el contenedor sin tope
     llegaba a ~800px+ de ancho -- 100+ caracteres por linea, demasiado
     para lectura sostenida (ideal: 45-75 caracteres). 760px (antes
     640px, subido a pedido explicito porque se sentia apretado en
     desktop) es la misma medida que .hero-v2 (titulo/barra social,
     arriba) y .vm-head-inner (articulo oscuro), asi que los tres
     quedan alineados. margin-left/right ya estaban en auto, por eso
     esto centra el bloque automaticamente. */
  max-width: 760px;
  margin: 0 auto clamp(48px, 10vw, 76px);
  text-align: left;
}
/* Eyebrow/tag chico arriba del texto: mismo lenguaje mono/tracking/opacity
   que el resto de las etiquetas del sitio (clients-table-label,
   venturemode-label), aqui en tono claro porque vive sobre el beige, no
   sobre un fondo oscuro. */
.problem-eyebrow {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.55rem, 2.8vw, 0.7rem);
  font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mid); opacity: 0.6;
  margin-bottom: clamp(16px, 3.5vw, 20px);
}
/* Tamaño subido a proposito (antes clamp(1rem,3.6vw,1.13rem), piso de
   16px): en mobile el 3.6vw quedaba casi siempre clampeado al piso, o sea
   16px fijo en la mayoria de celulares -- legible, pero chico para una
   lectura comoda y sostenida (pedido explicito: que un lector de 65 años
   lo lea sin esfuerzo). Piso 18px / techo 20px (primer ajuste) seguia
   sintiendose chico -- el "techo" se alcanzaba casi de inmediato (~526px
   de viewport) y de ahi para arriba quedaba plano en 20px, sin crecer
   de verdad en tablet/desktop. Segundo ajuste: piso 20px / techo 24px,
   formula preferida en rem+vw (no vw puro) para que el crecimiento sea
   gradual y real a lo largo de mas resoluciones (no solo pegado al piso
   o al techo). Mismo line-height generoso (1.62, bueno para lectores
   mayores). Sigue fluido, crece/decrece con la pantalla. */
.editorial-block p {
  font-family: 'Roboto Serif', serif;
  /* Tercer ajuste: techo subido de 1.5rem a 1.75rem (mismo motivo que el
     titulo -- el texto del cuerpo tambien quedaba plano en 24px desde los
     ~308px de viewport, sin aprovechar el espacio real de tablet/desktop).
     Formula preferida sin tocar (1rem + 1.3vw): el piso/crecimiento en
     mobile queda identico, solo se alcanza el techo mas tarde (~923px) y
     el plano resultante de ahi en adelante es 28px. Misma regla aplicada
     identica en .vm-head-desc (version dark de este mismo texto). */
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.75rem);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
  letter-spacing: 0;
  /* Antes 22px fijo (no fluido, desentonaba con el resto del sistema
     clamp() del sitio). Ahora crece/decrece con la pantalla igual que la
     letra, un poco mas generoso para que cada parrafo se sienta como su
     propio "respiro" al leer. */
  margin: 0 0 clamp(20px, 4.5vw, 28px);
}
.editorial-block p:last-child { margin-bottom: 0; }
/* Boton "Te podría interesar": invita a leer el articulo de Forbes a
   mitad del articulo (misma nota que la card de la seccion venture_mode,
   en un momento de lectura mas natural). El tag "Te podría interesar" NO
   es texto del articulo, pero tampoco es parte clickeable del boton: vive
   FUERA de .article-interstitial-card, pegado arriba, solo texto (mismo
   lenguaje que .cover-meta-industry, "INDUSTRIA" -- sin chip/fondo). */
.article-interstitial{ margin: clamp(28px,5vw,40px) 0; }
p.article-interstitial-label{
  display: block;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mid);
  /* Antes 8px fijo -- se sentia pegado a la card de abajo. Mismo valor que
     REGLA B (v2-social-section) usa en el resto del sitio para separar un
     eyebrow/label del elemento que le sigue, para quedar consistente. */
  margin: 0 0 clamp(14px, 3vw, 18px);
}
.article-interstitial-card{
  display: flex; align-items: center; gap: clamp(14px,2.4vw,18px);
  background: #fff; border: 1px solid #86A4BA; border-radius: 16px;
  padding: clamp(12px,2vw,16px) clamp(16px,2.6vw,20px);
  box-shadow: none;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.article-interstitial-card:hover,
.article-interstitial-card:focus-visible{
  background: var(--paper); border-color: var(--mid);
  box-shadow: 0 8px 20px rgba(0,9,19,.10);
  transform: translateY(-2px);
}
.article-interstitial-card:active{ transform: scale(.98); }
.article-interstitial-card:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }
.article-interstitial-logo{
  /* Antes clamp(40px,7vw,48px) -- chico frente al resto de la card. */
  flex-shrink: 0; width: clamp(48px,8vw,64px); height: clamp(48px,8vw,64px);
  border-radius: 9px; overflow: hidden;
}
.article-interstitial-logo svg{ display: block; width: 100%; height: 100%; }
.article-interstitial-text{ display: flex; flex-direction: column; gap: clamp(10px,1.8vw,14px); min-width: 0; flex: 1; }
.article-interstitial-title{
  font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 400;
  color: var(--ink);
  /* Antes clamp(1rem,2vw,1.05rem): practicamente plano en ~16-16.8px, mas
     chico que el propio texto del articulo (28px) -- sin protagonismo.
     Crece de forma real hasta 20.8px en desktop. */
  font-size: clamp(1rem, 0.85rem + 1.3vw, 1.3rem); line-height: 1.4;
}
.article-interstitial-cta{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600;
  color: var(--mid); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
}
.article-interstitial-arrow{
  flex-shrink: 0; width: 14px; height: 14px;
  transition: transform .18s ease;
}
.article-interstitial-card:hover .article-interstitial-cta{ color: var(--ink); }
.article-interstitial-card:hover .article-interstitial-arrow{ transform: translate(3px,-3px); }
/* Links de cita (McKinsey, BCG, HBR): discretos, sin el azul de link por
   defecto — solo un subrayado fino en --rule que se oscurece al hover,
   igual de sutil que el resto de los acentos del sitio (nunca navy/azul,
   ese color esta reservado para VentureMode). */
.editorial-block p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 200ms cubic-bezier(0.16,1,0.3,1);
}
.editorial-block p a:hover { text-decoration-color: var(--ink); }
.editorial-block p strong { font-weight: 700; }
.editorial-block p.is-centrado { text-align: center; }
.editorial-block p:first-of-type::first-letter {
  font-family: 'Roboto Serif', serif;
  font-weight: 700;
  color: var(--ink);
  float: left;
  font-size: 3.8em;
  line-height: 0.78;
  padding-right: 9px;
  margin-top: 4px;
}

/* ── Callouts entre parrafos: el texto queda intacto (prosa corrida, sin
   listas ni grids); estos elementos repiten la cifra o la frase clave del
   parrafo que acaban de pasar, en grande, para quien escanea la pagina sin
   leer completo. No agregan informacion nueva, son un resumen visual. */
/* Alineado a la izquierda, con una linea vertical gruesa al lado, mismo
   salto de escala que usan los numeros grandes del sitio para sentirse
   protagonico. Sin comilla decorativa ni cursiva: esas dos señales
   tipograficas (comilla + italica) son el lenguaje de una cita atribuida
   ("esto lo dijo alguien"), y estos callouts no citan a nadie — son
   resumen/analisis editorial del parrafo anterior. Redonda (no italica)
   + la linea vertical alcanzan para que se sienta protagonico y
   destacado, sin fingir una atribucion que no existe.
   Nota de color: la linea es --pink por decision explicita, aunque ese
   color esta reservado en el resto del sitio para enfasis de termino de
   marca en cursiva — excepcion consciente para estos 3 callouts, no
   extender el uso de --pink a otros elementos sin confirmar primero. */
.editorial-callout {
  position: relative;
  font-family: 'Roboto Serif', serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  line-height: 1.32;
  color: var(--ink);
  text-align: left;
  /* Antes clamp(36px,7.5vw,52px): un poco mas de aire arriba/abajo para
     que el callout se sienta como una pausa clara de lectura (el "beat"
     visual entre bloques de prosa), no solo un parrafo mas grande. */
  margin: clamp(40px, 8vw, 60px) 0;
  padding-left: clamp(20px, 4.5vw, 26px);
}
/* La linea rosa es un pseudo-elemento (ya no border-left) para poder
   animarle un glow via box-shadow sin que ese shadow envuelva el parrafo
   entero -- mismo lenguaje de "pulso" que ya usa el boton CTA final del
   sitio (ver ctaPulse), aplicado aqui a una barra fina en
   vez de a un boton. Ciclo lento (3s) y sutil a proposito: es un detalle
   ambiental junto a texto de lectura, no debe competir con el contenido. */
.editorial-callout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--pink);
  animation: calloutLineGlow 3s ease-in-out infinite;
}
@keyframes calloutLineGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,20,147,0.45); }
  50%      { box-shadow: 0 0 9px 1.5px rgba(255,20,147,0.65); }
}
/* Variante compacta: para callouts de frase mas larga (varias ideas en una
   linea), donde el tamano grande del default se vuelve pesado / dificil
   de escanear en 4-5 renglones. Mismo tratamiento (redonda), mas chico. Sin
   max-width en ch: el salto de linea lo decide el ancho real del
   contenedor, no un tope arbitrario de caracteres que corta el texto antes
   de aprovechar la pantalla. */
.editorial-callout.is-compact {
  /* Techo subido de 1.9rem a 2.2rem -- misma regla que titulo/cuerpo (ver
     .v2-headline y .editorial-block p): antes el callout quedaba plano en
     30.4px desde los ~524px de viewport, y con el techo del cuerpo ya
     subido a 28px (1.75rem) esa diferencia se sentia demasiado chica --
     el callout perdia su protagonismo de "texto mucho mas grande que el
     normal". 2.2rem mantiene la misma proporcion original respecto al
     cuerpo (~1.27x) pero sobre el nuevo techo de 28px, y el plano
     resultante se alcanza recien a los ~607px. Piso/crecimiento en
     mobile sin cambios. Misma regla aplicada identica en .vm-callout. */
  font-size: clamp(1.45rem, 5.8vw, 2.2rem);
  line-height: 1.4;
}

/* En desktop el drop cap crece un poco mas; sin max-width propio (ni en
   em ni en ch): el ancho real del contenedor sigue decidiendo el salto
   de linea, igual que en mobile. */
@media (min-width: 860px) {
  .problem-article p:first-of-type::first-letter { font-size: 4.3em; }
}
/* ── SELLO VINTAGE COCOCO: entre el quote de Jorge y las 3 estadisticas.
   El fondo de la imagen (#F2F1ED) es practicamente identico al --bg del
   sitio (#FFFFFF), asi que se embebe tal cual (sin mascara circular) y se
   funde con la seccion. Protagonico: bastante mas grande que un simple
   ornamento, con aire generoso arriba/abajo para que respire, y una sombra
   suave que lo despega ligeramente de la pagina (mismo lenguaje que la
   sombra de las cards) para que se sienta premium, no plano. Entrada tipo
   "sello": arranca grande, rotado y transparente, y "golpea" hacia su
   tamaño final con un rebote corto, quedando con una leve rotacion final
   como si se hubiera estampado a mano. */
/* Agrupa sello + titular: en mobile apilados (columna, centrado, mismo
   gap que el resto de .pink-band-card) -- exactamente como se veian
   antes de este cambio. En desktop pasan a fila (sello izquierda,
   titular derecha), y el propio row se sale del max-width:640px de
   .pink-band-card (mismo mecanismo de breakout que ya usaba .stat-text
   por su cuenta) para que el titular tenga espacio real al lado del
   sello, en vez de quedar comprimido en un carril angosto. */
.pink-band-top-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 6vw, 40px);
  width: 100%;
}
@media (min-width: 768px) {
  .pink-band-top-row {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: clamp(32px, 5vw, 56px);
    /* Actualizado a clamp(24,7vw,48) para seguir cancelando exactamente
       el padding horizontal real de .s-social-proof (ver esa regla). */
    width: calc(100vw - 2 * clamp(24px, 7vw, 48px));
  }
}
.cococo-stamp-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 0;
  /* Ya no "asoma" por encima de nada: sin card, no hay borde del que
     sobresalir. El sello entra en flujo normal, como el primer hijo mas
     del stack vertical de .pink-band-card. flex-shrink:0 es para el
     layout en fila de desktop (.pink-band-top-row): que el titular de al
     lado sea el que ceda/ajuste su ancho, no el sello. width:100% en
     mobile: sin esto, como hijo de un flex-column con align-items:center
     (.pink-band-top-row), este wrapper se encoge al tamaño de su
     contenido en vez de ocupar el ancho real disponible -- necesario
     para que el sello (ver .cococo-stamp-img) pueda estirarse al 100%. */
  width: 100%;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .cococo-stamp-wrap {
    width: auto;
  }
}
.cococo-stamp-img {
  /* Vuelve a haber DOS imagenes distintas (ver <picture> en el HTML):
     mobile usa el sello circular dedicado ("logosellocococoparamobile",
     pedido explicito), desktop sigue usando el lockup horizontal. Mobile:
     100% del ancho disponible de .cococo-stamp-wrap (que ya respeta el
     padding/gutter horizontal heredado de .pink-band-card /
     .s-social-proof). justify-content:center en el wrapper centra el
     circulo si sobrara algo de espacio. */
  width: 100%;
  height: auto;
  display: block;
  /* PNG con canal alpha real: el fondo blanco original fue removido por
     completo via keying, asi que solo el sello (tinta oscura) es opaco --
     se ve directamente la card blanca/rosa detras, sin parche ni recorte
     necesario. border-radius:50% de respaldo (el diseño de mobile ya es
     circular por si solo, esto no recorta contenido real). En desktop
     (ver @media abajo) se anula: ahi la imagen es el lockup horizontal,
     no circular. */
  border-radius: 50%;
  filter: drop-shadow(0 14px 28px rgba(0,9,19,0.10));
  /* Arranca invisible: la entrada "estampada" (ver .stamped y @keyframes
     stampIn) lo trae desde mas grande/rotado/transparente hasta este
     estado final (rotate(-3deg), escala 1), disparada por scroll (ver JS,
     IntersectionObserver sobre #s-social-proof) -- no al cargar la pagina. */
  opacity: 0;
  transform: rotate(-3deg);
}
@media (min-width: 768px) {
  /* Desktop: el sello comparte fila con el titular (.pink-band-top-row),
     asi que se dimensiona por ALTO en vez de por ancho (un ancho fijo
     dejaria un sello demasiado bajo/chico compartiendo fila). Sin
     border-radius circular: la imagen de desktop es el lockup horizontal. */
  .cococo-stamp-img {
    width: auto;
    height: clamp(120px, 13vw, 190px);
    border-radius: 0;
  }
}
.cococo-stamp-img.stamped {
  animation: stampIn 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes stampIn {
  0%   { opacity: 0; transform: scale(1.7) rotate(-22deg); }
  55%  { opacity: 1; transform: scale(0.93) rotate(-1deg); }
  75%  { opacity: 1; transform: scale(1.05) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cococo-stamp-img { opacity: 1; animation: none; }
}

/* Reemplaza la card blanca de estadisticas (años/industrias/ciudades):
   ahora son texto editorial, no numeros en cajas -- mismo espiritu que
   .editorial-block ("El problema", mas arriba en la pagina): Roboto Serif,
   italica, se lee como el pie de foto/parrafo de una revista de negocios,
   no como un widget de producto. Los numeros van escritos en palabras
   (no numerales) a proposito, por el mismo motivo: asi lee una revista,
   no una card de stats. Misma historia de siempre: años = trayectoria,
   industrias = conocimiento acumulado, ciudades = capacidad de
   movimiento. */
/* Also recognized — vivía en la franja negra de prensa (blanco sobre
   negro); ahora vive dentro de la card blanca del showcase, debajo de
   ciudades/industrias, asi que se recolorea para fondo claro: la linea
   pasa de blanco translucido a var(--rule), el label de gold-tenue a
   gold pleno, y los logos de "brightness(0) invert(1)" (blancos) a
   "brightness(0)" solo (negros/oscuros), mismo tratamiento muted. */
.press-also-row {
  display: flex; align-items: center; gap: 14px;
  /* Sin margin-top propio: el espacio de ARRIBA ya lo da el gap grande de
     .pink-band-card (su padre directo). Solo se deja el de ABAJO, mas
     chico a proposito (etiqueta + regla vs. grid de logos son la misma
     "unidad visual", no dos piezas distintas). */
  margin: 0 0 clamp(14px, 3vw, 20px);
}
.press-also-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.55rem, 2.8vw, 0.7rem); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mid); opacity: 0.6; white-space: nowrap; flex-shrink: 0;
}
.press-also-line { flex: 1; height: 1px; background: var(--rule); }
/* Siempre 4 en una sola fila horizontal, en cualquier resolucion (incluido
   mobile) -- antes colapsaba a 2 columnas (2 filas de 2) por debajo de
   480px, pedido explicito del usuario de que nunca queden uno encima de
   otro. grid-template-columns:repeat(4,1fr) reparte el ancho disponible
   en 4 partes iguales SIEMPRE; el gap fluido (clamp) y el alto de cada
   logo (ver .recono-logo) son los que crecen/se separan segun el
   viewport, respetando el gutter real de la card (este contenedor ya
   vive dentro del mismo padding horizontal que el resto de la seccion). */
.press-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 3vw, 32px);
  align-items: center;
}
.recono-logo {
  display: flex; align-items: center; justify-content: center;
  height: clamp(22px, 6.5vw, 38px); opacity: 0.5;
  filter: brightness(0); padding: 0 clamp(2px, 1.5vw, 8px);
  min-width: 0;
  transition: opacity 200ms cubic-bezier(0.16,1,0.3,1);
}
.recono-logo:hover { opacity: 0.85; }
.recono-logo svg { width: 100%; height: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════
   UBICACIONES COCOCO (MAD/CMDX/MTY) -- ultimo capitulo de
   .pink-band-card, debajo del carrusel de logos de clientes y de
   "Reconocidos en". Mapa real de Google (sin API key, truco
   ?q=direccion&output=embed) con el pin exacto de cada oficina, y
   debajo el logo del host/coworking de esa sede -- mismo tratamiento
   apagado que .recono-logo (grayscale + opacidad baja), a proposito NO
   protagonico, solo dato de contexto.
   Full-bleed (100vw) para escapar del max-width:640px de
   .pink-band-card y mostrar 3 columnas comodas en desktop -- mismo
   mecanismo y mismo padding horizontal que .stat-standalone/.quote-card
   (las otras piezas "anchas" de esta seccion). Mobile-first: 1 columna
   apilada, 3 columnas desde 768px.
═══════════════════════════════════════════════════ */
/* Antes full-bleed (100vw + margen negativo): tenia sentido cuando vivia
   suelto dentro de .pink-band-card. Movido al footer, ya esta dentro de
   .v2-footer-inner (max-width:1800) -- el truco 100vw calcularia mal
   contra ese contenedor (no es el viewport). Sin padding propio: el
   .v2-footer que lo envuelve ya pone el inset lateral, uno propio aqui
   lo duplicaria. */
/* Tarjeta blanca redondeada sobre el fondo gris del footer (calcada del
   rediseño mas reciente del artefacto, .ubicaciones__tarjeta) -- antes
   los location-card flotaban sueltos sobre el navy; ahora viven dentro
   de esta tarjeta, que es la que aporta el contraste para la raya gris
   del tag (#e7e7e7 sobre navy hubiera sido invisible, sobre blanco se
   ve). */
.cococo-locations {
  width: 100%;
  margin-bottom: clamp(40px, 8vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vw, 64px);
  padding: clamp(32px, 6vw, 64px) clamp(24px, 5vw, 48px);
  border-radius: clamp(20px, 3vw, 32px);
  background: #FFFFFF;
}
.cococo-locations-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
/* Tag "CORPORATE COFOUNDER COMPANY" con rayas a los lados -- reemplaza
   el logo+rayas rosa de antes, calcado del artefacto (rayas grises, no
   rosa, para no competir con el resto del sitio). */
.v2-locations-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}
.v2-locations-raya { flex: 1 0 0; min-width: 1px; height: 2px; background: #e7e7e7; }
.v2-locations-rotulo {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 767px) {
  .v2-locations-rotulo { font-size: 0.68rem; white-space: normal; text-align: center; }
}
/* Bandera recortada en circulo (calcado del artefacto, banderas
   circulares 24x24) -- mismo SVG plano de 3:2 que el resto del sitio
   (.v2-flag), sin necesitar un asset nuevo: el circulo recorta y
   preserveAspectRatio="slice" en el SVG hace que la franja central
   (donde estan los colores mas representativos) llene el circulo en
   vez de dejarlo con barras vacias a los lados. */
.v2-flag-circle {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.v2-flag-circle .v2-flag { width: 100%; height: 100%; display: block; }
.cococo-locations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 8vw, 48px);
}
@media (min-width: 768px) {
  .cococo-locations-grid {
    /* 4 sedes ahora (Madrid, Barcelona, CDMX, Monterrey): repeat(4) en vez
       de repeat(3), si no la cuarta cae sola en su propia fila. Gap mas
       chico para que las 4 columnas mas angostas no se vean apretadas. */
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.4vw, 28px);
  }
}
/* .location-card cambia de layout por breakpoint via flexbox + order
   (mismo DOM en los dos casos: mapa, contenido, host):
   - Mobile: fila (mapa chico a la izq, contenido -- flag+ciudad+direccion
     -- a la der). El mapa "en su minimo posible": un cuadrado angosto,
     solo lo justo para ubicar el pin, para no comerse el alto de la
     pantalla como el ancho-completo de antes.
   - Desktop (min-width:768): vuelve a columna, con el mapa ANCHO
     completo debajo del contenido (layout original de 3 columnas). */
.location-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 4vw, 18px);
  text-align: left;
}
@media (min-width: 768px) {
  .location-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
}
.location-content {
  order: 2;
  flex: 1 1 0%;
  min-width: 0;
}
@media (min-width: 768px) {
  .location-content { order: 1; width: 100%; }
}
.location-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(8px, 1.6vw, 10px);
}
@media (min-width: 768px) {
  .location-head { margin-bottom: clamp(10px, 2vw, 14px); }
}
/* .location-flag (emoji, "font-size:1.3rem") ya no se usa -- las 4
   sedes pasaron a las banderas SVG planas (.v2-flag), mismas que el
   resto del sitio. */
.location-code {
  /* Tarjeta blanca (rediseño): nombre de ciudad pasa de sans-serif 800
     a serif, calcado de .oficina__ciudad del artefacto. */
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Direccion como link (imagen de referencia: se ve subrayada) -- antes
   era un <p> sin interaccion; ahora abre el mapa completo en pestana
   nueva, con el mismo query que ya usa el iframe de al lado. */
.location-address {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(0.88rem, 2.4vw, 0.98rem);
  line-height: 1.5;
  color: var(--mid);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
  margin: 0;
  transition: color 200ms ease;
}
.location-address:hover { color: var(--pink); text-decoration-color: var(--pink); }
@media (min-width: 768px) {
  .location-address {
    margin: 0 0 clamp(16px, 3vw, 20px);
    /* Reserva 3 lineas de alto aunque el texto real ocupe 2: alinea el
       arranque de los 3 mapas entre si sin importar cual direccion es
       mas larga. Solo aplica en desktop -- en mobile el mapa ya no
       depende de donde termina este texto (viven lado a lado). */
    min-height: 3em;
  }
}
.location-map {
  position: relative;
  order: 1;
  /* Mobile: chico y cuadrado, "el minimo posible" para ubicar el pin --
     ya no ancho completo (eso era lo que ocupaba demasiado alto). */
  flex: 0 0 clamp(88px, 26vw, 112px);
  width: clamp(88px, 26vw, 112px);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,9,19,0.1);
  box-shadow: 0 2px 8px rgba(0,9,19,0.06), 0 10px 28px rgba(0,9,19,0.08);
  background: rgba(0,9,19,0.03); /* placeholder visible mientras carga el iframe */
}
@media (min-width: 768px) {
  .location-map {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
  }
}
.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Logo del host/coworking: chico, apagado -- mismo tratamiento que
   .recono-logo pero en texto (sin asset SVG propio todavia; reemplazar
   por el logo real cuando este disponible). Ahora vive DENTRO de
   .location-content, justo debajo de la direccion (ya no como fila
   propia debajo del mapa): "@ Host" deja explicito que la direccion de
   arriba es la sede de ese coworking/host. */
.location-host {
  display: block;
  margin-top: clamp(6px, 1.4vw, 8px);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--mid);
  opacity: 0.7;
}

/* ── TEAM CARDS: reemplaza las bubbles apiladas por una fila de cards
   grandes, arrastrable + auto-scroll continuo (ver JS). Cada card: foto
   1:1 con pill de bandera superpuesta, nombre en serif, descripcion en
   italica, tags tipo pill en navy, y CTA de LinkedIn de ancho completo. */
/* Full-bleed via 100vw + margen negativo al viewport (mismo mecanismo que
   .cococo-locations/.pink-band-quote-wrap), en vez del truco anterior de
   "negativo = padding del padre" -- ese truco dependia de que el padre
   inmediato tuviera exactamente el mismo padding que .s-venturemode, algo
   que dejo de ser cierto al mover este carrusel (pedido explicito) a vivir
   dentro de .pink-band-card, que no tiene padding propio. El 100vw es
   independiente de cualquier ancestro, asi que sigue funcionando igual sin
   importar donde viva. El inset horizontal (antes en .team-rows via el
   margen negativo) ahora vive como padding propio de .team-row. */
.team-rows {
  display: flex; flex-direction: column; gap: 0;
  /* Sin margin-bottom propio (antes clamp(32,6vw,44)): .team-rows ahora es
     hijo directo de .pink-band-card (flex, con su propio gap grande) --
     ese gap ya lo separa de "Donde estamos", un margin propio aca
     duplicaria el salto (mismo ajuste que .venturemode-desc, ver ahi). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  /* Edge-fade (rediseño UI): degradado en ambos bordes via mask, para que
     el corte de las cards se lea como "hay mas, desliza" en vez de un
     corte abrupto -- mismo padding lateral que el resto de la seccion
     (clamp(24,7vw,40)) para que el fade coincida con el gutter real. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(24px, 7vw, 40px), #000 calc(100% - clamp(24px, 7vw, 40px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(24px, 7vw, 40px), #000 calc(100% - clamp(24px, 7vw, 40px)), transparent 100%);
}
.team-row { display: flex; gap: clamp(24px, 4vw, 32px); width: max-content; padding: 8px clamp(24px, 7vw, 40px) 12px; cursor: grab; user-select: none; }
.team-card {
  flex-shrink: 0;
  width: clamp(220px, 62vw, 320px);
  display: flex; flex-direction: column;
  /* .team-card vive dentro de .pink-band-card, que fuerza text-align:
     center para centrar el sello/logos de esa seccion. .team-card-name y
     .team-card-desc son texto plano sin flex propio (a diferencia de
     .team-card-eyebrow, que es flex-row y por eso ignora text-align) --
     sin este override heredaban el centrado y aparecian corridos hacia
     el centro de su caja en vez de arrancar en el mismo borde que el
     eyebrow. Esta es la causa real; el ajuste "optico" anterior no lo era. */
  text-align: left;
  /* Antes sin marco/fondo propio (solo foto+texto flotando). Con el texto
     ahora siempre visible en las 5 cards a la vez (ver .team-card-body),
     eso dejaba de leerse como 5 personas distintas y pasaba a verse como
     un bloque continuo de texto -- se le agrega fondo/padding/radio propio
     para que cada persona sea una unidad visual delimitada, separada de
     su vecina por algo mas que el gap. */
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 14px 14px 18px;
  /* Default 1 (no 0): asi, si JS no corre (reduced-motion o fallback),
     las cards quedan estaticas en su estado "enfocado" (foto a tamaño
     normal, texto visible) en vez de quedar atrapadas en el estado
     apagado/oculto -- el JS del carrusel pisa este valor en cada frame
     cuando si corre. */
  --focus: 1;
}
/* Efecto foco/desenfoque del carrusel de proyectos (.cover-cell.is-center),
   portado aca: como team-rows es scroll continuo (drag+auto-scroll, sin
   snap) y no discreto como .covers-track, no hay un estado "is-center"
   binario -- en su lugar el JS del carrusel (ver "TEAM ROW CAROUSEL")
   calcula en cada frame que tan cerca esta cada card del centro visible
   y escribe ese valor 0..1 en --focus (en .team-card, hereda a sus hijos);
   la foto mas cercana al centro llega a --focus:1 (mismos valores que
   .cover-cell.is-center .cover: scale 1.08, sin filtro) y el texto de esa
   card se revela (mismo criterio que .cover-meta), las que se alejan caen
   hacia --focus:0 (foto en scale 0.8, brightness .84 saturate .9; texto
   atenuado). */
.team-card-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy);
  position: relative;
  box-shadow:
    0 1px 3px rgba(0,9,19,0.06),
    0 8px 24px rgba(0,9,19,0.08),
    0 20px 40px rgba(0,9,19,0.04);
  transform: scale(calc(0.8 + 0.28 * var(--focus)));
  filter: brightness(calc(0.84 + 0.16 * var(--focus))) saturate(calc(0.9 + 0.1 * var(--focus)));
  transform-origin: center center;
}
.team-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.team-card-body {
  display: flex; flex-direction: column; gap: 0;
  padding-top: clamp(14px, 3vw, 18px);
  /* Antes oculto salvo en la card centrada (via --reveal, calculado en
     JS): tenia sentido para el carrusel de proyectos (una sola cosa "en
     foco" a la vez invita a explorar), pero para bios de equipo es
     contraproducente -- el nombre, cargo, LinkedIn y especialidades de
     cada persona son informacion de credibilidad que el CEO necesita
     poder escanear de un vistazo, no descubrir arrastrando cada card al
     centro exacto. Siempre visible; el efecto de foco/desenfoque queda
     solo en la foto (.team-card-photo, via --focus), que es decoracion,
     no informacion. */
  opacity: 1;
}
/* Rediseño premium (pedido explicito, "que se vea como las cards de
   proyecto"): se adopta el mismo grid "text | button" de .cover-meta en
   vez de la fila nombre+bandera + rol suelto debajo. Eyebrow (bandera +
   rol, un solo renglon chico y tenue, igual criterio que
   .cover-meta-industry) arriba del nombre, nombre grande abajo, y el CTA
   de LinkedIn pasa de boton-barra de texto a icono circular alineado con
   el nombre -- mismo lenguaje que el boton pill de .cover-meta-link, solo
   que aca es un icon-button (no hay texto largo que poner ahi). */
.team-card-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
}
.team-card-meta-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.team-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.team-card-eyebrow-flag { font-size: 13px; line-height: 1; flex-shrink: 0; }
/* Misma fuente/estilo que el nombre de Jorge/Eduardo (pedido explicito):
   Inter bold, no Roboto Serif -- ver .quote-card-testimonial .quote-card-name. */
.team-card-name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  font-weight: 700;
  color: var(--ink); line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Icon-button circular (antes barra ancha con texto "Ver en LinkedIn"):
   mas compacto y limpio, mismo peso visual que un boton secundario de
   card de proyecto -- el texto se mueve a aria-label (accesible igual,
   sin ocupar una fila entera de la card). */
.team-card-linkedin {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,9,19,0.04);
  border: 1px solid rgba(0,9,19,0.08);
  color: var(--navy);
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.team-card-linkedin svg { width: 13px; height: 13px; display: block; }
.team-card-linkedin:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  transform: translateY(-2px);
}
.team-card-linkedin:active { transform: translateY(0) scale(0.96); }
/* Superpoderes del hero (pedido explicito, estilo "stat card" de juego):
   fila de 2 chips entre el nombre y la descripcion, de un repertorio fijo
   de 5 superpoderes compartido entre los 5 miembros del equipo (algunos se
   repiten entre cards, a proposito -- mismo criterio que las stat-cards de
   la referencia). Chip icono+texto corto, legible siempre sin depender de
   hover -- mismo lenguaje "chip compacto" (pildora, borde fino, mono
   uppercase) que el resto del sitio (.pink-band-list, .venturemode-skills). */
.team-card-powers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.team-card-power {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: 100px;
  border: 1px solid rgba(255,20,147,0.35);
  background: rgba(255,20,147,0.08);
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1), background 200ms ease;
}
.team-card-power:hover { transform: translateY(-2px); background: rgba(255,20,147,0.14); }
.team-card-power-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,20,147,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
}
.team-card-power-icon svg { width: 11px; height: 11px; display: block; }
.team-card-power-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pink);
  white-space: nowrap;
}
/* Descripcion con regla superior (mismo lenguaje que .cover-meta-desc):
   separa visualmente el bloque de identidad (nombre/rol/chips) de la
   linea editorial de una vez, en vez de solo un margin-bottom suelto. */
.team-card-desc {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: 'Roboto Serif', serif;
  font-size: clamp(0.8rem, 3.2vw, 0.95rem);
  font-weight: 300; font-style: italic;
  color: var(--mid); line-height: 1.55;
  /* Sin tope de lineas: 2 y 3 seguian cortando contenido real en las bios
     mas largas (Marcelo, Miguel) -- ningun numero fijo funciona para
     texto de largo variable sin arriesgar truncar algo real. min-height
     da el piso comun (bios cortas no dejen a su card mas baja que las
     demas); las bios largas simplemente estiran su card un poco mas,
     mejor eso que cortar contenido. */
  min-height: calc(1.55em * 3);
}

/* ═══════════════════════════════════════════════════
   REVEAL ANIMATION
═══════════════════════════════════════════════════ */
/* Neutralizado a proposito: todo el contenido debe aparecer de inmediato,
   sin fade escalonado por scroll ni delays entre secciones (antes
   .reveal ocultaba con opacity:0 hasta que un IntersectionObserver lo
   revelaba). El nombre de clase se deja en el HTML (inofensivo, sin
   estilos) para no tocar decenas de elementos que la usan. */
.reveal, .reveal-delay-1, .reveal-delay-2 {}

/* ── SCROLL PROGRESS ───────────────────────── */
#scroll-progress {
  position: fixed;
  left: 0; top: 0;
  width: 3px;
  height: 0%;
  background: linear-gradient(to bottom, #FF1493, #00BFFF);
  z-index: 9999;
  transition: height 60ms linear;
  border-radius: 0 2px 2px 0;
}

/* ══════════ Carrusel de casos (ebook-articulos) ══════════ */
.cases-carousel-wrap {
  text-align: center;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: #e7e7e7;
  padding: clamp(32px, 6vw, 64px) 0 clamp(32px, 6vw, 56px);
  margin-top: clamp(48px, 10vw, 80px);
  /* Abajo: antes igual al margin-top (48-80px), pero ese aire se sumaba
     al colchon propio de .art-frame (ver esa regla), duplicando el
     espacio hacia la card de Jorge. Reducido a un valor mas chico y
     propio (no simetrico con el margin-top, que sigue separando el
     carrusel del callout de arriba): esta es ahora la UNICA fuente real
     de "respiro" antes de la card -- reducido de nuevo (16-24px ->
     4-8px) porque, sumado al colchon fijo de 8px que ya deja el resto
     del sistema de overlap (.art-frame/.vm-quote-wrap, ver esas reglas),
     el total todavia se sentia como demasiado aire entre el carrusel y
     la card de Jorge. */
  margin-bottom: clamp(4px, 1vw, 8px);
}
.cases-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pink);
}

/* ── Estante de revistas (full-bleed, montado sobre el hero) ── */
.covers {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* sube las portadas para que la del centro se monte sobre la imagen del hero */
  margin-top: clamp(2px, 1vw, 6px);
  z-index: 5;
}
.covers-track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 6vw, 88px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* aire vertical para que la portada central ampliada no se recorte */
  padding-top: clamp(10px, 2.5vw, 16px);
  padding-bottom: clamp(2px, 1vw, 6px);
  outline: none;
}
.covers-track::-webkit-scrollbar { display: none; }
.covers-track { cursor: grab; user-select: none; -webkit-user-select: none; }
.covers-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* Celda: portada + nombre debajo (todo dentro del scroll) */
.cover-cell {
  flex: 0 0 auto;
  width: clamp(190px, 60vw, 360px);
  scroll-snap-align: center;
  display: flex; flex-direction: column;
}
.cover {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 4;                 /* formato revista 3:4 */
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  transform: scale(0.8);               /* laterales más pequeñas -- valor base, el JS del
                                           carrusel (paint()) sobreescribe esto en cada frame
                                           con una escala continua segun distancia al centro,
                                           en vez del salto binario de antes. */
  transition: transform .12s ease, filter .45s ease;
  transform-origin: center center;
  -webkit-tap-highlight-color: transparent;
  filter: brightness(.84) saturate(.9);
}
.cover-cell.is-center .cover { filter: none; }
.cover-cell.is-center { z-index: 20; }
.cover-frame {
  position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,9,19,.15);
  background: #86A4BA;
  transition: border-radius .12s ease;
}
.cover-cell.is-center .cover-frame { box-shadow: 0 14px 32px rgba(0,9,19,.26); }
.cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; z-index:2; -webkit-user-drag:none; user-drag:none; pointer-events:none; }
.cover-img.is-missing { display:none; }
.cover-fallback {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding: clamp(14px, 3vw, 20px); color:#fff; text-align:left;
}
.cover--auto  { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover--elec  { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover--salud { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover--cafe  { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover--pet   { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover--fit   { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover--fx   { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover--log  { background: linear-gradient(150deg,#000913 0%,#2F6288 55%,#011020 100%); }
.cover-fb-tag {
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.cover-fb-title {
  font-family:'Roboto Serif',serif; font-weight:600;
  font-size:clamp(1.1rem,3.6vw,1.45rem); line-height:1.1; letter-spacing:-0.01em;
}
.cover-fb-note {
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:4px;
}

.cases-eyebrow--top { display: block; text-align: center; margin-bottom: clamp(26px, 6vw, 36px); }

/* Indicador de paginado: bolitas grises; la del caso centrado se enciende
   (rosa) y crece un poco. Agrupado con el eyebrow arriba (gap corto) y con
   su propio margen inferior que recrea el aire hacia las portadas, para
   mantener la proporción con el espacio de abajo de cada card. */
.cases-dots {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: clamp(7px, 1.6vw, 9px);
  margin: 0 auto clamp(26px, 5vw, 40px);
  padding: 0 clamp(20px, 6vw, 40px);
}
.cases-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(0, 9, 19, 0.28);
  transition: background .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.cases-dot:hover { background: rgba(0, 9, 19, 0.45); }
.cases-dot.is-active {
  background: var(--pink);
  transform: scale(1.45);
}
@media (prefers-reduced-motion: reduce) {
  .cases-dot { transition: none; }
}

/* Nombre/elementos debajo de cada card — presentación premium */
.cover-meta {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "text button" "desc desc";
  align-items: center; column-gap: 16px;
  margin-top: clamp(42px, 9vw, 68px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  text-align: left;
}
.cover-cell.is-center .cover-meta { opacity: 1; transform: none; }
.cover-meta-text { grid-area: text; display: flex; flex-direction: column; min-width: 0; }
.cover-meta-industry {
  order: -1;                            /* tag "INDUSTRIA" arriba (estilo Casos CoCoCo, tenue) */
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mid);
  margin-bottom: 9px;
}
.cover-meta-name {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(1.15rem, 4vw, 1.5rem); line-height: 1.16; letter-spacing: -0.01em;
  color: var(--ink);
}
.cover-meta-link {
  grid-area: button; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border-radius: 999px; padding: 12px 20px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .12s ease;
}
.lock-ico { width: 14px; height: 14px; flex: 0 0 auto; }
.cover-meta-link-arrow { display: inline-block; transition: transform .28s ease; }
/* Desbloqueado: CTA prominente (rosa lleno) */
.cover-meta-link.is-unlocked {
  background: var(--pink); border: 1px solid var(--pink); color: #fff;
  box-shadow: 0 6px 18px rgba(255,20,147,0.30);
  cursor: pointer;
}
.cover-meta-link.is-unlocked:hover { background: #FF1493; border-color: #FF1493; }
.cover-meta-link.is-unlocked:hover .cover-meta-link-arrow { transform: translateX(4px); }
.cover-meta-link.is-unlocked:active { transform: scale(.97); }
/* Bloqueado: clicable (abre el modal de "caso confidencial"), borde
   rosa para que se lea como accion real, no como boton apagado. Antes
   tenia pointer-events:none -- literalmente no se podia clickear a
   nivel de navegador, sin importar el JS. */
.cover-meta-link.is-locked {
  background: transparent; border: 1px solid var(--pink); color: var(--pink);
  cursor: pointer;
}
.cover-meta-link.is-locked:hover { background: rgba(255,20,147,0.08); }
.cover-meta-link.is-locked:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .cover, .cover-frame, .cover-meta, .cover-meta-link, .cover-meta-link-arrow { transition: none !important; }
  .covers-track { scroll-behavior: auto; }
}
.cover-meta-desc {
  grid-area: desc; display: block;
  margin-top: clamp(14px, 3vw, 20px); padding-top: clamp(12px, 2.5vw, 16px);
  border-top: 1px solid #86A4BA;
  font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: 0;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem); line-height: 1.4; color: var(--ink);
}
.cover-meta-apuesta { color: var(--pink); font-weight: 500; }
/* ══════════ fin carrusel de casos ══════════ */

/* ── Nota del fundador (neta), arriba del carrusel ── */
.founder-note {
  max-width: 640px; margin: 0 auto clamp(44px, 9vw, 72px);
  padding: 0 clamp(8px, 3vw, 16px); text-align: left;
}
.founder-note-eyebrow {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink);
  margin-bottom: clamp(14px, 3vw, 20px);
}
.founder-note-lead {
  font-family: 'Roboto Serif', serif; font-weight: 500;
  font-size: clamp(1.35rem, 4.5vw, 1.9rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 clamp(16px, 3vw, 22px);
}
.founder-note p {
  font-family: 'Roboto Serif', serif; font-weight: 400;
  font-size: clamp(1rem, 2.8vw, 1.15rem); line-height: 1.6; color: var(--mid);
  margin: 0 0 clamp(14px, 2.5vw, 18px);
}
.founder-note-punch {
  font-family: 'Roboto Serif', serif; font-weight: 500; font-style: italic;
  font-size: clamp(1.05rem, 3vw, 1.25rem); line-height: 1.4; color: var(--ink) !important;
  border-left: 3px solid var(--pink); padding-left: clamp(14px, 3vw, 18px);
  margin: clamp(18px, 3.5vw, 26px) 0 clamp(20px, 4vw, 28px) !important;
}
.founder-note-sign {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.06em; color: var(--low);
}

/* Etiquetas de seccion a mitad del articulo editorial + listas en estilo editorial */
.problem-eyebrow--mid { margin-top: clamp(34px, 6.5vw, 48px); color: var(--pink); opacity: 1; }
.editorial-list { list-style: none; margin: 0 0 clamp(20px, 4.5vw, 28px); padding: 0; }
.editorial-list li {
  font-family: 'Roboto Serif', serif;
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.5rem); line-height: 1.62; color: var(--ink);
  position: relative; padding-left: 26px; margin-bottom: clamp(12px, 2.5vw, 16px);
}
.editorial-list li::before {
  content: ''; position: absolute; left: 4px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
}
.editorial-list li strong { font-weight: 700; color: var(--ink); }

/* Testimonio de Jorge en Inter medium recta (corta visualmente del serif) */
#quote-card-jorge .quote-card-text {
  font-family: 'Inter', sans-serif; font-weight: 500; font-style: normal; letter-spacing: 0;
}


/* Díptico ilustrado de las 2 razones */
.diptico { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 4vw, 34px);
  margin: clamp(28px, 6vw, 44px) 0 clamp(30px, 6vw, 44px); }
.diptico-panel { margin: 0; }
.diptico-panel img { width: 85%; height: auto; display: block; margin-left: auto; margin-right: auto; }
.diptico-text { font-family: 'Roboto Serif', serif; font-weight: 400;
  font-size: clamp(1.125rem, 3.8vw, 1.25rem); line-height: 1.62; color: var(--ink);
  margin: clamp(28px, 6vw, 44px) 0 0; }
.diptico-text strong { font-weight: 700; }
/* Neutraliza la letra capital del artículo en los párrafos del díptico */
.editorial-block .diptico-panel p:first-of-type::first-letter {
  font-size: inherit; float: none; padding: 0; margin: 0; font-weight: inherit; line-height: inherit;
}
@media (max-width: 560px) {
  .diptico { grid-template-columns: 1fr; gap: clamp(26px, 8vw, 40px); }
  .diptico-panel img { width: 62%; margin-left: auto; margin-right: auto; }
}

/* Frase puente antes del díptico */
.dos-razones { margin-top: clamp(30px, 6vw, 50px) !important; }

/* Titular fórmula del carrusel */
.cases-formula {
  max-width: 980px; margin: 0 auto clamp(20px, 4vw, 34px);
  padding: 0 clamp(16px, 4vw, 24px);
  font-family: 'Roboto Serif', serif; font-weight: 300;
  font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--ink); text-align: center;
}
/* Neutraliza la letra capital del artículo en el título del carrusel */
.editorial-block .cases-carousel-wrap p:first-of-type::first-letter {
  font-size: inherit; float: none; margin: 0; padding: 0; font-weight: inherit; line-height: inherit;
}
/* Neutraliza la letra capital del artículo en el tagline del interstitial
   ("Te podría interesar:") -- es un <p>, y al ser el primer <p> dentro de
   su propio contenedor (.article-interstitial) hereda el drop cap del
   articulo aunque visualmente sea un tagline, no un parrafo de texto. */
.editorial-block .article-interstitial p:first-of-type::first-letter {
  font-size: inherit; float: none; margin: 0; padding: 0; font-weight: inherit; line-height: inherit;
}
.cases-formula-eq { color: var(--pink); }


/* ===== bloque original: <style id="seccion-articulo-reglas"> (seccion-articulo-reglas) ===== */

/* ===================================================================
   REGLAS DE LA SECCIÓN "El problema" — sistema de márgenes
   (para el merge: copiar este bloque al <head> del HTML original;
    en el original el gutter/padding vertical lo da .s-intro, así que
    solo hará falta lo específico del ritmo interno, marcado abajo).
   =================================================================== */

/* -- Frame: gutter horizontal + padding vertical (SOLO standalone) -- */
.art-frame{
  /* padding-bottom: sincronizado con el overlap real de la card de
     Jorge (ver .vm-quote-wrap mas abajo, que la sube clamp(56,14vw,128)+76px
     sobre esta seccion) mas un colchon fijo de 16px -- suficiente para
     garantizar que la card nunca tape el carrusel, sin sumar un segundo
     bloque grande de aire encima del que YA pone .cases-carousel-wrap
     con su propio margin-bottom (el carrusel es el ultimo hijo de este
     frame). Antes el colchon era de 40px (desktop) / 18px (mobile),
     apilado sobre ese margen -- dos fuentes de espacio haciendo el
     mismo trabajo, lo que dejaba un hueco mucho mas grande de lo
     necesario entre el carrusel y la card. */
  /* padding-top: REGLA C del sistema de espaciado foto/titulo/barra-social/
     texto (ver comentario completo junto a .v2-title-section, arriba) --
     el respiro mas grande de los 3, para marcar el quiebre real entre la
     cabecera del articulo y el arranque de la lectura. Piso subido de
     40px a 48px, techo de 56px a 64px (pedido explicito: separar mas el
     inicio del articulo de la barra social en mobile), manteniendo la
     misma jerarquia (sigue siendo la mas grande de las 3). */
  padding: clamp(48px,8vw,64px) clamp(20px,6vw,40px) calc(clamp(56px,14vw,128px) + 84px);
}
/* Este primer .art-frame (intro + callout) ya NO termina justo antes de
   .vm-quote-wrap -- entre medio quedo .equipo-section -- asi que no
   necesita el padding-bottom calibrado para el solape de la card de
   Jorge (eso ahora le toca al SEGUNDO .art-frame, el que envuelve "Estos
   son los proyectos..." + el carrusel de Casos, movido junto a .vm). Sin
   este override quedaba un hueco enorme e injustificado antes de
   Equipo. */
.art-frame.art-frame--sin-solape {
  padding-bottom: clamp(48px,8vw,64px);
}
/* -- Columna de lectura: 760px centrada (subida de 640px junto con
      .editorial-block/.hero-v2/.vm-head-inner, ver esas reglas).
      margin-bottom:0 anula el margen propio de .editorial-block; el aire
      exterior lo maneja solo .art-frame, para que arriba y abajo queden
      simétricos. -- */
.art-frame .problem-article{
  max-width:760px; margin:0 auto;
}

/* -- Ritmo vertical interno (ESTO sí va al merge) -- */
/* Salto de beat antes del eyebrow "El patrón se repite" */
.problem-article .problem-eyebrow{
  margin-top: clamp(40px,9vw,64px);
  margin-bottom: clamp(14px,3.5vw,20px);
}
/* Callouts (tesis y cierre) — beat simétrico (mismo aire arriba y abajo). */
.problem-article .editorial-callout.is-compact{
  margin: clamp(48px,10vw,80px) 0;
}
/* El callout de cierre es el último elemento: abajo lo cierra el padding
   del frame, así que anulamos su margen inferior para no duplicarlo. */
.problem-article .editorial-callout.is-compact:last-child{
  margin-bottom: 0;
}
/* Continuación del artículo, debajo del carrusel de Casos CoCoCo: mismo
   .problem-article, pero sin capitular (ya no es el inicio del texto). */
.problem-article.is-continuation p:first-of-type::first-letter{
  font-size: inherit; float: none; padding: 0; margin: 0;
  font-weight: inherit; line-height: inherit;
}
/* .art-frame de cierre: sin padding-top (el aire hacia arriba ya lo da el
   margin-bottom propio de .cases-carousel-wrap, igual que el aire entre
   el callout y el carrusel), y CON padding-bottom generoso porque aquí sí
   hay que cerrar la sección -- nada más abajo lo hace. */
.art-frame.art-frame-close{
  padding-top: 0;
  padding-bottom: clamp(240px,40vw,400px);
}
/* Utilidad para ocultar bloques sin borrarlos del HTML (para poder
   reactivarlos despues quitando esta clase). Usado por
   #hidden-forbes-callout-block: el callout "Algunos retos...", su
   parrafo "CoCoCo resuelve..." y la card de Forbes ("Te podria
   interesar"). */
.is-hidden-content{ display:none; }

/* -- Banner rosa: adaptado a las reglas de este html. El original usa un
      padding vertical enorme atado a cards que se solapan (aquí no
      existen), así que lo reemplazamos por el mismo ritmo vertical del
      resto (clamp(48,10vw,80)) y el gutter estándar. La columna interna
      (.pink-band-inner) ya está a max-width:640, igual que el artículo. -- */
.s-pink-band{
  padding: clamp(48px,10vw,80px) clamp(20px,6vw,40px);
}
/* Dentro de .vm (articulo oscuro): la regla base de .s-pink-band la hace
   full-bleed (width:100vw + margin negativo, pensada para el truco de
   background-attachment:fixed en su uso original). Aqui el banner debe
   quedar CONTENIDO dentro del mismo margen horizontal que el resto del
   contenido de la seccion (.vm-head usa clamp(20px,6vw,40px) de padding
   lateral) -- se anula el full-bleed y ese mismo gutter se usa como
   MARGEN propio (no padding: el fondo rosa tambien debe quedar inset,
   no solo el texto), para que el borde izq/der del banner calce exacto
   con el del titulo/parrafos de arriba. Padding interno propio y mas
   chico, solo para el aire del contenido dentro de la card. Como ya no
   es edge-to-edge, suma esquinas redondeadas (se ve como card, no como
   franja de pared a pared) y overflow:hidden para que el gradiente no
   se salga de esas esquinas. */
.vm .s-pink-band{
  /* Antes width:auto + margin-left/right:clamp(...) sin ningun tope: como
     .s-pink-band es hermano de .vm-head (no vive adentro), no heredaba el
     max-width:760px de .vm-head-inner -- en pantallas grandes el fondo
     rosa se estiraba casi a todo el ancho de la seccion (100vw menos el
     gutter chico) mientras el contenido interno (.pink-band-inner, con su
     propio max-width) quedaba centrado y angosto en el medio, generando
     una card enorme y descentrada respecto al resto del articulo. Ahora
     se limita al mismo tope de columna (760px) que .vm-head-inner/
     .vm-close-callout, calculando el ancho como "100% menos el gutter" y
     dejando que max-width lo recorte en pantallas grandes -- centrado via
     margin:auto, el resultado calza exacto con el borde izq/der del resto
     del articulo en cualquier resolucion. */
  width:calc(100% - 2 * clamp(20px,6vw,40px));
  max-width:760px;
  margin-left:auto; margin-right:auto;
  /* Vertical: piso subido de 32/24px a 44/28px (mas aire interno, se
     sentia compacto en mobile). Horizontal: reducido de clamp(28,7vw,44)
     a clamp(22,6vw,36) -- pedido explicito de aumentar el ancho
     disponible para el titular (ver .pink-band-headline). */
  padding: clamp(44px,9vw,60px) clamp(22px,6vw,36px);
  border-radius:24px;
  overflow:hidden;
}
/* Callout de cierre, debajo del banner rosa: ya no vive dentro de
   .vm-head-inner (que es donde estan los otros dos .vm-callout de este
   articulo), asi que necesita su propio contenedor con el mismo tope de
   760px (subido de 640px junto con el resto de la columna de lectura,
   ver .vm-head-inner) y el mismo gutter horizontal clamp(20px,6vw,40px)
   que usa el resto de la seccion (.vm-head, .s-pink-band), para que su
   borde izquierdo calce exacto con el resto del contenido de arriba. */
.vm-close-callout{
  max-width:760px; margin:clamp(80px,16vw,120px) auto 0;
  padding:0 clamp(20px,6vw,40px);
}
.vm-close-callout .vm-callout{ margin:0; }
/* .pink-band-visible: la regla base de .s-pink-band trae una animacion de
   entrada (opacity:0, translateY+scale) pensada para revelarse via
   IntersectionObserver -- ese observer nunca llego a implementarse en
   este archivo (queda solo documentado en comentarios), asi que sin este
   override el banner se quedaria invisible para siempre. Fuerza el
   estado final visible de una vez, igual que el resto de la pagina (el
   sistema .reveal global tambien esta desactivado a proposito). */
.pink-band-visible{ opacity:1; transform:none; }
/* Logo real de CoCoCo (circulo+bowtie+cuadrado, "Logo mono - White.svg"):
   reemplaza el motivo de 3 marcas dibujado en CSS que habia antes (placeholder
   documentado como pendiente de reemplazar por el SVG real). Estatico (sin
   entrada/animacion propia) y proporcionado: solo se controla el ancho via
   clamp, el alto queda en "auto" para respetar el aspect-ratio real del
   viewBox (97:27) sin estirar el logo. */
.pink-band-logo{
  /* Salto mas amplio que el resto (titulo->tags, ver .pink-band-headline):
     pedido explicito de separar mas el logo del titular que le sigue.
     margin-top negativo: pedido explicito de "subirlo unos pixeles" --
     el logo debe leerse como firma de marca discreta, no como elemento
     que abre el bloque con todo su peso. */
  margin: -6px 0 clamp(40px,8vw,52px);
}
.pink-band-logo svg{
  display:block;
  /* Reducido ~20% (antes clamp(84px,16vw,120px)): pedido explicito de que
     funcione como firma de marca, no como protagonista visual -- ese rol
     le corresponde al titular. */
  width:clamp(66px,12.5vw,94px);
  height:auto;
}
/* Titular del banner: Inter 800, grande -- mismo lenguaje tipografico que
   documenta el comentario original de .s-pink-band ("titulo enorme,
   Inter 800"), en vez de la Roboto Serif del resto del articulo: aqui es
   un momento de CTA/producto, no de lectura editorial. Techo subido de
   3.3rem a 4rem (mismo criterio de protagonismo que el resto de la
   pagina): este es el CTA de cierre del articulo, el momento tipografico
   mas grande deberia vivir aca, no quedar por debajo del titulo del
   propio articulo (3.75rem). Salto hacia los tags de abajo un poco mas
   chico que el del logo de arriba (pedido explicito: logo->titulo "amplio",
   titulo->tags solo "un poco mas" que antes). */
.pink-band-headline{
  font-family:'Inter',sans-serif; font-weight:800;
  /* line-height bajado de 1.06 a 1.0 (pedido explicito): con solo 3
     lineas ahora (antes 4, ver mas abajo), un interlineado mas apretado
     hace que el titular se lea como un unico bloque tipografico en vez
     de 3 renglones sueltos. Salto hacia los tags de abajo subido (antes
     clamp(26,5vw,32)): pedido explicito de que el titular termine de
     "respirar" antes de la informacion secundaria. */
  font-size:clamp(2.1rem,7.8vw,4rem); line-height:1.0; letter-spacing:-0.02em;
  color:#fff; margin:0 0 clamp(34px,6vw,42px);
}
/* Saltos de linea fijos en mobile (pedido explicito): "CoCoCo ejecuta" /
   "tu proyecto en" / "modo emprendedor", siempre en ese orden de 3
   lineas (antes 4: "modo" y "emprendedor" iban separados: ahora van
   juntos como una sola unidad visual dentro del highlight verde, pedido
   explicito), sin importar el ancho real del telefono -- el <br> fuerza
   el corte. Tamaño de fuente: pedido explicito de que ocupe SIEMPRE el
   area horizontal disponible -- el font-size se calcula con la MISMA
   expresion exacta que define ese ancho real: 100vw menos el margen de
   .s-pink-band (clamp(20,6vw,40) por lado, SIN TOCAR: debe calzar con el
   resto del articulo) menos el padding interno de la card (reducido de
   clamp(28,7vw,44) a clamp(22,6vw,36) por lado -- pedido explicito de
   aumentar el ancho disponible para el titular), dividido entre el ancho
   real de la linea mas larga. Antes esa linea era "CoCoCo ejecuta" (14
   caracteres, divisor 7.75 calibrado con una captura real del render).
   Ahora, con "modo emprendedor" unido (16 caracteres), es la linea mas
   larga -- divisor escalado proporcionalmente (7.75 × 16/14 ≈ 8.85): es
   una estimacion por proporcion de caracteres a partir del unico dato
   real que existe (la calibracion anterior), no una medicion nueva --
   no hay forma de renderizar esto en un navegador real desde este
   entorno, conviene verificar con una captura y ajustar el divisor si
   sobra o falta aire. En desktop (900px+, ver @media abajo) los <br> se
   ocultan y el titulo vuelve a su wrap fluido normal con el font-size de
   la regla base de arriba. */
@media (max-width: 899px){
  .pink-band-headline{
    font-size: clamp(
      1rem,
      calc((100vw - 2 * clamp(20px, 6vw, 40px) - 2 * clamp(22px, 6vw, 36px)) / 8.85),
      6rem
    );
  }
}
.pink-band-headline-break{ display:inline; }
@media (min-width: 900px){
  .pink-band-headline-break{ display:none; }
}
/* "modo emprendedor" resaltado en verde CoCoCo, como UNA sola unidad
   visual (pedido explicito: ya no van "modo" y "emprendedor" en bloques
   separados, ver el <br> que se quito del HTML) -- background-color
   solido en vez del barrido tipo marcador que tenia antes (background-
   image + background-size animado): pedido explicito de simplificar la
   entrada a una transicion de escala/opacidad muy ligera (180-220ms) en
   vez del barrido de 650ms. display:inline-block (en vez de inline) es
   lo que permite que el transform:scale() realmente se aplique -- ya no
   hace falta box-decoration-break porque el highlight nunca se parte en
   dos lineas (siempre es una sola pieza). Padding vertical chico y
   horizontal generoso: que se lea como marcador de highlighter digital
   (el texto ocupa casi toda el area verde), no como una tarjeta/boton.
   Texto en --ink (oscuro) sobre el verde para contraste. */
.pink-band-highlight{
  display: inline-block;
  background-color: var(--green);
  color: var(--ink);
  padding: 0.02em 0.32em;
  border-radius: 0.1em;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 200ms cubic-bezier(0.16,1,0.3,1), transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.s-pink-band.pink-band-highlight-in .pink-band-highlight{ opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .pink-band-highlight{ opacity: 1; transform: none; transition: none; }
}

/* -- Sección "Presentación de CoCoCo": adaptada a las reglas del html.
      El original tenía un padding-bottom enorme (96-128px) pensado para
      solaparse con la sección siguiente (que aquí no existe). La dejamos
      con el ritmo vertical estándar y el gutter estándar. -- */
.s-social-proof{
  padding: clamp(48px,10vw,80px) clamp(20px,6vw,40px);
}

/* ═══════════════════════════════════════════════════════════════
   venture_mode™ — sección verde (reemplaza el banner rosa)
   ═══════════════════════════════════════════════════════════════ */
.vm{
  --vm-eyebrow:#3F9A1E; --vm-headline:#15251A; --vm-desc:#7C8790;
  position:relative; width:100vw; background:#000913;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-top:clamp(56px,14vw,128px);
  /* padding-bottom: sincronizado con el overlap de la card de Eduardo
     (.pink-band-quote-wrap, primer hijo de la seccion siguiente -- ver
     esa regla mas abajo), igual que se hizo con .art-frame arriba para
     la card de Jorge. El overlap real es clamp(48px,10vw,80px) + 65px;
     aqui se suma un colchon de 24px para que siempre quede un margen
     visible entre el ultimo contenido de este articulo (el callout de
     cierre) y donde la card empieza a montarse encima. */
  padding-bottom: calc(clamp(48px,10vw,80px) + 89px);
}
/* ═══════════════════════════════════════════════════
   REDISEÑO (mobile-first). Cambios de fondo vs la version anterior:
   - Esquinas ●✕■ eliminadas: su color (#39871D sobre #3ACC00) las dejaba
     practicamente invisibles, no aportaban nada.
   - Titulo pasa de Inter 800 (grotesco pesado) a Roboto Serif, para
     unificar la voz tipografica con los titulos de las cards -- un
     titular sans-serif muy pesado + cards serif se sentia como 2 sitios
     pegados con cinta.
   - El marcador de resaltado deja de ser un rectangulo verde-lima solido
     (esquinas duras, se cortaba feo al hacer wrap) y pasa a ser una
     marca tipo "resaltador": fondo blanco, texto verde oscuro, esquinas
     redondeadas que se replican en cada linea si el texto envuelve.
   - Las 5 cards (3+2 asimetricas, con icono + linea divisoria + tag)
     pasan a 4 cards parejas (numero editorial + titulo + tag mono) y
     "Temporal" se separa a su propio bloque de cierre oscuro: no es un
     beneficio de ejecucion como las otras 4, es sobre tiempo/duracion,
     y merece su propio momento en vez de competir por espacio.
   - El cierre ("Reduce la incertidumbre...") ya no flota solo en blanco:
     una marca de acento arriba lo ancla de vuelta a la banda.
   - Todo el contenido (cards, cierre "Temporal", statement final) vive
     ahora sobre el mismo fondo verde continuo (antes las cards "subian"
     sobre la banda con margen negativo, pero la mayor parte de su alto
     terminaba flotando sobre el blanco de la pagina, debajo de la banda).
═══════════════════════════════════════════════════ */
.vm-head{
  position:relative;
  /* padding horizontal identico al de .vm-cards (clamp(20px,6vw,40px))
     para que titulo/descripcion y cards compartan exactamente el mismo
     borde izquierdo y derecho a cualquier ancho.
     padding-top: REGLA A del mismo sistema de espaciado foto/titulo/
     barra-social/texto que usa el articulo blanco de arriba (ver el
     comentario completo junto a .v2-title-section) -- antes este valor
     (64-120px) no tenia relacion con el resto del sistema, mas del
     doble del equivalente en el articulo blanco (20-28px), lo que
     hacia que la foto y el titulo de este articulo se sintieran mas
     separados/dispersos que su version clara sin ninguna razon de
     diseño real. padding-bottom: SIN cambios, cierra .vm-head/.vm
     completo (no es parte de este sistema de 3 reglas). */
  padding:clamp(24px,5vw,32px) clamp(20px,6vw,40px) clamp(72px,12vw,104px);
  text-align:center;
}
/* Imagen protagonica, full-bleed edge-to-edge dentro de .vm (que ya es
   100vw), arriba de todo el contenido con padding. Ahora el PNG tiene
   fondo transparente, asi que se apoya en el fondo oscuro de la seccion
   (.vm, #011020) en vez de necesitar un color de fondo propio -- por eso
   object-fit:contain (se ve completa, sin recortar nada) en vez de cover. */
/* Conector entre el articulo (blanco, arriba) y esta seccion (oscura,
   abajo): el quote-card de Jorge (mismo componente .quote-card
   .quote-card-testimonial que ya vive en el sitio, ver mas abajo en la
   hoja de estilos) se mete un poco en el articulo por arriba, funcionando
   como puente entre las dos secciones -- mismo mecanismo que
   .pink-band-quote-wrap/.stat-cta-wrap: vive como primer hijo de .vm
   (nativo, oscuro), asi que pinta por encima del articulo por orden
   natural del DOM, sin necesitar z-index. */
.vm-quote-wrap{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:clamp(24px,7vw,48px); padding-right:clamp(24px,7vw,48px);
  /* margin-top: cancela el padding-top propio de .vm (clamp(56,14vw,128))
     y sigue subiendo para el overlap real hacia el articulo -- 20% del
     alto de la card (mismo valor de respaldo, 76px, que usa esta misma
     card en el resto del sitio). Misma formula en TODAS las resoluciones
     (antes mobile tenia su propia variante via transform:translateY(-50%)
     para centrar la card exacto sobre la costura -- se quito porque el
     transform desincronizaba el hueco visual: el espacio reservado por
     margin-bottom seguia calculandose sobre la posicion SIN transformar,
     asi que la imagen del articulo oscuro de abajo quedaba con demasiado
     aire. Con una sola formula fija, el padding-bottom de .art-frame
     (arriba) y el margin-bottom de aqui abajo quedan siempre correctos y
     sincronizados, en vez de exactos solo en teoria). */
  margin-top:calc(-1 * (clamp(56px,14vw,128px) + 76px));
  margin-bottom:clamp(48px,10vw,88px);
}
.vm-hero-img{
  display:block; width:100%;
  aspect-ratio:3121/2200; max-height:640px;
  object-fit:contain; object-position:center center;
}
/* Contenedor comun que centra UNA sola vez dentro de .vm-head (que es
   text-align:center); titulo y descripcion viven adentro sin su propio
   margin:auto, asi comparten el mismo borde izquierdo en vez de quedar
   cada uno centrado por separado con anchos distintos (lo que los
   desalineaba entre si). Columna de lectura fija de 760px, IDENTICA a
   la de .editorial-block/.problem-article/.hero-v2 (el articulo blanco
   de arriba, subida de 640 a 760px a pedido explicito -- 640 se sentia
   apretado en desktop): en mobile no hace nada (el contenedor ya es
   mas angosto), pero de ahi para arriba se centra y nunca crece mas de
   760px a ninguna resolucion -- mismo criterio de legibilidad,
   consistente con el articulo blanco en vez de estirarse edge-to-edge. */
.vm-head-inner{
  max-width:760px; margin:0 auto; text-align:left;
}
.vm-headline{
  /* Mismo tamano/peso/interlineado que .v2-headline (titulo del
     articulo blanco de arriba): esta seccion es su version dark, asi
     que la tipografia del titular debe calzar exacto, solo cambia el
     color. */
  font-family:'Roboto Serif',serif; font-weight:300; color:#fff;
  /* Techo subido a 3.75rem, igual que .v2-headline arriba -- misma regla
     aplicada identica en ambos articulos. */
  font-size:clamp(1.9rem,8.5vw,3.75rem); line-height:1.14; letter-spacing:-0.02em;
  max-width:100%; margin:0; text-align:left;
}
.vm-highlight{
  background-color:#6BFF00; color:#011020;
  font-style:italic; font-weight:700;
  padding:0.04em 0.32em; margin:0 -0.05em;
  border-radius:0.2em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.vm-head-desc{
  /* Misma tipografia que .editorial-block p (parrafos del articulo
     blanco de arriba): Roboto Serif, mismo tamano/interlineado/letter-spacing.
     El peso SI se baja a 300 (en vez de 400): texto claro sobre fondo
     oscuro se percibe optimamente mas grueso que el mismo peso en
     oscuro-sobre-claro (efecto de irradiacion/halation), asi que un
     peso mas liviano aca compensa esa ilusion optica y ambos articulos
     terminan "leyendose" con el mismo grosor aparente. */
  font-family: 'Roboto Serif', serif; font-weight:300; color:#fff;
  opacity:.92; text-align:left;
  /* Techo subido a 1.75rem, igual que .editorial-block p arriba -- misma
     regla aplicada identica en ambos articulos. */
  font-size:clamp(1.25rem,1rem + 1.3vw,1.75rem); line-height:1.62; letter-spacing:0;
  /* REGLA C subida junto con .art-frame (articulo blanco): piso 40px->48px,
     techo 56px->64px. A diferencia del articulo blanco (donde REGLA C solo
     vive en el padding-top de .art-frame y el ritmo parrafo-a-parrafo es
     una regla aparte), aca este mismo margin-top hace las dos cosas: separa
     la barra social del inicio del articulo Y separa cada parrafo del
     siguiente -- asi que tambien crece el ritmo entre parrafos, no solo el
     primer salto, efecto deseado (mas aire en general). */
  max-width:none; margin:clamp(48px,8vw,64px) 0 0; /* REGLA C, identica al articulo blanco */
}
/* Lista con vinetas -- version dark de .editorial-list (definida en la
   hoja de estilos del articulo blanco, linea ~2937, pero nunca usada
   en HTML todavia). Misma tipografia/estructura, punto verde (el
   acento propio de esta seccion, #6BFF00) en vez de rosa. */
.vm-list{ list-style:none; margin:clamp(20px,4vw,28px) 0 0; padding:0; }
.vm-list li{
  /* Mismo peso 300 que .vm-head-desc, por la misma razon (compensar el
     efecto optico de texto claro sobre fondo oscuro). El <strong> del
     lead-in queda en 700, asi que el contraste entre texto normal y
     negrita dentro de la lista incluso se nota mas. */
  font-family: 'Roboto Serif', serif; font-weight:300;
  font-size:clamp(1.25rem,1rem + 1.3vw,1.5rem); line-height:1.62; color:#fff; opacity:.92;
  position:relative; padding-left:26px; margin-bottom:clamp(12px,2.5vw,16px);
}
.vm-list li:last-child{ margin-bottom:0; }
.vm-list li::before{
  content:''; position:absolute; left:4px; top:0.62em;
  width:7px; height:7px; border-radius:50%; background:#6BFF00;
}
.vm-list li strong{ font-weight:700; color:#fff; opacity:1; }
/* Callout -- version dark de .editorial-callout.is-compact (mismo
   tratamiento: texto grande en serif, barra de acento a la izquierda con
   glow sutil), aqui en blanco sobre fondo oscuro con el verde de esta
   seccion (#6BFF00, el mismo de .vm-highlight/.vm-list) en vez del rosa
   del articulo blanco. */
.vm-callout{
  position:relative;
  /* Peso 500 (no 600 como .editorial-callout, su gemelo del articulo
     blanco): mismo ajuste que .vm-head-desc/.vm-list li -- texto claro
     sobre fondo oscuro se percibe mas grueso que el mismo peso en
     oscuro-sobre-claro (halation), asi que un escalon menos aqui
     compensa esa ilusion optica y ambos callouts terminan
     "leyendose" con el mismo grosor aparente. */
  font-family:'Roboto Serif',serif; font-style:normal; font-weight:500;
  /* Techo subido a 2.2rem, igual que .editorial-callout.is-compact arriba
     -- misma regla aplicada identica en ambos articulos. */
  font-size:clamp(1.45rem,5.8vw,2.2rem); line-height:1.4;
  color:#fff; text-align:left;
  /* Antes clamp(40px,8vw,60px): casi identico al margen de .vm-head-desc
     (hasta 56px), asi que el callout no se distinguia en ritmo de un
     parrafo normal. Ahora usa el mismo tratamiento que ya tenia
     .problem-article .editorial-callout.is-compact en el articulo blanco
     (hasta 80px, ~2.9x el margen de un parrafo), para que la proporcion
     callout-vs-parrafo sea igual en los dos articulos. */
  margin:clamp(48px,10vw,80px) 0;
  padding-left:clamp(20px,4.5vw,26px);
}
.vm-callout::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:4px; border-radius:2px; background:#6BFF00;
  animation: vmCalloutLineGlow 3s ease-in-out infinite;
}
@keyframes vmCalloutLineGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,255,0,0.45); }
  50%      { box-shadow: 0 0 9px 1.5px rgba(107,255,0,0.65); }
}
/* Letra capital del parrafo -- version dark del mismo drop cap que usa
   el articulo blanco de arriba (.editorial-block p:first-of-type::first-letter),
   mismos valores (fuente, tamano, proporciones), solo blanco en vez de
   tinta para que funcione sobre el fondo oscuro. */
/* :first-of-type -- ahora que hay varios <p class="vm-head-desc">
   (parrafos adicionales agregados despues), el drop cap debe ir SOLO
   en el primero, igual que .editorial-block p:first-of-type en el
   articulo blanco de arriba. */
.vm-head-desc:first-of-type::first-letter{
  font-family: 'Roboto Serif', serif;
  font-weight:700; color:#fff; float:left;
  font-size:3.8em; line-height:0.78; padding-right:9px; margin-top:4px;
}
@media (min-width:860px){
  .vm-head-desc:first-of-type::first-letter{ font-size:4.3em; }
}
/* "Te podria interesar" -- version dark de .article-interstitial (el
   mismo componente que vive oculto en el articulo blanco de arriba,
   #hidden-forbes-callout-block). Misma estructura/logo/CTA, pero la
   card solida blanca del original se cambia por vidrio translucido
   (mismo lenguaje que .vm-social-pill/.vm-share-btn de esta seccion):
   una card blanca solida se veria como un parche pegado encima del
   fondo #011020, en vez de sentirse parte del mismo entorno oscuro. */
.vm-interstitial{ margin:clamp(56px,10vw,80px) 0; }
p.vm-interstitial-label{
  display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,.5);
  /* Mismo ajuste que .article-interstitial-label (version blanca, gemela
     de este mismo componente): antes 8px fijo, se sentia pegado a la
     card. */
  margin:0 0 clamp(14px, 3vw, 18px);
}
.vm-interstitial-card{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,18px);
  background:#011020; border:1px solid #2F6288;
  border-radius:16px;
  padding:clamp(12px,2vw,16px) clamp(16px,2.6vw,20px);
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.vm-interstitial-card:hover,
.vm-interstitial-card:focus-visible{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
}
.vm-interstitial-card:active{ transform:scale(.98); }
.vm-interstitial-card:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.vm-interstitial-logo{
  /* Mismo ajuste que .article-interstitial-logo: antes clamp(40px,7vw,48px). */
  flex-shrink:0; width:clamp(48px,8vw,64px); height:clamp(48px,8vw,64px);
  border-radius:9px; overflow:hidden;
}
.vm-interstitial-logo svg{ display:block; width:100%; height:100%; }
.vm-interstitial-text{ display:flex; flex-direction:column; gap:clamp(10px,1.8vw,14px); min-width:0; flex:1; }
.vm-interstitial-title{
  /* Peso 300 (no 400 como .article-interstitial-title, su gemelo del
     articulo blanco): mismo ajuste de halation que .vm-head-desc/
     .vm-callout -- este titulo se lee como texto de prosa dentro del
     articulo, no como label de UI, asi que le aplica el mismo criterio.
     Tamano: mismo ajuste que .article-interstitial-title, antes
     clamp(1rem,2vw,1.05rem), practicamente plano y chico. */
  font-family:'Inter',sans-serif; font-weight:300;
  color:#fff; font-size:clamp(1rem, 0.85rem + 1.3vw, 1.3rem); line-height:1.4;
}
.vm-interstitial-cta{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'IBM Plex Mono',monospace; font-weight:600;
  color:rgba(255,255,255,.65); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
}
.vm-interstitial-arrow{ flex-shrink:0; width:14px; height:14px; transition:transform .18s ease; }
.vm-interstitial-card:hover .vm-interstitial-cta{ color:#fff; }
.vm-interstitial-card:hover .vm-interstitial-arrow{ transform:translate(3px,-3px); }
/* Barra de botones -- version dark de .v2-social-section (tiempo de
   lectura + like + compartir) que acompana al titulo del articulo
   blanco de arriba. Mismos componentes/comportamiento, recolor para
   fondo oscuro (#011020): bordes/fondos en blanco translucido en vez
   de var(--rule)/blanco solido. */
.vm-social{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  /* Mismo ajuste que .v2-social-section (REGLA B), antes clamp(14px,3vw,18px). */
  margin:clamp(20px,3vw,26px) 0 0; /* REGLA B, identica al articulo blanco */
}
.vm-social-left{ display:flex; align-items:center; gap:14px; }
.vm-read-time{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.vm-read-time svg{ width:1em; height:1em; flex-shrink:0; }
.vm-social-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border:1px solid #2F6288; border-radius:100px;
  color:#fff; background:#011020; font:inherit; cursor:pointer;
  transition:border-color 200ms cubic-bezier(0.16,1,0.3,1), background-color 200ms cubic-bezier(0.16,1,0.3,1);
}
.vm-social-pill:hover{ border-color:#86A4BA; }
.vm-social-pill:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.vm-social-pill svg{ width:16px; height:16px; flex-shrink:0; transition:transform 260ms cubic-bezier(0.34,1.56,0.64,1), fill 200ms, stroke 200ms; }
.vm-social-pill.is-liked{ border-color:#FF1493; background:rgba(255,20,147,.14); }
.vm-social-pill.is-liked svg{ fill:#FF1493; stroke:#FF1493; transform:scale(1.12); }
.vm-social-pill.is-liked .vm-social-count{ color:#FF1493; }
.vm-social-count{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:500; color:rgba(255,255,255,.7);
}
.vm-share-btn{
  display:inline-flex; align-items:center;
  padding:9px 20px; border:1px solid #2F6288; border-radius:100px;
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase;
  color:#fff; background:#011020; text-decoration:none;
  transition:border-color 200ms cubic-bezier(0.16,1,0.3,1), transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.vm-share-btn:hover{ border-color:#86A4BA; transform:translateY(-1px); }
.vm-share-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* Entrada sutil: titulo + descripcion aparecen con fade+rise cuando la
   seccion entra en pantalla (reusa el mismo IntersectionObserver que
   antes solo dibujaba el marcador de resaltado).
   will-change fuerza una capa compuesta estable: sin esto, Safari puede
   aplanar/repintar mal la capa a mitad de scroll rapido en elementos con
   opacity+transform animados dentro de ancestros con overflow:clip (bug
   conocido de WebKit), leyendose como que el contenido "desaparece". */
.vm-head > *{
  opacity:0; transform:translateY(16px);
  transition:opacity 640ms cubic-bezier(0.16,1,0.3,1), transform 640ms cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.vm.is-in .vm-head > *{ opacity:1; transform:translateY(0); }
.vm.is-in .vm-head > *:nth-child(2){ transition-delay:90ms; }
@media (prefers-reduced-motion: reduce){
  .vm-head > *{ opacity:1; transform:none; transition:none; }
}

/* 4 cards parejas, sobre el mismo fondo verde continuo de la seccion.
   Mobile-first: 1 columna por defecto, 2 desde 640px, 3 desde 1024px
   (quedaron 3 cards: se elimino "El mercado como unico juez"). */
.vm-cards{
  position:relative; z-index:2; max-width:1040px;
  margin:0 auto 0; padding:0 clamp(20px,6vw,40px);
  display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,18px);
}
.vm-card{
  background:#fff; border-radius:18px; padding:clamp(24px,3vw,30px);
  box-shadow:0 20px 46px rgba(20,45,15,.15);
}
.vm-h{
  font-family:'Roboto Serif',serif; font-weight:500; color:var(--vm-headline);
  font-size:clamp(1.25rem,2.6vw,1.55rem); line-height:1.15; letter-spacing:-0.01em;
  margin:0 0 clamp(14px,2vw,18px);
}
/* Tag: etiqueta mono en mayusculas con un punto de color -- mismo
   lenguaje que las demas etiquetas mono del sitio (.v2-byline,
   .cover-meta-industry), en vez del icono a medida que tenia antes. */
.vm-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono',monospace; font-weight:600;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vm-eyebrow);
}
.vm-tag::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex-shrink:0;
}

/* Cierre "Temporal": tarjeta oscura y separada del grid, el remate
   visual de la seccion. */
.vm-closing{
  position:relative; z-index:2; max-width:1040px;
  margin:clamp(14px,2vw,18px) auto 0; padding:0 clamp(20px,6vw,40px);
}
.vm-closing-card{
  background:var(--vm-headline); border-radius:18px;
  padding:clamp(28px,4vw,40px); text-align:center;
  box-shadow:0 20px 46px rgba(20,45,15,.25);
}
.vm-closing-h{
  font-family:'Roboto Serif',serif; font-weight:500; color:#fff;
  font-size:clamp(1.35rem,3vw,1.75rem); line-height:1.15; letter-spacing:-0.01em;
  margin:0 0 clamp(14px,2vw,18px);
}
.vm-closing-card .vm-tag{ color:#8FE05C; justify-content:center; }

/* Statement final: marca de acento arriba para anclarlo de vuelta a la
   banda verde -- antes flotaba solo en blanco, como si empezara otra
   pagina en vez de cerrar esta. */
.vm-close{
  position:relative; text-align:center; max-width:760px;
  margin:clamp(52px,8vw,84px) auto 0; padding:0 clamp(20px,6vw,40px);
}
.vm-close::before{
  content:''; display:block; width:40px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.55); margin:0 auto clamp(20px,3vw,26px);
}
.vm-close-line{
  font-family:'Roboto Serif',serif; font-weight:500; color:#fff;
  font-size:clamp(1.5rem,3.8vw,2.2rem); line-height:1.2; letter-spacing:-0.01em;
}

/* Invitación a leer el articulo de Forbes que inspiro venture_mode, mas
   el resto de menciones de prensa -- vive debajo del cierre, siempre
   sobre el mismo fondo oscuro de la seccion. */
.vm-press{
  position:relative; max-width:640px;
  margin:clamp(56px,9vw,88px) auto 0; padding:0 clamp(20px,6vw,40px);
}
.vm-press-invite{
  text-align:center; color:#fff; opacity:.7;
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:400;
  font-size:clamp(.9rem,2vw,1rem); line-height:1.5;
  margin:0 0 clamp(20px,3vw,26px);
}
.vm-press-card{
  background:var(--vm-headline); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 50px rgba(0,9,19,.35);
}
.vm-press-photo{ display:block; width:100%; height:auto; }
.vm-press-body{ padding:clamp(20px,3vw,28px) clamp(20px,3vw,28px) clamp(24px,3.4vw,30px); }
.vm-press-meta{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:#B8A16B;
  margin:0 0 clamp(12px,2vw,16px);
}
.vm-press-title{
  font-family:'Roboto Serif',serif; font-weight:500; color:#fff;
  font-size:clamp(1.15rem,2.6vw,1.45rem); line-height:1.3; letter-spacing:-0.01em;
  margin:0 0 clamp(16px,2.4vw,20px);
}
.vm-press-link{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; text-decoration:none;
}
.vm-press-link-arrow{ display:inline-block; transition:transform .28s ease; }
.vm-press-link:hover .vm-press-link-arrow{ transform:translate(2px,-2px); }
.vm-press-also{ margin:clamp(32px,5vw,44px) 0 0; }
.vm-press-logos{ display:block; width:100%; height:auto; }

/* ═══════════════════════════════════════════════════
   venture_mode™ v3 -- seccion paralela, mismo fondo oscuro que .vm,
   pero estructura/contenido calcada de la referencia: disclaimer
   ("no como consultores / no como equipo interno"), subtitulo, 4 cards
   con borde (no solidas) icono+linea+sublinea en verde italica, y
   tagline final. Contenido deliberadamente distinto al de .vm (misma
   idea, otro angulo), a peticion del usuario -- no se fusiono con .vm
   para no perder ninguna de las dos versiones.
═══════════════════════════════════════════════════ */
.vm3{
  position:relative; width:100vw; background:#011020;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:clamp(56px,10vw,96px) clamp(20px,6vw,40px) clamp(64px,10vw,100px);
}
.vm3-inner{ max-width:900px; margin:0 auto; }
.vm3-headline{
  font-family:'Roboto Serif',serif; font-weight:500; color:#fff;
  font-size:clamp(1.9rem,6vw,3rem); line-height:1.18; letter-spacing:-0.01em;
  max-width:20ch; margin:0;
}
.vm3-disclaimer{
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:400;
  color:#7C93AD; font-size:clamp(.85rem,1.8vw,.95rem); line-height:1.7;
  margin:clamp(16px,2.6vw,22px) 0 0;
}
.vm3-sub{
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:700; color:#fff;
  font-size:clamp(1rem,2.2vw,1.15rem);
  margin:clamp(28px,4.4vw,40px) 0 clamp(16px,2.4vw,20px);
}
.vm3-cards{
  display:grid; grid-template-columns:1fr; gap:clamp(12px,1.8vw,16px);
}
.vm3-card{
  border:1px solid rgba(124,147,173,.35); border-radius:14px;
  padding:clamp(18px,2.6vw,24px);
}
.vm3-ico{
  width:22px; height:22px; color:#7C93AD;
  margin:0 0 clamp(12px,2vw,16px);
}
.vm3-card-line{
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:400; color:#fff;
  font-size:clamp(.95rem,2vw,1.02rem); line-height:1.4;
  margin:0;
}
.vm3-card-sub{
  font-family:'Roboto Serif',serif; font-style:italic; font-weight:400;
  color:#6BFF00; font-size:clamp(.9rem,1.9vw,.98rem); line-height:1.4;
  margin:4px 0 0;
}
.vm3-tagline{
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:400; color:#fff;
  font-size:clamp(1rem,2.2vw,1.1rem);
  margin:clamp(32px,5vw,44px) 0 0;
}
.vm3-tagline strong{ font-weight:700; }
@media (min-width:560px){
  .vm3-cards{ grid-template-columns:repeat(2,1fr); }
}

/* Responsive: mobile-first, se agregan columnas segun ancho */
@media (min-width:640px){
  .vm-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .vm-cards{ grid-template-columns:repeat(3,1fr); }
}

/* ═══════════════════════════════════════════════════
   FOOTER
   Cierre del sitio: fondo navy solido (--navy de marca, no el #011020
   casi-negro de .vm -- se diferencia como "cierre de marca" propio, no
   una repeticion del articulo oscuro). Logo: mismo SVG que el nav
   (fill solido en cada path), vuelto blanco con el mismo truco que ya
   usa el sitio para logos sobre fondo oscuro (brightness(0) invert(1)).
   Mobile-first: todo apilado y centrado; desde 768px pasa a filas
   (marca+tagline izq, nav+contacto der arriba; ciudades+legal en una
   sola fila abajo).
═══════════════════════════════════════════════════ */
/* Fondo del footer: navy -> gris claro #e7e7e7 (rediseño mas reciente
   del artefacto, ".pie"/".ubicaciones"). Todo el texto/bordes de aqui
   para abajo pasa de blanco-sobre-oscuro a tinta-sobre-claro. */
.v2-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #e7e7e7;
  padding: clamp(48px, 10vw, 72px) clamp(20px, 6vw, 40px) clamp(28px, 6vw, 40px);
}
.v2-footer-inner {
  /* 720px era el ancho de columna del HERO original -- mucho mas angosto
     que el 1800px que usa el resto de esta pagina rediseñada (hero-split,
     services). El fondo del footer ya era full-bleed, pero el contenido
     de adentro se veia metido en una columna angosta comparado con todo
     lo de arriba. */
  max-width: 1800px;
  margin: 0 auto;
}
.v2-footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(28px, 6vw, 36px);
  padding-bottom: clamp(28px, 6vw, 36px);
  border-bottom: 1px solid rgba(0,9,19,.12);
}
@media (min-width: 768px) {
  .v2-footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }
}
.v2-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 380px;
}
@media (min-width: 768px) {
  .v2-footer-brand { align-items: flex-start; }
}
/* El SVG trae fill="#011020" fijo en cada path (no currentColor) --
   con el footer navy se forzaba a blanco via filter:brightness(0)
   invert(1). Fondo claro ahora: se quita el filtro y el fill propio
   (oscuro) ya funciona tal cual, sin necesitar "color". */
.v2-footer-logo {
  height: 22px;
  width: auto;
}
.v2-footer-tagline {
  font-family: 'Roboto Serif', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--mid);
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
}
.v2-footer-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media (min-width: 768px) {
  .v2-footer-nav { flex-direction: row; align-items: flex-start; gap: 32px; padding-top: 4px; }
}
.v2-footer-nav-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 768px) {
  .v2-footer-nav-col { align-items: flex-start; }
}
.v2-footer-nav a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
}
.v2-footer-nav a:hover { color: var(--pink); }
.v2-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 768px) {
  .v2-footer-contact { align-items: flex-end; }
}
.v2-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  color: var(--ink);
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms cubic-bezier(0.16,1,0.3,1), color 200ms cubic-bezier(0.16,1,0.3,1);
}
.v2-footer-cta:hover { background: var(--ink); color: #FFFFFF; }
.v2-footer-cta:active { transform: scale(0.97); }
/* SIGUENOS del footer: mismo chip/icono que el del header (.v2-follow),
   pero clase propia -- .v2-follow tiene una regla que lo oculta <768px
   (no compite ahi con la hamburguesa) y esa regla se filtraria aca si
   reusara la clase, escondiendo el boton del footer en mobile tambien. */
/* .v2-cta--claro (blanco solido) esta pensado para fondos oscuros --
   footer ahora es claro, se sobreescribe a contorno tinta (mismo
   tratamiento que .v2-footer-cta) en vez de tocar la clase compartida. */
.v2-footer-follow {
  gap: 12px; height: 38px; padding: 0 22px; font-size: 0.78rem;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
}
.v2-footer-follow:hover { background: var(--ink); color: #FFFFFF; }
.v2-footer-follow-icon { width: 20px; height: 20px; flex-shrink: 0; }
.v2-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding-top: clamp(20px, 4vw, 24px);
}
@media (min-width: 768px) {
  .v2-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.v2-footer-cities {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.v2-footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}
@media (min-width: 768px) {
  .v2-footer-legal { justify-content: flex-end; }
}
.v2-footer-legal span,
.v2-footer-legal a {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: var(--mid);
  text-decoration: none;
}
.v2-footer-legal a:hover { color: var(--ink); }
.v2-footer-legal-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: var(--mid);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 150ms ease;
}
.v2-footer-legal-link:hover { color: var(--ink); }
.v2-footer-legal-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }



/* ===== bloque original: <style id="article-merge-bg-override"> (article-merge-bg-override) ===== */

/* Fusion con seccion_articulo_standalone.html: ese archivo define su
   propio :root con --bg:#FFFFFF (beige). HERO COCOCO v2 se construyo
   deliberadamente con fondo blanco puro (--bg:#FFFFFF), despues cambiado
   a #F6FBFF (blanco con un ligero tinte azul), y ahora de vuelta a
   blanco puro -- ese tinte azul se reubico en .quote-card (Jorge/Eduardo),
   que antes eran blanco puro y ahora usan este mismo #F6FBFF, para que
   las cards se sigan distinguiendo del fondo del sitio en vez de
   fundirse con el. Se mantiene el :root completo del articulo (arriba)
   para no perder ningun otro token que sus reglas puedan usar (--navy,
   --gold, --pink, etc.), y se sobreescribe SOLO --bg aqui al final, que
   por orden de cascada (misma especificidad, ultima regla gana) fija
   este color en todo el documento fusionado. */
:root { --bg: #FFFFFF; }


/* ===== bloque original: <style id="hero-split-y-servicios"> (hero-split-y-servicios) ===== */

/* ═══════════════════════════════════════════════════
   HERO SPLIT — texto a la izquierda (identidad + CTA),
   foto+badge Forbes a la derecha (más discreta, ya no
   full-bleed). Reemplaza el hero "editorial" de HERO v2:
   un CEO/CFO que escanea 5 segundos necesita la oferta
   arriba, no una narrativa de revista.
═══════════════════════════════════════════════════ */
/* Medidas literales del artefacto (Figma 71:6637, frame de 1280 con
   48 de gutter y 64 de ritmo vertical a desktop) -- nada de clamp
   inventado a ojo, son los mismos valores/breakpoints que .hero__inner,
   .hero__texto, .t-titulo, .hero__foto y .galardones del artefacto. */
.hero-split {
  /* <=1023: 32/16 fijo (override explicito del artefacto sobre el
     ritmo/gutter normal de la seccion, no una escala propia). */
  padding: 32px 16px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .hero-split { padding: 64px 48px; }
}
.hero-split-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  /* items-end: la foto y los galardones a la misma base -- asi esta en
     el artefacto (.hero__inner{align-items:flex-end}), no top/center. */
  .hero-split-inner { flex-direction: row; align-items: flex-end; gap: 48px; }
}
.hero-split-text {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .hero-split-text { flex: 1 0 0; min-width: 0; }
}
.hero-split-h1 {
  /* Fuente y medidas literales del artefacto (.t-titulo): DM Serif
     Text 400, --titulo-protagonista clamp(42px,9vw,64px), .95/-.02em. */
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.625rem, 9vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hero-split-h1 em {
  font-style: normal;
  font-weight: 400;
  color: var(--pink);
  background-image: none;
}
.hero-split-sub {
  margin-top: 32px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  /* --texto-protagonista (<1024, .hero__texto .hero__lead): clamp(16px,
     4vw,18px). A >=1024 el artefacto NO usa esa variable -- cae al
     tamaño flat de .t-texto, 20px. */
  font-size: clamp(1rem, 4vw, 1.125rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
}
@media (min-width: 1024px) {
  .hero-split-sub { font-size: 20px; }
}
/* Galardones (Figma del artefacto de Camilo): 3 SVG completos -- laurel +
   numero/logo + texto ya resueltos en el archivo, aca solo se pone la
   fila que los contiene. Reemplaza la fila de CTA+microcopy: en el
   diseño de referencia el hero no lleva boton propio, el CTA de agendar
   ya vive en el nav (.v2-agenda). */
.hero-split-badges {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.hero-split-badge {
  /* Alto nativo del artefacto (.galardones__pieza{height:65px}), sin
     clamp -- las piezas ya vienen a su tamaño de diseño. */
  height: 65px;
  width: auto;
  flex-shrink: 0;
}
.hero-split-visual {
  position: relative;
}
/* <1024: la foto ocupa el ancho completo con su proporcion (500/450)
   -- mismo criterio que el bloque mobile del artefacto. >=1024: caja
   fija 500x450 (.hero__foto), foto y galardones alineados por abajo. */
.hero-split-image-wrap {
  width: 100%;
  aspect-ratio: 500 / 450;
  overflow: hidden;
}
.hero-split-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
@media (min-width: 1024px) {
  .hero-split-image-wrap { width: 500px; height: 450px; aspect-ratio: auto; flex-shrink: 0; }
  .hero-split-image-wrap img { object-position: center center; }
}

/* Saltos de linea propios de mobile (Figma 158:6248): "El brazo /
   emprendedor / de los empresarios / en México y España." -- ocultos
   por defecto (desktop sigue en wrap natural, ya aprobado), se
   encienden solo en el bloque de abajo. */
.hero-split-break { display: none; }

/* Responsive del hero, calcado 1:1 del artefacto (.hero__inner mobile):
   se apila en columna y se REORDENA a titulo->foto->parrafo->laureles
   (Figma 71:6637 mobile) usando display:contents en los wrappers para
   que sus hijos pasen a ser items directos de .hero-split-inner y el
   orden se controle con una sola propiedad, sin tocar el HTML de
   escritorio. Escala fluida (--u, container query sobre el ancho real
   del contenedor): el gap entre los 4 bloques y el alto de titulo/
   laureles crecen juntos en vez de quedar fijos o clamp-eados al
   viewport -- mismos valores que .hero__inner/.t-titulo/.galardones
   del artefacto. */
@media (max-width: 1023px) {
  .hero-split-inner {
    gap: calc(24 * var(--u));
    container-type: inline-size;
    --u: clamp(0.7821px, 0.2793cqi, 2.6788px);
  }
  .hero-split-text { display: contents; }
  .hero-split-visual { display: contents; }

  .hero-split-h1 { order: 1; font-size: min(calc(42 * var(--u)), 64px); }
  .hero-split-break { display: initial; }

  .hero-split-image-wrap { order: 2; }

  /* Ya no aporta su propio gap (32/48px de escritorio): a los 4 items
     sueltos por display:contents el espacio entre TODOS lo reparte el
     gap de .hero-split-inner de arriba -- si el margin se quedara,
     se sumaria al gap y quedaria doble de aire. */
  .hero-split-sub { order: 3; margin-top: 0; }
  .hero-split-badges { order: 4; margin-top: 0; flex-wrap: nowrap; justify-content: space-between; gap: 0; }

  /* Cada laurel a su caja exacta del Figma (no al aspect-ratio nativo
     del archivo, que trae ~2.5% de aire de mas alrededor): mismos 3
     tamaños que el artefacto, mismos SVG (167x65/161x65/181x65). */
  .hero-split-badge { flex-shrink: 0; width: auto; height: auto; }
  .hero-split-badge:nth-child(1) { width: calc(107.175 * var(--u)); height: calc(42.759 * var(--u)); }
  .hero-split-badge:nth-child(2) { width: calc(103.06 * var(--u)); height: calc(42.759 * var(--u)); }
  .hero-split-badge:nth-child(3) { width: calc(116.201 * var(--u)); height: calc(42.759 * var(--u)); }
}

/* ═══════════════════════════════════════════════════
   BANDA DE CLIENTES — carrusel continuo (logos del
   artefacto de Camilo, con aprobacion explicita de JC
   para mostrar nombres reales de cliente aca). Cada logo
   son 2 archivos superpuestos -- negro por defecto, color
   al hover -- en vez de un filtro brightness(0): con logos
   que son una caja de color solida (Kiosko, Gonher) ese
   filtro los deja ilegibles; con dos archivos cada estado
   es el que ya dibujo el diseñador. A sangre (100vw), igual
   truco full-bleed que .services.
═══════════════════════════════════════════════════ */
.clients-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(28px, 5vw, 44px) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: clients-scroll var(--giro, 135.09s) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
}
.clients-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  height: 100px;
  /* Sin esto el <ul> se queda con el bullet y el padding/margin por
     defecto del navegador -- flex en el padre no le quita el marker al
     <li>, eso eran los "puntitos" entre cada logo. */
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Rediseño mas reciente del artefacto: cada logo pasa de "suelto sobre
   la banda" a vivir dentro de una tarjeta propia (260x100, filo gris
   #e7e7e7, radio 16) -- la imagen se centra dentro con translate en vez
   de inset:0, mismo ancho por logo (--cw, inline en el HTML) y mismo
   alto de diseño (65px). */
.clients-logo {
  position: relative;
  width: 260px;
  height: 100px;
  flex-shrink: 0;
  border: 1px solid #e7e7e7;
  border-radius: 16px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .clients-track, .clients-group { gap: 16px; }
  .clients-logo { width: 182px; height: 70px; }
}
.clients-logo-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--cw);
  height: 65px;
  object-fit: contain;
  transition: opacity 250ms ease;
}
@media (max-width: 767px) {
  .clients-logo-img { height: 46px; width: calc(var(--cw) * 0.7); }
}
.clients-logo-img.is-negro { opacity: 1; }
.clients-logo-img.is-color { opacity: 0; }
.clients-logo:hover .clients-logo-img.is-negro { opacity: 0; }
.clients-logo:hover .clients-logo-img.is-color { opacity: 1; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--paso, calc(-50% - 44px))); }
}

/* ═══════════════════════════════════════════════════
   USOS — artefacto de Camilo: 3 tarjetas con ilustracion
   propia (border flat, sin sombra -- mismo lenguaje "plano"
   que .hero-split-badge/.v2-cta) y una cita firmada abajo.
   Reemplaza el catalogo de servicios con gradientes.
═══════════════════════════════════════════════════ */
.usos {
  /* .seccion__inner literal: ritmo/gutter de mobile (32/16, override
     explicito del artefacto para usos) y de desktop (64/48). */
  padding: 32px 16px;
  /* El artefacto vive en un frame de 1280px (--marco), no en los 1800px
     que usa el resto del sitio (hero-split, services): a 1800 las 3
     columnas se ensanchaban mucho mas que en el original y, con la
     foto fija en 300px, la tarjeta se veia cuadrada/ancha en vez de
     vertical. */
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .usos { padding: 64px 48px; }
}
.usos-title {
  /* Mismo token --titulo-protagonista que el hero: DM Serif Text 400,
     clamp(42px,9vw,64px), .95/-.02em -- literal, no un tamaño propio. */
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(2.625rem, 9vw, 4rem);
  line-height: 0.95;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.usos-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--pink);
}
.usos-grid {
  /* .usos__inner{gap:48px} entre los 3 bloques (titulo/rejilla/cita) --
     flat, no clamp. */
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .usos-grid { grid-template-columns: repeat(3, 1fr); }
}
.usos-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 32px;
  /* Releido del artefacto: el borde real es gris tenue (10% de --ink),
     no negro solido -- con negro las tarjetas se veian mucho mas
     pesadas/duras que la referencia. */
  border: 2px solid rgba(0, 9, 19, 0.1);
  border-radius: 32px;
}
.usos-card-photo {
  width: 100%;
  /* 300px exacto del artefacto -- estaba en 220, mas chica que la
     referencia. */
  max-width: 300px;
  aspect-ratio: 1 / 1;
  /* Centrada dentro de la tarjeta -- el margen automatico absorbe el
     espacio libre del flex item aunque el padre sea flex-start. */
  margin: 0 auto;
}
.usos-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Wrapper de tag/titulo/ejemplo (.servicio__contenido en el artefacto):
   en desktop es "contents" -- invisible en el arbol de caja, no cambia
   nada a la columna vertical de .usos-card -- pero en mobile (ver
   media query abajo) se convierte en columna real para formar la mitad
   derecha de la fila foto+texto. */
.usos-card-content { display: contents; }
.usos-card--gris .usos-card-photo img { filter: grayscale(1); }
/* Por defecto el subheading va centrado en la tarjeta (CRECER/
   MAXIMIZAR, un solo tag). La de OPTIMIZAR tiene 2 elementos -- tag +
   badge NUEVO -- y ahi pasa a space-between (tag a la izquierda, badge
   a la derecha), ver .usos-card--gris mas abajo. */
.usos-card-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.usos-card--gris .usos-card-tags { justify-content: space-between; }
.usos-card-tag {
  /* .t-tag literal: Plex Mono SemiBold 18/1/10% -- sin color propio en
     el artefacto (hereda el ink solido del body, no --gris-texto). */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.usos-card-nuevo { width: 74px; height: 18px; }
.usos-card-title {
  width: 100%;
  /* .servicio__titular literal: DM Serif Text 400, 36/1/-.02em. */
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  text-align: center;
}
.usos-card-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--pink);
}
.usos-card-example {
  width: 100%;
  /* .servicio__ejemplo hereda .t-texto: Inter 20/1.5/0, color ink solido
     (no --gris-texto/--mid). */
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
}
/* Mobile (calcado 1:1 del artefacto, Figma 231:11989, base 390px):
   tarjeta horizontal -- foto 120x214 a la izquierda, columna de tag/
   titulo/ejemplo a la derecha. Con align-items:center en la fila, el
   bloque de texto (165 de alto) queda centrado contra la foto (214),
   igual que el Figma -- el artefacto probo grid con align-content:
   center y el texto quedaba pegado arriba, no centrado, por eso es
   flex row + .usos-card-content real (ver "display:contents" arriba)
   en vez de grid-template-areas. Mismo sistema --u/cqi que .hero-
   split-inner (ver ahi), un solo diseño para todo mobile sin
   breakpoints intermedios. */
@media (max-width: 1023px) {
  .usos {
    container-type: inline-size;
    --u: clamp(0.7821px, 0.2793cqi, 2.6788px);
  }
  .usos-grid { gap: calc(16 * var(--u)); }
  .usos-card {
    flex-direction: row;
    align-items: center;
    gap: calc(16 * var(--u));
    padding: calc(16 * var(--u));
    border-radius: calc(16 * var(--u));
  }
  .usos-card-photo {
    width: calc(120 * var(--u));
    height: calc(214 * var(--u));
    max-width: none;
    aspect-ratio: auto;
    flex-shrink: 0;
    margin: 0;
  }
  .usos-card-photo img { object-fit: cover; }
  .usos-card-content {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    flex: 1;
    min-width: 0;
  }
  /* El tag ya no se centra (se pega a la izquierda, salvo OPTIMIZAR
     que reparte con el badge NUEVO via .usos-card--gris .usos-card-
     tags{justify-content:space-between}, regla base, mas especifica
     que esta) y el texto vuelve a la izquierda (en desktop va
     centrado, regla base). */
  .usos-card-tags {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: calc(4 * var(--u));
    column-gap: calc(8 * var(--u));
    width: auto;
  }
  .usos-card-tag { font-size: min(calc(13 * var(--u)), 18px); }
  .usos-card-nuevo { width: min(calc(53.44 * var(--u)), 74px); height: min(calc(13 * var(--u)), 18px); }
  .usos-card-title {
    width: auto;
    text-align: left;
    font-size: min(calc(24 * var(--u)), 36px);
    min-height: calc(72 * var(--u));
  }
  .usos-card-example {
    width: auto;
    text-align: left;
    font-size: min(calc(16 * var(--u)), 20px);
    min-height: calc(48 * var(--u));
  }
}

/* Cita firmada: mismas rayas rosa + wordmark que el resto del sitio usa
   como firma (ver .cita__firma del artefacto), reusando el logo real
   del nav (.v2-logo-mark) en vez de crear un asset nuevo. */
.usos-cita {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.usos-cita-text {
  /* .cita__texto literal: 889px, Inter 24/1.3/-.02em, ink solido. */
  max-width: 889px;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.usos-cita-text em {
  font-style: italic;
  color: var(--pink);
}
.usos-cita-firma {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 340px;
  /* En el artefacto la firma esta SEGUNDA en el DOM (despues del texto)
     pero se ve PRIMERA -- via order:-1 en flex, no un cambio de markup.
     Se replica igual aca en vez de reordenar el HTML. */
  order: -1;
}
.usos-cita-text { order: 0; }
.usos-cita-raya { flex: 1 0 0; height: 2px; background: var(--pink); }
.usos-cita-logo { width: 124px; height: 20px; color: var(--ink); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   BANNER — seccion nueva del ultimo rediseño del artefacto
   (sello + titular + CTA), entre Usos y el articulo/Casos.
   Fondo gris #e7e7e7 (mismo token que Ubicaciones/Footer).
═══════════════════════════════════════════════════ */
.banner-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #e7e7e7;
}
.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px;
}
@media (max-width: 1023px) {
  .banner-inner { flex-direction: column; justify-content: center; gap: 16px; padding: 32px 16px; }
}
.banner-sello { width: 360px; height: 360px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
@media (max-width: 1023px) { .banner-sello { width: 256px; height: 256px; } }
.banner-sello img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-contenido { display: flex; flex-direction: column; gap: 24px; width: 603px; flex-shrink: 0; }
@media (max-width: 1023px) { .banner-contenido { width: 100%; } }
.banner-titulo {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 1023px) {
  .banner-titulo { font-size: 32px; text-align: center; }
}
.banner-texto {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 1023px) {
  .banner-texto { font-size: 16px; text-align: center; }
}
.banner-acciones { display: flex; gap: 24px; align-items: center; }
@media (max-width: 1023px) {
  .banner-acciones { flex-direction: column; justify-content: center; gap: 24px; width: 100%; }
}
.banner-cta { height: 54px; padding: 0 32px; font-size: 18px; gap: 10px; }
.banner-cta svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 1023px) {
  .banner-cta { width: 100%; height: 44px; padding: 0 16px; font-size: 15px; gap: 8px; justify-content: center; }
  .banner-cta svg { width: 16px; height: 16px; }
}
.banner-tag { display: flex; gap: 16px; align-items: center; }
.banner-raya { width: 48px; height: 1px; flex-shrink: 0; background: rgba(0,9,19,.15); }
.banner-raya--fin { display: none; }
@media (max-width: 1023px) {
  .banner-raya { width: 37px; }
  .banner-raya--fin { display: block; }
}
.banner-etiqueta {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 1023px) { .banner-etiqueta { font-size: 0.72rem; } }

/* ═══════════════════════════════════════════════════
   EQUIPO — puerto literal del artefacto (Figma 94:24023):
   intro + EXPOSURE a la izquierda, mazo de perfiles
   arrastrable a la derecha, cita, y 6 tarjetas de metodo
   que voltean. Reemplaza el carrusel .team-card anterior.
   Medidas del bloque desktop (>=1024px); el sistema fluido
   --u/cqi de mobile del artefacto no se porto en este pase.
═══════════════════════════════════════════════════ */
.equipo-section { overflow-x: clip; }
.equipo-inner {
  padding: 32px 16px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
}
@media (min-width: 1024px) {
  .equipo-inner { padding: 64px 48px; }
}

.equipo-split {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 48px;
}
@media (min-width: 1024px) {
  .equipo-split { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 64px; }
}
.equipo-left {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}
@media (min-width: 1024px) {
  .equipo-left { gap: 64px; width: 500px; flex-shrink: 0; }
}
.equipo-intro { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) {
  .equipo-intro { gap: 48px; }
}
.equipo-title {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.625rem, 9vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.equipo-title em { font-style: normal; color: var(--pink); }
/* El tachado se dibuja a mano (no text-decoration): la linea del
   navegador no acepta color propio. Calibrado para DM Serif Text a
   64px -- a otro tamano de fuente/familia se corre un poco, aceptable
   dado que este titulo vive en un rango fluido. */
.equipo-strike { position: relative; text-decoration: none; }
.equipo-strike::after {
  content: "";
  position: absolute;
  left: -0.03em; right: -0.03em;
  top: 0.788em;
  transform: translateY(-50%);
  height: 0.07em;
  border-radius: 0.035em;
  background: var(--pink);
  z-index: 1;
  pointer-events: none;
}
.equipo-text {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.equipo-text strong { font-weight: 700; }

/* --- EXPOSURE: reusa el mecanismo de .clients-band (marquee negro/
   color, mismo JS de calibracion) -- solo el gap interno cambia
   (64px en vez de 88px) y el contenedor pasa a 65px de alto fijo. --- */
.equipo-exposure { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.equipo-exposure-tag { display: flex; align-items: center; gap: 24px; width: 100%; height: 16px; }
.equipo-exposure-rotulo {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ink);
  white-space: nowrap;
}
.equipo-exposure-raya { flex: 1 0 0; min-width: 1px; height: 1px; background: var(--ink); }
/* .clients-band (reusada aca) es full-bleed por defecto (100vw + margen
   negativo) -- correcto para la banda de clientes bajo el hero, pero
   EXPOSURE tiene que quedarse contenida en la columna de 500px de
   equipo-left. Sin este reset se salia a lo ancho de toda la pantalla y
   tapaba el mazo de perfiles a la derecha -- eso era el desmaquetado. */
.equipo-exposure-band {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: 100px;
  padding: 0;
}
.equipo-exposure-band .clients-track,
.equipo-exposure-band .clients-group { gap: 24px; height: 100px; }
/* A diferencia de Clientes, Exposure NO lleva tarjeta con filo/radio
   (calcado del artefacto) -- mismo tamaño 260x100, imagen a inset:0 en
   vez de centrada con translate. */
.equipo-exposure-band .clients-logo { width: 260px; height: 100px; border: none; border-radius: 0; }
.equipo-exposure-band .clients-logo-img { left: 0; top: 0; transform: none; width: 100%; height: 100%; }
/* Nota del propio artefacto: el mobile de Exposure NO cambio en esta
   entrega -- se revierte aca al comportamiento previo (65px/var(--cw))
   en vez de heredar el nuevo tamaño mobile 182x70 de .clients-band. */
@media (max-width: 767px) {
  .equipo-exposure-band { height: 65px; }
  .equipo-exposure-band .clients-track,
  .equipo-exposure-band .clients-group { height: 65px; }
  .equipo-exposure-band .clients-logo { width: var(--cw); height: 65px; }
  .equipo-exposure-band .clients-logo-img { width: 100%; height: 100%; }
}
/* --- Mazo de perfiles (mismo motor de arrastre del artefacto, ver
   script al final del body) --- */
.equipo-deck { display: flex; flex-direction: column; gap: 24px; width: 100%; }
@media (min-width: 1024px) {
  .equipo-deck { width: 564px; flex-shrink: 0; }
}
.equipo-deck-stack {
  position: relative;
  width: 100%;
  height: 614px;
  perspective: 1200px;
}
.equipo-profile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 32px;
  border: 2px solid #e7e7e7;
  border-radius: 16px;
  background: var(--bg, #FFFFFF);
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: transform, opacity;
  cursor: grab;
  touch-action: pan-y;
}
.equipo-deck-stack.is-arrastrando .equipo-profile { cursor: grabbing; }
.equipo-profile img { pointer-events: none; -webkit-user-drag: none; }

.equipo-profile-top { display: flex; align-items: center; gap: 24px; }
@media (min-width: 1024px) {
  .equipo-profile-top { width: 500px; }
}
.equipo-profile-info { display: flex; flex-direction: column; gap: 32px; width: 250px; flex-shrink: 0; }
.equipo-profile-linkedin { display: block; width: 32px; height: 32px; color: var(--ink); }
.equipo-profile-linkedin svg { width: 100%; height: 100%; }
.equipo-profile-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.equipo-profile-roles { display: flex; flex-direction: column; gap: 12px; }
.equipo-profile-roles p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.equipo-profile-roles p::before { content: "| "; color: var(--pink); }
.equipo-profile-country { display: flex; gap: 12px; align-items: center; }
.equipo-profile-country .v2-flag { width: 27px; height: 18px; border-radius: 3px; }
.equipo-profile-country span { font-size: 16px; color: var(--ink); }
.equipo-profile-photo { width: 250px; height: 300px; flex-shrink: 0; border-radius: 16px; overflow: hidden; }
.equipo-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equipo-profile-bottom { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.equipo-profile-bio {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 108px;
}
.equipo-profile-bio strong { font-weight: 700; }
/* Mobile/tablet (<1024px) -- calcado 1:1 del artefacto (Figma 185:3421,
   base 390px): la tarjeta pasa a CSS Grid + display:contents en los 3
   wrappers (top/info/bottom) para que TODOS sus hijos (linkedin,
   nombre, roles, pais, foto, bio, cta) entren al mismo grid de
   .equipo-profile y se puedan colocar con grid-column/grid-row sin
   duplicar marcado -- mismo mecanismo que .hero-split-inner. Los
   roles pasan de columna (::before "| ") a fila con border-left
   (mismo look, otro mecanismo) porque ahora ocupan su propia fila a
   todo el ancho, debajo de nombre/pais/foto. Mismo --u fluido que
   hero/usos (contenedor con el mismo padding lateral, 16px). */
@media (max-width: 1023px) {
  .equipo-deck {
    container-type: inline-size;
    --u: clamp(0.7821px, 0.2793cqi, 2.6788px);
  }
  .equipo-deck-stack { height: calc(472 * var(--u)); }
  .equipo-profile {
    display: grid;
    grid-template-columns: 1fr calc(150 * var(--u));
    column-gap: calc(16 * var(--u));
    row-gap: calc(24 * var(--u));
    align-content: start;
    padding: calc(24 * var(--u)) calc(16 * var(--u));
    border-width: 1px;
    border-radius: calc(16 * var(--u));
    justify-content: normal;
    transform-origin: center top;
  }
  .equipo-profile-top, .equipo-profile-info, .equipo-profile-bottom { display: contents; }
  .equipo-profile-linkedin { grid-column: 1; grid-row: 1; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .equipo-profile-photo { grid-column: 2; grid-row: 1 / 4; width: calc(150 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(9 * var(--u)); }
  .equipo-profile-name { grid-column: 1; grid-row: 2; align-self: end; font-size: calc(24 * var(--u)); }
  .equipo-profile-country { grid-column: 1; grid-row: 3; align-self: start; gap: calc(8 * var(--u)); }
  .equipo-profile-country .v2-flag { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(2 * var(--u)); }
  .equipo-profile-country span { font-size: calc(14 * var(--u)); }
  .equipo-profile-roles { grid-column: 1 / -1; grid-row: 4; flex-direction: row; gap: calc(8 * var(--u)); }
  .equipo-profile-roles p {
    flex: 1 0 0;
    white-space: normal;
    font-size: calc(14 * var(--u));
    border-left: 1px solid var(--pink);
    padding-left: calc(8 * var(--u));
  }
  .equipo-profile-roles p::before { content: none; }
  .equipo-profile-bio { grid-column: 1 / -1; grid-row: 5; font-size: calc(14 * var(--u)); min-height: calc(126 * var(--u)); }
  .equipo-quote-signature { order: 0; }
}
.equipo-profile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 32px;
  background: var(--ink);
  border-radius: 100px;
  color: #FFFFFF;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  transition: background-color 200ms ease;
}
@media (max-width: 1023px) {
  .equipo-profile-cta { grid-column: 1 / -1; grid-row: 6; height: calc(40 * var(--u)); padding: 0 calc(22 * var(--u)); font-size: calc(14 * var(--u)); }
}
.equipo-profile-cta:hover { background: #01213F; }

.equipo-deck-controls { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 24px; }
.equipo-deck-arrow {
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer;
  transition: color 200ms ease;
}
.equipo-deck-arrow:hover { color: var(--pink); }
.equipo-deck-arrow svg { width: 100%; height: 100%; }
.equipo-deck-arrow--prev svg { transform: scaleX(-1); }
.equipo-deck-dots { display: flex; gap: 8px; align-items: center; height: 8px; }
.equipo-deck-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,9,19,0.2); cursor: pointer;
  transition: background-color 250ms ease;
}
.equipo-deck-dot:hover { background: rgba(0,9,19,0.45); }
.equipo-deck-dot[aria-selected="true"] { background: var(--pink); }

/* --- Cita (mismo lenguaje que .usos-cita, valores propios) --- */
.equipo-quote { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.equipo-quote-text {
  max-width: 889px;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.equipo-quote-text strong { font-weight: 700; }
.equipo-quote-signature { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 340px; order: -1; }
.equipo-quote-raya { flex: 1 0 0; height: 2px; background: var(--pink); }
.equipo-quote-logo { width: 124px; height: 20px; color: var(--ink); flex-shrink: 0; }

.equipo-metodo-titulo {
  text-align: center;
  width: 1200px;
  max-width: 100%;
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.equipo-metodo-titulo em { font-style: normal; color: var(--pink); }
@media (max-width: 1023px) {
  .equipo-metodo-titulo { font-size: clamp(2.1rem, 8vw, 4rem); }
}

.equipo-metodo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 1200px;
  max-width: 100%;
}
@media (min-width: 700px) {
  .equipo-metodo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .equipo-metodo-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
/* <1024px: calcado del artefacto (Figma 234:12512, "CRECER: de flip-
   card a lista horizontal estatica") -- se queda en 1 columna (se
   anula el 2x2 de 700px) y pasa a escala fluida --u, mismo mecanismo
   que .equipo-deck/.usos (contenedor con 16px de padding lateral). */
@media (max-width: 1023px) {
  .equipo-metodo-grid {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--u));
    width: 100%;
    container-type: inline-size;
    --u: clamp(0.7821px, 0.2793cqi, 2.6788px);
  }
}
/* Desktop: las 6 giran con el mismo mecanismo, dos caras -- la trasera
   (rediseño mas reciente del artefacto) ya no es solo texto plano:
   suma un titulo propio en serif y un CTA "HABLEMOS DE TU RETO", y
   pasa de fondo tinta a gris #e7e7e7 (mismo token que Banner/Footer).
   Mobile (ver media query mas abajo): acordeon -- mismo mecanismo de
   aria-expanded, sin rotateY, con max-height/opacity en vez de
   transform (Camilo alterno el mobile de fila-estatica a acordeon,
   otra vez, en esta entrega). */
.equipo-flip {
  position: relative;
  height: 420px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  perspective: 1200px;
}
@media (min-width: 1024px) {
  .equipo-flip { height: 527px; }
}
.equipo-flip-imagen { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0; }
.equipo-flip-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Agrupa titulo+detalles (.paso__cuerpo en el artefacto): en desktop es
   "contents" -- invisible en el arbol de caja, no cambia nada a la
   columna centrada de la cara frontal -- pero en mobile (ver media
   query mas abajo) se convierte en columna real, segundo item de la
   fila junto a la imagen. Mismo mecanismo que .usos-card-content. */
.equipo-flip-cuerpo { display: contents; }
.equipo-flip-cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  backface-visibility: hidden;
  transition: transform 550ms cubic-bezier(0.16,1,0.3,1);
  transition-delay: 0s;
}
@media (min-width: 1024px) {
  .equipo-flip-cara { gap: 40px; padding: 32px; }
}
.equipo-flip:hover .equipo-flip-cara { transition-delay: 120ms; }
/* Filo gris tenue (10% ink), no negro solido -- literal del artefacto
   (.paso{border:2px solid rgba(0,9,19,.1)}), mismo tratamiento que
   .usos-card (hermana visual de esta grid). */
.equipo-flip-cara--frente { border: 2px solid rgba(0, 9, 19, 0.1); background: var(--bg, #FFFFFF); }
.equipo-flip-cara--dorso {
  align-items: flex-start;
  gap: 32px;
  background: #e7e7e7;
  border: 2px solid #e7e7e7;
  transform: rotateY(180deg);
}
.equipo-flip[aria-expanded="true"] .equipo-flip-cara--frente { transform: rotateY(-180deg); }
.equipo-flip[aria-expanded="true"] .equipo-flip-cara--dorso { transform: rotateY(0deg); }
.equipo-flip-titulo {
  display: block;
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .equipo-flip-titulo { font-size: 36px; }
}
.equipo-flip-detalles {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--pink);
}
/* Flecha junto a "DETALLES": invisible en desktop (el volteo ya
   comunica la interaccion), aparece y rota 180deg en mobile (acordeon,
   ver media query). */
.equipo-flip-flecha { display: none; }
.equipo-flip-titulo-dorso {
  display: block;
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: left;
  width: 100%;
}
.equipo-flip-texto {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .equipo-flip-texto { font-size: 20px; }
}
.equipo-flip-texto strong { font-weight: 700; color: var(--pink); }
.equipo-flip-cta { height: 54px; padding: 0 32px; font-size: 18px; align-self: flex-start; }
.equipo-flip-cta svg { width: 22px; height: 22px; flex-shrink: 0; }
/* Mobile/tablet (<1024px): acordeon -- mismo boton/JS de aria-expanded
   (sin rotateY), el filo/fondo/padding pasan del par de caras al boton
   entero (en flujo normal, ya no absolute), y la trasera se revela con
   max-height/opacity/margin-top en vez de voltear. */
@media (max-width: 1023px) {
  .equipo-flip {
    height: auto;
    padding: calc(16 * var(--u));
    border: 2px solid rgba(0, 9, 19, 0.1);
    border-radius: calc(16 * var(--u));
    background: var(--bg, #FFFFFF);
    overflow: hidden;
    perspective: none;
  }
  .equipo-flip-cara {
    position: static;
    border-radius: 0;
    transition: max-height 350ms ease, opacity 250ms ease, margin-top 350ms ease;
  }
  .equipo-flip-cara--frente {
    flex-direction: row;
    align-items: center;
    gap: calc(16 * var(--u));
    padding: 0;
    border: 0;
    background: none;
  }
  .equipo-flip[aria-expanded="true"] .equipo-flip-cara--frente { transform: none; }
  .equipo-flip-cara--dorso {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: none;
  }
  .equipo-flip[aria-expanded="true"] .equipo-flip-cara--dorso {
    margin-top: calc(16 * var(--u));
    max-height: calc(320 * var(--u));
    opacity: 1;
  }
  /* El reverso mobile no repite el titulo (solo desktop, columna
     angosta) -- literal del artefacto. */
  .equipo-flip-titulo-dorso { display: none; }
  .equipo-flip-imagen { width: calc(120 * var(--u)); height: calc(120 * var(--u)); aspect-ratio: auto; }
  .equipo-flip-cuerpo {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    flex: 1;
    min-width: 0;
  }
  .equipo-flip-titulo { font-size: min(calc(24 * var(--u)), 36px); }
  .equipo-flip-detalles {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-size: min(calc(13 * var(--u)), 16px);
    white-space: nowrap;
  }
  .equipo-flip-flecha {
    display: inline-flex;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    flex-shrink: 0;
    transition: transform 300ms ease;
  }
  .equipo-flip[aria-expanded="true"] .equipo-flip-flecha { transform: rotate(180deg); }
  .equipo-flip-texto { font-size: calc(16 * var(--u)); }
  .equipo-flip-cta {
    width: 100%;
    justify-content: center;
    height: auto;
    padding: calc(10 * var(--u)) calc(16 * var(--u));
    font-size: calc(15 * var(--u));
    gap: calc(8 * var(--u));
    align-self: stretch;
  }
  .equipo-flip-cta svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
}

.equipo-cierre { display: flex; flex-direction: column; gap: 32px; align-items: center; justify-content: center; }
.equipo-cierre-cta { height: 64px; gap: 32px; font-size: 24px; }
.equipo-cierre-cta svg { width: 32px; height: 32px; flex-shrink: 0; }
/* Mobile/tablet (<1024px): a 24px fijo + white-space:nowrap heredado de
   .v2-cta, "HABLEMOS DE TU RETO" + icono no cabe en el ancho disponible
   y se desborda/recorta. Tamano fluido + wrap como salvaguarda. */
@media (max-width: 1023px) {
  .equipo-cierre-cta {
    height: auto;
    min-height: 56px;
    gap: 12px;
    padding: 16px 28px;
    font-size: clamp(0.85rem, 4.2vw, 1.1rem);
    white-space: normal;
    text-align: center;
  }
  .equipo-cierre-cta svg { width: 20px; height: 20px; }
}
.equipo-promesa {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}
.equipo-promesa-normal { font-weight: 400; }

/* ═══════════════════════════════════════════════════
   DIAG-CARD — CTA de cierre del articulo oscuro (.vm),
   rehecho: antes era el banner .s-pink-band/.pink-band-*
   (rosa/verde neon, de un pase de diseño anterior) que ya
   chocaba con el sistema claro del artefacto. Mismo copy,
   reconstruida como card clara flotando sobre el articulo
   oscuro -- mismo lenguaje que .quote-card-testimonial
   (Jorge, arriba): fondo #F6FBFF, filo --rule, radio 24,
   misma columna de 760px.
═══════════════════════════════════════════════════ */
.diag-card {
  background: #F6FBFF;
  border: 1px solid var(--rule, #86A4BA);
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0,9,19,0.04), 0 24px 64px rgba(0,9,19,0.08);
  /* Igual que .s-pink-band/.vm-close-callout: .diag-card es hermana de
     .vm-head (no vive adentro), asi que no hereda su gutter lateral
     clamp(20px,6vw,40px) -- sin esto, width:100% se estira al ancho
     completo del full-bleed .vm y la card toca los bordes del fondo
     oscuro. Se replica el mismo calculo que usa .s-pink-band. */
  width: calc(100% - 2 * clamp(20px,6vw,40px));
  max-width: 760px;
  margin: 0 auto clamp(44px, 9vw, 68px);
  padding: clamp(32px, 7vw, 48px) clamp(28px, 6.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.diag-card-mark { width: 124px; height: 20px; color: var(--ink); }
.diag-card-mark svg { width: 100%; height: 100%; display: block; }
.diag-card-headline {
  font-family: 'Roboto Serif', serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.diag-card-headline em { font-style: normal; color: var(--pink); }
.diag-card-list { display: flex; flex-direction: column; gap: 12px; }
.diag-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.86rem;
  color: var(--ink);
}
.diag-card-check {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--pink);
}
.diag-card-copy {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.diag-card-copy strong { font-weight: 700; }
.diag-card-cta { align-self: flex-start; gap: 10px; }
.diag-card-cta svg { width: 16px; height: 16px; flex-shrink: 0; }


/* ===== bloque original: <style id="case-overlay-styles"> (case-overlay-styles) ===== */

.case-overlay {
  /* z-index por encima del nav fijo (z-index:500) y de la barra de
     scroll-progress (z-index:9999, pero es solo un hilo de 3px -- no
     queremos que asome sobre el articulo de pantalla completa). */
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
  transition: opacity 380ms cubic-bezier(0.16,1,0.3,1), transform 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 380ms;
}
.case-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 380ms cubic-bezier(0.16,1,0.3,1), transform 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s;
}
html.case-overlay-lock, html.case-overlay-lock body { overflow: hidden; }
.case-overlay-scroll {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.case-overlay-close {
  position: fixed; top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); z-index: 10;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.94);
  border: 1px solid rgba(0,9,19,0.12); color: var(--navy); cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,9,19,0.16);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.case-overlay-close svg { width: 18px; height: 18px; display: block; }
.case-overlay-close:hover { background: var(--pink); border-color: var(--pink); color: #fff; transform: rotate(90deg); }
.case-overlay-close:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.case-overlay-inner {
  max-width: 720px; margin: 0 auto;
  padding: clamp(72px, 12vw, 108px) clamp(20px, 6vw, 32px) clamp(64px, 10vw, 96px);
}
.case-article-tag {
  display: inline-block; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mid); margin-bottom: clamp(12px, 2vw, 16px);
}
.case-article-title {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 2.6rem); line-height: 1.14; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 clamp(24px, 4vw, 34px);
}
.case-article-hero {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  margin-bottom: clamp(28px, 5vw, 40px); background: #86A4BA;
  position: relative;
}
.case-article-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-article-hero-16x9 { aspect-ratio: 16 / 9; }
.case-article-hero-video {
  cursor: pointer; background: #000;
  aspect-ratio: 16 / 9;
}
.case-article-hero-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-article-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(56px, 12vw, 72px); height: clamp(56px, 12vw, 72px); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.94); border: 1px solid rgba(0,9,19,0.12);
  color: var(--navy); cursor: pointer; box-shadow: 0 10px 28px rgba(0,9,19,0.26);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease,
    transform 200ms cubic-bezier(0.16,1,0.3,1), opacity 250ms ease;
}
.case-article-play-btn svg { width: 24px; height: 24px; margin-left: 3px; display: block; }
.case-article-play-btn:hover { background: var(--pink); border-color: var(--pink); color: #fff; transform: translate(-50%, -50%) scale(1.08); }
.case-article-play-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.case-article-hero-video.is-playing .case-article-play-btn { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.85); }
.case-article-body { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--ink); }
.case-article-body p {
  font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.62; margin: 0 0 clamp(18px, 3vw, 24px);
}
.case-article-quote {
  margin: clamp(28px, 5vw, 40px) 0; padding-left: clamp(16px, 3vw, 22px);
  border-left: 3px solid var(--pink);
  font-family: 'Inter', sans-serif; font-weight: 600; font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.35rem); line-height: 1.45; color: var(--ink);
}
.case-article-quote cite {
  display: block; margin-top: 10px; font-style: normal; font-weight: 500;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mid);
}
.case-article-photo { margin: clamp(24px, 4vw, 32px) 0; }
.case-article-photo-frame {
  width: 100%; border-radius: 12px; overflow: hidden; background: #86A4BA;
}
.case-article-photo-img { width: 100%; height: auto; display: block; }
.case-article-photo-caption {
  margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: 0.03em; color: var(--mid); line-height: 1.4;
}
.case-article-photo-placeholder {
  width: 100%; aspect-ratio: 3 / 2; border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(0,9,19,0.045) 0 10px, rgba(0,9,19,0.075) 10px 20px);
  border: 1px dashed #86A4BA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--mid); text-align: center; padding: 16px;
}
.case-article-photo-placeholder svg { width: 26px; height: 26px; opacity: 0.55; }
.case-article-photo-placeholder span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.03em;
}
.case-article-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: clamp(24px, 4vw, 32px) 0;
}
.case-article-gallery .case-article-photo-placeholder,
.case-article-gallery .case-article-photo-frame { aspect-ratio: 1 / 1; }
.case-article-gallery .case-article-photo-placeholder svg { width: 22px; height: 22px; }
.case-article-gallery .case-article-photo-placeholder span { font-size: 10px; }
.case-article-gallery .case-article-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-article-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 24px);
  margin-top: clamp(36px, 6vw, 52px); padding-top: clamp(28px, 5vw, 36px);
  border-top: 1px solid #86A4BA;
}
.case-article-stat-num {
  display: block; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 1.7rem); letter-spacing: -0.01em; color: var(--ink);
}
.case-article-stat-label {
  display: block; margin-top: 4px; font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 0.82rem; line-height: 1.3; color: var(--mid);
}
@media (max-width: 560px) {
  .case-article-stats { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-overlay, .case-overlay-close { transition: none !important; }
}
.case-overlay-inner .s-pink-band {
  width: auto; max-width: none; margin-left: 0; margin-right: 0;
  border-radius: 12px; overflow: hidden;
}


/* ===== bloque original: <style id="cookie-banner-styles"> (cookie-banner-styles) ===== */

/* Banner de cookies -- sirve tanto para Mexico (LFPDPPP, aviso claro)
   como España/UE (RGPD, consentimiento previo obligatorio para cookies
   no esenciales como GA). Por eso el consentimiento es opt-in real:
   GA4 arranca en "denied" (ver Consent Mode en el <head>) y solo pasa a
   "granted" si el usuario toca Aceptar aca -- nunca antes. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
  background: var(--navy);
  padding: clamp(18px, 3.5vw, 24px) clamp(20px, 5vw, 40px);
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.16,1,0.3,1);
}
.cookie-banner.is-open { transform: translateY(0); }
.cookie-banner-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 720px) {
  .cookie-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
.cookie-banner-text {
  font-family: 'Inter', sans-serif; font-size: 0.86rem; line-height: 1.55;
  color: rgba(255,255,255,0.75); max-width: 62ch;
}
.cookie-banner-link {
  font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: transform 160ms cubic-bezier(0.16,1,0.3,1), background 160ms ease, border-color 160ms ease;
}
.cookie-banner-btn:active { transform: scale(0.96); }
.cookie-banner-btn--accept { background: var(--pink); color: #fff; border: 1px solid var(--pink); }
.cookie-banner-btn--accept:hover { background: #ff2ba0; }
.cookie-banner-btn--reject { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.3); }
.cookie-banner-btn--reject:hover { border-color: rgba(255,255,255,0.6); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}


/* ===== bloque original: <style id="legal-modal-styles"> (legal-modal-styles) ===== */

.legal-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(0,9,19,0.6);
  /* 9600: por encima de .cookie-banner (9500) -- si el usuario abre este
     modal desde el link "politica de privacidad" DENTRO del banner de
     cookies (antes de Aceptar/Rechazar), el modal debe quedar encima,
     no tapado por el banner fijo en la parte de abajo. */
  z-index: 9600;
  opacity: 0;
  transition: opacity 250ms ease;
}
.legal-modal-scrim.is-open { opacity: 1; }
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9601;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 40px);
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity 250ms cubic-bezier(0.16,1,0.3,1), transform 250ms cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.legal-modal.is-open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.legal-modal-panel {
  background: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  max-width: 720px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0,9,19,0.4);
}
.legal-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 28px) 16px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.legal-modal-title {
  font-family: 'Roboto Serif', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: var(--ink);
  margin: 0;
}
.legal-modal-permalink {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mid);
  text-decoration: underline;
  margin-top: 6px;
}
.legal-modal-permalink:hover { color: var(--pink); }
.legal-modal-close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.legal-modal-close:hover { background: var(--rule); }
.legal-modal-close:active { transform: scale(0.94); }
.legal-modal-close svg { width: 16px; height: 16px; }
.legal-modal-body {
  overflow-y: auto;
  padding: 20px clamp(20px, 4vw, 28px) clamp(28px, 5vw, 36px);
  font-family: 'Inter', sans-serif;
  color: var(--mid);
  font-size: 0.92rem;
  line-height: 1.65;
}
.legal-modal-body h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 28px 0 10px;
}
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-body p { margin: 0 0 12px; }
.legal-modal-body ul { margin: 0 0 12px; padding-left: 20px; }
.legal-modal-body li { margin-bottom: 6px; }
.legal-modal-body a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .legal-modal-scrim, .legal-modal { transition: none; }
}

/* ═══════════════════════════════════════════════════
   MODAL DE CONTACTO — puerto literal del artefacto de
   Camilo (modal-contacto): selector Mexico/Espana con
   hora local, WhatsApp y videollamada segun la ciudad
   activa. Variables del Figma traducidas a los tokens
   reales del sitio (--font-serif -> DM Serif Text,
   --max-dark -> --ink, --pink-co -> --pink, etc).
═══════════════════════════════════════════════════ */
html.modal-abierto, html.modal-abierto body { overflow: hidden; }
.modal-contacto {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.modal-contacto[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease;
}
.modal-contacto__velo {
  position: absolute;
  inset: 0;
  background: rgba(0,9,19,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}
.modal-contacto__caja {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--bg, #FFFFFF);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0,9,19,0.28);
  transform: translateY(12px) scale(0.98);
  transition: transform 250ms ease;
  overflow: hidden;
}
.modal-contacto[aria-hidden="false"] .modal-contacto__caja { transform: translateY(0) scale(1); }
.modal-contacto__nav { display: none; }
.modal-contacto__logo { width: 110px; height: auto; color: var(--ink); flex-shrink: 0; }
.modal-contacto__cerrar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 200ms ease;
}
.modal-contacto__cerrar:hover { background: rgba(0,9,19,0.06); }
.modal-contacto__cerrar svg { width: 18px; height: 18px; }
.modal-contacto__cerrar--flotante { position: absolute; top: 20px; right: 20px; z-index: 1; }
.modal-contacto__cuerpo {
  overflow-y: auto;
  /* Sin esto, un flex item en columna no se deja encoger por debajo de
     la altura de su propio contenido (min-height:auto es el default) --
     con .modal-contacto__caja a height:100% fijo en mobile (ver media
     query abajo) y overflow:hidden, el cuerpo crecia mas alla del
     visor y el sobrante quedaba recortado sin forma de hacer scroll
     (ej. la segunda persona -- Camilo -- quedaba invisible). flex:1
     hace que ocupe el espacio disponible bajo .modal-contacto__nav, y
     min-height:0 permite que overflow-y:auto entre en juego dentro de
     ese espacio en vez de desbordarlo. */
  flex: 1;
  min-height: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.modal-contacto__encabezado { text-align: center; }
.modal-contacto__titulo {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.modal-contacto__titulo em { font-style: normal; color: var(--pink); }
.modal-contacto__subtitulo {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.modal-contacto__selector { display: flex; flex-direction: column; gap: 8px; }
.modal-contacto__pestanas {
  display: flex;
  align-items: flex-start;
  background: rgba(0,9,19,0.1);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
}
.modal-contacto__pestana {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.modal-contacto__pestana--activa { background: var(--bg, #FFFFFF); border-color: var(--ink); }
.modal-contacto__pestana:not(.modal-contacto__pestana--activa):hover { background: rgba(255,255,255,0.5); }
.modal-contacto__pestana-bandera { width: 16px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.modal-contacto__grupo-cta { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; width: 100%; }
.modal-contacto__contacto { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; }
.modal-contacto__contacto-foto { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg, #FFFFFF); }
.modal-contacto__contacto-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modal-contacto__contacto-info { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.modal-contacto__contacto-nombre { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; line-height: 1; margin: 0; }
.modal-contacto__contacto-hora { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 1; margin: 0; }
.modal-contacto__acciones { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.modal-contacto__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 200ms ease, background-color 200ms ease, color 200ms ease;
}
.modal-contacto__boton-izq { display: flex; align-items: center; gap: 16px; }
.modal-contacto__boton-icono { width: 20px; height: 20px; flex-shrink: 0; }
.modal-contacto__boton-flecha { width: 14px; height: 14px; flex-shrink: 0; }
.modal-contacto__boton--zoom { background: var(--pink); color: #FFFFFF; border: 2px solid var(--pink); }
.modal-contacto__boton--zoom:hover { background: #D4127C; border-color: #D4127C; }
.modal-contacto__boton--whatsapp { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.modal-contacto__boton--whatsapp:hover { background: var(--ink); color: #FFFFFF; }
.modal-contacto__tag { display: flex; align-items: center; gap: 24px; margin-top: auto; }
.modal-contacto__raya { flex: 1 0 0; height: 1px; background: rgba(0,9,19,0.1); }
.modal-contacto__etiqueta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .modal-contacto { padding: 0; }
  .modal-contacto__caja { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .modal-contacto__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule, #86A4BA);
    flex-shrink: 0;
  }
  .modal-contacto__cerrar--flotante { display: none; }
  .modal-contacto__cuerpo { padding: 32px 20px 40px; }
}