@font-face{font-family:'Kumbh Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/kumbh-sans-400.woff2?v=9b55795242) format('woff2')}
@font-face{font-family:'Kumbh Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fuentes/kumbh-sans-500.woff2?v=2edd0bfcfc) format('woff2')}
@font-face{font-family:'Kumbh Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fuentes/kumbh-sans-700.woff2?v=15c33233b4) format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/bebas-neue-400.woff2?v=02f5dfc0c2) format('woff2')}
/* Tokens de los informes MINIPET: los 8 temas de visualización (aprobados el 2026-10-11).
   Claros: Cristalino (por defecto), Polar, Profundo y Contraste. Oscuros: Marino (por defecto), Medianoche, Pizarra
   y Contraste oscuro. <html data-v="…"> dice cuál se ve (lo pone tema_inicial.js antes de pintar). Cualquier
   elemento con data-v toma los colores de ese tema (sirve para muestras).

   Colores de marca (Visual Brandbook): Azul marino profundo #02184F, Azul plástico #5D6BFF, Cian planeta #B7F7FF,
   Cristalino #F0F4FC. Un color nuevo se agrega aquí en los ocho temas a la vez; ningún informe escribe colores
   fijos. pruebas/probar_contraste.py mide los contrastes de cada tema.

   Familias:
   --bg --surface --surface-2 --line --line-2 --shade       fondo, tarjeta, tarjeta secundaria, bordes, fondo de ventanas
   --ink --ink-2 --ink-3                                    texto principal, secundario y notas
   --brand --franja                                         títulos; franja decorativa (línea bajo el título)
   --logo --side-logo                                       color del logo en el contenido y en el menú lateral
   --acento --acento-txt --acento-suave                     pestaña activa, botones elegidos, foco
   --side --side-ink --side-act --side-act-ink --side-marca menú lateral (--side-marca: raya de la sección activa)
   --good --warn --bad (+ -bg)                              SOLO estados (bien, atención, mal)
   --g-real --g-meta --g-ant --c1…--c5                      gráficos: lo real, la meta (discontinua), el año anterior
   --tip-bg --tip-ink --concl-bg                            tooltip, fondo de la conclusión */

:root,[data-v="cristalino"]{
  --bg:#F0F4FC;--surface:#FFFFFF;--surface-2:#F5F7FD;--line:#DCE3F1;--line-2:#C3CDE3;--shade:rgba(2,24,79,.40);
  --ink:#0B1A44;--ink-2:#46526F;--ink-3:#5A6584;
  --brand:#02184F;--franja:#5D6BFF;--logo:#02184F;
  --acento:#3D49D6;--acento-txt:#FFFFFF;--acento-suave:#E8EBFF;
  --side:#FFFFFF;--side-ink:#46526F;--side-act:#E8EBFF;--side-act-ink:#2A35B8;--side-logo:#02184F;--side-marca:#3D49D6;
  --good:#1F7A55;--good-bg:#E6F4EC;--warn:#8A5A00;--warn-bg:#FBF1DC;--bad:#B3261E;--bad-bg:#FCEBEA;
  --g-real:#5D6BFF;--g-meta:#A86400;--g-ant:#6F7B8F;--c1:#5D6BFF;--c2:#0E8FA3;--c3:#02184F;--c4:#A86400;--c5:#8E99AE;
  --tip-bg:#02184F;--tip-ink:#FFFFFF;--concl-bg:#EDF1FB;
  color-scheme:light;
}
[data-v="polar"]{
  --bg:#F5F6F8;--surface:#FFFFFF;--surface-2:#F7F8FA;--line:#E3E5EA;--line-2:#C9CDD5;--shade:rgba(10,12,16,.38);
  --ink:#15171C;--ink-2:#4B5160;--ink-3:#5E6472;
  --brand:#15171C;--franja:#15171C;--logo:#000000;
  --acento:#15171C;--acento-txt:#FFFFFF;--acento-suave:#EEEFF2;
  --side:#FFFFFF;--side-ink:#4B5160;--side-act:#EEEFF2;--side-act-ink:#000000;--side-logo:#000000;--side-marca:#000000;
  --good:#1F7A55;--good-bg:#E6F4EC;--warn:#8A5A00;--warn-bg:#FBF1DC;--bad:#B3261E;--bad-bg:#FCEBEA;
  --g-real:#5D6BFF;--g-meta:#A86400;--g-ant:#787E8B;--c1:#5D6BFF;--c2:#0E8FA3;--c3:#15171C;--c4:#A86400;--c5:#9AA0AC;
  --tip-bg:#15171C;--tip-ink:#FFFFFF;--concl-bg:#F1F2F4;
  color-scheme:light;
}
[data-v="profundo"]{
  --bg:#F0F4FC;--surface:#FFFFFF;--surface-2:#F5F7FD;--line:#DCE3F1;--line-2:#C3CDE3;--shade:rgba(2,24,79,.40);
  --ink:#0B1A44;--ink-2:#46526F;--ink-3:#5A6584;
  --brand:#02184F;--franja:#5D6BFF;--logo:#02184F;
  --acento:#02184F;--acento-txt:#B7F7FF;--acento-suave:#E3E8F5;
  --side:#02184F;--side-ink:#C9D6F0;--side-act:#0F2A6E;--side-act-ink:#B7F7FF;--side-logo:#B7F7FF;--side-marca:#B7F7FF;
  --good:#1F7A55;--good-bg:#E6F4EC;--warn:#8A5A00;--warn-bg:#FBF1DC;--bad:#B3261E;--bad-bg:#FCEBEA;
  --g-real:#5D6BFF;--g-meta:#A86400;--g-ant:#6F7B8F;--c1:#5D6BFF;--c2:#0E8FA3;--c3:#02184F;--c4:#A86400;--c5:#8E99AE;
  --tip-bg:#02184F;--tip-ink:#B7F7FF;--concl-bg:#EDF1FB;
  color-scheme:light;
}
[data-v="contraste"]{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F3F5F9;--line:#8C93A3;--line-2:#5B6478;--shade:rgba(0,8,20,.50);
  --ink:#000814;--ink-2:#1F2A44;--ink-3:#3A4560;
  --brand:#02184F;--franja:#02184F;--logo:#02184F;
  --acento:#02184F;--acento-txt:#FFFFFF;--acento-suave:#E3E8F5;
  --side:#FFFFFF;--side-ink:#1F2A44;--side-act:#02184F;--side-act-ink:#FFFFFF;--side-logo:#02184F;--side-marca:#02184F;
  --good:#0F6B49;--good-bg:#E3F2EA;--warn:#6E4700;--warn-bg:#FAEED3;--bad:#9A1F18;--bad-bg:#FBE6E4;
  --g-real:#3D49D6;--g-meta:#8A4F00;--g-ant:#5B6478;--c1:#3D49D6;--c2:#0B6E7D;--c3:#02184F;--c4:#8A4F00;--c5:#5B6478;
  --tip-bg:#000814;--tip-ink:#FFFFFF;--concl-bg:#F3F5F9;
  color-scheme:light;
}
[data-v="marino"]{
  --bg:#020F33;--surface:#0A2160;--surface-2:#0D276C;--line:#1E3573;--line-2:#2E4889;--shade:rgba(0,4,20,.62);
  --ink:#EEF4FF;--ink-2:#B5C2E0;--ink-3:#9AA9CB;
  --brand:#B7F7FF;--franja:#5D6BFF;--logo:#B7F7FF;
  --acento:#B7F7FF;--acento-txt:#02184F;--acento-suave:#123073;
  --side:#041645;--side-ink:#B5C2E0;--side-act:#123073;--side-act-ink:#B7F7FF;--side-logo:#B7F7FF;--side-marca:#B7F7FF;
  --good:#5FD08A;--good-bg:#0E3A2E;--warn:#FFC24D;--warn-bg:#3A2E0A;--bad:#FF8A80;--bad-bg:#43161C;
  --g-real:#8B95FF;--g-meta:#FFC24D;--g-ant:#9BB4C9;--c1:#8B95FF;--c2:#B7F7FF;--c3:#FFC24D;--c4:#9BB4C9;--c5:#5A6E9E;
  --tip-bg:#B7F7FF;--tip-ink:#02184F;--concl-bg:#0D276C;
  color-scheme:dark;
}
[data-v="medianoche"]{
  --bg:#0B0D12;--surface:#14171F;--surface-2:#1A1E28;--line:#262B36;--line-2:#3A4150;--shade:rgba(0,0,0,.66);
  --ink:#EEF1F6;--ink-2:#B3B9C6;--ink-3:#9AA1AF;
  --brand:#EEF1F6;--franja:#5D6BFF;--logo:#FFFFFF;
  --acento:#B7F7FF;--acento-txt:#02184F;--acento-suave:#1B2633;
  --side:#02184F;--side-ink:#C9D6F0;--side-act:#0F2A6E;--side-act-ink:#B7F7FF;--side-logo:#B7F7FF;--side-marca:#B7F7FF;
  --good:#5FD08A;--good-bg:#10301F;--warn:#FFC24D;--warn-bg:#332A0E;--bad:#FF8A80;--bad-bg:#3A1717;
  --g-real:#8B95FF;--g-meta:#FFC24D;--g-ant:#9BA3AF;--c1:#8B95FF;--c2:#B7F7FF;--c3:#FFC24D;--c4:#9BA3AF;--c5:#4B5160;
  --tip-bg:#B7F7FF;--tip-ink:#02184F;--concl-bg:#1A1E28;
  color-scheme:dark;
}
[data-v="pizarra"]{
  --bg:#171C26;--surface:#1F2531;--surface-2:#252C3A;--line:#303848;--line-2:#465064;--shade:rgba(5,8,14,.62);
  --ink:#E3E8F0;--ink-2:#AEB7C7;--ink-3:#99A3B5;
  --brand:#E3E8F0;--franja:#A3ADFF;--logo:#FFFFFF;
  --acento:#A3ADFF;--acento-txt:#121620;--acento-suave:#2A3246;
  --side:#121620;--side-ink:#AEB7C7;--side-act:#252C3A;--side-act-ink:#C7CDFF;--side-logo:#FFFFFF;--side-marca:#C7CDFF;
  --good:#5FD08A;--good-bg:#173226;--warn:#FFC24D;--warn-bg:#352C14;--bad:#FF8A80;--bad-bg:#3C1E22;
  --g-real:#A3ADFF;--g-meta:#FFC24D;--g-ant:#9BB4C9;--c1:#A3ADFF;--c2:#B7F7FF;--c3:#FFC24D;--c4:#9BB4C9;--c5:#5A6478;
  --tip-bg:#E3E8F0;--tip-ink:#121620;--concl-bg:#1B2130;
  color-scheme:dark;
}
[data-v="contraste-oscuro"]{
  --bg:#000000;--surface:#0A0A0A;--surface-2:#141414;--line:#8C93A3;--line-2:#B3B8C2;--shade:rgba(0,0,0,.78);
  --ink:#FFFFFF;--ink-2:#E6E9EF;--ink-3:#C9CED8;
  --brand:#FFFFFF;--franja:#B7F7FF;--logo:#FFFFFF;
  --acento:#B7F7FF;--acento-txt:#000000;--acento-suave:#1A2A2E;
  --side:#000000;--side-ink:#E6E9EF;--side-act:#B7F7FF;--side-act-ink:#000000;--side-logo:#FFFFFF;--side-marca:#B7F7FF;
  --good:#7CE3A4;--good-bg:#0E2A1B;--warn:#FFD166;--warn-bg:#2E2507;--bad:#FF9C94;--bad-bg:#331311;
  --g-real:#A3ADFF;--g-meta:#FFD166;--g-ant:#C9CED8;--c1:#A3ADFF;--c2:#B7F7FF;--c3:#FFD166;--c4:#C9CED8;--c5:#6B7280;
  --tip-bg:#FFFFFF;--tip-ink:#000000;--concl-bg:#141414;
  color-scheme:dark;
}
:root{
  --r:12px;--rapido:100ms;--medio:160ms;--vista:180ms;
  --body:'Halcom',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --especial:'Bebas Neue','Halcom',sans-serif;
}

/* Componentes comunes de los informes MINIPET: botones de la barra superior, selector de tema, buscador Ctrl+K,
   indicadores que encajan en el celular, logo según el tema y movimiento. Solo usa los tokens de tokens.css.
   Va DESPUÉS del CSS propio de cada informe. Clases con prefijo mpc- para no chocar con las de los informes. */

body{transition:background-color var(--medio),color var(--medio)}
.mpc-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Logo: SVG en línea con fill:currentColor; el color sale del tema (--side-logo en el menú, --logo en el contenido) */
.mpc-logo{display:block;height:auto;color:var(--logo);fill:currentColor}
/* Base del marco (2026-10-12): sin el margen de 8 px del navegador y el menú con su ancho exacto (--mp-sidebar
   incluye el relleno). Varios informes nuevos copiaron el marco sin esto y la barra superior quedó corrida; aquí,
   al final del CSS, vale para todos. control.js lo vigila. */
body{margin:0}
.mp-sidebar{box-sizing:border-box}
.mp-sidebar .mpc-logo,.mpc-logo.en-menu{color:var(--side-logo)}

/* Botones de la barra superior (Buscar, Tema) */
.mpc-acciones{display:flex;align-items:center;gap:8px}
.mpc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);cursor:pointer;
  font:500 13px var(--body);white-space:nowrap}
.mpc-btn:hover{border-color:var(--line-2);color:var(--ink);background:var(--surface-2)}
.mpc-btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.mpc-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mpc-btn kbd{font:500 11px var(--body);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-3);background:var(--surface-2)}

