:root{
  --bg:#e9f8ff;
  --panel:#f6fdff;
  --card:#ffffff;
  --text:#072135;
  --muted:#426074;

  --aqua:#33d6e7;
  --blue:#2a7be4;
  --blue2:#1b4f9d;

  --border: rgba(7,33,53,.14);
  --shadow: 0 18px 42px rgba(7,33,53,.14);
  --radius: 18px;
}

[data-theme="dark"]{
  --bg:#081827;
  --panel:#0c2236;
  --card:#0b1d2e;
  --text:#eaf6ff;
  --muted:#9fbad0;
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 44px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 480px at 15% -10%, rgba(51,214,231,.35), transparent 60%),
    radial-gradient(900px 520px at 95% 0%, rgba(42,123,228,.20), transparent 60%),
    var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
.container{width:min(1180px, 92%); margin-inline:auto}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.w100{width:100%}
.row{display:flex; align-items:center; justify-content:space-between}
.gap{gap:10px}
.hide-sm{display:inline}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(246,253,255,.75);
  border-bottom:1px solid var(--border);
}
[data-theme="dark"] .topbar{background: rgba(10,24,39,.65)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}

.brand{display:flex; gap:12px; align-items:center}
.brand__logo{width:40px; height:40px; border-radius:12px; object-fit:cover; box-shadow: var(--shadow)}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__tag{font-size:.85rem; color:var(--muted)}

.nav{display:flex; gap:16px}
.nav a{color:var(--muted); font-weight:600}
.nav a:hover{color:var(--text)}

.actions{display:flex; gap:10px; align-items:center; flex-wrap:nowrap}

.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.45);
  color:var(--text);
  padding:10px 14px;
  border-radius: 14px;
  cursor:pointer;
  display:inline-flex; gap:10px; align-items:center;
  transition: transform .12s ease, border-color .12s ease;
}
[data-theme="dark"] .btn{background: rgba(255,255,255,.06)}
.btn:hover{transform: translateY(-1px)}

.btn--primary{
  border-color: transparent;
  background: linear-gradient(135deg, rgba(51,214,231,.95), rgba(42,123,228,.95));
  color:#062033;
  font-weight:900;
}

.btn--ghost{background: rgba(255,255,255,.25)}
[data-theme="dark"] .btn--ghost{background: rgba(255,255,255,.06)}

.btn--cart{white-space:nowrap}
.pill{
  background: rgba(255,255,255,.6);
  border:1px solid var(--border);
  padding:2px 8px;
  border-radius:999px;
  font-weight:900;
  min-width: 26px;
  text-align:center;
}
[data-theme="dark"] .pill{background: rgba(255,255,255,.10)}

.iconBtn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.30);
  color:var(--text);
  border-radius:12px;
  cursor:pointer;
  padding:8px 10px;
}
[data-theme="dark"] .iconBtn{background: rgba(255,255,255,.06)}

/* Vistas */
.section{padding: 22px 0}
.hero{
  padding: 26px 0 12px;
}
.hero__wrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
.heroCard{
  border:1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  padding: 18px;
}
[data-theme="dark"] .heroCard{background: rgba(255,255,255,.06)}
.heroCard h1{margin:0 0 8px; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing:-.4px}
.heroCard p{margin:0 0 14px; color:var(--muted); line-height:1.55}
.heroCtas{display:flex; gap:10px; flex-wrap:wrap}
.heroSide{
  border:1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(51,214,231,.18), rgba(42,123,228,.12));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height: 220px;
}
.heroSide img{width:100%; height:100%; object-fit:cover; display:block; opacity:.92}
.heroSide__overlay{
  position:absolute; inset:0;
  background: radial-gradient(700px 260px at 20% 0%, rgba(255,255,255,.35), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.28));
}
.heroBadges{
  position:absolute; left:14px; bottom:14px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.chip{
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
  padding:6px 10px;
  border-radius: 999px;
  font-size:.85rem;
  font-weight:700;
}
[data-theme="dark"] .chip{background: rgba(255,255,255,.08)}

/* Catálogo */
.toolbar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding: 12px 0;
}
.toolbar h2{margin:0}
.controls{display:flex; gap:10px; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:6px}
label{font-size:.85rem; color:var(--muted)}
input,select{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.6);
  color:var(--text);
  outline:none;
  min-width: 190px;
}
[data-theme="dark"] input,[data-theme="dark"] select{background: rgba(255,255,255,.08)}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 10px 0 30px;
}

.card{
  border:1px solid var(--border);
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow);
  transition: transform .14s ease;
}
[data-theme="dark"] .card{background: rgba(255,255,255,.06)}
.card:hover{transform: translateY(-2px)}
.card__media{height: 190px; position:relative; background: rgba(0,0,0,.06)}
.card__media img{width:100%; height:100%; object-fit:cover; display:block}
.badge{
  position:absolute; left:12px; top:12px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  font-weight:900; font-size:.82rem;
}
[data-theme="dark"] .badge{background: rgba(0,0,0,.30)}
.card__body{padding:14px}
.card__title{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.card__title h3{margin:0; font-size:1.05rem}
.rating{font-size:.9rem; color:var(--muted)}
.price{font-size:1.2rem; font-weight:900; margin: 8px 0}
.specs{display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 12px}
.spec{font-size:.82rem; border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:var(--muted); background: rgba(255,255,255,.4)}
[data-theme="dark"] .spec{background: rgba(255,255,255,.06)}
.card__actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.qty{
  display:flex; gap:10px; align-items:center;
  border:1px solid var(--border);
  border-radius: 14px;
  padding:6px 10px;
  background: rgba(255,255,255,.35);
}
[data-theme="dark"] .qty{background: rgba(255,255,255,.06)}
.qty button{border:none; background:transparent; cursor:pointer; font-size:1.05rem}

/* Detalle */
.detail{
  padding: 20px 0 26px;
}
.detail__wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.backLink{display:inline-flex; gap:10px; align-items:center; margin-bottom:12px; font-weight:800}
.panel{
  border:1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow);
  padding: 14px;
}
[data-theme="dark"] .panel{background: rgba(255,255,255,.06)}
.galleryMain{border-radius: 18px; overflow:hidden; background: rgba(0,0,0,.06)}
.galleryMain img, .galleryMain video{width:100%; height: 360px; object-fit:cover; display:block}
.thumbs{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
.thumb{
  width: 86px; height: 62px; border-radius: 12px;
  border:2px solid transparent;
  overflow:hidden; cursor:pointer;
  background: rgba(0,0,0,.06);
}
.thumb img,.thumb video{width:100%; height:100%; object-fit:cover; display:block}
.thumb.active{border-color: rgba(42,123,228,.95)}
.detailInfo h1{margin:0 0 6px}
.detailInfo .meta{color:var(--muted); font-weight:700}
.detailInfo ul{margin:10px 0 0; padding-left: 18px}
.detailInfo li{margin:6px 0}
.detailActions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

/* Recomendaciones */
.reco{padding: 10px 0 30px}
.reco h2{margin: 0 0 10px}
.recoGrid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px}
.recoItem{
  border:1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow);
  cursor:pointer;
}
[data-theme="dark"] .recoItem{background: rgba(255,255,255,.06)}
.recoItem img{width:100%; height:120px; object-fit:cover; display:block}
.recoItem div{padding: 10px}
.recoItem strong{display:block}

