/* =====================================================================
   Propio 360 · Landing page
   ---------------------------------------------------------------------
   Paleta: valores literales de designTokens (packages/ui-shared/src/theme.ts)
   y reglas de docs/08-marca-y-color.md. Todo color de marca sale de las
   variables de abajo; ningún componente usa un hex suelto.

   PALETA (2026-09-19): reemplazo COMPLETO por los colores del tema `gradiant-pro`
   (demo Flavita), extraidos de las variables `--sp-*` del propio demo en vivo:
     --sp-primary   #94d13a  -> nuestro --accent-lime
     --sp-primary2  #70ba02  -> nuestro --accent-hover
     --sp-secondary #11104d  -> nuestro --primary   (indigo, no el navy de antes)
     --sp-secondary2#060534  -> nuestro --primary-deep
     --sp-secondary-dark #252525 -> nuestro --text
   ⚠️ Los DOS verdes de Flavita NO soportan texto blanco (1.84 y 2.41). El CTA usa
   #487701, que es SU MISMO tono y saturacion con el valor al 64 %: blanco 5.36:1.
   ⚠️ Flavita no tiene azul. La familia azul colapsa en el indigo: enlaces #2E2D62 y,
   sobre fondo oscuro, #BCBCCD.

   Pares medidos contra WCAG (texto 4.5:1, componente/marca 3:1):
     blanco / --primary            17.43
     blanco / --primary-deep       19.46
     blanco / --accent-btn          5.89  (texto de los botones verdes)
     --accent-text / --accent       6.75  (tinta sobre el verde vivo: tarjeta e insignia)
     --accent-lime / --primary      9.49  (acentos sobre oscuro)
     --accent-lime-ink / lima       8.86  (glifo de la insignia)
     --accent-blue / blanco        12.59  (enlaces)
     --accent-blue-on-dark/primary  9.30
     --text-muted / blanco          5.74  (y 4.66 sobre la superficie mas tenida)
     --text-on-dark-muted/primary  10.77
     --input-border / blanco        3.43  (contorno de campo, 1.4.11)
   ===================================================================== */

:root {
  /* Identidad */
  --primary: #11104D;
  --primary-deep: #060534;          /* fin del sidebarGradient de las apps */
  --primary-soft: #E7E7ED;

  /* Acción principal: verde con texto blanco. Un solo botón lleno por vista. */
  /* ⚠️ 2026-09-19, 2ª vuelta: el verde de accion pasa a ser EL de Flavita (#70BA02,
     su `--sp-primary2`) con TINTA OSCURA encima, en vez del #487701 con texto blanco.
     Por que: #487701 nacio de bajarle el valor a su verde hasta que aceptara blanco, y eso
     lo volvio oliva -- se veia apagado al lado del indigo. Con tinta oscura no hace falta
     oscurecer el verde, asi que se usa el suyo tal cual, mas vivo Y con MAS contraste:
        #70BA02 + tinta #16240A = 6.75:1   (antes #487701 + blanco = 5.36:1)
     El hover ilumina al lima #94D13A, que con la misma tinta da 8.86. */
  --accent: #70BA02;
  --accent-hover: #94D13A;
  --accent-text: #16240A;
  /* ⚠️ El verde vivo NO sirve como TINTA sobre blanco (2.41:1). Para texto o iconos verdes
     sobre superficie clara va este, que es el mismo tono con el valor al 64 %: 5.36:1. */
  --accent-ink: #487701;
  /* Radio del tema (`flavita-exp/assets/css/color/default.css`): casi recto. */
  --sp-radius: 3px;
  --accent-lime: #94D13A;           /* acento; nunca lleva texto blanco */
  --accent-lime-ink: #16240A;

  /* ⚠️ VERDE DE BOTON (2026-09-19, decision de Rodrigo): los botones verdes llevan TEXTO
     BLANCO. El verde vivo `--accent` (#70BA02) no lo soporta -- blanco encima da 2.41:1 --
     asi que en vez de forzar blanco sobre un fondo que no lo aguanta, los BOTONES usan una
     variante mas oscura de LA MISMA familia: mismo tono (84.13 grados) y misma saturacion
     (98.9 %) del verde de Flavita, solo con el valor bajado de 0.73 a 0.44.
     No es un color nuevo ni otro hue: es el mismo verde mas oscuro.
        --accent-btn        #447001 + blanco = 5.89:1   (texto de boton, AA con margen)
        --accent-btn-hover  #4D8001 + blanco = 4.77:1   (estado transitorio, sigue AA)
     ⚠️ SOLO PARA SUPERFICIE DE BOTON. El resto de la UI conserva el verde vivo: la insignia
     de icono, la tarjeta verde del par de CTA, los acentos lima. Cambiar `--accent` aqui
     apagaria todo el sitio, que es justo lo que se corrigio en la 2a vuelta de la paleta.
     ⚠️ Contra el navy este verde da 2.96:1 (el vivo daba 2.27): sigue por debajo de 3, asi
     que sobre fondo oscuro el boton conserva su borde lima (`.btn-on-dark`). */
  --accent-btn: #447001;
  --accent-btn-hover: #4D8001;
  --accent-btn-text: #FFFFFF;

  /* Acción secundaria y enlaces */
  --accent-blue: #2E2D62;
  --accent-blue-hover: #1E1D52;
  --accent-blue-soft: #ECECF1;
  --accent-blue-on-dark: #BCBCCD;   /* sobre navy, nunca --accent-blue (1.37:1) */
  /* Ficha (chip). 2026-09-19: las fichas usaban --primary-soft (#E7E7ED), que contra el fondo
     de una seccion alterna (#F6F6F8) da 1.10:1 -- no se distinguian del fondo y se leian como
     texto suelto. Este tinte da 1.33 sobre blanco y 1.22 sobre la seccion gris, con el borde
     en 1.84 / 1.70: se lee como ficha sobre los dos fondos sin gritar. */
  --chip-bg: #DADAE8;
  --chip-border: #A9A9C2;
  /* Tercer tono de banda. El ritmo era binario (blanco / gris #F6F6F8) mas el navy de Sofia:
     con 7 secciones eso se lee plano. Este azul palisimo es de la familia azul que ya existe,
     no un color nuevo. Texto 15.67:1; una tarjeta blanca encima sigue despegando. */
  --surface-blue: #F4F4F7;

  /* ACENTO VERDE DEL HERO -- 2026-09-19 (pivote a 2 colores: navy + verde sobre blanco).
     ⚠️ Sobre navy NO sirve el verde de accion `--accent` (#487701): da 2.27:1. El verde que
     la marca define para fondo oscuro es la LIMA #94D13A (5.88:1 sobre navy, y 8.98:1 con la
     tinta #16240A encima). Por eso los acentos del hero van en lima, no en verde de accion.
     Reemplaza al fucsia y a la paleta violeta/cian/magenta que se probaron el mismo dia. */

  /* Estado (nunca botón) */
  --success: #5B9A1C;
  --success-text: #3F6B12;
  --success-bg: #EDF7DC;
  --warning-text: #A53E00;
  --warning-bg: #FFE7CE;
  --error-text: #C92E3B;
  --error-strong: #A3202C;
  --error-bg: #FDECEE;

  /* Neutros reales */
  --background: #F6F6F8;
  --surface: #FFFFFF;
  --border: #DEDEE6;
  --input-border: #8888A6;
  --input-label: #4A4A5C;
  --text: #252525;
  /* ⚠️ 2026-09-19, medido con el barrido por pixel: este gris era #6F6F6F y sobre las
     superficies TENIDAS de la pagina caia por debajo del minimo -- 4.08:1 sobre
     `--primary-soft` (#E7E7ED) y 4.46 sobre el tinte de la nota de Sofia. Sobre blanco
     daba 5.02 y por eso pasaba desapercibido. Se oscurece a #666666: mismo neutro, sin
     cambiar de familia, y ahora cumple en las cuatro superficies claras del sitio
     (blanco 5.74 | seccion gris 5.32 | azul palido 5.23 | primary-soft 4.66). */
  --text-muted: #666666;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #CBCAD8;

  /* Tipografía y ritmo */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(17, 16, 77, .06), 0 1px 3px rgba(17, 16, 77, .08);
  --shadow: 0 10px 30px -12px rgba(17, 16, 77, .25);
  --shadow-lg: 0 30px 60px -20px rgba(17, 16, 77, .35);
  /* Alto del header. Se compone, porque el de `index.html` lleva DOS franjas (contacto +
     navegación) y el de las páginas sueltas una sola. De `--header-h` dependen el
     `scroll-padding-top` y el `padding-top` del hero, así que tiene que ser la suma real. */
  --header-top-h: 0px;
  --header-bar-h: 72px;
  --header-h: calc(var(--header-top-h) + var(--header-bar-h));
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  /* 2026-09-19 -- CAUSA RAIZ del hueco muerto entre secciones. Cada `.section` pagaba
     `padding-block: var(--section-y)`, asi que entre dos secciones contiguas se sumaban
     96 px de cola + 96 px de entrada = 192 px de vacio, y lo primero que aparecia despues
     era `.aud-tag`, una linea gris de 13 px. No sobraba espacio: estaba mal repartido.
     Ahora la banda respira 68 px por lado (136 px entre secciones) y el aire que queda se
     le da al titulo, no a la etiqueta. */
  --section-y: clamp(40px, 4.6vw, 68px);
  /* Radio único de tarjeta (módulos, diferenciadores, planes, cajas): antes había 14 y 22 px mezclados. */
  --radius-card: 18px;
  --fs-card-title: 1.125rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; color: var(--primary); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent-blue); text-underline-offset: 3px; }
a:hover { color: var(--accent-blue-hover); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--primary); color: var(--text-on-dark);
  padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--text-on-dark); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 4px; border-radius: 4px; background: var(--accent-lime);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 10px 20px;
  border-radius: var(--sp-radius, 3px); border: 2px solid transparent;
  font-weight: 600; font-size: .9375rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn .icon { transition: transform .2s ease; }
.btn:hover .icon { transform: translateX(3px); }
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }

/* CTA principal: superficie llena verde, texto blanco (ver `--accent-btn` arriba). */
.btn-primary { background: var(--accent-btn); color: var(--accent-btn-text); box-shadow: 0 8px 20px -8px rgba(68, 112, 1, .5); }
.btn-primary:hover { background: var(--accent-btn-hover); color: var(--accent-btn-text); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 3px; border-radius: 999px; }
.site-footer :focus-visible, .cta-band :focus-visible, .plan-custom :focus-visible { outline-color: var(--accent-blue-on-dark); }
@media (prefers-reduced-motion: reduce) { .btn, .btn .icon { transition: none; } .btn:hover .icon { transform: none; } }
/* Sobre navy el verde de boton no se delimita solo (2.96:1, minimo 3): borde lima (5.88:1). */
.btn-on-dark { border-color: var(--accent-lime); box-shadow: none; }

/* Acción secundaria: azul, contorno o texto. */
.btn-outline { background: transparent; color: var(--accent-blue); border-color: var(--accent-blue); }
.btn-outline:hover { background: var(--accent-blue-soft); color: var(--accent-blue-hover); border-color: var(--accent-blue-hover); }
.btn-text { background: transparent; color: var(--accent-blue); padding-inline: 16px; }
.btn-text:hover { background: var(--accent-blue-soft); color: var(--accent-blue-hover); }

/* ---------- 1. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }

/* La barra de navegación es una franja propia dentro del header: acá vive la cuña diagonal
   y contra su alto se mide el menú. En las páginas sueltas es la única franja que hay. */
.header-bar { position: relative; height: var(--header-bar-h); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* =====================================================================
   FRANJA DE CONTACTO (2026-09-19) -- `flavita-exp` .navbar-full
   ---------------------------------------------------------------------
   La referencia la pone ENCIMA del menú: superficie clara, `padding: 23px 0`,
   `border-bottom: 1px solid rgb(189 189 189 / .45)`, y dentro cada widget es
   [icono 28 px] + [.title 15 px sobre .text 17 px/600, en --sp-secondary-dark].
   Acá el contenido es el real de Propio 360: los mismos teléfono y correo del pie
   y de Contacto, y el CTA que ya existía ("Solicitar demo"). No se inventó nada.

   Contrastes sobre la franja clara (blanco):
     --text-muted / blanco    5.74  (la etiqueta pequeña)
     --text / blanco         15.30  (el dato)
     --accent-blue / blanco  12.59  (el dato cuando es enlace en hover)
   ===================================================================== */
.header-top {
  height: var(--header-top-h);
  background: var(--surface);
  border-bottom: 1px solid rgba(189, 189, 189, .45);
}
.header-top-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-widgets { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); }

.hwidget { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 2px; border-radius: var(--sp-radius, 3px); }
.hwidget-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: var(--accent-ink);
}
.hwidget-icon .icon { width: 22px; height: 22px; }
.hwidget-info { display: flex; flex-direction: column; line-height: 1.2; }
.hwidget-info small { font-size: .8125rem; color: var(--text-muted); }
.hwidget-info b { font-size: .9375rem; font-weight: 600; color: var(--text); }
.hwidget:hover .hwidget-info b { color: var(--accent-blue); }
.header-top-cta { min-height: 38px; padding: 7px 18px; font-size: .875rem; }

/* Solo `index.html` lleva las dos franjas, y solo por encima de 1180 px. El alto total se
   declara en el `<html>` para que `scroll-padding-top` y el hero lo vean.
   ⚠️ Sin `:has()` no hay forma de subir el dato hasta `<html>`: ahí la franja de contacto
   no se muestra, igual que el resto de lo que depende del selector de perfil. */
@supports selector(:has(*)) {
  html:has(.site-header-full) { --header-top-h: 54px; --header-bar-h: 60px; }
  @media (max-width: 1180px) {
    html:has(.site-header-full) { --header-top-h: 0px; --header-bar-h: 72px; }
  }
}
@supports not (selector(:has(*))) { .header-top { display: none; } }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--primary); }
.brand img { width: 36px; height: 36px; }
.brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--primary); white-space: nowrap; }
/* Wordmark "PROPIO³⁶⁰": mismo tratamiento que el Sidebar de CRM, BackOffice y PH (nombre + 360 chico y arriba). */
/* ⚠️ EL "360" VA VERDE, Y NO ES EL MISMO VERDE EN LOS DOS FONDOS (2026-09-20,
   decisión de Rodrigo). Medido contra el fondo real de cada caso:
     sobre claro  #FFFFFF  ->  --accent-btn  #447001   5,89:1
     sobre indigo #11104D  ->  --accent-lime #94D13A   9,49:1
   No sirve uno solo: --accent-btn sobre indigo da 2,96:1 y --accent-lime sobre
   blanco da 1,84:1, los dos por debajo del 3:1 de una marca grafica. Lo que
   habia, --accent-blue / --accent-blue-on-dark, no es verde: es el azul-gris de
   la identidad, y era la inconsistencia que se veia. Misma regla y mismas
   proporciones que `PropioWordmark` de packages/ui-shared. */
