/* bacheapp.com — mismos colores y letras de la app ("BacheApp Claro"). */
:root{--asf:#FFFFFF;--card:#F6F6F7;--borde:#E4E4E7;--am:#FF5F1F;--amtx:#C2410C;--suave:#FFEDE5;--txt:#111111;--gris:#52525B;--rojo:#C62828;--verde:#15803D}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--asf);color:var(--txt)}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column;line-height:1.5}
a{color:var(--amtx);font-weight:700;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:28px 20px}
.angosto{max-width:720px}
header{display:flex;align-items:center;gap:12px}
header a.marca-enlace{display:flex;align-items:center;gap:12px;color:var(--txt);text-decoration:none}
.logo{width:44px;height:44px;border-radius:12px;background:var(--am);display:grid;place-items:center;flex:0 0 44px}
.marca{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:22px;letter-spacing:.02em}
main{flex:1}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;line-height:1.1}
.chip{display:inline-block;border:1.5px solid var(--am);color:var(--amtx);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lead{color:var(--gris);font-size:18px;line-height:1.55;max-width:560px}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 24px;border-radius:12px;background:var(--am);color:var(--txt);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;text-decoration:none;border:0;cursor:pointer}
.boton:hover{text-decoration:none;filter:brightness(.97)}
.boton.secundario{background:#FFFFFF;border:1.5px solid var(--am)}
.nota{color:var(--gris);font-size:14px}
footer{color:var(--gris);font-size:13px;border-top:1px solid var(--borde)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
footer a{color:var(--amtx)}
.tarjeta{background:var(--card);border:1px solid var(--borde);border-radius:16px;padding:20px}

/* Portada */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;width:100%;padding-top:12px}
.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.04;margin:20px 0 18px}
.hero h1 em{font-style:normal;color:var(--am)}
.puntos{display:grid;gap:12px;margin-top:28px}
.p{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--borde);border-radius:14px;padding:14px 16px}
.p b{display:block;font-size:15px}
.p span{color:var(--gris);font-size:14px}
.ico{flex:0 0 28px;height:28px;border-radius:8px;background:#FFE9DF;display:grid;place-items:center}
.tiendas{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700}
.tiendas span.pronto{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed var(--borde);border-radius:12px;padding:10px 14px;color:var(--gris);font-weight:600;font-size:14px}
.tel{justify-self:center;width:260px;aspect-ratio:9/18.5;border-radius:36px;background:#111111;border:1px solid #111111;padding:14px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.pantalla{height:100%;border-radius:26px;background:linear-gradient(160deg,#F4F1EC,#E9E6E0);overflow:hidden;position:relative}
/* Celular de la portada: la app de hoy, con una animación corta en bucle (8 s, solo CSS). Sin animación
   (prefers-reduced-motion) se ve el cuadro final: el bache, el pin del comercio y su tarjeta. */
.pantalla{background:#F2EFE9}
.calle{position:absolute;background:#FFFFFF;box-shadow:0 0 0 1.5px #DAD5CB}
.calle-v{left:34%;width:13%;top:-4%;bottom:-4%}
.calle-v:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,#CFC9BE 0 12px,transparent 12px 24px)}
.calle-h1{left:-4%;right:-4%;top:25%;height:5%}
.calle-h2{left:-4%;right:-4%;top:63%;height:5.5%}
.trafico{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.trafico.verde{left:4%;width:30%;background:#7BC96F}
.trafico.rojo{left:50%;right:6%;background:#EF8A85}
.hueco{position:absolute;left:40.5%;top:36%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:6px;background:#E53935;border:2px solid #FFFFFF;box-shadow:0 0 0 1px #111111,0 4px 6px rgba(0,0,0,.2);color:#111111;font:700 12px/16px "Space Grotesk",sans-serif;text-align:center}
.yo{position:absolute;left:40.5%;top:49%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#2563EB;border:3px solid #FFFFFF;box-shadow:0 0 0 7px rgba(37,99,235,.2)}
.pin{position:absolute;left:67%;top:45%;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-100%)}
.pin-logo{width:30px;height:30px;border-radius:50%;background:#5B3A1E;color:#FFFFFF;border:2px solid #FFFFFF;box-shadow:0 0 0 1.5px var(--am),0 4px 8px rgba(0,0,0,.2);font:700 11px/26px "Space Grotesk",sans-serif;text-align:center}
.globo{position:relative;background:var(--am);color:#111111;border:2px solid #FFFFFF;border-radius:10px;padding:3px 8px;font:700 11px/1.2 "Space Grotesk",sans-serif;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.globo:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--am);border-bottom:0}
.activos{position:absolute;top:7px;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,.92);border-radius:999px;padding:1px 8px;font-size:9px;font-weight:600;color:var(--gris)}
.vel{position:absolute;top:28px;left:10px;background:#FFFFFF;color:#111111;border:1px solid var(--borde);border-radius:10px;padding:5px 9px;text-align:center;font-family:"Space Grotesk",sans-serif;box-shadow:0 3px 8px rgba(0,0,0,.1)}
.vel b{font-size:19px;display:block;line-height:1}
.vel small{font-size:9px;color:var(--gris)}
.modos{position:absolute;top:32px;left:64px;display:flex;gap:2px;padding:2px;background:#FFFFFF;border:1px solid var(--borde);border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.1)}
.modo{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#111111}
.modo.elegido{background:#111111;color:#FFFFFF}
.alerta{position:absolute;top:72px;left:10px;right:10px;background:#FFFFFF;color:#111111;border:2px solid #E53935;border-radius:10px;padding:7px 10px;font:700 13px/1.2 "Space Grotesk",sans-serif;text-align:center;box-shadow:0 0 14px rgba(229,57,53,.25);opacity:0}
.tarjeta-tel{position:absolute;left:10px;right:10px;bottom:68px;background:#FFFFFF;border:1px solid var(--borde);border-radius:12px;padding:8px 10px;box-shadow:0 6px 14px rgba(0,0,0,.14);display:grid;gap:1px;font-size:10.5px;color:var(--gris);line-height:1.3}
.tarjeta-tel b{font:700 13px/1.2 "Space Grotesk",sans-serif;color:#111111}
.tarjeta-tel strong{color:var(--amtx);white-space:nowrap}
.sello{justify-self:start;background:var(--am);color:#111111;border-radius:999px;padding:1px 7px;font-size:8px;font-weight:700;letter-spacing:.05em;margin-bottom:2px}
@media (prefers-reduced-motion:no-preference){
  .yo{animation:tel-yo 8s linear infinite}
  .hueco{animation:tel-hueco 8s ease-out infinite}
  .alerta{animation:tel-alerta 8s ease-out infinite}
  .pin{animation:tel-pin 8s ease-out infinite}
  .tarjeta-tel{animation:tel-tarjeta 8s ease-out infinite}
}
@keyframes tel-yo{0%{top:80%;opacity:0}4%{opacity:1}82%{top:49%}96%{top:49%;opacity:1}100%{top:49%;opacity:0}}
@keyframes tel-hueco{0%,12%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1.15)}22%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes tel-alerta{0%,16%{opacity:0;transform:translateY(-6px)}22%,46%{opacity:1;transform:none}52%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes tel-pin{0%,52%{opacity:0;transform:translate(-50%,-90%) scale(.6)}60%,96%{opacity:1;transform:translate(-50%,-100%) scale(1)}100%{opacity:0;transform:translate(-50%,-100%) scale(1)}}
@keyframes tel-tarjeta{0%,62%{opacity:0;transform:translateY(12px)}70%,96%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.boton-tel{position:absolute;left:14px;right:14px;bottom:16px;background:var(--am);color:#111111;border-radius:14px;padding:14px;text-align:center;font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:.03em}
.negocio{margin-top:48px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--suave);border:1px solid #FFD8C7;border-radius:20px;padding:28px}
.negocio h2{font-size:30px;margin-bottom:6px}
.negocio p{color:var(--gris)}
.contacto{margin-top:22px;color:var(--gris);font-size:15px}
@media (max-width:820px){.hero{grid-template-columns:1fr}.tel{width:240px;margin-top:8px}.negocio{grid-template-columns:1fr}}

/* Textos legales */
.legal h1{font-size:34px;margin:12px 0 4px}
.legal h2{font-size:22px;margin:28px 0 8px}
.legal p,.legal li{font-size:16px;margin:8px 0}
.legal ul{padding-left:22px}
.legal blockquote{background:var(--suave);border-left:4px solid var(--am);border-radius:12px;padding:12px 16px;margin:12px 0}

/* Promo y bache compartidos */
.compartido{display:grid;gap:16px;margin-top:8px}
.compartido .cabeza{display:flex;gap:14px;align-items:center}
.compartido .logo-comercio{width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--am);flex:0 0 72px;display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-size:32px;font-weight:700;color:var(--txt)}
.compartido h1{font-size:30px}
.compartido .beneficio{font-family:"Space Grotesk",sans-serif;font-size:26px;font-weight:700;color:var(--amtx)}
.compartido .etiqueta{display:inline-block;background:var(--am);color:var(--txt);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.05em}
.compartido .arte{width:100%;max-height:360px;object-fit:contain;background:var(--suave);border-radius:16px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.sin-app{display:none;background:var(--card);border:1px solid var(--borde);border-radius:12px;padding:14px 16px}
.sin-app.visible{display:block}
#mapa{height:320px;border-radius:16px;border:1px solid var(--borde)}
.severidad{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:20px}
.severidad i{width:22px;height:22px;border-radius:6px;border:2px solid #FFFFFF;box-shadow:0 0 0 1px #111111;display:inline-block}
.cargando{color:var(--gris);padding:40px 0}

.aviso-lluvia{background:#DBEAFE;border-left:4px solid #1D4ED8;border-radius:12px;padding:12px 16px;font-weight:600}

/* Los baches más viejos (/baches) */
.viejos{list-style:none;display:grid;gap:10px}
.viejos a{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--borde);border-radius:14px;padding:12px 16px;color:var(--txt);font-weight:400}
.viejos a:hover{text-decoration:none;border-color:var(--am)}
.viejos .puesto{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:24px;width:32px;text-align:center}
.viejos .datos{flex:1;display:grid;gap:2px}
.viejos .edad{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--amtx);white-space:nowrap}
.severidad.chica{font-size:14px;font-weight:600;color:var(--gris)}
.severidad.chica i{width:14px;height:14px;border-radius:4px}