:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --text: #0f172a; /* slate-900 */
  --muted: #475569; /* slate-600 */
  --brand: #0a66ff;
  --brand-2: #084dc1;
  --border: rgba(2,6,23,0.08);
  --radius: 16px;
  --shadow: 0 10px 24px rgba(2,6,23,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a{ color: var(--brand); text-decoration: none; }
img{ max-width:100%; display:block; border-radius: 12px; }

.container{ width:min(1100px, 92%); margin-inline:auto; }

/* Navbar + Hamburger */
.navbar{
  position: sticky; top:0; z-index: 20;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.navbar .container{ position: relative; display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.navbar-logo{ font-weight:700; letter-spacing:.2px; color:#111827; }
.navbar-brand{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:.75rem; }
.navbar-menu{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.navbar-menu a{ color:#111827; padding:.5rem .75rem; border-radius:10px; }
.navbar-menu a:hover{ background:#eef2ff; }

.hamburger{
  display:none; background:transparent; border:1px solid var(--border);
  width:40px; height:40px; border-radius:10px; cursor:pointer; position:relative;
}
.hamburger span{
  position:absolute; left:8px; right:8px; height:2px; background:#0f172a; border-radius:2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger span:nth-child(1){ top:12px; }
.hamburger span:nth-child(2){ top:19px; }
.hamburger span:nth-child(3){ top:26px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: rotate(45deg); top:19px; }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: rotate(-45deg); top:19px; }

@media (max-width: 920px){
  .hamburger{ display:block; }
  .navbar-menu{
    position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--border);
    transform: translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    padding: .6rem; display:flex; flex-direction:column; gap:.25rem;
  }
  .navbar-menu li{ display:block; }
  .navbar-menu a{ display:block; padding:.7rem .75rem; border-radius:10px; color:#111827; }
  .navbar-menu a:hover{ background:#eef2ff; }
  .navbar-menu[data-state="open"]{
    transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto;
  }
}

.btn{
  appearance: none; border:1px solid var(--border); cursor:pointer; border-radius: 999px;
  padding: .7rem 1.1rem; font-weight:600; background:#fff; color:#111827;
}
.btn--primary{ background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover{ background: var(--brand-2); }
.btn--ghost{ background: transparent; color:#111827; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 22px; height: 22px; border-radius: 999px; background: #111827; color:#fff; font-size:.75rem; margin-left:.35rem;
}

.hero{
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-bottom: 1px solid var(--border);
}
.hero__grid{ display:grid; gap:2rem; grid-template-columns: 1.1fr .9fr; align-items:center; padding: 52px 0; }
.hero__copy h1{ font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem); margin: 0 0 .6rem; color:#0b1220; }
.hero__copy p{ color: var(--muted); margin: 0 0 1rem; }
.hero__media img{ aspect-ratio: 16/10; object-fit: cover; border:1px solid var(--border); }

.section{ padding: 48px 0; }
.section--alt{ background: var(--panel-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section__head h2{ margin: 0 0 .25rem; }
.section__head p{ margin: 0; color: var(--muted); }

.grid{ display:grid; gap:1.2rem; grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--panel); border:1px solid var(--border);
  padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow);
}
.card__body{ display:flex; flex-direction:column; gap:.75rem; }
.card__title{ margin:0; font-size: 1.05rem; color:#0b1220; }
.card__desc{ margin:0; color: var(--muted); font-size:.95rem; min-height: 44px; }
.card__price{ font-weight:700; color:#0b1220; }

.kit__badge{
  position:absolute; top:10px; left:10px; background: #f1f5f9; color:#0b1220; padding:.35rem .55rem;
  border-radius: 999px; font-size:.75rem; font-weight:700; border:1px solid var(--border);
}

.footer{ padding: 28px 0; border-top: 1px solid var(--border); background: #fff; color:#111827; }
.footer__inner{ display:flex; justify-content:space-between; align-items:center; }
.footer__links{ display:flex; gap:1rem; }
.footer__links a{ color: #334155; }
.footer__links a:hover{ color: var(--brand); }

.centered{ display:grid; place-content:center; min-height: 100dvh; padding: 1rem; }

/* Cart */
.cart-list{ display:flex; flex-direction:column; gap:.75rem; }
.cart-item{ display:grid; grid-template-columns: 64px 1fr auto; gap:.75rem; align-items:center; border:1px solid var(--border); padding:.6rem .75rem; border-radius:12px; background:#fff; }
.cart-item img{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.total-line{ display:flex; align-items:center; justify-content: space-between; border-top:1px dashed var(--border); padding-top: .75rem; margin-top:.75rem; }

/* Sections */
.que_es, .mision, .beneficios, .precios, .testimonios, .galeria, .faq, .contact-section{ padding: 48px 0; }
.que_es, .mision{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; align-items:center; }
.que_es img, .mision img{ border:1px solid var(--border); }
.beneficios ul{ columns: 2; gap: 2rem; }
.precios .tarjetas{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
.precios .tarjeta{ border:1px solid var(--border); border-radius:12px; padding:1rem; }
.testimonios .tarjetas{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
.galeria .galeria-imagenes{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.galeria img{ border:1px solid var(--border); aspect-ratio: 4/3; object-fit: cover; }
.faq details{ border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; background:#fff; margin:.5rem 0; }
.contact-form{ display:grid; gap:.6rem; max-width: 520px; }
.contact-form input, .contact-form textarea{ padding:.8rem 1rem; border:1px solid var(--border); border-radius:10px; font: inherit; }
.contact-form button{ justify-self: start; }

@media (max-width: 920px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .hero__grid{ grid-template-columns: 1fr; }
  .que_es, .mision{ grid-template-columns: 1fr; }
  .galeria .galeria-imagenes{ grid-template-columns: 1fr 1fr; }
  .precios .tarjetas, .testimonios .tarjetas{ grid-template-columns: 1fr; }
}
@media (max-width: 580px){
  .grid{ grid-template-columns: 1fr; }
}


/* === Overrides: Hamburger visible on ALL widths === */
.hamburger{ display:block; }
.navbar .container{ position: relative; }
.navbar-menu{
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--border);
  transform: translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  padding: .6rem; display:flex; flex-direction:column; gap:.25rem; z-index:60;
}
.navbar-menu a{ display:block; padding:.7rem .75rem; border-radius:10px; color:#111827; }
.navbar-menu a:hover{ background:#eef2ff; }
.navbar-menu[data-state="open"]{
  transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto;
}


/* === Fix navbar layout === */
.navbar .container{ display:flex; align-items:center; justify-content:space-between; }
.navbar-brand{ width:auto; }
.navbar-icons{ display:flex; align-items:center; gap:.5rem; }
#login-tooltip{ white-space:nowrap; }


/* === Navbar: hamburger a la derecha y menú tipo dropdown alineado a la derecha === */
.navbar .container{ display:flex; align-items:center; justify-content:space-between; }
.navbar-brand{ display:flex; align-items:center; gap:.75rem; }
.navbar-right{ display:flex; align-items:center; gap:.5rem; }

.navbar{ position: sticky; top:0; z-index: 50; }
.navbar .container{ position: relative; }
.hamburger{ display:block; } /* visible en todas las resoluciones */

.navbar-menu{
  position:absolute; top:100%; right: 0; left: auto;
  width: max(220px, 24vw); max-width: 360px;
  background:#fff; border:1px solid var(--border); border-top:0;
  transform: translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  padding: .6rem; display:flex; flex-direction:column; gap:.25rem; z-index:60; border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow);
}
.navbar-menu a{ display:block; padding:.7rem .75rem; border-radius:10px; color:#111827; }
.navbar-menu a:hover{ background:#eef2ff; }
.navbar-menu[data-state="open"]{
  transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto;
}

@media (max-width: 920px){
  .navbar-menu{ left:0; right:0; width:auto; max-width:none; border-left:0; border-right:0; border-radius: 0 0 12px 12px; }
}


/* === Edge navbar (hamburguesa pegada a la derecha) === */
.navbar.edge .container{ width:100%; padding-left:12px; padding-right:12px; }
.navbar-right{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.hamburger{ display:block; } /* visible en todas las resoluciones */

/* Menú sólo con opciones de cuenta/carrito */
.navbar-menu{
  position:absolute; top:100%; right: 0; left: auto;
  width: max(220px, 24vw); max-width: 360px;
  background:#fff; border:1px solid var(--border); border-top:0;
  transform: translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  padding: .6rem; display:flex; flex-direction:column; gap:.25rem; z-index:60; border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow);
}
.navbar-menu a{ display:block; padding:.7rem .75rem; border-radius:10px; color:#111827; }
.navbar-menu a:hover{ background:#eef2ff; }
.navbar-menu[data-state="open"]{
  transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto;
}
@media (max-width: 920px){
  .navbar-menu{ left:0; right:0; width:auto; max-width:none; border-left:0; border-right:0; border-radius: 0 0 12px 12px; }
}

/* Asegurar que el logo/brand sea claramente clickeable para volver al inicio */
a.navbar-logo{ text-decoration:none; color:#111827; font-weight:700; }
a.navbar-logo:hover{ text-decoration:underline; }


/* === Navbar un poco más oscura === */
.navbar{
  background: rgba(241, 245, 249, .95); /* slate-100 */
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
.navbar.edge .container{ width:100%; padding-left:12px; padding-right:12px; }


/* === Iconos en el menú === */
.navbar-menu .menu-link{ display:flex; align-items:center; gap:.55rem; }
.navbar-menu .menu-link svg{ width:18px; height:18px; flex:0 0 18px; stroke:#0f172a; fill:none; stroke-width:2; }
.navbar-menu .menu-link:hover svg{ stroke:#084dc1; }


/* === Menú limpio con separadores === */
.navbar-menu .menu-link{ display:flex; align-items:center; gap:.55rem; }
.navbar-menu .menu-link svg{ width:18px; height:18px; flex:0 0 18px; stroke:#0f172a; fill:none; stroke-width:2; }
.navbar-menu .menu-link:hover{ background:#eef2ff; }
.navbar-menu .menu-link:hover svg{ stroke:#084dc1; }
.navbar-menu .menu-sep{ height:1px; background: var(--border); margin:.35rem 0; list-style:none; }

/* Conteo del carrito sin espacios raros */
.navbar-menu .count{ margin-left:.25rem; display:inline-block; }