/* Drawer / Modal */
.drawer,.modal{position:fixed; inset:0; display:none; z-index:90}
.drawer[aria-hidden="false"], .modal[aria-hidden="false"]{display:block}
.drawer__backdrop,.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.52)}
.drawer__panel{
  position:absolute; right:0; top:0; height:100%;
  width: min(420px, 92%);
  background: var(--panel);
  border-left:1px solid var(--border);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.drawer__head,.drawer__foot{padding: 14px; border-bottom:1px solid var(--border)}
.drawer__foot{border-top:1px solid var(--border); border-bottom:none}
.drawer__body{padding: 12px 14px; overflow:auto; flex:1}

.cartItem{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding: 12px 0;
  border-bottom:1px solid var(--border);
}
.cartItem__title{font-weight:900}
.cartItem__meta{color:var(--muted); font-size:.9rem}
.cartItem__right{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.cartItem__price{font-weight:900}

.modal__panel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(520px, 94%);
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.modal__head,.modal__foot{padding: 14px; border-bottom:1px solid var(--border)}
.modal__foot{border-top:1px solid var(--border); border-bottom:none; display:flex; justify-content:space-between; align-items:center; gap:10px}
.modal__body{padding: 14px}

/* WhatsApp flotante */
.wa-float{
  position:fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, #25D366, #1fae55);
  color: #062033;
  font-size: 1.4rem;
  box-shadow: var(--shadow);
  z-index: 120;
}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding: 18px 0;
  background: rgba(246,253,255,.75);
}
[data-theme="dark"] .footer{background: rgba(10,24,39,.65)}
.footer__inner{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.footer__brand{display:flex; gap:10px; align-items:center}
.footer__logo{width:42px; height:42px; border-radius: 14px; object-fit:cover; box-shadow: var(--shadow)}
.footer__name{font-weight:900}
.footer__right{display:flex; gap:12px; flex-wrap:wrap}
.social{color:var(--muted); font-weight:700}
.social:hover{color:var(--text)}

/* Responsive */
@media (max-width: 980px){
  .hero__wrap{grid-template-columns: 1fr}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .detail__wrap{grid-template-columns: 1fr}
  .recoGrid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 560px){
  .nav{display:none}
  .hide-sm{display:none}
  input,select{min-width: 150px}
  .grid{grid-template-columns: 1fr}
  .galleryMain img,.galleryMain video{height: 280px}
}


/* FOOTER layout pro */
.footer{
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}

.footer__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* izquierda - centro - derecha */
  align-items: center;
  gap: 16px;
}

.footer__brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__logos{
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__logo{
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.footer__logo--secondary{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  opacity: .95;
}

.footer__brandText .footer__name{
  font-weight: 800;
  line-height: 1.1;
}

.footer__center{
  text-align: center;
}

.footer__rights{
  font-size: 14px;
  color: rgba(0,0,0,.72);
  white-space: nowrap;
}

/* Social icons */
.footer__right{
  display: flex;
  justify-content: flex-end;
}

.footer__social{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
}

.socialIcon{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transition: transform .15s ease, filter .15s ease;
}

.socialIcon:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.socialIcon svg{
  width: 20px;
  height: 20px;
  fill: rgba(0,0,0,.75);
}

/* Responsive: celular */
@media (max-width: 860px){
  .footer__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__brand{
    justify-content: center;
  }
  .footer__right{
    justify-content: center;
  }
  .footer__rights{
    white-space: normal;
    line-height: 1.35;
  }
}

/* ===== Social icons con color ===== */
.socialIcon svg{
  width: 20px;
  height: 20px;
  fill: currentColor;           /* <- clave: usa el color del link */
}

/* Colores por red */
.socialIcon--fb{ color:#1877F2; }
.socialIcon--ig{
  /* degradado IG */
  color: #E1306C;
}
.socialIcon--tt{ color:#111827; }
.socialIcon--wa{ color:#25D366; }

/* Fondo suave por red */
.socialIcon--fb{ background: rgba(24,119,242,.10); border-color: rgba(24,119,242,.22); }
.socialIcon--ig{ background: rgba(225,48,108,.10); border-color: rgba(225,48,108,.22); }
.socialIcon--tt{ background: rgba(17,24,39,.08); border-color: rgba(17,24,39,.18); }
.socialIcon--wa{ background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.25); }

/* Hover más pro */
.socialIcon:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ===== Botón flotante WhatsApp con logo ===== */
.waFloat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #25D366;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,.35);
  transition: transform .15s ease, filter .15s ease;
}

.waFloat:hover{ transform: translateY(-2px); filter: brightness(1.03); }

.waFloat svg{
  width: 26px;
  height: 26px;
  fill: #fff;
}





/* =========================================================
   BOTÓN FLOTANTE WHATSAPP (LOGO REAL)
========================================================= */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: #25D366;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform .15s ease, filter .15s ease;
}

.wa-float:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.wa-float svg{
  width: 28px;
  height: 28px;
  fill: #fff;
}




/* ===========================
   FIX ZOOM / ENCUADRE IMÁGENES
   (Catálogo + Detalle)
   =========================== */

/* 1) CONTENEDORES (altura estable) */
.card__media{
  height: 210px;          /* ajusta a gusto */
  overflow: hidden;
  border-radius: 18px;    /* si tu card ya redondea, puedes quitar */
}

.galleryMain{
  height: 420px;          /* ajusta a gusto */
  overflow: hidden;
  border-radius: 18px;
}

/* 2) CATÁLOGO: que llene bonito sin deformar */
.card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* llena la card */
  object-position: center; /* centra el encuadre */
}

/* 3) DETALLE: que se vea COMPLETA (como tu original) */
.galleryMain img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;      /* ✅ NO recorta */
  object-position: center;  /* centra */
  background: transparent;  /* o #fff si quieres marco blanco */
}

/* 4) MINIATURAS: recorte bonito (no deformar) */
.thumbs .thumb{
  overflow: hidden;
  border-radius: 12px;
}
.thumbs .thumb img,
.thumbs .thumb video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 5) OPCIONAL: si algún producto se ve “muy lejos” en contain,
   cambia SOLO el detalle a cover con esta clase:
   <section class="detail is-cover"> ... */
.detail.is-cover .galleryMain img{
  object-fit: cover;        /* llena */
  object-position: 50% 20%; /* enfoca un poco arriba */
}

/* Si no hay thumbs, no ocupa espacio */
.thumbs:empty { display: none; }

/* Si quieres que con 1 sola thumb también se oculte, entonces mejor JS (arriba). */

/* =========================
   GALERÍA: quitar bandejas vacías (solo CSS)
   ========================= */

/* La imagen grande: evita “zoom raro” y recortes feos */
.galleryMain img,
.galleryMain video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;     /* ← cambia a cover si quieres que llene recortando */
  object-position: center; /* centra siempre */
}

/* Miniaturas: por defecto, que se ajusten bien */
.thumbs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;     /* si hay muchas, baja a la siguiente fila */
  margin-top: 12px;
}

/* Caja de miniatura */
.thumb{
  width: 86px;         /* ajusta a tu gusto */
  height: 66px;        /* ajusta a tu gusto */
  overflow: hidden;
  border-radius: 14px;
  background: transparent; /* quita el “bloque gris” */
}

/* Contenido dentro de la miniatura */
.thumb img,
.thumb video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* miniatura se ve “bonita” */
  object-position: center;
}

/* CLAVE: si la miniatura NO carga y el <img> se oculta con tu onerror,
   el contenedor queda vacío. Entonces lo ocultamos. */
.thumb:has(img[style*="display: none"]) { display: none; }
.thumb:has(video[style*="display: none"]) { display: none; }

/* Si el thumb quedó vacío (sin img ni video), también lo ocultamos */
.thumb:empty { display: none; }

