/* ============================================================
   Clean Green — hoja de estilos

   Dirección: hoja de ruta de mantenimiento.
   La página se lee como el papeleo de un servicio que funciona:
   rejilla reglada, datos en monoespaciada, bloques numerados como
   partes de una orden de trabajo. El verde de la marca se usa como
   color de señal (chaleco de alta visibilidad), no como color de hoja.
   ============================================================ */

:root{
  /* Color */
  --asfalto:     #16181A;   /* fondo principal */
  --asfalto-alt: #1B1E21;   /* franjas alternas */
  --placa:       #212528;   /* superficies elevadas */
  --placa-alta:  #282D30;   /* superficies sobre placa */
  --linea:       #343A3D;   /* reglas y bordes */
  --linea-suave: #2A2F32;
  --tinta:       #ECEFEA;   /* texto principal */
  --tinta-media: #A8B0A9;   /* texto secundario */
  --tinta-baja:  #767E78;   /* texto terciario */
  --senal:       #9BD154;   /* verde de señal */
  --senal-honda: #7EB63F;   /* verde profundo */
  --ambar:       #E0A33C;   /* estado pendiente */
  --alarma:      #E2574C;   /* error */

  /* Tipografía */
  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --texto:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Medidas */
  --ancho:     1180px;
  --gutter:    clamp(1.1rem, 4vw, 2.5rem);
  --transicion:.22s cubic-bezier(.2,.6,.3,1);
  --radio:     3px;

  /* Cinta de seguridad: la textura que se repite en los cortes. */
  --cinta: repeating-linear-gradient(
    -45deg,
    var(--senal-honda) 0 10px,
    transparent 10px 20px
  );
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; }

body{
  margin:0;
  font-family:var(--texto);
  font-size:16px;
  line-height:1.65;
  background:var(--asfalto);
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.1rem,4.4vw,3.4rem); }
h2{ font-size:clamp(1.75rem,3.4vw,2.6rem); }
h3{ font-size:1.08rem; font-weight:600; letter-spacing:-.005em; }
h4{ font-size:.78rem; font-weight:600; }

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

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

/* Números siempre en columna: es media identidad de la página. */
.dato,.tablero__num,.arancel__importe,.lista-horario strong{
  font-family:var(--dato);
  font-variant-numeric:tabular-nums;
}

.senal{ color:var(--senal); }

.etiqueta{
  font-family:var(--dato);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--senal);
  margin:0 0 .9rem;
}

.parrafo{ color:var(--tinta-media); font-size:1rem; }
.parrafo--ancho{ max-width:62ch; }

.nota{
  font-family:var(--dato);
  font-size:.78rem;
  line-height:1.6;
  color:var(--tinta-baja);
  margin:1rem 0 0;
}
.nota--centro{ text-align:center; }
.nota strong{ color:var(--tinta-media); }

/* ---------- Accesibilidad ---------- */
.salto-contenido{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--senal); color:#11140F; font-weight:600;
  padding:.7rem 1.2rem; border-radius:var(--radio);
  transition:top var(--transicion);
}
.salto-contenido:focus{ top:1rem; }
:focus-visible{ outline:2px solid var(--senal); outline-offset:3px; }

/* ---------- Barra de progreso ---------- */
.progreso{
  position:fixed; inset:0 0 auto; height:2px; z-index:70; pointer-events:none;
}
.progreso span{ display:block; height:100%; width:0%; background:var(--senal); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--dato);
  font-size:.82rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.85rem 1.5rem;
  border:1px solid var(--senal);
  border-radius:var(--radio);
  background:var(--senal); color:#11140F;
  cursor:pointer;
  transition:background var(--transicion), border-color var(--transicion),
             color var(--transicion), transform var(--transicion);
}
.btn:hover{ background:var(--senal-honda); border-color:var(--senal-honda); transform:translateY(-1px); }
.btn--fantasma{ background:transparent; color:var(--tinta); border-color:var(--linea); }
.btn--fantasma:hover{ background:transparent; border-color:var(--senal); color:var(--senal); }
.btn--sm{ padding:.6rem 1rem; font-size:.74rem; }
.btn--lg{ padding:1rem 1.9rem; }
.btn--bloque{ width:100%; }
.btn:disabled{ opacity:.55; cursor:progress; transform:none; }

/* ---------- Navbar ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--asfalto) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background var(--transicion), border-color var(--transicion);
}
.nav--scroll{ background:var(--asfalto); border-bottom-color:var(--linea-suave); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:68px; }

.marca{ display:flex; align-items:center; gap:.65rem; }
.marca__icono{ width:40px; height:20px; color:var(--senal); flex:none; }
.marca__texto{
  font-family:var(--display); font-weight:800; font-size:1.02rem;
  letter-spacing:-.01em; color:var(--tinta);
}

.nav__links{ display:flex; align-items:center; gap:1.6rem; }
.nav__links a:not(.btn){
  font-size:.86rem; color:var(--tinta-media);
  padding-block:.3rem;
  border-bottom:1px solid transparent;
  transition:color var(--transicion), border-color var(--transicion);
}
.nav__links a:not(.btn):hover{ color:var(--tinta); border-bottom-color:var(--senal); }
.nav__links a[aria-current="page"]:not(.btn){ color:var(--tinta); border-bottom-color:var(--senal); }

.nav__toggle{
  display:none;
  width:42px; height:38px;
  background:none; border:1px solid var(--linea); border-radius:var(--radio);
  cursor:pointer; padding:9px 10px;
}
.nav__toggle span{ display:block; height:2px; background:var(--tinta); margin:3px 0; }

/* ---------- Secciones ---------- */
.seccion{ padding-block:clamp(3.4rem,7vw,5.5rem); }
.seccion--alt{ background:var(--asfalto-alt); border-block:1px solid var(--linea-suave); }

.seccion__cabecera{ margin-bottom:2.6rem; }
.seccion__cabecera h2{ margin-bottom:.9rem; }
/* En cada página de sección, el título de la sección es el h1 de la página. */
.seccion__cabecera h1{ font-size:clamp(1.75rem,3.4vw,2.6rem); margin-bottom:.9rem; }

/* ---------- Accesos a cada página (inicio) ---------- */
.accesos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--linea); border-left:1px solid var(--linea);
}
.acceso{
  display:flex; flex-direction:column; gap:.45rem; min-height:150px;
  padding:1.3rem 1.2rem; text-decoration:none; color:var(--tinta);
  border-right:1px solid var(--linea); border-bottom:1px solid var(--linea);
  transition:background var(--transicion);
}
.acceso:hover{ background:var(--placa); }
.acceso__etiqueta{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--senal);
}
.acceso__titulo{ font-family:var(--display); font-weight:800; font-size:1.15rem; line-height:1.25; }
.acceso__ir{
  margin-top:auto; font-family:var(--dato); font-size:.74rem; color:var(--tinta-media);
  transition:color var(--transicion);
}
.acceso:hover .acceso__ir{ color:var(--senal); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-block:clamp(3rem,7vw,5.5rem);
  border-bottom:1px solid var(--linea-suave);
  background:
    radial-gradient(760px 420px at 78% 8%, rgba(155,209,84,.10), transparent 68%),
    var(--asfalto);
}
/* Cinta de seguridad al pie del hero: la textura del oficio. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:var(--cinta); opacity:.5;
}
.hero__inner{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,4.5vw,3.4rem); align-items:center;
}
.hero__texto h1{ margin-bottom:1.4rem; }
.hero__texto .parrafo{ max-width:48ch; margin-bottom:2rem; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------- Plano de recorrido ----------
   El camión recorre la misma traza que dibuja la ruta, y cada puerta
   lanza sus tres avisos con el retraso que le corresponde según su
   posición en el recorrido. Por eso el aviso coincide con el paso.   */