/* Selector de tema: menú desplegable bajo su botón */
.mpc-tema{position:relative}
.mpc-tema-btn{padding:0;width:44px;border-radius:999px}
.mpc-tema-btn svg path{fill:currentColor;stroke:none}
.mpc-tema-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:85;min-width:270px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - 120px);overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.22);padding:6px;animation:mpc-emerger var(--medio) ease-out;transform-origin:top right}
.mpc-tema-menu[hidden]{display:none}
.mpc-tema-grupo{margin:6px 8px 2px;font:500 12px var(--body);color:var(--ink-3)}
.mpc-tema-grupo:not(:first-child){padding-top:8px;border-top:1px solid var(--line)}
.mpc-tema-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:8px;
  background:none;color:var(--ink);cursor:pointer;text-align:left;font:400 14px var(--body)}
.mpc-tema-menu button:hover,.mpc-tema-menu button:focus-visible{background:var(--surface-2);outline:none}
.mpc-tema-menu button:focus-visible{box-shadow:inset 0 0 0 2px var(--acento)}
.mpc-tema-menu [aria-checked="true"]{font-weight:600}
.mpc-tema-ok{width:14px;flex:none;font-weight:700;color:var(--acento);visibility:hidden}
.mpc-tema-menu [aria-checked="true"] .mpc-tema-ok{visibility:visible}
.mpc-tema-menu small{color:var(--ink-3);font-weight:400}
.mpc-tema-sw{display:inline-flex;gap:2px;flex:none}
.mpc-tema-sw i{width:7px;height:14px;border-radius:2px;outline:1px solid var(--line-2)}

/* Buscador Ctrl+K */
.mpc-velo{position:fixed;inset:0;z-index:95;background:var(--shade);display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 16px 16px}
.mpc-bus{width:min(600px,100%);max-height:76vh;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.28);animation:mpc-emerger var(--medio) ease-out}
.mpc-bus-cab{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--line)}
.mpc-bus-cab>svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.mpc-bus-cab input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:400 16px var(--body);padding:12px 4px;outline:none}
.mpc-bus-cab input::placeholder{color:var(--ink-3)}
.mpc-bus-cerrar{width:44px;height:44px;flex:none;border:0;border-radius:10px;background:none;color:var(--ink-2);cursor:pointer;font-size:16px}
.mpc-bus-cerrar:hover{background:var(--surface-2)}
.mpc-bus-cerrar:focus-visible{outline:2px solid var(--acento)}
.mpc-bus-res{list-style:none;margin:0;padding:6px;overflow-y:auto}
.mpc-bus-res li{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:9px;cursor:pointer;font:400 14px var(--body)}
.mpc-bus-res li small{margin-left:auto;color:var(--ink-3);font-size:12px;text-align:right}
.mpc-bus-res li[aria-selected="true"]{background:var(--acento-suave);color:var(--ink)}
.mpc-bus-res .mpc-bus-vacio{color:var(--ink-3);cursor:default}
.mpc-bus-pie{margin:0;padding:8px 14px;border-top:1px solid var(--line);font:400 12px var(--body);color:var(--ink-3)}
.mpc-velo.con-zoom{padding:0;align-items:stretch;justify-content:stretch;right:auto;bottom:auto}
.mpc-velo.con-zoom .mpc-bus{width:100%;max-height:none;height:100%;border-radius:0}