.brand-name sup, .mk-url sup {
  position: relative; top: -.72em; margin-left: .12em;
  font-size: .56em; font-weight: 800; line-height: 0; vertical-align: baseline; letter-spacing: 0; color: var(--accent-btn);
}
.brand-on-dark img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.brand-on-dark .brand-name { color: var(--text-on-dark); }
.brand-on-dark .brand-name sup { color: var(--accent-lime); }

/* =====================================================================
   EL "360" GIRA (2026-09-19, decisión de Rodrigo)
   ---------------------------------------------------------------------
   Una vuelta lenta y continua del numeral del wordmark, en el header y en el
   pie. Es el guiño de la marca: 360 grados, girando.

   ⚠️ 2026-09-20: el giro es HORIZONTAL (`rotateY`), no plano (`rotate`). Decisión
   de Rodrigo: una moneda girando sobre su eje vertical, no una manecilla de reloj.

   ⚠️ NO PUEDE MOVER NADA DE SITIO. Por eso:
     · Gira solo con `transform`, que no participa del layout -- ni `position`,
       ni `top`, ni `margin` entran en la animación.
     · El `<sup>` es en línea, y un elemento en línea IGNORA `transform`. Hay que
       volverlo `inline-block`, y eso sí podría mover el texto: se compensa con
       `line-height: 0` (que ya tenía) más `vertical-align: baseline` y un ancho
       que no cambia. Medido antes y después: la marca ocupa lo mismo al píxel.
     · `transform-origin: 50% 50%` -- si se deja el valor por defecto sobre un
       elemento con `line-height: 0`, el centro de giro cae fuera del glifo y el
       "360" describe una órbita en vez de girar sobre sí mismo.
     · `will-change: transform` lo sube a su propia capa: la animación no repinta
       el header entero en cada cuadro.

   ⚠️ SOLO WEB. Las apps móviles (Guard y Residentes) son React Native: su
   wordmark necesita su propia animación nativa, y NO se hizo acá. Anotado en
   `PENDIENTES.md` §🌐.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .brand-name sup {
    display: inline-block;
    transform-origin: 50% 50%;
    /* ⚠️ La PERSPECTIVA va acá, no en el padre. `perspective` como propiedad se
       aplica a los HIJOS de quien la declara, y el `<sup>` no tiene hijos: es él
       mismo el que gira. La que sirve es la FUNCIÓN `perspective()` dentro de su
       propio `transform`, que es lo que hace el keyframe.
       Sin ella, `rotateY()` es una proyección ortográfica: el "360" se aplasta
       en horizontal y vuelve a abrirse, como una persiana, sin nada de volumen. */
    backface-visibility: visible;
    animation: giro360 6s linear infinite;
    will-change: transform;
  }
  /* Al pasar el cursor por la marca el giro se acelera; es el único cambio de ritmo.
     ⚠️ 2026-09-20: el reposo bajó de 24s a 6s, así que el hover tuvo que bajar con él
     -- si no, quedaban iguales y el hover dejaba de hacer nada. */
  .brand:hover .brand-name sup { animation-duration: 2s; }
}
/* Giro HORIZONTAL sobre el eje vertical -- una moneda girando, no una manecilla
   de reloj. Dos paradas bastan: con `linear`, el navegador interpola el ángulo a
   velocidad constante y pasa por el perfil (90 y 270 grados, el glifo de canto)
   sin que haya que marcarlo. Ese es el momento que da la sensación de profundidad.
   ⚠️ Media vuelta se ve el REVERSO y el número sale espejado. Es lo que hace una
   moneda; la alternativa (`backface-visibility: hidden`) lo haría DESAPARECER
   medio ciclo, que es peor. Si algún día molesta, la salida es una tarjeta de dos
   caras -- y eso mete un nodo más dentro del wordmark, que hoy es lo que sostiene
   la garantía de que el giro no mueve nada.
   ⚠️ `perspective()` va PRIMERO en la lista: las funciones de `transform` se
   aplican de izquierda a derecha, y puesta después no afecta al giro que ya
   ocurrió. Con 220px el escorzo se nota sin deformar el número. */
@keyframes giro360 {
  from { transform: perspective(220px) rotateY(0deg); }
  to   { transform: perspective(220px) rotateY(360deg); }
}

.main-nav { display: flex; align-items: center; gap: 16px; }
.main-nav ul { display: flex; gap: 4px; }
.main-nav ul a {
  display: block; padding: 8px 12px; border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: .9375rem; font-weight: 500;
  transition: color .2s ease, background-color .2s ease;
}
.main-nav ul a:hover { color: var(--primary); background: var(--primary-soft); }
.main-nav ul a.is-active { color: var(--primary); background: var(--accent-blue-soft); }
.nav-call {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  color: var(--accent-blue); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
}
.nav-call:hover { background: var(--accent-blue-soft); color: var(--accent-blue-hover); }
.nav-call .icon { width: 18px; height: 18px; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--primary);
  align-items: center; justify-content: center; cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; }

@media (max-width: 1180px) {
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 16px var(--gutter) 24px;
    background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav ul a { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1rem; }
  .nav-cta { width: 100%; }
  /* Sin JS no hay botón de menú: la navegación queda visible debajo del logo. */
  html:not(.js) .site-header { position: static; height: auto; }
  /* La franja de navegación deja de tener alto fijo: sin JS el menú se despliega dentro de ella. */
  html:not(.js) .header-bar { height: auto; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .main-nav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  html:not(.js) .main-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 2px; }
  html:not(.js) .main-nav ul a { padding: 6px 10px; font-size: .875rem; }
  html:not(.js) .nav-call { padding: 6px 10px; font-size: .875rem; }
  html:not(.js) .nav-cta { width: auto; min-height: 36px; padding: 6px 14px; font-size: .875rem; }
  /* Sin JS el botón de menú no hace nada: no se muestra. */
  html:not(.js) .menu-toggle { display: none; }
}
/* Sin JS en celular: el header queda en una sola fila (logo + Solicitar demo); así la bienvenida de
   Sofía no baja 100 px. Las secciones siguen a un scroll y el teléfono está en Contacto y en el footer. */
@media (max-width: 560px) {
  html:not(.js) .header-inner { flex-wrap: nowrap; }
  html:not(.js) .main-nav { width: auto; flex-wrap: nowrap; }
  html:not(.js) .main-nav ul, html:not(.js) .nav-call { display: none; }
}

/* ---------- 2. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(20px, 3.5vw, 44px));
  padding-bottom: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(900px 480px at 88% 8%, var(--accent-blue-soft) 0%, rgba(232, 238, 249, 0) 70%),
    radial-gradient(600px 400px at 0% 100%, var(--primary-soft) 0%, rgba(231, 236, 239, 0) 70%),
    var(--surface);
}
/* Sin JS el header deja de ser fijo solo donde está el menú colapsable (≤1180 px): ahí no hay que dejarle espacio. */
@media (max-width: 1180px) { html:not(.js) .hero { padding-top: clamp(20px, 3.5vw, 44px); } }
.hero::before {
  /* retícula sutil, evoca plano arquitectónico */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17, 16, 77, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 16, 77, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

/* Badge del hero: sin subtítulo, él solo da el contexto (qué es, dónde, bajo qué ley).
   Más presencia que un eyebrow de sección (pastilla, navy, 14 px), sin competir con el título. */
@media (max-width: 560px) {
}
@media (max-width: 560px) {
}

/* Un solo punto de atención: título y la bienvenida de Sofía, centrados. */
.hero-inner { position: relative; }
.hero-copy { max-width: 720px; margin-inline: auto; text-align: center; }
.hero-copy .welcome { margin-inline: auto; text-align: left; }
/* Escritorio: bloque más ancho para que el título quepa en 2 líneas y la primera burbuja en 1. */
@media (min-width: 561px) {
  .hero-copy { max-width: 920px; }
  .hero-copy .welcome { max-width: 720px; }
}
/* Pantallas de poca altura (laptops de ~700-800 px visibles): todo lo que va antes de las 4
   opciones se compacta, para que se vean sin scroll. Solo desde 561 px de ancho: el celular
   tiene sus propios ajustes más abajo. */
@media (max-height: 820px) and (min-width: 561px) {
  .hero { padding-top: calc(var(--header-h) + 14px); padding-bottom: 32px; }
  .hero h1 { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.5rem); margin-bottom: 8px; }
  .hero-copy .welcome { margin-top: 14px; }
  .welcome-head { padding: 7px 16px; gap: 10px; }
  .welcome-head img { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--accent-lime); }
  .welcome-body { padding: 12px 16px; gap: 8px; }
  .w-bubble { padding: 7px 12px; }
  .welcome .aud-option { min-height: 48px; padding-block: 6px; }
}
/* Red de seguridad: donde ni así caben (celular en horizontal), un aviso de que la tarjeta sigue abajo. */
@media (max-height: 600px) {
}
@media (max-height: 600px) and (prefers-reduced-motion: no-preference) {
}
@keyframes nudgeDown { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
.hero-line { display: inline-block; max-width: 100%; }

.hero h1 {
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.08; letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.hero h1 .hl {
  color: var(--accent-blue);
  /* Sin subrayado: el acento del titulo es el COLOR del texto y nada mas (2026-09-19). */
}
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--text-muted); max-width: 36rem; }

/* Composición ilustrativa */
.showcase-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.showcase-copy h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); letter-spacing: -0.02em; }
.showcase-copy .ticks { margin-top: 22px; }
.facts-bottom { margin: clamp(36px, 5vw, 56px) 0 0; }
/* Sin bloque de diferenciadores encima (el administrador, desde el 2026-09-19) la tira de cifras
   es lo único de la banda: ese margen dejaría de separar algo y se volvería hueco. */
@supports selector(:has(*)) {
  body:has(#aud-admin:checked) #por-que .facts-bottom { margin-top: 0; }
}

.facts {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(48px, 7vw, 80px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}
.facts li { padding: 22px 24px; display: flex; flex-direction: column; gap: 2px; }
.facts li + li { border-left: 1px solid var(--border); }
.facts b { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 700; color: var(--primary); line-height: 1.1; }
.facts span { font-size: .875rem; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 1080px) {
  .showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-stage { max-width: 620px; width: 100%; margin-inline: auto; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .facts li { padding: 18px 16px; }
}

/* ---------- 5b. Así se ve: un mockup por perfil ----------
   HTML/CSS con datos de ejemplo; textos y disposición tomados de la pantalla real de cada app
   (la referencia exacta está en un comentario junto a cada mockup en index.html). */
.mk-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-bottom: 44px; }
/* Teléfono corrido a la derecha para que la insignia de la izquierda no tape la pantalla. */
.mk-stage-end { justify-content: flex-end; padding-right: 16%; }

/* Ventana web: Propio 360 - PH y BackOffice */
.mk-win { width: 100%; max-width: 580px; overflow: hidden; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.mk-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--primary); }
.mk-dots { display: flex; flex: none; gap: 5px; }
.mk-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
/* El "360" de la URL de marca vive sobre oscuro: lima, no --accent-btn. */
.mk-url sup { color: var(--accent-lime); }
.mk-url { min-width: 0; font-size: .6875rem; font-weight: 500; color: var(--text-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-body { display: grid; gap: 8px; padding: 16px; background: var(--background); }
.mk-h { font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--primary); }
.mk-sub { margin-top: -6px; font-size: .6875rem; color: var(--text-muted); }
.mk-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); font-size: .6875rem; font-weight: 600; color: var(--text-muted); }
.mk-tabs span { padding-block: 6px; }
.mk-tabs .is-on { color: var(--accent-blue); box-shadow: inset 0 -2px 0 var(--accent-blue); }
.mk-label { margin-top: 4px; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.mk-alert { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; font-size: .6875rem; line-height: 1.4; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.mk-alert b { display: block; font-size: .75rem; color: var(--primary); }
.mk-alert-dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; }
.mk-alert-dot.is-warn { background: var(--warning-text); }
.mk-alert-dot.is-info { background: var(--accent-blue); }
.mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-card { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.mk-card-wide { margin-top: 2px; }
.mk-card-t { font-size: .6875rem; font-weight: 700; color: var(--primary); }
.mk-num { font-size: 1.125rem; font-weight: 700; line-height: 1.1; color: var(--primary); }
.mk-cap { font-size: .625rem; color: var(--text-muted); }
.mk-row { display: flex; justify-content: space-between; gap: 6px; font-size: .625rem; color: var(--text-muted); }
.mk-row b { font-weight: 600; color: var(--text); white-space: nowrap; }
.mk-trio { display: flex; gap: 14px; }
.mk-trio span { display: grid; font-size: .5625rem; color: var(--text-muted); }
.mk-trio b { font-size: 1.125rem; line-height: 1.2; color: var(--primary); }
.mk-trio .is-warn b { color: var(--warning-text); }
.mk-alerts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mk-acard { display: grid; gap: 2px; align-content: start; padding: 8px; font-size: .5625rem; line-height: 1.3; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--input-border); border-radius: 10px; }
.mk-acard b { font-size: 1.125rem; line-height: 1.1; color: var(--primary); }
.mk-acard.is-warn { border-left-color: var(--warning-text); }
.mk-acard.is-ok { border-left-color: var(--success); }
.mk-acard.is-info { border-left-color: var(--accent-blue); }
.mk-bar-row { display: grid; grid-template-columns: 13em minmax(0, 1fr) 2em; align-items: center; gap: 8px; font-size: .625rem; color: var(--text); }
.mk-bar-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-bar-row i { position: relative; display: block; height: 6px; border-radius: 6px; background: var(--primary-soft); }
.mk-bar-row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: var(--accent-blue); }
.mk-bar-row b { text-align: right; color: var(--primary); }

