/*! Asamblea.cl · Design System · kit web 1.4.1 · GENERADO desde packages/tokens y packages/web/src (no editar a mano).
    Uso: <link rel="stylesheet" href="asamblea-ds-web.1.4.1.css"> y <body class="ads">. Las fuentes se cargan desde ./fonts/. */
:root {
  --ads-navy-50: 231 236 242;
  --ads-navy-100: 223 230 239;
  --ads-navy-300: 157 176 201;
  --ads-navy-400: 142 162 189;
  --ads-navy-600: 111 131 160;
  --ads-navy-700: 63 90 120;
  --ads-navy-800: 34 59 87;
  --ads-navy-850: 26 48 80;
  --ads-navy-900: 15 42 71;
  --ads-navy-950: 20 37 61;
  --ads-navy-1000: 10 25 41;
  --ads-brand-50: 253 238 225;
  --ads-brand-100: 251 220 194;
  --ads-brand-300: 242 162 122;
  --ads-brand-500: 247 119 55;
  --ads-brand-600: 229 94 31;
  --ads-brand-700: 178 62 15;
  --ads-brand-900: 122 44 14;
  --ads-teal-50: 216 236 231;
  --ads-teal-300: 127 195 184;
  --ads-teal-500: 74 155 142;
  --ads-teal-700: 47 109 112;
  --ads-paper-50: 255 255 255;
  --ads-paper-100: 255 253 247;
  --ads-paper-200: 246 245 242;
  --ads-paper-300: 241 239 232;
  --ads-paper-400: 231 228 221;
  --ads-paper-500: 214 210 200;
  --ads-paper-600: 132 127 114;
  --ads-ink-300: 91 102 117;
  --ads-ink-400: 79 90 104;
  --ads-ink-500: 27 37 49;
  --ads-red-50: 251 233 230;
  --ads-red-300: 240 138 124;
  --ads-red-600: 200 57 43;
  --ads-red-800: 140 42 32;
  --ads-radius: 14px;
  --ads-radius-badge: 4px;
  --ads-radius-sheet: 4px;
  --ads-radius-sm: 6px;
  --ads-radius-button: 9px;
  --ads-radius-input: 9px;
  --ads-radius-card: 14px;
  --ads-radius-xl: 16px;
  --ads-radius-full: 9999px;
  --ads-shadow-xs: 0 1px 2px 0 rgba(15, 42, 71, 0.04);
  --ads-shadow-card: 0 1px 2px rgba(20, 37, 61, 0.05);
  --ads-shadow-raised: 0 1px 2px rgba(20, 37, 61, 0.06), 0 6px 18px -6px rgba(20, 37, 61, 0.14);
  --ads-shadow-sheet: 0 1px 2px rgba(20, 37, 61, 0.05), 0 16px 44px rgba(20, 37, 61, 0.11);
  --ads-shadow-overlay: 0 2px 4px rgba(20, 37, 61, 0.08), 0 24px 56px -12px rgba(20, 37, 61, 0.28);
  --ads-font-sans: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ads-font-doc: Georgia, Times, "Times New Roman", serif;
  --ads-duration-fast: 120ms;
  --ads-duration-base: 200ms;
  --ads-duration-slow: 400ms;
  --ads-duration-enter: 700ms;
  --ads-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ads-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

:root {
  --ads-bg: 246 245 242;
  --ads-surface: 255 255 255;
  --ads-surface-muted: 241 239 232;
  --ads-surface-sunken: 231 228 221;
  --ads-sheet: 255 253 247;
  --ads-line: 231 228 221;
  --ads-line-strong: 214 210 200;
  --ads-line-field: 132 127 114;
  --ads-fg: 27 37 49;
  --ads-fg-muted: 79 90 104;
  --ads-fg-subtle: 91 102 117;
  --ads-heading: 15 42 71;
  --ads-brand: 247 119 55;
  --ads-brand-fg: 20 37 61;
  --ads-brand-soft: 253 238 225;
  --ads-brand-strong: 178 62 15;
  --ads-brand-hover: 255 138 79;
  --ads-teal: 74 155 142;
  --ads-teal-soft: 216 236 231;
  --ads-teal-strong: 47 109 112;
  --ads-danger: 200 57 43;
  --ads-danger-fg: 255 255 255;
  --ads-danger-soft: 251 233 230;
  --ads-danger-strong: 140 42 32;
  --ads-ring: 229 94 31;
  --ads-band-bg: 15 42 71;
  --ads-band-deep: 10 25 41;
  --ads-band-fg: 255 255 255;
  --ads-band-fg-muted: 157 176 201;
  --ads-band-fg-subtle: 142 162 189;
  --ads-band-line: 34 59 87;
  --ads-band-brand: 247 119 55;
  --ads-band-teal: 127 195 184;
  --ads-side-bg: 20 37 61;
  --ads-side-fg: 223 230 239;
  --ads-side-fg-muted: 142 162 189;
  --ads-side-active: 34 59 87;
  --ads-side-line: 26 48 80;
  color-scheme: light;
}

:root {
  --ads-text-2xs: 0.6875rem;
  --ads-leading-2xs: 1rem;
  --ads-text-xs: 0.75rem;
  --ads-leading-xs: 1.125rem;
  --ads-text-sm: 0.8125rem;
  --ads-leading-sm: 1.25rem;
  --ads-text-base: 0.9375rem;
  --ads-leading-base: 1.5rem;
  --ads-text-md: 1rem;
  --ads-leading-md: 1.5rem;
  --ads-text-lg: 1.125rem;
  --ads-leading-lg: 1.625rem;
  --ads-text-xl: 1.375rem;
  --ads-leading-xl: 1.75rem;
  --ads-text-2xl: 1.75rem;
  --ads-leading-2xl: 2.125rem;
  --ads-text-3xl: 2.25rem;
  --ads-leading-3xl: 2.5rem;
  --ads-text-4xl: 3rem;
  --ads-leading-4xl: 3.25rem;
  --ads-text-5xl: 3.75rem;
  --ads-leading-5xl: 3.875rem;
  --ads-container: 72.5rem;
}


/* Kit web: pila monoespaciada del sistema (sin descargar fuente). Para mockups con nombres de archivo, no para texto de lectura. */
:root {
  --ads-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  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: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  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: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  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: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  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;
}

/* ===== base ===== */
/* Alcance: todo el kit vive bajo .ads (ponlo en <body> o en un contenedor). No hay resets globales, salvo el margen por defecto del navegador cuando .ads va en <body> (1.2.1): sin él, las bandas a ancho completo quedan con un marco de 8 px. */
body.ads, html:has(> body.ads) { margin: 0; }
.ads { font-family: var(--ads-font-sans); color: rgb(var(--ads-fg)); font-size: var(--ads-text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: rgb(var(--ads-bg)); }
.ads *, .ads *::before, .ads *::after { box-sizing: border-box; }
.ads :where(img, svg) { display: block; max-width: 100%; }
.ads :where(a) { color: inherit; text-decoration: none; }
.ads :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.ads :where(ul, ol) { padding: 0; list-style: none; }
.ads :where(button) { font: inherit; color: inherit; cursor: pointer; }
.ads :focus-visible { outline: 2px solid rgb(var(--ads-ring)); outline-offset: 3px; border-radius: 4px; }
.ads-band :focus-visible, .ads-dark :focus-visible, .ads-plan--featured :focus-visible, .ads-nav :focus-visible, .ads-hero :focus-visible, .ads-footer :focus-visible, .ads-cta :focus-visible { outline-color: rgb(var(--ads-brand-300)); }
.ads-skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: rgb(var(--ads-paper-50)); color: rgb(var(--ads-heading)); padding: 10px 16px; border-radius: var(--ads-radius-button); font-weight: 600; transition: top var(--ads-duration-fast) var(--ads-ease-out); }
.ads-skip:focus { top: 12px; }
.ads-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 1.4.0 · Espaciado entre bloques de layout (separar widgets, tarjetas y secciones dentro de una página sin rem fijos).
   Se usa con var(--ads-space-block-*) o con las utilidades .ads-mt-* / .ads-mb-*. Los espacios internos de cada componente no cambian. */
:root {
  --ads-space-block-xs: 0.75rem;                  /* título → contenido, ítems apilados */
  --ads-space-block-sm: 1.5rem;                   /* párrafo → botón, grupo → grupo corto */
  --ads-space-block: 2.5rem;                      /* bloque → bloque: widget ↔ FAQ, tarjeta ↔ tarjeta (valor por defecto) */
  --ads-space-block-lg: clamp(3rem, 6vw, 4.5rem); /* tramo grande dentro de una sección; entre secciones usa .ads-section */
}
.ads-mt-xs { margin-top: var(--ads-space-block-xs); } .ads-mb-xs { margin-bottom: var(--ads-space-block-xs); }
.ads-mt-sm { margin-top: var(--ads-space-block-sm); } .ads-mb-sm { margin-bottom: var(--ads-space-block-sm); }
.ads-mt-block { margin-top: var(--ads-space-block); } .ads-mb-block { margin-bottom: var(--ads-space-block); }
.ads-mt-lg { margin-top: var(--ads-space-block-lg); } .ads-mb-lg { margin-bottom: var(--ads-space-block-lg); }

/* Ícono: Lucide en SVG en línea, trazo 2, extremos redondeados, currentColor. Tamaños 16 / 20 / 24. */
.ads-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ads-icon--sm { width: 1rem; height: 1rem; }
.ads-icon--lg { width: 1.5rem; height: 1.5rem; }

/* Estructura */
.ads-container { width: 100%; max-width: var(--ads-container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 5rem); }
.ads-container--narrow { max-width: 56.25rem; }
.ads-section { padding-block: clamp(4rem, 9vw, 7rem); }
.ads-section--paper { background: rgb(var(--ads-bg)); }
.ads-section--white { background: rgb(var(--ads-surface)); }
.ads-band { background: rgb(var(--ads-band-bg)); color: rgb(var(--ads-band-fg)); }
.ads-band--deep { background: rgb(var(--ads-band-deep)); }
.ads-band :where(h1, h2, h3, h4), .ads-dark :where(h1, h2, h3, h4) { color: rgb(var(--ads-band-fg)); }

/* Cabecera de sección */
.ads-section-head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.ads-section-head--left { margin-inline: 0; text-align: left; }
.ads-eyebrow { display: inline-block; margin-bottom: 1.5rem; padding: 0.375rem 0.875rem; border-radius: var(--ads-radius-full); background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ads-band .ads-eyebrow, .ads-dark .ads-eyebrow { background: rgb(var(--ads-brand) / 0.14); color: rgb(var(--ads-band-brand)); }
.ads-eyebrow--navy { background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-paper-50)); }
.ads-eyebrow--teal { background: rgb(var(--ads-teal-soft)); color: rgb(var(--ads-teal-strong)); }
.ads-dark .ads-eyebrow--teal { background: rgb(var(--ads-teal) / 0.1); border: 1px solid rgb(var(--ads-teal) / 0.3); color: rgb(var(--ads-teal-300)); }
.ads-h1 { font-size: clamp(2.375rem, 1.2rem + 4.6vw, var(--ads-text-5xl)); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; color: rgb(var(--ads-heading)); text-wrap: balance; }
.ads-h2 { font-size: clamp(1.875rem, 1rem + 3vw, var(--ads-text-4xl)); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: rgb(var(--ads-heading)); text-wrap: balance; }
.ads-h3 { font-size: var(--ads-text-lg); line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--ads-heading)); }
.ads-lead { margin-top: 1.1rem; font-size: clamp(1rem, 0.9rem + 0.5vw, var(--ads-text-lg)); line-height: 1.7; color: rgb(var(--ads-fg-muted)); text-wrap: pretty; }
.ads-band .ads-lead, .ads-dark .ads-lead { color: rgb(var(--ads-band-fg-muted)); }
/* Palabra de acento: naranja fuerte sobre claro (AA), naranja de marca sobre azul. */
.ads-accent { color: rgb(var(--ads-brand-strong)); }
.ads-band .ads-accent, .ads-dark .ads-accent, .ads-hero .ads-accent { color: rgb(var(--ads-band-brand)); }
.ads-muted { color: rgb(var(--ads-fg-muted)); }