/* Indicadores que encajan en el celular */
.mpc-puntos{display:none}
@media (max-width:560px){
  .kpis.carrusel{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*var(--mp-margen,14px));
    padding:0 var(--mp-margen,14px) 4px;scroll-padding-inline:var(--mp-margen,14px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kpis.carrusel::-webkit-scrollbar{display:none}
  .kpis.carrusel>.kpi{flex:0 0 86%;scroll-snap-align:start;min-width:0}
  .mpc-puntos{display:flex;justify-content:center;gap:0;margin:-8px 0 14px}
  .mpc-puntos button{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .mpc-puntos button span{width:8px;height:8px;border-radius:4px;background:var(--line-2);transition:width var(--medio),background var(--medio)}
  .mpc-puntos button[aria-current="true"] span{width:20px;background:var(--acento)}
  .mpc-btn kbd,.mpc-btn .mpc-txt{display:none}
  .mpc-btn{padding:0;width:44px}
  .mpc-velo{padding:0;align-items:stretch}
  .mpc-bus{max-height:none;height:100%;width:100%;border-radius:0;animation-name:mpc-hoja}
}

/* ---- Bloque 2 (2026-10-11) ------------------------------------------------------------------------------ */

/* Logo en el celular: mc.logo_movil() lo pone arriba del título; se ve solo cuando el menú lateral es cajón */
.mpc-marca-movil{display:none;justify-content:center;margin:0 0 14px}
.mpc-marca-movil .mpc-logo{width:112px;color:var(--logo)}
@media (max-width:1050px){.mpc-marca-movil{display:flex}}

/* Estado de los datos (mc.estado): ícono + texto, nunca solo color */
.mpc-estado{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font:500 12px var(--body);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);white-space:nowrap}
.mpc-estado.ok{background:var(--good-bg);color:var(--good);border-color:transparent}
.mpc-estado.curso{background:var(--acento-suave);color:var(--ink);border-color:transparent}
.mpc-estado.aviso{background:var(--warn-bg);color:var(--warn);border-color:transparent}

/* Foco: con teclado se ve también cuando llega por código (título al cambiar de sección) */
html[data-entrada="teclado"] :focus{outline:2px solid var(--acento);outline-offset:3px}
html[data-entrada="puntero"] :focus:not(:focus-visible){outline:none}

/* Cierre de sección */
.mpc-cierre{margin:28px 0 8px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.mpc-cierre-datos{margin:0;font:400 12px/1.6 var(--body);color:var(--ink-3)}
.mpc-cierre-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mpc-cierre-nav .mpc-btn{max-width:100%;white-space:normal;text-align:left}
@media (max-width:560px){.mpc-cierre-rot{display:none}.mpc-cierre-nav .mpc-btn{flex:1 1 0;padding:0 10px}}

/* Botón del chat en el celular: solo el círculo; se esconde al bajar (chat_boton.js) */
.chat-abrir{transition:translate .18s ease-out,opacity .18s ease-out,box-shadow .15s}
.chat-abrir.mpc-oculto{translate:0 calc(100% + 28px);opacity:0;pointer-events:none}
@media (max-width:560px){
  .chat-abrir{width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center;border-radius:50%}
  .chat-abrir>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Tablas como tarjetas en el celular (table.mpc-tarjetas, tarjetas.js) */
@media (max-width:560px){
  :where(.tabla-wrap,.tabla):has(> table.mpc-tarjetas){border:0;border-radius:0;overflow:visible}
  table.mpc-tarjetas{min-width:0!important;width:100%;border-collapse:separate}
  table.mpc-tarjetas>thead{display:none}
  table.mpc-tarjetas>tbody,table.mpc-tarjetas>tfoot,table.mpc-tarjetas>tbody>tr,table.mpc-tarjetas>tfoot>tr{display:block}
  table.mpc-tarjetas>tbody>tr,table.mpc-tarjetas>tfoot>tr{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:10px 12px;background:var(--surface)}
  table.mpc-tarjetas>tfoot>tr{border-width:2px;border-color:var(--line-2)}
  table.mpc-tarjetas>tbody>tr>td,table.mpc-tarjetas>tfoot>tr>td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;border:0;
    white-space:normal!important;position:static!important;box-shadow:none!important;min-width:0!important;max-width:none!important;
    width:auto!important;text-align:right;background:transparent!important}
  table.mpc-tarjetas>tbody>tr>td::before,table.mpc-tarjetas>tfoot>tr>td::before{content:attr(data-rotulo);flex:0 1 auto;text-align:left;color:var(--ink-3);font:400 12px var(--body)}
  table.mpc-tarjetas>tbody>tr>td:first-child,table.mpc-tarjetas>tfoot>tr>td:first-child{display:block;text-align:left;font-weight:600;font-size:15px;padding-bottom:6px;margin-bottom:4px;
    border-bottom:1px solid var(--line)}
  table.mpc-tarjetas>tbody>tr>td:first-child::before,table.mpc-tarjetas>tfoot>tr>td:first-child::before,table.mpc-tarjetas>*>tr>td[data-rotulo=""]::before{content:none}
  table.mpc-tarjetas>*>tr>td.mpc-clave{font-size:16px;font-weight:600}
  table.mpc-tarjetas>*>tr>td.mpc-celda-entera{display:block;text-align:left;font-weight:inherit;font-size:inherit;border-bottom:0;
    padding:6px 0 0;margin:0;overflow-x:auto;max-width:100%}
  table.mpc-tarjetas>*>tr>td.mpc-celda-entera::before{content:none}
  table.mpc-tarjetas>tbody>tr[hidden],table.mpc-tarjetas>tbody>tr.fila-detalle-oculta:not(.abierta){display:none}
}

/* Barra de avance de lectura (lectura.js): 3 px arriba, solo en páginas de más de 2,5 pantallas, sin toques */
.mpc-lectura{position:fixed;left:0;right:0;top:0;height:calc(3px + env(safe-area-inset-top,0px));z-index:96;pointer-events:none;
  background:var(--franja);transform-origin:0 50%;transform:scaleX(0);display:none}
.mpc-lectura.activa{display:block}
@keyframes mpc-lectura{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mpc-lectura.mpc-lectura-css{animation:mpc-lectura linear both;animation-timeline:scroll(root block)}

/* Zoom de dedos (zoom.js): el cajón del menú y el selector de periodo fijos llenan el área visible */
.mp-sidebar.con-zoom,.mp-selector.con-zoom{overflow-y:auto;border-radius:0;max-height:none;box-sizing:border-box}
.mp-selector.con-zoom{padding:16px}
.mp-sidebar .mp-close{min-width:44px;min-height:44px}
[data-mpc-zoom].con-zoom{padding:8px;inset:auto}

/* Pie común (sesion.js): vínculo al Portal y «Sesión: correo» */
.mpc-pie{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;width:100%;margin-top:6px;font:400 12.5px/1.6 var(--body);color:var(--ink-3)}
.mpc-pie-portal{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--acento);font-weight:500;text-decoration:none}
.mpc-pie-portal:hover{text-decoration:underline;text-underline-offset:3px}
.mpc-pie-portal:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}
footer:has(> .mpc-pie),.mp-footer:has(> .mpc-pie){flex-wrap:wrap}
footer > .mpc-pie{flex:1 1 100%;padding-top:8px;border-top:1px solid var(--line)}
.mpc-pie-propio{max-width:1180px;margin:0 auto;padding:12px 24px 28px}
@media (max-width:560px){.mpc-pie-propio{padding-inline:16px}}

/* Barra superior fija al bajar, solo en escritorio (> 1050 px, cuando el menú no es cajón): como en Cocorollo.
   En celular y tableta no se fija, por la regla del zoom de dedos del iPhone. scroll-padding evita que un destino
   (#ancla, foco) quede debajo de la barra. */
@media (min-width:1051px){
  .mp-topbar{position:sticky;top:0;z-index:40}
  html:has(.mp-topbar){scroll-padding-top:88px}
}

/* Movimiento: solo funcional, con transform y opacity */
/* mpc-aparecer entra 4 px desde abajo; movimiento.js cambia el lado (--mpc-dx, --mpc-dy) según hacia dónde se fue */
@keyframes mpc-aparecer{from{opacity:0;transform:translate(var(--mpc-dx,0px),var(--mpc-dy,4px))}to{opacity:1;transform:none}}
@keyframes mpc-emerger{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@keyframes mpc-hoja{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.vista.activa,.subvista.activa,.vista:not(.oculta),.mp-seccion:not([hidden]){animation:mpc-aparecer var(--vista) ease-out}
.modal-overlay.mostrar .modal-pedido{animation:mpc-emerger var(--medio) ease-out}
.mpc-btn,.mp-sidebar .tab,.atajo,.ver-detalle,.mp-periodo-boton,.tabs-nivel3 .tab{transition:transform 80ms,background-color var(--rapido),color var(--rapido),border-color var(--rapido)}
.mpc-btn:active,.mp-sidebar .tab:active,.atajo:active,.ver-detalle:active,.mp-periodo-boton:active,.tabs-nivel3 .tab:active{transform:translateY(1px) scale(.985)}

/* Transiciones (movimiento.js, View Transitions). La página nueva se funde sobre la vieja: lo que no cambió no se
   nota, lo que cambió se funde y la vista nueva entra con mpc-aparecer desde el lado. La raya de la pestaña viaja
   (mpc-raya) y la de la pestaña real se esconde mientras tanto. */
@media not (prefers-reduced-motion:reduce){@view-transition{navigation:auto}}
::view-transition-group(*){animation-duration:240ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
:root.mpc-vt-seccion::view-transition-old(root),:root.mpc-vt-pagina::view-transition-old(root),
:root.mpc-vt-tema::view-transition-old(root){animation:none;mix-blend-mode:normal}
:root.mpc-vt-seccion::view-transition-new(root){animation:mpc-vt-fundir 140ms ease-out both;mix-blend-mode:normal}
:root.mpc-vt-pagina::view-transition-new(root){animation:mpc-vt-fundir 200ms ease-out both;mix-blend-mode:normal}
@keyframes mpc-vt-fundir{from{opacity:0}}
.mpc-vt-raya{position:fixed;z-index:2147483000;pointer-events:none;view-transition-name:mpc-raya}
.mpc-vt-sin-antes [role=tab]::before,.mpc-vt-sin-despues [role=tab]::after{visibility:hidden}
.mpc-vt-sin-borde [role=tab]{border-bottom-color:transparent!important}
::view-transition-group(mpc-raya){animation-duration:260ms}
::view-transition-group(mpc-titulo){animation-duration:380ms}
/* Tema: el nuevo se abre en círculo desde el botón (sin las transiciones de color, que lo harían dos veces) */
:root.mpc-vt-tema::view-transition-new(root){animation:mpc-vt-circulo 420ms cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal}
:root.mpc-vt-tema *{transition:none!important}
@keyframes mpc-vt-circulo{from{clip-path:circle(0 at var(--mpc-cx,50%) var(--mpc-cy,0))}to{clip-path:circle(var(--mpc-cr,150vmax) at var(--mpc-cx,50%) var(--mpc-cy,0))}}
/* «Cómo se calcula» y «Ver más» de la conclusión se despliegan (con interpolate-size, aquí; en Safari, detalles.js) */
.mp-como,.mpc-concl-mas{interpolate-size:allow-keywords}
.mp-como::details-content,.mpc-concl-mas::details-content{block-size:0;overflow-y:clip;transition:block-size 250ms cubic-bezier(.22,1,.36,1),content-visibility 250ms allow-discrete}
.mp-como[open]::details-content,.mpc-concl-mas[open]::details-content{block-size:auto}

/* Tooltips de los gráficos (transitions.dev «Tooltip open/close»): entran con 80 ms de espera (150 ms, sube 4 px),
   viajan de un punto al siguiente (160 ms) y se van al instante. Los informes los muestran con display o hidden. */
.tooltip-grafico,#tooltip.tooltip,#tip,.modal-tip{transition:opacity 150ms ease-out 80ms,translate 150ms ease-out 80ms,
  left 160ms cubic-bezier(.22,1,.36,1),top 160ms cubic-bezier(.22,1,.36,1)}
@starting-style{.tooltip-grafico,#tooltip.tooltip,#tip,.modal-tip{opacity:0;translate:0 4px}}
/* entre un punto y el siguiente sigue a la vista 100 ms para viajar en vez de apagarse (detalles.js) */
.mpc-tip-quedando{display:block!important}
.modal-tip.mpc-tip-quedando{display:flex!important}

/* Avisos cortos (detalles.js · MinipetAviso.mostrar): abajo al centro, sobre el chat */
.mpc-avisos{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.mpc-avisos.con-zoom{bottom:auto;transform-origin:0 0}
.mpc-aviso{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;background:var(--tip-bg);
  color:var(--tip-ink);font:500 14px/1.3 var(--body);box-shadow:0 8px 24px rgba(0,0,0,.22);max-width:100%}
.mpc-aviso-ic{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;
  font:700 11px/1 var(--body)}
.mpc-aviso-tx{min-width:0;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media print{
  .mpc-acciones,.mpc-tema,.mpc-velo,.mpc-puntos,.mpc-avisos,.mpc-cierre,.mpc-marca-movil,.mpc-lectura,.mpc-pie,.mpc-pie-propio{display:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- Bloque 3 (2026-10-11): conclusión, «Cómo se calcula», preguntar, tablas largas y «Guardar en PDF» ---------- */

/* Conclusión de sección (secciones.js · MinipetConclusion, mc.conclusion): resultado, alerta y siguiente paso */
.mp-conclusion{margin:0 0 18px;padding:14px 18px 14px 16px;background:var(--concl-bg);color:var(--ink);border:1px solid var(--line);
  border-left:3px solid var(--franja);border-radius:var(--r,12px);font:400 14.5px/1.55 var(--body)}
.mp-conclusion[hidden]{display:none}
.mp-concl-titulo{margin:0 0 6px;font:500 12px var(--body);color:var(--ink-3);letter-spacing:.02em}
.mp-concl-lista{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.mp-concl-lista li{display:flex;align-items:baseline;gap:10px;max-width:96ch}
.mp-concl-ic{flex:none;width:16px;text-align:center;font-weight:700;color:var(--ink-3)}
.mp-concl-alerta .mp-concl-ic{color:var(--warn)}
.mp-concl-accion .mp-concl-ic{color:var(--acento)}
.mp-concl-tx{min-width:0}
.mp-concl-tx b,.mp-concl-tx strong{font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.mpc-concl-mas{margin-top:6px}
.mpc-concl-mas>summary,.mp-como>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;
  font:500 13.5px var(--body);color:var(--acento);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.mpc-concl-mas>summary::-webkit-details-marker,.mp-como>summary::-webkit-details-marker{display:none}
.mpc-concl-mas>summary::after,.mp-como>summary::after{content:"";width:7px;height:7px;margin:0 2px 3px;border:solid currentColor;
  border-width:0 1.8px 1.8px 0;transform:rotate(45deg);transition:transform var(--rapido)}
.mpc-concl-mas[open]>summary::after,.mp-como[open]>summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.mpc-concl-mas>summary:focus-visible,.mp-como>summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}
.mpc-concl-mas>.mp-concl-lista{padding-top:2px}

/* «Cómo se calcula» (mc.como_se_calcula, MinipetComo.html): el método y los términos de SAG, plegados */
.mp-como{margin:8px 0 14px;color:var(--ink-2)}
.mp-como-cuerpo{padding:4px 0 6px;font:400 13.5px/1.6 var(--body);max-width:100ch}
.mp-como-cuerpo p{margin:0 0 8px}
.mp-como-cuerpo ul,.mp-como-cuerpo ol{margin:0 0 8px;padding-left:1.2em}
.mp-como-cuerpo code{font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.mp-como[open]>.mp-como-cuerpo{animation:mpc-aparecer var(--medio) ease-out}

/* «Preguntar sobre esto» (secciones.js · MinipetPreguntar, mc.preguntar): solo se ve si el informe tiene chat */
.mpc-preguntar{display:none;align-items:center;gap:7px;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--acento);font:500 13px var(--body);cursor:pointer;vertical-align:middle}
html.mpc-con-chat .mpc-preguntar{display:inline-flex}
.mpc-preguntar:hover{border-color:var(--acento)}
.mpc-preguntar:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.mpc-preguntar:active{transform:translateY(1px) scale(.985)}
.mpc-preguntar svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-concl-tx .mpc-preguntar{min-height:32px;padding:3px 11px;margin-left:4px;font-size:12.5px}
@media (pointer:coarse){.mp-concl-tx .mpc-preguntar{min-height:44px}}

/* Tablas largas (tablas_largas.js): encabezado pegado en escritorio y top N + «Ver todo» */
@media (min-width:901px){
  .mpc-alta{max-height:max(360px,calc(100vh - 150px));overflow:auto}
  .mpc-alta>table>thead>tr>th{position:sticky;top:0;z-index:2}
  .mpc-alta>table>thead>tr>th:first-child{z-index:3}
  :where(.mpc-alta>table>thead>tr>th){background-color:var(--surface-2)}
}
@media screen{table>tbody>tr.mpc-top-oculta{display:none}}
.mpc-top-mas{display:flex;justify-content:center;margin:10px 0 4px}
.mpc-top-mas[hidden]{display:none}

/* Botón «Guardar en PDF» y su ventana (pdf.js) */
.mpc-pdf-btn svg{stroke-linejoin:round}
.mpc-pdf-velo{position:fixed;inset:0;z-index:95;background:var(--shade);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px}
.mpc-pdf-velo[hidden]{display:none}
.mpc-pdf-caja{width:min(640px,100%);max-height:84vh;display:flex;flex-direction:column;overflow:auto;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.28);animation:mpc-emerger var(--medio) ease-out}
.mpc-pdf-cab{position:sticky;top:0;z-index:1;display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 12px 22px;background:var(--surface);border-bottom:1px solid var(--line)}
.mpc-pdf-tit h2{margin:4px 0 2px;font:700 21px var(--body);color:var(--brand)}
.mpc-pdf-tit p{margin:0;font:400 13px/1.45 var(--body);color:var(--ink-3)}
.mpc-pdf-acc{display:flex;gap:8px;flex:none}
.mpc-btn.mpc-pdf-guardar{background:var(--acento);color:var(--acento-txt);border-color:var(--acento);font-weight:500}
.mpc-btn.mpc-pdf-guardar:hover{background:var(--acento);color:var(--acento-txt);filter:brightness(1.08)}
.mpc-btn.mpc-pdf-guardar[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.mpc-pdf-x{font-size:16px}
.mpc-pdf-cuerpo{padding:12px 22px 18px}
.mpc-pdf-atajos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.mpc-pdf-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 22px}
.mpc-pdf-grupo{margin:8px 0 0;padding:0;border:0;min-width:0}
.mpc-pdf-grupo legend{padding:0;margin:0 0 2px;font:500 12px var(--body);color:var(--ink-3);letter-spacing:.02em}
.mpc-pdf-op{display:flex;align-items:center;gap:10px;min-height:44px;font:400 14.5px var(--body);cursor:pointer}
.mpc-pdf-op input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--acento)}
.mpc-pdf-subs{margin:-4px 0 4px 30px}
.mpc-pdf-sub{font-size:13.5px;min-height:40px;color:var(--ink-2)}
.mpc-pdf-sub.apagada{opacity:.5}
.mpc-pdf-archivo{margin:14px 0 0;font:500 12.5px var(--body);color:var(--ink-2)}
.mpc-pdf-ios{margin:6px 0 0;font:400 12.5px/1.5 var(--body);color:var(--ink-3)}
.mpc-pdf-vacio{color:var(--ink-3)}
@media (max-width:560px){
  .mpc-pdf-velo{padding:0;align-items:stretch}
  .mpc-pdf-caja{width:100%;max-height:none;height:100%;border-radius:0;animation-name:mpc-hoja}
  .mpc-pdf-cab{flex-direction:column;align-items:stretch;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 16px}
  .mpc-pdf-acc{justify-content:flex-end}
  .mpc-pdf-cuerpo{padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .mp-topbar .mpc-pdf-btn{display:none}
  .mpc-pdf-caja .mpc-btn{width:auto;padding:0 14px}
  .mpc-pdf-caja .mpc-btn.mpc-pdf-x{width:44px;padding:0}
  .mpc-pdf-acc .mpc-pdf-guardar{flex:1 1 auto}
}
.mpc-pdf-menu{display:none;align-items:center;gap:11px;width:100%;min-height:44px;margin:14px 0 0;padding:8px 13px;border:1px solid var(--line);
  border-radius:9px;background:none;color:var(--side-ink);font:500 13px/1.45 var(--body);cursor:pointer;text-align:left}
.mpc-pdf-menu:hover{background:var(--side-act);color:var(--side-act-ink)}
.mpc-pdf-menu:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.mpc-pdf-menu svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.mpc-pdf-menu{display:flex}}
/* Con zoom de dedos (zoom.js: data-mpc-zoom): la ventana llena el área visible y los botones van en su propia fila */
.mpc-pdf-velo.con-zoom{padding:0!important;align-items:stretch;justify-content:stretch}
.mpc-pdf-velo.con-zoom .mpc-pdf-caja{width:100%;max-height:none;height:100%;border-radius:0}
.mpc-pdf-velo.con-zoom .mpc-pdf-cab{flex-direction:column;align-items:stretch}
.mpc-pdf-velo.con-zoom .mpc-pdf-acc{justify-content:flex-end}
.mpc-pdf-velo.con-zoom .mpc-pdf-acc .mpc-pdf-guardar{flex:1 1 auto}

/* El papel: solo el membrete y las secciones elegidas (body.mpc-pdf-imprimiendo, lo pone pdf.js mientras imprime) */
.mpc-pdf-membrete,.mpc-pdf-sec,.mpc-pdf-subtit{display:none}
@media print{
  .mpc-pdf-velo,.mpc-top-mas,.mpc-preguntar,.mpc-pdf-btn{display:none!important}
  .mp-conclusion{break-inside:avoid}
  .mpc-concl-mas>summary,.mp-como>summary{min-height:0;text-decoration:none;color:var(--ink-2)}
  .mpc-concl-mas>summary::after,.mp-como>summary::after{display:none}
  .mpc-concl-mas>summary{display:none}
  .mpc-alta{max-height:none!important;overflow:visible!important}
  .mpc-alta>table>thead>tr>th{position:static}
  body.mpc-pdf-imprimiendo{background:var(--surface)!important}
  body.mpc-pdf-imprimiendo>:not(.mp-workspace):not(main):not(:has(main)),
  body.mpc-pdf-imprimiendo .mp-workspace>:not(main):not(:has(main)),
  body.mpc-pdf-imprimiendo .mp-sidebar,body.mpc-pdf-imprimiendo .mp-topbar,body.mpc-pdf-imprimiendo .mp-page-heading,
  body.mpc-pdf-imprimiendo .mpc-pdf-fuera,body.mpc-pdf-imprimiendo .tabs-nivel3,body.mpc-pdf-imprimiendo .mpc-pdf-sub-no,
  body.mpc-pdf-imprimiendo .mpc-no-pdf,body.mpc-pdf-imprimiendo .no-imprimir,body.mpc-pdf-imprimiendo .mpc-marca-movil,
  body.mpc-pdf-imprimiendo .mpc-puntos,body.mpc-pdf-imprimiendo input[type=search]{display:none!important}
  body.mpc-pdf-imprimiendo .mp-workspace{margin:0!important;padding:0!important}
  body.mpc-pdf-imprimiendo main{padding:0!important;margin:0!important;max-width:none!important;width:auto!important}
  body.mpc-pdf-imprimiendo .mpc-pdf-dentro,body.mpc-pdf-imprimiendo .mpc-pdf-sub-si{display:block!important;animation:none!important}
  body.mpc-pdf-imprimiendo .mpc-pdf-hoja{break-before:page}
  body.mpc-pdf-imprimiendo .mpc-pdf-sub-si+.mpc-pdf-sub-si,body.mpc-pdf-imprimiendo .mpc-pdf-sub-si~.mpc-pdf-sub-si{margin-top:22px}
  body.mpc-pdf-imprimiendo .mpc-pdf-membrete{display:flex;align-items:flex-start;gap:22px;padding:0 0 12px;margin:0 0 16px;border-bottom:2px solid var(--brand);
    font:400 11.5px/1.5 var(--body);color:var(--ink-2);break-inside:avoid}
  .mpc-pdf-logo{flex:none;width:118px;padding-top:4px}
  .mpc-pdf-logo .mpc-logo{width:118px;color:var(--logo)}
  .mpc-pdf-m-tit{flex:1 1 auto;min-width:0}
  .mpc-pdf-m-k{margin:0;font:500 10.5px var(--body);letter-spacing:.06em;color:var(--ink-3)}
  .mpc-pdf-m-tit h1{margin:2px 0 0;font:700 22px/1.2 var(--body);color:var(--brand)}
  .mpc-pdf-m-per{margin:2px 0 0;font:500 14px var(--body);color:var(--ink)}
  .mpc-pdf-m-fil{margin:4px 0 0;color:var(--ink-2)}
  .mpc-pdf-m-datos{flex:none;display:grid;gap:1px;text-align:right;color:var(--ink-3);max-width:300px}
  body.mpc-pdf-imprimiendo .mpc-pdf-sec{display:block;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line);font:700 19px/1.25 var(--body);color:var(--brand);break-after:avoid}
  .mpc-pdf-sec small{font:500 13px var(--body);color:var(--ink-3)}
  .mpc-pdf-sec span{display:block;margin-top:2px;font:400 12px/1.4 var(--body);color:var(--ink-3)}
  body.mpc-pdf-imprimiendo .mpc-pdf-subtit{display:block;margin:4px 0 10px;font:700 15px var(--body);color:var(--ink);break-after:avoid}
  body.mpc-pdf-imprimiendo .tabla-wrap,body.mpc-pdf-imprimiendo .tabla,body.mpc-pdf-imprimiendo [data-mpc-caja]{overflow:visible!important;max-height:none!important}
  body.mpc-pdf-imprimiendo table{min-width:0!important;font-size:10.5px}
  /* relative (no static): suelta el sticky de encabezados y columnas fijas sin romper lo posicionado dentro de la celda */
  body.mpc-pdf-imprimiendo th,body.mpc-pdf-imprimiendo td{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;box-shadow:none!important;padding:5px 7px}
  body.mpc-pdf-imprimiendo thead{display:table-header-group}
  body.mpc-pdf-imprimiendo tr,body.mpc-pdf-imprimiendo .kpi,body.mpc-pdf-imprimiendo svg{break-inside:avoid}
  body.mpc-pdf-imprimiendo svg,body.mpc-pdf-imprimiendo canvas,body.mpc-pdf-imprimiendo img{max-width:100%}
  body.mpc-pdf-imprimiendo .kpis.carrusel:not(.mpc-pdf-fuera):not(.mpc-no-pdf):not(.no-imprimir){display:grid!important;overflow:visible;margin:0;padding:0}
}

/* Sitio web de MINIPET (web.minipet.com.co). Marca de los informes: logo de una tinta y los 8 temas de
   minipet-comun (tokens.css). Ningún color fijo: todo sale de los tokens. Excepción única: la «caja de luz» detrás de
   los envases (PET transparente con letras marino, que sobre un tema oscuro desaparecería). Es clara en todos los
   temas —el Cristalino del manual— y lo que va encima usa marino: --luz, --luz-tinta y --luz-tinta-2, con respaldo
   dentro de var(). Va DESPUÉS de tokens.css y comun.css.

   Idea del diseño: el envase es el protagonista. Las fotos de producto se recortan a su silueta (caja medida en
   catalogo.json) y se paran sobre una línea de base, como en una vitrina; todo lo demás es tipografía y aire. */

:root{
  /* Kumbh Sans (SIL OFL, alojada en /fuentes): la libre más parecida a Halcom; el sitio público no usa Halcom
     (decisión del usuario, 2026-10-12). Mientras carga, la letra del sistema. Gana a la --body de tokens.css. */
  --body:'Kumbh Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,system-ui,sans-serif;
  --ancho:1240px;--gutter:clamp(16px,4vw,48px);
  --t-1:clamp(40px,6.4vw,84px);--t-2:clamp(28px,3.6vw,46px);--t-3:clamp(20px,1.7vw,24px);
  --aire:clamp(64px,9vw,128px);
  --luz:var(--foto,#F0F4FC);--luz-tinta:var(--foto-tinta,#02184F);--luz-tinta-2:var(--foto-tinta-2,#46526F);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);font-variant-numeric:tabular-nums;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento);text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
[data-v="contraste"] :focus-visible,[data-v="contraste-oscuro"] :focus-visible{outline-width:3px}
h1,h2,h3{font-weight:700;color:var(--brand);margin:0 0 .45em;text-wrap:balance}
h1{font-size:var(--t-1);line-height:1.02;letter-spacing:-.022em}
h2{font-size:var(--t-2);line-height:1.08;letter-spacing:-.016em}
h3{font-size:var(--t-3);line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1em}
.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding-inline:var(--gutter)}
.salto{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;border-radius:10px;background:var(--acento);color:var(--acento-txt);font-weight:500;text-decoration:none}
.salto:focus{top:12px}
.entrada{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--ink-2);max-width:56ch}
.nota{font-size:15px;color:var(--ink-3)}
.marca-ficha{font-size:16px;font-weight:500;color:var(--ink-2);margin-bottom:8px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;
  border:1px solid transparent;font:500 16px/1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform 80ms,background-color var(--rapido),border-color var(--rapido),color var(--rapido)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.btn-pri{background:var(--acento);color:var(--acento-txt)}
.btn-pri:hover{filter:brightness(1.08)}
.btn-sec{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-sec:hover{border-color:var(--ink-2)}
.btn-chico{min-height:44px;padding:0 16px;font-size:15px}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.enlace{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--acento)}

/* Encabezado */
.cab{position:relative;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.cab-in{display:flex;align-items:center;gap:24px;min-height:76px}
.cab-logo{display:flex;align-items:center;min-height:44px;color:var(--logo);flex:none}
.cab-logo .mpc-logo{width:148px}
.cab-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.cab-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:16px;position:relative}
.cab-nav a:hover{color:var(--ink)}
.cab-nav a[aria-current="page"]{color:var(--brand)}
.nav-raya{position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--franja);view-transition-name:nav-raya}
.menu-movil .nav-raya{display:none}
.cab-acc{display:flex;align-items:center;gap:10px}
.menu-btn,.menu-movil{display:none}
@media (min-width:1051px){.cab{position:sticky;top:0}}
@media (max-width:1050px){
  .cab-nav,.cab-acc .btn-cotizar{display:none}
  .cab-acc{margin-left:auto}
  .menu-btn{display:inline-flex}
  .menu-movil{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(0,0,0,.14);padding:8px var(--gutter) 20px;animation:mpc-emerger var(--medio) ease-out;transform-origin:top}
  .menu-movil:not([hidden]){display:block}
  .menu-movil a:not(.btn){display:flex;align-items:center;min-height:54px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:19px;font-weight:500}
  .menu-movil a[aria-current="page"]{color:var(--acento)}
  .menu-movil .btn{width:100%;margin-top:16px}
}

/* ─── Silueta: la foto original recortada a su caja con CSS ─── */
.sil{position:relative;display:block;overflow:hidden;flex:none}
.sil img{position:absolute;max-width:none;height:auto}
.sil.entera img{position:static;width:100%}

/* ─── Vitrina del inicio: los envases sobre una línea de base, a escala de su capacidad ─── */
.portada{padding-top:clamp(36px,5vw,72px)}
.sectores-inicio{padding-top:clamp(32px,4vw,56px)}
.sectores-inicio+.seccion .vitrina{margin-top:0}
/* Portada como la del sitio anterior: accesos redondos a Envases, Tapas y Moldes, foto de bienvenida en círculo y
   una frase corta. En el celular la foto va antes del texto. */
.accesos{display:flex;justify-content:center;gap:clamp(20px,5vw,64px);margin-bottom:clamp(28px,4vw,52px)}
.acceso{display:grid;justify-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
.acceso .circulo{display:block;width:clamp(92px,9vw,128px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--surface);
  box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 14%,transparent);transition:transform var(--medio) ease-out}
.acceso .circulo img{width:100%;height:100%;object-fit:cover}
.acceso:focus-visible{outline:none}.acceso:focus-visible .circulo{outline:2px solid var(--acento);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.acceso:hover{color:var(--acento)}.acceso:hover .circulo{transform:translateY(-4px)}}
/* Computador: texto a la izquierda, foto a la derecha y accesos debajo. Celular: título y botones primero, foto más
   pequeña y luego los accesos (la oferta y la acción se ven en la primera pantalla). */
.portada-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"txt fig" "accesos accesos";gap:0 clamp(28px,5vw,80px);align-items:center}
.portada-grid .accesos{margin:clamp(36px,4vw,56px) 0 0}
.accesos{grid-area:accesos}
.portada-fig{grid-area:fig;margin:0;display:grid;justify-items:center;gap:10px}
.portada-foto{justify-self:center;width:100%;max-width:520px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 24px 60px color-mix(in srgb,var(--brand) 16%,transparent)}
.portada-foto img{width:100%;height:100%;object-fit:cover}
.ilustrativa{font-size:12px;color:var(--ink-3)}
.portada-txt{grid-area:txt;display:grid;gap:clamp(18px,2vw,26px);justify-items:start}
.portada-txt h1{margin:0;max-width:15ch;font-size:clamp(40px,5vw,76px)}
.portada-txt .entrada{margin:0;max-width:40ch}
.portada-txt .botones{margin-top:0}
@media (max-width:860px){
  .portada-grid{grid-template-columns:1fr;grid-template-areas:"txt" "fig" "accesos";gap:28px}
  .portada-foto{max-width:min(64vw,300px)}
  .accesos{margin-bottom:0}
  .portada-txt{justify-items:center;text-align:center}.portada-txt .botones{justify-content:center}
  .portada-txt .entrega-heroe{border-left:0;padding-left:0}}
@media (max-width:560px){.portada-txt .botones .btn{width:100%;justify-content:center}}
/* Franja de confianza bajo la portada */
.confianza{margin-top:clamp(32px,4vw,56px)}
.confianza ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 28px;padding-block:22px;border-block:1px solid var(--line);margin-block:0}
.confianza li{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px;line-height:1.35}
.confianza b{display:block;color:var(--ink);font-weight:700}
.ico-linea{flex:none;width:30px;height:30px;fill:none;stroke:var(--franja);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.confianza ul{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.acceso .circulo{transition:none}}
.entrega-heroe{margin:0;padding-left:14px;border-left:3px solid var(--franja);color:var(--ink-2);font-size:16px}
.entrega-heroe b{color:var(--ink);font-weight:600}
.vitrina{--alto:clamp(160px,26vw,380px);margin:clamp(28px,4vw,48px) 0 0;background:var(--luz);border-radius:28px 28px 0 0;
  padding:clamp(32px,4vw,56px) clamp(12px,3vw,48px) 0;position:relative}
.vitrina ol{list-style:none;margin:0;padding:0 0 clamp(18px,2.4vw,28px);display:flex;justify-content:space-between;gap:clamp(4px,1vw,14px);position:relative}
.vitrina ol::before{content:"";position:absolute;left:0;right:0;top:var(--alto);height:2px;background:var(--luz-tinta)}
.vitrina li{display:flex;flex-direction:column;align-items:center;text-align:center}
.vitrina a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:var(--alto);text-decoration:none;border-radius:8px}
.vitrina li>b{display:block;margin-top:12px;color:var(--luz-tinta);font-weight:700;font-size:clamp(12px,1.25vw,16px);line-height:1.2;white-space:nowrap}
.vitrina li>span{display:block;font-size:clamp(11px,1.1vw,14px);line-height:1.25;color:var(--luz-tinta-2)}
.vitrina a:focus-visible{outline-color:var(--luz-tinta)}
.vitrina .sil{height:calc(var(--k) * var(--alto));transition:transform var(--medio) ease-out}
/* Primera visita: los envases suben y se asientan sobre la línea. html.sin-entrada (llegar desde otra página) lo apaga. */
.vitrina li{animation:subir 720ms cubic-bezier(.22,.8,.3,1) both;animation-delay:calc(120ms + var(--i,0) * 60ms)}
html.sin-entrada .vitrina li{animation:none}
@keyframes subir{0%{opacity:0;transform:translateY(32px)}62%{opacity:1;transform:translateY(-4px)}100%{opacity:1;transform:none}}
.vitrina figcaption{position:absolute;left:clamp(16px,3vw,48px);top:clamp(18px,2.4vw,28px);font-size:15px;color:var(--luz-tinta-2)}
@media (max-width:560px){.vitrina li.op{display:none}.vitrina li>span{display:none}.vitrina figcaption{font-size:13px}}

/* Sectores: por qué va a envasar, con familias que su descripción del catálogo nombra para ese uso */
.sectores{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.sector{display:flex;flex-direction:column;position:relative}
/* Toda la tarjeta lleva al catálogo filtrado por ese uso; las pastillas de familias quedan por encima */
.sector-enlace{color:inherit;text-decoration:none}
.sector-enlace::after{content:"";position:absolute;inset:0;border-radius:20px}
.sector-enlace:focus-visible{outline:none}
.sector-enlace:focus-visible::after{outline:2px solid var(--acento);outline-offset:4px}
.sector:hover h3{color:var(--acento)}
.sector .fichas{position:relative;z-index:1}
.sector-foto{aspect-ratio:4/5;border-radius:20px;overflow:hidden;margin-bottom:18px}
.sector-foto img{width:100%;height:100%;object-fit:cover}
.sector-foto.luz{background:var(--luz);box-shadow:inset 0 -2px 0 var(--line-2);display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:18% 10% 0}
.sector-foto.luz .sil{height:auto;width:22%}
.sector h3{margin-bottom:6px}
.sector p{color:var(--ink-2);margin:0 0 14px;flex:1}
.fichas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fichas a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.fichas a:hover{border-color:var(--acento);color:var(--acento)}
@media (max-width:1050px){.sectores{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:560px){.sectores{grid-template-columns:1fr}.sector-foto.luz .sil{width:16%}}

/* Cifra protagonista dentro de un bloque */
.cifra-grande,.bloque p.cifra-grande{font-size:clamp(80px,11vw,152px);line-height:.85;font-weight:700;color:var(--brand);letter-spacing:-.03em;margin:0 0 12px}

/* Preguntas frecuentes: <details> nativo, se abre con teclado y lector de pantalla */
.bloque.arriba{align-items:start}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font-weight:500;font-size:clamp(17px,1.4vw,19px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--acento);transition:transform var(--medio)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--acento)}
.faq details p{margin:0 0 20px;color:var(--ink-2);max-width:62ch}
/* La respuesta se despliega en vez de aparecer de golpe (navegadores con ::details-content; los demás, como antes). */
.faq{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow-y:clip;transition:block-size 220ms ease,content-visibility 220ms allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* Datos que respaldan: una fila de hechos, sin tarjetas */
.hechos{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border-bottom:1px solid var(--line);margin:0}
.hechos div{padding:26px 24px 26px 0}
.hechos div+div{padding-left:24px;border-left:1px solid var(--line)}
.hechos dt{font-size:clamp(26px,2.6vw,34px);font-weight:700;color:var(--brand);line-height:1.1;letter-spacing:-.02em}
.hechos dd{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.4}
.hechos.cinco{grid-template-columns:repeat(5,1fr)}
.hechos.cinco dt{font-size:clamp(24px,2.1vw,30px)}
.nowrap{white-space:nowrap}
.hechos-nota{margin:10px 0 0;font-size:13px}
.nota.orden{margin:-16px 0 20px;font-size:14px}
.nota.entrega{margin:14px 0 0;font-size:14px}
@media (max-width:1050px){.hechos.cinco{grid-template-columns:repeat(3,1fr)}.hechos.cinco div:nth-child(4){padding-left:0;border-left:0}.hechos.cinco div:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:860px){.hechos,.hechos.cinco{grid-template-columns:1fr 1fr}.hechos.cinco div:nth-child(4){padding-left:24px;border-left:1px solid var(--line)}.hechos.cinco div:nth-child(5){padding-left:0;border-left:0}.hechos div:nth-child(3){padding-left:0;border-left:0}.hechos div:nth-child(n+3){border-top:1px solid var(--line)}.hechos div:nth-child(3):last-child{grid-column:1/-1}}

/* Secciones */
.seccion{padding-block:var(--aire)}
.seccion.tinta{background:var(--surface);border-block:1px solid var(--line)}
.cabeza{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.cabeza h2{margin:0;max-width:16ch}
.cabeza p{margin:0;color:var(--ink-2);max-width:52ch}
.cabeza .botones{margin:16px 0 0}
@media (max-width:860px){.cabeza{grid-template-columns:1fr}}

/* Su envase en cuatro decisiones: una secuencia real (forma → color → tapa → decoración) */
.decisiones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:d}
.decisiones>li{counter-increment:d;padding:0 clamp(16px,2vw,28px) 0 0;display:flex;flex-direction:column}
.decisiones>li+li{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.decisiones .muestra{box-shadow:inset 0 -2px 0 var(--line-2);height:150px;display:flex;align-items:flex-end;justify-content:center;gap:6px;margin-bottom:22px;background:var(--luz);border-radius:16px;padding:18px 18px 0;overflow:hidden}
.decisiones .muestra .sil{height:118px}
.decisiones .muestra.tapas{align-items:center;gap:8%;padding:14px 18px}
.decisiones .muestra.tapas .sil{height:auto;min-width:0;max-height:100%}
.decisiones .muestra.colores-grandes{display:grid;grid-template-columns:repeat(5,1fr);place-items:center;align-content:center;gap:10px 6px;padding:16px}
.decisiones .muestra.colores-grandes i{width:100%;max-width:36px;aspect-ratio:1;height:auto}
.decisiones .muestra.foto-muestra{padding:0;align-items:stretch}
.decisiones .muestra.foto-muestra img{width:100%;height:100%;object-fit:cover}
/* Hecho en nuestra planta: una foto grande y tres pequeñas, con su pie */
.planta-fotos{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:clamp(12px,1.6vw,20px)}
.planta-fotos figure{margin:0;display:flex;flex-direction:column;gap:8px}
.planta-fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.planta-fotos .grande{grid-row:span 2}
.planta-fotos .grande img{aspect-ratio:auto;height:100%;flex:1}
.planta-fotos figcaption{font-size:14px;color:var(--ink-2)}
.planta-fotos figure:nth-child(4){grid-column:2/4}
.planta-fotos figure:nth-child(4) img{aspect-ratio:21/9}
@media (max-width:860px){.planta-fotos{grid-template-columns:1fr 1fr}.planta-fotos .grande{grid-column:1/-1;grid-row:auto}.planta-fotos .grande img{aspect-ratio:4/3}.planta-fotos figure:nth-child(4){grid-column:1/-1}}
/* Las fotos de planta se descubren una vez, al entrar en pantalla. Sin soporte, se ven quietas. */
@supports ((animation-timeline:view()) and (animation-duration:auto)){
  .planta-fotos img{animation-name:descubrir;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 0% cover 32%}
}
@keyframes descubrir{from{opacity:0;clip-path:inset(12% 0 0 0 round 18px);transform:translateY(16px)}to{opacity:1;clip-path:inset(0 round 18px);transform:none}}
.decisiones .muestra.texto{align-items:center;padding:18px;font-size:clamp(30px,3vw,40px);font-weight:700;color:var(--luz-tinta);letter-spacing:-.03em;line-height:1}
.decisiones h3{display:flex;gap:10px;align-items:baseline}
.decisiones h3::before{content:counter(d);font-size:16px;font-weight:700;color:var(--acento)}
.decisiones p{color:var(--ink-2);margin:0 0 12px;flex:1}
.decisiones .enlace{align-self:flex-start}
@media (max-width:960px){.decisiones{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}.decisiones>li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.decisiones{grid-template-columns:1fr}.decisiones>li,.decisiones>li+li{padding:0;border:0}}
.desvio{margin-top:clamp(44px,5vw,72px);padding-top:28px;border-top:2px solid var(--brand);display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.desvio p{margin:0;font-size:clamp(18px,1.5vw,21px);max-width:60ch;color:var(--ink-2)}
.desvio b{color:var(--brand)}

/* Especímenes del catálogo: siluetas sobre la caja de luz, alineadas abajo */
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(24px,2.4vw,32px) clamp(12px,1.6vw,20px)}
.estante.cuatro{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.estante.cuatro{grid-template-columns:repeat(3,1fr)}}
.especimen{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;border-radius:18px}
.especimen .luz{height:240px;background:var(--luz);box-shadow:inset 0 -2px 0 var(--line-2);border-radius:18px;display:flex;align-items:flex-end;justify-content:center;padding:24px 16px 0;overflow:hidden}
.especimen .luz .sil{height:192px;max-width:100%;transition:transform var(--medio) ease-out}
.especimen .luz .sil.entera{height:auto;width:72%;align-self:center;margin-bottom:24px}
.especimen.tapa .luz{align-items:center;padding:16px}
.especimen.tapa .luz .sil{height:auto;width:min(80%,calc(130px * var(--ar,1)))}
@media (max-width:560px){.especimen.tapa .luz .sil{width:min(84%,calc(100px * var(--ar,1)))}}
.especimen:hover h3{color:var(--acento)}
@media (hover:hover) and (pointer:fine){
  .vitrina a:hover .sil{transform:translateY(-6px)}
  .especimen:hover .luz .sil{transform:translateY(-5px)}
}
.especimen h3{font-size:19px;margin:14px 2px 2px}
.especimen .dato{margin:0 2px;color:var(--ink-2);font-size:15px;line-height:1.4}
.especimen .muestras{margin:8px 2px 0}
.especimen[hidden]{display:none}
@media (max-width:560px){.estante,.estante.cuatro{grid-template-columns:1fr 1fr;gap:20px 12px}.especimen .luz{height:190px}.especimen .luz .sil{height:150px}.especimen h3{font-size:17px}}

/* Muestras de color: el color es dato del producto (catalogo.json), no del tema. Cada muestra imita la pieza:
   plástico brillante con reflejo y sombra; cristal transparente, opalizado lechoso, ámbar traslúcido,
   metalizados con degradado y glitter con destellos. Los blancos llevan aquí sus grises (fijos: son del material). */
.tono{display:inline-block;border-radius:50%;flex:none;position:relative;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.35) 16%,transparent 34%),
    radial-gradient(circle at 50% 50%,transparent 52%,rgba(0,0,0,.22) 100%),
    var(--c);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.18),inset 0 1px 1px rgba(255,255,255,.5),0 1px 2px rgba(2,24,79,.25),0 0 0 1px rgba(2,24,79,.12)}
.tono.t-cristal{background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,1) 0 7%,rgba(255,255,255,.4) 18%,transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.75),rgba(200,214,232,.55) 45%,rgba(255,255,255,.85) 60%,rgba(170,188,212,.55)),
    #eef3fa;
  box-shadow:inset 0 0 0 1px rgba(120,140,170,.55),inset 0 -3px 4px rgba(120,140,170,.25),0 1px 2px rgba(2,24,79,.18)}
