/* Bahía Clara · Tu distrito (demo de web municipal con un distrito ficticio).
   Blanco cálido, verde cívico y amarillo sol; cada servicio tiene su color. Todo en rem para que el botón
   "A / A+ / A++" agrande la página entera, y un modo de alto contraste que cambia los tokens.
   Tipografía: Bricolage Grotesque (titulares) y Atkinson Hyperlegible Next (texto, hecha para leerse fácil). */

:root {
  --fondo: #f6f7f3;
  --fondo-2: #ebeee6;
  --fondo-3: #dfe4d9;
  --blanco: #ffffff;
  --tinta: #13261f;
  --tinta-2: #3f5249;
  --gris: #5b6b63;
  --linea: rgb(19 38 31 / .14);
  --linea-fuerte: rgb(19 38 31 / .32);
  --verde: #0b6e4f;
  --verde-2: #08553d;
  --verde-claro: #e3f1e8;
  --en-verde: #ffffff;
  --sol: #ffc83d;
  --sol-2: #f2b100;
  --sol-claro: #fff4cf;
  --en-sol: #13261f;
  --coral: #c2412d;
  --oscuro: #0c3a2c;
  --en-oscuro: #f3f6ef;
  --en-oscuro-2: #b9cfc3;
  --s-cultura: #d24a33;
  --s-reciclaje: #0e8073;
  --s-seguridad: #1d6fd8;
  --s-parques: #1f8f4e;
  --s-tramites: #ffc83d;
  --sombra: 0 24px 50px -28px rgb(12 58 44 / .45);
  --r: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --aviso-h: 34px;
  --cab-h: 4rem;
}
html[data-texto="2"] { font-size: 115%; }
html[data-texto="3"] { font-size: 130%; }

