/* =========================================================================
   Divigram · landings de servicio

   Hoja aparte, y no dentro de styles.css, por dos razones. La primera es la de
   siempre en este tema: son ~600 líneas que solo usan seis páginas, y meterlas
   en la hoja general las cobraría también en la portada. La segunda es de
   convivencia: styles.css es el archivo que más se toca entre los dos, y este
   trabajo entero cabe en un archivo nuevo que no choca con nadie.

   Ni un color a mano: todo sale de los tokens de styles.css, que es lo que hace
   que estas páginas funcionen en claro y en oscuro sin escribir dos paletas.
   ========================================================================= */

/* ---------- Rejilla: índice fijo + contenido ---------------------------- */
/* Más ancha que el .wrap de 1140: el índice se come 250 px y sin compensar, el
   contenido quedaba más estrecho que en el resto del sitio. */
.sv {
  /* El mismo ancho y el mismo reparto que las cuatro de Fernando: lateral de
     232 dentro del contenedor del sitio. Así las seis landings de servicio
     miden lo mismo entre sí y lo mismo que la portada y el blog. */
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding-block: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

/* La cabecera es pegajosa y tapa el destino de cada ancla: sin este margen, al
   pulsar el índice el título de la sección quedaba debajo del menú. */
.sv [id] { scroll-margin-top: 5.5rem; }

@media (max-width: 1080px) {
  .sv { grid-template-columns: 1fr; gap: 0; }
  /* El índice desaparece en pantallas estrechas: pegado arriba se come media
     pantalla, y el contenido ya viene en el mismo orden que él enumera. */
  .sv__idx { display: none; }
}

/* ---------- Índice ------------------------------------------------------ */
.idx {
  position: sticky;
  top: 5.2rem;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.idx__t {
  margin: 0 0 var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-hi);
}
/* list-style a mano: el reinicio general del tema quita la viñeta de <ul> pero
   no la numeración de <ol>, y salían dos números por línea —el del navegador y
   el del contador. El contador se queda porque es el que se puede maquetar. */
.idx__lista { counter-reset: idx; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.idx__lista li { counter-increment: idx; }
.idx__lista a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: .3rem;
  padding: .5rem .6rem;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.35;
  text-decoration: none;
}
.idx__lista a::before {
  content: counter(idx) ".";
  font-family: var(--f-mono);
  color: var(--ink-3);
}
.idx__lista a:hover { background: var(--bg-2); color: var(--ink); }
/* La sección que se está leyendo. La marca el guion, y como es información de
   estado va en aria-current: quien navega con lector de pantalla también la
   oye, no solo quien la ve en rosa. */
.idx__lista a[aria-current="true"] {
  background: var(--brand-tint);
  color: var(--brand-hi);
  font-weight: 600;
}
.idx__lista a[aria-current="true"]::before { color: var(--brand-hi); }

.idx__cta {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: var(--r-md);
}
.idx__ico {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--brand-ink, #fff);
}
.idx__ico .ico { width: 19px; height: 19px; }
.idx__cta p {
  margin: 0 0 var(--sp-3);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.25;
  text-wrap: balance;
}

/* ---------- Hero -------------------------------------------------------- */
.sv__hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-4) var(--sp-6);
}
@media (max-width: 1100px) {
  .sv__hero { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.sv__hero h1 { margin: var(--sp-2) 0 0; font-size: var(--step-3); }
/* La segunda línea en carmesí, como en las maquetas de referencia: separa el
   qué del para qué sin necesidad de dos tamaños distintos. */
.sv__hero h1 em { display: block; font-style: normal; color: var(--brand); }
.sv__bajada { max-width: 46ch; margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--step-1); }

.sv__stack { display: flex; flex-wrap: wrap; gap: .45rem; margin: var(--sp-4) 0 0; padding: 0; }
.sv__stack li {
  padding: .35rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.3;
}
.sv__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------- Franja de datos --------------------------------------------- */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.dato { display: flex; align-items: center; gap: var(--sp-3); }
.dato + .dato { border-left: 1px solid var(--line-soft); padding-left: var(--sp-4); }
@media (max-width: 700px) {
  .dato + .dato { border-left: 0; padding-left: 0; }
}
.dato__ico { flex: 0 0 auto; color: var(--brand); }
.dato__ico .ico { width: 26px; height: 26px; }
.dato__n {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.dato__l { margin: .15rem 0 0; color: var(--ink-3); font-size: var(--step--1); line-height: 1.35; }

/* ---------- Secciones --------------------------------------------------- */
.sv__sec { padding-block: var(--sp-6) 0; }
.sv__sec > h2 { font-size: var(--step-2); color: var(--brand); margin-bottom: var(--sp-4); }
.sv__sec > .lede { margin-top: calc(var(--sp-3) * -1); }

/* ---------- Qué incluye ------------------------------------------------- */
/* Seis elementos en tres columnas: 3+3. Con cuatro quedaba una fila coja de
   dos, que se lee como un error de maquetación. */
.incl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;                      /* el hueco ES la línea divisoria */
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 900px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; } }
.incl__item { background: var(--bg); padding: var(--sp-4); text-align: center; }
.incl__ico {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: var(--sp-3);
  border-radius: 12px; background: var(--brand-tint); color: var(--brand);
}
.incl__ico .ico { width: 22px; height: 22px; }
.incl__item h3 { margin: 0 0 .35rem; font-size: var(--step-0); line-height: 1.3; }
.incl__item p { margin: 0 auto; max-width: 34ch; color: var(--ink-3); font-size: var(--step--1); line-height: 1.5; }
@media (hover: hover) {
  .incl__item { transition: background .18s ease; }
  .incl__item:hover { background: var(--bg-2); }
}