/* Si después de ocultar, el contenedor de thumbs queda sin nada, lo ocultamos */
.thumbs:empty { display: none; }



/* =========================
   QUITAR ESPACIO VACÍO BAJO LA GALERÍA (solo CSS)
   ========================= */

/* 1) Quita altos mínimos o fijos que dejan hueco */
.detail .panel{
  min-height: 0 !important;
  height: auto !important;
}

/* 2) Deja que la galería tome SOLO lo que necesita */
.detail .galleryMain{
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 10px; /* baja si lo quieres más pegado */
}

/* 3) Evita que el media estire la caja */
.detail .galleryMain img,
.detail .galleryMain video{
  height: auto !important;
  max-height: 70vh;    /* limita para que no se “coma” la pantalla */
  width: 100%;
  display: block;
  object-fit: contain;
}

/* 4) Miniaturas sin espacio extra */
.detail .thumbs{
  margin-top: 10px !important;
  padding-bottom: 0 !important;
}

/* 5) Si hay un “spacer”/salto raro dentro del panel, colápsalo */
.detail .panel > br{ display:none; }


/* Reducir el LARGO (altura) del media principal */
.detail .galleryMain{
  height: 52vh !important;   /* baja/sube: 45vh–60vh */
  max-height: 520px !important; /* tope en escritorio */
  overflow: hidden !important;
}

/* Mantener ancho y centrar el contenido */
.detail .galleryMain img,
.detail .galleryMain video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;        /* si quieres recorte usa: cover */
  object-position: center;
  display: block;
}


/* Título de recomendaciones: que no se mezcle con el fondo */
.reco .container h2{
  display: inline-block;           /* para que el fondo abrace el texto */
  background: rgba(255,255,255,.92);
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  margin: 6px 0 14px;
  line-height: 1.2;
}

/* Un poquito de aire arriba/abajo de la sección */
.reco{
  padding-top: 14px;
  padding-bottom: 18px;
}

/* =========================
   DETALLE (panel derecho) + BOTONES (CREATIVO + WhatsApp ORIGINAL)
   PÉGALO AL FINAL de tu style.css
   ========================= */

/* ---------- Panel derecho (detalle) más “premium” ---------- */
.detailInfo{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(40,120,255,.16);
  border-radius: 24px;
  padding: 22px 22px 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* brillo decorativo (esquinas) */
.detailInfo::before{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(0,180,255,.22), rgba(120,60,255,.10), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
}
.detailInfo::after{
  content:"";
  position:absolute;
  inset:auto auto -70px -70px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 70% 60%, rgba(37,211,102,.16), rgba(0,160,255,.10), transparent 62%);
  pointer-events:none;
}

/* Título más fuerte */
.detailInfo h1{
  margin: 0 0 6px;
  letter-spacing: -0.6px;
  font-weight: 950;
  line-height: 1.05;
}

/* Meta chips */
.detailInfo .meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  opacity: .95;
}
.detailInfo .meta + .meta{
  margin-top: 6px;
}

/* Precio tipo “pill” con color */
.detailInfo .price{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -.3px;
  background: linear-gradient(135deg, rgba(0,170,255,.20), rgba(120,60,255,.14));
  border: 1px solid rgba(0,160,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

/* ✅ Descripción más “limpia” (y compacta) */
.detailInfo #pDesc{
  margin: 8px 0 12px;
  line-height: 1.35;
  font-size: 12.5px;
  opacity: .95;

  /* Clamp a 3 líneas */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* WebKit/Blink */
  line-clamp: 3;         /* Estándar (para compatibilidad/lint) */

  overflow: hidden;
}

/* Lista specs en tarjeta elegante */
.detailInfo ul{
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.detailInfo li{
  padding: 7px 0;
  border-bottom: 1px dashed rgba(0,0,0,.10);
  font-size: 13px;
}
.detailInfo li:last-child{ border-bottom: 0; }

/* ---------- Botones (alineados + más llamativos) ---------- */
.detailActions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  align-items: stretch;
}

/* Base común */
.detailActions .btn{
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  font-weight: 950;
  padding: 0 16px;
  line-height: 1;
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  white-space: nowrap; /* evita saltos feos */
}

.detailActions .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
}

/* Carrito: azul premium */
.detailActions .btn--primary{
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(0,170,255,1), rgba(55,95,255,1));
  color: #fff;
}

/* WhatsApp: verde oficial + icono ORIGINAL (blanco) */
.detailActions .btn--ghost{
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, #25D366, #1AAE5A);
  color: #fff;
}

/* Icono WhatsApp (SVG “original” simple, blanco) */
.detailActions .btn--ghost::before{
  content:"";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.22));
  /* Logo WhatsApp (blanco) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M19.1 17.6c-.3-.2-1.6-.8-1.9-.9-.3-.1-.5-.2-.8.2-.2.3-.9.9-1.1 1.1-.2.2-.4.2-.7.1-.3-.2-1.2-.4-2.3-1.4-.9-.8-1.4-1.8-1.6-2.1-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.4.3-.6.1-.2 0-.4 0-.6l-.9-2.1c-.2-.6-.5-.5-.8-.5h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.4 1.4 3.6c.2.3 2.3 3.7 5.6 5.1 3.3 1.4 3.3.9 3.9.8.6-.1 1.6-.7 1.8-1.3.2-.6.2-1.2.2-1.3 0-.1-.3-.2-.5-.3z'/%3E%3Cpath fill='%23ffffff' d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.1 1.6 5.8L4.3 28l7.4-1.9c1.3.7 2.8 1.1 4.3 1.1 6.6 0 12-5.4 12-12S22.6 3 16 3zm0 21.5c-1.4 0-2.8-.4-4-.9l-.3-.2-4.4 1.1 1.2-4.3-.2-.3c-.8-1.2-1.2-2.6-1.2-4 0-4.7 3.8-8.5 8.5-8.5S24.5 11.3 24.5 16 20.7 24.5 16 24.5z'/%3E%3C/svg%3E");
}

.detailActions .btn--ghost:hover{
  filter: brightness(1.03) saturate(1.08);
}

/* ---------- Ajustes “de largo” (altura) para fotos verticales ---------- */
/* Evita que la imagen principal sea demasiado alta */
.galleryMain img,
.galleryMain video{
  width: 100%;
  height: 420px;            /* ✅ controla el “largo” */
  object-fit: contain;      /* no recorta, muestra completa */
  background: rgba(0,0,0,.04);
  border-radius: 18px;
}

/* Si quieres que llene más sin recortar casi: cambia a cover */
.galleryMain--cover img{ object-fit: cover; }

/* ---------- Quitar “bandejas” vacías SOLO con CSS ---------- */
/* Si el thumb está vacío (porque la img no cargó y quedó sin contenido), lo escondemos */
.thumbs .thumb:has(img[style*="display: none"]),
.thumbs .thumb:has(video[style*="display: none"]){
  display: none;
}

/* Si por alguna razón quedan huecos grandes, compacta el contenedor */
.thumbs{
  gap: 10px;
  margin-top: 12px;
  justify-content: flex-start;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .galleryMain img,
  .galleryMain video{
    height: 340px;
  }
}

@media (max-width: 720px){
  .detailActions{
    grid-template-columns: 1fr;
  }

  .detailActions .btn{
    height: 50px;
  }

  .detailInfo #pDesc{
    font-size: 12px;

    -webkit-line-clamp: 4; /* WebKit/Blink */
    line-clamp: 4;         /* Estándar (lint/compatibilidad) */
  }

  .galleryMain img,
  .galleryMain video{
    height: 300px;
  }
}