/* Teléfono: Propio 360 - Guard */
.mk-phone { position: relative; z-index: 1; flex: none; width: 236px; padding: 10px; text-align: left; background: var(--primary-deep); border-radius: 32px; box-shadow: var(--shadow-lg); }
.mk-phone-back { margin: 64px 0 0 20px; }
.mk-notch { width: 64px; height: 6px; margin: 2px auto 8px; border-radius: 6px; background: rgba(255, 255, 255, .18); }
.mk-appbar { padding: 10px 12px; color: var(--text-on-dark); background: var(--primary); border-radius: 20px 20px 6px 6px; }
.mk-appbar b { display: block; font-size: .8125rem; font-weight: 600; }
.mk-appbar small { display: block; font-size: .625rem; color: var(--text-on-dark-muted); }
.mk-screen { display: grid; gap: 8px; align-content: start; min-height: 300px; margin-top: 4px; padding: 10px; background: var(--background); border-radius: 6px 6px 22px 22px; }
.mk-offline { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; font-size: .625rem; font-weight: 600; line-height: 1.3; color: var(--warning-text); background: var(--warning-bg); border-radius: 6px; }
.mk-offline .icon { flex: none; width: 13px; height: 13px; }
.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-tiles span { display: flex; flex-direction: column; gap: 8px; min-height: 80px; padding: 10px; font-size: .6875rem; font-weight: 600; line-height: 1.25; color: var(--primary); background: var(--surface); border-radius: 12px; -webkit-hyphens: manual; hyphens: manual; }
.mk-tiles .icon { width: 22px; height: 22px; color: var(--accent-blue); }
.mk-intro { font-size: .625rem; line-height: 1.45; color: var(--text-muted); }
.mk-codecard { display: grid; justify-items: center; gap: 8px; padding: 12px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.mk-code-name { font-size: .625rem; color: var(--text-muted); }
.mk-code { font-size: 1.625rem; font-weight: 700; line-height: 1; letter-spacing: .12em; color: var(--primary); font-variant-numeric: tabular-nums; }
.mk-chip { justify-self: start; padding: 2px 8px; font-size: .5625rem; font-weight: 600; border-radius: 999px; white-space: nowrap; }
.mk-codecard .mk-chip { justify-self: center; }
.mk-chip.is-ok { color: var(--success-text); background: var(--success-bg); }
.mk-chip.is-warn { color: var(--warning-text); background: var(--warning-bg); }
/* QR decorativo: 3 cuadros de posición y un patrón fijo. No es un código legible. */
.mk-qr { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 1px; width: 96px; height: 96px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.mk-qr i { background: var(--primary-deep); border-radius: 1px; }
.mk-finder { border-radius: 3px; background: var(--primary-deep); box-shadow: inset 0 0 0 3px var(--primary-deep), inset 0 0 0 6px #fff; }
.mk-btns { display: flex; gap: 6px; width: 100%; }
.mk-btn-o, .mk-btn-f { flex: 1; padding: 7px 0; font-size: .625rem; font-weight: 600; text-align: center; border-radius: 999px; }
/* Botones de la app en azul/navy, nunca en verde: el único verde de la vista es el CTA de la página. */
.mk-btn-o { color: var(--accent-blue); box-shadow: inset 0 0 0 1.5px var(--accent-blue); }
.mk-btn-f { color: var(--text-on-dark); background: var(--primary); }
.mk-btn-block { flex: none; }
.mk-entry { display: grid; gap: 3px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.mk-entry b { font-size: .6875rem; color: var(--primary); }
.mk-entry small { font-size: .5625rem; color: var(--text-muted); }

/* Insignia flotante sobre el mockup */
.float-badge {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: .75rem; line-height: 1.35; color: var(--text-muted);
}
.float-badge b { color: var(--primary); font-weight: 600; }
.float-badge .icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--accent-lime); color: var(--accent-lime-ink); }
.mk-badge-br { right: 0; bottom: 0; }
.mk-badge-l { left: 0; bottom: 56px; }

@media (max-width: 560px) {
  /* Celular: un solo elemento por mockup y la insignia debajo, sin tapar nada. */
  .mk-stage, .mk-stage-end { flex-direction: column; align-items: center; gap: 14px; padding: 0; }
  .mk-phone-back { display: none; }
  .float-badge { position: static; }
  .mk-body { padding: 12px; }
  .mk-grid { gap: 6px; }
  .mk-card { padding: 8px 10px; }
  .mk-alerts { grid-template-columns: repeat(2, 1fr); }
  .mk-bar-row { grid-template-columns: 8.5em minmax(0, 1fr) 2em; }
}
@media (max-width: 360px) {
  .mk-grid { grid-template-columns: 1fr; }
}

/* ---------- Secciones genéricas ---------- */
.section { padding-block: var(--section-y); }
.section-alt { background: var(--background); }
/* Dos secciones alternas seguidas (precios + contacto) dejaban el cierre plano:
   el contacto vuelve a blanco para que el ultimo bloque se separe del anterior. */
#contacto.section-alt { background: var(--surface); }
/* Ritmo de bandas: blanco -> gris -> blanco -> navy -> AZUL -> gris -> blanco.
   `#por-que` (los diferenciadores) es la seccion que mas merece destacarse y estaba en
   blanco, igual que sus vecinas. El azul palisimo la separa sin romper la sobriedad. */
#por-que { background: var(--surface-blue); }
/* 5 tonos de banda: blanco, gris azulado, azul palido, VIOLETA palido y el navy de Sofia.
   Precios llevaba el mismo gris que Modulos y las dos secciones se fundian. */
.section-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); letter-spacing: -0.02em; }
.section-lead { margin-top: 16px; font-size: 1.0625rem; color: var(--text-muted); }

/* ---------- Selector de audiencia ---------- */
/* Radios nativos: el foco y las flechas del teclado son los del navegador, sin JS.
   El radio queda invisible pero enfocable; el label hermano muestra el estado. */
.aud-options { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.aud-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.aud-option {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 20px; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--surface); border: 2px solid var(--border);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
/* Solo con puntero real: en celular el hover queda "pegado" después del toque. */
@media (hover: hover) { .aud-option:hover { border-color: var(--accent-blue); transform: translateY(-2px); box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .aud-option { transition: none; } }
.aud-option-icon {
  display: inline-flex; width: 48px; height: 48px; border-radius: 14px; align-items: center; justify-content: center;
  background: var(--accent-blue-soft); color: var(--accent-blue);
}
.aud-option-icon .icon { width: 26px; height: 26px; }
.aud-option-text b { display: block; color: var(--primary); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.aud-option-text small { display: block; margin-top: 4px; color: var(--text-muted); font-size: .875rem; line-height: 1.45; }
.aud-option-check {
  position: absolute; top: 16px; right: 16px; display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  align-items: center; justify-content: center; border: 2px solid var(--input-border); color: transparent;
}
.aud-option-check .icon { width: 16px; height: 16px; stroke-width: 3; }

.aud-radio:checked + .aud-option { border-color: var(--primary); background: var(--primary); box-shadow: var(--shadow); }
.aud-radio:checked + .aud-option .aud-option-text b { color: var(--text-on-dark); }
.aud-radio:checked + .aud-option .aud-option-text small { color: var(--text-on-dark-muted); }
/* ⚠️ Con la insignia unificada (circulo lima), esta regla dejaba el glifo del mismo tono
   que su fondo: 1:1. La opcion marcada conserva el circulo lima y solo cambia el anillo,
   que sobre la tarjeta navy tiene que ser claro para no desaparecer. */
.aud-radio:checked + .aud-option .aud-option-icon {
  background: var(--accent-lime); color: var(--accent-lime-ink);
  border-color: rgba(255, 255, 255, .45);
}
.aud-radio:checked + .aud-option .aud-option-check { border-color: var(--accent-lime); background: var(--accent-lime); color: var(--accent-lime-ink); }
.aud-radio:focus-visible + .aud-option { outline: 3px solid var(--accent-blue); outline-offset: 3px; }
@media (max-width: 1080px) { .aud-options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .aud-options { grid-template-columns: 1fr; gap: 10px; }
  .aud-option { flex-direction: row; align-items: center; padding: 14px 52px 14px 14px; }
  .aud-option-icon { flex: none; width: 44px; height: 44px; }
  .aud-option-check { top: 50%; transform: translateY(-50%); }
}

/* Mostrar solo el contenido del perfil elegido. Sin soporte de :has() el bloque se ignora
   y se ven las 4 versiones una debajo de la otra, cada una con su etiqueta. */
@supports selector(:has(*)) {
  .aud-panel { display: none; }
  body:has(#aud-admin:checked) .aud-panel[data-aud="admin"],
  body:has(#aud-residente:checked) .aud-panel[data-aud="residente"],
  body:has(#aud-vigilancia:checked) .aud-panel[data-aud="vigilancia"],
  body:has(#aud-empresa:checked) .aud-panel[data-aud="empresa"] { display: block; }
  .aud-only { display: none; }
  /* Hasta que la persona elige perfil, lo que depende de él no se muestra y aparece el estado vacío. */
  body:not(:has(.aud-radio:checked)) .aud-section,
  body:not(:has(.aud-radio:checked)) .needs-aud,
  body:not(:has(.aud-radio:checked)) .needs-aud-link { display: none; }
  body:not(:has(.aud-radio:checked)) .aud-empty { display: block; }
  body:has(#aud-admin:checked) .aud-only[data-aud="admin"],
  body:has(#aud-residente:checked) .aud-only[data-aud="residente"],
  body:has(#aud-vigilancia:checked) .aud-only[data-aud="vigilancia"],
  body:has(#aud-empresa:checked) .aud-only[data-aud="empresa"] { display: block; }
}
.aud-panel + .aud-panel { margin-top: 72px; }
@supports selector(:has(*)) { .aud-panel + .aud-panel { margin-top: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* Al mostrarse (cambio de perfil) cada bloque entra deslizándose; con JS, además, sus partes en cascada. */
  .aud-panel { animation: panelIn .55s cubic-bezier(.2, .7, .2, 1) both; }
  .is-switching .aud-panel > * { animation: panelIn .6s cubic-bezier(.2, .7, .2, 1) both; }
  .is-switching .aud-panel > *:nth-child(2) { animation-delay: .07s; }
  .is-switching .aud-panel > *:nth-child(3) { animation-delay: .14s; }
  .is-switching .aud-panel > *:nth-child(n+4) { animation-delay: .21s; }
}
@keyframes panelIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Contexto del perfil: una línea discreta sobre el eyebrow (antes era una pastilla con fondo que competía con él). */
/* La etiqueta de audiencia pasa de linea gris suelta a ficha. Dos razones: (1) con 192 px de
   aire delante, una linea de 13 px hacia que el espacio pareciera un error -- una ficha ocupa
   el sitio a proposito; (2) el color la vuelve una senal de CATEGORIA ("esto es lo suyo"),
   que es justo lo que este sitio segmentado necesita decir. El tinte cambia por audiencia. */
.aud-tag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: fit-content; max-width: 100%;
  margin-bottom: clamp(18px, 2.2vw, 28px); padding: 5px 14px; border-radius: 999px;
  /* Ojo: NO --primary-soft. `.section-alt` se redefine a ese mismo color mas abajo,
     asi que la ficha desapareceria en #modulos y #precios. */
  background: var(--surface); border: 1px solid var(--chip-border);
  font-size: .8125rem; color: var(--primary);
}
body:has(#aud-residente:checked) .aud-tag { background: var(--chip-bg); border-color: #A9A9C2; color: var(--accent-blue); }
body:has(#aud-vigilancia:checked) .aud-tag { background: var(--success-bg); border-color: #BFDF93; color: var(--success-text); }
body:has(#aud-empresa:checked)   .aud-tag { background: #DCDCE4; border-color: #B2B2C4; color: var(--primary-deep); }
.aud-tag b { color: inherit; font-weight: 700; }
.aud-tag a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; opacity: .85; }
.aud-tag a:hover { text-decoration-color: currentColor; }
.aud-tag span::after { content: "·"; margin-left: 8px; opacity: .55; }

.group-title { font-size: 1.25rem; margin: 8px 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.group-title small { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }
.cards + .group-title { margin-top: 40px; }
.also { margin-top: 24px; font-size: .9375rem; color: var(--text-muted); }

.quote-box {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.quote-icon {
  display: inline-flex; width: 64px; height: 64px; border-radius: 18px; align-items: center; justify-content: center;
  background: var(--primary); color: var(--text-on-dark);
}
.quote-icon .icon { width: 32px; height: 32px; }
.quote-box h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 6px; }
.channel-points { margin-top: 14px; display: grid; gap: 8px; }
.channel-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--text); }
.channel-points .icon { color: var(--accent-blue); margin-top: 2px; }
/* Cierre de una razon despues de sus bullets: es la consecuencia, no un item mas. */
.reason-out { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
/* `.also` era un parrafo con 7 modulos separados por puntos medios: se lee como una frase
   larga aunque sea una lista. Como fichas se barre de un vistazo, con el mismo contenido. */
.also-title { font-weight: 600; color: var(--text); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 5px 13px; border-radius: 999px; background: var(--chip-bg);
  border: 1px solid var(--chip-border); font-size: .8125rem; font-weight: 500;
  line-height: 1.45; color: var(--primary); white-space: nowrap;
  max-width: 100%;
}
/* ⚠️ `nowrap` no se encoge: una ficha larga ensancha la PÁGINA entera en vez de cortarse
   (pasó el 2026-09-19 a 320 px, con una ficha de 340). En celular pesa más no desbordar
   que mantener la ficha en una sola línea; de 561 px para arriba sí caben todas. */
@media (max-width: 560px) { .chips li { white-space: normal; } }
/* Cierre de una tarjeta de razon: las fichas resumen lo que el propio parrafo ya dijo.
   `margin-top: auto` las ancla abajo, que es lo que iguala el peso visual de las 4
   tarjetas cuando la rejilla las estira a la altura de la fila (habia huecos de 138 px). */
.reason-chips { margin-top: auto; padding-top: 14px; }
.reason-chips li { white-space: normal; }
.quote-box p { color: var(--text-muted); max-width: 40rem; }
@media (max-width: 800px) {
  .quote-box { grid-template-columns: minmax(0, 1fr); }
  /* Los CTA de esta caja son largos: en celular se parten en 2 líneas en vez de desbordar. */
  .quote-box .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- 2b. Bienvenida guionada de Sofía (el selector de perfil) ---------- */
/* Simulación: texto fijo y 4 radios. Sin JS se ve estática; con JS aparece con "escribiendo...". */
.welcome {
  position: relative; margin-top: 22px; max-width: 640px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.welcome-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); }
.welcome-head img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-lime); }
.welcome-head b { display: block; color: var(--text-on-dark); font-weight: 600; line-height: 1.2; }
.welcome-head small { display: block; color: var(--text-on-dark-muted); font-size: .75rem; }
.welcome-body { display: grid; gap: 10px; padding: 18px; background: var(--background); }

.w-bubble {
  justify-self: start; max-width: 94%; margin: 0; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; border-top-left-radius: 4px;
  box-shadow: var(--shadow-sm); font-size: .9375rem; line-height: 1.5; color: var(--text);
}
.w-bubble b { color: var(--primary); }
.w-reply a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.w-reply a .icon { width: 16px; height: 16px; }
.w-fallback { display: none; margin: 0; }
@supports not selector(:has(*)) { .w-fallback { display: block; } }

.welcome .quick-replies { grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0; }
.welcome .aud-option { flex-direction: row; align-items: center; gap: 10px; padding: 8px 40px 8px 8px; border-width: 1.5px; border-radius: 14px; min-height: 56px; }
.welcome .aud-option-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.welcome .aud-option-icon .icon { width: 20px; height: 20px; }
.welcome .aud-option-text b { font-size: .875rem; }
.welcome .aud-option-text small { display: none; }
.welcome .aud-option-check { top: 50%; right: 10px; width: 22px; height: 22px; transform: translateY(-50%); }
.welcome .aud-option-check .icon { width: 14px; height: 14px; }

.welcome-note {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 18px 14px;
  background: var(--background); border-top: 1px solid var(--border);
  font-size: .8125rem; line-height: 1.5; color: var(--text-muted);
}
.welcome-note .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-blue); }

/* "escribiendo..." */
.w-typing { display: none; justify-self: start; gap: 5px; margin: 0; padding: 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; border-top-left-radius: 4px; }
.w-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--input-border); animation: typing 1s ease-in-out infinite; }
.w-typing span:nth-child(2) { animation-delay: .15s; }
.w-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.welcome.is-typing .w-typing { display: inline-flex; }
.welcome.is-scripted .w-msg:not(.is-shown),
.welcome.is-scripted .w-replies:not(.is-shown) { display: none; }
.welcome.is-scripted .quick-replies .aud-option { transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1.2), border-color .2s ease, background-color .2s ease; }
.welcome.is-scripted .quick-replies:not(.is-shown) .aud-option { opacity: 0; transform: translateY(12px) scale(.97); }
.welcome.is-scripted .quick-replies .aud-option:nth-of-type(2) { transition-delay: .08s; }
.welcome.is-scripted .quick-replies .aud-option:nth-of-type(3) { transition-delay: .16s; }
.welcome.is-scripted .quick-replies .aud-option:nth-of-type(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: no-preference) {
  .w-msg.is-shown, .w-reply { animation: bubbleIn .45s cubic-bezier(.2, .8, .2, 1.15) both; transform-origin: top left; }
}
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .welcome { margin-top: 16px; }
  .welcome .quick-replies { grid-template-columns: 1fr; gap: 6px; }
  .welcome .aud-option { min-height: 50px; }
  .welcome-body { padding: 12px; gap: 8px; }
  .w-bubble { font-size: .875rem; padding: 8px 12px; }
}
@media (max-width: 400px) {
  .hero { padding-top: calc(var(--header-h) + 6px); }
  .hero h1 { font-size: 1.625rem; margin-bottom: 8px; }
  .welcome-head { padding: 6px 14px; gap: 10px; }
  .welcome-head img { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--accent-lime); }
  .welcome-body { padding: 10px; gap: 6px; }
  .w-bubble { font-size: .8125rem; line-height: 1.45; padding: 7px 11px; }
  .welcome .quick-replies { gap: 5px; }
  .welcome .aud-option { min-height: 44px; padding: 5px 34px 5px 6px; gap: 8px; }
  .welcome .aud-option-icon { width: 32px; height: 32px; }
  .welcome .aud-option-icon .icon { width: 18px; height: 18px; }
  .welcome .aud-option-text b { font-size: .8125rem; line-height: 1.25; }
  .welcome .aud-option-check { right: 8px; width: 20px; height: 20px; }
  .welcome-note { padding: 6px 12px 8px; font-size: .75rem; line-height: 1.4; }
}
/* 320 px, el ancho más angosto razonable: un poco más apretado para que las 4 respuestas entren enteras. */
@media (max-width: 340px) {
  .hero { padding-top: calc(var(--header-h) + 8px); }
  .hero h1 { font-size: 1.5rem; }
  .welcome { margin-top: 12px; }
  .welcome-head { padding: 6px 12px; }
  .welcome .quick-replies { gap: 4px; }
  .welcome .aud-option { min-height: 40px; padding-block: 4px; }
  .welcome .aud-option-icon { width: 28px; height: 28px; }
}

/* ---------- 3. Estado vacío (sin perfil elegido) ---------- */
.aud-empty { display: none; padding-block: clamp(8px, 2vw, 16px) clamp(48px, 7vw, 80px); }
.aud-empty-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  max-width: 720px; margin-inline: auto; padding: 20px 24px; border-radius: var(--radius-lg);
  background: var(--surface); border: 2px dashed var(--input-border);
}
.aud-empty-card h2 { font-size: 1.125rem; }
.aud-empty-card p { margin-top: 2px; font-size: .9375rem; color: var(--text-muted); }
.aud-empty-icon {
  display: inline-flex; width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--accent-blue-soft); color: var(--accent-blue);
}
.aud-empty-icon .icon { width: 24px; height: 24px; stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
  .aud-empty-icon .icon { animation: pointUp 1.8s ease-in-out infinite; }
}
@keyframes pointUp { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@media (max-width: 600px) {
  .aud-empty-card { grid-template-columns: auto 1fr; padding: 16px; }
  .aud-empty-card .btn { grid-column: 1 / -1; width: 100%; }
}

/* ---------- 4. El dolor (por audiencia) ---------- */
/* La frase va grande y sola: tiene que leerse en menos de 3 segundos, con el CTA inmediatamente debajo. */
/* Iba con su propio par (72 arriba / 96 abajo) y quedaba fuera del ritmo nuevo:
   96 px de cola contra los 68 del resto. Se alinea al sistema. */
.pain-section { padding-block: clamp(34px, 4vw, 56px) var(--section-y); }
.pain .eyebrow { margin-bottom: 10px; }
.pain-title {
  max-width: 46rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem);
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
.pain-answer, .pain-actions, .pain-ease { max-width: 56rem; }

/* ---------- Carrusel de los 5 problemas ---------- */
/* La base es CSS: scroll horizontal con scroll-snap (swipe, rueda y teclado con foco en la pista).
   Las flechas y los puntos (js/main.js) solo mueven ese mismo scroll. */
.problems { position: relative; margin-top: clamp(18px, 2.5vw, 24px); }
.problems-track {
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Deja ver la sombra de las tarjetas y el anillo de foco sin cortarlos. */
  padding: 6px 4px 18px; margin: -6px -4px -18px;
  border-radius: var(--radius-card);
}
.problems-track::-webkit-scrollbar { display: none; }
/* La tarjeta que asoma a la derecha se desvanece en vez de cortarse en seco; al llegar al final
   (clase que pone js/main.js) se ve completa. Sin JS se queda el desvanecido, que es sutil. */
.problems-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.problems-track.is-at-end, .problems-track:focus-visible { -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: no-preference) { .problems-track { scroll-behavior: smooth; } }
.problems-track:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; }

.problems-list { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.problem-card {
  /* Escritorio: casi 3 tarjetas a la vista, la cuarta asoma para sugerir que hay más. */
  flex: 0 0 calc((100% - 32px) / 2.6);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px; min-height: 260px;
  padding: 22px 24px; border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.problem-num {
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--accent-blue);
  display: inline-flex; align-items: center; gap: 8px;
}
.problem-num::before { content: ""; width: 18px; height: 4px; border-radius: 4px; background: var(--accent-lime); }
.problem-text { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); font-weight: 600; line-height: 1.4; color: var(--primary); text-wrap: pretty; }
.problem-source { font-size: .75rem; line-height: 1.45; color: var(--text-muted); }
/* Cómo lo resuelve Propio 360: se lee como respuesta, no como más problema. Va abajo, separado por
   una línea, con un rótulo verde de estado (texto sobre pastel, nunca un botón) y el texto en gris oscuro. */
.problem-solution {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: .875rem; line-height: 1.5; color: var(--text);
}
.problem-solution-label {
  display: flex; align-items: center; gap: 6px; width: fit-content; margin-bottom: 6px;
  padding: 2px 10px 2px 4px; border-radius: 999px;
  background: var(--success-bg); color: var(--success-text);
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.problem-solution-label .icon {
  width: 16px; height: 16px; padding: 3px; border-radius: 50%; stroke-width: 3.2;
  background: var(--accent-lime); color: var(--accent-lime-ink);
}
.problem-context { display: block; margin-bottom: 2px; font-size: .8125rem; font-weight: 600; color: var(--text); }

.problems-controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
/* Escritorio: las flechas suben a la altura del título, para que el CTA quede a la vista sin bajar. */
@media (min-width: 1100px) {
  .problems-controls { position: absolute; right: 0; bottom: calc(100% + 18px); margin-top: 0; }
}
.problems-arrow {
  display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border); color: var(--primary); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.problems-arrow .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.problems-arrow:hover:not(:disabled) { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--accent-blue-soft); }
.problems-arrow:disabled { opacity: .4; cursor: default; }
.problems-arrow:focus-visible, .problems-dot:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
.problems-dots { display: flex; align-items: center; gap: 2px; }
/* Área táctil de 24 px con un punto visual de 8 px. */
.problems-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.problems-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--input-border); transition: width .25s ease, background-color .25s ease; }
.problems-dot[aria-current="true"]::before { width: 22px; background: var(--primary); }
@media (prefers-reduced-motion: reduce) { .problems-dot::before, .problems-arrow { transition: none; } }

