/* Transporte Autorizado: piezas propias de la página. Usa los tokens de site.css.
   Movimiento: suave y sin rebote; nada gira ni se agranda al pasar el cursor.
   El hero, la tarjeta, las filas y las ventanas de selección también los usan HDS y Campañas (bloque al final). */
:root {
  /* Tono oscuro del hero y de la franja de cierre, y su versión en componentes para los velos: el lila de la marca, profundo */
  --navy: #190a33; --stage: 25 10 51;
  /* Tonos de los planes para texto y botones (naranjo oscuro: el puro no da contraste) y sus fondos suaves */
  --tone-amber: #C4460A; --tone-amber-soft: #FFF6D2;
  --tone-teal: var(--azul); --tone-teal-soft: #E7F5FE;
  /* Degradados de los planes, con los pares de la paleta: naranjo (Express), lila (Programado) y azul (Espera y ahorra) */
  --grad-express: radial-gradient(120% 90% at 15% 0%, rgb(255 227 87 / .55), transparent 55%), linear-gradient(145deg, #FF8A3D 0%, #FF651C 50%, #D94A0A 100%);
  --grad-programado: radial-gradient(120% 90% at 15% 0%, rgb(235 169 252 / .55), transparent 55%), linear-gradient(145deg, #8B3DF0 0%, #6708C7 55%, #45058A 100%);
  --grad-flexible: radial-gradient(120% 90% at 15% 0%, rgb(168 223 253 / .5), transparent 55%), linear-gradient(145deg, #3C43F2 0%, #0E14DA 55%, #090D94 100%);
}

/* ---------- Hero: escenario con las tres opciones y un panel que cambia en el mismo lugar ---------- */
.hero { padding-block: 12px clamp(40px, 5vw, 64px); }
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  height: clamp(540px, calc(100svh - 96px), 640px);
  border-radius: 28px; background: var(--navy); color: #fff;
}
.stage-media { position: absolute; inset: 0; z-index: -2; }
.stage-media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 62%; }
/* Escritorio: la foto trae cielo extra arriba (tools/hero-cielo.py) y se ancla abajo a la derecha, a un tamaño en que la
   flota completa (del 37 % al 98 % del ancho de la foto) cabe a la derecha de los controles: su primer vehículo queda a
   438 px del borde izquierdo del hero. Lo que la foto no cubre, arriba y a la izquierda, es el color en que termina su
   cielo, bajo el velo oscuro del hero; los bordes de la foto se funden con él. */
@media (min-width: 861px) {
  .stage-media { --hero-cielo: rgb(107 142 174); background: var(--hero-cielo); }
  .stage-media img {
    position: absolute; right: 0; bottom: 0; width: min(100%, calc((100% - 438px) * 1.5954)); height: auto; aspect-ratio: 1774 / 1111; object-position: 100% 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px), linear-gradient(to right, transparent, #000 96px); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 48px), linear-gradient(to right, transparent, #000 96px); mask-composite: intersect;
  }
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--stage) / .92) 0%, rgb(var(--stage) / .74) 30%, rgb(var(--stage) / .1) 62%),
    linear-gradient(0deg, rgb(var(--stage) / .5), transparent 42%);
}
.stage-side { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; padding: clamp(28px, 4vw, 44px); }
.stage-copy .display { color: #fff; font-size: var(--fs-display); }
.stage-copy .lead { margin-top: 14px; color: rgb(255 255 255 / .82); }

.routes {
  position: relative; isolation: isolate; display: grid; gap: 4px; padding: 5px;
  border-radius: 20px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .14);
  -webkit-backdrop-filter: blur(12.8px) saturate(1.3); backdrop-filter: blur(12.8px) saturate(1.3);
}
.routes-pill {
  position: absolute; left: 0; top: 0; z-index: -1; border-radius: 15px; background: #fff;
  box-shadow: 0 6px 18px -8px rgb(0 0 0 / .45);
  transition: transform .4s var(--ease), width .4s var(--ease), height .4s var(--ease);
}
.route {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
  padding: 11px 12px 11px 10px; border: 0; border-radius: 15px; background: transparent; color: #fff;
  font: inherit; text-align: left; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease);
}
.route::after {
  content: ""; width: 16px; height: 16px; background: currentColor; opacity: .55; transition: opacity .2s, transform .3s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.route-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgb(255 255 255 / .14); transition: background-color .25s, color .25s; }
