/* Ticket D1 — Rediseño de Portada (referencias: A List Apart + Hacker News).
   Base blanco y negro, tipografia protagonica, sin gradientes/sombras. El
   rojo y el azul (--label-nuevo / --label-proximamente) existen para las
   etiquetas de estado y los links de autoria/comentarios de las entradas de
   articulo (replica estructural de alistapart.com, ajuste 2026-07-20) —
   nunca como fondo grande ni como paleta decorativa del resto del sitio
   (ver conflictos.txt). --font-serif se usa SOLO en titulos/dek de
   articulo; el wordmark gigante del home, los h1/h2 de herramientas/
   contratos y el encabezado "Herramientas Inmobiliarias Disponibles"
   (.mas-de-operaxion, pese al nombre de la clase — ver comentario junto a
   esa regla mas abajo) usan --font-display, el logo chico del header usa
   --font-logo (ambas en Geist desde el reemplazo de Oswald, ver comentario
   junto a --font-display mas abajo); todo lo demas — nav, botones, tablas,
   UI en general — usa --font-body (Inter desde el ajuste de tipografia
   estilo linear.app, ver comentario junto a --font-body mas abajo). */
:root {
  --paper: #FFFFFF;
  --surface: #F5F5F3;
  --ink: #111111;
  --ink-muted: #5C5C5C;
  --line: #DCDCDC;
  --accent: #111111;
  --accent-ink: #FFFFFF;
  --label-nuevo: #C0202A;
  --label-proximamente: #1D4ED8;
  --danger: #a1341f;
  /* Ticket_Rediseno_Completo_Home_Homi.md — rojo de marca para TODA la home
     en rediseño (hero, franja sin/con, badges, acentos). Arnold pidio
     explicitamente "el rojo exacto del logo" — #F31818, muestreado pixel a
     pixel de public/images/rojo6.png (anillo/centro del pin), NO
     --label-nuevo (#C0202A, un tono distinto ya reservado para las
     pastillas "Nuevo"/"categoria" — se queda intacto, sin tocar). Regla
     dura de --label-nuevo sigue aplicando por analogia: nunca fondo grande
     SOLIDO de este rojo — transparencias/tintes (rgba(243,24,24,alpha)) si
     estan permitidas por pedido explicito de Arnold. --brand-red-rgb
     existe solo para poder escribir esos rgba() sin repetir "243, 24, 24"
     suelto en cada regla. */
  --brand-red: #F31818;
  --brand-red-rgb: 243, 24, 24;
  /* Paleta EXCLUSIVA del widget "Mi Venta" (.mv-widget-*) -- pedido
     explicito: el CTA es a un producto PAGADO (el unico que cuesta en todo
     el sitio) y no puede verse como una caja mas de Operaxion (que es
     gratis, rojo de marca, --home-radius-pill). Oscuro fijo (no
     var(--ink), que se invierte con el tema) + dorado de acento — lee como
     "otra cosa" a proposito, ni rojo Operaxion ni gris/negro neutro del
     resto del sitio. */
  --mv-dark: #15120C;
  --mv-gold: #E8A317;
  --mv-gold-rgb: 232, 163, 23;
  /* Radios/sombras PROPIOS de las secciones nuevas del home (Ticket
     Rediseno-Completo-Home-Homi, ajuste de estetica 2026-08-18 tras revisar
     homiappliance.com + el mockup en rojo/blanco que aprobo Arnold) —
     variables APARTE de --radius, que se queda en 0 para el resto del
     sitio (herramientas, contratos, paneles). Solo las clases nuevas del
     home (.pill, .btn-home-*, .shot-tilt, tarjetas de estas secciones) las
     usan — ningun componente existente fuera del home las referencia, asi
     que esas ~40 paginas quedan exactamente igual que antes. */
  --home-radius: 20px;
  /* Radio COMPARTIDO para toda caja de texto tipo pildora/badge/boton
     (pildoras, botones, etiquetas, cajas de herramienta) -- antes convivian
     --home-radius (20px) y --home-radius-full (999px, capsula) y la mezcla
     de formas en la misma pagina se veia incongruente (reportado por
     Arnold). Se unifico primero a --home-radius (20px) para todas, pero en
     cajas CORTAS de una sola linea (badges de ~24-35px de alto) 20px sigue
     siendo mayor a la mitad del alto de la caja, asi que el navegador la
     sigue redondeando como capsula completa igual que antes -- seguian
     viendose capsulas (reportado de nuevo por Arnold). --home-radius-pill
     es deliberadamente MENOR que la mitad del alto de la caja mas corta del
     sitio (.badge-tendencia, ~24px) para que NINGUNA pildora/badge/boton,
     sin importar que tan corto sea, termine pareciendo una capsula. NO se
     usa en tarjetas/inputs grandes (.doc-card, .comparacion-col,
     .seguridad-card, .audiencias-card, .buscador-input...) -- esas siguen
     en --home-radius, 20px se ve bien ahi porque son cajas mucho mas altas
     donde el radio nunca llega a taparse solo. */
  --home-radius-pill: 10px;
  /* Curva/duracion de las animaciones del hero (tarjetas, marquee, hover de
     botones) — verificadas inspeccionando homiappliance.com (CSS real via
     devtools, no el HTML) y replicadas 1:1 a pedido de Arnold. --ease-reveal
     es una curva "ease-out expo" (arranca rapido, frena muy suave) usada en
     casi todas las transiciones/animations del hero de esa referencia. */
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --duration-hover: .35s;
  /* Entrada del badge/subtitulo/trust-line del hero (fade + sube 20px) y de
     cada palabra del titular (mascara que revela desde abajo) — mismas dos
     curvas/duracion que usa homiappliance.com para esos elementos
     especificamente (--ease-reveal de arriba es la de las tarjetas/marquee/
     hover de botones, --ease-text-mask es otra, mas suave, solo para el
     titular). */
  --duration-enter: .68s;
  --ease-text-mask: cubic-bezier(.22, 1, .36, 1);
  /* Ticket Diseño-06 — verde de tendencia del ticker de precios (sección 3
     del ticket, pide explícitamente verde/rojo/neutro). No existía ningún
     verde en este archivo (--accent aquí es negro, a diferencia del verde
     de dashboard.css) — se agrega siguiendo el mismo patrón que --danger:
     fijo salvo un ajuste de legibilidad en modo oscuro más abajo. No es la
     paleta decorativa que la nota de arriba reserva para rojo/azul — es un
     color funcional de datos (sube/baja), pedido explícito de este ticket. */
  --success: #1a7a3c;
  --radius: 0px;
  --measure: 66ch;
  /* Pedido directo de Arnold: Geist (Google Fonts, gratis — Vercel donó la
     fuente al catálogo) reemplaza a Oswald en TODOS los titulos y
     subtitulos (--font-display Y --font-logo), incluido el wordmark
     "Operaxion". Escala de pesos pedida: 900 en wordmark y titulos
     principales (h1, .logo-word, .masthead-title), 700 en titulos de
     seccion (h2) — nav/etiquetas/UI en general NO cambian, se quedan en
     --font-body (Inter), ver comentario de esa variable mas abajo. Pesos
     cargados en el <head> de cada página: 600/700/800/900 (los 4 que el
     archivo realmente usa via font-display/font-logo). */
  --font-display: "Geist", var(--font-body);
  --font-serif: "Newsreader", Georgia, "Iowan Old Style", serif;
  /* Pedido directo de Arnold (estilo linear.app) — Inter (rsms.me, cargada
     en el <head> de cada página) reemplaza a IBM Plex Sans como fuente de
     cuerpo/nav/UI. Se actualiza --font-body en vez de agregar un
     `font-family` suelto en :root: casi todo el archivo referencia esta
     variable explícitamente (body, nav, botones, tablas, ticker...), y un
     `font-family` a secas en :root solo afecta a elementos SIN una regla
     propia — la mayoría del sitio la tiene, así que quedaría medio
     cambiado. */
  --font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-logo: "Geist", var(--font-body);
  /* Datos monoespaciados (ticker de precios, cifras tabulares) — pedido
     aparte, no reemplaza a --font-body en el resto del sitio. */
  --font-mono: "Berkeley Mono", "Menlo", "Consolas", "Monaco", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Variable font de Inter (rsms.me la sirve como InterVariable cuando el
   navegador soporta font-variation-settings) — mismo criterio de
   progressive enhancement que pide rsms.me/inter en su propia guía de uso. */
@supports (font-variation-settings: normal) {
  :root {
    --font-body: "InterVariable", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  }
}

/* Ticket Diseno-01 — Modo oscuro. Solo cambian fondo/superficie/texto base
   (--paper/--surface/--ink/--ink-muted/--line) y --danger (para que un
   rojo oscuro siga siendo legible sobre fondo oscuro). --accent/
   --accent-ink/--label-nuevo/--label-proximamente NO cambian — regla dura
   del ticket, mismo criterio que sci-bot con su verde: cualquier color de
   marca/acento se mantiene identico en ambos modos, solo el fondo
   alrededor cambia. Gris muy oscuro (no #000000 puro) y texto casi blanco
   (no #FFFFFF puro), mismo criterio anti-contraste-excesivo que sci-bot.
   El atributo data-theme lo pone js/theme-init.js (inline, antes del
   primer paint) leyendo localStorage — evita flash del tema equivocado. */
:root[data-theme="dark"] {
  --paper: #121212;
  --surface: #1C1C1C;
  --ink: #EDEDED;
  --ink-muted: #A3A3A3;
  --line: #3A3A3A;
  --danger: #E2604A;
  --success: #4ADE80;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 12px;
}

/* Escala de pesos Geist pedida por Arnold: 900 en titulos principales (h1),
   700 en titulos de seccion (h2) — antes ambos compartian weight 800. */
h1 {
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.08;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.2;
}

/* Caja roja (antes invertida --ink/--paper) -- pedido explicito: "la caja
   de Comunidad de Cierre tambien debe estar en rojo", para que combine con
   el resto de cajas rojas de la pagina (badge "MERCADO" del hero). Colores
   fijos (--brand-red/--accent-ink), no var(--ink)/var(--paper) -- esas se
   invierten con el tema y el texto quedaba oscuro sobre rojo en modo
   oscuro (mismo bug ya corregido hoy en .pill--red y .comparacion-col--con
   .comparacion-col-label). font-size/weight se conservan igual al h1 de la
   página (pedido explícito original), la caja no los reemplaza. */
.comunidad-cierre-titulo {
  display: inline-block;
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.08;
  background: var(--brand-red);
  color: var(--accent-ink);
  padding: 4px 20px;
  border-radius: 6px;
}

/* id="comunidad-cierre" vive en el contenedor que envuelve título + texto
   introductorio + formulario (ver precios-distritos.html) — referenciado
   por el link "Comunidad de Cierre" del disclaimer de arriba en la misma
   página. .site-header es sticky (position:sticky, top:0) — sin este
   margen, saltar al ancla deja el título tapado detrás del header. */
#comunidad-cierre {
  scroll-margin-top: 90px;
}

/* id="rv-form-inicio" vive en el primer campo del formulario (Provincia) —
   el botón "Reportar una operación" de index.html ancla aquí en vez de a
   #comunidad-cierre, para bajar directo al formulario y saltarse el texto
   introductorio + caja de beneficios. Mismo offset que #comunidad-cierre,
   misma razón (header sticky). */
#rv-form-inicio {
  scroll-margin-top: 90px;
}

/* Ticket COPY-04 — id="que-no-es-operaxion" en legal.html, enlazado desde
   el link corto junto al formulario de Comunidad de Cierre. Mismo offset
   que #comunidad-cierre/#rv-form-inicio, misma razón (header sticky). */
#que-no-es-operaxion {
  scroll-margin-top: 90px;
}

/* Destino de los 4 accesos directos (.accesos-directos) entre el buscador y
   el primer bloque de herramientas — mismo offset que #comunidad-cierre,
   misma razón (.site-header sticky tapa el h2 si no hay margen). */
#grupo-propietarios,
#grupo-cierres-frecuentes,
#grupo-compradores,
#grupo-tramites {
  scroll-margin-top: 90px;
}

/* Sin regla propia hasta ahora (heredaba el h3 en negrita del navegador,
   sin Geist ni la escala del sitio) — hace falta para las subsecciones
   dentro de una resultado-card (ej. "Documentos necesarios"/"Pasos" en
   guia-primera-de-dominio.html), donde un h2 se veria igual de pesado que
   el titulo de la propia card (.ficha-head h2). Mas chico y liviano que
   h2 a proposito, para que la jerarquia se note. */
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 24px 0 10px;
}

p {
  margin: 0 0 12px;
}

.prose {
  color: var(--ink-muted);
  max-width: var(--measure);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-size: 0.75rem;
  margin: 0 0 10px;
}

.label-caps {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--ink-muted);
}

/* ── Etiquetas de estado (Ticket D1) ────────────────────────────────────────
   Unico lugar del sitio donde se usa rojo/azul — pastillas pequeñas, nunca
   fondo grande. NUEVO en rojo, PRÓXIMAMENTE en azul. */
.label-status {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.65rem;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--radius);
  color: #fff;
  white-space: nowrap;
}

.label-status--nuevo {
  background: var(--label-nuevo);
}

.label-status--proximamente {
  background: var(--label-proximamente);
}

/* Pill de categoria en las tarjetas de articulo (reemplaza "Nuevo",
   2026-07-21). Color cambiado a rojo (pedido de Arnold, mismo dia) — el
   pill de aviso legal/tributario paso a usar el azul (--label-proximamente)
   para no repetir el mismo rojo en ambos, ver articulos-hub.js/
   editor-articulos.js. */
.label-status--categoria {
  background: var(--label-nuevo);
}

/* Ticket Diseño-04 — pills de encendido/apagado (interruptores) y de estado
   generico (experimentos, etc). Deliberadamente en blanco/negro/gris — NO
   suman un tercer color a la regla dura de arriba (rojo/azul reservados a
   nuevo/proximamente): --accent/--accent-ink son fijos en ambos temas
   (igual que .nav-search-btn), asi que "activo" siempre se lee como
   pastilla solida sin invertirse con el modo oscuro. */
.label-status--on {
  background: var(--accent);
  color: var(--accent-ink);
}