/* Botones. Un solo primario por zona. El texto sobre naranja es AZUL (5,6:1); el blanco da 2,75:1 y no se usa. */
.ads-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.7rem 1.4rem; border: 1.5px solid transparent; border-radius: var(--ads-radius-button); background: rgb(var(--ads-brand)); color: rgb(var(--ads-brand-fg)); font-size: var(--ads-text-base); font-weight: 700; line-height: 1.2; transition: background-color var(--ads-duration-fast) var(--ads-ease-out), transform var(--ads-duration-fast) var(--ads-ease-out), box-shadow var(--ads-duration-base) var(--ads-ease-out), border-color var(--ads-duration-fast); }
.ads-btn:hover { background: rgb(var(--ads-brand-hover)); box-shadow: 0 6px 18px -8px rgb(var(--ads-brand) / 0.7); transform: translateY(-1px); }
.ads-btn:active { transform: none; box-shadow: none; }
.ads-btn .ads-icon { transition: transform var(--ads-duration-base) var(--ads-ease-out); }
.ads-btn:hover .ads-icon--arrow { transform: translateX(3px); }
.ads-btn--lg { min-height: 3.25rem; padding: 0.9rem 2rem; font-size: var(--ads-text-md); }
.ads-btn--sm { min-height: 2.25rem; padding: 0.45rem 1rem; font-size: var(--ads-text-sm); }
.ads-btn--block { width: 100%; }
.ads-btn--dark { background: rgb(var(--ads-heading)); color: rgb(var(--ads-paper-50)); }
.ads-btn--dark:hover { background: rgb(var(--ads-navy-800)); box-shadow: 0 6px 18px -8px rgb(var(--ads-navy-900) / 0.6); }
.ads-btn--outline { background: transparent; color: rgb(var(--ads-heading)); border-color: rgb(var(--ads-line-strong)); }
.ads-btn--outline:hover { background: rgb(var(--ads-surface-muted)); box-shadow: none; }
.ads-band .ads-btn--outline, .ads-dark .ads-btn--outline, .ads-hero .ads-btn--outline { color: rgb(var(--ads-band-fg)); border-color: rgb(var(--ads-band-fg) / 0.35); }
.ads-band .ads-btn--outline:hover, .ads-dark .ads-btn--outline:hover, .ads-hero .ads-btn--outline:hover { background: rgb(var(--ads-band-fg) / 0.08); border-color: rgb(var(--ads-band-fg) / 0.6); }
.ads-btn[disabled], .ads-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Chips y etiquetas */
.ads-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: var(--ads-radius-full); background: rgb(var(--ads-surface-muted)); color: rgb(var(--ads-fg-muted)); font-size: var(--ads-text-xs); font-weight: 700; letter-spacing: 0.02em; }
.ads-chip--brand { background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); }
.ads-chip--teal { background: rgb(var(--ads-teal-soft)); color: rgb(var(--ads-teal-strong)); }

/* Lista con checks (máscara: hereda el color del texto) */
.ads-checks { display: grid; gap: 0.7rem; }
.ads-checks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.65rem; align-items: start; font-size: var(--ads-text-sm); line-height: 1.5; }
.ads-checks li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; background: currentColor; -webkit-mask: var(--ads-check) center / contain no-repeat; mask: var(--ads-check) center / contain no-repeat; color: rgb(var(--ads-teal-strong)); }
:root { --ads-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* Entrada al hacer scroll (opt-in con el JS opcional: data-ads-reveal). El JS marca data-ads-hidden SOLO en lo que está bajo el pliegue y SOLO tras crear el observador;
   si el JS falla o tarda, un temporizador de seguridad lo muestra todo. Nunca se oculta contenido crítico (menú, planes, tabla). */
@media (prefers-reduced-motion: no-preference) {
  [data-ads-reveal] { transition: opacity 600ms var(--ads-ease-out), transform 600ms var(--ads-ease-out); transition-delay: calc(var(--ads-i, 0) * 70ms); }
  [data-ads-reveal]:not([data-ads-reveal="draw"]):not([data-ads-reveal="stack"])[data-ads-hidden] { opacity: 0; transform: translateY(14px); }
}
.ads ::selection { background: rgb(var(--ads-brand-300) / 0.55); color: rgb(var(--ads-navy-1000)); }
.ads-band ::selection, .ads-dark ::selection, .ads-hero ::selection, .ads-nav ::selection, .ads-plan--featured ::selection { background: rgb(var(--ads-brand) / 0.85); color: rgb(var(--ads-brand-fg)); }
.ads input, .ads textarea { caret-color: rgb(var(--ads-brand-strong)); }
.ads-matrix-wrap { scrollbar-width: thin; scrollbar-color: rgb(var(--ads-line-strong)) transparent; }
.ads-matrix-wrap::-webkit-scrollbar { height: 0.5rem; }
.ads-matrix-wrap::-webkit-scrollbar-thumb { background: rgb(var(--ads-line-strong)); border-radius: var(--ads-radius-full); }
html { scroll-padding-top: 5rem; }

/* ===== paisaje ===== */
/* 1.0 · Lenguaje visual del ejemplo «Landing» del DS (src/sections/Landing.tsx), portado a HTML/CSS puro.
   Fondos (navy-950 + glow + grano + celosía), barra de edificios, hojas de acta y panel como ilustración, lienzo claro con cuerpo. */

/* ---- Fondos oscuros: navy-950 con luz de marca. Úsalos en hero, bandas oscuras y CTA final ---- */
.ads-dark { position: relative; isolation: isolate; color: rgb(var(--ads-band-fg)); background: rgb(var(--ads-navy-950)); }
.ads-glow { background:
    radial-gradient(60% 45% at 50% 0%, rgb(var(--ads-brand) / 0.16), transparent 70%),
    radial-gradient(45% 40% at 82% 22%, rgb(var(--ads-navy-800) / 0.75), transparent 70%),
    radial-gradient(40% 35% at 12% 30%, rgb(var(--ads-teal) / 0.10), transparent 70%),
    rgb(var(--ads-navy-950)); }
/* Grano: textura de papel sobre el azul (decorativa) */
.ads-grain::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Celosía arquitectónica sutil (en el Landing del DS se dibuja en negro sobre el azul: se replica igual) */
.ads-lattice { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='12.5' y='12.5' width='5' height='5' rx='0.8' fill='none' stroke='%23000000' stroke-width='0.6'/%3E%3C/svg%3E"); background-size: 30px 30px; }
.ads-lattice--dim { opacity: 0.8; }
.ads-hr-dark { border-top: 1px solid rgb(255 255 255 / 0.07); }

/* ---- Barra de edificios (Skyline). Color con color:; ver skyline.snippet.html ---- */
.ads-skyline { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; min-height: 64px; aspect-ratio: 1200 / 104; pointer-events: none; color: rgb(var(--ads-navy-800) / 0.7); }
.ads-skyline svg { display: block; width: 100%; height: 100%; max-width: none; }
.ads-cta .ads-skyline { color: rgb(var(--ads-navy-800) / 0.6); }

/* ---- Lienzo claro con cuerpo (app-canvas): luz de marca, viñeta y grano. Añade .ads-canvas a la sección clara ---- */
.ads-canvas { position: relative; isolation: isolate; }
.ads-canvas::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(55% 40% at 15% -5%, rgb(var(--ads-brand) / 0.055), transparent 65%),
    radial-gradient(50% 42% at 92% 8%, rgb(var(--ads-navy-900) / 0.07), transparent 65%),
    radial-gradient(45% 40% at 55% 110%, rgb(var(--ads-teal) / 0.05), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(20 37 61 / 0.075) 100%); }
.ads-canvas::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.ads-section--line { border-top: 1px solid rgb(var(--ads-line)); }

/* ---- Hoja de acta (MiniActaSheet) como ilustración. Todo aria-hidden. Sin texto: líneas, folio y sello como formas ---- */
.ads-sheet { position: relative; width: 18.75rem; padding: 1.5rem 1.75rem 1.75rem; border-radius: 4px; color: rgb(var(--ads-ink-500)); background: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 120px), rgb(var(--ads-sheet)); box-shadow: 0 1px 2px rgb(20 37 61 / 0.08), 0 8px 24px -8px rgb(20 37 61 / 0.18), 0 32px 64px -24px rgb(20 37 61 / 0.25); }
.ads-sheet::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none; opacity: 0.45; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.ads-sheet::after { content: ""; position: absolute; right: 14px; bottom: 10px; width: 120px; height: 120px; pointer-events: none; opacity: 0.05; background: no-repeat bottom right / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230f2a47' stroke-width='1.4'%3E%3Cpath d='M10 110V55l20-14 20 14v55z'/%3E%3Cpath d='M22 110V75h8v35M38 110V75h8'/%3E%3Cpath d='M62 110V30l18-12 18 12v110z'/%3E%3Cpath d='M70 44h8M88 44h8M70 58h8M88 58h8M70 72h8M88 72h8M70 86h8M88 86h8'/%3E%3C/g%3E%3C/svg%3E"); }
.ads-sheet > * { position: relative; }
.ads-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgb(var(--ads-line)); }
.ads-sheet__bar { display: block; height: 5px; border-radius: 999px; background: rgb(var(--ads-ink-500) / 0.1); }
.ads-sheet__bar--title { height: 7px; width: 9rem; background: rgb(var(--ads-ink-500) / 0.55); }
.ads-sheet__bar--sub { height: 5px; width: 6rem; margin-top: 0.4rem; }
.ads-sheet__bar--folio { width: 2.4rem; background: rgb(var(--ads-ink-500) / 0.3); }
.ads-sheet__bar--accent { width: 4.5rem; height: 6px; background: rgb(var(--ads-brand-700) / 0.75); }
.ads-sheet__body { display: grid; gap: 0.4rem; margin-top: 1.1rem; }
.ads-sheet__sign { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 1.5rem; }
.ads-sheet__line { width: 6rem; height: 1.25rem; background-image: linear-gradient(to right, rgb(var(--ads-ink-500)) 55%, transparent 45%); background-size: 8px 1px; background-repeat: repeat-x; background-position: bottom; }
/* Sello (forma, sin texto) */
.ads-stamp { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; padding: 0.4rem 0.7rem; border: 2.5px solid rgb(var(--ads-brand-700) / 0.8); border-radius: 4px; transform: rotate(-8deg); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.92 0.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.92 0.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; }
.ads-stamp i { display: block; height: 3px; width: 3.6rem; border-radius: 2px; background: rgb(var(--ads-brand-700) / 0.85); }
.ads-stamp i + i { width: 2.6rem; }

