/* CSS propio de contacto.html (sitio «origen»). Lo edita solo quien porta esa página: docs/sitio-2026/09-origen.md, «Receta para portar una página». */
/* Portado del prototipo v3 (red-de-metro-v3/css/contacto.css). Carga después de metro.css y
paginas.css y no redefine sus componentes: las etapas del cierre (metro.css), las pestañas con su
variante vertical (paginas.css §7) y el panel navy .proximo (§11) se usan como están; aquí va la
composición, los datos de contacto y las tres preguntas de cada línea como un mapa de tira en su
color. La tira de avance por lectura es de paginas.js §6.
Movimiento: solo var(--ease); solo transform y opacity. Movimiento reducido: estado final. */
/* ---------- Apertura: titular a 7 de 12, etapas a la derecha, datos de contacto debajo ---------- */
.contacto__apertura { padding-block: clamp(28px, 3.6vw, 56px) clamp(56px, 6vw, 96px); }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.contacto__titulo { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 4rem); max-width: 14em; }
.contacto__bajada { margin-top: 22px; }
.contacto__acciones { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 30px; }
@media (min-width: 1000px) {
.contacto__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 0; align-items: start; }
.contacto__texto { grid-column: 1 / span 7; grid-row: 1; align-self: center; }
.contacto__etapas { grid-column: 8 / -1; grid-row: 1; }
.datos-contacto { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(48px, 5vw, 80px); }
}
@media (min-width: 1200px) {
.contacto__etapas { grid-column: 9 / -1; }
}
/* ---------- Datos de contacto: una franja bajo la apertura, abierta por un filete ---------- */
.datos-contacto { display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--borde); }
.datos-contacto__titulo { font: 700 clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem)/1.25 var(--f-display); font-stretch: 104%; letter-spacing: -0.01em; }
.datos-contacto__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.datos-contacto__lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 44px; padding-block: 10px; color: var(--tinta-2); font-size: 1rem; line-height: 1.5; }
.datos-contacto__lista .icono { width: 22px; height: 22px; margin-top: 1px; color: var(--tinta); }
.datos-contacto__lista a { color: var(--tinta); font-weight: 600; }
@media (min-width: 600px) { .datos-contacto__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); } }
@media (min-width: 1000px) {
.datos-contacto { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.datos-contacto__titulo { grid-column: 1 / span 3; padding-top: 10px; }
.datos-contacto__lista { grid-column: 4 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
}
/* ---------- Lo que te vamos a preguntar ---------- */
.contacto__cabeza { margin-bottom: clamp(28px, 3.4vw, 48px); }
/* El panel: la línea con su actor y su estado, y sus tres preguntas */
.linea-preguntas {
display: grid; gap: 30px; padding: clamp(24px, 3vw, 48px);
border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra);
}
.linea-preguntas__cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--borde); }
.linea-preguntas__cabeza h3 { font: 700 clamp(1.3rem, 1.12rem + 0.55vw, 1.6rem)/1.2 var(--f-display); font-stretch: 104%; letter-spacing: -0.012em; }
.linea-preguntas__actor { margin-top: 2px; color: var(--tinta-2); font-size: 0.98rem; line-height: 1.45; }
.linea-preguntas__cabeza .estado { grid-column: 2; }
@media (min-width: 1000px) {
.linea-preguntas__cabeza { grid-template-columns: auto minmax(0, 1fr) auto; }
.linea-preguntas__cabeza .estado { grid-column: 3; justify-self: end; text-align: right; }
}
/* Las tres preguntas como mapa de tira vertical en el color de la línea; la última es la terminal.
Sense, la capa de abajo, con su trazo discontinuo (16 px de color y 11 de hueco). */
.linea-preguntas__lista { position: relative; display: grid; }
.linea-preguntas__lista::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 8px; border-radius: 4px; background: var(--l); }
.linea-preguntas--capa .linea-preguntas__lista::before { border-radius: 0; background: repeating-linear-gradient(to bottom, var(--l) 0 16px, transparent 16px 27px); }
.linea-preguntas__lista li {
position: relative; padding: 0 0 30px 58px; max-width: 46rem;
font: 600 clamp(1.12rem, 1rem + 0.45vw, 1.42rem)/1.36 var(--f-display); font-stretch: 102%; letter-spacing: -0.005em; color: var(--tinta);
}
.linea-preguntas__lista li:last-child { padding-bottom: 2px; }
.linea-preguntas__lista li::before {
content: ""; position: absolute; left: 2px; top: 1px; width: 26px; height: 26px; border-radius: 50%;
background: var(--superficie); box-shadow: inset 0 0 0 4px var(--l);
}
.linea-preguntas__lista li:last-child::before { left: -2px; top: -3px; width: 34px; height: 34px; box-shadow: none; background: radial-gradient(circle, var(--l) 0 6px, var(--superficie) 6.5px 10.5px, var(--l) 11px); }
.linea-preguntas__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 4px; }
/* La acción de cada panel en el color de su línea, como en su página (relleno + tinta AA) */
.linea-preguntas .boton { --b-bg: var(--lb); --b-tinta: var(--lt); }
.linea-preguntas .boton:hover { --b-bg: color-mix(in srgb, var(--lb) 84%, #10153a); }
html[data-theme="dark"] .linea-preguntas .boton:hover { --b-bg: color-mix(in srgb, var(--lb) 84%, #ffffff); }
/* ---------- Celular ---------- */
@media (max-width: 719px) {
.contacto__apertura { padding-top: 24px; }
.contacto__acciones .boton { flex: 1 1 100%; }
.linea-preguntas { padding: 22px 18px 24px; gap: 24px; border-radius: 14px; }
.linea-preguntas__lista li { padding-left: 50px; }
.linea-preguntas__acciones .boton { flex: 1 1 100%; }
}