/* SECNOVA — Red SECNOVA v1.8
   Señalética y mapa de red: cada servicio es una línea y todas convergen en el objetivo del cliente. */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  --night: #0B0C0E;
  --night-rgb: 11, 12, 14;
  --on-gold: #0B0C0E;
  --night-2: #131619;
  --night-3: #1C2025;
  --rail: #4A525C;
  --rail-hi: #8A929B;
  --rule-dark: #2A3038;
  --sign: #F2F2EF;
  --rule-light: #D2D2CB;
  --ink: #111316;
  --ink-soft: #4A4E54;
  --muted-dark: #A9AFB6;
  --gold: #D5A950;
  --gold-hi: #E7C47A;
  --gold-deep: #8A6A22;
  --danger: #B3261E;
  --danger-dark: #FF8A80;
  --ok: #1E6B45;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --header-h: 72px;
  --radius: 6px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --step-section: clamp(4.5rem, 3rem + 6vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sign);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--gold-deep);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--rail) var(--night); }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--on-gold); padding: .6rem 1rem; font-weight: 700; border-radius: var(--radius); }
.skip:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.display {
  font-family: var(--display); font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 3vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.h2 {
  font-family: var(--display); font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; max-width: 38em; }
.gold { color: var(--gold); }
.on-light .gold { color: var(--gold-deep); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .75rem 1.4rem;
  border-radius: var(--radius); border: 2px solid transparent;
  font-family: var(--display); font-stretch: 106%; font-weight: 650; font-size: 1.0625rem; letter-spacing: .005em; line-height: 1.15;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn svg, .btn img { width: 20px; height: 20px; flex: none; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hi); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.btn-dark { background: var(--night); color: var(--sign); }
.btn-dark:hover { background: var(--night-3); box-shadow: 0 6px 18px rgba(11, 12, 14, .3); }
.btn-outline { border-color: var(--rail-hi); color: var(--sign); background: transparent; }
.btn-outline:hover { border-color: var(--sign); background: rgba(242, 242, 239, .06); }
.btn-outline-dark { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline-dark:hover { background: var(--ink); color: var(--sign); }
.btn-sm { min-height: 44px; padding: .5rem 1.05rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.text-link { font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; justify-self: start; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.text-link svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Bullets de línea ---------- */
.bullet {
  --size: 32px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--sign); color: var(--night);
  font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: calc(var(--size) * .5); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bullet-lg { --size: 52px; }
.bullet-dark { background: var(--night); color: var(--sign); }
.bullet-gold { background: var(--gold); color: var(--on-gold); }

/* ---------- Encabezado ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--night); color: var(--sign); border-bottom: 1px solid var(--rule-dark); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav .link { text-decoration: none; padding: .55rem .8rem; font-size: 1rem; color: var(--muted-dark); border-radius: var(--radius); transition: color .2s; }
.nav .link:hover { color: var(--sign); }
.nav .link[aria-current="page"] { color: var(--sign); box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; }
.nav .btn { margin-left: .75rem; }
.burger { display: none; width: 48px; height: 48px; border: 1px solid var(--rule-dark); background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--sign); place-items: center; }
.burger svg { width: 24px; height: 24px; }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--night); color: var(--sign);
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s;
}
.mobile-menu.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.mobile-menu .link { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 2rem; text-decoration: none; padding: .55rem 0; border-bottom: 1px solid var(--rule-dark); display: flex; align-items: center; gap: .9rem; }
.mobile-menu .link[aria-current="page"] { color: var(--gold); }
.mobile-menu .btn { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* ---------- Superficies ---------- */
.night { background: var(--night); color: var(--sign); }
.night .lead, .night p { color: var(--muted-dark); }
.night .h2, .night .display, .night h3 { color: var(--sign); }
.on-light { background: var(--sign); color: var(--ink); }
.on-light .lead { color: var(--ink-soft); }
.section { padding-block: var(--step-section); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); max-width: 44rem; }
.section-head p { color: var(--ink-soft); max-width: 36em; }
.night .section-head p { color: var(--muted-dark); }

/* ---------- Hero: mapa de red ---------- */
.net-hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 1rem + 2.5vw, 3rem) clamp(3rem, 2rem + 4vw, 5rem); }
.net-hero .container {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "copy map" "builder map";
  column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); row-gap: 2rem; align-items: center;
}
.net-copy { grid-area: copy; display: grid; gap: 1.25rem; align-content: end; }
.net-map { grid-area: map; }
.builder { grid-area: builder; align-self: start; }
.net-copy .display { color: var(--sign); }
.net-copy .lead { color: var(--muted-dark); }

.builder { display: grid; gap: .9rem; margin-top: .5rem; }
.builder-title { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.25rem; color: var(--sign); }
.builder-title span { display: block; font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--muted-dark); margin-top: .15rem; }
.toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.toggle {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .8rem .55rem .55rem;
  background: var(--night-2); color: var(--sign);
  border: 1px solid var(--rule-dark); border-radius: var(--radius);
  font-size: 1rem; line-height: 1.2; text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.toggle .bullet { --size: 32px; background: var(--rail); color: var(--sign); transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.toggle .tick { margin-left: auto; width: 20px; height: 20px; color: var(--gold); opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); }
.toggle:hover { border-color: var(--rail-hi); }
.toggle[aria-pressed="true"] { border-color: var(--gold); background: #1A1712; }
.toggle[aria-pressed="true"] .bullet { background: var(--gold); color: var(--on-gold); }
.toggle[aria-pressed="true"] .tick { opacity: 1; transform: none; }
.toggle.is-hover { border-color: var(--rail-hi); }

.builder-status { font-size: .975rem; color: var(--muted-dark); min-height: 1.6em; }
.builder-status strong { color: var(--sign); font-weight: 700; }
.net-copy .cta-row { margin-top: .25rem; }
.net-scope { font-size: .95rem; color: var(--muted-dark); }

.net-map { position: relative; }
.net-map svg { width: 100%; height: auto; overflow: visible; }
.map-line { cursor: pointer; }
.map-line .track { fill: none; stroke: var(--rail); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s var(--ease-out); }
.map-line .hit { fill: none; stroke: transparent; stroke-width: 28; stroke-linecap: round; stroke-linejoin: round; }
.map-line .stop { fill: var(--sign); transition: fill .3s var(--ease-out); }
.map-line .stop-num { fill: var(--night); font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 16px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map-line .label { fill: var(--sign); font-family: var(--sans); font-weight: 700; font-size: 18px; pointer-events: none; }
.map-line:hover .track, .map-line.is-hover .track { stroke: var(--rail-hi); }
.map-line.is-on .track { stroke: var(--gold); }
.map-line.is-on .stop { fill: var(--gold); }
.map-trunk { fill: none; stroke: var(--rail); stroke-width: 14; stroke-linecap: round; transition: stroke .35s var(--ease-out); }
.net-map.has-selection .map-trunk { stroke: var(--gold); }
.map-hub { fill: var(--night); stroke: var(--sign); stroke-width: 4; }
.map-hub-dot { fill: var(--sign); }
.map-hub-label { fill: var(--sign); font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 22px; }
.map-trunk-label { fill: var(--muted-dark); font-family: var(--sans); font-size: 17px; }
.net-map.has-selection .map-trunk-label { fill: var(--gold); }

/* ---------- Ciudad 3D (reemplaza al mapa SVG cuando hay WebGL) ---------- */
/* Con JavaScript el lugar de la ciudad se reserva desde el primer pintado (sin saltos): primero se ve
   una foto de la ciudad y el lienzo 3D se funde encima cuando carga. Sin WebGL (.no-3d) vuelve el mapa SVG. */
.js .net-map:not(.no-3d) > svg { display: none; }
.js .net-map:not(.no-3d) { aspect-ratio: 1 / 1; width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); }
@media (min-width: 961px) {
  .js .net-hero:has(.net-map:not(.no-3d)) { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
  .js .net-hero:has(.net-map:not(.no-3d)) .container { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); grid-template-areas: "copy ." "builder ."; }
  .net-copy, .builder { position: relative; z-index: 2; }
  .js .net-map:not(.no-3d) {
    position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; left: 28%;
    width: auto; margin: 0; aspect-ratio: auto;
  }
  /* Fundido del borde izquierdo con un degradado encima (más barato que una máscara sobre el lienzo) */
  .js .net-map:not(.no-3d)::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 36%; pointer-events: none; background: linear-gradient(to right, var(--night) 22%, rgba(var(--night-rgb), 0)); }
}
@media (max-width: 960px) {
  .net-hero .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "map" "builder"; }
}
.city-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.city-label {
  position: absolute; left: 0; top: 0; translate: -50% -150%; pointer-events: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem .35rem .55rem;
  background: rgba(11, 12, 14, .82); border: 1px solid rgba(213, 169, 80, .55); border-radius: 999px;
  font-family: var(--display); font-stretch: 112%; font-weight: 650; font-size: .95rem; color: var(--sign);
}
.city-label-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(213, 169, 80, .25); }
.city-pin {
  position: absolute; left: 0; top: 0; translate: -50% -100%; pointer-events: none; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem; padding: 3px; border-radius: 999px;
  background: rgba(11, 12, 14, .78); border: 1px solid rgba(213, 169, 80, .5);
  transition: padding .25s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.city-pin .bullet { --size: 26px; background: var(--gold); color: var(--on-gold); font-size: 14px; }
.city-pin-name { display: none; font-family: var(--display); font-stretch: 112%; font-weight: 650; font-size: .9rem; color: var(--sign); white-space: nowrap; padding-right: .55rem; }
.city-pin.is-active { border-color: var(--gold); background: rgba(11, 12, 14, .92); }
.city-pin.is-active .city-pin-name { display: inline; }
.city-pin.is-on .bullet { box-shadow: 0 0 0 3px rgba(11, 12, 14, .9), 0 0 0 5px var(--gold); }
.net-map:has(.city-tip.show) .city-pin.is-active { opacity: 0; }
.city-tip {
  position: absolute; left: 0; top: 0; width: min(270px, calc(100% - 16px)); pointer-events: none; z-index: 3;
  padding: .9rem 1rem 1rem; border-radius: 10px;
  background: rgba(17, 19, 22, .97); border: 1px solid var(--rule-dark);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .2s var(--ease-out), border-color .2s var(--ease-out);
}
.city-tip.show { opacity: 1; }
.city-tip.is-on { border-color: var(--gold); }
.city-tip-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.city-tip-head strong { font-family: var(--display); font-stretch: 112%; font-size: 1.125rem; color: var(--sign); }
.city-tip .bullet { --size: 28px; background: var(--gold); color: var(--on-gold); }
.city-tip ul { margin: 0; padding: 0 0 0 1.05rem; color: var(--muted-dark); font-size: .925rem; line-height: 1.45; }
.city-tip li::marker { color: var(--gold); }
.city-tip-hint { margin-top: .6rem !important; font-size: .85rem; color: var(--gold) !important; }


/* Marcadores clicables y panel del servicio enfocado */
.city-pin { pointer-events: auto; cursor: pointer; font: inherit; color: inherit; }
.city-pin:hover, .city-pin:focus-visible { border-color: var(--gold); background: rgba(11, 12, 14, .94); }
.city-pin:hover .city-pin-name, .city-pin:focus-visible .city-pin-name { display: inline; }
.city-pin { transition: opacity .3s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out); }
.net-map.is-focus .city-pin, .net-map.is-focus .city-label { opacity: 0; pointer-events: none; }
.city-label { transition: opacity .3s var(--ease-out); }