.label-status--off {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

.num {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

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

  html {
    scroll-behavior: auto;
  }
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Ticket Diseño-06, sección 2 (Opción A) — mobile-first: los 4 ítems no
   caben en una sola línea en móvil (reportado por Arnold), así que el
   default ahora es un desplegable oculto de ancho completo, y la fila
   horizontal de siempre vuelve dentro de @media(min-width:768px) más abajo
   (mismo patrón "escritorio se agrega encima" que ya usa el resto del
   archivo). order:99 lo empuja SIEMPRE a su propia línea al final del
   header-row (que ya tiene flex-wrap:wrap) cuando está abierto — sin esto,
   .nav-search-btn/.theme-toggle podrían quedar flotando junto a la lista
   vertical en vez de arriba de ella. */
.site-nav {
  display: none;
  order: 99;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.site-nav.site-nav--open {
  display: flex;
}

.site-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

.site-nav a:last-child {
  border-bottom: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ícono de hamburguesa — 3 barras que se transforman en "X" al abrir
   (aria-expanded lo controla, sin JS extra por afuera del toggle de clase).
   Oculto en escritorio dentro de @media(min-width:768px) más abajo. */
.nav-toggle {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Boton circular de busqueda (replica alistapart.com, ajuste 2026-07-20) —
   unica excepcion deliberada a --radius:0, es un icono, no una superficie
   decorativa. background usa --accent (fijo), NO --ink (cambia en modo
   oscuro) — el trazo del SVG de la lupa esta hardcodeado en blanco, si el
   fondo se aclarara en modo oscuro el icono se volveria invisible. */
.nav-search-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: auto;
}

.nav-search-btn svg {
  width: 15px;
  height: 15px;
}

.nav-search-btn:hover,
.nav-search-btn:focus-visible {
  opacity: 0.85;
}

.logo-pin {
  display: block;
  height: 44px;
  width: auto;
}

.logo-word {
  font-family: var(--font-logo);
  font-weight: 900;
  letter-spacing: 0.01em;
  font-size: 1.05rem;
  color: var(--ink);
}

/* Switch de modo oscuro (Ticket Diseno-01) — mismo tamaño/forma que
   .nav-search-btn para que ambos icon-button convivan bien en el header,
   pero con fondo transparente + borde (no otro circulo negro solido al
   lado del de busqueda). Los 2 SVG (sol/luna) viven ambos en el DOM
   siempre; cual se ve depende de [data-theme] en el ancestro <html> —
   sin JS extra en cada click mas que togglear el atributo + localStorage. */
/* Paneles privados: el header solo tiene logo-word + este label ("Panel
   privado") como hijos directos de .header-row (sin site-nav/
   nav-search-btn) — antes flush-right via justify-content:space-between
   con exactamente 2 hijos. Al agregar el theme-toggle como 3er hijo, ese
   space-between ya no alcanza (repartiria 3 items en vez de 2 grupos), asi
   que el margin-left:auto pasa explicitamente al label para que seguir
   pegado a la derecha (mismo resultado visual de antes) y el toggle se le
   sume al lado via el gap del contenedor — mismo patron que
   nav-search-btn en el header publico. */
.header-row > .label-caps {
  margin-left: auto;
}

.theme-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--ink-muted);
}

.theme-toggle-icon {
  width: 17px;
  height: 17px;
  color: var(--ink);
}

.theme-toggle-icon--moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle-icon--sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle-icon--moon {
  display: block;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding: 40px 0 32px;
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn-primary {
  display: inline-block;
  width: 100%;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  opacity: 0.9;
}

/* Ticket Diseno-01, seccion 3 — detalle [▶] SOLO en el boton principal de
   accion de cada herramienta (el que calcula/genera/busca), aplicado via
   clase adicional en vez de a .btn-primary entero — .btn-primary tambien
   lo usan botones que YA tienen su propio diseño (ej. "Escribenos por
   WhatsApp →" de H17, formularios de los paneles privados) que el ticket
   pide explicitamente no tocar. Contenido en ::before (no en el texto del
   boton) para que sobreviva sin problema si JS cambia el textContent del
   boton (ej. "Enviando..." durante el envio del formulario de captura). */
.btn-accion::before {
  content: "[▶] ";
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Ficha de registro ──────────────────────────────────────────────────── */

.ficha-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
}

.proximamente-card .prose {
  margin-top: 12px;
}

.ficha-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.ficha-head h2 {
  margin: 0;
}

/* .btn-primary es width:100% por defecto (pensado para formularios de una
   columna) -- aca vive DENTRO de .ficha-head (flex, justify-content:
   space-between), al lado del <h2>, asi que necesita ancho de contenido en
   vez de llenar la fila entera. Verde fijo (no var(--success), que se
   invierte entre temas -- claro #1a7a3c/oscuro #4ADE80 -- pensado para
   texto/borde sobre fondo, no para un boton solido con texto blanco encima;
   con el verde claro del tema oscuro el texto blanco perderia contraste)
   para que "Exportar CSV" se distinga de un vistazo de "Descargar CSV de
   perfiles" (.btn-primary rojo/negro) en los otros paneles, en los 2 temas
   por igual -- mismo criterio de color fijo que la mascota y el rojo de
   marca en este archivo. */
#leads-export-csv {
  width: auto;
  flex-shrink: 0;
  background: #1a7a3c;
  color: #ffffff;
}

#leads-export-csv:hover,
#leads-export-csv:focus-visible {
  background: #1a7a3c;
  opacity: 0.85;
}

/* Ticket Diseño-04 — tarjetas de metrica (numero grande + etiqueta corta),
   para el resumen del dia de panel-admin.html. Fondo --paper (mas claro que
   --surface de la ficha-card contenedora) para que cada tile se distinga
   dentro de la card, sin introducir un color nuevo. Mobile-first: 2
   columnas por defecto, 4 en escritorio (media query al final del archivo). */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.metric-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px;
}

.metric-tile-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.1;
  color: var(--ink);
}

.metric-tile-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--ink-muted);
}

/* Arboles de Tu Cartera/Tu Operacion — la pregunta reemplaza al titulo
   repetido de la tarjeta (antes decia "Tu Cartera"/"Tu Operacion" de
   nuevo), en letra mas chica que un h3 normal. */
.ficha-head-pregunta {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.folio {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

.field input::placeholder {
  color: var(--ink-muted);
  opacity: 0.55;
}

.field input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.field input[aria-invalid="true"] {
  border-bottom-color: var(--danger);
}

/* Ticket H32 — primer campo de texto libre (multilinea) del hub, mismo
   tratamiento visual que .field input (borde inferior, sin caja completa),
   solo con resize vertical habilitado. */
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  resize: vertical;
}

.field textarea::placeholder {
  color: var(--ink-muted);
  opacity: 0.55;
}

.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.phone-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.phone-row input {
  border-bottom: none;
  flex: 1;
}

.phone-prefix {
  color: var(--ink-muted);
  padding-bottom: 8px;
}

.field-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 4px;
}

.amount-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.amount-row input {
  border-bottom: none;
  flex: 1;
}

.amount-prefix {
  color: var(--ink-muted);
  padding-bottom: 8px;
}

.field-error {
  display: block;
  font-size: 0.8rem;
  color: var(--danger);
  margin-top: 4px;
  min-height: 1em;
}

.privacy-notice {
  font-size: 0.82rem;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin: 4px 0 22px;
}

.form-message {
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--ink);
}

.form-message--error {
  color: var(--danger);
}

.capture-success {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  margin-top: 16px;
}

/* ── Home rediseñado (Ticket_Rediseno_Completo_Home_Homi.md) ───────────────
   Estética adaptada de homiappliance.com (arquitectura/forma/funcionamiento
   analizados de capturas reales del sitio) + mockup en rojo/blanco/negro
   que Arnold aprobó explícitamente (capturas/modelo 1.jpeg) — YA NO es una
   interpretación del texto del ticket, es una copia deliberada de un
   sistema visual de referencia, adaptada a nuestra paleta.

   Diferencia central con el resto del sitio: esquinas redondeadas, botones
   tipo píldora y sombras suaves en tarjetas — todo lo que el comentario de
   :root (Ticket D1) prohíbe en general ("sin gradientes/sombras",
   --radius:0). Se resuelve con --home-radius (ver :root) y clases nuevas
   (.pill, .btn-home-*) EXCLUSIVAS de estas
   secciones — ningún componente ya existente (botones/tarjetas de
   herramientas, contratos, paneles) cambia; --radius sigue en 0 para todo
   lo demás. Confirmado con Arnold: alcance limitado al home, no al sitio
   completo.

   Rojo de marca (--brand-red, #F31818, el rojo exacto del logo) pasa a ser
   el color de ACCIÓN principal de estas secciones (botones sólidos,
   números destacados, iconos) — equivalente directo al teal de Homi, ya
   NO restringido a "solo pastillas pequeñas" como en el resto del sitio
   (--label-nuevo se queda intacto con su regla original, sin tocar). */

/* ── Componentes compartidos: píldoras y botones del home ─────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--home-radius-pill);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pill--dark {
  background: var(--ink);
  color: var(--paper);
}

/* var(--accent-ink), no var(--paper) -- var(--paper) se invierte con el
   tema (se vuelve casi negro en modo oscuro) y el texto quedaba casi
   ilegible sobre el fondo rojo solido (reportado en modo oscuro, badge
   "MI VENTA" del modal). Blanco fijo, igual en los dos temas. */
.pill--red {
  background: var(--brand-red);
  color: var(--accent-ink);
}

.pill--neutral {
  background: var(--paper);
  color: var(--ink-muted);
  border: 1px solid var(--line);
}

.btn-home-primary,
.btn-home-outline,
.btn-home-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: var(--home-radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* .btn-home-primary / .btn-home-outline — hover verificado en
   homiappliance.com (CSS real via devtools) y replicado a pedido de Arnold:
   reemplaza la transicion generica de arriba por --duration-hover/
   --ease-reveal en las propiedades que cambian en su hover (background,
   box-shadow, transform). .btn-home-white no entra aca — su hover sigue
   siendo el opacity simple de siempre, no pedido en este ticket. */
.btn-home-primary,
.btn-home-outline {
  transition: background var(--duration-hover) var(--ease-reveal),
    color var(--duration-hover) var(--ease-reveal),
    box-shadow var(--duration-hover) var(--ease-reveal),
    transform var(--duration-hover) var(--ease-reveal);
}

/* color: var(--accent-ink), NO var(--paper) — --paper se oscurece en modo
   oscuro (#121212) y el texto casi desaparecia sobre el fondo rojo (fijo).
   --accent-ink es blanco fijo en los dos temas, igual criterio que el resto
   de badges/pildoras de este rediseño. */
.btn-home-primary {
  position: relative;
  overflow: hidden;
  background: var(--brand-red);
  color: var(--accent-ink);
  border: none;
  box-shadow: 0 4px 15px rgba(var(--brand-red-rgb), 0.25);
}

.btn-home-primary:hover,
.btn-home-primary:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(var(--brand-red-rgb), 0.35);
}

/* Flecha "→" del CTA principal: span propio (index.html) para que se pueda
   deslizar independiente del resto del texto en hover, transicion propia —
   mismo patron verificado en el boton primario de homiappliance.com. */
.btn-arrow {
  display: inline-block;
  transition: transform var(--duration-hover) var(--ease-reveal);
}

.btn-home-primary:hover .btn-arrow,
.btn-home-primary:focus-visible .btn-arrow {
  transform: translateX(4px);
}

/* Destello al hacer click/tap (:active) — pedido explicito: rojo de marca,
   no blanco/teal. position:relative + overflow:hidden de arriba lo recorta
   al mismo pill redondeado del boton; pointer-events:none para que nunca
   intercepte el click real (y no participa del layout — position:absolute
   no reserva espacio, no puede romper el boton en mobile). */
.btn-home-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(var(--brand-red-rgb), 0.55) 0%, rgba(var(--brand-red-rgb), 0) 65%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s;
  pointer-events: none;
}

.btn-home-primary:active::after {
  transform: translate(-50%, -50%) scale(1);
}

.btn-home-outline {
  background: var(--paper);
  color: var(--brand-red);
  border: 1.5px solid var(--brand-red);
  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.08);
}

/* Tinte semitransparente en hover (8% del rojo de marca), no el color
   plano/solido que tenia antes — mismo criterio verificado en el boton
   secundario de homiappliance.com (fondo cambia a un tinte, no a color
   solido). El texto se queda en --brand-red, legible sobre el tinte claro. */
.btn-home-outline:hover,
.btn-home-outline:focus-visible {
  background: rgba(var(--brand-red-rgb), 0.08);
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.14);
}

/* Bug real encontrado (reportado: "en modo oscuro las letras cambian a
   rojas") — background: var(--paper) se funde con el fondo de la pagina en
   modo oscuro (body tambien usa var(--paper), ambos #121212), asi que el
   boton pierde su forma de pildora y queda solo el texto/borde rojo
   flotando sobre la pagina. En modo oscuro especificamente: fondo con
   tinte fijo (no var(--paper)) + texto blanco fijo (--accent-ink) en vez
   de rojo, para que nunca dependa de que el fondo de la pagina sea claro. */
:root[data-theme="dark"] .btn-home-outline {
  background: rgba(var(--brand-red-rgb), 0.14);
  color: var(--accent-ink);
}

:root[data-theme="dark"] .btn-home-outline:hover,
:root[data-theme="dark"] .btn-home-outline:focus-visible {
  background: rgba(var(--brand-red-rgb), 0.22);
}

/* Variante para botones sobre fondo oscuro/rojo -- unico uso actual es el
   CTA "Quiero Agendar" del modal Mi Venta (Sección 8 que la originaba se
   elimino). */
.btn-home-white {
  background: var(--paper);
  color: var(--ink);
  border: none;
}

.btn-home-white:hover,
.btn-home-white:focus-visible {
  opacity: 0.85;
}

/* En modo oscuro el boton se invierte (fondo var(--paper) pasa a oscuro,
   texto var(--ink) pasa a #EDEDED) -- funciona, pero #EDEDED es un blanco
   "casi" (no puro), pedido explicito de Arnold: el texto del CTA de Mi
   Venta debe verse blanco. Solo el texto pasa a --accent-ink (blanco fijo
   puro) aca, el fondo se queda igual (ya tiene suficiente contraste). */
:root[data-theme="dark"] .btn-home-white {
  color: var(--accent-ink);
}

/* Ancho compartido por TODAS las secciones nuevas del home (Secciones 1-6,
   9-10 — la 7 sigue bloqueada, la 8 "CTA empieza gratis" se elimino) — más
   ancho que los 640px de .container base (pensados para columnas de
   lectura tipo artículo). Selector de descendencia en vez de repetir
   max-width en cada bloque. */
.hero-nuevo-grid,
.comparacion .container,
.destacadas .container,
.herramientas-placeholder .container,
.cifras-banda-grid,
.seguridad-banda-grid,
.faq .container {
  max-width: 1100px;
}

/* Tratamiento compartido de los screenshots reales de herramientas (Hero,
   Sección 3, Sección 5) — tarjeta flotante: esquinas redondeadas + sombra
   suave y difusa (no el offset duro típico del resto del sitio), leve
   perspectiva 3D. Screenshots REALES capturados de la app en uso — nunca
   ilustración ni mockup falso (criterio de aceptación 5 del ticket).

   aspect-ratio fijo + object-fit:contain (en vez de height:auto) -- las 4
   capturas que rotan en destacadas-rotador.js NO comparten tamaño real
   (728x568, 676x590, 726x590, 726x470: van de 1.15 a 1.55 de relacion de
   aspecto), asi que con height:auto cada rotacion cambiaba el alto real de
   .shot-tilt y arrastraba con ella el alto de todo el bloque .destacadas
   -- eso empujaba la seccion siguiente (Sección 6) verticalmente cada 3s
   (reportado por Arnold). Con una caja de proporcion fija, el bloque nunca
   cambia de tamaño sin importar cual de las 4 imagenes este visible; el
   contain evita recortar o estirar la captura si su relacion de aspecto no
   calza exacto con la caja (se ve completa, con margen a los lados o
   arriba/abajo segun el caso — nunca deformada). 4:3 fue el punto medio
   entre las 4 relaciones reales, para minimizar ese margen en cualquiera
   de las 4. */