.tono.t-opal{background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,1) 0 7%,rgba(255,255,255,.3) 20%,transparent 36%),
    radial-gradient(circle at 60% 70%,#e9edf3,#fbfcfe 70%);
  box-shadow:inset 0 0 0 1px rgba(120,140,170,.35),inset 0 -3px 5px rgba(150,165,190,.35),0 1px 2px rgba(2,24,79,.18)}
.tono.t-ambar{background:
    radial-gradient(circle at 34% 28%,rgba(255,240,210,.95) 0 6%,rgba(255,200,120,.35) 18%,transparent 36%),
    radial-gradient(circle at 60% 65%,#c9701f,#7a3a0c 85%);
  box-shadow:inset 0 -2px 4px rgba(60,20,0,.35),0 1px 2px rgba(2,24,79,.25)}
.tono.t-metal{background:
    linear-gradient(160deg,rgba(255,255,255,.85) 0 18%,transparent 40%,rgba(0,0,0,.25) 62%,rgba(255,255,255,.45) 78%,rgba(0,0,0,.2)),
    var(--c)}
.tono.t-glitter{background:
    radial-gradient(circle at 30% 30%,#fff 0 1.2px,transparent 1.6px),radial-gradient(circle at 68% 42%,#fff 0 1px,transparent 1.4px),
    radial-gradient(circle at 45% 70%,#fff 0 1.1px,transparent 1.5px),radial-gradient(circle at 75% 75%,#fff 0 .9px,transparent 1.3px),
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.8) 0 6%,transparent 30%),var(--c)}
.muestras{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0}
.muestras li{width:16px;height:16px}
.colores{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.colores li{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:999px;font-size:15px}
.colores i{width:24px;height:24px}

/* Bloque de foto y texto */
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.bloque+.bloque{margin-top:var(--aire)}
.bloque>.foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:24px}
.bloque.invertido>.foto{order:2}
.bloque p{color:var(--ink-2)}
.bloque h2{max-width:16ch}
.bloque .cifra-grande+h2{max-width:28ch}
@media (max-width:860px){.bloque{grid-template-columns:1fr}.bloque.invertido>.foto{order:0}.bloque>.foto img{aspect-ratio:4/3}}

.vinetas{list-style:none;padding:0;margin:20px 0 0}
.vinetas li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--line);color:var(--ink)}
.vinetas li::before{content:"";position:absolute;left:0;top:1.3em;width:12px;height:2px;background:var(--franja)}