.city-panel {
  position: absolute; z-index: 4; right: 24px; top: 24px; width: min(360px, calc(100% - 32px));
  padding: 1rem 1.15rem 1.1rem; border-radius: 12px;
  background: rgba(14, 16, 19, .97); border: 1px solid var(--rule-dark);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s .35s, border-color .25s var(--ease-out);
}
.city-panel.show { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-out) .15s, transform .5s var(--ease-out) .15s, border-color .25s var(--ease-out); }
.city-panel.is-on { border-color: rgba(213, 169, 80, .7); }
.city-panel-back {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; margin: -.25rem 0 .55rem -.35rem; padding: .25rem .5rem .25rem .25rem;
  background: none; border: 0; border-radius: 6px; color: var(--muted-dark); font-size: .925rem; cursor: pointer;
}
.city-panel-back:hover { color: var(--sign); }
.city-panel-back svg, .city-panel-nav svg { width: 18px; height: 18px; }
.city-panel-head { display: flex; align-items: center; gap: .7rem; }
.city-panel-head .bullet { --size: 36px; background: var(--gold); color: var(--on-gold); font-size: 17px; }
.city-panel-head h3 { font-family: var(--display); font-stretch: 118%; font-weight: 700; font-size: 1.45rem; line-height: 1.1; color: var(--sign); outline: none; }
.city-panel-desc { margin-top: .7rem; color: var(--muted-dark); font-size: .975rem; line-height: 1.5; }
.city-panel-list { margin: .7rem 0 0; padding: 0 0 0 1.1rem; color: var(--sign); font-size: .95rem; line-height: 1.5; }
.city-panel-list li::marker { color: var(--gold); }
.city-panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.city-panel-actions .btn { flex: 1 1 auto; }
.city-panel-nav { display: flex; align-items: center; justify-content: space-between; margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--rule-dark); color: var(--muted-dark); font-size: .9rem; font-variant-numeric: tabular-nums; }
.city-panel-nav button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night-3); border: 1px solid var(--rule-dark); color: var(--sign); cursor: pointer; }
.city-panel-nav button:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 960px) {
  .city-panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; padding: .7rem .8rem .8rem; }
  .city-panel-nav { position: absolute; top: .45rem; right: .5rem; margin: 0 !important; padding: 0 !important; border: 0; gap: .35rem; }
  .city-panel-nav span { display: none; }
  .city-panel-nav button { width: 36px; height: 36px; }
  .city-panel-desc, .city-panel-list { display: none; }
  .city-panel-head h3 { font-size: 1.2rem; }
  .city-panel-back { margin-bottom: .35rem; }
  .city-panel-actions { margin-top: .7rem; }
  .city-panel-nav { margin-top: .6rem; padding-top: .5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .map-line .track, .js .map-trunk { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease-out) forwards; }
  .js .map-line:nth-of-type(2) .track { animation-delay: .08s; }
  .js .map-line:nth-of-type(3) .track { animation-delay: .16s; }
  .js .map-line:nth-of-type(4) .track { animation-delay: .24s; }
  .js .map-line:nth-of-type(5) .track { animation-delay: .32s; }
  .js .map-line:nth-of-type(6) .track { animation-delay: .4s; }
  .js .map-trunk { animation-delay: .7s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 700px) {
  .map-line .label { display: none; }
  .map-line .stop { r: 24px; }
  .map-line .stop-num { font-size: 26px; }
  .map-line .track { stroke-width: 16; }
  .map-trunk { stroke-width: 18; }
  .map-hub-label { font-size: 34px; }
  .map-trunk-label { display: none; }
}
@media (max-width: 420px) {
  .toggles { grid-template-columns: minmax(0, 1fr); }
  .builder .cta-row .btn { width: 100%; }
}

