/* =============================================================================CQC — hoja de estilos (versión organizada y comentada)
   - Tipografía global Montserrat
   - Header fijo
   - Barra superior (Sobre nosotros / Contacto / Buscar / Carrito)
   - Grid de productos y pie tipográfico
   - Chips (filtros)
   - Secciones Sobre / Contacto
   - Carrito lateral + Form de WhatsApp
   - Accesibilidad / Foco
   - ⚙️ Puntos de ajuste marcados (botones, colores, tamaños)
============================================================================== */

/* ========== 1) Variables globales ========== */
:root{
  /* Colores base */
  --ink:#111;                 /* texto principal */
  --muted:#64748b;            /* texto secundario */
  --b:#e5e7eb;                /* bordes/grises */
  --brand:#2563eb;            /* color de marca */
  --accent:#f97316;           /* naranja (AGREGAR, hover, badges) */
  --accent-dark:#ea580c;      /* naranja más oscuro para hover */

  /* Layout */
  --wrap:clamp(320px, 92vw, 1000px);  /* ancho máximo fluido */
  --header-h: 280px;                  /* altura aproximada del header (JS la recalcula) */

  /* Tipografía */
  --font-main:'Montserrat', system-ui, -apple-system, Arial, sans-serif;

  /* Pills (Sobre, Contacto, Buscar, Carrito) */
  --pill-bg:#fffcfb;          /* fondo pill */
  --pill-bg-hover:#ffe9d9;    /* hover pill */
  --pill-text:#000;           /* texto pill */

  /* ⚙️ Ajustes rápidos de BOTONES (ancho = padding horizontal) */
  --btn-pad-y:10px;
  --btn-pad-x:16px;
  --btn-font-size:clamp(12px,1.6vw,14px);
}

/* ========== 2) Base tipográfica y reset suave ========== */
*{ box-sizing:border-box }
html,body{ height:100%; overflow-x:hidden; } /* Evita desbordes laterales */
body,
button,input,textarea,select{
  font-family:var(--font-main) !important;
}
body{
  margin:0; color:var(--ink); background:#fff;
}
img{ max-width: 100%; height: auto; } /* Seguridad: ninguna imagen puede desbordar */

/* ========== 3) Header fijo (logo + lead) ========== */
.header.fixed{
  position:fixed; inset:0 auto auto 0; right:0;
  background:#fff; border-bottom:1px solid var(--b); z-index:100;
}
.header-inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid; place-items:center; padding:12px 16px;
}
.logo{ width:clamp(160px,22vw,310px); margin:6px auto }
.lead{
  max-width:820px; color:#444; text-align:center;
  margin:2px 0 6px; font-size:clamp(12px,1.6vw,16px);
}
/* Link del cabezal: ¿quiénes somos? */
.lead .about-link,
a.about-link{
  font-weight:400;
  text-decoration:none;
  color:#111;
  cursor:pointer;
  font-size: clamp(12px, 1.2vw, 16px);
  font-family: var(--font-main) !important;
  text-transform: uppercase;
  /* estilo chip */
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--b); border-radius:999px; padding:8px 16px;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.08);
}
a.about-link:link,
a.about-link:visited{
  color:#111 !important;
  text-decoration:none !important;
}
a.about-link:hover,
a.about-link:active,
a.about-link:focus{
  color:#111 !important;
  text-decoration:none !important;
  box-shadow:0 3px 6px rgba(0,0,0,.15);
  transform:translateY(-1px);
}
.divider{
  width:100%; max-width:var(--wrap); border:0;
  border-top:2px solid #000; margin:8px 0;
}

/* ========== 4) Barra superior (Sobre / Contacto / Buscar / Carrito) ========== */
.bar{
  display:grid; align-items:center; gap:8px;
  max-width:820px; width:100%;
}
/* desktop: [Cómo comprar] [Quiénes somos] [Buscar] [| Carrito] */
.bar.with-cart{ grid-template-columns:auto auto auto 1fr auto }
/*   cols: [Sobre] [Contacto] [Buscar] [| Carrito] */

