/* ==========================================================================
   LeuName Softwares — Design tokens (tema claro/azul)
   ========================================================================== */
:root{
  --navy-950:#071a33;
  --navy-900:#0a2647;
  --navy-800:#0e3466;
  --blue-600:#1e6fd9;
  --blue-500:#2f7dff;
  --blue-400:#5aa0ff;
  --blue-50:#eaf2ff;
  --ink-900:#0f1e33;
  --ink-600:#4c5b73;
  --ink-400:#7c8aa0;
  --white:#ffffff;
  --gray-50:#f5f7fb;
  --gray-100:#eef1f7;
  --gray-200:#dde3ee;
  --red-500:#e5484d;
  --amber:#f5a524;
  --green:#1a9a55;

  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --container-max:1360px;
  --container-pad:20px;

  --shadow-card:0 2px 10px rgba(15,30,51,.06);
  --shadow-pop:0 16px 40px rgba(15,30,51,.14);
  --radius-m:12px;
  --radius-l:18px;
  --radius-pill:999px;
  --ease:cubic-bezier(.22,.9,.3,1);
}
@media (min-width:768px){ :root{ --container-pad:28px; } }
@media (min-width:1024px){ :root{ --container-pad:36px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--gray-50);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-head); margin:0; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
:focus-visible{ outline:2px solid var(--blue-500); outline-offset:2px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--blue-500); color:var(--white); padding:10px 16px; border-radius:0 0 8px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }

/* ==========================================================================
   Header — fila 1: topbar
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:120; }

.topbar{
  background:var(--navy-950);
  color:rgba(255,255,255,.82);
  font-size:12.5px;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  height:38px;
}
.topbar-msg{ display:flex; align-items:center; gap:7px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; }
.topbar-msg svg{ flex:none; color:var(--blue-400); }
.topbar-badges{ display:none; align-items:center; gap:22px; flex:none; }
.topbar-badges li{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar-badges svg{ color:var(--blue-400); }
.lang-select{ display:flex; align-items:center; gap:5px; flex:none; color:rgba(255,255,255,.85); padding:4px 2px; }
.chevron{ opacity:.7; }

@media (min-width:1024px){ .topbar-badges{ display:flex; } }

/* ==========================================================================
   Header — fila 2: mainbar
   ========================================================================== */
.mainbar{
  background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-900) 100%);
  padding-block:12px;
}
.mainbar-inner{
  display:flex; align-items:center; gap:14px;
}
.menu-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; align-items:center; flex:none;
}
.menu-toggle span{ width:20px; height:2px; background:var(--white); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand-mark{ width:40px; height:40px; border-radius:9px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-word{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,2.2vw,22px); color:var(--white); letter-spacing:.3px; }
.brand-sub{ font-family:var(--font-head); font-weight:600; font-size:9.5px; letter-spacing:2.6px; color:var(--blue-400); }

.searchbar{
  display:none; flex:1 1 auto; align-items:center; min-width:0;
  background:var(--white); border-radius:var(--radius-pill);
  overflow:hidden; height:46px;
}
.searchbar input{
  flex:1 1 auto; min-width:0; border:none; outline:none; background:none;
  padding-inline:18px; font-family:var(--font-body); font-size:14.5px; color:var(--ink-900);
}
.searchbar input::placeholder{ color:var(--ink-400); }
.searchbar button{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--blue-500); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin:0 4px 0 0;
  transition:background .2s var(--ease);
}
.searchbar button:hover{ background:var(--blue-600); }

.mainbar-actions{ display:flex; align-items:center; gap:18px; flex:none; margin-left:auto; }
.action-link{ display:flex; align-items:center; gap:8px; color:var(--white); white-space:nowrap; }
.action-link svg{ flex:none; }
.action-text{ display:flex; flex-direction:column; font-size:13.5px; font-weight:600; line-height:1.25; }
.action-text small{ font-size:10.5px; font-weight:400; color:rgba(255,255,255,.68); }
.cart-ic-wrap{ position:relative; display:inline-flex; }
.cart-badge{
  position:absolute; top:-6px; right:-7px; min-width:16px; height:16px; padding:0 3px;
  border-radius:var(--radius-pill); background:var(--red-500); color:var(--white);
  font-size:9.5px; font-weight:800; line-height:16px; text-align:center;
}

.searchbar-mobile{ display:flex; margin-top:12px; height:46px; }

@media (min-width:640px){
  .searchbar{ display:flex; margin-inline:10px; }
  .searchbar-mobile{ display:none; }
}
@media (max-width:1023px){
  .brand-word{ font-size:16px; }
  .action-text{ display:none; }
}
@media (min-width:1024px){
  .menu-toggle{ display:none; }
}

/* ==========================================================================
   Header — fila 3: categorybar
   ========================================================================== */
