/* Placa al Día — estilos retro compartidos (páginas internas) */
:root{
  --amarillo:#FFC800;
  --amarillo-osc:#E8B400;
  --negro:#111111;
  --tinta:#1C1C1C;
  --papel:#F4F2EC;
  --blanco:#FFFFFF;
  --azul:#0057A8;
  --rojo:#D02B20;
  --verde:#0B7A3E;
  --borde:2px solid var(--negro);
  --borde3:3px solid var(--negro);
  --sombra:6px 6px 0 var(--negro);
  --radio:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--papel);color:var(--tinta);font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.contenedor{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Archivo Black',sans-serif;line-height:1.08;text-transform:uppercase;letter-spacing:-0.01em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

/* Botones retro */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border:var(--borde);border-radius:var(--radio);padding:13px 24px;background:var(--amarillo);color:var(--negro);box-shadow:var(--sombra);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;font-size:1rem}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--negro)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--negro)}
.btn.blanco{background:var(--blanco)}
.btn.negro{background:var(--negro);color:var(--amarillo)}
.btn-nav{padding:9px 16px;box-shadow:3px 3px 0 var(--negro);font-size:.9rem}
.centro-btn{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* Nav */
.nav{position:sticky;top:0;z-index:100;background:var(--blanco);border-bottom:var(--borde)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1180px;margin:0 auto;padding:0 20px}
.logo{display:inline-flex;text-decoration:none}
.logo-placa{display:inline-flex;flex-direction:column;align-items:center;background:var(--amarillo);border:3px solid var(--negro);border-radius:7px;padding:3px 14px 5px;box-shadow:3px 3px 0 var(--negro);line-height:1;transition:transform .16s ease,box-shadow .16s ease}
.logo:hover .logo-placa{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--negro)}
.logo-placa .pais-logo{font-family:'Oswald';font-weight:700;font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;color:var(--negro);margin-bottom:2px}
.logo-placa .nombre-logo{font-family:'Oswald';font-weight:700;font-size:1.08rem;letter-spacing:.1em;text-transform:uppercase;color:var(--negro);white-space:nowrap}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 14px;border-radius:8px;transition:background .18s ease}
.nav-links a:hover{background:var(--papel)}
.menu-toggle{display:none;background:none;border:var(--borde);border-radius:8px;width:44px;height:44px;font-size:1.3rem;cursor:pointer}
/* Menú desplegable de herramientas.
   OJO: sin hueco entre botón y panel (el panel usa padding-top como puente)
   para que el cursor no lo cierre al bajar. El JS añade además una
   tolerancia de cierre de 300ms (datos.js → iniciarUI). */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font-family:'Archivo';font-weight:600;font-size:.95rem;padding:10px 14px;border-radius:8px;cursor:pointer;transition:background .18s ease;color:var(--tinta)}
.nav-drop-btn:hover{background:var(--papel)}
.nav-drop-btn::after{content:"▾";font-size:.75em;transition:transform .18s ease}
.nav-drop.abierto .nav-drop-btn::after{transform:rotate(180deg)}
.nav-drop-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--blanco);border:var(--borde);border-radius:12px;box-shadow:var(--sombra);padding:8px;list-style:none;z-index:120}
.nav-drop-menu::before{content:"";position:absolute;left:-10px;right:-10px;top:-14px;height:14px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.abierto .nav-drop-menu{display:block}
.nav-drop-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:.92rem}
.nav-drop-menu a small{font-family:'Oswald';font-weight:700;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:var(--amarillo);border:2px solid var(--negro);border-radius:5px;padding:1px 7px;flex:none}
@media (max-width:920px){
  .menu-toggle{display:grid;place-items:center}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--blanco);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:var(--borde);gap:2px;max-height:calc(100vh - 68px);overflow-y:auto}
  .nav-links.abierto{display:flex}
  .nav-links a{padding:14px;font-size:1.05rem}
  .nav-drop-btn{width:100%;justify-content:space-between;padding:14px;font-size:1.05rem}
  .nav-drop-menu{display:block;position:static;min-width:0;border:0;box-shadow:none;padding:0 0 6px 14px}
  .nav-drop-menu a{font-size:.98rem;padding:11px 12px}
}