.shot-tilt {
  display: block;
  width: 100%;
  max-width: 420px;
  /* height:auto explicito es necesario aca -- el <img> en el HTML trae
     atributos width/height de la 1ra imagen del pool (728x568) para evitar
     layout shift antes de que cargue JS/CSS; sin este height:auto, esos
     atributos ganan como "alto definido" y el navegador nunca le pide su
     alto al aspect-ratio de abajo (se quedaba fijo en 568px sin escalar,
     ignorando el ancho real de la caja). */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--paper);
  border-radius: var(--home-radius);
  border: 1px solid var(--line);
  transform: perspective(1200px) rotateY(-6deg) rotateX(1.5deg);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18), 0 8px 20px rgba(17, 17, 17, 0.08);
}

@media (min-width: 900px) {
  .shot-tilt {
    max-width: 100%;
  }
}

/* ── Sección 1 — Hero ──────────────────────────────────────────────────── */
.hero-nuevo {
  padding: 20px 0 32px;
  border-bottom: 1px solid var(--line);
  /* Red de seguridad: .doc-stack rota 2 de sus 3 tarjetas, y una caja
     rotada ensancha su propio bounding box (no solo lo que muevan sus
     translate/margin) — confirmado que sin esto el abanico podía forzar
     scroll horizontal de toda la pagina en mobile aun con offsets ya
     ajustados. No afecta contenido normal, nada mas en esta seccion se
     acerca a sus bordes. */
  overflow-x: hidden;
}

.hero-nuevo-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-nuevo-copy {
  min-width: 0;
}

/* Entrada del hero (badge/titulo/subtitulo/trust-line) — verificado en
   homiappliance.com. heroFadeUp: fade + sube 20px, usada por badge/
   subtitulo/trust-line con --ease-reveal. textMaskReveal: solo para las
   palabras del titular (mascara translateY(110%→0) con --ease-text-mask,
   una curva mas suave, distinta a --ease-reveal) — ver .hero-word* abajo.
   Los botones (.hero-nuevo-botones) NO animan — verificado que en la
   referencia tampoco lo hacen, aparecen estaticos entre el titulo y el
   trust-line. */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes textMaskReveal {
  0% {
    transform: translateY(110%);
  }
  100% {
    transform: translateY(0);
  }
}

.hero-nuevo-badge {
  /* .pill trae white-space:nowrap (pensado para pastillas cortas como
     "GRATIS"/"Antes de empezar") — este badge tiene texto largo y en
     mobile lo desbordaba fuera del viewport si no se anula aquí. En
     escritorio (columna ~589px, .hero-nuevo-copy flex:1 1 56% dentro de
     .hero-nuevo-grid) este mismo texto entra comodo en una sola linea; solo
     en mobile envuelve a 2 lineas y necesita el ajuste de ancho de abajo
     (el border-radius ya no hace falta overridearlo aca: .pill usa
     --home-radius en todo el sitio, no solo en mobile). */
  white-space: normal;
  text-align: left;
  margin: 0 0 20px;
  opacity: 0;
  animation: heroFadeUp var(--duration-enter) var(--ease-reveal) 80ms both;
}

/* Mismo corte que .hero-nuevo-trust arriba (fila de confianza) -- por debajo
   de esto la columna es angosta y el badge SI envuelve a 2 lineas. */
@media (max-width: 640px) {
  .hero-nuevo-badge {
    /* Sin esto el pill (inline-flex) se estira al ancho completo disponible
       de la columna -- max-width:fit-content no alcanza aca porque el texto
       completo en una sola linea (max-content) es mas ancho que el
       contenedor, asi que fit-content igual cae de vuelta al 100%
       disponible. Un tope explicito en ch fuerza el quiebre a 2 lineas mas
       parejas en vez de dejar un hueco vacio grande despues de la 2da linea
       ("Perú"), y text-wrap:balance reparte el texto de forma mas pareja. */
    max-width: 32ch;
    text-wrap: balance;
  }
}

.hero-nuevo-titulo {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
  color: var(--ink);
  margin: 0 0 16px;
}

/* Mascara por palabra: .hero-word recorta (overflow:hidden) del tamaño
   exacto de su palabra; .hero-word-inner es el texto real, que arranca
   corrido una altura completa hacia abajo (110%, un poco de margen extra
   sobre el 100% para que no se vea el borde inferior) y sube hasta su
   posicion final. --wd (custom property inline en cada palabra, index.html)
   escalona la entrada palabra por palabra. */
.hero-word {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.hero-word-inner {
  display: inline-block;
  transform: translateY(110%);
  animation: textMaskReveal .9s var(--ease-text-mask) var(--wd, .2s) forwards;
}

.hero-nuevo-subtitulo {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0 0 24px;
  opacity: 0;
  animation: heroFadeUp var(--duration-enter) var(--ease-reveal) .62s both;
}

.hero-nuevo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

.hero-nuevo-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  opacity: 0;
  animation: heroFadeUp .5s var(--ease-reveal) .94s both;
}

.hero-nuevo-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}

.hero-nuevo-trust-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-red);
  flex: none;
}

.hero-nuevo-trust-sep {
  color: var(--line);
}

/* En pantallas angostas los 2 items no entran en una sola fila y el flex-
   wrap corta justo entre el separador y el segundo item -- el "•" queda
   huerfano al final de la primera linea en vez de separar nada. Se apila en
   columna y se oculta el separador (ya no hace falta, cada item vive en su
   propia linea). */
@media (max-width: 640px) {
  .hero-nuevo-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero-nuevo-trust-sep {
    display: none;
  }
}

.hero-nuevo-mockup {
  display: flex;
  justify-content: center;
  /* Sin esto, el min-width:auto por defecto de un item flex le gana a
     max-width:100% de la imagen hija y el mockup desborda el viewport en
     vez de encogerse en pantallas angostas. */
  min-width: 0;
}

@media (min-width: 900px) {
  .hero-nuevo-grid {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .hero-nuevo-copy {
    flex: 1 1 56%;
  }

  .hero-nuevo-mockup {
    flex: 1 1 44%;
  }
}

/* Pila de 3 tarjetas del hero que rotan cada 5s (doc-stack.js) entre un
   pool de capturas REALES de herramientas con datos de ejemplo — todas
   recortadas al mismo tamaño (840x660, ver public/images/hero-mockup-*.png)
   para que la rotación no deforme ninguna al pasar de una posición a otra.
   Fan de 3 tarjetas superpuestas (una detrás a la izquierda, una detrás a
   la derecha, una al frente centrada), inspirado en la referencia de
   Ticket_Rediseno_Completo_Home_Homi.md (capturas/Captura de pantalla
   2026-08-18 114946.png). */
.doc-stack {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 840 / 660;
  margin: 0 auto;
}

.doc-card {
  position: absolute;
  inset: 0;
  border-radius: var(--home-radius);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18), 0 8px 20px rgba(17, 17, 17, 0.08);
}

/* Fade-in de entrada escalonado (verificado en homiappliance.com — solo
   opacity, la posicion/rotacion de cada tarjeta ya es la final, fija por
   .doc-card--*, no se anima). Centro primero, izquierda despues, derecha al
   final — .18s de diferencia entre cada una, igual que la referencia. */
@keyframes heroFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Offset menor por defecto (mobile) — el abanico completo sumado al ancho
   de .doc-stack se salía del viewport en pantallas angostas (scrollWidth >
   clientWidth, confirmado). Se agranda solo desde 900px. */
.doc-card--back-left {
  transform: rotate(-8deg) translate(-14px, 8px);
  z-index: 1;
  animation: heroFadeIn .7s var(--ease-reveal) .68s both;
}

.doc-card--back-right {
  transform: rotate(8deg) translate(14px, 8px);
  z-index: 1;
  animation: heroFadeIn .7s var(--ease-reveal) .86s both;
}

.doc-card--front {
  transform: rotate(0deg);
  z-index: 2;
  animation: heroFadeIn .7s var(--ease-reveal) .5s both;
}

.doc-card-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.doc-card-shot--fade {
  opacity: 0;
}

@media (min-width: 900px) {
  .doc-stack {
    max-width: 400px;
  }

  .doc-card--back-left {
    transform: rotate(-8deg) translate(-24px, 12px);
  }

  .doc-card--back-right {
    transform: rotate(8deg) translate(24px, 12px);
  }
}

/* ── Sección 2 — franja de 4 features, marquee dentro del hero ───────────
   Reemplaza la vieja .franja-trust (grilla estatica debajo del hero) — Ver
   comentario en index.html. Mismo patron tecnico que homiappliance.com
   (verificado con devtools) y que .ticker-track (ya usado en este mismo
   archivo para el ticker de precios): loop infinito por translateX(-50%)
   sobre contenido duplicado una vez, para que el reinicio del loop caiga
   justo donde ya se veia la misma info, sin salto perceptible. */
.hero-marquee {
  overflow: hidden;
  width: 100%;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: heroFadeIn .8s ease 1.15s both;
}

.hero-marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: heroMarquee 42s linear infinite;
  will-change: transform;
}

/* Pausa en hover Y en focus-within (obligatorio, no cosmetico — es lo que
   permite pausar navegando con Tab/teclado, no solo con mouse). tabindex="0"
   en el propio .hero-marquee (index.html) es lo que hace que exista algo
   enfocable ahi para que :focus-within tenga efecto real al llegar con Tab
   — un <div> sin tabindex nunca dispara :focus-within por si solo. */
.hero-marquee:hover .hero-marquee-track,
.hero-marquee:focus-within .hero-marquee-track {
  animation-play-state: paused;
}

.hero-marquee:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@keyframes heroMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.hero-marquee-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-muted);
  perspective: 200px;
}

.hero-marquee-item strong {
  color: var(--ink);
  font-weight: 700;
}

/* Icono suelto (sin tile de fondo, a diferencia del franja-trust viejo) —
   en una fila que se desliza el tile cuadrado competia visualmente con el
   texto; el icono a secas, mismo color de acento, ya distingue cada item.
   Gira sobre su eje vertical (rotateY) en loop propio, desfasado del scroll
   horizontal de .hero-marquee-track — perspective en el item padre (arriba)
   para que el giro se lea con profundidad y no como un simple aplastamiento. */
.hero-marquee-icon {
  width: 18px;
  height: 18px;
  color: var(--brand-red);
  flex-shrink: 0;
  animation: heroMarqueeIconSpin 3s linear infinite;
}

@keyframes heroMarqueeIconSpin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* ── Sección 4 — comparación Sin/Con ──────────────────────────────────── */
.comparacion {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.comparacion-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}

/* Tarjetas separadas con gap (no zebra pegada con línea de 2px) — mismo
   patrón de "2 tarjetas redondeadas" que Homi, cada una con su propio
   radio en vez de una grilla compartiendo fondo de borde. */
.comparacion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.comparacion-col {
  padding: 32px 28px;
  border-radius: var(--home-radius);
  /* Sin esto, el min-width:auto por defecto de un item de grid le gana a
     1fr y la columna se estira para no partir palabras/texto largo — el
     mismo bug de fondo ya corregido en .hero-nuevo-copy/.hero-nuevo-mockup,
     aquí en su variante de CSS Grid en vez de flexbox. */
  min-width: 0;
}

.comparacion-col--sin {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* var(--accent), no var(--ink) -- var(--ink) se invierte con el tema (se
   vuelve CLARO en modo oscuro, ver :root[data-theme="dark"] arriba) y esta
   es una tarjeta de acento (equivalente al card oscuro fijo de
   .mv-widget-fab/.site-footer): tiene que verse IGUAL de oscura en los dos
   temas, no camuflarse invirtiendose (bug reportado: en modo oscuro se
   volvia una caja clara con texto oscuro). */
.comparacion-col--con {
  background: var(--accent);
}

/* Pastilla de encabezado con icono — mismo patrón que "✕ SIN HOMI"/"✓ CON
   HOMI" del sitio de referencia: gris neutro para el lado negativo, rojo
   sólido para el positivo (equivalente al teal de Homi). */
.comparacion-col-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
  border-radius: var(--home-radius-pill);
  padding: 7px 14px;
  margin: 0 0 20px;
}

.comparacion-col--sin .comparacion-col-label {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

/* En modo oscuro, var(--ink-muted) (#A3A3A3, gris) se leia poco -- pedido
   explicito: "SIN OPERAXION" en blanco. Solo en modo oscuro, en claro se
   queda el gris neutro intencional de siempre. */
:root[data-theme="dark"] .comparacion-col--sin .comparacion-col-label {
  color: var(--accent-ink);
}

/* var(--accent-ink), no var(--paper) -- var(--paper) se invierte con el
   tema (se vuelve casi negro en modo oscuro) y el texto "CON OPERAXION"
   quedaba casi ilegible sobre el fondo rojo solido (reportado en modo
   oscuro). Blanco fijo, igual en los dos temas. */
.comparacion-col--con .comparacion-col-label {
  background: var(--brand-red);
  color: var(--accent-ink);
}

.comparacion-col-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.6rem;
  line-height: 1;
}

.comparacion-col--sin .comparacion-col-label-icon {
  background: var(--ink-muted);
  color: var(--paper);
}

.comparacion-col--con .comparacion-col-label-icon {
  background: var(--accent-ink);
  color: var(--brand-red);
}

.comparacion-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comparacion-lista li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.45;
}

.comparacion-texto {
  min-width: 0;
  flex: 1 1 auto;
}

.comparacion-col--sin li {
  color: var(--ink);
}

.comparacion-col--con li {
  color: var(--accent-ink);
}

.comparacion-icono {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  margin-top: 1px;
}

.comparacion-icono--x {
  color: var(--paper);
  background: var(--brand-red);
}

.comparacion-icono--check {
  color: var(--accent);
  background: var(--accent-ink);
}

@media (min-width: 768px) {
  .comparacion-grid {
    grid-template-columns: 1fr 1fr;
  }

  .comparacion-col {
    padding: 40px 36px;
  }
}

/* ── Sección 5 — herramientas destacadas (bloque unico rotativo) ─────────
   Antes eran 4 bloques .destacada-bloque alternados uno debajo del otro —
   ahora es un solo .destacadas-rotador de layout fijo (imagen izquierda,
   texto derecha) cuyo contenido cambia cada 3s via destacadas-rotador.js
   (mismo patron que .doc-card-shot--fade del hero: opacity a 0 antes de
   reemplazar src/texto, se quita la clase despues). */
