/* Paleta del logo Ventas Digitales: azul #0556B6, celeste #1E9BDC / #5BB3E4, marino #062A5E.
   Acentos que combinan: amarillo #FFC72C (botones de compra) y naranja #D9480F (descuentos). */
:root{--bg:#ffffff;--panel:#ffffff;--line:#dce8f2;--tx:#14233a;--mut:#5d6b7f;--ac:#0556B6;--ac2:#0556B6;--cielo:#1E9BDC;--claro:#5BB3E4;--marino:#062A5E;--hielo:#eaf4fb;--sol:#FFC72C;--sol2:#e0a800;--naranja:#D9480F;--r:16px}
*{box-sizing:border-box;margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);z-index:5}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:60px}
.logo{font-weight:800;text-decoration:none;font-size:1.15rem}
.btn{display:inline-block;background:linear-gradient(135deg,#0556B6,#1E9BDC);color:#fff;border:0;border-radius:12px;padding:12px 22px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--tx)}
.btn.big{padding:16px 34px;font-size:1.1rem;width:100%}
.hero{padding:72px 0 48px;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.15;max-width:760px;margin:0 auto 16px}
.hero p{color:var(--mut);max-width:560px;margin:0 auto 28px;font-size:1.1rem}
h2{font-size:1.7rem;margin-bottom:24px;text-align:center}
section{padding:40px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#062A5E,#0556B6);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;text-decoration:none}
.thumb img,.pimg img{width:100%;height:100%;object-fit:cover}
.card-b{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-b p{color:var(--mut);flex:1;font-size:.95rem}
.price{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.price b{font-size:1.5rem;color:var(--ac2)}
.price s{color:var(--mut)}
.tag-off{background:var(--sol);color:var(--marino);font-weight:800;font-size:.72rem;padding:2px 8px;border-radius:20px;line-height:1.6}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;color:var(--mut);font-size:.95rem;padding:8px 0}
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px;max-width:720px;margin-inline:auto}
summary{cursor:pointer;font-weight:600}
details p{color:var(--mut);margin-top:8px}
.pdetail{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:40px 0;align-items:start}
.pimg{aspect-ratio:4/3;border-radius:var(--r);background:linear-gradient(135deg,#062A5E,#0556B6);display:flex;align-items:center;justify-content:center;font-size:5rem;font-weight:800;overflow:hidden}
.pdetail h1{font-size:2rem;line-height:1.2;margin-bottom:8px}
.pdetail .price b{font-size:2.2rem}
ul.ben{list-style:none;padding:0;margin:18px 0}
ul.ben li{padding:6px 0 6px 28px;position:relative}
ul.ben li:before{content:"✓";position:absolute;left:0;color:var(--ac2);font-weight:800}
.mut{color:var(--mut)}
.sticky-buy{display:none}
.center{text-align:center;padding:90px 0}
.center h1{margin-bottom:12px}
.legal{max-width:760px;margin:0 auto;padding:40px 20px}
.legal h1{margin-bottom:16px}.legal h2{text-align:left;font-size:1.2rem;margin:24px 0 8px}
.legal p,.legal li{color:var(--mut);margin-bottom:8px}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--mut);font-size:.9rem;text-align:center}
footer a{margin:0 10px}
.promo{background:linear-gradient(90deg,#062A5E,#0556B6 45%,#1E9BDC);color:#fff;overflow:hidden;white-space:nowrap;padding:9px 0}
.promo p{display:inline-block;padding-left:100%;margin:0;font-weight:700;font-size:.88rem;animation:promo-scroll 45s linear infinite}
@keyframes promo-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.promo p{animation:none;padding-left:12px}}

.search{display:block;width:100%;max-width:420px;margin:0 auto 20px;background:#fff;border:1px solid #c9dbea;border-radius:12px;padding:12px 16px;font-size:1rem;font-family:inherit;color:var(--tx)}
.search:focus{outline:2px solid var(--ac);border-color:transparent}

.cookie{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);padding:14px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:20;font-size:.9rem}
.cookie div{display:flex;gap:8px}
.cookie .btn{padding:8px 16px;font-size:.9rem}
@media(max-width:760px){
  .pdetail{grid-template-columns:1fr;gap:20px}
  .sticky-buy{display:block;position:fixed;bottom:0;left:0;right:0;padding:10px 16px;background:var(--bg);border-top:1px solid var(--line);z-index:10}
  body[data-page=product]{padding-bottom:70px}
}

/* imágenes de producto (vertical) */
.thumb{aspect-ratio:3/4;background:var(--hielo)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.pimg{aspect-ratio:2/3;font-size:0}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.small{font-size:.85rem}
.price .small{margin-left:4px}
/* formulario de pedido */
body.lock{overflow:hidden}
.modal{position:fixed;inset:0;background:rgba(6,42,94,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}
.sheet{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;max-height:100%;overflow:auto}
.sheet h2{text-align:left;font-size:1.3rem;margin:0}
.sheet label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600}
.sheet input,.sheet select{background:#fff;border:1px solid #c9dbea;border-radius:10px;padding:12px;color:var(--tx);font-size:1rem;font-family:inherit}
.sheet input:focus,.sheet select:focus{outline:2px solid var(--ac);border-color:transparent}
.sheet .x{position:absolute;top:8px;right:12px;background:none;border:0;color:var(--mut);font-size:1.8rem;cursor:pointer;line-height:1}
.sheet .btn:disabled{opacity:.6}
@media(max-width:760px){.pimg{aspect-ratio:3/4}}

/* móvil: evitar desborde horizontal (correo largo en el pie) */
html,body{overflow-x:hidden;max-width:100%}
footer{overflow-wrap:anywhere}
footer a{display:inline-block;margin:2px 8px}
.sticky-buy .btn{padding:13px;font-size:1rem}

/* tema claro: sombras suaves */
.card{box-shadow:0 2px 12px rgba(5,86,182,.08)}
.sheet{box-shadow:0 10px 40px rgba(6,42,94,.22)}
.cookie{box-shadow:0 -4px 20px rgba(6,42,94,.08)}
.pimg{background:var(--hielo)}

/* logo */
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:36px;width:auto;display:block}
.logo span{font-size:1rem;line-height:1.1}
@media(max-width:380px){.logo span{font-size:.85rem}}

/* galería de varias fotos en el producto */
.pimg{display:flex;flex-direction:column;gap:10px;aspect-ratio:auto;background:none}
.pimg img{height:auto;border-radius:var(--r);background:var(--hielo)}
.pimg video{width:100%;height:auto;aspect-ratio:9/16;border-radius:var(--r);background:#000;display:block}

/* escritorio: el bloque de compra acompaña al scroll de las fotos */
@media(min-width:761px){.pdetail>div:last-child{position:sticky;top:80px;align-self:start}}

/* selector de color */
#p-colors{margin:12px 0}
.sws{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.sw{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:#fff;padding:3px;cursor:pointer}
.sw span{display:block;width:100%;height:100%;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.sw.on{border-color:var(--ac);box-shadow:0 0 0 2px rgba(5,86,182,.25)}

/* portada: varios productos a la vista (2 columnas en celular) */
.grid{grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:699px){
  .hero{padding:28px 0 16px}
  .hero h1{font-size:1.5rem;margin-bottom:10px}
  .hero p{font-size:.95rem;margin-bottom:16px}
  .hero .btn.big{padding:12px 20px;font-size:1rem}
  .trust{gap:6px 14px;font-size:.8rem}
  section{padding:24px 0}
  h2{font-size:1.3rem;margin-bottom:14px}
  .card-b{padding:10px;gap:6px}
  .card-b h3{font-size:.9rem;line-height:1.25}
  .card-b p{display:none}
  .price{gap:6px;flex-wrap:wrap}
  .price b{font-size:1.05rem}
  .price .small{font-size:.7rem;margin-left:0}
  .card .btn{padding:9px 6px;font-size:.85rem;border-radius:10px}
}

@media(max-width:699px){
  .hero{padding:18px 0 8px}
  .hero h1{font-size:1.3rem;line-height:1.2;margin-bottom:6px}
  .hero p{font-size:.85rem;margin-bottom:8px}
  .hero .btn.big{display:none}
  .trust{padding:0}
  #productos{padding-top:14px}
  #productos h2{margin-bottom:10px}
  .cookie{padding:10px 14px;font-size:.78rem;gap:8px}
  .cookie p{flex:1 1 100%}
  .cookie .btn{padding:7px 14px;font-size:.8rem}
}

/* carrusel "También te puede gustar" */
.rel-section{padding:32px 0 8px}
.rel-section h2{text-align:left;font-size:1.2rem;margin-bottom:12px}
.rel-track{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.rel-track::-webkit-scrollbar{display:none}
.rel-card{flex:0 0 auto;width:140px;display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.rel-card img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block;background:var(--hielo)}
.rel-card .rel-name{font-size:.8rem;font-weight:600;padding:8px 8px 2px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rel-card .rel-price{font-size:.85rem;font-weight:700;color:var(--ac2);padding:0 8px 8px}
@media(max-width:699px){.rel-card{width:118px}.rel-section{padding:22px 0 6px}}

/* mensajes de error del formulario de pedido (no depende de la validación nativa del navegador) */
.sheet input.bad, .sheet select.bad { border-color: #d32f2f; }
.sheet .err { color: #d32f2f; font-size: .8rem; font-weight: 500; min-height: 1em; display: block; }
#wa-fallback a { color: var(--ac2); font-weight: 700; text-decoration: underline; }

/* resumen del producto en el formulario de pedido */
.osum{display:flex;gap:12px;align-items:center;background:var(--hielo);border:1px solid var(--line);border-radius:12px;padding:10px}
.osum img{width:64px;height:84px;object-fit:cover;object-position:center top;border-radius:8px;flex:0 0 auto;background:var(--hielo)}
.osum-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.osum-t>b{font-size:.95rem;line-height:1.25}
.osum-p s{color:var(--mut);font-size:.8rem;font-weight:400}
.osum-p b{color:var(--ac2);font-size:1.05rem}

/* el espacio del mensaje de error solo existe cuando hay un error (formulario más corto) */
.sheet .err{min-height:0}
.sheet .err:empty{display:none}

/* barra fija abajo (aviso + botón "Confirmar pedido"), siempre visible aunque el formulario sea más alto que la pantalla.
   Tiene fondo sólido: lo que pasa por debajo queda tapado, sin textos cortados a medias. */
.sheet .sbar{position:sticky;bottom:-24px;z-index:2;display:flex;flex-direction:column;gap:6px;background:var(--panel);
  margin:0 -20px -24px;padding:10px 20px 16px;box-shadow:0 -8px 10px -8px rgba(6,42,94,.18)}
.sheet .sbar p{margin:0}

/* salto periódico del botón "Hacer pedido" para llamar la atención (se detiene al pasar el mouse
   y se desactiva si la persona tiene activada la opción de "reducir movimiento" en su celular) */
@keyframes salto{
  0%,55%,100%{transform:translateY(0)}
  63%{transform:translateY(-11px)}
  71%{transform:translateY(0)}
  79%{transform:translateY(-5px)}
  87%{transform:translateY(0)}
}
.btn.buy{animation:salto 2.6s ease-in-out infinite}
.btn.buy:hover,.btn.buy:focus-visible{animation:none}
@media (prefers-reduced-motion:reduce){.btn.buy{animation:none}}

/* migas de pan, categorías y textos largos (páginas de producto, categoría e información) */
.crumbs{font-size:.85rem;color:var(--mut);padding:14px 0 0}
.crumbs a{color:var(--ac2);text-decoration:none}
.hero.cat{padding:24px 0 8px}
.hero.cat h1{font-size:clamp(1.4rem,4vw,2.2rem)}
.cats{padding:8px 0 0}
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.catcard{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;background:var(--panel)}
.catcard b{color:var(--ac2);font-size:1.05rem}
.catcard span{color:var(--mut);font-size:.85rem}
.prose{max-width:760px;margin:0 auto;padding:0 20px}
.prose h2{text-align:left;font-size:1.2rem;margin:22px 0 8px}
.prose p,.prose li{color:var(--mut);margin-bottom:6px}
.prose ol{padding-left:22px}
.prose a,.legal a{color:var(--ac2)}
.legal ul{padding-left:20px}

/* botones de compra ("Hacer pedido" y "Confirmar pedido"): amarillo con letras azul marino, el que más resalta junto al azul del logo */
.btn.buy,.sheet .btn[type=submit]{background:var(--sol);color:var(--marino);box-shadow:0 5px 0 -1px var(--sol2)}
.btn.buy:hover,.sheet .btn[type=submit]:hover{filter:brightness(1.05)}

/* ===================== Marca en todas las páginas (2026-10-18) ===================== */
body{font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;letter-spacing:-.015em;color:var(--marino)}

/* encabezado de tienda (igual al de la portada) */
header.ti-head{background:#fff;border-bottom:1px solid var(--line)}
header.ti-head .wrap{display:flex;align-items:center;gap:14px;height:66px;justify-content:flex-start;max-width:1180px}
.ti-head .logo{margin-right:auto;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--marino)}
.ti-head .logo img{height:30px}
.ti-nav{display:none;gap:2px}
.ti-nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.86rem;color:var(--marino);text-transform:uppercase;letter-spacing:.02em}
.ti-nav a:hover{color:var(--ac);background:var(--hielo)}
.ti-wa{display:flex;align-items:center;gap:6px;background:#25D366;color:#fff;text-decoration:none;border-radius:999px;padding:9px 14px;font-size:.88rem;font-weight:700}
.ti-wa b{display:none}
@media(min-width:900px){.ti-nav{display:flex}.ti-wa b{display:inline}}

/* ===================== Página de producto ===================== */
body[data-page=product]{background:#f5f9fc}
body[data-page=product] main.wrap{max-width:1180px}
body[data-page=product] .crumbs{padding-top:16px}
body[data-page=product] .pdetail{gap:28px;padding:18px 0 10px}
/* galería: foto grande + miniaturas */
body[data-page=product] .pimg{display:block;aspect-ratio:auto;background:none;gap:0}
.g-main{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.g-main img,.g-main video{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:var(--hielo);border-radius:0;aspect-ratio:auto}
.g-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.g-thumbs::-webkit-scrollbar{display:none}
.g-th{position:relative;flex:none;width:68px;height:84px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--hielo)}
.g-th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;border-radius:0}
.g-th.on{border-color:var(--ac)}
.g-th:focus-visible{outline:3px solid var(--cielo);outline-offset:2px}
.g-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;background:rgba(6,42,94,.35)}
/* recuadro de compra */
.pbox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.pbox h1{font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.1;margin-bottom:6px}
.pprecio{background:var(--hielo);border-radius:14px;padding:12px 14px;margin:14px 0 6px}
.pprecio .price{margin:0;align-items:center}
.pprecio .price b{font-family:"Bricolage Grotesque",sans-serif;font-size:2.3rem;color:var(--marino);line-height:1}
.pprecio .tag-off{font-size:.8rem;padding:3px 10px;border-radius:6px}
.ahorro{margin:6px 0 0;font-size:.88rem;font-weight:700;color:var(--ac)}
.ahorro span{font-weight:500;color:var(--mut)}
body[data-page=product] ul.ben{margin:14px 0 18px}
body[data-page=product] ul.ben li{padding:5px 0 5px 30px;font-size:.95rem}
body[data-page=product] ul.ben li:before{content:"✓";width:20px;height:20px;top:7px;border-radius:50%;background:var(--hielo);color:var(--ac);font-size:.75rem;display:flex;align-items:center;justify-content:center}
.pbox .btn.big.buy{font-size:1.15rem;padding:17px 20px;border-radius:14px}
.pwa{display:block;text-align:center;margin-top:12px;font-weight:700;font-size:.9rem;color:#128C4A;text-decoration:none}
.pwa:hover{text-decoration:underline}
.pgar{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pgar li{display:flex;gap:8px;align-items:center;background:#f5f9fc;border-radius:12px;padding:9px 10px;font-size:.74rem;color:var(--mut);line-height:1.25}
.pgar i{font-style:normal;font-size:1.05rem}
.pgar b{display:block;color:var(--marino);font-size:.8rem}
#p-ship{font-size:.78rem;text-align:center;margin-top:12px}
/* descripción */
.pdesc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:8px}
.pdesc h2{text-align:left;font-size:1.25rem;margin:0 0 8px}
.pdesc p{color:var(--mut);margin:0}
body[data-page=product] .rel-section h2{font-size:1.25rem}
.rel-card .rel-price{color:var(--marino)}
/* barra fija de compra en celular: precio + botón */
@media(max-width:760px){
  .sticky-buy{display:flex !important;align-items:center;gap:12px;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);box-shadow:0 -6px 20px rgba(6,42,94,.1)}
  .sticky-buy .sb-precio{line-height:1.1;flex:none}
  .sticky-buy .sb-precio s{display:block;color:var(--mut);font-size:.75rem}
  .sticky-buy .sb-precio b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem;color:var(--marino)}
  .sticky-buy .btn{flex:1;width:auto}
  body[data-page=product] .pdetail{gap:16px;padding-top:12px}
  .pbox{padding:18px 16px}
}
@media(min-width:761px){.sticky-buy .sb-precio{display:none}}