/* ---------- Beneficios --------------------------------------------------- */
.bene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .bene { grid-template-columns: 1fr; } }
.bene__item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.bene__ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  background: var(--brand-tint);
  color: var(--brand);
}
.bene__ico .ico { width: 21px; height: 21px; }
.bene__item h3 { margin: 0 0 .3rem; font-size: var(--step-0); }
.bene__item p { margin: 0; color: var(--ink-3); font-size: var(--step--1); line-height: 1.5; }

/* ---------- Características + maqueta ------------------------------------ */
.carac {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--sp-5);
  align-items: center;
}
.carac--sola { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .carac { grid-template-columns: 1fr; } }
.carac__lista { display: grid; gap: .7rem; margin: 0; padding: 0; }
.carac__lista li {
  display: flex; align-items: flex-start; gap: .65rem;
  color: var(--ink-2); font-size: var(--step-0); line-height: 1.4;
}
.carac__tic { width: 19px; height: 19px; margin-top: .18rem; flex: 0 0 auto; color: var(--brand); }
/* La maqueta que se reutiliza de la portada está pensada para media columna de
   1140; aquí se le da ese mismo ancho para que no se estire ni se deforme. */
.carac__visual { max-width: 560px; width: 100%; justify-self: center; }

/* ---------- Integraciones ------------------------------------------------ */
.integra { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.integra li {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.integra li:hover { border-color: var(--brand); }
.integra__ico { width: 20px; height: 20px; color: var(--brand); }
/* Los logos llegan en el color de cada marca; aquí van a un solo tono para que
   la fila se lea como un conjunto y no como un muestrario, igual que en la
   cinta de tecnologías de la portada. */
/* El lienzo de cada logo es de 24x24, pero el TRAZO dentro ocupa proporciones
   muy distintas: el de WooCommerce es casi cinco veces más ancho que alto y a
   22 px se veía como una raya al lado del de WordPress. Los tamaños salen de la
   misma normalización por área óptica que ya está medida para la cinta del
   stack, más abajo en styles.css. */
.integra__logo { width: 22px; height: 22px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .78; }
.integra li[data-l="woocommerce"] .integra__logo { width: 46px; height: 46px; margin: -12px 0; }
.integra li[data-l="php"]         .integra__logo { width: 29px; height: 29px; margin: -4px 0; }
.integra li[data-l="mysql"]       .integra__logo { width: 26px; height: 26px; margin: -2px 0; }
.integra li[data-l="mercadopago"] .integra__logo { width: 25px; height: 25px; }
.integra li[data-l="stripe"]      .integra__logo { width: 25px; height: 25px; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .integra__logo { filter: brightness(0); opacity: .6; }
}
:root[data-theme="light"] .integra__logo { filter: brightness(0); opacity: .6; }

/* ---------- Ejemplos de uso ---------------------------------------------- */
.ejem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; }
@media (max-width: 900px) { .ejem { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ejem { grid-template-columns: 1fr; } }
.ejem li {
  display: flex; align-items: center; gap: .8rem;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--step-0);
}
.ejem__ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--brand); }

