/* ==========================================================================
   Embudo /cotizar con el sistema «Plano de taller TMG» (especificacion UX/UI
   MEXIMOLD, oct-2026: PUB-01, 03, 04, 05, 09 a 14). Lo pinta js/cotizar.js;
   la pantalla del stand reutiliza el resultado.

   - Usa los tokens de tmg-tokens.css si estan en la pagina; si no, cada
     alias (--rx-*) trae su respaldo con el mismo color.
   - Rojo lleno: solo la accion que avanza (un boton por vista) y la barra
     inclinada del Rotulo. La seleccion va en negro.
   - Rojo, verde y amarillo del mapa DFM son datos: viven solo dentro de la
     camara de inspeccion y su leyenda. El veredicto nunca es rojo ni verde.
   - Radio 0 en lo tecnico (rotulo, camara), 4 px en controles, 8 px en
     tarjetas. Bordes antes que sombras.
   Este archivo se sirve en una pagina publica: sin frases de venta.
   ========================================================================== */

:root {
  --rx-negro: var(--tmg-negro, #141414);
  --rx-tinta: var(--texto, #1f1f1d);
  --rx-tinta-2: var(--texto-2, #4a4a46);
  --rx-tenue: var(--texto-tenue, #63635e);
  --rx-borde: var(--borde, #d9d9d4);
  --rx-borde-control: var(--borde-control, #8a8a84);
  --rx-superficie: var(--superficie, #ffffff);
  --rx-superficie-2: var(--superficie-2, #ecece9);
  --rx-accion: var(--accion, #b01d28);
  --rx-accion-hover: var(--accion-hover, #94161e);
  --rx-foco: var(--foco, #94161e);
  --rx-aviso: var(--aviso, #7a4f0e);
  --rx-aviso-fondo: var(--aviso-fondo, #fbf0dc);
  --rx-peligro: var(--peligro, #8f1d24);
  --rx-peligro-fondo: var(--peligro-fondo, #fbe4e4);
  --rx-rotulo-fondo: var(--rotulo-fondo, #141414);
  --rx-rotulo-texto: var(--rotulo-texto, #ffffff);
  --rx-rotulo-etiqueta: var(--rotulo-etiqueta, #a8a8a2);
  --rx-rotulo-regla: var(--rotulo-regla, rgb(255 255 255 / .16));
  --rx-rotulo-barra: var(--rotulo-barra, #b01d28);
  --rx-visor-fondo: var(--visor-fondo, #1c1c1e);
  --rx-visor-texto: var(--visor-texto, #d8d8d3);
  --rx-visor-reticula: var(--visor-reticula, rgb(255 255 255 / .06));
  --rx-display: var(--fuente-display, "Barlow Condensed", "Arial Narrow", system-ui, sans-serif);
  --rx-texto: var(--fuente-texto, "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif);
  --rx-sombra-flota: var(--sombra-2, 0 10px 28px rgb(20 20 20 / .2));
  --rx-mov: var(--mov-base, 200ms);
}

.solo-lector {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tmg-num { font-variant-numeric: tabular-nums lining-nums; }

/* Esqueleto de #vista mientras bajan los modulos (cotizar.html; auditoria
   del front publico, oct-2026): cotizar.js lo sustituye con el primer paso. */
.esqueleto { display: grid; gap: 12px; }
.esqueleto-linea { height: 18px; max-width: 34em; border-radius: 4px; background: var(--rx-superficie-2); }
.esqueleto-titulo { height: 34px; max-width: 9em; margin-bottom: 4px; }
.esqueleto-corta { max-width: 20em; }
.esqueleto-panel {
  height: 320px; margin-top: 12px; border-radius: 8px;
  border: 1px solid var(--rx-borde); background: var(--superficie, #fff);
}
@media (prefers-reduced-motion: no-preference) {
  .esqueleto > [aria-hidden] { animation: esqueleto-pulso 1.4s ease-in-out infinite; }
}
@keyframes esqueleto-pulso { 50% { opacity: .55; } }

/* SEO (15-oct-2026): el H1 de /cotizar es el rotulo de la herramienta, con el
   estilo kicker; el titulo grande sigue siendo el H2 de cada paso. La tablet
   del stand no ve el H1 ni los enlaces del pie (su pantalla trae su propio H1). */
.cotizador-h1 { margin: 0 0 14px; }
:root.modo-feria .cotizador-h1, :root.modo-feria .pie-enlaces, :root.modo-feria .paso1-estatico { display: none; }
/* Con el encabezado del paso 1 ya escrito, las lineas y el panel gris del
   esqueleto no se pintan: cuando llega la fuente, los chips del encabezado
   pasan de dos renglones a uno y el panel de 320 px saltaba (CLS 0.14 en
   celular con 4G; el chip que sube de renglon recorre casi 200 px de lado y
   ese recorrido multiplica todo lo que se mueve en ese cuadro). En su lugar,
   donde monta la zona de carga, va una sola linea visible: la barra y
   «Cargando el cotizador…» (antes solo la oia el lector de pantalla y la
   pagina parecia terminada, sin boton de subir). El contenedor no tiene caja
   (display: contents) y la linea mide lo que su texto: se mueve con los chips
   pero suma poco (CLS de 0.02 en celular). Si a los 8 s el asistente no
   llego (red que se corta, modulo que falla), aparece la salida: recargar o
   WhatsApp; oculta con visibility no cuenta para el CLS. Solo CSS: sin script
   ni hash nuevo. La tablet del stand sigue con su esqueleto de siempre. */
.esqueleto-ayuda { display: none; }
:root:not(.modo-feria) .paso1-estatico ~ .esqueleto > [aria-hidden] { display: none; }
:root:not(.modo-feria) .paso1-estatico ~ .esqueleto { display: contents; }
:root:not(.modo-feria) .paso1-estatico ~ .esqueleto > .esqueleto-estado {
  position: static !important; width: fit-content; height: auto; margin: 0; overflow: visible; clip: auto;
  white-space: normal; display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--rx-tinta-2);
}
/* Barra de avance (adorno): quieta si se pidio menos movimiento. */
:root:not(.modo-feria) .paso1-estatico ~ .esqueleto > .esqueleto-estado::before {
  content: ""; flex: none; width: 48px; height: 3px; border-radius: 2px; background: var(--rx-borde);
}
:root:not(.modo-feria) .paso1-estatico ~ .esqueleto > .esqueleto-ayuda {
  display: block; max-width: 44em; margin: 6px 0 0; font-size: 14px; color: var(--rx-tenue);
  visibility: hidden; animation: esqueleto-ayuda 0s 8s forwards;
}
@keyframes esqueleto-ayuda { to { visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.modo-feria) .paso1-estatico ~ .esqueleto > .esqueleto-estado::before {
    background: linear-gradient(90deg, var(--rx-borde) 0 35%, var(--rx-negro) 35% 65%, var(--rx-borde) 65%) 0 0 / 300% 100%;
    animation: esqueleto-barra 1.2s linear infinite;
  }
}
@keyframes esqueleto-barra { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Mientras carga y en el paso 1, #vista ocupa al menos lo que queda de la
   pantalla: el pie nace abajo del pliegue y ya no salta al montar el paso
   (CLS 0.13-0.17, oct-2026). Desde el principio con el ancho del paso 1, para
   que la barra de pasos no brinque de 760 a 1120 px. La tablet no cambia.
   --cotizar-arriba: lo que hay arriba de #vista (nav, margen, H1 y barra). */
:root:not(.modo-feria) .asistente:not([data-paso]) { max-width: 1120px; }
:root:not(.modo-feria) .asistente:is(:not([data-paso]), [data-paso="1"]) #vista {
  min-height: calc(100vh - var(--cotizar-arriba, 200px));
  min-height: calc(100svh - var(--cotizar-arriba, 200px));
}

/* ---------- Asistente: ancho por paso, titulos y controles ---------- */
.asistente[data-paso="1"] { max-width: 1120px; }
.asistente[data-paso="resultado"] { max-width: 1240px; padding-top: 20px; }
.asistente[data-paso="resultado"] .pasos-barra { margin-bottom: 18px; }
/* La barra de pasos no brinca de ancho entre pasos (Ronda A de Meximold, #13):
   720 px, los mismos de los pasos 2 y 3. Alineada a la izquierda (revision
   visual de la Ronda A): en el paso 1 y en el resultado arranca en el mismo
   borde que el titulo y la cabecera; en los pasos 2 y 3 el contenido ya mide
   720 y se ve igual que centrada. */
.asistente .pasos-barra { max-width: 720px; margin-inline: 0; }
.asistente .paso-titulo {
  font-family: var(--rx-display); font-weight: 600; letter-spacing: 0; line-height: 1.05; color: var(--rx-negro);
}
.asistente [tabindex="-1"]:focus { outline: none; }
.asistente .panel { border-radius: 8px; box-shadow: none; border-color: var(--rx-borde); }
.asistente .btn { border-radius: 4px; }
.asistente .btn-cta { box-shadow: none; background: var(--rx-accion); }
.asistente .btn-cta:hover { transform: none; background: var(--rx-accion-hover); }
.asistente .btn-sec { border-color: var(--rx-borde-control); color: var(--rx-negro); }
.asistente .btn-sec:hover { border-color: var(--rx-negro); }
.asistente .btn:disabled { opacity: .45; }
.acciones-paso .btn { white-space: nowrap; }
.btn-linea { background: transparent; color: var(--rx-negro); border: 1.5px solid var(--rx-negro); }
.btn-linea:hover { background: var(--rx-superficie-2); }
/* La pildora es solo del boton flotante de WhatsApp (tmg-tokens.css,
   --radio-pildora); dentro del resultado el de WhatsApp es un boton mas
   (Ronda A de Meximold, #22). */
.asistente .btn-wa { border-radius: var(--radio-1, 4px); gap: 8px; }
.asistente .btn svg { flex: none; }
.asistente .btn-dejanos { box-shadow: none; }

/* Foco de marca: 3 px. Sobre el rojo, anillo blanco y luego el rojo. */
.asistente :is(button, a, select, input, textarea, summary, .opcion):focus-visible,
.espera-tarjeta :is(button, a):focus-visible, .barra-inversion a:focus-visible {
  outline: var(--foco-ancho, 3px) solid var(--rx-foco); outline-offset: var(--foco-separacion, 2px);
}
.asistente .btn-cta:focus-visible { box-shadow: 0 0 0 2px #fff; }
/* Sobre el grafito de la camara y el negro de la barra inferior el anillo va
   en blanco: el rojo #94161e da menos de 3:1 ahi. Con .asistente delante y el
   :is() de controles para ganarle (0,4,0) a la regla de arriba (0,3,0), que
   antes lo dejaba en rojo. */
.camara :focus-visible, .barra-inversion a:focus-visible,
.asistente :is(.camara, .visor-mini, .barra-inversion) :is(button, a, summary, [tabindex]):focus-visible {
  outline-color: #fff;
}

/* La seleccion va en negro (reglas del rojo, 3). */
.asistente .opcion { border-radius: 4px; border-color: var(--rx-borde-control); color: var(--rx-tinta); }
.asistente .opcion:hover { border-color: var(--rx-negro); }
.asistente .opcion.elegida { border-color: var(--rx-negro); background: var(--rx-negro); color: #fff; }
.asistente .campo input, .asistente .campo select, .asistente .campo textarea { border-color: var(--rx-borde-control); border-radius: 4px; }
.asistente .campo input:focus, .asistente .campo select:focus, .asistente .campo textarea:focus { border-color: var(--rx-negro); }
/* El campo que falta, en rojo (revision oct-2026): el de landing.css (0,2,0)
   perdia contra las dos reglas de arriba (0,2,1 y, con foco, 0,3,1) y solo
   quedaba un halo casi invisible. Va despues para ganar el empate con :focus. */
.asistente .campo :is(input, select, textarea)[aria-invalid="true"],
.asistente .campo .opcion[aria-invalid="true"]:not(.elegida) { border-color: var(--rx-peligro); }

/* Barra de pasos en el celular: solo el paso actual, "Paso 2 de 4 · Tu
   proyecto", a 13 px (antes 10.5 px los cuatro nombres). */
.pasos-barra { counter-reset: paso; }
.pasos-barra .tramo { counter-increment: paso; }
@media (max-width: 560px) {
  .pasos-barra { position: relative; padding-bottom: 24px; }
  .pasos-barra .tramo-nombre { display: none; }
  .pasos-barra .tramo.actual .tramo-nombre {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    font-size: 13px; overflow: visible; color: var(--rx-negro);
  }
  .pasos-barra .tramo.actual .tramo-nombre::before { content: "Paso " counter(paso) " de 4 · "; font-weight: 500; color: var(--rx-tinta-2); }
}

/* ---------- Esperas con etapas reales (PUB-05) ---------- */
.etapas { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rx-borde); }
.etapa {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--rx-borde); font-size: 15px; color: var(--rx-tenue);
}
.etapa-marca { position: relative; width: 18px; height: 18px; border: 1.5px solid var(--rx-borde-control); border-radius: 50%; }
.etapa[data-estado="actual"] { color: var(--rx-tinta); font-weight: 600; }
.etapa[data-estado="actual"] .etapa-marca { border-color: var(--rx-negro); box-shadow: inset 0 0 0 3px var(--rx-superficie), inset 0 0 0 9px var(--rx-negro); }
.etapa[data-estado="hecha"] { color: var(--rx-tinta); }
.etapa[data-estado="hecha"] .etapa-marca { background: var(--rx-negro); border-color: var(--rx-negro); }
.etapa[data-estado="hecha"] .etapa-marca::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.etapa-dato { font-size: 14px; color: var(--rx-tinta-2); text-align: right; font-weight: 500; }
#espera-pieza:empty { display: none; }
#espera-pieza { margin-top: 4px; }

.espera-capa {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: rgb(20 20 20 / .55);
}
.espera-tarjeta {
  width: min(440px, 100%); background: var(--rx-superficie); border-radius: 8px;
  padding: 24px 24px 16px; box-shadow: var(--rx-sombra-flota); outline: none;
}
.espera-tarjeta h2 { font: 600 25px/1.1 var(--rx-display); margin: 0; color: var(--rx-negro); letter-spacing: 0; }

.panel.calculando { text-align: left; max-width: 560px; margin: 12px auto 0; padding: 28px 28px 24px; }
.panel.calculando .paso-titulo { font-size: 31px; margin: 0; }
.panel.calculando .sutil { font-size: 14px; margin: 12px 0 0; }
/* 429 en la red del recinto (PUB-07): el motivo y la cuenta regresiva. */
.espera-red { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--rx-negro); background: var(--rx-superficie-2); font-size: 15px; line-height: 1.45; color: var(--rx-tinta); }
.espera-red:empty { display: none; }
.espera-red-cuenta { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Paso 1 (PUB-09): subir es la accion principal ---------- */
.requisitos { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: -14px 0 18px; }
.requisitos li {
  font: 600 12.5px/1 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-tinta-2);
  border: 1px solid var(--rx-borde-control); border-radius: 4px; padding: 6px 9px; background: var(--rx-superficie);
}
.panel.paso1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
@media (min-width: 1024px) {
  .panel.paso1 { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
  .paso1-recibes { border-left: 1px solid var(--rx-borde); padding-left: 28px; }
}
@media (max-width: 1023px) {
  .paso1-recibes { border-top: 1px solid var(--rx-borde); padding-top: 18px; }
}
.paso1 .zona-soltar {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1.5px dashed var(--rx-borde-control); border-radius: 8px; background: var(--rx-superficie);
  padding: 28px 20px 22px;
}
.paso1 .zona-soltar:hover, .paso1 .zona-soltar.sobre {
  border-color: var(--rx-negro); background: #fafaf8; box-shadow: none;
}
.zona-icono { color: var(--rx-tinta-2); }
.btn-subir { min-height: 52px; padding: 14px 30px; font-size: 17px; }
.zona-o { margin: 0; font-size: 14px; color: var(--rx-tenue); }
.acepta { margin: 6px 0 0; font-size: 14px; color: var(--rx-tinta-2); text-align: center; }
.paso1 .zona-soltar .formatos { font: 600 12px/1.2 var(--rx-display); letter-spacing: .1em; color: var(--rx-tenue); }
.solo-tactil { display: none; }
@media (pointer: coarse) {
  .solo-tactil { display: inline; }
  .solo-raton { display: none; }
}
.formatos-detalle { margin: 10px 0 0; padding: 0 16px; border-radius: 8px; border-color: var(--rx-borde); }
.formatos-detalle summary { font-size: 14.5px; padding: 11px 0; }
.formatos-detalle p { font-size: 14px; padding-bottom: 10px; }
.paso1 .sello-nda { justify-content: flex-start; margin-top: 12px; font-size: 13px; color: var(--rx-tenue); }
.paso1 .acciones-paso { margin-top: 16px; align-items: center; }

.recibes-titulo, .chequeos-titulo, .res-etiqueta, .acordeon-subtitulo {
  font: 600 12px/1.25 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-tinta-2); margin: 0;
}
.recibes { list-style: none; padding: 0; margin: 12px 0 0; counter-reset: recibe; }
.recibes > li { counter-increment: recibe; position: relative; padding-left: 36px; margin-bottom: 16px; font-size: 14.5px; color: var(--rx-tinta-2); line-height: 1.45; }
.recibes > li::before {
  content: counter(recibe); position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  border: 1.5px solid var(--rx-negro); font: 600 14px/21px var(--rx-display); text-align: center; color: var(--rx-negro);
}
.recibes b { display: block; color: var(--rx-tinta); font-weight: 600; font-size: 15.5px; }
.recibes-chequeos { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.recibes-chequeos li {
  font: 600 12px/1 var(--rx-display); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 7px; background: var(--rx-superficie-2); color: var(--rx-tinta);
}
.paso1-recibes .nota-alcance { margin: 4px 0 0; border-left-color: var(--rx-negro); font-size: 13.5px; padding: 10px 12px; }
.paso1-recibes .nota-alcance a { color: var(--rx-foco); }

/* Lo que se midio de cada archivo. */
.archivo-linea { margin-top: 14px; font-size: 15px; line-height: 1.45; }
.archivo-marca {
  display: inline-block; font: 600 12px/1 var(--rx-display); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 6px; margin-right: 6px; border: 1px solid var(--rx-negro); color: var(--rx-negro); vertical-align: 1px;
}
.archivo-marca[data-tipo="ok"] { background: var(--rx-negro); color: #fff; }
.archivo-marca[data-tipo="aviso"], .archivo-marca[data-tipo="aprox"] { border-color: var(--rx-aviso); color: var(--rx-aviso); background: var(--rx-aviso-fondo); }
.asistente .medidas { gap: 6px; margin-top: 10px; }
.asistente .medida { background: var(--rx-superficie-2); color: var(--rx-tinta); border-radius: 4px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.asistente .aviso-archivo { border-radius: 4px; background: var(--rx-aviso-fondo); color: var(--rx-aviso); }
.fila-visor { margin-top: 10px; }
.fila-visor .sutil { font-size: 13px; }
.fila-visor-botones { display: flex; gap: 8px; flex-wrap: wrap; }
/* Mientras sube, los botones no hacen nada todavia: el atributo hidden manda
   sobre el display:flex de arriba. */
.fila-visor-botones[hidden] { display: none; }
.fila-visor .btn-mini { min-height: 40px; padding: 8px 14px; }

/* Celular sin archivo: "Déjanos tus datos" es la ruta principal y va arriba;
   subir queda en contorno (un solo rojo lleno). */
@media (max-width: 620px) {
  .paso1-carga:has(> #acciones-pieza .btn-dejanos) { display: flex; flex-direction: column; }
  .paso1-carga:has(> #acciones-pieza .btn-dejanos) > #acciones-pieza { order: -1; margin: 0 0 18px; }
  .paso1:has(.btn-dejanos) .btn-subir { background: transparent; color: var(--rx-negro); border: 1.5px solid var(--rx-negro); }
  .paso1 .acciones-paso .btn { white-space: normal; }
  /* Texto blanco sobre el rojo (revision oct-2026): .asistente .btn-sec (0,2,0)
     le ganaba al blanco de landing.css (0,1,0) y quedaba casi negro, 2.68:1. */
  .asistente .btn-dejanos { color: #fff; }
  /* Ronda A de Meximold (#14): primero la explicacion y luego el boton (el
     column-reverse de landing.css lo ponia al reves), y "Continuar →" a lo
     ancho, como en los pasos 2 y 3. */
  #acciones-pieza { flex-direction: column; align-items: stretch; gap: 10px; }
  #acciones-pieza > span:empty { display: none; }
  #acciones-pieza .btn { width: 100%; }
  #acciones-pieza .nota-sin-3d { max-width: none; font-size: 14px; }
  /* Un solo ritmo entre campos (#16): el gap de .fila-2 se sumaba al margen
     de .campo al apilarse (34 px contra 18 px). */
  .asistente .fila-2 { row-gap: 0; }
}

/* ---------- Camara de inspeccion (PUB-02/PUB-03/PUB-14) ----------
   El marco es grafito; la leyenda va en su franja de abajo, nunca encima
   de la pieza. El fondo del lienzo lo pone el visor. */
.camara { position: relative; margin: 0; background: var(--rx-visor-fondo); border-radius: 0; overflow: hidden; min-width: 0;
  container: camara / inline-size; }
/* La reticula de 28 px y las crucetas van ENCIMA del lienzo y las dibuja
   tmg-embudo.css (.visor-mini::after); aqui solo el fondo mientras carga. */
/* min-height 0: el alto lo fija cotizar.js (data-alto y height en linea,
   el mismo con que dibuja el visor). El min-height de .visor-mini y
   .visor-principal en tmg-embudo.css estiraba la caja y el lienzo quedaba
   corto, con una franja vacia abajo (60 px en el celular). */
.asistente .camara .camara-visor, .camara .camara-visor {
  margin: 0; border: 0; border-radius: 0; min-height: 0;
  background-color: var(--rx-visor-fondo);
}
.camara .visor-cargando { color: var(--rx-visor-texto); }
/* Eje y cotas por dentro de las crucetas de registro (8 a 21 px de cada
   esquina) y por encima de la reticula (z-index 1 en tmg-embudo.css). */
.camara-eje, .camara-cotas {
  position: absolute; top: 12px; z-index: 3; pointer-events: none;
  font: 600 12px/1 var(--rx-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rx-visor-texto); background: rgb(20 20 20 / .72); padding: 5px 8px;
}
.camara-eje { left: 28px; }
.camara-cotas { top: auto; bottom: 12px; right: 28px; letter-spacing: .06em; }
.camara-eje[hidden], .camara-cotas[hidden] { display: none; }
/* El momento orquestado: una linea roja barre la pieza UNA vez (1.2 s).
   Sus keyframes no se llaman como los de .visor-barrido (tmg-embudo.css,
   viewer3d.barrer()): con el mismo nombre, esta hoja pisaba los suyos. */
.camara-barrido {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; pointer-events: none; opacity: 0;
  background: var(--rx-accion); box-shadow: 0 0 14px 2px rgb(176 29 40 / .55);
}
.camara.escaneando .camara-barrido { animation: tmg-barrido-linea 1.2s cubic-bezier(.45, 0, .2, 1) 1 both; }
@keyframes tmg-barrido-linea {
  0% { top: 0; opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 2px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .camara-barrido { display: none; }
}

/* position: static a proposito: tmg-embudo.css pone la franja en relative y
   los mandos (absolute) quedaban encima de la leyenda en vez de en la camara. */
.visor-leyenda { position: static; display: block; background: var(--rx-visor-fondo); color: var(--rx-visor-texto); padding: 0 12px; }
.visor-leyenda:empty { display: none; }
.visor-leyenda .mapa-salida { margin: 0; padding: 10px 0 12px; }
.visor-leyenda .mapa-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: #f2f2ef; font-size: 13.5px; }
.visor-leyenda .mapa-leyenda li {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; white-space: nowrap;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16);
}
.visor-leyenda .mapa-leyenda b { font-weight: 600; font-variant-numeric: tabular-nums; }
.visor-leyenda .mapa-color { width: 11px; height: 11px; border-radius: 2px; border: 0; }
/* Los mandos, arriba a la derecha del lienzo (sobre la camara), por dentro
   de las crucetas. En una camara muy angosta bajan a la franja (abajo). */
.visor-leyenda .mapa-botones { position: absolute; top: 12px; right: 26px; z-index: 3; display: flex; gap: 6px; margin: 0; }
.visor-leyenda .camara-mando { background: rgb(20 20 20 / .78); }
.camara-mando {
  min-height: 40px; padding: 0 12px; cursor: pointer; white-space: nowrap;
  background: transparent; color: #f2f2ef; border: 1px solid rgb(255 255 255 / .4); border-radius: 4px;
  font: 600 14px var(--rx-texto);
}
.camara-mando:hover { border-color: #fff; }
.visor-leyenda .camara-mando[aria-pressed="true"] { background: #f2f2ef; color: var(--rx-negro); border-color: #f2f2ef; }
.visor-leyenda .mapa-texto { margin: 0; padding: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--rx-visor-texto); }
.visor-leyenda > .mapa-texto { padding: 10px 0 12px; }
@media (max-width: 560px) {
  .visor-leyenda { padding: 0 10px; }
  .visor-leyenda .mapa-salida { padding: 8px 0 10px; }
  .visor-leyenda .mapa-texto { font-size: 12px; line-height: 1.4; padding-top: 6px; }
  .camara-eje, .camara-cotas { font-size: 12px; padding: 4px 6px; }
}
/* Camara angosta (celular, o junto al veredicto en escritorio): las tres
   etiquetas en un renglon, el nombre arriba y el % abajo. */
@container camara (max-width: 560px) {
  .visor-leyenda .mapa-leyenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 12px; gap: 4px; }
  .visor-leyenda .mapa-leyenda li {
    display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: start; gap: 2px 5px;
    padding: 5px 6px; white-space: normal; line-height: 1.25;
  }
  .visor-leyenda .mapa-leyenda li .mapa-color { margin-top: 3px; width: 10px; height: 10px; }
  .visor-leyenda .mapa-leyenda b { grid-column: 2; font-size: 13px; }
}
/* Camara angosta (celular, o junto al veredicto en tablet y escritorio):
   arriba no caben el eje (28 + 86 px), la flecha de desmoldeo (al centro) y
   los mandos (~200 px); los mandos bajan a la franja, debajo de la leyenda
   (asi no tapan la punta de la flecha ni la pieza). */
@container camara (max-width: 440px) {
  .visor-leyenda .mapa-botones { position: static; margin: 8px 0 0; }
}

/* ---------- Simulacion fisica de llenado (oct-2026, beta) ----------
   Marcas sobre la pieza (viewer3d.marcas): las reubica el visor en cada
   cuadro con transform. La capa no recibe toques (el arrastre sigue girando);
   cada marca si, para que su title (angulo de la union, espesor del rechupe)
   salga al pasar el raton (revision visual, 12-oct-2026). Los mismos colores
   que las marcas del PDF (llenado_servicio.COLORES_MARCA), fuera de la escala
   azul a rojo del mapa: la compuerta en negro y el aire en blanco. */
.visor-marcas { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.visor-marca, .mapa-marca {
  display: inline-block; width: 14px; height: 14px; box-sizing: border-box;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .55); border-radius: 50%;
}
.visor-marca { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: help; }
.visor-marca[hidden] { display: none; }
.mapa-marca { flex: none; width: 12px; height: 12px; }
/* Rombo (linea de union) y triangulo (compuerta): orilla blanca y relleno de color. */
.marca-union, .marca-compuerta { border: 0; box-shadow: none; border-radius: 0; background: #fff; }
.marca-union, .marca-union::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.marca-compuerta, .marca-compuerta::before { clip-path: polygon(50% 100%, 0 0, 100% 0); }
.mapa-marca.marca-union, .mapa-marca.marca-compuerta { position: relative; }
.marca-union::before, .marca-compuerta::before { content: ''; position: absolute; inset: 3px; }
.marca-union::before { background: #7b3fa0; }
.marca-compuerta::before { background: #141414; inset: 2px 3px 4px; }
.visor-marca.marca-union, .visor-marca.marca-compuerta { width: 17px; height: 17px; }
.marca-aire { background: #fff; border-color: #141414; box-shadow: 0 0 0 1px rgb(255 255 255 / .8); }
.marca-titubeo { background: #c026d3; }
.marca-race { background: #141414; }
.marca-rechupe { border-radius: 2px; background: #7a4a1e; }
.marca-final { background: transparent; border-style: dashed; }
/* El sello de la beta y las cifras clave, en la franja de la leyenda. */
.visor-leyenda .mapa-sello {
  display: inline-block; margin: 0 0 6px; padding: 3px 8px; font: 600 11.5px/1.2 var(--rx-texto);
  letter-spacing: .04em; text-transform: uppercase; color: #141414; background: #f0b54a;
}
.visor-leyenda .mapa-sello.equipo { background: #d8d8d3; }
.visor-leyenda .mapa-cifras { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.visor-leyenda .mapa-cifras li { padding: 5px 8px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16);
  font-size: 12px; line-height: 1.3; color: var(--rx-visor-texto); }
.visor-leyenda .mapa-cifras b { display: block; font-size: 15px; font-weight: 600; color: #f2f2ef; font-variant-numeric: tabular-nums; }
.visor-leyenda .mapa-cifras li.alerta { border-color: #f0b54a; }
.visor-leyenda .mapa-reloj { margin: 6px 0 0; font: 600 13px/1.3 var(--rx-texto); color: #f2f2ef; font-variant-numeric: tabular-nums; min-height: 1.3em; }
/* landing.css le da a todo <details> fondo blanco y orilla (las preguntas
   frecuentes): aqui va sobre el visor oscuro, con su contraste. */
.visor-leyenda .mapa-criterios { margin: 6px 0 0; padding: 0 10px; font-size: 12px; color: var(--rx-visor-texto);
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .16); border-radius: 0; }
.visor-leyenda .mapa-criterios summary { cursor: pointer; min-height: 44px; padding: 6px 0; font-weight: 600;
  color: #f2f2ef; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.visor-leyenda .mapa-criterios summary::after { color: #f2f2ef; font-size: 18px; }
.visor-leyenda .mapa-criterios ul { margin: 2px 0 10px; padding: 0; list-style: none; line-height: 1.45; }
.visor-leyenda .mapa-criterios li + li { margin-top: 3px; }
.visor-leyenda .mapa-campo { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.visor-leyenda .mapa-aviso.confirmar { color: #f0b54a; }
/* La escala del mapa fisico en una sola barra continua (como el PDF). */
.visor-leyenda .mapa-leyenda li.mapa-escala { flex: 1 1 100%; display: block; white-space: normal; padding: 6px 9px; }
/* Con dos clases: landing.css pone a todo span de .mapa-leyenda inline-flex
   (la barra salia de 0 px). */
.mapa-leyenda .mapa-escala-barra { display: block; height: 10px; border-radius: 2px; }
.mapa-leyenda .mapa-escala-marcas { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; line-height: 1.25; }
.mapa-leyenda .mapa-escala-marcas span { display: block; }
.mapa-leyenda .mapa-escala-marcas span:nth-child(2) { text-align: center; }
.mapa-leyenda .mapa-escala-marcas span:last-child { text-align: right; }
/* Las marcas de la leyenda con su figura: tmg-embudo.css le quita a todo <i>
   de la leyenda la orilla y el redondeo (el aire salia como un cuadro blanco). */
.visor-leyenda .mapa-marca { border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .55); }
.visor-leyenda .mapa-marca.marca-aire { border-color: #141414; box-shadow: 0 0 0 1px rgb(255 255 255 / .8); }
.visor-leyenda .mapa-marca.marca-rechupe { border-radius: 2px; }
.visor-leyenda .mapa-marca.marca-union, .visor-leyenda .mapa-marca.marca-compuerta { border: 0; box-shadow: none; border-radius: 0; }
/* El reloj de "Ver cómo se llena", sobre la camara (abajo a la izquierda,
   como el eje arriba): se ve junto a la pieza tambien en el celular. */
.camara-reloj {
  position: absolute; left: 28px; bottom: 12px; z-index: 3; pointer-events: none; max-width: calc(100% - 40px);
  font: 600 12.5px/1.25 var(--rx-texto); color: #f2f2ef; background: rgb(20 20 20 / .78); padding: 5px 8px;
  font-variant-numeric: tabular-nums;
}
.camara-reloj[hidden] { display: none; }
/* Mientras el reloj se ve, las cotas (abajo a la derecha) le dejan el renglon. */
.camara.con-reloj .camara-cotas { display: none; }
@container camara (max-width: 560px) {
  .visor-leyenda .mapa-leyenda li.mapa-escala { grid-column: 1 / -1; display: block; }
  .visor-leyenda .mapa-salida[data-fisico] .mapa-leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camara-reloj { left: 12px; bottom: 10px; font-size: 12px; }
}

/* ---------- Rotulo TMG (especificacion §2.1) ----------
   Las clases .rotulo, .rotulo-celda, .rotulo-etiqueta y .rotulo-valor las
   define tmg-embudo.css (rama del visor); aqui van con :where(), sin
   especificidad, solo como respaldo: si la otra hoja las trae, mandan las suyas.
   El respaldo sigue el mismo modelo que el panel y tmg-embudo.css (celdas de
   orilla a orilla, reglas con box-shadow, pie con regla arriba; las crucetas
   las pone tmg-embudo.css por fuera de la lamina): antes dejaba margenes de
   22 px, reglas dobles y un segundo juego de crucetas debajo de las suyas.
   Lo que si manda aqui es el acomodo del embudo en tablet y celular
   (.asistente .rotulo-*, abajo). */
:where(.rotulo) {
  position: relative; background: var(--rx-rotulo-fondo); color: var(--rx-rotulo-texto);
  padding: 22px 0 0; border-radius: 0; margin: 0 0 16px;
}
:where(.rotulo)::before {
  content: ''; position: absolute; left: 16px; top: 0;
  width: var(--rotulo-barra-ancho, 64px); height: var(--rotulo-barra-alto, 7px);
  background: var(--rx-rotulo-barra); transform: skewX(var(--rotulo-barra-sesgo, -18deg));
}
:where(.rotulo-celdas) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--rotulo-celda-min, 132px), 1fr)); margin: 0;
  border-top: 1px solid var(--rx-rotulo-regla); overflow: hidden;
}
:where(.rotulo-celda) {
  min-width: 0; padding: 10px 16px 12px;
  box-shadow: -1px 0 0 var(--rx-rotulo-regla), 0 -1px 0 var(--rx-rotulo-regla);
}
:where(.rotulo-etiqueta) {
  margin: 0 0 5px; font: 600 12px/1.2 var(--rx-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rx-rotulo-etiqueta);
}
:where(.rotulo-valor) {
  margin: 0; font: 600 20px/1.15 var(--rx-display); letter-spacing: .02em; color: var(--rx-rotulo-texto);
  font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere;
}
.rotulo-nota {
  display: block; margin-top: 3px; font: 500 13px/1.3 var(--rx-texto); letter-spacing: 0;
  color: var(--rx-rotulo-etiqueta);
}
/* El sello a la izquierda y el lugar a la derecha (como en el panel). */
:where(.rotulo-pie) {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--rx-rotulo-regla);
  font: 600 12px/1.35 var(--rx-display); letter-spacing: .1em;
  text-transform: uppercase; color: var(--rx-rotulo-etiqueta);
}
/* Tablet vertical y celular: rejilla de 6 columnas, folio y tecnologia en
   mitades y cavidades, ciclo y maquina en tercios (2 + 3, sin huecos ni
   reglas cortadas). La rejilla generica de tmg-embudo.css (auto-fit de
   132 px) aqui no sirve. Si faltan celdas, la ultima toma lo que queda. */
@media (max-width: 899px) {
  .asistente .rotulo-celdas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .asistente .rotulo-celda { grid-column: span 2; }
  .asistente .rotulo-celda:nth-child(-n+2) { grid-column: span 3; }
  .asistente .rotulo-celda:last-child:nth-child(1) { grid-column: span 6; }
  .asistente .rotulo-celda:last-child:nth-child(3) { grid-column: span 6; }
  .asistente .rotulo-celda:last-child:nth-child(4) { grid-column: span 4; }
}
/* Celular: folio y tecnologia en un renglon; cavidades, ciclo y maquina en
   otro (las cifras cortas caben en tercios). */
@media (max-width: 560px) {
  .asistente .rotulo { padding-top: 18px; }
  .asistente .rotulo-celda { padding: 7px 10px 8px; }
  .asistente .rotulo-etiqueta { letter-spacing: .05em; margin-bottom: 3px; }
  .asistente .rotulo-valor { font-size: 18px; margin-top: 0; }
  .rotulo-nota { font-size: 12px; }
  .asistente .rotulo-pie { padding: 8px 10px 10px; letter-spacing: .06em; }
  .rotulo-lugar { display: none; }
  /* Quien recomendo la tecnologia se lee en el concepto de molde. */
  .rotulo-celda-tec .rotulo-nota { display: none; }
}

/* ---------- Resultado: cabecera con el nombre, el folio y el correo ----------
   Ronda A de Meximold (#11): el momento humano del resultado, arriba del Rotulo. */
.res-cabeza { margin: 0 0 14px; }
.res-cabeza .paso-titulo { margin: 0; font-size: 31px; text-wrap: balance; }
/* text-wrap: wrap a proposito: con "pretty" (el p de tmg-embudo.css en la
   Ronda A, grupo A1) a 360 px se partia "24 / h hábiles". */
.res-cabeza-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--rx-tinta-2); overflow-wrap: break-word; text-wrap: wrap; }
.res-cabeza-sub b { color: var(--rx-tinta); font-weight: 600; }
/* Lo mismo en las etiquetas en parrafo (revision visual de la Ronda A): con
   "pretty", "…respuesta en menos de 24 h hábiles" quedaba "24" / "h hábiles".
   Y en el texto de la tarjeta sin precio, que manda el servidor: en la demo
   a 360 px quedaba "…piezas de 10 a 300" / "mm". */
p.res-etiqueta, p.sin-precio-texto { text-wrap: wrap; }
/* El folio no se parte en el guion (a 360 px quedaba "TMG-2026-" / "0169"). */
.res-cabeza-sub .tmg-num { white-space: nowrap; }
@media (max-width: 560px) {
  .res-cabeza .paso-titulo { font-size: 23px; }
  .res-cabeza-sub { font-size: 14px; }
}

/* ---------- Resultado: rejilla (PUB-01) ---------- */
.res-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .res-rejilla:not(.res-demo) {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "dfm lateral" "acordeones lateral";
  }
  .res-rejilla:not(.res-demo) > .res-dfm { grid-area: dfm; }
  .res-rejilla:not(.res-demo) > .res-acordeones { grid-area: acordeones; }
  .res-rejilla:not(.res-demo) > .res-lateral { grid-area: lateral; position: sticky; top: 84px; }
  /* Con la tarjeta del codigo (candado del PDF) la columna pasa del alto de
     la pantalla: fija, su parte de abajo nunca se veia. Se desplaza con la pagina. */
  .res-rejilla:not(.res-demo) > .res-lateral:has(.contacto-pdf:not(.contacto-pdf-hecho)) { position: static; }
}
@media (min-width: 1180px) {
  .res-rejilla:not(.res-demo) { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
}

.franja-aviso {
  margin: 0 0 14px; padding: 12px 16px; border-radius: 4px; font-size: 15px; line-height: 1.45;
  background: var(--rx-aviso-fondo); color: var(--rx-aviso); border-left: 4px solid var(--rx-aviso);
}
.asistente .aviso-fallo {
  border-radius: 8px; background: var(--rx-peligro-fondo); color: var(--rx-peligro);
  border: 1px solid #efc6c8; border-left: 4px solid var(--rx-peligro);
}
.asistente .aviso-fallo h3 { color: var(--rx-peligro); display: flex; align-items: center; gap: 8px; }
.asistente .aviso-fallo-detalle { color: var(--rx-tinta-2); }

/* La seccion del DFM: camara y veredicto lado a lado cuando caben. */
.res-dfm {
  min-width: 0; background: var(--rx-superficie); border: 1px solid var(--rx-borde); border-radius: 8px;
  padding: 18px 20px 14px; container-type: inline-size;
}
.res-dfm-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.res-dfm-cab h2 { margin: 0; font: 600 25px/1.1 var(--rx-display); letter-spacing: 0; color: var(--rx-negro); }
.res-dfm-cab p { flex-basis: 100%; margin: 0; font-size: 14.5px; color: var(--rx-tinta-2); }
/* "Revisión de ingeniería: pendiente" sigue en el marcado, pero no se pinta:
   el pie del Rotulo y la portada ya lo dicen (Ronda A de Meximold, #21). */
.res-estado { display: none; font: 600 12px/1 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-tenue); }
.res-dfm-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
/* 580 y no 600: en la tablet de 1024 con barra de desplazamiento clasica
   (Windows) la seccion mide 591 px y la camara y el veredicto se apilaban. */
@container (min-width: 580px) {
  .res-dfm.con-visor .res-dfm-cuerpo { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}
.res-dfm-vacio { margin: 0; color: var(--rx-tinta-2); font-size: 14.5px; }
.res-dfm .nota-aviso, .res-acordeones .nota-aviso, .res-lateral .nota-aviso {
  border-left-color: var(--rx-aviso); background: var(--rx-aviso-fondo); color: var(--rx-aviso); border-radius: 0 4px 4px 0;
}
.dfm-pendiente { margin: 12px 0 0; font-size: 13.5px; color: var(--rx-tinta-2); }
.res-dfm .dfm-etiqueta { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rx-borde); font-size: 12.5px; color: var(--rx-tenue); }

/* Veredicto: los 5 chequeos (§2.2). Tinta, grafito y ambar; nunca rojo ni verde. */
.chequeos { min-width: 0; container-type: inline-size; }
.chequeos-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.chequeo {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  grid-template-areas: "marca titulo etq" ". detalle detalle";
  padding: 9px 0; border-top: 1px solid var(--rx-borde);
}
.chequeo:first-child { border-top: 0; }
.chequeo-marca {
  grid-area: marca; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px/1 var(--rx-texto);
}
.chequeo-titulo { grid-area: titulo; font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--rx-tinta); }
.chequeo-detalle { grid-area: detalle; display: block; font-size: 14px; line-height: 1.4; color: var(--rx-tinta-2); }
.chequeo[data-estado="ok"] .chequeo-marca { background: var(--rx-negro); color: #fff; }
.chequeo[data-estado="estimado"] .chequeo-marca { border: 1.5px solid var(--rx-tinta-2); color: var(--rx-tinta-2); font-family: Georgia, serif; font-style: italic; }
.chequeo[data-estado="confirmar"] .chequeo-marca { border: 1.5px solid var(--rx-aviso); background: var(--rx-aviso-fondo); color: var(--rx-aviso); }
.chequeo[data-estado="ingenieria"] .chequeo-marca { background: var(--rx-aviso); color: #fff; }
.chequeo-etq {
  grid-area: etq; justify-self: end;
  font: 600 12px/1 var(--rx-display); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 7px; white-space: nowrap; border-radius: 2px;
}
.chequeo[data-estado="ok"] .chequeo-etq { background: var(--rx-superficie-2); color: var(--rx-tinta); }
.chequeo[data-estado="estimado"] .chequeo-etq { border: 1px dashed var(--rx-borde-control); color: var(--rx-tinta-2); }
.chequeo[data-estado="confirmar"] .chequeo-etq { background: var(--rx-aviso-fondo); color: var(--rx-aviso); }
.chequeo[data-estado="ingenieria"] .chequeo-etq { background: var(--rx-aviso); color: #fff; }
@container (max-width: 250px) {
  .chequeo { grid-template-areas: "marca titulo titulo" ". detalle detalle" ". etq etq"; }
  .chequeo-etq { justify-self: start; margin-top: 4px; }
}

/* La tarjeta lateral: la inversion o la revision de ingenieria. */
.res-lateral {
  min-width: 0; background: var(--rx-superficie); border: 1px solid var(--rx-borde);
  border-top: 3px solid var(--rx-negro); border-radius: 8px; padding: 18px 20px 16px;
}
.inversion-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inversion-insignia { flex: none; white-space: nowrap;
  font: 600 12px/1 var(--rx-display); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 7px; background: var(--rx-aviso-fondo); color: var(--rx-aviso);
}
/* "MXN" ya no queda solo en otro renglon (Ronda A de Meximold, #12): a 39 px
   "Desde $167,000 MXN" cabe en la tarjeta; con siete digitos, balance. */
.inversion-cifra {
  margin: 8px 0 2px; font: 600 clamp(32px, 2.6vw, var(--t-39, 2.441rem))/1.02 var(--rx-display); letter-spacing: -.005em;
  color: var(--rx-negro); font-variant-numeric: tabular-nums lining-nums; text-wrap: balance;
}
.inversion-sub { font-size: 14px; color: var(--rx-tinta-2); line-height: 1.4; }
.res-lateral .nota-rango {
  display: block; margin-top: 6px; padding: 5px 8px; border-radius: 4px;
  font-size: 13px; color: var(--rx-tinta-2); background: var(--rx-superficie-2);
}
.inversion-filas { margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rx-borde); }
.inversion-filas div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 14.5px; }
.inversion-filas dt { color: var(--rx-tinta-2); }
.inversion-filas dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.inversion-ref { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--rx-tenue); }
.res-lateral .btn { margin-top: 12px; min-height: 48px; padding: 11px 14px; font-size: 15px; line-height: 1.2; }
.res-lateral .btn-block { width: 100%; }
.inversion-nota, .inversion-sello { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--rx-tenue); }
/* Lo preliminar ya lo dicen el boton, el pie del Rotulo y el sello (#12). */
.inversion-nota { display: none; }
.inversion-sello { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rx-borde); }
.inversion-ejemplo { margin: 10px 0 0; font: 600 25px/1.15 var(--rx-display); color: var(--rx-negro); }
.sin-precio-titulo { margin: 8px 0; font: 600 25px/1.15 var(--rx-display); letter-spacing: 0; color: var(--rx-negro); }
.sin-precio-texto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--rx-tinta-2); }
.sin-precio-folio { margin: 12px 0 0; font-size: 14px; color: var(--rx-tinta-2); }
.sin-precio-folio b { color: var(--rx-negro); font-size: 16px; }

/* Detalle en acordeones (PUB-01.4), con su resumen a la derecha. */
.res-acordeones { display: grid; gap: 8px; min-width: 0; }
.res-acordeones:empty { display: none; }
/* "Reporte DFM detallado" y "Abrir todo" (Ronda A de Meximold, #20). */
.acordeones-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 2px 0; }
.acordeones-abrir {
  min-height: var(--toque, 44px); background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: 600 14px var(--rx-texto); color: var(--rx-foco); text-decoration: underline; text-underline-offset: 3px;
}
.acordeones-abrir:hover { color: var(--rx-negro); }
/* "Ver tu molde en 3D" bajo el veredicto (#19); su seccion no queda debajo
   del menu fijo al traerla a la vista. */
.chequeos .btn-ver-molde { margin-top: 12px; min-height: var(--toque, 44px); }
#acordeon-layout { scroll-margin-top: 84px; }
.acordeon { margin: 0; padding: 0; background: var(--rx-superficie); border: 1px solid var(--rx-borde); border-radius: 8px; }
.acordeon > summary {
  list-style: none; cursor: pointer; min-height: 52px; padding: 10px 16px; margin: 0;
  display: flex; align-items: center; gap: 12px; font-weight: 400;
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0;
  border: solid var(--rx-tinta); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--rx-mov);
}
.acordeon[open] > summary::after { content: ''; transform: rotate(-135deg); margin-top: 4px; }
.acordeon-titulo { font: 600 15px/1.2 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-negro); }
.acordeon-resumen { margin-left: auto; font-size: 14px; line-height: 1.3; color: var(--rx-tinta-2); text-align: right; }
.acordeon-cuerpo { padding: 0 16px 14px; }
.acordeon p { padding-bottom: 0; }
.acordeon-subtitulo { margin: 8px 0 4px; }
.res-tecnologia { margin-bottom: 8px; }
.res-tecnologia .sutil { margin: 0 0 4px; font-size: 14px; }
.nota-pie { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--rx-tenue); }
.asistente .tabla-ficha { font-size: 14px; }
.asistente .tabla-ficha tr { border-top-color: var(--rx-borde); }
.asistente .tabla-ficha td:first-child { color: var(--rx-tinta-2); }
.asistente .tabla-ficha b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Reporte DFM (contrato 1.2, oct-2026) ----------
   El formato de un DFM de moldero: portada con revision, secciones
   numeradas, hallazgos con propuesta. Tinta, grafito y ambar como el
   veredicto: rojo y verde siguen siendo solo datos del mapa. */
.dfm-portada {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0; margin: 10px 0 0; padding: 0;
  border-top: 1px solid var(--rx-borde); border-bottom: 1px solid var(--rx-borde);
}
.dfm-portada > div { min-width: 0; padding: 7px 14px 7px 0; margin-right: 14px; box-shadow: 1px 0 0 var(--rx-borde); }
.dfm-portada > div:last-child { box-shadow: none; margin-right: 0; }
.dfm-portada dt { font: 600 var(--t-12, 12px)/1.2 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-tenue); }
.dfm-portada dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--rx-tinta); }

.hallazgos { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rx-borde); }
.hallazgos-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.hallazgo { border: 1px solid var(--rx-borde); border-left: 4px solid var(--rx-borde-control); border-radius: 4px; padding: 10px 14px 12px; min-width: 0; }
.hallazgo[data-severidad="alta"] { border-left-color: var(--rx-aviso); }
.hallazgo[data-severidad="media"] { border-left-color: #c79a4a; }
.hallazgo[data-severidad="ok"] { border-left-color: var(--rx-negro); }
.hallazgo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hallazgo-num { font: 600 20px/1 var(--rx-display); color: var(--rx-negro); }
.hallazgo-titulo { font-size: 15.5px; font-weight: 600; color: var(--rx-tinta); min-width: 0; }
.hallazgo-etq {
  margin-left: auto; font: 600 var(--t-12, 12px)/1 var(--rx-display); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 7px; border-radius: var(--radio-1, 4px); white-space: nowrap; border: 1px dashed var(--rx-borde-control); color: var(--rx-tinta-2);
}
.hallazgo[data-severidad="alta"] .hallazgo-etq { background: var(--rx-aviso); border-color: var(--rx-aviso); color: #fff; }
.hallazgo[data-severidad="media"] .hallazgo-etq { background: var(--rx-aviso-fondo); border: 1px solid var(--rx-aviso-fondo); color: var(--rx-aviso); }
.hallazgo[data-severidad="ok"] .hallazgo-etq { background: var(--rx-superficie-2); border-color: var(--rx-superficie-2); color: var(--rx-tinta); }
.hallazgo-cuerpo { margin: 8px 0 0; display: grid; gap: 6px; }
.hallazgo-cuerpo > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.hallazgo-cuerpo dt { font: 600 12px/1.45 var(--rx-display); letter-spacing: .08em; text-transform: uppercase; color: var(--rx-tenue); }
.hallazgo-cuerpo dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--rx-tinta-2); }
/* DFM accionable: la cifra del hallazgo, en tinta y separada del texto (sin semaforo). */
.hallazgo-ahorro { padding-top: 6px; border-top: 1px dashed var(--rx-borde); }
/* Tiempo de ciclo por etapa: barra a escala y su leyenda. */
/* Layout y estructura del molde (oct-2026). */
/* 560 px (Ronda A de Meximold, #19): con 720 el layout en planta dominaba la
   seccion del molde 3D. */
.layout-lienzo { display: block; width: 100%; max-width: 560px; height: auto; border: 1px solid var(--rx-borde); border-radius: 4px; background: #fff; }
.layout-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 10px; padding: 0; list-style: none; font-size: 13px; }
.layout-leyenda li { display: flex; align-items: center; gap: 6px; }
.layout-titulo { margin: 14px 0 6px; }
.layout-platina { display: block; width: 100%; max-width: 360px; height: auto; }
.layout-platina .platina-placa { fill: #ecece9; stroke: #1f1f1d; stroke-width: 3; }
.layout-platina .platina-claro { fill: none; stroke: #6b6b66; stroke-width: 2; stroke-dasharray: 8 6; }
.layout-platina .platina-barra { fill: #8a8a84; stroke: #1f1f1d; stroke-width: 2; }
.layout-platina .platina-molde { fill: #c79a4a; stroke: #1f1f1d; stroke-width: 3; }
/* El molde que no cabe se ve a traves (la platina, el claro y las barras se
   leen debajo y encima) y su medida va en tinta, no en blanco. */
.layout-platina .platina-molde.no-cabe { fill: #94161e; fill-opacity: .35; stroke: #94161e; }
.layout-platina .platina-texto { fill: #fff; font: 600 28px var(--rx-display, sans-serif); text-anchor: middle; dominant-baseline: middle; }
.layout-platina .platina-texto.no-cabe { fill: #1f1f1d; }
.platina-pie { max-width: 560px; }
/* Estructura en corte: el dibujo y, a su lado, las placas con su espesor en
   HTML (revision visual de la Ronda A: dentro del SVG las cotas median 7 px
   en la tablet y 3 px en el celular). Si no caben lado a lado, la lista baja. */
.estructura { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.layout-estructura { display: block; flex: 0 1 auto; width: auto; max-width: 100%; height: 220px; }
/* En el celular la lista siempre va abajo: el dibujo toma el ancho y su alto
   sale de la proporcion (con 220 fijos quedaban 30-40 px vacios arriba y
   abajo del corte a 320-390 px). */
@media (max-width: 560px) {
  .layout-estructura { width: 100%; height: auto; max-height: 220px; }
}
.estructura .placa { stroke: #1f1f1d; stroke-width: 1.2; fill: #b8b8b0; }
.estructura .placa-sujecion_superior, .estructura .placa-sujecion_inferior { fill: #8a8a84; }
.estructura .placa-placa_a { fill: #c79a4a; }
.estructura .placa-placa_b { fill: #d8b26b; }
.estructura .placa-placa_manifold { fill: #b06a3b; }
.estructura .placa-paralelas { fill: #9a9a92; }
.estructura .placa-expulsora { fill: #8fa1b1; }
.estructura .estructura-particion { stroke: #94161e; stroke-width: 2; stroke-dasharray: 8 5; }
.estructura-cotas {
  flex: 1 1 240px; max-width: 380px; display: grid; gap: 5px; margin: 0; padding: 0; list-style: none;
  font-size: 14px; line-height: 1.3; color: var(--rx-tinta-2);
}
.estructura-cotas li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.estructura-cotas b { color: var(--rx-tinta); font-weight: 600; white-space: nowrap; }
.estructura-muestra { display: block; width: 14px; height: 14px; overflow: visible; }
.estructura-muestra .estructura-particion { stroke-dasharray: 5 3; }
.ciclo-barra { display: flex; gap: 2px; height: 14px; border-radius: 3px; overflow: hidden; margin: 4px 0 10px; }
.ciclo-tramo { min-width: 3px; }
.ciclo-tramo[data-etapa="inyeccion"], .ciclo-color[data-etapa="inyeccion"] { background: #94161e; }
.ciclo-tramo[data-etapa="sostenimiento"], .ciclo-color[data-etapa="sostenimiento"] { background: #c79a4a; }
.ciclo-tramo[data-etapa="enfriamiento"], .ciclo-color[data-etapa="enfriamiento"] { background: #3d5a73; }
.ciclo-tramo[data-etapa="apertura"], .ciclo-color[data-etapa="apertura"] { background: #8a8a84; }
.ciclo-tramo[data-etapa="minimo_practico"], .ciclo-color[data-etapa="minimo_practico"] { background: #cfcfc8; }
.ciclo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ciclo-lista li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; }
.ciclo-color { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ciclo-lista .ciclo-total { grid-template-columns: minmax(0, 1fr) auto; padding-top: 4px; border-top: 1px solid var(--rx-borde); font-weight: 600; }
.hallazgo-cifra { display: block; font: 600 17px/1.3 var(--rx-display); color: var(--rx-tinta); }
@container (max-width: 420px) {
  .hallazgo-cuerpo > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hallazgo-etq { margin-left: 0; }
}

/* Secciones numeradas como en el DFM del moldero: 01, 02... */
.res-acordeones { counter-reset: seccion-dfm; }
.acordeon-dfm { counter-increment: seccion-dfm; }
.acordeon-dfm .acordeon-titulo::before {
  content: counter(seccion-dfm, decimal-leading-zero); display: inline-block; min-width: 26px; margin-right: 8px;
  padding-right: 8px; border-right: 1px solid var(--rx-borde); color: var(--rx-tenue); font-variant-numeric: tabular-nums;
}
.tabla-desliza { overflow-x: auto; margin-top: 6px; }
.tabla-dfm { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabla-dfm th {
  text-align: left; padding: 6px 8px 6px 0; border-bottom: 1.5px solid var(--rx-negro);
  font: 600 var(--t-12, 12px)/1.2 var(--rx-display); letter-spacing: .08em; text-transform: uppercase; color: var(--rx-tinta-2); white-space: nowrap;
}
.tabla-dfm td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rx-borde); color: var(--rx-tinta); vertical-align: top; }
.tabla-dfm td:first-child { white-space: nowrap; }
.bandas-lista { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px; }
.bandas-lista li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rx-borde); font-size: 13.5px; color: var(--rx-tinta-2); min-width: 0; }
.bandas-lista li b { margin-left: auto; color: var(--rx-tinta); font-weight: 600; }
.bandas-lista .mapa-color { flex: none; width: 12px; height: 12px; border-radius: 2px; border: 0; }
.lista-dfm { margin: 4px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--rx-tinta-2); }
.lista-dfm li + li { margin-top: 4px; }

/* Modos del mapa en la camara: Lados, Salida, Espesor, Contrasalidas. */
.visor-leyenda .mapa-modos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.visor-leyenda .mapa-modos .camara-mando { min-height: 36px; font-size: 13.5px; }
.visor-leyenda .mapa-modos .camara-mando[aria-pressed="true"] { background: #f2f2ef; color: var(--rx-negro); border-color: #f2f2ef; }
/* Los modos como un control segmentado (Ronda A de Meximold, #23): en un
   renglon donde caben (escritorio). Donde no caben (tablet de 1024, celular)
   van en dos renglones parejos, 3 + 2 con cinco modos y 2 + 2 con cuatro.
   Revision A2: ya no se deslizan de lado; a 1024 y a 360 px "Llenado" quedaba
   escondido sin pista y el overflow recortaba el anillo de foco. Cada boton
   se monta 1 px sobre el de al lado y el de arriba (el padding lo compensa).
   El stand conserva su leyenda. */
:root:not(.modo-feria) .visor-leyenda .mapa-modos { container-type: inline-size; gap: 0; padding: 1px 0 0 1px; }
:root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando {
  flex: 1 0 auto; min-height: 36px; padding: 0 10px; font-size: 13px; border-radius: 0; margin: -1px 0 0 -1px;
}
:root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando[aria-pressed="true"],
:root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:focus-visible { position: relative; z-index: 1; }
:root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:first-child { border-radius: var(--radio-1, 4px) 0 0 var(--radio-1, 4px); }
:root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:last-child { border-radius: 0 var(--radio-1, 4px) var(--radio-1, 4px) 0; }
/* Los cinco a 13 px piden 348 px; abajo de 352, dos renglones (en escuadra,
   como la camara). */
@container (max-width: 351.98px) {
  :root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:nth-child(n) { border-radius: 0; }
  :root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:first-child:nth-last-child(4),
  :root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:first-child:nth-last-child(4) ~ .camara-mando { flex-basis: 50%; }
  :root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:first-child:nth-last-child(5),
  :root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:first-child:nth-last-child(5) ~ .camara-mando { flex-basis: 33.333%; }
  :root:not(.modo-feria) .visor-leyenda .mapa-modos .camara-mando:first-child:nth-last-child(5) ~ .camara-mando:nth-last-child(-n+2) { flex-basis: 50%; }
}
.visor-leyenda .mapa-aviso { color: #f3d9a4; }
.visor-leyenda .mapa-salida[data-modo="salida"] .mapa-leyenda li,
.visor-leyenda .mapa-salida[data-modo="espesor"] .mapa-leyenda li { font-size: 12.5px; padding: 4px 7px; }
@container camara (max-width: 560px) {
  .visor-leyenda .mapa-salida[data-modo="salida"] .mapa-leyenda,
  .visor-leyenda .mapa-salida[data-modo="espesor"] .mapa-leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visor-leyenda .mapa-salida[data-modo="contrasalidas"] .mapa-leyenda { grid-template-columns: minmax(0, 1fr); }
}

/* Prueba escenarios (oct-2026): controles del programa y la salida en vivo.
   Tinta y grafito; el aviso en ambar. Sin rojo ni verde (son del mapa DFM)
   y sin boton rojo: el unico de la vista es el del PDF. */
.res-escenarios { margin-top: 16px; padding: 20px 22px; border-top: 3px solid var(--rx-negro); }
.escenarios-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.res-escenarios h2 { margin: 0; font: 600 25px/1.1 var(--rx-display); letter-spacing: 0; color: var(--rx-negro); }
.escenarios-nota {
  margin: 0; padding: 4px 8px; border-radius: 4px; font-size: 13px; line-height: 1.35;
  color: var(--rx-tinta); background: var(--rx-superficie-2);
}
.res-escenarios .escenarios-sub { margin: 8px 0 0; font-size: 14px; color: var(--rx-tinta-2); }
.escenarios-controles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin-top: 14px;
}
.escenarios-controles .campo { margin: 0; min-width: 0; }
.escenarios-controles label { font-size: 14px; margin-bottom: 5px; }
.escenarios-controles select { min-height: 44px; padding: 10px 12px; font-size: 15px; }
.escenarios-controles select:disabled { color: var(--rx-tenue); background: var(--rx-superficie-2); }
.escenarios-salida {
  margin-top: 16px; padding: 14px 16px; border: 1px solid var(--rx-borde); border-radius: 8px;
  background: var(--rx-superficie); transition: opacity var(--rx-mov);
}
.escenarios-salida[aria-busy="true"] { opacity: .55; }
.escenarios-celdas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin: 10px 0 0; }
.escenarios-celda { min-width: 0; }
.escenarios-celda dt {
  font: 600 12px/1.25 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-tinta-2);
}
.escenarios-celda dd {
  margin: 4px 0 0; font: 600 22px/1.15 var(--rx-display); color: var(--rx-negro); overflow-wrap: anywhere;
}
.escenarios-celda-nota { display: block; margin-top: 2px; font: 400 13px/1.3 var(--rx-texto); color: var(--rx-tenue); }
.escenarios-delta { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rx-borde); font-size: 14.5px; font-weight: 600; color: var(--rx-tinta); }
.escenarios-error {
  margin: 10px 0 0; padding: 8px 10px; font-size: 14px; line-height: 1.45; color: var(--rx-aviso);
  background: var(--rx-aviso-fondo); border-left: 3px solid var(--rx-aviso); border-radius: 0 4px 4px 0;
}
.escenarios-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.escenarios-acciones .btn { min-height: 44px; }
/* "Volver a mi cotización registrada" aparece al mover un control; apagado
   y a lo ancho se leia como un boton roto (Ronda A de Meximold, #18). */
.escenarios-acciones:has(#esc-volver:disabled) { display: none; }
@media (max-width: 899px) {
  .escenarios-controles, .escenarios-celdas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .res-escenarios { padding: 18px 16px; }
  .res-escenarios h2 { font-size: 23px; }
  .escenarios-salida { padding: 12px; }
  .escenarios-celda dd { font-size: 20px; }
  .escenarios-acciones .btn { width: 100%; }
}

/* "¿Qué sigue?" (con WhatsApp dentro, PUB-11) y por que TMG. */
.res-sigue { margin-top: 16px; padding: 20px 22px; }
.res-ventajas { margin-top: 16px; }
.res-ventajas .acordeon-cuerpo .sutil { margin: 0 0 4px; font-size: 14.5px; }
.res-sigue h2, .res-ventajas h2 { margin: 0 0 6px; font: 600 25px/1.1 var(--rx-display); letter-spacing: 0; color: var(--rx-negro); }
.asistente .lista-check svg { color: var(--rx-negro); }
.asistente .lista-check svg.icono-peligro, .icono-peligro { color: var(--rx-peligro); }
.acciones-sigue { flex-wrap: wrap; justify-content: flex-start; margin-top: 16px; }
/* Los pasos numerados (#18) y la fecha objetivo junto al WhatsApp. */
.res-sigue .pasos-folio { margin: 12px 0 10px; }
.res-sigue .pasos-folio li { color: var(--rx-tinta); }
.res-sigue .sigue-nota { margin: 0; font-size: 14.5px; color: var(--rx-tinta-2); }
.res-ventajas .ventaja-icono { background: var(--rx-superficie-2); color: var(--rx-negro); border-radius: 4px; width: 38px; height: 38px; }
.res-ventajas .ventajas-rejilla { margin-top: 12px; }

/* Barra inferior del celular (PUB-01.3): mientras la tarjeta no se ve. */
.barra-inversion { display: none; }
@media (max-width: 899px) {
  .barra-inversion {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--rx-negro); color: #fff;
    transition: transform var(--rx-mov), visibility 0s linear 0s;
  }
  /* Fuera de pantalla tambien sale del orden de tabulacion: el enlace no
     recibe un foco que nadie ve. visibility cambia al terminar de bajar. */
  .barra-inversion.oculta {
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--rx-mov), visibility 0s linear var(--rx-mov);
  }
  .barra-inversion small {
    display: block; font: 600 12px/1.2 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: #a8a8a2;
  }
  .barra-inversion b { font: 600 22px/1.1 var(--rx-display); font-variant-numeric: tabular-nums; }
  .barra-iva { font-size: 13px; color: #c9c9c4; white-space: nowrap; }
  .barra-enlace {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 4px;
    color: #fff; text-decoration: none; font-weight: 600; border: 1.5px solid rgb(255 255 255 / .7); white-space: nowrap;
  }
  body.en-resultado { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Al tabular, el control enfocado no queda debajo de la barra fija. */
  html:has(body.en-resultado) { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* En el resultado el WhatsApp va dentro de "¿Qué sigue?", no flota (PUB-11). */
body.en-resultado .wa-flotante { display: none; }
/* En el paso 1, por debajo de 1100 px, tampoco: tapaba las etapas de la
   medicion, la leyenda del mapa y la nota de alcance. Va en la pagina. */
.wa-paso1 { display: none; }
@media (max-width: 1099px) {
  html:not(.modo-feria) body.en-paso1 .wa-flotante { display: none; }
  .wa-paso1 {
    display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
    font-size: 14.5px; line-height: 1.4; color: var(--rx-tinta-2);
  }
  .wa-paso1 svg { flex: none; color: var(--rx-negro); }
  .wa-paso1 a { color: var(--rx-foco); font-weight: 600; }
}

/* ---------- Ruta sin archivo: el folio (PUB-10) ---------- */
.res-folio { padding: 26px 28px; }
.folio-cabeza { display: flex; align-items: center; gap: 10px; color: var(--rx-negro); }
.folio-cabeza svg { flex: none; }
.folio-cabeza .paso-titulo { margin: 0; font-size: 31px; }
.folio-grande {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 18px 0 14px;
  padding: 14px 16px; border: 1px solid var(--rx-negro); background: var(--rx-superficie-2);
}
.folio-etiqueta { flex-basis: 100%; font: 600 12px/1 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-tinta-2); }
.folio-valor { font: 600 39px/1 var(--rx-display); letter-spacing: .02em; color: var(--rx-negro); user-select: all; font-variant-numeric: tabular-nums lining-nums; }
.folio-grande .btn-mini { min-height: 40px; }
.pasos-folio { list-style: none; padding: 0; margin: 14px 0; counter-reset: folio; }
.pasos-folio li { counter-increment: folio; position: relative; padding-left: 40px; margin-bottom: 12px; line-height: 1.45; }
.pasos-folio li::before {
  content: counter(folio); position: absolute; left: 0; top: -2px; width: 28px; height: 28px;
  border: 1.5px solid var(--rx-negro); font: 600 16px/25px var(--rx-display); text-align: center; color: var(--rx-negro);
}
.acciones-folio { flex-wrap: wrap; }

/* ---------- Paso 2 (PUB-10) ---------- */
#p-vol.opciones-piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#p-vol.opciones-piezas .opcion {
  min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 8px 6px;
  font-variant-numeric: tabular-nums; line-height: 1.2;
  /* "500 mil – 1.5 millones" parte en dos renglones en el celular: centrados. */
  text-align: center; text-wrap: balance;
}
.opciones-tecnologia { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.opciones-tecnologia .opcion { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 8px 10px; }
/* Cada tecnologia con su linea de para que sirve (Ronda A de Meximold, #15). */
.opciones-tecnologia .opcion { flex-direction: column; gap: 2px; }
.opciones-tecnologia .opcion small { font-size: 12.5px; font-weight: 400; line-height: 1.3; color: var(--rx-tinta-2); }
.opciones-tecnologia .opcion.elegida small { color: #d8d8d3; }
/* La nota del telefono (#17) va en su renglon, bajo el campo. */
.asistente span.nota-campo { display: block; }
.grupo-opcional .grupo-titulo { display: block; }
.grupo-opcional .grupo-titulo .opcional { display: block; margin-top: 2px; font-size: 13.5px; }
.asistente .grupo-opcional { border-radius: 8px; background: var(--rx-superficie-2); border-color: var(--rx-borde); }
.asistente .nota-campo { color: var(--rx-tenue); }

/* ---------- Celular por el QR (PUB-11) ---------- */
@media (max-width: 560px) {
  .asistente { padding-left: 16px; padding-right: 16px; }
  .asistente .panel, .res-dfm, .res-lateral { padding: 16px; }
  .res-sigue, .res-folio { padding: 18px 16px; }
  .acordeon > summary { padding: 10px 14px; }
  .acordeon-resumen { font-size: 13px; }
  .acordeon-cuerpo { padding: 0 14px 12px; }
  /* Filas apiladas: la etiqueta arriba (rotulacion de 12.5 px), el valor abajo. */
  .asistente .tabla-ficha tr { display: block; padding: 8px 0; }
  .asistente .tabla-ficha td { display: block; width: auto !important; padding: 0; }
  .asistente .tabla-ficha td:first-child {
    font: 600 12.5px/1.3 var(--rx-display); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px;
  }
  .asistente .tabla-ficha td + td { font-size: 15px; }
  .acciones-paso .btn-atras { flex: none; padding-left: 14px; padding-right: 14px; }
  .opciones-tecnologia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opciones-tecnologia .opcion:first-child { grid-column: 1 / -1; }
  .opciones-tecnologia .opcion { font-size: 14.5px; line-height: 1.25; }
  /* Un boton largo ("Registrar mi solicitud →") cede y, si no cabe, parte su
     renglon: a 375 px se salia 31 px del panel y a 360 daba scroll horizontal
     (auditoria del front publico, oct-2026). */
  .acciones-paso .btn { white-space: normal; text-wrap: balance; line-height: 1.2; }
  .acciones-paso .btn-atras + .btn-cta { flex: 1; min-width: 0; padding-left: 16px; padding-right: 16px; }
  .folio-valor { font-size: 31px; }
  .requisitos { margin-top: -16px; }
  .panel.paso1 { gap: 18px; }
  /* El resultado, corto: la cifra a la vista en el primer scroll. */
  .asistente[data-paso="resultado"] { padding-top: 14px; padding-bottom: 16px; }
  .asistente[data-paso="resultado"] .pasos-barra { margin-bottom: 14px; }
  .res-rejilla { gap: 12px; }
  .res-dfm-cab { margin-bottom: 10px; }
  .res-dfm-cab h2 { font-size: 23px; }
  /* "Revisión de ingeniería: pendiente" ya lo dice la linea de abajo. */
  .res-estado, .chequeos-titulo { display: none; }
  .res-dfm-cab p { font-size: 13.5px; line-height: 1.4; }
  /* La portada del DFM en celular (Ronda A de Meximold, #21): Revisión,
     Fecha y Nivel arriba; los nombres a lo ancho, sin reglas colgando. */
  .dfm-portada { display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
  .dfm-portada > div { box-shadow: none; margin-right: 0; padding: 6px 8px 6px 0; }
  .dfm-portada > div:nth-child(n+4) { grid-column: 1 / -1; border-top: 1px solid var(--rx-borde); }
  .res-dfm-cuerpo { gap: 10px; }
  .chequeo { padding: 7px 0; }
  .chequeo-titulo { font-size: 15px; }
  .chequeo-detalle { font-size: 13.5px; line-height: 1.35; }
  .dfm-pendiente { font-size: 13px; margin-top: 8px; }
  .res-dfm .dfm-etiqueta { margin-top: 8px; padding-top: 8px; font-size: 12px; }
  .inversion-cifra { font-size: 39px; }
  .inversion-filas { margin-top: 10px; padding-top: 6px; }
  .inversion-filas div { padding: 3px 0; }
  .inversion-ref, .inversion-sello { font-size: 12px; line-height: 1.4; }
  .res-lateral .btn { margin-top: 10px; }
  .res-acordeones { gap: 6px; }
  .res-sigue h2 { font-size: 23px; }
  .res-sigue .lista-check { margin-top: 10px; }
  .res-sigue .lista-check li, .res-sigue .pasos-folio li { margin-bottom: 8px; font-size: 14.5px; line-height: 1.45; }
  .res-sigue .sigue-nota { font-size: 14px; }
  .chequeos .btn-ver-molde { width: 100%; }
  .acciones-sigue { margin-top: 10px; }
  /* El titulo en un renglon y su resumen debajo. */
  .acordeon > summary { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .acordeon > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .acordeon-resumen { grid-column: 1; margin-left: 0; text-align: left; font-size: 13px; }
  .pie { padding: 16px 0 18px; font-size: 12.5px; line-height: 1.45; }
}
/* WhatsApp flotante de 48 px que no tapa el final de la pagina. */
@media (max-width: 560px) {
  html:not(.modo-feria) .wa-flotante {
    width: 48px; height: 48px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  }
  html:not(.modo-feria) .wa-flotante svg { width: 26px; height: 26px; }
  html:not(.modo-feria) body:not(.en-resultado) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
/* 360-400 px: un punto menos en las acciones del paso, para que "← Atrás" y
   "Registrar mi solicitud →" quepan en un renglon a 375. */
@media (max-width: 400px) {
  .acciones-paso .btn { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-inversion, .acordeon > summary::after { transition: none; }
}
/* El molde en 3D (public/js/molde3d.js, oct-2026): lienzo oscuro como la camara,
   deslizadores para abrirlo y cortarlo, y su leyenda. */
.molde3d { margin: 0 0 6px; }
.molde3d-espera { margin: 0; padding: 40px 12px; text-align: center; color: var(--rx-tenue); font-size: 13px; }
/* Ronda A de Meximold (#22): radio 0 como la camara, la fase como etiqueta
   del sistema y los deslizadores en negro (el rojo es solo de la accion). */
.molde3d-marco { position: relative; border-radius: var(--radio-0, 0); overflow: hidden; background: var(--rx-visor-fondo); }
.molde3d-lienzo { display: block; width: 100%; height: 360px; cursor: grab; touch-action: pan-y; }
.molde3d-lienzo:active { cursor: grabbing; }
.molde3d-lienzo:focus-visible { outline: 3px solid var(--foco, #94161e); outline-offset: -3px; }
.molde3d-fase { position: absolute; left: 10px; top: 10px; margin: 0; padding: 4px 9px; border-radius: var(--radio-1, 4px);
  background: rgba(0, 0, 0, .58); color: #f2f2ee; pointer-events: none;
  font: var(--peso-display, 600) var(--t-12, 12px)/1.3 var(--fuente-display, var(--rx-display));
  letter-spacing: var(--tracking-etiqueta, .1em); text-transform: uppercase; }
.molde3d-mandos { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0 2px; }
.molde3d-control { display: flex; align-items: center; gap: 8px; font-size: 13px; flex: 1 1 200px; min-width: 0; }
.molde3d-control input[type="range"] { flex: 1; min-width: 0; accent-color: var(--tmg-negro, #141414); }
.molde3d-ciclo { white-space: nowrap; }

/* ---------- El molde en 3D a la vista (pedido del dueno, 11-oct-2026) ----------
   "Ya no estamos viendo el layout del molde ni la apertura ni el ciclo": el
   molde (abrir, corte, ver el ciclo), el ciclo por etapa y el layout en planta
   van en su propia seccion, abierta, justo despues del DFM. En escritorio
   ocupa la columna del DFM; la tarjeta de inversion sigue fija a la derecha. */
@media (min-width: 900px) {
  .res-rejilla.con-molde:not(.res-demo) { grid-template-areas: "dfm lateral" "molde lateral" "acordeones lateral"; }
  .res-rejilla.con-molde:not(.res-demo) > .res-molde { grid-area: molde; }
}
.res-molde {
  min-width: 0; background: var(--rx-superficie); border: 1px solid var(--rx-borde); border-radius: 8px;
  padding: 18px 20px 16px; container-type: inline-size; scroll-margin-top: 84px;
}
.res-molde-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 12px; }
.res-molde-titulo { flex: 1 1 260px; min-width: 0; }
.res-molde-cab h2 { margin: 0; font: 600 25px/1.1 var(--rx-display); letter-spacing: 0; color: var(--rx-negro); }
.res-molde-sub { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--rx-tinta-2); }
/* El ciclo junto al visor: etiquetas del sistema y la cifra en grande. */
.res-molde-datos { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; }
.res-molde-dato { min-width: 0; padding: 0 18px 0 14px; box-shadow: -1px 0 0 var(--rx-borde); }
.res-molde-dato:last-child { padding-right: 0; }
.res-molde-dato dt {
  margin: 0 0 3px; font: 600 12px/1.2 var(--rx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rx-tenue);
}
.res-molde-dato dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.res-molde-dato b { font: 600 24px/1.1 var(--rx-display); color: var(--rx-negro); }
.res-molde-dato span { font-size: 13.5px; color: var(--rx-tinta-2); }
/* El lugar del visor desde el principio (proporcion del lienzo de
   molde3d.js): el resultado no brinca cuando el molde se arma al llegar. */
.res-molde .molde3d-espera {
  display: grid; place-items: center; aspect-ratio: 1.6 / 1; min-height: 260px; max-height: 460px;
  padding: 0; background: var(--rx-visor-fondo); color: var(--rx-visor-texto);
}
/* Revision 11-oct-2026: mientras se arma, tambien el lugar de los mandos
   (abrir, corte, ver el ciclo) y la leyenda que entran con el molde; antes el
   resultado crecia ~108 px en escritorio y en el stand, ~307 en el celular. */
.res-molde .molde3d:has(> .molde3d-armando) { padding-bottom: 108px; }
/* Sin el modulo del molde (la red del recinto): el aviso y "Reintentar". */
.res-molde .molde3d-sin-modulo { width: 100%; align-content: center; gap: 12px; padding: 16px; text-align: center; }
/* Con el ciclo por definir, su nota va bajo el dato (sin columna del ciclo). */
.res-molde > .res-molde-nota-ciclo { margin: -4px 0 12px; }
/* Controles a medida de dedo (44 px) en el celular y en la tablet del stand. */
.res-molde .molde3d-mandos { gap: 6px 22px; margin-top: 10px; }
.res-molde .molde3d-control { min-height: var(--toque, 44px); font-size: 14px; }
.res-molde .molde3d-control input[type="range"] { height: var(--toque, 44px); margin: 0; cursor: pointer; }
.res-molde .molde3d-ciclo { min-height: var(--toque, 44px); padding: 8px 18px; font-size: 15px; }
.res-molde .molde3d-leyenda { margin-bottom: 0; }
.res-molde-pie {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; align-items: start;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rx-borde);
}
.res-molde-pie .layout-titulo { margin-top: 0; }
/* El plano en planta (revision molde-portamolde, 14-oct-2026): a todo el
   ancho de la seccion, debajo del ciclo (a media columna se veia de ~300 px en
   la tablet y no se leian cotas ni simbolos). cotizar.js fija el ancho y el
   tope de alto (dibujarPlano); el alto sigue la proporcion del lienzo. */
.res-molde .layout-lienzo { width: auto; max-width: 100%; height: auto; max-height: none; margin: 0 auto; }
.plano-rotulo { margin: 8px 0 2px; font-size: 13px; font-weight: 600; color: var(--rx-tinta, #1f1f1d); text-align: center; }
.plano-revisar { margin: 2px 0 4px; text-align: center; }
/* Angosta (menos de 480 px), la planta no escribe E y S junto al agua: la
   leyenda tampoco (dibujarPlano pone .plano-angosto en su contenedor). */
.plano-angosto .plano-es { display: none; }
.plano-leyenda li { align-items: center; }
.plano-simbolo { width: 16px; height: 16px; flex: 0 0 16px; }
.res-molde > .nota-pie { margin-top: 12px; }
@container (max-width: 520px) {
  .res-molde-cab { align-items: flex-start; }
  .res-molde .molde3d-control { flex-basis: 100%; }
  .res-molde .molde3d-ciclo { width: 100%; }
  .res-molde .molde3d:has(> .molde3d-armando) { padding-bottom: 290px; }
}
@media (max-width: 560px) {
  .res-molde { padding: 16px; }
  .res-molde-cab h2 { font-size: 23px; }
  .res-molde-sub { font-size: 13.5px; }
  .res-molde-datos { width: 100%; }
  .res-molde-dato:first-child { padding-left: 0; box-shadow: none; }
  .res-molde-dato b { font-size: 22px; }
}

/* ==========================================================================
   Candado del PDF (16-oct-2026, js/contacto-pdf.js): «Confirma tu WhatsApp
   para descargar tu PDF». Ocupa el lugar del boton del PDF en la tarjeta
   lateral. El boton de WhatsApp es el unico lleno de la tarjeta (el rojo del
   PDF vuelve al confirmarse). A 375 px cabe sin desplazamiento horizontal.
   ========================================================================== */
/* Los botones del PDF se esconden con [hidden] mientras se ve la tarjeta: .btn
   pone display y le ganaba al estilo del navegador para [hidden]. */
.asistente [hidden] { display: none !important; }
.contacto-pdf {
  margin-top: 12px; padding: 14px 0 0; border-top: 1px solid var(--rx-borde); min-width: 0;
}
.contacto-pdf-titulo { margin: 0 0 6px; font: 600 21px/1.2 var(--rx-display); color: var(--rx-negro); text-wrap: balance; }
.contacto-pdf-texto { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--rx-tinta-2); }
.contacto-pdf-codigo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border: 1.5px dashed var(--rx-borde-control); border-radius: 4px;
  background: var(--rx-superficie-2);
}
.contacto-pdf-cifra {
  font: 600 clamp(26px, 7vw, 32px)/1 var(--rx-display); letter-spacing: .06em; color: var(--rx-negro);
  overflow-wrap: anywhere; user-select: all;
}
.res-lateral .contacto-pdf-copiar { margin-top: 0; min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn-wa-lleno {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--verde, #1b6e46); color: #fff; border: 0; text-decoration: none; font-weight: 600;
}
.btn-wa-lleno:hover { background: #155a39; color: #fff; }
.btn-wa-lleno:focus-visible { outline: 3px solid var(--rx-foco); outline-offset: 2px; }
/* El QR solo en pantalla ancha (computadora); en el celular se toca el boton.
   Por ancho, sin olfatear el navegador. */
.contacto-pdf-qr { display: none; }
@media (min-width: 641px) {
  .contacto-pdf-qr { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: center; margin-top: 12px; }
  .contacto-pdf-qr svg { width: 116px; height: 116px; display: block; border: 1px solid var(--rx-borde); }
  .contacto-pdf-qr p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--rx-tinta-2); }
}
.contacto-pdf-nota, .contacto-pdf-privacidad { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--rx-tenue); }
.contacto-pdf-estado { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--rx-tinta); }
/* La salida por el folio (a los 2 min sin confirmar, o al vencer). */
.contacto-pdf-ayuda { margin: 6px 0 0; font-size: 14px; }
.contacto-pdf-ayuda a { color: var(--rx-accion); font-weight: 600; text-decoration: underline; }
.contacto-pdf-listo {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 4px;
  font-size: 14.5px; font-weight: 600; color: var(--verde, #1b6e46); background: var(--verde-100, #e3f1e8);
}
.contacto-pdf-hecho { padding-top: 12px; }
/* «¿Quisiste decir ana@gmail.com?» bajo el correo del paso 3. */
.sugerencia-correo .enlace-sugerencia {
  padding: 0; border: 0; background: none; font: inherit; color: var(--rx-accion); text-decoration: underline; cursor: pointer;
}
.retomar-pdf .res-lateral { max-width: 420px; margin-top: 14px; }

/* Imprimir la pantalla (Ctrl+P, «Guardar como PDF») tampoco entrega la
   cotizacion mientras la tarjeta del codigo espera (correccion C1): con
   body.contacto-pendiente, que contacto-pdf.js pone solo con la tarjeta a la
   vista, la hoja sale con el aviso y sin precio, DFM, laminas ni molde. Sin
   tarjeta (candado apagado, resultados sin boton de PDF, error de red) la
   pagina se imprime como antes (revision del 16-oct-2026). */
@media print {
  body.contacto-pendiente .asistente #vista > * { display: none !important; }
  body.contacto-pendiente .asistente #vista::before {
    content: "Para imprimir o descargar tu cotización, confirma tu WhatsApp en la página del cotizador.";
    display: block; padding: 24px 0; font: 600 20px/1.35 var(--rx-texto); color: #000;
  }
  .contacto-pdf, .wa-flotante { display: none !important; }
}