/* ==========================================================================
   CENTRO COMERCIAL PIJAOS · El Espinal, Tolima
   Hoja de estilos principal — identidad: sol amarillo sobre tinta cálida
   ========================================================================== */

:root{
  --sol:        #F5CE31;   /* amarillo del logo */
  --sol-hondo:  #E9B915;   /* amarillo profundo (hover) */
  --tinta:      #1B1611;   /* negro cálido */
  --tinta-70:   rgba(27,22,17,.70);
  --tinta-45:   rgba(27,22,17,.45);
  --crema:      #FDF6E3;   /* papel bajo el sol */
  --blanco:     #FFFFFF;
  --linea:      #EDE3C8;   /* bordes suaves */
  --wsp:        #23B551;

  --f-titulo: "Fredoka", "Trebuchet MS", sans-serif;
  --f-texto:  "Figtree", "Segoe UI", Arial, sans-serif;

  --ancho: 1120px;
  --radio: 18px;
  --sombra: 0 10px 30px rgba(27,22,17,.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-texto);
  font-size:16.5px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:inline-block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--f-titulo); line-height:1.12; margin:0 0 .4em; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

.contenedor{ width:min(var(--ancho), 92%); margin-inline:auto; }
.seccion{ padding:clamp(56px, 8vw, 96px) 0; }

:focus-visible{ outline:3px solid var(--sol); outline-offset:3px; border-radius:6px; }

/* ---------- Barra de navegación ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--tinta);
  color:var(--blanco);
  box-shadow:0 2px 14px rgba(0,0,0,.25);
}
.nav-int{
  display:flex; align-items:center; gap:22px;
  min-height:66px;
}
.nav-marca{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.nav-marca img{ height:44px; width:auto; }
.nav-marca span{
  font-family:var(--f-titulo); font-weight:600; font-size:17px; letter-spacing:.02em;
  color:var(--sol); line-height:1.05;
}
.nav-links{ display:flex; gap:6px; align-items:center; }
.nav-links a{
  text-decoration:none; font-weight:600; font-size:15px;
  padding:9px 13px; border-radius:999px; color:#F4EEDE;
  transition:background .18s, color .18s;
}
.nav-links a:hover{ background:rgba(245,206,49,.16); color:var(--sol); }
.nav-cta{
  background:var(--sol); color:var(--tinta) !important;
  font-weight:700 !important; margin-left:6px;
}
.nav-cta:hover{ background:var(--sol-hondo) !important; }

.hamburguesa{
  display:none; background:none; border:2px solid rgba(255,255,255,.35);
  border-radius:10px; color:var(--sol); font-size:22px; line-height:1;
  padding:7px 11px; cursor:pointer;
}

/* ---------- Héroe: amanecer Pijaos ---------- */
.heroe{
  position:relative;
  padding:clamp(48px, 7vw, 84px) 0 0;
  overflow:hidden;
  text-align:center;
}
.heroe-cinta{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:13.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-70);
  margin-bottom:18px;
}
.heroe-cinta::before,.heroe-cinta::after{
  content:""; width:26px; height:3px; border-radius:99px; background:var(--sol);
}
.heroe h1{
  font-size:clamp(2.35rem, 5.4vw, 4.15rem);
  font-weight:600;
  max-width:17ch;
  margin-inline:auto;
}
.heroe h1 em{ font-style:normal; background:linear-gradient(transparent 62%, var(--sol) 62%); padding:0 .08em; }
.heroe-sub{
  max-width:640px; margin:14px auto 26px; font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:var(--tinta-70);
}
.heroe-botones{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }

.boton{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-texto); font-weight:700; font-size:16px;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  border:2.5px solid var(--tinta);
  transition:transform .18s, background .18s, box-shadow .18s;
}
.boton:hover{ transform:translateY(-2px); }
.boton-sol{ background:var(--sol); color:var(--tinta); box-shadow:0 8px 20px rgba(233,185,21,.45); }
.boton-sol:hover{ background:var(--sol-hondo); }
.boton-tinta{ background:var(--tinta); color:var(--sol); border-color:var(--tinta); }
.boton-tinta:hover{ background:#000; }
.boton-fantasma{ background:transparent; color:var(--tinta); }
.boton-fantasma:hover{ background:rgba(27,22,17,.06); }

/* El sol que amanece sobre el horizonte (composición del logo, a gran escala) */
.amanecer{ position:relative; margin-top:clamp(10px, 3vw, 30px); }
.amanecer .sol-grande{
  display:block; margin:0 auto -6px;
  width:min(400px, 58vw);
  animation:salidaDeSol 1.3s cubic-bezier(.2,.8,.3,1) both;
}
.horizonte{
  position:relative; z-index:2;
  height:clamp(14px, 2vw, 20px);
  background:var(--sol);
  border-radius:999px;
  width:min(980px, 94%);
  margin:0 auto;
  box-shadow:0 6px 24px rgba(233,185,21,.55);
}
@keyframes salidaDeSol{
  from{ transform:translateY(46%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.datos-rapidos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 30px;
  padding:20px 4% 30px;
  font-weight:700; font-size:15.5px;
}
.datos-rapidos span{ display:inline-flex; align-items:center; gap:10px; }
.datos-rapidos span::before{
  content:""; width:9px; height:9px; background:var(--sol);
  transform:rotate(45deg); border-radius:2px;
}

/* ---------- Carrusel de marcas ---------- */
.marquesina{
  background:var(--blanco);
  border-top:1.5px solid var(--linea);
  border-bottom:1.5px solid var(--linea);
  overflow:hidden;
  padding:22px 0;
}
.marquesina-pista{
  display:flex; width:max-content;
  animation:desfile 52s linear infinite;
}
.marq-grupo{ display:flex; align-items:center; gap:56px; padding-right:56px; }
.marquesina:hover .marquesina-pista{ animation-play-state:paused; }
.marquesina-pista img{
  height:44px; width:auto; max-width:170px; object-fit:contain;
  filter:saturate(.96);
}
@keyframes desfile{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Encabezados de sección ---------- */
.encabezado{ max-width:720px; margin-bottom:clamp(28px, 4vw, 44px); }
.encabezado.centrado{ margin-inline:auto; text-align:center; }
.encabezado .ceja{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta-70); margin-bottom:10px;
}
.encabezado .ceja::before{ content:""; width:30px; height:4px; border-radius:99px; background:var(--sol); }
.encabezado h2{ font-size:clamp(1.85rem, 3.6vw, 2.7rem); font-weight:600; }
.encabezado p{ color:var(--tinta-70); margin-bottom:0; }

/* ---------- Vive Pijaos ---------- */
.vive{ background:var(--crema); }
.vive-grilla{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px;
}
.vive-tarjeta{
  background:var(--blanco); border:1.5px solid var(--linea);
  border-radius:var(--radio); padding:26px 24px;
  box-shadow:var(--sombra);
  transition:transform .2s, box-shadow .2s;
}
.vive-tarjeta:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(27,22,17,.12); }
.vive-icono{
  width:54px; height:54px; border-radius:16px;
  background:var(--sol);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:14px;
  box-shadow:inset 0 -4px 0 rgba(27,22,17,.14);
}
.vive-tarjeta h3{ font-size:1.2rem; font-weight:600; }
.vive-tarjeta p{ font-size:15px; color:var(--tinta-70); margin:0; }

/* ---------- Directorio ---------- */
.directorio{ background:var(--blanco); }
.filtros{
  display:flex; flex-direction:column; gap:16px;
  margin-bottom:26px;
}
.buscador{ position:relative; max-width:520px; }
.buscador input{
  width:100%; font:600 16px var(--f-texto);
  padding:15px 20px 15px 50px;
  border-radius:999px; border:2px solid var(--tinta);
  background:var(--crema); color:var(--tinta);
}
.buscador input::placeholder{ color:var(--tinta-45); font-weight:500; }
.buscador svg{
  position:absolute; left:19px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; stroke:var(--tinta); fill:none; stroke-width:2.4;
}
.chips{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.chips-titulo{
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-45); margin-right:4px;
}
.chip{
  font:700 14px var(--f-texto);
  padding:9px 17px; border-radius:999px; cursor:pointer;
  border:2px solid var(--tinta); background:var(--blanco); color:var(--tinta);
  transition:background .15s, color .15s, transform .15s;
}
.chip:hover{ transform:translateY(-1px); background:var(--crema); }
.chip.activo{ background:var(--tinta); color:var(--sol); }

.contador{ font-weight:600; color:var(--tinta-70); font-size:15px; margin:4px 0 18px; }

.grilla-tiendas{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:16px;
}
.tienda{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio);
  padding:20px 18px 18px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.tienda:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--sol); }