.plano__marco{
  margin:0;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--placa);
  overflow:hidden;
}
.plano__barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem;
  background:var(--placa-alta);
  border-bottom:1px solid var(--linea);
}
.plano__titulo{
  font-family:var(--dato); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-media);
}
.plano__sello{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--dato); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--senal);
  border:1px solid color-mix(in srgb, var(--senal) 40%, transparent);
  border-radius:999px; padding:.18rem .6rem;
}
.plano__sello::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--senal);
  animation:cg-latido 2.4s ease-in-out infinite;
}
@keyframes cg-latido{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.plano__pie{
  padding:.8rem 1.1rem;
  border-top:1px solid var(--linea-suave);
  font-family:var(--dato); font-size:.72rem; color:var(--tinta-baja);
}

.plano{ display:block; width:100%; height:auto; }
.plano__fondo{ color:var(--linea); opacity:.55; }

/* La traza completa de la calle, siempre visible y tenue. */
.plano__calle{
  fill:none; stroke:var(--linea); stroke-width:2;
  stroke-linecap:square; stroke-linejoin:miter;
}

/* La ruta que se dibuja sola encima. */
.plano__ruta{
  fill:none; stroke:var(--senal); stroke-width:2;
  stroke-dasharray:1320; stroke-dashoffset:1320;
  animation:cg-trazar 14s linear infinite;
}
@keyframes cg-trazar{
  0%{ stroke-dashoffset:1320 }
  92%{ stroke-dashoffset:0 }
  100%{ stroke-dashoffset:0; opacity:0 }
}

.plano__casa{
  fill:var(--asfalto); stroke:var(--linea); stroke-width:1.5;
  animation:cg-casa 14s linear infinite;
  animation-delay:var(--retraso);
}
@keyframes cg-casa{
  0%,3%{ stroke:var(--linea) }
  5%{ stroke:var(--senal) }
  16%{ stroke:var(--senal) }
  26%,100%{ stroke:var(--linea) }
}

.plano__puerta{ fill:var(--tinta-baja); animation:cg-puerta 14s linear infinite; animation-delay:var(--retraso); }
@keyframes cg-puerta{
  0%,3%{ fill:var(--tinta-baja) }
  5%,20%{ fill:var(--senal) }
  30%,100%{ fill:var(--tinta-baja) }
}

/* Los tres avisos: tres anillos que salen de la puerta cuando pasa el camión. */
.plano__aviso{
  fill:none; stroke:var(--senal); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  opacity:0;
  animation:cg-aviso 14s linear infinite;
  animation-delay:var(--retraso);
}
@keyframes cg-aviso{
  0%   { transform:scale(1); opacity:0 }
  1%   { transform:scale(1); opacity:.95 }
  5%   { transform:scale(2.6); opacity:0 }
  5.1% { transform:scale(1); opacity:.95 }
  9%   { transform:scale(2.6); opacity:0 }
  9.1% { transform:scale(1); opacity:.95 }
  13%  { transform:scale(2.6); opacity:0 }
  100% { transform:scale(1); opacity:0 }
}

/* El camión recorre exactamente la misma traza. */
.plano__camion{
  fill:var(--senal);
  offset-path:path("M30,70 H410 V160 H30 V250 H410");
  offset-rotate:auto;
  offset-distance:0%;
  animation:cg-recorrer 14s linear infinite;
  filter:drop-shadow(0 0 6px rgba(155,209,84,.55));
}
@keyframes cg-recorrer{
  0%{ offset-distance:0% }
  92%{ offset-distance:100% }
  100%{ offset-distance:100%; opacity:0 }
}

.plano__rotulo{
  font-family:var(--dato); font-size:11px; letter-spacing:.14em;
  fill:var(--tinta-baja);
}
.plano__rotulo--der{ text-anchor:end; }

/* ---------- Cinta de datos ---------- */
.cinta{
  overflow:hidden;
  border-bottom:1px solid var(--linea-suave);
  background:var(--placa);
  padding-block:.6rem;
}
.cinta__riel{
  display:flex; width:max-content;
  animation:cg-cinta 32s linear infinite;
}
.cinta:hover .cinta__riel{ animation-play-state:paused; }
.cinta__pieza{
  font-family:var(--dato); font-size:.74rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-media);
  padding-inline:1.6rem;
  white-space:nowrap;
  display:inline-flex; align-items:center;
}
.cinta__pieza::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--senal); margin-right:1.6rem;
}
@keyframes cg-cinta{ to{ transform:translateX(-50%) } }
.hero__texto > *{ animation:cg-sube .6s ease-out both; }
.hero__texto > *:nth-child(1){ animation-delay:.04s }
.hero__texto > *:nth-child(2){ animation-delay:.10s }
.hero__texto > *:nth-child(3){ animation-delay:.18s }
.hero__texto > *:nth-child(4){ animation-delay:.26s }
@keyframes cg-sube{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:none }
}