/* =========================================
   FIX ALINEACIÓN (detalle)
   - hace que el panel derecho NO “baje” más que el izquierdo
   - quita espacios extra del UL
   - botones con mismo ancho y centrados
   ========================================= */

/* 1) Asegura que los dos paneles del detalle se alineen arriba */
.detail__wrap{
  align-items: flex-start !important;   /* ✅ clave */
}

/* 2) Panel izquierdo y derecho con misma lógica de alto */
.detail__wrap .panel{
  align-self: flex-start;
}

/* 3) Quita “aire” extra del panel derecho que hace que se vea desalineado */
.detailInfo{
  padding-bottom: 14px !important;
}

/* 4) La lista NO debe empujar tanto hacia abajo */
.detailInfo ul{
  margin: 0 !important;
  padding: 10px 12px !important;
}

/* 5) Reduce un poquito la altura de cada spec */
.detailInfo li{
  padding: 6px 0 !important;
  line-height: 1.2 !important;
}

/* 6) Botones: mismo ancho, centrados y sin ocupar todo */
.detailActions{
  display: flex !important;
  justify-content: center !important;  /* ✅ quedan centrados en el panel */
  align-items: center !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

/* mismo ancho real para los dos */
.detailActions .btn{
  width: 300px !important;      /* ✅ ajusta este número si quieres más/menos */
  min-width: 0 !important;
  height: 52px !important;
}

/* si el panel es más angosto, que no se rompa */
@media (max-width: 980px){
  .detailActions{
    flex-direction: column !important;
  }
  .detailActions .btn{
    width: 100% !important;
  }
}

/* 7) El panel izquierdo a veces deja “colchón” abajo: recórtalo */
.panel .thumbs{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 8) Si aún te queda un hueco por la galería, baja ese padding del panel izquierdo */
.detail .panel:first-child{
  padding-bottom: 12px !important;
}

/* =========================================
   Ajuste: menos “aire” en la lista + botones menos anchos
   (pega esto AL FINAL de tu style.css)
   ========================================= */

/* Panel derecho: menos padding abajo */
.detailInfo{
  padding: 18px 18px 14px !important;
}

/* Lista specs: más compacta */
.detailInfo ul{
  padding: 10px 12px !important;
  margin: 10px 0 12px !important; /* ✅ reduce espacio antes/después */
  border-radius: 16px;
}

/* Cada item: menos alto + línea más corta */
.detailInfo li{
  padding: 5px 0 !important;
  line-height: 1.15 !important;
  border-bottom: 1px dashed rgba(0,0,0,.08) !important;
}
.detailInfo li:last-child{ border-bottom: 0 !important; }

/* Quita el “salto” extra que suelen meter los UL/LI */
.detailInfo ul, .detailInfo li{
  list-style-position: inside;
}

/* Botones: más pequeños y SIN ocupar toda la línea */
.detailActions{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 10px !important;   /* ✅ menos espacio arriba */
}

/* ancho real de botones */
.detailActions .btn{
  height: 48px !important;
  width: 255px !important;       /* ✅ más angosto (ajusta 230-280 a gusto) */
  padding: 0 14px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
}

/* si no caben, apila en móvil */
@media (max-width: 820px){
  .detailActions{
    flex-direction: column !important;
  }
  .detailActions .btn{
    width: 100% !important;
  }
}

/* Opcional: reduce un poquito el texto de descripción */
.detailInfo #pDesc{
  font-size: 14px !important;
  margin: 6px 0 10px !important;
  line-height: 1.35 !important;
}


/* =========================================================
   PARCHE DARK MODE (WEB + MÓVIL)
   Evita “desaparecer” texto/bordes en tema oscuro.
   Pegar al FINAL del style.css
   ========================================================= */

:root[data-theme="dark"] body{
  background: radial-gradient(1200px 700px at 20% 10%, rgba(0,170,255,.10), transparent 60%),
              radial-gradient(900px 600px at 90% 30%, rgba(37,211,102,.08), transparent 55%),
              linear-gradient(180deg, #07131f, #040b12);
  color: rgba(255,255,255,.92);
}

/* Panels generales (incluye el detalle y muchos contenedores) */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .detailInfo,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .heroCard{
  background: rgba(16,24,34,.78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px);
}

/* Texto: evita que herede color oscuro */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .detailInfo,
:root[data-theme="dark"] .detailInfo *{
  color: rgba(255,255,255,.92);
}

/* Meta / descripciones */
:root[data-theme="dark"] .meta,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] #pDesc{
  color: rgba(255,255,255,.72) !important;
}

/* Descripción más pequeña (como pediste) */
.detailInfo #pDesc{
  font-size: 12.5px !important;
  line-height: 1.32 !important;
  margin: 6px 0 10px !important;
}

/* Lista specs: que NO quede blanca “lavada” ni con texto invisible */
:root[data-theme="dark"] .detailInfo ul{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
:root[data-theme="dark"] .detailInfo li{
  color: rgba(255,255,255,.90) !important;
  border-bottom: 1px dashed rgba(255,255,255,.16) !important;
  font-size: 12.8px !important;
  line-height: 1.25 !important;
  padding: 6px 0 !important;
}

/* Reduce espacios laterales dentro de specs (menos “aire”) */
.detailInfo ul{
  padding: 10px 12px !important;
}
.detailInfo{
  padding: 16px 16px 14px !important;
}

/* “Otros jacuzzis…”: que no se pierda sobre el fondo */
.reco{
  padding-top: 10px;
}
:root[data-theme="dark"] .reco h2{
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.55) !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 14px;
  display: inline-block;
}

/* Cards en dark: texto y precio visibles */
:root[data-theme="dark"] .card__body,
:root[data-theme="dark"] .card__title h3,
:root[data-theme="dark"] .price{
  color: rgba(255,255,255,.92) !important;
}
:root[data-theme="dark"] .spec{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
}

/* Imagen grande “zoom”: mantener natural sin recorte */
.galleryMain img{
  width: 100%;
  height: 500px;             /* ajusta “largo” */
  object-fit: contain;       /* evita recorte */
  object-position: center;
  background: rgba(0,0,0,.04);
}
@media (max-width: 900px){
  .galleryMain img{ height: 420px; }
}
@media (max-width: 520px){
  .galleryMain img{ height: 360px; }
}

/* Botones: menos anchos, mejor alineados, sin espacios grandes */
.detailActions{
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}
.detailActions .btn{
  height: 48px !important;
  width: 260px !important;     /* menos ancho */
  max-width: 100% !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.18) !important;
}
@media (max-width: 720px){
  .detailActions .btn{ width: 100% !important; }
}