@media (max-width: 960px) { .problem-card { flex-basis: calc((100% - 16px) / 1.6); } }
/* Celular: una tarjeta a la vez, con la siguiente asomando. */
@media (max-width: 560px) {
  .problem-card { flex-basis: 86%; min-height: 0; padding: 18px 20px; gap: 8px; }
  .pain-answer { margin-top: 14px; font-size: 1rem; }
  .pain-actions { margin-top: 18px; }
  .problems-list { gap: 12px; }
}
.pain-answer { margin-top: 18px; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--text-muted); max-width: 44rem; }
.pain-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pain-ease { margin-top: 14px; font-size: .875rem; font-weight: 500; color: var(--text-muted); }
@media (max-width: 560px) {
  .pain-actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- Tarjetas (módulos) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  /* La rejilla estira las tarjetas al alto de su fila. En columna, la salvedad se ancla
     abajo (`.card-note { margin-top: auto }`) y el hueco muerto queda repartido, no al
     final: medido antes, hasta 70 px de vacio al pie de una tarjeta corta. */
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow); border-color: rgba(46, 45, 98, .22); }
.card-icon {
  display: inline-flex; width: 48px; height: 48px; border-radius: 12px; align-items: center; justify-content: center;
  background: var(--accent-blue-soft); color: var(--accent-blue); margin-bottom: 16px;
  transition: background-color .25s ease, color .25s ease;
}
.card:hover .card-icon { background: var(--accent-lime); color: var(--accent-lime-ink); }
.card-icon .icon { width: 24px; height: 24px; }
.card h4 { font-size: var(--fs-card-title); font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.card p { font-size: .9375rem; color: var(--text-muted); line-height: 1.6; }
/* 2026-09-19 — reestructuración de texto largo. Varias tarjetas metían dos cosas en un solo
   párrafo: qué hace el módulo y un límite o salvedad. La salvedad baja a `.card-note`, que la
   subordina sin esconderla —sigue siendo legible (4.5:1) y se lee aparte—; y las enumeraciones
   largas bajan a `.card-points`. No se quitó información: se reubicó. */
.card-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: .875rem; color: var(--text-muted); line-height: 1.5;
}
.card-note .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--accent-blue); }
/* ⚠️ Las notas van TODAS en peso regular. Algunas llevan <strong> en el HTML y quedaban
   en negrilla mientras las demas no: la nota es una salvedad, no una jerarquia superior
   a la descripcion que tiene encima. Se conserva el color mas firme, no el grosor. */
.card-note strong { color: var(--text); font-weight: 400; }
.card-points { margin-top: 8px; display: grid; gap: 5px; }
.card-points li {
  position: relative; padding-left: 15px; font-size: .9375rem; color: var(--text-muted); line-height: 1.5;
}
.card-points li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent-lime);
}

@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } .card { padding: 20px; } }

/* ---------- 4b. Sofía ---------- */
.sofia-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.sofia-copy h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); letter-spacing: -0.02em; }

.sofia-points { margin-top: 28px; display: grid; gap: 16px; }
.sofia-status {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 4px 12px 4px 8px; border-radius: 999px;
  background: var(--success-bg); color: var(--success-text); font-size: .8125rem; font-weight: 600;
}
.sofia-status .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.bubble-bot p + p { margin-top: 6px; }
.sofia-points li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-muted); font-size: .9375rem; line-height: 1.55; }
.sofia-points b { color: var(--primary); font-weight: 600; }
.sofia-point-icon {
  flex: none; display: inline-flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center;
  background: var(--accent-blue-soft); color: var(--accent-blue);
}
.sofia-point-icon .icon { width: 20px; height: 20px; }

.chat-mock {
  width: 100%; max-width: 420px; justify-self: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); }
/* Aro lima sobre navy (5.88:1), como en la bienvenida de support-chat. */
.chat-head img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-lime); }
.chat-head b { display: block; color: var(--text-on-dark); font-weight: 600; line-height: 1.2; }
.chat-head small { display: block; color: var(--text-on-dark-muted); font-size: .75rem; }

.chat-body { padding: 20px 18px 8px; background: var(--background); display: grid; gap: 12px; }
.bubble { margin: 0; font-size: .875rem; line-height: 1.5; border-radius: 16px; padding: 10px 14px; }
.bubble-user { justify-self: end; max-width: 80%; background: var(--primary); color: var(--text-on-dark); border-bottom-right-radius: 4px; }
.bubble-row { display: flex; gap: 8px; align-items: flex-start; }
.bubble-row img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.bubble-bot { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-top-left-radius: 4px; box-shadow: var(--shadow-sm); }
.bubble-bot b { color: var(--primary); }
.bubble-bot ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; color: var(--text-muted); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 38px; }
.chat-chips span { font-size: .75rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--accent-blue-soft); color: var(--accent-blue); }
.chat-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 14px 14px; padding: 8px 8px 8px 16px; border: 1.5px solid var(--border); border-radius: 999px; font-size: .875rem; color: var(--text-muted); }
.chat-send { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primary); color: var(--text-on-dark); }
.chat-send .icon { width: 16px; height: 16px; }

@media (max-width: 900px) { .sofia-grid { grid-template-columns: 1fr; } }