/* ---------- Testimonios en carrusel -------------------------------------- */
/* Se desliza con el dedo, con la rueda y con el teclado aunque el guion no
   llegue a cargar: el ajuste va en CSS y los puntos son un extra encima. */
.carr__via {
  display: flex;
  gap: var(--sp-3);
  margin: 0; padding: 0 0 .4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carr__via::-webkit-scrollbar { display: none; }
/* El ancho de cada ficha, explícito. Con grid-auto-columns en porcentaje las
   tres se repartían el hueco en vez de ocupar media anchura cada una, y el
   carrusel dejaba de tener nada que desplazar. */
.carr__via > li { flex: 0 0 calc(50% - var(--sp-3) / 2); scroll-snap-align: start; }
/* <figure> trae 40 px de margen lateral del navegador y el tema no los quita:
   la primera ficha empezaba desplazada respecto al título de la sección. */
.carr__via .quote { height: 100%; margin: 0; }
@media (max-width: 760px) { .carr__via > li { flex-basis: 100%; } }

.carr__puntos { display: flex; justify-content: center; gap: .5rem; margin-top: var(--sp-4); }
.carr__puntos[hidden] { display: none; }
.carr__puntos button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: var(--line);
  cursor: pointer;
}
.carr__puntos button[aria-current="true"] { background: var(--brand); width: 24px; }
.carr__puntos button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .carr__puntos button { transition: width .2s ease, background .2s ease; }
}