.destacadas {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

/* Pegado arriba del bloque que rota en escritorio — margen chico a
   proposito (pedido explicito: "que no haya tanta separación entre el
   bloque y el título"). En mobile grid-area lo manda ARRIBA de la imagen
   (ver .destacadas-rotador) — reportado que se veia debajo de las 4
   imagenes que rotan, quedaba fuera de lugar. */
.destacadas-titulo {
  grid-area: titulo;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Grid (no flex) especificamente para poder reordenar el titulo ANTES de
   la imagen solo en mobile (grid-template-areas de abajo) sin tocar el
   orden real del DOM ni duplicar el <h2> -- con flex, el orden visual solo
   se puede alterar por item DIRECTO del contenedor, y el titulo vive
   anidado dentro de .destacada-col-texto junto al contenido que rota. */
.destacadas-rotador {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'titulo'
    'mockup'
    'contenido';
  gap: 28px;
}

.destacada-mockup {
  grid-area: mockup;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Deja de generar su propia caja -- sus hijos (.destacadas-titulo y
   .destacada-texto) pasan a ser items directos del grid de
   .destacadas-rotador de arriba, que es lo que permite ubicarlos en areas
   distintas (titulo arriba de todo en mobile, junto al texto en
   escritorio) sin romper el agrupamiento semantico en el HTML. El titulo
   sigue viviendo fuera de #destacada-rotador-texto (el que rota) por la
   misma razon de siempre: nunca debe desvanecerse junto con el contenido
   que cambia cada 3s. */
.destacada-col-texto {
  display: contents;
}

.destacada-texto {
  grid-area: contenido;
  min-width: 0;
}

/* Identificador de herramienta: pildora rellena de rojo con letras blancas
   (pedido explicito) — color: var(--accent-ink), NO var(--paper), porque
   --paper se oscurece en modo oscuro (#121212) y el texto dejaria de ser
   blanco; --accent-ink es #FFFFFF fijo en ambos temas, igual que
   --brand-red de fondo (ningun color de marca cambia entre temas, mismo
   criterio que --label-nuevo/--label-proximamente en :root). */
.destacada-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  background: var(--brand-red);
  color: var(--accent-ink);
  padding: 6px 14px;
  border-radius: var(--home-radius-pill);
  margin: 0 0 10px;
}

.destacada-nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--ink);
  margin: 0 0 10px;
}

.destacada-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0;
}

/* Fundido + leve slide al rotar (--ease-reveal, misma curva que el resto
   del hero) — .destacada-rotador-fx define la transicion, .destacada-
   rotador-fade es la clase que agrega/saca destacadas-rotador.js. */
.destacada-rotador-fx {
  transition: opacity 0.3s var(--ease-reveal), transform 0.3s var(--ease-reveal);
}

.destacada-rotador-fade {
  opacity: 0;
  transform: translateY(10px);
}

@media (min-width: 900px) {
  .destacadas-rotador {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'mockup titulo'
      'mockup contenido';
    align-items: center;
    gap: 56px;
  }
}

/* ── Sección 6 — franja de cifras/autoridad (fondo con foto) ──────────── */
.cifras-banda {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
  color: var(--paper);
}

.cifras-banda-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Degradado negro sutil sobre la mitad derecha de la foto (pedido
   explicito de Arnold, en los dos breakpoints) — transparente hasta el
   50%, oscurece solo hacia el borde derecho. Va en un ::after en vez de en
   el shorthand background de .cifras-banda-bg porque la FOTO se pone vía
   background-image inline (index.html, cambia por instancia) — declarar
   background-image tambien aca perderia contra el inline y taparia la
   foto en vez de superponerse a ella. Alpha bajo (0.4, antes 0.88 en un
   diseño anterior con tinte rojo — ver historial) para que siga leyendose
   como foto y no como una caja oscura. */
.cifras-banda-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
}

.cifras-banda-grid {
  position: relative;
  z-index: 2;
  display: grid;
  /* 1 sola columna en mobile -- repeat(2,1fr) apilaba los 4 items en un
     cuadrado 2x2 con etiquetas de largo muy distinto por fila ("+30
     herramientas..." junto a "100% enfocado...") que se veia desparejo
     (reportado por Arnold). Una lista vertical de 4 lee mejor que un
     collage 2x2 para este tipo de cifra+etiqueta corta. */
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: center;
}

/* Número en --brand-red — equivalente al resaltado teal de Homi sobre la
   foto ("30 seg", "2 idiomas"...). line-height:1 + margin:0 (antes 0 0 8px,
   con el line-height:1.6 heredado del body) -- el numero y su etiqueta
   quedan como un solo bloque compacto, pedido explicito para que el resto
   de la foto (el icono de ubicacion en el parque) respire sin texto
   pegado. */
.cifras-numero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  color: var(--brand-red);
  text-shadow: 0 1px 3.5px rgba(0, 0, 0, 0.85), 0 2px 10.5px rgba(0, 0, 0, 0.7);
  line-height: 1;
  margin: 0;
}

.cifras-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3.5px rgba(0, 0, 0, 0.85), 0 2px 10.5px rgba(0, 0, 0, 0.7);
  max-width: 24ch;
  margin: 0 auto;
  /* .cifras-banda-grid alinea cada .cifras-item por su borde INFERIOR
     (align-items:flex-end, pedido explicito de Arnold, ver comentario mas
     abajo). Sin una altura reservada aca, si la etiqueta de un item algun
     dia envuelve a mas lineas que la del otro (ej. un cambio de copy futuro,
     o un ancho de viewport puntual donde una envuelve distinto que la otra),
     el borde de ARRIBA de cada item -- donde vive el numero -- se corre
     segun cuantas lineas ocupe su propia etiqueta, y "+30"/"100%" quedan a
     distinta altura. min-height reserva 2 lineas siempre para blindar contra
     eso -- verificado en vivo (mobile y escritorio, fuentes reales) que con
     el copy actual los 2 numeros YA caian alineados sin este min-height (las
     2 etiquetas envuelven a 2 lineas por igual); esto es resguardo
     preventivo, no la correccion de un desalineamiento visible hoy. */
  min-height: calc(1.6em * 2);
}

/* Solo 2 cifras en vez de 4 (pedido explicito, "la imagen esta recargada de
   texto") -- se ocultan la 3ra y 4ta ("S/0"/"Real") SIEMPRE, en los dos
   breakpoints (1ro se pidio para mobile, despues "hacer lo mismo con la
   version de escritorio" -- nunca vuelven a mostrarse en ningun ancho). */
.cifras-item:nth-child(3),
.cifras-item:nth-child(4) {
  display: none;
}

/* Mobile: las 2 cifras que quedan ("+30"/"100%") van JUNTAS en la linea
   extrema de abajo de la foto, lado a lado (flex-direction:row +
   justify-content:space-between + align-items:flex-end), en vez del
   arriba/abajo de la version anterior -- probado en el navegador que las
   dos entran comodas en una fila sin apretarse, y deja TODA la parte de
   arriba de la foto (cerro/cielo, el icono de ubicacion en el parque)
   completamente libre de texto, mas despejado todavia que la version
   dividida. Padding de .cifras-banda reducido a 4px SOLO aca (mobile,
   3ra iteracion -- 56px original, 16px en la 2da, seguia sin llegar lo
   bastante abajo) para que la fila quede pegada al borde de abajo.
   min-height compensa exactamente lo que se le quito al padding
   (2 * (56px - 4px) = 104px) para que el alto TOTAL de la sección siga
   siendo el mismo que con las 4 cifras apiladas -- pedido explicito: "que
   la imagen mantenga la amplitud y altura cuando tenia los 4 features". */
@media (max-width: 767px) {
  .cifras-banda {
    padding: 4px 0;
  }

  .cifras-banda-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    min-height: calc(4 * 103px + 3 * 32px + 104px);
  }
}

/* Escritorio: mismo criterio que mobile pero en horizontal -- "+30" al
   extremo IZQUIERDO, "100%" al extremo DERECHO (flex-direction:row +
   justify-content:space-between), en vez del grid de 4 columnas que
   ocupaba todo el ancho parejo.

   min-height:480px (seccion total ~592px con el padding) -- NO es solo
   para el texto (que con line-height:1/margin:0 ya cabe en ~103px). Es
   para la FOTO: a ~1100px de ancho x unos 215px de alto (lo que media
   antes) la proporcion de la caja (5.1:1) es tan angosta comparada con la
   proporcion real de la foto (2752x1536, 1.79:1) que background-size:cover
   tiene que recortar tanto verticalmente que el pin + el parque completo
   NUNCA entraban enteros sin importar el background-position -- probado
   con varios valores, siempre se cortaba la punta del pin o el circulo
   del parque (reportado: "que se vea todo el parque... sin quitar el alto
   actual"). Con ~480-500px de foto visible si entra completo. */
@media (min-width: 768px) {
  .cifras-banda-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* align-items:flex-end (antes center) -- pedido explicito de Arnold:
       que "+30"/"100%" bajen al extremo de abajo de la foto en escritorio,
       igual que ya pasa en mobile, pero sin tocar min-height/padding (la
       distancia y altura vertical de la seccion quedan igual). */
    align-items: flex-end;
    min-height: 480px;
  }

  /* Enfoca el recorte hacia abajo (el pin + el parque estan en la mitad
     inferior de la foto, no en el centro geometrico) -- con
     background-position:center (el de mobile, .cifras-banda-bg base) se
     perdia la mitad de abajo del pin. */
  .cifras-banda-bg {
    background-position: center 58%;
  }
}

/* Sección 8 "CTA empieza gratis" (.cta-gratis*) eliminada — pedido
   explicito de Arnold ("la caja inmediatamente despues de Articulos que
   empieza con Gratis"). Articulos (.destacados) queda seguido directo por
   Sección 9 (.seguridad-banda). */

/* ── Widget flotante "Mi Venta" (Ticket Widget-MiVenta) ───────────────────
   Boton flotante (FAB) + modal, punto de entrada principal de trafico
   pagado hacia miventa.pro. Inyectado por JS (mi-venta-widget.js) en vez
   de vivir en el HTML de cada pagina — el sitio no tiene plantilla
   compartida (~52 paginas HTML sueltas), asi que un solo script cargado
   por pagina es mas mantenible que duplicar el markup en cada una. Por
   ahora solo se carga en index.html (confirmado con Arnold: rollout a mas
   paginas queda para despues, una linea de <script> por pagina).

   El MODAL comparte el lenguaje visual de .cta-gratis-card (Sección 8):
   tarjeta oscura (var(--ink), se invierte con --paper entre temas) +
   resplandor rojo de marca detras (::before radial-gradient), boton
   blanco (.btn-home-white) -- eso SI lo pidio el ticket asi.

   El BOTON (FAB), en cambio, usa la paleta --mv-* (oscuro fijo + dorado)
   y forma de capsula completa (border-radius:999px) EN VEZ DEL rojo de
   marca / --home-radius-pill del resto de botones del sitio -- pedido
   explicito: es el CTA a Mi Venta, el UNICO producto pagado de todo el
   sitio, y no puede leerse como una caja mas de Operaxion (que es
   gratis). Mismo motivo por el que --mv-dark es un hex fijo y no
   var(--ink): el boton tiene que verse IGUAL en los dos temas, no
   camuflarse invirtiendose como el resto de componentes del home.

   z-index por encima de .site-header (100) para que el modal tape incluso
   el header sticky. */
.mv-widget-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  border: 1.5px solid rgba(var(--mv-gold-rgb), 0.95);
  border-radius: 999px;
  background: var(--mv-dark);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 0 8px rgba(var(--mv-gold-rgb), 0.55));
  animation: mvWidgetPulse 2.4s ease-in-out infinite;
  transition: transform var(--duration-hover) var(--ease-reveal);
}

.mv-widget-fab:hover,
.mv-widget-fab:focus-visible {
  transform: translateY(-3px);
}

/* Anillo dorado que se expande y se desvanece (alpha a 0 al final) --
   pulso de notificacion, mas resplandeciente que la version anterior a
   pedido explicito de Arnold (2026-08-29): glow ambiental fijo (0 0 22px)
   que no depende del pulso, mas un anillo que expande mas lejos (18px vs
   14px antes) y con mas alpha (0.75 vs 0.6 antes). Dorado, no rojo de
   marca -- mismo criterio de todo el widget: no se confunde con las
   animaciones/acentos de Operaxion. prefers-reduced-motion ya esta
   cubierto por la regla global (arriba del archivo, anula
   animation-duration/iteration-count en *) -- sin logica extra aca, el
   boton queda estatico automaticamente (pero conserva el glow ambiental
   fijo, que no es parte de la animacion). */
@keyframes mvWidgetPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--mv-gold-rgb), 0.75), 0 0 22px 3px rgba(var(--mv-gold-rgb), 0.5),
      0 6px 20px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 18px rgba(var(--mv-gold-rgb), 0), 0 0 22px 3px rgba(var(--mv-gold-rgb), 0.5),
      0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

.mv-widget-fab-icon {
  width: 22px;
  height: 22px;
  color: var(--mv-gold);
  flex-shrink: 0;
}

.mv-widget-fab-label {
  white-space: nowrap;
}

/* "Diagnóstico" corto -- reemplaza al label largo en pantallas angostas (ver
   media query de abajo). Oculto por defecto, nunca convive con
   .mv-widget-fab-label al mismo tiempo. */
.mv-widget-fab-label-corta {
  display: none;
  white-space: nowrap;
  font-weight: 800;
}

/* Label visible siempre, no tooltip -- en mobile (mayoria del trafico
   pagado via ads) un tooltip por hover nunca se ve. En pantallas angostas
   "Diagnóstico de tu Propiedad" no entra -- en vez de recortar a un icono
   solo (quedaba sin ninguna palabra, pedido explicito: "no hay texto
   porque es largo"), se cambia la lupa por el nombre corto "Mi Venta". */
@media (max-width: 420px) {
  .mv-widget-fab {
    padding: 10px 16px;
    font-size: 0.8rem;
  }

  .mv-widget-fab-icon {
    display: none;
  }

  .mv-widget-fab-label {
    display: none;
  }

  .mv-widget-fab-label-corta {
    display: inline;
  }
}

.mv-widget-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 17, 17, 0.6);
  opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-reveal);
}

.mv-widget-overlay[hidden] {
  display: none;
}

.mv-widget-overlay--visible {
  opacity: 1;
}

/* Wrapper SIN overflow:hidden (a diferencia de .mv-widget-modal-box de
   abajo) -- existe solo para que .mv-widget-modal-close pueda asomar fuera
   de la tarjeta con top/right negativos sin que el overflow-y:auto del
   scroll interno la recorte. Mismo ancho que la tarjeta (width/max-width
   calzan con .mv-widget-modal-box) para que top/right negativos queden
   alineados con la esquina visual real. */
.mv-widget-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  transform: scale(0.92) translateY(12px);
  transition: transform var(--duration-hover) var(--ease-reveal);
}

.mv-widget-overlay--visible .mv-widget-modal {
  transform: scale(1) translateY(0);
}

.mv-widget-modal-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ink);
  border-radius: 28px;
  padding: 48px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Capa de fondo opcional, mismo patron que .cifras-banda-bg/
   .articulos-card-bg -- vacia por ahora (pedido explicito: "sin foto por
   ahora"). El dia que se quiera agregar una imagen, alcanza con setear
   background-image inline en este div (JS o HTML) — sin tocar ninguna
   otra regla de este bloque, el layering ya esta listo (z-index:0, por
   debajo del glow y del contenido). */
.mv-widget-modal-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.mv-widget-modal-box::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-red-rgb), 0.22) 0%, rgba(var(--brand-red-rgb), 0) 70%);
  pointer-events: none;
}