/* WhatsApp botón: asegurar contraste en dark */
:root[data-theme="dark"] .detailActions .btn--ghost{
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Footer en dark (para que no “desaparezca”) */
:root[data-theme="dark"] footer,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .footer *{
  color: rgba(255,255,255,.78) !important;
}
:root[data-theme="dark"] footer a,
:root[data-theme="dark"] .footer a{
  color: rgba(255,255,255,.90) !important;
}

/* Evita que el botón flotante de WA tape contenido (web + móvil) */
.detail{ padding-bottom: 110px !important; }

/* Opcional: quita espacio extra debajo de la galería si no hay thumbs */
.thumbs{ margin-top: 10px !important; }



/* HERO Media (2 videos + 2 imágenes) sin romper layout */
.heroSide{
  position: relative;
  overflow: hidden;
}

.heroMedia{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Todo ocupa el hero */
.heroMedia__video,
.heroMedia__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .8s ease;
}

/* Animación por turnos (24s total) */
.heroMedia__video{ animation: heroSwap 24s infinite; }
.heroMedia__img{ animation: heroSwap 24s infinite 6s; }
.heroMedia__video--2{ animation: heroSwap 24s infinite 12s; }
.heroMedia__img--2{ animation: heroSwap 24s infinite 18s; }

@keyframes heroSwap{
  0%{ opacity: 0; }
  8%{ opacity: 1; }
  42%{ opacity: 1; }
  50%{ opacity: 0; }
  100%{ opacity: 0; }
}

/* overlay y chips encima del media */
.heroSide__overlay,
.heroBadges{
  position: relative;
  z-index: 2;
}

.heroSide{ position:relative; overflow:hidden; border-radius:24px; }

.heroMedia{
  position:relative;
  width:100%;
  height:100%;
  min-height:260px;  /* ajusta si quieres */
  border-radius:24px;
  overflow:hidden;
  background: rgba(255,255,255,.12);
}

.heroMedia__item{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:scale(1.02);
  transition: opacity .8s ease, transform 1.2s ease;
  pointer-events:none;
}

.heroMedia__item.is-active{
  opacity:1;
  transform:scale(1);
}

/* ===== HERO BADGES: visibles + flotando abajo ===== */

.heroSide{ position: relative; overflow: hidden; }

/* Oscurece un poquito abajo para que el texto contraste */
.heroSide__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
  z-index: 2;
}

/* Contenedor de las 3 palabras */
.heroBadges{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-start;

  z-index: 3;                 /* por encima del overlay y del media */
}

/* Cada chip */
.heroBadges .chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;

  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .1px;
  font-size: 14px;
  line-height: 1;

  background: rgba(10,20,35,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* Puntico decorativo */
.heroBadges .chip::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,180,255,.9);
  box-shadow: 0 0 0 4px rgba(0,180,255,.18);
}

/* Responsive: en pantallas pequeñas que no se tape */
@media (max-width: 520px){
  .heroBadges{ left:12px; right:12px; bottom:12px; gap:8px; }
  .heroBadges .chip{ font-size: 13px; padding: 9px 12px; }
}


/* ===== FIX DEFINITIVO: backdrop no captura clicks ===== */
#cartBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  pointer-events: none; /* ✅ clave: NO intercepta clicks */
}

#cartDrawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 92vw);
  z-index: 9999;
  pointer-events: auto;
}


/* =========================
   CART DRAWER SIEMPRE DERECHA
   ========================= */

#cartDrawer{
  position: fixed;
  top: 0;
  bottom: 0;

  right: 0 !important;   /* ✅ derecha */
  left: auto !important; /* ✅ no izquierda */

  width: min(420px, 92vw);
  z-index: 9999;
  pointer-events: auto;

  /* cerrado: fuera hacia la derecha */
  transform: translateX(110%);
  transition: transform .22s ease;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(0,0,0,.10);
  border-right: 0;
}

/* abierto */
#cartDrawer[aria-hidden="false"]{
  transform: translateX(0);
  pointer-events: auto;
}

/* cerrado: que no capture clicks */
#cartDrawer[aria-hidden="true"]{
  pointer-events: none;
}

/* backdrop */
#cartBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
}

#cartBackdrop[aria-hidden="true"]{
  pointer-events: none;
}


/* =========================
   Carrito: más pequeño + más transparente
   ========================= */

#cartDrawer{
  width: min(340px, 88vw) !important;   /* ✅ más angosto */
  background: rgba(255,255,255,.72) !important; /* ✅ más transparente */
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  box-shadow: -18px 0 60px rgba(0,0,0,.18) !important;
  border-left: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 18px 0 0 18px; /* se ve más “panel” */
}

/* En modo oscuro: mantenerlo legible pero translúcido */
html[data-theme="dark"] #cartDrawer{
  background: rgba(10,18,28,.62) !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: -18px 0 70px rgba(0,0,0,.45) !important;
}

/* Backdrop un poquito más suave */
#cartBackdrop{
  background: rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] #cartBackdrop{
  background: rgba(0,0,0,.40) !important;
}

/* Opcional: que el contenido adentro no se vea “pesado” */
#cartDrawer .cartItem{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px;
}
html[data-theme="dark"] #cartDrawer .cartItem{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}


/* Más bajito en PC */
#cartDrawer{
  top: 48px !important;      /* antes 16px */
  bottom: 48px !important;   /* antes 16px */
  height: auto !important;
  max-height: calc(100dvh - 96px) !important; /* 48 + 48 */
  overflow: hidden !important;
}

/* Más bajito en móvil */
@media (max-width: 768px){
  #cartDrawer{
    top: 56px !important;      /* antes 12px */
    bottom: 56px !important;   /* antes 12px */
    max-height: calc(100dvh - 112px) !important; /* 56 + 56 */
  }
}


/* =========================
   SCROLL SI O SI (móvil + PC)
========================= */
#cartDrawer{
  /* tu altura reducida */
  top: 56px !important;
  bottom: 56px !important;
  height: auto !important;
  max-height: calc(100dvh - 112px) !important;

  /* ✅ habilita scroll */
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* ✅ scroll suave y funcional en iOS/Android */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;

  /* opcional: reserva espacio de scrollbar en desktop */
  scrollbar-gutter: stable;
}

/* Slim visible en desktop (en móvil puede ignorarse) */
#cartDrawer{ scrollbar-width: thin; }
#cartDrawer::-webkit-scrollbar{ width: 6px; }
#cartDrawer::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.35); border-radius: 999px; }
#cartDrawer::-webkit-scrollbar-track{ background: transparent; }

/* Pista visual de que hay scroll (móvil y PC) */
#cartDrawer{
  mask-image: linear-gradient(to bottom,
    transparent 0px,
    black 18px,
    black calc(100% - 18px),
    transparent 100%
  );
}


html, body{
  overflow: auto !important;
}

/* si tu sistema usa una clase para bloquear */
body.no-scroll,
body.modal-open,
body.lock-scroll{
  overflow: auto !important;
  position: static !important;
  height: auto !important;
}


/* =========================
   FIX: que NO se pierda la barra (slim)
========================= */

/* El contenedor que scrollea: si es el drawer */
#cartDrawer{
  padding-right: 10px !important;     /* ✅ separa el scrollbar del borde */
  box-sizing: border-box !important;
  scrollbar-gutter: stable both-edges; /* ✅ desktop */
}

/* Si el que scrollea es la lista, mejor aún: */
#cartDrawer .cartItems,
#cartDrawer #cartItems{
  padding-right: 12px !important;     /* ✅ espacio para la barra */
  box-sizing: border-box !important;

  /* evita que el contenido se meta debajo de la barra */
  scrollbar-gutter: stable both-edges;
}

/* Barra slim un poco “hacia adentro” (Chrome/Edge/Safari desktop) */
#cartDrawer::-webkit-scrollbar,
#cartDrawer .cartItems::-webkit-scrollbar,
#cartDrawer #cartItems::-webkit-scrollbar{
  width: 6px;
}
#cartDrawer::-webkit-scrollbar-thumb,
#cartDrawer .cartItems::-webkit-scrollbar-thumb,
#cartDrawer #cartItems::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(0,0,0,.35);

  /* ✅ truco: hace que el thumb no quede pegado al borde */
  border: 2px solid rgba(255,255,255,.0);
  background-clip: padding-box;
}

#cartDrawer .cartItems,
#cartDrawer #cartItems{
  padding-right: 8px !important;
}