/* ---------- Banda: por qué existe ---------- */
.banda-dolor{
  padding-block:clamp(3rem,6.5vw,4.6rem);
  background:var(--asfalto-alt);
  border-bottom:1px solid var(--linea-suave);
}
.banda-dolor h2{ max-width:24ch; margin:0 0 1rem; }
.banda-dolor .parrafo{ max-width:56ch; margin:0 0 1.8rem; }

/* ---------- Rejillas y tarjetas ---------- */
.rejilla{ display:grid; gap:1px; background:var(--linea-suave); border:1px solid var(--linea-suave); }
.rejilla--3{ grid-template-columns:repeat(3,1fr); }

.tarjeta{
  position:relative;
  background:var(--asfalto);
  padding:1.8rem 1.5rem 1.6rem;
}
.seccion--alt .tarjeta{ background:var(--asfalto-alt); }
.tarjeta__indice{
  display:block;
  font-family:var(--dato); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; color:var(--senal);
  margin-bottom:1rem;
}
.tarjeta h3{ margin-bottom:.55rem; }
.tarjeta p{ color:var(--tinta-media); font-size:.92rem; }
.tarjeta::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--senal); transform:scaleY(0); transform-origin:top;
  transition:transform .3s ease;
}
.tarjeta:hover::before{ transform:scaleY(1); }

/* ---------- Procedimiento ---------- */
.procedimiento{
  display:grid; gap:0;
  border-top:1px solid var(--linea-suave);
}
.paso{
  display:grid; grid-template-columns:4.5rem 1fr; gap:1.2rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--linea-suave);
}
.paso__num{
  font-family:var(--dato); font-size:1.5rem; font-weight:600;
  color:var(--linea);
  line-height:1;
  transition:color var(--transicion);
}
.paso:hover .paso__num{ color:var(--senal); }
.paso__cuerpo h3{ margin-bottom:.35rem; }
.paso__cuerpo p{ color:var(--tinta-media); font-size:.94rem; max-width:62ch; }

/* ---------- Aviso importante ---------- */
.aviso-importante{
  display:flex; gap:.9rem; align-items:flex-start;
  margin-top:2rem;
  padding:1.1rem 1.2rem;
  border:1px solid color-mix(in srgb, var(--ambar) 34%, transparent);
  border-left-width:3px;
  border-radius:var(--radio);
  background:color-mix(in srgb, var(--ambar) 8%, transparent);
}
.aviso-importante svg{ width:20px; height:20px; color:var(--ambar); flex:none; margin-top:.15rem; }
.aviso-importante p{ font-size:.92rem; color:var(--tinta-media); }
.aviso-importante strong{ color:var(--ambar); }

/* ---------- Galería de fotos reales (pendiente) ---------- */
.galeria{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:2.4rem;
  background:var(--linea-suave); border:1px solid var(--linea-suave);
}
.galeria__pieza{ margin:0; background:var(--asfalto); }
.galeria__pieza img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:saturate(.9); }
.galeria__pieza figcaption{
  font-family:var(--dato); font-size:.74rem; color:var(--tinta-baja);
  padding:.7rem .9rem;
}

