/* ============================================================================
   Artic — sitio comercial. Hoja principal.
   Tokens: ver artic-tokens.css (propuesta) y las notas de artic-plan-de-accion.md.
   Extraído de artic.ar: Poppins, #2EA8FF, #0476C7, #161616, #626262, #F7F7F7.
   Extraído de los SVG oficiales: #2EA8FF y #528AB1.
   Los usos semánticos, tamaños y espaciados son decisiones de diseño.
   ========================================================================== */

/* Poppins (SIL Open Font License 1.1) servida localmente. Ver assets/fonts/LICENSE.txt */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-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;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Marca. --brand y --brand-2 son los colores de los SVG oficiales. */
  --brand: #2EA8FF;            /* acentos, líneas, iconos. Nunca texto sobre blanco. */
  --brand-2: #528AB1;          /* segundo color del isologo. */
  --action: #0476C7;           /* CTA y enlaces. Blanco encima: 4,75:1 (AA). */
  --action-hover: #035F9F;     /* derivado; blanco encima: 6,68:1. */
  --action-on-surface: #035F9F;/* sobre --surface, 5,98:1 (AA). #0476C7 daría 4,25:1. */

  --ink: #192D40;              /* títulos. Sobre blanco: 14,09:1. */
  --text: #626262;             /* cuerpo. Sobre blanco: 6,10:1. */
  --white: #FFFFFF;
  --surface: #EDF3F8;
  --line: #DCE4EB;

  /* Bandas oscuras. */
  --deep: #0E2033;
  --deep-2: #172F46;
  --deep-line: #ffffff1f;
  --deep-text: #C1CFDD;        /* 8,64:1 sobre --deep-2. */
  --deep-eyebrow: #9CBEDA;     /* 7,05:1 sobre --deep-2. */

  /* Un degradado por rol. El de marca es solo decorativo: con texto blanco encima
     daría 2,57:1. Los otros dos están medidos para lo que llevan arriba. */
  --gradient: linear-gradient(135deg, #2EA8FF 0%, #0476C7 100%);            /* barras, brillos */
  --gradient-action: linear-gradient(135deg, #0476C7 0%, #024E86 100%);     /* blanco encima: 4,75 a 8,62:1 */
  --gradient-text: linear-gradient(135deg, #0480D6 0%, #023E6B 100%);       /* titulares sobre claro: 4,15 a 11,03:1 */
  --gradient-text-dark: linear-gradient(120deg, #7CC6FF 0%, #2EA8FF 100%);  /* titulares sobre oscuro: 5,33 a 8,94:1 */

  --radius-button: 999px;
  --radius-panel: 16px;
  --radius-media: 22px;
  --content: 1240px;
  --content-wide: 1560px;
  --header-h: 88px;

  --font-hero: clamp(2.5rem, 5vw, 4.5rem);
  --font-section: clamp(2.25rem, 3.9vw, 3.4rem);
  --space-section: clamp(64px, 8vw, 128px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* contiene los fondos decorativos sin permitir scroll lateral */
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
p { line-height: 1.65; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

:where(a, button, [tabindex], video, summary):focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 4px;
  border-radius: 6px;
}
.is-dark :where(a, button, video):focus-visible { outline-color: var(--brand); }

.container { width: min(var(--content), calc(100% - 96px)); margin-inline: auto; }
.container-wide { width: min(var(--content-wide), calc(100% - 64px)); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 14px 18px;
  border-radius: 10px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.icon {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =========================================================================
   CAPA DE MOVIMIENTO
   Todo lo de acá se apaga entero con prefers-reduced-motion (ver el final).
   Solo se anima `transform` y `opacity`.
   ========================================================================= */

/* Entrada al aparecer en pantalla. El escalonado se define con --d en el HTML. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out) var(--d, 0s), transform .8s var(--ease-out) var(--d, 0s);
}
.js [data-reveal="zoom"] { transform: translateY(34px) scale(.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Títulos que suben desde detrás de su propia línea.
   El salto de línea es estructural y no depende del script; la máscara sí. */
h1 .line { display: block; }
.js [data-reveal="line"] {
  opacity: 1; transform: none; display: block; overflow: hidden;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.js [data-reveal="line"] > span {
  display: block; transform: translateY(110%);
  transition: transform 1s var(--ease-out) var(--d, 0s);
}
.js [data-reveal="line"].is-in > span { transform: none; }

/* Trazo que se dibuja. --len lo calcula el script con getTotalLength(). */
.js [data-draw] path {
  stroke-dasharray: var(--len, 460); stroke-dashoffset: var(--len, 460);
  transition: stroke-dashoffset 1.1s var(--ease-out) var(--d, 0s);
}
.js [data-draw].is-in path { stroke-dashoffset: 0; }

/* Parallax: el script actualiza --py mientras se hace scroll. */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }

/* Los bloques wide entran creciendo hasta su tamaño real. */
[data-scale] { transform: scale(var(--s, 1)); transform-origin: 50% 50%; }

/* --- Utilidades ----------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .75rem; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--action);
  margin-bottom: 26px; line-height: 1.4;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--gradient); border-radius: 2px;
}
.is-dark .eyebrow { color: var(--deep-eyebrow); }

.button {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 26px; min-height: 52px;
  background: var(--action); color: var(--white);
  border: 1px solid var(--action); border-radius: var(--radius-button);
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .2s ease;
  box-shadow: 0 6px 20px -8px #0476c799;
}
.button::after {
  content: ''; position: absolute; inset: 0; background: var(--gradient-action);
  opacity: 0; transition: opacity .3s ease; z-index: -1;
}
.button > * { position: relative; z-index: 1; }
.button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px #0476c7b3; }
.button:hover::after { opacity: 1; }
.button:active { transform: translateY(-1px); }
.button .icon { transition: transform .3s var(--ease-out); }
.button:hover .icon { transform: translateX(4px); }
.button-lg { padding: 19px 32px; min-height: 60px; font-size: 1.0625rem; }
.button-small { min-height: 44px; padding: 11px 20px; font-size: .9375rem; gap: 10px; }

.text-link {
  display: inline-flex; gap: 12px; align-items: center; min-height: 24px;
  font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--action);
  transition: color .2s ease;
}
.text-link .icon { transition: transform .3s var(--ease-out); }
.text-link:hover { color: var(--action-hover); }
.text-link:hover .icon { transform: translateX(4px); }
.text-link-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #0476c714; color: var(--action); transition: background .25s ease, transform .3s var(--ease-out);
}
.text-link-dot .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; margin-left: 2px; }
.text-link:hover .text-link-dot { background: #0476c724; transform: scale(1.08); }
.text-link:hover .text-link-dot .icon { transform: none; }
.is-dark .text-link { color: var(--brand); }
.is-dark .text-link:hover { color: #7CC6FF; }

/* --- Barra de progreso y header ------------------------------------------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%; background: var(--gradient);
  transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--header-h);
  background: #ffffffb8;
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: min-height .35s var(--ease), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-stuck {
  min-height: 68px;
  background: #ffffffee;
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px #192d4059;
}
.nav-wrap {
  min-height: inherit; display: flex; align-items: center;
  justify-content: space-between; gap: 32px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { width: auto; height: 46px; transition: height .35s var(--ease); }
.site-header.is-stuck .logo img { height: 38px; }

.site-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 28px; }
.site-nav a {
  position: relative; font-size: .9375rem; font-weight: 500; padding: 10px 0;
  transition: color .2s ease;
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--gradient); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}
.site-nav a:hover { color: var(--action); }
.site-nav a:hover::after, .site-nav a.is-current::after { transform: scaleX(1); }
.site-nav a.is-current { color: var(--action); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 112px); }
/* El lienzo se difumina hacia abajo: sin esa máscara el recorte deja un borde duro. */
.hero-canvas {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 94%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 94%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob-a {
  width: 46vw; height: 46vw; max-width: 700px; max-height: 700px;
  top: -16%; right: -8%;
  background: radial-gradient(circle at 35% 35%, #2EA8FF66, #2EA8FF00 70%);
  animation: drift-a 22s var(--ease) infinite alternate;
}
.blob-b {
  width: 34vw; height: 34vw; max-width: 520px; max-height: 520px;
  top: 26%; left: -14%;
  background: radial-gradient(circle at 60% 40%, #528AB14d, #528AB100 70%);
  animation: drift-b 26s var(--ease) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(-6%, 6%, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(8%, -5%, 0) scale(1.08); } }
.hero-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, #dce4eb00, var(--line) 20%, var(--line) 80%, #dce4eb00);
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.18fr 1fr; gap: 52px; align-items: center;
}
.hero h1 { font-size: var(--font-hero); max-width: none; text-wrap: wrap; }
.hero h1 .accent {
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.underline { width: min(100%, 430px); height: auto; margin-top: -.14em; color: var(--brand); opacity: .8; }
.hero-description { font-size: 1.1875rem; color: var(--text); margin-top: 28px; max-width: 540px; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
.hero-note p { font-size: .8125rem; line-height: 1.6; color: var(--text); }
.note-line { width: 30px; height: 2px; background: var(--gradient); flex-shrink: 0; border-radius: 2px; }

/* Ilustración: refleja el menú real "¿Por dónde querés empezar?" del CMS. */
.hero-product { position: relative; min-width: 0; }
.product-frame {
  background: var(--white); border: 1px solid #E1E9F1; border-radius: var(--radius-panel);
  box-shadow: 0 40px 80px -40px #1c3e5f4d, 0 8px 24px -16px #1c3e5f33;
  overflow: hidden;
}
.product-bar {
  height: 54px; display: flex; align-items: center; gap: 15px;
  padding: 0 21px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfdff, #f5f9fc);
}
.product-bar img { height: 22px; width: auto; }
.product-breadcrumb { font-size: .75rem; color: var(--text); border-left: 1px solid var(--line); padding-left: 14px; }
.product-avatar {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--gradient-action); border-radius: 50%; font-size: .6875rem;
  margin-left: auto; color: var(--white); font-weight: 700;
}
.product-content { padding: 26px 24px 20px; }
.product-overline { display: flex; gap: 8px; align-items: center; font-size: .75rem; color: var(--text); }
.product-overline .icon { width: 16px; height: 16px; color: var(--action); }
.product-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-top: 16px; }
.product-lead { font-size: .8125rem; color: var(--text); margin-top: 10px; }

.creation-options { margin-top: 24px; display: grid; gap: 10px; }
.creation-option {
  border: 1px solid transparent; text-align: left; border-radius: 12px;
  display: flex; align-items: center; gap: 13px; padding: 16px 14px;
  min-width: 0; min-height: 76px; color: var(--ink);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.creation-option:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -12px #254e7759; }
.creation-option strong { font-size: .875rem; display: block; line-height: 1.3; }
.creation-option small { display: block; font-size: .75rem; margin-top: 4px; color: var(--text); line-height: 1.4; }
.option-icon { background: #ffffffcc; border-radius: 9px; padding: 8px; display: grid; place-items: center; }
.option-text { background: #EEF0FD; border-color: #DCE2FA; }
.option-text .option-icon { color: #6659A9; }
.option-url { background: #EDF5FA; border-color: #DCEAF3; }
.option-url .option-icon { color: var(--action); }
.option-arrow { width: 17px; height: 17px; margin-left: auto; color: var(--text); transition: transform .3s var(--ease-out); }
.creation-option:hover .option-arrow { transform: translateX(4px); color: var(--action); }
.creation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.creation-row .creation-option { padding: 15px 12px; min-height: 59px; gap: 9px; }
.creation-row .icon { width: 19px; height: 19px; }
.option-weather { background: #FAF6EE; border-color: #F0E8D9; color: #6B5623; }
.option-events { background: #EFF4FB; border-color: #DCE6F6; color: var(--action-hover); }
.manual-option {
  min-height: 41px; display: flex; align-items: center; justify-content: center;
  gap: 9px; margin-top: 2px; color: var(--text); font-size: .8125rem;
  transition: color .2s ease;
}
.manual-option:hover { color: var(--action); }
.manual-option .icon { width: 16px; height: 16px; }
.product-footer {
  border-top: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; gap: 6px; padding: 14px; color: var(--text); font-size: .75rem;
  background: #FAFCFE;
}
.product-footer .icon { width: 15px; height: 15px; color: var(--action); }

/* Fichas flotantes sobre la ilustración. */
.chip {
  position: absolute; display: flex; align-items: center; gap: 8px;
  background: #ffffffef; border: 1px solid #E1E9F1; border-radius: 999px;
  padding: 10px 16px; font-size: .75rem; font-weight: 500; color: var(--ink);
  box-shadow: 0 18px 40px -22px #1c3e5f66;
  backdrop-filter: blur(6px); white-space: nowrap;
}
.chip-steps { top: -20px; left: -34px; animation: float-a 7s ease-in-out infinite; }
.chip-apply { bottom: 34px; right: -42px; animation: float-b 9s ease-in-out infinite; }
.chip-apply .icon { width: 15px; height: 15px; color: #17A34A; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9D6E2; }
.chip-dot.is-on { background: var(--action); box-shadow: 0 0 0 3px #0476c726; }
.chip span:not(.chip-dot) { color: var(--text); }
.chip-dot.is-on + span { color: var(--ink); font-weight: 600; }
@keyframes float-a { 50% { transform: translateY(-9px); } }
@keyframes float-b { 50% { transform: translateY(8px); } }

/* --- Franja de origen ----------------------------------------------------- */
.trust-strip { border-bottom: 1px solid var(--line); background: var(--white); }
.trust-inner { display: flex; align-items: center; gap: 43px; padding-block: 34px; }
.trust-name { font-size: .875rem; line-height: 1.5; min-width: 123px; border-right: 1px solid var(--line); padding-right: 30px; }
.trust-name strong { white-space: nowrap; }
.trust-inner p { max-width: 640px; font-size: .9375rem; color: var(--text); line-height: 1.6; }
.trust-inner p strong { color: var(--ink); font-weight: 600; }
.trust-inner .text-link { margin-left: auto; flex-shrink: 0; font-size: .8125rem; }

/* --- Plataforma ----------------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section h2, .ai-section h2 { font-size: var(--font-section); font-weight: 600; line-height: 1.08; }
.section h2 span { color: var(--text); }
.heading-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: end; }
.heading-grid > p { color: var(--text); max-width: 520px; font-size: 1.0625rem; }

.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.platform-item {
  padding: 34px 30px 32px; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s ease;
}
.platform-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -34px #1c3e5f59;
  border-color: #C8DCEC;
}
.feature-icon {
  width: 44px; height: 44px; padding: 10px; border-radius: 13px; margin-bottom: 22px;
  color: var(--action); background: #0476c714; box-sizing: content-box;
}
.platform-item h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 12px; }
.platform-item p { color: var(--text); }
.platform-item ul { margin-top: 22px; padding: 0; list-style: none; font-size: .875rem; color: var(--text); line-height: 1.6; }
.platform-item li { margin-top: 10px; display: flex; gap: 11px; align-items: baseline; }
.platform-item li::before { content: '+'; color: var(--action); font-size: 1rem; font-weight: 600; }

/* --- IA: banda oscura con dos bloques wide -------------------------------- */
.ai-section {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--white);
  padding-block: var(--space-section);
}
.ai-section h2, .ai-section h3 { color: var(--white); }
.ai-glow { position: absolute; inset: 0; pointer-events: none; }
.ai-glow span {
  position: absolute; top: -18%; left: 50%; translate: -50% 0;
  width: 90vw; max-width: 1300px; aspect-ratio: 2 / 1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #2EA8FF33, #2ea8ff00 62%);
  filter: blur(30px);
}
.ai-intro { position: relative; }
.video-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; }
.video-intro h2 span {
  background: var(--gradient-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.video-intro p { color: var(--deep-text); font-size: 1.0625rem; }
.video-intro p + p { margin-top: 14px; }

.film { position: relative; margin-top: clamp(56px, 7vw, 96px); }
.film-head { max-width: 720px; margin-bottom: 30px; }
.film-index {
  font-size: .75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brand); margin-bottom: 14px;
}
.film-head h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; }
.film-lead { margin-top: 12px; color: var(--deep-text); font-size: 1.0625rem; }
.film-alt-layout .film-head { margin-left: auto; text-align: right; }
.film-alt-layout .film-index { color: #7FB0D0; } /* #528AB1 daría 4,42:1 sobre la banda */

/* --ar lo fija cada bloque con la proporción real del archivo. */
.video-stage {
  position: relative; aspect-ratio: var(--ar, 2 / 1); overflow: hidden;
  border: 1px solid #ffffff26; background: #0A1826;
  border-radius: var(--radius-media);
  box-shadow: 0 60px 120px -50px #000000b3, 0 0 0 1px #ffffff0d inset;
}
.video-stage video { width: 100%; height: 100%; object-fit: contain; background: #0A1826; }

.video-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0;
  background: transparent; display: grid; place-items: center; color: var(--white);
}
.video-cover[hidden] { display: none; }
.video-cover::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0a182600 0%, #0a182626 50%, #0a1826b8 80%, #0a1826d1 100%);
  transition: background .3s ease;
}
.video-cover:hover::before { background: linear-gradient(180deg, #0a182626 0%, #0a18264d 50%, #0a1826cc 80%, #0a1826e6 100%); }
.cover-play {
  position: relative; width: 84px; height: 84px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gradient-action); box-shadow: 0 12px 40px #0476c766;
  transition: transform .35s var(--ease-out);
}
.cover-play::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid #ffffff59; animation: pulse-ring 2.6s var(--ease-out) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.cover-play svg { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 5px; }
.video-cover:hover .cover-play { transform: scale(1.08); }
.cover-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 30px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; text-align: left;
}
.cover-meta strong { font-size: 1.125rem; font-weight: 600; }
.cover-meta span { font-size: .8125rem; color: #D6E5F2; }

.video-status { margin-top: 16px; font-size: .9375rem; color: var(--white); }
.video-status[hidden] { display: none; }

/* Los videos no tienen pista de audio: el recorrido se describe también en texto. */
.film-foot { margin-top: 38px; }
.video-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 30px; padding: 0; list-style: none; counter-reset: paso;
}
.video-steps > li {
  counter-increment: paso; padding-top: 18px; border-top: 1px solid var(--deep-line);
  font-size: .9375rem; color: var(--deep-text); line-height: 1.6;
}
.video-steps > li::before {
  content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 10px;
  font-size: .75rem; font-weight: 700; color: var(--brand); letter-spacing: 1px;
}
.film-alt { margin-top: 30px; display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; }
.film-alt a {
  color: var(--brand); text-decoration: underline; text-underline-offset: 4px;
  font-size: .875rem; display: inline-flex; align-items: center; min-height: 24px;
}
.film-alt a:hover { color: #7CC6FF; }
.film-source { font-size: .8125rem; color: #9CB2C6; max-width: 620px; }

/* --- Otras herramientas --------------------------------------------------- */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tools-grid article {
  padding: 32px 28px; border-radius: 20px; background: var(--surface);
  transition: transform .4s var(--ease-out), background .4s ease;
}
.tools-grid article:hover { transform: translateY(-5px); background: #E4EEF7; }
.tools-grid .feature-icon { background: #ffffffcc; }
.tools-grid h3 { font-size: 1.125rem; margin-bottom: 10px; }
.tools-grid p { font-size: .9375rem; color: var(--text); }

/* --- Origen (bloque oscuro) ----------------------------------------------- */
.origin-section {
  position: relative; overflow: hidden;
  padding-block: var(--space-section) 52px; background: var(--deep-2); color: var(--white);
}
.origin-glow { position: absolute; inset: 0; pointer-events: none; }
.origin-glow span {
  position: absolute; right: -10%; top: 10%;
  width: 46vw; max-width: 680px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2EA8FF2e, #2ea8ff00 65%); filter: blur(40px);
}
.origin-section .container { position: relative; }
.origin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-bottom: 60px; }
.origin-grid h2 { font-size: clamp(3rem, 6vw, 5.2rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; }
.origin-grid h2 span {
  background: var(--gradient-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.origin-lead { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; letter-spacing: -.02em; color: var(--white); margin-bottom: 25px; }
.origin-copy > p:not(.origin-lead) { color: var(--deep-text); line-height: 1.75; }
.origin-copy > p + p { margin-top: 19px; }
.evolution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.evolution-grid article { padding-top: 26px; border-top: 1px solid var(--deep-line); }
.evolution-grid article > span { font-size: .75rem; color: var(--brand); font-weight: 700; letter-spacing: 1.5px; }
.evolution-grid h3 { font-size: 1.25rem; font-weight: 500; margin-top: 14px; }
.evolution-grid p { font-size: .9375rem; color: var(--deep-text); margin-top: 12px; line-height: 1.6; max-width: 300px; }
.origin-bottom {
  display: flex; justify-content: space-between; gap: 30px; align-items: center;
  border-top: 1px solid var(--deep-line); margin-top: 56px; padding-top: 32px;
}
.origin-bottom p { font-size: 1.1875rem; color: var(--deep-text); line-height: 1.55; }
.origin-bottom p strong { font-weight: 500; color: var(--white); }
.origin-bottom > span { font-size: .8125rem; color: var(--deep-eyebrow); }

/* --- El creador: banda a todo el ancho ------------------------------------
   El ancho se deriva del alto de viewport, así el 16:9 queda exacto en cualquier
   pantalla y el video nunca pasa el alto visible. A 1440x900 llega a borde completo;
   en pantallas más anchas deja un margen lateral en lugar de crecer a lo alto. */
.founder {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--white);
  padding-block: var(--space-section) clamp(36px, 4vw, 56px);
}
.founder-head { margin-bottom: clamp(30px, 4vw, 48px); }
.founder h2 { max-width: 20ch; }
.founder-lead { max-width: 720px; }
.founder h2 { font-size: var(--font-section); font-weight: 600; line-height: 1.08; color: var(--white); }
.founder h2 span {
  background: var(--gradient-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.founder-lead { color: var(--deep-text); font-size: 1.0625rem; margin-top: 18px; }

.founder-bleed { width: 100%; display: flex; justify-content: center; }
.founder-stage {
  position: relative; width: min(100%, calc(92vh * 16 / 9));
  aspect-ratio: 16 / 9; overflow: hidden; background: #000;
}
.founder-poster { width: 100%; height: 100%; object-fit: cover; }
.founder-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.founder-foot { margin-top: 26px; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.founder-note { font-size: .8125rem; color: #9CB2C6; }
/* Sin rótulo encima, el velo puede ser parejo y liviano: solo destaca el botón. */
.founder-stage .video-cover::before {
  background: linear-gradient(180deg, #0a18262e 0%, #0a18261f 45%, #0a182661 100%);
}
.founder-stage .video-cover:hover::before {
  background: linear-gradient(180deg, #0a18264d 0%, #0a18263d 45%, #0a18267a 100%);
}

/* --- Solicitar una demo --------------------------------------------------- */
.demo-section { padding-block: var(--space-section); }
.demo-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
  padding: clamp(32px, 4.4vw, 64px);
  border-radius: 28px;
  background: linear-gradient(150deg, #F4F9FD 0%, #E7F1F9 100%);
  border: 1px solid #DDE9F3;
}
.demo-glow {
  position: absolute; right: -12%; top: -55%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2EA8FF33, #2ea8ff00 65%); filter: blur(30px);
  pointer-events: none;
}
.demo-card > :not(.demo-glow) { position: relative; }
.demo-card .eyebrow { color: var(--action-on-surface); } /* #0476C7 daría 4,15:1 sobre la tarjeta */
.demo-section h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.12; }
.demo-section h2 span {
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo-lead { color: var(--text); margin-top: 20px; max-width: 400px; }

.demo-steps { list-style: none; padding: 0; margin-top: 30px; display: grid; gap: 14px; }
.demo-steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: baseline;
  font-size: .9375rem; color: var(--text); line-height: 1.55;
}
.demo-step-n { font-size: .75rem; font-weight: 700; letter-spacing: .5px; color: var(--action-on-surface); }
.demo-note {
  display: flex; align-items: center; gap: 10px; margin-top: 26px;
  padding-top: 22px; border-top: 1px solid #D3E1EE;
  font-size: .8125rem; color: var(--text);
}
.demo-note .icon { width: 16px; height: 16px; color: #17803D; }

/* --- El formulario -------------------------------------------------------- */
.demo-form-wrap {
  background: var(--white); border: 1px solid #DCE7F1; border-radius: 20px;
  padding: clamp(24px, 2.6vw, 34px);
  box-shadow: 0 30px 60px -40px #1c3e5f4d;
}
.form-titulo { font-size: 1.1875rem; font-weight: 600; color: var(--ink); }
.form-bajada { font-size: .875rem; color: var(--text); margin-top: 8px; margin-bottom: 24px; }

/* Selector de intención. Son radios: la elección viaja con el envío como `motivo`
   y el teclado ya los recorre con flechas, sin ARIA agregado. */
.intent { border: 0; padding: 0; margin: 0 0 22px; }
.intent legend { font-size: .8125rem; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 10px; }
.intent-opciones {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 5px; background: var(--surface); border-radius: 12px;
}
.intent-opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.intent-opciones label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 8px 10px; border-radius: 9px;
  font-size: .875rem; font-weight: 500; color: var(--text); cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.intent-opciones label:hover { color: var(--ink); }
.intent-opciones input:checked + label {
  background: var(--white); color: var(--ink); font-weight: 600;
  box-shadow: 0 2px 8px #192d401f;
}
.intent-opciones input:focus-visible + label { outline: 3px solid var(--action); outline-offset: 2px; }
[data-modo][hidden] { display: none; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.opcional { font-weight: 400; color: var(--text); }

.field input, .field select, .field textarea {
  font: inherit; font-size: .9375rem; color: var(--ink);
  width: 100%; padding: 12px 14px; min-height: 46px;
  background: #FBFDFE; border: 1px solid #7C93A9; border-radius: 10px; /* 3,12:1: el borde identifica el campo */
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425466' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}
.field ::placeholder { color: #667784; } /* 4,54:1 */
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--action); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; background: var(--white);
  border-color: var(--action); box-shadow: 0 0 0 3px #0476c733;
}
.field[data-invalido] input, .field[data-invalido] select, .field[data-invalido] textarea { border-color: #C0392B; }
.field[data-invalido] input:focus-visible { box-shadow: 0 0 0 3px #c0392b33; }
.field-error { font-size: .8125rem; color: #A5291B; } /* 6,3:1 sobre blanco */
.field-error[hidden] { display: none; }
.field-help { font-size: .75rem; color: var(--text); line-height: 1.5; }

/* Trampa para robots: fuera de pantalla, sin display:none para que la vean. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit { width: 100%; margin-top: 8px; }
.form-submit[disabled] { opacity: .7; cursor: progress; transform: none; }
.form-estado { margin-top: 14px; font-size: .875rem; color: #A5291B; }
.form-estado[hidden] { display: none; }
.form-legal { margin-top: 16px; font-size: .75rem; color: var(--text); line-height: 1.55; }
.form-legal a { color: var(--action-on-surface); text-decoration: underline; text-underline-offset: 3px; }

.form-listo { text-align: center; padding: 12px 4px 6px; }
.form-listo[hidden] { display: none; }
.form-listo-icono {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; background: #E7F6EC; color: #17803D;
}
.form-listo-icono .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.form-listo-titulo { font-size: 1.1875rem; font-weight: 600; color: var(--ink); }
.form-listo-texto { font-size: .9375rem; color: var(--text); margin-top: 10px; line-height: 1.6; }
.form-listo-texto a { color: var(--action-on-surface); text-decoration: underline; text-underline-offset: 3px; }
.form-aviso {
  margin-top: 20px; padding: 12px 14px; border-radius: 10px; text-align: left;
  background: #FFF7E6; border: 1px solid #F0DFB8; color: #6B5000;
  font-size: .8125rem; line-height: 1.55;
}
.form-aviso[hidden] { display: none; }

.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--white) 0%, #F6FAFD 100%);
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 56px;
  padding-block: clamp(44px, 5vw, 68px) clamp(36px, 4vw, 52px);
}
.footer-logo { display: inline-flex; }
.footer-brand img { height: 44px; width: auto; }
.footer-brand p { margin-top: 20px; font-size: .9375rem; color: var(--text); max-width: 310px; }
.footer-brand .button { margin-top: 26px; }

.footer-title {
  font-size: .75rem; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink); margin-bottom: 20px;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: .9375rem; color: var(--text); transition: color .2s ease;
}
.footer-col a:hover { color: var(--action); }

.footer-bottom { background: var(--deep); padding-block: 26px; }
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.footer-bottom small { font-size: .8125rem; color: #9CB2C6; } /* 7,54:1 sobre la banda */

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .container { width: calc(100% - 64px); }
  .container-wide { width: calc(100% - 48px); }
  .hero-inner { gap: 34px; grid-template-columns: 1.04fr 1fr; }
  .hero-description { font-size: 1.0625rem; }
  .site-nav { gap: 22px; margin-right: 10px; }
  .site-nav a { font-size: .875rem; }
  .trust-inner { gap: 25px; }
  .trust-inner > .text-link { display: none; }
  .heading-grid, .video-intro { gap: 40px; }
  .origin-grid { gap: 60px; }
  .demo-card { gap: 40px; }
  .platform-item { padding: 28px 24px; }
  .platform-item h3 { font-size: 1.125rem; }
  .creation-option { padding-inline: 12px; gap: 10px; }
  .chip-steps { left: -10px; }
  .chip-apply { right: -14px; }
}

@media (max-width: 900px) {
  :root { --header-h: 74px; }
  .container { width: calc(100% - 48px); }
  .nav-wrap { gap: 18px; }
  .site-nav { gap: 18px; margin: 0 auto; }
  .site-nav a { font-size: .8125rem; }
  .site-nav a:nth-child(3) { display: none; }
  .logo img, .site-header.is-stuck .logo img { height: 38px; }

  .hero { padding-block: 44px 56px; }
  .hero-inner { grid-template-columns: 1fr; gap: 52px; }
  .hero-copy { max-width: 640px; }
  .hero-description { font-size: 1.125rem; max-width: 610px; }
  .hero-product { max-width: 560px; width: 100%; justify-self: center; }
  .product-content { padding: 24px 22px 18px; }
  .product-title { font-size: 1.7rem; }
  .product-title br { display: none; }
  .creation-option strong { font-size: .9375rem; }
  .creation-option small { font-size: .8125rem; }
  .creation-row .creation-option { gap: 12px; padding: 17px; }

  .heading-grid { gap: 24px; grid-template-columns: 1fr; align-items: start; }
  .heading-grid > p { max-width: 660px; }
  .platform-grid, .tools-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .platform-item p { max-width: none; }

  .video-intro { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .film-alt-layout .film-head { margin-left: 0; text-align: left; }
  .film-foot { margin-top: 30px; }
  .video-steps { grid-template-columns: 1fr 1fr; gap: 22px; }

  .origin-grid { gap: 36px; grid-template-columns: 1fr 1.1fr; padding-bottom: 44px; }
  .evolution-grid { gap: 26px; }
  .demo-card { grid-template-columns: 1fr; gap: 32px; }
  .demo-lead { max-width: 520px; }
  .founder-head { margin-bottom: 26px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 420px; }
}

@media (max-width: 620px) {
  :root { --header-h: 66px; --radius-media: 16px; }
  .container { width: calc(100% - 36px); }
  .container-wide { width: calc(100% - 24px); }
  .site-nav { display: none; }
  .logo img, .site-header.is-stuck .logo img { height: 34px; }
  .button-small { font-size: .8125rem; min-height: 42px; padding: 10px 16px; }

  .hero { padding-block: 34px 48px; }
  .eyebrow { letter-spacing: 1.4px; margin-bottom: 20px; }
  .eyebrow::before { width: 18px; }
  .hero h1 { font-size: clamp(2.25rem, 9.6vw, 3rem); }
  .underline { margin-top: -.14em; }
  .hero-description { font-size: 1rem; margin-top: 22px; }
  .hero-actions { gap: 18px; margin-top: 28px; }
  .button-lg { padding: 16px 24px; min-height: 54px; font-size: 1rem; }
  .hero-note { margin-top: 32px; }
  .chip { display: none; } /* a este ancho se superponen con la tarjeta */
  .product-content { padding: 20px 16px 14px; }
  .product-title { font-size: 1.55rem; }
  .creation-options { margin-top: 18px; gap: 9px; }
  .creation-option { min-height: 70px; padding: 12px; gap: 10px; }
  .creation-option strong { font-size: .875rem; }
  .creation-row .creation-option { padding: 12px 9px; gap: 7px; min-height: 57px; }
  .creation-row .creation-option strong { font-size: .8125rem; }
  .creation-row .icon { width: 17px; height: 17px; }

  .trust-inner { padding-block: 26px; display: block; }
  .trust-name { display: block; border-right: 0; font-size: .8125rem; padding: 0; margin-bottom: 12px; }
  .trust-name br { display: none; }
  .trust-inner p { font-size: .875rem; }

  .platform-item, .tools-grid article { padding: 26px 22px; }
  .feature-icon { width: 38px; height: 38px; padding: 9px; margin-bottom: 18px; }

  .film { margin-top: 48px; }
  .film-head { margin-bottom: 22px; }
  .cover-play { width: 60px; height: 60px; }
  .cover-play svg { width: 22px; height: 22px; }
  .cover-meta { padding: 16px 18px; gap: 8px; }
  .cover-meta strong { font-size: .9375rem; }
  .video-steps { grid-template-columns: 1fr; gap: 18px; }
  .video-steps > li { padding-top: 14px; }

  .origin-grid { grid-template-columns: 1fr; gap: 26px; }
  .origin-grid h2 br:nth-of-type(2) { display: none; }
  .origin-grid h2 span { display: block; }
  .origin-lead br { display: none; }
  .evolution-grid { grid-template-columns: 1fr; gap: 0; }
  .evolution-grid article { padding-block: 24px 0; }
  .origin-bottom { display: block; margin-top: 40px; padding-top: 28px; }
  .origin-bottom > span { display: block; margin-top: 18px; }

  .demo-card { padding: 24px 18px 28px; border-radius: 20px; gap: 28px; }
  .demo-form-wrap { padding: 20px 16px 22px; border-radius: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  /* En una columna cada opción entra en una línea; en dos se parten en tres. */
  .intent-opciones { grid-template-columns: 1fr; }
  .intent-opciones label { min-height: 46px; justify-content: flex-start; text-align: left; padding-inline: 16px; }
  .demo-steps { margin-top: 24px; }
  .footer-top { gap: 36px 20px; }
  .footer-brand img { height: 38px; }
  .footer-brand p { margin-top: 16px; font-size: .875rem; }
  .footer-brand .button { margin-top: 20px; width: 100%; }
  .footer-title { margin-bottom: 14px; }
  .footer-col a { font-size: .875rem; min-height: 36px; }
  .footer-bottom { padding-block: 24px; }
}

/* Objetivo mínimo de 24 px para los enlaces que no están dentro de un párrafo
   (WCAG 2.2, 2.5.8). Los enlaces en línea dentro de un texto quedan exentos. */
.text-link, .footer-col a, .film-alt a, .manual-option { min-height: 24px; }

/* --- Movimiento reducido --------------------------------------------------
   Quien lo pida en su sistema ve la misma página, quieta. El script además no
   registra los listeners de scroll (ver assets/js/artic.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], [data-reveal].is-in { opacity: 1 !important; transform: none !important; }
  [data-reveal="line"] > span { transform: none !important; }
  [data-draw] path { stroke-dashoffset: 0 !important; }
  [data-parallax] { transform: none !important; }
  [data-scale] { transform: none !important; }
  .cover-play::before { display: none; }
}

/* --- Premio: tarjeta blanca sobre la banda oscura -------------------------
   El lockup full color de Google está hecho para fondos claros, así que la
   tarjeta es blanca: además de cumplir con eso, leerlo como una placa refuerza
   el sentido de galardón sin recurrir a una cinta diagonal. */
.premio {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  width: 100%; max-width: 720px;
  margin-top: 34px; padding: 24px 28px;
  background: var(--white); border: 1px solid #F2E3C6; border-radius: 16px;
  box-shadow: 0 26px 60px -34px #00000099, 0 0 0 6px #f59e0b17;
}
.premio::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, #F59E0B 0%, #D97706 55%, #B45309 100%);
}
.premio-sello {
  display: flex; align-items: center; gap: 9px;
  font-size: .6875rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #B45309; /* 5,02:1 sobre blanco */
}
.premio-sello .icon { width: 19px; height: 19px; color: #D97706; stroke-width: 1.9; } /* 3,19:1, es gráfico */
.premio-titulo { font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin-top: 9px; line-height: 1.3; }
.premio-detalle { font-size: .875rem; color: var(--text); margin-top: 5px; }
.premio-marca { padding-left: 30px; border-left: 1px solid var(--line); }
.premio-marca img { width: auto; height: 40px; }

@media (max-width: 720px) {
  .premio {
    grid-template-columns: 1fr; gap: 20px; width: 100%;
    padding: 22px 20px;
  }
  .premio-marca { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--line); }
  .premio-marca img { height: 34px; }
  .premio-titulo { font-size: 1rem; }
}

/* --- Prueba comercial: cinta de logos ------------------------------------- */
.clients-section { padding-block: clamp(44px, 5vw, 64px) clamp(28px, 3vw, 40px); }
.clients-section h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--ink); margin-top: 4px; }

.marquee {
  position: relative; overflow: hidden; margin-top: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: desfile 70s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex; align-items: center; gap: 56px;
  margin: 0; padding: 0 28px; list-style: none;
}
.marquee-group li { display: flex; align-items: center; }
.marquee-group img {
  width: auto; height: 52px; max-width: 210px; object-fit: contain;
  filter: grayscale(1); opacity: .6;
  transition: filter .35s ease, opacity .35s ease;
}
.marquee-group li:hover img { filter: none; opacity: 1; }
/* La pista lleva dos copias: recorrer una es exactamente medio track. */
@keyframes desfile { to { transform: translateX(-50%); } }

/* --- Equipo, en segundo plano --------------------------------------------- */
.team-row {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 52px; margin-block: 32px 44px;
  padding-top: 28px; border-top: 1px solid var(--deep-line);
}
.team-row li { display: flex; align-items: flex-start; gap: 16px; }
.team-row img {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover; object-position: center 22%;
  border: 1px solid #ffffff2e;
}
.team-nombre { font-size: .9375rem; font-weight: 600; color: var(--white); }
.team-nombre span {
  display: block; margin-top: 3px;
  font-size: .6875rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--deep-eyebrow);
}
.team-bio { font-size: .8125rem; color: var(--deep-text); line-height: 1.6; margin-top: 8px; }

.institutional-close {
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--deep-line);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

/* --- Pertenencia institucional en el pie ---------------------------------- */
.grupo-rotonda { display: inline-flex; align-items: center; gap: 12px; }
.grupo-rotonda-texto { font-size: .8125rem; color: var(--text); transition: color .2s ease; }
.grupo-rotonda:hover .grupo-rotonda-texto { color: var(--action); }
/* El lockup oficial es blanco y la banda del pie ya es oscura: va directo. */
.grupo-rotonda { display: inline-flex; align-items: center; opacity: .92; transition: opacity .25s ease; }
.grupo-rotonda:hover { opacity: 1; }
.grupo-rotonda img { display: block; width: 112px; height: auto; }

.form-estado.is-info { color: var(--text); }

@media (max-width: 620px) {
  .marquee-group { gap: 44px; padding: 0 20px; }
  .marquee-group img { height: 40px; max-width: 160px; }
  .team-row { grid-template-columns: 1fr; gap: 22px; margin-block: 26px 36px; }
  .team-row img { width: 56px; height: 56px; }
  /* A este ancho el logo y el copyright se aprietan: van uno debajo del otro y centrados. */
  .footer-bottom-inner { flex-direction: column-reverse; align-items: center; gap: 18px; text-align: center; }
}

/* Con movimiento reducido la cinta se detiene: los logos se acomodan en filas
   para que no quede ninguno fuera del recorte. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .marquee-track { animation: none !important; width: 100%; flex-wrap: wrap; justify-content: center; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee-group { flex-wrap: wrap; justify-content: center; gap: 26px 40px; padding: 0; }
  .marquee-group img { filter: none; opacity: .75; }
}

/* --- Páginas legales ------------------------------------------------------ */
.legal { padding-block: clamp(44px, 6vw, 84px) clamp(56px, 7vw, 96px); }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.12; }
.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.25;
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 28px; }
.legal p { color: var(--text); margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 22px; color: var(--text); }
.legal li { margin-top: 8px; line-height: 1.65; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--action-hover); }
.legal-fecha { font-size: .875rem; color: var(--text); margin-top: 12px; }

/* Se quita cuando el texto esté revisado. Mismo criterio que la vista previa del
   formulario: es preferible un aviso visible a publicar algo incompleto en silencio. */
.legal-borrador {
  margin-top: 26px; padding: 16px 18px; border-radius: 12px;
  background: #FFF7E6; border: 1px solid #F0DFB8; color: #6B5000; /* 7,10:1 */
  font-size: .9375rem; line-height: 1.6;
}
.legal-borrador strong { color: #6B5000; }
.legal-completar {
  background: #FFE9A8; color: #5C4400; /* 8,0:1 */
  padding: 2px 7px; border-radius: 5px; font-weight: 600; font-size: .9375rem;
}