.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; font-size: .9375rem; line-height: 1.5; }
.ticks b { color: var(--primary); font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052008' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- 6. Por qué ---------- */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.reason {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 20px; align-items: start;
  padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.reason:hover { box-shadow: var(--shadow); border-color: rgba(46, 45, 98, .22); }
.reason-icon { grid-row: span 2; }
.reason-icon {
  display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center;
  background: var(--accent-lime); color: var(--accent-lime-ink);
}
.reason-icon .icon { width: 26px; height: 26px; }
/* 2026-09-19, paleta ampliada: rotacion de 3 tintes de MARCA (lima, azul, navy).
   Se probo con 6 (sumando violeta, cian y magenta) y se revirtio el mismo dia: el sitio
   volvio a 2 colores. Glifo oscuro sobre tinte claro: lima 8.98, azul 7.08, navy 9.50. */
.card:hover .card-icon, .section-dark .card:hover .card-icon { background: var(--accent-lime); color: var(--accent-lime-ink); }
/* `.reason` es una rejilla de 2 columnas con el icono ocupando la columna 1 en ambas filas.
   Solo había 2 hijos de texto (h3 y p), así que caían en la columna 2 por orden. Al agregar
   bullets y el cierre (2026-09-19) aparecieron filas implícitas que arrancaban en la columna 1,
   debajo del icono. Se fija la columna para todo lo que no sea el icono. */
.reason > :not(.reason-icon) { grid-column: 2; }
/* La ultima fila absorbe el sobrante para que `.reason-chips { margin-top: auto }`
   pegue las fichas al pie y las tarjetas de una fila terminen igual. */
.reason { grid-auto-rows: min-content; }
.reason > .reason-chips:last-child { align-self: end; margin-top: 14px; }
.reason h3 { font-size: var(--fs-card-title); line-height: 1.3; margin: 12px 0 8px; }
.reason p { font-size: .9375rem; color: var(--text-muted); }

@media (max-width: 860px) { .reasons { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .reason { grid-template-columns: 1fr; } .reason-icon { grid-row: auto; margin-bottom: 6px; } }

/* ---------- 6b. Planes y precios ---------- */
.included {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 18px 22px; margin-bottom: 24px;
  background: var(--success-bg); border-radius: var(--radius-card);
}
.included-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--success-text); font-size: .9375rem; }
.included-title .icon { width: 20px; height: 20px; stroke-width: 2.6; }
.included-list { display: flex; flex-wrap: wrap; gap: 8px; }
.included-list li { font-size: .8125rem; font-weight: 500; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--text); }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px 24px; border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:not(.plan-custom):hover { border-color: rgba(46, 45, 98, .22); box-shadow: var(--shadow); }
.plan-name { font-size: 1.25rem; }
.plan-units { margin-top: 4px; font-size: .875rem; line-height: 1.65; color: var(--text-muted); min-height: 4.95em; } /* 3 líneas: alinea los precios */
.plan-price { margin-top: 18px; display: flex; flex-direction: column; }
.plan-amount { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); font-weight: 700; color: var(--primary); line-height: 1.1; letter-spacing: -0.02em; }
.plan-amount-text { font-size: clamp(1.625rem, 1.3rem + .8vw, 2rem); }
.plan-per { font-size: .8125rem; color: var(--text-muted); }
.plan-note { margin-top: 6px; font-size: .8125rem; color: var(--text-muted); }
.plan-support {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 20px 0 24px; padding-top: 18px; border-top: 1px solid var(--primary-soft);
  font-size: .9375rem; font-weight: 500; color: var(--text); flex: 1;
}
.plan-support .icon { color: var(--accent-blue); margin-top: 2px; }

.plan-featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.plan-badge {
  position: absolute; top: -13px; left: 24px;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 12px; border-radius: 999px;
  background: var(--accent-lime); color: var(--accent-lime-ink);
}

.plan-custom { background: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%); border-color: transparent; }
.plan-custom .plan-name, .plan-custom .plan-amount { color: var(--text-on-dark); }
.plan-custom .plan-units, .plan-custom .plan-note { color: var(--text-on-dark-muted); }
.plan-custom .plan-support { color: var(--text-on-dark); border-top-color: rgba(255, 255, 255, .14); }
.plan-custom .plan-support .icon { color: var(--accent-blue-on-dark); }
/* Contorno sobre navy: azul claro, nunca --accent-blue (1.37:1). */
.btn-on-navy { color: var(--accent-blue-on-dark); border-color: var(--accent-blue-on-dark); }
.btn-on-navy:hover { background: rgba(188, 188, 205, .14); color: var(--text-on-dark); border-color: var(--text-on-dark); }

.plan-terms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; }
.plan-terms li { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--text-muted); }
.plan-terms .icon { color: var(--accent-blue); }

@media (max-width: 1120px) { .plans { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .plan-units { min-height: 0; } }
@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; }
  .included { padding: 16px; }
  .plan-terms { justify-content: flex-start; flex-direction: column; }
}

/* ---------- 7. CTA intermedio ---------- */
.cta-band {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 8vw, 88px);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: var(--text-on-dark);
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(188, 188, 205, .18);
}
.cta-band::before { width: 520px; height: 520px; right: -140px; top: -260px; }
.cta-band::after { width: 300px; height: 300px; right: 120px; bottom: -220px; border-color: rgba(148, 209, 58, .25); }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { color: var(--text-on-dark); font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); max-width: 34rem; letter-spacing: -0.02em; }
.cta-band p { margin-top: 12px; color: var(--text-on-dark-muted); font-size: 1.0625rem; max-width: 36rem; }
@media (max-width: 800px) {
  .cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .cta-inner .btn { width: 100%; } }

/* ---------- 8. Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-copy h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); letter-spacing: -0.02em; }

/* 2026-09-19: el paso entre filas era de 64 px (46 de alto + 18 de separacion) y los 4 datos
   se leían como 4 bloques sueltos en vez de un bloque de contacto. Con 10 px el paso baja a
   56 px y siguen holgados: cada fila mide 46 px de alto, por encima de los 44 px de area
   tactil minima, y el enlace conserva su propio alto. */
.contact-list { margin-top: 28px; display: grid; gap: 10px; }
.contact-list li { display: flex; align-items: center; gap: 14px; }
.contact-icon {
  display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent-blue); flex: none;
}
.contact-list small { display: block; font-size: .75rem; color: var(--text-muted); line-height: 1.3; }
.contact-list a { font-weight: 500; word-break: break-word; }

.contact-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow);
  display: grid; gap: 18px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .875rem; font-weight: 500; color: var(--input-label); }
.optional { font-weight: 400; color: var(--text-muted); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--input-border); border-radius: 10px; background: var(--surface);
  font-size: 1rem; /* 16px evita el zoom automático en iOS */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(46, 45, 98, .15);
}
.field [aria-invalid="true"] { border-color: var(--error-text); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(201, 46, 59, .15); }
.field-error { font-size: .8125rem; color: var(--error-text); font-weight: 500; }
.field-hint { margin-top: -8px; font-size: .8125rem; color: var(--text-muted); }

.field-check { grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.field-check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--accent-blue); cursor: pointer; }
.field-check label { font-weight: 400; font-size: .875rem; line-height: 1.55; color: var(--text-muted); cursor: pointer; }
.field-check .field-error { grid-column: 2; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.contact-form button[type="submit"][disabled] { opacity: .75; cursor: progress; transform: none; }

.form-status { padding: 12px 16px; border-radius: 10px; font-size: .9375rem; font-weight: 500; }
.form-status.is-success { background: var(--success-bg); color: var(--success-text); }
.form-status.is-error { background: var(--error-bg); color: var(--error-strong); }
.form-status.is-info { background: var(--warning-bg); color: var(--warning-text); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Barra de acción fija (celular y tablet) ---------- */
.action-bar { display: none; }
@media (max-width: 1180px) {
  .js .action-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -12px rgba(17, 16, 77, .25);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .js .action-bar.is-visible { transform: none; }
  .action-bar .btn { flex: 1; }
  .action-bar .btn-outline { flex: 0 0 auto; }
  /* Que la barra nunca tape el final del footer. */
  .js .site-footer { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) { .js .action-bar { transition: none; } }

/* ---------- 9. Footer ---------- */
/* Compacto y sin menú (la navegación vive en el header): una fila con marca · contacto · redes,
   y la barra legal. La marca toma el espacio sobrante, así contacto y redes quedan juntos a la derecha. */
.site-footer { background: var(--primary-deep); color: var(--text-on-dark-muted); padding-top: clamp(28px, 4vw, 40px); }
.footer-main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 16px clamp(24px, 4vw, 48px); padding-bottom: clamp(20px, 3vw, 28px);
}
.footer-brand p { margin-top: 8px; max-width: 22rem; font-size: .875rem; line-height: 1.5; }
/* La línea legal es secundaria respecto a la descripción: más chica y en el gris de sobre navy (7.06:1). */
.footer-legal { font-size: .8125rem; color: var(--text-on-dark-muted); }
.footer-brand .brand img { width: 32px; height: 32px; }
/* ⚠️ 20 px es el MINIMO del wordmark, no una preferencia: con el superindice
   en .56em, por debajo de 20 px el "360" cae bajo el piso de 11 px de la escala
   tipografica. El pie estaba en 1.125rem (18 px -> 10,1 px) y sube a 1.25rem.
   La UNICA excepcion documentada es la pagina legal por debajo de 320 px, donde
   la marca y el boton "Volver al sitio" no caben de otra forma. */
.footer-brand .brand-name { font-size: 1.25rem; }
.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; font-size: .9375rem; }
.site-footer a:hover { color: var(--text-on-dark); text-decoration: underline; }
.site-footer .brand-name { color: var(--text-on-dark); }
.site-footer .brand-name sup { color: var(--accent-lime); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; overflow-wrap: anywhere; }
.footer-contact .icon { flex: none; width: 18px; height: 18px; color: var(--accent-blue-on-dark); }

.social { display: flex; gap: 8px; }
.social a {
  display: inline-flex; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18); color: var(--accent-blue-on-dark);
  transition: background-color .2s ease, border-color .2s ease;
}
.social a:hover { background: rgba(188, 188, 205, .14); border-color: var(--accent-blue-on-dark); color: var(--text-on-dark); text-decoration: none; }
.social .icon { width: 20px; height: 20px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
  position: relative; padding-block: 14px 16px; font-size: .8125rem;
}
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-bottom a { font-size: .8125rem; }

@media (max-width: 960px) {
  /* Tablet: marca y redes arriba, contacto en su propia fila a lo ancho. */
  .footer-main { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-contact { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .footer-main { grid-template-columns: 1fr; gap: 14px; }
  .footer-contact { grid-row: auto; flex-direction: column; gap: 0; }
}


/* ---------- Animaciones con más presencia (todas se apagan con prefers-reduced-motion) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-line { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-line:nth-child(2) { animation-delay: .12s; }
  .hero-line:nth-child(3) { animation-delay: .24s; }
  .hero-in { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .welcome.hero-in { animation-delay: .46s; }

  .mk-phone { animation: float 7s ease-in-out infinite; }
  .mk-phone-back { animation-delay: -3.5s; }
  .float-badge { animation: float 7s ease-in-out -2s infinite; }
  .mk-offline .icon { animation: blink 1.4s ease-in-out infinite; }

  /* Entradas al hacer scroll: deslizamiento + fundido, en cascada dentro de cada grilla. */
  .js .reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* Micro-interacciones: movimiento, no solo color. Solo con puntero real. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover, .reason:hover, .plan:hover { transform: translateY(-4px); }
  .card-icon { transition: background-color .25s ease, color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1.4); }
  .card:hover .card-icon { transform: rotate(-8deg) scale(1.1); }
  .plan-featured:hover, .plan-custom:hover { box-shadow: var(--shadow-lg); }
  .aud-option-icon { transition: transform .3s cubic-bezier(.2, .8, .2, 1.4); }
  .aud-option:hover .aud-option-icon { transform: scale(1.1) rotate(-6deg); }
  /* Brillo que cruza el CTA verde al pasar el cursor: refuerza la acción, no compite con ella. */
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-150%) skewX(-18deg); pointer-events: none;
  }
  .btn-primary:hover::after { transform: translateX(320%) skewX(-18deg); transition: transform .8s ease; }
}


/* ---------- Página: política de tratamiento de datos (borrador) ---------- */
.legal-page .site-header { position: sticky; top: 0; }
/* A 320 px la marca (logo de 36 px + «PROPIO360») y el botón «Volver al sitio» no cabían en una
   línea y la página se desplazaba 5 px en horizontal (solo pasaba en la política de datos: gracias y
   404 tienen el botón más corto). **No se resuelve con `flex-wrap`**: `.site-header` tiene altura fija
   (`--header-h`, 72 px) y de ella dependen `scroll-padding-top` y el `padding-top` del hero, así que una
   segunda línea se sale de la caja. Se recorta el aire: menos separación y menos relleno lateral del
   botón de texto, que a este ancho igual no se notan. */
@media (max-width: 400px) {
  .legal-page .header-inner { gap: 10px; }
  .legal-page .header-inner .btn-text { padding-inline: 8px; }
  .legal-page .header-inner .brand img { width: 30px; height: 30px; }
  .legal-page .header-inner .brand-name { font-size: 1.0625rem; }
}
.legal { max-width: 48rem; margin-inline: auto; padding-block: clamp(32px, 6vw, 64px) clamp(56px, 8vw, 96px); }
.legal h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.02em; margin-top: 8px; }
.legal h2 { font-size: 1.25rem; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--text); }
.legal p + p { margin-top: 10px; }
.legal ul, .legal ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal .updated { margin-top: 8px; font-size: .875rem; color: var(--text-muted); }
.draft-banner {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--warning-bg); color: var(--warning-text); border: 1px solid rgba(165, 62, 0, .25);
}
.draft-banner .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.draft-banner p { color: var(--warning-text); }
.placeholder { padding: 0 4px; border-radius: 4px; background: var(--warning-bg); color: var(--warning-text); font-weight: 600; }
.legal-page .site-footer { padding-top: 0; padding-bottom: 0; }
/* Pie mínimo de gracias, política y 404: sobre la barra legal va la fila de redes
   y nada más — el contacto (teléfono, correo, WhatsApp) es solo del pie de index.
   Los iconos reusan `.social`, así que el color, el tamaño, el área táctil de 40 px
   y el hover son los mismos; acá solo se les da el aire que `.legal-page` quita. */
.legal-page .footer-social { padding-top: clamp(20px, 3vw, 28px); }

/* ---------- Página: gracias (confirmación del formulario) ---------- */
.thanks { max-width: 40rem; margin-inline: auto; padding-block: clamp(56px, 10vw, 120px); text-align: center; }
.thanks-icon {
  display: inline-flex; width: 72px; height: 72px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--success-bg); color: var(--success-text); margin-bottom: 20px;
}
.thanks-icon .icon { width: 36px; height: 36px; stroke-width: 2.6; }
.thanks h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.02em; }
.thanks-lead { margin-top: 12px; font-size: 1.125rem; color: var(--text-muted); }
.thanks-note { margin-top: 10px; font-size: .875rem; color: var(--text-muted); }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
@media (prefers-reduced-motion: no-preference) {
  .thanks-icon { animation: bubbleIn .6s cubic-bezier(.2, .8, .2, 1.3) both; }
}
@media (max-width: 480px) { .thanks-actions .btn { width: 100%; } }

/* ---------- Próximamente (2026-09-16) ----------
   Lo decidido y sin construir se muestra aparte y marcado: nada se presenta como disponible si no lo está.
   Etiqueta: --primary sobre --primary-soft = 9.5:1 (WCAG AA texto). */
.soon-badge {
  display: inline-block; width: fit-content; margin-bottom: 8px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  padding: 2px 10px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
}
.section-lead .soon-badge { margin: 0 6px 0 0; vertical-align: middle; }
.card-soon { background: var(--background); border-style: dashed; box-shadow: none; }
.card-soon .card-icon { opacity: .7; }
.problem-solution-label.is-soon { background: var(--primary-soft); color: var(--primary); padding-left: 10px; }

/* ---------- Precios por rango (2026-09-16) ---------- */
.plans-tiers .plan { padding: 22px 20px; }
.plans-tiers .plan-units { min-height: 0; font-weight: 600; color: var(--text); }
.plans-tiers .plan-price { margin-top: 8px; }
.plans-tiers .plan-custom .plan-units { color: var(--text-on-dark); }
.plans-tiers .plan-custom .btn { margin-top: 14px; }
.plan-footnote { margin-top: 12px; text-align: center; font-size: .8125rem; color: var(--text-muted); }
.plans-cta { margin-top: 24px; text-align: center; }

