/* ========== Product styles (aislados) ========== */
/* Usa variables ya definidas en main.css */
body.product-page{
  /* helpers locales si las necesitas */
  --card-bg: var(--color-card, #132635);
  --txt: var(--color-text, #F0F5F7);
  --acc: var(--color-accent, #00D4A4);
}

/* Contenedor */
body.product-page .container{
  max-width:1080px; margin:0 auto; padding:0 16px; 
}

/* Hero */
body.product-page .hero{
  padding:72px 0 32px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center;
  text-align:left;
}
@media (max-width:900px){
  body.product-page .hero{ grid-template-columns:1fr; text-align:center; }
}

/* Título y lead */
body.product-page h1{
  font-family:var(--font-heading);
  font-size:2.6rem; line-height:1.2; margin:0 0 12px;
  color:var(--acc);
}
body.product-page .lead{ font-size:1.12rem; opacity:.95; }

/* Imagen del hero */
body.product-page .hero img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* Botones */
body.product-page .btns{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
body.product-page .btn{ display:inline-block; padding:12px 18px; border-radius:8px; font-weight:700; }
body.product-page .btn-primary{ background:var(--acc); color:#032026; }
body.product-page .btn-outline{ border:1px solid var(--acc); color:var(--acc); }

/* Secciones y subtítulos */
body.product-page .section{ padding:24px 0 8px; }
body.product-page .section h2{
  font-family:var(--font-heading); color:var(--acc); margin:12px 0; font-size:1.6rem;
}

/* Grillas */
body.product-page .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
body.product-page .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){
  body.product-page .grid-2, body.product-page .grid-3{ grid-template-columns:1fr; }
}

/* Cards */
body.product-page .card{
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.06);
  padding:18px; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* Lista con checks */
body.product-page ul.checks{ list-style:none; padding:0; margin:0; }
body.product-page ul.checks li{ padding-left:28px; position:relative; margin:6px 0; }
body.product-page ul.checks li:before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--acc); font-weight:800;
}

/* Details/summary */
body.product-page details{ background:var(--card-bg); border-radius:10px; padding:12px 14px; margin:8px 0; }
body.product-page summary{ font-weight:700; cursor:pointer; }

/* Utilitarios locales */
body.product-page .small{ font-size:.92rem; opacity:.9; }
body.product-page .hr{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); margin:18px 0; }
body.product-page .badge{
  display:inline-block; background:color-mix(in srgb, var(--acc) 15%, transparent);
  color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  padding:4px 8px; border-radius:999px; font-weight:700; font-size:.82rem;
}

/* "Ver más" siempre blanco dentro de cards de #productos */
body.product-page #productos .card .mini-cta,
body.product-page #productos .card .mini-cta a,
body.product-page #productos .card .mini-cta a:link,
body.product-page #productos .card .mini-cta a:visited,
body.product-page #productos .card .mini-cta a:hover,
body.product-page #productos .card .mini-cta a:active,
body.product-page #productos .card .mini-cta a:focus{
  color:#fff !important; opacity:1 !important; text-decoration:none;
}
body.product-page #productos .card .mini-cta a:hover,
body.product-page #productos .card .mini-cta a:focus{ text-decoration:underline; }


/* Centrar las cards en su espacio (solo páginas de producto) */
body.product-page .grid-2{
  justify-items: center;          /* centra cada ítem en la columna */
}

body.product-page .grid-2 .card{
  width: 100%;
  max-width: 520px;               /* tope para que no se estiren de más */
  margin: 0 auto;                 /* asegura centrado si hay márgenes */
}

/* Si también quieres centrar las 3 cards de la fila siguiente */
body.product-page .grid-3{
  justify-items: center;
}
body.product-page .grid-3 .card{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* En móvil: que ocupen todo el ancho disponible */
@media (max-width: 900px){
  body.product-page .grid-2,
  body.product-page .grid-3{ justify-items: stretch; }

  body.product-page .grid-2 .card,
  body.product-page .grid-3 .card{
    max-width: none;
  }
}

/* --- SOLO PÁGINAS DE PRODUCTO --- */
body.product-page{ 
  /* altura efectiva del header en desktop/móvil (ajústala si difiere) */
  --hdr-h: 60px;
}
@media (max-width:920px){
  body.product-page{ --hdr-h: 100px; }
}

/* 1) Empujar el PRIMER contenedor de la página para que no quede bajo el header */
body.product-page .container:first-of-type,
body.product-page main > .container:first-child,
body.product-page .hero{
  padding-top: calc(var(--hdr-h) + 8px) !important;
}

/* 2) Evitar que el primer h1 se “pegue” arriba si trae márgenes negativos/colapsados */
body.product-page .hero h1:first-child{ margin-top: 0 !important; }

/* 3) Al navegar por #anclas dentro de la página de producto, que no queden tapadas */
body.product-page [id]{ scroll-margin-top: calc(var(--hdr-h) + 8px); }