/* La X vive en .mv-widget-modal (el wrapper de arriba, sin overflow:hidden)
   -- no en .mv-widget-modal-box -- a pedido explicito de Arnold
   (2026-08-29): tiene que asomar FUERA de la tarjeta, no quedar pegada
   adentro. top/right NEGATIVOS la sacan de la caja; si viviera dentro de
   .mv-widget-modal-box quedaria recortada por su overflow-y:auto. Fondo
   solido (no la tinta rgba(--brand-red-rgb) de antes) porque ahora cae
   sobre el scrim del overlay en vez de sobre la tarjeta oscura -- necesita
   su propio contraste, no el de var(--ink)/var(--paper) de la tarjeta. */
.mv-widget-modal-close {
  position: absolute;
  z-index: 3;
  top: -14px;
  right: -14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background var(--duration-hover) var(--ease-reveal);
}

.mv-widget-modal-close:hover,
.mv-widget-modal-close:focus-visible {
  background: var(--brand-red);
  filter: brightness(0.88);
}

.mv-widget-modal-close svg {
  width: 18px;
  height: 18px;
}

.mv-widget-modal-badge {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
}

/* Sigue un poco mas grande que .cta-gratis-titulo (clamp hasta 2.25rem) --
   pedido explicito: es lo primero que ve trafico pagado. Achicado de un
   maximo de 3.25rem a 2.75rem (pedido explicito, "acortar el tamaño del
   titulo") -- el titulo original se sentia demasiado grande al lado del
   subtexto, que ademas ahora es mas largo (2 oraciones). */
.mv-widget-modal-titulo {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);
  color: var(--paper);
  margin: 0 0 16px;
}

/* color:var(--paper) + opacity (no rgba(255,255,255,...) fijo) -- mismo
   motivo que .mv-widget-modal-close de arriba: la tarjeta se invierte
   entre temas via --ink, asi que el texto muted tiene que seguir a
   --paper (que SI se invierte con ella) para seguir siendo legible en
   los dos. Un blanco fijo quedaba casi invisible sobre la tarjeta clara
   en modo oscuro (bug real, encontrado probando el modo oscuro). */
.mv-widget-modal-desc {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.75;
  max-width: 50ch;
  margin: 0 0 28px;
}

.mv-widget-modal-btn {
  position: relative;
  z-index: 2;
}

/* Ticket Widget-MiVenta-Captura -- .field/.form-message/.capture-success son
   globales, pensados para tarjetas normales (fondo var(--paper), texto
   var(--ink)). Esta tarjeta usa el par INVERTIDO (fondo var(--ink), texto
   var(--paper), ver comentario de .mv-widget-modal-close mas arriba) --
   sin este override el texto de los campos queda del mismo color que el
   fondo (var(--ink) sobre var(--ink)), invisible. */
.mv-widget-modal-form {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;
}

.mv-widget-modal-form .label-caps,
.mv-widget-modal-form .field-hint,
.mv-widget-modal-form .phone-prefix,
.mv-widget-modal-form .privacy-notice {
  color: var(--paper);
  opacity: 0.75;
}

.mv-widget-modal-form .field input {
  color: var(--paper);
  border-bottom-color: var(--paper);
  opacity: 0.9;
}

.mv-widget-modal-form .field input::placeholder {
  color: var(--paper);
  opacity: 0.5;
}

.mv-widget-modal-form .field input:focus-visible {
  border-bottom-color: var(--paper);
  opacity: 1;
}

.mv-widget-modal-form .field input[aria-invalid="true"] {
  border-bottom-color: var(--danger);
}

.mv-widget-modal-form .field-error {
  color: var(--danger);
}

.mv-widget-modal-form .privacy-notice {
  border-top: 1px solid rgba(var(--brand-red-rgb), 0.25);
  border-bottom: 1px solid rgba(var(--brand-red-rgb), 0.25);
}

.mv-widget-modal-form .btn-home-white {
  width: 100%;
}

.mv-widget-modal .form-message {
  position: relative;
  z-index: 2;
  color: var(--paper);
  opacity: 0.85;
}

.mv-widget-modal .form-message--error {
  color: var(--danger);
  opacity: 1;
}

.mv-widget-modal .capture-success {
  position: relative;
  z-index: 2;
  background: rgba(var(--brand-red-rgb), 0.12);
  border-color: rgba(var(--brand-red-rgb), 0.25);
  color: var(--paper);
}

/* Todo mas chico en mobile (pedido explicito, "para ver si entra sin
   scroll") -- el subtexto se alargo a 2 oraciones y el modal empezaba a
   necesitar su propio scroll interno (max-height:90vh) en viewports bajos.
   Padding, tipografia y margenes reducidos SOLO aca; desktop no cambia. */
@media (max-width: 640px) {
  .mv-widget-modal-box {
    padding: 32px 22px;
  }

  .mv-widget-modal-close {
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
  }

  .mv-widget-modal-close svg {
    width: 15px;
    height: 15px;
  }

  .mv-widget-modal-badge {
    margin-bottom: 12px;
  }

  .mv-widget-modal-titulo {
    font-size: clamp(1.4rem, 6vw, 1.85rem);
    margin-bottom: 10px;
  }

  .mv-widget-modal-desc {
    font-size: 0.88rem;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  /* .btn-home-white comparte padding/font-size con .btn-home-primary/
     outline en todo el sitio (styles.css, Componentes compartidos) -- no se
     toca esa regla global, solo esta instancia via la clase propia del
     boton. */
  .mv-widget-modal-btn {
    padding: 12px 22px;
    font-size: 0.9rem;
  }
}

/* ── Sección 9 — seguridad/confianza (fondo con foto) ─────────────────── */
.seguridad-banda {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
}

.seguridad-banda-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Sin tinte de --brand-red aquí a propósito (a diferencia de .cifras-banda
   y .cta-gratis-card) — una banda de confianza/seguridad lee mejor en
   negro neutro; el rojo aporta una connotación de urgencia que no encaja
   con este mensaje. Overlay parejo, sin gradiente. Alpha reducido a la
   mitad (antes 0.78) — pedido explicito con la foto confianza2, se veia
   muy oscurecida. */
.seguridad-banda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.39);
  z-index: 1;
}

.seguridad-banda-titulo {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw + 1rem, 2.25rem);
  /* var(--accent-ink), no var(--paper) -- var(--paper) se invierte con el
     tema (se vuelve casi negro en modo oscuro) y el titulo quedaba
     practicamente invisible sobre la foto con overlay oscuro (reportado en
     modo oscuro). Blanco fijo, igual en los dos temas. */
  color: var(--accent-ink);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}

/* Sustituye la "O" de "Operaxion" por el logo (mismo pin de /img/rojo6.png
   del header) -- pedido explicito. Alto en em (no px) para que escale junto
   con el clamp() de font-size de arriba; width:auto mantiene la proporcion
   real del pin (20x22) en vez de deformarlo. El pin es un circulo con una
   punta que cuelga debajo (como un marcador de mapa) -- el circulo, no el
   PNG entero, es lo que tiene que leerse del alto de una mayuscula (la "Q"
   de "Qué"), asi que el alto total va MAS GRANDE que una mayuscula (0.8em
   se veia como una "o" minuscula, reportado) y vertical-align empuja la
   punta por debajo de la linea base, igual que el descendente de la "Q".
   margin-right negativo compensa el padding transparente propio del PNG
   (el pin no llena todo el canvas del archivo) para que "peraxion" quede
   pegado como si el pin fuera la "O" real del texto, no una imagen suelta
   con aire alrededor.

   El halo blanco reportado NO era CSS (border:none de aca abajo no lo
   arreglaba) -- era el propio archivo /img/rojo6.png: los pixeles
   "transparentes" (alpha 0) alrededor del pin no eran realmente neutros,
   tenian RGB blanco/amarillo residual de como se exporto originalmente
   (alpha sin premultiplicar). Invisible a tamaño 1:1, pero al escalar hacia
   abajo (aca, o en el logo del header) el navegador mezcla ese color
   "fantasma" con el borde real y se ve como un anillo claro. Corregido
   reescribiendo el PNG (dilate: cada pixel transparente toma el color RGB
   del pixel opaco mas cercano, sin tocar alpha/forma) -- afecta a las 54
   paginas que usan /img/rojo6.png, no solo aca. border:none se queda de
   todos modos, no hace daño. */
.titulo-logo-o {
  height: 1.15em;
  width: auto;
  vertical-align: -0.22em;
  margin-right: -0.12em;
  border: none;
}

.seguridad-banda-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.seguridad-card {
  background: var(--paper);
  border-radius: var(--home-radius);
  padding: 28px 24px;
  box-shadow: 0 20px 40px rgba(17, 17, 17, 0.18);
}

.seguridad-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--brand-red-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
}

/* Solo modo oscuro (pedido explicito, "el cambio solo era para el modo
   oscuro" -- el intento anterior aplico blanco fijo tambien en modo claro
   y le comio el contorno rojo tenue contra la tarjeta blanca). El tinte al
   10% se leia como un rojo apagado/marron sobre la tarjeta (tambien oscura
   ahi, var(--paper) invertida), casi invisible -- blanco fijo aca SI se
   distingue. */
:root[data-theme="dark"] .seguridad-card-icon {
  background: var(--accent-ink);
}

.seguridad-card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--brand-red);
}

.seguridad-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.seguridad-card p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0;
}

@media (min-width: 768px) {
  .seguridad-banda-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Sección 10 — FAQ ──────────────────────────────────────────────────── */
.faq {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.faq-eyebrow {
  margin: 0 0 16px;
}

.faq-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 28px;
}

/* "frecuentes" en cursiva/color de acento — pedido literal del ticket. */
.faq-titulo em {
  font-style: italic;
  color: var(--brand-red);
}

.faq-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tarjeta redondeada con borde propio (no línea zebra) — mismo patrón que
   los acordeones de Homi. */
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--home-radius);
  padding: 20px 24px;
}

.faq-pregunta {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.faq-pregunta::-webkit-details-marker {
  display: none;
}

/* Botón +/− circular (contenido generado, no SVG) — mismo criterio liviano
   que .btn-accion::before en vez de sumar un icono nuevo. */
.faq-pregunta::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink-muted);
}

.faq-item[open] .faq-pregunta::after {
  content: "−";
}

.faq-respuesta {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 14px 0 0;
  max-width: 60ch;
}

/* ── Ticker de precios por distrito (Ticket Diseño-06, sección 3) ─────────
   Debajo del subtítulo (index.html lo posiciona ahí — pedido de Arnold,
   antes iba entre título y subtítulo). Oculto por defecto vía [hidden] en
   el HTML — ticker-precios.js solo lo revela si
   encontró al menos un distrito aprobado (criterio e: nunca un hueco vacío
   sin dato). El loop infinito es la técnica estándar: la lista de
   distritos se duplica una vez en el DOM y .ticker-track anima de 0% a
   -50% — como la segunda mitad es idéntica a la primera, el reinicio del
   loop cae exactamente donde ya se veía la misma información, sin salto
   perceptible. prefers-reduced-motion ya está cubierto por la regla global
   de arriba (@media prefers-reduced-motion, anula cualquier animation-*). */
.ticker-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  margin-top: 18px;
}

/* En index.html el ticker es el primer elemento de <main>, pegado al
   navbar (pedido de Arnold: sin este espacio no entraba el hero completo
   en pantalla) — el margin-top de arriba sigue aplicando en
   panel-preview-ticker.html, donde el ticker va despues de otro contenido. */
main > .ticker-section:first-child {
  margin-top: 0;
}

.ticker {
  overflow: hidden;
  width: 100%;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 90s linear infinite;
  will-change: transform;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  border-right: 1px solid var(--line);
}

.ticker-distrito {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.ticker-precio {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.ticker-tendencia {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticker-tendencia--sube {
  color: var(--success);
}

.ticker-tendencia--baja {
  color: var(--danger);
}

.ticker-tendencia--estable {
  color: var(--ink-muted);
}

.ticker-ver-todos {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--ink-muted);
  text-decoration: none;
  margin-top: 8px;
}

.ticker-ver-todos:hover,
.ticker-ver-todos:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ticket INDICE-02, sección 2 — texto comprimido de colaboración +
   "Reportar una operación". El botón real (formulario) es de INDICE-03;
   aquí se renderiza como texto inerte + pastilla .label-status--proximamente,
   el MISMO patrón que ya usa la lista de herramientas para algo "no
   disponible todavía" (ej. "Guía de Costos de Remodelación" en index.html) —
   se prefirió sobre un <button disabled> por consistencia con ese patrón ya
   establecido en el sitio, y porque un botón real sin acción detrás es más
   confuso que un texto llano. Decisión declarada en conflictos.txt. */
.ticker-colaboracion {
  margin-top: 6px;
  text-align: center;
}

.ticker-colaboracion-texto {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 8px;
}

.ticker-colaboracion-texto strong {
  color: var(--ink);
}

.ticker-colaboracion-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0;
}

.ticker-colaboracion-cta .tool-link {
  font-size: 0.95em;
  padding: 5px 12px;
}

/* ── Badge de tendencia + sparkline (Ticket Diseño-06, sección 5 —
   "Opción 3" de la página dedicada) ─────────────────────────────────────
   Mismo trío de colores funcionales que el ticker (--success/--danger/
   --ink-muted), en formato pastilla en vez de texto plano — para que se
   lea de un vistazo en la tabla completa de 43 distritos. Mismo
   --home-radius-pill que el resto de badges del home (antes 999px, capsula
   completa suelta en medio del resto de cajas ya unificadas). */
.badge-tendencia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--home-radius-pill);
  white-space: nowrap;
}

.badge-tendencia--sube {
  color: var(--success);
  border: 1px solid var(--success);
}

.badge-tendencia--baja {
  color: var(--danger);
  border: 1px solid var(--danger);
}

.badge-tendencia--estable {
  color: var(--ink-muted);
  border: 1px solid var(--line);
}

.sparkline {
  display: block;
}

.sparkline-vacio {
  color: var(--ink-muted);
}

/* ── Articulos destacados: entradas centradas, sin lineas divisorias ────── */

.destacados {
  padding: 40px 0 8px;
}

/* Encabezado de la seccion — adaptado de .cta-gratis-card (Seccion 8):
   misma pildora + titulo + descripcion. A diferencia del original ahora
   lleva foto de fondo (foto facebook.jpg, blanco y negro) en vez de fondo
   solido — pedido explicito: la caja tiene que ser igual o mas ancha que
   la columna de lectura de 640px para que la foto (panoramica) entre bien,
   por eso vive fuera de .container (min(1100px, 100% - 40px) en vez del
   max-width:640px de .container — los 40px son el mismo gutter de 20px por
   lado que .container ya usa, para que no toque el borde del viewport en
   mobile). Sin boton propio, a diferencia del original — el link "Mas
   Articulos →" (.destacados-ver-mas) ya cubre esa funcion mas abajo. */
.articulos-card {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: 28px;
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1100px, 100% - 40px);
  margin: 0 auto 40px;
}

.articulos-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* color: var(--accent-ink) explicito en las dos reglas de abajo, NO
   var(--paper) — la caja se queda oscura (foto + overlay) en los dos temas
   a proposito, pero var(--paper) SI cambia con el tema (se oscurece en
   modo oscuro), lo que dejaba el badge y el titulo casi invisibles ahi
   (texto casi negro sobre foto oscura). Mismo bug/fix ya aplicado antes en
   .destacada-eyebrow (Seccion "Herramientas en accion") — --accent-ink es
   blanco fijo en ambos temas. */