/* ---------- Tablero de cotos ---------- */
.tablero{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  border-top:1px solid var(--linea-suave);
  border-left:1px solid var(--linea-suave);
}
.tablero__celda{
  padding:1rem .9rem;
  display:flex; flex-direction:column; gap:.3rem;
  border-right:1px solid var(--linea-suave);
  border-bottom:1px solid var(--linea-suave);
}
.tablero__num{
  font-family:var(--dato); font-size:1.5rem; font-weight:600;
  color:var(--tinta-baja); line-height:1;
}
.tablero__estado{
  font-family:var(--dato); font-size:.64rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-baja);
}
.tablero__celda--activa{ background:var(--senal); }
.tablero__celda--activa .tablero__num{ color:#11140F; }
.tablero__celda--activa .tablero__estado{ color:#11140F; opacity:.75; }

/* ---------- Banda CTA ---------- */
.banda-cta{
  position:relative;
  padding-block:clamp(2.6rem,5vw,3.6rem);
  background:var(--senal);
}
.banda-cta::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--cinta); opacity:.35;
}
.banda-cta__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.banda-cta .etiqueta{ color:#11140F; opacity:.6; }
.banda-cta h2{ color:#11140F; margin-bottom:.45rem; }
.banda-cta .parrafo{ color:#11140F; opacity:.78; max-width:48ch; }
.banda-cta .btn--lg{
  background:#11140F; border-color:#11140F; color:var(--senal);
}
.banda-cta .btn--lg:hover{ background:#000; border-color:#000; color:var(--senal); }

/* ---------- Panel (horarios) ---------- */
.panel{
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--placa);
  max-width:620px;
  overflow:hidden;
}
.panel__barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem;
  background:var(--placa-alta);
  border-bottom:1px solid var(--linea);
}
.panel__titulo{
  font-family:var(--dato); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-media);
}
.panel__sello{
  font-family:var(--dato); font-size:.66rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; padding:.18rem .6rem;
}
.panel__sello--pendiente{
  color:var(--ambar);
  border:1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
}
.lista-horario li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.78rem 1.1rem;
  border-bottom:1px solid var(--linea-suave);
  font-size:.92rem;
}
.lista-horario span{ color:var(--tinta-media); }
.lista-horario strong{ font-size:.86rem; font-weight:500; color:var(--ambar); }
.panel .nota{ margin:0; padding:.85rem 1.1rem; }

/* ---------- Arancel (precio) ---------- */
.arancel{
  max-width:680px;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--asfalto);
  overflow:hidden;
}
.arancel__cabecera{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 1.3rem;
  background:var(--placa-alta);
  border-bottom:1px solid var(--linea);
  font-family:var(--dato); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-baja);
}
.arancel__renglon{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
  padding:1.3rem 1.3rem;
  border-bottom:1px solid var(--linea-suave);
}
.arancel__concepto{
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  letter-spacing:-.01em;
}
.arancel__importe{
  display:flex; align-items:baseline;
  font-size:2.5rem; font-weight:600; color:var(--senal); line-height:1;
  white-space:nowrap;
}
.arancel__signo{ font-size:1.2rem; margin-right:.12rem; }
.arancel__decimales{ font-size:1.2rem; }
.arancel__periodo{ font-size:.85rem; color:var(--tinta-baja); margin-left:.35rem; }

.arancel__incluye{ padding:1.1rem 1.3rem; display:grid; gap:.6rem; }
.arancel__incluye li{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.93rem; color:var(--tinta-media);
}
.arancel__incluye li::before{
  content:"✓";
  font-family:var(--dato); font-size:.8rem; color:var(--senal);
  line-height:1.5; flex:none;
}
.arancel__renglon--equivalencia{
  border-top:1px solid var(--linea-suave);
  padding-block:.85rem;
  background:var(--asfalto-alt);
}
.arancel__renglon--equivalencia .arancel__concepto{
  font-family:var(--dato); font-size:.74rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-baja);
}
.arancel__renglon--equivalencia .arancel__importe{
  font-size:1rem; color:var(--tinta-media); font-weight:500;
}
.arancel .btn--bloque{ border-radius:0; border-inline:0; border-bottom:0; }
.arancel .nota{ padding:.9rem 1.3rem; margin:0; }