/* ---- Panel navy translúcido (DashboardCard) como ilustración: métricas como formas ---- */
.ads-panel { position: relative; width: 20rem; padding: 1.25rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px; background: rgb(var(--ads-navy-900) / 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5); }
.ads-panel__head { display: flex; align-items: center; justify-content: space-between; }
.ads-panel__bar { display: block; height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.5); width: 8.5rem; }
.ads-panel__live { width: 2.6rem; height: 1.1rem; border-radius: 999px; border: 1px solid rgb(var(--ads-teal) / 0.25); background: rgb(var(--ads-teal) / 0.1); position: relative; }
.ads-panel__live::before { content: ""; position: absolute; left: 0.45rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: rgb(var(--ads-teal-300)); }
.ads-panel__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-top: 1rem; }
.ads-panel__metric { padding: 0.65rem; border-radius: 8px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.07); }
.ads-panel__metric b { display: block; height: 10px; width: 55%; border-radius: 3px; background: rgb(255 255 255 / 0.85); }
.ads-panel__metric i { display: block; height: 4px; width: 80%; margin-top: 0.55rem; border-radius: 2px; background: rgb(255 255 255 / 0.3); }
.ads-panel__chart { display: flex; align-items: flex-end; gap: 0.375rem; height: 4rem; margin-top: 1.1rem; }
.ads-panel__chart span { flex: 1; border-radius: 2px 2px 0 0; background: rgb(var(--ads-navy-600) / 0.7); height: var(--ads-h); }
.ads-panel__chart span:last-child { background: rgb(var(--ads-brand)); }
.ads-panel__foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding: 0.75rem; border-radius: 8px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.07); }
.ads-panel__foot::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: rgb(var(--ads-teal)); }
.ads-panel__foot i { display: block; height: 5px; width: 70%; border-radius: 3px; background: rgb(255 255 255 / 0.35); }

/* Composición del hero: hoja + panel superpuestos */
.ads-composition { position: relative; display: flex; justify-content: center; margin-top: clamp(3rem, 7vw, 5rem); }
.ads-composition__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.ads-composition__sheet { position: relative; z-index: 1; }
.ads-composition__panel { position: relative; }
.ads-composition__panel::before { content: ""; position: absolute; top: -2rem; right: -2rem; bottom: -2rem; left: -2rem; z-index: -1; border-radius: 999px; background: rgb(var(--ads-brand) / 0.1); filter: blur(48px); }
@media (min-width: 640px) {
  .ads-composition__inner { flex-direction: row; align-items: flex-end; gap: 0; }
  .ads-composition__sheet { margin-right: -2.5rem; margin-bottom: 2.5rem; }
  .ads-composition__panel { margin-left: -1.5rem; }
  .ads-sheet { width: 21.25rem; } .ads-panel { width: 23.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ads-sheet--float { animation: ads-float 7s ease-in-out infinite; }
  .ads-hero.is-away .ads-sheet--float { animation-play-state: paused; }
}
@keyframes ads-float { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .ads-sheet--float { transform: rotate(-2deg); } }

/* ---- Rejilla gap-px sobre navy (funcionalidades): 1 px de línea entre celdas ---- */
.ads-grid-px { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; overflow: hidden; border-radius: 1rem; border: 1px solid rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.08); }
.ads-grid-px > * { background: rgb(var(--ads-navy-900)); padding: 1.75rem; transition: background-color var(--ads-duration-base) var(--ads-ease-out); }
.ads-grid-px > *:hover { background: rgb(var(--ads-navy-850)); }
@media (min-width: 640px) { .ads-grid-px { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ads-grid-px { grid-template-columns: repeat(3, 1fr); } }

/* ---- CTA final y pie (fondo hero-glow + skyline) ---- */
.ads-cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: rgb(var(--ads-band-fg)); border-top: 1px solid rgb(255 255 255 / 0.06); padding-block: 6rem 7rem; }
.ads-cta__inner { max-width: 48rem; margin-inline: auto; padding-inline: 1.25rem; }
.ads-cta h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; color: rgb(var(--ads-band-fg)); text-wrap: balance; }
.ads-cta p { margin-top: 1.25rem; color: rgb(var(--ads-band-fg-muted)); }
.ads-cta .ads-btn { margin-top: 2rem; }
.ads-footer { background: rgb(var(--ads-navy-950)); color: rgb(var(--ads-band-fg-muted)); border-top: 1px solid rgb(255 255 255 / 0.07); }
.ads-footer__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 3rem; }
.ads-footer a:hover { color: rgb(var(--ads-band-fg)); }
@media (min-width: 768px) { .ads-footer__inner { flex-direction: row; } }

/* Títulos sobre fondo oscuro: ganan a .ads-h1/.ads-h2/.ads-h3 (que son azul sobre claro) */
.ads-dark .ads-h1, .ads-dark .ads-h2, .ads-dark .ads-h3, .ads-band .ads-h1, .ads-band .ads-h2, .ads-band .ads-h3 { color: rgb(var(--ads-band-fg)); }

/* ===== nav-hero ===== */
/* Navbar estilo Landing: barra pegajosa sobre navy-950, píldora translúcida con indicador deslizante, blur al hacer scroll y barra de progreso.
   Sin JS: barra sólida y todos los enlaces visibles. El indicador y el progreso solo aparecen con el JS opcional. */
.ads-nav { position: sticky; top: 0; z-index: 50; background: rgb(var(--ads-navy-950)); color: rgb(var(--ads-band-fg)); border-bottom: 1px solid transparent; transition: background-color var(--ads-duration-base) var(--ads-ease-out), border-color var(--ads-duration-base) var(--ads-ease-out), box-shadow var(--ads-duration-base) var(--ads-ease-out); }
.ads-nav.is-scrolled { background: rgb(var(--ads-navy-950) / 0.92); border-bottom-color: rgb(255 255 255 / 0.1); box-shadow: var(--ads-shadow-raised); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ads-nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; }
.ads-nav__logo { display: inline-flex; align-items: center; flex: none; }
.ads-nav__logo img { height: 3.25rem; width: auto; }
/* Píldora de secciones */
.ads-nav__menu { position: relative; display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--ads-radius-full); background: rgb(var(--ads-navy-900) / 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ads-nav__ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--ads-radius-full); background: rgb(255 255 255 / 0.12); opacity: 0; pointer-events: none; transition: transform 300ms var(--ads-ease-out), width 300ms var(--ads-ease-out), height 300ms var(--ads-ease-out), opacity 160ms linear; will-change: transform; }
.ads-nav__link { position: relative; z-index: 1; padding: 0.375rem 1rem; font-size: 0.8125rem; font-weight: 500; border-radius: var(--ads-radius-full); color: rgb(var(--ads-band-fg) / 0.75); transition: color var(--ads-duration-base) var(--ads-ease-out); }
.ads-nav__link:hover, .ads-nav__link[aria-current] { color: rgb(var(--ads-band-fg)); }
.ads-nav__link--quiet { color: rgb(var(--ads-band-fg) / 0.75); }
.ads-nav__actions { display: flex; align-items: center; gap: 0.625rem; flex: none; }
.ads-nav__ghost { padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; color: rgb(var(--ads-band-fg) / 0.78); border: 1px solid rgb(255 255 255 / 0.15); border-radius: var(--ads-radius-button); transition: color var(--ads-duration-fast), border-color var(--ads-duration-fast); }
.ads-nav__ghost:hover { color: rgb(var(--ads-band-fg)); border-color: rgb(255 255 255 / 0.3); }
.ads-nav__progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: rgb(var(--ads-brand)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* Botón de menú: solo ≤ 900 px y solo si el JS lo activó. Sin JS el menú queda visible, en una fila aparte. */
.ads-nav__toggle { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; background: transparent; border: 1.5px solid rgb(var(--ads-band-fg) / 0.3); border-radius: var(--ads-radius-button); color: rgb(var(--ads-band-fg)); }
.ads-nav__toggle:hover { background: rgb(var(--ads-band-fg) / 0.08); }
.ads-nav__toggle .ads-icon--close { display: none; }
.ads-nav__toggle[aria-expanded="true"] .ads-icon--open { display: none; }
.ads-nav__toggle[aria-expanded="true"] .ads-icon--close { display: block; }
@media (max-width: 900px) {
  .ads-nav__bar { flex-wrap: wrap; gap: 0.75rem; padding-block: 0.5rem; }
  .ads-nav__logo { order: 1; }
  .ads-nav__logo img { height: auto; width: 8.25rem; }
  .ads-nav__actions { order: 2; margin-left: auto; }
  .ads-nav__ghost { display: none; }
  .ads-nav.is-ready .ads-nav__toggle { display: inline-flex; order: 3; }
  .ads-nav__menu { order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 1rem 0.5rem; border-radius: var(--ads-radius-card); }
  .ads-nav__ind { display: none; }
  .ads-nav__link { padding: 0.85rem 0; border-radius: 0; border-bottom: 1px solid rgb(var(--ads-band-line)); }
  .ads-nav__link:last-child { border-bottom: 0; }
  .ads-nav__link--ingresar { display: block; }
  /* Solo se colapsa cuando el JS confirmó que el botón funciona (.is-ready); si algo falla, el menú sigue visible */
  .ads-nav.is-ready .ads-nav__menu { display: none; }
  /* Panel superpuesto: no cambia la altura de la barra, así que el scroll hacia una sección se calcula igual con el menú abierto o cerrado */
  .ads-nav.is-ready .ads-nav__toggle[aria-expanded="true"] ~ .ads-nav__menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; width: auto; max-height: calc(100vh - 4.5rem); overflow-y: auto; padding: 0.25rem 1.25rem 0.75rem; border: 0; border-bottom: 1px solid rgb(255 255 255 / 0.1); border-radius: 0; background: rgb(var(--ads-navy-950)); box-shadow: var(--ads-shadow-overlay); }
}
@media (min-width: 901px) { .ads-nav__link--ingresar { display: none; } }
@media (max-width: 380px) { .ads-nav__logo img { width: 6.5rem; } .ads-nav__actions .ads-btn { padding-inline: 0.75rem; } }
/* Obsoleto: el CTA vive en .ads-nav__actions; el HTML antiguo no duplica texto. */
.ads-nav__cta-mobile { display: none !important; }

