/* JM Rutas v3 · contacto.html · piezas únicas (solo tokens de base.css)
   Gramáticas: formulario como apertura (noche + foto con velo local) · canales en
   líneas tipográficas + horario · mapa ilustrativo · pasos numerados (el único
   bloque numerado de la página). */

.antetitulo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 680; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
.ct-pagina .tramo { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.ct-pagina h2.t-2 { max-width: 18ch; }
.ct-pagina .punto { color: var(--cobre); }
.ct-cab { display: grid; gap: var(--e-s); margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 60rem; }
@media (min-width: 1024px) { .ct-cab--partida { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-2xl); align-items: end; max-width: none; } .ct-cab--partida .antetitulo { grid-column: 1 / -1; } }

/* ---------- Apertura: el formulario es el hero ---------- */
.ct-hero { position: relative; isolation: isolate; overflow: clip; min-height: 100svh; background: var(--noche-950); color: var(--cal); padding-block: calc(var(--cab-alto) + clamp(1.5rem, 4vw, 3.5rem)) clamp(2.5rem, 5vw, 4.5rem); }
.ct-hero__foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.ct-hero__foto img { object-position: 60% 50%; }
.ct-hero__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(10 22 40 / .62), rgb(10 22 40 / .78) 35%, rgb(10 22 40 / .92) 70%, var(--noche-950)); }
@media (min-width: 1024px) { .ct-hero__velo { background: linear-gradient(90deg, rgb(10 22 40 / .9) 0%, rgb(10 22 40 / .72) 40%, rgb(10 22 40 / .45) 70%, rgb(10 22 40 / .6) 100%), linear-gradient(to top, rgb(10 22 40 / .7), rgb(10 22 40 / 0) 40%); } }
.ct-hero__rejilla { display: grid; gap: var(--e-xl) var(--medianil); align-items: start; }
.ct-hero__rejilla > * { min-width: 0; }
@media (min-width: 1024px) { .ct-hero__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-3xl); } .ct-hero__intro { position: sticky; top: calc(var(--cab-alto) + var(--e-l)); } }
.ct-hero__intro { display: grid; gap: var(--e-m); }
.ct-hero__titulo { font-size: clamp(2.9rem, 5.4vw + .4rem, 6rem); font-weight: 840; font-stretch: 110%; line-height: .88; letter-spacing: -.04em; max-width: 10ch; }
.ct-hero__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--noche-100); max-width: 36ch; }
.ct-hero__lugar { color: var(--noche-300); }
.publicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgb(247 244 238 / .22); }
.publico { position: relative; display: grid; gap: .1rem; align-content: center; min-height: 3.6rem; padding: .7rem 1.75rem .7rem 0; border-bottom: 1px solid rgb(247 244 238 / .22); text-align: left; color: var(--noche-100); transition: color var(--dur-corta) var(--ease-suave); }
.publico:last-child { grid-column: 1 / -1; }
.publico::after { display: none; content: "→"; position: absolute; right: .25rem; top: 50%; translate: -6px -50%; font-family: var(--f-display); font-weight: 700; opacity: 0; transition: opacity var(--dur-corta), translate var(--dur-corta) var(--ease-suave); color: var(--cobre-claro); }
.publico__t { font-family: var(--f-display); font-size: clamp(1.1rem, 1vw + .85rem, 1.6rem); font-weight: 740; font-stretch: 96%; line-height: 1.05; }
.publico__d { font-size: var(--t-nota); color: var(--noche-300); }
.publico:hover { color: var(--cal); }
.publico[aria-selected="true"] { color: var(--cal); }
.publico[aria-selected="true"] .publico__t { text-decoration: underline; text-decoration-color: var(--cobre-claro); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.publico[aria-selected="true"]::after { opacity: 1; translate: 0 -50%; }
.publico--rt[aria-selected="true"] .publico__t { text-decoration-color: var(--yareta-claro); }
.publico--rt[aria-selected="true"]::after { color: var(--yareta-claro); }
@media (min-width: 1024px) { .publicos { grid-template-columns: 1fr; } .publico:last-child { grid-column: auto; } .publico { min-height: 4.1rem; } .publico::after { display: block; } }
.contacto__forms .pestanas__panel { padding-top: 0; }
.contacto__forms .pestanas__panel:focus-visible { outline-offset: 6px; }
.contacto__forms .pasos-form { box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6); border-radius: var(--r-s); }
.pasos-form .campo__ayuda { display: block; }
.pasos-form__aviso a { color: inherit; }
.form-cab { display: grid; gap: var(--e-xs); }
.form-cab__t { font-size: clamp(1.7rem, 1.6vw + 1rem, 2.4rem); font-weight: 760; font-stretch: 100%; letter-spacing: -.02em; line-height: 1; }
.form-cab__t em { font-style: normal; color: var(--acento-tinta); }
.form-cab__d { color: var(--tinta-2); font-size: var(--t-chico); max-width: 52ch; }
.form-cab .pasos-form__estado { margin-top: var(--e-xs); }
.ct-marca-rt { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-weight: 740; font-stretch: 92%; color: var(--yareta-tinta); }
.ct-marca-rt::before { content: ""; width: .75rem; height: .75rem; border-radius: 50% 50% 50% 0; background: var(--yareta); rotate: -45deg; }
.boton--brote { --b-bg: var(--yareta-tinta); --b-tx: var(--cal-0); --b-bd: var(--yareta-tinta); }
.boton--brote:hover { --b-bg: #354A1F; --b-bd: #354A1F; }
#form-talento .pasos-form__ruta::after { background: var(--yareta); }
.aviso-menor { padding: .85rem 1rem; border: 1.5px solid var(--noche); border-radius: var(--r-s); background: color-mix(in srgb, var(--senal) 30%, var(--superficie)); color: var(--tinta); font-size: var(--t-chico); font-weight: 650; }

/* ---------- Canales y horario ---------- */
.canales { display: grid; border-top: 1.5px solid var(--tinta); }
.canales li { display: grid; gap: .3rem var(--medianil); padding-block: var(--e-m); border-bottom: 1px solid var(--borde); }
@media (min-width: 900px) { .canales li { grid-template-columns: 10rem minmax(0, 5fr) minmax(0, 4fr); align-items: baseline; } }
.canales__t { font-family: var(--f-display); font-size: .78rem; font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.canales__dato { justify-self: start; font-family: var(--f-display); font-size: clamp(1.5rem, 1.8vw + 1rem, 2.6rem); font-weight: 760; font-stretch: 96%; line-height: 1.05; letter-spacing: -.015em; color: var(--tinta); overflow-wrap: anywhere; }
a.canales__dato { min-height: 44px; display: inline-flex; align-items: center; text-decoration-thickness: 2px; text-decoration-color: var(--cobre); text-underline-offset: .18em; }
.canales__dato--pend { color: var(--tinta-3); }
.canales__nota { color: var(--tinta-2); font-size: var(--t-chico); }
.ct-provisional { margin-top: var(--e-m); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.horario { display: grid; gap: var(--e-l) var(--medianil); margin-top: clamp(3rem, 6vw, 5rem); }
.horario > div { display: grid; gap: var(--e-s); align-content: start; }
@media (min-width: 1024px) { .horario { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-2xl); } }
.horario__ahora { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; padding-block: .35rem; border-bottom: 1.5px solid var(--tinta); font-family: var(--f-display); font-weight: 700; font-stretch: 94%; }
.horario__ahora i { width: .55rem; height: .55rem; border-radius: 1px; background: var(--piedra-600); }
.horario__ahora.is-abierto i { background: var(--ok); }
.horario__tabla { border-top: 1.5px solid var(--tinta); }
.horario__tabla div { display: flex; justify-content: space-between; gap: var(--e-m); flex-wrap: wrap; padding-block: var(--e-s); border-bottom: 1px solid var(--borde); }
.horario__tabla dt { font-family: var(--f-display); font-weight: 700; font-stretch: 96%; }
.horario__tabla dd { font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.horario__tabla .is-hoy dt::after { content: "Hoy"; margin-left: .6rem; padding: .2em .5em; border: 1px solid currentColor; border-radius: var(--r-xs); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; vertical-align: .15em; }

/* ---------- Base: mapa ilustrativo ---------- */
.ct-base__rejilla { display: grid; gap: var(--e-xl) var(--medianil); align-items: center; }
@media (min-width: 1024px) { .ct-base__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-2xl); } }
.ct-base__texto { display: grid; gap: var(--e-m); }
.base__mapa { display: grid; gap: var(--e-s); }
.base__mapa svg { width: 100%; height: auto; border: 1px solid var(--borde); border-radius: var(--r-xs); background: var(--cal); }
.base__mar { fill: color-mix(in srgb, var(--cielo) 12%, var(--cal)); }
.base__costa { fill: none; stroke: var(--noche-500); stroke-width: 1.5; }
.base__via { fill: none; stroke-linecap: round; }
.base__via--hoy { stroke: var(--noche); stroke-width: 4; }
.base__via--prox { stroke: var(--noche-500); stroke-width: 2.5; stroke-dasharray: .02 .015; }
.base__pto { fill: var(--noche-500); }
.base__pin { fill: var(--cobre); stroke: var(--cal-0); stroke-width: 3; }
.base__t { font-family: var(--f-display); font-size: 13px; font-weight: 650; fill: var(--noche-600); }
.base__t--mar { font-weight: 500; fill: var(--noche-500); }
.base__t--via { font-weight: 740; fill: var(--noche); }
.base__t--sub { font-size: 11.5px; fill: var(--piedra-600); }
.base__t--base { font-size: 15px; font-weight: 780; fill: var(--noche); }
.base__leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; font-size: var(--t-nota); color: var(--tinta-3); }
.base__leyenda span { display: inline-flex; align-items: center; gap: .5rem; }
.base__leyenda i { width: 1.5rem; height: 3px; background: var(--noche); }
.base__leyenda i.prox { background: repeating-linear-gradient(90deg, var(--noche-500) 0 5px, transparent 5px 9px); }
@media (prefers-reduced-motion: no-preference) {
  .js .base__mapa .base__via--hoy { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .base__mapa.is-visible .base__via--hoy { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-salida) .2s; }
}

/* ---------- Qué pasa después ---------- */
.ct-despues__rejilla { display: grid; gap: var(--e-xl) var(--medianil); }
@media (min-width: 1024px) { .ct-despues__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--e-2xl); } .ct-fraude { grid-column: 2; } }
.despues { display: grid; gap: var(--e-m) var(--medianil); counter-reset: dp; }
@media (min-width: 760px) { .despues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.despues li { counter-increment: dp; display: grid; gap: .35rem; align-content: start; padding-top: var(--e-s); border-top: 1.5px solid var(--tinta); }
.despues li::before { content: counter(dp); font-family: var(--f-display); font-size: clamp(2.4rem, 3vw, 3.2rem); font-weight: 800; font-stretch: 70%; line-height: .9; color: var(--arcilla-tinta); }
.despues b { font-family: var(--f-display); font-size: var(--t-4); font-stretch: 94%; }
.despues span { color: var(--tinta-2); font-size: var(--t-chico); }
.ct-fraude { padding-top: var(--e-s); border-top: 1px solid var(--borde); color: var(--tinta-2); max-width: 60ch; }
.ct-fraude b { color: var(--tinta); }
.contacto__forms .pasos-form { --error: var(--grana); --ok: var(--yareta-tinta); }