/* ============================================================
   SP — HOME + CHROME (rebrand a Seguridad Profesional)
   Reproduce el prototipo aprobado. Paleta SP:
     --sp-blue  #2ea3f2   --sp-navy #0f5f9e
     --sp-pale  #E7F4FE   --sp-footer #20262C
   Tipografía: Manrope. Reversible (git).
   ============================================================ */
:root{
  --sp-blue:#2ea3f2; --sp-navy:#0f5f9e; --sp-pale:#E7F4FE; --sp-footer:#20262C;
  --sp-ink:#17324a; --sp-mute:#4d5f75; --sp-line:#dbe9f6; --sp-bg:#f6fafe;
}
#sp-home,.sp-header,.sp-footer,.sp-hero,.sp-cats,.sp-feat,.sp-trust{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.sp-wrap{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- HEADER ---------- */
.sp-header{background:#fff;border-bottom:1px solid var(--sp-line);position:relative;z-index:20;}
.sp-header-in{display:flex;align-items:center;gap:24px;height:74px;}
.sp-logo img{height:48px;width:auto;display:block;}
/* min-width:0: sin él el flex-item no puede encoger por debajo del ul y aplasta el logo */
.sp-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;min-width:0;}
.sp-nav a{color:var(--sp-ink);text-decoration:none;font-weight:600;font-size:14.5px;
  padding:8px 8px;border-radius:8px;line-height:1;}
.sp-nav a:hover,.sp-nav a.is-active{background:var(--sp-pale);color:var(--sp-navy);}
.sp-nav a.is-ph{opacity:.55;} /* placeholder (categoría no creada) */
.sp-cart{display:inline-flex;align-items:center;gap:8px;background:var(--sp-blue);
  color:#fff;font-weight:700;font-size:14px;padding:10px 16px;border-radius:10px;
  text-decoration:none;white-space:nowrap;}
