/* ================================================================
   HYEN — Sección de ciudad "Bucaramanga" (AG Plomería)
   Hoja externa: no se incrusta CSS en el HTML.
   Complementa a ranking-styles.css, hyen-hub.css y hyen-nav.css.

   Dos objetivos:
   (1) dar a la sección el acento naranja de AG Plomería (#fa562e)
       sin tocar la paleta azul del resto del sitio;
   (2) sustituir por clases los estilos que las secciones de ciudad
       antiguas llevaban escritos dentro del HTML.
   ================================================================ */

/* ---------- Acento de marca: AG Plomería ---------- */
body.hub-agplomeria{
  --hub-dark:#162326;--hub-dark2:#1f2d30;
  --hub-accent:#fa562e;--hub-badge:#ffb199;
}
/* En las páginas de servicio la paleta azul se conserva; solo el
   acento dorado pasa al naranja de AG. */
body.geo-ag{
  --gold:#fa562e;
  --gold-light:#ffeee9;
}

/* ---------- Sustitutos de los estilos que iban en el HTML ---------- */
.geo-hero{min-height:58vh}
.geo-cta-row{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.geo-center{text-align:center;margin-top:2rem}
.geo-mt{margin-top:1.5rem}
.geo-prose{color:var(--gray-text);line-height:1.8;margin:1rem 0}
.geo-sub-h3{
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;
  text-transform:uppercase;color:var(--blue-deep);margin-bottom:.8rem;
}
.geo-map{
  display:block;width:100%;height:420px;border:0;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.rk-section-head.is-left{text-align:left;margin-bottom:1.5rem}
.geo-faq.is-top{margin-top:1.5rem}
.rk-sidebar-title.on-dark{color:var(--white)}
.rk-sidebar-note{margin-top:.8rem;font-size:.78rem;color:rgba(255,255,255,.5)}
.lnk-accent{color:var(--gold)}
.lnk-soft{color:rgba(255,255,255,.7)}
.rk-foot-lnk{color:rgba(255,255,255,.4);margin-right:1rem}
.rk-foot-lnk:last-child{margin-right:0}

/* ---------- Bloque de norma citada (el diferenciador) ---------- */
.geo-norma{
  background:var(--gray-bg);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:1.2rem 1.4rem;margin:1.6rem 0;
}
.geo-norma p{
  margin:0 0 .6rem;font-size:.95rem;line-height:1.8;
  color:var(--text-dark);font-style:italic;
}
.geo-norma p:last-of-type{margin-bottom:0}
.geo-norma strong{font-style:normal;color:var(--blue-deep)}
.geo-norma cite{
  display:block;font-style:normal;font-size:.76rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--gray-text);
  margin-top:.5rem;
}
/* Aviso de precisión: "esta norma NO aplica aquí" */
.geo-norma.is-aviso{background:#fff8e6;border-left-color:#e0a800}
.geo-norma.is-aviso p{font-style:normal;color:#5c4a12;font-size:.92rem}

/* ---------- Listas de texto dentro de la columna ancha ---------- */
ul.geo-lista{margin:0 0 1.2rem 1.15rem}
ul.geo-lista li{font-size:.95rem;line-height:1.75;color:var(--gray-text);margin-bottom:.55rem}
ul.geo-lista li strong{color:var(--blue-deep)}

/* ---------- Ajustes del hub ---------- */
.hub-breadcrumb{justify-content:center;margin-bottom:1.2rem}
.hub-breadcrumb a{color:rgba(255,255,255,.55)}
.hub-breadcrumb span{color:rgba(255,255,255,.35)}
.hub-breadcrumb .hub-breadcrumb-actual{color:rgba(255,255,255,.85)}
.hub-section.is-tight{padding-top:0}
.hub-cta-wrap{max-width:960px;margin:0 auto;padding:0 2rem 3.5rem}
.hub-otras-nota{opacity:.55;font-weight:500}
.hub-empresa-cta{background:var(--hub-accent);box-shadow:none;white-space:nowrap}

/* ---------- Móvil ---------- */
@media (max-width:600px){
  .geo-map{height:300px}
  .geo-norma{padding:1rem 1.1rem}
  .hub-cta-wrap{padding:0 1.15rem 2.5rem}
}

/* ================================================================
   Tarjeta de ciudad de la sección "Cobertura por ciudad" del home.
   Las tarjetas antiguas llevan los estilos escritos dentro del HTML;
   la de Bucaramanga usa estas clases, con los mismos valores, para
   no seguir metiendo CSS en la página.
   ================================================================ */
.ciu-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ciu-card-top{padding:1.8rem 1.8rem 1.4rem;position:relative}
.ciu-card-top.is-ag{background:linear-gradient(135deg,#162326,#1f2d30)}
.ciu-card-ico{font-size:2.2rem;margin-bottom:.6rem}
.ciu-card-top h3{font-family:'Barlow Condensed',sans-serif;font-size:1.6rem;font-weight:800;text-transform:uppercase;color:#fff;margin-bottom:.3rem}
.ciu-card-sub{color:rgba(255,255,255,.6);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ciu-card-body{padding:1.4rem 1.8rem;flex:1}
.ciu-card-body p{font-size:.85rem;color:#5a6a7a;line-height:1.7;margin-bottom:1rem}
.ciu-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.ciu-chip{font-size:.72rem;font-weight:700;background:#f0f4ff;color:#1757c2;padding:.25rem .65rem;border-radius:100px;text-decoration:none}
.ciu-chip:hover{background:#e0eafc}
.ciu-card-foot{padding:0 1.8rem 1.4rem}
.ciu-card-btn{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:.75rem 1.2rem;border-radius:8px;font-weight:700;font-size:.88rem;text-decoration:none}
.ciu-card-btn.is-ag{background:#1f2d30}
.ciu-card-btn.is-ag:hover{background:#2c4044}
.ciu-card-btn span{font-size:1.1rem}

/* ================================================================
   Aparición suave de los bloques (.fade-up) A PRUEBA DE FALLOS.
   ranking-styles.css los deja en opacity:0 esperando que un script
   les ponga la clase "visible". Si ese script no corre, la página se
   ve en blanco. Aquí el estado oculto solo se aplica cuando
   js/hyen-anim.js ya marcó <html> con la clase "js-anim".
   ================================================================ */
.fade-up{opacity:1;transform:none}
html.js-anim .fade-up{opacity:0;transform:translateY(24px)}
html.js-anim .fade-up.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-anim .fade-up{opacity:1;transform:none;transition:none}
}

/* ---------- El hub lleva la barra superior en el color de AG ---------- */
body.hub-agplomeria .rk-nav{background:rgba(22,35,38,.97)}
body.hub-agplomeria .rk-logo span{color:var(--hub-accent)}
body.hub-agplomeria .rk-nav-links a:hover{color:var(--hub-accent)}
body.hub-agplomeria .rk-nav-cta{background:var(--hub-accent)!important;color:#fff!important}
body.hub-agplomeria .rk-nav-cta:hover{background:#fff!important;color:#1f2d30!important}
body.hub-agplomeria .rk-mob-nav{background:#162326}
body.hub-agplomeria .rk-footer-logo span{color:var(--hub-accent)}

/* ================================================================
   Tarjetas de "otras comparativas": el nombre de la tarjeta dejaba
   de ser <h4> (era un salto H2 -> H4 y un encabezado que no
   corresponde a una intención de búsqueda). Esta clase le conserva
   exactamente el aspecto que le daba .rk-related-card h4.
   ================================================================ */
.rk-related-tit{
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;
  text-transform:uppercase;margin-bottom:.3rem;
}

/* ---------- Restos de estilo escrito dentro del HTML en las comparativas ---------- */
.rk-card-map iframe{border:0;display:block}
.rk-card-img{width:100%;height:200px;object-fit:cover}