/* Reset básico */
*{margin:0;padding:0;box-sizing:border-box}

html, body {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
}

.logo-img {
  height: 50px;         /* ajusta tamaño del logo */
  width: auto;
  display: block;
}

.about-section{padding:3rem 1rem;background:#fff}
.about-container{display:flex;align-items:center;gap:2rem;max-width:1200px;margin:auto}
.about-image img{width:100%;max-width:520px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.about-text h2{font-size:2rem;margin-bottom:1rem;color:#266E6D}
.about-text p{font-size:1.1rem;line-height:1.6;color:#333}

@media (max-width:900px){
  .about-container{flex-direction:column;text-align:center}
  .about-image img{max-width:100%}
}

/* ===== QUIÉNES SOMOS: fondo + panel ===== */
.about-hero{
  position:relative;
  min-height: 70vh;
  background: url("images/quienes-bg.jpg") center/cover no-repeat;
  display:flex; align-items:center;
}
.about-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.28);  /* oscurece para mejor legibilidad */
}
.about-card{
  position:relative;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 760px;
  margin: 3rem 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.about-header{ display:flex; align-items:center; gap:1rem; margin-bottom:.5rem; }
.about-logo{ height:58px; width:auto; }
.about-title{ margin:0; color:#266E6D; }
.about-subtitle{ margin:0; color:#466; font-size:.95rem }

.about-card p{ margin:.6rem 0; color:#333; font-size:1.05rem; line-height:1.6; }

/* ===== VALORES ===== */
.values{ background:#fff; padding:2.5rem 0; }
.values-title{ text-align:center; color:#266E6D; font-size:1.6rem; margin-bottom:1.2rem; }
.values-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, 1fr);
}
.value{
  background:#ffffff; border:1px solid #e1f0ee; border-radius:12px; padding:1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.value h4{ margin:0 0 .4rem; color:#244; }
.value p{ margin:0; color:#555; font-size:.98rem; }

/* Responsive */
@media (max-width: 900px){
  .about-card{ margin:2rem 0; }
  .values-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .about-hero{ min-height: 60vh; }
  .about-header{ flex-direction:column; text-align:center; }
  .values-grid{ grid-template-columns: 1fr; }
}

body{
  font-family: Arial, sans-serif;
  line-height:1.6;
  color:#333;
  background:#D8F5F3;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* altura mínima pantalla */
}

main { flex: 1; }

.container{width:90%;max-width:1200px;margin:auto}

/* 🔹 Header */
header{
  background:#266E6D;
  color:#fff;
  padding:1rem 0;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo{font-size:1.5rem;font-weight:bold}

/* Botón hamburguesa */
.menu-toggle{
  background:none;border:none;font-size:2rem;color:#fff;cursor:pointer;
  display:none;
}

/* Navegación base (desktop) */
.nav-links{
  list-style:none;
  display:flex;
  gap:20px;
}
.nav-links li{margin:0}
.nav-links a{color:#fff;text-decoration:none;font-weight:bold}
.nav-links a:hover{text-decoration:underline}

/* 🔹 Hero */
.hero{
  background:#e0f2f1;
  text-align:center;
  padding:3rem 1rem;
  margin-top:1rem;
}
.hero h2{font-size:2rem;margin-bottom:1rem}
.hero p{font-size:1.2rem;max-width:700px;margin:auto}

/* 🔹 About */
.about{padding:2rem 0;background:#fff;margin-top:1rem}
.about h2{text-align:center;margin-bottom:1rem}
.about p{text-align:center;max-width:700px;margin:auto}

/* 🔹 Footer */
footer{
  text-align:center;
  padding:1rem 0;
  background:#266E6D;
  color:#fff;
  margin-top:0;
}

/* 🔹 Tablet (≤1024px) */
@media (max-width:1024px){
  header .container{flex-wrap:wrap;gap:10px;justify-content:space-between}
  .hero h2{font-size:1.8rem}
  .hero p{font-size:1.1rem}
  .nav-links{gap:15px;flex-wrap:wrap;justify-content:center}
}
@media (max-width:768px){
  .menu-toggle { display: block; margin-left: auto; }
}

/* 🔹 Móvil/Tablet (≤768px): menú colapsable */
@media (max-width:768px){
  .menu-toggle{display:block}
  .nav-links{
    display:none;
    flex-direction:column;
    align-items:center;
    background:#266E6D;
    padding:1rem 0;
    position:absolute;
    top:100%; left:0; right:0;
    z-index:1000;
  }
  .nav-links.show{display:flex}
}

/* 🔹 Móvil (≤600px) */
@media (max-width:600px){
  .hero{padding:2rem 1rem}
  .hero h2{font-size:1.5rem}
}

/* Parallax con fondo sticky (no tapa header/footer) */
.values { position: relative; background: none; }
.values-bg{
  position: sticky;
  top: 0;
  height: 100vh;
  background: url("images/background_paralax.jpg") center/cover no-repeat;
  z-index: 0;
  transform: translateZ(0);
}
.values-content{ padding: 0 0 3rem; }

.values-title{
  text-align:center; color:#266E6D; font-size:1.8rem; margin-bottom:1.5rem;
}
.values-grid{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(3, 1fr);
}
.value{
  background:#fff; border:1px solid #e1f0ee; border-radius:12px; padding:1.5rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.value:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12); }

/* Responsivo valores */
@media (max-width:1024px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){
  .values-grid{ grid-template-columns: 1fr; }
  .values-content{ padding: 3rem 0; }
}

/* Evita colapso y huecos */
.values{ margin-top: 0; display: flow-root; z-index: 1; }
.values-content{ position: relative; z-index: 1; padding: 0 0 4rem; }
.values-title{ margin: 0 0 1.5rem; }
header{ margin-bottom: 0; }
.values{ margin-top: 0; padding-top: 0; }
.values-bg{ position: sticky; top: 0; margin-top: 0; height: 100vh; background: url("images/background_paralax.jpg") center/cover no-repeat; z-index: 0; transform: translateZ(0); }
.values-content{ padding-top: 0; }
.values-title{ margin-top: 0; }
.values{ display: flow-root; }
.values-bg { margin-bottom: -3rem; }
.values-content { padding-bottom: 4rem; }

/* ===== HERO BANNER ===== */
.hero-banner {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  z-index: 2;
  flex: 0 0 70vh;
  background: #ccc;
}
.hero-bg { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
}

.hero-card {
  display: flex; align-items: center; gap: 2rem;
  background: rgba(255,255,255,0.95);
  padding: 2rem 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-width: 900px;
}
.hero-card-logo img { height: 100px; width: auto; }
.hero-card-text h2 { margin: 0; color: #266E6D; font-size: 2rem; }
.hero-card-text p { margin: 0.3rem 0 0; color: #444; font-size: 1.2rem; }

/* Responsivo hero-card */
@media (max-width: 768px){
  .hero-card { flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem; }
  .hero-card-logo img { height: 80px; }
  .hero-card-text h2 { font-size: 1.5rem; }
  .hero-card-text p { font-size: 1rem; }
}

.values-hero{
  position: relative; z-index: 1; height: 60vh;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}

/* ===== Submenú en nav ===== */
.has-submenu{ position: relative; }
.submenu{
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: #ffffff; border: 1px solid #e6f2f1; border-radius: 10px;
  padding: .5rem 0; box-shadow: 0 10px 24px rgba(0,0,0,.12);
  list-style: none; display: none; z-index: 1001;
}
.submenu li a{
  display: block; padding: .55rem .9rem; color: #266E6D; text-decoration: none; font-weight: 600;
}
.submenu li a:hover{ background: #D8F5F3; }

/* Desktop: hover abre submenú */
@media (hover: hover){ .has-submenu:hover > .submenu{ display: block; } }

/* Móvil: submenú en bloque */
@media (max-width: 768px){
  .has-submenu{ width: 100%; }
  .submenu{
    position: static; box-shadow: none; border: none; border-radius: 0;
    background: transparent; padding: .25rem 0 .5rem;
  }
  .submenu li a{ padding: .45rem 0; color: #fff; }
  .has-submenu:not(.open) > .submenu{ display: none; }
  .has-submenu.open > .submenu{ display: block; }
}

/* Nav centrado móvil */
@media (max-width: 768px){
  .nav-links li{ width: 100%; }
  .nav-links a{ display: block; width: 100%; text-align: center; padding: .6rem 0; }
  .has-submenu > .submenu-toggle{ display:flex; align-items:center; justify-content:center; gap:.4rem; }
  .submenu li a{ text-align:center; padding:.5rem 0; }
  .has-submenu.open > .submenu{ margin-top:.25rem; }
}

.wa-bar{
  position: sticky; bottom: 0; z-index: 50;
  background:#25D366; color:#083b24;
  padding:.8rem 0; box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.wa-wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wa-count strong{ font-weight:700; }
.wa-btn{
  background:#128C7E; color:#fff; border:0; border-radius:10px;
  padding:.6rem 1rem; cursor:pointer; font-weight:600;
}
.wa-btn:hover{ filter: brightness(1.05); }
@media (max-width:600px){ .wa-wrap{ flex-direction:column; align-items:stretch; } }

@media (max-width: 768px){
  .nav-links { border-radius: 12px; overflow: hidden; }
}
@media (max-width: 768px){
  .nav-links li + li { margin-top: .35rem; border-top: 1px solid rgba(255,255,255,0.15); }
}

/* ======= HERO SPLIT ======= */
.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 72vh;
  background: #f7fbfb;
}
.hero-split__media { position: relative; overflow: hidden; }
.hero-split__media img{ width: 100%; height: 100%; object-fit: cover; }
.hero-split__content {
  display: flex; flex-direction: column; justify-content: center;
  gap: 18px; padding: 48px 24px;
}
.hero-split__content h1 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; margin: 0; }
.hero-split__content p { color:#3b4; max-width: 48ch; }

.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:10px; font-weight:600; text-decoration:none; }
.btn-primary { background:#1f7a79; color:#fff; box-shadow: 0 6px 16px rgba(31,122,121,.25); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { border:1px solid #d9e5e5; color:#1f7a79; background:#fff; }
.btn-ghost:hover { background:#f2f8f8; }

.quicksearch { display:flex; gap:8px; margin:10px 0 4px; }
.quicksearch input { flex:1; padding:12px 14px; border:1px solid #d7e2e2; border-radius:12px; }
.quicksearch button { padding:12px 16px; border:0; border-radius:12px; background:#2fa39f; color:#fff; font-weight:600; }

.trust-bar { display:flex; gap:22px; padding:0; margin:4px 0 0; list-style:none; color:#4e6; font-size:.95rem; }
.trust-bar i { color:#2fa39f; }

/* ======= SECTIONS ======= */
.home-section { padding: 56px 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-head h2 { margin:0; }
.link-more { color:#2fa39f; text-decoration:none; font-weight:600; }
.link-more:hover { text-decoration:underline; }

/* ======= CATEGORÍAS ======= */
.cat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.cat-card {
  background:#fff; border:1px solid #e6eeee; border-radius:16px; padding:20px;
  text-decoration:none; color:#234; box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.cat-card i { font-size:26px; color:#2fa39f; }
.cat-card h3 { margin:8px 0 4px; }

/* ======= MARCAS (versión final: círculos grandes) ======= */
.brands-strip{
  background: var(--mint);
  padding: 28px 0;
}
.brands-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.brands-row .brand-item{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.brands-row .brand-item img{
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
  filter: grayscale(1) opacity(.75);
  transition: transform .25s ease, filter .25s ease;
}
.brands-row .brand-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.brands-row .brand-item:hover img{
  filter: none;
  transform: scale(1.06);
}
/* Responsivo logos */
@media (max-width: 1200px){
  .brands-row{ gap: 40px; }
  .brands-row .brand-item{ width: 140px; height: 140px; }
}
@media (max-width: 900px){
  .brands-row{ gap: 28px; }
  .brands-row .brand-item{ width: 120px; height: 120px; }
}
@media (max-width: 600px){
  .brands-row{ gap: 22px; }
  .brands-row .brand-item{ width: 100px; height: 100px; }
}

/* ======= PRODUCTOS DESTACADOS ======= */
.cards-grid { display:grid; gap:16px; grid-template-columns: repeat(4, 1fr); }
.prod-mini {
  background:#fff; border:1px solid #e6eeee; border-radius:16px; padding:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.prod-mini img { width:100%; height:160px; object-fit:cover; border-radius:12px; }
.prod-mini h3 { font-size:1rem; margin:10px 0 4px; }
.mini-desc { color:#5a7680; font-size:.9rem; margin:0 0 10px; }
.mini-btn { display:inline-block; padding:8px 12px; border-radius:10px; background:#2fa39f; color:#fff; text-decoration:none; }

/* ======= CÓMO COMPRAR ======= */
.howto { background: linear-gradient(180deg,#f7fbfb, #eef6f6); padding:42px 0; }
.howto-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.howto-grid article {
  background:#fff; border:1px solid #e6eeee; border-radius:16px; padding:18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.badge-step {
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:#2fa39f; color:#fff; font-weight:700; margin-bottom:6px;
}

/* ======= CTA FINAL ======= */
.cta-final { padding:56px 0; background:#0f4f4e; color:#eaffff; }
.cta-final__box { text-align:center; }
.cta-final .btn-primary { background:#28b3ad; }

/* ======= RESPONSIVE ======= */
@media (max-width: 1100px) {
  .hero-split { grid-template-columns: 1fr 1fr; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__media { height: 36vh; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .howto-grid { grid-template-columns: 1fr; }
}

/* ====== Paleta y base ====== */
:root{
  --brand:#2c7a78;
  --brand-2:#1f6a68;
  --mint:#e6f5f4;
  --ink:#16393a;
  --sub:#6a8c92;
  --ok:#2fb28c;
  --card:#ffffff;
  --line:#e5eeee;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}

body{ color:var(--ink); }
.container{ max-width:1160px; margin:0 auto; padding:0 22px; }

/* ====== Hero split refinado ====== */
.hero-split{
  grid-template-columns: minmax(520px, 1.05fr) 1fr;
  background: linear-gradient(180deg,#f8fbfb 0%, #eef6f6 100%);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.hero-split__media{ position:relative; isolation:isolate; }
.hero-split__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 55%);
  z-index:1;
}
.hero-split__media img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter: saturate(1.02) contrast(1.02);
}
.hero-split__content{ padding:64px 28px; }
.hero-split__content h1{
  font-weight:800; letter-spacing:.2px;
  color:var(--ink); margin-bottom:10px;
}
.hero-split__content p{ color:#3b6; margin:0 0 8px; }

/* Buscador más “pro” */
.quicksearch{ display:flex; gap:10px; margin:6px 0 10px; }
.quicksearch input{
  height:46px; border:1px solid var(--line); border-radius:14px;
  padding:0 14px; font-size:15px; color:var(--ink);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.quicksearch input:focus{ outline:none; border-color:#c9e2e1; box-shadow:0 0 0 4px #e8f6f5; }
.quicksearch button{
  height:46px; padding:0 16px; border-radius:12px; border:0;
  background:var(--brand); color:#fff; font-weight:700;
}
.quicksearch button:hover{ filter:brightness(1.05); }

/* CTA buttons */
.btn{ border-radius:14px; padding:12px 18px; }
.btn-primary{ background:var(--brand); }
.btn-primary:hover{ background:var(--brand-2); }
.btn-ghost{ border:1px solid var(--line); color:var(--brand); }
.btn-ghost:hover{ background:#f3fbfb; }

/* Trust bar alineada */
.trust-bar{ gap:18px; margin-top:6px; color:#3a7; font-weight:600; }
.trust-bar li{ display:flex; align-items:center; gap:8px; }

/* ====== Secciones generales ====== */
.home-section{ padding:60px 0; }
.section-head{
  margin-bottom:16px; gap:12px;
  border-left:6px solid var(--brand);
  padding-left:12px;
}
.section-head h2{ margin:0; letter-spacing:.2px; }
.link-more{ color:var(--brand); }

/* ====== Categorías destacadas ====== */
.cat-grid{ gap:20px; grid-template-columns:repeat(3, 1fr); }
.cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px; box-shadow:var(--shadow);
}
.cat-card i{ font-size:28px; color:var(--brand); }
.cat-card h3{ margin:8px 0 4px; }
.cat-card p{ color:var(--sub); }
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.10); }

/* ====== Cómo comprar ====== */
.howto{ background: linear-gradient(180deg,#f8fbfb, #eef6f6); padding:48px 0; }
.howto-grid{ gap:18px; }
.howto-grid article{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px;
  box-shadow:var(--shadow);
}
.badge-step{ width:34px; height:34px; background:var(--brand); }

/* ====== CTA final ====== */
.cta-final{ background:#0f4f4e; }
.cta-final__box h2{ margin:0 0 6px; }

/* ====== Nav tweaks + franja de títulos ====== */
section.container-title{
  background:var(--mint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top: clamp(16px, 2.5vw, 32px);
}
@media (max-width: 1200px){ .container{ max-width:1040px; } }
@media (max-width: 1024px){
  .cards-grid{ grid-template-columns:repeat(3, 1fr); }
  .cat-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 900px){
  .hero-split{ grid-template-columns:1fr; }
  .hero-split__media{ height:38vh; }
  .cards-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Franja de títulos de sección */
section.container-title{
  background: var(--brand);
  color: #fff;
  border-radius: 14px 14px 0 0;
  padding: 12px 18px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
section.container-title h2{ margin: 0; font-size: 1.2rem; font-weight: 600; }
section.container-title .link-more{ color: rgba(255,255,255,.85); font-size: .9rem; transition: color .2s; }
section.container-title .link-more:hover{ color: #fff; }

/* Search container */
.search-container { display: flex; gap: 10px; align-items: center; }
@media (max-width: 768px){
  .search-container { flex-direction: column; align-items: stretch; }
  .search-container input, .search-container button { width: 100%; }
}

/* Quicksearch base (otra instancia) */
.quicksearch {
  display: flex; gap: 10px; align-items: center; justify-content: center; margin: 20px 0;
}
.quicksearch input { flex: 1; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; }
.quicksearch button {
  background-color: #266E6D; color: #fff; border: none; padding: 10px 18px; border-radius: 6px;
  cursor: pointer; transition: background 0.3s;
}
.quicksearch button:hover { background-color: #1e5857; }
@media (max-width: 768px){
  .quicksearch { flex-direction: column; align-items: stretch; }
  .quicksearch input, .quicksearch button { width: 100%; }
}

body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: #333; }

/* Hero sección alternativa */
.hero-section {
  background: linear-gradient(135deg, #ffffff 0%, #f1fdfb 50%, #d8f5f3 100%);
  padding: 4rem 2rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  text-align: center; margin: 2rem auto; max-width: 900px;
}
.hero-section h1 { font-size: 2.8rem; margin-bottom: 1rem; }
.hero-section p { font-size: 1.2rem; color: #388e3c; }
.hero-card {
  background: #fff; border-radius: 20px; padding: 3rem 2rem; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  text-align: center; max-width: 850px; margin: 2rem auto;
}
.hero-card h1 { font-size: 2.6rem; margin-bottom: 1rem; }
.hero-card p { font-size: 1.1rem; color: #388e3c; }

.hero-bg {
  background: url('images/indeximg.jpg') center/cover no-repeat;
  padding: 4rem 2rem; border-radius: 20px; position: relative; overflow: hidden; margin: 2rem auto; max-width: 900px;
}
.hero-bg::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); }
.hero-bg > * { position: relative; z-index: 1; }

/* ===== Hero en card blanco (sobre tu hero-split actual) ===== */
.hero-elevated, .hero-content--card{
  background:
    radial-gradient(1200px 300px at 100% 0%, rgba(47,162,159,.06), transparent 60%),
    radial-gradient(800px 240px at 0% 100%, rgba(38,110,109,.05), transparent 55%),
    #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  padding: 28px;
}
.hero-elevated h1, .hero-content--card h1{ margin: 0 0 10px; letter-spacing: .2px; }
.hero-elevated p, .hero-content--card p{ margin: 0 0 14px; color: #3a7; }
@media (max-width: 900px){
  .hero-elevated, .hero-content--card{ border-radius: 16px; padding: 20px; box-shadow: 0 10px 26px rgba(0,0,0,.10); }
}
.hero-split__media { background: linear-gradient(135deg, #d8f5f3 0%, #f7fbfb 100%); display:flex; align-items:center; justify-content:center; }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Header dinámico (glass + shrink on scroll) ===== */
header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(38, 110, 109, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  transition: padding .25s ease, box-shadow .25s ease, background .25s ease;
  padding: 14px 0;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
header.header--scrolled {
  padding: 8px 0; background: rgba(38, 110, 109, 0.96); box-shadow: 0 6px 22px rgba(0,0,0,.12);
}
.logo-img { height: 46px; width: auto; transition: height .25s ease, filter .25s ease; }
header.header--scrolled .logo-img { height: 40px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.06)); }

/* Nav links con subrayado animado (solo desktop) */
@media (min-width: 769px) {
  .nav-links a { position: relative; font-weight: 700; }
  .nav-links a::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #c9efea;
    transform: scaleX(0); transform-origin: 50% 50%; transition: transform .2s ease; border-radius: 2px;
  }
  .nav-links a:hover::after, .nav-links a:focus::after { transform: scaleX(1); }
}
.nav-links a.is-active::after { transform: scaleX(1); }

/* Hamburguesa y menú móvil */
.menu-toggle { line-height: 1; padding: .25rem .4rem; border-radius: 8px; transition: background .2s ease, transform .1s ease; }
.menu-toggle:active { transform: scale(.98); }
.menu-toggle:hover { background: rgba(255,255,255,.08); }
@media (max-width: 768px){
  .nav-links { margin-top: 8px; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 32px rgba(0,0,0,.18); }
}

/* Ajustes finos hero card */
.hero-split__content.hero-content--card{ align-self: center; max-width: 720px; margin: 0 auto; }

/* === OVERRIDES HERO LIMPIO === */
.hero-split__content.hero-content--card{
  max-width: 680px; padding: 20px 22px; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.10);
  align-self: center; margin: 0 auto;
}
.hero-split__content h1{ font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15; margin: 0 0 8px; letter-spacing: .2px; }
.hero-split__content p{ margin: 0 0 12px; color: #3a7; }

.quicksearch{ gap: 8px; margin: 8px 0 12px; }
.quicksearch input{ height: 44px; border-radius: 12px; }
.quicksearch button{ height: 44px; padding: 0 14px; border-radius: 10px; }

.hero-cta--simple{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.btn{ padding: 10px 16px; border-radius: 12px; }
.btn-primary{ background: var(--brand); }
.btn-primary:hover{ background: var(--brand-2); }
.link-lite{ color: var(--brand); font-weight: 600; text-decoration: none; opacity: .9; }
.link-lite:hover{ text-decoration: underline; opacity: 1; }

/* Ocultar banda si quedara */
.trust-bar{ display: none !important; }

/* Responsive hero simple */
@media (max-width: 900px){
  .hero-split__content.hero-content--card{ padding: 18px; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.10); }
  .hero-cta--simple{ gap: 10px; }
  .btn{ width: 100%; justify-content: center; }
  .link-lite{ width: 100%; text-align: center; }
}

/* Toque de subrayado y sombra sutil en h1 */
.hero-split__content h1 { position: relative; display: inline-block; text-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.hero-split__content h1::after{
  content: ""; position: absolute; left: 0; bottom: -8px; width: 60px; height: 4px; background: #2fa39f; border-radius: 2px;
}

/* Valores (leve gradiente + hover) */
.value{
  background: linear-gradient(135deg, #ffffff 0%, #f3fdfc 100%);
  border: 1px solid #dcefed; border-radius: 14px; padding: 1.5rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease;
}
.value:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* Limpieza de hover imagen (si existía) */
.brands-row .brand-item img:hover { filter: none; }


/* ====== CATEGORÍAS: VISTA VERTICAL EN MÓVIL ====== */
@media (max-width: 768px){

  .cat-grid{
    display: grid;
    grid-template-columns: 1fr;   /* 🔹 1 sola columna */
    gap: 16px;                    /* espacio entre tarjetas */
  }

  .cat-card{
    width: 100%;                  /* ocupa todo el ancho */
    max-width: 100%;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
  }

  .cat-card i{
    font-size: 24px;              /* icono un poco más grande */
  }

  .cat-card h3{
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  .cat-card p{
    font-size: 0.95rem;
    color: #5a7680;
    margin: 0;
  }
}

/* ===== Carrusel ===== */
.carousel-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.carousel {
  position: relative;
  width: 100%;
  height: 400px; /* ajusta la altura */
  overflow: hidden;
}

.carousel-track {
  display: flex;
  width: 400%; /* 4 imágenes */
  height: 100%;
  animation: slide 16s infinite; /* 🔹 velocidad total */
}

.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔹 Animación automática */
@keyframes slide {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }
  25%  { transform: translateX(-100%); }
  45%  { transform: translateX(-100%); }
  50%  { transform: translateX(-200%); }
  70%  { transform: translateX(-200%); }
  75%  { transform: translateX(-300%); }
  95%  { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}


/* ===== Headline hero potente con acento ===== */
.hero-title{
  margin: 0 0 10px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .2px;
  color: var(--ink);
  font-size: clamp(28px, 4.2vw, 56px); /* responsivo grande */
  text-wrap: balance;                  /* mejor saltos */
}

/* palabra/frase acentuada */
.hero-title .accent{
  /* opción A: color sólido de marca */
  color: #2c7a78;
  /* —— opción B (si prefieres degradado), descomenta:
  background: linear-gradient(90deg, #2fb28c 0%, #2c7a78 60%, #1f6a68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  */
}

/* subtítulo más limpio */
.hero-sub{
  margin: 6px 0 12px;
  color: #5c6f6f;
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
}

/* micro-realce: subrayado corto bajo el título (queda elegante) */
.hero-title{
  position: relative;
  display: inline-block;
}
.hero-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-10px;
  width: 68px; height: 4px;
  background:#2c7a78; /* usa tu brand */
  border-radius: 2px;
  opacity:.9;
}

/* en pantallas chicas, un pelín más compacto */
@media (max-width: 480px){
  .hero-title{ line-height: 1.08; }
  .hero-title::after{ bottom:-8px; width:58px; }
}


/* ===== Íconos en valores ===== */
.value {
  text-align: left;
  position: relative;
  padding-top: 1.8rem; /* espacio para el icono */
}

.value-icon {
  font-size: 1.6rem;
  color: var(--brand, #2c7a78);
  margin-bottom: .6rem;
  display: block;
}

/* efecto sutil */
.value-icon {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.08));
}


/* ===== Fix hero en pantallas grandes ===== */

/* Asegura que el lado de la imagen llene todo el alto del hero */
.hero-split { 
  align-items: stretch;         /* ambas columnas a la misma altura */
}

/* Imagen siempre cubre el contenedor */
.hero-split__media { 
  height: auto;                 /* que no colapse */
  min-height: 100%;
}
.hero-split__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* llena sin deformar */
  object-position: center;      /* centra el foco */
}

/* Ajustes de altura/espaciado para viewports grandes */
@media (min-width: 1200px){
  .hero-split{
    grid-template-columns: 1fr 1fr;  /* proporción equilibrada */
    min-height: 62vh;                /* menos alto que antes */
    margin-bottom: 24px;             /* menos espacio inferior */
  }
  .hero-split__content{
    align-self: center;
    max-width: 720px;                /* card más contenida */
    padding: 24px 28px;
  }
}

@media (min-width: 1440px){
  .hero-split{
    min-height: 58vh;                /* aún más compacto en monitores muy anchos */
  }
}

/* Evita que la sección de valores “se pegue” por margen colapsado */
.values{
  margin-top: 0 !important;
}


/* ====== iPad / tablet: hero apilado y limpio ====== */
@media (min-width: 768px) and (max-width: 1024px){
  /* 1) Cambiamos a una sola columna */
  .hero-split{
    grid-template-columns: 1fr;      /* foto arriba, tarjeta abajo */
    min-height: auto;                 /* dejamos que fluya */
    margin-bottom: 18px;              /* menos hueco antes de lo siguiente */
  }

  /* 2) La foto como banda superior */
  .hero-split__media{
    height: 40vh;                     /* alto visual agradable en iPad */
    min-height: 320px;                /* no bajarla demasiado en landscape */
  }
  .hero-split__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% center;      /* mueve el foco un poco a la izquierda */
    display: block;
  }

  /* 3) Tarjeta: compacta, centrada y ligeramente superpuesta */
  .hero-split__content{
    max-width: 720px;
    padding: 20px 22px;
    margin: -30px auto 0;             /* la sube para “tocar” la foto */
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
  }

  /* 4) Tipos y controles algo más pequeños */
  .hero-split__content h1{
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .quicksearch{
    gap: 8px; margin: 8px 0 12px;
  }
  .quicksearch input{ height: 44px; border-radius: 12px; }
  .quicksearch button{ height: 44px; border-radius: 10px; }
  .btn{ padding: 10px 16px; border-radius: 12px; }
}

/* Pequeño refinamiento para tablets grandes (≈ iPad Pro) */
@media (min-width: 1025px) and (max-width: 1180px){
  .hero-split{
    grid-template-columns: 0.95fr 1.05fr; /* aún 2 col, pero más equilibrado */
    min-height: 60vh;
  }
  .hero-split__media img{
    object-position: 30% center;      /* evita cortes feos del sujeto */
  }
  .hero-split__content{
    max-width: 740px;
    padding: 22px 26px;
  }
}


/* --- Fix: separación hero en tablets (iPad) --- */
@media (min-width: 768px) and (max-width: 1024px){
  .hero-split{
    grid-template-columns: 1fr;      /* foto arriba, tarjeta abajo */
    row-gap: 14px;                   /* espacio entre bloques */
  }
  .hero-split__media{
    height: 40vh;
    min-height: 320px;
  }
  .hero-split__media img{
    object-fit: cover;
    object-position: 35% center;
  }
  /* Antes tenía margin-top negativo: quítalo y usa un margen normal */
  .hero-split__content{
    margin: 0 auto;                  /* SIN margen negativo */
    max-width: 720px;
    padding: 20px 22px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
  }
}

/* Asegura que el header y el submenú queden encima del hero */
header{ z-index: 2000; }
nav{ position: relative; z-index: 2001; }
.submenu{ z-index: 2100; }

/* En dispositivos táctiles, desactiva el hover y deja solo el click (JS) */
@media (hover: none){
  .has-submenu:hover > .submenu{ display: none; }
}

/* Mostrar el submenú cuando el padre tiene .open EN TODOS LOS TAMAÑOS */
.has-submenu.open > .submenu{
  display: block !important;
}

/* En dispositivos táctiles, ignora el hover (evita que cierre/abra por hover) */
@media (hover: none){
  .has-submenu:hover > .submenu{ display: none; }
}

/* Asegura que el submenú quede por encima de todo */
header{ z-index: 2000; }
nav{ position: relative; z-index: 2001; }
.submenu{ z-index: 2100; }

/* (Opcional) un poco más de ancho al panel */
.submenu{
  min-width: 220px;
}


/* ===== Botón flotante WhatsApp ===== */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background: #25d366;
  color: #fff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  z-index: 3000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none !important;   /* 🔹 quita subrayado */
}

.whatsapp-float i {
  text-decoration: none !important;   /* 🔹 asegura que el ícono no tenga línea */
  line-height: 1;                     /* 🔹 centra bien el ícono */
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  background: #20ba5a;
}


.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 1000;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease;
  animation: bounce 2s infinite; /* 🔹 animación */
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #20ba5a;
}

/* Animación tipo “salto” */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}


/* Modal */
.ui-modal, 
.ui-modal * {
  font-family: 'Poppins', sans-serif !important;
}

/* Toast */
#ui-toast {
  font-family: 'Poppins', sans-serif !important;
}

/* Botones del footer del catálogo */
.wa-btn,
.btn-vaciar,
.btn-ver-carrito {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================= */
/* Tipografía Global - Inter     */
/* ============================= */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Encabezados */
h1 {
  font-size: 2rem;   /* ~32px */
  font-weight: 700;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.5rem; /* ~24px */
  font-weight: 600;
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.25rem; /* ~20px */
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Texto de párrafos y labels */
p, li, label, input, select {
  font-size: 1rem; /* 16px base */
  font-weight: 400;
}

/* Botones */
button, .btn, .wa-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem; /* Igual que el texto base */
  letter-spacing: 0.3px;
}

/* Enlaces de navegación */
nav a {
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

/* Carrito */
.cart-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

.cart-item p {
  font-size: 0.95rem;
  font-weight: 400;
  color: #555;
}

/* Ajustes específicos para la navegación */
nav ul {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* separación entre links */
  margin: 0;
  padding: 0;
}

nav a {
  font-size: 0.95rem;  /* más compacto que el body */
  font-weight: 400;    /* menos grueso que 600 */
  white-space: nowrap; /* evita que se partan en dos líneas */
}


/* =========================================================
   Normalización tipográfica del catálogo (humano y vet)
   Fuerza la misma fuente y pesos en todas las cards
   ========================================================= */

/* Usa la variable global que ya definimos para Inter */
:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 1) Aplica Inter a todo el catálogo y a todos los hijos */
.catalog,
.catalog * ,
.catalog-grid,
.catalog-grid * ,
.card, .card * ,
.product-card, .product-card * {
  font-family: var(--font-sans) !important;
}

/* 2) Títulos y textos con jerarquía consistente */
.card .card-title,
.product-card .card-title{
  font-weight: 700;
  font-size: 1.10rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.card .card-desc,
.product-card .card-desc{
  font-size: .98rem;
  font-weight: 400;
  color: #444;
}

.card .card-meta,
.product-card .card-meta{
  font-size: .95rem;
  color: #555;
}

/* 3) Botones y stepper con la misma fuente/peso */
.btn, .btn-add, .btn-whats,
.qty-stepper .qty-minus,
.qty-stepper .qty-plus,
.qty-stepper .qty-input {
  font-family: var(--font-sans) !important;
  font-weight: 600;
}

/* 4) Resetea posibles fuentes heredadas en headings dentro de cards */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.product-card h1, .product-card h2, .product-card h3,
.product-card h4, .product-card h5, .product-card h6{
  font-family: var(--font-sans) !important;
  font-weight: 700;
}

/* --- No sobreescribir la fuente de los íconos --- */
/* Font Awesome 6 */
.catalog i.fa,
.catalog .fa,
.catalog .fas,
.catalog .far,
.catalog .fal,
.catalog .fab,
.catalog .fa-solid,
.catalog .fa-regular,
.catalog .fa-brands,
.catalog i[class^="fa-"],
.catalog i[class*=" fa-"]{
  font-family: "Font Awesome 6 Free","Font Awesome 6 Brands" !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* pesos correctos por familia */
.catalog .fas,
.catalog .fa-solid{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;       /* sólido */
}
.catalog .far,
.catalog .fa-regular{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;       /* regular */
}
.catalog .fab,
.catalog .fa-brands{
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;       /* brands */
}

/* (Opcional) si usas Material Symbols o similares, restaura también: */
.catalog .material-symbols-outlined,
.catalog .material-symbols-rounded,
.catalog .material-icons{
  font-family: "Material Symbols Outlined","Material Icons" !important;
  font-weight: normal !important;
}


/* ===== MENÚ MÓVIL: panel anclado a la derecha de la hamburguesa ===== */
@media (max-width: 768px){
  /* el nav se convierte en el contenedor de referencia */
  header nav{ position: relative; }

  /* botón a la derecha (ya lo tienes, lo refuerzo) */
  .menu-toggle{ display:block; margin-left:auto; }

  /* panel del menú, pegado a la derecha */
  .nav-links{
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: auto;                    /* ← clave: evita que se vaya a la izquierda */
    width: min(92vw, 420px);
    display: none;                 /* base oculto */
    flex-direction: column;
    align-items: stretch;
    background: #266E6D;
    padding: .6rem 0;
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(0,0,0,.22);
    z-index: 2000;
  }
  .nav-links.show{ display:flex; }

  /* items y divisores */
  .nav-links a{
    color:#fff; text-decoration:none;
    padding:.6rem 1rem; text-align:center;
  }
  .nav-links li + li{
    border-top: 1px solid rgba(255,255,255,.12);
  }

  /* submenú en móvil: se abre solo con .open (tu JS ya la pone) */
  .has-submenu > .submenu{
    position: static; display: none;
    background: transparent; border: 0; box-shadow: none;
    padding: .25rem 0 .4rem;
  }
  .has-submenu.open > .submenu{ display:block; }
}

/* ==== FIX ÚNICO: menú móvil pegado a la DERECHA ==== */
@media (max-width: 768px){
  /* botón hamburguesa, siempre a la derecha */
  header .container{ position:relative !important; justify-content:space-between !important; }
  header .menu-toggle{
    margin-left:auto !important;
    margin-right:12px !important;
    order:3 !important;
    display:block !important;
  }

  /* el nav actúa de contenedor para posicionar el panel */
  header nav{ position:static !important; }

  /* panel del menú: anclado al borde derecho del header */
  header nav .nav-links{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:12px !important;
    left:auto !important;                 /* <-- anula left:0 */
    width:min(92vw, 420px) !important;    /* panel tipo “cajón” a la derecha */
    margin:0 !important;
    padding:.6rem 0 !important;
    background:#266E6D !important;
    border-radius:14px !important;
    box-shadow:0 18px 36px rgba(0,0,0,.22) !important;
    z-index:4001 !important;

    display:none !important;              /* base oculto */
    flex-direction:column !important;
    align-items:stretch !important;
  }
  /* abrir/cerrar (tu JS usa .show) */
  header nav .nav-links.show{ display:flex !important; }

  /* estética */
  header nav .nav-links li + li{ border-top:1px solid rgba(255,255,255,.12) !important; }
  header nav .nav-links a{ color:#fff !important; text-align:center !important; padding:.6rem 1rem !important; }

  /* submenú solo cuando el <li> tiene .open (tu JS lo pone) */
  header .has-submenu > .submenu{
    position:static !important;
    display:none !important;
    background:transparent !important;
    border:0 !important; box-shadow:none !important; padding:.25rem 0 .4rem !important;
  }
  header .has-submenu.open > .submenu{ display:block !important; }
}

/* ===== MENÚ MÓVIL: panel pegado a la DERECHA y pulido ===== */
@media (max-width: 768px){

  /* contenedor del header: sin raros empujes */
  header .container{
    position: relative !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* hamburguesa a la derecha */
  header .menu-toggle{
    display:block !important;
    order:3 !important;
    margin-left:auto !important;
    margin-right:12px !important;
  }

  /* el <nav> no limita el posicionamiento del panel */
  header nav{ position: static !important; }

  /* PANEL */
  header nav .nav-links{
    /* anclado a la esquinita de la hamburguesa */
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 12px !important;
    left: auto !important;

    /* tamaño cómodo y consistente */
    width: min(88vw, 380px) !important;
    max-width: 92vw !important;

    /* base visual */
    background: #266E6D !important;
    border-radius: 14px !important;
    padding: 8px 0 !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.22) !important;
    z-index: 4001 !important;

    /* layout y estado cerrado */
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;

    /* quita herencias que lo empujaban a la izquierda */
    margin: 0 !important;
  }

  /* abrir (tu JS ya añade .show) */
  header nav .nav-links.show{ display:flex !important; }

  /* filas */
  header nav .nav-links li + li{
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }
  header nav .nav-links a{
    color:#fff !important;
    text-align:left !important;
    padding:.75rem 1rem !important;
    display:block !important;
  }

  /* submenú dentro del panel: sigue el flujo, sin bordes propios */
  header .has-submenu{ width:100% !important; }
  header .has-submenu > .submenu{
    position: static !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .25rem 0 .5rem !important;
  }
  header .has-submenu.open > .submenu{ display:block !important; }
}

/* ===== Centrar texto/ítems dentro del panel móvil ===== */
@media (max-width: 768px){
  /* links del nivel principal */
  header nav .nav-links a{
    text-align: center !important;
  }

  /* submenú dentro del panel */
  header .has-submenu > .submenu a{
    text-align: center !important;
  }
}



/* Sección de valores */
.values {
  background: linear-gradient(180deg, #e6f6f5 0%, #eefafa 100%);
  padding: 40px 0;
}

.values-title {
  text-align: center;
  color: #266E6D;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 24px;
  position: relative;
}

.values-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  margin: 12px auto 0;
  background: #266E6D;
  opacity: .45;
}

/* Grid responsivo */
.values-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta de valor */
.value {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border: 1px solid rgba(38,110,109,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}

/* Barra lateral de acento */
.value::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #266E6D;
  opacity: .35;
  border-radius: 16px 0 0 16px;
}

/* Icono */
.value-icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #D8F5F3;
  color: #266E6D;
  box-shadow: inset 0 0 0 1px rgba(38,110,109,.15);
  margin-bottom: 10px;
  font-size: 1.25rem;
}

/* Títulos */
.value h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a5454;
  letter-spacing: .2px;
}

/* Texto */
.value p {
  margin: 0;
  color: #4a5d5d;
  line-height: 1.6;
  font-size: .95rem;
}

/* Hover sutil */
.value:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.09);
}


/* ===== Dropdown estable para iPad/Tablet ===== */

/* Base: dropdown cerrado */
.has-submenu { position: relative; }
.has-submenu > .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  border: 1px solid #e6f2f1;
  border-radius: 10px;
  padding: .5rem 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  z-index: 2100;
}

/* Desktop con mouse: abrir por hover (ya lo tenías) */
@media (hover:hover){
  .has-submenu:hover > .submenu { display: block; }
}

/* Accesible y táctil: abrir cuando el link/toggle recibe foco o click */
.has-submenu:focus-within > .submenu,
.has-submenu.open > .submenu {  /* .open la manejará el JS */
  display: block;
}

/* En tablets (769–1024px) mantenemos estilo “desktop” (dropdown flotante) */
@media (min-width:769px) and (max-width:1024px){
  nav .nav-links { display:flex; } /* sin hamburguesa */
  .has-submenu > .submenu{
    left: 50%;
    transform: translateX(-50%);
  }
}

/* En móvil ≤768px sí usas panel vertical: mantén tus reglas existentes */


/* ============================
   FIX MENÚ MÓVIL (≤768px)
   Submenú dentro del panel
   ============================ */
@media (max-width:768px){

  /* Que el separador solo aplique a los items de 1er nivel */
  .nav-links > li + li{
    border-top: 1px solid rgba(255,255,255,.15) !important;
  }
  /* Quita separadores dentro del submenú */
  .nav-links .submenu li + li{
    border-top: 0 !important;
  }

  /* El item con submenú ocupa todo el ancho */
  .has-submenu{ width:100% !important; }

  /* SUBMENÚ en móvil: NO flotante */
  .has-submenu > .submenu{
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    display: none !important;     /* cerrado por defecto */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .25rem 0 .5rem !important;
  }

  /* Abrir cuando el padre tenga .open (tu JS ya lo agrega) */
  .has-submenu.open > .submenu{ display:block !important; }

  /* Links del submenú a ancho completo y centrados */
  .has-submenu > .submenu a{
    display:block !important;
    width:100% !important;
    padding:.55rem 0 !important;
    text-align:center !important;
    color:#fff !important;
  }
}

/* Abre el submenú en móvil cuando el padre tiene .open */
@media (max-width:768px){
  nav .nav-links .has-submenu > .submenu{ display:none !important; }
  nav .nav-links .has-submenu.open > .submenu{ display:block !important; }
}


/* ====== Desktop: submenu sin huecos ====== */
@media (hover:hover) and (min-width:769px){
  nav .has-submenu{ position:relative; }

  /* puente invisible para no perder el hover al bajar con el mouse */
  nav .has-submenu::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:10px;          /* ajusta 6–12px si quieres */
    /* no necesita color; es transparente, solo mantiene el hover */
  }

  nav .has-submenu > .submenu{
    position:absolute;
    top:calc(100% + 0px); /* sin separación vertical */
    left:0;
    margin-top:0;
    display:none;
    z-index:2100;
  }

  /* abrir con hover o foco de teclado */
  nav .has-submenu:hover > .submenu,
  nav .has-submenu:focus-within > .submenu{
    display:block;
  }
}


html { overflow-y: scroll; }


header {
  position: sticky; top: 0; z-index: 1000;
 
  backface-visibility: hidden; transform: translateZ(0);
}


header .container { min-height: 72px; }


.logo-img {
  width: 180px; height: auto; 
  aspect-ratio: 180 / 58;    
  display: block;
}

header, header * {
  transition-property: color, background-color, box-shadow, opacity, transform;
}


.nav-links a {
  border: 2px solid transparent; 
}
.nav-links a:hover {
  border-color: rgba(255,255,255,.25);
}


.has-submenu > .submenu {
  position: absolute; inset: auto auto auto 0; 
  transform-origin: top;
  max-height: 0; overflow: hidden;
  
  transition: transform .18s ease, opacity .18s ease, max-height .18s ease;
  opacity: 0; transform: scaleY(.98);
}
.has-submenu.open > .submenu,
.has-submenu:hover > .submenu {
  max-height: 480px;
  opacity: 1; transform: scaleY(1);
}


.menu-toggle { line-height: 1; }


header .logo-img {
  height: auto;         
  max-height: 60px;      
  width: auto;           
  object-fit: contain;   
  display: block;        
}

/* ===== Promos / Tiers ===== */
.promo-tiers { margin: 36px auto 18px; }
.promo-head h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.promo-sub { margin: 0; opacity: .8; }

.promo-grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 960px){ .promo-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .promo-grid{ grid-template-columns: 1fr; } }

.promo-card{
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ffe0e0;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.promo-card .off{
  color: #b91c1c;            /* rojo principal */
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}
.promo-card .th{ font-weight: 700; margin-top: 6px; }
.promo-card small{ opacity:.85; }

.promo-card::after{
  content: "";
  position: absolute; inset: auto -30px -30px auto;
  width: 120px; height: 120px; border-radius: 50%;
  background: #ffe8e8; opacity:.65;
  transform: rotate(0.0001deg);
}
.promo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(185,28,28,.12);
  border-color: #ffc8c8;
}
.promo-card.active{
  border-color: #ef4444; box-shadow: 0 14px 28px rgba(239,68,68,.18);
  outline: 2px solid rgba(239,68,68,.2);
}

.promo-progress{ margin-top: 14px; }
.promo-progress .line{
  height: 8px; border-radius: 8px; background: #f2f4f7; overflow: hidden;
  box-shadow: inset 0 0 0 1px #e9edef;
}
.promo-progress .line > span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg,#ef4444,#f87171);
  transition: width .35s ease;
}
.promo-status{ margin:.5rem 0 0; font-weight:600; color:#b91c1c; }
.promo-status .mono{ font-variant-numeric: tabular-nums; }

/* ===== PROMOS – Hero look, rojo acento, glass & ribbons ===== */
.promo-tiers{
  margin: 48px auto 24px;
  padding: 28px 18px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 320px at 15% -40%, rgba(239,68,68,.12), transparent 60%),
    radial-gradient(900px 280px at 85% -50%, rgba(248,113,113,.10), transparent 60%),
    linear-gradient(180deg, #e6f6f3 0%, #dff4ef 35%, #d9f0eb 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.promo-tiers::before{
  content:"";
  position:absolute; inset:-2px -2px auto -2px; height:8px;
  background: linear-gradient(90deg,#ef4444,#f97316,#f59e0b,#22c55e,#06b6d4);
  filter: saturate(120%); opacity:.85;
}
.promo-tiers .promo-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin: 0 6px 8px;
}
.promo-tiers .promo-head h2{
  margin:0;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  letter-spacing:.2px;
  display:flex; align-items:center; gap:.6rem;
}
.promo-tiers .promo-head h2::after{
  content:"🔥";
  font-size: 1.1em;
  filter: drop-shadow(0 6px 10px rgba(239,68,68,.35));
}
.promo-tiers .promo-sub{ margin:0; opacity:.8 }

/* Cards */
.promo-grid{
  margin-top: 18px;
  display:grid; gap:14px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1024px){ .promo-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .promo-grid{ grid-template-columns: 1fr; } }

.promo-card{
  position: relative;
  padding: 16px 18px 18px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(239,68,68,.18);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(239,68,68,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  isolation:isolate; /* para pseudo-elementos */
}
.promo-card .off{
  color:#b91c1c; font-weight:900; letter-spacing:.25px;
  font-size: clamp(1.15rem,1.8vw,1.35rem);
}
.promo-card .th{ margin-top:6px; font-weight:800; color:#334155; }
.promo-card small{ opacity:.8 }

/* Ribbon esquina */
.promo-card::before{
  content:"";
  position:absolute; right:-28px; top:-28px; width:120px; height:120px;
  background: radial-gradient(closest-side, #ffe0e0, transparent 70%);
  border-radius: 50%; z-index:-1;
}

/* Shine al pasar */
.promo-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 28%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.promo-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(239,68,68,.18); }
.promo-card:hover::after{ transform: translateX(120%); }

/* Estado activo (tier alcanzado) */
.promo-card.active{
  border-color:#ef4444;
  box-shadow: 0 22px 48px rgba(239,68,68,.24);
  outline: 3px solid rgba(239,68,68,.22);
}
.promo-card.active .off{ color:#ef4444 }

/* Progress */
.promo-progress{ margin-top:16px }
.promo-progress .line{
  height: 10px; border-radius: 999px; overflow: hidden;
  background: #f1f5f9; box-shadow: inset 0 0 0 1px #e4e9ee;
}
.promo-progress .line > span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg,#ef4444 0%, #fb7185 60%, #fca5a5 100%);
  box-shadow: 0 6px 12px rgba(239,68,68,.25) inset;
  transition: width .4s ease;
}
.promo-status{
  margin:.55rem 4px 0; font-weight:800; color:#b91c1c;
}
.promo-status .mono{ font-variant-numeric: tabular-nums; background:#fff3f3; padding:.1rem .35rem; border-radius:8px }



/* =========================================
   FIX: Cinta superior con tamaño constante
   (mantener altura/padding en desktop/tablet)
   ========================================= */
@media (min-width: 768px) {
  :root {
    --topbar-h: 72px;      /* ajusta si necesitas 64 / 80 / etc. */
    --topbar-py: 12px;     /* padding arriba/abajo */
  }

  /* Seleccionamos los nombres más comunes de header/topbar */
  #topbar,
  .topbar,
  header.site-header,
  .site-header {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    padding-top: var(--topbar-py);
    padding-bottom: var(--topbar-py);
    box-sizing: border-box;
  }

  /* Bloquear estados “shrink/compact/scrolled” si existieran */
  .is-scrolled #topbar,
  .is-scrolled .topbar,
  header.site-header.is-scrolled,
  .site-header.is-scrolled,
  #topbar.shrink,
  .topbar.shrink,
  .site-header.shrink,
  .site-header.compact,
  #topbar[data-shrink="true"] {
    height: var(--topbar-h) !important;
    min-height: var(--topbar-h) !important;
    padding-top: var(--topbar-py) !important;
    padding-bottom: var(--topbar-py) !important;
    transform: none !important;     /* por si había scale() al hacer scroll */
  }

  /* Asegurar que el nav ocupe toda la altura fija */
  #topbar nav,
  .topbar nav,
  header.site-header nav,
  .site-header nav {
    height: 100%;
  }

  /* Mantener el logo proporcional dentro de la altura fija */
  #topbar img.logo,
  .topbar img.logo,
  .site-header img.logo {
    height: calc(var(--topbar-h) - 2 * var(--topbar-py));
    width: auto;
  }
}

/* Importante: no tocamos tus breakpoints móviles existentes (max-width: 767px) */

/* =========================================
   HEADER LOCK (desktop & tablet)
   Mantener altura/espaciado constantes
   ========================================= */
@media (min-width: 769px) {
  /* fijar padding del header en estado normal y scrolled */
  header,
  header.header--scrolled {
    padding: 14px 0 !important;
  }

  /* fijar altura del logo */
  header .logo-img,
  header.header--scrolled .logo-img {
    height: 46px !important;
    width: auto !important;
  }

  /* mantener transiciones de color/sombra, no de altura/padding */
  header {
    transition: background .25s ease, box-shadow .25s ease !important;
  }
}


/* Promo WhatsApp: ocupa el ancho de las dos tarjetas */
.promo-card.promo-whatsapp{
  grid-column: 1 / -1;                 /* span todas las columnas */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;                  /* mismo “feeling” de las otras */
}

/* texto */
.promo-whatsapp__txt strong{
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f3f3a;                      /* similar a tu heading */
  display: block;
  margin-bottom: 4px;
}
.promo-whatsapp__txt p{
  margin: 0;
  color: #31404a;
}

/* botón */
.promo-whatsapp__btn{
  background: #25D366;                 /* WhatsApp */
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(37,211,102,.25);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.promo-whatsapp__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37,211,102,.32);
  filter: saturate(1.05);
}

/* En pantallas angostas se apila solo (sin tocar tus reglas móviles) */
@media (max-width: 768px){
  .promo-card.promo-whatsapp{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* === PROMO GRID: 3 columnas en desktop (sin tocar móviles) === */
@media (min-width: 1100px){
  .promo-tiers .promo-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px;
  }
}

/* === Card WhatsApp en una sola línea === */
.promo-card.promo-whatsapp{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px; /* igual que tus otras tarjetas */
}

.promo-whatsapp__txt{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-whatsapp__txt strong{
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f3f3a;
  margin: 0;
}
.promo-whatsapp__txt p{
  margin: 0;
  color: #31404a;
  display: inline; /* para que quede en el mismo renglón */
}

.promo-whatsapp__btn{
  flex: 0 0 auto;
  background: #25D366;
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(37,211,102,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.promo-whatsapp__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37,211,102,.32);
  filter: saturate(1.05);
}

/* En pantallas chicas puede saltar de línea si es necesario */
@media (max-width: 768px){
  .promo-whatsapp__txt{ white-space: normal; }
}


/* =========================================
   FIX ancho header SOLO en Carrito
   ========================================= */
@media (min-width: 769px){
  /* El body ya le agregamos .cart-page desde JS */
  .cart-page header,
  .cart-page header.header--scrolled{
    width: 100% !important;           /* que no se reduzca */
  }

  /* La “container” interna del header se mantiene igual de ancha */
  .cart-page header .container,
  .cart-page header.header--scrolled .container{
    --header-max: 1200px;             /* ajusta si tu sitio usa otro máximo */
    max-width: var(--header-max) !important;
    width: min(100%, var(--header-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Por si el modo scrolled aplicaba scale/transform que achica el ancho */
  .cart-page header.header--scrolled,
  .cart-page header.header--scrolled nav{
    transform: none !important;
  }
}


/* ==== Header fijo y consistente en móviles ==== */
:root{
  --header-h-mobile: 64px;              /* ajusta a 56/64/72 según te guste */
  --header-pad-x: 12px;                 /* padding horizontal interno */
}

/* Aplica a tus clases más comunes de header (ajusta si usas otras) */
@media (max-width: 768px){
  header,
  .site-header,
  .topbar{
    position: sticky;                   /* se queda arriba al hacer scroll */
    top: 0;
    z-index: 1000;
    height: calc(var(--header-h-mobile) + env(safe-area-inset-top));
    min-height: calc(var(--header-h-mobile) + env(safe-area-inset-top));
    padding: calc(env(safe-area-inset-top)) var(--header-pad-x);
    box-sizing: border-box;
    background: #247a75;                /* tu color actual del header */
  }

  /* Evita que el contenido interno cambie la altura */
  header > *, .site-header > *, .topbar > *{
    margin: 0 !important;
  }

  /* Contenedor interno alineado */
  .header-inner{
    height: var(--header-h-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Logo: adapta a la altura del header sin “empujar” */
  .brand,
  .brand img,
  .logo,
  .logo img{
    display: block;
    height: calc(var(--header-h-mobile) - 16px); /* margen respiro */
    width: auto;
    object-fit: contain;
  }

  /* Hamburguesa/ícono menú centrado verticalmente */
  .menu-toggle,
  .hamburger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--header-h-mobile);
    width: 44px;                        /* área táctil */
  }

  /* Evita que el nav visible cambie la altura del header */
  nav.primary,
  .main-nav{
    max-height: 0;                      /* cerrado por defecto */
    overflow: hidden;
  }
  /* Cuando abras el menú, muéstralo debajo del header, no dentro */
  .nav-open nav.primary,
  .nav-open .main-nav{
    position: fixed;
    top: calc(var(--header-h-mobile) + env(safe-area-inset-top));
    left: 0; right: 0;
    max-height: none;
    height: auto;
    background: #fff;
    z-index: 999;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
}



/* ==== FIX HEADER MÓVIL: altura fija, hamburguesa centrada, menú a ancho completo ==== */
@media (max-width: 768px){
  :root{ --header-h: 64px; }

  /* Header fijo con altura consistente */
  header{ padding: 0 !important; height: var(--header-h) !important; }
  header.header--scrolled{ padding: 0 !important; }

  /* Contenedor interno alineado y a altura fija */
  header .header-inner{ height: var(--header-h); display:flex; align-items:center; justify-content:space-between; }

  /* Logo contenido en la altura del header */
  header .logo-img{ height: 40px !important; width:auto; }

  /* Botón hamburguesa centrado verticalmente y con área táctil amplia */
  header .menu-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    height:var(--header-h); width:48px;
    line-height:1; padding:0; margin-left:auto;
  }

  /* Evitar que el contenedor limite el panel del menú */
  header .container{ position: static !important; }
  header nav{ position: static !important; }

  /* Menú desplegable: panel a ancho completo pegado al header */
  header nav .nav-links{
    position: fixed !important;
    top: calc(var(--header-h) + env(safe-area-inset-top)) !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    background: #266E6D !important;
    align-items: stretch !important;
  }

  /* Items del menú ocupan el 100% del ancho */
  .nav-links li{ width:100% !important; }
  .nav-links a{ display:block !important; width:100% !important; text-align:left !important; padding:14px 18px !important; }
}


/* ===== Animación segura para menú móvil ===== */
@media (max-width: 768px){
  /* Panel del menú (ul.nav-links) */
  header nav .nav-links{
    /* estado cerrado (invisible pero sin mover layout) */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease;
  }
  /* estado abierto */
  body.nav-open header nav .nav-links{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }

  /* Ítems del menú: base de cascada */
  .nav-links li{
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
  }
  body.nav-open .nav-links li{ opacity: 1; transform: none; }

  /* Stagger (cascada) – ajusta los tiempos si quieres más/menos “cola” */
  body.nav-open .nav-links li:nth-child(1){ transition-delay:   0ms; }
  body.nav-open .nav-links li:nth-child(2){ transition-delay:  60ms; }
  body.nav-open .nav-links li:nth-child(3){ transition-delay: 120ms; }
  body.nav-open .nav-links li:nth-child(4){ transition-delay: 180ms; }
  body.nav-open .nav-links li:nth-child(5){ transition-delay: 240ms; }
  body.nav-open .nav-links li:nth-child(6){ transition-delay: 300ms; }
  /* (si tienes más, continúa la secuencia) */

  /* Submenú (Médico/Veterinario) */
  .has-submenu .submenu{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .50s ease, opacity .32s ease, transform .32s ease;
  }
  .has-submenu.open > .submenu{
    max-height: 500px;         /* suficientemente grande para su contenido */
    opacity: 1;
    transform: translateY(0);
  }
  /* Cascada dentro del submenú */
  .has-submenu .submenu li{
    opacity: 0; transform: translateY(-6px);
    transition: opacity .32s ease, transform .32s ease;
  }
  .has-submenu.open .submenu li{ opacity: 1; 
  }
}