.categorybar{ background:var(--white); border-bottom:1px solid var(--gray-200); display:none; }
.categorybar-inner{ display:flex; align-items:center; gap:28px; height:50px; }
.all-cats{
  display:flex; align-items:center; gap:8px; flex:none;
  font-weight:600; font-size:14px; color:var(--ink-900);
  padding-right:20px; border-right:1px solid var(--gray-200); height:100%;
}
.cat-links{ display:flex; align-items:center; gap:26px; flex:1 1 auto; overflow:hidden; }
.cat-links a{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink-600); white-space:nowrap; transition:color .2s var(--ease); }
.cat-links a:hover{ color:var(--blue-600); }
.cat-ic{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; flex:none; }
.cat-ic-blue{ background:#e3edff; color:var(--blue-600); }
.cat-ic-green{ background:#e2f6ea; color:#1a9a55; }
.cat-ic-amber{ background:#fdefd9; color:#c9791a; }
.cat-ic-pink{ background:#fde7ef; color:#d63c78; }
.cat-ic-purple{ background:#efe6fb; color:#7c3ce0; }
.cat-ic-gray{ background:var(--gray-100); color:var(--ink-600); }

@media (min-width:1024px){ .categorybar{ display:block; } }

.mobile-cat-scroll{
  display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:12px var(--container-pad) 14px; background:var(--white); border-bottom:1px solid var(--gray-200);
  scrollbar-width:none;
}
.mobile-cat-scroll::-webkit-scrollbar{ display:none; }
.mobile-cat-scroll button{
  display:flex; flex-direction:column; align-items:center; gap:6px; flex:none;
  font-size:11.5px; font-weight:600; color:var(--ink-600); width:68px;
}
@media (min-width:1024px){ .mobile-cat-scroll{ display:none; } }

/* Menu mobile off-canvas (categorias completas) */
.nav-overlay{
  position:fixed; inset:0; z-index:98; background:rgba(7,26,51,.55);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }

@media (max-width:1023px){
  #categoryNav{
    display:block;
    position:fixed; top:0; left:0; z-index:99;
    width:min(300px,84vw); height:100dvh;
    background:var(--white);
    transform:translateX(-100%); transition:transform .3s var(--ease);
    overflow-y:auto; border-bottom:none;
  }
  #categoryNav.is-open{ transform:translateX(0); }
  .categorybar-inner{ flex-direction:column; align-items:stretch; height:auto; padding-block:18px; gap:4px; }
  .all-cats{ border-right:none; border-bottom:1px solid var(--gray-200); padding:14px 0; margin-bottom:6px; }
  .cat-links{ flex-direction:column; align-items:stretch; gap:2px; overflow:visible; }
  .cat-links a{ padding:12px 4px; font-size:15px; }
}

/* ==========================================================================
   Correccion de overflow en grids con 1fr: los items de grid/flex tienen
   min-width:auto por defecto, lo que puede forzar el contenedor a
   desbordarse si dentro hay texto/botones que no se ajustan (nowrap).
   ========================================================================== */
.checkout-layout > *, .cart-layout > *, .account-layout > *, .cat-layout > *, .contact-layout > *, .about-grid > *{ min-width:0; }

/* ==========================================================================
   Botones y utilidades generales
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-pill); font-weight:700; font-size:14.5px;
  padding:13px 26px; transition:transform .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--blue-500); color:var(--white); box-shadow:0 10px 24px rgba(47,125,255,.28); }
.btn-primary:hover{ background:var(--blue-600); transform:translateY(-1px); }
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{ background:var(--gray-200); color:var(--ink-400); box-shadow:none; cursor:not-allowed; transform:none; }
.btn-outline{
  background:var(--white); color:var(--blue-600); border:1.5px solid var(--blue-500);
}
.btn-outline:hover{ background:var(--blue-50); }
.btn-outline-block{ display:block; width:100%; text-align:center; background:var(--white); color:var(--blue-600); border:1.5px solid var(--blue-500); border-radius:var(--radius-pill); font-weight:700; font-size:13.5px; padding:10px 14px; transition:background .2s var(--ease); }
.btn-outline-block:hover{ background:var(--blue-50); }
.btn-ghost{ color:var(--blue-600); font-weight:700; }
.btn-cart{ background:var(--green); color:var(--white); }
.btn-cart:hover{ background:#158049; transform:translateY(-1px); }
.btn-demo{ background:var(--amber); color:var(--white); }
.btn-demo:hover{ background:#dd9010; transform:translateY(-1px); }
.product-actions .btn{ padding:11px 20px; font-size:13.5px; }
.btn-block{ width:100%; white-space:normal; }
.btn-danger-ghost{ color:var(--red-500); font-weight:600; font-size:13px; }
.is-added{ background:#1a9a55 !important; }

.section{ padding-block:56px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.section-title{ font-size:clamp(21px,2.6vw,28px); font-weight:800; color:var(--ink-900); }
.section-link{ color:var(--blue-600); font-weight:700; font-size:14.5px; white-space:nowrap; }
.section-link:hover{ text-decoration:underline; }
.section-sub{ color:var(--ink-600); font-size:14.5px; margin-top:6px; }

.page-hero{ background:linear-gradient(120deg,var(--navy-900),var(--navy-800)); color:var(--white); padding-block:44px; }
.page-hero h1{ font-size:clamp(24px,3.4vw,34px); font-weight:800; }
.page-hero p{ color:rgba(255,255,255,.78); margin-top:8px; font-size:15px; max-width:640px; }
.breadcrumb{ font-size:12.5px; color:var(--ink-400); margin-bottom:10px; }
.breadcrumb a{ color:var(--ink-400); }
.breadcrumb a:hover{ color:var(--blue-600); }
.page-hero .breadcrumb, .page-hero .breadcrumb a{ color:rgba(255,255,255,.65); }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero{ background:linear-gradient(135deg,var(--navy-950) 0%,var(--navy-900) 45%,var(--blue-600) 130%); position:relative; overflow:hidden; }
.hero-inner{
  display:grid; gap:18px; align-items:center; padding-block:28px 24px;
  grid-template-columns:1.15fr 1fr;
}
.hero-tagline{ position:absolute; top:22px; right:var(--container-pad); font-family:var(--font-head); font-style:italic; font-weight:500; font-size:12.5px; color:var(--blue-400); letter-spacing:.3px; }
.hero-copy h1{ color:var(--white); font-size:clamp(30px,5.6vw,46px); font-weight:800; line-height:1.12; }
.hero-copy h1 .accent{ color:var(--blue-400); }
.hero-copy p{ color:rgba(255,255,255,.78); font-size:16px; margin-top:16px; max-width:480px; line-height:1.6; }
.hero-copy .btn{ margin-top:26px; }
.hero-carousel{ margin-top:28px; display:flex; align-items:center; gap:14px; }
.hero-arrow{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex:none; transition:background .2s var(--ease);
}
.hero-arrow:hover{ background:rgba(255,255,255,.22); }
.hero-dots{ display:flex; gap:8px; }
.hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .2s var(--ease), width .2s var(--ease); }
.hero-dot.is-active{ background:var(--blue-400); width:22px; border-radius:6px; }

.hero-art{ position:relative; height:clamp(260px,42vw,420px); }
.hero-art-laptop{
  position:absolute; left:6%; bottom:6%; width:78%; max-width:420px;
  background:linear-gradient(160deg,#132a4d,#0b1c37); border-radius:14px 14px 4px 4px;
  padding:16px 16px 26px; box-shadow:var(--shadow-pop);
}
.hero-art-laptop .screen-bar{ display:flex; gap:6px; margin-bottom:12px; }
.hero-art-laptop .screen-bar span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); }
.hero-art-laptop .screen-ui{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hero-art-laptop .ui-block{ height:34px; border-radius:8px; background:linear-gradient(120deg,rgba(90,160,255,.5),rgba(90,160,255,.15)); }
.hero-art-laptop .ui-block.tall{ grid-column:1 / -1; height:58px; background:linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,.05)); }
.hero-art-laptop .ui-block.chart{ background:linear-gradient(0deg,rgba(47,125,255,.55),rgba(47,125,255,.05)); }
.hero-art-phone{
  position:absolute; right:2%; bottom:0; width:34%; max-width:150px; aspect-ratio:9/18;
  background:linear-gradient(160deg,#1a3a63,#0e2544); border-radius:22px; box-shadow:var(--shadow-pop);
  padding:14px 10px; border:3px solid rgba(255,255,255,.08);
}
.hero-art-phone .ui-dot{ width:34px; height:6px; border-radius:6px; background:rgba(255,255,255,.25); margin:0 auto 12px; }
.hero-art-phone .ui-block{ height:24px; border-radius:7px; margin-bottom:8px; background:linear-gradient(120deg,rgba(90,160,255,.55),rgba(90,160,255,.15)); }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; }
.hero-blob-a{ width:150px; height:150px; background:radial-gradient(circle,rgba(90,160,255,.55),transparent 70%); top:-10px; left:20%; }
.hero-blob-b{ width:110px; height:110px; background:radial-gradient(circle,rgba(245,165,36,.4),transparent 70%); bottom:10%; left:0; }
.hero-chip{
  position:absolute; display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.94);
  color:var(--ink-900); border-radius:12px; padding:8px 12px; font-size:11.5px; font-weight:700;
  box-shadow:var(--shadow-pop); animation:floaty 5s ease-in-out infinite;
}
.hero-chip svg{ flex:none; }
.hero-chip-1{ top:6%; left:0; animation-delay:.2s; }
.hero-chip-2{ top:36%; right:4%; animation-delay:1.1s; }
.hero-chip-3{ bottom:2%; left:28%; animation-delay:2s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion:reduce){ .hero-chip{ animation:none; } }

@media (min-width:900px){
  .hero-inner{ grid-template-columns:1fr 1fr; padding-block:64px 54px; }
}

@media (max-width:639px){
  /* El celular pasa a mostrar el hero en horizontal, igual que la
     composicion de escritorio (texto + ilustracion lado a lado), en vez
     de apilado. Para que la ilustracion quepa en una columna angosta sin
     pelear por espacio, se simplifica a solo el mockup del laptop (ya es
     horizontal de por si) y se ocultan telefono/chips/blobs, que no
     entraban sin superponerse. */
  .hero-inner{ grid-template-columns:1.05fr 1fr; gap:14px; padding-block:22px 20px; }
  .hero-tagline{ display:none; }
  .hero-copy h1{ font-size:clamp(17px,5.4vw,22px); line-height:1.2; }
  .hero-copy p{ font-size:12.5px; margin-top:8px; line-height:1.5; }
  .hero-copy .btn{ margin-top:14px; padding:9px 14px; font-size:12px; white-space:normal; }
  .hero-carousel{ margin-top:14px; gap:8px; }
  .hero-arrow{ width:26px; height:26px; }
  .hero-dot{ width:6px; height:6px; }
  .hero-art{ height:auto; display:flex; align-items:center; justify-content:center; }
  .hero-blob, .hero-chip, .hero-art-phone{ display:none; }
  .hero-art-laptop{ position:static; width:100%; max-width:none; padding:10px 10px 16px; }
}

/* ==========================================================================
   Cuadrícula de categorías
   ========================================================================== */
.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cat-card{
  background:var(--white); border-radius:var(--radius-l); padding:22px 18px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:10px; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.cat-card .cat-ic{ width:46px; height:46px; border-radius:12px; }
.cat-card .cat-ic svg{ width:22px; height:22px; }
.cat-card-name{ font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--ink-900); }
.cat-card-link{ color:var(--blue-600); font-size:13px; font-weight:700; margin-top:auto; }
@media (min-width:640px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .cat-grid{ grid-template-columns:repeat(6,1fr); } }

/* ==========================================================================
   Tarjetas de producto
   ========================================================================== */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (min-width:640px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .product-grid{ grid-template-columns:repeat(6,1fr); } }
.product-grid.product-grid-4{ }
@media (min-width:1024px){ .product-grid-4{ grid-template-columns:repeat(4,1fr); } }

.product-card{
  background:var(--white); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.product-card-media{ display:block; position:relative; }
.product-card-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card-name{ font-weight:700; font-size:14px; color:var(--ink-900); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.35em * 2); }
.product-card-rating{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-600); }
.stars{ display:inline-flex; gap:1px; color:var(--amber); }
.rating-num{ font-weight:700; color:var(--ink-900); }
.product-card-price{ font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--ink-900); }
.product-card-body .btn-outline-block{ margin-top:auto; padding:8px 14px; font-size:12.5px; }
.product-real-badge{ position:absolute; top:8px; left:8px; background:#1a9a55; color:var(--white); font-size:10px; font-weight:800; padding:4px 8px; border-radius:var(--radius-pill); }
.product-tag{ position:absolute; top:8px; right:8px; color:var(--white); font-size:10px; font-weight:800; padding:4px 8px; border-radius:var(--radius-pill); }
.product-tag-novedad{ background:var(--blue-500); }
.product-tag-recomendado{ background:var(--amber); }

/* Carrusel de productos (fila con scroll horizontal + flechas) */
.carousel-wrap{ position:relative; }
.product-carousel{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-block:2px 6px;
}
.product-carousel::-webkit-scrollbar{ display:none; }
.product-carousel .product-card{ flex:0 0 auto; width:158px; scroll-snap-align:start; }
@media (min-width:640px){ .product-carousel .product-card{ width:210px; } }
@media (min-width:1024px){ .product-carousel .product-card{ width:220px; } }
.carousel-arrow{
  position:absolute; top:38%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; background:var(--white); box-shadow:var(--shadow-pop);
  display:flex; align-items:center; justify-content:center; color:var(--ink-900); z-index:5;
  transition:opacity .15s var(--ease), background .15s var(--ease);
}
.carousel-arrow:hover{ background:var(--blue-50); }
.carousel-arrow[disabled]{ opacity:0; pointer-events:none; }
.carousel-arrow-prev{ left:-4px; }
.carousel-arrow-next{ right:-4px; }
@media (min-width:1024px){
  .carousel-arrow{ width:44px; height:44px; }
  .carousel-arrow-prev{ left:-20px; }
  .carousel-arrow-next{ right:-20px; }
}

.prod-visual{ position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prod-visual-photo{ background:var(--gray-100); }
.prod-visual-photo img{ width:100%; height:100%; object-fit:cover; }
.prod-visual-icon{ width:44%; max-width:64px; color:rgba(255,255,255,.92); position:relative; z-index:2; }
.prod-visual-icon svg{ width:100%; height:100%; }
.prod-visual-initials{ position:absolute; right:10px; bottom:8px; font-family:var(--font-head); font-weight:800; font-size:11px; color:rgba(255,255,255,.55); letter-spacing:1px; z-index:2; }
.prod-visual-blob{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.6; }
.prod-visual-blob-a{ width:70%; height:70%; top:-20%; left:-10%; }
.prod-visual-blob-b{ width:55%; height:55%; bottom:-18%; right:-10%; }
.prod-visual-blue{ background:linear-gradient(135deg,var(--blue-600),var(--navy-900)); }
.prod-visual-blue .prod-visual-blob-a{ background:radial-gradient(circle,rgba(90,160,255,.7),transparent 70%); }
.prod-visual-blue .prod-visual-blob-b{ background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%); }
.prod-visual-green{ background:linear-gradient(135deg,#1a9a55,#0c4a2a); }
.prod-visual-green .prod-visual-blob-a{ background:radial-gradient(circle,rgba(120,230,170,.7),transparent 70%); }
.prod-visual-green .prod-visual-blob-b{ background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%); }
.prod-visual-amber{ background:linear-gradient(135deg,#c9791a,#6e3e08); }
.prod-visual-amber .prod-visual-blob-a{ background:radial-gradient(circle,rgba(255,210,120,.7),transparent 70%); }
.prod-visual-amber .prod-visual-blob-b{ background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%); }
.prod-visual-pink{ background:linear-gradient(135deg,#d63c78,#6c1638); }
.prod-visual-pink .prod-visual-blob-a{ background:radial-gradient(circle,rgba(255,150,190,.7),transparent 70%); }
.prod-visual-pink .prod-visual-blob-b{ background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%); }
.prod-visual-purple{ background:linear-gradient(135deg,#7c3ce0,#331871); }
.prod-visual-purple .prod-visual-blob-a{ background:radial-gradient(circle,rgba(200,160,255,.7),transparent 70%); }
.prod-visual-purple .prod-visual-blob-b{ background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%); }
.prod-visual-gray{ background:linear-gradient(135deg,#5b6b85,#20293a); }
.prod-visual-gray .prod-visual-blob-a{ background:radial-gradient(circle,rgba(200,210,230,.6),transparent 70%); }
.prod-visual-gray .prod-visual-blob-b{ background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%); }

/* ==========================================================================
   Banners promocionales
   ========================================================================== */
.promo-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:768px){ .promo-grid{ grid-template-columns:1fr 1fr; } }
.promo-card{
  border-radius:var(--radius-l); padding:32px 28px; color:var(--white); position:relative; overflow:hidden;
  min-height:190px; display:flex; flex-direction:column; justify-content:center;
}
.promo-card h3{ font-size:clamp(19px,2.4vw,24px); font-weight:800; max-width:280px; }
.promo-card p{ margin-top:8px; font-size:14px; color:rgba(255,255,255,.85); max-width:300px; }
.promo-card .btn{ margin-top:18px; width:fit-content; }
.promo-card-templates{ background:linear-gradient(120deg,#1a9a55,#0c4a2a); }
.promo-card-libros{ background:linear-gradient(120deg,#c9791a,#6e3e08); }
.promo-card-glyph{ position:absolute; right:-18px; bottom:-18px; width:150px; height:150px; opacity:.18; }
.promo-card-glyph svg{ width:100%; height:100%; }

/* ==========================================================================
   Franja de confianza
   ========================================================================== */
.trust-strip{ background:var(--white); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding-block:34px; }
@media (min-width:900px){ .trust-grid{ grid-template-columns:repeat(4,1fr); } }
.trust-item{ display:flex; align-items:center; gap:12px; }
.trust-ic{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--blue-50); color:var(--blue-600); display:flex; align-items:center; justify-content:center; }
.trust-item h4{ font-size:13.5px; font-weight:700; color:var(--ink-900); }
.trust-item p{ font-size:12px; color:var(--ink-600); margin-top:2px; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter{ background:linear-gradient(120deg,var(--navy-900),var(--blue-600)); color:var(--white); }
.newsletter-inner{ display:flex; flex-direction:column; gap:18px; padding-block:40px; align-items:flex-start; }
.newsletter h3{ font-size:clamp(19px,2.4vw,24px); font-weight:800; }
.newsletter p{ color:rgba(255,255,255,.8); font-size:14px; margin-top:6px; max-width:420px; }
.newsletter-form{ display:flex; gap:10px; width:100%; max-width:440px; }
.newsletter-form input{
  flex:1 1 auto; min-width:0; height:48px; border-radius:var(--radius-pill); border:none; padding-inline:18px;
  font-family:var(--font-body); font-size:14px; outline:none;
}
.newsletter-form .btn{ flex:none; height:48px; padding-inline:22px; }
.newsletter-msg{ margin-top:4px; font-size:13px; background:rgba(255,255,255,.14); padding:9px 14px; border-radius:10px; }
@media (min-width:768px){ .newsletter-inner{ flex-direction:row; align-items:center; justify-content:space-between; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.72); font-size:12.5px; }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; padding-block:32px 20px; }
.footer-grid .footer-col-brand{ grid-column:1 / -1; }
@media (min-width:700px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:28px; } .footer-grid .footer-col-brand{ grid-column:auto; } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; } }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer-brand img{ width:34px; height:34px; border-radius:8px; }
.footer-brand-text{ font-family:var(--font-head); font-weight:800; color:var(--white); font-size:14px; letter-spacing:.5px; }
.footer-col p{ line-height:1.55; max-width:280px; }
.footer-col h5{ color:var(--white); font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; }
.footer-col ul{ display:flex; flex-direction:column; gap:7px; }
.footer-col a{ transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--white); }
.footer-socials{ display:flex; gap:8px; margin-top:12px; }
.footer-socials a{
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease);
}
.footer-socials a:hover{ background:var(--blue-500); color:var(--white); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:14px; display:flex; flex-direction:column; gap:5px; font-size:11.5px; }
@media (min-width:640px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }

/* ==========================================================================
   Página de producto
   ========================================================================== */
.product-detail{ display:grid; gap:36px; grid-template-columns:1fr; padding-block:36px; }
@media (min-width:900px){ .product-detail{ grid-template-columns:1fr 1fr; } }

/* Cabecera minimalista para demo.html y checkout.html: páginas de venta
   e pago dedicadas, sin barra de búsqueda ni categorías ni footer -- solo
   la logo, para no distraer al cliente del objetivo (ver/comprar). */
.demo-minimal-header{ padding-block:16px; }
.demo-minimal-header .container{ display:flex; }
.demo-minimal-header a{ display:inline-flex; align-items:center; gap:10px; }
.demo-minimal-header img{ width:34px; height:34px; border-radius:8px; flex:none; }
.demo-minimal-brand-word{ display:block; font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--ink-900); letter-spacing:.3px; }
.demo-minimal-brand-sub{ display:block; font-family:var(--font-head); font-weight:600; font-size:8px; letter-spacing:2px; color:var(--ink-400); }

/* Página de demo de producto (demo.html) — página de ventas dedicada,
   pensada para "enganchar": mascota + saludo, funcionalidades en tarjetas
   de color, captura/video destacado con checklist, y un cierre con precio
   y botón de compra. Sin fondos oscuros ni recuadros vacíos inventados. */
.demo-script{ font-family:'Caveat',cursive; font-weight:700; }
.demo-hero{ display:grid; grid-template-columns:1fr; gap:4px; align-items:center; padding-block:8px 8px; max-width:960px; margin-inline:auto; }
@media (min-width:760px){ .demo-hero{ grid-template-columns:300px 1fr; gap:24px; } }
.demo-hero-mascot{ position:relative; width:250px; margin-inline:auto; }
@media (min-width:760px){ .demo-hero-mascot{ width:100%; } }
.demo-hero-mascot img,.demo-hero-mascot video{ display:block; width:100%; height:auto; }
.demo-hero-play{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; padding:10px 18px 10px 14px; border-radius:999px;
  background:rgba(7,26,51,.9); color:var(--white); font-family:var(--font-head); font-weight:700; font-size:14px;
  box-shadow:0 6px 18px rgba(7,26,51,.35); animation:demoPulse 2.6s ease-in-out infinite; white-space:nowrap;
}
.demo-hero-play[hidden]{ display:none; }
.demo-hero-toggle{
  position:absolute; right:10px; bottom:6px; width:34px; height:34px; border-radius:50%;
  background:rgba(7,26,51,.72); color:var(--white); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.demo-hero-toggle[hidden]{ display:none; }

.demo-overlay{ position:fixed; inset:0; z-index:500; background:var(--white); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.demo-overlay[hidden]{ display:none; }
.demo-overlay-header{ position:sticky; top:0; z-index:2; background:var(--white); }
.demo-overlay-header .container{ display:flex; align-items:center; justify-content:space-between; }
.demo-overlay-close{
  width:36px; height:36px; border-radius:50%; border:none; background:rgba(7,26,51,.08);
  display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
  color:var(--ink-700,var(--ink-600)); flex:none; cursor:pointer;
}
.demo-hero-bubble{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:22px 24px; text-align:center; }
@media (min-width:760px){ .demo-hero-bubble{ text-align:left; } }
.demo-hero-bubble h1{ font-size:clamp(19px,2.6vw,25px); font-weight:800; color:var(--ink-900); line-height:1.3; }
.demo-hero-bubble h1 span{ color:var(--blue-600); }
.demo-hero-bubble p{ color:var(--ink-600); font-size:14.5px; margin-top:8px; line-height:1.6; }
.demo-hero-bubble .demo-script{ display:block; font-size:21px; color:var(--blue-600); margin-top:10px; }
.demo-section{ max-width:900px; margin-inline:auto; padding-block:30px; }
.demo-section h2{ font-size:clamp(19px,2.8vw,27px); font-weight:800; color:var(--ink-900); text-align:center; }
.demo-section-lead{ text-align:center; color:var(--ink-600); font-size:14.5px; margin-top:8px; max-width:520px; margin-inline:auto; }
.demo-features-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
@media (min-width:640px){ .demo-features-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .demo-features-grid{ grid-template-columns:repeat(5,1fr); } }
.demo-feature-card{ text-align:center; background:var(--white); border-radius:var(--radius-m); padding:20px 12px; box-shadow:var(--shadow-card); }
.demo-feature-ic{ width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--white); }
.demo-feature-card h3{ font-size:14px; font-weight:800; color:var(--ink-900); }
.demo-feature-card p{ font-size:12px; color:var(--ink-600); margin-top:4px; line-height:1.4; }
.ic-green{ background:var(--green); } .ic-blue{ background:var(--blue-500); } .ic-amber{ background:var(--amber); }
.ic-purple{ background:#7c3ce0; } .ic-pink{ background:#e0457c; }
.demo-showcase{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; max-width:960px; margin-inline:auto; padding-block:30px; }
@media (min-width:860px){ .demo-showcase{ grid-template-columns:1.1fr 1fr; } }
.demo-showcase-media{ border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-pop); background:var(--navy-900); aspect-ratio:4/3; }
.demo-showcase-media img,.demo-showcase-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.demo-showcase-copy h2{ font-size:clamp(19px,2.8vw,26px); font-weight:800; color:var(--ink-900); }
.demo-showcase-copy > p{ color:var(--ink-600); margin-top:8px; font-size:14.5px; line-height:1.6; }
.demo-showcase-list{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.demo-showcase-list li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-900); font-weight:600; }
.demo-showcase-list svg{ flex:none; color:var(--green); }
.demo-showcase-rocket{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.demo-showcase-rocket img{ width:44px; height:44px; flex:none; border-radius:10px; animation:demoRocketFloat 2.4s ease-in-out infinite; }
.demo-showcase-rocket .demo-script{ font-size:21px; color:var(--blue-600); }
@keyframes demoRocketFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-6px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce){ .demo-showcase-rocket img{ animation:none; } }
.demo-trust-row{ display:flex; flex-wrap:nowrap; justify-content:center; gap:10px; max-width:520px; margin:0 auto; padding-block:6px 18px; }
.demo-trust-row .trust-item{ flex-direction:column; text-align:center; gap:6px; flex:1 1 0; min-width:0; }
.demo-trust-row .trust-ic{ width:38px; height:38px; margin-inline:auto; }
.demo-trust-row .trust-item h4{ font-size:11.5px; line-height:1.25; }
@media (min-width:640px){
  .demo-trust-row{ max-width:640px; gap:24px; }
  .demo-trust-row .trust-item{ flex-direction:row; text-align:left; }
  .demo-trust-row .trust-ic{ margin-inline:0; }
  .demo-trust-row .trust-item h4{ font-size:13.5px; }
}
.demo-cta{
  text-align:center; max-width:480px; margin:36px auto 0; padding:32px 28px; border-radius:var(--radius-l);
  background:linear-gradient(120deg,var(--navy-900),var(--blue-600)); color:var(--white);
}
.demo-cta h2{ font-size:20px; font-weight:800; }
.demo-cta .demo-cta-price{ font-family:var(--font-head); font-weight:800; font-size:30px; margin-top:10px; }
.demo-cta .btn{ margin-top:18px; animation:demoPulse 2.6s ease-in-out infinite; }
.demo-cta-hint{ margin-top:10px !important; font-size:12px !important; color:rgba(255,255,255,.75) !important; }
@keyframes demoPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@media (prefers-reduced-motion: reduce){ .demo-cta .btn,.demo-hero-play{ animation:none; } }
.demo-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:14px; background:var(--white); box-shadow:0 -6px 24px rgba(15,30,51,.12); padding:12px 18px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%); transition:transform .25s var(--ease);
}
.demo-sticky-bar.is-visible{ transform:translateY(0); }
.demo-sticky-bar-price{ font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--ink-900); flex:none; }
.demo-sticky-bar .btn{ flex:none; }
@media (min-width:1024px){ .demo-sticky-bar{ display:none; } }
.product-gallery .prod-visual{ aspect-ratio:1/1; border-radius:var(--radius-l); }
.product-gallery .prod-visual-icon{ max-width:110px; }
.product-info .cat-tag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--blue-600); background:var(--blue-50); padding:5px 12px; border-radius:var(--radius-pill); }
.product-info h1{ font-size:clamp(22px,3vw,30px); font-weight:800; margin-top:12px; }
.product-info .product-card-rating{ margin-top:10px; font-size:13.5px; }
.product-info .price-row{ display:flex; align-items:baseline; gap:10px; margin-top:16px; }
.product-info .price-big{ font-family:var(--font-head); font-weight:800; font-size:32px; color:var(--ink-900); }
.product-info .price-badge{ font-size:11px; font-weight:800; color:#1a9a55; background:#e2f6ea; padding:4px 10px; border-radius:var(--radius-pill); }
.product-info .short-desc{ margin-top:14px; color:var(--ink-600); line-height:1.6; }
.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--gray-200); border-radius:var(--radius-pill); overflow:hidden; }
.qty-stepper button{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--ink-600); }
.qty-stepper button:hover{ background:var(--gray-50); }
.qty-stepper input{ width:44px; text-align:center; border:none; outline:none; font-weight:700; font-size:14px; font-family:inherit; }
.product-actions{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.product-actions-cart{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; }
.product-actions-cart .qty-stepper{ justify-self:center; }
.product-actions-cart .btn{ width:100%; }
.product-actions-buy{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.trust-row{ display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; padding-top:22px; border-top:1px solid var(--gray-200); }
.trust-row .trust-item{ flex:1 1 160px; }
.product-tabs-section{ padding-block:8px 56px; }
.product-block{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:28px; margin-bottom:22px; }
.product-block h2{ font-size:18px; font-weight:800; margin-bottom:14px; }
.check-list{ display:flex; flex-direction:column; gap:10px; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-700,var(--ink-600)); }
.check-list svg{ flex:none; color:#1a9a55; margin-top:2px; }
.feature-list{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px){ .feature-list{ grid-template-columns:1fr 1fr; } }
.feature-list li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-600); }
.feature-list svg{ flex:none; color:var(--blue-600); }