/* ======================================
   FIX: padding interno + NO scroll horizontal
====================================== */
@media (max-width: 768px){

  /* 1) que el panel no muerda el contenido */
  #cartDrawer{
    padding: 10px 10px !important;     /* ✅ aire interno */
    box-sizing: border-box !important;

    overflow-x: hidden !important;     /* ✅ mata el scroll horizontal */
  }

  /* 2) el contenedor que scrollea (drawer o lista) NO debe permitir X */
  #cartDrawer .cartItems,
  #cartDrawer #cartItems{
    padding: 8px !important;           /* ✅ aire para textos */
    box-sizing: border-box !important;
    overflow-x: hidden !important;     /* ✅ mata el slim lateral */
  }

  /* 3) tarjetas: que no toquen bordes */
  #cartDrawer .cartItem{
    margin: 0 0 8px 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  /* 4) evita que textos largos o precios rompan el ancho */
  #cartDrawer *{
    max-width: 100% !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 5) si tus filas son flex (nombre+precio / botones), permite wrap */
  #cartDrawer .cartItem,
  #cartDrawer .row,
  #cartDrawer .itemRow{
    flex-wrap: wrap !important;
  }

  /* 6) CLAVE en flex: permite que hijos encojan (si hay flex) */
  #cartDrawer .cartItem *{
    min-width: 0 !important;
  }
}

/* =========================
   MÓVIL: centrar visualmente el texto (sin tocar scroll)
========================= */
@media (max-width: 768px){

  /* Aire interno general del panel */
  #cartDrawer{
    padding: 12px 12px !important;      /* ✅ separa todo del borde */
    box-sizing: border-box !important;
  }

  /* Si tienes un contenedor interno de items */
  #cartDrawer .cartItems,
  #cartDrawer #cartItems{
    padding: 8px 6px !important;        /* ✅ más aire interno */
    box-sizing: border-box !important;
  }

  /* Cada tarjeta del producto */
  #cartDrawer .cartItem{
    padding: 10px !important;           /* ✅ texto más “centrado” */
    margin: 0 0 10px 0 !important;
    box-sizing: border-box !important;
  }

  /* Título y footer con aire */
  #cartDrawer h2,
  #cartDrawer .cartTitle{
    margin: 0 0 10px 0 !important;
    padding: 0 2px !important;
  }

  #cartDrawer .cartTotal{
    padding: 10px 6px !important;
    box-sizing: border-box !important;
  }

  /* Botones: que no queden pegados */
  #cartDrawer button,
  #cartDrawer .btnClearCart,
  #cartDrawer .btnWhatsCart{
    margin-left: 2px !important;
    margin-right: 2px !important;
  }
}/* =========================
   MÓVIL: reducir ANCHO del drawer (anchor)
========================= */
@media (max-width: 768px){
  #cartDrawer{
    width: min(230px, 62vw) !important;  /* ✅ más angosto */
    right: 8px !important;
    left: auto !important;
  }
}


/* =========================
   MÓVIL: drawer más angosto + todo compacto (sin desbordes)
========================= */
@media (max-width: 768px){

  /* 1) Drawer más angosto */
  #cartDrawer{
    width: min(210px, 58vw) !important;
    right: 8px !important;
    left: auto !important;

    top: 70px !important;
    bottom: 70px !important;
    max-height: calc(100dvh - 140px) !important;

    padding: 12px 10px !important;
    box-sizing: border-box !important;

    font-size: 10.5px !important;
    line-height: 1.12 !important;

    overflow-x: hidden !important; /* evita que se salga */
  }

  /* 2) Todo adentro respeta el ancho */
  #cartDrawer *{
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important; /* clave si hay flex */
  }

  /* 3) Título */
  #cartDrawer h1,
  #cartDrawer h2,
  #cartDrawer .cartTitle,
  #cartDrawer .title{
    font-size: 12px !important;
    margin: 0 0 8px 0 !important;
  }

  /* 4) Lista/Items */
  #cartDrawer .cartItems,
  #cartDrawer #cartItems{
    padding: 6px 4px !important;
  }

  #cartDrawer .cartItem{
    padding: 8px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }

  /* 5) Textos y saltos */
  #cartDrawer p,
  #cartDrawer span,
  #cartDrawer small{
    font-size: 10px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 6) Precios (bajar “numerotes”) */
  #cartDrawer .price,
  #cartDrawer .cartPrice,
  #cartDrawer .cartTotal strong,
  #cartDrawer .cartTotal b{
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* 7) Filas tipo flex (nombre/precio y controles) -> permitir wrap */
  #cartDrawer .cartItem,
  #cartDrawer .row,
  #cartDrawer .itemRow,
  #cartDrawer .cartLine{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 8) Botones: más pequeños + letras más pequeñas */
  #cartDrawer button,
  #cartDrawer .btnClearCart,
  #cartDrawer .btnWhatsCart,
  #cartDrawer .removeBtn,
  #cartDrawer .qtyBtn{
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 12px !important;
  }

  /* Botón WhatsApp compacto (que no se coma todo) */
  #cartDrawer .btnWhatsCart{
    padding: 7px 8px !important;
    font-size: 10px !important;
  }

  /* Botón cerrar */
  #cartDrawer .btnCloseCart,
  #cartDrawer #btnCloseCart{
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }
}
@media (max-width: 768px){
  #cartDrawer .cartItem :is(small,p,span){
    font-size: 7px !important;          /* ✅ un poquito más pequeño */
    line-height: 1.05 !important;       /* ✅ más compacto */
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }
}


@media (max-width: 768px){
  /* fuerza tamaño base en todo el drawer */
  #cartDrawer, 
  #cartDrawer *{
    font-size: 8px !important;
    line-height: 1.05 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  /* opcional: deja los precios un pelín más grandes para que se lean */
  #cartDrawer .price,
  #cartDrawer .cartPrice,
  #cartDrawer .cartTotal{
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* opcional: letras de botones */
  #cartDrawer button{
    font-size: 8px !important;
  }
}


/* =========================
   MÓVIL: que el carrito se vea más (menos transparente)
========================= */
@media (max-width: 768px){
  #cartDrawer{
    background: rgba(255,255,255,.92) !important; /* antes .72 */
    border-left: 1px solid rgba(0,0,0,.14) !important;
    box-shadow: -18px 0 70px rgba(0,0,0,.28) !important;
  }

  #cartDrawer .cartItem{
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
  }
}

/* Modo oscuro */
@media (max-width: 768px){
  html[data-theme="dark"] #cartDrawer{
    background: rgba(10,18,28,.86) !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: -18px 0 80px rgba(0,0,0,.55) !important;
  }

  html[data-theme="dark"] #cartDrawer .cartItem{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }
}

@media (max-width: 768px){

  /* 1) “Zoom” del carrito: sube todo un poco */
  #cartDrawer{
    font-size: 11px !important;     /* antes te quedó demasiado pequeño */
    line-height: 1.15 !important;
  }

  /* 2) Texto dentro de cada item (Unitario, etc.) */
  #cartDrawer .cartItem :is(small,p,span){
    font-size: 10px !important;     /* legible, sin romperse */
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  /* 3) Precios un poquito más grandes para que se lean */
  #cartDrawer .price,
  #cartDrawer .cartPrice,
  #cartDrawer .cartTotal{
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* 4) Letras de botones */
  #cartDrawer button{
    font-size: 10.5px !important;
  }
}

/* =========================
   NOSOTROS (página)
========================= */
.nosotros-hero{ padding: 32px 0; }

.nosotros-wrap{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.30)),
    url('assets/nosotros-bg.jpg') center/cover no-repeat; /* <- cambia ruta */
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}

html[data-theme="dark"] .nosotros-wrap{
  background:
    linear-gradient(180deg, rgba(10,18,28,.72), rgba(10,18,28,.30)),
    url('assets/nosotros-bg.jpg') center/cover no-repeat;
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}