/* ---------- Acordeón ---------- */
.acordeon{ border-top:1px solid var(--linea-suave); max-width:820px; }
.pregunta{ border-bottom:1px solid var(--linea-suave); }
.pregunta summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0;
  font-family:var(--display); font-weight:600; font-size:1rem;
  cursor:pointer; list-style:none;
  transition:color var(--transicion);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:"+";
  font-family:var(--dato); font-size:1.25rem; font-weight:400;
  color:var(--senal); flex:none; line-height:1;
  transition:transform var(--transicion);
}
.pregunta[open] summary::after{ content:"−"; }
.pregunta summary:hover{ color:var(--senal); }
.pregunta p{
  padding:0 2rem 1.3rem 0;
  color:var(--tinta-media); font-size:.94rem; max-width:70ch;
}

/* ---------- Registro ---------- */
.seccion--registro{
  background:var(--asfalto-alt);
  border-top:1px solid var(--linea-suave);
}
.registro__chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.8rem;
}
.registro__chips li{
  font-family:var(--dato); font-size:.7rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-baja);
  border:1px solid var(--linea-suave);
  border-radius:var(--radio);
  padding:.4rem .8rem;
}

.formulario{
  display:grid; grid-template-columns:1fr 1fr; gap:1.3rem;
  max-width:820px;
  padding:clamp(1.3rem,3vw,2rem);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--placa);
}
.campo{ display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{
  font-family:var(--dato); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-media);
}
.campo input[type="text"],
.campo input[type="tel"]{
  font-family:var(--texto); font-size:.98rem;
  padding:.8rem .9rem;
  color:var(--tinta);
  background:var(--asfalto);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  transition:border-color var(--transicion), background var(--transicion);
}
.campo input::placeholder{ color:var(--tinta-baja); }
.campo input:focus{ outline:none; border-color:var(--senal); background:var(--asfalto-alt); }

.coto-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.5rem; }
.coto-chip{ position:relative; display:block; }
.coto-chip input{ position:absolute; opacity:0; width:0; height:0; }
.coto-chip span{
  display:block; text-align:center;
  font-family:var(--dato); font-size:.78rem; font-weight:500;
  padding:.6rem .4rem;
  color:var(--tinta-media);
  background:var(--asfalto);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  cursor:pointer;
  transition:border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.coto-chip span:hover{ border-color:var(--tinta-baja); color:var(--tinta); }
.coto-chip input:focus-visible + span{ outline:2px solid var(--senal); outline-offset:2px; }
.coto-chip--activo span,
.coto-chip input:checked + span{
  background:var(--senal); border-color:var(--senal); color:#11140F; font-weight:600;
}

.casilla{
  display:flex; align-items:flex-start; gap:.7rem;
  font-family:var(--texto) !important; font-size:.92rem !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--tinta-media) !important; font-weight:400 !important;
  cursor:pointer;
}
.casilla input{ width:18px; height:18px; margin-top:.15rem; accent-color:var(--senal); flex:none; }

.error{ font-family:var(--dato); font-size:.74rem; color:var(--alarma); min-height:1em; }

/* ---------- Resultado del registro ---------- */
.exito{
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:.9rem;
  padding:1.2rem;
  border:1px solid var(--senal);
  border-left-width:3px;
  border-radius:var(--radio);
  background:color-mix(in srgb, var(--senal) 9%, transparent);
  font-size:.93rem;
}
.exito__cabecera{ display:flex; align-items:flex-start; gap:.9rem; }
.exito__check{ width:30px; height:30px; flex:none; margin-top:.15rem; }
.exito__check circle{
  fill:none; stroke:var(--senal); stroke-width:3;
  stroke-dasharray:145; stroke-dashoffset:145;
  animation:cg-check-circulo .5s ease-out forwards;
}
.exito__check path{
  fill:none; stroke:var(--senal); stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:38; stroke-dashoffset:38;
  animation:cg-check-marca .3s ease-out .45s forwards;
}
@keyframes cg-check-circulo{ to{ stroke-dashoffset:0 } }
@keyframes cg-check-marca{ to{ stroke-dashoffset:0 } }