.route:first-of-type .route-icon { background: var(--accent); }
.route-icon svg { width: 19px; height: 19px; }
.route-text { display: grid; gap: 1px; min-width: 0; }
.route-text strong { font-size: .9375rem; line-height: 1.3; letter-spacing: -.01em; }
.route-text small { font-size: var(--fs-caption); font-weight: 700; color: rgb(255 255 255 / .7); transition: color .25s; }
.route-short { display: none; }
.route:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.route[aria-selected="false"]:active { background: rgb(255 255 255 / .12); }
.route[aria-selected="true"] { color: var(--ink); }
.route[aria-selected="true"] small { color: var(--accent-strong); }
.route[aria-selected="true"] .route-icon { background: var(--accent); color: #fff; }
.route[aria-selected="true"]::after { opacity: 1; color: var(--accent); }
@media (hover: hover) {
  .route[aria-selected="false"]:hover { background: rgb(255 255 255 / .08); }
  .route[aria-selected="false"]:hover::after { opacity: .9; transform: translateX(2px); }
}

/* Panel del hero */
.stage-panel { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; display: flex; align-items: flex-start; padding: 16px; }
.hcard {
  display: flex; flex-direction: column; width: 100%; max-height: 100%; overflow: hidden;
  border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 28px 60px -28px rgb(0 0 0 / .6);
}
.hcard-panel, .hcard-panel > form, .hcard .summary { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.hcard-panel:focus { outline: none; }
.hcard-head { flex: none; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.hcard-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.hcard-title h2 { margin-right: auto; }
.hcard-title h2 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.3; }
.hcard-sub { margin-top: 6px; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.hcard-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 99px; background: var(--bg-sunk); color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.hcard-close svg { width: 17px; height: 17px; }
.hcard-close:hover { background: var(--line); color: var(--ink); }
.hcard-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hcard-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 18px; scrollbar-width: thin; }
.hcard-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: #fff; }
.hcard .stepper { margin-top: 14px; gap: 8px; }
.hcard .step-nav [data-step-count] { margin-right: auto; }

/* ---------- Filas de selección: cada campo abre una ventana (formulario, buscador y especialista) ---------- */
.qform fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.picks { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.pick { background: #fff; }
.pick-btn, .pick-field {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; padding: 8px 14px; border: 0; background: #fff; color: inherit; font: inherit; text-align: left;
  transition: background-color .25s var(--ease);
}
.pick-field { grid-template-columns: 22px minmax(0, 1fr); }
.pick-field:not(:has(.pick-icon)) { grid-template-columns: minmax(0, 1fr); }
.pick-btn { cursor: pointer; }
.pick-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.pick-icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink-2); transition: color .25s var(--ease); }
.pick-icon svg { width: 20px; height: 20px; }
.pick-text { display: grid; gap: 1px; min-width: 0; }
.pick-label { font-size: var(--fs-caption); font-weight: 700; color: var(--muted); }
.pick-value { overflow: hidden; font-size: .9375rem; font-weight: 700; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.pick-value.is-empty { color: var(--muted); font-weight: 600; }
.pick-chev { display: grid; color: var(--muted); }
.pick-chev svg { width: 16px; height: 16px; }
.pick-field input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 700 .9375rem/1.45 var(--font); }
.pick-field input::placeholder { color: var(--muted); font-weight: 600; }
.pick-field input:focus { outline: none; }
.pick-field:focus-within { background: color-mix(in srgb, var(--accent-soft) 55%, #fff); }
@media (hover: hover) { .pick-btn:hover { background: var(--bg-alt); } }
.pick-btn:hover .pick-icon, .pick-field:focus-within .pick-icon { color: var(--ink); }
.pick[data-invalid] .pick-label, .pick-field:has([aria-invalid="true"]) .pick-label { color: var(--hazard); }
.pick[data-invalid] .pick-icon { color: var(--hazard); }
.pick-error { display: none; margin-top: -6px; padding: 0 14px 10px 50px; color: var(--hazard); font-size: var(--fs-caption); font-weight: 700; }
/* Tipo de retiro: tres botones en la misma fila del formulario (sin abrir ventana) y una línea que explica el elegido */
.pick-seg { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 12px 14px 14px; }
.pick-seg .pick-text { display: contents; }
.pick-seg .seg, .pick-seg .seg-hint, .pick-seg .pick-error { grid-column: 1 / -1; }
.pick-seg .pick-error { margin: -4px 0 0; padding: 0; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 14px; background: var(--bg-sunk); }
.seg button {
  min-height: 44px; padding: 4px 6px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2);
  font: 800 var(--fs-small)/1.15 var(--font); cursor: pointer; transition: background-color .2s var(--ease), color .2s, box-shadow .2s;
}
.seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(21 26 45 / .16); }
.seg button:not([aria-checked="true"]):active { background: rgb(255 255 255 / .6); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-hint { margin-top: -2px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.4; }
.pick[data-invalid] .seg { box-shadow: inset 0 0 0 1.5px var(--hazard); }

/* Ventana de texto (dirección): campo arriba, grande y claro */
.text-field textarea {
  display: block; width: 100%; min-height: 104px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px;
  background: #fff; color: var(--ink); font: 600 1rem/1.5 var(--font); resize: none;
}
.text-field textarea::placeholder { color: var(--muted); }
.text-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.text-hint { margin-top: 8px; color: var(--muted); font-size: var(--fs-caption); }
/* Sugerencias de calles reales bajo el campo (geo.js): filas con línea fina, entran con un fundido */
.text-suggest { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.text-suggest[hidden], .text-source[hidden] { display: none; }
.text-suggest li { border-bottom: 1px solid var(--line); }
.suggest { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 4px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s var(--ease); }
.suggest:hover, .suggest:focus-visible { background: var(--bg-alt); outline: none; }
.suggest-pin { display: grid; place-items: center; color: var(--ink-2); }
.suggest-text strong { display: block; font-size: var(--fs-body-sm); font-weight: 800; line-height: 1.3; }
.suggest-text small { display: block; margin-top: 1px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.text-source { margin-top: 8px; color: var(--muted); font-size: var(--fs-caption); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes suggest-in { from { opacity: 0; transform: translateY(4px); } }
  .text-suggest.is-fresh li { animation: suggest-in .3s var(--ease) both; animation-delay: calc(var(--k, 0) * 30ms); }
  .text-suggest li:nth-child(2) { --k: 1; } .text-suggest li:nth-child(3) { --k: 2; } .text-suggest li:nth-child(4) { --k: 3; } .text-suggest li:nth-child(5) { --k: 4; }
}
.guide-step .text-suggest { margin-top: 14px; }

/* ---------- Mapa para marcar el punto del retiro (mapa.js): fila que lo despliega, marcador fijo al centro ---------- */
.text-map { margin-top: 14px; }
.map-open { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s var(--ease); }
.map-open:hover { background: var(--bg-alt); }
/* En la ventana de la dirección la fila es solo un título con el estado: el mapa va siempre abierto */
.map-open.is-static { grid-template-columns: 22px minmax(0, 1fr); cursor: default; }
.map-open.is-static:hover { background: none; }
.map-open:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
.map-open-icon { display: grid; place-items: center; color: var(--ink-2); transition: color .25s var(--ease); }
.has-point > .map-open .map-open-icon { color: var(--accent); }
.map-open-text strong { display: block; font-size: var(--fs-body-sm); font-weight: 800; line-height: 1.3; }
.map-open-text small { display: block; margin-top: 1px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.map-open-chev { display: grid; place-items: center; color: var(--ink-2); transition: rotate .35s var(--ease); }
.map-open-chev svg { width: 18px; height: 18px; }
.map-open[aria-expanded="true"] .map-open-chev { rotate: 90deg; }
/* Se despliega animando el alto del contenedor; el lienzo conserva su tamaño (Leaflet no se redimensiona al abrir) */
.map-fold { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .42s var(--ease), visibility 0s linear .42s; }
.text-map.is-open .map-fold { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--ease), visibility 0s; }
.map-fold-in { min-height: 0; overflow: hidden; }
.map-box { padding-top: 12px; }
.map-frame { position: relative; isolation: isolate; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--bg-alt); }
.map-canvas { z-index: 0; height: clamp(230px, 40vh, 320px); font: inherit; background: var(--bg-alt); }
.map-box:not(.is-ready) .map-pin, .map-box:not(.is-ready) .map-locate { opacity: 0; }
/* Marcador: la punta queda en el centro exacto del mapa. Sin punto marcado va en gris; al mover el mapa se levanta apenas */
.map-pin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 38px; height: 46px; margin: -44px 0 0 -19px; pointer-events: none; filter: drop-shadow(0 6px 6px rgb(21 26 45 / .28)); transition: transform .25s var(--ease), opacity .3s var(--ease); }
.map-pin-body { fill: #6b7186; stroke: #fff; stroke-width: 2; transition: fill .3s var(--ease); }
.map-pin-dot { fill: #fff; }
.has-point .map-pin-body { fill: var(--accent); }
.is-moving .map-pin { transform: translateY(-7px); }
.map-locate { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: 800 var(--fs-small) var(--font); cursor: pointer; transition: border-color .2s, opacity .3s var(--ease); }
.map-locate:hover { border-color: var(--ink); }
.map-locate:disabled { color: var(--muted); cursor: progress; }
.map-locate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 36px; margin-top: 8px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.45; }
.map-status > span { flex: 1 1 11rem; min-width: 0; }  /* el texto se acomoda al lado del botón; solo en pantallas muy angostas el botón baja */
.has-point > .map-status { color: var(--ink); font-weight: 700; }
.is-failed > .map-status { color: var(--hazard); }
.map-clear { flex: none; min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink); font: 800 var(--fs-small) var(--font); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.map-clear:hover { text-decoration-color: var(--ink); }
.map-clear[hidden] { display: none; }
/* «Marcar aquí»: confirma el lugar que está bajo el marcador gris */
.map-mark { flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: 800 var(--fs-small) var(--font); cursor: pointer; transition: border-color .2s; }
.map-mark:hover { border-color: var(--ink); }
.map-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-mark[hidden] { display: none; }
/* Controles de Leaflet con el lenguaje del sitio: línea fina, sin sombra */
.map-canvas .leaflet-bar { border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: none; overflow: hidden; }
.map-canvas .leaflet-bar a { width: 38px; height: 38px; line-height: 36px; color: var(--ink); font: 700 20px/36px var(--font); border-bottom-color: var(--line); }
.map-canvas .leaflet-bar a:hover { background: var(--bg-alt); color: var(--ink); }
.map-canvas .leaflet-control-attribution { padding: 1px 6px; border-radius: 8px 0 0 0; background: rgb(255 255 255 / .85); color: var(--ink-2); font: 600 11px/1.5 var(--font); }
.map-canvas .leaflet-control-attribution a { color: var(--ink); }
/* Formulario: la fila de la dirección avisa que lleva un punto */
.pick-flag { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--accent); font-size: var(--fs-small); font-weight: 800; line-height: 1.3; }
.pick-flag svg { width: 15px; height: 15px; }
.guide-step .text-map { margin-top: 12px; }

/* Horario: opciones de un toque (2 × 2, compactas) o rango con botones de hora */
.time { display: grid; gap: 16px; }
.time .opts.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.time .is-cards .opt { flex-direction: row; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; }
.time .is-cards .opt-icon { width: 24px; height: 24px; }
.time .is-cards .opt-check { display: none; }
/* Días: varios meses seguidos, se recorren deslizando */
.cal-months { display: grid; gap: 24px; }
.cal-months .cal-head { justify-content: flex-start; margin-bottom: 10px; }
.time-range h3 { margin-bottom: 8px; color: var(--ink-2); font-size: var(--fs-caption); font-weight: 800; }
.hours + h3 { margin-top: 12px; }
.hours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hour {
  min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
  font: 700 var(--fs-body-sm) var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.hour[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.hour:disabled { border-color: transparent; background: var(--bg-alt); color: var(--line-strong); cursor: default; }
.hour:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) { .hour:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--line-strong); background: var(--bg-alt); } }
.pick[data-invalid] .pick-error { display: block; }
.hcard-head .picks { margin-top: 14px; }
.picks-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
button.text-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.more-fields { margin-top: 12px; }
.more-fields > .picks { margin-top: 10px; }
.more-fields > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; cursor: pointer; list-style: none;
  color: var(--accent-strong); font-weight: 800; font-size: .875rem;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary span { color: var(--muted); font-weight: 700; }
.more-fields > summary::before, .pm {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 99px; background-color: transparent; box-shadow: inset 0 0 0 1.5px currentColor;  /* «+» con contorno fino, sin relleno tonal */
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 10px 2px, 2px 10px; background-position: center; background-repeat: no-repeat;
  transition: background-size .25s var(--ease), background-color .2s;
}
.more-fields[open] > summary::before { background-size: 10px 2px, 2px 0; }

/* Resumen listo */
.hcard .summary { padding: 0; border-radius: 0; background: #fff; }
.hcard .summary pre { margin: 0; max-height: none; background: var(--bg-alt); }
.summary-check { width: 26px; height: 26px; flex: none; }
.summary-check circle { fill: var(--safe); }
.summary-check path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes check-draw { from { stroke-dashoffset: 24; } }
  .summary:not([hidden]) .summary-check path, .guide-done .summary-check path { animation: check-draw .5s .25s var(--ease) both; }
}

/* ---------- Ventana de selección (assets/site/seleccion.js): diálogo en escritorio, hoja inferior en móvil ---------- */
.picker-open { overflow: hidden; }
.picker { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 20px; border: 0; background: transparent; color: var(--ink); overflow: hidden; overflow: clip; }
/* overflow: clip (y no solo hidden): al abrir, el navegador enfoca el primer botón; si la ventana todavía viene subiendo,
   con hidden desplazaba el contenedor para mostrarlo y la ventana se pasaba hacia arriba, se cortaba y volvía de golpe */
.picker[open] { display: grid; place-items: center; }
.picker::backdrop { background: rgb(22 18 42 / .42); -webkit-backdrop-filter: blur(4.8px); backdrop-filter: blur(4.8px); }
.picker-card {
  display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(720px, calc(100dvh - 40px)); overflow: hidden;
  border-radius: 24px; background: #fff; box-shadow: 0 40px 90px -30px rgb(var(--stage) / .6);
}
.picker-grab { display: none; }
.picker-head { display: flex; align-items: center; gap: 8px; padding: 18px 16px 12px 22px; }
.picker-titles { margin-right: auto; min-width: 0; }
.picker-titles h2 { font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.3; }
.picker-titles p { margin-top: 3px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
.picker-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 99px; background: var(--bg-sunk); color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.picker-icon svg { width: 18px; height: 18px; }
.picker-icon:hover { background: var(--line); color: var(--ink); }
.picker-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker-head [data-back] { margin-left: -8px; }
.picker-search { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 22px 12px; padding: 0 14px; border-radius: 999px; background: var(--bg-sunk); color: var(--muted); transition: box-shadow .2s; }
.picker-search svg { width: 18px; height: 18px; flex: none; }
.picker-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font-size: 1rem; }
.picker-search input:focus { outline: none; }
.picker-search:focus-within { box-shadow: 0 0 0 2px var(--accent); background: #fff; }
.picker-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 22px; scrollbar-width: thin; }
.picker-foot { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); }
.picker-count { margin-right: auto; color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }
@media (max-width: 640px) {
  /* Pantalla completa, sobre el teclado si está abierto; el fondo se vela sin desenfoque (más fluido en el teléfono) */
  .picker { padding: var(--vv-top, 0px) 0 var(--vv-bottom, 0px); }
  .picker[open] { place-items: stretch; }
  .picker::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(22 18 42 / .5); }
  .picker-card { width: 100%; height: 100%; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); will-change: transform; }
  .picker-grab { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: var(--line-strong); }
  .picker-head { padding: 10px 12px 10px 18px; }
  .picker-search { margin-inline: 18px; }
  .picker-body { padding-inline: 18px; }
  .picker-foot { padding-inline: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes picker-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
  @keyframes picker-sheet { from { opacity: .4; transform: translateY(36%); } }
  @keyframes picker-out { to { opacity: 0; transform: translateY(8px) scale(.99); } }
  @keyframes veil { from { opacity: 0; } }
  .picker[open] .picker-card { animation: picker-in .4s var(--ease) both; }
  .picker[open]::backdrop { animation: veil .3s ease both; }
  .picker.is-closing .picker-card { animation: picker-out .18s ease both; }
  .picker.is-closing::backdrop { animation: veil .18s ease reverse both; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .picker[open] .picker-card { animation: sheet-up .42s cubic-bezier(.32, .72, 0, 1) both; }
  .picker.is-closing .picker-card { animation: sheet-down .22s cubic-bezier(.4, 0, 1, 1) both; }
  /* Ventana de texto: aparece en su lugar (sin subir), así el campo ya está donde va cuando se abre el teclado */
  .picker.is-still[open] .picker-card { animation: veil .2s ease both; }
}

/* Opciones */
.opt-group + .opt-group { margin-top: 18px; }
.opt-group h3 { margin-bottom: 8px; color: var(--ink-2); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0; }
.opts { display: grid; gap: 8px; }
.opts.is-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.opts.is-tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.opts.is-cards { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.opts.is-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.opts.is-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opts.is-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.opt[hidden] { display: none; }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt:active { border-color: var(--line-strong); background: var(--bg-alt); }
@media (hover: hover) { .opt:hover { border-color: var(--line-strong); background: var(--bg-alt); } }
.opt-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.opt-text strong { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.opt-text small { color: var(--muted); font-size: var(--fs-caption); line-height: 1.4; }
.opt img { width: 48px; height: 48px; flex: none; border-radius: 12px; object-fit: cover; background: var(--bg-sunk); }
.opt-icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--ink-2); transition: color .2s; }
.opt-icon svg { width: 20px; height: 20px; }
.opt-check { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 99px; background: #fff; transition: background-color .2s, border-color .2s, opacity .2s; }
.opt-chev { flex: none; width: 16px; height: 16px; color: var(--muted); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.opt-chev svg { display: none; }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.opt[aria-pressed="true"] .opt-icon { color: var(--accent-strong); }
.opt[aria-pressed="true"] .opt-check {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.is-tiles .opt { flex-direction: column; justify-content: flex-start; gap: 8px; min-height: 0; padding: 12px 8px 10px; text-align: center; }
.is-tiles .opt img { width: 56px; height: 56px; border-radius: 14px; }
.is-tiles .opt-text strong { font-size: var(--fs-caption); }
.is-tiles .opt-text small { font-size: var(--fs-caption); }
.is-tiles .opt-check, .is-cards .opt-check, .is-modes .opt-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; opacity: 0; }
.is-tiles .opt[aria-pressed="true"] .opt-check, .is-cards .opt[aria-pressed="true"] .opt-check, .is-modes .opt[aria-pressed="true"] .opt-check { opacity: 1; }
.is-cards .opt { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 14px; }
.is-chips .opt { width: auto; min-height: 40px; padding: 7px 14px; border-radius: 999px; }
.is-chips .opt-text { display: flex; align-items: baseline; gap: 6px; }
.is-chips .opt-check, .is-grid .opt-check { display: none; }
.is-grid .opt { min-height: 44px; padding: 8px 12px; border-radius: 12px; }
.is-modes .opt { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
.opt[data-tone]::before { content: ""; width: 30px; height: 6px; border-radius: 99px; background: var(--grad-programado); }
.opt[data-tone="express"]::before { background: var(--grad-express); }
.opt[data-tone="flexible"]::before { background: var(--grad-flexible); }
.opt-empty { padding: 18px 2px; color: var(--muted); font-size: .9375rem; }
@media (max-width: 560px) { .opts.is-modes { grid-template-columns: minmax(0, 1fr); } .opts.is-tiles { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }

/* Fecha y horario */
.when { display: grid; gap: 18px; }
.when-hint { color: var(--muted); font-size: .875rem; font-weight: 700; }
.when-label { margin-bottom: 10px; color: var(--ink-2); font-size: var(--fs-caption); font-weight: 800; }
.when-note { padding: 12px 14px; border-radius: 12px; background: var(--tone-amber-soft); color: #7c3d0a; font-size: .875rem; font-weight: 700; }
.when-range { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.when-range label { display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-caption); font-weight: 800; }
.when-range select {
  min-height: 42px; padding: 0 36px 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: .9375rem; color: var(--ink);
  -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7185' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 12px center / 14px no-repeat;
}
.cal { max-width: 380px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head strong { font-size: .9375rem; }
.cal-head strong::first-letter { text-transform: uppercase; }
.cal-nav { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 99px; background: var(--bg-sunk); color: var(--ink-2); cursor: pointer; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-week span { padding: 4px 0; color: var(--muted); font-size: var(--fs-caption); font-weight: 700; text-align: center; }
.cal-day { aspect-ratio: 1; min-height: 36px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 700 .9375rem var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .2s, color .2s; }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-day:disabled { color: var(--line-strong); cursor: default; }
.cal-day[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) { .cal-day:not(:disabled):not([aria-pressed="true"]):hover { background: var(--bg-alt); } }

/* ---------- Resultados del buscador ---------- */
.results-count { font-size: .875rem; font-weight: 700; color: var(--ink-2); min-height: 1.5em; }
.results-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.results-list { list-style: none; margin-top: 6px; transition: opacity .16s ease; }
.results-list.is-updating { opacity: 0; }
.result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.result:first-child { border-top: 0; }
.result > div { grid-column: 1; }
.result h3 { font-size: .9375rem; letter-spacing: -.01em; line-height: 1.35; }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; color: var(--muted); font-size: var(--fs-caption); }
.result-meta .pill { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink-2); }
.result-meta .pill::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--safe); }
.result-meta .pill.is-hazard::before { background: var(--hazard); }
.result-waste { grid-column: 1; color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes result-in { from { opacity: 0; transform: translateY(4px); } }
  .result.is-new { animation: result-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
}
.result.is-skeleton { grid-template-columns: minmax(0, 1fr) 110px; }
.result.is-skeleton i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-sunk) 30%, var(--bg-alt) 50%, var(--bg-sunk) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.result.is-skeleton i:first-child { width: 70%; height: 14px; }
.result.is-skeleton i:last-child { grid-column: 2; height: 32px; border-radius: 99px; }
@keyframes shimmer { to { background-position: -150% 0; } }
.results-empty { padding: 16px; border-radius: var(--r-m); background: var(--bg-alt); color: var(--ink-2); font-size: .9375rem; }
.results-empty .actions { margin-top: 12px; }
.results-more { display: flex; margin: 12px auto 0; }
.finder-source { color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

/* ---------- Móvil: el hero se compacta; con una opción abierta, las opciones pasan a pestañas en una fila ---------- */
@media (max-width: 860px) {
  .hero { padding-top: 8px; }
  .stage { display: block; height: auto; border-radius: 22px; overflow: clip; }
  .stage::before { display: none; }
  .stage-media { position: relative; z-index: auto; display: block; }
  .stage-media img { height: auto; aspect-ratio: 16 / 9; }
  .stage-media::after { content: ""; position: absolute; inset: auto 0 0; height: 60%; background: linear-gradient(transparent, var(--navy)); }
  /* Opciones y tarjeta con el mismo margen lateral (12 px): los bordes no cambian al elegir */
  .stage-side { position: relative; gap: 18px; margin-top: -44px; padding: 0 12px 12px; }
  .stage-copy { padding-inline: 4px; }
  .stage-copy .lead { margin-top: 10px; font-size: .9375rem; }
  .pick-value { font-size: 1rem; }
  .route { padding: 10px 12px 10px 9px; }

  /* Cabecera de la tarjeta: título y cerrar en una fila; Formulario/Conversación debajo, a todo el ancho */
  .hcard-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
  .hcard-title h2 { grid-row: 1; margin: 0; }
  .hcard-title .hcard-close { grid-column: 2; grid-row: 1; }
  .hcard .stepper { margin-top: 12px; }
  .hcard-body { padding: 14px 14px 18px; }
  .hcard-head { padding: 14px 14px 12px; }
  .hcard-foot { padding-inline: 14px; }
  .picks-row { grid-template-columns: minmax(0, 1fr); }
  .result { grid-template-columns: minmax(0, 1fr); }
  .result .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  .result.is-skeleton { grid-template-columns: 1fr; }
  .result.is-skeleton i:last-child { grid-column: auto; width: 110px; }
}

/* ---------- Entradas del hero: suaves y sin rebote. El alto de la tarjeta lo anima transporte-ui.js ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-card-in { from { opacity: 0; transform: translateY(10px); } }
  @keyframes hero-fade-in { from { opacity: 0; } }
  .stage-panel:not([hidden]) > .hcard { animation: hero-card-in .45s var(--ease) both; }
  .hcard-panel:not([hidden]), .hcard .summary:not([hidden]) { animation: hero-fade-in .3s ease both; }
  .routes-pill:not([hidden]) { animation: hero-fade-in .25s ease both; }
  .qform fieldset.is-entering { animation: step-in .4s var(--ease) both; }
  .qform fieldset.is-entering-back { animation: step-back .4s var(--ease) both; }
}

/* ---------- Servicios ---------- */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.service { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg); }
.service-media { aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg-sunk); }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-body { padding: clamp(18px, 2.6vw, 24px); }
.service h3 { font-size: var(--fs-card); letter-spacing: -.012em; }
.service-body > p { margin-top: 6px; color: var(--ink-2); font-size: .9375rem; }
.service-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.more-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--ink-2); font: 800 .875rem/1 var(--font); cursor: pointer; }
.more-toggle:hover { color: var(--ink); }
.more-toggle .pm { background-color: transparent; }
.more-toggle[aria-expanded="true"] .pm { background-size: 10px 2px, 2px 0; }
.more-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.collapse.is-open { grid-template-rows: 1fr; }
.collapse-inner { min-height: 0; overflow: hidden; }
.collapse-inner > * { opacity: 0; transition: opacity .3s ease; }
.collapse.is-open .collapse-inner > * { opacity: 1; transition-delay: .1s; }
.service-more { margin-top: 14px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line-strong); color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }

.extras { margin-top: clamp(32px, 4vw, 44px); }
.extras-title { margin-bottom: 14px; font-size: var(--fs-card); letter-spacing: -.012em; }
.extras-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 28px; }
.extra {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 0 6px; border-top: 1px solid var(--line-strong);
  color: inherit; text-decoration: none;
}
.extra-icon { display: block; margin-bottom: 8px; color: var(--ink-2); }
.extra-icon svg { display: block; width: 22px; height: 22px; }
.extra strong { font-size: .9375rem; line-height: 1.3; letter-spacing: -.01em; }
.extra-text { color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.extra-link { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 10px; color: var(--accent); font-weight: 800; font-size: .875rem; }
.extra-link::after {
  content: ""; width: 13px; height: 13px; background: currentColor; transition: transform .3s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.extra:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .extra:hover .extra-link::after { transform: translateX(2px); } }
@media (max-width: 960px) { .extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .extras-grid { grid-template-columns: 1fr; } }

/* ---------- Modalidades: portada en degradado con el nombre centrado ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan {
  --grad: var(--grad-programado); --tone: var(--accent);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff;
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.plan[data-tone="express"] { --grad: var(--grad-express); --tone: var(--tone-amber); }
.plan[data-tone="flexible"] { --grad: var(--grad-flexible); --tone: var(--tone-teal); }
.plan-cover { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 172px; padding: 30px 20px 28px; background: var(--grad); color: #fff; text-align: center; }
.plan-cover h3 { color: #fff; font-size: clamp(1.5rem, 1.35rem + .5vw, 1.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
.plan-cover p { color: rgb(255 255 255 / .84); font-size: .9375rem; font-weight: 600; }
.plan-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; text-align: center; }
.plan-promise { font-weight: 700; line-height: 1.45; }
.plan-text { margin-top: 6px; color: var(--ink-2); font-size: .9375rem; }
.plan-note { margin-top: 6px; color: var(--muted); font-size: var(--fs-caption); }
.plan-body > :nth-last-child(2) { margin-bottom: 22px; }
.plan-btn { width: 100%; margin-top: auto; }
.plan-btn:hover { border-color: var(--tone); color: var(--tone); }
@media (hover: hover) { .plan:hover { border-color: color-mix(in srgb, var(--tone) 30%, var(--line)); box-shadow: 0 26px 50px -30px rgb(21 26 45 / .4); } }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan-cover { min-height: 150px; } }

/* ---------- Cierre ---------- */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px;
  padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: var(--navy); color: #fff;
}
.cta-band > div:first-child { max-width: 560px; }
.cta-band .title { color: #fff; }
.cta-band .lead { margin-top: 8px; color: rgb(255 255 255 / .78); }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / .4); }
.cta-band .btn-secondary:hover { border-color: #fff; }

/* ---------- Proceso: cinco pasos en tarjetas numeradas; el último, el respaldo, destacado ---------- */
.timeline { list-style: none; counter-reset: stage; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; }
.timeline li {
  counter-increment: stage; position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 8px 6px 0; border-top: 2px solid var(--line-strong);
}
.timeline li::before {
  content: counter(stage, decimal-leading-zero); display: block; margin-bottom: 10px;
  color: var(--muted); font-weight: 800; font-size: var(--fs-small); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.timeline li:not(:last-child)::after { content: none; }
/* El último paso (el respaldo) se destaca con el color de la marca, sin tarjeta */
.timeline li:last-child { border-top-color: var(--accent); }
.timeline li:last-child::before, .timeline li:last-child h3 { color: var(--accent-strong); }
.timeline h3 { font-size: var(--fs-body-sm); letter-spacing: -.01em; line-height: 1.35; }
.timeline p { color: var(--ink-2); font-size: var(--fs-small); }
@media (max-width: 1000px) {
  /* Tres arriba y dos abajo, ambas filas a todo el ancho */
  .timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .timeline li { grid-column: span 2; }
  .timeline li:nth-child(n + 4) { grid-column: span 3; }
  .timeline li:nth-child(3)::after { display: none; }
}
@media (max-width: 700px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .timeline li, .timeline li:nth-child(n + 4) { grid-column: auto; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-top-width: 1px; }
  .timeline li::before { grid-row: span 2; margin: 1px 0 0; }
}

/* ---------- Preguntas frecuentes y banda de gestores ---------- */
.faq-more { margin-top: 18px; color: var(--muted); font-size: var(--fs-small); }
.section-head .faq-more + .btn { margin-top: 8px; }
.partner { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; }
.section-alt .partner { background: #fff; border-color: transparent; box-shadow: var(--shadow-s); }
.partner-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad-programado); color: #fff; }
.partner-icon svg { width: 22px; height: 22px; }
.partner h3 { font-size: var(--fs-card); }
.partner p { font-size: var(--fs-body-sm); }
@media (max-width: 700px) { .partner { grid-template-columns: 48px minmax(0, 1fr); align-items: start; padding: 20px 18px; } .partner .btn { grid-column: 1 / -1; justify-self: start; } }

/* ---------- Asistente guiado en el hero (assets/site/asistente.js) ---------- */
.guide-meta { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.guide-meta .stepper-bar { flex: 1; }
.guide-meta span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-trail {
  display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.guide-trail::-webkit-scrollbar { display: none; }
.guide-trail[hidden] { display: none; }
.trail-chip {
  display: inline-flex; flex: none; align-items: center; gap: 6px; max-width: 240px; padding: 5px 10px 5px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); color: var(--ink-2);
  font: 700 var(--fs-caption)/1.3 var(--font); white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
}
.trail-chip::after {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trail-chip:hover { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.trail-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-body { padding-top: 22px; }
.guide-hello { margin-bottom: 10px; color: var(--accent-strong); font-size: .875rem; font-weight: 700; }
.guide-q { font-size: var(--fs-subtitle); line-height: 1.25; letter-spacing: -.015em; }
.guide-q:focus { outline: none; }
.guide-help { margin-top: 6px; color: var(--muted); font-size: .9375rem; }
.guide-area, .guide-search, .guide-describe, .guide-step > .picks { margin-top: 18px; }
.guide-describe[hidden] { display: none; }
.guide-input {
  width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff;
  color: var(--ink); font: 600 1.0625rem var(--font); transition: border-color .2s, box-shadow .2s;
}
.guide-step > .guide-input { margin-top: 18px; }
.guide-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.guide-input[aria-invalid="true"], .guide-input:user-invalid { border-color: var(--hazard); }
.guide-search .guide-input { min-height: 44px; border-color: transparent; border-radius: 999px; background: var(--bg-sunk); font-size: 1rem; }
.guide-search .guide-input:focus { background: #fff; }
.guide-foot .guide-spacer { flex: 1; }
.guide-done { display: flex; align-items: flex-start; gap: 14px; }
.guide-done .summary-check { width: 40px; height: 40px; }
.review { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.review > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 11px 14px; }
.review > div + div { border-top: 1px solid var(--line); }
.review dt { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }
.review dd { margin: 0; font-size: .9375rem; font-weight: 700; overflow-wrap: anywhere; }
.review .text-link { color: var(--accent); font-size: var(--fs-caption); }
.guide-note { margin-top: 14px; color: var(--muted); font-size: var(--fs-caption); }
@media (max-width: 560px) { .review > div { grid-template-columns: minmax(0, 1fr) auto; } .review dt { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes guide-in { from { opacity: 0; transform: translateY(8px); } }
  .guide-step { animation: guide-in .45s var(--ease) both; }
}

@media print { .picker { display: none !important; } }
.when .cal { max-width: none; }
.when .cal-day { aspect-ratio: auto; height: 40px; }

/* ---------- Campo de conversación del hero ---------- */
.ask {
  display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 6px 6px 18px;
  border-radius: 18px; background: rgb(255 255 255 / .96); color: var(--ink);
  box-shadow: 0 16px 36px -18px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .6); transition: box-shadow .25s var(--ease);
}
.ask:focus-within { box-shadow: 0 16px 36px -18px rgb(0 0 0 / .55), 0 0 0 3px rgb(255 255 255 / .38); }
.ask input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 600 1rem/1.4 var(--font); }
.ask input:focus { outline: none; }
.ask input::placeholder { color: var(--muted); opacity: 1; }
.ask-send {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 13px;
  background: var(--accent); color: #fff; cursor: pointer; transition: background-color .2s;
}
.ask-send svg { width: 20px; height: 20px; }
.ask-send:hover { background: var(--accent-strong); }
.ask-send:active { background: var(--accent-strong); }
.ask-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage-side { gap: 20px; }
.stage-copy { margin-bottom: auto; }
@media (min-width: 861px) { .stage:not([data-view="inicio"]) .ask { display: none; } }

/* ---------- Asistente: conversación breve sobre cada pregunta ---------- */
.guide-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.guide-meta .stepper-bar { flex: 1; }
.guide-back { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: -4px; border: 0; border-radius: 99px; background: var(--bg-sunk); color: var(--ink-2); cursor: pointer; }
.guide-back svg { width: 16px; height: 16px; }
.guide-back:hover { background: var(--line); color: var(--ink); }
.guide-back[hidden] { display: none; }
.guide-chat { display: grid; gap: 8px; margin-bottom: 18px; }
.bubble { max-width: 88%; padding: 10px 14px; font-size: .9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.bubble.is-user { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--accent); color: #fff; font-weight: 600; }
.bubble.is-bot { justify-self: start; position: relative; padding-left: 40px; border-radius: 18px 18px 18px 6px; background: var(--bg-alt); color: var(--ink-2); }
.bubble.is-bot::before { content: ""; position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; border-radius: 99px; background: var(--grad-programado); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35); }
.guide-next { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.guide-next:not(:has(:not([hidden]))) { display: none; }
.hcard-panel > form.guide-composer { display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 0; padding: 10px 12px; }
.hcard-panel > .guide-composer[hidden], .guide-actions[hidden] { display: none; }
.guide-composer input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff;
  color: var(--ink); font: 600 .9375rem var(--font); transition: border-color .2s, box-shadow .2s;
}
.guide-composer input::placeholder { color: var(--muted); font-weight: 500; }
.guide-composer input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.guide-actions { justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes bubble-in { from { opacity: 0; transform: translateY(6px); } }
  .bubble { animation: bubble-in .4s var(--ease) both; }
  .bubble.is-bot { animation-delay: .12s; }
}

/* ---------- Ventana: pestañas por grupo y mosaicos parejos ---------- */
.picker-tabs { display: flex; gap: 4px; margin: 0 22px 12px; padding: 4px; border-radius: 999px; background: var(--bg-sunk); }
.picker-tabs[hidden] { display: none; }
.picker-tabs button {
  display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 800 .875rem var(--font); cursor: pointer;
  transition: background-color .25s var(--ease), color .25s, box-shadow .25s;
}
.picker-tabs button span { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }
.picker-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(21 26 45 / .14); }
.picker-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.picker-foot [data-action] { margin-right: auto; }
.picker-foot [data-action][hidden] { display: none; }
.picker-foot [data-done][hidden] { display: none; }
.opts.is-tiles { grid-auto-rows: 1fr; }
.is-tiles .opt img, .is-tiles .opt-icon { width: 52px; height: 52px; border-radius: 14px; }
.is-tiles .opt-icon svg { width: 22px; height: 22px; }
/* Tres líneas: los nombres largos («Envases y materiales contaminados») se leen completos */
.is-tiles .opt-text strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* Teléfono: en la ventana, los residuos van en dos columnas de filas compactas (imagen a la izquierda y el nombre
   completo), para que todas las categorías de un tipo se vean sin bajar (pedido del cliente, 09-10-2026) */
@media (max-width: 560px) {
  .picker .opts.is-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6px; }
  .picker .is-tiles .opt { flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 7px 10px; text-align: left; }
  .picker .is-tiles .opt img, .picker .is-tiles .opt-icon { width: 36px; height: 36px; border-radius: 10px; }
  .picker .is-tiles .opt-text strong { line-height: 1.25; }
  .picker .is-tiles .opt-check { top: 50%; right: 8px; translate: 0 -50%; }
  .picker .is-tiles .opt[aria-pressed="true"] { padding-right: 32px; }
}
.is-grid .opt-text small { font-size: var(--fs-caption); }
@media (max-width: 640px) { .picker-tabs { margin-inline: 18px; } }

/* ---------- Señal implícita de scroll: el borde por donde continúa el contenido se difumina ---------- */
@property --fade-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* Sin transición: animar el degradado obligaba a repintar toda la lista en cada cuadro justo al abrir la ventana */
.picker-body[data-scrolled], .hcard-body[data-scrolled] { --fade-top: 24px; }
.picker-body[data-more], .hcard-body[data-more] { --fade-bottom: 72px; }
.picker-body[data-more], .picker-body[data-scrolled], .hcard-body[data-more], .hcard-body[data-scrolled] {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), rgb(0 0 0 / .08) 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), rgb(0 0 0 / .08) 100%);
}