.nosotros-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.10);
  pointer-events:none;
}
html[data-theme="dark"] .nosotros-overlay{ background: rgba(0,0,0,.28); }

.nosotros-inner{ position: relative; padding: 28px; }

.nosotros-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  margin-bottom: 18px;
  text-align:center;
}

.nosotros-logo{
  width: 66px;
  height: 66px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
}
html[data-theme="dark"] .nosotros-logo{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.nosotros-logo img{ width:100%; height:100%; object-fit:cover; }

.nosotros-title{ margin:0; font-size: clamp(26px, 3vw, 42px); }
.nosotros-sub{ margin: 4px 0 0; opacity: .9; font-weight: 600; }
.nosotros-tagline{
  margin: 4px 0 0;
  color: #0aa6c6;
  font-weight: 600;
  opacity: .95;
}
html[data-theme="dark"] .nosotros-tagline{ color: #44d1ff; }

.nosotros-actions{ display:flex; justify-content:center; margin: 14px 0 22px; }

.nosotros-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.glass-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 45px rgba(0,0,0,.10);
}
html[data-theme="dark"] .glass-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

.glass-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.glass-card p{ margin:0; opacity:.92; line-height:1.55; }

.glass-list{ margin: 10px 0 0; padding-left: 18px; }
.glass-list li{ margin: 6px 0; }

@media (max-width: 900px){
  .nosotros-grid{ grid-template-columns: 1fr; }
  .nosotros-inner{ padding: 18px; }
  .nosotros-logo{ width: 56px; height: 56px; }
}


/* =========================
   NOSOTROS: logo grande + burbujas + animación
========================= */

.nosotros-wrap{
  position: relative;
  overflow: hidden;
}

/* Logo más grande y flotando */
.nosotros-logo{
  width: 110px;          /* ✅ MÁS GRANDE */
  height: 110px;
  border-radius: 26px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
  animation: floatLogo 3.8s ease-in-out infinite; /* ✅ se mueve */
}

.nosotros-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* para que se vea completo el logo */
  padding: 10px;
}

@keyframes floatLogo{
  0%   { transform: translateY(0px) rotate(-1deg); }
  50%  { transform: translateY(-10px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(-1deg); }
}

/* Responsive: en móvil no tan gigante */
@media (max-width: 768px){
  .nosotros-logo{
    width: 86px;
    height: 86px;
    border-radius: 22px;
  }
}

/* ===== Burbujas ===== */
.bubbles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bubble{
  position: absolute;
  left: var(--x);
  bottom: -80px;
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  opacity: var(--o);

  /* look de burbuja */
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.95),
    rgba(0,170,210,.25) 35%,
    rgba(255,255,255,.10) 70%,
    rgba(255,255,255,0) 100%
  );
  box-shadow: inset 0 0 14px rgba(255,255,255,.35);

  animation: bubbleUp var(--dur) linear infinite;
  animation-delay: var(--d);
}

@keyframes bubbleUp{
  0%   { transform: translate(-50%, 0) scale(1); }
  100% { transform: translate(-50%, -120vh) scale(1.08); }
}

/* Asegura que el contenido esté encima de burbujas */
.nosotros-overlay,
.nosotros-inner{ position: relative; z-index: 1; }


/* =========================
   FOOTER: más bajito/delgado (como tu 2da imagen)
========================= */

/* usa el que coincida con tu HTML: footer, #footer o .footer */
footer, #footer, .footer{
  padding: 10px 0 !important;     /* ✅ menos alto */
  margin-top: 18px !important;
}

footer .container, #footer .container, .footer .container{
  padding: 0 14px !important;
}

/* si tu footer está en "panel" o "card" reduce el padding */
footer .panel, #footer .panel, .footer .panel{
  padding: 10px 14px !important;
  border-radius: 16px !important;
}

/* layout: que no se estire raro */
footer .footer-inner, #footer .footer-inner, .footer .footer-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* texto más compacto */
footer p, footer small,
#footer p, #footer small,
.footer p, .footer small{
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* iconos: más pegados y alineados */
footer .social, #footer .social, .footer .social{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}



/* =========================
   NOSOTROS: MÁS COLOR + BURBUJAS MÁS VIVAS
========================= */

/* Fondo más atractivo con gradientes */
.nosotros-wrap{
  background:
    radial-gradient(900px 420px at 15% 12%, rgba(0,170,210,.30), transparent 55%),
    radial-gradient(820px 420px at 85% 20%, rgba(86,220,255,.25), transparent 58%),
    radial-gradient(700px 380px at 50% 95%, rgba(0,120,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.40)) !important;

  box-shadow: 0 22px 80px rgba(0,0,0,.16);
}

/* En oscuro también bonito */
html[data-theme="dark"] .nosotros-wrap{
  background:
    radial-gradient(900px 420px at 15% 12%, rgba(68,209,255,.25), transparent 55%),
    radial-gradient(820px 420px at 85% 20%, rgba(120,120,255,.18), transparent 58%),
    radial-gradient(700px 380px at 50% 95%, rgba(0,170,210,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,18,28,.80), rgba(10,18,28,.45)) !important;

  box-shadow: 0 26px 95px rgba(0,0,0,.45);
}

/* Cards más “glass” */
.glass-card{
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.10) !important;
}
html[data-theme="dark"] .glass-card{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.35) !important;
}

/* Botón más llamativo */
.nosotros-actions .btn--primary{
  box-shadow: 0 14px 40px rgba(0,170,210,.28);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nosotros-actions .btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,170,210,.36);
}

/* Burbujas más visibles */
.bubble{
  opacity: var(--o);
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.98),
    rgba(0,200,255,.40) 30%,
    rgba(0,140,255,.20) 58%,
    rgba(255,255,255,0) 100%
  );
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.45),
    0 10px 40px rgba(0,170,210,.15);
}

/* Extra: movimiento lateral suave para que se vea más “vivo” */
@keyframes bubbleUp2{
  0%   { transform: translate(-50%, 0) translateX(0) scale(1); }
  50%  { transform: translate(-50%, -60vh) translateX(14px) scale(1.06); }
  100% { transform: translate(-50%, -120vh) translateX(-10px) scale(1.10); }
}

/* Activa movimiento lateral sin tocar tu JS */
.bubble{
  animation-name: bubbleUp2 !important;
}

.nosotros-wrap strong{
  font-weight: 800;
  color: rgba(0,120,160,.95);
  background: linear-gradient(180deg, rgba(0,170,210,0), rgba(0,170,210,.18));
  padding: 0 .22em;
  border-radius: 8px;
}
html[data-theme="dark"] .nosotros-wrap strong{
  color: rgba(160,240,255,.92);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(160,240,255,.18));
}


/* =========================
   CONTACTO PRO (AISLADO)
   Solo afecta a .sj-contacto2
========================= */
.sj-contacto2 .sj-contacto2__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.sj-contacto2 .sj-contacto2__h2{
  margin:0;
  font-size:28px;
  letter-spacing:.2px;
}

.sj-contacto2 .sj-contacto2__sub{
  margin:8px 0 0;
  opacity:.75;
}

.sj-contacto2 .sj-contacto2__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  font-weight:600;
  white-space:nowrap;
}

.sj-contacto2 .sj-contacto2__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#25d366;
  box-shadow: 0 0 0 4px rgba(37,211,102,.18);
}

/* 2 columnas */
.sj-contacto2 .sj-contacto2__layout{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}

/* Cards */
.sj-contacto2 .sj-contacto2__card{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 16px;
}