.exito__titulo{ font-family:var(--display); font-size:1.15rem; font-weight:800; color:var(--tinta); }
.exito__texto{ color:var(--senal); font-size:.9rem; margin-top:.2rem; }
.exito__paso{
  border-top:1px solid color-mix(in srgb, var(--senal) 25%, transparent);
  padding-top:.9rem; color:var(--tinta-media);
}
.exito__nota{ font-family:var(--dato); font-size:.74rem; color:var(--tinta-baja); text-align:center; }
.exito a:not(.btn){ text-decoration:underline; }

.btn--whats{
  width:100%;
  background:#25D366; border-color:#25D366; color:#06301A;
}
.btn--whats:hover{ background:#1FBF59; border-color:#1FBF59; color:#06301A; }
.btn__whats-icono{ width:20px; height:20px; flex:none; }

.falla{
  grid-column:1 / -1;
  padding:.95rem 1.1rem;
  border:1px solid var(--alarma);
  border-left-width:3px;
  border-radius:var(--radio);
  background:color-mix(in srgb, var(--alarma) 10%, transparent);
  color:#E88079; font-size:.92rem;
}
.falla a{ text-decoration:underline; }

/* ---------- Pie ---------- */
.pie{
  background:var(--asfalto);
  border-top:1px solid var(--linea-suave);
  padding-top:3rem;
}
.pie__inner{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.4rem;
}
.pie__lema{ color:var(--tinta-baja); font-size:.9rem; max-width:34ch; margin-top:.9rem; }
.pie__col h4{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-baja); margin-bottom:1rem;
}
.pie__lista{ display:grid; gap:.55rem; }
.pie__lista li,.pie__lista a{ color:var(--tinta-media); font-size:.9rem; transition:color var(--transicion); }
.pie__lista a:hover{ color:var(--senal); }
.pie__legal{
  border-top:1px solid var(--linea-suave);
  padding-block:1.3rem;
}
.pie__legal p{ font-family:var(--dato); font-size:.72rem; color:var(--tinta-baja); }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:65;
  width:52px; height:52px;
  display:grid; place-items:center;
  background:#25D366; border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform var(--transicion);
}
.wa-flotante:hover{ transform:translateY(-2px) scale(1.04); }
.wa-flotante svg{ width:27px; height:27px; color:#06301A; }

/* ---------- Revelado al scrollear ---------- */
.revelar{ opacity:0; transform:translateY(16px); transition:opacity .5s ease-out, transform .5s ease-out; }
.revelar.visible{ opacity:1; transform:none; }

/* ---------- Adaptación a pantallas chicas ---------- */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; }
  .plano__marco{ max-width:560px; }
  .rejilla--3{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:1fr; }
  .pie__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  html{ scroll-padding-top:74px; }

  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--asfalto);
    border-bottom:1px solid var(--linea);
    padding:.5rem var(--gutter) 1.1rem;
    display:none;
  }
  .nav__links.abierto{ display:flex; }
  .nav__links a:not(.btn){ padding:.8rem 0; border-bottom:1px solid var(--linea-suave); }
  .nav__links .btn{ margin-top:.9rem; }

  .formulario{ grid-template-columns:1fr; }
  .banda-cta__inner{ flex-direction:column; align-items:flex-start; }
  .paso{ grid-template-columns:3rem 1fr; gap:.9rem; }
  .pie__inner{ grid-template-columns:1fr; gap:2rem; }
  .arancel__renglon{ flex-direction:column; gap:.5rem; align-items:flex-start; }
  .arancel__renglon--equivalencia{ flex-direction:row; align-items:baseline; }
  .tablero{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .revelar{ opacity:1; transform:none; }

  /* Sin movimiento, el plano queda dibujado y con el recorrido terminado. */
  .plano__ruta{ stroke-dashoffset:0; opacity:1; }
  .plano__camion{ offset-distance:97%; opacity:1; }
  .plano__aviso{ opacity:0; }
  .plano__puerta{ fill:var(--senal); }
}