.articulos-card-badge {
  position: relative;
  z-index: 2;
  color: var(--accent-ink);
  margin: 0 0 16px;
}

/* Variante para articulos.html: la caja roja hace de <h1> de la pagina
   (pedido explicito -- "que sirva como titulo"), asi que agranda tamaño y
   padding respecto al badge chico de la home; el resto (color, radio,
   z-index) se hereda igual de .articulos-card-badge/.pill--red.
   font-size/padding reducidos a poco mas de la mitad del primer intento
   (antes clamp(1.5rem,3vw+1rem,2.25rem)/12px 28px, pedido explicito "muy
   grande") + margin-bottom para separarlo de .articulos-card-desc (antes
   pegados, margin:0). */
.articulos-card-badge--titulo {
  font-size: clamp(0.85rem, 1.6vw + 0.5rem, 1.3rem);
  padding: 8px 20px;
  margin: 0 0 20px;
}

/* Foto mas grande solo en articulos.html (pedido explicito) -- .articulos-card
   normalmente mide lo que su contenido (padding + texto), sin min-height.
   Scoped con --hero para no tocar la tarjeta chica de la home. */
.articulos-card--hero {
  min-height: 420px;
  justify-content: center;
}

.articulos-card-titulo {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw + 1rem, 2.25rem);
  color: var(--accent-ink);
  margin: 0 0 12px;
  /* Borde negro (pedido explicito), version 3 -- version 2 (stroke 0.6px/
     0.75 + shadow 0 2px 10px/0.75) probada en Chrome y pedido "mas delgado
     y sutil". Stroke a la mitad (0.3px, alpha 0.55) y sombra mas leve. */
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.articulos-card-desc {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.92);
  /* Sombra reforzada de nuevo (antes 0 1px 2px/0.95 + 0 2px 6px/0.9 + 0 4px
     14px/0.8) -- seguia sin distinguirse bien contra zonas claras de la
     foto Articulos B/N, pedido explicito "un poco mas de sombra". */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 8px rgba(0, 0, 0, 0.95), 0 5px 18px rgba(0, 0, 0, 0.85);
  max-width: 46ch;
  margin: 0;
}

.destacados-lista {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.articulo-destacado {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.articulo-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}

/* .label-status es compartida con paneles/otras paginas (border-radius:0,
   esquinas rectas, --radius del sitio general) — no se toca esa definicion
   global. Solo dentro de .destacados (este home rediseñado) pasa al mismo
   --home-radius-pill que el resto de badges/pildoras del home, para no
   repetir la unica esquina recta de toda esta pagina. */
.destacados .label-status {
  border-radius: var(--home-radius-pill);
  padding: 5px 10px;
}

.articulo-fecha {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

/* font-family cambiado de --font-serif (Newsreader, tratamiento
   "editorial" clasico de antes de este rediseño) a --font-display —
   pedido explicito: la tipografia de esta seccion estaba en disonancia con
   el resto del home rediseñado (hero, destacadas, audiencias-stack,
   cta-gratis...), que usa Geist/Inter en todos lados y nunca el serif. */
.articulo-destacado-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 10px;
}

.articulo-destacado-titulo a {
  color: var(--ink);
  text-decoration: none;
}

.articulo-destacado-titulo a:hover,
.articulo-destacado-titulo a:focus-visible {
  text-decoration: underline;
}

.articulo-autoria {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

.link-blue {
  color: var(--label-proximamente);
  text-decoration: none;
}

.link-blue:hover,
.link-blue:focus-visible {
  text-decoration: underline;
}

/* Mismo cambio que .articulo-destacado-titulo — --font-serif reemplazado
   por --font-body, igual que el resto de descripciones nuevas del home
   (.destacada-desc, .cta-gratis-desc, .articulos-card-desc...). */
.articulo-dek {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 auto;
}

.articulos-proximamente-msg {
  padding: 20px 0;
  text-align: center;
  color: var(--ink-muted);
  font-style: normal;
}

/* ── Pila de audiencias con scroll-pin ────────────────────────────────────
   Mecanica verificada en homiappliance.com (seccion "Herramientas",
   capturas/hojas herramientas.png) — reemplaza el fade-in simple por un
   pin real: .audiencias-stack-pin se queda fijo (position:sticky) mientras
   se sigue scrolleando adentro de .audiencias-stack (alta, calculada por
   audiencias-stack.js), y las tarjetas ceden el frente una a otra de forma
   continua segun el progreso de scroll (ver ese archivo).

   Progressive enhancement: en reposo (sin JS, o con prefers-reduced-motion)
   se ve el mismo abanico apilado que la referencia — formula exacta
   verificada con devtools (translateY +18px/tarjeta, rotacion alternada,
   escala -0.04/tarjeta, z-index decreciente) — solo que estatico, sin pin
   ni scroll-jacking. audiencias-stack.js agrega la clase
   .audiencias-stack--pinned SOLO si el usuario no pidio reducir movimiento;
   desde ahi los estilos inline por scroll (misma formula, continua) le
   ganan por especificidad a las reglas nth-child de abajo. */
.audiencias-stack {
  position: relative;
  padding: 60px 0;
}

/* El titulo de fondo usa white-space:nowrap por palabra (a proposito, ver
   comentario de .audiencias-stack-titulo mas abajo) y puede ser mas ancho
   que .audiencias-stack-pin en pantallas angostas — overflow:hidden para que
   el fallback sin JS/con reduced-motion no genere scroll horizontal. SOLO en
   este estado (:not(--pinned)): overflow:hidden en .audiencias-stack cuando
   esta pineado ROMPE el position:sticky de .audiencias-stack-pin (un
   ancestro con overflow != visible pasa a ser el "contenedor de scroll" del
   sticky en vez del viewport/documento, y como .audiencias-stack nunca
   scrollea internamente el pin dejaba de sostenerse — bug real: el scroll
   bajaba sin esperar a que las 5 tarjetas terminen de dispararse). En modo
   --pinned el propio .audiencias-stack-pin ya tiene su overflow:hidden
   (mas abajo), asi que no hace falta repetirlo en el padre. */
.audiencias-stack:not(.audiencias-stack--pinned) {
  overflow: hidden;
}

.audiencias-stack-pin {
  position: relative;
  max-width: 640px;
  height: 460px;
  margin: 0 auto;
}

.audiencias-stack--pinned {
  padding: 0;
}

.audiencias-stack--pinned .audiencias-stack-pin {
  position: sticky;
  top: 0;
  max-width: none;
  height: 100vh;
  height: 100dvh; /* viewport dinamico -- evita el salto en mobile cuando la barra de direcciones se oculta/aparece durante el pin; si el navegador no soporta dvh, esta linea se ignora y queda el 100vh de arriba */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Titulo de fondo, detras de las tarjetas — verificado en homiappliance.com
   (.features-word): crece de forma continua durante todo el scroll del pin
   (audiencias-stack.js anima su scale), no es un tamaño fijo. REEMPLAZA al
   <h2>/<p> que antes vivian sueltos arriba de #herramientas (ver comentario
   en index.html) — mismo texto, mismo rol semantico de titulo de seccion. */
.audiencias-stack-titulo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  padding: 0 12px;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Sin max-width y sin wrap normal a proposito (ver comentario en
   index.html): cada palabra sola tiene que ser mas ANCHA que la tarjeta
   (min(640px,88vw)) para asomarse a los costados como en la referencia —
   overflow:hidden del pin (mas arriba en este archivo) la recorta sin
   generar scroll horizontal si en algun viewport se pasa. */
.audiencias-stack-titulo {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(2.6rem, 11vw, 7.5rem);
  line-height: 0.98;
  margin: 0 0 14px;
}

.audiencias-stack-titulo-linea {
  display: block;
  white-space: nowrap;
}

.audiencias-stack-subtitulo {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  color: var(--ink-muted);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  margin: 0;
}

.audiencias-cards {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.audiencias-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(640px, 88vw);
  padding: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--home-radius);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18), 0 8px 20px rgba(17, 17, 17, 0.08);
}

.audiencias-card:nth-child(1) {
  transform: translate(-50%, -50%) rotate(-2.5deg);
  z-index: 5;
}

.audiencias-card:nth-child(2) {
  transform: translate(-50%, -50%) translateY(18px) rotate(2deg) scale(0.96);
  z-index: 4;
}

.audiencias-card:nth-child(3) {
  transform: translate(-50%, -50%) translateY(36px) rotate(-1.5deg) scale(0.92);
  z-index: 3;
}

.audiencias-card:nth-child(4) {
  transform: translate(-50%, -50%) translateY(54px) rotate(2.5deg) scale(0.88);
  z-index: 2;
}

.audiencias-card:nth-child(5) {
  transform: translate(-50%, -50%) translateY(72px) rotate(-2deg) scale(0.84);
  z-index: 1;
}

.audiencias-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.audiencias-card-icon svg {
  width: 28px;
  height: 28px;
  /* var(--accent-ink), no var(--paper) -- var(--paper) se invierte con el
     tema (se vuelve casi negro en modo oscuro) y dejaba la silueta del
     icono casi invisible sobre el fondo rojo fijo (reportado en modo
     oscuro). Blanco fijo, igual en los dos temas. */
  color: var(--accent-ink);
}

.audiencias-card-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ink);
  margin: 0 0 12px;
}

.audiencias-card-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .audiencias-card {
    padding: 26px;
  }

  .audiencias-card-desc {
    font-size: 0.92rem;
  }
}

/* Link sobrio tras los destacados (Ticket A1/A2, ajuste 2026-07-21) — texto
   simple, sin boton, mismo tratamiento tipografico que .back-link. Bajado
   y agrandado un poco (2026-07-21, pedido de Arnold) para que respire mas
   respecto de los destacados. */
.destacados-ver-mas {
  margin: 20px 0 0;
}

.destacados-ver-mas a {
  font-size: 0.85rem;
  text-decoration: none;
}

.destacados-ver-mas a:hover,
.destacados-ver-mas a:focus-visible {
  text-decoration: underline;
}

/* Bloque discreto de enlace cruzado hacia los CTA de Operaxion (Ticket
   CTA1) — mismo tratamiento tipografico sobrio que .destacados-ver-mas, sin
   boton. Reusado al pie de cada articulo (CTA A) y al final de las
   herramientas transaccionales, contratos y listas (CTA B). */
