/* =================================================================
   POLIETILENO DEL CARIBE (POLICAR) — Dirección A: Autoridad accesible
   Mobile-first: las reglas base son para celular; los media queries
   (min-width) SUMAN comportamiento de tablet/escritorio. Nunca se
   sobreescribe una regla de pantalla ancha con una base colocada
   después — así evitamos el problema de cascada de la versión previa.
   ================================================================= */

:root{
  --azul-oscuro:#0B2A40;
  --azul-medio:#134A66;
  --azul-cielo:#3F87AC;
  --dorado:#C9A227;
  --dorado-suave:#E4C767;
  --crudo:#F7F5EF;
  --tinta:#182430;
  --gris:#5C6773;
  --borde:#E3DFD3;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html, body{overflow-x:hidden; max-width:100%;}
body{
  font-family:'Work Sans', sans-serif;
  color:var(--tinta);
  background:var(--crudo);
  line-height:1.55;
}
h1,h2,h3{
  font-family:'Petrona', serif;
  font-weight:700;
  letter-spacing:-0.005em;
}
.marca{ font-family:'Petrona', serif; font-weight:700; }
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
.envoltura{max-width:1180px; margin:0 auto; padding:0 20px;}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--azul-oscuro);
  border-bottom:3px solid var(--dorado);
}
.barra-superior{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; max-width:1180px; margin:0 auto;
}
.marca{color:#fff; font-size:1.1rem;}
.marca span{color:var(--dorado);}
header nav{display:none;}
.btn-wsp{
  background:var(--dorado); color:var(--azul-oscuro);
  padding:10px 16px; border-radius:2px; font-weight:600;
  font-size:0.88rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
.btn-wsp:hover{background:#fff;}
.menu-movil{
  display:flex; background:transparent; border:1.5px solid rgba(255,255,255,.5);
  border-radius:3px; width:44px; height:44px; color:#fff; font-size:1.05rem;
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-movil{
  display:none; flex-direction:column; background:var(--azul-oscuro);
  border-top:1px solid rgba(255,255,255,.15);
}
.nav-movil.abierto{display:flex;}
.nav-movil a{
  color:#DCE7EE; padding:15px 20px; border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:500; font-size:0.95rem;
}
.nav-movil a:active{background:rgba(255,255,255,.06);}

/* ---------- HERO (index) ---------- */
.hero{
  background:var(--azul-oscuro);
  padding:44px 0 0;
}
.hero-contenido{
  padding:0 20px 40px; max-width:1180px; margin:0 auto; width:100%;
}
.eyebrow-hero{
  color:var(--dorado); font-weight:600; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
}
.hero h1{
  color:#fff; font-size:clamp(1.9rem, 6vw, 3.1rem); max-width:720px;
  line-height:1.1;
}
.hero p{
  color:#CBDCE6; font-size:1.02rem; margin-top:16px; max-width:520px;
}
.hero-botones{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.btn-grande{
  padding:14px 22px; border-radius:2px; font-weight:600; font-size:0.95rem;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-amarillo{background:var(--dorado); color:var(--azul-oscuro);}
.btn-amarillo:hover{background:#fff;}
.btn-fantasma{border:1.5px solid rgba(255,255,255,.55); color:#fff;}
.btn-fantasma:hover{border-color:#fff; background:rgba(255,255,255,.08);}

.hero-foto{
  position:relative; width:100%; aspect-ratio:16/11; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-foto img{width:100%; height:100%; object-fit:cover;}
.hero-foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,42,64,.05) 0%, rgba(11,42,64,.55) 100%);
}

.hero-stats{
  display:flex; gap:26px; flex-wrap:wrap;
  margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
}
.hero-stats .stat-h b{
  display:block; font-family:'Petrona', serif; font-weight:700;
  font-size:1.3rem; color:var(--dorado);
}
.hero-stats .stat-h span{color:#B9CEDA; font-size:0.82rem; margin-top:2px; display:block;}

/* ---------- SECCIONES GENERALES ---------- */
section{padding:56px 0;}
.titulo-seccion{max-width:620px; margin-bottom:32px;}
.kicker{
  color:var(--dorado-suave); background:var(--azul-oscuro); display:inline-block;
  font-weight:600; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;
  padding:2px 0;
}
.kicker.oscura{ background:transparent; color:var(--azul-medio); padding:0; }
.titulo-seccion h2{font-size:clamp(1.45rem, 5vw, 2rem); color:var(--azul-oscuro);}
.titulo-seccion p{color:var(--gris); margin-top:10px; font-size:0.98rem;}

/* ---------- NOSOTROS ---------- */
.nosotros{background:#fff;}
.grid-nosotros{
  display:grid; grid-template-columns:1fr; gap:32px; align-items:center;
}
.grid-nosotros img{border-radius:2px; border:1px solid var(--borde);}
.lista-check{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.lista-check > div{display:flex; gap:12px; align-items:flex-start;}
.lista-check .marca-check{
  width:22px; height:22px; border-radius:50%; background:var(--azul-oscuro);
  color:var(--dorado); flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:0.76rem; font-weight:700; margin-top:2px;
}
.lista-check strong{display:block; font-size:1rem; font-family:'Petrona', serif;}
.lista-check span{color:var(--gris); font-size:0.92rem;}

/* ---------- CATEGORIAS (mini-grid, inicio) ---------- */
.categorias{background:var(--crudo);}
.grid-cat-mini{
  display:grid; grid-template-columns:1fr; gap:14px;
}
.tarjeta-cat-mini{
  background:#fff; border:1px solid var(--borde); border-radius:2px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .15s ease;
}
.tarjeta-cat-mini:hover{border-color:var(--dorado);}
.tarjeta-cat-mini .foto-mini{height:150px; overflow:hidden;}
.tarjeta-cat-mini .foto-mini img{width:100%; height:100%; object-fit:cover;}
.tarjeta-cat-mini .foto-mini-vacia{
  background:var(--crudo); display:flex; align-items:center; justify-content:center;
}
.tarjeta-cat-mini .cuerpo-mini{padding:18px 18px 20px; display:flex; flex-direction:column; gap:7px; flex-grow:1;}
.icono-cat{
  width:38px; height:38px; border-radius:50%; background:var(--azul-oscuro);
  color:var(--dorado); display:flex; align-items:center; justify-content:center;
  font-family:'Petrona', serif; font-weight:700; font-size:0.78rem; flex-shrink:0;
}
.tarjeta-cat-mini h3{font-size:1rem; color:var(--azul-oscuro); font-family:'Petrona', serif;}
.tarjeta-cat-mini p{color:var(--gris); font-size:0.86rem; flex-grow:1;}
.enlace-cat{
  color:var(--azul-medio); font-weight:600; font-size:0.85rem;
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
}
.enlace-cat:hover{color:var(--dorado);}

.cta-catalogo-completo{
  margin-top:32px; display:flex; flex-direction:column; align-items:flex-start;
  gap:18px; background:var(--azul-oscuro); border-radius:2px;
  padding:26px 24px; border-left:3px solid var(--dorado);
}
.cta-catalogo-completo h3{color:#fff; font-size:1.1rem; margin-bottom:6px;}
.cta-catalogo-completo p{color:#CBDCE6; font-size:0.92rem;}

/* ---------- MAYOREO ---------- */
.mayoreo{ background:var(--azul-oscuro); color:#fff; }
.grid-mayoreo{ display:grid; grid-template-columns:1fr; gap:34px; align-items:center; }
.mayoreo .kicker{ background:transparent; color:var(--dorado-suave); padding:0; }
.mayoreo h2{color:#fff;}
.mayoreo p{color:#CBDCE6; margin-top:12px; font-size:0.98rem;}
.stat-fila{display:flex; gap:30px; margin-top:26px; flex-wrap:wrap;}
.stat b{display:block; font-size:1.5rem; font-family:'Petrona', serif; color:var(--dorado);}
.stat span{color:#B9CEDA; font-size:0.85rem;}
.panel-mayoreo{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:3px; padding:26px;
}
.panel-mayoreo h3{color:#fff; font-size:1.05rem; margin-bottom:14px; font-family:'Petrona', serif;}
.panel-mayoreo ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.panel-mayoreo li{color:#DCEAF3; font-size:0.92rem; padding-left:16px; position:relative;}
.panel-mayoreo li::before{
  content:''; position:absolute; left:0; top:8px; width:6px; height:6px;
  background:var(--dorado); border-radius:50%;
}

/* ---------- CONTACTO ---------- */
.contacto{background:#fff;}
.grid-contacto{ display:grid; grid-template-columns:1fr; gap:34px; }
.dato-contacto{display:flex; gap:14px; margin-bottom:22px; align-items:flex-start;}
.dato-contacto .icono{
  width:40px; height:40px; border-radius:50%; background:var(--crudo);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid var(--borde);
}
.dato-contacto strong{display:block; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gris);}
.dato-contacto p{font-size:1rem; margin-top:2px;}
.enlace-mapa{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  color:var(--azul-medio); font-weight:600; font-size:0.88rem;
}
.enlace-mapa:hover{color:var(--dorado);}
.tarjeta-cta{
  background:var(--crudo); border:1px solid var(--borde); border-radius:3px;
  padding:30px; text-align:left;
}
.tarjeta-cta h3{color:var(--azul-oscuro); font-size:1.2rem; margin-bottom:8px;}
.tarjeta-cta p{color:var(--gris); margin-bottom:20px;}

footer{
  background:var(--azul-oscuro); color:#B9CEDA; padding:28px 0; font-size:0.85rem;
}
.pie{
  display:flex; flex-direction:column; gap:8px;
}
.pie .marca{font-size:1rem; color:#fff;}

/* =================================================================
   PÁGINA DE CATÁLOGO COMPLETO
   ================================================================= */
.catalogo-hero{
  background:var(--azul-oscuro); padding:36px 0 30px; border-bottom:3px solid var(--dorado);
}
.catalogo-hero .kicker{background:transparent; color:var(--dorado-suave); padding:0;}
.catalogo-hero h1{color:#fff; font-size:clamp(1.5rem, 5.5vw, 2.2rem);}
.catalogo-hero p{color:#CBDCE6; margin-top:10px; font-size:0.96rem; max-width:600px;}

.nav-rapida{
  position:sticky; top:0; z-index:40; background:#fff;
  border-bottom:1px solid var(--borde);
  overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
}
.nav-rapida .envoltura{padding-top:10px; padding-bottom:10px;}
.nav-rapida a{
  display:inline-block; margin-right:8px; padding:7px 14px;
  background:var(--crudo); border:1px solid var(--borde); border-radius:20px;
  font-size:0.82rem; font-weight:500; color:var(--azul-medio);
  scroll-snap-align:start;
}
.nav-rapida a:hover{background:var(--azul-oscuro); color:#fff; border-color:var(--azul-oscuro);}

.bloque-categoria{
  padding:34px 0; border-bottom:1px solid var(--borde);
}
.bloque-categoria:nth-child(even){background:#fff;}
.fila-categoria{
  display:flex; flex-direction:column; gap:22px;
}
.foto-cat{border-radius:2px; overflow:hidden; height:200px; border:1px solid var(--borde);}
.foto-cat img{width:100%; height:100%; object-fit:cover;}
.foto-cat-vacia{
  background:var(--crudo); display:flex; align-items:center; justify-content:center;
}
.foto-cat-vacia .icono-cat{width:52px; height:52px; font-size:0.95rem;}

.galeria-cat{display:flex; flex-direction:column; gap:7px;}
.galeria-cat .foto-principal{
  height:210px; border-radius:2px; overflow:hidden; border:1px solid var(--borde);
}
.galeria-cat .foto-principal img{width:100%; height:100%; object-fit:cover;}
.fila-secundarias{display:flex; gap:7px;}
.foto-secundaria{
  flex:1; height:92px; border-radius:2px; overflow:hidden; border:1px solid var(--borde);
}
.foto-secundaria img{width:100%; height:100%; object-fit:cover;}

.cabecera-bloque{margin-bottom:14px;}
.cabecera-bloque h2{color:var(--azul-oscuro); font-size:1.3rem;}
.cabecera-bloque p{color:var(--gris); font-size:0.9rem; margin-top:6px; max-width:560px;}
.grid-items{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
}
.chip-item{
  background:#fff; border:1px solid var(--borde); border-radius:2px;
  padding:8px 13px; font-size:0.86rem; color:var(--tinta);
}
.chip-item b{color:var(--azul-medio); font-weight:600;}
.bloque-categoria:nth-child(even) .chip-item{background:var(--crudo);}
.btn-cat-wsp{
  background:var(--azul-oscuro); color:#fff; padding:11px 20px; border-radius:2px;
  font-weight:600; font-size:0.88rem; display:inline-flex; align-items:center; gap:8px;
  width:100%; justify-content:center;
}
.btn-cat-wsp:hover{background:var(--dorado); color:var(--azul-oscuro);}

/* =================================================================
   MEDIA QUERIES — mobile-first: cada una SUMA reglas para pantallas
   más anchas; nunca se coloca una regla base después de estas.
   ================================================================= */

/* Tablet: ≥700px */
@media (min-width: 700px){
  .envoltura{padding:0 28px;}
  header nav{display:flex; gap:24px;}
  header nav a{color:#DCEAF3; font-weight:500; font-size:0.92rem;}
  header nav a:hover{color:var(--dorado);}
  .menu-movil{display:none;}
  .barra-superior{padding:16px 28px;}
  .marca{font-size:1.2rem;}

  .hero{display:flex; align-items:stretch;}
  .hero-contenido{padding:56px 28px 48px; flex:1.05;}
  .hero-foto{flex:0.95; aspect-ratio:auto; border-top:none; border-left:1px solid rgba(255,255,255,.12);}

  .grid-nosotros{grid-template-columns:1fr 1fr; gap:44px;}
  .grid-cat-mini{grid-template-columns:repeat(2,1fr);}
  .grid-mayoreo{grid-template-columns:1fr 1fr; gap:44px;}
  .grid-contacto{grid-template-columns:1fr 1fr; gap:44px;}

  .cta-catalogo-completo{flex-direction:row; align-items:center; justify-content:space-between; padding:30px 32px;}

  .pie{flex-direction:row; justify-content:space-between; align-items:center;}

  .fila-categoria{flex-direction:row; align-items:flex-start;}
  .fila-categoria > *:first-child{width:230px; flex-shrink:0;}
  .fila-categoria > *:last-child{flex:1;}
  .btn-cat-wsp{width:auto;}
}

/* Escritorio: ≥1024px */
@media (min-width: 1024px){
  section{padding:78px 0;}
  .hero-contenido{padding:70px 28px 60px;}
  .grid-cat-mini{grid-template-columns:repeat(4,1fr);}
  .fila-categoria > *:first-child{width:280px;}
}