/* Hero estilo Landing: navy-950 con glow, grano y celosía; skyline al pie; hoja + panel como composición */
.ads-hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: rgb(var(--ads-band-fg)); padding-block: clamp(4.5rem, 9vw, 7rem) clamp(7rem, 12vw, 9rem); }
.ads-hero__inner { max-width: 54rem; margin-inline: auto; position: relative; }
.ads-hero .ads-h1 { color: rgb(var(--ads-band-fg)); font-size: clamp(2.625rem, 1.2rem + 5.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; }
.ads-hero .ads-lead { max-width: 40rem; margin: 1.75rem auto 0; font-size: 0.97rem; line-height: 1.7; color: rgb(var(--ads-band-fg-muted)); }
@media (min-width: 640px) { .ads-hero .ads-lead { font-size: 1.08rem; } }
.ads-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem; margin-top: 2.25rem; }
.ads-hero__note { margin-top: 1rem; font-size: var(--ads-text-xs); color: rgb(var(--ads-band-fg-muted)); }
.ads-hero .ads-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; border: 1px solid rgb(var(--ads-brand) / 0.3); background: rgb(var(--ads-brand) / 0.1); color: rgb(var(--ads-brand-300)); }
.ads-hero .ads-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ads-brand)); }
@media (prefers-reduced-motion: no-preference) {
  .ads-js .ads-hero__inner > * { animation: ads-rise 700ms var(--ads-ease-out) both; }
  .ads-js .ads-hero__inner > :nth-child(2) { animation-delay: 80ms; }
  .ads-js .ads-hero__inner > :nth-child(3) { animation-delay: 160ms; }
  .ads-js .ads-hero__inner > :nth-child(4) { animation-delay: 240ms; }
  .ads-js .ads-hero__inner > :nth-child(5) { animation-delay: 300ms; }
  .ads-js .ads-composition { animation: ads-rise 800ms var(--ads-ease-out) 380ms both; }
}
@keyframes ads-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Cifras (border-y white/7 sobre navy-900/50) */
.ads-stats { position: relative; background: rgb(var(--ads-navy-900) / 0.5); border-block: 1px solid rgb(255 255 255 / 0.07); background-color: rgb(var(--ads-navy-950)); background-image: linear-gradient(rgb(var(--ads-navy-900) / 0.5), rgb(var(--ads-navy-900) / 0.5)); color: rgb(var(--ads-band-fg)); padding-block: 2.5rem; }
.ads-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; max-width: 64rem; margin-inline: auto; }
.ads-stat { text-align: center; }
.ads-stat__value { display: block; font-size: clamp(1.875rem, 1.4rem + 1.2vw, 1.875rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: rgb(var(--ads-band-teal)); font-variant-numeric: tabular-nums; }
.ads-stat__value--brand { color: rgb(var(--ads-band-brand)); }
.ads-stat__value--plain { color: rgb(var(--ads-band-fg)); }
.ads-stat__label { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: rgb(var(--ads-band-fg-muted)); }

/* Anchura y márgenes del Landing (max-w-6xl, px-5) en las zonas oscuras */
.ads-nav .ads-container, .ads-dark .ads-container, .ads-footer .ads-container, .ads-stats .ads-container { max-width: 72rem; padding-inline: 1.25rem; }

/* ===== secciones ===== */
/* 1.0 · Secciones con el lenguaje del Landing: manifiesto, rejilla de 9, pasos con conector, tarjetas, flujo de 5 cajas y bloque documento. */

/* ---- Manifiesto (texto centrado sobre superficie clara) ---- */
.ads-manifest { max-width: 56rem; margin-inline: auto; text-align: center; }
.ads-manifest .ads-h2 { text-wrap: balance; }
.ads-manifest > p { max-width: 45rem; margin: 1.25rem auto 0; font-size: 0.97rem; line-height: 1.7; color: rgb(var(--ads-fg-muted)); }
.ads-manifest > p strong { color: rgb(var(--ads-heading)); font-weight: 700; }
@media (min-width: 640px) { .ads-manifest > p { font-size: 1.08rem; } }

/* ---- Celda de rejilla gap-px (9 beneficios / funcionalidades): icono de marca, título, texto opcional ---- */
.ads-cell__icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: rgb(var(--ads-band-brand)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ads-cell__title { margin-top: 1rem; font-size: 1rem; font-weight: 700; line-height: 1.35; color: rgb(var(--ads-band-fg)); }
.ads-cell__text { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.65; color: rgb(var(--ads-band-fg-muted)); }
.ads-grid-px--compact > * { padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 0.9rem; }
.ads-grid-px--compact .ads-cell__title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.ads-grid-px--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ads-grid-px--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ads-grid-px--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Pasos con conector: n columnas, número en círculo, línea que los une, media decorativa opcional ---- */
.ads-steps { counter-reset: paso; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; position: relative; }
.ads-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; counter-increment: paso; }
.ads-step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-paper-50)); font-weight: 800; font-size: 1.05rem; box-shadow: 0 0 0 6px rgb(var(--ads-bg)), var(--ads-shadow-card); }
.ads-step__num::before { content: counter(paso); }
/* Si el sitio pone su propio número (01, 02…) dentro del span, el contador del kit se desactiva */
.ads-step__num:not(:empty)::before { content: none; }
.ads-step__num:not(:empty) { font-variant-numeric: tabular-nums; font-size: 0.95rem; letter-spacing: 0.02em; }
.ads-step__title { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--ads-heading)); }
.ads-step__text { margin-top: 0.5rem; max-width: 20rem; font-size: 0.9rem; line-height: 1.65; color: rgb(var(--ads-fg-muted)); }
.ads-step__media { width: 100%; max-width: 19rem; margin-top: 1.75rem; }
/* Conector vertical (móvil) y horizontal (≥ 900 px) */
.ads-step:not(:last-child)::after { content: ""; position: absolute; top: auto; bottom: -3rem; left: 50%; width: 2px; height: 3rem; margin-left: -1px; background: repeating-linear-gradient(to bottom, rgb(var(--ads-line-strong)) 0 6px, transparent 6px 12px); z-index: 0; }
@media (min-width: 900px) {
  .ads-steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ads-step:not(:last-child)::after { top: 1.5rem; bottom: auto; left: calc(50% + 2rem); width: calc(100% - 4rem + 2rem); height: 2px; margin-left: 0; background: repeating-linear-gradient(to right, rgb(var(--ads-line-strong)) 0 6px, transparent 6px 12px); }
}
.ads-step--visible-line .ads-step::after { display: block; }
/* Mini documentos y asistente como media de paso (formas, sin texto) */
.ads-minidoc { padding: 0.9rem 1rem; border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-card); background: rgb(var(--ads-surface)); box-shadow: var(--ads-shadow-card); text-align: left; display: grid; gap: 0.5rem; }
.ads-minidoc__row { display: flex; align-items: center; gap: 0.6rem; }
.ads-minidoc__dot { width: 1.25rem; height: 1.25rem; flex: none; border-radius: 6px; background: rgb(var(--ads-brand-soft)); border: 1px solid rgb(var(--ads-brand-100)); }
.ads-minidoc__dot--teal { background: rgb(var(--ads-teal-soft)); border-color: rgb(var(--ads-teal-300) / 0.6); }
.ads-minidoc__bar { display: block; height: 6px; border-radius: 999px; background: rgb(var(--ads-ink-500) / 0.12); flex: 1; }
.ads-minidoc__bar--short { flex: none; width: 3.2rem; background: rgb(var(--ads-teal) / 0.5); }

/* ---- Tarjetas de beneficio (superficie clara): icono en baldosa, título, texto; elevación al pasar ---- */
.ads-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .ads-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ads-cards--3 { grid-template-columns: repeat(3, 1fr); } .ads-cards--4 { grid-template-columns: repeat(4, 1fr); } }
.ads-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-card); background: rgb(var(--ads-surface)); box-shadow: var(--ads-shadow-xs); transition: transform var(--ads-duration-base) var(--ads-ease-out), box-shadow var(--ads-duration-base) var(--ads-ease-out), border-color var(--ads-duration-base) var(--ads-ease-out); }
.ads-card:hover { transform: translateY(-3px); box-shadow: var(--ads-shadow-raised); border-color: rgb(var(--ads-line-strong)); }
.ads-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); }
.ads-card__icon--teal { background: rgb(var(--ads-teal-soft)); color: rgb(var(--ads-teal-strong)); }
.ads-card__icon--navy { background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-paper-50)); }
.ads-card__title { margin-top: 1.1rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: rgb(var(--ads-heading)); }
.ads-card__text { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.65; color: rgb(var(--ads-fg-muted)); }
@media (prefers-reduced-motion: reduce) { .ads-card:hover { transform: none; } }

