/* ===== creditenban marketing - Cerámica ===== */
:root{
  --marron:#4A2E18;
  --marron-claro:#6F4226;
  --ocre:#A9753B;
  --oro:#B98A4E;
  --crema:#F6EDE3;
  --arena:#EFE3CB;
  --texto:#2E2013;
  --blanco:#FFFFFF;
  --text:#2E2013;
  --oranja:#B9802F;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Segoe UI',Arial,sans-serif;
  color:var(--text);
  background:var(--arena);
  line-height:1.7;
}
img{max-width:100%;display:block;}

/* ---------- BARRA SUPERIOR (marquee fija) ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--marron);
  color:#F2D9A8;
  overflow:hidden;padding:10px 0;
  border-bottom:2px solid var(--oro);
}
.topbar .marquee{
  display:flex;white-space:nowrap;will-change:transform;
  animation:deslizar 28s linear infinite;
}
@keyframes deslizar{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.topbar span{
  padding:0 40px;font-size:.95rem;
}
.topbar .marquee b{color:#FFD86B;}

/* ---------- HEADER / MENU ---------- */
header{
  position:sticky;top:var(--topbar-h,44px);z-index:49;
  background:rgba(246,237,227,.96);
  border-bottom:3px solid var(--oro);
  box-shadow:0 4px 12px rgba(74,46,24,.12);
}
.nav-c{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 3%;
  flex-wrap:wrap;
}
.logo a{display:block;}
.logo img{height:52px;width:auto;cursor:pointer;}
nav ul{display:flex;list-style:none;gap:4px;}
nav ul a{padding:.65rem 1rem;font-weight:600;color:var(--marron);text-decoration:none;border-radius:6px;transition:.25s;}
nav ul a:hover{background:var(--marron);color:var(--crema);}
nav ul a.activo{background:var(--oro);color:var(--marron);}
.hamburguesa{display:none;background:none;border:none;font-size:1.7rem;cursor:pointer;color:var(--marron);}

/* ---------- HERO ---------- */
.hero{
  position:relative;text-align:center;color:var(--crema);padding:6rem 4%;
  background:linear-gradient(180deg,#7a4a22,#A9753B 45%,#B98A4E);
}
.hero img.hero-img{width:100%;max-height:420px;object-fit:cover;border-radius:18px;margin-bottom:2rem;}
.hero h1{font-size:2.8rem;margin:.4rem 0;color:#FFE9C9;}
.hero p{max-width:760px;margin:0 auto;font-size:1.15rem;}
.hero .cta{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap;justify-content:center;}
.btn{
  display:inline-block;padding:.8rem 1.9rem;border-radius:30px;text-decoration:none;font-weight:700;
  background:var(--oranja);color:#fff;border:none;cursor:pointer;transition:.25s;
}
.btn.btn-claro{background:#fff;color:var(--marron);}
.btn.btn-oro{background:var(--oro);color:var(--marron);}
.btn:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.25);}

/* ---------- SECCIONES ---------- */
.seccion{padding:4rem 5%;}
h2{font-size:2rem;color:var(--marron);margin-bottom:.4rem;}
.sbttl{color:var(--ocre);text-align:center;}
.tagline{color:var(--marron-claro);text-align:center;margin-bottom:1.2rem;}

.barra{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;margin-top:2rem;}
.tarjeta{
  background:#fff;border-radius:14px;padding:1.4rem;box-shadow:0 6px 20px rgba(74,46,24,.18);
  border:1px solid var(--oro);transition:.3s;
}
.tarjeta:hover{transform:translateY(-6px);}
.tarjeta .icono{font-size:2.4rem;}
.tarjeta h3{color:var(--marron-claro);margin-bottom:.4rem;}
.tarjeta p{font-size:.98rem;}

/* 2 columnas */
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.2rem;align-items:center;}
.extremo{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}

