/* Página «En construcción» de buguemotors.com. Solo usa datos reales. */
:root {
  --noche: #0C243C; --ruta: #263B57; --accion: #B5551F; --naranja: #C76330; --naranja-claro: #F08A52;
  --plata-claro: #D9DEE4; --wa: #15803D; --wa-oscuro: #116A32;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'Barlow', system-ui, sans-serif; font-size: 17px; line-height: 1.45; color: #fff; background: var(--noche); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--naranja-claro); outline-offset: 3px; }

.escena { position: relative; overflow: hidden; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
/* La ruta: franjas naranjas a -12° que cruzan el fondo */
.escena::before, .escena::after { content: ''; position: absolute; left: -20%; right: -20%; z-index: -1; transform: rotate(-12deg); }
.escena::before { top: 58%; height: 120px; background: linear-gradient(180deg, rgba(38,59,87,.55), rgba(38,59,87,.15)); }
.escena::after { top: calc(58% + 54px); height: 8px; background: repeating-linear-gradient(90deg, var(--naranja) 0 70px, transparent 70px 110px); opacity: .4; animation: avanzar 2.6s linear infinite; }
@keyframes avanzar { from { background-position: 0 0; } to { background-position: 110px 0; } }

header { padding: 22px 20px 0; display: flex; justify-content: space-between; align-items: center; max-width: 1180px; width: 100%; margin: 0 auto; }
header .logo { height: 46px; width: auto; }
.estado { display: inline-flex; align-items: center; gap: 8px; font: 700 13px 'Barlow Condensed', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--plata-claro); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 7px 12px; border-radius: 999px; }
.estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--naranja-claro); box-shadow: 0 0 0 0 rgba(240,138,82,.6); animation: latir 1.8s ease-out infinite; }
@keyframes latir { 70% { box-shadow: 0 0 0 9px rgba(240,138,82,0); } 100% { box-shadow: 0 0 0 0 rgba(240,138,82,0); } }

main { max-width: 1180px; width: 100%; margin: 0 auto; padding: 34px 20px 28px; display: grid; gap: 34px; align-content: center; }
.antetitulo { font: 700 15px 'Barlow Condensed', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-claro); display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.antetitulo::before { content: ''; width: 26px; height: 4px; background: var(--naranja); transform: skewX(-12deg); }
h1 { font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 900; font-size: 44px; line-height: 1.02; letter-spacing: -.01em; margin: 0; }
h1 em { color: var(--naranja-claro); font-style: italic; }
.lead { font-size: 19px; color: var(--plata-claro); margin: 16px 0 0; max-width: 34em; }
.lead b { color: #fff; }

.avance { margin: 26px 0 0; max-width: 460px; }
.avance .barra { height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.avance .barra span { display: block; height: 100%; width: 72%; border-radius: inherit; background: repeating-linear-gradient(-60deg, var(--naranja) 0 14px, var(--naranja-claro) 14px 28px); background-size: 200% 100%; animation: cargar 1.4s linear infinite; }
@keyframes cargar { to { background-position: -64px 0; } }
.avance small { display: flex; justify-content: space-between; color: var(--plata-claro); font-size: 14px; margin-top: 8px; }

.cta { display: grid; gap: 10px; margin-top: 28px; max-width: 460px; }
.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 26px; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; box-shadow: 0 10px 26px rgba(21,128,61,.35); transition: transform .15s, background .15s; }
.btn-wa:hover { background: var(--wa-oscuro); transform: translateY(-1px); }
.btn-wa svg { width: 24px; height: 24px; }
.cta .numero { text-align: center; color: var(--plata-claro); font-size: 15px; }
.cta .numero a { color: #fff; font-weight: 600; text-decoration: none; }

.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: 14px; overflow: hidden; margin-top: 28px; max-width: 460px; }
.datos div { background: var(--ruta); padding: 12px 8px; text-align: center; font-size: 13px; color: var(--plata-claro); line-height: 1.2; }
.datos b { display: block; font: 700 25px 'Barlow Condensed', sans-serif; color: #fff; line-height: 1.05; }

.lado { display: grid; gap: 14px; }
.moto-dibujo { width: 100%; max-width: 440px; height: auto; margin: 0 auto -6px; animation: rodar 3s ease-in-out infinite; }
@keyframes rodar { 50% { transform: translateX(6px); } }
.pasos { background: var(--ruta); border-radius: 16px; padding: 20px 18px; position: relative; overflow: hidden; }
.pasos::after { content: ''; position: absolute; right: -30px; top: 18px; width: 150px; height: 10px; background: var(--naranja); transform: skewX(-12deg) rotate(-12deg); opacity: .5; }
.pasos h2 { font: italic 900 22px 'Montserrat', sans-serif; margin: 0 0 14px; }
.pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pasos li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 8px 0; position: relative; }
.pasos li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 48px; bottom: -12px; width: 2px; background: repeating-linear-gradient(180deg, rgba(240,138,82,.6) 0 5px, transparent 5px 9px); }
.pasos li span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--naranja); transform: skewX(-12deg); font: italic 900 21px 'Montserrat', sans-serif; }
.pasos li div { color: var(--plata-claro); font-size: 15px; line-height: 1.3; }
.pasos li b { display: block; color: #fff; font-size: 17.5px; }

.requisitos { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px; }
.requisitos h2 { font: italic 900 20px 'Montserrat', sans-serif; margin: 0 0 4px; }
.requisitos p { margin: 0 0 12px; color: var(--plata-claro); font-size: 15px; }
.requisitos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.requisitos li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15.5px; }
.requisitos li::before { content: ''; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--wa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center; }

footer { max-width: 1180px; width: 100%; margin: 0 auto; padding: 18px 20px 26px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; color: var(--plata-claro); font-size: 14px; border-top: 1px solid rgba(255,255,255,.08); }

@media (min-width: 960px) {
  header { padding-top: 30px; }
  header .logo { height: 56px; }
  main { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-top: 20px; }
  h1 { font-size: 70px; }
  .lead { font-size: 21px; }
  .cta { grid-template-columns: auto; justify-items: start; }
  .cta .numero { text-align: left; padding-left: 26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }