/* ============================================================
   UNIDOS POR PEREIRA — Capa visual
   Se carga después de estilo.css y solo cambia la presentación.
   Ningún selector nuevo altera comportamiento.
   ============================================================ */

:root{
  /* Paleta de la identidad */
  --papel:#FCF5E9;
  --superficie:#FFFFFF;
  --tinta:#12315B;
  --tinta-70:#3B5578;
  --tinta-45:#6B7F9B;
  --marca:#12315B;
  --marca-clara:#63C3E8;
  --amarillo:#FFC62B;
  --critico:#E32B27;
  --ok:#12855A;
  --atencion:#C77E00;
  --borde:#E3D9C6;
  --borde-fuerte:#12315B;
  --sombra:0 1px 0 rgba(18,49,91,.03), 0 3px 14px rgba(18,49,91,.07);
  --r:14px;
  --ancho:1180px;
}

body{ background:var(--papel); }

/* --- Aros decorativos de fondo -------------------------- */
body::before, body::after{
  content:""; position:fixed; z-index:0; pointer-events:none;
  border-radius:50%; border:14px solid transparent;
}
body::before{
  width:340px; height:340px; top:120px; left:-170px;
  border-color:var(--amarillo) transparent var(--marca-clara) transparent;
  opacity:.5;
}
body::after{
  width:420px; height:420px; top:60px; right:-210px;
  border-color:var(--marca) transparent var(--marca-clara) transparent;
  opacity:.35;
}
.emergencia, .cabecera, .nav, main, .pie, .barra-inferior{ position:relative; z-index:1; }
@media (max-width:900px){ body::before, body::after{ display:none; } }

/* ============================================================
   Barra de emergencia
   ============================================================ */
.emergencia{
  background:var(--critico); color:#fff;
  font-family:var(--cuerpo); font-size:15px;
  letter-spacing:0; text-transform:none;
}
.emergencia .env{
  justify-content:center; gap:6px 26px;
  padding-top:9px; padding-bottom:9px; text-align:center;
}
.emergencia span{ display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.emergencia span::before{ font-size:15px; }
.emergencia span:nth-child(1)::before{ content:"⚠"; }
.emergencia span:nth-child(2)::before{ content:"🔔"; }
.emergencia span:last-child::before{ content:"🕐"; }
.emergencia a{ color:#fff; border-bottom:0; text-decoration:none; }
.emergencia a:hover{ text-decoration:underline; }
.emergencia b{ font-weight:600; }

/* ============================================================
   Encabezado: logo · menú · botón
   ============================================================ */
.cabecera{ background:transparent; border-bottom:0; padding:16px 0 6px; }
.cabecera__fila{ gap:26px; }
.marca__logo{ height:clamp(46px,4.4vw,62px); }
.marca__lema{ display:none; }

/* El reloj deja de ser tira azul y se vuelve discreto */
.cabecera .reloj{
  background:transparent; border:0; margin:0;
  display:none;                       /* la hora ya va en la barra roja */
}

.menu-top{
  display:flex; align-items:center; gap:30px; flex:1 1 auto;
  justify-content:center; flex-wrap:wrap;
}
.menu-top a{
  color:var(--tinta); text-decoration:none;
  font-size:17px; font-weight:600; padding:6px 2px;
  border-bottom:3px solid transparent;
}
.menu-top a:hover{ color:var(--critico); }
.menu-top a.activo{ border-bottom-color:var(--critico); }

.btn-ruta{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--marca); color:#fff; text-decoration:none;
  border-radius:99px; padding:13px 24px; min-height:50px;
  font-size:16px; font-weight:600; white-space:nowrap;
}
.btn-ruta:hover{ background:#0B2242; }

/* ============================================================
   Portada
   ============================================================ */
.portada{ text-align:center; padding:22px 0 6px; }
.portada__t{
  font-family:var(--display); font-weight:700;
  font-size:clamp(38px,7vw,74px); line-height:.95;
  text-transform:uppercase; color:var(--tinta);
  margin:0 0 12px; letter-spacing:-.01em;
}
.portada__d{
  font-size:clamp(16px,1.7vw,19px); color:var(--tinta-70);
  margin:0 auto 26px; max-width:60ch;
}

/* Dos accesos grandes */
.accesos{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px; }
.acceso{
  display:flex; align-items:center; gap:20px; text-align:left;
  background:var(--superficie); border:2px solid var(--marca);
  border-radius:var(--r); padding:20px 24px; text-decoration:none;
  min-height:104px; box-shadow:var(--sombra);
}
.acceso:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(18,49,91,.14); }
.acceso__ico{
  flex:0 0 auto; width:74px; height:74px; border-radius:50%;
  background:var(--marca); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:34px;
}
.acceso__t{
  font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,38px);
  text-transform:uppercase; line-height:1; margin:0 0 5px; color:var(--tinta);
}
.acceso__d{ margin:0; font-size:15.5px; color:var(--tinta-70); }
.acceso--rojo{ border-color:var(--critico); }
.acceso--rojo .acceso__ico{ background:var(--critico); }
.acceso--rojo .acceso__t{ color:var(--critico); }
@media (max-width:820px){ .accesos{ grid-template-columns:1fr; } }