/* ---- Flujo de 5 cajas (Decisión → Responsable → Fecha → Respaldo → Seguimiento): horizontal ≥ 900 px, vertical en móvil ---- */
.ads-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; counter-reset: caja; }
.ads-flow__item { position: relative; counter-increment: caja; padding: 1.25rem 1.25rem 1.4rem; border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-card); background: rgb(var(--ads-surface)); box-shadow: var(--ads-shadow-xs); }
.ads-flow__item::before { content: counter(caja); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-bottom: 0.9rem; border-radius: 50%; background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); font-size: 0.8125rem; font-weight: 800; }
.ads-flow__title { font-size: 0.9375rem; font-weight: 700; color: rgb(var(--ads-heading)); }
.ads-flow__text { margin-top: 0.35rem; font-size: 0.8125rem; line-height: 1.55; color: rgb(var(--ads-fg-muted)); }
/* Flecha entre cajas: hacia abajo en móvil, hacia la derecha en escritorio */
.ads-flow__item:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -1.5rem; width: 1.25rem; height: 1.25rem; margin-left: -0.625rem; background: rgb(var(--ads-brand-strong)); -webkit-mask: var(--ads-flecha) center / contain no-repeat; mask: var(--ads-flecha) center / contain no-repeat; transform: rotate(90deg); }
:root { --ads-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
@media (min-width: 900px) {
  .ads-flow { grid-template-columns: repeat(5, 1fr); gap: 1.75rem; }
  .ads-flow__item:not(:last-child)::after { left: auto; right: -1.5rem; bottom: auto; top: 50%; margin: -0.625rem 0 0; transform: none; }
}

/* ---- Bloque dividido (texto + media): «memoria institucional», «comunidad que aprende». La media puede ser una pila de hojas ---- */
.ads-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.ads-split__media { order: 2; width: 100%; max-width: 28rem; margin-inline: auto; }
.ads-split__copy { order: 1; }
@media (min-width: 1024px) { .ads-split { grid-template-columns: 1fr 1fr; gap: 4rem; } .ads-split__media { order: 1; } .ads-split__copy { order: 2; } .ads-split--flip .ads-split__media { order: 2; } .ads-split--flip .ads-split__copy { order: 1; } }
.ads-split__copy .ads-lead { margin-top: 1.5rem; }
.ads-bullets { display: grid; gap: 0.9rem; margin-top: 1.75rem; }
.ads-bullets li { display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.55; color: rgb(var(--ads-fg)); }
.ads-bullets li::before { content: ""; flex: none; width: 1rem; height: 2px; margin-top: 0.7rem; background: rgb(var(--ads-brand)); }
/* Pila de hojas (paper-stack): dos hojas detrás, la firma se dibuja y el sello cae al entrar en pantalla */
.ads-stack { position: relative; width: 100%; }
.ads-stack::before, .ads-stack::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: rgb(var(--ads-paper-300)); border: 1px solid rgb(var(--ads-paper-400)); }
.ads-stack::before { transform: rotate(-1.6deg) translateY(6px); }
.ads-stack::after { transform: rotate(1.1deg) translateY(10px); }
.ads-stack .ads-sheet { width: 100%; padding: 2rem 2.25rem 2.25rem; }
.ads-stack .ads-sheet__bar--title { width: 12rem; height: 9px; }
.ads-stack .ads-sheet__line { width: 8rem; }
.ads-stack .ads-stamp { padding: 0.5rem 0.9rem; }
.ads-stack .ads-stamp i { width: 4.4rem; } .ads-stack .ads-stamp i + i { width: 3.2rem; }
.ads-stack .ads-sheet__num { display: flex; gap: 0.75rem; align-items: center; }
.ads-stack .ads-sheet__num::before { content: ""; width: 1.2rem; height: 6px; border-radius: 3px; background: rgb(var(--ads-brand-700) / 0.7); }
@media (prefers-reduced-motion: no-preference) {
  .ads-stack { transition: opacity 600ms var(--ads-ease-out), transform 700ms var(--ads-ease-out); }
  .ads-stack[data-ads-hidden] { opacity: 0; transform: translateY(26px); }
  .ads-stack .ads-sheet__line { transition: clip-path 700ms var(--ads-ease-out) 700ms; clip-path: inset(0); }
  .ads-stack[data-ads-hidden] .ads-sheet__line { clip-path: inset(0 100% 0 0); }
  .ads-stack .ads-stamp { transition: opacity 140ms linear 1300ms, transform 460ms var(--ads-ease-out) 1300ms; }
  .ads-stack[data-ads-hidden] .ads-stamp { opacity: 0; transform: rotate(-8deg) scale(1.7); }
}

/* ---- Media de paso con TEXTO real (1.1): filas, archivos y chat. Mismo lenguaje que .ads-minidoc; el texto lo pone el sitio ---- */
.ads-step__media.ads-minidoc--rows, .ads-step__media.ads-minidoc--files, .ads-step__media.ads-minidoc--chat { max-width: 21rem; padding: 0.9rem; gap: 0.65rem; }
.ads-minidoc__head { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--ads-fg-muted)); padding: 0 0.15rem 0.15rem; }
.ads-minidoc__item { display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.6rem 0.7rem; border-radius: 10px; background: rgb(var(--ads-surface-muted)); border: 1px solid rgb(var(--ads-line)); }
.ads-minidoc__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 8px; background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); }
.ads-minidoc__icon--teal { background: rgb(var(--ads-teal-soft)); color: rgb(var(--ads-teal-strong)); }
.ads-minidoc__icon--navy { background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-paper-50)); }
.ads-minidoc__icon .ads-icon { width: 1rem; height: 1rem; }
.ads-minidoc__body { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.ads-minidoc__title { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; color: rgb(var(--ads-heading)); overflow-wrap: anywhere; }
.ads-minidoc__sub { font-size: 0.75rem; line-height: 1.35; color: rgb(var(--ads-fg-muted)); }
.ads-minidoc__file { font-family: var(--ads-font-mono); font-size: 0.72rem; letter-spacing: -0.01em; font-weight: 500; line-height: 1.3; color: rgb(var(--ads-heading)); min-width: 0; max-width: 100%; flex: 1 0 auto; overflow-wrap: anywhere; }
/* Si el nombre no cabe junto al estado, el estado baja a una segunda línea en vez de partir el nombre */
.ads-minidoc--files .ads-minidoc__item { flex-wrap: wrap; row-gap: 0.4rem; }
.ads-minidoc--files .ads-minidoc__status { margin-left: auto; }
.ads-minidoc__live { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgb(var(--ads-teal)); box-shadow: 0 0 0 3px rgb(var(--ads-teal) / 0.2); }
.ads-minidoc__tag, .ads-minidoc__status { flex: none; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: var(--ads-radius-full); font-size: 0.6875rem; font-weight: 700; white-space: nowrap; background: rgb(var(--ads-teal-soft)); color: rgb(var(--ads-teal-strong)); }
.ads-minidoc__status--busy { background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); }
.ads-minidoc__status .ads-icon { width: 0.8rem; height: 0.8rem; stroke-width: 2.4; }
@media (prefers-reduced-motion: no-preference) { .ads-minidoc__status--busy .ads-icon { animation: ads-spin-s 1.1s linear infinite; } }
@keyframes ads-spin-s { to { transform: rotate(360deg); } }
.ads-minidoc__foot { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.2rem 0; border-top: 1px solid rgb(var(--ads-line)); font-size: 0.75rem; font-weight: 600; color: rgb(var(--ads-fg-muted)); }
.ads-minidoc__foot span:first-child { color: rgb(var(--ads-teal-strong)); }
/* Chat: burbuja de la persona (navy, a la derecha), respuesta (clara, a la izquierda) y campo simulado */
.ads-chat { display: grid; gap: 0.6rem; }
.ads-chat__msg { max-width: 92%; padding: 0.6rem 0.8rem; border-radius: 12px; font-size: 0.8125rem; line-height: 1.5; }
.ads-chat__msg strong { font-weight: 700; }
.ads-chat__msg--user { justify-self: end; background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-paper-50)); border-bottom-right-radius: 4px; }
.ads-chat__msg--ai { justify-self: start; background: rgb(var(--ads-surface-muted)); border: 1px solid rgb(var(--ads-line)); color: rgb(var(--ads-fg)); border-bottom-left-radius: 4px; }
.ads-chat__msg--ai strong { color: rgb(var(--ads-heading)); }
.ads-chat__who { display: block; margin-bottom: 0.15rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.85; }
.ads-chat__msg--ai .ads-chat__who { color: rgb(var(--ads-teal-strong)); opacity: 1; }
.ads-chat__input { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.4rem 0.4rem 0.8rem; border: 1px solid rgb(var(--ads-line-strong)); border-radius: 10px; background: rgb(var(--ads-surface)); }
.ads-chat__ph { flex: 1; min-width: 0; font-size: 0.8125rem; color: rgb(var(--ads-fg-muted)); }
.ads-chat__send { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 8px; background: rgb(var(--ads-brand)); color: rgb(var(--ads-brand-fg)); }
.ads-chat__send .ads-icon { width: 1rem; height: 1rem; }

/* Lista de checks dentro de un paso centrado: bloque centrado, ítems alineados a la izquierda entre sí */
.ads-step .ads-checks { width: max-content; max-width: 100%; margin: 1.25rem auto 0; text-align: left; }
.ads-checks--center { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }

/* ===== precios ===== */
/* Precios: selector de tramo (tabs) + 3 planes. Contrato con el JS del sitio:
   .tramo-btn[data-tramo][role=tab][aria-selected] y .precio[data-plan] (el JS reemplaza el texto del precio). */
.ads-tramos { display: flex; justify-content: center; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.ads-tramos__list { display: inline-flex; gap: 0.25rem; padding: 0.25rem; max-width: 100%; background: rgb(var(--ads-surface)); border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-full); box-shadow: var(--ads-shadow-xs); }
.tramo-btn { border: 0; background: transparent; color: rgb(var(--ads-fg-muted)); font-family: inherit; font-size: var(--ads-text-sm); font-weight: 600; min-height: 2.75rem; padding: 0.6rem 1.5rem; border-radius: var(--ads-radius-full); white-space: nowrap; transition: background var(--ads-duration-fast) var(--ads-ease-out), color var(--ads-duration-fast) var(--ads-ease-out); }
.tramo-btn:hover { color: rgb(var(--ads-heading)); background: rgb(var(--ads-surface-muted)); }
.tramo-btn[aria-selected="true"] { background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-paper-50)); }
.tramo-btn[aria-selected="true"]:hover { background: rgb(var(--ads-navy-800)); }
.tramo-btn:focus-visible { outline-offset: 2px; border-radius: var(--ads-radius-full); }
@media (max-width: 640px) { .ads-tramos__list { width: 100%; } .tramo-btn { flex: 1 1 0; padding-inline: 0.5rem; } }

