/* ═══════════════════════════════════════════════════════════
   VWT · ALTA MONTAÑA
   La idea es el Aconcagua: todo el recorrido es la aproximación
   al pico más alto de América, y la página termina en él.

   El momento de la página es el recorrido: el mapa deja de ser
   una sección y pasa a ser la pieza principal. Se elige una de
   las seis paradas, el mapa vuela hasta ella y aparece su foto
   con su altura y su hora.

   Tono claro, como las tres páginas de bodegas, pero con la
   fotografía en una escala mayor. Identidad Vito: Poppins,
   bordó como único acento, tempo .9s con su curva, navbar,
   footer, hero y apertura del sistema.
   ═══════════════════════════════════════════════════════════ */

.am{
  --am-pad: clamp(1.4rem, 5vw, 6rem);
  --am-max: calc(1400px * var(--k, 1));
  --am-sec: clamp(3.2rem, calc(7 * var(--1vh)), 5.6rem);
  --am-t: .9s;
  --am-e: cubic-bezier(.22,1,.36,1);
  --am-acc: #AC3749;
  --am-nav: var(--nav-h, 62px);
}
.am-in{ max-width: var(--am-max); margin: 0 auto; padding-inline: var(--am-pad) }

/* ── piezas comunes ── */
.am-h2{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0;
  font-size: calc(99.2px * var(--k, 1));
  font-weight: 700; letter-spacing: -.055em; line-height: .94;
  color: var(--vh-ink, #100C0D);
}
.am-kick{ margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--am-acc) }
.am-lead{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 52ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.65;
  font-weight: 300; color: var(--vh-soft, #3A3436);
}
.am-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.1rem; border-radius: 100px; border: 1px solid transparent;
  background: var(--vh-paper); color: var(--vh-ink); text-decoration: none;
  font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color var(--am-t) var(--am-e), color var(--am-t) var(--am-e),
              border-color var(--am-t) var(--am-e), transform var(--am-t) var(--am-e);
}
.am-btn:hover{ background: var(--am-acc); color: #fff; transform: translateY(-2px) }
.am-btn-ghost{ background: transparent; border-color: rgba(255,255,255,.45); color: #fff }
.am-btn-ghost:hover{ background: rgba(255,255,255,.12); border-color: #fff; color: #fff }

/* ═══════════════════════════════════════════════════════════
   QUÉ INCLUYE · una sola modalidad
   ═══════════════════════════════════════════════════════════ */
.am-inc{ padding: var(--am-sec) 0; background: var(--vh-smoke, #F6F3F3) }
.am-inc-grid{
  display: grid; grid-template-columns: minmax(0,.52fr) minmax(0,.48fr);
  gap: calc(80.0px * var(--k, 1)); align-items: start;
}
.am-inc-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vh-line, rgba(16,12,13,.14)) }
.am-inc-list li{
  position: relative; padding: clamp(.9rem,1.8vw,1.2rem) 0 clamp(.9rem,1.8vw,1.2rem) 1.9rem;
  border-bottom: 1px solid var(--vh-line, rgba(16,12,13,.14));
  font-size: calc(17.9px * var(--k, 1)); color: var(--vh-ink, #100C0D);
}
.am-inc-list li::before{
  content: "\2713"; position: absolute; left: 0; top: calc(19.2px * var(--k, 1));
  color: var(--am-acc); font-weight: 700;
}
.am-aviso{
  margin: clamp(2.4rem,5vw,3.6rem) 0 0; max-width: 78ch;
  padding-top: calc(25.6px * var(--k, 1));
  border-top: 1px solid var(--vh-line, rgba(16,12,13,.14));
  font-size: .92rem; line-height: 1.6; color: var(--vh-soft, #3A3436);
}
.am-aviso b{ color: var(--vh-ink, #100C0D); font-weight: 700 }

/* ═══════════════════════════════════════════════════════════
   LA CIMA · el cierre
   La página termina donde termina el recorrido: el Aconcagua a
   pantalla completa, con su altura y una sola frase.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: calc(1024px * var(--k, 1))){
  .am-inc-grid{ grid-template-columns: 1fr; gap: 2rem }
}
@media (prefers-reduced-motion: reduce){
  .am-d.is-on{ animation: none }
}

/* el encabezado del bloque de la modalidad */
.am-inc-hd{ max-width: 46ch }

/* ═══════════════════════════════════════════════════════════
   LAS SEIS PARADAS · filas a lo ancho
   Foto de un lado, datos del otro, alternando el lado en cada
   parada. Las fotos son grandes: es la sección más larga de la
   página y la que cuenta el ascenso. Cada fila entra al llegar
   a pantalla, una por una.
   ═══════════════════════════════════════════════════════════ */
.am-paradas-hd{ max-width: 64ch; margin-bottom: calc(64.0px * var(--k, 1))}
.am-paradas-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: calc(80.0px * var(--k, 1))}
.am-parada{
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: calc(64.0px * var(--k, 1)); align-items: center;
}
.am-parada:nth-child(even) .am-parada-fig{ order: 2 }
.am-parada-fig{ margin: 0; border-radius: 20px; overflow: hidden; background: #0B0708 }
.am-parada-fig img{
  width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 1.3s var(--am-e);
}
.am-parada:hover .am-parada-fig img{ transform: scale(1.06) }
.am-parada-n{ margin: 0; font-size: .82rem; font-weight: 600; color: var(--am-acc) }
.am-parada-tx h3{
  margin: .6rem 0 0; font-size: calc(48.0px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: 1.02; color: var(--vh-ink, #100C0D);
}
.am-parada-alt{
  margin: clamp(.7rem,1.4vw,1rem) 0 0; display: flex; align-items: baseline; gap: .35rem;
  font-variant-numeric: tabular-nums;
}
.am-parada-alt b{
  font-size: calc(38.4px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--am-acc);
}
.am-parada-alt i{ font-style: normal; font-size: .8rem; font-weight: 600; color: var(--vh-mut, #7F6E73) }
.am-parada-d{
  margin: clamp(.9rem,1.8vw,1.2rem) 0 0; max-width: 40ch;
  font-size: calc(18.2px * var(--k, 1)); line-height: 1.6; color: var(--vh-soft, #3A3436);
}

/* ═══════════════════════════════════════════════════════════
   EL MAPA · cierra el recorrido
   Los seis botones arriba y el mapa a lo ancho debajo. Cada
   parada tiene su pin con el nombre y la altura; el de la
   parada elegida se enciende.
   ═══════════════════════════════════════════════════════════ */
.am-mapa-sec{ padding: var(--am-sec) 0; background: var(--vh-smoke, #F6F3F3) }
.am-mapa-hd{ max-width: 62ch; margin-bottom: calc(48.0px * var(--k, 1))}
.am-chips{
  list-style: none; margin: 0 0 clamp(1.2rem,2.4vw,1.8rem); padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.am-chip{
  appearance: none; cursor: pointer; text-align: left;
  padding: .7rem 1.1rem; border-radius: 100px;
  border: 1px solid var(--vh-line-2, rgba(16,12,13,.22)); background: transparent;
  font: inherit; color: var(--vh-ink, #100C0D);
  transition: background-color var(--am-t) var(--am-e), border-color var(--am-t) var(--am-e), color var(--am-t) var(--am-e);
}
.am-chip b{ font-size: .9rem; font-weight: 600; letter-spacing: -.01em }
.am-chip i{ font-style: normal; margin-left: .5rem; font-size: .78rem; color: var(--vh-mut, #7F6E73);
  font-variant-numeric: tabular-nums; transition: color var(--am-t) var(--am-e) }
.am-chip:hover{ border-color: var(--vh-ink, #100C0D) }
.am-chip.is-on{ background: var(--am-acc); border-color: var(--am-acc); color: #fff }
.am-chip.is-on i{ color: rgba(255,255,255,.78) }
.am-chip:focus-visible{ outline: 3px solid var(--am-acc); outline-offset: 3px }
.am-mapa{ border-radius: 20px; overflow: hidden; border: 1px solid var(--vh-line, rgba(16,12,13,.12)) }
.am-mapa #map{ width: 100%; height: clamp(420px, calc(68 * var(--1vh)), 760px); background: #0B0708 }
.am-mapa-n{ margin: .9rem 0 0; font-size: .78rem; color: var(--vh-mut, #7F6E73) }

/* el pin de cada parada */
.am-pin{
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.am-pin span{
  display: flex; align-items: baseline; gap: .4rem;
  padding: .35rem .6rem; border-radius: 8px;
  background: rgba(11,7,8,.82); color: #fff; white-space: nowrap;
  transition: background-color .5s var(--am-e);
}
.am-pin b{ font-size: .76rem; font-weight: 700 }
.am-pin em{ font-style: normal; font-size: .7rem; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums }
.am-pin i{
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--vh-paper); box-shadow: 0 0 0 3px rgba(8,5,6,.5);
  transition: background-color .5s var(--am-e), transform .5s var(--am-e), box-shadow .5s var(--am-e);
}
.am-pin.is-on i{ background: var(--am-acc); transform: scale(1.3); box-shadow: 0 0 0 5px rgba(172,55,73,.35) }
.am-pin.is-on span{ background: var(--am-acc) }
.am-pin.is-on em{ color: rgba(255,255,255,.8) }

/* ═══════════════════════════════════════════════════════════
   EL CERRO · relato
   ═══════════════════════════════════════════════════════════ */
.am-cerro{ padding: var(--am-sec) 0; background: var(--vh-paper, #fff) }

/* ═══════════════════════════════════════════════════════════
   QUÉ LLEVAR · sobre negro
   ═══════════════════════════════════════════════════════════ */
.am-llevar{ padding: var(--am-sec) 0; background: #0B0708; color: #fff }
.am-llevar-hd{ max-width: 60ch; margin-bottom: calc(54.4px * var(--k, 1))}
.am-llevar-hd .am-kick{ color: rgba(255,255,255,.72) }
.am-llevar-hd .am-h2{ color: #fff }
.am-llevar-hd .am-lead{ color: rgba(255,255,255,.78) }
.am-llevar-lista{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0 clamp(1.6rem,3vw,3rem);
  border-top: 1px solid rgba(255,255,255,.2);
}
.am-llevar-lista li{
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline;
  padding: clamp(1.2rem,2.4vw,1.6rem) 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.am-llevar-n{ font-size: .78rem; font-weight: 700; color: var(--am-acc) }
.am-llevar-tx b{ display: block; font-size: calc(18.9px * var(--k, 1)); font-weight: 700; letter-spacing: -.025em; color: #fff }
.am-llevar-tx i{ display: block; margin-top: .35rem; font-style: normal; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.76) }

/* ═══════════════════════════════════════════════════════════
   EL AÑO · una línea con las cuatro estaciones
   ═══════════════════════════════════════════════════════════ */
.am-anio{ padding: var(--am-sec) 0; background: var(--vh-paper, #fff) }
.am-anio-hd{ max-width: 60ch; margin-bottom: calc(54.4px * var(--k, 1))}
.am-anio-linea{
  list-style: none; margin: 0; padding: clamp(1.4rem,2.6vw,2rem) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: calc(41.6px * var(--k, 1));
  border-top: 1px solid var(--vh-line, rgba(16,12,13,.16));
}
.am-anio-linea li{ position: relative }
.am-anio-linea li::before{
  content: ""; position: absolute; left: 0; top: calc(clamp(1.4rem,2.6vw,2rem) * -1 - 4px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--am-acc);
}
.am-anio-e{ display: block; font-size: calc(25.6px * var(--k, 1)); font-weight: 700; letter-spacing: -.035em; color: var(--vh-ink, #100C0D) }
.am-anio-m{ display: block; margin-top: .2rem; font-size: .8rem; font-weight: 600; color: var(--am-acc) }
.am-anio-d{ display: block; margin-top: .7rem; font-size: .94rem; line-height: 1.55; color: var(--vh-soft, #3A3436) }

/* ═══════════════════════════════════════════════════════════
   PREGUNTAS · acordeón
   ═══════════════════════════════════════════════════════════ */
.am-faq{ padding: var(--am-sec) 0; background: var(--vh-smoke, #F6F3F3) }
.am-faq-hd{ max-width: 60ch; margin-bottom: calc(54.4px * var(--k, 1))}
.am-faq-lista{ border-top: 1px solid var(--vh-line, rgba(16,12,13,.16)) }
.am-q{ border-bottom: 1px solid var(--vh-line, rgba(16,12,13,.16)) }
.am-q summary::-webkit-details-marker{ display: none }
.am-q summary:hover{ color: var(--am-acc) }
.am-q-r p{
  margin: 0; max-width: 68ch;
  font-size: calc(17.6px * var(--k, 1)); line-height: 1.65; color: var(--vh-soft, #3A3436);
}

/* ═══════════════════════════════════════════════════════════
   LA CIMA · el cierre, en el color de la marca
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: calc(1024px * var(--k, 1))){
  .am-parada, .am-parada:nth-child(even) .am-parada-fig{ grid-template-columns: 1fr; order: 0 }
  .am-parada{ gap: 1.2rem }
  .am-llevar-lista{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .am-anio-linea{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.8rem }
  .am-inc-grid{ grid-template-columns: 1fr; gap: 2rem }
}
@media (max-width: 600px){
  .am-llevar-lista, .am-anio-linea{ grid-template-columns: 1fr }
  .am-anio-linea li::before{ display: none }
  .am-mapa #map{ height: calc(52 * var(--1vh)) }
  .am-parada-fig img{ aspect-ratio: 16/10 }
}
@media (prefers-reduced-motion: reduce){
  .am-parada-fig img, .am-chip, .am-pin i, .am-pin span, }

/* ── Los títulos usan el ancho de la página ──
   Los encabezados estaban limitados a 60 caracteres, así que
   el titular se partía en líneas cortas y quedaba apretado y
   alto. Ahora el título respira sobre el eje completo y solo
   el texto de apoyo conserva un ancho de lectura cómodo. */
.am-paradas-hd,
.am-mapa-hd,
.am-llevar-hd,
.am-anio-hd,
.am-faq-hd,
.am-inc-hd{ max-width: none }
.am-h2{ max-width: 22ch }
.am-paradas-hd .am-lead,
.am-mapa-hd .am-lead,
.am-llevar-hd .am-lead,
.am-inc-hd .am-lead{ max-width: 52ch }

/* ── Los encabezados vuelven al eje de la página ──
   Esas clases viven en el mismo elemento que el contenedor, así
   que ponerles "sin ancho" anulaba el eje y el título arrancaba
   pegado al borde. Ahora respetan el ancho y el margen del
   sitio, igual que en Luján, Uco y Maipú. */
.am-paradas-hd,
.am-mapa-hd,
.am-llevar-hd,
.am-anio-hd,
.am-faq-hd{
  max-width: var(--am-max);
  margin-inline: auto;
  padding-inline: var(--am-pad);
}
.am-inc-hd{ max-width: none; padding-inline: 0 }

/* ═══════════════════════════════════════════════════════════
   EL CIERRE
   El número suelto arriba del título no aportaba nada: la cifra
   ya está en el recorrido. Ahora cierra con la fotografía del
   Aconcagua a sangre, el título en la escala del sitio y una
   sola frase. Ocupa una pantalla, como el resto.
   ═══════════════════════════════════════════════════════════ */
.am-cima{
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, calc(86 * var(--1vh)), 900px);
  display: flex; align-items: flex-end;
  padding: var(--am-sec) 0 calc(var(--am-sec) * 1.15);
  background: #0B0708; color: #fff;
}
.am-cima-fig{ position: absolute; inset: 0; z-index: 0; margin: 0 }
.am-cima-fig img{ width: 100%; height: 100%; object-fit: cover; object-position: center 45% }
.am-cima-veil{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,5,6,.14) 0%, rgba(8,5,6,.06) 40%, rgba(8,5,6,.84) 100%);
}
.am-cima-in{ position: relative; z-index: 2; width: 100% }
.am-kick-light{ color: rgba(255,255,255,.78) }
.am-cima-h{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0; max-width: 18ch;
  font-size: calc(99.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.055em; line-height: .94; color: #fff;
}
.am-cima-p{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 clamp(1.8rem,3.4vw,2.6rem); max-width: 46ch;
  font-size: calc(20.5px * var(--k, 1)); line-height: 1.6; color: rgba(255,255,255,.86);
}
.am-cima-cta{ display: flex; flex-wrap: wrap; gap: .7rem }
.am-cima-n{ margin: clamp(1rem,2vw,1.4rem) 0 0; font-size: .82rem; color: rgba(255,255,255,.66) }
@media (max-width: 600px){ .am-cima-cta .am-btn{ width: 100% } }

/* ── Las preguntas, sobre blanco ── */
.am-faq{ background: var(--vh-paper, #fff) }

/* ── Todas las secciones al mismo ancho ──
   El contenedor sumaba su propio margen lateral dentro de los
   1400 px, así que el contenido quedaba unos 200 px más angosto
   que en la sección de blog, que usa el eje completo. Ahora el
   margen lo pone la sección, como en el resto del sitio, y el
   contenedor solo centra. */
.am-in{
  max-width: var(--am-max);
  margin-inline: auto;
  padding-inline: 0;
}
.am-mapa-sec,
.am-cerro,
.am-llevar,
.am-anio,
.am-inc,
.am-faq,
.am-cima,
.am-paradas-hd,
.am-mapa-hd,
.am-llevar-hd,
.am-anio-hd,
.am-faq-hd{ padding-inline: 0 }

/* ── Los botones del cierre, legibles sobre cualquier foto ──
   El secundario era transparente con borde blanco: sobre una
   imagen clara desaparecía. Ahora los dos tienen fondo propio
   y el velo de la foto se refuerza detrás de ellos, así el
   bloque funciona con cualquier fotografía. */
.am-cima-veil{
  background: linear-gradient(180deg, rgba(8,5,6,.18) 0%, rgba(8,5,6,.28) 42%, rgba(8,5,6,.88) 100%);
}
.am-btn-white{ background: var(--vh-paper); color: var(--vh-ink); border-color: #fff }
.am-btn-white:hover{ background: var(--am-acc); color: #fff; border-color: var(--am-acc) }
.am-cima .am-btn-ghost{
  background: rgba(11,7,8,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.7); color: #fff;
}
.am-cima .am-btn-ghost:hover{
  background: rgba(11,7,8,.78); border-color: #fff; color: #fff;
}
.am-cima-h, .am-cima-p, .am-cima-n{ text-shadow: 0 1px 20px rgba(8,5,6,.45) }

/* ── El botón principal del cierre ──
   Se veía como un óvalo blanco sin texto. Se fija el color con
   el peso suficiente para que nada lo pise, y se lo pasa al
   bordó de la marca: sobre una foto clara se lee mejor que el
   blanco, y es el mismo tratamiento del resto del sitio. */
.am-cima .am-cima-cta .am-btn-white{
  background: var(--am-acc);
  border-color: var(--am-acc);
  color: #fff;
}
.am-cima .am-cima-cta .am-btn-white:hover{
  background: #6B1D2A; border-color: #6B1D2A; color: #fff;
}

/* ── El cerro: encabezado como el de las demás secciones ──
   La volanta y el título vivían dentro de la columna de texto;
   ahora encabezan la sección a lo ancho, con el mismo margen
   inferior que el resto. El primer párrafo pierde el margen
   que lo separaba del título. */
.am-cerro-hd{ margin-bottom: calc(57.6px * var(--k, 1))}


/* ═══════════════════════════════════════════════════════════
   EL CERRO · texto y fotografía
   Escrito de una sola vez, sin capas encima.
   El texto corre seguido, con la separación normal de párrafo,
   y la fotografía ajusta su alto al del texto: ninguno de los
   dos estira al otro.
   Tipografía: cuerpo mayor y peso liviano, que es como Poppins
   se lee mejor en párrafo largo. La primera línea entra un
   punto más presente y los nombres propios van en peso medio,
   para dar relieve sin salir de la familia.
   ═══════════════════════════════════════════════════════════ */
.am-cerro-grid{
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: calc(80.0px * var(--k, 1)); align-items: stretch;
}
.am-cerro-tx{ display: block }
.am-cerro-tx p{
  margin: 0; max-width: 44ch;
  font-size: calc(20.8px * var(--k, 1));
  font-weight: 300; line-height: 1.75; letter-spacing: .002em;
  color: var(--vh-soft, #3A3436);
}
.am-cerro-tx em{ font-style: normal; font-weight: 500; color: var(--vh-ink, #100C0D) }
.am-cerro-fig{ margin: 0; display: flex; flex-direction: column }
.am-cerro-fig img{
  width: 100%; flex: 1 1 auto; min-height: calc(480.0px * var(--k, 1));
  object-fit: cover; display: block; border-radius: 20px; background: #0B0708;
}
.am-cerro-fig figcaption{ margin-top: .8rem; font-size: .78rem; color: var(--vh-mut, #7F6E73) }
@media (max-width: calc(1024px * var(--k, 1))){
  .am-cerro-grid{ grid-template-columns: 1fr; gap: 1.8rem; align-items: start }
  .am-cerro-fig img{ min-height: 0; aspect-ratio: 16/10 }
}

/* ── El cerro · un solo texto ──
   Antes la primera parte tenía otro cuerpo y otro color, así que
   parecían dos textos distintos. Ahora es un único párrafo, con
   un solo tratamiento, y el relieve lo dan solo los nombres. */
.am-cerro-tx p{
  max-width: 46ch;
  font-size: calc(21.4px * var(--k, 1));
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .002em;
  color: var(--vh-soft, #3A3436);
}

/* ── La ruta y el recorrido, en un solo bloque ──
   Entre las dos secciones se sumaban dos rellenos verticales y
   el hueco quedaba enorme. Ahora comparten sección y las separa
   un filete, igual que en Maipú: la apertura arriba y el
   recorrido debajo, dentro de la misma pieza. */
.am-uno{ padding: var(--am-sec) var(--am-pad); background: var(--vh-paper, #fff) }
.am-uno .vt-open{ padding: 0 }
.am-uno-paradas{
  max-width: var(--am-max); margin-inline: auto;
  margin-top: calc(88.0px * var(--k, 1));
  padding-top: calc(57.6px * var(--k, 1));
  border-top: 1px solid var(--vh-line, rgba(16,12,13,.14));
}
.am-uno-paradas .am-in{ padding-inline: 0 }
.am-paradas-hd{ margin-bottom: calc(64.0px * var(--k, 1))}

/* ── El acordeón, con el aspecto del de la home ──
   Mismo indicador circular con el más que gira a menos y se
   llena de bordó, y la misma apertura suave de la respuesta.
   No se cambia el fondo de la sección ni su estructura. */
.am-q summary{
  display: flex; align-items: center; gap: 1.2rem; cursor: pointer; list-style: none;
  padding: clamp(1.1rem,2vw,1.5rem) 0;
  font-size: calc(19.5px * var(--k, 1)); font-weight: 600; letter-spacing: -.025em;
  color: var(--vh-ink);
  transition: color var(--am-t) var(--am-e);
}
.am-q summary span{ flex: 1 1 auto }
.am-q summary i{
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--vh-line-2);
  transition: background var(--am-t) var(--am-e), border-color var(--am-t) var(--am-e), transform var(--am-t) var(--am-e);
}
.am-q summary i::before,
.am-q summary i::after{
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--vh-ink);
  transform: translate(-50%,-50%);
  transition: opacity var(--am-t) var(--am-e), background var(--am-t) var(--am-e);
}
.am-q summary i::before{ width: 9px; height: 1.5px }
.am-q summary i::after{ width: 1.5px; height: 9px }
.am-q[open] summary{ color: var(--vh-acc) }
.am-q[open] summary i{ background: var(--vh-acc); border-color: var(--vh-acc); transform: rotate(90deg) }
.am-q[open] summary i::before{ background: var(--vh-paper) }
.am-q[open] summary i::after{ opacity: 0 }
.am-q-r{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--am-t) var(--am-e) }
.am-q[open] .am-q-r{ grid-template-rows: 1fr }
.am-q-r > div{ overflow: hidden }
@media (max-width: 900px){ .am-q-r{ transition: none } }

/* modo oscuro: las variables del sistema ya invierten papel, humo y tinta */