/* ---------- Cotizar: siempre formulario. Para conversar, un enlace a WhatsApp; el asistente tiene su propio apartado ---------- */
.hcard-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.hcard-alt a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.hcard-alt a:hover { text-decoration-color: var(--ink); }
.hcard-alt svg { width: 16px; height: 16px; color: #0f8446; }
.guide-form { flex: none; min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink); font: 800 var(--fs-small) var(--font); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color .2s; }
.guide-form:hover { text-decoration-color: var(--ink); }
.guide-form:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* NumberFlow: dígitos tabulares y máscara corta para que el número no salte al animar */
number-flow { font-variant-numeric: tabular-nums; --number-flow-mask-height: .15em; }
.results-count number-flow { color: var(--ink); font-weight: 800; }

/* ---------- Tamaños táctiles y tablet ---------- */
.hcard .stepper-labels > * { min-height: 28px; }
@media (max-width: 860px) {
  .hcard-close { width: 40px; height: 40px; }
  .hcard .stepper-labels > * { min-height: 36px; }
  .guide-back { width: 36px; height: 36px; }
  .trail-chip { min-height: 34px; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .stage-media img { aspect-ratio: 2 / 1; }
}
/* Teléfonos: la foto se ajusta al alto visible (con las barras del navegador) para que título, campo y las tres opciones
   quepan en la primera pantalla; en teléfonos altos conserva su tamaño */
@media (max-width: 599px) {
  .stage-media img { aspect-ratio: auto; height: clamp(112px, calc(100vh - 500px), 210px); height: clamp(112px, calc(100svh - 500px), 210px); }
}

/* ---------- Teléfonos: el hero de inicio completo cabe en la primera pantalla ----------
   Va al final para imponerse a las reglas generales del hero. Solo se ajustan espacios; textos y áreas táctiles no bajan. */
@media (max-width: 599px) {
  .stage-side { gap: 14px; }
  .stage-copy .lead { margin-top: 8px; line-height: 1.5; }
  .ask { min-height: 52px; padding: 4px 4px 4px 16px; border-radius: 16px; }
  .routes { padding: 4px; gap: 2px; }
  .route { padding-block: 8px; }
  .route-text strong { line-height: 1.25; }
}
/* Teléfonos muy bajos (p. ej., iPhone SE con las barras abiertas): sin la bajada, para que quepan el campo y las tres opciones */
@media (max-width: 599px) and (max-height: 600px) {
  .stage-copy .lead { display: none; }
}

/* ---------- Móvil: cada opción del hero se abre a pantalla completa (transporte-ui.js mueve la tarjeta a <dialog class="hero-sheet">) ----------
   Mismo lenguaje que las ventanas de selección: sube sólida desde abajo y se cierra con la X, con «atrás», con Escape
   o bajándola con el dedo desde la manilla o la cabecera. Se apoya sobre el teclado (--vv-bottom, site.js). */
.sheet-open { overflow: hidden; }
.sheet-open .dock { opacity: 0; visibility: hidden; }
@media (max-width: 860px) { .docs-is-open .dock { opacity: 0; visibility: hidden; } }  /* en el teléfono el panel de ayuda ocupa la pantalla */
.hero-sheet {
  position: fixed; inset: var(--vv-top, 0px) 0 var(--vv-bottom, 0px); width: 100%; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  border-radius: 0; background: transparent; color: var(--ink); overflow: hidden; overflow: clip;
}
.hero-sheet[open] { display: flex; flex-direction: column; }
/* El <dialog> queda quieto; lo que sube es el panel */
.sheet-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); background: #fff; overflow: hidden; overflow: clip; will-change: transform; }
/* Punto de inicio del foco al abrir una ventana u hoja: fijo e invisible, fuera de lo que se anima */
.dialog-start { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; outline: none; }
.hero-sheet::backdrop { background: rgb(22 18 42 / .5); }
.sheet-grab { flex: none; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: var(--line-strong); }
.hero-sheet .sheet-grab, .hero-sheet .hcard-head { touch-action: none; }
.hero-sheet .hcard { flex: 1 1 auto; min-height: 0; max-height: none; border-radius: 0; box-shadow: none; }
.hero-sheet .hcard-head { padding-top: 8px; }
.hero-sheet .hcard-body { overflow-y: auto; overscroll-behavior: contain; }
.hero-sheet .hcard-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
  .hero-sheet[open] .sheet-panel { animation: sheet-up .42s cubic-bezier(.32, .72, 0, 1) both; }
  /* La hoja entra sólida: su contenido no se funde encima (se vería «cargando») */
  .hero-sheet .hcard-panel:not([hidden]), .hero-sheet .summary:not([hidden]) { animation: none; }
  .hero-sheet[open]::backdrop { animation: veil .3s ease both; }
  .hero-sheet.is-closing .sheet-panel { animation: sheet-down .24s cubic-bezier(.4, 0, 1, 1) both; }
  .hero-sheet.is-closing::backdrop { animation: veil .24s ease reverse both; }
}
/* Escritorio: abierta desde la burbuja «?», la opción aparece en un panel que nace de la burbuja (mismo rincón) */
@media (min-width: 861px) {
  .hero-sheet.is-float {
    inset: auto max(clamp(16px, 2.5vw, 28px), env(safe-area-inset-right, 0px)) calc(clamp(16px, 2.5vw, 28px) + env(safe-area-inset-bottom, 0px)) auto;
    width: min(460px, calc(100vw - 48px)); height: min(760px, calc(100dvh - 48px)); border-radius: 26px;
    box-shadow: 0 40px 90px -30px rgb(21 26 45 / .5), 0 0 0 1px rgb(21 26 45 / .07);
  }
  .hero-sheet.is-float::backdrop { background: rgb(22 18 42 / .16); }
  .hero-sheet.is-float .sheet-panel { padding-top: 0; border-radius: inherit; }
  .hero-sheet.is-float .sheet-grab { display: none; }
  .hero-sheet.is-float .hcard-head { padding-top: 18px; }
  .hero-sheet.is-float .hcard-foot { padding-bottom: 14px; }
  /* El panel es angosto: la tarjeta usa su disposición compacta (la misma del teléfono) */
  .hero-sheet.is-float .hcard-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
  .hero-sheet.is-float .hcard-title h2 { grid-row: 1; margin: 0; }
  .hero-sheet.is-float .hcard-title .hcard-close { grid-column: 2; grid-row: 1; }
  .hero-sheet.is-float .picks-row { grid-template-columns: minmax(0, 1fr); }
  .hero-sheet.is-float .result { grid-template-columns: minmax(0, 1fr); }
  .hero-sheet.is-float .result .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes float-in { from { clip-path: inset(calc(100% - 56px) 0 0 calc(100% - 56px) round 28px); } to { clip-path: inset(0 round 26px); } }
    @keyframes float-out { to { clip-path: inset(calc(100% - 56px) 0 0 calc(100% - 56px) round 28px); opacity: 0; } }
    .hero-sheet.is-float[open] .sheet-panel { animation: float-in .55s cubic-bezier(.32, .72, 0, 1) both; }
    .hero-sheet.is-float.is-closing .sheet-panel { animation: float-out .26s cubic-bezier(.4, 0, 1, 1) both; }
  }
}
/* Mientras se escribe en la hoja, el campo sube al inicio de la lista antes de que aparezca el teclado (transporte-ui.js);
   este espacio extra permite subir también el último campo */
.hero-sheet.is-typing .hcard-body { padding-bottom: 55vh; }
/* Ventanas de selección en móvil: también se cierran bajándolas desde la manilla o la cabecera */
@media (max-width: 640px) { .picker-grab, .picker-head { touch-action: none; } }

/* =====================================================================================
   Documentos y normativa (biblioteca en la página y una página por norma en normativa/)
   Publicaciones recientes de LinkedIn con la norma relacionada
   ===================================================================================== */

/* ---------- Biblioteca: colores propios, sin el azul de las acciones de contacto ----------
   Cada norma toma el color apagado de su tema (ícono y rótulo); botones y foco en tinta; lo buscado se marca como con destacador. */