.cta-cruzada {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.cta-cruzada p {
  margin: 0;
}

.cta-cruzada a {
  font-size: 0.85rem;
  text-decoration: none;
}

.cta-cruzada a:hover,
.cta-cruzada a:focus-visible {
  text-decoration: underline;
}

/* ── Buscador (100% en navegador) ────────────────────────────────────────── */

.buscador {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.buscador-row {
  position: relative;
}

.buscador-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

/* .buscador-input es compartida con articulos.html/precios-distritos.html
   (esquinas rectas, --radius:0, estetica general del sitio) — no se toca
   esa definicion. Solo dentro de #herramientas (este home rediseñado) pasa
   a esquinas redondeadas, como el resto de inputs/botones nuevos. */
.herramientas-placeholder .buscador-input {
  border-radius: var(--home-radius);
}

.buscador-input::-webkit-search-cancel-button {
  display: none;
}

.buscador-input::placeholder {
  color: var(--ink-muted);
}

.buscador-input:focus-visible {
  outline: none;
  border-color: var(--ink);
}

/* :not([hidden]) a proposito — display:flex en un selector de clase le
   gana en cascada al [hidden]{display:none} del navegador (misma
   especificidad, pero la hoja de estilos del sitio va DESPUES de la del
   user-agent), asi que sin este guard el bloque queda visible siempre,
   tenga o no el atributo hidden puesto. Bug real (Ticket Diseno-02),
   corregido: el mensaje de "sin resultados" solo debe aparecer cuando
   buscador.js le saca el atributo, nunca por defecto. */
.buscador-vacio:not([hidden]) {
  padding: 16px 4px;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* 4 accesos directos a los grupos de herramientas (entre el buscador y el
   primer h2) — misma caja invertida --ink/--paper que .tool-link, en fila
   con reparto equitativo (flex:1 1 0). En mobile 4 columnas de ancho igual
   dejarian "Cierres frecuentes" cortado, asi que se envuelve a 2x2 (grid,
   min 768px = 1 fila de 4) en vez de forzar una sola fila angosta. */
.accesos-directos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

/* Rediseñado dos veces: 1) la version original invertia --ink/--paper igual
   que .tool-link base, lo que en modo oscuro tenia el mismo problema real
   que se encontro en .btn-home-outline del hero (el fondo se funde con el
   fondo de la pagina). 2) el siguiente intento uso un tinte semitransparente
   de --brand-red — rechazado explicitamente ("no son colores, son tintes,
   falsos, no comunican nada mas que ambiguedad" — el tinte se leia
   rosado/naranja/vino segun el fondo detras). Ahora reutiliza tal cual la
   variante .tool-link--rojo (rojo SOLIDO + texto blanco fijo, ver mas
   abajo) via la clase en el HTML — sin color propio aca, solo el layout
   (centrado, tamaño de fuente). */
.herramientas-placeholder .tool-link.accesos-directos-item {
  text-align: center;
  font-size: 1em;
}

@media (min-width: 768px) {
  .accesos-directos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mascota (Ticket Diseno-02 — reemplaza el icono de linea del Ticket
   Diseno-01, que "no funciono visualmente") — alien verde saludando,
   reusado en los mismos 3 momentos de espera/cierre del hub (ver
   public/img/mascota.svg para la version canonica standalone). El SVG
   trae sus propios colores fijos (no currentColor) — el verde del
   personaje es intencionalmente el mismo en modo claro/oscuro (ticket,
   criterio d), asi que este wrapper ya no necesita fijar `color`, solo
   controla tamaño/layout. --grande a 72px seguiuendo el "60-80px" que
   pide el ticket para que se lea bien pequeño; --inline (junto al
   mensaje de "Enviando...", espacio mas apretado) a 32px — a 18px el
   trazo del alien se perdia. */
.mascota-icon {
  display: inline-block;
  line-height: 0;
}

.mascota-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mascota-icon--grande {
  width: 72px;
  height: 72px;
}

.mascota-icon--inline {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 8px;
}

/* ── Conversemos (Ticket CTA1, correccion 2026-07-24) — a proposito NO usa
   el patron numerado de .tool-list de abajo (counter, folio, filas densas):
   Arnold pidio que estos 2 CTA se lean como una conversacion, no como un
   documento descargable. Tarjetas sueltas con borde redondeado, sin
   numeros. ─────────────────────────────────────────────────────────────── */

.conversemos {
  padding: 8px 0 40px;
}

.conversemos-titulo {
  margin: 4px 0 8px;
  text-align: center;
}

.conversemos-subtitulo {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0 0 20px;
  text-align: center;
}

.conversemos-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.conversemos-item {
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

/* Ticket H17 v2 — .conversemos-item ahora tambien se usa en <button>
   (los arboles de Tu Cartera/Tu Operacion son disparadores inline, ya no
   enlaces a una pagina): reset de los estilos por defecto de boton. */
.conversemos-trigger {
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.conversemos-item:hover,
.conversemos-item:focus-visible {
  border-color: var(--ink-muted);
}

.conversemos-item-titulo {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.conversemos-item-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Marcador mientras #conversemos esta apagado (MI_VENTA_CONFIG.
   conversemosActivo = false) — solo el logo, como señal de que el
   dialogo esta armado ahi y se activara mas adelante. */
.conversemos-placeholder {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.conversemos-placeholder-logo {
  height: 28px;
  width: auto;
  opacity: 0.35;
}

/* ── Próximos módulos (lista densa, estilo Hacker News) ─────────────────── */

.herramientas-placeholder {
  padding: 8px 0 40px;
}

/* Ticket Reemplazo-Secciones-Agrupadas — reemplaza por completo el patron de
   pestañas-filtro (Ticket_Correccion_Pestanas_Home.md) por secciones
   agrupadas con encabezado propio. counter-reset vive UNA sola vez aca, en
   el contenedor que envuelve los 4 bloques — cada .tool-list interno NO
   declara su propio counter-reset, asi que las 4 listas comparten el MISMO
   contador CSS y la numeracion sigue 1,2,3...8,9,10 de corrido a traves de
   toda la pagina en vez de reiniciar en 1 por bloque. */
.tool-sections {
  counter-reset: tool-item;
}

.tool-group {
  margin-top: 36px;
}

.tool-group-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}

.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tool-item {
  counter-increment: tool-item;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}

/* Bug real, preexistente (no de esta sesion) — buscador.js pone/quita
   hidden en cada tool-item para filtrar la lista al escribir, pero
   display:flex de la regla de arriba le ganaba en cascada al
   [hidden]{display:none} del navegador (misma especificidad, la hoja del
   sitio carga despues que la del user-agent) — la lista NUNCA se filtraba
   visualmente, tecleabas o hacias click y no pasaba nada. Regla aparte
   (en vez de :not([hidden]) en la de arriba) para no arriesgar el
   counter-increment: con [hidden] elementos no generan caja, no consumen
   numero de la lista — los visibles se siguen numerando 1,2,3... sin
   huecos aunque el resto este oculto. */
.tool-item[hidden] {
  display: none;
}

.tool-item::before {
  content: counter(tool-item) ".";
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  min-width: 1.6em;
  flex-shrink: 0;
}

.tool-item-body {
  flex: 1;
  min-width: 0;
}

.tool-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Caja de titulo invertida (pedido de Arnold) — --ink/--paper ya se
   invierten solos por tema (ver :root[data-theme="dark"] mas arriba), asi
   que un solo par de reglas (sin estado + :hover) cubre claro y oscuro:
   fondo negro/texto blanco en claro, fondo casi-blanco/texto casi-negro en
   oscuro (respeta el "nunca #000/#FFF puro" del resto del sitio), y el
   hover invierte ambos exactamente igual en los 2 temas. font-size en em
   (no px) para que el +10% (bajado de +25%, se sentia demasiado grande)
   sea relativo al tamaño heredado, no un valor fijo. Borde transparente
   desde el estado base (mismo grosor que el hover) para que la caja no
   cambie de tamaño al aparecer el borde — en hover el fondo pasa a
   --paper, que en modo claro es blanco igual que la pagina, y sin ese
   borde la caja se volveria invisible. */
.tool-link {
  display: inline-block;
  font-weight: 600;
  font-size: 1.1em;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tool-link:hover,
.tool-link:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

/* .tool-link se usaba solo en <a> hasta ahora — un <button> trae su propio
   chrome nativo (fuente del sistema, cursor por defecto, appearance) que
   .tool-link no resetea porque nunca hizo falta. Reset acotado con el
   selector de elemento, así las dos <a class="tool-link"> ya existentes
   (CTA del home, "Más Artículos") no se ven afectadas. */
button.tool-link {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  cursor: pointer;
}

/* Rediseño de las cajas de cada herramienta, escopeado a
   .herramientas-placeholder — .tool-link es compartida con ~10 paginas mas
   del sitio (documentos, contratos, precios-distritos...) que se quedan
   con la caja invertida --ink/--paper de siempre, sin cambios. Solo aca
   pasa a colores FIJOS que no dependen del tema (nunca var(--paper)/
   var(--ink), que se invierten solos): fondo oscuro fijo o rojo de marca,
   texto blanco fijo (--accent-ink) siempre, en los dos temas — pedido
   explicito: "las letras en modo oscuro siempre deben ser blancas". Mismo
   --home-radius que el resto de cajas del home (antes capsula
   --home-radius-full: con nombres largos que envuelven a 2 lineas, la curva
   cerrada de la capsula le comia espacio al texto en las esquinas — mismo
   problema real encontrado y corregido en el badge del hero) en vez de los
   6px del .tool-link original, y hover con lift+sombra (mismo lenguaje que
   .btn-home-primary del hero) en vez del truco de invertir colores, que
   era la fuente del bug real encontrado en .btn-home-outline (el fondo se
   funde con el fondo de la pagina en modo oscuro porque ambos usan
   var(--paper)). .tool-link--rojo es para las 4 "herramientas ancla" (una
   por cada uno de los 3 caminos de entrada + Tramites) y para los 4
   accesos directos de arriba (.accesos-directos-item) — el resto de la
   lista se queda en la variante oscura por defecto. */
/* #2A2A2A, no #111111 — se probo con #111111 primero y en modo oscuro
   quedaba practicamente invisible contra el fondo de la pagina (--paper
   ahi es #121212, a un solo tono de diferencia). #2A2A2A se distingue del
   blanco en claro Y del #121212 en oscuro al mismo tiempo. */
.herramientas-placeholder .tool-link {
  background: #2A2A2A;
  color: var(--accent-ink);
  border-radius: var(--home-radius-pill);
  transition: transform var(--duration-hover) var(--ease-reveal), box-shadow var(--duration-hover) var(--ease-reveal);
}

.herramientas-placeholder .tool-link:hover,
.herramientas-placeholder .tool-link:focus-visible {
  background: #2A2A2A;
  color: var(--accent-ink);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.28);
}

.herramientas-placeholder .tool-link.tool-link--rojo {
  background: var(--brand-red);
}

.herramientas-placeholder .tool-link.tool-link--rojo:hover,
.herramientas-placeholder .tool-link.tool-link--rojo:focus-visible {
  background: var(--brand-red);
  box-shadow: 0 8px 20px rgba(var(--brand-red-rgb), 0.35);
}

/* Modo oscuro (pedido explicito de Arnold, probado en navegador): las cajas
   no-rojas de #2A2A2A se leian "en plomo" contra el fondo casi negro de la
   pagina en modo oscuro -- pasan a blanco fijo (--accent-ink) con texto
   oscuro fijo (--accent) para leerse con mas contraste. :not(.tool-link--rojo)
   en vez de bajar la especificidad de la regla roja de arriba -- las 4
   herramientas ancla + los 4 accesos directos siguen en rojo solido, sin
   tocar. Solo en modo oscuro: en claro esta caja se queda como estaba. */
:root[data-theme="dark"] .herramientas-placeholder .tool-link:not(.tool-link--rojo) {
  background: var(--accent-ink);
  color: var(--accent);
}

:root[data-theme="dark"] .herramientas-placeholder .tool-link:not(.tool-link--rojo):hover,
:root[data-theme="dark"] .herramientas-placeholder .tool-link:not(.tool-link--rojo):focus-visible {
  background: var(--accent-ink);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.tool-item--pending .tool-item-row > span:first-child {
  color: var(--ink-muted);
  font-weight: 600;
}

.tool-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Ticket COPY-02 — subtitulo corto ("para que sirve", no "como funciona"),
   siempre visible en su propia linea, nunca un tooltip. */
.tool-item-subtitle {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 3px 0 0;
  /* Ahora que #herramientas .container mide 1100px (antes 640px), sin esto
     estas lineas se estirarian mucho mas alla de una medida comoda de
     lectura. */
  max-width: 62ch;
}

/* Mismo subtitulo, version para la pagina propia de cada herramienta —
   debajo del <h1>, antes del .prose existente (que NO se toca, ticket
   "NO TOCAR"). Mas marcado que .prose para que se lea como respuesta
   rapida ("que problema resuelve"), no como parrafo explicativo largo. */
.tool-subtitulo {
  font-weight: 600;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0 0 10px;
}

/* ── Calculadoras (sin muro) ────────────────────────────────────────────── */

.logo-mark {
  text-decoration: none;
}

.back-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 16px;
}

.back-link:hover,
.back-link:focus-visible {
  text-decoration: underline;
}

.calc-hero {
  padding: 32px 0 8px;
}

.calc-section {
  padding: 16px 0 40px;
}

.field-radio {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.field-radio legend {
  padding: 0;
  margin-bottom: 7px;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Variante para opciones con texto largo (una frase/parrafo completo por
   opcion, ej. los 3 casos de guia-primera-de-dominio.html) — el layout
   horizontal de .radio-row no funciona ahi, cada opcion necesita su propia
   linea y el radio alineado arriba, no al centro del bloque de texto. */
.radio-row--vertical {
  flex-direction: column;
  gap: 14px;
}

.radio-row--vertical .radio-option {
  align-items: flex-start;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}

.radio-row--vertical .radio-option input {
  margin-top: 4px;
  flex-shrink: 0;
}

.radio-option input {
  width: auto;
}

.resultado-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-top: 20px;
}

.resultado-final {
  text-align: center;
  padding: 4px 0 16px;
}

.resultado-monto {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--accent);
  margin: 4px 0 0;
}

.resultado-detalle {
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-align: center;
}

.resultado-desglose {
  margin: 0 0 16px;
}

.resultado-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.resultado-linea dt {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.resultado-linea dd {
  margin: 0;
  font-weight: 600;
}

.resultado-nota {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

/* Bloque de cierre con boton de WhatsApp (Ticket CTA1, correccion
   2026-07-24) — el parrafo introductorio + .btn-primary como boton real,
   no un enlace de texto discreto (es el punto de conversion de la
   pagina). */
.resultado-cierre {
  margin-top: 20px;
}

.resultado-cierre .resultado-nota {
  margin-bottom: 10px;
}

.resultado-resumen {
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-style: italic;
  border-left: 3px solid var(--line);
  padding: 4px 12px;
  margin: 0 0 18px;
}

.checklist-lista {
  margin: 0 0 16px;
  padding-left: 20px;
}

.checklist-lista li {
  margin-bottom: 10px;
  color: var(--ink);
}

.btn-descargar-pdf {
  margin: 4px 0 18px;
}

.descargas-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 18px;
}

.descargas-row .btn-descargar-pdf {
  margin: 0;
}

.resultado-alerta {
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 600;
}

/* ── Inventario de Bienes: arbol de areas e items dinamicos ─────────────── */

.field-checkbox {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.field-checkbox legend {
  padding: 0;
  margin-bottom: 7px;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}

.checkbox-option input {
  width: auto;
}

.checkbox-otro-field {
  margin-top: 12px;
}

.area-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.area-block-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

/* Indicador ✓/⚠ junto al titulo de cada seccion (Auditoria de Junta de
   Propietarios, Ticket H8, mejora 3) — se pinta via ::before a proposito, NO
   como texto real del elemento: si el caracter Unicode fuera parte del
   textContent, pdf-descarga.js lo leeria y lo pasaria a jsPDF, cuya fuente
   estandar (Helvetica/WinAnsiEncoding) no soporta estos caracteres y corrompe
   la linea completa al exportar el PDF (hallazgo real, 2026-07-22 — ⚠ se
   convertia literalmente en "&"). Aqui son puramente visuales, nunca llegan
   al DOM textContent ni al PDF. */
.seccion-indicador--alerta::before {
  content: '⚠ ';
  color: var(--label-nuevo);
}

.seccion-indicador--normal::before {
  content: '✓ ';
  color: var(--ink-muted);
}

.item-list {
  margin-bottom: 4px;
}

.item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.item-row-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-row-fields input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

.item-row-fields input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.btn-remove-item {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.btn-remove-item:hover,
.btn-remove-item:focus-visible {
  color: var(--danger);
  border-color: var(--danger);
}

.btn-add {
  display: block;
  width: 100%;
  padding: 14px 16px;
  min-height: 44px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  margin: 10px 0 4px;
}

.btn-add:hover,
.btn-add:focus-visible {
  border-style: solid;
}

.nota-referencial {
  font-size: 0.82rem;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin: 8px 0 0;
}

/* ── Contratos (Arras y siguientes): partes, clausulas, avisos ─────────── */

.field select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

.field select:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.aviso-terceros {
  font-size: 0.82rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 20px;
}

.nota-informativa {
  font-size: 0.82rem;
  color: var(--ink-muted);
  border-left: 3px solid var(--line);
  padding: 6px 12px;
  margin: 6px 0 16px;
}

.clausula-titulo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 18px 0 8px;
}

.clausula-texto {
  color: var(--ink);
}

.clausula-justificacion {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted);
  background: var(--paper);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin: 0 0 4px;
}

/* Advertencia legal imposible de pasar por alto (Ticket C3 — clausula de
   allanamiento futuro): a diferencia de .clausula-justificacion (italica,
   borde fino), esta va en negrita, tamano mayor y con borde completo — se
   usa tanto en el arbol (ANTES de que la persona decida) como dentro del
   contrato generado. Nunca en letra pequena. */
.clausula-advertencia {
  font-weight: 700;
  font-size: 1rem;
  /* color usa --accent (fijo), NO --ink (cambia en modo oscuro) — el fondo
     de esta caja es --accent-ink (tambien fijo, blanco siempre). Si el
     texto usara --ink se volveria casi-blanco sobre fondo blanco en modo
     oscuro. Regla dura del Ticket Diseno-01: el disclaimer debe verse
     igual de bien en ambos modos, asi que directamente no participa del
     cambio de tema. */
  color: var(--accent);
  background: var(--accent-ink);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 10px 0 16px;
}

/* Bloque de firma: espacio en blanco arriba del nombre para firmar a mano
   (misma idea que replica pdf-descarga.js con doc.line() + espacio antes
   del texto). Apilado en mobile, 2 columnas en escritorio. */
.firma-linea {
  display: block;
  width: 100%;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 8px;
  font-size: 0.9rem;
  color: var(--ink);
}

/* ── Panel de metricas ──────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
}

.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.metrics-table th,
.metrics-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.metrics-table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--ink-muted);
}

.metrics-table tfoot th {
  font-weight: 600;
  border-top: 2px solid var(--line);
  border-bottom: none;
}

.metrics-table .num {
  text-align: right;
}

/* Columna "Distrito" fija al hacer scroll horizontal — solo en la tabla
   pública de precios por distrito (#pd-tabla), no en los paneles internos
   que reusan .metrics-table con otras columnas. thead necesita z-index más
   alto para quedar por encima de las celdas del body al desplazarse. */
#pd-tabla th:first-child,
#pd-tabla td:first-child {
  position: sticky;
  left: 0;
  background: var(--paper);
  border-right: 1px solid var(--line);
  z-index: 1;
}

#pd-tabla thead th:first-child {
  z-index: 2;
}

/* ── precios-distritos.html: adapta la estetica nueva del home (esquinas
   redondeadas --home-radius, cajas con borde suave) a los componentes
   viejos de esta pagina (buscador, aviso legal, tabla, formulario de la
   Comunidad de Cierre) -- pedido explicito de Arnold ("revisa la estetica
   de Mercado, adapta todo a lo que existe"). Todo scoped bajo .page-mercado
   (clase en <body>) a proposito: .buscador-input/.field/.clausula-
   advertencia/.metrics-table son compartidas con ~50 paginas mas
   (contratos, checklists, calculadoras) que NO se tocan -- mismo criterio
   ya usado en .herramientas-placeholder .buscador-input (home) unas
   lineas mas arriba en este archivo. */
/* .container base mide 640px (measure de lectura) -- en escritorio la
   pagina se sentia angosta debajo de la foto hero, que ya usa min(1100px,
   100% - 40px) (pedido explicito de Arnold, probado en navegador). Mismos
   1100px aca para que el buscador/tabla/formulario alineen con el borde de
   la foto en vez de quedar mas angostos. .prose adentro sigue limitado a
   --measure (66ch) via su propia regla, asi que los parrafos de texto no
   se estiran de mas -- solo se ensancha lo que no tiene su propio maximo
   (buscador, tabla, campos del formulario). */
.page-mercado .calc-section .container {
  max-width: 1100px;
}

.page-mercado .buscador-input {
  border-radius: var(--home-radius);
}

.page-mercado .clausula-advertencia {
  border-radius: var(--home-radius);
}

/* .field input/select normalmente son un simple subrayado (border-bottom,
   sin caja) -- aca pasan a la misma caja redondeada que .buscador-input,
   consistente con el resto de la pagina. */
.page-mercado .field input,
.page-mercado .field select {
  border: 1px solid var(--line);
  border-radius: var(--home-radius);
  background: var(--paper);
  padding: 12px 14px;
}

.page-mercado .field input:focus-visible,
.page-mercado .field select:focus-visible {
  border-color: var(--accent);
}

/* .amount-row (campo "Precio de cierre" + selector de moneda) normalmente
   apoya su borde en el contenedor flex, no en los inputs -- mismo criterio
   de caja redondeada aca, hijos sin su propio borde para no duplicarlo. */
.page-mercado .amount-row {
  border: 1px solid var(--line);
  border-radius: var(--home-radius);
  padding: 4px 10px;
}

.page-mercado .amount-row input,
.page-mercado .amount-row select {
  border: none;
  padding: 8px 2px;
}

.page-mercado .table-scroll {
  border: 1px solid var(--line);
  border-radius: var(--home-radius);
}

.page-mercado .metrics-table thead th {
  background: var(--surface);
}

.page-mercado #pd-tabla tbody tr:hover td {
  background: var(--surface);
}

/* En escritorio, con el container ya ensanchado a 1100px arriba, el
   buscador (3 filtros) y el formulario de la Comunidad de Cierre (12
   campos) se veian como cajas larguisimas en una sola columna -- pasan a
   grid de 2-3 columnas para aprovechar el ancho en vez de estirarse.
   #buscador no tiene un wrapper por campo (label+control son hijos
   sueltos, no un <div> por campo) -- grid-auto-flow:column con 2 filas
   fijas coloca cada par label/control en su propia columna sin tocar el
   HTML. */
@media (min-width: 768px) {
  .page-mercado #buscador {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 20px;
    align-items: start;
  }

  /* #rv-form si envuelve cada pregunta en su propio .field (label+control
     juntos) -- grid normal por fila alcanza, solo hay que hacer que los
     elementos que NO son una pregunta individual (el aviso legal, los 2
     parrafos sueltos, el boton) ocupen las 2 columnas en vez de una celda
     angosta. */
  .page-mercado #rv-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
  }

  .page-mercado #rv-form > .clausula-advertencia,
  .page-mercado #rv-form > p,
  .page-mercado #rv-form > button {
    grid-column: 1 / -1;
  }

  /* justify-items:stretch (default de grid) estiraba el boton a las 2
     columnas completas -- se veia enorme en escritorio (reportado). Vuelve
     a su ancho de contenido, alineado a la izquierda como el resto de
     campos. */
  .page-mercado #rv-form > button {
    justify-self: start;
  }
}