.bar-right{ display:flex; align-items:center; gap:12px }
.v-sep{ width:1px; height:28px; background:#000; display:inline-block }

/* — Botones tipo “pill” compartidos — */
.btn-action{
  border:none; border-radius:999px; cursor:pointer;
  background:var(--pill-bg); color:var(--pill-text);
  display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-weight:400; font-size:var(--btn-font-size);
  text-transform:uppercase; letter-spacing:0;
  line-height:1.15; white-space:normal; text-align:center;
  transition: background .2s ease;
}
.btn-action:hover{ background:var(--pill-bg-hover) }

/* Buscador con estética pill */
.pill-input{
  border:none; border-radius:999px; background:var(--pill-bg); color:var(--pill-text);
  width:100%; max-width:240px; padding:8px 12px; font-weight:600;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  transition: background .2s ease;
}
/* Botón CONTACTO más compacto para que entre todo en una línea */
#contactBtn.btn-action{ padding:6px 10px; font-size:clamp(11px,1.2vw,13px); }
.pill-input:hover{ background:var(--pill-bg-hover) }

/* ⚙️ Botón Carrito destacado */
.cart-toggle {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-font-size);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background .2s ease;
  min-width: 120px;
}
.cart-toggle::before{
  content:"";
  display:inline-block; vertical-align:middle;
  width:18px; height:18px; margin-right:4px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.16 14l-.94-2H20a1 1 0 0 0 .96-.74l2-7A1 1 0 0 0 22 3H5.21l-.2-1A1 1 0 0 0 4 1H1v2h2.11l3.2 12.51A2 2 0 0 0 8.25 17H20v-2H8.25a.25.25 0 0 1-.24-.19z'/></svg>");
  background-size:100% 100%; background-repeat:no-repeat;
}
.cart-toggle:hover {
  background: var(--accent-dark);
}
.cart-toggle .pill {
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 13px;
  margin-left: 4px;
}

/* Foco accesible en controles de la barra */
.btn-action:focus, .cart-toggle:focus, .pill-input:focus{
  outline:3px solid var(--accent); outline-offset:2px;
}

/* Forzar salto de línea solo en mobile para CÓMO COMPRAR */
.br-mob{ display:none; }

/* ========== 5) Contenedor debajo del header ========== */
.container.with-header{
  max-width:var(--wrap); margin:0 auto;
  padding: calc(var(--header-h) + 16px) 16px 56px;
}

/* ========== 6) Grid de productos ========== */
.grid{
  display:grid;
  gap: clamp(28px, 3vw, 60px) clamp(12px, 2vw, 20px); /* vertical | horizontal */
  grid-template-columns:repeat(3,1fr);
}
.grid.grid-kits{
  grid-template-columns:1fr;
  justify-items:center;
}
.grid.grid-kits .card{
  width:min(480px, 100%);
}
.grid.grid-kits .card .imgwrap{
  position:static;
  padding:0;
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.grid.grid-kits .card img{
  position:static;
  width:50%;
  height:auto;
  max-height:none;
}
.card .imgwrap{
  position:relative; width:100%;
  padding-top: clamp(70%, 25vw, 60%); /* caja de imagen */
  margin-bottom:4px;
}
.card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; max-height:220px; background:#fff;
}
/* Botón lupa en la esquina superior derecha de la imagen */
.zoom-btn{
  position:absolute; top:6px; right:6px;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--b); background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
}
.zoom-btn::before{
  content:""; display:inline-block; width:20px; height:20px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-size:100% 100%; background-repeat:no-repeat;
}
@media (max-width:700px){ .zoom-btn{ width:32px; height:32px; top:4px; right:4px; } .zoom-btn::before{ width:18px; height:18px; } }
.meta-stack{
  display:grid; justify-items:center; gap:0; margin-top:0; padding-bottom:0; border:none;
}
.meta-stack::after{
  content:""; display:block; height:1px; background:#000; width:72%; margin:4px auto 0
}
.n-dot{
  letter-spacing:0em; font-weight:700; line-height:1;
  font-size:clamp(12px,4vw,14px);
}
.name-big{
  font-style:italic; font-weight:500; line-height:1.05;
  font-size:clamp(12px,2.8vw,16px); margin:0;
}
.bottom-line{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:0
}
.price, .sep{
  font-weight:700; line-height:1; font-size:clamp(12px,2vw,16px);
}
.btn-add{
  background:var(--accent); color:#fff; border:none; border-radius:999px;
  font-weight:600; text-transform:uppercase; line-height:1;
  font-size:clamp(10px,1.6vw,12px);
  padding: clamp(3px,.7vw,5px) clamp(5px,1.8vw,8px);
  cursor:pointer;
}