.pasos{list-style:none;padding:0;margin:0;counter-reset:paso}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;padding:18px 0;border-top:1px solid var(--line)}
.pasos li::before{content:counter(paso);grid-row:span 2;font-weight:700;font-size:24px;line-height:1.1;color:var(--acento)}
.pasos b{color:var(--ink);font-weight:500}
.pasos span{color:var(--ink-2)}

/* Textos en columnas, con una raya de marca arriba */
.columnas{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.columnas.dos{grid-template-columns:1fr 1fr}
.columnas.tres{grid-template-columns:repeat(3,1fr)}
.columnas>div{border-top:2px solid var(--brand);padding-top:20px}
.columnas p{color:var(--ink-2);margin:0}
.columnas h3{margin-bottom:10px}
@media (max-width:960px){.columnas,.columnas.tres{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.columnas,.columnas.dos,.columnas.tres{grid-template-columns:1fr}}

/* Un solo dato protagonista */
.dato-mayor{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:end;padding-block:clamp(28px,4vw,48px);border-block:1px solid var(--line)}
.dato-mayor b{font-size:clamp(72px,12vw,168px);line-height:.85;font-weight:700;color:var(--brand);letter-spacing:-.03em;white-space:nowrap}
.dato-mayor p{margin:0;font-size:clamp(18px,1.6vw,22px);color:var(--ink-2);max-width:40ch}
@media (max-width:560px){.dato-mayor{grid-template-columns:1fr}}

/* Banda de llamado */
.banda{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;padding-top:32px;border-top:2px solid var(--brand)}
.banda h2{margin-bottom:10px;max-width:20ch}
.banda p{color:var(--ink-2);margin:0;max-width:58ch}
.banda .botones{margin-top:0}
@media (max-width:860px){.banda{grid-template-columns:1fr}}

/* Contacto */
.contacto{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
.contacto h2{max-width:14ch}
@media (max-width:960px){.contacto{grid-template-columns:1fr}}
.canales{list-style:none;padding:0;margin:28px 0 0}
.canal{display:grid;grid-template-columns:28px 1fr;gap:2px 14px;align-items:center;min-height:68px;padding:14px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.canales li:last-child .canal{border-bottom:1px solid var(--line)}
.canal svg{width:24px;height:24px;fill:none;stroke:var(--acento);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;grid-row:span 2}
.canal svg.relleno{fill:var(--acento);stroke:none}
.canal small{color:var(--ink-3);font-size:14px;line-height:1.2}
.canal b{font-weight:500;font-size:clamp(17px,1.4vw,19px);line-height:1.25}
a.canal:hover b{color:var(--acento)}
.formulario{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3.5vw,40px)}
.seccion.tinta .formulario{background:var(--bg)}
.formulario h3{margin-bottom:6px}
.formulario>p{color:var(--ink-2);margin-bottom:22px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1/-1}
.campo label{font-weight:500;font-size:15px;color:var(--ink)}
.campo input,.campo select,.campo textarea{width:100%;min-height:50px;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);font:400 16px var(--body)}
.campo textarea{min-height:120px;resize:vertical}
/* Flecha propia del desplegable, con aire a la derecha (la del navegador queda pegada al borde) */
.campo select{appearance:none;-webkit-appearance:none;padding-right:44px;background-repeat:no-repeat;background-size:5px 5px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 23px) 54%,calc(100% - 18px) 54%}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--acento);outline-offset:0;border-color:var(--acento)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-3)}
.autoriza{display:flex;gap:12px;align-items:flex-start;grid-column:1/-1;font-size:15px;color:var(--ink-2);cursor:pointer}
.autoriza input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--acento)}
.formulario .btn{width:100%;margin-top:22px}
.aviso-form{margin:14px 0 0;font-size:15px}
.aviso-form:empty{display:none}
.aviso-form.mal{color:var(--bad);background:var(--bad-bg);padding:12px 14px;border-radius:10px}
@media (max-width:560px){.campos{grid-template-columns:1fr}}
.ubicacion{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding-top:32px;border-top:2px solid var(--brand)}
.ubicacion h2{margin-bottom:8px}
.ubicacion p{margin:0;color:var(--ink-2);font-size:clamp(18px,1.5vw,20px)}
.ubicacion .botones{margin:0}
@media (max-width:860px){.ubicacion{grid-template-columns:1fr}}