.ads-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.ads-plan { min-width: 0; position: relative; display: flex; flex-direction: column; padding: 2.25rem 2rem; background: rgb(var(--ads-surface)); border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-xl); }
.ads-plan__name { font-size: var(--ads-text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ads-fg-muted)); margin-bottom: 0.75rem; }
.ads-plan--teal .ads-plan__name { color: rgb(var(--ads-teal-strong)); }
.ads-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; margin-bottom: 0.4rem; }
.precio, .ads-plan__amount { font-size: var(--ads-text-5xl); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: rgb(var(--ads-heading)); font-variant-numeric: tabular-nums; }
.ads-plan__unit { font-size: var(--ads-text-base); font-weight: 700; color: rgb(var(--ads-fg-muted)); }
.ads-plan__desc { min-height: 2.4rem; margin-bottom: 0.75rem; font-size: var(--ads-text-sm); line-height: 1.5; color: rgb(var(--ads-fg-muted)); }
.ads-plan .ads-btn { margin-block: 0.75rem 1.75rem; }
.ads-plan__list-title { margin-bottom: 0.9rem; font-size: var(--ads-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--ads-fg-muted)); }
.ads-plan .ads-checks { color: rgb(var(--ads-fg)); }
.ads-plan .ads-checks li::before { color: rgb(var(--ads-teal)); }
.ads-plan__badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); padding: 0.35rem 0.95rem; border-radius: var(--ads-radius-full); background: rgb(var(--ads-brand)); color: rgb(var(--ads-brand-fg)); font-size: var(--ads-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
/* Plan destacado: banda azul fija, con texto de banda verificado AA. */
.ads-plan--featured { background: rgb(var(--ads-band-bg)); border-color: rgb(var(--ads-band-bg)); box-shadow: var(--ads-shadow-overlay); }
.ads-plan--featured .ads-plan__name { color: rgb(var(--ads-band-brand)); }
.ads-plan--featured .precio, .ads-plan--featured .ads-plan__amount { color: rgb(var(--ads-band-fg)); }
.ads-plan--featured .ads-plan__unit { color: rgb(var(--ads-band-fg-muted)); }
.ads-plan--featured .ads-plan__desc { color: rgb(var(--ads-band-fg-muted)); }
.ads-plan--featured .ads-plan__list-title { color: rgb(var(--ads-band-fg-subtle)); }
.ads-plan--featured .ads-checks { color: rgb(var(--ads-band-fg)); }
.ads-plan--featured .ads-checks li::before { color: rgb(var(--ads-band-brand)); }
.ads-plans__note { margin-top: 1.75rem; text-align: center; font-size: var(--ads-text-xs); line-height: 1.6; color: rgb(var(--ads-fg-muted)); }
@media (prefers-reduced-motion: no-preference) {
  .ads-plan { transition: transform var(--ads-duration-base) var(--ads-ease-out), box-shadow var(--ads-duration-base) var(--ads-ease-out); }
  .ads-plan:not(.ads-plan--featured):hover { transform: translateY(-3px); box-shadow: var(--ads-shadow-raised); }
}
@media (max-width: 900px) { .ads-plans { grid-template-columns: minmax(0, 1fr); max-width: 28rem; margin-inline: auto; gap: 2rem; } .ads-plan--featured { order: -1; } .ads-plan__desc { min-height: 0; } }

/* ===== matriz ===== */
/* Matriz comparativa: tabla con scroll horizontal, 1ª columna fija, columna destacada y filas de sección. */
.ads-matrix-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-xl); background: rgb(var(--ads-surface)); }
.ads-matrix-wrap:focus-visible { outline-offset: 2px; }
.ads-matrix { width: 100%; min-width: 38rem; border-collapse: separate; border-spacing: 0; font-size: var(--ads-text-sm); }
.ads-matrix thead th { background: rgb(var(--ads-navy-950)); color: rgb(var(--ads-band-fg)); font-weight: 700; padding: 1rem 0.75rem; text-align: center; min-width: 7.5rem; }
.ads-matrix thead th:first-child { text-align: left; padding-left: 1.25rem; min-width: 15rem; }
.ads-matrix thead th.is-featured { color: rgb(var(--ads-band-brand)); box-shadow: inset 0 3px 0 rgb(var(--ads-band-brand)); }
.ads-matrix th[scope="row"], .ads-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; }
.ads-matrix th[scope="row"] { background: rgb(var(--ads-surface)); text-align: left; font-weight: 400; padding: 0.8rem 1.25rem; color: rgb(var(--ads-fg)); border-top: 1px solid rgb(var(--ads-line)); }
.ads-matrix th[scope="row"] strong { display: block; font-weight: 700; color: rgb(var(--ads-heading)); }
.ads-matrix th[scope="row"] small { display: block; margin-top: 0.15rem; font-size: var(--ads-text-xs); line-height: 1.45; color: rgb(var(--ads-fg-muted)); }
.ads-matrix td { padding: 0.8rem 0.75rem; text-align: center; border-top: 1px solid rgb(var(--ads-line)); color: rgb(var(--ads-fg)); vertical-align: middle; }
.ads-matrix td.is-featured { background: rgb(var(--ads-brand-soft) / 0.55); }
.ads-matrix tr.ads-matrix__section th, .ads-matrix tr.ads-matrix__section td { background: rgb(var(--ads-navy-50)); color: rgb(var(--ads-heading)); font-size: var(--ads-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; padding: 0.7rem 1.25rem; border-top: 1px solid rgb(var(--ads-line)); }
/* Valores: check (incluido), guion (no incluido), texto (límite o nota). Siempre con texto accesible, nunca solo color. */
.ads-matrix__yes, .ads-matrix__no { display: inline-flex; align-items: center; justify-content: center; }
.ads-matrix__yes { color: rgb(var(--ads-teal-strong)); }
.ads-matrix__no { color: rgb(var(--ads-fg-subtle)); }
.ads-matrix__yes .ads-icon, .ads-matrix__no .ads-icon { width: 1.125rem; height: 1.125rem; stroke-width: 2.5; }
.ads-matrix__txt { font-size: var(--ads-text-xs); font-weight: 600; color: rgb(var(--ads-fg)); }
.ads-matrix tbody tr:hover td, .ads-matrix tbody tr:hover th[scope="row"] { background-color: rgb(var(--ads-surface-muted)); }
.ads-matrix tbody tr:hover td.is-featured { background-color: rgb(var(--ads-brand-soft)); }
.ads-matrix tr.ads-matrix__section:hover th, .ads-matrix tr.ads-matrix__section:hover td { background-color: rgb(var(--ads-navy-50)); }

/* Indicador de scroll: obsoleto desde 1.1.1 (en móvil la tabla se apila y no hay scroll horizontal). Se oculta siempre; el HTML antiguo puede conservarlo. */
.ads .ads-scroll-hint, .ads .scroll-hint { display: none !important; }

/* ≤ 767 px: tabla apilada, SIN scroll horizontal. Cada fila = nombre y descripción a todo el ancho + franja de 3 celdas iguales (una por plan)
   cuya etiqueta sale del encabezado existente (data-label; el JS opcional lo rellena si falta). La semántica de tabla se conserva con roles ARIA
   (role="table|rowgroup|row|columnheader|rowheader|cell"; el JS opcional los añade si faltan). */
@media (max-width: 767px) {
  .ads-matrix-wrap { overflow: visible; }
  .ads-matrix, .ads-matrix tbody { display: block; width: 100%; min-width: 0; }
  .ads-matrix thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ads-matrix tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ads-matrix tr.ads-matrix__section { display: block; }
  .ads-matrix tr.ads-matrix__section th { display: block; width: 100%; border-radius: 0; }
  .ads-matrix tbody tr:first-child th { border-radius: var(--ads-radius-xl) var(--ads-radius-xl) 0 0; }
  .ads-matrix tbody tr:last-child td:last-child { border-bottom-right-radius: var(--ads-radius-xl); }
  .ads-matrix tbody tr:last-child td:first-of-type { border-bottom-left-radius: var(--ads-radius-xl); }
  .ads-matrix th[scope="row"] { position: static; display: block; grid-column: 1 / -1; padding: 0.9rem 1rem 0.65rem; }
  .ads-matrix td { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; padding: 0.55rem 0.35rem 0.85rem; border-top: 0; border-left: 1px solid rgb(var(--ads-line)); }
  .ads-matrix th[scope="row"] + td { border-left: 0; }
  .ads-matrix td::before { content: attr(data-label); content: attr(data-label) / ""; max-width: 100%; text-align: center; font-size: 0.6875rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; color: rgb(var(--ads-fg-muted)); }
  .ads-matrix td.is-featured::before { color: rgb(var(--ads-brand-strong)); }
  .ads-matrix td .ads-matrix__soon { white-space: normal; text-align: center; padding: 0.2rem 0.5rem; font-size: 0.6875rem; line-height: 1.25; }
  .ads-matrix__txt { text-align: center; }
  .ads-matrix tbody tr:hover td, .ads-matrix tbody tr:hover th[scope="row"] { background-color: transparent; }
  .ads-matrix tbody tr:hover td.is-featured { background-color: rgb(var(--ads-brand-soft) / 0.55); }
}

/* ===== bandas ===== */
/* 1.0 · Add-ons, banda «reglas claras» (6 celdas + 3 notas) */

/* ---- Add-ons: tarjetas compactas con nombre, descripción y precio en chip ---- */
.ads-addons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .ads-addons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ads-addons--3 { grid-template-columns: repeat(3, 1fr); } }
.ads-addon { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 1.5rem; border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-card); background: rgb(var(--ads-surface)); box-shadow: var(--ads-shadow-xs); transition: border-color var(--ads-duration-base) var(--ads-ease-out), box-shadow var(--ads-duration-base) var(--ads-ease-out); }
.ads-addon:hover { border-color: rgb(var(--ads-line-strong)); box-shadow: var(--ads-shadow-card); }
.ads-addon__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ads-addon__name { order: 1; font-size: 1rem; font-weight: 700; color: rgb(var(--ads-heading)); }
.ads-addon__price { order: 2; flex: none; padding: 0.2rem 0.65rem; border-radius: var(--ads-radius-full); background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); font-size: var(--ads-text-xs); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ads-addon__text { font-size: 0.875rem; line-height: 1.6; color: rgb(var(--ads-fg-muted)); }