/* ---------- Contacto: formulario desactivado (2026-09-16) ----------
   El formulario lleva `hidden` mientras la política de datos no tenga revisión legal. Quitar ese atributo
   es el ÚNICO cambio para activarlo: estas reglas muestran/ocultan lo demás. */
.contact-direct {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.contact-direct-title { font-size: 1.375rem; font-weight: 600; color: var(--primary); }
.contact-direct-text { color: var(--text-muted); margin-bottom: 8px; }
/* Los 3 botones heredaban `.btn-block { width: 100% }` y se estiraban a todo el ancho de la
   tarjeta: 780 px a 900 px de viewport, cuando el mas largo pide 370 px. El tope de 24 rem
   (384 px) cubre al mas largo y deja los 3 del mismo ancho, alineados con el texto de arriba.
   En celular la tarjeta ya es mas angosta que el tope, asi que siguen a todo lo ancho, que es
   lo que conviene para tocar con el pulgar. */
.contact-direct .btn { max-width: 24rem; }
.contact-form:not([hidden]) + .contact-direct { display: none; }
.lead-form { display: none; }
.contact-grid:has(.contact-form:not([hidden])) .lead-form { display: block; }
.contact-grid:has(.contact-form:not([hidden])) .lead-direct { display: none; }
.footer-policy { display: none; }
body:has(#demo-form:not([hidden])) .footer-policy { display: block; }
@media (max-width: 600px) {
  .plans.plans-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .plans-tiers .plan { padding: 16px 14px; }
  .plans-tiers .plan-amount { font-size: 1.5rem; }
  .plans-tiers .plan-units { font-size: .8125rem; }
  .plans-tiers .plan-custom .btn { font-size: .875rem; padding-inline: 8px; white-space: normal; }
}

/* =====================================================================
   RITMO VISUAL Y PRESENCIA DEL NAVY (2026-09-17)
   ---------------------------------------------------------------------
   El sitio estaba correcto de contenido pero era blanco de arriba a abajo:
   header blanco, hero blanco, secciones blancas o gris muy claro, y tarjetas
   blancas sobre blanco que apenas se distinguían del fondo. Este bloque
   agrega carácter SIN colores nuevos -- solo los de la paleta vigente
   (navy #11104D, su tono profundo #060534, verde de acción #487701, lima de
   acento y los neutros que ya existían).

   Qué hace:
     1. Header y hero en navy: el sitio abre con la marca, no con una hoja
        en blanco, y las tarjetas blancas del hero pasan a flotar sobre el
        navy en vez de perderse en él.
     2. `.section-dark`: una sección entera en navy en la mitad de la página
        (Sofía), para cortar la sucesión de blancos. Reutiliza el mismo
        vocabulario que ya tenían `.cta-band`, `.plan-custom` y el footer.
     3. Tarjetas con borde y sombra más presentes, y elevación al pasar el
        puntero.
     4. Jerarquía tipográfica más marcada: títulos de sección más grandes,
        entradillas más legibles y eyebrows con más carácter.
     5. Bloques de cifras (`.facts`) y tarjetas de precio con presencia de
        navy, que es donde más ayuda a guiar la lectura.

   Contraste (WCAG 2.x, medido con los mismos pares del encabezado):
     blanco / navy                  11.31  (títulos y texto sobre navy)
     --text-on-dark-muted / navy     7.06  (texto secundario sobre navy)
     --accent-lime / navy            5.88  (acentos y cifras sobre navy)
     --accent-blue-on-dark / navy    6.23  (enlaces sobre navy)
   El verde de acción NUNCA va como texto sobre navy (2.27): ahí va como
   botón lleno con borde lima, que es la regla que ya existía
   (`.btn-on-dark`).
   ===================================================================== */

/* ---------- 1. Header en navy ---------- */
.site-header {
  background: rgba(6, 5, 52, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
}
.site-header .brand-name { color: var(--text-on-dark); }
.site-header .brand-name sup { color: var(--accent-lime); }
.site-header .brand img { border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.main-nav ul a { color: var(--text-on-dark-muted); font-weight: 500; }
.main-nav ul a:hover { color: var(--text-on-dark); background: rgba(255, 255, 255, .10); }
.main-nav ul a.is-active {
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 -2px 0 var(--accent-lime);
}
.nav-call { color: var(--accent-blue-on-dark); }
.nav-call:hover { color: var(--text-on-dark); background: rgba(255, 255, 255, .10); }
.menu-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: var(--text-on-dark); }
.menu-toggle:hover { background: rgba(255, 255, 255, .16); }
.site-header :focus-visible { outline-color: var(--accent-blue-on-dark); }

@media (max-width: 1180px) {
  /* El panel desplegable hereda el navy del header, no un bloque blanco suelto. */
  .main-nav { background: var(--primary-deep); border-bottom-color: rgba(255, 255, 255, .14); }
  html:not(.js) .main-nav { background: transparent; }
}

/* ---------- 2. Hero multicolor sobre el ancla navy ---------- */
/* La base sigue siendo un degradado NAVY -> VIOLETA HONDO: los dos dan mas de 7:1 con texto
   blanco encima, asi que el titulo esta seguro en todo el recorrido. El cian y el magenta
   entran solo como halos radiales de baja opacidad -- NO como paradas de la base, porque el
   cian con blanco encima da 2.80 y hundiria el contraste del titulo. La verificacion no se
   hace de memoria: hay una prueba que MUESTREA EL PIXEL renderizado debajo de cada texto. */
.hero {
  background:
    radial-gradient(820px 480px at 88% 0%, rgba(148, 209, 58, .16) 0%, rgba(148, 209, 58, 0) 64%),
    radial-gradient(640px 430px at 2% 100%, rgba(148, 209, 58, .10) 0%, rgba(148, 209, 58, 0) 68%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: var(--text-on-dark);
}
.hero::before {
  /* la misma retícula de plano arquitectónico, ahora en claro sobre navy */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
}
.hero h1 { color: var(--text-on-dark); }
/* ACENTO 1 de 3: las 2 primeras palabras del titulo. Es lo primero que se ve en el sitio.
   ⚠️ Sin lavado de fondo: un acento translucido sobre navy enturbia el color (se probo con
   ambar y daba oliva). El fucsia solido como color de texto rinde 4.83:1 sobre el navy y se
   lee limpio. La barra queda como un filo fino y opaco debajo, que es lo que `sweep` recorre. */
.hero h1 .hl {
  color: var(--accent-lime);
  /* 2026-09-19: fuera el filo decorativo bajo las 2 primeras palabras. El acento se queda
     en el COLOR del texto (lima sobre navy, 9.49:1). La animacion `sweep` recorria ese
     fondo, asi que tambien se retira mas abajo. */
}
.hero .lead { color: var(--text-on-dark-muted); }
/* ACENTO 2 de 3: el badge del hero. El punto y la pildora "Ley 675" iban en blanco
   translucido sobre navy -- la credencial legal, que es el argumento mas fuerte de entrada,
   pasaba desapercibida. Van en fucsia: la pildora lleva ciruela #16240A encima (7.09:1). */
.hero :focus-visible { outline-color: var(--accent-blue-on-dark); }

/* ---------- 3. Sección oscura completa ---------- */
.section-dark {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: var(--text-on-dark);
}
/* ⚠️ El texto claro se aplica SOLO a la copia de la sección, nunca dentro de
   las ilustraciones (`.chat-mock`, `.mk-stage`): esas son maquetas con su
   propio fondo claro, y pintarles el texto de gris claro las deja ilegibles
   -- pasó en la primera versión de este bloque. */
.section-dark .section-head h2, .section-dark .section-head h3,
.section-dark .sofia-copy h2, .section-dark .sofia-copy h3,
.section-dark .showcase-copy h2, .section-dark .showcase-copy h3,
.section-dark .card h4, .section-dark .reason h3 { color: var(--text-on-dark); }
.section-dark .section-head .section-lead,
.section-dark .sofia-copy .section-lead,
.section-dark .showcase-copy .section-lead,
.section-dark .sofia-points li,
.section-dark .card p,
.section-dark .reason p,
.section-dark .ticks li { color: var(--text-on-dark-muted); }
.section-dark .sofia-points b,
.section-dark .ticks b { color: var(--text-on-dark); }
.section-dark .eyebrow { color: var(--text-on-dark); }
.section-dark .eyebrow::before { background: var(--accent-lime); }
.section-dark .aud-tag { color: var(--text-on-dark-muted); }
.section-dark .aud-tag b { color: var(--text-on-dark); }
.section-dark .aud-tag a { color: var(--accent-blue-on-dark); }
.section-dark a { color: var(--accent-blue-on-dark); }
.section-dark :focus-visible { outline-color: var(--accent-blue-on-dark); }
/* Las tarjetas de una sección oscura no se pintan de blanco: se levantan del
   fondo con una superficie translúcida y un borde claro. */
.section-dark .card,
.section-dark .sofia-point,
.section-dark .reason {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}
.section-dark .card:hover,
.section-dark .reason:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(148, 209, 58, .55);
  box-shadow: none;
}
/* ⚠️ Esta regla es ANTERIOR a la insignia unificada y devolvia el tratamiento viejo
   (circulo translucido + glifo lima) justo en las secciones oscuras, rompiendo el punto de
   que sea UNO solo en todo el sitio. Se queda solo para `.sofia-point-icon`, que no es una
   insignia de tarjeta. Las de tarjeta y razon usan el circulo lima tambien sobre navy:
   la lima rinde 5.88 contra el fondo y el glifo de tinta 8.98 contra la lima. */
.section-dark .sofia-point-icon {
  background: rgba(255, 255, 255, .12);
  color: var(--accent-lime);
}
.section-dark .card:hover .card-icon { background: var(--accent-lime); color: var(--accent-lime-ink); }
.section-dark .sofia-status { background: rgba(148, 209, 58, .18); color: var(--accent-lime); }
/* Las maquetas conservan su propio tema claro dentro de la sección oscura. */
.section-dark .chat-mock, .section-dark .mk-stage, .section-dark .shot { color: var(--text); }
.section-dark .chat-mock .bubble:not(.bubble-user),
.section-dark .chat-mock .bubble:not(.bubble-user) p,
.section-dark .chat-mock .bubble:not(.bubble-user) li,
.section-dark .chat-mock .chat-input { color: var(--text); }
/* La burbuja de la persona sí es navy con texto blanco: es su diseño. */
.section-dark .chat-mock .bubble-user { color: var(--text-on-dark); }

/* ---------- 3b. Secciones claras con más cuerpo ---------- */
/* El gris de `.section-alt` era casi blanco (#F6F6F8): las tarjetas blancas
   encima no se separaban del fondo. Pasa al gris azulado que ya existía en la
   paleta (--primary-soft, el mismo de los estados suaves del navy).
   Contraste medido: --text-muted sobre --primary-soft = 4.61 (≥ 4.5). */
.section-alt { background: var(--primary-soft); }

/* ---------- 4. Tarjetas con separación real del fondo ---------- */
.card, .reason {
  border-color: rgba(17, 16, 77, .14);
  box-shadow: 0 1px 2px rgba(17, 16, 77, .05), 0 8px 24px -18px rgba(17, 16, 77, .45);
}
.card:hover, .reason:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover, .reason:hover { transform: none; } }

/* ---------- 5. Jerarquía tipográfica ---------- */
.section-head { max-width: 48rem; }
.section-head h2, .sofia-copy h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.12; }
.section-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 44rem; }
.hero h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); }
.eyebrow { font-size: .8125rem; letter-spacing: .14em; }
.card h4 { font-size: 1.1875rem; font-weight: 700; }

/* ---------- 6. Bloques destacados: cifras y precios ---------- */
.facts {
  /* 2026-09-19: el degradado suma el violeta hondo. Los 3 puntos del recorrido dan mas
     de 7:1 con texto blanco; la prueba muestrea el pixel real bajo cada cifra. */
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  /* ACENTO 3 de 3: el filo de la banda de cifras. Ata el ambar del hero con el bloque de
     prueba, que es el otro punto donde se detiene la mirada. */
  border: 0; border-top: 3px solid var(--accent-lime);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.facts li + li { border-left-color: rgba(255, 255, 255, .16); }
.facts b { color: var(--text-on-dark); }
.facts span { color: var(--text-on-dark-muted); }
/* Las 4 cifras estaban TODAS en blanco: la barra se leia como un bloque, no como 4 datos.
   Una cifra en blanco y las otras 3 en acentos sobre-oscuro, con un filo de color por celda.
   ⚠️ Esta banda es un degradado NAVY: aca no entran --accent (verde) ni --accent-blue, que
   sobre navy dan 2.27 y 1.37. Van los tonos medidos para fondo oscuro:
   lima #94D13A = 5.88 | azul-claro #BCBCCD = 6.23 | blanco = 11.31. Las 3 pasan AA. */
.facts li { position: relative; }
.facts li::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: rgba(255, 255, 255, .28);
}
.facts li:nth-child(2) b { color: var(--accent-lime); }
.facts li:nth-child(3) b { color: var(--accent-blue-on-dark); }
.facts li:nth-child(2)::before { background: var(--accent-lime); }
.facts li:nth-child(3)::before { background: var(--accent-blue-on-dark); }
.facts li:nth-child(4)::before { background: var(--accent-lime); }
.section-dark .facts { background: rgba(255, 255, 255, .06); }

.plan { border-top: 3px solid var(--primary); }
.plan-amount { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem); }
.plan-custom { border-top-color: var(--accent-lime); }

@media (max-width: 600px) {
  /* En celular las cifras van en columna: el borde que las separa es horizontal. */
  .facts li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
}

/* =====================================================================
   CORTES DIAGONALES (2026-09-19) -- la firma visual de la referencia.
   ---------------------------------------------------------------------
   ⚠️ NO se usa `clip-path` sobre la seccion: recortaria su contenido, y a 320 px el
   angulo se come una linea de texto. Cada corte es un PSEUDOELEMENTO que se pinta
   ENCIMA del borde, del color de la seccion siguiente: la caja de la seccion sigue
   siendo un rectangulo y no se recorta nada. El alto va en `clamp()` con vw, asi que
   el angulo escala solo entre anchos en vez de romperse en cada breakpoint.
   Solo en 3 uniones, no en las 7: en todas dejaria de ser un acento.
   ===================================================================== */
.corte-diagonal { position: relative; }
.corte-diagonal::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: clamp(26px, 3.6vw, 62px); pointer-events: none;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
/* El hero (navy) contra El problema (blanco). */
.hero.corte-diagonal::after { background: var(--surface); }
/* Sofia (navy oscuro) contra Por que (azul palido). */
#sofia.corte-diagonal::after { background: var(--surface-blue); }
/* Por que (azul palido) contra Precios (navy). */
#por-que.corte-diagonal::after { background: var(--primary); }
/* Precios (navy) contra Contacto (blanco). */
#precios.corte-diagonal::after { background: var(--surface); clip-path: polygon(0 0, 100% 100%, 0 100%); }
/* Modulos (gris azulado) contra Asi se ve (blanco), en el sentido contrario para
   que los 3 cortes no queden paralelos y se lean como un patron mecanico. */