/* ── Plantilla de articulo ──────────────────────────────────────────────── */

.articulo-hero {
  padding: 32px 0 8px;
}

.articulo-cuerpo {
  padding: 8px 0 32px;
  max-width: var(--measure);
}

.articulo-cuerpo p {
  margin: 0 0 18px;
  color: var(--ink);
}

.articulo-cuerpo h2 {
  margin-top: 28px;
}

/* Mismo tratamiento que .destacados-lista/.articulo-destacado (entradas
   centradas, sin lineas divisorias, solo espacio) — el archivo reusa esas
   clases directamente en el HTML; esto solo define el contenedor de lista. */
.archivo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Comentarios ────────────────────────────────────────────────────────── */

.comentarios {
  padding: 24px 0 8px;
  border-top: 1px solid var(--line);
}

.comentarios-titulo {
  margin-bottom: 16px;
}

.comentario-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comentario {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.comentario-meta {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 0 0 6px;
}

.comentario-autor {
  font-weight: 600;
  color: var(--ink);
}

.comentario-texto {
  margin: 0;
  color: var(--ink);
}

.comentarios-vacio {
  color: var(--ink-muted);
  font-size: 0.9rem;
  padding: 4px 0 8px;
}

/* Formulario publico de comentarios (Ticket A3) — reusa .field/.form-message
   ya definidos para el resto del hub, solo agrega el layout propio. */
.comentario-form {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.comentario-form-titulo {
  margin: 0 0 14px;
}

/* Honeypot: campo real (no type=hidden, algunos bots lo saltan) pero
   invisible y fuera del flujo de tabulacion para una persona real —
   Ticket A3, seccion 2. */
.campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Articulos relacionados ─────────────────────────────────────────────── */

.relacionados,
.enlaces-relacionados {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.relacionados-titulo {
  margin-bottom: 12px;
}

.relacionados-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.relacionados-list li {
  padding: 8px 0;
}

.relacionados-list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.relacionados-list a:hover,
.relacionados-list a:focus-visible {
  text-decoration: underline;
}

/* ── Legal / Contacto (paginas de prosa) ─────────────────────────────────── */

.prosa-pagina {
  padding: 32px 0 48px;
  max-width: var(--measure);
}

.prosa-pagina h2 {
  margin-top: 26px;
}

.prosa-pagina p {
  color: var(--ink);
}

.prosa-lista {
  padding-left: 20px;
  margin: 0 0 16px;
}

.prosa-lista li {
  margin-bottom: 8px;
}

.contacto-correo {
  display: inline-block;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 6px 0 18px;
}

/* ── contacto.html: mismo criterio que .page-mercado (adapta la estetica
   nueva del home a esta pagina puntual, sin tocar .ficha-card/.field/
   .btn-primary compartidas con ~45 paginas mas de herramientas/paneles).
   Pedido explicito de Arnold: "lo mismo" que Mercado pero SIN foto hero
   (para que la pagina no retenga al visitante mas de lo necesario), asi
   que solo se refrescan bordes/colores del formulario, no se agrega
   imagen ni se ensancha el container (un formulario de una columna no
   necesita mas ancho). */
.page-contacto .ficha-card {
  border-radius: var(--home-radius);
}

.page-contacto .field input,
.page-contacto .field textarea {
  border: 1px solid var(--line);
  border-radius: var(--home-radius);
  background: var(--paper);
  padding: 12px 14px;
}

.page-contacto .field input:focus-visible,
.page-contacto .field textarea:focus-visible {
  border-color: var(--accent);
}

.page-contacto .contacto-correo {
  color: var(--brand-red);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* Pedido explicito de Arnold: fondo negro + un detalle en rojo, en las 52
   paginas del sitio (.site-footer es compartido, no exclusivo del home).
   Negro FIJO (#111111, no var(--ink)) a proposito -- var(--ink) se invierte
   con el tema (se vuelve CLARO en modo oscuro, ver .mv-widget-modal mas
   abajo) y el pedido es que el footer se vea negro en los dos temas,
   mismo criterio ya usado en --mv-dark del
   widget "Mi Venta". #111111 no es un negro nuevo: es el mismo valor que
   --ink/--accent ya usan en modo claro (logo, texto, botones), ahora fijo.
   El detalle en rojo es el borde superior solido (antes 1px gris neutro,
   var(--line)). Todo el texto/enlaces de adentro necesitan color fijo
   tambien (mas abajo) -- sin eso, el gris oscuro (var(--ink-muted)) y el
   negro (var(--accent), color por defecto de <a>) que ya traian
   .footer-disclaimer/.footer-row/<a> quedarian invisibles sobre este fondo
   ahora negro. */
.site-footer {
  padding: 24px 0 32px;
  background: #111111;
  border-top: 3px solid var(--brand-red);
}

/* .label-caps se usa fuera del footer tambien (headers de panel, etc.) --
   scoping obligatorio aca, a diferencia de .footer-disclaimer/.footer-row
   (exclusivas del footer, su color base ya esta actualizado mas abajo). */
.site-footer .label-caps {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer a {
  color: var(--accent-ink);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--brand-red);
}

/* Footer del home (pedido explicito: solo aca, no las otras 51 paginas que
   comparten .site-footer con el layout simple .footer-row) — logo grande a
   la izquierda + la linea de contacto sola a la derecha, en vez de los 3
   parrafos de disclaimer que tenia antes. Stack vertical y centrado en
   mobile (mismo breakpoint que el resto del sitio). */
.footer-home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-logo {
  gap: 14px;
}

/* .logo-word normalmente hereda var(--ink) (header, fondo claro) -- aca
   necesita el mismo color fijo blanco que .footer-disclaimer/site-footer a
   (ver comentario grande de .site-footer arriba), si no el texto queda
   negro sobre el fondo negro fijo del footer. */
.footer-logo .logo-pin {
  height: 72px;
}

.footer-logo .logo-word {
  font-size: 1.7rem;
  color: var(--accent-ink);
}

.footer-home-contacto .footer-disclaimer {
  margin: 0;
  max-width: none;
  font-size: 1rem;
}

@media (max-width: 767px) {
  .footer-home-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo .logo-pin {
    height: 56px;
  }
}

/* .container comun mide 640px (measure de lectura) -- logo grande + linea
   de contacto en una sola fila no entran ahi, se partian en 2 lineas
   (reportado por Arnold). Mismo criterio que .site-header .container mas
   arriba: el footer del home ensancha su propio contenedor para que todo
   quepa en una sola linea, sin tocar el measure del resto del sitio. */
@media (min-width: 768px) {
  .footer-home-contacto .container {
    max-width: 1100px;
  }

  .footer-home-contacto .footer-disclaimer {
    white-space: nowrap;
  }
}

/* Ticket Diseño-06, sección 4 — el disclaimer del ticker se muda del home
   (donde interrumpía el flujo visual justo debajo del ticker) al pie,
   "junto con el resto de textos legales/generales del pie" — por eso usa el
   mismo registro tipográfico discreto de .footer-row (tamaño y color), no
   el tratamiento de .clausula-advertencia (pensado para advertencias que no
   se pueden pasar por alto ANTES de una acción, un contexto distinto). Solo
   en index.html — la página dedicada de precios conserva su propio
   disclaimer visible junto a la tabla, sin cambios (excepción explícita del
   ticket).*/
.footer-disclaimer {
  font-size: 0.78rem;
  /* Blanco fijo con alpha, no var(--ink-muted) -- .site-footer ahora tiene
     fondo negro FIJO (ver comentario ahi arriba), asi que el texto
     "apagado" tiene que ser un blanco translucido fijo tambien, nunca un
     color que dependa del tema. */
  color: rgba(255, 255, 255, 0.7);
  max-width: 640px;
  margin: 0 0 14px;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Escritorio (mobile-first: esto se agrega encima) ──────────────────── */

@media (min-width: 768px) {
  /* Ticket Diseño-06 — a partir de tablet/escritorio, el menú vuelve a ser
     la fila horizontal de siempre y el toggle de hamburguesa desaparece
     (los 4 ítems ya caben en una línea a este ancho). site-nav--open no se
     limpia al cruzar el breakpoint con el viewport ya abierto (ej. girar el
     celular u orientacion tablet) — inofensivo, display:flex de aquí gana
     igual por cascada, y config.js vuelve a poner aria-expanded=false la
     próxima vez que se abre/cierra desde el toggle. */
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    order: 0;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    width: auto;
    margin-top: 0;
    border-top: none;
  }

  .site-nav a {
    padding: 0;
    border-bottom: none;
  }

  .container {
    padding: 0 24px;
  }

  /* El .container comun mide 640px (measure de lectura del sitio, Ticket
     D1) — desde que el nav paso de 4 a 5 links (se agrego "M2"), esa fila
     ya no entra junto al logo y los 2 icon-buttons en 640px y el
     flex-wrap:wrap de .header-row tiraba el theme-toggle a una segunda
     linea en escritorio (reportado por Arnold). El header no necesita
     respetar el measure de lectura del contenido — solo el suyo se
     ensancha para que todo quepa en una linea otra vez. */
  .site-header .container {
    max-width: 760px;
  }

  .hero {
    padding: 64px 0 48px;
  }

  .btn-primary {
    width: auto;
  }

  .ficha-card {
    padding: 36px 44px;
  }

  .metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .item-row-fields {
    flex-direction: row;
  }

  .descargas-row {
    flex-direction: row;
  }

  .descargas-row .btn-descargar-pdf {
    width: auto;
    flex: 1;
  }

  .firma-linea {
    display: inline-block;
    width: 47%;
    vertical-align: top;
  }

  .firma-linea + .firma-linea {
    margin-left: 6%;
  }
}

/* ── Diagrama de arquitectura (Ticket Diseño-04) ─────────────────────────
   SVG inline (no archivo .svg externo cargado con <img>) precisamente para
   heredar los custom properties de :root/[data-theme] del documento — un
   .svg externo referenciado por <img> no ve el modo oscuro de la pagina. */
.arquitectura-diagram-wrap {
  overflow-x: auto;
}

.arquitectura-diagram text {
  font-family: var(--font-body);
  fill: var(--ink);
}

.arquitectura-diagram .caja {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.arquitectura-diagram .caja--contenedor {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
}

.arquitectura-diagram .caja--inactivo {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
}

.arquitectura-diagram .caja--externa {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.arquitectura-diagram .flecha {
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  fill: none;
  marker-end: url(#arquitectura-punta-flecha);
}

.arquitectura-diagram .flecha-punta {
  fill: var(--ink-muted);
}

.arquitectura-diagram .etiqueta-region {
  font-weight: 700;
  font-size: 14px;
}

.arquitectura-diagram .etiqueta-detalle {
  font-size: 12px;
  fill: var(--ink-muted);
}

.arquitectura-diagram .etiqueta-contenedor {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}

.arquitectura-diagram .etiqueta-flecha {
  font-size: 11px;
  fill: var(--ink-muted);
}

.arquitectura-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.arquitectura-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arquitectura-legend-swatch {
  display: inline-block;
  width: 24px;
  height: 0;
  border-top: 2px solid var(--ink-muted);
}

.arquitectura-legend-swatch--inactivo {
  border-top-style: dashed;
}