/* Inter, Inter Tight y Montserrat — SIL Open Font License 1.1. Servidas desde el sitio. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   RMP — landing. Estructura de la página.
   Las ilustraciones (mapa, celular, vistas de módulos) llevan su estilo en línea:
   son dibujos, no componentes que se reutilicen.
   ============================================ */
:root {
  --tinta: #0A1A14;
  --verde: #0A6B54;
  --verde-osc: #08503F;
  --verde-mancha: #0E8A6E;
  --lima: #2ECC8A;
  --azul: #2AAEDC;
  --menta: #E3F6EE;
  --texto2: #3B5048;
  --gris: #50645C;
  --borde: #E3ECE8;
  --borde2: #C9D9D2;
  --suave: #F4F8F6;
  --noche: #07110D;
  --max: 1320px; /* era 1160; el hero ya iba a 1320 y la rueda no entraba (28-oct) */
  --margen: clamp(16px, 4vw, 40px);
  --titulos: 'Inter Tight', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: var(--tinta); background: #FFFFFF; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--verde); }
a:hover { color: var(--verde-osc); }
button, input, select, textarea { font: inherit; }
.contenedor { max-width: var(--max); margin: 0 auto; padding: 0 var(--margen); }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: #FFFFFF; }
.saltar:focus { left: 12px; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; background: var(--verde); color: #FFFFFF; text-decoration: none; font-weight: 600; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.boton:hover { background: var(--verde-osc); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(10,107,84,.7); }
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.boton--claro { background: #FFFFFF; color: var(--tinta); border-color: var(--borde2); }
.boton--claro:hover { background: var(--suave); color: var(--tinta); border-color: var(--tinta); box-shadow: none; }
.boton--lima { background: var(--lima); color: #06140E; }
.boton--lima:hover { background: #5BE0A6; color: #06140E; }
.boton--chico { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* ---------- barra ---------- */
.barra-fija { position: sticky; top: 12px; z-index: 50; padding: 0 clamp(12px, 3vw, 32px); }
.barra { max-width: var(--max); margin: 12px auto 0; padding: 8px 8px 8px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--borde); border-radius: 999px; box-shadow: 0 8px 30px -18px rgba(10,26,20,.35); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.marca img { width: 30px; height: 30px; }
.marca span { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 21px; }
.barra nav { display: flex; gap: 2px; font-size: 15px; font-weight: 500; }
@media (max-width: 860px) { .barra nav { display: none; } }
.barra__acciones { display: flex; align-items: center; gap: 6px; }
.barra__acciones .boton { white-space: nowrap; }
/* En el celular no entran los dos: queda «Iniciar sesión» y la demo se pide con el botón grande del inicio. */
@media (max-width: 520px) { .barra__demo { display: none; } }

/* ---------- encabezado ---------- */
/* Sin capturas de la app (ver «Qué se muestra de la app» en landing/README.md). A la izquierda el
   titular; a la derecha, la pregunta que hoy se hace por WhatsApp y cómo la responde RMP. La palabra
   del titular y la tarjeta cambian juntas (main.js, «hero»). */
.hero { padding: clamp(28px, 4vw, 64px) 0 clamp(56px, 7vw, 96px); background: #FFFFFF; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(40px, 5vw, 72px); }
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero__pildora { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid #DCE7E2; border-radius: 999px; background: #FFFFFF; color: var(--tinta); text-decoration: none; font-size: 14px; font-weight: 500; }
.hero__pildora b { padding: 3px 10px; border-radius: 999px; background: var(--menta); color: var(--verde-osc); font-weight: 600; }
.hero__titulo { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: clamp(40px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -0.032em; }
/* «de» va pegado a la palabra que rota: nunca queda solo en una línea. La palabra ya reserva el
   ancho de la más larga («mantenimiento»), porque `.rot` mide lo que mide su columna de palabras. */
.hero__linea { white-space: nowrap; }
.hero__titulo .rot { color: #0A7A5F; }
.hero__bajada { margin: 0; max-width: 26em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--texto2); }
.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* La maqueta: Ciudad de Panamá de verdad, con las torres a su altura real (29-oct; la genera
   scripts/landing-maqueta.mjs). Una tarjeta con la MISMA proporción que las imágenes (6:5), así se ve
   entera en cualquier pantalla. Tres capas alineadas: el suelo con el trazo de las rutas; los edificios
   con fondo transparente, que tapan el trazo como en la calle; y encima los camiones (SMIL), que se
   funden cuando una torre que tienen delante los tapa. Las torres suben y las rutas se dibujan al
   aparecer. Con mouse, al terminar la entrada, maqueta.js la cambia por el mismo mapa en 3D, que se
   acerca un poco hacia donde apunta el mouse. La tarjeta no se inclina ni gira: se veía como una foto
   dando vueltas. Sin avisos que entran y salen, sin nombres, horas ni paradas (29-oct): el dueño los vio
   como basura; queda la ciudad, las rutas y los camiones. No es una captura de la app ni un mapa
   dibujado: ver landing/README.md. */
.hero { overflow: hidden; }
.hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.maqueta { position: relative; margin: 0; min-width: 0; }
.maqueta__marco { position: relative; aspect-ratio: 6 / 5; max-width: 100%; border-radius: 24px; overflow: hidden; background: #122C22; box-shadow: 0 1px 2px rgba(10,26,20,.08); }
.maqueta__capa, .maqueta__suelo img, .maqueta__suelo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.maqueta__suelo img, .maqueta__edificios { display: block; object-fit: cover; }
.maqueta__edificios, .maqueta__arriba { pointer-events: none; }
.maqueta__edificios { animation: torres 1.4s .5s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes torres { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
/* El mapa en vivo: un lienzo de 720 × 600, el mismo de las imágenes, escalado a la tarjeta (--escala
   la pone maqueta.js): se ve igual y los camiones caen en el mismo píxel. Entra
   fundiéndose; detrás, las capas prerenderizadas se apagan cuando ya no se ven. No recibe el mouse:
   maqueta.js lo escucha en la tarjeta. */
.maqueta__vivo { position: absolute; left: 0; top: 0; width: 720px; height: 600px; overflow: hidden; transform-origin: 0 0; transform: scale(var(--escala, 1)); opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.maqueta__vivo .maplibregl-canvas { position: absolute; left: 0; top: 0; }
.maqueta--viva .maqueta__vivo { opacity: 1; }
.maqueta--viva .maqueta__capa { visibility: hidden; transition: visibility 0s .7s; }
.maqueta__encima { position: absolute; left: 0; top: 0; width: 720px; height: 600px; }
.maqueta__encima g { animation: none; }
.mapa__halo { fill: none; stroke: rgba(46,204,138,.16); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; animation: mapaAparece .8s 2.4s both; }
.mapa__ruta { fill: none; stroke: var(--lima); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: mapaDibuja 2.2s calc(.5s + var(--i) * .25s) cubic-bezier(.45,0,.2,1) both; }
.mapa__camiones { animation: mapaAparece .6s 2.6s both; }
/* El camión, como en un sistema de flota (30-oct): el punto en la calle y, encima, una píldora oscura
   translúcida con borde sutil, el ícono, su nombre y un punto verde que late (en línea). */
.mapa__camion-punto { fill: var(--lima); stroke: #07110D; stroke-width: 2; }
.mapa__camion-tallo { stroke: rgba(46,204,138,.6); stroke-width: 1.2; }
.mapa__camion-placa rect { fill: rgba(7,17,13,.84); stroke: rgba(46,204,138,.32); stroke-width: 1; }
.mapa__camion-icono { fill: none; stroke: var(--lima); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mapa__camion-placa text { font: 600 11.5px 'Inter', system-ui, sans-serif; letter-spacing: .01em; fill: #F4FAF7; }
.mapa__camion-vivo, .mapa__camion-pulso { fill: #2ECC8A; }
.mapa__camion-pulso { transform-box: fill-box; transform-origin: center; animation: camionPulso 2s ease-out infinite; }
@keyframes camionPulso { from { opacity: .75; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: reduce) { .mapa__camion-pulso { display: none; } }
@keyframes mapaDibuja { from { stroke-dashoffset: 1; } }
@keyframes mapaAparece { from { opacity: 0; } }
/* El crédito que exigen las teselas y los datos del mapa: corto y tenue en la esquina, como en
   cualquier mapa. El detalle (OpenFreeMap, que los recorridos son de ejemplo, las fotos) va en
   privacidad.html#creditos, enlazado desde «Créditos» en el pie. */
.mapa__pie { position: absolute; right: 12px; bottom: 9px; z-index: 2; margin: 0; font-size: 10px; line-height: 1; }
.mapa__pie a { color: rgba(226,237,232,.42); text-decoration: none; }
.mapa__pie a:hover { color: rgba(226,237,232,.8); }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* En una columna la maqueta va de borde a borde de la pantalla. */
  .maqueta { margin: 8px calc(-1 * var(--margen)) 0; }
  .maqueta__marco { border-radius: 0; }
  /* «de mantenimiento» no se parte: en el celular la letra sigue al ancho para que quepa hasta en 320 px. */
  .hero__titulo { font-size: clamp(30px, 10.4vw, 58px); }
}
/* Donde la píldora entera no cabe en una línea (la columna del texto angosta, o el celular) queda para quién es. */
@media (max-width: 480px), (min-width: 1024px) and (max-width: 1199px) {
  .hero__pildora-txt { display: none; }
}
@media (max-width: 560px) {
  .mapa__pie { right: 10px; }
}

/* Beneficios, debajo del hero: cuatro, con lo que gana el cliente (no funciones). Todo sale de lo
   que la página ya afirma de cada módulo: sin cifras ni promesas nuevas. Sin tarjetas: una línea
   arriba de cada uno. Entran de a uno al aparecer (main.js quita `beneficios--espera`). */
.beneficios { padding: clamp(44px, 5.5vw, 72px) 0; background: var(--suave); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.beneficios__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.beneficios__lista li { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--borde2); transition: opacity .6s ease calc(var(--i) * .1s), transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i) * .1s); }
.beneficios__icono { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--menta); color: var(--verde); }
.beneficios__lista h2 { margin: 0; font-family: var(--titulos); font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.beneficios__lista p { margin: 0; max-width: 30em; font-size: 15.5px; line-height: 1.55; color: var(--texto2); }
.beneficios--espera .beneficios__lista li { opacity: 0; transform: translateY(14px); }
@media (max-width: 1023px) { .beneficios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beneficios__lista li:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .beneficios__lista { grid-template-columns: minmax(0, 1fr); } }
/* «Pruebas de cada servicio» (6-nov): de ancho completo, debajo de las otras tres, con la foto y su sello
   como salen en el detalle de un servicio y en su PDF. Las fotos van chicas a propósito: son de 360 px y
   en una pantalla 2x se verían borrosas más grandes. */
.beneficios__lista li.beneficios__pruebas { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 28px clamp(24px, 4vw, 56px); }
.beneficios__pruebas-texto { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; }
.beneficios__lista .beneficios__donde { font-size: 14px; color: var(--gris); }
.beneficios__pruebas .esc { flex: 1.8 1 520px; min-width: 0; max-width: 760px; }


/* En celular, la pantalla de escritorio a un ancho que se lee, y se desliza de lado. */
@media (max-width: 700px) {
  .pantalla__cuerpo { min-height: 0; padding: 14px; overflow-x: auto; overscroll-behavior-x: contain; }
}

/* ---------- secciones ---------- */
.seccion { padding: clamp(72px, 9vw, 120px) 0; }
/* Tipos de software: los nombres con que los piden los pliegos del Estado. */
.tipos-software { margin-top: clamp(56px, 7vw, 96px); }
/* Son 10 tarjetas: 5 o 2 columnas para que la última fila no quede con huecos. */
.tipos { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tipos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tipo { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--borde); }
.tipo b { font-family: var(--titulos); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--tinta); }
.tipo__glosa { font-size: 14px; color: var(--texto2); }
.tipo__modulo { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borde); font-size: 14px; font-weight: 600; color: var(--verde); }
.tipo__modulo small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.seccion--suave { background: var(--suave); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
/* El formulario va pegado a la calculadora: se lee como el paso siguiente, no como otra sección. */
.seccion--pegada { padding-top: clamp(24px, 3vw, 40px); }
.seccion:has(+ .seccion--pegada) { padding-bottom: clamp(24px, 3vw, 40px); }
.seccion--noche { background: var(--noche); color: #ECF5F1; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--verde); }
.titulo { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -0.04em; }
.bajada { margin: 0; color: var(--texto2); font-size: 18px; }
.cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: 36px; }
.cabeza .titulo { max-width: 12em; }
.cabeza .bajada { max-width: 30em; }

/* plataforma */
.plataforma { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.plataforma__texto { flex: 1 1 320px; display: flex; flex-direction: column; gap: 18px; }
.plataforma__texto .bajada b { color: var(--tinta); font-weight: 600; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--texto2); }
.leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.leyenda i { width: 10px; height: 10px; border-radius: 50%; }
.plataforma__diagrama { flex: 1.5 1 480px; min-width: 0; display: flex; justify-content: center; }
/* Por debajo de 1200 px la rueda no entra al lado del texto sin que los módulos se encimen: va debajo, entera. */
@media (max-width: 1199px) { .plataforma__texto { flex-basis: 100%; } }

/* módulos */
/* La rueda presenta los módulos y lleva a cada uno; la ficha va debajo, con pestañas que se quedan bajo la
   barra mientras se lee (29-oct). Elegir un módulo y ver lo que ofrece pasa en la misma vista: con la rueda
   sola, la ficha quedaba fuera de la pantalla y había que bajar a buscarla. */
.modulos { display: flex; flex-direction: column; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
/* Una píldora como la barra de arriba: lo que pasa por debajo al bajar se ve borroso, no cortado. */
.modulos__tabs { position: sticky; top: 82px; z-index: 20; align-self: flex-start; display: flex; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--borde); border-radius: 999px; }
.modulos__tabs::-webkit-scrollbar { display: none; }
.modtab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--texto2); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
.modtab i { width: 8px; height: 8px; border-radius: 50%; }
.modtab:hover { background: var(--suave); color: var(--tinta); }
.modtab:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
@media (pointer: coarse) { .modtab { min-height: 44px; } }
/* El elegido, oscuro como su módulo en la rueda. */
.modtab[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; font-weight: 600; }
.modtab[aria-pressed="true"] i { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
/* Al cambiar de módulo, la ficha, la pantalla y los pasos entran de abajo. */
.modulos__panel.cambia > * { animation: modentra .5s cubic-bezier(.2,.7,.2,1) backwards; }
.modulos__panel.cambia > :nth-child(2) { animation-delay: 70ms; }
.modulos__panel.cambia > :nth-child(n+3) { animation-delay: 140ms; }
@keyframes modentra { from { opacity: 0; transform: translateY(14px); } }
.modulos__panel { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ficha { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.ficha__texto { flex: 1.3 1 340px; display: flex; flex-direction: column; gap: 10px; }
.ficha__cat { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: #FFFFFF; border: 1px solid #DCE7E2; color: var(--verde); }
.ficha__nombre { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.035em; line-height: 1.02; }
.ficha__lead { margin: 0; font-size: 18px; color: var(--texto2); }
.antes-despues { flex: 1 1 260px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #DCE7E2; font-size: 15px; }
.antes-despues div { padding: 12px 14px; display: flex; gap: 10px; background: #FFFFFF; color: var(--texto2); }
.antes-despues div + div { background: var(--tinta); color: #FFFFFF; }
.antes-despues b { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding-top: 2px; color: #8A5A00; }
.antes-despues div + div b { color: var(--lima); }
.pantalla { background: #FFFFFF; border: 1px solid #DCE7E2; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(10,26,20,.05); }
.pantalla__barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid #EDF2EF; font-size: 13px; }
.pantalla__ruta { display: inline-flex; align-items: center; gap: 8px; color: var(--gris); }
.pantalla__ruta img { width: 18px; height: 18px; }
.pantalla__ruta b { color: var(--tinta); font-weight: 600; }
.vistas-btn { display: inline-flex; padding: 3px; border-radius: 999px; background: #EEF4F1; }
.vistas-btn[hidden] { display: none; }
.vistas-btn button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--texto2); font-size: 14px; cursor: pointer; }
.vistas-btn button[aria-pressed="true"] { background: #FFFFFF; color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(10,26,20,.18); }
.pantalla__cuerpo { padding: 20px; min-height: 380px; }
.etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.etapa { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.etapa h4 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--titulos); font-weight: 700; font-size: 18px; }
.etapa h4 span { width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: var(--lima); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.etapa ul, .lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #23382F; }
.etapa li, .lista-check li { display: flex; gap: 8px; }
.etapa li::before, .lista-check li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.conexiones { display: flex; flex-direction: column; gap: 10px; }
.conexiones > span { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--gris); }
.conexiones__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.conexion { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border: 1px solid #DCE7E2; border-radius: 14px; background: #FFFFFF; color: var(--tinta); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.conexion:hover { border-color: var(--verde); box-shadow: 0 10px 24px -18px rgba(10,26,20,.4); }
.conexion strong { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.conexion em { font-style: normal; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--tinta); color: #FFFFFF; }
.conexion em + em, .conexion strong em:last-of-type { background: var(--menta); color: var(--verde-osc); }
.conexion > span { font-size: 15px; color: var(--texto2); }

/* planes */
.ejemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--gris); }
.pastilla { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #D3E0DA; background: #FFFFFF; color: var(--tinta); font-size: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pastilla:hover { border-color: var(--verde); }
@media (pointer: coarse) { .pastilla { min-height: 44px; } .resumen-plan__cabeza a { display: inline-block; padding: 12px 0; margin: -12px 0; } .pie a { display: inline-block; padding: 10px 0; } }
.pastilla[aria-pressed="true"] { border-color: var(--verde); background: var(--menta); color: var(--verde-osc); font-weight: 600; }
.calculadora { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.calc-datos { flex: 1 1 420px; min-width: 0; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 24px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 26px; }
.dato { display: flex; flex-direction: column; gap: 10px; }
.dato__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dato label { display: flex; flex-direction: column; max-width: 24em; }
.dato label b { font-weight: 600; font-size: 16px; }
.dato label span { font-size: 13px; color: var(--gris); }
.paso { display: flex; align-items: center; border: 1px solid var(--borde2); border-radius: 12px; overflow: hidden; }
.paso button { width: 44px; height: 44px; border: 0; background: var(--suave); color: var(--tinta); font-size: 20px; cursor: pointer; }
.paso button:hover { background: #E3ECE8; }
.paso input { width: 80px; height: 44px; border: 0; text-align: center; font-family: var(--titulos); font-weight: 700; font-size: 20px; color: var(--tinta); background: #FFFFFF; -moz-appearance: textfield; }
.paso input::-webkit-inner-spin-button, .paso input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dato input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: #DCE7E2; cursor: pointer; margin: 0; }
.dato input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--verde-mancha); box-shadow: 0 2px 8px rgba(10,26,20,.25); }
.dato input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--verde-mancha); box-shadow: 0 2px 8px rgba(10,26,20,.25); }
.calc-modulos { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid #EDF2EF; }
.calc-modulos > b { font-weight: 600; font-size: 16px; }
.calc-modulos > div { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-modulos > span { font-size: 13px; color: var(--gris); }
.calc-res { flex: 1 1 400px; min-width: 0; background: var(--tinta); color: #FFFFFF; border-radius: 24px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 22px; position: sticky; top: 92px; }
.calc-res__escala { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #A9C1B8; }
.calc-res__escala strong { font-family: var(--titulos); font-weight: 800; font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -0.04em; color: var(--lima); }
.calc-res__escala p { margin: 4px 0 0; font-size: 15px; color: #CFE0D8; }
.uo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.uo strong { font-family: var(--titulos); font-weight: 700; font-size: 34px; letter-spacing: -0.03em; }
.uo strong small { font-size: 16px; font-weight: 600; color: #A9C1B8; letter-spacing: 0; }
.uo > span { font-size: 14px; color: #A9C1B8; }
.regla { position: relative; padding-top: 4px; }
.regla__tramos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.regla__tramos div { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #A9C1B8; text-align: center; }
.regla__tramos i { display: block; height: 10px; border-radius: 3px; background: #1C3329; }
.regla__tramos .abajo i { background: #2C5A47; }
.regla__tramos .esta i { background: var(--lima); }
.regla__marca { position: absolute; top: -2px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255,255,255,.18); transition: left .45s cubic-bezier(.2,.7,.2,1); }
.desglose { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; padding: 16px 0; border-top: 1px solid #1C3329; border-bottom: 1px solid #1C3329; }
.desglose div { display: flex; justify-content: space-between; gap: 12px; }
.desglose dt { color: #A9C1B8; }
.desglose dd { margin: 0; font-variant-numeric: tabular-nums; }
.margen { padding: 14px 16px; border-radius: 14px; background: #102A21; font-size: 15px; color: #DDEDE6; }
.propuesta { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #A9C1B8; }
.propuesta__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.propuesta__chips span { padding: 5px 11px; border-radius: 999px; border: 1px solid #2C5A47; font-size: 14px; color: #FFFFFF; }
.propuesta__chips span:first-child { background: var(--lima); border-color: var(--lima); color: #06140E; font-weight: 600; }
.escalas { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.escala { padding: 18px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--texto2); }
.escala small { font-size: 12px; font-weight: 700; color: var(--gris); }
.escala b { font-family: var(--titulos); font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--tinta); margin-bottom: 6px; }
.escala.activa { background: var(--tinta); border-color: var(--tinta); color: #CFE0D8; }
.escala.activa small { color: var(--lima); }
.escala.activa b { color: #FFFFFF; }
.nota { margin: 16px 0 0; font-size: 15px; color: var(--texto2); }
@media (max-width: 900px) { .calc-res { position: static; } }

/* preguntas */
.preguntas { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.preguntas__texto { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.preguntas__lista { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none; font-family: var(--titulos); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.pregunta summary::-webkit-details-marker { display: none; }
/* El «+» es dibujo: con «/ ""» el lector de pantalla no lo lee al final de cada pregunta (el que no entiende la
   segunda forma se queda con la primera). */
.pregunta summary::after { content: "+"; content: "+" / ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--suave); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; color: var(--verde); transition: transform .2s ease; }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta p { margin: 0 4px 20px; max-width: 46em; color: var(--texto2); }

/* contacto */
.contacto { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.contacto__texto { flex: 1 1 340px; display: flex; flex-direction: column; gap: 18px; }
.contacto__titulo { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.045em; }
.formulario { flex: 1.25 1 440px; min-width: 0; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 28px; padding: clamp(22px, 3.5vw, 40px); box-shadow: 0 30px 60px -40px rgba(10,26,20,.35); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.formulario .ancho { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo label small { font-weight: 400; color: var(--gris); font-size: 14px; }
.campo input, .campo select, .campo textarea { min-height: 50px; padding: 0 14px; border: 1px solid var(--borde2); border-radius: 12px; background: #FFFFFF; font-size: 16px; color: var(--tinta); }
.campo textarea { padding: 12px 14px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(10,107,84,.15); }
.resumen-plan { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--menta); color: var(--verde-osc); }
.resumen-plan__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.resumen-plan a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.resumen-plan__cabeza a { text-transform: none; letter-spacing: 0; font-size: 14px; }
.resumen-plan__armado { display: grid; gap: 6px; }
.resumen-plan [hidden] { display: none; }
.resumen-plan__plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.resumen-plan__plan b { font-family: var(--titulos); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--tinta); }
.resumen-plan__plan span { font-size: 15px; }
.resumen-plan__datos, .resumen-plan__vacio { margin: 0; font-size: 14px; }
.resumen-plan__modulos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.resumen-plan__modulos span { padding: 4px 10px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--borde2); font-size: 13px; color: var(--tinta); }
.consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto2); }
.consentimiento input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); flex: none; }
.formulario .boton { width: 100%; }
.form-aviso { margin: 0; font-size: 14px; color: #8A5A00; }
.form-aviso:empty { display: none; }
.campo-nota { margin: 0; font-size: 14px; color: var(--texto2); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario:has(.gracias) { align-content: center; }
.gracias { display: flex; flex-direction: column; gap: 8px; padding: 28px 8px; text-align: center; outline: none; }
.gracias b { font-family: var(--titulos); font-size: 28px; font-weight: 700; color: var(--tinta); }
.gracias span { font-size: 17px; color: var(--texto2); }
.pasos-contacto { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: paso; }
.pasos-contacto li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; counter-increment: paso; }
.pasos-contacto li::before { content: counter(paso); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--menta); color: var(--verde); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pasos-contacto b { font-size: 17px; font-weight: 600; color: var(--tinta); }
.pasos-contacto span { font-size: 15px; color: var(--texto2); }

/* pie */
.pie { background: var(--noche); color: #A9C1B8; font-size: 14px; }
.pie .contenedor { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.pie a { color: #DDEDE6; }
.pie .marca span { color: #FFFFFF; font-size: 18px; }
.pie .marca img { width: 28px; height: 28px; }
/* En el celular el texto de al lado envuelve y achicaba al logo: «RMP» se encimaba con «Resources…». */
.pie .marca { flex: none; }


:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* ============================================
   Ilustraciones: mapa, celular, diagrama y vistas de módulos
   ============================================ */

.ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic2{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navlink{color:#0A1A14;text-decoration:none;padding:8px 14px;border-radius:999px;transition:background .15s ease}
.navlink:hover{background:#EEF4F1;color:#0A1A14}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.in{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.28s}.d5{animation-delay:.55s}
/* Palabra que rota en el titular. La ventana mide 1.1em, pero cada palabra ocupa 1.6em: el resto es aire.
   Pegadas a 1.1em, la «p» de limpieza y la «g» de fumigación bajaban más que eso y asomaban en la ventana
   de la palabra siguiente, debajo de la «p» de «operación» (28-oct). El padding con margen negativo da lugar
   a la última letra, que el interletrado negativo dejaba cortada («mantenimient»), sin mover nada. Abajo,
   lo mismo para las colas de la «g» y la «p»: la ventana baja .22em más (la «g» de fumigación salía con
   la punta plana) y el margen negativo se lo devuelve a la línea. El alto cuenta ese padding (border-box):
   1.32em = 1.1em de ventana + .22em de cola. */
.rot{display:inline-block;height:1.32em;overflow:hidden;vertical-align:bottom;padding:0 .12em .22em;margin:0 -.12em -.22em}
.rot-in{display:flex;flex-direction:column;animation:rot 12s cubic-bezier(.75,0,.25,1) infinite}
.rot-in>span{display:block;height:1.6em;line-height:1.1em}
/* La quinta palabra repite la primera para que la vuelta sea continua: la pone el CSS, así no es texto de la página
   (el buscador y el lector de pantalla leen «recolección, limpieza, fumigación y mantenimiento», una sola vez). */
.rot-in>span[data-palabra]::before{content:attr(data-palabra)}
@keyframes rot{0%,21%{transform:translateY(0)}25%,46%{transform:translateY(-1.6em)}50%,71%{transform:translateY(-3.2em)}75%,96%{transform:translateY(-4.8em)}100%{transform:translateY(-6.4em)}}
.scan{animation:scan 2.4s ease-in-out infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(118px)}}
.ph{animation:ph 6s ease infinite}
.p2{animation-delay:.9s}.p3{animation-delay:1.8s}
@keyframes ph{0%{opacity:.25;transform:scale(.92)}12%,82%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.92)}}
.hl{animation:hl 4.8s ease infinite}
.h2{animation-delay:.7s}.h3{animation-delay:1.4s}
@keyframes hl{0%,6%{opacity:0;transform:scale(.95)}16%,78%{opacity:1;transform:none}90%,100%{opacity:0}}
.prog{transform-origin:left;animation:prog 5s ease-in-out infinite}
@keyframes prog{0%{transform:scaleX(.08)}70%,100%{transform:scaleX(1)}}
.bar{transform-origin:bottom;animation:bar 4s ease-in-out infinite alternate}
.b2{animation-delay:.3s}.b3{animation-delay:.6s}.b4{animation-delay:.9s}.b5{animation-delay:1.2s}
@keyframes bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.pane{animation:pane .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes pane{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.swap{display:inline-block;animation:swap .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.raya{stroke-width:.6;opacity:.5}
.ins{stroke:#FFFFFF;stroke-width:1.4}
.insp{font:700 6px 'Inter',sans-serif;fill:#FFFFFF;text-anchor:middle}
.placat{font:600 10px ui-monospace,Menlo,Consolas,monospace;fill:#FFFFFF;text-anchor:middle}
.pnum{font:700 12px 'Inter',sans-serif;fill:#FFFFFF;text-anchor:middle}
.pinp{filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.kpi{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;background:#F2F6F3;font-size:13px;color:#23382F}
.ph-fr{width:230px;height:460px;box-sizing:border-box;border:8px solid #0A1A14;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;background:#FFFFFF;font-family:'Inter',system-ui,sans-serif;color:#16201A;text-align:left;flex:none;box-shadow:0 24px 50px -28px rgba(10,26,20,.55)}
.callouts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;flex:1 1 240px;max-width:340px}
.callouts li{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:12px;row-gap:2px}
.callouts li::before{content:"";width:10px;height:10px;border-radius:50%;background:#2ECC8A;margin-top:6px;grid-row:span 2}
.callouts b{font-size:15px;font-weight:600}
.callouts span{font-size:14px;color:#3B5048}
.tl{display:flex;gap:12px;padding:9px 0 11px;border-bottom:1px solid #EDF2EF;align-items:flex-start}
.tld{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none}
.tl div{display:flex;flex-direction:column}
.tl b{font-weight:600}
.tl span{font-size:13px;color:#50645C}
.rl{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rl i{display:block;height:6px;border-radius:3px;background:#CFE0D8}
.mv{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #EDF2EF;flex-wrap:wrap}
.mvt{flex:none;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700}
.mvc{font-size:13px;color:#50645C}
.hub{container-type:inline-size}
.hubring{fill:none;stroke:#DCE7E2;stroke-width:1.5;vector-effect:non-scaling-stroke}
/* Un segundo anillo, de puntos, que gira despacio. */
.hubring--giro{stroke:#2ECC8A;stroke-width:2;stroke-dasharray:1 11;stroke-linecap:round;opacity:.55;animation:hubgiro 60s linear infinite}
@keyframes hubgiro{to{stroke-dashoffset:-240}}
.hubline{stroke:#9FCDB6;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 6;animation:hubf 1.4s linear infinite;transition:stroke .3s ease,opacity .3s ease}
@keyframes hubf{to{stroke-dashoffset:-10}}
/* El rayo del módulo activo: sólido y con un pulso de datos que sale del centro. */
.hub--activo .hubline{opacity:.35}
.hub--activo .hubline.on{opacity:1;stroke:#0E8A6E;stroke-width:2.5;stroke-dasharray:none}
.hubpulso{fill:#2ECC8A;opacity:0;transition:opacity .25s ease}
.hubpulso.on{opacity:1}
.hubnode{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 15px 10px 12px;border-radius:14px;background:#FFFFFF;border:1px solid #DCE7E2;box-shadow:0 10px 24px -16px rgba(10,26,20,.35);color:#0A1A14;font:inherit;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;transition:border-color .2s ease,box-shadow .2s ease,opacity .3s ease}
.hubnode:hover,.hubnode:focus-visible{border-color:#0A6B54;box-shadow:0 14px 30px -14px rgba(10,26,20,.4);outline:none}
.hubnode b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.hubnode small{display:block;margin-top:2px;font-size:12.5px;color:#50645C;line-height:1.4}
.hubdot{width:10px;height:10px;border-radius:50%;flex:none;transition:transform .3s ease}
.hubnode.on{border-color:#0E8A6E;box-shadow:0 0 0 4px rgba(46,204,138,.18),0 14px 30px -14px rgba(10,26,20,.4)}
.hubnode.on .hubdot{transform:scale(1.35)}
.hubnode[aria-pressed="true"]{background:#0A1A14;border-color:#0A1A14;color:#FFFFFF}
.hubnode[aria-pressed="true"] small{color:#A9C1B8}
.hubnode > span{transition:opacity .3s ease}
.hub--activo .hubnode:not(.on):not([aria-pressed="true"]) > span{opacity:.5}
/* La leyenda resalta su grupo y apaga el resto. */
.hub--grupo .hubnode:not(.en-grupo) > span{opacity:.25}
.hub--grupo .hubnode:not(.en-grupo){border-color:#EDF2EF;box-shadow:none}
.hub--grupo .hubnode.en-grupo{border-color:#0A6B54}
.hub--grupo .hubnode.en-grupo > span{opacity:1}
.leyenda span[data-grupo]{cursor:default;padding:2px 0;transition:opacity .2s ease}
/* Cuánto falta para pasar al módulo siguiente cuando la rueda va sola. */
.hubnode__barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:#2ECC8A;transform:scaleX(0);transform-origin:left}
.hub--tour .hubnode[aria-pressed="true"] .hubnode__barra{animation:hubbarra var(--hub-paso,7s) linear forwards}
@keyframes hubbarra{to{transform:scaleX(1)}}
/* El centro: una onda que late y los datos que usa el módulo activo, encendidos. */
.hubcore{z-index:2} /* los módulos salen de DETRÁS del centro al entrar */
.hubcore::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(46,204,138,.45);animation:hubonda 2.8s ease-out infinite;pointer-events:none}
@keyframes hubonda{from{transform:scale(.96);opacity:.9}to{transform:scale(1.32);opacity:0}}
.hubdatos{font-size:clamp(11px,1.15vw,13px);color:#A9C1B8;line-height:1.65;padding:0 12%}
.hubdato{transition:color .3s ease,opacity .3s ease}
.hub--activo .hubdato{opacity:.4}
.hub--activo .hubdato.on{opacity:1;color:#2ECC8A;font-weight:700}
.hubcore__usa{min-height:1.3em;font-size:clamp(10px,1vw,12px);font-weight:600;letter-spacing:.04em;color:#2ECC8A;opacity:0;transition:opacity .3s ease}
.hub--activo .hubcore__usa{opacity:1}
/* Entrada: los módulos salen del centro, de a uno, cuando la sección aparece. */
.hub.js-espera .hubnode{opacity:0}
.hub--visto .hubnode{animation:hubentra .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
@keyframes hubentra{from{opacity:0;transform:translate(calc(-50% + var(--dx,0) * 1cqw),calc(-50% + var(--dy,0) * 1cqw)) scale(.5)}}
@media (max-width:760px){.hub{aspect-ratio:auto !important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hubnode{position:relative !important;left:auto !important;top:auto !important;transform:none !important;white-space:normal}.hubsvg,.hubcore{display:none !important}.hub--activo .hubnode:not(.on):not([aria-pressed="true"]) > span{opacity:1}}
/* ============================================================
   ESCENAS (28-oct): cada módulo recreado como en la app real, limpio y con movimiento.
   No son capturas: son las piezas de la pantalla real (barra, pestañas, tarjetas, tablas, la
   hoja del conductor) con datos de ejemplo. Todo escala con el ancho (cqw); en angosto se apila.
   Colores de la APP (verde #1B6B3F), no los de la landing: así se parece a lo que el cliente usa.
   De frente y planas (29-oct): la pantalla y su detalle van lado a lado, sin encimarse, sin
   inclinar nada y con bordes finos en vez de sombras grandes. Inclinadas, flotando y con
   sombras se veían «como de software barato».
   ============================================================ */
.esc { --a-verde: #1B6B3F; --a-claro: #E8F2EC; --a-texto: #16201A; --a-gris: #5E6B63; --a-borde: #E3E8E4; --a-fondo: #F7F9F7; --lado: 30%;
  position: relative; container-type: inline-size; border-radius: 14px; overflow: hidden; background: #F3F6F4; }
/* El celular llena el alto: con el lienzo 16:10 y este relleno, 27.5 % del ancho lo deja en proporción de celular.
   La pantalla de la oficina, más baja, va centrada a su lado. */
.esc--cel { --lado: 27.5%; }
.esc--cel .esc-ventana { align-self: center; }
.esc__lienzo { position: relative; aspect-ratio: 16 / 10; display: grid; grid-template-columns: minmax(0, 1fr) var(--lado); grid-template-rows: minmax(0, 1fr); align-items: start; gap: 2.4%; padding: 3% 2.8% 4.2%;
  font-size: clamp(9px, 1.34cqw, 17px); color: var(--a-texto); line-height: 1.3; }
/* Sin celular, el lienzo mide lo que su contenido: con un alto fijo quedaba medio vacío. */
.esc:not(.esc--cel) .esc__lienzo { aspect-ratio: auto; grid-template-rows: auto; }
.esc__nota { position: absolute; right: 12px; bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #7D9189; text-transform: uppercase; }
.esc svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.esc .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -.02em; }

/* La ventana de la oficina, con la barra de la app */
.esc-ventana { grid-column: 1; max-height: 100%; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: 1.1em; box-shadow: 0 1px 2px rgba(10,26,20,.05); overflow: hidden;
  animation: escSube .7s cubic-bezier(.2,.7,.2,1) both; }
.esc-app { display: flex; align-items: center; gap: .9em; padding: .65em 1em; border-bottom: 1px solid var(--a-borde); }
.esc-app__logo { display: inline-flex; align-items: center; gap: .3em; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.05em; color: var(--a-verde); }
.esc-app__logo i { width: 1.05em; height: 1.05em; border-radius: 50%; border: .22em solid #2BA88A; border-right-color: var(--a-verde); }
.esc-app__nav { display: flex; gap: .2em; font-size: .8em; }
.esc-app__nav em { font-style: normal; padding: .35em .75em; border-radius: 999px; font-weight: 600; }
.esc-app__nav em.on { background: var(--a-verde); color: #FFFFFF; }
.esc-app__crear { margin-left: auto; padding: .4em .85em; border-radius: 999px; background: var(--a-verde); color: #FFFFFF; font-size: .78em; font-weight: 700; }
.esc-sub { display: flex; gap: .25em; padding: .45em 1em; border-bottom: 1px solid var(--a-borde); font-size: .76em; color: var(--a-gris); }
.esc-sub em { font-style: normal; padding: .3em .7em; border-radius: 999px; }
.esc-sub em.on { background: var(--a-claro); color: var(--a-texto); font-weight: 600; box-shadow: inset 0 0 0 1px #CFE3D7; }
.esc-cuerpo { flex: 1 1 auto; min-height: 0; padding: 1em 1.2em; display: flex; flex-direction: column; gap: .8em; background: var(--a-fondo); overflow: hidden; }
.esc-fila { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.esc-tit b { display: block; font-family: var(--titulos); font-size: 1.6em; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.esc-tit small { display: block; margin-top: .25em; font-size: .8em; color: var(--a-gris); }
.esc-boton { display: inline-flex; align-items: center; gap: .35em; padding: .45em .9em; border-radius: 999px; background: var(--a-verde); color: #FFFFFF; font-size: .76em; font-weight: 700; white-space: nowrap; }
.esc-boton svg { width: 1.1em; height: 1.1em; }
.esc-boton--suave { background: #FFFFFF; color: var(--a-texto); box-shadow: inset 0 0 0 1px var(--a-borde); }
.esc-seg2 { display: inline-flex; padding: .2em; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--a-borde); font-size: .74em; }
.esc-seg2 em { font-style: normal; padding: .3em .75em; border-radius: 999px; color: var(--a-gris); }
.esc-seg2 em.on { background: var(--a-verde); color: #FFFFFF; font-weight: 700; }

/* Tarjetas de números */
.esc-tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: .55em; }
.esc-tile { display: flex; align-items: center; gap: .6em; background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .8em; padding: .6em .75em; animation: escEntra .5s cubic-bezier(.2,.7,.2,1) both; }
.esc-tile > i { flex: none; width: 2.1em; height: 2.1em; border-radius: .6em; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); }
.esc-tile > i svg { width: 1.15em; height: 1.15em; }
.esc-tile b { display: block; font-family: var(--titulos); font-size: 1.5em; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.esc-tile b small { font-size: .55em; color: var(--a-gris); }
.esc-tile span { font-size: .74em; color: var(--a-gris); }
.esc-tile.rojo b { color: #C2410C; } .esc-tile.ambar > i { background: #FDF1DC; color: #9A5B00; } .esc-tile.rojo > i { background: #FDE6E3; color: #B42318; }
.esc-tiles > :nth-child(2) { animation-delay: .08s; } .esc-tiles > :nth-child(3) { animation-delay: .16s; } .esc-tiles > :nth-child(4) { animation-delay: .24s; }

/* Chips de estado */
.esc-chip { display: inline-flex; align-items: center; gap: .3em; padding: .2em .55em; border-radius: 999px; font-size: .7em; font-weight: 700; white-space: nowrap; }
.esc-chip svg { width: 1.05em; height: 1.05em; }
.esc-chip--ok { background: #E3F4EA; color: var(--a-verde); } .esc-chip--alerta { background: #FDF1DC; color: #9A5B00; }
.esc-chip--mal { background: #FDE6E3; color: #B42318; } .esc-chip--info { background: #E4EEFB; color: #1D5FB8; }
.esc-chip--gris { background: #EEF2EF; color: #4B5A51; } .esc-chip--vivo { background: #E3F4EA; color: var(--a-verde); }
.esc-chip--vivo::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #2ECC8A; animation: escVivo 1.6s ease-out infinite; }

/* Tablas */
.esc-tabla { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .9em; overflow: hidden; font-size: .76em; min-height: 0; }
.esc-tabla > div { display: grid; grid-template-columns: var(--cols); gap: .7em; align-items: center; padding: .62em .9em; border-top: 1px solid #EEF2EF; animation: escEntra .45s cubic-bezier(.2,.7,.2,1) both; }
.esc-tabla > div:first-child { border-top: 0; background: #F4F7F5; font-size: .82em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--a-gris); animation: none; }
.esc-tabla > div:nth-child(2) { animation-delay: .25s; } .esc-tabla > div:nth-child(3) { animation-delay: .32s; } .esc-tabla > div:nth-child(4) { animation-delay: .39s; }
.esc-tabla > div:nth-child(5) { animation-delay: .46s; } .esc-tabla > div:nth-child(6) { animation-delay: .53s; } .esc-tabla > div:nth-child(7) { animation-delay: .6s; }
.esc-tabla b { font-weight: 600; } .esc-tabla .der { text-align: right; justify-self: end; } .esc-tabla .tenue { color: var(--a-gris); }
.esc-tabla > div > .esc-chip, .esc-tabla .der > .esc-chip { justify-self: start; }
.esc-barra { height: .42em; border-radius: 999px; background: #E7EEEA; overflow: hidden; }
.esc-barra i { display: block; height: 100%; width: var(--v); background: var(--c, var(--a-verde)); border-radius: inherit; transform-origin: left; animation: escLlena 1.1s .4s cubic-bezier(.2,.7,.2,1) both; }
.esc-aviso { display: flex; align-items: center; gap: .6em; padding: .6em .9em; border-radius: .8em; background: #FDECEA; color: #8F1D14; font-size: .76em; }
.esc-aviso svg { flex: none; width: 1.2em; height: 1.2em; }

/* Lista con chip a la izquierda */
.esc-lista { background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .9em; padding: .35em .85em; display: flex; flex-direction: column; min-height: 0; }
.esc-lista > strong { padding: .55em 0 .35em; font-family: var(--titulos); font-size: .95em; }
.esc-lista > div { display: flex; align-items: center; gap: .6em; padding: .5em 0; border-top: 1px solid #EEF2EF; animation: escEntra .45s cubic-bezier(.2,.7,.2,1) both; }
.esc-lista > div:nth-of-type(2) { animation-delay: .1s; } .esc-lista > div:nth-of-type(3) { animation-delay: .2s; } .esc-lista > div:nth-of-type(4) { animation-delay: .3s; } .esc-lista > div:nth-of-type(5) { animation-delay: .4s; }
.esc-lista b { display: block; font-size: .86em; } .esc-lista small { display: block; font-size: .7em; color: var(--a-gris); }
.esc-col2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: .7em; }

/* La semana de Planificar */
.esc-semana { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .9em; overflow: hidden; font-size: .7em; }
.esc-semana > span { padding: .45em .4em; border-top: 1px solid #EEF2EF; border-left: 1px solid #EEF2EF; min-height: 3.3em; display: flex; flex-direction: column; gap: .25em; }
.esc-semana > span:nth-child(4n + 1) { border-left: 0; }
.esc-semana > .h { min-height: 0; border-top: 0; font-weight: 700; background: #F4F7F5; }
.esc-semana > .hoy { background: #F1F7F3; }
.esc-semana .lugar { flex-direction: row; align-items: center; gap: .45em; }
.esc-semana .lugar i { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); font-style: normal; font-weight: 700; font-size: .85em; }
.esc-semana .lugar b { display: block; font-size: 1.05em; line-height: 1.15; } .esc-semana .lugar small { color: var(--a-gris); }
.esc-semana .mas { align-items: center; justify-content: center; color: #A9B6AF; font-size: 1.25em; }
.esc-turno { display: block; padding: .3em .4em; border-radius: .45em; background: #EEF5F1; border-left: .22em solid var(--a-verde); line-height: 1.2; animation: escPop .4s cubic-bezier(.2,.7,.2,1) both; }
.esc-turno b { display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95em; }
.esc-turno.hecha { background: #DCEFE3; }
.esc-turno.nuevo { animation: escNuevo 5s 1.4s ease-in-out infinite both; }

/* Personas (Asistencia) */
.esc-personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; }
.esc-persona { background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .9em; padding: .7em; display: flex; flex-direction: column; gap: .55em; font-size: .78em; animation: escEntra .5s cubic-bezier(.2,.7,.2,1) both; }
.esc-persona:nth-child(2) { animation-delay: .1s; } .esc-persona:nth-child(3) { animation-delay: .2s; }
.esc-persona header { display: flex; align-items: center; gap: .5em; }
.esc-av { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); font-weight: 700; font-size: .85em; }
.esc-persona header b { display: block; font-size: .95em; line-height: 1.15; } .esc-persona header small { color: var(--a-gris); }
.esc-marcas { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; text-align: center; font-size: .82em; color: var(--a-gris); }
.esc-marcas::before { content: ""; position: absolute; left: 12%; right: 12%; top: .45em; height: 2px; background: #E3E8E4; }
.esc-marcas span { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; }
.esc-marcas span::before { content: ""; width: .9em; height: .9em; border-radius: 50%; background: #FFFFFF; border: 2px solid #CBD6D0; }
.esc-marcas span.si::before { background: var(--a-verde); border-color: var(--a-verde); }
.esc-marcas b { color: var(--a-texto); font-size: 1.05em; }

/* El celular */
.esc-cel { grid-column: 2; align-self: stretch; padding: .35em; border-radius: 2.3em; background: #0F1A15;
  animation: escSube .7s .15s cubic-bezier(.2,.7,.2,1) both; }
.esc-cel__pantalla { position: relative; height: 100%; border-radius: 1.95em; background: #FFFFFF; display: flex; flex-direction: column; overflow: hidden; }
.esc-cel__estado { display: flex; justify-content: space-between; align-items: center; padding: .75em 1.1em .4em; font-size: .74em; font-weight: 600; }
.esc-cel__notch { width: 32%; height: 1.25em; border-radius: 999px; background: #0F1A15; }
.esc-cel__arriba { flex: none; height: 13%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .35em; padding: .5em .8em; background: #EAF0ED; }
.esc-cel__arriba .esc-chip { background: #FFFFFF; color: var(--a-texto); box-shadow: inset 0 0 0 1px var(--a-borde); font-size: .72em; }
.esc-hoja { flex: 1; min-height: 0; margin-top: -1em; border-radius: 1.2em 1.2em 0 0; background: #FFFFFF; box-shadow: 0 -1px 0 var(--a-borde); padding: .9em .9em; display: flex; flex-direction: column; gap: .6em; }
.esc-hoja__lugar { align-self: flex-start; display: inline-flex; align-items: center; gap: .35em; padding: .3em .6em; border-radius: .5em; background: #F1F4F2; font-size: .8em; font-weight: 700; }
.esc-hoja__lugar svg { width: 1em; height: 1em; }
.esc-hoja__label { font-size: .66em; font-weight: 700; letter-spacing: .07em; color: var(--a-gris); text-transform: uppercase; }
.esc-cat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3em; }
.esc-cat span { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .45em .1em; border: 1px solid var(--a-borde); border-radius: .55em; font-size: .62em; text-align: center; line-height: 1.15; }
.esc-cat span svg { width: 1.5em; height: 1.5em; margin-bottom: .15em; }
.esc-cat span b { font-size: 1.05em; } .esc-cat span small { color: var(--a-gris); }
.esc-cat .v { color: #16A34A; } .esc-cat .n { color: #D97706; } .esc-cat .a { color: #2563EB; } .esc-cat .r { color: #DC2626; }
.esc-cat span.on { border-color: #2563EB; background: #EEF4FE; box-shadow: 0 0 0 2px rgba(37,99,235,.15); animation: escElige 5s 1s ease-in-out infinite both; }
.esc-input.alto { min-height: 4.2em; }
.esc-input { padding: .55em .65em; border: 1px solid var(--a-borde); border-radius: .55em; font-size: .74em; }
.esc-foto-tomada { flex: 1; min-height: 3.5em; border-radius: .7em; position: relative; overflow: hidden;
  background: radial-gradient(60% 50% at 25% 30%, rgba(255,255,255,.45), transparent 70%), radial-gradient(70% 60% at 85% 80%, rgba(10,26,20,.35), transparent 70%), linear-gradient(165deg, #A6DCC4 0%, #4C9C7B 50%, #275F4C 100%); }
/* Fotos de ejemplo de las escenas (de dónde sale cada una: landing/README.md, «Fotos de ejemplo»). */
.esc-foto-tomada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.esc-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5em; }
.esc-foto-tomada em { position: absolute; left: .5em; bottom: .45em; padding: .2em .5em; border-radius: 999px; background: rgba(10,26,20,.55); color: #FFFFFF; font-style: normal; font-size: .66em; }
.esc-grande { padding: .7em; border-radius: .7em; background: var(--a-verde); color: #FFFFFF; text-align: center; font-weight: 700; font-size: .8em; display: flex; align-items: center; justify-content: center; gap: .4em; }
.esc-grande svg { width: 1.1em; height: 1.1em; }
.esc-enlace { text-align: center; font-size: .68em; color: var(--a-gris); }
.esc-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.esc-fotos span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .64em; color: var(--a-gris); }
.esc-fotos i { width: 100%; aspect-ratio: 1; border-radius: .6em; border: 1.5px dashed #C9D6CF; display: grid; place-items: center; color: #8FA198; position: relative; overflow: hidden; }
.esc-fotos i svg { width: 1.6em; height: 1.6em; }
.esc-fotos i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, #A6DCC4, #4C9C7B 55%, #275F4C); opacity: 0; animation: escFoto 7s ease-in-out infinite both; }
.esc-fotos span:nth-child(1) i::after { animation-delay: .8s; } .esc-fotos span:nth-child(2) i::after { animation-delay: 1.6s; } .esc-fotos span:nth-child(3) i::after { animation-delay: 2.4s; }
.esc-saludo b { display: block; font-family: var(--titulos); font-size: 1.15em; font-weight: 700; letter-spacing: -0.02em; }
.esc-saludo small { font-size: .7em; color: var(--a-gris); }
.esc-trabajo { display: flex; align-items: center; gap: .6em; padding: .6em; border: 1px solid var(--a-borde); border-radius: .8em; font-size: .78em; }
.esc-trabajo > i { flex: none; width: 2.2em; height: 2.2em; border-radius: .6em; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); }
.esc-trabajo > i svg { width: 1.2em; height: 1.2em; }
.esc-trabajo b { display: block; } .esc-trabajo small { color: var(--a-gris); }

/* El detalle de la pantalla (un reporte, un recibo…), al lado y no encima */
.esc-flota { grid-column: 2; background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: 1em; box-shadow: 0 1px 2px rgba(10,26,20,.05); padding: 1em 1.05em; display: flex; flex-direction: column; gap: .6em;
  animation: escSube .7s .2s cubic-bezier(.2,.7,.2,1) both; }
.esc-flota__cab { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.esc-flota__cab b { font-family: var(--titulos); font-size: 1.05em; letter-spacing: -0.01em; }
.esc-flota small { font-size: .74em; color: var(--a-gris); }
.esc-renglon { display: flex; justify-content: space-between; gap: .6em; padding: .35em 0; border-top: 1px solid #EEF2EF; font-size: .8em; animation: escEntra .4s cubic-bezier(.2,.7,.2,1) both; }
.esc-renglon:nth-of-type(2) { animation-delay: .5s; } .esc-renglon:nth-of-type(3) { animation-delay: .65s; } .esc-renglon:nth-of-type(4) { animation-delay: .8s; } .esc-renglon:nth-of-type(5) { animation-delay: .95s; } .esc-renglon:nth-of-type(6) { animation-delay: 1.1s; }
.esc-renglon span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.esc-renglon.total { border-top: 2px solid var(--a-texto); font-size: .95em; }
.esc-renglon.total span:last-child { color: var(--a-verde); font-family: var(--titulos); font-size: 1.15em; }

/* Marcación con la cara (Asistencia) */
.esc-cara { position: relative; width: 52%; aspect-ratio: 1; align-self: center; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #CFE6DA 0 18%, transparent 19%), radial-gradient(ellipse 34% 28% at 50% 92%, #CFE6DA 0 99%, transparent 100%), #E9F2ED; box-shadow: 0 0 0 .3em #FFFFFF, 0 0 0 .5em #2ECC8A; }
.esc-cara::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(46,204,138,.55), transparent); animation: escEscanea 2.2s ease-in-out infinite; }

/* La factura que se lee (Facturas) */
.esc-papel { position: relative; flex: none; margin: 0 .2em; border-radius: .5em; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--a-borde); padding: .8em .8em; display: flex; flex-direction: column; gap: .4em; font-size: .62em; overflow: hidden; }
.esc-papel b { font-size: 1.15em; }
/* La factura impresa: renglones con texto, cifras alineadas y cortes punteados. */
.esc-papel__fila { display: flex; justify-content: space-between; gap: .8em; }
.esc-papel__fila > :last-child { font-variant-numeric: tabular-nums; }
.esc-papel__tenue { color: var(--a-gris); }
.esc-papel__corte { display: block; border-top: 1px dashed #CBD6D0; }
.esc-papel::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(46,204,138,.35), transparent); animation: escEscanea 2.6s ease-in-out infinite; }
.esc-lee { display: flex; flex-direction: column; gap: .3em; }
.esc-lee span { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding: .35em .5em; border-radius: .5em; background: #F1F7F3; font-size: .68em; animation: escEntra .4s cubic-bezier(.2,.7,.2,1) both; }
.esc-lee span:nth-child(1) { animation-delay: 1s; } .esc-lee span:nth-child(2) { animation-delay: 1.4s; } .esc-lee span:nth-child(3) { animation-delay: 1.8s; }
.esc-lee em { display: inline-flex; align-items: center; gap: .25em; font-style: normal; color: var(--a-verde); font-weight: 700; white-space: nowrap; }
.esc-lee em svg { width: 1.1em; height: 1.1em; stroke-width: 2.6; }

/* Hoja del PDF (Reportes) */
.esc-pdf { grid-column: 2; background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .6em; box-shadow: 0 1px 2px rgba(10,26,20,.05); padding: 1em; display: flex; flex-direction: column; gap: .5em; font-size: .7em;
  animation: escSube .7s .2s cubic-bezier(.2,.7,.2,1) both; }
.esc-pdf header { display: flex; align-items: center; justify-content: space-between; padding-bottom: .5em; border-bottom: 2px solid var(--a-verde); }
.esc-pdf__marca { display: inline-flex; align-items: center; gap: .35em; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.15em; color: var(--a-texto); }
.esc-pdf__marca img { width: 1.4em; height: 1.4em; }
.esc-pdf h5 { margin: 0; font-family: var(--titulos); font-size: 1.25em; line-height: 1.15; }
.esc-pdf .kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; }
.esc-pdf .kp span { padding: .35em; border-radius: .4em; background: #F4F7F5; text-align: center; } .esc-pdf .kp b { display: block; font-size: 1.3em; }
.esc-pdf .fo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; }
.esc-pdf .fo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .3em; }
.esc-pdf .tx { margin: 0; font-size: .82em; line-height: 1.35; color: var(--a-gris); }

@keyframes escSube { from { opacity: 0; transform: translateY(12px); } }
@keyframes escEntra { from { opacity: 0; transform: translateY(6px); } }
@keyframes escPop { from { opacity: 0; transform: scale(.85); } }
@keyframes escLlena { from { transform: scaleX(0); } }
@keyframes escVivo { 0% { box-shadow: 0 0 0 0 rgba(46,204,138,.6); } 70%, 100% { box-shadow: 0 0 0 .55em rgba(46,204,138,0); } }
@keyframes escFoto { 0%, 10% { opacity: 0; } 18%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes escElige { 0%, 15% { box-shadow: 0 0 0 0 rgba(37,99,235,.35); } 30% { box-shadow: 0 0 0 .4em rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 2px rgba(37,99,235,.15); } }
@keyframes escNuevo { 0%, 10% { opacity: 0; transform: scale(.8); } 20%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes escEscanea { 0% { top: -20%; } 100% { top: 100%; } }

/* Angosto: se apila; lo de oficina se recorta a lo esencial y el celular va entero. */
@container (max-width: 560px) {
  .esc__lienzo { aspect-ratio: auto; font-size: 11px; padding: 14px 12px 30px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .esc-ventana, .esc-flota, .esc-pdf, .esc-cel { animation: none; }
  .esc-ventana { max-height: 340px; }
  .esc-cel { width: 230px; height: 480px; align-self: center; }
  .esc--cel .esc-ventana { display: none; }
  .esc-app__nav, .esc-sub, .esc-ancho { display: none !important; }
  .esc-tiles { --n: 2 !important; }
  .esc-col2 { grid-template-columns: 1fr; }
  .esc-personas { grid-template-columns: 1fr; }
  .esc-pdf { align-self: center; width: 220px; }
  .esc-semana { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
}
/* Para tu cliente (4-nov): el Portal del cliente, la pantalla que el usuario de solo lectura ve al entrar
   (src/components/Portal/PortalCliente.jsx). La escena cuenta solo lo que el Portal ya muestra. */
.seccion--noche .eyebrow { color: var(--lima); }
.seccion--noche .bajada { color: #A9C1B8; }
.cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.cliente__texto { flex: 1 1 320px; display: flex; flex-direction: column; gap: 18px; }
.cliente__texto .titulo { max-width: 11em; }
.cliente__lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cliente__lista li { display: flex; gap: 14px; align-items: flex-start; }
.cliente__lista i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(46,204,138,.14); color: var(--lima); }
.cliente__lista svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cliente__lista span { color: #A9C1B8; font-size: 16px; }
.cliente__lista b { display: block; color: #ECF5F1; font-weight: 600; font-size: 17px; }
.cliente__nota { margin: 0; font-size: 14px; color: #7F9A90; }
.cliente__escena { flex: 1.6 1 560px; min-width: 0; }
/* Sin celular al lado, la ventana usa todo el ancho: la letra puede ser más grande que en las otras escenas. */
.esc--portal .esc__lienzo { grid-template-columns: minmax(0, 1fr); font-size: clamp(10px, 1.7cqw, 17px); }
.esc-portal__lectura { margin-left: auto; }
.esc-portal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; align-items: start; }
.esc-portal .esc-lista { padding-bottom: .8em; }
.esc-portal__cab { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .55em 0 .35em; }
.esc-portal__cab strong { font-family: var(--titulos); font-size: .95em; }
.esc-portal .esc-lista > .esc-portal__cab { border-top: 0; animation: none; }
.esc-portal .esc-lista > div:not(.esc-portal__cab) > span { min-width: 0; }
.esc-portal .esc-lista > div > i { flex: none; width: 2.1em; height: 2.1em; border-radius: .6em; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); }
.esc-portal .esc-lista > div > i.info { background: #E4EEFB; color: #1D5FB8; }
.esc-portal .esc-lista > div > i.ambar { background: #FDF1DC; color: #9A5B00; }
.esc-portal .esc-lista > div > i svg { width: 1.15em; height: 1.15em; }
.esc-portal__ir { justify-content: center; margin-top: .55em; }
.esc-portal__ir svg:last-child { margin-left: auto; }
/* Angosto: las tres tarjetas una debajo de otra, enteras (el tope de 340 px de las otras escenas cortaba Riesgos). */
@container (max-width: 560px) {
  .esc-portal { grid-template-columns: minmax(0, 1fr); }
  .esc--portal .esc-ventana { max-height: none; }
}
@media (max-width: 1199px) { .cliente__texto { flex-basis: 100%; } }
/* La prueba de un servicio (6-nov, «Pruebas de cada servicio»): el detalle de una fumigación con sus fotos y,
   debajo, el horario y «Cerrada desde» (src/utils/posicionCierre.js, la misma frase del detalle y del PDF). */
.esc--prueba .esc__lienzo { grid-template-columns: minmax(0, 1fr) 34%; font-size: clamp(9px, 1.55cqw, 15px); }
.esc-prueba__tabs { padding: 0 0 .45em; }
.esc-prueba__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }
.esc-sello { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5em; }
.esc-sello > span { display: flex; align-items: center; gap: .55em; padding: .55em .7em; background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .8em; animation: escEntra .5s .6s ease both; }
.esc-sello > span:nth-child(2) { animation-delay: .75s; }
.esc-sello i { flex: none; width: 2em; height: 2em; border-radius: .55em; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); }
.esc-sello i svg { width: 1.1em; height: 1.1em; }
.esc-sello small { display: block; font-size: .72em; color: var(--a-gris); }
.esc-sello b { display: block; font-size: .86em; line-height: 1.25; }
.esc-sello em { font-style: normal; font-weight: 400; color: var(--a-gris); }
.esc-pdf .kp--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esc-pdf .kp--4 b { font-size: 1.05em; }
.esc-pdf__lugar { display: flex; align-items: flex-start; gap: .35em; }
.esc-pdf__lugar svg { flex: none; width: 1.1em; height: 1.1em; color: var(--a-verde); }
@container (max-width: 560px) {
  .esc--prueba .esc-ventana { max-height: none; }
  .esc-sello { grid-template-columns: minmax(0, 1fr); }
}
/* El recorrido del día (6-nov): el repaso del GPS (GPSPlaybackModal) sobre las teselas del hero, con lo
   recorrido en verde y lo que falta en gris como en la app, y la sugerencia de orden de Planificar › Asignar
   (RecorridoBandeja + SugerenciasRutas), que habla en MINUTOS como la app. El mapa: scripts/landing-repaso-mapa.mjs. */
.recorrido { display: flex; flex-direction: column; gap: 36px; }
.recorrido__texto { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.recorrido__escenas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 36px); align-items: start; }
@media (max-width: 1023px) { .recorrido__escenas { grid-template-columns: minmax(0, 1fr); } }
.recorrido__item { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.recorrido__item figcaption { font-size: 14px; color: var(--gris); }
.esc--uno .esc__lienzo { grid-template-columns: minmax(0, 1fr); font-size: clamp(10px, 2.3cqw, 15px); }
.esc-repaso__cab { display: flex; align-items: center; gap: .7em; padding: .75em 1em; border-bottom: 1px solid var(--a-borde); }
.esc-repaso__cab i { flex: none; width: 2.3em; height: 2.3em; border-radius: .7em; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); }
.esc-repaso__cab i svg { width: 1.2em; height: 1.2em; }
.esc-repaso__cab b { display: block; font-family: var(--titulos); font-size: 1.1em; letter-spacing: -0.01em; }
.esc-repaso__cab small { display: block; font-size: .76em; color: var(--a-gris); }
.esc-repaso__mapa { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #F2F3EF; }
.esc-repaso__mapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.esc-repaso__camion { position: absolute; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border-radius: 50%; background: #22c55e; border: .22em solid #FFFFFF; animation: escVivo 2s ease-out infinite; }
.esc-repaso__creditos { position: absolute; right: .5em; bottom: .4em; padding: .1em .45em; border-radius: .3em; background: rgba(255,255,255,.8); color: #4B5A51; font-size: .62em; }
.esc-repaso__controles { display: flex; flex-direction: column; gap: .6em; padding: .7em 1em .8em; border-top: 1px solid var(--a-borde); }
.esc-repaso__linea { display: flex; align-items: center; gap: .7em; font-size: .78em; color: var(--a-gris); }
.esc-repaso__barra { position: relative; flex: 1; height: .45em; border-radius: 999px; background: #E7EEEA; overflow: hidden; }
.esc-repaso__barra i { position: absolute; inset: 0 auto 0 0; width: 64%; border-radius: inherit; background: #22c55e; transform-origin: left; animation: escLlena 1.6s .3s cubic-bezier(.2,.7,.2,1) both; }
.esc-repaso__botones { display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; }
.esc-repaso__dato { font-size: .78em; color: var(--a-gris); white-space: nowrap; }
.esc-repaso__dato b { color: var(--a-texto); font-size: 1.15em; }
.esc-repaso__mando { display: flex; align-items: center; gap: .45em; }
.esc-repaso__mando i { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: #F1F4F2; color: var(--a-texto); }
.esc-repaso__mando i svg { width: 1em; height: 1em; }
.esc-repaso__mando i.play { width: 2.6em; height: 2.6em; background: var(--a-verde); color: #FFFFFF; }
.esc-repaso__mando em { padding: .3em .6em; border-radius: 999px; background: #F1F4F2; font-style: normal; font-weight: 700; font-size: .8em; }
.esc-sale { display: flex; align-items: center; gap: .45em; margin: 0; font-size: .8em; color: var(--a-gris); }
.esc-sale svg { flex: none; width: 1.2em; height: 1.2em; }
.esc-sale b { color: var(--a-texto); }
.esc-bandeja { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--a-borde); border-radius: .9em; overflow: hidden; }
.esc-bandeja li { display: flex; align-items: center; gap: .65em; padding: .55em .8em; border-top: 1px solid #EEF2EF; animation: escEntra .45s cubic-bezier(.2,.7,.2,1) both; }
.esc-bandeja li:first-child { border-top: 0; }
.esc-bandeja li:nth-child(2) { animation-delay: .1s; } .esc-bandeja li:nth-child(3) { animation-delay: .2s; } .esc-bandeja li:nth-child(4) { animation-delay: .3s; }
.esc-bandeja em { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; background: var(--a-claro); color: var(--a-verde); font-style: normal; font-weight: 700; font-size: .85em; }
.esc-bandeja b { display: block; font-size: .88em; }
.esc-bandeja small { display: block; font-size: .72em; color: var(--a-gris); }
.esc-bandeja .esc-bandeja__vert { font-size: .76em; color: var(--a-gris); background: #F7F9F7; }
.esc-sug { display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; font-size: .8em; color: var(--a-gris); }
.esc-sug .esc-boton { font-size: .95em; }
.esc-sug__chips { display: flex; flex-wrap: wrap; gap: .4em; }
.esc-sug__chips small { color: var(--a-gris); }
.esc-toast { align-self: center; display: inline-flex; align-items: center; gap: .45em; max-width: 100%; padding: .55em .9em; border-radius: .7em; background: #16201A; color: #FFFFFF; font-size: .8em; font-weight: 600; box-shadow: 0 6px 20px rgba(10,26,20,.18); animation: escEntra .5s 1.2s ease both; }
.esc-toast svg { flex: none; width: 1.1em; height: 1.1em; color: #4ADE80; stroke-width: 2.6; }
@container (max-width: 560px) { .esc--uno .esc-ventana { max-height: none; } }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* Solo para el lector de pantalla: las comas y la «y» del H1 (no se ven, se leen; Google lo permite para accesibilidad).
   En línea y con letra 0, no con position: absolute: así Chromium no mete un espacio antes de la coma en el nombre del
   H1 («recolección , limpieza»), y no cambia el ancho de la palabra que gira (medido). */
.solo-lector { font-size: 0; }

/* ============================================
   Pie: los servicios y los datos de la empresa (7-nov). En TODAS las páginas.
   ============================================ */
.pie__servicios { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.pie__empresa { flex-basis: 100%; margin: 0; color: #8FA89F; font-size: 13px; }

/* ============================================
   Páginas de servicio (/recoleccion, /fumigacion…, 7-nov). Texto, sin capturas y sin JavaScript: lo que dicen es lo
   que la app hace hoy (docs/paginas-servicio.md). Usan la barra, los botones, las preguntas y el pie de la portada.
   ============================================ */
.servicio { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 96px); }
.servicio > .contenedor { max-width: 960px; }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 clamp(24px, 3vw, 36px); padding: 0; list-style: none; font-size: 14px; color: var(--gris); }
.migas li + li::before { content: "›"; content: "›" / ""; margin-right: 8px; color: var(--borde2); }
.migas a { color: var(--texto2); }
.servicio__cabeza { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--borde); }
.servicio__cabeza h1 { margin: 0; max-width: 17em; font-family: var(--titulos); font-weight: 700; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.servicio__cabeza .bajada { max-width: 40em; }
.servicio__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.servicio__bloque { padding: clamp(32px, 5vw, 52px) 0; border-bottom: 1px solid var(--borde); }
.servicio__bloque:has(+ .servicio__cierre) { border-bottom: 0; }
.servicio__bloque h2 { margin: 0 0 14px; font-family: var(--titulos); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.025em; }
.servicio__bloque > p { margin: 0 0 14px; max-width: 44em; color: var(--texto2); }
.servicio__lista { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px 32px; }
@media (min-width: 760px) { .servicio__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.servicio__lista li { position: relative; padding-left: 30px; color: var(--texto2); }
.servicio__lista li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 12px; height: 6px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.servicio__lista b { color: var(--tinta); font-weight: 600; }
.servicio__nota { margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--suave); border: 1px solid var(--borde); color: var(--texto2); font-size: 15px; max-width: 46em; }
.servicio__tabla { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.servicio__tabla th, .servicio__tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.servicio__tabla thead th { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); background: var(--suave); }
.servicio__tabla td { color: var(--texto2); }
.servicio__tabla th[scope="row"] { color: var(--tinta); font-weight: 600; }
.servicio__desliza { overflow-x: auto; margin-bottom: 14px; }
@media (max-width: 560px) { .servicio__tabla { font-size: 14px; } .servicio__tabla th, .servicio__tabla td { padding: 8px; } }
.servicio__junto { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@media (min-width: 760px) { .servicio__junto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.servicio__junto li { padding: 16px 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--borde); color: var(--texto2); font-size: 15px; }
.servicio__junto a { display: block; margin-bottom: 4px; font-family: var(--titulos); font-weight: 700; font-size: 17px; }
.servicio .preguntas__lista { margin-top: 6px; }
.servicio__cierre { margin-top: clamp(40px, 6vw, 64px); padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--noche); color: #ECF5F1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.servicio__cierre h2 { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.03em; }
.servicio__cierre p { margin: 8px 0 0; color: #A9C1B8; }
.servicio__cierre .servicio__acciones { margin: 0; }
.servicio__cierre .boton--claro { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.servicio__cierre .boton--claro:hover { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: #FFFFFF; }
/* Lo que solo oye un lector de pantalla (7-nov): el anuncio corto de la calculadora. Con su propia clase: `.solo-lector`
   (font-size: 0) es la de la puntuación del H1 y no se puede tocar. */
.calc-anuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Sin JavaScript la calculadora no hace la cuenta: lo dice arriba de ella. */
.calc-sin-js { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--suave); font-size: 15px; color: var(--tinta); }
/* Qué es un punto de servicio (7-nov): la ayuda debajo de la barra, con el ejemplo. */
.dato__ayuda { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--texto2); }
.dato__ayuda span { display: block; margin-top: 4px; color: var(--verde); }
/* La cuenta a la vista: cada término entero en su renglón, la línea se parte entre términos. */
.cuenta { margin: 0; font-size: 14px; line-height: 1.6; color: #CFE0D8; font-variant-numeric: tabular-nums; }
.cuenta span { white-space: nowrap; }
.cuenta span:last-child { color: #FFFFFF; font-weight: 600; }
/* La barra del plan en el teléfono: sobre el teclado (--teclado) o, si taparía el campo, arriba (--arriba). */
.calc-res { scroll-margin-top: 96px; }
.calc-barra { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--teclado, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 16px; background: var(--tinta); color: #FFFFFF; text-decoration: none; font-size: 15px; box-shadow: 0 10px 28px rgba(6, 20, 14, .28); animation: calcBarra .22s ease-out both; }
.calc-barra.arriba { bottom: auto; top: var(--arriba, 92px); }
.calc-barra[hidden] { display: none; }
.calc-barra small { display: block; font-size: 12px; color: #A9C1B8; }
.calc-barra b { font-family: var(--titulos); font-weight: 700; }
.calc-barra__ir { flex: none; color: var(--lima); font-weight: 600; }
.calc-barra__uo { white-space: nowrap; }
/* Angosta: «Ver» a la vista; «el resultado» sigue en el nombre del enlace para el lector. */
@media (max-width: 380px) { .calc-barra__mas { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.calc-barra:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
@keyframes calcBarra { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@media (prefers-reduced-motion: reduce) { .calc-barra { animation: none; } }
@media (min-width: 901px) { .calc-barra { display: none !important; } }