#modulos.corte-diagonal::after {
  background: var(--surface);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* El contenido se aparta del angulo: sin esto, la ultima linea queda debajo del corte. */
.corte-diagonal { padding-bottom: calc(var(--section-y) + clamp(26px, 3.6vw, 62px)); }
.hero.corte-diagonal { padding-bottom: calc(clamp(40px, 6vw, 72px) + clamp(26px, 3.6vw, 62px)); }

/* ---------------------------------------------------------------------
   El angulo del HEADER. La referencia lo tiene donde una zona blanca se encuentra
   con el menu de color; este header es una sola superficie navy sobre un hero navy,
   asi que no hay dos zonas que enfrentar. En vez de inventar una, el angulo se pone
   en su BORDE INFERIOR: una cuna lima que arranca fina a la izquierda y crece hacia
   la derecha. Es el mismo gesto (dos superficies que se encuentran en diagonal) sin
   partir el header en dos por decoracion.
   --------------------------------------------------------------------- */
.header-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--accent-lime);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  opacity: 0; transition: opacity .25s ease;
}
.site-header.is-scrolled .header-bar::after { opacity: 1; }

/* ---------------------------------------------------------------------
   PAR DE TARJETAS NAVY / VERDE (2026-09-19). Es el patron de la referencia, y aca
   encaja porque los dos caminos YA existen en el producto: la copropiedad compra,
   la empresa de vigilancia es canal y no paga. No se invento una audiencia.
   Contrastes: blanco sobre navy 11.31 | blanco sobre el verde de accion 4.98 |
   verde #487701 sobre blanco 4.98 (el boton claro de la tarjeta verde).
   --------------------------------------------------------------------- */
.cta-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.cta-carta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-card);
}
.cta-carta h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2; }
.cta-carta p { margin-bottom: 4px; }
.cta-carta .btn { margin-top: auto; }
.cta-carta-navy { background: linear-gradient(150deg, var(--primary) 0%, var(--primary-deep) 100%); color: var(--text-on-dark); }
.cta-carta-navy h2 { color: var(--text-on-dark); }
.cta-carta-navy p { color: var(--text-on-dark-muted); }
.cta-carta-verde { background: var(--accent); color: var(--accent-text); }
.cta-carta-verde h2, .cta-carta-verde p { color: var(--accent-text); }
/* Sobre verde, un boton verde no existiria: va blanco con el verde como tinta. */
.cta-btn-claro { background: var(--surface); color: var(--accent-ink); border: 1px solid var(--surface); font-weight: 600; }
.cta-btn-claro:hover { background: var(--primary-soft); color: var(--accent-ink); }
@media (max-width: 760px) { .cta-par { grid-template-columns: 1fr; } }

/* =====================================================================
   INSIGNIA DE ICONO UNIFICADA (2026-09-19) -- circulo lima + anillo navy.
   ---------------------------------------------------------------------
   Antes habia CINCO tratamientos distintos (tarjetas en azul palido, razones en lima,
   contacto en blanco con borde, quote en navy solido, opciones de audiencia en azul).
   Ahora es uno solo en todo el sitio.

   ⚠️ EL GLIFO NO VA BLANCO, aunque la referencia lo tenga asi: blanco sobre lima da
   1.92:1 y el minimo para un grafico es 3. Va la tinta `--accent-lime-ink`, que da 8.98.
   ⚠️ EL ANILLO NAVY NO ES ADORNO: la lima sobre blanco da 1.92, asi que en las secciones
   claras el circulo no tendria borde sin el. Sobre navy el anillo se funde, y ahi no hace
   falta porque la lima sola rinde 5.88 contra el fondo.
   ===================================================================== */
.card-icon, .reason-icon, .contact-icon, .quote-icon, .aud-option-icon {
  border-radius: 50%;
  background: var(--accent-lime);
  color: var(--accent-lime-ink);
  border: 2px solid var(--primary);
}
.aud-option-icon, .card-icon { width: 48px; height: 48px; }
.reason-icon { width: 52px; height: 52px; }
.contact-icon { width: 46px; height: 46px; }
.quote-icon  { width: 64px; height: 64px; }
/* El hover ya no puede ser "pasa a lima": ya es lima. Ahora aprieta el anillo. */
.card:hover .card-icon, .reason:hover .reason-icon {
  border-color: var(--accent-lime-ink); background: var(--accent-lime);
}
/* Sobre navy el anillo navy no se ve: se le da uno claro para que el circulo no flote. */
.section-dark .card-icon, .section-dark .reason-icon,
.section-dark .quote-icon, .section-dark .aud-option-icon {
  border-color: rgba(255, 255, 255, .34);
}
.section-dark .card:hover .card-icon { border-color: var(--text-on-dark); background: var(--accent-lime); }

/* =====================================================================
   RITMO CLARO / OSCURO (2026-09-19). Antes solo el hero y Sofia eran oscuros y el
   resto era blanco o gris: la pagina se leía plana de la mitad hacia abajo. Modulos
   y Precios pasan a navy, y el orden queda alternando de arriba a abajo:
     hero NAVY | problema blanco | modulos NAVY | asi-se-ve blanco |
     sofia NAVY | por-que azul palido | precios NAVY | contacto blanco
   Nunca dos oscuras seguidas. Los 5 cortes diagonales caen justo en los saltos.
   ===================================================================== */
/* Las tarjetas de precio sobre navy: el blanco de la tarjeta rinde 11.31 contra el fondo. */
.section-dark .plan { background: var(--surface); }
.section-dark .plan-units { color: var(--text); }
.section-dark .plan-amount { color: var(--primary); }
.section-dark .plan-per { color: var(--text-muted); }
/* La tarjeta de cotizacion ya era navy: sobre navy necesita su propio borde. */
.section-dark .plan-custom { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.section-dark .plan-custom .plan-units, .section-dark .plan-custom .plan-amount-text { color: var(--text-on-dark); }
/* Condiciones, "incluido en cualquier rango" y fichas, sobre oscuro. */
.section-dark .plan-terms li { color: var(--text-on-dark-muted); }
/* ⚠️ `.included-list li` NO es texto suelto: es una pildora con fondo blanco propio.
   Aclararle solo el color dejaba texto claro sobre pildora blanca (1.60:1). Se le cambia
   la pildora entera. Medido: blanco sobre navy + 14% de blanco = 8.60:1. */
.section-dark .included-list li {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28);
  color: var(--text-on-dark);
}
.section-dark .included-title { color: var(--text-on-dark); }
.section-dark .included { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
.section-dark .chips li { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); color: var(--text-on-dark); }
.section-dark .also-title { color: var(--text-on-dark); }
.section-dark .card-note { border-top-color: rgba(255, 255, 255, .18); color: var(--text-on-dark-muted); }
.section-dark .card-note strong { color: var(--text-on-dark); }
.section-dark .card-note .icon { color: var(--accent-lime); }
.section-dark .card-points li { color: var(--text-on-dark-muted); }
.section-dark .group-title { color: var(--text-on-dark); }
.section-dark .group-title small { color: var(--text-on-dark-muted); }

/* =====================================================================
   PIE (2026-09-19) -- puntos 5 y 6 de la auditoria.
   El fondo ya era navy (`--primary-deep`) y el texto blanco: eso no cambia.
   Lo que cambia es el acento: los iconos de contacto iban en AZUL sobre oscuro y
   ahora van en LIMA, para que el pie cierre con los dos colores del resto del sitio.
   Y las redes pasan de rectangulo con borde a CIRCULO BLANCO con el glifo navy,
   que es como los pone la referencia sobre su fondo de color.
   Medidas: lima sobre navy hondo 7.57 | circulo blanco sobre navy hondo 14.55 |
   glifo navy dentro del circulo 11.31.
   ===================================================================== */
.footer-contact .icon { color: var(--accent-lime); }
/* Las redes del pie vuelven a su tratamiento original (rectangulo redondeado con borde),
   anterior a las sesiones de rediseno. Se revierte SOLO esto del pie. */

/* ⚠️ REGRESION CAZADA AL PASAR Modulos y Precios a navy (2026-09-19).
   `.aud-tag` se volvio una FICHA con fondo propio (claro, y distinto por audiencia) en una
   sesion anterior, cuando ninguna de esas 2 secciones era oscura. Las reglas de
   `.section-dark .aud-tag b` aclaran el texto a blanco... sobre ese fondo claro: blanco
   sobre blanco, 1:1. En seccion oscura la ficha lleva su propio fondo translucido y el
   tinte por audiencia se pierde a proposito (ahi el contraste manda sobre la categoria).
   Medido: blanco sobre navy + 14% de blanco = 8.60:1. */
.section-dark .aud-tag,
body:has(#aud-residente:checked) .section-dark .aud-tag,
body:has(#aud-vigilancia:checked) .section-dark .aud-tag,
body:has(#aud-empresa:checked) .section-dark .aud-tag {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .30);
  color: var(--text-on-dark-muted);
}
.section-dark .aud-tag b { color: var(--text-on-dark); }
.section-dark .aud-tag a { color: var(--accent-lime); }

/* ⚠️ REGRESION CAZADA AL PASAR Precios a navy (2026-09-19). La seccion oscura tine los
   ENLACES de azul-sobre-oscuro, y el CTA principal es un `<a>`: quedaba texto #BCBCCD sobre
   el verde #487701, 2.74:1. El verde de accion SIEMPRE lleva blanco encima (4.98:1), este
   dentro de una seccion clara u oscura. */
.section-dark .btn-primary { color: var(--accent-btn-text); }
.section-dark .btn-primary .icon { color: currentColor; }

/* ⚠️ Los botones de CONTORNO dentro de una seccion oscura. `.section-dark a` los tine de
   azul-sobre-oscuro, pero el borde seguia en el azul claro y el conjunto se perdia; y en la
   caja `.quote-box`, que tiene su propio fondo claro, quedaba texto claro sobre claro
   (1.82:1). Se les da el tratamiento de "sobre navy" que ya existia para el plan de
   cotizacion, y la caja clara conserva sus colores oscuros. */
.section-dark .btn-outline {
  color: var(--accent-blue-on-dark); border-color: var(--accent-blue-on-dark); background: transparent;
}
.section-dark .btn-outline:hover { background: rgba(188, 188, 205, .14); color: var(--text-on-dark); }
/* La caja de cita mantiene su superficie clara: dentro de ella nada se aclara. */
.section-dark .quote-box { background: var(--surface); }
.section-dark .quote-box h3 { color: var(--primary); }
.section-dark .quote-box p { color: var(--text-muted); }
.section-dark .quote-box .btn-outline { color: var(--accent-blue); border-color: var(--accent-blue); }
.section-dark .quote-box .btn-outline:hover { background: var(--accent-blue-soft); color: var(--accent-blue-hover); }
.section-dark .quote-box a:not(.btn) { color: var(--accent-blue); }

/* =====================================================================
   RANURAS DE FOTOGRAFIA (2026-09-19)
   ---------------------------------------------------------------------
   Las 3 ranuras estan listas y HOY NO PIDEN NINGUN ARCHIVO: usan
   `var(--foto-*, none)`, que sin definir resuelve a `none` -- ni una peticion, ni un
   404, y se ve exactamente el diseno actual. Para encenderlas basta definir la
   variable en `:root` (ver `web-portal/README.md` §Fotografia).

   ⚠️ EL VELO NO ES ESTETICO, ES LO QUE GARANTIZA EL CONTRASTE. Una foto puede ser
   de cualquier color, asi que el peor caso es una foto BLANCA debajo. Con el velo:
     navy .92  -> peor compuesto #2A2963 : blanco 9.01 | atenuado 5.63 | lima 4.69
     verde .95 -> peor compuesto #0D882A : blanco 4.58
   Bajar esos alfas hunde el texto encima. Si se cambian, hay que rehacer la cuenta.
   ===================================================================== */
.hero {
  background-image:
    radial-gradient(820px 480px at 88% 0%, rgba(148, 209, 58, .16) 0%, rgba(148, 209, 58, 0) 64%),
    radial-gradient(640px 430px at 2% 100%, rgba(148, 209, 58, .10) 0%, rgba(148, 209, 58, 0) 68%),
    linear-gradient(160deg, rgba(17, 16, 77, .92) 0%, rgba(6, 5, 52, .95) 100%),
    var(--foto-hero, none),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%);
  background-size: auto, auto, auto, cover, auto;
  background-position: center, center, center, center 28%, center;
  background-repeat: no-repeat;
}
/* La banda de "Asi se ve": la foto entra como textura detras de las maquetas. */
#asi-se-ve {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .93)), var(--foto-showcase, none);
  background-size: auto, cover;
  background-position: center, center;
}
/* Las 2 tarjetas de audiencia. El velo va por encima de la foto y debajo del texto. */
.cta-carta { position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; }
.cta-carta > * { position: relative; z-index: 1; }
.cta-carta-navy {
  background-image: linear-gradient(150deg, rgba(17, 16, 77, .92) 0%, rgba(6, 5, 52, .94) 100%), var(--foto-cta-navy, none);
}
.cta-carta-verde {
  background-image: linear-gradient(150deg, rgba(112, 186, 2, .95) 0%, rgba(112, 186, 2, .95) 100%), var(--foto-cta-verde, none);
}

/* La nota de "COP al mes, mas IVA" estaba repetida en las 8 tarjetas de cada rejilla
   (40 palabras de pura repeticion por audiencia). Ahora va una sola vez encima. */
.plans-nota { margin: 0 0 14px; font-size: .9375rem; color: var(--text-muted); }
.section-dark .plans-nota { color: var(--text-on-dark-muted); }
/* ⚠️ Defecto anterior, encontrado al barrer el contraste por pixel (2026-09-19): la nota al pie
   de la tabla de precios se quedo con `--text-muted` (#6F6F6F) sobre el navy de la seccion --
   3.80:1, por debajo de 4.5. Sus vecinas (`.plan-terms li`, `.plans-nota`) si se habian
   corregido. Con el gris de fondo oscuro da 7.06:1. */
.section-dark .plan-footnote { color: var(--text-on-dark-muted); }

/* =====================================================================
   HUECO EN LAS TARJETAS SIN PARRAFO (2026-09-19)
   ---------------------------------------------------------------------
   El recorte de texto dejo tarjetas de `#por-que` con solo titulo + fichas. Como las
   fichas iban ancladas abajo (`margin-top: auto`, puesto cuando TODAS tenian parrafo)
   y la rejilla estiraba todas a la altura de la fila, quedaban huecos de hasta 165 px
   entre el titulo y las fichas.

   Dos correcciones, no una:
     1. Sin parrafo, las fichas NO se anclan al fondo: van pegadas al titulo.
     2. La rejilla deja de forzar altura igual. Con contenidos estructuralmente distintos
        (unas con parrafo + vinetas, otras solo con fichas) igualar el alto solo mueve el
        hueco de sitio; que cada tarjeta mida lo suyo lo elimina. Se leen como objetos
        separados igual, porque cada una tiene su borde y su sombra.
   ===================================================================== */