/* ---------- Diagrama de línea (servicios en Inicio) ---------- */
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: clamp(3rem, 4vw, 4rem); }
.strip-stop { position: relative; display: grid; gap: .65rem; align-content: start; padding-top: 4.25rem; }
.strip-stop::before { content: ""; position: absolute; top: 23px; left: 0; right: calc(-1 * clamp(1.5rem, 3vw, 3rem)); height: 6px; background: var(--rule-light); }
.strip-stop:nth-child(3n)::before { right: 0; }
.strip-stop .bullet { position: absolute; top: 0; left: 0; --size: 52px; background: var(--ink); color: var(--sign); box-shadow: 0 0 0 6px var(--sign); }
.strip-stop h3 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.75rem; line-height: 1.05; }
.strip-stop p { color: var(--ink-soft); }
.strip-stop .text-link { margin-top: .35rem; }
.strip-stop:hover::before { background: var(--gold); }
.strip-stop:hover .bullet { background: var(--gold); color: var(--on-gold); }
.strip-stop::before, .strip-stop .bullet { transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }

@media (max-width: 900px) {
  .strip { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .strip-stop { padding: 0 0 2.75rem 4.5rem; min-height: 52px; }
  .strip-stop::before { top: 0; bottom: 0; left: 23px; right: auto; width: 6px; height: auto; }
  .strip-stop:nth-child(3n)::before { right: auto; }
  .strip-stop:last-child::before { bottom: auto; height: 52px; }
  .strip-stop h3 { padding-top: .55rem; }
}

/* ---------- Método: recorrido de cuatro estaciones ---------- */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); counter-reset: route; }
.route li { position: relative; display: grid; gap: .6rem; align-content: start; padding-top: 4.25rem; }
.route li::before { content: ""; position: absolute; top: 23px; left: 0; right: calc(-1 * clamp(1.25rem, 2.5vw, 2.5rem)); height: 6px; background: var(--gold); }
.route li:last-child::before { right: 0; }
.route .bullet { position: absolute; top: 0; left: 0; --size: 52px; background: var(--sign); color: var(--night); box-shadow: 0 0 0 6px var(--night); }
.route h3 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--sign); }
.route p { color: var(--muted-dark); }
.route-foot { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.route-foot .text-link { color: var(--sign); }

@media (max-width: 900px) {
  .route { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .route li { padding: 0 0 2.5rem 4.5rem; }
  .route li::before { top: 0; bottom: 0; left: 23px; right: auto; width: 6px; height: auto; }
  .route li:last-child::before { right: auto; bottom: auto; height: 52px; }
  .route h3 { padding-top: .6rem; }
}

/* ---------- Banda de cierre ---------- */
.closing { background: var(--gold); color: var(--on-gold); padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.closing .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
.closing .h2 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); line-height: 1.02; }
.closing p { color: #2B2414; font-size: 1.125rem; max-width: 34em; }
.closing .cta-row { margin-top: 1.5rem; }
.closing .btn-outline-dark:hover { background: var(--night); color: var(--gold); }
@media (max-width: 900px) {
  .closing .container { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 480px) {
  .closing .cta-row .btn { width: 100%; }
}

/* ---------- Encabezado de páginas internas ---------- */
.page-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.page-head .container { display: grid; gap: 1.25rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .95rem; color: var(--muted-dark); }
.crumbs a { color: var(--muted-dark); }
.crumbs a:hover { color: var(--sign); }
.crumbs svg { width: 14px; height: 14px; }
.page-head .display { max-width: 14em; }
.page-head .lead { color: var(--muted-dark); }

/* Índice de líneas (Servicios) */
.line-index { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.line-index a { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .4rem 1rem .4rem .4rem; border: 1px solid var(--rule-dark); border-radius: 999px; text-decoration: none; color: var(--sign); background: var(--night-2); font-size: 1rem; transition: border-color .2s var(--ease-out); }
.line-index a:hover { border-color: var(--gold); }
.line-index a:hover .bullet { background: var(--gold); }
.line-index .bullet { --size: 34px; transition: background-color .2s var(--ease-out); }
@media (max-width: 560px) {
  .line-index { display: grid; grid-template-columns: minmax(0, 1fr); }
  .line-index a { border-radius: var(--radius); }
}

/* ---------- Servicio (detalle) ---------- */
.svc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); border-top: 1px solid var(--rule-light); }
.svc:first-child { border-top: 0; }
.svc-main { display: grid; gap: 1.25rem; align-content: start; }
.svc-sign { display: flex; align-items: center; gap: 1rem; }
.plate { width: 76px; height: 76px; flex: none; display: grid; place-items: center; background: var(--night); color: var(--sign); border-radius: 10px; }
.plate svg { width: 44px; height: 44px; }
.svc-sign .bullet { --size: 44px; background: var(--ink); color: var(--sign); }
.svc-main .h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.svc-main p { color: var(--ink-soft); max-width: 36em; }
.svc-main .cta-row { margin-top: .5rem; }

.stations { list-style: none; margin: 0; padding: 0; position: relative; align-self: start; }
.stations-title { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.25rem; margin-bottom: 1.25rem; }
.stations li { position: relative; padding: 0 0 1.35rem 2.75rem; font-size: 1.0625rem; line-height: 1.4; }
.stations li::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 6px; background: var(--gold); }
.stations li:first-child::before { top: .55rem; }
.stations li:last-child { padding-bottom: 0; }
.stations li:last-child::before { bottom: auto; height: .55rem; }
.stations li::after { content: ""; position: absolute; left: 0; top: .2rem; width: 20px; height: 20px; border-radius: 50%; background: var(--sign); border: 4px solid var(--ink); box-sizing: border-box; }
@media (max-width: 860px) {
  .svc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .svc-main .cta-row .btn { width: 100%; }
}

/* ---------- Acerca ---------- */
.story { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story-copy { display: grid; gap: 1.25rem; }
.story-copy p { color: var(--ink-soft); max-width: 36em; }
.story-plate { position: relative; background: var(--night); border-radius: 12px; aspect-ratio: 4 / 3.4; display: grid; place-items: center; overflow: hidden; }
.story-plate svg.story-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-plate svg.story-net path { fill: none; stroke: var(--rail); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.story-plate svg.story-net path.live { stroke: var(--gold); }
.story-plate img { position: relative; width: 34%; height: auto; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .5)); }
@media (max-width: 860px) { .story { grid-template-columns: minmax(0, 1fr); } }

.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-dark); }
.pillars li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: 2rem 2rem 2rem 0; border-bottom: 1px solid var(--rule-dark); }
.pillars li:nth-child(odd) { border-right: 1px solid var(--rule-dark); }
.pillars li:nth-child(even) { padding-left: 2rem; }
.pillars .plate { width: 60px; height: 60px; background: var(--night-3); color: var(--gold); }
.pillars .plate svg { width: 32px; height: 32px; }
.pillars h3 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.5rem; line-height: 1.1; margin-bottom: .45rem; color: var(--sign); }
.pillars p { color: var(--muted-dark); }
@media (max-width: 760px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars li, .pillars li:nth-child(even) { padding: 1.75rem 0; border-right: 0; }
  .pillars li:nth-child(odd) { border-right: 0; }
}