/* CTA dentro de artículos del blog */
.cta-inline{background:var(--amarillo);border:var(--borde3);border-radius:14px;box-shadow:var(--sombra);padding:22px 24px;margin:28px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cta-inline .cta-texto b{display:block;font-family:'Archivo Black';font-size:1.05rem;text-transform:uppercase;line-height:1.25}
.cta-inline .cta-texto span{font-size:.9rem;font-weight:600}
.cta-inline .btn{flex:none;background:var(--negro);color:var(--amarillo)}
.cta-herr-final{background:var(--negro);border:var(--borde3);border-radius:16px;box-shadow:var(--sombra);padding:28px;color:var(--papel);text-align:center;margin:38px 0 0}
.cta-herr-final b{display:block;font-family:'Archivo Black';font-size:clamp(1.1rem,2.4vw,1.5rem);text-transform:uppercase;color:var(--amarillo);margin-bottom:8px}
.cta-herr-final p{color:#CFCABA;font-size:.95rem;max-width:56ch;margin:0 auto 18px}

/* Banda de título de página */
.pagina-hero{background:var(--amarillo);border-bottom:var(--borde3);padding:44px 0 40px;text-align:center}
.pagina-hero h1{font-size:clamp(1.7rem,4.2vw,2.9rem);max-width:26ch;margin:0 auto}
.pagina-hero p{max-width:60ch;margin:14px auto 0;font-weight:600;font-size:1.05rem}
.miga{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin-bottom:14px}
.miga a{text-decoration:none}
.miga a:hover{text-decoration:underline}

/* Pista animada */
.pista{height:18px;background:repeating-linear-gradient(90deg,var(--negro) 0 48px,transparent 48px 82px);background-size:82px 100%;animation:rodar 1.5s linear infinite}
@keyframes rodar{to{background-position:-82px 0}}
.pista.lenta{animation-duration:2.6s;height:12px}

/* Secciones y títulos */
section{padding:64px 0}
.titulo-sec{position:relative;text-align:center;margin-bottom:14px}
.titulo-sec h2{font-size:clamp(1.5rem,3.6vw,2.3rem);display:inline-block;position:relative;padding:0 10px}
.sub-sec{text-align:center;max-width:58ch;margin:0 auto 40px;font-size:1.04rem;color:#3a3a35}

/* Tablas retro */
.tabla-wrap{overflow-x:auto;border-radius:14px}
.tabla-retro{width:100%;border-collapse:collapse;background:var(--blanco);border:var(--borde3);border-radius:14px;overflow:hidden;box-shadow:var(--sombra);min-width:640px}
.tabla-retro th{background:var(--negro);color:var(--amarillo);font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;text-align:left;padding:14px 18px}
.tabla-retro td{padding:13px 18px;border-top:2px solid #E5E1D6;font-size:.96rem}
.tabla-retro tbody tr:hover td{background:#FFF4CC}
.pill{display:inline-block;border-radius:99px;padding:3px 12px;font-family:'Oswald';font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.pill.verde{background:#E7F6EC;color:var(--verde);border:2px solid var(--verde)}
.pill.rojo{background:#FDECEA;color:var(--rojo);border:2px solid var(--rojo)}
.pill.ambar{background:#FFF4CC;color:#8a6d00;border:2px solid var(--amarillo-osc)}

/* Tarjetas de datos */
.dato-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.dato-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.dato-grid{grid-template-columns:1fr}}
.dato-card{background:var(--blanco);border:var(--borde);border-radius:12px;padding:16px;box-shadow:4px 4px 0 var(--negro)}
.dato-card small{display:block;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:#666;margin-bottom:4px}
.dato-card b{font-family:'Archivo Black';font-size:1.15rem}
.dato-card.verde{background:#E7F6EC;border-color:var(--verde)}
.dato-card.rojo{background:#FDECEA;border-color:var(--rojo)}

/* Prosa de guías */
.prosa{max-width:760px;margin:0 auto}
.prosa h2{font-size:clamp(1.3rem,3vw,1.8rem);margin:38px 0 14px}
.prosa p{margin-bottom:14px;color:#333}
.prosa ol,.prosa ul{margin:0 0 14px 22px;color:#333}
.prosa li{margin-bottom:8px}
.prosa .caja{background:var(--blanco);border:var(--borde);border-radius:12px;box-shadow:var(--sombra);padding:18px 20px;margin:20px 0}

/* Regla de oro (confianza — obligatoria en todas las páginas) */
.regla-oro-banda{background:#FFF4CC;border-block:var(--borde3);padding:18px 0}
.regla-oro-banda .contenedor{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;text-align:center}
.regla-oro-banda p{font-weight:600;font-size:.94rem;max-width:80ch}
.regla-oro-banda .timbre{flex:none;width:56px;height:56px;border-radius:50%;border:3px double var(--verde);color:var(--verde);display:grid;place-items:center;font-family:'Oswald';font-weight:700;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;text-align:center;transform:rotate(-8deg)}

/* FAQ */
.faq details{background:var(--blanco);border:var(--borde);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:700;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Archivo Black';font-size:1.3rem;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 20px;color:#444;font-size:.98rem}

/* Footer */
footer{background:var(--negro);color:#CFC9B8;padding:0 0 30px}
.foot-contenido{padding-top:52px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--blanco);font-size:.9rem;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:9px}
footer a{color:#CFC9B8;text-decoration:none;font-size:.92rem}
footer a:hover{color:var(--amarillo)}
.foot-base{margin-top:44px;padding-top:20px;border-top:1px solid #333;font-size:.8rem;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ===== Hero de página con foto + filtro amarillo (sin franjas laterales) ===== */
.pagina-hero{position:relative;overflow:hidden}
.pagina-hero .hero-bg{position:absolute;inset:0;pointer-events:none}
.pagina-hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;opacity:.22;-webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.3) 85%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.3) 85%,transparent 100%)}
.pagina-hero.con-foto{padding:72px 0 92px}
.pagina-hero > .contenedor{position:relative;z-index:1}

/* ===== Mapa interactivo en páginas internas ===== */
.sec-mapa-interna{background:var(--negro);color:var(--papel)}
.sec-mapa-interna .titulo-sec h2{color:var(--blanco)}
.mapa-wrap{max-width:640px;margin:0 auto;position:relative}
.mapa-wrap svg{width:100%;height:auto;display:block}
.mapa-cargando{color:#B9B4A3;text-align:center;padding:60px 0;font-family:'Oswald';text-transform:uppercase;letter-spacing:.12em}
.mapa-caption{text-align:center;margin-top:18px;font-family:'Oswald';font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;color:var(--amarillo);min-height:1.4em}
#features path{fill:var(--amarillo);stroke:var(--negro);stroke-width:1.4;cursor:pointer;transition:transform .22s ease,filter .22s ease,stroke-width .22s ease,fill .22s ease;transform-box:fill-box;transform-origin:center}
#features path:hover,#features path.activo{fill:var(--blanco);transform:scale(1.07);stroke-width:2.5;filter:drop-shadow(4px 4px 0 rgba(255,200,0,.55))}
#features path:focus-visible{outline:none;fill:var(--blanco);transform:scale(1.07);stroke-width:3}
#features path.actual{fill:var(--blanco);stroke-width:2.5}
.etiqueta-mapa{font-family:'Archivo',sans-serif;font-weight:700;fill:var(--negro);stroke:#FFFFFF;stroke-width:3.5;paint-order:stroke fill;pointer-events:none;text-anchor:middle}
#cta-sanandres{cursor:pointer}
#cta-sanandres .anillo{fill:rgba(255,200,0,.14);stroke:var(--amarillo);stroke-width:2.5;stroke-dasharray:7 5;transition:fill .2s ease}
#cta-sanandres:hover .anillo,#cta-sanandres.activo .anillo{fill:rgba(255,255,255,.25)}
#cta-sanandres .pulso{fill:none;stroke:var(--amarillo);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulsoSA 2.2s ease-out infinite}
@keyframes pulsoSA{0%{transform:scale(.65);opacity:1}100%{transform:scale(1.7);opacity:0}}
#cta-sanandres text{fill:var(--amarillo);stroke:none;font-weight:700}

/* ===== Blog ===== */
.blog-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:860px){.blog-lista{grid-template-columns:1fr}}
.post-card{background:var(--blanco);border:var(--borde);border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--sombra);transition:transform .2s ease,box-shadow .2s ease}
.post-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--negro)}
.post-card figure{aspect-ratio:16/9;overflow:hidden;border-bottom:var(--borde)}
.post-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover img{transform:scale(1.06)}
.post-card .cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.post-card small{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--rojo);margin-bottom:6px}
.post-card h2{font-size:1.15rem;line-height:1.3;text-transform:none;font-family:'Archivo Black'}
.post-card p{font-size:.92rem;color:#555;margin-top:8px}
.post-card .leer{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-top:auto;padding-top:14px;color:var(--azul)}

/* ===== Stickers de sección (nunca tapan el texto) ===== */
.titulo-sec .sticker{position:absolute;top:-38px;left:100%;margin-left:12px;background:var(--amarillo);border:var(--borde3);border-radius:50%;width:74px;height:74px;display:grid;place-items:center;font-family:'Oswald';font-weight:700;font-size:.8rem;text-transform:uppercase;line-height:1.05;text-align:center;transform:rotate(10deg);box-shadow:4px 4px 0 var(--negro);animation:vibrar 4s ease-in-out infinite;z-index:2}
.titulo-sec .sticker.azul{background:var(--azul);color:#fff}
.titulo-sec .sticker.rojo{background:var(--rojo);color:#fff}
.titulo-sec .sticker.verde{background:var(--verde);color:#fff}
@keyframes vibrar{0%,100%{transform:rotate(10deg)}50%{transform:rotate(4deg)}}
@media (max-width:900px){.titulo-sec .sticker{position:static;display:inline-grid;vertical-align:middle;margin:0 0 6px 12px;width:62px;height:62px;font-size:.68rem}}

/* ===== Aviso de temporada ===== */
.aviso-temporada{background:var(--negro);color:var(--papel);border-bottom:var(--borde3);position:relative;overflow:hidden}
.aviso-temporada::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(-45deg,var(--amarillo) 0 9px,var(--negro) 9px 18px)}
.aviso-inner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;padding:8px 30px;max-width:1180px;margin:0 auto}
.aviso-inner .hoy{flex:none;background:var(--amarillo);color:var(--negro);border-radius:5px;font-family:'Oswald';font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;white-space:nowrap}
.aviso-inner p{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aviso-inner .btn{flex:none;padding:6px 14px;font-size:.76rem;box-shadow:3px 3px 0 rgba(255,200,0,.45);border-color:var(--amarillo)}
@media (max-width:760px){.aviso-inner p{white-space:normal;font-size:.78rem}.aviso-inner{flex-wrap:wrap;justify-content:center;text-align:center;padding:8px 24px}}

/* ===== Marquee ===== */
.marquee{background:var(--negro);color:var(--amarillo);overflow:hidden;border-block:var(--borde3);padding:13px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 24s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-grupo{display:flex;align-items:center;gap:34px;padding-right:34px;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;white-space:nowrap}
.marquee-grupo svg{width:19px;height:19px;flex:none}

/* ===== Grid de herramientas (hub) ===== */
.herr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.herr-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.herr-grid{grid-template-columns:1fr}}
.herr-card{position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--blanco);border:var(--borde3);border-radius:16px;padding:24px 22px;box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden}
.herr-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--negro)}
.herr-card:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--negro)}
.herr-card .icono{width:52px;height:52px;border-radius:12px;border:var(--borde);display:grid;place-items:center;background:var(--amarillo)}
.herr-card .icono svg{width:28px;height:28px}
.herr-card.azul .icono{background:var(--azul);color:#fff}
.herr-card.verde .icono{background:var(--verde);color:#fff}
.herr-card.rojo .icono{background:var(--rojo);color:#fff}
.herr-card h3{font-size:1.08rem;color:var(--tinta)}
.herr-card p{font-size:.9rem;color:#555}
.herr-card .ir{margin-top:auto;padding-top:10px;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--azul);display:inline-flex;gap:8px;transition:gap .2s ease}
.herr-card:hover .ir{gap:14px}
.herr-card .badge-temporada{position:absolute;top:14px;right:14px;font-family:'Oswald';font-weight:600;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:3px 10px;background:#FDECEA;color:var(--rojo);border:2px solid var(--rojo)}

/* ===== Filas alternadas con imagen (hub) ===== */
.media-fila{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:34px 0}
@media (max-width:880px){.media-fila{grid-template-columns:1fr;gap:22px}}
.media-fila.invertida .media-foto{order:2}
@media (max-width:880px){.media-fila.invertida .media-foto{order:0}}
.media-foto{border:var(--borde3);border-radius:16px;overflow:hidden;box-shadow:var(--sombra);aspect-ratio:16/10}
.media-foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.media-fila:hover .media-foto img{transform:scale(1.05)}
.media-fila h3{font-size:clamp(1.3rem,2.8vw,1.9rem);margin-bottom:12px}
.media-fila p{color:#3a3a35;margin-bottom:20px}

/* ===== Herramienta en página (tarjeta negra) + veredicto ===== */
.tool-card{background:var(--negro);border:var(--borde3);border-radius:18px;box-shadow:10px 10px 0 rgba(17,17,17,.85);padding:30px;color:var(--papel);max-width:880px;margin:-56px auto 0;position:relative;z-index:5}
.tool-card h2{color:var(--amarillo);font-size:1.25rem;margin-bottom:6px;text-align:center}
.tool-card .desc{color:#B9B4A3;font-size:.92rem;text-align:center;margin-bottom:22px}
.tool-card label{display:block;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;margin-bottom:6px;color:#CFCABA}
.tool-card select,.tool-card input{width:100%;border:var(--borde);border-radius:10px;padding:12px 13px;font-size:1rem;font-family:'Archivo';font-weight:600;background:var(--blanco);color:var(--tinta);min-height:48px}
.tool-card .fila-3{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
@media (max-width:700px){.tool-card .fila-3{grid-template-columns:1fr}}
.veredicto{margin-top:22px;border-radius:14px;border:3px solid #3A3A34;padding:20px;text-align:center;display:none}
.veredicto.visible{display:block}
.veredicto.ok{border-color:var(--verde);background:rgba(11,122,62,.12)}
.veredicto.mal{border-color:var(--rojo);background:rgba(208,43,32,.12)}
.veredicto.info{border-color:var(--amarillo);background:rgba(255,200,0,.08)}
.veredicto .grande{font-family:'Archivo Black';font-size:clamp(1.3rem,3vw,1.9rem);text-transform:uppercase}
.veredicto.ok .grande{color:#7FDCA4}
.veredicto.mal .grande{color:#FF9A91}
.veredicto.info .grande{color:var(--amarillo)}
.veredicto .detalle{color:#CFCABA;font-size:.94rem;margin-top:8px}
.tool-nota{text-align:center;font-size:.76rem;color:#8A8578;margin-top:14px}

/* ===== Testimonios ===== */
.sec-testi{background:var(--negro);color:var(--papel)}
.sec-testi .titulo-sec h2{color:var(--blanco)}
.sec-testi .sub-sec{color:#B9B4A3}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr}}
.testi-card{background:var(--papel);color:var(--tinta);border:var(--borde3);border-radius:16px;padding:26px 24px 22px;position:relative;box-shadow:8px 8px 0 rgba(255,200,0,.85);display:flex;flex-direction:column;transition:transform .2s ease}
.testi-card:hover{transform:translateY(-5px)}
.testi-card .comilla{position:absolute;top:-26px;left:18px;width:52px;height:52px;border-radius:50%;background:var(--amarillo);border:var(--borde3);display:grid;place-items:center;font-family:'Archivo Black';font-size:1.9rem;line-height:1;padding-top:12px}
.testi-card blockquote{font-size:.98rem;line-height:1.55;color:#333;margin:14px 0 18px;flex:1}
.testi-card figcaption{display:flex;align-items:center;gap:12px;border-top:2px dashed #DDD8C9;padding-top:14px}
.testi-placa{background:var(--amarillo);border:2px solid var(--negro);border-radius:6px;font-family:'Oswald';font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px}
.testi-card small{font-family:'Oswald';font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#666}

/* ===== Recomendados (espacios patrocinables) ===== */
.reco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.reco-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reco-grid{grid-template-columns:1fr}}
.reco-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--blanco);border:var(--borde);border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 var(--negro);transition:transform .18s ease,box-shadow .18s ease}
.reco-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--negro)}
.reco-card figure{aspect-ratio:16/10;overflow:hidden;border-bottom:var(--borde)}
.reco-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.reco-card:hover img{transform:scale(1.06)}
.reco-card .cuerpo{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.reco-card h3{font-size:.95rem;text-transform:none;font-family:'Archivo';font-weight:700}
.reco-card p{font-size:.84rem;color:#555;margin-top:6px}
.reco-card .ir{margin-top:auto;padding-top:12px;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--azul)}

/* ===== Grid de blog compartido ===== */
.hub-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.hub-blog-grid{grid-template-columns:1fr}}

/* ===== Sello grande del hero (hub) ===== */
.sello-hero{position:absolute;top:26px;right:4%;width:128px;height:128px;border-radius:50%;background:var(--negro);color:var(--amarillo);border:3px solid var(--amarillo);display:grid;place-items:center;text-align:center;font-family:'Oswald';font-weight:700;font-size:.82rem;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;transform:rotate(10deg);box-shadow:6px 6px 0 rgba(17,17,17,.5);animation:vibrar 4s ease-in-out infinite;z-index:2}
@media (max-width:1100px){.sello-hero{display:none}}

/* ===== Sección taxis ===== */
.sec-taxis{background:var(--blanco);border-block:var(--borde3)}

/* ===== Mini-placa (chip con código de departamento, estilo placa colombiana) ===== */
.placa-chip{display:inline-flex;flex-direction:column;align-items:center;background:var(--amarillo);border:2px solid var(--negro);border-radius:6px;padding:2px 10px 4px;line-height:1;box-shadow:3px 3px 0 var(--negro);flex:none}
.placa-chip .pc-pais{font-family:'Oswald';font-weight:700;font-size:.44rem;letter-spacing:.3em;text-transform:uppercase;color:var(--negro)}
.placa-chip .pc-cod{font-family:'Oswald';font-weight:700;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--negro)}
.placa-chip.grande{padding:4px 16px 7px;border-width:3px;border-radius:8px;box-shadow:4px 4px 0 var(--negro)}
.placa-chip.grande .pc-pais{font-size:.55rem}
.placa-chip.grande .pc-cod{font-size:1.7rem}

/* ===== Hero v2 del hub: composición en dos columnas con tablero vial ===== */
.hero-hub2{background:var(--amarillo);position:relative;overflow:hidden;border-bottom:var(--borde3)}
.hero-hub2 .hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-hub2 .hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;opacity:.24;-webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.25) 70%,transparent 96%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.25) 70%,transparent 96%)}
.hero-hub2-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding:58px 0 64px}
@media (max-width:980px){.hero-hub2-inner{grid-template-columns:1fr;gap:30px;padding:44px 0 54px}}
.hero-hub2 h1{font-size:clamp(2.4rem,5.6vw,4.4rem);margin:0}
.hero-hub2 h1 .linea-placa{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;background:var(--blanco);border:4px solid var(--negro);border-radius:12px;padding:2px 18px 8px;box-shadow:6px 6px 0 var(--negro);transform:rotate(-1.5deg);margin-top:6px}
.hero-hub2 h1 .linea-placa small{font-family:'Oswald';font-weight:700;font-size:.32em;letter-spacing:.34em;text-transform:uppercase}
.hero-hub2 p.sub{font-size:clamp(1rem,1.9vw,1.18rem);max-width:52ch;margin:20px 0 26px;font-weight:600}
/* Tablero tipo señal de carretera con el estado de HOY */
.tablero{background:var(--negro);border:4px solid var(--blanco);outline:var(--borde3);border-radius:18px;box-shadow:10px 10px 0 rgba(17,17,17,.55);padding:22px 24px;color:var(--papel);transform:rotate(1.2deg)}
@media (max-width:980px){.tablero{transform:none;max-width:560px}}
.tablero .tb-cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:2px dashed #3A3A34;padding-bottom:12px;margin-bottom:6px}
.tablero .tb-cabecera b{font-family:'Oswald';font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--amarillo)}
.tablero .tb-fecha{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:#B9B4A3}
.tablero .tb-fila{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:2px dashed #3A3A34}
.tablero .tb-fila:last-child{border-bottom:0;padding-bottom:2px}
.tablero .tb-fila small{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:#8A8578;flex:none}
.tablero .tb-fila b{font-family:'Archivo Black';font-size:clamp(1rem,1.7vw,1.2rem);text-transform:uppercase;text-align:right;line-height:1.2}
.tablero .tb-fila b.ok{color:#7FDCA4}
.tablero .tb-fila b.mal{color:#FF9A91}
.tablero .tb-fila b.warn{color:var(--amarillo)}
.tablero .tb-pie{margin-top:14px;text-align:right}
.tablero .tb-pie a{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--amarillo);text-decoration:none}
.tablero .tb-pie a:hover{text-decoration:underline}

/* ===== Página de departamento ===== */
.depto-hero .h1-linea{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.ficha-linea{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.ficha-tag{display:inline-flex;align-items:center;gap:7px;background:var(--negro);color:var(--papel);border-radius:99px;padding:6px 15px;font-family:'Oswald';font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.ficha-tag b{color:var(--amarillo)}
/* Semáforo del conductor: 4 frentes con estado */
.semaforo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.semaforo-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.semaforo-grid{grid-template-columns:1fr}}
.semaforo-card{background:var(--blanco);border:var(--borde3);border-radius:14px;box-shadow:var(--sombra);padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
a.semaforo-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--negro)}
.semaforo-card .sem-luz{width:16px;height:16px;border-radius:50%;border:2px solid var(--negro);flex:none}
.semaforo-card .sem-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.semaforo-card .sem-cab small{font-family:'Oswald';font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:#666}
.semaforo-card.verde .sem-luz{background:var(--verde);box-shadow:0 0 0 4px rgba(11,122,62,.18)}
.semaforo-card.rojo .sem-luz{background:var(--rojo);box-shadow:0 0 0 4px rgba(208,43,32,.18)}
.semaforo-card.ambar .sem-luz{background:var(--amarillo);box-shadow:0 0 0 4px rgba(255,200,0,.3)}
.semaforo-card.gris .sem-luz{background:#C9C4B4}
.semaforo-card b{font-family:'Archivo Black';font-size:1.02rem;line-height:1.25}
.semaforo-card p{font-size:.84rem;color:#555}
.semaforo-card .ir{margin-top:auto;padding-top:8px;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--azul)}
/* Radar del conductor (actualidad) */
.sec-radar{background:var(--blanco);border-block:var(--borde3)}
.radar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:980px;margin:0 auto}
@media (max-width:820px){.radar-grid{grid-template-columns:1fr}}
.radar-grid.tres{grid-template-columns:repeat(3,1fr);max-width:none}
@media (max-width:980px){.radar-grid.tres{grid-template-columns:1fr;max-width:640px}}
.radar-card{background:var(--papel);border:var(--borde);border-radius:14px;padding:20px 22px;box-shadow:5px 5px 0 var(--negro);position:relative;display:flex;flex-direction:column;gap:8px}
.radar-card .tag{align-self:flex-start;font-family:'Oswald';font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--negro);border-radius:5px;padding:2px 9px;background:var(--amarillo)}
.radar-card .tag.impuesto{background:var(--negro);color:var(--amarillo)}
.radar-card .tag.pyp{background:var(--azul);color:#fff;border-color:var(--negro)}
.radar-card h3{font-size:1.02rem;text-transform:none;font-family:'Archivo Black';line-height:1.3}
.radar-card p{font-size:.9rem;color:#444}
.radar-card a{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--azul);text-decoration:none;margin-top:auto;padding-top:4px}
.radar-card a:hover{text-decoration:underline}
/* Vecinos de región */
.vecinos-lista{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.vecino{display:inline-flex;align-items:center;gap:10px;background:var(--blanco);border:var(--borde);border-radius:10px;padding:8px 14px 8px 8px;text-decoration:none;color:inherit;font-weight:700;font-size:.92rem;box-shadow:4px 4px 0 var(--negro);transition:transform .16s ease,box-shadow .16s ease}
.vecino:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--negro)}

/* ===== Directorio de departamentos ===== */
.region-bloque{margin-top:44px}
.region-titulo{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.region-titulo h3{font-size:1.2rem;flex:none}
.region-titulo .via{flex:1;height:10px;background:repeating-linear-gradient(90deg,var(--negro) 0 26px,transparent 26px 46px);border-radius:2px;opacity:.85}
.region-titulo .cuenta{flex:none;font-family:'Oswald';font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:var(--negro);color:var(--amarillo);border-radius:5px;padding:3px 10px}
.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.dir-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.dir-grid{grid-template-columns:1fr}}
.depto-card{display:flex;align-items:center;gap:14px;background:var(--blanco);border:var(--borde);border-radius:12px;padding:14px;text-decoration:none;color:inherit;box-shadow:4px 4px 0 var(--negro);transition:transform .16s ease,box-shadow .16s ease}
.depto-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--negro)}
.depto-card .dc-info{min-width:0;flex:1}
.depto-card .dc-info b{display:block;font-family:'Archivo Black';font-size:.98rem;line-height:1.2}
.depto-card .dc-info small{display:block;font-size:.78rem;color:#666;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.depto-card .pill{flex:none;font-size:.62rem;padding:2px 9px}

/* ===== Camino del descuento (multas): línea de tiempo vial ===== */
.ruta-plazos{max-width:880px;margin:0 auto}
.ruta-plazos .rp-via{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:0;border:var(--borde3);border-radius:16px;overflow:hidden;box-shadow:var(--sombra)}
@media (max-width:700px){.ruta-plazos .rp-via{grid-template-columns:1fr}}
.rp-tramo{padding:22px 20px;position:relative}
.rp-tramo + .rp-tramo{border-left:3px dashed var(--negro)}
@media (max-width:700px){.rp-tramo + .rp-tramo{border-left:0;border-top:3px dashed var(--negro)}}
.rp-tramo.verde{background:#E7F6EC}
.rp-tramo.ambar{background:#FFF4CC}
.rp-tramo.rojo{background:#FDECEA}
.rp-tramo small{display:block;font-family:'Oswald';font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:#555;margin-bottom:6px}
.rp-tramo b{font-family:'Archivo Black';font-size:1.3rem;display:block}
.rp-tramo p{font-size:.85rem;color:#555;margin-top:6px}

/* ===== Blog: artículo destacado ===== */
.post-destacado{grid-column:1 / -1;display:grid;grid-template-columns:1.2fr 1fr;background:var(--negro);color:var(--papel);border:var(--borde3);border-radius:16px;overflow:hidden;box-shadow:var(--sombra);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.post-destacado:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--negro)}
@media (max-width:860px){.post-destacado{grid-template-columns:1fr}}
.post-destacado figure{aspect-ratio:16/10;overflow:hidden;margin:0}
.post-destacado img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-destacado:hover img{transform:scale(1.05)}
.post-destacado .cuerpo{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.post-destacado small{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--amarillo);margin-bottom:10px}
.post-destacado h2{font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.25;text-transform:none;font-family:'Archivo Black';color:#fff}
.post-destacado p{font-size:.94rem;color:#B9B4A3;margin-top:10px}
.post-destacado .leer{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-top:16px;color:var(--amarillo)}