/* Página de mantenimiento (26-oct-2026): usa styles.css de la C y solo agrega lo propio. Sin estilos
   en línea, porque la política de contenido de producción (style-src 'self') no los deja pasar. */
.mant-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem var(--gutter);
  background: rgba(237, 246, 243, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid #c6d8cf;
}
/* En celular styles.css pone el logo en blanco (en la portada va sobre el video); aquí no hay video */
.mant .marca { color: var(--verde); }
.mant .marca b { color: var(--cancha); }

.mant-portada { display: grid; gap: 2rem; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); align-items: center; }
.mant-portada-texto { display: grid; gap: 1.1rem; justify-items: start; }
.mant-portada h1 { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); max-width: 11ch; }
.mant-portada-texto p { color: var(--gris); font-size: 1.0625rem; max-width: 32rem; }
.mant .btn span { margin-left: 0.5rem; }
.mant-portada-foto { margin: 0; display: grid; gap: 0.45rem; }
.mant-portada-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-radius: 8px; background: #d5e2dc; }
.mant-portada-foto figcaption { font-size: 0.8125rem; color: var(--gris); }
@media (min-width: 56rem) { .mant-portada { grid-template-columns: 6fr 6fr; gap: 4rem; } }

.mant-que { background: var(--cal); padding: clamp(4rem, 8vw, 6rem) var(--gutter); display: grid; gap: 2rem; }
.mant-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.mant-tarjetas li { background: var(--menta); border-radius: 8px; padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: 0.75rem; align-content: start; }
.mant-tarjetas h3 { font: 400 clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem)/1 var(--titulos); }
.mant-tarjetas h3 span { display: block; font: 700 0.875rem/1.4 var(--texto); color: var(--cancha); margin-top: 0.3rem; }
.mant-tarjetas p { color: var(--gris); }
@media (min-width: 56rem) { .mant-tarjetas { grid-template-columns: repeat(3, 1fr); } }

.mant-pasos { padding: clamp(4rem, 8vw, 6rem) var(--gutter); display: grid; gap: 2rem; }
.mant-pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.mant-pasos li { display: grid; gap: 0.4rem; align-content: start; border-top: 3px solid var(--cancha); padding-top: 1rem; }
.mant-pasos h3 { font: 400 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1 var(--titulos); }
.mant-pasos p { color: var(--gris); max-width: 28rem; }
@media (min-width: 56rem) { .mant-pasos ol { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.mant-metro, .mant-quien { padding: clamp(3rem, 6vw, 4.5rem) var(--gutter); display: grid; gap: 1rem; }
.mant-metro { background: var(--verde); color: var(--cal); }
.mant-metro p { color: #cfe0d8; max-width: 40rem; font-size: 1.0625rem; }
.mant-quien p { color: var(--gris); max-width: 36rem; font-size: 1.0625rem; }

.mant mark { background: #fff1a8; padding: 0 0.15em; }

.mant-cierre { background: var(--cancha); color: var(--cal); padding: clamp(4rem, 8vw, 6rem) var(--gutter); display: grid; gap: 1rem; justify-items: start; }
.mant-cierre p { color: #e6f1ea; }
.mant-cierre .btn { background: var(--verde); }
.mant-cierre .btn:hover { background: #0f1c16; }

/* El pie de la C trae espacio para el botón fijo en celular */
@media (max-width: 55.99rem) { .mant .pie { padding-bottom: 6rem; } }