/* Buscador */
.buscador{ margin:0 0 18px; }
.buscador form{
  display:flex; gap:0; background:var(--superficie);
  border:2px solid var(--marca); border-radius:99px; overflow:hidden;
  box-shadow:var(--sombra);
}
.buscador input[type=search]{
  flex:1 1 auto; border:0; background:transparent;
  padding:16px 20px 16px 52px; min-height:58px; font-size:16.5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312315B' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:20px center; background-size:20px;
}
.buscador input[type=search]:focus-visible{ outline-offset:-3px; }
.buscador button{
  flex:0 0 auto; border:0; border-radius:99px; margin:6px;
  background:var(--marca); color:#fff; padding:0 30px;
  font-size:16px; font-weight:600; cursor:pointer; min-height:46px;
}
.buscador button:hover{ background:#0B2242; }

/* Accesos por categoría */
.categorias{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px; }
.categoria{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:var(--superficie); border:1.5px solid var(--marca); border-radius:var(--r);
  padding:20px 10px; text-decoration:none; color:var(--tinta);
  font-size:15.5px; font-weight:600; text-align:center; min-height:112px;
}
.categoria:hover{ background:#F2F7FC; transform:translateY(-2px); }
.categoria__ico{ font-size:30px; line-height:1; }
@media (max-width:900px){ .categorias{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){ .categorias{ grid-template-columns:repeat(2,1fr); } }

/* Alerta oficial */
.alerta-oficial{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--superficie); border:1.5px solid var(--critico);
  border-radius:var(--r); padding:15px 18px; margin-bottom:26px;
}
.alerta-oficial__ico{ font-size:22px; color:var(--critico); }
.alerta-oficial p{ margin:0; flex:1 1 260px; font-size:15.5px; }
.alerta-oficial strong{ color:var(--critico); }
.alerta-oficial a{
  background:var(--critico); color:#fff; text-decoration:none;
  border-radius:8px; padding:10px 18px; min-height:44px;
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
}
.alerta-oficial a:hover{ background:#C2211D; }

/* ============================================================
   Ajustes a los componentes que ya existían
   ============================================================ */
.bloque__t, .area__t, .subbloque__t{ color:var(--tinta); }
.bloque__t{ font-weight:700; }
.tarjeta{ border-radius:var(--r); border-left-width:5px; }
.chip{ border-radius:99px; }
.chip--ok{ background:#E3F5EC; border-color:#9FD9C0; color:#0B6B47; }
.chip--critico{ background:#FDE7E6; border-color:#F0AFAD; color:#B31E1A; }
.btn{ border-radius:10px; font-weight:600; }
.filtros, .panel, .dia, .mapa-caja, .legal{ border-radius:var(--r); }
.destacado{ background:linear-gradient(180deg,#12315B 0%,#0C2447 100%); border-radius:var(--r); }
.nav{ background:var(--superficie); border-bottom:1px solid var(--borde); }
.nav a{ border-radius:99px; border-color:var(--borde); }
.nav a:hover{ border-color:var(--marca); color:var(--marca); }
.nav a.nav--alerta{ border-color:var(--critico); color:var(--critico); }
.pie{ background:var(--tinta); }

/* ============================================================
   Barra inferior en el celular
   ============================================================ */
.barra-inferior{ display:none; }
@media (max-width:820px){
  .barra-inferior{
    display:flex; position:fixed; left:0; right:0; z-index:8800;
    bottom:0; background:var(--marca);
    padding:8px 6px max(8px, env(safe-area-inset-bottom));
    box-shadow:0 -3px 16px rgba(18,49,91,.28);
  }
  .barra-inferior a{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:#C9DCEC; text-decoration:none; font-size:12px; font-weight:600;
    padding:6px 2px; min-height:52px; border-radius:10px; text-align:center;
  }
  .barra-inferior a span{ font-size:20px; line-height:1; }
  .barra-inferior a.activo{ color:var(--amarillo); }
  .barra-inferior a:hover{ background:rgba(255,255,255,.1); }

  /* Que nada quede tapado por la barra */
  body{ padding-bottom:74px; }
  .flotante{ bottom:calc(74px + env(safe-area-inset-bottom)); }
  .acces{ bottom:calc(74px + env(safe-area-inset-bottom)); }
  .cookies{ bottom:74px; }
  .lote-barra{ bottom:calc(80px + env(safe-area-inset-bottom)); }

  .menu-top{ display:none; }
  .btn-ruta{ display:none; }
  .cabecera__fila{ justify-content:space-between; }
}

/* Menú de hamburguesa en el celular */
.menu-boton{
  display:none; background:transparent; border:0; cursor:pointer;
  width:48px; height:48px; align-items:center; justify-content:center;
  color:var(--tinta); font-size:27px; line-height:1;
}
@media (max-width:820px){ .menu-boton{ display:flex; } }

/* ============================================================
   Móvil
   ============================================================ */
@media (max-width:640px){
  .emergencia{ font-size:13.5px; }
  .emergencia .env{ gap:3px 16px; }
  .portada{ padding:14px 0 4px; }
  .portada__t{ font-size:clamp(30px,9vw,44px); }
  .portada__d{ font-size:15.5px; margin-bottom:20px; }
  .acceso{ padding:16px; gap:14px; min-height:88px; }
  .acceso__ico{ width:58px; height:58px; font-size:27px; }
  .acceso__t{ font-size:25px; }
  .acceso__d{ font-size:14px; }
  .buscador input[type=search]{ min-height:52px; font-size:16px; padding-left:46px; }
  .buscador button{ padding:0 18px; font-size:15px; }
  .categoria{ min-height:96px; padding:15px 8px; font-size:14px; }
  .categoria__ico{ font-size:26px; }
  .alerta-oficial{ padding:13px; }
  .alerta-oficial a{ width:100%; justify-content:center; }
}

/* ============================================================
   Cómo funciona
   ============================================================ */
.pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.paso{
  background:var(--superficie); border:1.5px solid var(--borde);
  border-radius:var(--r); padding:20px 18px; box-shadow:var(--sombra);
}
.paso__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--marca); color:#fff;
  font-family:var(--display); font-size:20px; font-weight:700; margin-bottom:11px;
}
.paso__t{ font-family:var(--display); font-size:21px; margin:0 0 5px; color:var(--tinta); }
.paso__d{ margin:0; font-size:15px; color:var(--tinta-70); line-height:1.5; }
@media (max-width:900px){ .pasos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pasos{ grid-template-columns:1fr; } }

.publicamos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.publicamos__caja{
  background:var(--superficie); border:1.5px solid var(--borde);
  border-radius:var(--r); padding:18px;
}
.publicamos__caja--si{ border-color:#9FD9C0; }
.publicamos__caja--no{ border-color:#F0AFAD; }
.publicamos__t{ font-family:var(--display); font-size:19px; margin:0 0 10px; display:flex; gap:8px; align-items:center; }
.publicamos__caja--si .publicamos__t{ color:#0B6B47; }
.publicamos__caja--no .publicamos__t{ color:#B31E1A; }
.publicamos ul{ margin:0; padding-left:20px; }
.publicamos li{ font-size:15px; margin-bottom:5px; color:var(--tinta-70); }
@media (max-width:700px){ .publicamos{ grid-template-columns:1fr; } }

/* El menú de secciones se despliega en el celular */
@media (max-width:820px){
  .nav{ display:none; }
  .nav.nav--abierto{ display:block; }
  .nav.nav--abierto .env{
    flex-wrap:wrap; overflow:visible; mask-image:none; -webkit-mask-image:none;
    padding-top:12px; padding-bottom:12px;
  }
  .nav.nav--abierto a{ flex:1 1 46%; justify-content:center; }
  .nav.nav--abierto .nav__grupo{ display:block; flex:1 1 100%; margin:6px 0 2px; }
}