/* ---------- Contacto ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.form-panel { background: #FFFFFF; border: 1px solid var(--rule-light); border-radius: 10px; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); box-shadow: 0 18px 40px -24px rgba(17, 19, 22, .25); }
.form-panel .h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.form-panel > p { color: var(--ink-soft); margin: .6rem 0 1.75rem; }
.picked { display: none; margin: 0 0 1.5rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--sign); border: 1px solid var(--rule-light); }
.picked.show { display: grid; gap: .65rem; }
.picked-title { font-weight: 700; font-size: .975rem; }
.picked-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.picked-list li { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; background: var(--night); color: var(--sign); font-size: .95rem; }
.picked-list .bullet { --size: 26px; background: var(--gold); }
.picked a { font-size: .95rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.field { display: grid; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .975rem; }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: .75rem .9rem;
  background: #FFFFFF; border: 1.5px solid #B9B9B2; border-radius: var(--radius);
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field textarea { min-height: 96px; resize: vertical; }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field-top .opt { font-weight: 400; color: var(--muted-dark); }
.field-top .count { font-size: .85rem; color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.field-top .count.is-full { color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: #6B6F75; }
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(213, 169, 80, .55); }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.err { color: var(--danger); font-size: .925rem; min-height: 0; }
.err:empty { display: none; }
.field-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .925rem; color: var(--ink-soft); }
.word-count { font-variant-numeric: tabular-nums; }
.word-count.is-near { color: var(--gold-deep); font-weight: 700; }
.word-count.is-over { color: var(--danger); font-weight: 700; }
.consent { display: flex; align-items: flex-start; gap: .7rem; font-size: 1rem; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--ink); flex: none; }
.consent.invalid { color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { display: none; margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: var(--radius); font-weight: 700; }
.status.show { display: block; }
.status.ok { background: #E3F1E8; color: var(--ok); border: 1px solid #A9D3B9; }
.status.bad { background: #FBE7E5; color: var(--danger); border: 1px solid #EBB3AE; }
.legend { margin-top: 1.5rem; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.direct { display: grid; gap: .75rem; }
.direct-title { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.5rem; margin-bottom: .25rem; }
.direct-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 10px; background: var(--night); color: var(--sign); text-decoration: none; transition: background-color .2s var(--ease-out); }
a.direct-item:hover { background: var(--night-3); }
.direct-item .plate { width: 48px; height: 48px; background: var(--night-3); color: var(--gold); border-radius: 8px; }
.direct-item .plate svg, .direct-item .plate img { width: 24px; height: 24px; }
.direct-item small { display: block; color: var(--muted-dark); font-size: .875rem; }
.direct-item strong { display: block; font-size: 1.0625rem; overflow-wrap: anywhere; }
.direct-wa { background: var(--gold); color: var(--on-gold); }
a.direct-wa:hover { background: var(--gold-hi); }
.direct-wa .plate { background: var(--night); }
.direct-wa small { color: #3A2F15; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Legal ---------- */
.legal { max-width: 70ch; }
.legal .updated { color: var(--ink-soft); margin-bottom: 2rem; }
.legal h2 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.6rem; line-height: 1.15; margin: 2.75rem 0 .9rem; }
.legal p, .legal li { color: #2A2D31; }
.legal p + p { margin-top: .9rem; }
.legal ul { margin: .9rem 0; padding-left: 1.25rem; }
.legal li { margin-bottom: .45rem; }
.legal li::marker { color: var(--gold-deep); }
.legal a { overflow-wrap: anywhere; }

/* ---------- 404 ---------- */
.nf { position: relative; overflow: hidden; min-height: calc(100svh - var(--header-h) - 1px); display: grid; align-items: center; padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  background-image: radial-gradient(ellipse 55% 70% at 88% 0%, rgba(213, 169, 80, var(--halo-a, .045)), rgba(213, 169, 80, 0) 70%), var(--grain);
  background-repeat: no-repeat, repeat; background-size: auto, 192px 192px; }
.nf-num { position: absolute; right: -.04em; bottom: -.18em; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(9rem, 4rem + 22vw, 24rem); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(213, 169, 80, .22); pointer-events: none; user-select: none; }
.nf-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.nf-copy { display: grid; gap: 1.5rem; justify-items: start; }
.nf-copy .display { max-width: 12em; color: var(--sign); }
.nf-copy .lead { color: var(--muted-dark); max-width: 34em; }
.nf-links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-dark); counter-reset: nf; }
.nf-links li { border-bottom: 1px solid var(--rule-dark); counter-increment: nf; }
.nf-links a { text-decoration: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; padding: 1.15rem .25rem; color: var(--sign); }
.nf-links a::before { content: counter(nf, decimal-leading-zero); font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: .8rem; letter-spacing: .14em; color: var(--gold); }
.nf-link-text { display: grid; gap: .15rem; }
.nf-links strong { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.nf-links small { color: var(--muted-dark); font-size: .925rem; }
.nf-links svg { width: 20px; height: 20px; color: var(--muted-dark); transition: transform .25s var(--ease-out), color .2s var(--ease-out); }
.nf-links a:hover svg, .nf-links a:focus-visible svg { transform: translateX(4px); color: var(--gold); }
.nf-links a:hover strong { color: var(--gold); }
@media (max-width: 900px) { .nf-grid { grid-template-columns: minmax(0, 1fr); } .nf { align-items: start; min-height: 0; padding-bottom: clamp(9rem, 30vw, 14rem); } }

/* ---------- Pie ---------- */
.footer { background: var(--night); color: var(--sign); padding-block: clamp(3.5rem, 3rem + 2vw, 5rem) 2rem; border-top: 1px solid var(--rule-dark); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 2.5rem; }
.foot-brand img { height: 44px; width: auto; }
.foot-brand p { color: var(--muted-dark); margin-top: 1.25rem; max-width: 30em; }
.footer h2, .footer .foot-title { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.125rem; margin-bottom: 1rem; color: var(--sign); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer li a, .footer li span { color: var(--muted-dark); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; min-height: 32px; overflow-wrap: anywhere; }
.footer li a:hover { color: var(--sign); }
.footer li svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.foot-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .925rem; color: var(--muted-dark); }
.foot-bottom a { color: var(--muted-dark); }
.foot-bottom a:hover { color: var(--sign); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ---------- WhatsApp y barra de acciones móvil ---------- */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.wa-float img { width: 28px; height: 28px; filter: brightness(0) invert(1); }

.action-bar { display: none; }
@media (max-width: 760px) {
  .wa-float { display: none; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .5rem;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: var(--night); border-top: 1px solid var(--rule-dark);
  }
  .action-bar .btn { min-height: 52px; padding-inline: .75rem; font-size: 1.0625rem; }
  .action-bar .btn-wa { background: #25D366; color: var(--on-gold); }
  .action-bar .btn-wa img { filter: brightness(0); }
  /* Mientras se escribe, el teclado del celular empujaría la barra hacia arriba: se oculta */
  .is-typing .action-bar { display: none; }
}

/* ---------- Trazos animados al deslizar (ver main.js) ---------- */
.strip-stop::before, .route li::before { transform: scaleX(var(--draw, 1)); transform-origin: left center; }
.story-plate svg.story-net path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.story-plate { perspective: 900px; }
.plate { will-change: transform; }
@media (max-width: 900px) {
  .strip-stop::before, .route li::before { transform: scaleY(var(--draw, 1)); transform-origin: center top; }
}

/* ---------- Soluciones en conjunto: tarjetas unidas por la línea dorada ---------- */
.lines-sec { position: relative; overflow: hidden; border-top: 1px solid var(--rule-dark); }
/* Trama de calles en perspectiva isométrica, como la ciudad del inicio, que se apaga hacia los bordes */
.lines-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%, rgba(213, 169, 80, .07), rgba(var(--night-rgb), 0) 70%),
    radial-gradient(ellipse 90% 80% at 50% 30%, rgba(var(--night-rgb), 0) 30%, var(--night) 80%),
    repeating-linear-gradient(30deg, rgba(242, 242, 239, .035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(-30deg, rgba(242, 242, 239, .035) 0 1px, transparent 1px 56px);
}
.lines-sec .container { position: relative; }
.lines { --gap: clamp(.9rem, 1.6vw, 1.25rem); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.line-card { position: relative; }
/* Tramo de línea que une cada tarjeta con la siguiente, a la altura del número */
.line-card:not(:nth-child(3n))::after {
  content: ""; position: absolute; z-index: 0; top: calc(1.5rem + 15px); right: calc(-1 * var(--gap)); width: var(--gap); height: 2px;
  background: var(--gold); transform: scaleX(var(--draw, 1)); transform-origin: left center;
}
.line-card-link {
  position: relative; z-index: 1; height: 100%; display: grid; gap: .75rem; align-content: start;
  padding: 1.5rem 1.5rem 1.35rem; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--night-3), var(--night-2)); border: 1px solid var(--rule-dark);
  color: var(--sign); text-decoration: none;
  transition: transform .25s var(--ease-out), border-color .2s var(--ease-out);
}
/* Luz dorada que sigue al puntero dentro de la tarjeta */
.line-card-link::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(213, 169, 80, .13), rgba(213, 169, 80, 0) 70%);
  transition: opacity .25s var(--ease-out);
}
.line-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.line-card .bullet { background: var(--gold); color: var(--on-gold); }
.line-card .plate { width: 56px; height: 56px; background: var(--night); color: var(--gold); border: 1px solid var(--rule-dark); border-radius: 10px; }
.line-card .plate svg { width: 30px; height: 30px; }
.line-card h3 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.5rem; line-height: 1.08; color: var(--sign); }
.line-card p { color: var(--muted-dark); }
.line-card-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-weight: 700; color: var(--gold-hi); }
.line-card-more svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.line-card-link:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .line-card-link:hover { transform: translateY(-4px); border-color: rgba(213, 169, 80, .6); }
  .line-card-link:hover::before { opacity: 1; }
  .line-card-link:hover .line-card-more svg { transform: translateX(3px); }
}
.line-card-link:active { transform: scale(.985); }
@media (max-width: 1000px) {
  .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-card:not(:nth-child(3n))::after { display: none; }
  .line-card:nth-child(odd)::after { display: block; }
}
@media (max-width: 640px) {
  .lines { grid-template-columns: minmax(0, 1fr); }
  .line-card:nth-child(odd)::after, .line-card:not(:last-child)::after {
    display: block; top: auto; bottom: calc(-1 * var(--gap)); right: auto; left: calc(1.5rem + 15px); width: 2px; height: var(--gap);
    transform: scaleY(var(--draw, 1)); transform-origin: center top;
  }
  .line-card:last-child::after { display: none; }
}