/* Encabezado de página interior */
.titulo-pag{padding-block:clamp(40px,6vw,88px) clamp(32px,4vw,56px)}
.titulo-pag h1{max-width:14ch}
.titulo-pag .entrada{margin:0}
.titulo-pag.partido{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.titulo-pag.partido h1{margin:0;max-width:20ch}
@media (max-width:860px){.titulo-pag.partido{grid-template-columns:1fr}}
.foto-ancha img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:28px}
.video-ancho{margin:0;position:relative}
.reproducir{position:absolute;left:50%;top:calc(50% - 16px);transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;
  min-height:56px;padding:0 24px 0 18px;border:0;border-radius:999px;background:var(--acento);color:var(--acento-txt);font:500 17px var(--body);cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.25)}
.reproducir svg{width:24px;height:24px;fill:currentColor}
.reproducir:hover{filter:brightness(1.08)}
.reproducir[hidden]{display:none}
.video-ancho video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:28px;background:var(--brand)}
.video-ancho figcaption{margin-top:12px;font-size:14px;color:var(--ink-3)}
@media (max-width:560px){.video-ancho video{border-radius:16px}}
@media (max-width:560px){.foto-ancha img{aspect-ratio:4/3;border-radius:20px}}

.plantas-fotos{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(12px,1.6vw,20px);margin-bottom:clamp(32px,4vw,48px)}
.plantas-fotos figure{margin:0;display:flex;flex-direction:column;gap:8px}
.plantas-fotos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.plantas-fotos figure:last-child img{aspect-ratio:32/15}
.plantas-fotos figcaption{font-size:14px;color:var(--ink-2)}
.plantas-fotos.invertido{grid-template-columns:1.6fr 1fr}
.plantas-fotos.invertido figure:first-child img{aspect-ratio:auto;height:100%;object-fit:cover}
.plantas-fotos.invertido figure:first-child{order:2}
.plantas-fotos.invertido figure:last-child img{aspect-ratio:32/15}
@media (max-width:760px){.plantas-fotos.invertido{grid-template-columns:1fr}.plantas-fotos.invertido figure:first-child{order:0}.plantas-fotos.invertido figure img{aspect-ratio:16/9!important}}
.planta-fotos.dos{grid-template-columns:1.6fr 1fr;grid-template-rows:auto}
.planta-fotos.dos .grande{grid-row:auto}
.planta-fotos.dos .grande img{aspect-ratio:16/9;height:auto}
.planta-fotos.dos figure:not(.grande) img{aspect-ratio:auto;height:100%;flex:1}
@media (max-width:860px){.planta-fotos.dos{grid-template-columns:1fr}.planta-fotos.dos figure:not(.grande) img{aspect-ratio:4/3;height:auto}}
@media (max-width:760px){.plantas-fotos{grid-template-columns:1fr}.plantas-fotos figure:last-child img{aspect-ratio:16/9}}
.foto-pie{margin:28px 0 0}
.foto-pie img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.foto-pie figcaption{margin-top:8px;font-size:14px;color:var(--ink-2)}
/* Moldes: el proceso en tres pasos, es una secuencia real */
.pasos-molde{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);counter-reset:pm}
@media (max-width:1050px){.pasos-molde{grid-template-columns:1fr 1fr}}
.pasos-molde figure{margin:0}
.pasos-molde img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.pasos-molde figcaption{margin-top:10px;font-size:15px;color:var(--ink-2)}
.pasos-molde figcaption b{color:var(--ink);font-weight:500}
.pasos-molde li{counter-increment:pm}
.pasos-molde figcaption::before{content:counter(pm) " ";font-weight:700;color:var(--acento)}
@media (max-width:760px){.pasos-molde{grid-template-columns:1fr}}
/* Catálogo */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pestanas a{display:inline-flex;align-items:baseline;gap:8px;min-height:52px;padding:14px 18px 12px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:18px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.pestanas a:first-child{padding-left:0}
.pestanas a:hover{color:var(--ink)}
.pestanas a{position:relative}
.pestanas a[aria-current="true"]{color:var(--brand)}
.pestana-raya{position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--franja);display:none}
.pestanas a:first-child .pestana-raya{left:0}
.pestanas a[aria-current="true"] .pestana-raya{display:block;view-transition-name:pestana-raya}
.pestanas small{font-size:14px;color:var(--ink-3);font-weight:400}
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:28px 0 8px}
.filtros .campo{flex:1 1 128px;min-width:0}
.filtros .campo:first-child{flex:1.6 1 230px}
.filtros .acciones-filtro{flex:0 0 auto}
.filtros .campo label{font-size:14px;color:var(--ink-2);font-weight:400}
.filtros[hidden]{display:none}
@media (max-width:960px){.filtros .campo{flex-basis:calc(50% - 6px)}.filtros .campo:first-child{flex-basis:100%}.filtros .acciones-filtro{flex:1 1 100%}.filtros .acciones-filtro .btn{flex:1}}
@media (max-width:390px){.filtros .campo{flex-basis:100%}}
.conteo{margin:0 0 24px;color:var(--ink-3);font-size:15px;min-height:1.6em}
.sin-resultados{padding:40px;text-align:center;border:1px dashed var(--line-2);border-radius:18px;color:var(--ink-2)}
.panel-cat[hidden]{display:none}
.panel-cat>.cabeza{margin:clamp(32px,4vw,48px) 0 0}