.faq-item{ border-bottom:1px solid var(--gray-200); }
.faq-item:last-child{ border-bottom:none; }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 4px; text-align:left; font-weight:700; font-size:14.5px; color:var(--ink-900); }
.faq-q .chevron{ transition:transform .2s var(--ease); flex:none; }
.faq-item.is-open .faq-q .chevron{ transform:rotate(180deg); }
.faq-a{ padding:0 4px 16px; color:var(--ink-600); font-size:14px; line-height:1.6; }

/* ==========================================================================
   Carrito
   ========================================================================== */
.cart-layout{ display:grid; gap:28px; grid-template-columns:1fr; padding-block:36px 64px; }
@media (min-width:900px){ .cart-layout{ grid-template-columns:1fr 340px; } }
.cart-item{ display:flex; gap:14px; align-items:center; background:var(--white); border-radius:var(--radius-m); box-shadow:var(--shadow-card); padding:14px; margin-bottom:14px; }
.cart-item-media{ width:76px; height:76px; border-radius:10px; flex:none; overflow:hidden; }
.cart-item-media .prod-visual{ aspect-ratio:1/1; }
.cart-item-media .prod-visual-icon{ max-width:34px; }
.cart-item-info{ flex:1 1 auto; min-width:0; }
.cart-item-name{ font-weight:700; font-size:14px; color:var(--ink-900); }
.cart-item-cat{ font-size:12px; color:var(--ink-400); margin-top:2px; }
.cart-item-remove{ font-size:12.5px; color:var(--red-500); font-weight:600; margin-top:8px; }
.cart-item-qty{ flex:none; }
.cart-item-price{ flex:none; width:90px; text-align:right; font-weight:800; font-family:var(--font-head); color:var(--ink-900); }
@media (max-width:639px){
  /* Em telas estreitas nao ha espaco pro item, o stepper de quantidade e o
     preco caberem lado a lado numa unica linha (o stepper acabava se
     sobrepondo ao nome do produto). Vira grid de 2 linhas: mídia+info em
     cima, stepper e preco embaixo, sem sobreposicao. */
  .cart-item{ flex-wrap:wrap; align-items:flex-start; row-gap:12px; }
  .cart-item-media{ order:1; }
  .cart-item-info{ order:2; flex:1 1 auto; }
  .cart-item-qty{ order:3; flex:none; }
  .cart-item-price{ order:4; flex:1 1 auto; width:auto; text-align:right; align-self:center; }
}
.cart-summary{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:24px; align-self:flex-start; }
.cart-summary h2{ font-size:16px; font-weight:800; margin-bottom:16px; }
.totals-row{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-600); padding-block:7px; }
.totals-row-total{ border-top:1px solid var(--gray-200); margin-top:6px; padding-top:14px; font-weight:800; font-size:17px; color:var(--ink-900); }
.checkout-coupon-note{ margin-top:10px; padding:9px 12px; border-radius:10px; background:#e2f6ea; color:#116f3c; font-size:12.5px; font-weight:600; }
.cart-actions{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.cart-empty{ text-align:center; padding:70px 20px; color:var(--ink-600); }
.cart-empty svg{ color:var(--gray-200); margin-bottom:16px; }
.cart-empty h2{ font-size:18px; font-weight:800; color:var(--ink-900); margin-bottom:8px; }
.cart-empty .btn{ margin-top:18px; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout-layout{ display:grid; gap:28px; grid-template-columns:1fr; padding-block:36px 64px; }
@media (min-width:900px){ .checkout-layout{ grid-template-columns:1fr 360px; } }
.checkout-form-card,.payment-card{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:26px; margin-bottom:22px; }
.checkout-form-card h2,.payment-card h2{ font-size:16px; font-weight:800; margin-bottom:16px; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:560px){ .form-grid.form-grid-2{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-700,var(--ink-600)); margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; height:46px; border:1.5px solid var(--gray-200); border-radius:10px; padding-inline:14px;
  font-family:inherit; font-size:14px; color:var(--ink-900); outline:none; transition:border-color .2s var(--ease); background:var(--white);
}
.field textarea{ height:auto; padding-block:12px; resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blue-500); }
.checkout-line{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding-block:8px; border-bottom:1px dashed var(--gray-200); }
.checkout-line small{ color:var(--ink-400); }
#payment-section .payment-placeholder{
  border:1.5px dashed var(--gray-200); border-radius:12px; padding:18px; color:var(--ink-600); font-size:13.5px; line-height:1.6; background:var(--gray-50);
}
.checkout-empty{ text-align:center; padding:70px 20px; color:var(--ink-600); }
.checkout-trust-row{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:14px; }
.checkout-trust-row span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-600); }
.checkout-trust-row svg{ color:var(--green); flex:none; }