.sp-cart:hover{background:var(--sp-navy);color:#fff;}
.sp-cart .sp-cart-c{background:#fff;color:var(--sp-navy);border-radius:20px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;padding:0 6px;}

/* ---------- BUSCADOR EN HEADER (todas las páginas salvo la home; ver header.php) ----------
   Banda propia bajo la fila del logo/menú. El ancho (720) y el centrado los controla
   ESTE contenedor; el wrapper del plugin llena al 100% (ver fibosearch.css). */
.sp-hsearch-bar{background:var(--sp-bg);border-top:1px solid var(--sp-line);padding:14px 0;}
.sp-hsearch{max-width:720px;margin:0 auto;}
.sp-hsearch .dgwt-wcas-search-wrapp{max-width:100%!important;width:100%!important;margin:0!important;}
@media (max-width:560px){ .sp-hsearch-bar{padding:10px 0;} }

/* ---------- HERO ---------- */
.sp-hero{background:linear-gradient(180deg,var(--sp-pale) 0%, #f6fbff 70%, #fff 100%);
  padding:64px 0 56px;text-align:center;}
.sp-hero-title{font-size:clamp(28px,4vw,44px);line-height:1.12;font-weight:800;
  color:var(--sp-ink);margin:0 auto 14px;max-width:900px;}
.sp-hero-sub{font-size:clamp(15px,1.5vw,18px);color:var(--sp-mute);margin:0 auto 28px;max-width:680px;}
.sp-hero-search{max-width:860px;margin:0 auto 8px;}
.sp-hero-search .dgwt-wcas-search-wrapp{max-width:100%!important;width:100%!important;margin:0!important;}
.sp-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.sp-chip{background:#fff;border:1px solid var(--sp-line);color:var(--sp-navy);
  text-decoration:none;font-weight:600;font-size:13.5px;padding:7px 14px;border-radius:999px;}
.sp-chip:hover{background:var(--sp-blue);border-color:var(--sp-blue);color:#fff;}
.sp-chip.is-ph{opacity:.55;}

/* ---------- CATEGORÍAS (tiles) ---------- */
.sp-cats{padding:56px 0;background:#fff;}
.sp-eyebrow{color:var(--sp-navy);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:12px;text-align:center;margin:0 0 6px;}
.sp-h2{font-size:clamp(22px,2.5vw,30px);font-weight:800;color:var(--sp-ink);text-align:center;margin:0 0 34px;}
.sp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sp-tile{display:block;text-decoration:none;background:var(--sp-bg);border:1px solid var(--sp-line);
  border-radius:16px;padding:26px 22px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s;}
.sp-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,95,158,.14);border-color:var(--sp-blue);}
.sp-tile-ico{width:52px;height:52px;border-radius:12px;background:var(--sp-pale);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.sp-tile-ico svg{width:26px;height:26px;stroke:var(--sp-navy);fill:none;}
.sp-tile-title{font-size:17px;font-weight:800;color:var(--sp-ink);margin:0 0 4px;}
.sp-tile-sub{font-size:13.5px;color:var(--sp-mute);margin:0;}
.sp-tile.is-ph{opacity:.7;}
.sp-tile.is-ph .sp-tile-title::after{content:" [BORRADOR]";color:#b26b00;font-size:11px;font-weight:700;}

/* ---------- DESTACADOS ---------- */
.sp-feat{padding:56px 0;background:var(--sp-bg);}
.sp-feat-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap;}
.sp-feat-head .sp-h2,.sp-feat-head .sp-eyebrow{text-align:left;margin-bottom:0;}
.sp-feat-all{color:var(--sp-navy);font-weight:700;text-decoration:none;white-space:nowrap;}
.sp-feat-all:hover{color:var(--sp-blue);}
.sp-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sp-card{background:#fff;border:1px solid var(--sp-line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .15s ease,transform .15s;}
.sp-card:hover{box-shadow:0 12px 28px rgba(15,95,158,.12);transform:translateY(-2px);}
.sp-card-img{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px;border-bottom:1px solid var(--sp-line);}
.sp-card-img img{max-width:100%;max-height:100%;object-fit:contain;}
.sp-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.sp-card-cat{color:var(--sp-navy);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.sp-card-title{color:var(--sp-ink);font-size:14.5px;font-weight:700;line-height:1.3;
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;}
.sp-card-title:hover{color:var(--sp-navy);}
.sp-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
.sp-card-price{color:var(--sp-navy);font-size:19px;font-weight:800;}
.sp-card-btn{background:var(--sp-blue);color:#fff;border:none;font-weight:700;font-size:13px;
  padding:9px 14px;border-radius:10px;text-decoration:none;cursor:pointer;white-space:nowrap;}
.sp-card-btn:hover{background:var(--sp-navy);color:#fff;}

/* ---------- REDISEÑO 27-jul: badge NUEVO, fila catálogo menor, ecosistemas ---------- */
.sp-tile-new{display:inline-block;background:var(--sp-blue);color:#fff;font-size:10px;
  font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:999px;vertical-align:2px;margin-left:6px;}
.sp-also{text-align:center;margin:26px 0 0;color:var(--sp-mute);font-size:14px;}
.sp-also a{color:var(--sp-navy);font-weight:600;text-decoration:none;}
.sp-also a:hover{color:var(--sp-blue);}
.sp-ecos{padding:56px 0;background:var(--sp-bg);}
.sp-eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sp-eco-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--sp-line);
  border-radius:16px;padding:26px 24px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s;}
.sp-eco-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,95,158,.14);border-color:var(--sp-blue);}
.sp-eco-name{font-size:20px;font-weight:800;color:var(--sp-ink);margin:0;}
.sp-eco-desc{font-size:14px;color:var(--sp-mute);margin:0;flex:1;}
.sp-eco-more{color:var(--sp-navy);font-weight:700;font-size:14px;}
.sp-trust-grid.is-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:960px){
  .sp-eco-grid{grid-template-columns:1fr;}
  .sp-trust-grid.is-5{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){.sp-trust-grid.is-5{grid-template-columns:1fr;}}

/* ---------- FRANJA CONFIANZA ---------- */
.sp-trust{background:#fff;border-top:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line);padding:26px 0;}
.sp-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sp-trust-item{display:flex;align-items:center;gap:12px;justify-content:center;}
.sp-trust-item svg{width:26px;height:26px;stroke:var(--sp-blue);fill:none;flex:0 0 26px;}
.sp-trust-item b{color:var(--sp-ink);font-size:14px;display:block;}
.sp-trust-item span{color:var(--sp-mute);font-size:13px;}

/* ---------- FOOTER ---------- */
.sp-footer{background:var(--sp-footer);color:#c7d1da;padding:48px 0 26px;}
.sp-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;}
.sp-footer-brand img{height:38px;margin-bottom:14px;filter:brightness(0) invert(1);}
.sp-footer-brand p{font-size:13.5px;line-height:1.6;color:#9aa7b2;max-width:300px;}
.sp-footer h4{color:#fff;font-size:14px;font-weight:800;margin:0 0 14px;letter-spacing:.02em;}
.sp-footer ul{list-style:none;margin:0;padding:0;}
.sp-footer li{margin:0 0 9px;}
.sp-footer a{color:#c7d1da;text-decoration:none;font-size:13.5px;}
.sp-footer a:hover{color:var(--sp-blue);}
.sp-footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#8794a0;}

/* buscador del hero: refuerza el borde 2px azul del prototipo */
.sp-hero-search .dgwt-wcas-search-input{max-width:none!important;}

@media (max-width:960px){
  .sp-tiles,.sp-feat-grid{grid-template-columns:repeat(2,1fr);}
  .sp-trust-grid{grid-template-columns:repeat(2,1fr);}
  .sp-footer-grid{grid-template-columns:1fr 1fr;}
  .sp-nav{display:none;} /* menú móvil: fuera de alcance de esta home */
}
@media (max-width:560px){
  .sp-tiles,.sp-feat-grid{grid-template-columns:1fr;}
  .sp-header-in{height:auto;padding:12px 0;flex-wrap:wrap;}
}

/* ---------- LANDING CATEGORÍA (upgrade planas 27-jul): texto SEO heredado ---------- */
.sp-landing-seo{font-size:14.5px;line-height:1.7;color:var(--sp-mute);}
.sp-landing-seo h1,.sp-landing-seo h2,.sp-landing-seo h3,.sp-landing-seo h4{color:var(--sp-ink);margin:18px 0 8px;}
.sp-landing-seo p{margin:0 0 12px;}
.sp-landing-seo img{max-width:100%;height:auto;}
.sp-landing-seo a{color:var(--sp-navy);}
.sp-landing-cat ul.products{list-style:none;margin:0;padding:0;}

/* LOTE1 F5: H1 home móvil 2-3 líneas + hero landing comprimido */
@media (max-width:480px){ .sp-hero-title{font-size:22px;line-height:1.16;} }