/* Ficha de familia */
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;padding:0;margin:0 0 24px;font-size:15px;line-height:1.3;color:var(--ink-3)}
/* Cada miga, enlace o no, en la misma caja de 32 px centrada: así el último texto queda en la misma línea */
.migas li{display:flex;align-items:center;min-height:32px}
.migas li+li::before{content:"/";margin-right:6px}
.migas a{color:var(--ink-2);text-decoration:none}
.migas a:hover{text-decoration:underline}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-block:clamp(28px,4vw,56px) var(--aire)}
.ficha-luz{position:sticky;top:100px;background:var(--luz);box-shadow:inset 0 -2px 0 var(--line-2);border-radius:28px;height:clamp(380px,44vw,600px);display:flex;align-items:flex-end;justify-content:center;padding:48px 24px 0;overflow:hidden}
.ficha-luz .sil{height:calc(100% - 4px);max-width:92%}
.ficha-luz .sil.entera{height:auto;width:70%;align-self:center;margin-bottom:48px}
.ficha-luz.tapa{align-items:center;padding:40px}
.ficha-luz.tapa .sil{height:auto;width:min(80%,calc(min(260px,46vw) * var(--ar,1)))}
@media (max-width:860px){.ficha{grid-template-columns:1fr}.ficha-luz{position:relative;top:0;height:min(84vw,440px);padding-top:32px}}
.ficha h1{font-size:clamp(44px,6vw,80px)}
.resumen{display:grid;grid-auto-flow:column;grid-auto-columns:auto;margin:28px 0;border-block:1px solid var(--line)}
.resumen div{padding:16px 16px 16px 0}
.resumen div+div{padding-left:16px;border-left:1px solid var(--line)}
.resumen dt{color:var(--ink-3);font-size:14px}
.resumen dd{margin:2px 0 0;font-weight:500;font-size:18px;color:var(--ink)}
.resumen dd{white-space:nowrap}
/* Con la columna angosta (pantallas medianas y celular), dos datos por fila */
@media (max-width:1250px){.resumen{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .resumen div:nth-child(odd){padding-left:0;border-left:0}.resumen div:nth-child(n+3){border-top:1px solid var(--line)}}
.ficha h2{font-size:22px;margin:44px 0 14px}
.tabla-wrap{overflow-x:auto;border-top:2px solid var(--brand)}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:13px 12px 13px 0;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:500;color:var(--ink-3);font-size:14px}
td.num,th.num{text-align:right;padding-right:0}
.compatibles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.compatibles a{display:flex;flex-direction:column;gap:8px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;line-height:1.3}
.compatibles .luz{height:110px;background:var(--luz);box-shadow:inset 0 -2px 0 var(--line-2);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:12px}
.compatibles .luz.abajo{align-items:flex-end;padding-bottom:0}
.compatibles .sil{height:auto;width:min(86%,calc(70px * var(--ar,1)))}
.compatibles .luz.abajo .sil{height:auto;width:min(86%,calc(92px * var(--ar,1)))}
.compatibles a:hover span{color:var(--acento)}

/* Textos legales */
.prosa{max-width:72ch;padding-bottom:var(--aire)}
.prosa h2{font-size:24px;margin:1.8em 0 .6em}
.prosa h3{font-size:19px;margin:1.4em 0 .5em}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li{margin-bottom:.5em}

/* Pie: sobrio, letra pequeña, cuatro columnas cortas y una franja de certificación */
.pie{background:var(--surface);border-top:1px solid var(--line);padding:clamp(40px,5vw,56px) 0 24px;font-size:14px;line-height:1.5}
.pie-in{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.2fr;gap:24px 40px}
.pie .mpc-logo{width:112px;margin-bottom:12px}
.pie p{color:var(--ink-2);font-size:14px;margin:0 0 4px}
.pie h2{font-size:14px;font-weight:700;letter-spacing:0;color:var(--brand);margin:0 0 8px}
.pie ul{list-style:none;padding:0;margin:0}
.pie li a{display:inline-flex;align-items:center;min-height:30px;color:var(--ink-2);text-decoration:none;font-size:14px}
.pie li a:hover{color:var(--acento);text-decoration:underline}
.redes{display:flex;gap:6px;margin-top:12px}
.redes a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.redes a:hover{color:var(--ink);border-color:var(--line-2)}
.redes svg{width:16px;height:16px;fill:currentColor}
.pie-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.pie .legal{font-size:13px;color:var(--ink-3);text-align:right;margin:0}
.pie .legal a{color:var(--ink-3)}
.pie .legal a:hover{color:var(--acento)}
@media (pointer:coarse){.pie li a{min-height:44px}.redes a{width:44px;height:44px}}
@media (max-width:960px){.pie-in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie .legal{text-align:left}}
/* Sello ICONTEC (manual E-GM-0001 v08): marca de un tercero, con sus colores fijos y sin cambios de forma.
   Versión a color (#0085CA) en los temas claros y en Marino; versión blanco y negro sobre los fondos casi negros.
   Siempre con su filete blanco y el código del certificado debajo; el código va en azul sobre claro y en blanco sobre
   oscuro (versión invertida). 72 px de ancho (mínimo digital: 20 px) y aire alrededor (área de protección). */
.certificado{display:flex;align-items:center;gap:20px}
.pie .certificado p{margin:0;max-width:44ch;font-size:13px;color:var(--ink-3)}
/* IQNET (manual, págs. 6 y 7): siempre junto al sello ICONTEC, a su derecha. Azul #003594 con blanco sobre claro;
   sobre oscuro, la versión de círculo blanco (azul en Marino, negra con la versión blanco y negro de ICONTEC).
   Mínimo digital de IQNET: 85 px de ancho; aquí mide 95 px (sello ICONTEC de 72 px). */
