/* styles.css */


:root{
--bg:#0f0f12; /* fondo principal */
--bg-soft:#15151a; /* superficies */
--text:#f5f7fb; /* texto base */
--muted:#c7c9d1; /* texto secundario */
--brand:#f2b705; /* color acento (dorado/pollo) */
--brand-2:#e36414; /* acento secundario (salsa/horno) */
--ok:#19a974; /* verde CTA */
--card:#1a1b21;
--radius:18px;
--shadow:0 10px 30px rgba(0,0,0,.25);
--max:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin-inline:auto;padding:0 20px}


/* Header */
header{
position:sticky;top:0;z-index:50;background:rgba(15,15,18,.7);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.logo-badge{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 90deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#111;font-weight:900}
.navlinks{display:flex;gap:14px;align-items:center}
.navlinks a{padding:10px 12px;border-radius:12px;color:var(--muted)}
.navlinks a:hover{background:#20212a;color:var(--text)}
.cta{background:var(--ok);color:#07130e;padding:10px 14px;border-radius:14px;font-weight:700}


.hamb{display:none;border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:12px}


/* Mobile menu */
.mobileMenu{display:none;position:fixed;inset:60px 16px auto 16px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.mobileMenu a{display:block;padding:12px;border-radius:12px;color:var(--muted)}
.mobileMenu a:hover{background:#20212a;color:var(--text)}


/* Hero */
.hero{position:relative;isolation:isolate}
.hero-visual{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 70% 30%, rgba(242,183,5,.35), transparent 60%), url('https://images.unsplash.com/photo-1544025162-d76694265947?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;filter:saturate(1.1) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(15,15,18,.40), rgba(15,15,18,.75) 60%, var(--bg) 85%);z-index:-1}
.hero-wrap{padding:88px 0 64px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.08);color:var(--muted);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-weight:600}
.eyebrow .dot{width:8px;height:8px;background:var(--brand);border-radius:999px;box-shadow:0 0 10px var(--brand)}
.hero h1{font-size: clamp(28px, 3.4vw + 8px, 56px);line-height:1.05;margin:14px 0 10px}
.hero p{max-width:760px;color:var(--muted);font-size:clamp(15px,1.2vw+10px,18px)}
.hero-ctas{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#20212a}
.btn.primary{background:var(--ok);color:#07130e;border-color:transparent;font-weight:800}
.btn.secondary{background:transparent}


/* Feature strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:6px 0 4px;font-size:18px}
.muted{color:var(--muted)}


/* Products */
section{padding:50px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.section-head h2{font-size: clamp(22px, 2.2vw + 10px, 36px);margin:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width: 1000px){.grid{grid-template-columns:repeat(3,1fr)}.strip{grid-template-columns:1fr}}
@media (max-width: 720px){.grid{grid-template-columns:repeat(2,1fr)}.navlinks{display:none}.hamb{display:block}.hero-wrap{padding-top:72px}}
@media (max-width: 460px){.grid{grid-template-columns:1fr}}


.product{display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg, #1b1c23, #171820);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden}
.product .img{aspect-ratio: 4/3; background:#0c0d12 url('https://images.unsplash.com/photo-1604904281195-b7aa27b33c65?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat}
.product h4{margin:0 12px}
.priceRow{display:flex;align-items:center;justify-content:space-between;padding:0 12px 12px}
.price{font-weight:800;color:#fff}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--muted)}
.product .ctaRow{display:flex;gap:10px;padding:0 12px 14px;margin-top:auto}
.wsp{flex:1;display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--ok);color:#08140e;border-radius:12px;padding:10px 12px;font-weight:800}
.ghost{flex:1;display:inline-flex;justify-content:center;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 12px;color:var(--muted)}


/* Reviews (simple slider) */
.slider{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.06)}
.slides{display:flex;transition:transform .5s ease}
.review{min-width:100%;padding:24px;background:var(--card)}
.review b{color:#fff}
.dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.dot{width:9px;height:9px;border-radius:999px;background:#2a2b33;border:1px solid rgba(255,255,255,.12)}
.dot.active{background:var(--brand)}


/* Contact */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width: 920px){.contact{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.list{display:grid;gap:10px}
.list .row{display:flex;gap:10px}


/* Footer */
footer{padding:30px 0;border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}


/* Floating WhatsApp button */
.float-wsp{position:fixed;right:16px;bottom:18px;background:#25D366;color:#001;display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:999px;font-weight:800;box-shadow:var(--shadow)}/* ====== LANDING HERO ESTILO “LA POLLERÍA” ====== */
.landing-hero {
  position: relative;
  isolation: isolate;
  padding: 40px 0 70px;
}

.landing-hero__bg {
  position: absolute; inset: 0; z-index: -1;
background:
  linear-gradient(to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.65) 35%,
    rgba(0,0,0,.85)
  ),
  url('Mostrador bueno.jpg') center / cover no-repeat;
}

/* logotipo arriba centrado */
.brand-logo {
  width: 150px; /* ajusta el tamaño a tu gusto */
  height: auto; /* mantiene proporción original */
  object-fit: contain;
  margin: 20px auto 10px;
  display: block;
  border: none;        /* quita el borde */
  border-radius: 0;    /* quita el círculo */
  box-shadow: none;    /* quita la sombra */
}

/* título manuscrito en dorado */
.brand-title {
  margin: 8px 0 2px;
  font-family: "Dancing Script", cursive;
  font-size: clamp(42px, 6vw, 90px);
  text-align: center;
  color: #e9b23c;              /* dorado */
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  letter-spacing: .5px;
}

/* subtítulo en mayúsculas, fino */
.brand-subtitle {
  text-align: center;
  color: rgba(255,255,255,.85);
  letter-spacing: .35em;
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 16px);
  margin-bottom: 18px;
}

/* texto principal centrado y legible sobre fondo oscuro */
.lead {
  max-width: 1000px;
  margin: 0 auto 28px;
  text-align: center;
  color: #f5f7fb;
  font-size: clamp(16px, 1.2vw + 10px, 20px);
  line-height: 1.6;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* tarjetas flotando sobre el fondo */
.landing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 10px;
}

.landing-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.06);
}

.landing-card img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block;
}

.landing-card__body {
  padding: 18px 18px 20px;
  color: #1a1a1a;
}

.landing-card__body h3 {
  margin: 4px 0 8px;
  font-size: 20px;
  line-height: 1.2;
}

.landing-card__body p {
  margin: 0; color: #555; line-height: 1.55;
}

/* responsive */
@media (max-width: 1024px) {
  .landing-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .brand-logo { width: 90px; height: 90px; }
  .landing-cards { grid-template-columns: 1fr; }
  .lead { text-align: left; padding-inline: 10px; }
}
/* ====== SECCIÓN LOS MÁS VENDIDOS ====== */
.bestsellers{
  background: var(--brand, #f2b705);      /* amarillo */
  padding: 60px 0 80px;
  position: relative;
}

.bs-wrap{
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;   /* izquierda / derecha */
  gap: 36px;
  align-items: start;
}

/* Columna izquierda */
.bs-left h2{
  font-family: "Dancing Script", cursive;
  font-size: clamp(52px, 6vw, 110px);
  line-height: .95;
  color: #0b0b0b;
  margin: 0 0 18px;
}

.bs-cta{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  background: #0b0b0b;
  color: #fff;
  padding: 18px 20px 20px;
  border-radius: 2px;
  margin: 18px 0;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: underline;     /* como en la captura */
  box-shadow: 0 8px 25px rgba(0,0,0,.25);
}
.bs-cta{
  display: grid;
  grid-template-columns: 42px 1fr;   /* icono + texto */
  align-items: center;
  gap: 12px;
  background:#0b0b0b;
  color:#fff;
  padding: 16px 20px;
  border-radius: 6px;
  margin: 18px 0;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: underline;
  box-shadow: 0 8px 25px rgba(0,0,0,.25);
  position: relative;               /* por si luego quieres badges */
}

.bs-cta__icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  box-shadow: none;                 /* sin sombra grande */
  position: static;                 /* clave: deja de ser absoluto */
  transform: none;
}

.bs-cta__icon--wsp{ background:#25D366; }
.bs-cta__icon--doc{ background:#f7d27b; }
.bs-cta__icon--wsp{ background:#25D366; }
.bs-cta__icon--doc{ background:#f7d27b; }
.bs-cta__text{ letter-spacing:.02em; }

/* Columna derecha: tarjetas */
.bs-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.bs-card{
  background:#fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.bs-card img{
  width:100%; aspect-ratio: 3/4; object-fit: cover;
  display:block;
  border-radius: 18px 18px 0 0;
}
.bs-card__body{
  padding: 16px 18px 22px;
  color: #111;
}
.bs-card__body h3{
  margin: 0 0 8px;
  font-size: clamp(18px, 1.4vw, 22px);
}
.bs-card__body p{
  margin:0; color:#5a5a5a; line-height:1.55;
}

/* Responsive */
@media (max-width: 1100px){
  .bs-wrap{ grid-template-columns: 1fr; }
  .bs-left{ margin-bottom: 12px; }
}
@media (max-width: 840px){
  .bs-cards{ grid-template-columns: 1fr; }
  .bs-cta__icon{ left: 28px; transform: translate(0, -60px); }
}
/* ===== SECCIÓN SOBRE NOSOTROS ===== */
.about {
  background: #000000; /* gris claro de fondo detrás del recuadro */
  padding: 60px 0;
}

.about-box {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* imagen izquierda, texto derecha */
  gap: 40px;
  background: #e9b23c;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  align-items: center;
}

.about-img img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.about-text h2 {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: 800;
}

.about-text p {
  margin-bottom: 16px;
  line-height: 1.6;
  color: #000000;
}

/* Responsive */
@media (max-width: 900px) {
  .about-box {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-img img {
    max-width: 400px;
    margin: 0 auto 20px;
  }
}
#sobre-nosotros h2,
.about-text h2 {
  color: #000;   /* negro para el título */
}

#sobre-nosotros p,
.about-text p {
  color: #000;   /* negro para los párrafos */
}
/* ====== COMPROMISO DE CALIDAD ====== */
.commitment{
  background: var(--brand, #f2b705);   /* amarillo */
  padding: 70px 0;
}
.cm-wrap{
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;  /* izquierda / derecha */
  gap: 40px;
  align-items: start;
}
.cm-left h2{
  font-family: "Merriweather", serif;  /* el mismo estilo elegante del H2 */
  font-weight: 700;
  color: #111;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.cm-left p{
  color: #171717;
  line-height: 1.6;
  margin: 10px 0;
  font-size: 18px;
}

/* Tarjeta derecha */
.cm-card{
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  padding: 26px 26px 10px;
}
.cm-item{
  display: grid;
  grid-template-columns: 48px 1fr;   /* número + contenido */
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cm-item:last-child{ border-bottom: none; }

.cm-num{
  width: 42px; height: 42px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.cm-body h3{
  margin: 4px 0 6px;
  font-weight: 800;
  color: #000000;
  font-size: 22px;
}
.cm-body p{
  margin: 0 0 6px;
  color: #4a4a4a;
  line-height: 1.55;
  font-size: 16px;
}

/* Responsive */
@media (max-width: 980px){
  .cm-wrap{ grid-template-columns: 1fr; }
  .cm-card{ margin-top: 6px; }
}
.about {
  background: #111111; /* gris carbón */
}
/* ====== CONTACTO ====== */
.contacto {
  background: #fff;
  padding: 80px 0;
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.contact-map h2 {
  font-family: "Merriweather", serif;
  font-weight: 800;
  color: #000;
  margin-bottom: 20px;
  font-size: 36px;
}

.contact-info h3 {
  color: #000;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 5px;
}

.contact-info .slogan {
  color: #666;
  margin-bottom: 20px;
  font-style: italic;
}

.contact-info p {
  margin: 8px 0;
  font-size: 16px;
  color: #222;
  line-height: 1.5;
}

.contact-icons {
  display: flex;
  gap: 18px;
  margin-top: 20px;
}

.contact-icons img {
  width: 40px;
  height: 40px;
  transition: transform .2s ease;
}

.contact-icons img:hover {
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 900px) {
  .contact-wrap {
    grid-template-columns: 1fr;
  }
}