.tienda-logo{
  height:104px; width:100%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.tienda-logo img{ max-height:96px; max-width:88%; width:auto; object-fit:contain; }
.tienda h3{ font-size:1.06rem; font-weight:600; margin-bottom:8px; }
.tienda-meta{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0; }
.etq{
  font-size:12px; font-weight:700; letter-spacing:.03em;
  padding:4.5px 11px; border-radius:999px;
}
.etq-cat{ background:var(--crema); border:1.5px solid var(--linea); color:var(--tinta-70); }
.etq-local{ background:var(--sol); color:var(--tinta); }
.etq-isla{ background:var(--tinta); color:var(--sol); }
.etq-mezz{ background:var(--blanco); color:var(--tinta); border:2px solid var(--tinta); }

/* Monogramas para marcas sin logo */
.monograma{
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:600 1.65rem var(--f-titulo); letter-spacing:.01em;
}
.m1{ background:var(--sol); color:var(--tinta); }
.m2{ background:var(--tinta); color:var(--sol); }
.m3{ background:var(--crema); color:var(--tinta); border:2.5px solid var(--tinta); }
.m4{ background:var(--blanco); color:var(--tinta); box-shadow:0 0 0 2.5px var(--sol) inset, 0 0 0 6px var(--crema) inset; border:2.5px solid var(--sol); }

.sin-resultados{
  display:none;
  text-align:center; padding:44px 20px;
  background:var(--crema); border-radius:var(--radio);
  font-weight:600; color:var(--tinta-70);
}
.sin-resultados.visible{ display:block; }

/* ---------- Franja de redes ---------- */
.redes{
  background:var(--tinta); color:var(--blanco);
  text-align:center;
  background-image:radial-gradient(circle at 50% 130%, rgba(245,206,49,.28), transparent 55%);
}
.redes h2{ color:var(--blanco); font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:600; max-width:22ch; margin-inline:auto; }
.redes h2 em{ font-style:normal; color:var(--sol); }
.redes p{ color:rgba(255,255,255,.75); max-width:560px; margin:10px auto 26px; }
.redes-botones{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.redes .boton{ border-color:var(--sol); }

/* ---------- Visítanos ---------- */
.visita-grilla{
  display:grid; grid-template-columns:1fr 1.15fr; gap:26px; align-items:start;
}
.visita-tarjetas{ display:grid; gap:14px; }
.info-tarjeta{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio);
  padding:22px 24px; box-shadow:var(--sombra);
  display:flex; gap:16px; align-items:flex-start;
}
.info-icono{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  background:var(--sol); display:flex; align-items:center; justify-content:center; font-size:22px;
}
.info-tarjeta h3{ font-size:1.08rem; font-weight:600; margin-bottom:4px; }
.info-tarjeta p{ margin:0; font-size:15.5px; color:var(--tinta-70); }
.info-tarjeta a{ color:var(--tinta); font-weight:700; text-decoration-color:var(--sol); text-decoration-thickness:2.5px; }
.mapa{
  border-radius:var(--radio); overflow:hidden;
  border:2.5px solid var(--tinta);
  box-shadow:var(--sombra);
  min-height:420px; height:100%;
}
.mapa iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }

/* ---------- Pie de página ---------- */
.pie{
  background:var(--tinta); color:#D8D2C4;
  padding:50px 0 26px;
}
.pie-grilla{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.14);
}
.pie img{
  height:auto; width:150px; margin-bottom:14px;
  background:var(--crema); padding:14px 16px; border-radius:16px;
}
.pie h4{
  font-family:var(--f-titulo); color:var(--sol); font-weight:600;
  font-size:1.05rem; margin:0 0 12px; letter-spacing:.02em;
}
.pie p{ font-size:14.5px; margin:0 0 8px; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pie a{ color:#D8D2C4; text-decoration:none; font-size:14.5px; }
.pie a:hover{ color:var(--sol); text-decoration:underline; text-decoration-color:var(--sol); }
.pie-final{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  padding-top:22px; font-size:13.5px; color:rgba(216,210,196,.75);
}

/* ---------- Botón flotante WhatsApp ---------- */
.wsp-flotante{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:var(--wsp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(35,181,81,.5);
  transition:transform .18s;
}
.wsp-flotante:hover{ transform:scale(1.08); }
.wsp-flotante svg{ width:30px; height:30px; fill:#fff; }

/* ---------- Aparición al hacer scroll ---------- */
.revelar{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.revelar.visible{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .visita-grilla{ grid-template-columns:1fr; }
  .mapa, .mapa iframe{ min-height:340px; }
  .pie-grilla{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .hamburguesa{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--tinta);
    flex-direction:column; align-items:stretch; gap:4px;
    padding:12px 5% 18px;
    border-top:1px solid rgba(255,255,255,.12);
    display:none;
  }
  .nav-links.abierto{ display:flex; }
  .nav-links a{ text-align:center; padding:13px; font-size:16px; }
  .nav-cta{ margin-left:0; }
}
@media (max-width: 560px){
  body{ font-size:15.5px; }
  .grilla-tiendas{ grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:12px; }
  .tienda{ padding:16px 12px 14px; }
  .tienda-logo{ height:84px; }
  .tienda-logo img{ max-height:76px; }
  .tienda h3{ font-size:.97rem; }
  .etq{ font-size:11px; padding:4px 9px; }
  .monograma{ width:64px; height:64px; font-size:1.4rem; }
  .pie-grilla{ grid-template-columns:1fr; }
  .datos-rapidos{ gap:8px 18px; font-size:14px; }
  .marquesina-pista{ gap:38px; }
  .marquesina-pista img{ height:36px; max-width:130px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .amanecer .sol-grande{ animation:none; }
  .marquesina-pista{ animation:none; width:auto; }
  .marq-grupo{ flex-wrap:wrap; justify-content:center; padding-right:0; }
  .marq-grupo[aria-hidden]{ display:none; }
  .revelar{ opacity:1; transform:none; transition:none; }
  *{ transition:none !important; }
}