/* ---------- Tema oscuro continuo ----------
   Todo el sitio sigue la línea del inicio: no hay saltos a fondo blanco al bajar.
   Las secciones "on-light" pasan a ser una superficie apenas más clara que la noche, para dar ritmo. */
body { background: var(--night); color: var(--sign); }
.on-light { background: var(--night-2); color: var(--sign); border-top: 1px solid var(--rule-dark); }
.on-light .gold { color: var(--gold); }
.on-light .lead, .on-light .section-head p { color: var(--muted-dark); }
.on-light .btn-dark { background: var(--night-3); color: var(--sign); border-color: var(--rule-dark); }
.on-light .btn-dark:hover { background: var(--night); border-color: var(--gold); color: var(--gold-hi); box-shadow: none; }

/* Servicios */
.svc { border-top-color: var(--rule-dark); }
.svc-main p { color: var(--muted-dark); }
.svc-sign .bullet { background: var(--sign); color: var(--night); }
.on-light .plate { background: var(--night); color: var(--gold); border: 1px solid var(--rule-dark); }
.stations li { color: var(--sign); }
.stations li::after { background: var(--night-2); border-color: var(--sign); }

/* Acerca */
.story-copy p { color: var(--muted-dark); }
.story-plate { border: 1px solid var(--rule-dark); }

/* Contacto */
.form-panel { background: var(--night); border-color: var(--rule-dark); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .7); }
.form-panel > p { color: var(--muted-dark); }
.field label { color: var(--sign); }
.field input, .field textarea { background: var(--night-2); border-color: #3A414A; color: var(--sign); }
.field input::placeholder, .field textarea::placeholder { color: #7C838B; }
.field input:hover, .field textarea:hover { border-color: var(--rail-hi); }
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213, 169, 80, .3); }
.field.invalid input, .field.invalid textarea { border-color: var(--danger-dark); }
.err, .consent.invalid { color: var(--danger-dark); }
.field-meta, .legend { color: var(--muted-dark); }
.word-count.is-near { color: var(--gold); }
.word-count.is-over { color: var(--danger-dark); }
.consent input { accent-color: var(--gold); }
.picked { background: var(--night-2); border-color: var(--rule-dark); }
.picked-list li { background: var(--night-3); }
.status.ok { background: #10241A; color: #8FD3AE; border-color: #24563B; }
.status.bad { background: #2A1414; color: var(--danger-dark); border-color: #5A2622; }

/* Legales */
.legal .updated { color: var(--muted-dark); }
.legal p, .legal li { color: #C9CDD2; }
.legal li::marker { color: var(--gold); }

/* Número de servicio sin pictograma */
.svc-sign .bullet { --size: 52px; background: var(--gold); color: var(--on-gold); font-size: 22px; }
.line-card .bullet { --size: 40px; font-size: 18px; }

/* ---------- Galería de servicios (Servicios) ----------
   Fichas altas en fila. Con mouse, acercarse a los bordes recorre la galería y también se puede arrastrar;
   en pantallas táctiles se desliza con el dedo. Las fotos van en blanco y negro y toman color al pasar. */
.gallery { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--rule-dark); }
.gallery .section-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.gallery .container.section-head { max-width: var(--max); }
.gallery .section-head p { max-width: 36em; }
.gal {
  --gap: clamp(.75rem, 1.4vw, 1.25rem);
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  padding-block: 14px 26px; margin-block: -14px -26px; /* lugar para que la ficha se eleve sin cortarse */
}
.gal::-webkit-scrollbar { display: none; }
.gal.is-fine { scroll-snap-type: none; cursor: grab; }
.gal.is-drag { cursor: grabbing; }
.gal.is-drag a { pointer-events: none; }
.gal-card { flex: 0 0 calc((100% - 2.6 * var(--gap)) / 3.6); scroll-snap-align: start; }
.gal-card a {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: #F2F2EF; text-decoration: none;
  background: linear-gradient(160deg, var(--night-3), var(--night-2) 60%, #17140E); border: 1px solid var(--rule-dark);
  transition: transform .55s var(--ease-out), border-color .3s var(--ease-out), box-shadow .55s var(--ease-out);
}
.gal-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: clamp(3.5rem, 6vw, 5.5rem); color: rgba(213, 169, 80, .14); transition: transform .8s var(--ease-out), color .5s var(--ease-out); }
.gal-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  filter: grayscale(1) contrast(1.05) brightness(.82); transform: scale(1.001);
  transition: opacity .5s var(--ease-out), filter .6s var(--ease-out), transform .8s var(--ease-out);
}
.gal-card img.is-loaded { opacity: 1; }
.gal-card a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(11, 12, 14, 0) 45%, rgba(11, 12, 14, .88)); transition: opacity .55s var(--ease-out); }
.gal-info { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: .9rem; padding: 1.5rem 1.6rem 1.6rem; transition: transform .55s var(--ease-out); }
.gal-title { font-family: var(--display); font-stretch: 100%; font-weight: 500; font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1.1; letter-spacing: -.01em; }
.gal-more { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #C9CDD2; transition: color .3s var(--ease-out); }
.gal-more svg { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.gal-card a:focus-visible { outline-offset: -3px; }
.gal-card a:active { transform: translateY(-6px) scale(.985); }
@media (hover: hover) and (pointer: fine) {
  /* Al pasar: la ficha se eleva, la foto (o el número) se acerca y toma color, el texto sube */
  .gal-card a:hover { border-color: var(--gold); transform: translateY(-10px); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .85); }
  .gal-card a:hover img { filter: grayscale(.1) contrast(1.05) brightness(.95); transform: scale(1.08); }
  .gal-card a:hover .gal-ph { transform: scale(1.18); color: rgba(213, 169, 80, .34); }
  .gal-card a:hover .gal-info { transform: translateY(-6px); }
  .gal-card a:hover::after { opacity: .85; }
  .gal-card a:hover .gal-more { color: var(--gold-hi); }
  .gal-card a:hover .gal-more svg { transform: translate(2px, -2px); }
}
.gal-foot { display: grid; gap: 1.1rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.gal-bar { position: relative; height: 2px; background: var(--rule-dark); overflow: hidden; }
.gal-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--gold); transform-origin: left center; will-change: transform; }
.gal-hint { justify-self: end; display: flex; gap: .6rem; color: var(--gold); font-size: .95rem; letter-spacing: .02em; }
.gal-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .gal-hint-fine { display: none; }
  .gal-hint-touch { display: inline; }
}
@media (max-width: 900px) { .gal-card { flex-basis: calc((100% - 1.4 * var(--gap)) / 2.4); } }
@media (max-width: 560px) { .gal-card { flex-basis: 78%; } .gal-hint { justify-self: start; } }
:root { color-scheme: dark; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }


/* Encabezado que se esconde al bajar y vuelve al subir (ver main.js) */
.header { transition: transform .45s var(--ease-out); }
.header.is-hidden { transform: translateY(-100%); }

/* Lo que nos distingue (Acerca): sin íconos; una numeración editorial chica en dorado sobre cada título */
.pillars { counter-reset: pillar; }
.pillars li { grid-template-columns: minmax(0, 1fr); counter-increment: pillar; }
.pillars li > div::before {
  content: counter(pillar, decimal-leading-zero); display: block; margin-bottom: .9rem;
  font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: .875rem; letter-spacing: .14em; color: var(--gold);
}
.pillars h3 { max-width: 16em; }
.pillars p { max-width: 34em; }

/* Casilla de aceptación: no hereda el tamaño de los campos del formulario y queda alineada con la primera línea */
.field .consent { align-items: flex-start; line-height: 1.5; }
.field .consent input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: calc((1.5em - 20px) / 2) 0 0; border: 0; box-shadow: none; flex: none; }

/* H1 en dos partes: la frase de búsqueda chica en dorado y el eslogan grande debajo */
.h1-lockup { display: grid; gap: .9rem; }
.h1-lockup .display { display: block; }
.eyebrow {
  display: block; font-family: var(--display); font-stretch: 112%; font-weight: 650;
  font-size: clamp(.8rem, .75rem + .2vw, .9rem); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.page-head .h1-lockup .display { max-width: 14em; }

/* ---------- Preguntas frecuentes (Inicio) ----------
   Acordeón con <details>: se lee aunque no haya JavaScript y los buscadores ven todas las respuestas.
   El título queda fijo a la izquierda mientras se recorren las preguntas. */
.faq { background: var(--night-2); border-top: 1px solid var(--rule-dark); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq .section-head { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
.faq .section-head .text-link { color: var(--sign); margin-top: .25rem; }
.faq-list { border-top: 1px solid var(--rule-dark); }
.faq-item { border-bottom: 1px solid var(--rule-dark); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: 4px; }
.faq-item h3 { font-family: var(--display); font-stretch: 106%; font-weight: 650; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.3; color: var(--sign); transition: color .2s var(--ease-out); }
.faq-icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-dark); transition: transform .35s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--gold); border-radius: 2px; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { transform: rotate(45deg); border-color: var(--gold); background: rgba(213, 169, 80, .1); }
.faq-item[open] h3 { color: var(--gold-hi); }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover h3 { color: var(--gold-hi); }
  .faq-item summary:hover .faq-icon { border-color: var(--gold); }
}
.faq-answer p { max-width: 40em; padding: 0 3.5rem 1.5rem 0; color: var(--muted-dark); }
.faq-answer a { color: var(--sign); text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; }
.faq-answer a:hover { color: var(--gold-hi); }
/* Apertura suave: la respuesta aparece subiendo apenas; donde el navegador lo permite, la altura también se anima */
.faq-item[open] .faq-answer { animation: faq-in .45s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-answer { animation: none; }
  .faq-item::details-content { transition: none; }
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq .section-head { position: static; }
  .faq-answer p { padding-right: 0; }
}

/* Menú con cinco secciones: los textos no se parten y la hamburguesa aparece antes */
.nav .link, .nav .btn { white-space: nowrap; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* ---------- Profundidad de los fondos ----------
   Un grano casi imperceptible (assets/img/texture/grain.png, ~5 % de opacidad) y una luz dorada muy suave en un rincón,
   como un farol fuera de cuadro. Cada tipo de sección tiene la luz en otro lugar para que no se repita.
   La portada con la ciudad 3D queda afuera: el lienzo tiene su propio fondo y se notaría el corte. */
:root {
  --grain: url("/assets/img/texture/grain.png");
  --halo-a: .045; /* intensidad de la luz dorada */
}
.page-head {
  background-image:
    radial-gradient(ellipse 55% 70% at 88% 0%, rgba(213, 169, 80, var(--halo-a)), rgba(213, 169, 80, 0) 70%),
    var(--grain);
  background-repeat: no-repeat, repeat; background-size: auto, 192px 192px;
}
.section.night:not(.lines-sec) {
  background-image:
    radial-gradient(ellipse 50% 60% at 0% 15%, rgba(213, 169, 80, var(--halo-a)), rgba(213, 169, 80, 0) 70%),
    var(--grain);
  background-repeat: no-repeat, repeat; background-size: auto, 192px 192px;
}
.on-light, .faq {
  background-image:
    radial-gradient(ellipse 45% 55% at 100% 100%, rgba(213, 169, 80, var(--halo-a)), rgba(213, 169, 80, 0) 70%),
    var(--grain);
  background-repeat: no-repeat, repeat; background-size: auto, 192px 192px;
}
.footer {
  background-image:
    radial-gradient(ellipse 50% 80% at 50% 0%, rgba(213, 169, 80, calc(var(--halo-a) * .8)), rgba(213, 169, 80, 0) 70%),
    var(--grain);
  background-repeat: no-repeat, repeat; background-size: auto, 192px 192px;
}
/* La sección de la galería ya tiene su trama de calles: el grano va en una capa encima del fondo y debajo del contenido */
.lines-sec::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grain) 0 0 / 192px 192px repeat; }
.lines-sec .container { z-index: 1; }

/* ---------- Botones: sistema final ----------
   Contraste medido (WCAG): textos ≥ 4,5:1 y bordes de controles ≥ 3:1 sobre su fondo.
   Luces: un brillo fino arriba y una sombra fina abajo, como una pieza de metal; nada de resplandores de color.
   Estados: al pasar el mouse se aclara; al presionar se hunde apenas (escala .97); con teclado, anillo visible. */