.reasons { align-items: start; }
.reason:not(:has(> p)) > .reason-chips:last-child { align-self: start; margin-top: 4px; }
.reason:not(:has(> p)) { padding-bottom: clamp(20px, 2.4vw, 26px); }
/* Mismo criterio para las tarjetas de modulo que quedaron sin parrafo: la salvedad solo
   se ancla abajo si hay algo de que separarla. */
/* ⚠️ La rejilla de MODULOS vuelve a igualar alturas. Se le habia puesto `start` cuando
   habia tarjetas sin descripcion; ahora todas la tienen, y con alturas iguales la nota
   (anclada con `margin-top: auto`) cae a la misma altura en toda la fila -- que es lo que
   hacia que la linea divisoria se viera descuadrada de una tarjeta a otra.
   `.reasons` SI conserva `start`: ahi los contenidos si son estructuralmente distintos. */
.cards { align-items: stretch; }
.card:not(:has(> p:not(.card-note))) .card-note { margin-top: 10px; }

/* =====================================================================
   HEADER DE DOS COLUMNAS CON CORTE DIAGONAL (2026-09-19)
   ---------------------------------------------------------------------
   Replica la tecnica exacta del tema (`style.css` .navbar-area .menu-right.menu-left:before):
   una fila con fondo de color, y DENTRO un pseudoelemento ancho, claro, recortado con
   `clip-path` cuyo borde derecho se inclina. El tema usa
   `polygon(0 0, 100% 0, 95% 100%, 0 100%)` sobre un elemento de 200 % de ancho.

   ⚠️ CORRIGE UNA DECISION ANTERIOR. Se descarto partir el header con el argumento de que
   `.site-header` es `position: fixed` y una zona clara desapareceria sobre las secciones
   blancas. **Era falso**: el header tiene fondo propio `rgba(6, 5, 52, .94)`, es decir una
   superficie opaca. La zona clara se ve siempre, pase por encima de lo que pase.

   Aca la columna angosta lleva la MARCA (el equivalente de sus iconos sociales) y la ancha
   el menu. El ancho va en `clamp()` para que la cuna no se coma el menu en pantallas chicas.
   Contrastes sobre la cuna clara: marca #11104D sobre blanco 17.43:1.
   ===================================================================== */
.header-bar::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; z-index: 0;
  width: calc((100vw - min(100vw, var(--container))) / 2 + clamp(150px, 20vw, 268px));
  background: var(--surface);
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
  pointer-events: none;
}
.header-inner { position: relative; z-index: 1; }
/* Lo que vive sobre la cuna clara invierte sus colores respecto al resto de la barra. */
.site-header .brand-name { color: var(--primary); }
/* ⚠️ REGRESION PROPIA, vista al mirar el giro del "360" de cerca: el numeral heredaba
   `--accent-blue-on-dark` (#BCBCCD) de cuando TODO el header era navy. Sobre la cuna blanca
   eso da 1.87:1 -- casi invisible. Sobre superficie clara va el azul oscuro: 12.59:1.
   ⚠️ El barrido de contraste por pixel NO lo habria atrapado: descarta los elementos de
   menos de 14 px y este numeral mide 11. Se vio a ojo, en una captura ampliada. */
.site-header .brand-name sup { color: var(--accent-btn); }
.site-header .brand img { border-radius: 9px; box-shadow: 0 0 0 1px rgba(17, 16, 77, .18); }
/* El filo lima del borde inferior arranca despues de la cuna, para no cruzarla. */
.header-bar::after { left: clamp(150px, 20vw, 268px); }

/* Redes en la cuna. Es el contenido que la referencia le da a su av-column-4.
   Reusan `.social` tal cual -- azulejo con el color oficial de cada red y glifo blanco -- para
   no inventar un segundo tratamiento de redes. Lo unico propio es el tamano y el borde: en el
   pie el azulejo se recorta contra navy y ahi el borde va claro; aca va sobre BLANCO, y contra
   blanco cada azulejo ya se delimita solo (Facebook 4.23, LinkedIn 5.69, el degradado de
   Instagram 4.48 y 6.90 -- el minimo para un grafico es 3), asi que el borde sobra. */
.header-social { gap: 6px; align-items: center; }
.header-social a { width: 32px; height: 32px; border-radius: 8px; }
.header-social .icon { width: 17px; height: 17px; }
/* ⚠️ El anillo de foco del header nacio para superficie navy (`--accent-blue-on-dark`, #BCBCCD).
   Sobre las zonas CLARAS del header -- la franja de contacto y la cuna -- ese gris no se ve:
   ahi va el azul oscuro, que da 12.59:1 contra blanco. */
.header-top :focus-visible,
.header-social a:focus-visible,
.site-header .brand:focus-visible { outline-color: var(--accent-blue); }

/* ⚠️ HALLAZGO AL VERIFICAR (2026-09-19, defecto anterior a esta sesion): el "Solicitar demo"
   del MENU vive sobre navy, y en contorno usaba `--accent-blue` (#2E2D62): **1.37:1 contra el
   navy, invisible**. La regla equivalente ya existia para las secciones oscuras
   (`.section-dark .btn-outline`) pero el header no es una `.section-dark`, asi que se quedo
   fuera. Se veia asi siempre que hubiera otro CTA verde en pantalla, y SIEMPRE sin JavaScript.
   Sobre navy va el azul de fondo oscuro: 9.30:1. */
.main-nav .nav-cta.btn-outline {
  color: var(--accent-blue-on-dark); border-color: var(--accent-blue-on-dark); background: transparent;
}
.main-nav .nav-cta.btn-outline:hover {
  background: rgba(255, 255, 255, .10); color: var(--text-on-dark); border-color: var(--text-on-dark);
}

/* ---- Reparto entre las dos franjas ----
   >1180 px: la marca, el telefono y el CTA estan arriba; abajo quedan redes + menu.
   ≤1180 px: la franja de arriba desaparece (la referencia hace lo mismo con `d-none
   d-av-block`) y la barra recupera la marca, el telefono y el CTA dentro del menu. */
.brand-bar { display: none; }
@media (min-width: 1181px) {
  .site-header-full .main-nav .nav-call,
  .site-header-full .main-nav .nav-cta { display: none; }
}
@media (max-width: 1180px) {
  .header-top { display: none; }
  .header-social { display: none; }
  .site-header-full .brand-bar { display: inline-flex; }
  /* Con el menu colapsado la cuna se ajusta a la marca y nada mas.
     ⚠️ El minimo NO es estetico: la marca mide ~165 px y NO se encoge en celular. Con una
     cuna mas angosta, "PROPIO360" caia sobre el indigo con su color oscuro -> ilegible
     (medido por pixel a 320, 360 y 390). El corte se come 26 px mas en el borde inferior,
     asi que el minimo los incluye. Queda sitio de sobra para el boton de menu. */
  .header-bar::before { width: calc((100vw - min(100vw, var(--container))) / 2 + clamp(202px, 56vw, 222px)); }
  .header-bar::after { left: clamp(202px, 56vw, 222px); }
}

/* =====================================================================
   PUNTOS 3 Y 4 CON LAS FUENTES REALES (2026-09-19)
   ---------------------------------------------------------------------
   Lo que `flavita-exp/` SI trae y se aplica literal (assets/css/color/default.css):
     --sp-radius: 3px                         -> esquinas casi rectas, no pildoras
     --sp-gradient1: -137deg #94D13A -> #70BA02  -> las superficies verdes son DEGRADADO
     --sp-gradient2:  137deg #11104d -> #060534  -> las oscuras tambien
     --sp-shadow: 2px 5px 20px rgba(0,0,0,.2)
   ⚠️ Lo que NO trae: las plantillas de servicios ni de bandas de CTA. Solo vinieron
   el header, los estilos de bloques de WordPress y el responsive. Asi que el rediseno se
   apoya en su LENGUAJE (radio 3 px, degradado, sombra) y no en una regla suya copiada.

   4. EL "BORDE MORADO" DE LOS ICONOS. No era un resto de la paleta revertida: se barrio el
   CSS y no queda ni un hex violeta suelto. Era `--primary` #11104D -- el `--sp-secondary`
   del propio Flavita, que en HSL cae en 240 grados y se lee morado. Se cambia el anillo por
   verde oscuro, que quita el morado sin perder el borde que el circulo necesita sobre
   fondo claro (la lima sobre blanco da 1.84 y sin anillo no tendria contorno).
   ⚠️ El glifo NO va blanco: blanco sobre la lima da 1.92 y sobre el verde 2.41, los dos
   por debajo del minimo de 3 para un grafico. Va la tinta, que da 8.86.
   ===================================================================== */
.card-icon, .reason-icon, .contact-icon, .quote-icon, .aud-option-icon {
  background: linear-gradient(-137deg, var(--accent-lime) 0%, var(--accent) 100%);
  border-color: var(--accent-ink);
}
.card:hover .card-icon, .reason:hover .reason-icon { border-color: var(--accent-lime-ink); }
.section-dark .card-icon, .section-dark .reason-icon,
.section-dark .quote-icon, .section-dark .aud-option-icon { border-color: rgba(255, 255, 255, .34); }
.aud-radio:checked + .aud-option .aud-option-icon { border-color: rgba(255, 255, 255, .45); }

/* 3. LAS TARJETAS DE CTA. Antes eran dos bloques de color plano con esquinas de 18 px
   flotando sobre el navy. Ahora siguen el lenguaje del tema: degradado en vez de plano,
   radio de 3 px y su sombra. Y dejan de "flotar": la pareja se apoya en una banda que
   llega de borde a borde, que es como el tema resuelve sus llamados a la accion. */
.cta-band { padding-block: 0; }
.cta-par { gap: 0; border-radius: var(--sp-radius, 3px); overflow: hidden; box-shadow: 2px 5px 20px rgba(0, 0, 0, .2); }
.cta-carta { border-radius: 0; box-shadow: none; }
.cta-carta-navy { background-image: linear-gradient(137deg, var(--primary) 0%, var(--primary-deep) 100%); }
.cta-carta-verde { background-image: linear-gradient(-137deg, var(--accent-lime) 0%, var(--accent) 100%); }
.cta-carta-verde h2, .cta-carta-verde p { color: var(--accent-lime-ink); }
.cta-btn-claro { border-radius: var(--sp-radius, 3px); }
.cta-carta-navy .btn { border-radius: var(--sp-radius, 3px); }
@media (max-width: 760px) { .cta-par { gap: 0; } }

/* =====================================================================
   ANIMACIONES (2026-09-19) -- ampliacion de lo que ya habia.
   ---------------------------------------------------------------------
   Todo va dentro de `prefers-reduced-motion: no-preference` y usa SOLO `opacity` y
   `transform`, que no disparan maquetacion: por construccion no pueden causar
   desplazamiento de layout. Nada de rebotes.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 1. LA ENTRADA ESCALONADA YA EXISTIA: esta en `js/main.js` (~L136), que a cada hijo de
     `.cards`, `.reasons`, `.plans` y `.sofia-points` le pone `transitionDelay = i * 90 ms`
     con tope de 450. No se duplica aca. Y ojo: hacerlo desde CSS sobre el contenedor no
     funcionaria, porque el observador marca la clase de visible en CADA HIJO, no en la
     rejilla. Lo que sigue es lo que de verdad faltaba. */

  /* 2. LOS ICONOS RESPONDEN AL HOVER de su tarjeta: una escala corta, sin giro ni rebote. */
  .card-icon, .reason-icon, .contact-icon, .quote-icon, .aud-option-icon {
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), border-color .25s ease, background-color .25s ease;
  }
  .card:hover .card-icon, .reason:hover .reason-icon,
  .contact-list li:hover .contact-icon, .quote-box:hover .quote-icon { transform: scale(1.07); }
  .social a { transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
  .social a:hover { transform: translateY(-2px); }

  /* 3. Las fichas y los puntos del carrusel tambien acompanan. */
  .chips li { transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
  .chips li:hover { transform: translateY(-1px); }
  .problems-dot { transition: transform .2s ease, background-color .2s ease; }
  .problems-dot:hover { transform: scale(1.25); }
}

/* Los botones ya tenian transicion de fondo, color, borde, transform y sombra; se le suma
   el estado :active para que el clic se sienta. */
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* =====================================================================
   REDES DEL PIE CON SUS COLORES DE MARCA (2026-09-19)
   ---------------------------------------------------------------------
   Se conserva la FORMA que se revirtio en la sesion anterior (rectangulo de 10 px) y solo
   cambia el color: cada azulejo lleva el color oficial de su red y el glifo va en blanco.
   Medido -- glifo blanco encima / azulejo contra el navy del pie (#060534):
     Facebook  #1877F2                4.23 / 4.60
     LinkedIn  #0A66C2                5.69 / 3.42
     Instagram #DD2A7B -> #8134AF     4.48 y 6.90 / 4.35 y 2.82
   ⚠️ El violeta de Instagram queda en 2.82 contra el pie, por debajo de 3. Por eso los tres
   llevan un borde claro al 22 %: garantiza el limite del azulejo sin tocar el color de marca.
   Y la parada amarilla/naranja del degradado oficial se omite a proposito: con ella el glifo
   blanco caia a 2.54. */
.social a[href*="facebook"]  { background: #1877F2; border-color: rgba(255, 255, 255, .22); color: #FFFFFF; }
.social a[href*="linkedin"]  { background: #0A66C2; border-color: rgba(255, 255, 255, .22); color: #FFFFFF; }
.social a[href*="instagram"] {
  background: linear-gradient(45deg, #DD2A7B 0%, #8134AF 100%);
  border-color: rgba(255, 255, 255, .22); color: #FFFFFF;
}
.social a[href*="facebook"]:hover  { background: #3B8EF5; color: #FFFFFF; }
.social a[href*="linkedin"]:hover  { background: #1E7BD6; color: #FFFFFF; }
.social a[href*="instagram"]:hover { background: linear-gradient(45deg, #E8458D 0%, #9448C2 100%); color: #FFFFFF; }

/* =====================================================================
   FILA DE PRECIOS PAREJA (2026-09-19)
   ---------------------------------------------------------------------
   Medido: dentro de cada fila las tarjetas YA median lo mismo (la rejilla es `stretch`).
   Lo que se veia desproporcionado era que la FILA de "Cotizacion" median 176 px y las
   otras 120: esa tarjeta lleva un boton que las demas no tienen, y estiraba su fila entera.
   `grid-auto-rows: 1fr` iguala todas las filas a la mas alta, asi que la rejilla queda
   uniforme de arriba abajo. Y el boton se compacta un poco para que ese alto comun no
   sea mayor de lo necesario.
   ===================================================================== */
.plans-tiers { grid-auto-rows: 1fr; }
.plans-tiers .plan-custom .btn {
  min-height: 40px; padding-block: 8px; margin-top: 10px; font-size: .875rem;
}