/* ---------- ESTADISTICAS ---------- */
.estadisticas{
  background:var(--marron);color:var(--crema);padding:3rem 5%;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem;text-align:center;
}
.estadisticas .num{font-size:2.6rem;font-weight:800;color:var(--oro);}
.estadisticas p{font-size:.95rem;}

/* ---------- ACTUALIDAD ---------- */
.linea{position:relative;padding-left:2rem;border-left:3px solid var(--oro);}
.linea article{background:var(--arena);margin:1rem 0;padding:1.2rem 1.5rem;border-radius:10px;}
.linea h3{color:var(--marron);margin-bottom:.3rem;}
.linea .anio{color:var(--ocre);font-weight:800;}
article.destacar{border:2px solid var(--oro);}

/* ---------- PESTAÑAS (herramientas/glosario) ---------- */
.pestanas ul{display:flex;gap:1rem;list-style:none;justify-content:center;flex-wrap:wrap;}
.pestanas ul li button{background:var(--oro);border:none;color:var(--marron);padding:.8rem 1.6rem;border-radius:30px;font-weight:700;cursor:pointer;}
.pestanas ul li button:hover{background:var(--marron);color:#fff;}

/* ---------- FORMULARIO ---------- */
form{
  max-width:640px;margin:2rem auto;background:#fff;padding:2.4rem;border-radius:16px;
  box-shadow:0 10px 26px rgba(74,46,24,.2);border:1px solid var(--oro);
}
.campo{margin-bottom:1.1rem;}
.campo label{display:block;font-weight:600;color:var(--marron-claro);margin-bottom:.35rem;}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.9rem 1rem;border:1px solid var(--oro);border-radius:8px;font:inherit;background:var(--crema);
}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--marron);}
.campo textarea{resize:vertical;min-height:130px;}

/* mapa */
.mapa iframe{width:100%;height:420px;border:0;filter:saturate(.8);border-radius:14px;}

/* ---------- INFO LEGAL ---------- */
.proyecto{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start;}
.proyecto aside{background:var(--crema);padding:1.6rem;border-radius:14px;border:1px solid var(--oro);}
.proyecto aside h3{color:var(--marron);}

/* ---------- COOKIES / WHATSAPP / VOLVER ---------- */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--marron);color:var(--crema);padding:1.2rem 4%;
  display:none;box-shadow:0 -8px 20px rgba(0,0,0,.3);
}
.cookies.visible{display:flex;flex-wrap:wrap;}
.cookies .texto{font-size:.95rem;}
.cookies button{background:var(--oro);border:none;color:var(--marron);padding:.7rem 1.4rem;border-radius:6px;font-weight:700;cursor:pointer;margin-left:.6rem;}
.cookies button.rechazar{background:var(--arena);color:var(--marron);}

.whatsapp{
  position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none;
}
.whatsapp svg{width:34px;height:34px;fill:#fff;}
.whatsapp:hover{transform:scale(1.1);}

/* ---------- FOOTER ---------- */
footer{background:var(--marron);color:var(--crema);padding:2.6rem 5%;}
footer .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;}
footer h4{color:var(--oro);margin-bottom:.8rem;}
footer ul{list-style:none;}
footer ul a{color:var(--crema);text-decoration:none;font-size:.95rem;}
footer ul li{margin-bottom:.4rem;}
footer a.legal{color:#D9C29A;text-decoration:none;}
.redes{display:flex;gap:1rem;margin-top:1rem;}
.redes a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--marron-claro);text-decoration:none;}
.redes svg{width:22px;height:22px;fill:var(--crema);}
.copy{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--oro);font-size:.85rem;text-align:center;}

/* ---------- WHATSAPP SVG ---------- */
.whatsapp svg path{}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  nav ul{display:none;}
  .hamburguesa{display:block;}
  nav.abierto{position:fixed;top:0;left:0;right:0;background:var(--crema);}
  nav.abierto ul{display:flex;flex-direction:column;width:100%;}
  .hero{padding:3rem 5%;}
  .hero h1{font-size:1.9rem;}
}