/* ---------- Cierre ------------------------------------------------------- */
.cierre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: var(--r-lg);
}
@media (max-width: 780px) { .cierre { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.cierre__ico {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
}
.cierre__ico .ico { width: 28px; height: 28px; }
.cierre h2 { margin: 0 0 .3rem; font-size: var(--step-2); }
.cierre p { margin: 0; color: var(--ink-2); }

.sv__otros { margin: var(--sp-4) 0 0; color: var(--ink-3); font-size: var(--step--1); }
.sv__otros a { color: var(--brand-hi); font-weight: 600; }

/* ---------- Arte del hero ------------------------------------------------ */
/* Las ilustraciones que entregó Fernando: portátil y móvil con el panel del
   servicio dentro. Llegaron en PNG de 1,6 MB y se sirven en WebP a la medida en
   que se ven; el sitio vende pesar cincuenta veces menos que la media del rubro
   y tres portadas de megabyte y medio se lo comerían entero. */
.sv__arte { margin: 0; }
.sv__arte img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  /* La ilustración ya viene sobre negro; el resplandor la ata al fondo de la
     página en lugar de dejarla flotando como un recorte pegado encima. */
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* ---------- Ejemplos de hallazgos ---------------------------------------- */
.halla { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .halla { grid-template-columns: 1fr; } }
.halla__item {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  /* La barra lateral repite el nivel en color, para que la gravedad se lea de
     un vistazo sin tener que ir etiqueta por etiqueta. */
  border-left: 3px solid var(--line);
}
.halla__item:has(.halla__nivel--critico) { border-left-color: var(--brand); }
.halla__item:has(.halla__nivel--alto)    { border-left-color: var(--brand-hi); }
.halla__item:has(.halla__nivel--medio)   { border-left-color: var(--ink-3); }
.halla__nivel {
  display: inline-block; margin-bottom: var(--sp-2);
  padding: .15rem .55rem; border-radius: var(--r-full);
  font-family: var(--f-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
/* Los cuatro niveles se distinguen por INTENSIDAD del mismo acento, no por el
   semáforo rojo-amarillo-verde: el rojo del sistema es el carmesí de la marca,
   y usarlo como alarma haría que la marca significara peligro. */
.halla__nivel--critico { background: var(--brand); color: #fff; }
.halla__nivel--alto    { background: var(--brand-tint); color: var(--brand); }
.halla__nivel--medio   { background: var(--surface-2); color: var(--ink-2); }
.halla__nivel--bajo    { background: var(--surface-2); color: var(--ink-3); }
.halla__item h3 { margin: 0 0 .35rem; font-size: var(--step-0); }
.halla__item p  { margin: 0; color: var(--ink-3); font-size: var(--step--1); line-height: 1.5; }

/* ---------- Casos con cifras --------------------------------------------- */
.resu { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .resu { grid-template-columns: 1fr; } }
.resu__item {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.resu__item h3 { margin: 0 0 .35rem; font-size: var(--step-0); }
.resu__item p  { margin: 0 0 var(--sp-3); color: var(--ink-3); font-size: var(--step--1); line-height: 1.5; }
.resu__item ul { display: grid; gap: .4rem; margin: 0; padding: 0; }
.resu__item li {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--step-0); color: var(--brand-hi);
  letter-spacing: -.01em;
}

/* Descripción corta dentro de una tarjeta de plan. La tarjeta de precios del
   sitio no tenía párrafo: sus planes se explican solos por el nombre, y estos
   tres no —«Básico» no dice para quién es. */
.price__texto { margin: var(--sp-2) 0 var(--sp-3); color: var(--ink-3);
  font-size: var(--step--1); line-height: 1.5; }

/* =========================================================================
   Maquetas grandes del hero

   Mismo criterio que las pequeñas de la portada: dibujadas con HTML y CSS, sin
   una sola petición de imagen, nítidas en cualquier pantalla y correctas en los
   dos temas porque solo usan tokens.

   REGLA HEREDADA: el estado en REPOSO ya tiene que estar bien. Con
   prefers-reduced-motion el sistema recorta las animaciones a .01ms, así que lo
   que se queda en pantalla es el estilo base y no el último fotograma.
   ========================================================================= */
.mg { position: relative; }
/* El verde del sistema solo se lee sobre fondo oscuro; en claro se usa esta
   variante, igual que en las maquetas pequeñas. Hay que declararla aquí porque
   .maq__ok la busca en su antepasado y estas maquetas no cuelgan de .maq. */
.mg { --ok-maq: var(--ok); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mg { --ok-maq: #0C7C46; }
}
:root[data-theme="light"] .mg { --ok-maq: #0C7C46; }

/* Fuera de pantalla no se anima: son bucles infinitos que gastan batería sin
   que nadie los mire. Lo apaga main.js con data-vivo. */
.mg[data-vivo="false"], .mg[data-vivo="false"] * { animation-play-state: paused; }

.mg__marco {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.mg__barra {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .8rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.mg__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.mg__barra b {
  margin-left: .6rem; font-family: var(--f-mono); font-weight: 400;
  font-size: .68rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg__lienzo {
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .7rem;
  background: var(--bg-2);
  overflow: hidden;
}

/* El móvil, superpuesto. Enseña OTRA pantalla del mismo producto, no la misma
   recortada: dos vistas distintas cuentan que el sistema es uno solo. */
.mg__movil {
  position: absolute; right: -34px; bottom: -46px;   /* asomado, como el de las landings de rubro */
  width: 158px; margin: 0; padding: 5px;
  background: #0d0b10;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.mgm__barra { display: grid; place-items: center; padding: .25rem 0 .3rem; }
.mgm__barra i { display: block; width: 34px; height: 3px; border-radius: 99px; background: #2b2731; }
.mgm__lienzo {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .5rem; min-height: 218px;
  background: var(--bg);
  border-radius: 17px;
}
@media (max-width: 1100px) {
  /* En pantallas medianas el móvil se sale del contenedor y provoca scroll
     horizontal; ahí se coloca debajo, centrado. */
  .mg__movil { position: static; margin: var(--sp-4) auto 0; }
}
@media (max-width: 520px) { .mg__movil { display: none; } }

/* ---- Piezas compartidas por varias maquetas ---------------------------- */
.mgp__logo { width: 34px; height: 9px; border-radius: 3px; background: var(--brand); flex: none; }
.mgp__links { display: flex; gap: .4rem; }
.mgp__links i { width: 26px; height: 5px; border-radius: 99px; background: var(--line); }
.mgp__btn { width: 44px; height: 13px; border-radius: 99px; background: var(--brand); }
.mgp__linea { display: block; width: 100%; height: 5px; border-radius: 99px; background: var(--line); }
.mgp__linea--corta { width: 60%; }

.mgm__rotulo { font-size: .58rem; font-weight: 700; color: var(--ink); }
.mgm__rotulo b { font-weight: 700; color: var(--brand); }
.mgm__linea { display: block; height: 4px; border-radius: 99px; background: var(--line); }
.mgm__linea--corta { width: 55%; }
.mgm__cta {
  margin-top: auto; padding: .3rem 0; text-align: center;
  border-radius: 7px; background: var(--brand); color: #fff;
  font-size: .5rem; font-weight: 700;
}
.mgm__fila {
  display: flex; align-items: center; gap: .35rem;
  padding: .28rem; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--line-soft);
}
.mgm__fila i { width: 17px; height: 17px; border-radius: 4px; background: var(--surface-2); flex: none; }
.mgm__fila > span { flex: 1; display: grid; gap: .18rem; }
.mgm__fila b { font-size: .48rem; color: var(--ink-2); }
/* La fila que entra al final del ciclo: es la novedad, y por eso llega tarde */
.mgm__fila--nueva { border-color: var(--brand); animation: maqEntra 8s ease-in-out infinite; }

/* ---- Portada corporativa ------------------------------------------------ */
.mgp__nav { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft); }
.mgp__hero { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: .7rem; align-items: center; }
.mgp__hero > div { display: grid; gap: .4rem; align-content: center; }
.mgp__eyebrow { width: 52px; height: 5px; border-radius: 99px; background: var(--brand); }
.mgp__tit { margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: 1.15rem; line-height: 1.1; letter-spacing: -.02em; }
.mgp__cta { justify-self: start; margin-top: .2rem; padding: .3rem .7rem;
  border-radius: 99px; background: var(--brand); color: #fff;
  font-size: .52rem; font-weight: 700; }
.mgp__foto { height: 100%; min-height: 92px; border-radius: 10px;
  background: linear-gradient(150deg, var(--brand-tint), var(--surface-2)); }
.mgp__tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.mgp__tarjeta { height: 38px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line-soft); }
.mgm__tit { font-family: var(--f-display); font-weight: 700; font-size: .72rem; line-height: 1.1; }
.mgm__foto { height: 54px; border-radius: 7px;
  background: linear-gradient(150deg, var(--brand-tint), var(--surface-2)); }

/* ---- Escaparate de tienda ----------------------------------------------- */
.mge__nav { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .45rem; border-bottom: 1px solid var(--line-soft); }
.mge__carro { position: relative; color: var(--ink-2); }
.mge__ico { width: 15px; height: 15px; }
.mge__badge { position: absolute; top: -5px; right: -7px;
  min-width: 13px; height: 13px; padding: 0 3px;
  display: grid; place-items: center;
  border-radius: 99px; background: var(--brand); color: #fff;
  font-size: .45rem; font-weight: 700; }
.mge__banner { display: grid; align-items: center; padding: .7rem;
  border-radius: 10px; background: linear-gradient(120deg, var(--brand-tint), var(--surface-2)); }
.mge__banner > div { display: grid; gap: .35rem; max-width: 60%; }
.mge__titulo { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: .9rem; }
.mge__cta { justify-self: start; padding: .26rem .6rem; border-radius: 99px;
  background: var(--brand); color: #fff; font-size: .5rem; font-weight: 700; }
.mge__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.mge__prod { position: relative; display: grid; gap: .3rem; align-content: start;
  padding: .4rem; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-soft); }
.mge__foto { height: 52px; border-radius: 6px; background: var(--surface-2); }
.mge__prod b { font-size: .58rem; }
.mge__prod--activo { border-color: var(--brand); }
.mge__add { position: absolute; inset: auto .4rem .4rem; padding: .2rem 0;
  text-align: center; border-radius: 5px;
  background: var(--brand); color: #fff; font-size: .45rem; font-weight: 700;
  animation: maqEntra 8s ease-in-out infinite; }
.mgm__lienzo--carro .mgm__fila b { color: var(--ink); font-weight: 700; }
.mgm__total { display: flex; justify-content: space-between; align-items: baseline;
  padding-top: .3rem; border-top: 1px solid var(--line-soft);
  font-size: .5rem; color: var(--ink-3); }
.mgm__total b { font-size: .62rem; color: var(--ink); }

/* ---- Tablero de gestión -------------------------------------------------- */
.mg--tablero { flex-direction: row; gap: 0; padding: 0; }
.mgt__nav { display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .6rem .45rem; background: var(--surface); border-right: 1px solid var(--line-soft); }
.mgt__nav .mgp__logo { width: 20px; height: 20px; border-radius: 6px; margin-bottom: .2rem; }
.mgt__link { display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 7px; color: var(--ink-3); }
.mgt__link--on { background: var(--brand-tint); color: var(--brand); }
.mgt__ico { width: 14px; height: 14px; }
.mgt__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; padding: .7rem; }
.mgt__head { display: flex; align-items: center; justify-content: space-between; }
.mgt__tit { font-family: var(--f-display); font-weight: 700; font-size: .78rem; }
.mgt__filtro { padding: .18rem .5rem; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .48rem; color: var(--ink-3); }
.mgt__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.mgt__kpi { display: grid; gap: .1rem; padding: .45rem .55rem; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-soft); }
.mgt__kpi i { font-style: normal; font-size: .45rem; color: var(--ink-3); }
.mgt__kpi b { font-family: var(--f-display); font-size: .82rem; letter-spacing: -.02em; }
.mgt__grafico { flex: 1; min-height: 54px; display: grid; grid-auto-flow: column;
  grid-auto-columns: 1fr; align-items: end; gap: .3rem;
  padding: .5rem; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-soft); }
.mgt__grafico span { border-radius: 3px 3px 0 0; background: var(--brand-tint);
  border-top: 2px solid var(--brand); }
/* Alturas escalonadas: una serie plana no se lee como un gráfico */
.mgt__grafico span:nth-child(1) { height: 32%; }
.mgt__grafico span:nth-child(2) { height: 48%; }
.mgt__grafico span:nth-child(3) { height: 40%; }
.mgt__grafico span:nth-child(4) { height: 62%; }
.mgt__grafico span:nth-child(5) { height: 55%; }
.mgt__grafico span:nth-child(6) { height: 74%; }
.mgt__grafico span:nth-child(7) { height: 66%; }
.mgt__grafico span:nth-child(8) { height: 85%; }
.mgt__grafico span:nth-child(9) { height: 78%; }
.mgt__grafico span:nth-child(10) { height: 100%; }
.mgt__tabla { display: grid; gap: .3rem; }
.mgt__fila { display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: center; gap: .5rem;
  padding: .32rem .5rem; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--line-soft); }
.mgt__fila i { height: 5px; border-radius: 99px; background: var(--line); }
.mgt__estado { padding: .1rem .4rem; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: .45rem; font-weight: 700; }
.mgt__estado--ok { background: color-mix(in srgb, var(--ok-maq) 18%, transparent); color: var(--ok-maq); }
.mgt__estado--nuevo { background: var(--brand-tint); color: var(--brand); }
.mgt__fila--nueva { border-color: var(--brand); animation: maqEntra 8s ease-in-out infinite; }

/* ---- Informe de auditoría y parte de estado ------------------------------ */
.mga__head { display: flex; align-items: center; justify-content: space-between; }
.mga__tit { font-family: var(--f-display); font-weight: 700; font-size: .82rem; }
.mga__pendientes { font-size: .5rem; color: var(--ink-3); }
.mga__pendientes b { font-size: .62rem; color: var(--brand); font-weight: 700; }
.mga__lista { flex: 1; display: grid; gap: .35rem; align-content: start; }
.mga__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .55rem;
  padding: .4rem .55rem; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-soft); }
.mga__nivel { padding: .1rem .4rem; border-radius: 99px;
  font-size: .45rem; font-weight: 700; }
/* Los tres niveles se distinguen por INTENSIDAD del mismo acento, no por rojo,
   amarillo y verde: el rojo del sistema es el carmesí de la marca y usarlo como
   alarma haría que la marca significara peligro. */
.mga__nivel--alto  { background: var(--brand); color: #fff; }
.mga__nivel--medio { background: var(--brand-tint); color: var(--brand); }
.mga__nivel--bajo  { background: var(--surface-2); color: var(--ink-3); }
.mga__estado { font-size: .48rem; font-weight: 700; color: var(--ok-maq); white-space: nowrap; }
.mga__pie { display: flex; flex-wrap: wrap; gap: .3rem; }
.mga__chip { display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .45rem; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line-soft);
  font-size: .45rem; color: var(--ink-3); }
.mga__ico { width: 11px; height: 11px; color: var(--brand); }
.mgm__escudo { display: grid; place-items: center; height: 62px;
  border-radius: 8px; background: var(--brand-tint); color: var(--brand); }
.mgm__ico { width: 28px; height: 28px; }

.mgg__señal { display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .45rem; border-radius: 99px;
  background: color-mix(in srgb, var(--ok-maq) 16%, transparent);
  color: var(--ok-maq); font-size: .45rem; font-weight: 700; }
.mgg__dias { display: grid; grid-template-columns: repeat(10, 1fr); gap: .25rem; }
.mgg__dias i { height: 16px; border-radius: 3px;
  background: color-mix(in srgb, var(--ok-maq) 45%, transparent); }
.mgg__dias i.aviso { background: var(--brand-tint); border: 1px solid var(--brand); }
.mgg__dias i.hoy { background: var(--ok-maq); }
.mgg__fichas { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
.mgg__ficha { display: grid; gap: .15rem; align-content: center;
  padding: .55rem .6rem; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line-soft); }
.mgg__ico { width: 15px; height: 15px; color: var(--brand); }
.mgg__ficha i { font-style: normal; font-size: .45rem; color: var(--ink-3); }
.mgg__ficha b { font-size: .6rem; }

/* ---- Antes y después de la optimización ---------------------------------- */
.mgv__etiqueta { font-size: .48rem; font-weight: 700; color: var(--brand); }
.mgv__metricas { flex: 1; display: grid; gap: .55rem; align-content: center; }
.mgv__m { display: grid; gap: .25rem; }
.mgv__m i { font-style: normal; font-size: .5rem; color: var(--ink-3); }
.mgv__barra { display: block; height: 9px; border-radius: 99px;
  background: var(--surface-2); overflow: hidden; }
.mgv__relleno { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
/* El reposo es el DESPUÉS —barra llena— y la animación retrocede al principio
   del ciclo para enseñar de dónde se venía. */
@keyframes mgvCarga      { 0%,30% { width: 34%; } 40%,100% { width: 92%; } }
@keyframes mgvEstabilidad{ 0%,30% { width: 48%; } 40%,100% { width: 96%; } }
@keyframes mgvRespuesta  { 0%,30% { width: 26%; } 40%,100% { width: 88%; } }
.mgv__relleno--carga        { width: 92%; animation: mgvCarga 8s ease-in-out infinite; }
.mgv__relleno--estabilidad  { width: 96%; animation: mgvEstabilidad 8s ease-in-out infinite; }
.mgv__relleno--respuesta    { width: 88%; animation: mgvRespuesta 8s ease-in-out infinite; }
.mgv__aguja { display: grid; place-items: center; height: 58px; border-radius: 8px;
  background: var(--surface-2); }
.mgv__aguja b { display: block; width: 76%; height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--ok-maq)); }


/* El carrusel se mudó a styles.css: la portada también lo usa desde que la
   sección de precios muestra los seis planes. */