.sj-contacto2 .sj-contacto2__card--right{
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.52));
}

/* Titles */
.sj-contacto2 .sj-contacto2__h3{
  margin:0;
  font-size:20px;
  text-align:center;
}

.sj-contacto2 .sj-contacto2__hint{
  margin:10px auto 0;
  text-align:center;
  max-width: 340px;
  opacity:.75;
}

/* Items */
.sj-contacto2 .sj-contacto2__items{
  margin-top:14px;
  display:grid;
  gap:12px;
}

.sj-contacto2 .sj-contacto2__item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
}

.sj-contacto2 .sj-contacto2__ic{
  width:42px;
  height:42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.05);
  flex: 0 0 42px;
}

.sj-contacto2 .sj-contacto2__ic svg{
  width:22px;
  height:22px;
  fill: #0b2b3a;
  opacity:.9;
}

.sj-contacto2 .sj-contacto2__ic--wa{
  background: rgba(37,211,102,.12);
}

.sj-contacto2 .sj-contacto2__txt{ min-width:0; }

.sj-contacto2 .sj-contacto2__lbl{
  font-size:12px;
  font-weight:700;
  opacity:.65;
  letter-spacing:.3px;
  text-transform: uppercase;
}

.sj-contacto2 .sj-contacto2__val{
  margin-top:2px;
  font-size:16px;
  font-weight:700;
}

.sj-contacto2 .sj-contacto2__val a{
  text-decoration:none;
}
.sj-contacto2 .sj-contacto2__val a:hover{ text-decoration:underline; }

/* Socials */
.sj-contacto2 .sj-contacto2__socials{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.sj-contacto2 .sj-contacto2__social{
  width:54px;
  height:54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.sj-contacto2 .sj-contacto2__social:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  background: rgba(255,255,255,.95);
}

.sj-contacto2 .sj-contacto2__social svg{
  width:24px;
  height:24px;
  fill: currentColor;
}

.sj-contacto2 .sj-contacto2__fb{ color:#1877f2; }
.sj-contacto2 .sj-contacto2__ig{ color:#d62976; }
.sj-contacto2 .sj-contacto2__tt{ color:#111; }
.sj-contacto2 .sj-contacto2__wa{ color:#25d366; }

/* CTA (derecha) */
.sj-contacto2 .sj-contacto2__cta{
  margin-top:16px;
  padding:14px;
  border-radius: 18px;
  background: radial-gradient(700px 240px at 20% 0%, rgba(37,211,102,.18), transparent 55%),
              rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.sj-contacto2 .sj-contacto2__ctaTitle{
  font-weight:900;
  font-size:16px;
}

.sj-contacto2 .sj-contacto2__ctaSub{
  margin-top:4px;
  opacity:.75;
  font-weight:600;
  font-size:13px;
}

.sj-contacto2 .sj-contacto2__ctaBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  background: #25d366;
  color: #0b2b3a;
  font-weight:900;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .12s ease, filter .12s ease;
}

.sj-contacto2 .sj-contacto2__ctaBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.sj-contacto2 .sj-contacto2__ctaIco svg{
  width:20px;
  height:20px;
  fill: #0b2b3a;
}

/* WhatsApp bottom button con icono */
.sj-contacto2 .sj-contacto2__waBottom{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.sj-contacto2 .sj-contacto2__waIcon{
  display:inline-flex;
  width:18px;
  height:18px;
}

.sj-contacto2 .sj-contacto2__waIcon svg{
  width:18px;
  height:18px;
  fill: currentColor;
}

/* Responsive */
@media (max-width: 860px){
  .sj-contacto2 .sj-contacto2__layout{
    grid-template-columns: 1fr;
  }
  .sj-contacto2 .sj-contacto2__badge{ display:none; }
}


.nosotros-actions{
  display: flex;
  gap: 10px;            /* <-- espacio pequeño entre botones */
  align-items: center;
  flex-wrap: wrap;      /* por si en móvil se van abajo */
}

/* Fondo azul + burbujas (solo Contacto) */
.sj-contacto2{
  position: relative;
  overflow: hidden;
  border-radius: 24px; /* para que las burbujas no se salgan */
}

/* Capa de fondo con gradientes */
.sj-contacto2::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(84, 201, 255, .35), transparent 60%),
    radial-gradient(800px 420px at 95% 25%, rgba(55, 160, 255, .28), transparent 60%),
    radial-gradient(700px 420px at 30% 95%, rgba(140, 220, 255, .25), transparent 60%),
    linear-gradient(180deg, rgba(230, 248, 255, .85) 0%, rgba(215, 240, 255, .80) 100%);
}

/* Burbujas claras (varias) */
.sj-contacto2::after{
  content:"";
  position:absolute;
  inset:-80px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 25%, rgba(255,255,255,.45) 0 22px, transparent 23px),
    radial-gradient(circle at 25% 70%, rgba(255,255,255,.35) 0 34px, transparent 35px),
    radial-gradient(circle at 40% 20%, rgba(255,255,255,.30) 0 18px, transparent 19px),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.28) 0 42px, transparent 43px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.35) 0 26px, transparent 27px),
    radial-gradient(circle at 85% 65%, rgba(255,255,255,.30) 0 30px, transparent 31px),
    radial-gradient(circle at 92% 35%, rgba(255,255,255,.25) 0 20px, transparent 21px);
  filter: blur(.2px);
  opacity: .9;
}

/* Asegura que el contenido quede por encima del fondo */
.sj-contacto2 .container,
.sj-contacto2 .panel{
  position: relative;
  z-index: 1;
}


/* =========================
   FIX SOLO MODO OSCURO (Contacto)
   Ajusta textos/links para que se lean bien
========================= */

/* Si tu sitio usa data-theme="dark" */
[data-theme="dark"] .sj-contacto2,
[data-theme="dark"] .sj-contacto2 .panel{
  color: rgba(255,255,255,.92);
}

/* Cards y items en oscuro: un poco más oscuros y texto claro */
[data-theme="dark"] .sj-contacto2 .sj-contacto2__card{
  background: rgba(20, 28, 38, .72);
  border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .sj-contacto2 .sj-contacto2__item{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .sj-contacto2 .sj-contacto2__lbl{
  color: rgba(255,255,255,.60);
}

[data-theme="dark"] .sj-contacto2 .sj-contacto2__val{
  color: rgba(255,255,255,.92);
}

[data-theme="dark"] .sj-contacto2 .sj-contacto2__val a{
  color: rgba(255,255,255,.95);
}

[data-theme="dark"] .sj-contacto2 .sj-contacto2__val a:hover{
  color: #7dd3fc; /* celestico */
}

/* Iconos dentro de los cuadritos */
[data-theme="dark"] .sj-contacto2 .sj-contacto2__ic{
  background: rgba(255,255,255,.08);
}
[data-theme="dark"] .sj-contacto2 .sj-contacto2__ic svg{
  fill: rgba(255,255,255,.88);
}

/* Redes: fondo oscuro y el icono conserva color */
[data-theme="dark"] .sj-contacto2 .sj-contacto2__social{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .sj-contacto2 .sj-contacto2__hint{
  color: rgba(255,255,255,.72);
}

/* CTA de WhatsApp en oscuro: texto legible */
[data-theme="dark"] .sj-contacto2 .sj-contacto2__cta{
  background: radial-gradient(700px 240px at 20% 0%, rgba(37,211,102,.25), transparent 55%),
              rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .sj-contacto2 .sj-contacto2__ctaTitle,
[data-theme="dark"] .sj-contacto2 .sj-contacto2__ctaSub{
  color: rgba(255,255,255,.92);
}