:root {
  --control-edge: #5E6670;    /* borde de controles: 3,4:1 sobre la noche y 3,1:1 sobre las secciones */
  --control-edge-hi: #8A929B; /* borde destacado y botones de contorno: 6,2:1 */
}
.btn {
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[disabled]:active { opacity: .55; transform: none; cursor: progress; }

/* Dorado (acción principal) */
.btn-gold {
  background-color: var(--gold);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .45);
}
.btn-gold:hover { background-color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .16), 0 10px 22px -10px rgba(0, 0, 0, .8); }
.btn-gold:active { background-color: #C99C43; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .22); }

/* Contorno (acción secundaria sobre la noche) */
.btn-outline { border-color: var(--control-edge-hi); background-color: rgba(242, 242, 239, .02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn-outline:hover { border-color: var(--sign); background-color: rgba(242, 242, 239, .07); }
.btn-outline:active { background-color: rgba(242, 242, 239, .11); }

/* "Consultar por este servicio" (Servicios): antes casi no se distinguía del fondo; ahora es un contorno claro que se dora */
.on-light .btn-dark { background-color: rgba(242, 242, 239, .02); color: var(--sign); border-color: var(--control-edge-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.on-light .btn-dark:hover { background-color: rgba(213, 169, 80, .08); border-color: var(--gold); color: var(--gold-hi); box-shadow: none; }
.on-light .btn-dark:active { background-color: rgba(213, 169, 80, .14); }

/* Banda dorada de cierre: botón negro con brillo fino; el anillo de foco pasa a negro para verse sobre el dorado */
.closing .btn-dark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .25); }
.closing .btn-dark:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -12px rgba(0, 0, 0, .6); }
.closing .btn-outline-dark:active { background: #1C2025; }
.closing :focus-visible { outline-color: var(--night); }

/* Controles con borde: armado de la solución, menú, pastillas de servicios, flechas del panel */
.toggle { border-color: var(--control-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .16s var(--ease-out); }
.toggle:hover, .toggle.is-hover { border-color: var(--control-edge-hi); background-color: #171A1E; }
.toggle:active { transform: scale(.98); }
.toggle[aria-pressed="true"] { border-color: var(--gold); background-color: #1A1712; box-shadow: inset 0 1px 0 rgba(231, 196, 122, .12); }
.burger { border-color: var(--control-edge); transition: border-color .2s var(--ease-out), transform .16s var(--ease-out); }
.burger:hover { border-color: var(--control-edge-hi); }
.burger:active { transform: scale(.95); }
.line-index a { border-color: var(--control-edge); transition: border-color .2s var(--ease-out), transform .16s var(--ease-out); }
.line-index a:active { transform: scale(.97); }
.city-panel-nav button { border-color: #6B737E; transition: border-color .2s var(--ease-out), color .2s var(--ease-out), transform .16s var(--ease-out); }
.city-panel-nav button:active { transform: scale(.94); }

/* WhatsApp flotante: ícono negro sobre el verde (9,9:1, igual que la barra del celular) y un aro fino para despegarlo del fondo */
.wa-float img { filter: brightness(0); }
.wa-float { box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .45); }
.wa-float:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .5); }
.wa-float:active { transform: scale(.95); }
@media (hover: none) { .wa-float:hover { transform: none; } }

/* Foco con teclado: anillo dorado separado del botón por un aire oscuro, así se ve también sobre los botones dorados */
.btn:focus-visible, .toggle:focus-visible, .burger:focus-visible, .line-index a:focus-visible, .wa-float:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: var(--radius); }
.line-index a:focus-visible, .wa-float:focus-visible { border-radius: 999px; }

/* Banda dorada: los dos botones parejos. Mismo ancho, ícono de WhatsApp en negro (el verde desentonaba
   sobre el dorado) y el secundario con borde fino y un velo oscuro, para que no pese más que el principal. */
.closing .cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); gap: .75rem; max-width: 38.5rem; }
.closing .cta-row .btn { width: 100%; white-space: nowrap; }
.closing .btn-outline-dark {
  border-width: 1.5px; border-color: rgba(11, 12, 14, .82); color: var(--night);
  background-color: rgba(11, 12, 14, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.closing .btn-outline-dark img { filter: brightness(0); }
.closing .btn-outline-dark:hover { background-color: var(--night); border-color: var(--night); color: var(--gold-hi); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); }
.closing .btn-outline-dark:hover img { filter: brightness(0) saturate(100%) invert(80%) sepia(30%) saturate(600%) hue-rotate(358deg); }
.closing .btn-outline-dark:active { background-color: #1C2025; }

/* Página de Preguntas frecuentes. En la compu: invitación a consultar fija a la izquierda y preguntas a la derecha.
   En el celular: primero todas las preguntas y, al final, la invitación (es el orden del código). */
.faq-page .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "more list"; }
.faq-page .faq-list { grid-area: list; }
.faq-more { grid-area: more; display: grid; gap: 1rem; justify-items: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.faq-more p { color: var(--muted-dark); max-width: 36em; }
.faq-more .text-link { color: var(--sign); margin-top: .25rem; }
@media (max-width: 900px) {
  .faq-page .faq-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "more"; gap: clamp(2.5rem, 8vw, 3.5rem); }
  .faq-more { position: static; gap: .85rem; }
  .faq-more .h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); }
}

/* Mientras carga la ciudad 3D, el mapa SVG de respaldo ocupa su lugar pero no se ve (así no aparece un instante
   al entrar al Inicio). Solo se muestra si el equipo no tiene 3D o la ciudad no carga (clase no-3d) o sin JavaScript. */
/* Foto de la ciudad mientras carga la 3D: se escala y se corre con la misma regla que la cámara
   (src/city.js, resize): alto visible de 19,5 / 23 / 26,5 unidades y centro al 50 % o al 63 % del ancho.
   ciudad-movil.webp se sacó con un recuadro chico y cuadrado; ciudad-compu.webp con uno ancho (1037 × 942). */
.city-poster { display: none; }
.js .net-map:not(.no-3d) { container-type: size; }
.js .net-map:not(.no-3d):not(.poster-off) .city-poster {
  display: block; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat;
  background-image: url("/assets/img/ciudad/ciudad-compu.webp?v=61");
  background-size: auto 115.22cqh; background-position: calc(50cqw - 79.9cqh) -7.61cqh;
}
@container (aspect-ratio > 1.05) and (min-width: 700px) {
  .city-poster { background-size: auto 100cqh !important; background-position: calc(63cqw - 69.34cqh) 0 !important; }
}
@container (max-width: 699.98px) {
  .city-poster { background-image: url("/assets/img/ciudad/ciudad-movil.webp?v=61") !important; background-size: auto 100cqh !important; background-position: calc(50cqw - 50cqh) 0 !important; }
}
.city-canvas { position: relative; }
.city-canvas { animation: city-in .9s var(--ease-out) both; }
@keyframes city-in { from { opacity: 0; } }