[data-tema] { --tc: #4b5563; --tc-soft: #f1f2f4; }
[data-tema="peligrosos"] { --tc: #b4432a; --tc-soft: #fbeee9; }
[data-tema="transporte"] { --tc: #3f5a7a; --tc-soft: #edf1f5; }
[data-tema="rep"] { --tc: #2f7a4f; --tc-soft: #e8f3ec; }
[data-tema="almacenamiento"] { --tc: #93620f; --tc-soft: #f8f0df; }
[data-tema="sustancias"] { --tc: #7a4a8c; --tc-soft: #f3edf6; }
[data-tema="salud"] { --tc: #1f7472; --tc-soft: #e5f2f1; }
[data-tema="trabajo"] { --tc: #86562a; --tc-soft: #f4ece4; }
[data-tema="registro"] { --tc: #4f5890; --tc-soft: #eeeff6; }
[data-tema="marco"] { --tc: #5c682c; --tc-soft: #f0f2e4; }
.btn-ink { border-color: transparent; background: var(--ink); color: #fff; }
.btn-ink:hover { background: #262c42; }
.btn-ink:active { background: #000; }
.lib mark, .post mark { padding: 0 2px; border-radius: 3px; background: #fde68a; color: inherit; }

/* Buscador: lenguaje editorial (sin contenedores tonales). El ícono pasa a tinta cuando hay algo escrito */
.lib { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.lib-rail { min-width: 0; }
.lib-search {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 10px 0 18px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: #fff; cursor: text; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.lib-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(21 26 45 / .06); }
.lib-search-icon { display: grid; place-items: center; flex: none; color: var(--muted); transition: color .25s var(--ease); }
.lib-search-icon svg { width: 20px; height: 20px; }
.lib-search.has-text .lib-search-icon { color: var(--ink); }
.lib-search input { flex: 1; min-width: 0; height: 54px; border: 0; background: none; color: var(--ink); font: 600 1.0625rem/1.3 var(--font); }
.lib-search input:focus { outline: none; }
.lib-search input::placeholder { color: #8a8f9e; font-weight: 600; }
.lib-search input::-webkit-search-cancel-button { display: none; }
.lib-count { flex: none; color: var(--muted); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.lib-count number-flow { color: var(--ink); font-weight: 800; }
.lib-clear { display: none; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-2); cursor: pointer; transition: color .2s, background-color .2s; }
.lib-clear:hover { background: var(--bg-alt); color: var(--ink); }
.lib-clear svg { width: 16px; height: 16px; }
.lib-search.has-text .lib-clear { display: grid; }
@media (prefers-reduced-motion: no-preference) { .lib-search.has-text .lib-clear { animation: fade-in .2s var(--ease) both; } }

/* Temas: pestañas de texto con un subrayado de tinta que se desliza hasta la elegida */
.lib-rail { position: relative; }
.lib-topics { position: relative; isolation: isolate; display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); }
.lib-topics::-webkit-scrollbar { display: none; }
.lib-topic[hidden] { display: none; }
.lib-rail.can-next .lib-topics { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.lib-rail.can-prev .lib-topics { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px); mask-image: linear-gradient(90deg, transparent, #000 72px); }
.lib-rail.can-prev.can-next .lib-topics { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
.lib-rail-btn { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 32px; height: 32px; margin-top: -17px; border: 1px solid var(--line-strong); border-radius: 99px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .2s; }
.lib-rail-btn.is-prev { left: 0; }
.lib-rail-btn.is-next { right: 0; }
.lib-rail-btn:hover { border-color: var(--ink); }
@media (hover: hover) { .lib-rail.can-prev .is-prev, .lib-rail.can-next .is-next { display: grid; } }
.lib-topic {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--ink-2); font: 700 var(--fs-body-sm) var(--font); white-space: nowrap; cursor: pointer; transition: color .3s var(--ease), opacity .3s var(--ease);
}
.lib-topic i { flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--tc); }
.lib-topic:hover { color: var(--ink); }
.lib-topic[aria-checked="true"] { color: var(--ink); }
.lib-topic:disabled { opacity: .35; cursor: default; }
.lib-topic:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; border-radius: 6px; }
.lib-topics-glide { position: absolute; left: 0; top: 0; z-index: 1; height: 2px; border-radius: 2px; background: var(--ink); pointer-events: none; transition: transform .4s var(--ease), width .4s var(--ease); }
.lib-topics-glide.is-instant { transition: none; }

/* Lista: filas separadas por líneas finas; al pasar el puntero, un fondo muy suave se desliza de fila en fila */
.lib-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid var(--line-strong); transition: opacity .2s var(--ease); }
.lib-list[hidden], .lib-scroll[hidden] { display: none; }
.lib-scroll { position: relative; }
.lib-list.is-updating { opacity: .35; }
.lib-hover { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 8px; background: #f6f5f2; opacity: 0; pointer-events: none; transition: transform .32s var(--ease), height .32s var(--ease), opacity .25s var(--ease); }
.lib-hover.is-on { opacity: 1; }
.lib-hover.is-instant { transition: opacity .25s var(--ease); }
.doc { position: relative; z-index: 1; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 0 14px; min-height: 60px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
/* Ícono de tema: el trazo en su color, sin fondo (nada de contenedores tonales) */
.doc-icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--tc); }
.doc-icon svg { width: 22px; height: 22px; }
.doc > .doc-icon { align-self: start; margin-top: 2px; }
.doc-title { font-size: var(--fs-body-sm); font-weight: 800; line-height: 1.3; letter-spacing: -.005em; }
.doc-title a { color: var(--ink); text-decoration: none; }
.doc-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* toda la fila abre la norma */
.doc-title a:focus-visible { outline: none; }
.doc:has(.doc-title a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.doc-sub { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.doc-sub strong { color: var(--ink-2); font-weight: 700; }
.doc-off { color: var(--hazard); font-weight: 800; }
.doc-rel { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-pdf { position: relative; z-index: 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: var(--fs-small); font-weight: 800; text-decoration: none; transition: border-color .2s, background-color .2s, color .2s; }
.doc-pdf svg { width: 17px; height: 17px; }
.doc-pdf:hover { border-color: var(--ink); background: #fff; }
/* Descarga: el ícono se reemplaza por un ✓ que se dibuja (mismo tamaño: nada se mueve) */
[data-doc-pdf].is-downloading, [data-download].is-downloading { color: var(--safe); }
[data-doc-pdf].is-downloading > svg:not(.done-mark), [data-download].is-downloading > svg:not(.done-mark) { display: none; }
[data-doc-pdf] .done-mark, [data-download] .done-mark { order: -1; flex: none; }
.btn .done-mark, .doc-pdf .done-mark { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
  .done-mark path { stroke-dasharray: 24; animation: draw .4s var(--ease) both; }
  @keyframes doc-in { from { opacity: 0; transform: translateY(6px); } }
  .doc.is-new { animation: doc-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
}
.lib-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; color: var(--ink-2); font-size: var(--fs-body-sm); }
.lib-empty strong { color: var(--ink); font-size: var(--fs-card); }
.lib-try { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 4px; }
.lib-try button { height: 32px; padding: 0; border: 0; background: none; color: var(--ink); font: 800 var(--fs-body-sm) var(--font); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; cursor: pointer; transition: text-decoration-color .2s; }
.lib-try button:hover { text-decoration-color: var(--ink); }
@media (max-width: 860px) {
  .lib-list { grid-template-columns: minmax(0, 1fr); }
  .lib-topics { gap: 20px; }
  .doc { padding: 12px 2px; }
  .doc-pdf span { display: none; }
  .doc-pdf { width: 40px; height: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 560px) { .lib-count { display: none; } }

/* ---------- Publicaciones de LinkedIn: la portada manda; sin cajas dentro de cajas ---------- */
.posts-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.posts-aside { display: flex; align-items: center; gap: 18px; }
.posts-follow { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: var(--fs-small); font-weight: 800; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.posts-follow:hover { text-decoration-color: var(--ink); }
.posts-follow svg { width: 14px; height: 14px; }
.posts-nav { display: flex; gap: 8px; }
.posts-nav button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 99px; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .2s, opacity .25s; }
.posts-nav button svg { width: 18px; height: 18px; }
.posts-nav button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .posts-nav button:not(:disabled):hover { border-color: var(--ink); } }
/* position: relative: los textos ocultos (sr-only, absolutos) quedan dentro del carrusel y no ensanchan la página */
.posts-track {
  position: relative; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 3); gap: 32px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 2px 6px; scrollbar-width: none;
}
.posts-track::-webkit-scrollbar { display: none; }
.post { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.post-cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--bg-sunk); }  /* las portadas son 4:5: el centro muestra el título, sin logo ni «Desliza» cortados */
.post-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(21 26 45 / .06); pointer-events: none; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity .45s var(--ease); }
.post-cover img:not(.is-loaded) { opacity: 0; }
.post-pages { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgb(21 26 45 / .72); color: #fff; font-size: var(--fs-caption); font-weight: 800; -webkit-backdrop-filter: blur(4.8px); backdrop-filter: blur(4.8px); }
.post-pages svg { width: 14px; height: 14px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; }
.post-org { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 800; }
.post-org img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.post-meta time::before { content: "·"; margin-right: 10px; color: var(--line-strong); }
.post-text { color: var(--ink); font-size: var(--fs-body); font-weight: 600; line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-rel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.post-rel small { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; }
.post-rel-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: var(--fs-body-sm); font-weight: 600; text-decoration: none; transition: color .2s; }
.post-rel-link strong { font-weight: 800; }
.post-rel-link > svg:last-child { flex: none; width: 16px; height: 16px; transition: transform .3s var(--ease); }
.post-rel-link:hover { color: var(--tc); }
@media (hover: hover) { .post-rel-link:hover > svg:last-child { transform: translateX(2px); } }
.post-rel-pdf { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: var(--fs-small); font-weight: 800; text-decoration: none; transition: border-color .2s; }
.post-rel-pdf svg { width: 16px; height: 16px; }
.post-rel-pdf:hover { border-color: var(--ink); }
.post-li { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.post-li:hover { color: var(--ink); text-decoration-color: var(--ink); }
.post-li svg { width: 14px; height: 14px; }
.posts-progress { position: relative; height: 2px; margin-top: 22px; overflow: hidden; border-radius: 2px; background: var(--line); }
.posts-progress[hidden] { display: none; }
.posts-progress i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; background: var(--ink); transition: transform .12s linear, width .3s var(--ease); }
.posts-empty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.posts-empty p { max-width: 60ch; color: var(--ink-2); font-size: var(--fs-body-sm); }
.posts-empty strong { display: block; color: var(--ink); font-size: var(--fs-card); }
@media (max-width: 960px) { .posts-track { grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; } }
@media (max-width: 640px) {
  .posts-track { grid-auto-columns: 84%; gap: 18px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .posts-nav { display: none; }
  .posts-aside { width: 100%; }
}
.post-skeleton { min-height: 420px; border-radius: 16px; background: linear-gradient(90deg, var(--bg-sunk) 30%, var(--bg-alt) 50%, var(--bg-sunk) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }

/* ---------- Página de una norma (normativa/*.html) ----------
   Pensada para leer: encabezado corto con datos e íconos, texto a 70 caracteres por línea, índice que sigue la lectura
   y la barra superior convertida en barra de lectura (assets/site/norma.js). */
.norm { max-width: 1120px; padding-block: 14px 72px; }
.norm-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 20px; color: var(--muted); font-size: var(--fs-small); font-weight: 700; }
.norm-crumbs a { color: var(--ink-2); text-decoration: none; }
.norm-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.norm-head { display: grid; gap: 12px; max-width: 1000px; padding-bottom: 28px; }
.norm-kind { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 800; }
.norm-title { font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem); line-height: 1.12; letter-spacing: -.025em; }
.norm-lead { max-width: 62ch; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; }
.norm-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; }
.norm-facts li { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.norm-facts svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.norm-facts time { color: var(--ink); }
.norm-facts .norm-state { color: var(--safe); }
.norm-facts .norm-state svg { color: currentColor; }
.norm-facts .norm-state.is-off { color: var(--hazard); }
.norm-facts a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.norm-facts a svg:last-of-type { width: 14px; height: 14px; color: var(--ink-2); }
.norm-facts a:hover { text-decoration-color: currentColor; }
/* Ayudas de los datos: la primera espera un momento; mientras el grupo está «tibio», las siguientes aparecen al instante */
/* Solo con puntero: en pantallas táctiles no existen (aunque invisibles, ensancharían la página) */
@media (hover: hover) and (min-width: 700px) {
  [data-tip]::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 8px;
    background: var(--ink); color: #fff; font-size: var(--fs-caption); font-weight: 700; line-height: 1.35; opacity: 0; translate: -50% 4px; pointer-events: none;
    transition: opacity .16s var(--ease), translate .2s var(--ease);
  }
  [data-tip]:hover::after { opacity: 1; translate: -50% 0; transition-delay: .45s; }
  .norm-facts li:first-child[data-tip]::after { left: 0; translate: 0 4px; }
  .norm-facts li:first-child[data-tip]:hover::after { translate: 0 0; }
  .is-warm [data-tip]:hover::after { transition-delay: 0s; }
}
.norm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.norm-actions .btn svg { width: 18px; height: 18px; }
.norm-toc-btn { display: none; }
.norm-why { display: flex; align-items: flex-start; gap: 10px; max-width: 70ch; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: var(--tc-soft); color: var(--ink-2); font-size: var(--fs-body-sm); line-height: 1.55; }
.norm-why > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--tc); }
.norm-why strong { color: var(--ink); }

.norm-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 28px; border-top: 1px solid var(--line); }
.norm-toc { position: sticky; top: 92px; max-height: calc(100dvh - 112px); overflow: auto; overscroll-behavior: contain; padding: 0 4px 12px 0; scrollbar-width: thin; }
.norm-toc-h { margin: 0 0 8px 16px; color: var(--muted); font-size: var(--fs-caption); font-weight: 800; }
.norm-toc ol { position: relative; list-style: none; display: grid; gap: 2px; padding: 0; border-left: 2px solid var(--line); }
.norm-toc a { display: grid; gap: 1px; padding: 7px 10px 7px 14px; border-radius: 0 10px 10px 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.35; text-decoration: none; transition: color .2s, background-color .2s; }
.norm-toc a small, .toc-sheet-list a small { color: var(--muted); font-size: var(--fs-caption); font-weight: 800; transition: color .2s; }
.norm-toc a em, .toc-sheet-list a em { color: var(--muted); font-size: var(--fs-caption); font-style: normal; font-weight: 600; }
.norm-toc a:hover { background: var(--bg-alt); color: var(--ink); }
.norm-toc a[aria-current] { color: var(--ink); font-weight: 800; }
.norm-toc a[aria-current] small { color: var(--tc); }
.norm-toc-glide { position: absolute; left: -2px; top: 0; width: 2px; border-radius: 2px; background: var(--tc); opacity: 0; transition: transform .35s var(--ease), height .35s var(--ease), opacity .2s; }
.norm-toc-glide.is-on { opacity: 1; }

.norm-text { min-width: 0; max-width: 70ch; font-size: 1.0625rem; }
.norm-text p { margin: 0 0 .8em; color: var(--ink); line-height: 1.75; overflow-wrap: anywhere; }
.norm-li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); }
.norm-li-m { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.norm-text p.norm-row { margin-bottom: .1em; line-height: 1.6; font-variant-numeric: tabular-nums; }
.norm-text p.norm-row + p:not(.norm-row) { margin-top: .7em; }
.norm-text dfn { font-style: normal; font-weight: 800; }
.norm-part { margin: 56px 0 16px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; }
.norm-part-n { display: block; margin-bottom: 4px; color: var(--tc); font-size: var(--fs-small); font-weight: 800; letter-spacing: 0; }
h3.norm-part { margin-top: 40px; font-size: var(--fs-card); }
h4.norm-part { margin-top: 32px; font-size: var(--fs-body); }
.norm-fold + .norm-part, .norm-text > h2 + .norm-part { margin-top: 28px; }
.norm-art { position: relative; margin-top: 24px; border-radius: 12px; }
.norm-art-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 6px; font-size: var(--fs-body); line-height: 1.35; }
.norm-art-h a { color: var(--ink); font-weight: 800; text-decoration: none; }
.norm-art-h span { color: var(--ink-2); font-weight: 700; }
.norm-art-h span::before { content: "·"; margin-right: 8px; color: var(--line-strong); }
.norm-art.is-derogado { opacity: .6; }
.art-link { display: grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); opacity: 0; cursor: pointer; transition: opacity .2s, background-color .2s, color .2s; }
.art-link .i-done { display: none; }
.norm-art:hover .art-link, .art-link:focus-visible, .art-link.is-done { opacity: 1; }
.art-link:hover { background: var(--bg-sunk); color: var(--ink); }
.art-link.is-done { color: var(--safe); }
.art-link.is-done .i-link { display: none; }
.art-link.is-done .i-done { display: block; }
.art-link.is-done .i-done path { stroke-dasharray: 24; animation: draw .4s var(--ease) both; }
@keyframes norm-flash { 0%, 35% { background: #fef3c7; box-shadow: 0 0 0 10px #fef3c7; } 100% { background: transparent; box-shadow: 0 0 0 10px transparent; } }
.is-flash { animation: norm-flash 2.4s var(--ease); }
.norm-fold { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fbfbfa; }
.norm-fold summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 800; list-style: none; cursor: pointer; }
.norm-fold summary::-webkit-details-marker { display: none; }
.norm-fold summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; transition: rotate .25s var(--ease); }
.norm-fold[open] summary::before { rotate: 45deg; }
.norm-fold summary small { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.norm-fold > :not(summary) { margin-inline: 16px; color: var(--ink-2); font-size: var(--fs-body-sm); }
.norm-fold[open] { padding-bottom: 10px; }
.norm-outro { margin-top: 40px; }
.norm-note { color: var(--muted); font-size: var(--fs-small); }
mark.find-hit { padding: 0 1px; border-radius: 3px; background: #fde68a; color: inherit; }
mark.find-hit.is-current { background: #f59e0b; box-shadow: 0 0 0 2px #f59e0b; color: #1a1300; }
.norm-source { display: grid; gap: 12px; justify-items: start; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }

/* Barra de lectura: la misma píldora del sitio cambia de contenido al bajar (sin cambiar de tamaño) */
.norm-bar .brand, .norm-bar .nav, .norm-bar .menu-toggle { transition: opacity .25s var(--ease), translate .3s var(--ease); }
.norm-bar.is-reading .brand, .norm-bar.is-reading .nav, .norm-bar.is-reading .menu-toggle { opacity: 0; translate: 0 -6px; pointer-events: none; }
.reader, .textfind { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; padding: 0 8px; opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity .25s var(--ease), translate .3s var(--ease); }
.norm-bar.is-reading:not(.is-finding) .reader, .norm-bar.is-finding .textfind { opacity: 1; translate: 0 0; pointer-events: auto; }
.reader-back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; color: var(--ink); transition: background-color .2s; }
.reader-back:hover { background: rgb(21 26 45 / .06); }
.reader-back svg { width: 20px; height: 20px; }
.reader-where { display: grid; flex: 1; min-width: 0; margin-left: 4px; line-height: 1.25; }
.reader-where small, .reader-where strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reader-where small { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }
.reader-where strong { color: var(--ink); font-size: var(--fs-body-sm); font-weight: 800; }
@keyframes reader-swap { from { opacity: 0; filter: blur(2.4px); transform: translateY(3px); } }
.is-swapping { animation: reader-swap .32s var(--ease); }
.reader-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.reader-btn:hover:not(:disabled) { background: rgb(21 26 45 / .06); }
.reader-btn:disabled { opacity: .3; cursor: default; }
.reader-btn svg { width: 20px; height: 20px; }
.reader-btn.is-downloading { color: var(--safe); }
.reader-toc { display: none; }
.textfind-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--muted); }
.textfind-icon svg { width: 20px; height: 20px; }
.textfind input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: var(--ink); font: 600 1rem var(--font); }
.textfind input:focus { outline: none; }
.textfind input::-webkit-search-cancel-button { display: none; }
.textfind-count { flex: none; padding: 0 4px; color: var(--muted); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reader-progress { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(21 26 45 / .07); opacity: 0; transition: opacity .3s; }
.norm-bar.is-reading .reader-progress { opacity: 1; }
.reader-progress i { display: block; height: 100%; background: var(--tc); transform: scaleX(0); transform-origin: 0 50%; }

/* Índice en hoja: pantalla completa en el teléfono, hoja inferior en tablet */
.toc-sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--ink); transform: translateY(100%); transition: transform .3s var(--ease); }
.toc-sheet[open] { display: flex; flex-direction: column; }
.toc-sheet.is-in { transform: none; }
.toc-sheet:focus { outline: none; }
.toc-sheet::backdrop { background: rgb(21 26 45 / .32); opacity: 0; transition: opacity .3s; }
.toc-sheet.is-in::backdrop { opacity: 1; }
html:has(.toc-sheet[open]) { overflow: hidden; }
.toc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 20px; border-bottom: 1px solid var(--line); }
.toc-sheet-head p { display: grid; }
.toc-sheet-head strong { font-size: var(--fs-card); }
.toc-sheet-head small { color: var(--muted); font-size: var(--fs-small); font-weight: 700; }
.toc-sheet-list { flex: 1; overflow: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px)); }
.toc-sheet-list a { display: grid; gap: 2px; padding: 12px; border-radius: 12px; color: var(--ink); font-size: var(--fs-body); font-weight: 700; line-height: 1.35; text-decoration: none; }
.toc-sheet-list a small, .toc-sheet-list a em { font-size: var(--fs-small); }
.toc-sheet-list a[aria-current] { background: var(--tc-soft); }
.toc-sheet-list a[aria-current] small { color: var(--tc); }
@media (min-width: 640px) {
  .toc-sheet { inset: auto 0 0; height: min(86dvh, 760px); max-width: 640px; margin-inline: auto; border-radius: 24px 24px 0 0; }
  .toc-sheet-head { padding-top: 14px; }
}

@media (max-width: 900px) {
  .norm-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 12px; }
  .norm-toc { display: none; }
  .norm-toc-btn { display: inline-flex; }
  .reader-toc { display: grid; }
}
@media (max-width: 640px) {
  .norm-head { gap: 10px; padding-bottom: 22px; }
  /* Datos en un bloque ordenado: estado y artículos arriba; las tres fechas en columnas, etiqueta sobre valor */
  .norm-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px; margin-top: 4px; }
  .norm-facts li { grid-column: span 2; order: 2; align-items: flex-start; }
  .norm-facts li:first-child { grid-column: span 3; order: 0; }
  .norm-facts li:last-child { grid-column: span 3; order: 1; }
  .norm-facts .fact { display: grid; gap: 2px; }
  .norm-facts .fact-l { color: var(--muted); }
  .norm-facts .lg { display: none; }
  .norm-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .norm-actions .btn { padding-inline: 8px; }
  .norm-actions .lg { display: none; }
  .norm-text { font-size: 1rem; }
  .norm-part { margin-top: 44px; }
  .norm-why { font-size: var(--fs-small); }
  .reader-where small { font-size: var(--fs-small); }
  .reader-progress { left: 24px; right: 24px; }
}

/* ---------- «Documentos» en la cabecera: la misma píldora se expande con las guías y su explicación (documentos.js) ----------
   La barra es siempre una sola fila de 56 px; el panel es una segunda fila que parte en 0 y crece por encima del contenido. */
.site-header.has-docs { height: 66px; }  /* 10 px de margen + 56 px de píldora (el borde seguro va en «top») */
/* Una fila flexible sin separación vertical: la marca fija la fila en 56 px y el panel (100 % de ancho) va debajo.
   (Con grilla, Safari dejaba en 0 px la fila del panel y no se abría.) */
.site-header.has-docs .container { flex-wrap: wrap; row-gap: 0; align-content: flex-start; border-radius: 28px; }
.site-header.has-docs .brand { height: 56px; min-width: 0; white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1100px) {
  .site-header.has-docs .nav a:not(.btn) { padding-inline: 9px; }
  .site-header.has-docs .nav .btn { margin-left: 4px; }
}
/* Marca (logotipo del 09-10-2026): el camión con el nombre dentro, hecho con las piezas de assets/transporte/logo
   (tools/logo.py). Son dos capas recortadas con máscara, la forma y el texto, pintadas con dos variables: así el logo
   puede tomar otro par de la paleta de la marca cada vez que el puntero pasa por él (site.js). No se reemplaza por
   texto ni por otro ícono. Si la máscara no está disponible, se muestra el logotipo como imagen. */
.logo-ta { position: relative; display: block; flex: none; height: 44px; aspect-ratio: 3421 / 1318; background: url("../transporte/logo/logotipo.svg") center / contain no-repeat; }
.logo-ta.is-grande { height: 68px; }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .logo-ta, .logo-ta::after { -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: background-color .4s var(--ease); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .logo-ta { background: var(--logo-a, #6708C7); -webkit-mask-image: url("../transporte/logo/forma.svg"); mask-image: url("../transporte/logo/forma.svg"); }
  .logo-ta::after { content: ""; position: absolute; inset: 0; background: var(--logo-b, #EBA9FC); -webkit-mask-image: url("../transporte/logo/texto.svg"); mask-image: url("../transporte/logo/texto.svg"); }
}
.nav-docs { display: inline-flex; align-items: center; gap: 4px; }
.nav-docs-chev { display: grid; place-items: center; transition: rotate .35s var(--ease); }
.nav-docs-chev svg { width: 16px; height: 16px; }
.docs-open .nav-docs-chev { rotate: 180deg; }
.docs-open .nav .nav-docs { color: var(--ink); background: rgb(21 26 45 / .07); }
/* Abierto, el panel es una superficie de lectura: casi opaco (un 6 % de vidrio), también con la página desplazada; la barra
   sola es más translúcida. Con menos de .9 el fondo se cuela detrás del texto. */
.site-header.docs-open .container::before { background: rgb(255 255 255 / .94); box-shadow: 0 30px 60px -30px rgb(21 26 45 / .4), 0 0 0 1px rgb(21 26 45 / .07); }
.docs-panel { flex: 0 0 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.32, .72, 0, 1); }
.docs-open .docs-panel { grid-template-rows: 1fr; }
.docs-inner { min-height: 0; overflow: hidden; }
.docs-scroll { max-height: calc(100dvh - 120px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.docs-grid { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: repeat(var(--n, 7), auto) 1fr; column-gap: 44px; align-items: start; margin-right: 10px; padding: 16px 0 20px; border-top: 1px solid var(--line-strong); }
/* Lista de temas con una línea vertical fina; la línea de tinta se desliza hasta el tema elegido */
.docs-grid::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 20px; width: 1px; background: var(--line-strong); }
.docs-item { display: contents; }
/* Rótulo de cada grupo de la lista: «Guías rápidas» y «Documentos» */
.docs-group { grid-column: 1; margin: 0; padding: 4px 8px 6px 18px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 800; }
.docs-item + .docs-group { padding-top: 16px; }
.docs-tab {
  grid-column: 1; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 14px; width: 100%; padding: 12px 8px 12px 18px;
  border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.docs-tab .doc-icon { width: 22px; height: 22px; }
.docs-tab-text strong { display: block; color: var(--ink); font-size: var(--fs-body-sm); font-weight: 800; line-height: 1.3; }
.docs-tab-text small { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; line-height: 1.35; transition: color .25s var(--ease); }
.docs-chev { display: grid; place-items: center; color: var(--ink); opacity: .55; transition: opacity .3s var(--ease), rotate .35s var(--ease); }
.docs-item.is-on .docs-chev, .docs-tab:hover .docs-chev { opacity: 1; }
.docs-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
.docs-glide { position: absolute; left: 0; top: 0; z-index: 1; width: 2px; border-radius: 2px; background: var(--ink); opacity: 0; pointer-events: none; transition: transform .4s var(--ease), height .4s var(--ease), opacity .25s var(--ease); }
.docs-glide.is-on { opacity: 1; }
.docs-glide.is-instant { transition: opacity .25s var(--ease); }
/* Explicación: todas ocupan el mismo lugar y se cruzan con un fundido (sin saltos) */
.docs-detail { grid-column: 2; grid-row: 1 / -1; align-self: start; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .25s; }
.docs-item.is-on .docs-detail { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease) .06s, transform .45s var(--ease) .06s, visibility 0s; }
.docs-detail-in { padding: 6px 4px 2px 0; }
.docs-kicker { color: var(--tc); font-size: var(--fs-small); font-weight: 800; }
.docs-detail h3 { margin-top: 2px; color: var(--ink); font-size: var(--fs-subtitle); line-height: 1.25; letter-spacing: -.012em; }
.docs-lead { max-width: 62ch; margin-top: 8px; color: var(--ink-2); font-size: var(--fs-body-sm); line-height: 1.55; }
.docs-points { list-style: none; display: grid; gap: 9px; max-width: 64ch; margin-top: 14px; }
.docs-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--ink); font-size: var(--fs-body-sm); line-height: 1.5; }
.docs-points svg { margin-top: 2px; color: var(--tc); }
.docs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.docs-actions .btn { max-width: 100%; white-space: normal; text-align: left; }
.docs-actions .btn svg { width: 18px; height: 18px; flex: none; }
/* Botones secundarios del panel: contorno oscuro y definido sobre el blanco */
.docs-actions .btn-quiet { border-color: var(--ink); color: var(--ink); background: transparent; }
.docs-actions .btn-quiet:hover { background: var(--ink); color: #fff; }
/* Qué trae el checklist: sus nueve bloques, numerados */
.docs-blocks { list-style: none; counter-reset: bloque; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; max-width: 760px; margin-top: 14px; border-top: 1px solid var(--line-strong); }
.docs-blocks li { counter-increment: bloque; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-small); font-weight: 700; line-height: 1.35; }
.docs-blocks li::before { content: counter(bloque); color: var(--ink-2); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Normativa dentro del panel: buscador, temas y la lista en dos columnas */
.docs-detail .lib { margin-top: 14px; gap: 12px; }
.docs-detail .lib-search { min-height: 48px; padding: 0 8px 0 14px; border-radius: 12px; }
.docs-detail .lib-search input { height: 46px; font-size: 1rem; }
.docs-detail .lib-topic { height: 40px; font-size: var(--fs-small); }
.docs-panel .doc-org { display: none; }
@media (min-width: 861px) {
  /* Alto estable: el panel no cambia de tamaño al pasar de un tema a otro ni al buscar; la lista de normas se desplaza dentro */
  .docs-grid { min-height: min(600px, calc(100dvh - 150px)); }
  .docs-item.is-fill .docs-detail { align-self: stretch; position: relative; }
  .docs-item.is-fill .docs-detail-in { position: absolute; inset: 0; display: flex; flex-direction: column; }
  .docs-detail .lib { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .docs-detail .lib > * { flex: none; }
  .docs-detail .lib-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
  .docs-detail .lib-list { padding-bottom: 26px; }
}
/* Vista de opciones (así abre el panel, pedido del cliente del 02-10-2026): primero se ve qué hay —guías rápidas a la
   izquierda, documentos a la derecha—, sin ninguna explicación abierta y con el panel compacto. Al elegir una opción pasa
   a la lista con su detalle (ayuda.js anima el alto). Aquí pasar el puntero solo acompaña con un fondo suave. */
@media (min-width: 861px) {
  .docs-grid.is-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row dense; min-height: 0; padding-bottom: 14px; }
  .docs-grid.is-menu::before { left: calc(50% - .5px); }  /* la línea fina separa las dos columnas */
  .docs-grid.is-menu .docs-detail { display: none; }
  .docs-grid.is-menu .docs-group { padding-left: 14px; }
  .docs-grid.is-menu .docs-group ~ .docs-group { grid-column: 2; grid-row: 1; padding-top: 4px; }
  .docs-grid.is-menu .docs-group ~ .docs-group ~ .docs-item .docs-tab { grid-column: 2; }
  .docs-grid.is-menu .docs-tab { padding: 12px 12px 12px 14px; border-radius: 12px; }
  .docs-grid.is-menu .docs-glide { z-index: 0; border-radius: 12px; background: rgb(21 26 45 / .055); }
  .docs-grid.is-menu .docs-glide.is-instant { transition: opacity .2s var(--ease); }
  .docs-grid.is-menu .docs-tab:hover .docs-chev { opacity: 1; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  @keyframes docs-in { from { opacity: 0; } }
  .docs-grid.is-entering .docs-group, .docs-grid.is-entering .docs-tab { animation: docs-in .4s var(--ease) both; }
  .docs-grid.is-entering .docs-item.is-on .docs-detail { animation: docs-in .45s var(--ease) .1s both; }
}
/* La barra de lectura de las normas ocupa solo la fila de la píldora */
.norm-bar .reader, .norm-bar .textfind { bottom: auto; height: 56px; }
@media (max-width: 860px) {
  .docs-scroll { max-height: calc(100dvh - 96px); }
  .docs-grid { display: block; margin-right: 10px; padding: 2px 0 8px; }
  .docs-group { padding: 14px 2px 4px; }
  .docs-item + .docs-group { padding-top: 18px; border-top: 1px solid var(--line-strong); }
  .docs-grid::before, .docs-glide { display: none; }
  .docs-item { display: block; }
  .docs-item + .docs-item { border-top: 1px solid var(--line-strong); }
  .docs-tab { padding: 14px 2px; }
  .docs-item.is-on .docs-chev { rotate: 90deg; }
  /* Acordeón con alto animado: el tema se abre y se cierra suave, sin saltos */
  .docs-detail { display: grid; grid-template-rows: 0fr; visibility: visible; transform: none; opacity: 0; transition: grid-template-rows .42s var(--ease), opacity .3s var(--ease); }
  .docs-item.is-on .docs-detail { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease) .05s; }
  .docs-detail-in { min-height: 0; overflow: hidden; padding: 0 2px 0 36px; }
  .docs-item.is-on .docs-detail-in { padding-bottom: 18px; }
  /* El título del tema ya está en la fila que se despliega: no se repite */
  .docs-kicker, .docs-detail h3 { display: none; }
  .docs-lead { margin-top: 0; }
  .docs-blocks { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* El botón del menú cierra los documentos mientras están abiertos */
  .docs-open .menu-toggle .icon-open { display: none; }
  .docs-open .menu-toggle .icon-close { display: block; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) { .docs-detail-in { transition: padding-bottom .42s var(--ease); } }

/* ---------- Descarga del checklist (páginas de guía): una fila con línea fina ---------- */
.download-strip { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 32px; padding: 16px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.download-icon { display: grid; place-items: center; color: #2f7a4f; }
.download-icon svg { width: 22px; height: 22px; }
.download-strip strong { display: block; color: var(--ink); font-size: var(--fs-body-sm); }
.download-strip small { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.download-strip .btn svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .download-strip { grid-template-columns: 22px minmax(0, 1fr); }
  .download-strip .btn { grid-column: 2; justify-self: start; }
}

/* ---------- Página de cada guía (documentos/*.html) ---------- */
.guia { max-width: 820px; padding-block: 14px 72px; }
.guia-head { display: grid; gap: 12px; }
.guia-head .norm-lead { max-width: 68ch; }
.guia-sec { margin-top: 44px; }
.guia-sec h2 { margin-bottom: 14px; font-size: var(--fs-subtitle); letter-spacing: -.012em; scroll-margin-top: 96px; }
.guia-sub { margin: -6px 0 14px; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.guia-points { list-style: none; display: grid; gap: 16px; }
.guia-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink); font-size: 1.0625rem; line-height: 1.65; }
.guia-points li > svg { width: 20px; height: 20px; margin-top: 4px; color: var(--tc); }
.law-refs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.law-ref { color: var(--ink-2); font-size: var(--fs-small); font-weight: 800; line-height: 1.6; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.law-ref:hover { color: var(--tc); text-decoration-color: currentColor; }
.guia-steps { list-style: none; counter-reset: paso; display: grid; gap: 14px; }
.guia-steps li { counter-increment: paso; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
.guia-steps li::before { content: counter(paso); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; background: var(--tc-soft); color: var(--tc); font-size: var(--fs-small); font-weight: 800; }
.guia-errors { list-style: none; display: grid; gap: 12px; padding: 4px 0 4px 20px; border-left: 2px solid #e6c3b8; }
.guia-errors li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.guia-errors svg { width: 18px; height: 18px; margin-top: 3px; color: var(--hazard); }
.guia-matrix { overflow: hidden; border-top: 1px solid var(--ink); }
.guia-matrix table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.guia-matrix th, .guia-matrix td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.guia-matrix thead th { border-top: 0; color: var(--ink-2); font-size: var(--fs-small); font-weight: 800; }
.guia-matrix tbody th { width: 22%; color: var(--ink); font-weight: 800; }
.guia-matrix td .law-refs { margin-top: 0; }
.gm-ans { display: inline-flex; align-items: baseline; gap: 7px; font-size: var(--fs-small); font-weight: 800; line-height: 1.4; }
.gm-ans::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 99px; background: currentColor; transform: translateY(-1px); }
.gm-ans.is-si { color: #b4432a; }
.gm-ans.is-no { color: #2f7a4f; }
.gm-ans.is-quizas { color: #93620f; }
.gm-ans.is-revisar { color: #4b5563; }
.guia-links { list-style: none; display: grid; border-top: 1px solid var(--line); }
.guia-links a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color .2s; }
.guia-links a:hover strong { color: var(--tc); }
.guia-links strong { transition: color .2s; }
.guia-links strong { display: block; font-size: var(--fs-body-sm); line-height: 1.35; }
.guia-links small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; line-height: 1.45; }
.guia-links a > svg:last-child { color: var(--ink); opacity: .4; transition: opacity .2s, transform .3s var(--ease); }
.guia-links a:hover > svg:last-child { opacity: 1; transform: translateX(2px); }
@media (max-width: 720px) {
  .guia-matrix { overflow: visible; border: 0; background: none; }
  .guia-matrix thead { display: none; }
  .guia-matrix table, .guia-matrix tbody, .guia-matrix tr, .guia-matrix th, .guia-matrix td { display: block; width: auto; }
  .guia-matrix tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .guia-matrix th, .guia-matrix td { padding: 0; border: 0; }
  .guia-matrix tbody th { width: auto; margin-bottom: 4px; font-size: var(--fs-body-sm); }
  .guia-matrix td { margin-top: 10px; }
  .guia-matrix td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-small); font-weight: 700; }
}
@media (max-width: 640px) {
  .guia-points li, .guia-steps li { font-size: 1rem; }
  .guia-actions { display: flex; flex-wrap: wrap; }
}

/* PDF: la misma página, limpia (se imprime con tools/normativa-pdf.mjs, que abre los bloques plegados) */
@media print {
  @page { size: A4; margin: 18mm 16mm 20mm; }
  .site-header, .skip, .norm-crumbs, .norm-actions, .norm-toc, .norm-source .btn, .dock, .art-link, .toc-sheet, .docs-panel { display: none !important; }
  [data-tip]::after { display: none; }
  body { background: #fff; }
  .norm { max-width: none; padding: 0; }
  .norm-head { max-width: none; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
  .norm-layout { display: block; border: 0; }
  .norm-text { max-width: none; font-size: 10.5pt; }
  .norm-text p { line-height: 1.5; }
  .norm-fold { border: 0; background: none; }
  .norm-fold summary { padding: 0 0 6px; }
  .norm-fold summary::before { display: none; }
  .norm-fold > :not(summary) { margin-inline: 0; }
  .norm-part { break-after: avoid; margin-top: 24px; }
  .norm-art { margin-top: 14px; }
  .norm-art-h { break-after: avoid; }
  .norm-text p { orphans: 2; widows: 2; }
  a { color: inherit; text-decoration: none; }
}

/* =====================================================================================
   Cambios del 08-10-2026 (pedido del cliente)
   ===================================================================================== */
/* Servicios: tres tarjetas, cada una con su color: verde (no peligrosos), rojo (peligrosos) y el lila de la marca
   (arriendo de contenedores). El color va en una línea bajo la foto y en el botón. */
.services.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service.is-safe { --accent: var(--safe); --accent-strong: #03662A; --accent-soft: var(--safe-soft); --linea: var(--verde); }
.service.is-hazard { --accent: var(--hazard); --accent-strong: #C00A25; --accent-soft: var(--hazard-soft); --linea: var(--rojo); }
.service-media { border-bottom: 3px solid var(--linea, var(--accent)); }
@media (max-width: 1000px) { .services.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .services.is-3 { grid-template-columns: minmax(0, 1fr); } }

/* Tipo de retiro: cada plan con su color (naranjo, lila y azul, los mismos de «Planes») */
.seg [data-modalidad] { --tone: var(--accent); color: var(--tone); }
.seg [data-modalidad="express"] { --tone: var(--tone-amber); }
.seg [data-modalidad="flexible"] { --tone: var(--tone-teal); }
.seg [data-modalidad][aria-checked="true"] { background: var(--tone); color: #fff; box-shadow: none; }
.seg [data-modalidad]:focus-visible { outline-color: var(--tone); }

/* Filas que solo existen para un servicio (retiro o arriendo): el grupo no dibuja nada propio */
.picks-group { display: contents; }
[data-sin-datos] { display: none !important; }
.pick-flag.is-note { color: var(--muted); font-weight: 700; }

/* Opción que no está disponible (p. ej., un vehículo para otro tipo de residuo) */
.opt:disabled { cursor: not-allowed; background: var(--bg-alt); border-color: var(--line); }
.opt:disabled > * { opacity: .5; }
.opt:disabled .opt-text small { opacity: 1; color: var(--ink-2); }
/* «Otro»: campo para escribir cuál, bajo sus opciones */
.opt-other { display: block; margin-top: 8px; }
.opt-other input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 600 1rem/1.4 var(--font); }
.opt-other input::placeholder { color: var(--muted); }
.opt-other input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .opt-other:not([hidden]) { animation: hero-fade-in .25s ease both; } }
/* Asistente: «Continuar» aparece solo al elegir «Otro» */
.guide-next[hidden] { display: none; }
/* Asistente: el primer paso ofrece solo los dos tipos de residuo; cada uno abre la ventana con todas sus categorías */
.guide-tipos .opt-icon { color: var(--verde); }
.guide-tipos [data-tipo="peligroso"] .opt-icon { color: var(--rojo); }
/* Horario: con cinco opciones, la última ocupa la fila completa */
.time .opts.is-cards .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Envío del resumen. Con una sola vía, el botón dice «Enviar por WhatsApp». Con las dos (el formulario declara su correo
   de destino en data-mail y site.js marca el pie con .has-mail), el pie dice «Enviar por» una sola vez y los botones
   quedan en «WhatsApp» y «Correo»; copiar y editar van juntos: si no caben en la fila, bajan los dos. */
.foot-more { display: contents; }
.has-mail > .foot-label { flex: none; color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; }
.has-mail .btn-pre, .has-envio .btn-pre { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.has-mail .btn-cap { display: inline-block; text-transform: capitalize; }
.has-mail > a.btn, .has-envio > a.btn, .has-envio > [data-enviar] { flex: 1 1 auto; }
.has-mail > .foot-more, .has-envio > .foot-more { display: flex; gap: 8px; }
/* Sobre WordPress el resumen se envía al servidor («Enviar solicitud») y WhatsApp queda al lado, como alternativa */
[data-enviar]:disabled { opacity: .6; cursor: progress; }

/* Fotografías adjuntas (solo sobre WordPress; site.js: window.SITE.fotos). Franja fija sobre los botones, siempre a la
   vista: un botón para adjuntar y las miniaturas al lado; tocar una miniatura la quita. */
.fotos { flex: none; padding: 12px 20px; border-top: 1px solid var(--line); background: #fff; }
.fotos[hidden] { display: none; }
.fotos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fotos-add { flex: none; }
.fotos-add[hidden] { display: none; }
.fotos-add:disabled { opacity: .6; }
.fotos.is-busy .fotos-add { cursor: progress; }
.fotos-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fotos-item { position: relative; display: block; width: 48px; height: 48px; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-sunk); cursor: pointer; transition: border-color .2s; }
.fotos-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fotos-item i { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; background: rgb(21 26 45 / .72); color: #fff; }
.fotos-item:hover { border-color: var(--ink-2); }
.fotos-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fotos.is-locked .fotos-item { cursor: default; }
.fotos.is-locked .fotos-item i { display: none; }
.fotos-hint { margin-top: 8px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
@media (max-width: 560px) { .fotos { padding-inline: 14px; } }

/* Capa «Enviando…» (site.js: window.SITE.enviando): cubre el resumen o el asistente, bajo su encabezado, mientras la
   solicitud sube. El anillo gira; con fotografías muestra cuánto se ha subido. Termina con el visto y el número. */
.hcard .summary, .hcard-panel.guide { position: relative; }
.enviando { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: #fff; text-align: center; }
.enviando-anillo { position: relative; display: grid; place-items: center; width: 72px; height: 72px; color: var(--accent); }
.enviando-anillo > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.enviando-anillo circle { fill: none; stroke-width: 4; }
.enviando-anillo .pista { stroke: var(--bg-sunk); }
.enviando-anillo .avance { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 26 74; }
.enviando.con-avance .avance { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset .3s linear; }
.enviando-anillo i { display: grid; }
.enviando .summary-check { width: 56px; height: 56px; }
.enviando-texto { color: var(--ink); font-size: var(--fs-body-sm); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes enviando-in { from { opacity: 0; } }
  @keyframes enviando-giro { to { transform: rotate(270deg); } }
  @keyframes enviando-vuelo { 0%, 100% { transform: translate(-1.5px, 1.5px); } 50% { transform: translate(1.5px, -1.5px); } }
  .enviando { animation: enviando-in .25s ease both; transition: opacity .2s ease; }
  .enviando:not(.con-avance) .enviando-anillo > svg { animation: enviando-giro 1.1s linear infinite; }
  .enviando-anillo i { animation: enviando-vuelo 1.8s ease-in-out infinite; }
  .enviando .summary-check path { animation: check-draw .5s .1s var(--ease) both; }
  .enviando.is-saliendo { opacity: 0; }
}

/* Hero: cuarta opción (enlace a recicladordebase.cl) y foto por opción */
.routes-tabs { display: contents; }
a.route { text-decoration: none; }
.route-link .route-icon, .route-link:first-of-type .route-icon { background: rgb(255 255 255 / .14); }
.route-link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11l6-6M6 5h5v5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11l6-6M6 5h5v5'/%3E%3C/svg%3E");
}
.route-link:active { background: rgb(255 255 255 / .12); }
@media (hover: hover) {
  .route-link:hover { background: rgb(255 255 255 / .08); }
  .route-link:hover::after { opacity: .9; }
}
.stage-fotos { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.stage-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; opacity: 0; transition: opacity .7s var(--ease); }
.stage-fotos img.is-on { opacity: 1; }
@media (max-width: 860px) { .stage-fotos { display: none; } }
@media (prefers-reduced-motion: reduce) { .stage-fotos img { transition: none; } }
/* Teléfono: con cuatro opciones, la foto cede alto para que el hero siga cabiendo en la primera pantalla */
@media (max-width: 599px) {
  body[data-site="transporte"] .stage-media img { height: clamp(96px, calc(100vh - 556px), 210px); height: clamp(96px, calc(100svh - 556px), 210px); }
}
/* Teléfonos muy bajos (iPhone SE o Android de 360 px con las barras abiertas, ~550 px de alto): las cuatro opciones
   caben si la foto y el relleno de cada opción ceden un poco; textos y áreas táctiles (más de 50 px) no cambian */
@media (max-width: 599px) and (max-height: 640px) {
  body[data-site="transporte"] .route { padding-block: 6px; }
}
@media (max-width: 599px) and (max-height: 600px) {
  body[data-site="transporte"] .stage-media img { height: 84px; }
}

/* =====================================================================================
   HDS y Campañas (02-10-2026): el mismo hero, la misma tarjeta y las mismas ventanas de Transporte.
   Cada sitio conserva su foto, su acento (site.css) y un tono oscuro propio para el hero y la franja de cierre.
   Sus filas se declaran en el HTML (assets/site/filas.js).
   ===================================================================================== */
body[data-site="hds"] { --navy: #0a2733; --stage: 10 39 51; }
body[data-site="campanas"] { --navy: #0e2b1d; --stage: 14 43 29; }
body:is([data-site="hds"], [data-site="campanas"]) .stage::before {
  background:
    linear-gradient(90deg, rgb(var(--stage) / .94) 0%, rgb(var(--stage) / .8) 32%, rgb(var(--stage) / .12) 66%),
    linear-gradient(0deg, rgb(var(--stage) / .5), transparent 42%);
}
/* Encuadre de cada foto cuando se recorta (teléfono y tablet) */
body[data-site="hds"] .stage-media img { object-position: 62% 58%; }
body[data-site="campanas"] .stage-media img { object-position: 30% 62%; }
/* Escritorio: la foto (3:2) va entera a la derecha, a todo el alto del hero; su borde izquierdo se funde con el tono */
@media (min-width: 861px) {
  body:is([data-site="hds"], [data-site="campanas"]) .stage-media { background: var(--navy); }
  body:is([data-site="hds"], [data-site="campanas"]) .stage-media img {
    top: 0; right: 0; bottom: auto; width: auto; height: 100%; aspect-ratio: 3 / 2;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 160px); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to right, transparent, #000 160px); mask-composite: add;
  }
}
/* Teléfono: sin el campo de conversación queda más alto para la foto */
@media (max-width: 599px) {
  body:is([data-site="hds"], [data-site="campanas"]) .stage-media img { height: clamp(130px, calc(100vh - 470px), 230px); height: clamp(130px, calc(100svh - 470px), 230px); }
}

/* Proceso de cuatro pasos */
.timeline.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .timeline.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline.is-4 li, .timeline.is-4 li:nth-child(n + 4) { grid-column: auto; }
}
@media (max-width: 700px) { .timeline.is-4 { grid-template-columns: minmax(0, 1fr); } }

/* Tarjeta «¿Qué documento necesito?» y «Materiales»: la explicación del caso elegido, bajo sus filas */
.doc-case { margin-top: 18px; }
.doc-case > p { margin-top: 6px; color: var(--ink-2); font-size: .9375rem; }
.doc-case .list-title { margin-top: 16px; }
.hcard .cross-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hcard-note { margin-top: 14px; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
/* Materiales a la vista para elegir con un toque (Campañas) */
.mat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mat-grid .opt { min-height: 56px; }
@media (max-width: 380px) { .mat-grid { grid-template-columns: minmax(0, 1fr); } }

/* Tarjetas de servicio: «Consultar» y «Qué incluye» en el pie; el detalle se lee en una ventana */
.card .card-foot.is-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.picker-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ventana-texto { display: grid; gap: 12px; padding-top: 6px; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
.ventana-texto strong { color: var(--ink); }
/* Teléfono: las tarjetas de servicio pasan a filas compactas (miniatura a la izquierda) */
@media (max-width: 640px) {
  .cards-compact .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px; }
  .cards-compact .card-media { grid-row: 1 / span 3; margin: 0; border-radius: 12px; }
  .cards-compact .card-media img { aspect-ratio: 4 / 3; }
  .cards-compact .card > :not(.card-media) { grid-column: 2; }
  .cards-compact .card .card-foot { padding-top: 8px; }
}