/* Alto contraste: negro, blanco y amarillo */
html.contraste {
  --fondo: #000; --fondo-2: #000; --fondo-3: #2a2a2a; --blanco: #000; --tinta: #fff; --tinta-2: #fff; --gris: #f2f2f2;
  --linea: #fff; --linea-fuerte: #fff; --verde: #ffe14d; --verde-2: #ffe14d; --verde-claro: #000; --en-verde: #000;
  --sol: #ffe14d; --sol-2: #ffe14d; --sol-claro: #000; --en-sol: #000; --coral: #ff9c8a; --oscuro: #000; --en-oscuro: #fff; --en-oscuro-2: #fff;
  --sombra: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--aviso-h) + var(--cab-h) + 12px); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1.0625rem/1.55 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { width: min(1180px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 10px; }
.contraste :focus-visible { outline-color: #ffe14d; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 120; padding: .7rem 1rem; border-radius: 12px; background: var(--tinta); color: var(--fondo); font-weight: 700; }
.saltar:focus { top: 12px; }

/* ---------- Tipos ---------- */
.antetitulo { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
.titulo-sec, .titulo-fase { font-family: var(--display); font-weight: 750; font-size: clamp(2.15rem, 8.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.titulo-sec em, .titulo-fase em { font-style: normal; color: var(--verde); }
.intro { margin-top: 1rem; max-width: 40rem; color: var(--tinta-2); font-size: 1.125rem; }
.nota { color: var(--gris); font-size: .875rem; }
.etiqueta-ej { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 99px; background: var(--sol-claro); color: #6b4e00; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: none; vertical-align: .1em; white-space: nowrap; }
.contraste .etiqueta-ej { color: #ffe14d; box-shadow: inset 0 0 0 1.5px #ffe14d; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem; padding: .6rem 1.4rem; border-radius: 999px; border: 0; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  transition: transform .35s var(--ease), background-color .25s, box-shadow .25s, color .25s; }
.btn:active { transform: scale(.97); }
.btn-verde { background: var(--verde); color: var(--en-verde); }
.btn-verde:hover { background: var(--verde-2); }
.btn-sol { background: var(--sol); color: var(--en-sol); }
.btn-sol:hover { background: var(--sol-2); }
.btn-borde { box-shadow: inset 0 0 0 2px var(--tinta); background: rgb(255 255 255 / .7); color: var(--tinta); }
.contraste .btn-borde { background: #000; }
.btn-borde:hover { background: var(--tinta); color: var(--fondo); }
.btn-wa { background: #1f7a4d; color: #fff; }
.btn-wa:hover { background: #16613c; }
.contraste .btn-wa { background: #ffe14d; color: #000; }
.btn-sm { min-height: 2.75rem; padding: .4rem 1.05rem; font-size: .9375rem; }
.btn-lg { min-height: 3.5rem; padding: .7rem 1.8rem; font-size: 1.0625rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.enlace { background: none; border: 0; padding: 0; color: var(--verde); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cuenta { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 99px; background: var(--sol); color: var(--en-sol); font-size: .8125rem; font-weight: 800; }

/* ---------- Carga ---------- */
.carga { position: fixed; inset: 0; z-index: 110; display: grid; place-content: center; justify-items: center; gap: 1rem; background: var(--fondo); }
.carga-mapa { width: min(78vw, 420px); height: auto; overflow: visible; }
.carga-mapa .c-mar { fill: #cfe7f1; opacity: 0; }
.carga-mapa .c-contorno { fill: none; stroke: var(--tinta); stroke-width: 3.4; stroke-linejoin: round; }
.carga-mapa .c-calle { fill: none; stroke: var(--verde); stroke-width: 2.4; stroke-linecap: round; opacity: .75; }
.carga-mapa .c-relleno { fill: var(--verde-claro); opacity: 0; }
.carga-mapa .c-pin { opacity: 0; }
.carga-txt { font-family: var(--display); font-size: 1.25rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.carga-txt b { color: var(--tinta); font-weight: 750; margin-right: .3rem; }
html:not(.js) .carga { display: none; }

/* ---------- Aviso de demo (siempre visible) ---------- */
.aviso-demo { position: fixed; inset: 0 0 auto; z-index: 70; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .42rem 12px; background: var(--sol); color: var(--en-sol);
  font-size: .8125rem; font-weight: 700; line-height: 1.25; text-align: center; }
.aviso-demo .ic { width: 1.1em; height: 1.1em; }
.aviso-demo .frase { display: inline-block; }
@media (max-width: 520px) { .aviso-demo { padding: .3rem 12px; line-height: 1.2; } .aviso-demo .ic { display: none; } }
.contraste .aviso-demo { background: #ffe14d; color: #000; }

/* ---------- Cabecera ---------- */
.cab { position: fixed; left: 0; right: 0; top: var(--aviso-h); z-index: 60; height: var(--cab-h); display: flex; align-items: center; gap: .5rem; padding: 0 12px 0 14px; transition: background-color .4s, box-shadow .4s; }
.cab.solida { background: rgb(246 247 243 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); }
.contraste .cab, .contraste .cab.solida { background: #000; box-shadow: 0 2px 0 #fff; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; min-width: 0; }
.marca-logo { width: 2.5rem; height: 2.5rem; flex: none; }
.marca-txt { display: grid; line-height: 1.05; }
.marca-txt b { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
.marca-txt span { font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.cab-nav { display: none; gap: 1.6rem; margin-right: 1rem; }
.cab-nav a { text-decoration: none; font-weight: 700; font-size: .9688rem; color: var(--tinta-2); padding: .4rem 0; border-bottom: 2px solid transparent; }
.cab-nav a:hover { color: var(--tinta); border-color: var(--sol); }
.btn-acceso { display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; min-width: 2.75rem; padding: 0 .7rem; border-radius: 99px; border: 0; background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); font-weight: 700; font-size: .9375rem; }
.btn-acceso .aa { font-family: var(--display); font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; }
.btn-acceso[aria-expanded="true"] { background: var(--tinta); color: var(--fondo); box-shadow: none; }
.btn-acceso-txt { display: none; }
.cab-reportar { display: none; }
.btn-menu { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); }
.btn-menu .ic { width: 1.4rem; height: 1.4rem; }
@media (min-width: 1000px) {
  .cab { padding: 0 32px; gap: .8rem; }
  .cab-nav { display: flex; }
  .btn-acceso-txt { display: inline; }
  .cab-reportar { display: inline-flex; }
  .btn-menu { display: none; }
}

/* ---------- Barra de accesibilidad ---------- */
.acceso, .menu-movil { position: fixed; z-index: 65; top: calc(var(--aviso-h) + var(--cab-h) + 4px); left: 12px; right: 12px; max-width: 34rem; margin-left: auto;
  background: var(--blanco); color: var(--tinta); border-radius: 20px; box-shadow: 0 30px 60px -20px rgb(12 58 44 / .45), inset 0 0 0 1px var(--linea); }
.contraste .acceso, .contraste .menu-movil { box-shadow: inset 0 0 0 2px #fff; }
.acceso[hidden], .menu-movil[hidden] { display: none; }
/* la barra no crece con el texto: así los botones quedan en su sitio mientras eliges */
.acceso { font-size: 15px; }
.acceso-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 54px 12px 14px; position: relative; }
.acceso-grupo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.acceso-lbl { font-weight: 700; font-size: 15px; }
.tamanos { display: flex; gap: 6px; }
.tamanos button { min-width: 48px; height: 48px; padding: 0 9px; border-radius: 14px; border: 0; background: var(--fondo-2); color: var(--tinta); font-family: var(--display); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--linea); }
.tamanos button:nth-child(1) { font-size: 16px; } .tamanos button:nth-child(2) { font-size: 19px; } .tamanos button:nth-child(3) { font-size: 22px; }
.tamanos button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); box-shadow: none; }
.interruptor { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 7px 0 13px; border-radius: 14px; border: 0; background: var(--fondo-2); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.int-pista { width: 42px; height: 24px; border-radius: 99px; background: var(--linea-fuerte); position: relative; transition: background-color .25s; }
.int-pista span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.interruptor[aria-checked="true"] .int-pista { background: var(--verde); }
.interruptor[aria-checked="true"] .int-pista span { transform: translateX(18px); background: #000; }
.acceso-cerrar { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; }
.menu-movil { display: grid; padding: .5rem; max-width: 22rem; }
.menu-movil a { display: flex; align-items: center; gap: .8rem; min-height: 3.25rem; padding: 0 .9rem; border-radius: 14px; text-decoration: none; font-weight: 700; }
.menu-movil a:hover { background: var(--fondo-2); }
.menu-movil .ic { color: var(--verde); }

/* ---------- Inicio: maqueta 3D ---------- */
.inicio { position: relative; height: 520vh; }
.inicio-fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(180deg, #bfe1f2 0%, #dcedf2 38%, #eef3ee 72%, var(--fondo) 100%); }
.contraste .inicio-fijo { background: #000; }
.escena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.respaldo { position: absolute; inset: 0; display: none; }
.respaldo img { width: 100%; height: 100%; object-fit: cover; }
.respaldo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(246 247 243 / .92) 0%, rgb(246 247 243 / .55) 45%, rgb(246 247 243 / 0) 75%); }
.sin-3d .respaldo { display: block; }
.respaldo .foto-ref { z-index: 1; bottom: 96px; }
.sin-3d .pines { display: none; }
.pines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.velo { position: absolute; inset: 0 0 auto; height: 58%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(214 236 245 / .96) 0%, rgb(222 239 244 / .9) 52%, rgb(226 240 242 / 0) 100%); }
.contraste .velo { background: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .92) 55%, rgb(0 0 0 / 0) 100%); }
@media (min-width: 900px) { .velo { inset: 0 auto 0 0; width: 56%; height: auto; background: linear-gradient(90deg, rgb(226 240 242 / .95) 0%, rgb(226 240 242 / .82) 55%, rgb(226 240 242 / 0) 100%); }
  .contraste .velo { background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .9) 55%, rgb(0 0 0 / 0) 100%); } }
.pin-et { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .3rem; border-radius: 99px; background: #fff; color: #13261f; font-weight: 800; font-size: 14px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgb(12 58 44 / .55); opacity: 0; will-change: transform, opacity; }
.pin-et::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0; }
.pin-et i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--t); }
.pin-et .ic { width: 16px; height: 16px; stroke-width: 2.4; }
@media (max-width: 600px) { .pin-et { font-size: 13px; padding: 3px 10px 3px 3px; gap: 5px; } .pin-et i { width: 24px; height: 24px; } .pin-et .ic { width: 14px; height: 14px; } }
.pines.compactos .pin-et { padding: 3px; gap: 0; }
.pines.compactos .pin-et span { display: none; }
.contraste .pin-et { background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.fase { position: absolute; left: 16px; right: 16px; z-index: 2; text-align: center; }
.fase-1, .fase-3 { top: calc(var(--aviso-h) + var(--cab-h) + 2.2vh); }
.fase .bajada { margin: .7rem auto 0; max-width: 24rem; color: var(--tinta-2); font-size: 1.0625rem; }
.fase-1 .titulo-fase { font-size: clamp(2.3rem, 10vw, 4.4rem); }
.deslizar { display: block; width: 1.6rem; height: 2.6rem; margin: 1.1rem auto 0; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--tinta); position: relative; }
.deslizar span { position: absolute; left: 50%; top: .45rem; width: .3rem; height: .6rem; margin-left: -.15rem; border-radius: 99px; background: var(--tinta); animation: deslizar 1.8s var(--ease) infinite; }
@keyframes deslizar { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(.9rem); opacity: 0; } }
.fase-2 { bottom: calc(18px + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; }
.servicio { display: flex; align-items: center; gap: .9rem; max-width: 26rem; margin: 0 auto; padding: .8rem 1rem .8rem .8rem; border-radius: 20px; background: rgb(255 255 255 / .94); text-align: left; box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.contraste .servicio { background: #000; box-shadow: inset 0 0 0 2px #fff; }
.servicio-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: none; border-radius: 16px; background: var(--c, var(--s-cultura)); color: var(--t, #fff); transition: background-color .4s; }
.servicio-ic .ic { width: 1.6rem; height: 1.6rem; }
.servicio-num { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.servicio b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.375rem; line-height: 1.1; }
.servicio p:last-child { color: var(--tinta-2); font-size: .9375rem; line-height: 1.35; margin-top: .15rem; }
.fase-3 { opacity: 0; visibility: hidden; }
@media (max-width: 899px) {
  .fase-3 { bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
  .fase-3 .acciones { margin-top: auto; flex-wrap: nowrap; }
  .fase-3 .acciones .btn { padding-inline: 1.1rem; }
}
.titulo { font-family: var(--display); font-weight: 800; font-size: clamp(2.7rem, 11.5vw, 5.6rem); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.titulo em { font-style: normal; color: var(--verde); background: linear-gradient(transparent 64%, var(--sol) 64% 90%, transparent 90%); padding: 0 .06em; }
.contraste .titulo em { background: none; text-decoration: underline; text-decoration-thickness: .08em; }
.acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
@media (min-width: 900px) {
  .fase-1, .fase-3 { top: auto; bottom: 11vh; left: 6vw; right: auto; max-width: 38rem; text-align: left; }
  .fase-1 { bottom: 14vh; }
  .fase .bajada { margin-left: 0; max-width: 30rem; }
  .deslizar { margin-left: 0; }
  .acciones { justify-content: flex-start; }
  .fase-2 { left: 6vw; right: auto; bottom: 8vh; }
  .servicio { margin: 0; }
}

/* ---------- Trámites ---------- */
.tramites { padding: 5.5rem 0 5rem; }
.buscador { position: relative; margin-top: 1.8rem; max-width: 44rem; }
.buscador > .ic { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; color: var(--gris); pointer-events: none; }
.buscador input { width: 100%; height: 3.6rem; padding: 0 3.4rem 0 3.2rem; border-radius: 18px; border: 2px solid var(--linea-fuerte); background: var(--blanco); font-size: 1.0625rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.buscador input::placeholder { color: var(--gris); }
.buscador input:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgb(11 110 79 / .15); }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador-borrar { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--fondo-2); display: grid; place-items: center; }
.buscador-borrar[hidden] { display: none; }
.chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin: 1rem -16px 0; padding: .2rem 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 99px; border: 0; background: var(--blanco); color: var(--tinta); font-weight: 700; font-size: .9375rem; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); transition: background-color .2s, color .2s; }
.chip .ic { width: 1.15rem; height: 1.15rem; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); box-shadow: none; }
.conteo { margin: 1.1rem 0 .6rem; font-size: .9375rem; color: var(--gris); font-weight: 700; }
.lista-tramites { display: grid; gap: .6rem; }
.tramite { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; width: 100%; padding: .85rem .9rem; border-radius: 18px; border: 0; background: var(--blanco); text-align: left; box-shadow: inset 0 0 0 1px var(--linea);
  transition: box-shadow .25s, transform .3s var(--ease); }
.tramite:hover { box-shadow: inset 0 0 0 2px var(--verde); }
.contraste .tramite { box-shadow: inset 0 0 0 2px #fff; }
.tile { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--tc, var(--verde-claro)); color: var(--ti, var(--verde)); }
.tile .ic { width: 1.45rem; height: 1.45rem; }
.contraste .tile { background: #000 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #fff; }
.tramite h3 { font-family: var(--texto); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.tramite p { font-size: .875rem; color: var(--gris); margin-top: .15rem; display: flex; align-items: center; gap: .3rem; }
.tramite p .ic { width: 1rem; height: 1rem; }
.tramite > .ic { color: var(--gris); }
.tramite mark { background: var(--sol-claro); color: inherit; border-radius: 4px; padding: 0 .1em; }
.contraste .tramite mark { background: #ffe14d; color: #000; }
.vacio { padding: 1.4rem; border-radius: 18px; background: var(--fondo-2); text-align: center; color: var(--tinta-2); }
@media (min-width: 900px) { .chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } .lista-tramites { grid-template-columns: 1fr 1fr; } .tramites { padding: 8rem 0 7rem; } }

/* ---------- Reporta un problema ---------- */
.reporta { padding: 5.5rem 0; background: var(--oscuro); color: var(--en-oscuro); }
.reporta .antetitulo { color: var(--sol); }
.reporta .titulo-sec em { color: var(--sol); }
.reporta .intro { color: var(--en-oscuro-2); }
.reporta-grid { display: grid; gap: 2rem; }
.reporte, .ticket { background: var(--blanco); color: var(--tinta); border-radius: 26px; padding: 1.2rem; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6); }
.contraste .reporte, .contraste .ticket { box-shadow: inset 0 0 0 2px #fff; }
.reporte { display: grid; gap: 1.6rem; }
.paso { display: grid; gap: .8rem; }
.paso legend { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; font-family: var(--display); font-weight: 750; font-size: 1.3rem; }
.paso legend small { font-family: var(--texto); font-weight: 400; font-size: .9375rem; color: var(--gris); }
.paso-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sol); color: var(--en-sol); font-size: 1rem; font-weight: 800; }
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .5rem; }
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo span { display: grid; justify-items: center; align-content: center; gap: .35rem; min-height: 5.2rem; padding: .5rem .3rem; border-radius: 16px; background: var(--fondo-2); font-weight: 700; font-size: .9375rem; line-height: 1.15; text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--linea); transition: background-color .2s, color .2s, transform .3s var(--ease); }
.tipo span .ic { width: 1.7rem; height: 1.7rem; }
.tipo input:checked + span { background: var(--verde); color: var(--en-verde); box-shadow: none; }
.tipo input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 2px; }
.mapa-caja { position: relative; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--linea); background: #cfe7f1; }
.mapa { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.mapa .m-mar { fill: #bfe0ee; }
.mapa .m-ola { fill: none; stroke: #fff; stroke-width: 1.6; opacity: .55; stroke-linecap: round; }
.mapa .m-playa { fill: #f1deb3; }
.mapa .m-acant { fill: #d8b98d; }
.mapa .m-tierra { fill: #eeebe2; }
.mapa .m-pasto { fill: #a9d58a; }
.mapa .m-cicl { fill: #d2694f; }
.mapa .m-via { fill: #fff; stroke: #d2cfc4; stroke-width: 1; }
.mapa .m-costera { fill: #fff; stroke: #d6c79c; stroke-width: 1; }
.mapa .m-manz { fill: #dcd8cc; }
.mapa .m-hito { stroke: #fff; stroke-width: 2; }
.mapa .m-nombre { font: 700 9.5px var(--texto); fill: #5b6b63; letter-spacing: .02em; }
.mapa .m-hito-ic { color: #fff; }
.mapa .m-marca { pointer-events: none; }
.mapa .m-marca ellipse, .carga-mapa .c-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.contraste .mapa-caja { box-shadow: inset 0 0 0 2px #fff; }
.mapa-ayuda { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem .35rem .55rem; border-radius: 99px; background: rgb(19 38 31 / .88); color: #fff; font-size: .875rem; font-weight: 700; pointer-events: none; transition: opacity .3s; }
.mapa-ayuda.oculta { opacity: 0; }
.lugar { display: flex; align-items: flex-start; gap: .4rem; padding: .7rem .9rem; border-radius: 14px; background: var(--fondo-2); font-size: .9375rem; color: var(--tinta-2); min-height: 3rem; }
.lugar.ok { background: var(--verde-claro); color: var(--tinta); }
.lugar b { color: var(--tinta); }
.campo { display: grid; gap: .35rem; font-weight: 700; font-size: .9375rem; }
.campo small { font-weight: 400; color: var(--gris); }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 3.25rem; padding: .7rem .9rem; border-radius: 14px; border: 2px solid var(--linea-fuerte); background: var(--blanco); font-size: 1.0625rem; font-weight: 400; resize: vertical; outline: none; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgb(11 110 79 / .15); }
.campo input[aria-invalid="true"] { border-color: var(--coral); }
.campo-zona span { font-weight: 400; color: var(--tinta-2); }
.campo select { appearance: auto; }
.error { display: flex; gap: .4rem; color: var(--coral); font-weight: 700; font-size: .9375rem; }
.reporte .btn-lg { width: 100%; }
.ticket { display: grid; gap: 1.1rem; outline: none; }
.ticket[hidden] { display: none; }
.ticket-cabeza { display: flex; align-items: center; gap: .9rem; }
.ticket-cabeza .antetitulo { margin: 0; }
.ticket-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 18px; background: var(--sol); color: var(--en-sol); flex: none; }
.ticket-ic .ic { width: 1.8rem; height: 1.8rem; }
.ticket-num { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ticket-res { padding: .8rem .9rem; border-radius: 14px; background: var(--fondo-2); font-size: .9375rem; color: var(--tinta-2); }
.ticket-res b { color: var(--tinta); }
.linea-tiempo { display: grid; gap: 0; }
.linea-tiempo li { position: relative; display: grid; padding: 0 0 1.05rem 2.6rem; color: var(--gris); }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: .95rem; top: 1.75rem; bottom: .1rem; width: 3px; border-radius: 3px; background: var(--fondo-3); }
.linea-tiempo li:last-child::before { display: none; }
.linea-tiempo li::after { content: ""; position: absolute; left: .3rem; top: .1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--fondo-3); background: var(--blanco); }
.linea-tiempo b { color: var(--tinta-2); font-size: 1.0625rem; }
.linea-tiempo span { font-size: .875rem; }
.linea-tiempo li.hecho::after { background: var(--verde) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 12.6 4 4L18 8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% no-repeat; box-shadow: none; }
.linea-tiempo li.hecho::before { background: var(--verde); }
.linea-tiempo li.hecho b, .linea-tiempo li.actual b { color: var(--tinta); }
.linea-tiempo li.actual::after { background: var(--sol); box-shadow: 0 0 0 0 rgb(255 200 61 / .7); animation: latido 1.6s ease-out infinite; }
.contraste .linea-tiempo li.hecho::after { background-color: #ffe14d; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 12.6 4 4L18 8' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgb(255 200 61 / .7); } 100% { box-shadow: 0 0 0 14px rgb(255 200 61 / 0); } }
.ticket-acciones { display: grid; gap: .6rem; }
@media (min-width: 900px) {
  .reporta { padding: 8rem 0; }
  .reporta-grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
  .reporta-cabeza { position: sticky; top: calc(var(--aviso-h) + var(--cab-h) + 2rem); }
  .reporte, .ticket { padding: 2rem; grid-column: 2; }
  .ticket { grid-row: 1; }
  .ticket-acciones { grid-template-columns: auto auto; justify-content: start; }
}

/* ---------- Consulta y paga ---------- */
.pagos { padding: 5.5rem 0; }
.pagos-grid { display: grid; gap: 2rem; }
.pagos-puntos { display: grid; gap: .6rem; margin-top: 1.4rem; }
.pagos-puntos li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 700; }
.pagos-puntos .ic { color: var(--verde); margin-top: .1rem; }
.consulta { padding: 1.2rem; border-radius: 26px; background: var(--blanco); box-shadow: var(--sombra), inset 0 0 0 1px var(--linea); }
.contraste .consulta { box-shadow: inset 0 0 0 2px #fff; }
.consulta-form { display: grid; gap: .8rem; }
.consulta-form input { font-size: 1.4rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; font-weight: 700; }
.consulta-form input::placeholder { letter-spacing: .02em; font-size: 1.0625rem; font-weight: 400; }
.ayuda { font-size: .9375rem; color: var(--tinta-2); }
.deuda { display: grid; gap: .9rem; }
.deuda[hidden] { display: none; }
.deuda-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linea); }
.deuda-cabeza .antetitulo { margin-bottom: .2rem; }
.deuda-cabeza b { font-family: var(--display); font-size: 1.4rem; font-weight: 750; }
.deuda-cabeza .enlace { white-space: nowrap; }
.deuda-lista { display: grid; gap: .5rem; }
.deuda-lista label { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .75rem .85rem; border-radius: 16px; background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--linea); cursor: pointer; }
.contraste .deuda-lista label { box-shadow: inset 0 0 0 2px #fff; }
.deuda-lista input { width: 1.5rem; height: 1.5rem; accent-color: var(--verde); margin: 0; }
.deuda-lista b { display: block; font-size: 1rem; line-height: 1.25; }
.deuda-lista small { font-size: .8438rem; color: var(--gris); }
.deuda-lista .monto { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vence-pronto { color: var(--coral) !important; font-weight: 700; }
.deuda-total { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 0 .2rem; border-top: 2px solid var(--tinta); }
.deuda-total b { font-family: var(--display); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.deuda .btn-lg { width: 100%; }
.sin-pago { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border-radius: 18px; background: var(--sol-claro); box-shadow: inset 0 0 0 2px var(--sol); }
.sin-pago[hidden] { display: none; }
.sin-pago > .ic { width: 1.8rem; height: 1.8rem; color: #8a6500; }
.contraste .sin-pago > .ic { color: #ffe14d; }
.sin-pago b { display: block; font-size: 1.125rem; }
.sin-pago p { font-size: .9375rem; color: var(--tinta-2); margin-top: .2rem; }
@media (min-width: 900px) { .pagos { padding: 8rem 0; } .pagos-grid { grid-template-columns: 1fr 1.05fr; gap: 5rem; align-items: start; } .consulta { padding: 2rem; } }

/* ---------- Agenda ---------- */
.agenda { padding: 5.5rem 0; background: var(--fondo-2); }
.agenda-cabeza { display: grid; gap: 1.2rem; }
.mi-lista-btn { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 .6rem 0 1rem; border-radius: 99px; border: 0; background: var(--blanco); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); }
.mi-lista-btn .ic { color: var(--s-cultura); }
.mi-lista { margin-top: 1rem; padding: 1rem; border-radius: 18px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.mi-lista[hidden] { display: none; }
.mi-lista ul { display: grid; gap: .4rem; }
.mi-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; }
.mi-lista li span { color: var(--gris); white-space: nowrap; }
.mi-lista-vacia { color: var(--gris); font-size: .9375rem; }
.dias { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; margin: 1rem -16px 0; padding: .2rem 16px .4rem; }
.dias::-webkit-scrollbar { display: none; }
.dia { flex: none; display: grid; justify-items: center; align-content: center; gap: .1rem; width: 3.6rem; height: 4.6rem; border-radius: 16px; border: 0; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--linea); position: relative; }
.dia small { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.dia b { font-family: var(--display); font-size: 1.4rem; font-weight: 750; line-height: 1; }
.dia i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--s-cultura); margin-top: .2rem; }
.dia i.no { visibility: hidden; }
.dia[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); box-shadow: none; }
.dia[aria-pressed="true"] small { color: inherit; }
.dia[disabled] { opacity: .45; cursor: default; }
.eventos { display: grid; gap: .9rem; margin-top: 1rem; }
.evento { display: grid; grid-template-columns: 6.5rem 1fr; border-radius: 20px; overflow: hidden; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.contraste .evento { box-shadow: inset 0 0 0 2px #fff; }
.evento-foto { position: relative; }
.evento-foto img { width: 100%; height: 100%; object-fit: cover; }
.evento-fecha { position: absolute; left: .45rem; top: .45rem; display: grid; justify-items: center; min-width: 2.8rem; padding: .25rem .35rem; border-radius: 12px; background: #fff; color: #13261f; line-height: 1.05; }
.evento-fecha small { font-size: .6875rem; font-weight: 700; text-transform: uppercase; }
.evento-fecha b { font-family: var(--display); font-size: 1.25rem; }
.evento-txt { display: grid; gap: .3rem; padding: .85rem .9rem; align-content: start; }
.evento-cat { justify-self: start; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ec, var(--verde)); }
.contraste .evento-cat { color: #ffe14d; }
.evento h3 { font-family: var(--texto); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
.evento-meta { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .875rem; color: var(--gris); }
.evento-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.evento-meta .ic { width: 1rem; height: 1rem; }
.interes { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; margin-top: .2rem; padding: 0 .95rem 0 .75rem; border-radius: 99px; border: 0; background: var(--fondo-2); font-weight: 700; font-size: .9375rem; box-shadow: inset 0 0 0 1.5px var(--linea); }
.interes .ic { color: var(--s-cultura); }
.interes[aria-pressed="true"] { background: #fde6e1; box-shadow: inset 0 0 0 1.5px var(--s-cultura); }
.interes[aria-pressed="true"] .ic { fill: var(--s-cultura); }
.contraste .interes[aria-pressed="true"] { background: #ffe14d; color: #000; }
.contraste .interes[aria-pressed="true"] .ic { fill: #000; color: #000; }
@media (min-width: 900px) {
  .agenda { padding: 8rem 0; }
  .agenda-cabeza { grid-template-columns: 1fr auto; align-items: end; }
  .dias { margin-inline: 0; padding-inline: 0; }
  .eventos { grid-template-columns: 1fr 1fr; }
  .evento { grid-template-columns: 9rem 1fr; }
}

/* ---------- Noticias ---------- */
.noticias { padding: 5.5rem 0; }
.noticias-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.noticia { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.noticia img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.noticia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .8125rem; color: var(--gris); }
.noticia h3 { margin-top: .35rem; font-family: var(--display); font-weight: 750; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.01em; }
.noticia p:last-child { margin-top: .35rem; font-size: .9375rem; color: var(--tinta-2); }
@media (min-width: 900px) {
  .noticias { padding: 8rem 0; }
  .noticias-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .noticia { grid-template-columns: 1fr; border: 0; }
  .noticia img { aspect-ratio: 4 / 3; border-radius: 20px; }
}

/* ---------- Atención al vecino ---------- */
.atencion { padding-bottom: 5.5rem; }
.atencion-foto { position: relative; height: 42vh; min-height: 15rem; overflow: hidden; }
.atencion-foto img { width: 100%; height: 120%; object-fit: cover; }
.foto-ref { position: absolute; right: 12px; bottom: calc(6vh + 12px); padding: .2rem .6rem; border-radius: 99px; background: rgb(0 0 0 / .55); color: #fff; font-size: .75rem; font-weight: 700; }
.atencion-grid { position: relative; display: grid; gap: 2rem; margin-top: -6vh; padding: 1.6rem 1.2rem; border-radius: 26px; background: var(--fondo); }
.contraste .atencion-grid { box-shadow: inset 0 0 0 2px #fff; }
.estado { display: inline-flex; align-items: center; gap: .6rem; margin: 1.2rem 0 1rem; padding: .55rem 1rem; border-radius: 99px; background: var(--verde-claro); color: var(--verde-2); font-size: 1rem; }
.estado.cerrado { background: var(--fondo-2); color: var(--tinta-2); }
.contraste .estado { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
.punto { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.estado:not(.cerrado) .punto { animation: latido-v 1.8s ease-out infinite; }
@keyframes latido-v { 0% { box-shadow: 0 0 0 0 rgb(11 110 79 / .5); } 100% { box-shadow: 0 0 0 9px rgb(11 110 79 / 0); } }
.horario div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--linea); }
.horario dt { color: var(--tinta-2); }
.horario dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.horario + .nota { margin-top: .7rem; }
.canales { display: grid; gap: .7rem; align-content: start; }
.canales li { display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; align-items: center; padding: 1rem; border-radius: 20px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.contraste .canales li { box-shadow: inset 0 0 0 2px #fff; }
.canales li .btn { grid-column: 2; justify-self: start; }
.canal-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--verde-claro); color: var(--verde); }
.canales b { display: block; font-size: 1.0625rem; }
.canales span { font-size: .9375rem; color: var(--gris); }
@media (min-width: 900px) { .atencion-grid { grid-template-columns: 1fr 1fr; padding: 3rem; gap: 4rem; } .atencion-foto { height: 60vh; } .atencion { padding-bottom: 8rem; } }

/* ---------- Pie ---------- */
.pie { padding: 4rem 0 8rem; border-top: 1px solid var(--linea); }
.pie-marca { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 17vw, 11rem); line-height: .9; letter-spacing: -.04em; color: var(--fondo-3); }
.contraste .pie-marca { color: #fff; }
.pie-aviso { margin-top: 1.2rem; color: var(--tinta-2); font-size: .9375rem; max-width: 70ch; }
.pie-aviso b { display: block; color: var(--tinta); margin-bottom: .4rem; }
.pie-firma { margin-top: .9rem; font-size: .9375rem; }
.pie-firma a { color: var(--verde); font-weight: 700; }

/* ---------- Barra fija para reportar (teléfono) ---------- */
.barra-reportar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: .6rem; max-width: 34rem; margin-inline: auto;
  padding: .45rem .45rem .45rem 1.1rem; border-radius: 99px; background: var(--tinta); color: var(--fondo); box-shadow: 0 20px 44px -16px rgb(12 58 44 / .6); transition: transform .45s var(--ease), opacity .3s; }
.contraste .barra-reportar { background: #000; box-shadow: inset 0 0 0 2px #fff; }
.barra-reportar p { font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.barra-reportar[hidden] { display: none; }
.barra-reportar.fuera { transform: translateY(160%); opacity: 0; pointer-events: none; }
@media (min-width: 1000px) { .barra-reportar { display: none !important; } }

/* ---------- Diálogos ---------- */
.panel { width: min(520px, 100% - 24px); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 26px; background: var(--blanco); color: var(--tinta); overflow: auto; }
.contraste .panel { box-shadow: inset 0 0 0 2px #fff; }
.panel::backdrop { background: rgb(12 30 24 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.panel-in { position: relative; padding: 1.5rem 1.3rem 1.4rem; display: grid; gap: .9rem; }
.panel h2 { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.08; letter-spacing: -.02em; padding-right: 2.6rem; }
.cerrar { position: absolute; right: .8rem; top: .8rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--fondo-2); display: grid; place-items: center; }
.hoja { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 26px 26px 0 0; max-height: 90svh; }
.hoja .panel-in { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
.hoja-cat { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.hoja-cat .tile { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
.hoja-cat .tile .ic { width: 1.15rem; height: 1.15rem; }
.hoja .etiqueta-ej { justify-self: start; }
.hoja-cuerpo { display: grid; gap: 1rem; }
.hoja-cuerpo h3 { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin-bottom: .3rem; }
.hoja-cuerpo ul { display: grid; gap: .4rem; }
.hoja-cuerpo li { display: flex; gap: .55rem; align-items: flex-start; }
.hoja-cuerpo li .ic { color: var(--verde); margin-top: .15rem; }
.hoja-tiempo { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 99px; background: var(--sol-claro); font-weight: 700; }
.contraste .hoja-tiempo { box-shadow: inset 0 0 0 2px #ffe14d; }
.hoja-pie { padding-top: .4rem; }
.hoja-pie .btn { width: 100%; }
.pasos-demo { display: grid; gap: .6rem; counter-reset: p; }
.pasos-demo li { counter-increment: p; display: grid; grid-template-columns: 2.2rem 1fr; gap: .7rem; align-items: center; padding: .7rem .8rem; border-radius: 14px; background: var(--fondo-2); }
.pasos-demo li::before { content: counter(p); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--verde); color: var(--en-verde); font-weight: 800; }
.aviso-sin-envio { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 14px; background: var(--sol-claro); box-shadow: inset 0 0 0 2px var(--sol); font-weight: 700; font-size: .9375rem; }
@media (min-width: 700px) { .hoja { width: min(560px, 100% - 24px); margin: auto; border-radius: 26px; } }
.wa-chat { padding: 1rem; border-radius: 18px; background: #0b141a; }
.wa-burbuja { margin-left: auto; max-width: 92%; padding: .7rem .9rem 1.3rem; border-radius: 12px 12px 2px 12px; background: #005c4b; color: #e9edef; font-size: .9375rem; line-height: 1.45; white-space: pre-line; position: relative; }
.wa-burbuja::after { content: "✓✓"; position: absolute; right: 8px; bottom: 4px; font-size: .65rem; color: #53bdeb; }
.demo-cta { padding-top: 1rem; border-top: 1px solid var(--linea); display: grid; gap: .7rem; }
.demo-cta p { font-family: var(--display); font-weight: 750; font-size: 1.35rem; line-height: 1.15; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inicio { height: auto; }
  .inicio-fijo { position: relative; }
  .fase-1, .fase-2 { display: none; }
  .fase-3 { opacity: 1; visibility: visible; }
  .deslizar span, .linea-tiempo li.actual::after, .estado .punto { animation: none !important; }
}
.sin-3d .inicio { height: auto; }
.sin-3d .inicio-fijo { position: relative; }
.sin-3d .fase-1, .sin-3d .fase-2 { display: none; }
.sin-3d .fase-3 { opacity: 1 !important; visibility: visible !important; }