/* =========================================================
=====================  VARIABLES  ==========================
========================================================= */
:root{
  --primary:#d71818;
  --primary-700:#b11010;
  --bg:#0e0e0e;
  --text:#1c1c1c;
  --muted:#6b6b6b;
  --white:#ffffff;
  --soft:#f6f6f8;
  --rose:#fff2f2;
  --ice:#f1f6ff;
  --mint:#f1fff7;
  --dark:#141414;
}

/* =========================================================
=====================  BASE / RESET  =======================
========================================================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--white);
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* =========================================================
=======================  NAVBAR  ===========================
========================================================= */
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid #eee;
}
.navbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand__logo{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--primary); color:#fff; font-weight:800;
}
.brand__text{ letter-spacing:.2px; }

.nav{
  position:relative;
}
.nav ul{
  display:flex; gap:22px; list-style:none; padding:0; margin:0;
}
.nav a{
  padding:8px 10px; border-radius:10px;
  transition:transform .2s ease, background .2s ease;
}
.nav a:hover{ background:#f2f2f2; transform:translateY(-2px); }

/* Mobile menu */
.nav-toggle{
  display:none; background:none; border:none; padding:6px; cursor:pointer;
}
.nav-toggle__bar{
  width:24px; height:2px; background:#222; display:block; margin:5px 0; border-radius:2px;
}

.logo{
    width: 120px;
    height: 80px;
}

/* =========================================================
=======================  SECTIONS  =========================
========================================================= */
.section{ padding:72px 0; }
.section--rose{ background:var(--rose); }
.section--ice{ background:var(--ice); }
.section--mint{ background:var(--mint); }
.section--light{ background:var(--soft); }
.section--dark{ background:var(--dark); color:#f4f6f8; }

.section__header{ text-align:center; margin-bottom:30px; }
.section__header h2{ margin:0 0 8px; font-size:clamp(24px, 2.8vw, 34px); }
.section__header p{ color:var(--muted); }

/* =========================================================
=========================  HERO  ===========================
========================================================= */
.hero{
  background:
    radial-gradient(1200px 400px at 100% -50%, rgba(215,24,24,.15), transparent 60%),
    radial-gradient(1200px 400px at 0% 120%, rgba(215,24,24,.12), transparent 60%),
    linear-gradient(180deg, #fff, #fff);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:36px;
  align-items:center;
}
.hero__copy h1{
  font-size:clamp(28px, 5vw, 46px);
  line-height:1.1;
  margin:0 0 12px;
}
.accent{ color:var(--primary); position:relative; }
.accent::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:8px;
  background:linear-gradient(90deg, rgba(215,24,24,.18), rgba(215,24,24,.0));
  border-radius:6px;
}
.hero__copy p{ color:#404040; margin:0 0 16px; }
.hero__ctas{ display:flex; gap:12px; margin:18px 0 14px; }

.chips{
  display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:10px 0 0; list-style:none;
}
.chips li{
  background:#fff; border:1px dashed #e5e5e5; padding:8px 12px; border-radius:999px; font-size:.9rem;
}

.hero__media{ aspect-ratio: 4 / 3; }

/* =========================================================
====================  PROMOCIÓN  ===========================
========================================================= */
.promo{
  display:grid; gap:28px;
  grid-template-columns: .9fr 1.1fr;
  align-items:center;
}
.promo .lead{ color:#2a2a2a; }
.list{ padding-left:18px; }
.list li{ margin:8px 0; }
.promo__ctas{ display:flex; gap:12px; margin-top:14px; }
.note{ font-size:.9rem; color:#7a7a7a; margin-top:8px; }
.promo__media{ aspect-ratio: 3 / 2; }

/* =========================================================
======================  CATÁLOGO  ==========================
========================================================= */
.cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
.card{
  background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-4px) rotate(-.3deg); box-shadow:0 10px 30px rgba(0,0,0,.06); }
.card__media{ aspect-ratio: 4 / 3; }
.card__body{ padding:16px; display:flex; flex-direction:column; gap:8px; }

/* =========================================================
=====================  ENVÍOS BANNER  ======================
========================================================= */
.shipping{
  position:relative;
  background:var(--primary);
  color:#fff;
  padding:26px 0 46px;
}
.shipping__inner{
  display:flex; align-items:center; gap:16px; justify-content:center;
}
.shipping__icon{ display:grid; place-items:center; }
.shipping__text{ margin:0; font-weight:600; letter-spacing:.2px; }
.shipping .btn--light{ background:#fff; color:var(--primary); border:1px solid rgba(255,255,255,.6); }

.shipping__ticker{
  position:absolute; left:0; right:0; bottom:0; overflow:hidden; height:26px;
  background:rgba(0,0,0,.12);
}
.shipping__marquee{
  white-space:nowrap; padding-block:4px;
  animation: slide 18s linear infinite;
  opacity:.9;
}
@keyframes slide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================================
======================  SUCURSALES  ========================
========================================================= */
.branches{
  display:grid; gap:20px;
  grid-template-columns: repeat(2, 1fr);
}
.branch{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:16px;
}
.branch__badge{
  display:inline-block; font-size:.8rem; background:#eef4ff; color:#1f3a8a;
  padding:6px 10px; border-radius:999px; margin-bottom:8px; font-weight:700;
}
.branch__badge--soon{ background:#fff1f1; color:#8a1f1f; }
.branch__media{ margin-top:8px; aspect-ratio: 16 / 9; }
.branch__actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

/* =========================================================
========================  CONTACTO  ========================
========================================================= */
.contact-cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
.contact-card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:16px;
  display:flex; gap:12px; align-items:flex-start;
}
.contact-card__icon{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center;
  background:#ffe9e9; color:var(--primary);
}
.contact-card__body h3{ margin:0 0 4px; }
.muted{ color:var(--muted); margin:6px 0; }

/* =========================================================
==========================  REDES  =========================
========================================================= */
.social{ text-align:center; }
.social .btn{ margin-inline:auto; }
.social__media{
  margin:18px auto 0; width:100%; max-width:820px; aspect-ratio: 16 / 9;
  border:1px dashed rgba(255,255,255,.35);
}

/* =========================================================
=========================  FOOTER  =========================
========================================================= */
.footer{ background:#fafafa; border-top:1px solid #eee; }
.footer__inner{ display:flex; gap:14px; justify-content:space-between; align-items:center; padding:18px 0; }
.footer__small{ color:#7a7a7a; font-size:.9rem; }

/* =========================================================
======================  PLACEHOLDERS  ======================
========================================================= */
.img-placeholder{
  background:
    repeating-linear-gradient(45deg, #ffffff, #ffffff 12px, #fafafa 12px, #fafafa 24px);
  border-radius:16px;
  display: flex;
}

/* =========================================================
==========================  BOTONES  =======================
========================================================= */
.btn{
  --px:16px;
  padding:10px var(--px);
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  cursor:pointer;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--primary); color:#fff; border-color:var(--primary-700);
  box-shadow:0 6px 18px rgba(215,24,24,.25);
}
.btn--primary:hover{ background:var(--primary-700); }
.btn--ghost{
  background:#fff; color:var(--primary); border-color:#ffd6d6;
}
.btn--ghost:hover{ background:#fff5f5; border-color:#ffb5b5; }
.btn--light{
  background:#fff; color:#0f0f0f; border-color:#eee;
}
.btn--light:hover{ background:#f8f8f8; }

/* =========================================================
=====================  REVEAL ON SCROLL  ===================
========================================================= */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.is-visible{ opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease; }

/* =========================================================
========================  RESPONSIVE  ======================
========================================================= */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .promo{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr 1fr; }
  .branches{ grid-template-columns: 1fr; }
  .contact-cards{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .nav{ position:absolute; top:100%; right:0; width:min(92vw, 340px); background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); display:none; }
  .nav.open{ display:block; }
  .nav ul{ flex-direction:column; padding:10px; }
  .nav a{ display:block; }
}


/* ================== CONTACTO (nuevo) ================== */
.contact-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}

.contact-tile{
  display:grid;
  grid-template-columns: 96px 1fr;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contact-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  border-color:#e9e9e9;
}

.contact-tile__media{
  width:100%; height:96px; border-radius:14px;
}

/* Si prefieres meter <img> adentro, haz que llene el cuadro */
.contact-tile__media img{ width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }

.contact-tile__body h3{
  margin:0 0 4px;
  font-size:1.1rem;
}
.contact-tile__body .subtitle{
  margin:0 0 10px;
  color:#6b6b6b;
}
.contact-line{
  margin:0 0 12px;
  font-weight:600;
  letter-spacing:.2px;
}

/* Responsive */
@media (max-width: 980px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-tile{ grid-template-columns: 80px 1fr; }
  .contact-tile__media{ height:80px; }
}