.sellos{--s:72px;display:flex;align-items:flex-start;gap:calc(var(--s) * .23);flex:none;margin:8px}
.sello-icontec{display:block;width:var(--s);height:auto;flex:none}
.sello-iqnet{display:block;width:calc(var(--s) * 1.317);height:auto;flex:none;margin-top:calc(var(--s) * (147 / 101 - 1.317) / 2)}
.certificado{--ic-c:#0085CA;--ic-b:#FFFFFF;--ic-cod:#0085CA;--iq-f:#003594;--iq-t:#FFFFFF}
[data-modo="oscuro"] .certificado{--ic-cod:#FFFFFF;--iq-f:#FFFFFF;--iq-t:#003594}
[data-v="medianoche"] .certificado,[data-v="pizarra"] .certificado,[data-v="contraste-oscuro"] .certificado{--ic-c:#1C1B1F;--iq-t:#000000}
@media (max-width:560px){.certificado{flex-direction:column;align-items:flex-start;gap:12px}}
@media (max-width:860px){.pie-in{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}
@media (max-width:560px){.pie-in{grid-template-columns:1fr}}

/* Botón flotante de WhatsApp (position:fixed → regla del zoom de dedos en sitio.js) */
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 16px;border-radius:999px;background:var(--acento);color:var(--acento-txt);text-decoration:none;font-weight:500;box-shadow:0 10px 28px rgba(0,0,0,.24);transform-origin:0 0}
.wa-flotante svg{width:26px;height:26px;fill:currentColor}
.wa-flotante.con-zoom{right:auto;bottom:auto}
@media (max-width:560px){.wa-flotante{right:16px;bottom:16px;padding:0 15px}.wa-flotante span{display:none}}

.aviso-pagina{min-height:62vh;display:flex;align-items:center}
.aviso-pagina .envoltura>div{max-width:680px}

/* Entre páginas, el envase tocado viaja hasta su ficha. El encabezado y WhatsApp no se desvanecen.
   Al filtrar el catálogo (html.vt-catalogo) solo se mueven las tarjetas. */
@view-transition{navigation:auto}
.cab{view-transition-name:cabecera}
.wa-flotante{view-transition-name:whatsapp}
::view-transition-group(*){animation-duration:460ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-group(root){animation-duration:200ms}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}
::view-transition-group(cabecera),::view-transition-group(whatsapp){animation:none}
:root.vt-catalogo::view-transition-old(root){display:none}
:root.vt-catalogo::view-transition-new(root){animation:none}
/* Cambio de tema (movimiento.js de minipet-comun, html.mpc-vt-tema): el tema nuevo se abre en círculo desde su
   botón sobre toda la página. Las piezas con transición propia (encabezado, WhatsApp, rayas, envases) se apagan
   mientras tanto para que el círculo las cubra junto con lo demás. */
:root.mpc-vt-tema *{view-transition-name:none!important}
/* Sector del inicio → catálogo: el nombre del sector viaja hasta el filtro «Uso», que destella una vez al llegar. */
::view-transition-group(uso-filtro){animation-duration:520ms}
.destello{animation:destello 1.4s ease-out 1}
@keyframes destello{0%,35%{border-color:var(--acento);box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 30%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
/* Guías: el título de la tarjeta crece hasta el encabezado de la guía (nombres en el HTML, ver vt_guia). */
::view-transition-group(*.guia){animation-duration:440ms}
/* Ficha: la tabla de referencias entra después de que el envase llega a su lugar. */
.ficha .tabla-wrap{view-transition-name:ficha-refs}
::view-transition-old(ficha-refs){animation:refs-sale 140ms ease-in both}
::view-transition-new(ficha-refs){animation:refs-entra 320ms cubic-bezier(.2,.7,.2,1) 300ms both}
@keyframes refs-sale{to{opacity:0}}
@keyframes refs-entra{from{opacity:0;transform:translateY(14px)}}
/* Formulario: girando mientras envía, una marca de recibido que se traza y viaja hasta «Gracias». */
.btn-enviar .girando,.btn-enviar .marca-ok{display:none}
.btn-enviar.enviando .girando{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.marca-ok{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-enviar.listo .marca-ok{display:inline-block;view-transition-name:ok-envio}
.btn-enviar.listo .marca-ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:trazar 380ms ease-out forwards}
@keyframes trazar{to{stroke-dashoffset:0}}
.ok-envio{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--acento);color:var(--acento-txt);margin-bottom:22px}
.ok-envio .marca-ok{width:32px;height:32px;view-transition-name:ok-envio}
::view-transition-group(ok-envio){animation-duration:560ms}
/* Cambio de pestaña en el catálogo: la raya se desliza a la pestaña nueva y el panel entra por el lado hacia
   donde se movió (html.vt-pestana, y .vt-atras cuando se va hacia la izquierda). */
:root.vt-pestana::view-transition-old(root),:root.vt-pestana::view-transition-new(root){animation:none}
::view-transition-group(pestana-raya){animation-duration:280ms}
::view-transition-group(panel-cat){animation-duration:280ms;overflow:clip}
:root.vt-pestana::view-transition-old(panel-cat){animation:panel-sale 160ms ease-in both}
:root.vt-pestana::view-transition-new(panel-cat){animation:panel-entra 280ms cubic-bezier(.2,.7,.2,1) 60ms both}
:root.vt-pestana.vt-atras::view-transition-old(panel-cat){animation-name:panel-sale-atras}
:root.vt-pestana.vt-atras::view-transition-new(panel-cat){animation-name:panel-entra-atras}
@keyframes panel-sale{to{opacity:0;transform:translateX(-32px)}}
@keyframes panel-entra{from{opacity:0;transform:translateX(40px)}}
@keyframes panel-sale-atras{to{opacity:0;transform:translateX(32px)}}
@keyframes panel-entra-atras{from{opacity:0;transform:translateX(-40px)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .vitrina li,.planta-fotos img,.menu-movil{animation:none}
  .vitrina a:hover .sil,.especimen:hover .luz .sil,.btn:active{transform:none}
  .faq summary::after,.btn,.vitrina .sil,.especimen .luz .sil,.faq details::details-content{transition:none}
  .destello,.btn-enviar.listo .marca-ok path{animation:none;stroke-dashoffset:0}
}
@media print{
  .cab-acc,.menu-movil,.wa-flotante,.filtros,.pestanas,.formulario,.salto{display:none!important}
  .cab,.ficha-luz{position:static}
  body{font-size:12pt}
}

/* Lectura en celular: textos secundarios un poco más grandes y con más aire */
@media (max-width:560px){
  body{font-size:17px;line-height:1.65}
  .entrada{font-size:18px;line-height:1.55}
  .cabeza p,.sector p,.decisiones p,.bloque p,.columnas p,.vinetas li,.pasos span{font-size:16.5px;line-height:1.6}
  .especimen .dato,.nota,.canal small,.hechos dd{font-size:15.5px}
  .seccion{padding-block:56px}
  .cabeza{margin-bottom:28px}
}

/* Guías técnicas */
.guias{list-style:none;padding:0;margin:0 0 var(--aire);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.guia-item{display:flex;flex-direction:column;gap:8px;height:100%;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:20px;color:var(--ink);text-decoration:none}
.guia-item:hover{border-color:var(--acento)}
.guia-item h2{font-size:22px;margin:0}
.guia-item p{color:var(--ink-2);margin:0;flex:1}
.guia .tabla-wrap{margin:8px 0 12px}
.guia td{white-space:normal;vertical-align:top}
.guia td:first-child{white-space:nowrap}
.guia td.num,.guia th.num{padding-right:28px}
.guia .tipos-tapa{list-style:none;padding:0}
.guia .tipos-tapa li{padding:12px 0;border-top:1px solid var(--line)}
.guia .tipos-tapa .nota{display:block;margin-top:4px;font-size:15px}
.guia .botones{margin-top:28px}
.glosario{margin:16px 0 0}
.glosario .termino{padding:14px 0;border-top:1px solid var(--line)}
.glosario dt{font-weight:600;color:var(--brand);scroll-margin-top:100px}
.glosario dd{margin:4px 0 0;color:var(--ink-2)}
.guia .pasos{margin-top:8px}
.guia td .colores li{border:0;padding:0;min-height:0}

/* Sello LOOP del ICIPC (manual 4.1D03): archivo entregado por el ICIPC, sin cambios; 150 px de ancho (mínimo
   digital 100 px), proporción original y área libre alrededor. Versión a color sobre fondo claro y en negativo
   (blanca) sobre los temas oscuros. Va junto a la cifra de las referencias certificadas, no como sello general. */
.dato-mayor.con-sello{grid-template-columns:auto 1fr auto}
.sello-loop{display:block;padding:20px}
.sello-loop img{display:block;width:150px;height:auto}
.loop-oscuro{display:none!important}
[data-modo="oscuro"] .loop-claro{display:none!important}
[data-modo="oscuro"] .loop-oscuro{display:block!important}
@media (max-width:760px){.dato-mayor.con-sello{grid-template-columns:1fr}.sello-loop{padding:12px 0 0}}

.proceso-molde{margin:16px 0 0;font-size:15px;color:var(--ink-3)}
.faq-mas{margin:20px 0 0;color:var(--ink-2)}
.especimen .luz{position:relative}
.mas-pedida{display:none}
#catalogo .mas-pedida{display:block;position:absolute;top:10px;left:10px;z-index:1;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;box-shadow:0 1px 3px rgba(2,24,79,.15)}

/* Cotizador de la ficha */
.cotizador{margin:0 0 8px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.cotizador .campos{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.cotizador .botones{margin-top:16px}
@media (max-width:560px){.cotizador .campos{grid-template-columns:1fr}.cotizador{padding:16px}}

/* Catálogo: boca y peso como filtros avanzados en envases; ayuda para elegir junto al conteo */
.filtros .avanzado{display:none}
.filtros.con-avanzados .avanzado{display:block}
.acciones-filtro{display:flex;gap:10px;align-items:end}
.acciones-filtro .btn{white-space:nowrap}
.bajo-filtros{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;align-items:baseline}
.ayuda-elegir{margin:0;font-size:15px;color:var(--ink-3)}
.ayuda-elegir a{color:var(--acento);font-weight:500}

/* Visualizaciones (no son fotos de referencias reales del catálogo): rótulo discreto en la esquina */
.sector-foto,.decisiones .muestra.foto-muestra{position:relative}
.chip-ilus{position:absolute;right:10px;bottom:10px;font-size:11px;line-height:1;padding:5px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink-2);backdrop-filter:blur(4px);pointer-events:none}
/* Tarjetas de envase: fondo con algo más de profundidad y luz lateral, para que se lean los envases transparentes */
.especimen .luz,.compatibles .luz{background:radial-gradient(130% 100% at 28% 12%,var(--luz) 0%,var(--luz) 38%,color-mix(in srgb,var(--luz) 82%,var(--brand) 18%) 100%)}

/* Manifiesto (manual de marca): textura de plástico líquido, rótulo en Bebas Neue y letreros espaciados. Isla de
   color propia: la textura es clara en todos los temas, así que el texto usa la tinta de las superficies «luz». */
.manifiesto{background:linear-gradient(color-mix(in srgb,var(--luz) 58%,transparent),color-mix(in srgb,var(--luz) 58%,transparent)),var(--textura) center/cover no-repeat,var(--luz);color:var(--luz-tinta);padding-block:clamp(64px,9vw,128px)}
.manifiesto .envoltura{display:grid;justify-items:center;text-align:center;gap:clamp(18px,2.4vw,28px)}
.manifiesto h2{font-family:'Bebas Neue',var(--body);font-weight:400;font-size:clamp(46px,7.4vw,104px);line-height:.92;letter-spacing:.01em;color:var(--luz-tinta);max-width:20ch;margin:0}
.manifiesto-txt{max-width:64ch;display:grid;gap:14px}
.manifiesto-txt p{margin:0;color:var(--luz-tinta-2);font-size:clamp(17px,1.4vw,19px);line-height:1.6}
.manifiesto-txt b{color:var(--luz-tinta)}
.rotulo-espaciado{margin:0;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--luz-tinta-2)}
.manifiesto .firma{margin-top:8px}