/* ==========================================================================
   Confirmación
   ========================================================================== */
.confirm-card{ max-width:560px; margin-inline:auto; background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:40px 30px; text-align:center; }
.confirm-check{ width:64px; height:64px; border-radius:50%; background:#e2f6ea; color:#1a9a55; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.confirm-card h1{ font-size:22px; font-weight:800; }
.confirm-card p{ color:var(--ink-600); margin-top:8px; font-size:14.5px; }
.confirm-order{ background:var(--gray-50); border-radius:12px; padding:16px; margin-top:22px; text-align:left; font-size:13.5px; }
.confirm-order div{ display:flex; justify-content:space-between; padding-block:5px; }
.confirm-license{ margin-top:14px; padding:16px; border-radius:var(--radius-m); background:var(--blue-50); text-align:left; }
.confirm-license p{ margin:0 0 8px; font-weight:600; color:var(--ink-900); font-size:14px; }
.confirm-license-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.confirm-license-row code{ font-family:monospace; font-size:14px; background:var(--white); padding:8px 12px; border-radius:8px; flex:1 1 auto; word-break:break-all; }
.confirm-license-hint{ margin:10px 0 0 !important; font-size:12.5px !important; font-weight:400 !important; color:var(--ink-600) !important; }
.confirm-coupon{ margin-top:18px; padding:16px; border-radius:var(--radius-m); background:linear-gradient(120deg,var(--navy-900),var(--blue-600)); color:var(--white); text-align:left; }
.confirm-coupon p:first-child{ margin:0 0 6px; font-weight:700; }
.confirm-coupon p:last-child{ margin:0; font-size:14px; color:rgba(255,255,255,.9); }
.confirm-coupon code{ font-family:monospace; background:rgba(255,255,255,.16); padding:2px 8px; border-radius:6px; }
.confirm-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }

/* ==========================================================================
   Auth (login / registro)
   ========================================================================== */
.auth-wrap{ display:flex; justify-content:center; padding-block:52px 70px; }
.auth-card{ width:100%; max-width:420px; background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:36px 30px; }
.auth-card h1{ font-size:22px; font-weight:800; text-align:center; }
.auth-card p.auth-sub{ text-align:center; color:var(--ink-600); font-size:13.5px; margin-top:6px; }
.auth-card form{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.auth-links{ display:flex; justify-content:space-between; font-size:13px; margin-top:6px; }
.auth-links a{ color:var(--blue-600); font-weight:600; }
.auth-foot{ text-align:center; font-size:13.5px; color:var(--ink-600); margin-top:22px; }
.auth-foot a{ color:var(--blue-600); font-weight:700; }
.auth-note{ margin-top:18px; font-size:11.5px; color:var(--ink-400); text-align:center; }

/* ==========================================================================
   Mi cuenta
   ========================================================================== */
.account-layout{ display:grid; gap:24px; grid-template-columns:1fr; padding-block:36px 64px; }
@media (min-width:860px){ .account-layout{ grid-template-columns:220px 1fr; } }
.account-nav{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:16px; align-self:flex-start; display:flex; flex-direction:row; gap:6px; overflow-x:auto; }
@media (min-width:860px){ .account-nav{ flex-direction:column; } }
.account-nav a{ padding:11px 14px; border-radius:10px; font-weight:600; font-size:13.5px; color:var(--ink-600); white-space:nowrap; }
.account-nav a.is-active,.account-nav a:hover{ background:var(--blue-50); color:var(--blue-600); }
.account-section{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:26px; margin-bottom:22px; }
.account-section h2{ font-size:16px; font-weight:800; margin-bottom:16px; }
.owned-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:640px){ .owned-grid{ grid-template-columns:repeat(3,1fr); } }
.owned-card{ border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; position:relative; }
.owned-card .prod-visual{ aspect-ratio:4/3; }
.owned-card .lock-badge{ position:absolute; top:8px; right:8px; background:rgba(7,26,51,.7); color:var(--white); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.owned-card-body{ padding:10px; }
.owned-card-name{ font-size:12.5px; font-weight:700; color:var(--ink-900); line-height:1.3; }
.owned-status{ font-size:10.5px; font-weight:700; margin-top:4px; display:inline-block; padding:2px 8px; border-radius:var(--radius-pill); }
.owned-status.active{ background:#e2f6ea; color:#1a9a55; }
.owned-status.locked{ background:var(--gray-100); color:var(--ink-400); }
.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{ text-align:left; color:var(--ink-400); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; padding-block:10px; border-bottom:1px solid var(--gray-200); }
.data-table td{ padding-block:12px; border-bottom:1px solid var(--gray-100); color:var(--ink-600); }
.empty-row{ text-align:center; padding:40px 0; color:var(--ink-400); font-size:13.5px; }

/* ==========================================================================
   Categoría (listado + filtros)
   ========================================================================== */
.cat-layout{ display:grid; gap:28px; grid-template-columns:1fr; padding-block:32px 64px; }
@media (min-width:900px){ .cat-layout{ grid-template-columns:240px 1fr; } }
.filters{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:22px; align-self:flex-start; }
.filters h3{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-900); margin-bottom:14px; }
.filters .field{ margin-bottom:18px; }
.price-range-row{ display:flex; gap:10px; }
.filters-cats a{ display:flex; align-items:center; gap:8px; padding:9px 0; font-size:13.5px; color:var(--ink-600); }
.filters-cats a.is-active,.filters-cats a:hover{ color:var(--blue-600); font-weight:700; }
.cat-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.cat-toolbar select{ height:42px; border-radius:10px; border:1.5px solid var(--gray-200); padding-inline:12px; font-family:inherit; font-size:13.5px; }
.cat-result-count{ font-size:13.5px; color:var(--ink-600); }
.cat-empty{ text-align:center; padding:60px 0; color:var(--ink-400); }

/* ==========================================================================
   Páginas informativas / legales
   ========================================================================== */
.prose{ max-width:760px; margin-inline:auto; padding-block:44px 70px; color:var(--ink-700,var(--ink-600)); line-height:1.75; font-size:15px; }
.prose h2{ font-size:19px; font-weight:800; color:var(--ink-900); margin-top:32px; margin-bottom:12px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom:14px; }
.prose ul{ margin-bottom:14px; padding-left:20px; list-style:disc; }
.prose li{ margin-bottom:6px; }
.prose .legal-note{ margin-top:34px; padding:16px 18px; border-radius:12px; background:var(--blue-50); color:var(--ink-700,var(--ink-600)); font-size:13.5px; }

.about-grid{ display:grid; gap:34px; grid-template-columns:1fr; padding-block:44px 20px; }
@media (min-width:860px){ .about-grid{ grid-template-columns:1fr 1fr; align-items:center; } }
.about-values{ display:grid; grid-template-columns:1fr; gap:16px; padding-block:20px 60px; }
@media (min-width:640px){ .about-values{ grid-template-columns:repeat(3,1fr); } }
.value-card{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:24px; }
.value-card .trust-ic{ margin-bottom:14px; }
.value-card h3{ font-size:15px; font-weight:800; margin-bottom:6px; }
.value-card p{ font-size:13.5px; color:var(--ink-600); line-height:1.6; }

.contact-layout{ display:grid; gap:28px; grid-template-columns:1fr; padding-block:36px 70px; }
@media (min-width:860px){ .contact-layout{ grid-template-columns:1fr 1fr; } }
.contact-info-card{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:26px; }
.contact-info-card .trust-item{ margin-bottom:20px; }
.contact-form-card{ background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:26px; }
.contact-success{ text-align:center; padding:40px 10px; }
.contact-success svg{ color:#1a9a55; margin-bottom:14px; }

.faq-page-list{ max-width:760px; margin-inline:auto; background:var(--white); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:10px 26px; margin-block:40px 70px; }
.faq-page-cat{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--blue-600); padding:20px 4px 4px; }

/* Página de blog (placeholder simple) */
.blog-placeholder{ text-align:center; padding:80px 20px 100px; color:var(--ink-600); }
.blog-placeholder h1{ font-size:24px; font-weight:800; color:var(--ink-900); margin-bottom:10px; }