/* ---- Banda de reglas: celdas gap-px y tres notas ---- */
.ads-rules .ads-grid-px { margin-top: 0; }
.ads-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .ads-notes { grid-template-columns: repeat(3, 1fr); } }
/* Nota: borde de 1 px completo y un icono; el DS no usa franjas de color de más de 1 px */
.ads-note { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.15rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--ads-radius-card); background: rgb(var(--ads-navy-900) / 0.5); }
.ads-note__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; fill: none; stroke: rgb(var(--ads-band-teal)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ads-note__text { font-size: 0.8125rem; line-height: 1.6; color: rgb(var(--ads-band-fg-muted)); }
.ads-note__text strong { color: rgb(var(--ads-band-fg)); font-weight: 600; }

/* El DOM puede traer el precio antes que el nombre: el orden visual no cambia. Variante con el precio a la izquierda: .ads-addon__head--price-first */
.ads-addon__head--price-first .ads-addon__price { order: 0; }
.ads-addon__head--price-first .ads-addon__name { order: 1; }
.ads-addon__head--price-first { justify-content: flex-start; }

/* ===== faq-cta-footer ===== */
/* 1.0 · FAQ (details/summary, sin JS), footer de 3 columnas */

/* ---- FAQ: acordeón nativo. El chevron conserva la clase .chev del sitio (giro de 220 ms) ---- */
.ads-faq { max-width: 50rem; margin-inline: auto; border-top: 1px solid rgb(var(--ads-line)); }
.ads-faq__item { border-bottom: 1px solid rgb(var(--ads-line)); }
.ads-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.5rem; padding: 1.1rem 0.25rem; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: rgb(var(--ads-heading)); transition: color var(--ads-duration-fast) var(--ads-ease-out); }
.ads-faq__item > summary::-webkit-details-marker { display: none; }
.ads-faq__item > summary:hover { color: rgb(var(--ads-brand-strong)); }
.ads-faq__item > summary:focus-visible { outline-offset: 2px; border-radius: var(--ads-radius-sm); }
.chev { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: rgb(var(--ads-fg-muted)); transition: transform 220ms var(--ads-ease-out), color 220ms var(--ads-ease-out); }
.ads-faq__item[open] > summary .chev { transform: rotate(180deg); color: rgb(var(--ads-brand-strong)); }
.ads-faq__answer { padding: 0 0.25rem 1.4rem; max-width: 44rem; font-size: 0.9375rem; line-height: 1.7; color: rgb(var(--ads-fg-muted)); }
.ads-faq__answer > * + * { margin-top: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .ads-faq__item[open] .ads-faq__answer { animation: ads-faq-in 260ms var(--ads-ease-out); }
}
@keyframes ads-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }

/* ---- Footer de 3 columnas (marca, enlaces, contacto) y línea de derechos ---- */
.ads-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 3.5rem 2.5rem; }
@media (min-width: 768px) { .ads-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } .ads-footer__cols--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } }
@media (min-width: 480px) and (max-width: 767px) { .ads-footer__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ads-footer__cols--4 > :first-child { grid-column: 1 / -1; } }
.ads-footer__brand p { margin-top: 1rem; max-width: 22rem; font-size: 0.8125rem; line-height: 1.65; color: rgb(var(--ads-band-fg-muted)); }
.ads-footer__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ads-band-fg)); }
.ads-footer__list { display: grid; gap: 0.65rem; margin-top: 1rem; font-size: 0.8125rem; }
.ads-footer__list a { color: rgb(var(--ads-band-fg-muted)); transition: color var(--ads-duration-fast) var(--ads-ease-out); }
.ads-footer__list a:hover { color: rgb(var(--ads-band-fg)); }
.ads-footer__legal { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.5rem 2rem; border-top: 1px solid rgb(255 255 255 / 0.07); font-size: 0.75rem; color: rgb(var(--ads-band-fg-muted)); text-align: center; }
@media (min-width: 768px) { .ads-footer__legal { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; } }

/* ===== legal ===== */
/* 1.2.0 · Texto largo (páginas legales): título, secciones con numeración automática (contadores CSS), índice, aviso de borrador y nota de pendientes.
   Estructura: .ads-legal > header.ads-legal__head + .ads-legal__layout > (nav.ads-legal__toc + .ads-legal__body). Sin JS todo se ve y funciona (el índice queda abierto). */
.ads-legal { padding-block: clamp(2.5rem, 7vw, 5rem); counter-reset: ads-sec; }
.ads-legal__head { max-width: 68ch; }
.ads-legal__title { font-family: var(--ads-font-doc); font-weight: 600; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; color: rgb(var(--ads-heading)); text-wrap: balance; }
.ads-legal__lead { margin-top: .75rem; font-size: var(--ads-text-md); line-height: 1.6; color: rgb(var(--ads-fg-muted)); }
.ads-legal__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 1rem; font-size: var(--ads-text-sm); color: rgb(var(--ads-fg-subtle)); font-variant-numeric: tabular-nums; }

/* Aviso de borrador (arriba) y nota de pendientes (dentro del texto): icono + rótulo + borde discontinuo, no solo color */
.ads-legal__draft, .ads-legal__note { display: flex; gap: .75rem; align-items: flex-start; border: 1px dashed rgb(var(--ads-brand) / .5); border-radius: var(--ads-radius-card); background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); font-size: var(--ads-text-sm); line-height: 1.55; padding: .75rem 1rem; }
.ads-legal__draft { margin-top: 1.25rem; }
.ads-legal__note { margin-block: 1rem; }
.ads-legal__draft .ads-icon, .ads-legal__note .ads-icon { margin-top: .15rem; width: 1rem; height: 1rem; }
.ads-legal__note-label { display: block; margin-bottom: .125rem; font-size: var(--ads-text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ads-legal__note p + p { margin-top: .5rem; }

.ads-legal__layout { display: grid; gap: 2rem; margin-top: 2rem; }

/* Índice: desplegable en móvil (details), columna lateral fija desde 900 px. Numeración con contadores. */
.ads-legal__toc details { border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-card); background: rgb(var(--ads-surface)); }
.ads-legal__toc summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; list-style: none; cursor: pointer; font-weight: 600; font-size: var(--ads-text-sm); color: rgb(var(--ads-heading)); }
.ads-legal__toc summary::-webkit-details-marker { display: none; }
.ads-legal__toc summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--ads-duration-fast) var(--ads-ease-out); }
.ads-legal__toc details[open] summary::after { transform: rotate(225deg); }
.ads-legal__toc details[open] summary { border-bottom: 1px solid rgb(var(--ads-line)); }
.ads-legal__toc ol { counter-reset: ads-toc; }
.ads-legal__toc > details > ol { padding: .5rem; }
.ads-legal__toc li { counter-increment: ads-toc; }
.ads-legal__toc li ol { counter-reset: ads-toc-sub; }
.ads-legal__toc li li { counter-increment: ads-toc-sub; }
.ads-legal__toc a { display: flex; align-items: baseline; gap: .5rem; min-height: 2.25rem; padding: .375rem .625rem; border-radius: var(--ads-radius-sm); font-size: var(--ads-text-sm); color: rgb(var(--ads-fg-muted)); transition: background-color var(--ads-duration-fast) var(--ads-ease-out), color var(--ads-duration-fast) var(--ads-ease-out); }
.ads-legal__toc a::before { content: counter(ads-toc); flex: none; width: 1.75rem; font-family: var(--ads-font-mono); font-size: var(--ads-text-xs); color: rgb(var(--ads-fg-subtle)); font-variant-numeric: tabular-nums; }
.ads-legal__toc li li a { padding-left: 1.75rem; font-size: .8125rem; }
.ads-legal__toc li li a::before { content: counter(ads-toc) "." counter(ads-toc-sub); width: 2rem; }
.ads-legal__toc a:hover { background: rgb(var(--ads-bg)); color: rgb(var(--ads-fg)); }
.ads-legal__toc a[aria-current="location"] { background: rgb(var(--ads-brand-soft)); color: rgb(var(--ads-brand-strong)); font-weight: 600; }

/* Cuerpo: medida de lectura de 68 caracteres */
.ads-legal__body { max-width: 68ch; min-width: 0; }
.ads-legal__intro { margin-bottom: 2.5rem; }
.ads-legal__section { margin-top: 3rem; }
.ads-legal__intro + .ads-legal__section, .ads-legal__body > .ads-legal__section:first-child { margin-top: 0; }
.ads-legal__section > h2, .ads-legal__section > h3 { scroll-margin-top: var(--ads-legal-offset, 5.5rem); color: rgb(var(--ads-heading)); line-height: 1.3; }
.ads-legal__section > h2 { counter-increment: ads-sec; counter-reset: ads-sub; font-family: var(--ads-font-doc); font-weight: 600; font-size: var(--ads-text-2xl); }
.ads-legal__section > h2::before { content: counter(ads-sec); margin-right: .625rem; font-family: var(--ads-font-mono); font-size: .7em; font-weight: 500; color: rgb(var(--ads-fg-subtle)); font-variant-numeric: tabular-nums; }
.ads-legal__section > h3 { counter-increment: ads-sub; margin-top: 2rem; font-weight: 600; font-size: var(--ads-text-lg); }
.ads-legal__section > h3::before { content: counter(ads-sec) "." counter(ads-sub); margin-right: .625rem; font-family: var(--ads-font-mono); font-size: .75em; font-weight: 500; color: rgb(var(--ads-fg-subtle)); font-variant-numeric: tabular-nums; }
.ads-legal__section > h2:focus, .ads-legal__section > h3:focus { outline: none; }
.ads-legal__section > h2:focus-visible, .ads-legal__section > h3:focus-visible { text-decoration: underline; text-decoration-color: rgb(var(--ads-brand)); text-underline-offset: .25em; }
.ads-legal__body :where(p, ul, ol) { font-size: var(--ads-text-base); line-height: 1.7; color: rgb(var(--ads-fg)); }
.ads-legal__section > :where(p, ul, ol, .ads-legal__note) { margin-top: .75rem; }
.ads-legal__section > h2 + *, .ads-legal__section > h3 + * { margin-top: .75rem; }
.ads-legal__body p + p { margin-top: 1rem; }
.ads-legal__body :where(ul, ol) { padding-left: 1.5rem; }
.ads-legal__body ul { list-style: disc; }
.ads-legal__body ol { list-style: decimal; }
.ads-legal__body li + li { margin-top: .375rem; }
.ads-legal__body :where(p, li) a { color: rgb(var(--ads-brand-strong)); text-decoration: underline; text-underline-offset: .15em; }
.ads-legal__foot { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--ads-line)); font-size: var(--ads-text-sm); line-height: 1.6; color: rgb(var(--ads-fg-muted)); }