/* ========== 7) Chips (filtros) ========== */
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content: center; }
.chip{
  border:1px solid var(--b); border-radius:999px; padding:6px 12px; cursor:pointer; background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.08); transition:box-shadow .2s ease, transform .2s ease;
}
.chip:hover{ box-shadow:0 3px 6px rgba(0,0,0,.15); transform:translateY(-1px) }

/* ========== 8) Sección “Sobre” y “Contacto” ========== */
.sobre{ border-top:1px solid #000; margin-top:40px; padding:24px 16px; text-align:center }
.sobre h2{ margin-top:6px }
.sobre-text{ display:inline-block; text-align:left; margin:0 auto; max-width:600px }

.contacto{ border-top:1px solid var(--b); padding:16px }
.contact-title{ text-align:center; margin-bottom:12px }
.contact-text{ text-align:center; margin-bottom:16px; color:var(--muted) }
.contact-links{
  list-style:none; padding:0; margin:0 auto; max-width:420px; text-align:center
}
.contact-links li{ margin:6px 0 }
.contact-links a{ text-decoration:none; color:#16a34a; font-weight:600 }
.contact-links a:hover{ color:#f97316 }
#contacto { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Compensación para sección "Sobre" */


/* ========== 9) Carrito lateral + Form WhatsApp ========== */
.cart{
  position:fixed; top:0; right:0; width:clamp(320px,35vw,420px); height:100dvh;
  background:#fff; border-left:1px solid var(--b); box-shadow:-6px 0 20px rgba(0,0,0,.06);
  display:flex; flex-direction:column; z-index:120;
  transform:translateX(100%); transition:transform .25s ease; will-change:transform;
  pointer-events:none;
}
.cart.open{ transform:translateX(0); pointer-events:auto }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--b) }
.icon-btn{ border:none; background:transparent; font-size:18px; cursor:pointer }

.cart-items{ padding:12px 18px 12px 12px; display:grid; gap:8px; flex:1; overflow:auto; align-content:start }
.ci{ display:grid; grid-template-columns:52px 1fr auto; gap:8px; align-items:center }
.ci img{ width:52px; height:52px; object-fit:contain; border:1px solid var(--b); border-radius:8px; background:#fff }
.ci .nm{ font-size:14px }
.qty{ display:flex; gap:6px; align-items:center }
.qty button{ border:1px solid var(--b); background:#fff; border-radius:8px; padding:2px 8px; cursor:pointer }
.del{ border:none; background:transparent; cursor:pointer; font-size:16px }

.cart-foot{ border-top:1px solid var(--b); padding:12px 18px; display:grid; gap:8px; overflow-x:hidden }
.wa-form{ display:grid; gap:12px }
.wa-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.wa-form .field{ display:grid; gap:4px }
.wa-form label{ font-size:13px; color:#374151; font-weight:600 }
.wa-form input{
  border:1px solid var(--b); border-radius:10px; padding:10px 12px; background:#fff;
  width:100%; max-width:100%; transition: border-color .15s, box-shadow .15s;
}
.wa-form input::placeholder{ color:#9ca3af }
.wa-form input:focus{
  outline:0; border-color:#f97316;
  box-shadow:0 0 0 3px rgba(249,115,22,.2);
}
.wa-form .hint{ font-size:11px; color:#6b7280 }
.wa-form .err{ min-height:14px; font-size:12px; color:#b91c1c }
.wa-form .is-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.15) !important }
.wa-form .is-valid{ border-color:#10b981 }
#waBtn{ margin-top:4px }
#clearCartBtn{ margin-top:2px }

/* ========== 10) Pie del sitio ========== */
.foot{
  display:flex; justify-content:center; padding:16px; color:#64748b; border-top:1px solid var(--b);
  text-align:center;
}

/* ========================================================================== */
/*                      DISEÑO RESPONSIVO (MOBILE)                            */
/* ========================================================================== */

/* Tablets y pantallas medianas */
@media (max-width:980px){
  .grid{ grid-template-columns:repeat(2,1fr) }
}

/* Mobile grande (hasta 700px) */
@media (max-width: 700px){
  /* Ocultar "Sobre nosotros" y el buscador */
  .bar.with-cart #contactBtn,
  .bar.with-cart .pill-input {
    display: none;
  }

  /* La barra solo muestra Contacto y Carrito, uno a cada lado */
  .bar.with-cart{
    grid-template-columns: auto auto;
    justify-content: space-between;
    column-gap: 8px;
  }
  .v-sep{ display:none; }

  /* Botones más compactos */
  .bar.with-cart #aboutBtn{
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 400; /* igual que QUIÉNES SOMOS */
    white-space: normal; /* permitir 2 líneas en mobile */
  }
  .bar.with-cart .cart-toggle{
    padding: 6px 12px;
    font-size: 12px;
    min-width: unset;
    white-space: nowrap;
  }
  .bar.with-cart .cart-toggle .pill{
    font-size: 11px;
    padding: 1px 5px;
  }
}

/* Mobile mediano (hasta 620px) */
@media (max-width: 620px){
  .grid{ grid-template-columns:1fr; gap: 24px 12px; }
  .wa-form .row{ grid-template-columns:1fr }
  .header-inner{ padding: 10px 12px; }
  .container.with-header{ padding: calc(var(--header-h) + 10px) 12px 56px; }
  .card .imgwrap{ padding-top: clamp(68%, 60vw, 80%); }
  .meta-stack::after{ width: 84%; }
}

/* Mobile pequeño (hasta 480px) */
@media (max-width: 480px){
  /* En este punto, las reglas de 700px ya simplificaron la barra.
     Podemos hacer ajustes adicionales si es necesario, por ejemplo,
     reducir aún más el tamaño de la fuente o los paddings. */
}





/* Chips con imagen */
#chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip.chip-img { padding:0; background:transparent; border:none; display:inline-flex; align-items:center; }
.chip.chip-img img { height:38px; width:auto; display:block; border-radius:0px; }
@media (max-width:620px){
  .chip.chip-img img { height:32px; }
}


/* === Chips centrados y grandes === */
.row-chips { display:flex; justify-content:center; }
#chips { display:flex; gap:1rem; justify-content:center; align-items:center; }
.chip.chip-img { padding:0; background:transparent; border:none; display:inline-flex; align-items:center; }
.chip.chip-img img { height:100px; width:auto; display:block; border-radius:0px; } /* ~doble del tamaño anterior */
@media (max-width:620px){ .chip.chip-img img { height:64px; } }



/* Forzar que el botón del popup herede el naranja del sitio */
#cqc-img-modal .cqc-btn.btn-add{
  background: var(--accent) !important;
  color:#fff !important;
  border-radius:999px !important;
}


/* Global H2 (afecta todo el sitio) */
main h2, .sobre h2,.contact-title{
  font-size: clamp(.8rem, 2.2vw + .5rem, 1rem);
  line-height: .5;
}

/* ========================================================================== */
/*                            FIN DE LA HOJA                                  */
/* ========================================================================== */



/* ============================================================================
   KITS - 1 columna + imagen al 80% centrada (solo cuando tag = "Kits")
   ============================================================================ */
body.kits-active #grid,
body.kits-active .grid{
  display:grid !important;
  grid-template-columns: 1fr !important;
}
body.kits-active .card .imgwrap{
  padding-top:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.kits-active .card .imgwrap img{
  position:static !important;
  width:70% !important;
  max-width:70% !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
}


/* ==== Iconos por CSS con Unicode escapes (evita mojibake) ==== */
.pm-close::before{ content:"\00D7"; /* × */ font-weight:700; font-size:20px; line-height:1; }

/* Botón AGREGADO: tilde como pseudo-elemento seguro */
.btn-add.added::before{
  content:"\2713"; /* ✓ */
}

/* n-dot: muestra · N · con pseudo-elementos; el contenido real es solo el número */
.n-dot{ position:relative; }
.n-dot::before{ content:"\00B7\0020 Sticker Nro. \0020"; }   /* "· " */
.n-dot::after{  content:"\0020\00B7"; }   /* " ·" */


/* ============================================================================
   MOBILE: Chips más chicos y más juntos (solo mobile)
   - Mantiene desktop igual
   - Colocado al final para sobreescribir reglas previas (#chips gap)
   ============================================================================ */
@media (max-width: 700px){
  /* Header bar (mobile): 3 botones en la misma línea */
  .bar{ justify-items:stretch; }
  .bar.with-cart{ grid-template-columns: repeat(3, 1fr); column-gap:8px; }
  #contactBtn{ display:none; }
  #search{ display:none; }
  .v-sep{ display:none; }
  /* Incrusta el carrito en la grilla como un botón más */
  .bar-right{ display:contents; }
  /* Botones compactos y con wrap en 2 líneas si hace falta */
  .btn-action, .cart-toggle{
    width:100%; padding:8px 8px; font-size:12px; line-height:1.15;
    white-space:normal; text-align:center; justify-content:center;
    font-weight:400 !important; min-height:36px;
  }
  /* Asegurar misma tipografía en ambos */
  #aboutBtn.btn-action, #whoBtn.btn-action{ font-weight:400 !important; }
  .cart-toggle{ min-width:0; }
  .cart-toggle::before{ width:16px; height:16px; margin-right:4px; }
  .cart-toggle .pill{ font-size:11px; padding:1px 5px; }
  /* Mostrar el salto forzado en mobile */
  .br-mob{ display:inline; }

  /* Reducir separación entre chips */
  #chips{ gap:6px; }
  .chips{ gap:6px; }

  /* Chips más compactos */
  .chip{
    padding:4px 8px;
    font-size:12px; /* más chico que el default */
  }
  /* Productos: precio y botón más grandes en mobile */
  .bottom-line{ gap:10px; }
  .price, .sep{ font-size: clamp(12px, 3.5vw, 14px); }
  .btn-add{ font-size: clamp(10px, 3.2vw, 12px); padding: 6px 10px; }
}
/* KITS — asegurar 80% real (sin límite de altura) */
body.kits-active .card .imgwrap img{
  max-height: none !important; /* quita el tope de 220px del estilo base */
}


/* KITS — 1 columna + imagen al 70% centrada */
body.kits-active #grid,
body.kits-active .grid{ display:grid !important; grid-template-columns:1fr !important; }
body.kits-active .card .imgwrap{ padding-top:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
body.kits-active .card .imgwrap img{
  position:static !important;
  width:70% !important;
  max-width:70% !important;
  max-height:none !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
}


/* ===== Trash icon as CSS background (reliable across encodings) ===== */
.btn-del, .btn-trash, .trash, .cart-del, .del {
  position: relative;
}
.btn-del::before, .btn-trash::before, .trash::before, .cart-del::before, .del::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 18px; height: 18px; margin-right: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M9 3h6a1 1 0 0 1 1 1v1h5v2H3V5h5V4a1 1 0 0 1 1-1zm-3 7h2v9H6v-9zm5 0h2v9h-2v-9zm5 0h2v9h-2v-9z'/></svg>");
  background-size: 100% 100%; background-repeat: no-repeat;
}
/* If the button had text-only icon, hide broken text if any */
.btn-del .icon, .btn-trash .icon, .trash .icon { font-size: 0 !important; }



/* ===== Active chip green ===== */
.chip.active, .chip[aria-pressed="true"]{
  background: #16a34a !important;  /* similar al verde del logo */
  color: #ffffff !important;
  border-color: #16a34a !important;
}



/* Tiny "Quitar" pill (replaces trash icon) */
.del, .btn-quit{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; padding:0 8px; margin-left:6px;
  border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; color:#111827;
  font-size:10px; font-weight:600; letter-spacing:.01em;
}
/* Ensure no icon appears */
.del::before, .btn-quit::before{ content:none !important; }