@media (min-width: 900px) {
  .ads-legal__layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .ads-legal__toc { position: sticky; top: var(--ads-legal-offset, 5.5rem); max-height: calc(100vh - 7rem); overflow-y: auto; }
  /* En escritorio el índice es una columna, no un desplegable: «Contenido» queda como rótulo */
  .ads-legal__toc details { border: 0; background: none; }
  .ads-legal__toc summary { min-height: 0; padding: 0 .625rem .5rem; pointer-events: none; border: 0 !important; font-size: var(--ads-text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ads-fg-subtle)); }
  .ads-legal__toc summary::after { display: none; }
  .ads-legal__toc > details > ol { padding: 0; }
}
@media (pointer: coarse) { .ads-legal__toc a { min-height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .ads-legal__toc a, .ads-legal__toc summary::after { transition: none; } }
@media print {
  .ads-legal__toc, .ads-legal__draft, .ads-legal__note { display: none !important; }
  .ads-legal__layout { display: block; }
  .ads-legal__body { max-width: none; }
}

/* ===== ask-ai ===== */
/* 1.3.0 · «Pregúntale a tu IA»: enlaces externos a ChatGPT, Claude o Perplexity con una pregunta ya escrita. Sin backend, sin JS obligatorio, sin datos del visitante.
   Variantes: .ads-ask (sección, p. ej. junto al FAQ) y .ads-ask--float (<details> flotante). Neutral a propósito (azul, no naranja): no compite con el CTA principal. */
.ads-ask { --ads-ask-bottom: 1rem; color: rgb(var(--ads-fg)); }
/* 1.3.1 · Ancho propio de la variante en sección: no se estira más que una columna de lectura y se centra. Ajustable con --ads-ask-max. */
.ads-ask:not(.ads-ask--float) { max-width: var(--ads-ask-max, 50rem); margin-inline: auto; }
.ads-ask__box { background: rgb(var(--ads-surface)); border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-card); padding: clamp(1rem, 3vw, 1.5rem); }
.ads-ask__head { display: flex; gap: .75rem; align-items: flex-start; }
.ads-ask__spark { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--ads-radius-button); background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-band-fg)); }
.ads-ask__title { font-size: var(--ads-text-lg); line-height: 1.3; font-weight: 700; color: rgb(var(--ads-heading)); letter-spacing: -0.01em; }
.ads-ask__sub { margin-top: .25rem; font-size: var(--ads-text-sm); line-height: 1.5; color: rgb(var(--ads-fg-muted)); }

/* Selector de plataforma: radios reales (flechas del teclado, un solo tab stop), con forma de segmentos */
.ads-ask__platform { border: 0; margin: 1.25rem 0 0; padding: 0; min-width: 0; }
.ads-ask__platform legend { padding: 0; margin-bottom: .5rem; font-size: var(--ads-text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ads-fg-muted)); }
.ads-ask__seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.ads-ask__seg label { position: relative; }
.ads-ask__seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ads-ask__seg span { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: 0 .875rem; border: 1px solid rgb(var(--ads-fg-subtle)); border-radius: var(--ads-radius-button); background: rgb(var(--ads-surface)); color: rgb(var(--ads-fg)); font-size: var(--ads-text-sm); font-weight: 600; transition: background-color var(--ads-duration-fast) var(--ads-ease-out), border-color var(--ads-duration-fast) var(--ads-ease-out); }
.ads-ask__seg input:hover + span { border-color: rgb(var(--ads-navy-900)); }
.ads-ask__seg input:checked + span { background: rgb(var(--ads-navy-900)); border-color: rgb(var(--ads-navy-900)); color: rgb(var(--ads-band-fg)); }
.ads-ask__seg input:checked + span::before { content: ""; width: .35rem; height: .6rem; margin-right: .125rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); }
.ads-ask__seg input:focus-visible + span { outline: 2px solid rgb(var(--ads-ring)); outline-offset: 3px; }

/* Preguntas: cada una es un enlace; solo se ve el de la plataforma elegida (por defecto ChatGPT, el primero) */
.ads-ask__list { display: grid; gap: .5rem; margin: 1.25rem 0 0; }
.ads-ask__list a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .625rem .875rem; border: 1px solid rgb(var(--ads-line)); border-radius: var(--ads-radius-button); background: rgb(var(--ads-bg)); color: rgb(var(--ads-heading)); font-size: var(--ads-text-sm); font-weight: 600; line-height: 1.4; transition: border-color var(--ads-duration-fast) var(--ads-ease-out), background-color var(--ads-duration-fast) var(--ads-ease-out); }
.ads-ask__list a:hover { border-color: rgb(var(--ads-navy-900)); background: rgb(var(--ads-surface)); }
.ads-ask__out { color: rgb(var(--ads-fg-subtle)); }
.ads-ask__list [data-p] { display: none; }
.ads-ask:not(:has(input[value="claude"]:checked)):not(:has(input[value="perplexity"]:checked)) [data-p="chatgpt"],
.ads-ask:has(input[value="claude"]:checked) [data-p="claude"],
.ads-ask:has(input[value="perplexity"]:checked) [data-p="perplexity"] { display: flex; }
.ads-ask__notice { margin-top: 1rem; font-size: var(--ads-text-xs); line-height: 1.5; color: rgb(var(--ads-fg-muted)); }

/* Variante flotante: <details> (abre y cierra sin JS). Móvil primero: botón compacto abajo a la derecha y hoja a lo ancho. */
.ads-ask--float { position: fixed; right: 1rem; bottom: var(--ads-ask-bottom); z-index: 40; }
.ads-ask--float > summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--ads-radius-full); background: rgb(var(--ads-navy-900)); color: rgb(var(--ads-band-fg)); font-size: var(--ads-text-sm); font-weight: 600; cursor: pointer; list-style: none; box-shadow: 0 0 0 2px rgb(var(--ads-band-fg)), 0 0 0 3px rgb(var(--ads-navy-900)), 0 8px 24px rgb(0 0 0 / .35); transition: background-color var(--ads-duration-fast) var(--ads-ease-out); }
/* 1.4.1 · Se distingue sobre fondos oscuros y claros con un doble anillo: blanco por dentro (define el borde sobre azul oscuro) y azul por fuera (lo define sobre papel y blanco). Sigue siendo azul, no naranja. */
.ads-ask--float > summary::-webkit-details-marker { display: none; }
.ads-ask--float > summary:hover { background: rgb(var(--ads-navy-800)); }
.ads-ask--float > summary:focus-visible { outline: 2px solid rgb(var(--ads-ring)); outline-offset: 3px; }
.ads-ask--float[open] > summary { background: rgb(var(--ads-navy-800)); }
.ads-ask--float .ads-ask__box { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--ads-ask-bottom) + 3.5rem); max-height: calc(100vh - var(--ads-ask-bottom) - 5rem); overflow-y: auto; box-shadow: var(--ads-shadow-overlay, 0 16px 40px rgb(0 0 0 / .22)); }
@media (min-width: 640px) { .ads-ask--float .ads-ask__box { left: auto; width: 24rem; } }
@media (pointer: coarse) { .ads-ask__seg span { min-height: 2.75rem; } }
@media (prefers-reduced-motion: no-preference) { .ads-ask--float[open] .ads-ask__box { animation: ads-ask-in var(--ads-duration-base, 200ms) var(--ads-ease-out) both; } }
@keyframes ads-ask-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media print { .ads-ask--float { display: none; } }

/* ===== efectos ===== */
/* 0.3.0 · Capa de movimiento y luz. Tema: «el momento de certeza»: las cosas se asientan y se confirman una vez
   (el arco del sello se cierra, los checks se dibujan, el precio se reasienta). Nada se repite en bucle salvo el giro lentísimo del sello.
   Todo vive bajo prefers-reduced-motion: no-preference; sin él (o sin JS) la página queda completa y estática. */

/* Cifras: línea de luz superior; el conteo lo hace el JS opcional (data-ads-count), el valor final ya está en el HTML */

/* Planes: foco de luz que sigue al puntero y plan destacado con borde de luz */
.ads-plan::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(16rem circle at var(--ads-mx, 50%) var(--ads-my, 0%), rgb(var(--ads-brand) / 0.09), transparent 65%); transition: opacity var(--ads-duration-base) var(--ads-ease-out); }
.ads-plan--featured::after { background: radial-gradient(16rem circle at var(--ads-mx, 50%) var(--ads-my, 0%), rgb(var(--ads-band-fg) / 0.08), transparent 65%); }
.ads-plan.is-lit::after { opacity: 1; }
@property --ads-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ads-plan--featured::before { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ads-angle), transparent 0 55%, rgb(var(--ads-band-brand)) 78%, rgb(var(--ads-band-teal)) 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ads-plan--featured { box-shadow: var(--ads-shadow-overlay), 0 28px 60px -28px rgb(var(--ads-band-brand) / 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .ads-plan--featured::before { animation: ads-orbit 7s linear infinite; }
  .ads-plan--featured.is-away::before { animation-play-state: paused; }
  .ads-js .precio.ads-roll { animation: ads-roll 460ms var(--ads-ease-out); }
  .tramo-btn:active { transform: scale(0.96); }
  .tramo-btn { transition: background var(--ads-duration-fast) var(--ads-ease-out), color var(--ads-duration-fast) var(--ads-ease-out), transform var(--ads-duration-fast) var(--ads-ease-out); }
}
@keyframes ads-orbit { to { --ads-angle: 360deg; } }
@keyframes ads-roll { from { opacity: 0; transform: translateY(0.3em); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.precio { display: inline-block; }

/* Matriz: los checks se dibujan una vez al entrar en pantalla. La tabla NUNCA se oculta: solo los trazos de los checks, y solo si el JS ya está observando. */
.ads-matrix__soon { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: var(--ads-radius-full); background: rgb(var(--ads-navy-100)); color: rgb(var(--ads-navy-800)); font-size: var(--ads-text-xs); font-weight: 700; white-space: nowrap; }
.ads-matrix__soon::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: rgb(var(--ads-brand-strong)); }
@media (prefers-reduced-motion: no-preference) {
  .ads-matrix__yes path { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset 520ms var(--ads-ease-out) 200ms; }
  .ads-matrix-wrap[data-ads-hidden] .ads-matrix__yes path { stroke-dashoffset: 24; }
}

/* ===== tactil ===== */
/* 1.1.2 · Objetivos táctiles: en pantallas táctiles (pointer: coarse) toda zona pulsable llega a ≥ 44 px de alto sin cambiar el aspecto con puntero fino (escritorio). */
@media (pointer: coarse) {
  .ads-btn--sm { min-height: 2.75rem; }
  .ads-nav__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; }
  .ads-nav__logo { min-height: 2.75rem; }
  .ads-nav__ghost { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .ads-footer__list { gap: 0; margin-top: 0.4rem; }
  .ads-footer__list a { display: flex; align-items: center; min-height: 2.75rem; }
  .ads-footer__nav-link, .ads-footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .ads-faq__item > summary { min-height: 3.5rem; }
}
/* En el menú móvil los enlaces ya miden más de 44 px; no se duplica el relleno */
@media (pointer: coarse) and (max-width: 900px) { .ads-nav__link { min-height: 0; display: block; padding-block: 0.85rem; } }