/*
Theme Name: DyG Importaciones y Ventas
Description: Theme a medida para la tienda WooCommerce de DyG Importaciones y Ventas, clonado de la estructura aprobada y adaptado con la identidad visual de la marca (Poppins/Inter, paleta azul-naranja-turquesa-amarillo).
Author: Nommade Digital
Version: 1.0
Text Domain: dyg
Requires PHP: 7.4
Requires at least: 6.4
*/

/* Reset universal: TODOS los elementos calculan su ancho incluyendo
   su propio padding y borde (no sumándolos aparte). Sin esto, un
   elemento con width:100% + padding termina siendo más ancho que su
   contenedor — la causa más común de overflow horizontal "fantasma"
   en mobile. Esta es la base de todo el CSS del theme. */
*, *::before, *::after{
  box-sizing:border-box;
}


  /* Paleta DyG Importaciones y Ventas (Guía de Identidad Visual):
     azul #07324A, naranja #FF5A00, turquesa #00C2A8, amarillo #FFD23F,
     fondo #F3F7FA, texto #122632. Las variables heredan los NOMBRES del
     theme original (para no tener que re-escribir cada regla del CSS)
     pero sus VALORES ya están mapeados a la marca DyG:
     --tinta = azul de marca, --calma = naranja (color de acción/CTA),
     --lavanda = turquesa (acento secundario), --coral = alerta/oferta. */
  :root{
    --bruma:#F3F7FA;
    --bruma-alta:#FBFDFE;
    --musgo:#E7EFF3;
    --tinta:#07324A;
    --tinta-suave:#45606D;
    --calma:#FF5A00;
    --calma-oscuro:#CC4A00;
    --calma-claro:#FF8A4D;
    --lavanda:#00C2A8;
    --lavanda-suave:#DFF6F2;
    --coral:#E1503D;
    --linea:#D9E4EA;
    --dyg-amarillo:#FFD23F;
    --radio-lg:28px;
    --radio-md:18px;
    --radio-sm:10px;
    --sombra: 0 20px 50px -25px rgba(7,50,74,0.35);
    --sombra-sm: 0 10px 25px -15px rgba(7,50,74,0.3);
    --topbar-h:38px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  #quienes-somos, #contacto{ scroll-margin-top:132px; }
  body{
    margin:0;
    padding-top:var(--topbar-h);
    max-width:100% !important;
    background:var(--bruma);
    color:var(--tinta);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  h1,h2,h3,h4{font-family:'Poppins', sans-serif;margin:0;color:var(--tinta);}
  p{margin:0;}
  .eyebrow{
    font-family:'Poppins', monospace;
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--calma);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:18px;height:1px;
    background:var(--calma);
    display:inline-block;
  }
  .wrap{max-width:1440px;margin:0 auto;padding:0 32px;}
  section{position:relative;}
  :focus-visible{outline:2.5px solid var(--lavanda);outline-offset:3px;border-radius:6px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- reveal ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  /* ---------- header ---------- */
  header{
    position:sticky; top:var(--topbar-h); z-index:50;
    background:rgba(238,242,239,0.86);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--linea);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px;
    max-width:1440px; margin:0 auto;
  }
  .logo{display:flex; align-items:center; gap:12px; font-family:'Poppins'; font-weight:700; font-size:19px;}
  .logo img{height:40px; width:auto; object-fit:contain;}
  .nav-links{display:flex; gap:34px;}
  .nav-links a{
    font-size:14.5px; font-weight:600; color:var(--tinta-suave);
    position:relative; padding:6px 0;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:var(--calma); transition:width .3s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-links a:hover{color:var(--tinta);}
  .nav-cta{
    display:flex; align-items:center; gap:14px;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 26px; border-radius:100px;
    font-family:'Inter'; font-weight:700; font-size:14.5px;
    cursor:pointer; border:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--calma); color:#fff; box-shadow:var(--sombra-sm);}
  .btn-primary:hover{background:var(--calma-oscuro); transform:translateY(-2px);}
  .btn-ghost{background:transparent; color:var(--tinta); border:1.5px solid var(--linea);}
  .btn-ghost:hover{border-color:var(--calma); color:var(--calma); transform:translateY(-2px);}
  .btn-whats{background:var(--lavanda); color:#fff;}
  .btn-whats:hover{background:#009984; transform:translateY(-2px);}
  .btn-sm{padding:10px 18px; font-size:13.5px;}

  .cart-link{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:100px; border:1.5px solid var(--linea);
    color:var(--tinta); flex-shrink:0; transition:border-color .25s ease, background .25s ease;
  }
  .cart-link:hover{ border-color:var(--calma); background:var(--musgo); }
  .cart-count{
    position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 4px;
    background:var(--lavanda); color:#fff; border-radius:100px;
    font-family:'Poppins'; font-size:10.5px; font-weight:500;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .cart-count:empty, .cart-count[data-count="0"]{ opacity:.35; }
  .menu-toggle{
    display:none; align-items:center; justify-content:center;
    width:44px; height:44px; flex-shrink:0;
    background:var(--bruma-alta); border:1.5px solid var(--linea); border-radius:12px;
    cursor:pointer; padding:6px; transition:border-color .2s ease, background .2s ease;
  }
  .menu-toggle:hover, .menu-toggle:focus-visible{ border-color:var(--calma); background:var(--musgo); }
  .menu-toggle span{display:block; width:20px; height:2px; background:var(--tinta); margin:4.5px auto; border-radius:2px; transition:transform .25s ease, opacity .2s ease;}

  /* ---------- hero ---------- */
  .hero{
    padding:76px 0 40px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  }
  .hero-copy h1.headline{
    font-size:clamp(38px,4.8vw,60px);
    line-height:1.05;
    font-weight:700;
    letter-spacing:-.02em;
    margin:20px 0 22px;
  }
  .hero-copy h1.headline em{
    font-style:normal; color:var(--calma);
    position:relative;
  }
  .hero-copy p.lead{
    font-size:18px; line-height:1.65; color:var(--tinta-suave); max-width:460px; margin-bottom:34px;
  }
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:38px;}
  .hero-trust{display:flex; gap:28px; flex-wrap:wrap;}
  .hero-trust-item{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--tinta-suave);}
  .hero-trust-item svg{flex-shrink:0;}

  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
  .pulso{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0;
  }
  .pulso svg{width:120%; height:120%; max-width:640px;}
  .pulso-ring{
    fill:none; stroke:var(--calma); opacity:.16;
    transform-origin:center;
    animation:respirar 4.2s ease-in-out infinite;
  }
  .pulso-ring.r2{stroke:var(--lavanda); opacity:.14; animation-delay:.5s;}
  .pulso-ring.r3{stroke:var(--calma-claro); opacity:.12; animation-delay:1s;}
  @keyframes respirar{
    0%,100%{transform:scale(.86); opacity:.10;}
    50%{transform:scale(1.04); opacity:.22;}
  }
  .hero-photo-card{
    position:relative; z-index:1;
    border-radius:var(--radio-lg);
    overflow:hidden;
    box-shadow:var(--sombra);
    aspect-ratio:4/4.7;
    max-width:420px;
    border:6px solid var(--bruma-alta);
  }
  .hero-photo-card img{width:100%; height:100%; object-fit:cover;}
  .hero-float-card{
    position:absolute; z-index:2; bottom:-18px; left:-30px;
    background:#fff; border-radius:var(--radio-md);
    padding:16px 20px; box-shadow:var(--sombra-sm);
    display:flex; align-items:center; gap:12px;
    max-width:230px;
  }
  .hero-float-card .dot{
    width:38px; height:38px; border-radius:50%; background:var(--lavanda-suave);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .hero-float-card p{font-size:13px; font-weight:600; line-height:1.4;}

  /* ---------- momentos ---------- */
  .momentos{padding:100px 0 30px;}
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    margin-bottom:52px; flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(28px,3.2vw,40px); font-weight:700; letter-spacing:-.01em; max-width:560px; margin-top:14px;}
  .section-head p{color:var(--tinta-suave); font-size:16px; max-width:380px; line-height:1.6;}

  .momentos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .momento-card{
    background:var(--bruma-alta);
    border:1px solid var(--linea);
    border-radius:var(--radio-lg);
    padding:36px 30px 32px;
    position:relative;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .momento-card:hover{transform:translateY(-8px); box-shadow:var(--sombra); border-color:transparent;}
  .momento-textura{
    position:absolute; top:0; right:0; width:100px; height:100px;
    background:radial-gradient(circle at top right, var(--musgo) 0%, transparent 70%);
    border-radius:0 var(--radio-lg) 0 100%;
  }
  .momento-icon{
    width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    margin-bottom:22px; position:relative; z-index:1;
  }
  .momento-card:nth-child(1) .momento-icon{background:var(--lavanda-suave); color:var(--lavanda);}
  .momento-card:nth-child(2) .momento-icon{background:#FFE9DC; color:var(--calma);}
  .momento-card:nth-child(3) .momento-icon{background:#FCE4E0; color:var(--coral);}
  .momento-card h3{font-size:20px; margin-bottom:12px; position:relative; z-index:1;}
  .momento-card p{color:var(--tinta-suave); font-size:14.5px; line-height:1.65; position:relative; z-index:1;}

  /* ---------- sección Contacto: encabezado como un solo bloque a la
     izquierda (antes usaba .section-head, que es un flex row pensado
     para título+texto lado a lado — eso hacía que el título pareciera
     "flotar" al centro mientras el label y el párrafo quedaban a la
     izquierda). Acá va todo apilado, en el mismo bloque. ---------- */
  .contacto-head{ max-width:600px; margin-bottom:44px; }
  .contacto-head .eyebrow{ margin-bottom:14px; }
  .contacto-head h2{
    font-family:'Poppins',sans-serif; font-size:clamp(28px,3.2vw,36px); font-weight:700;
    letter-spacing:-.01em; margin-bottom:18px;
  }
  .contacto-head p{ color:var(--tinta-suave); font-size:16px; line-height:1.65; }

  .contacto-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
  .contacto-grid .momento-card{ padding:28px 26px 26px; }

  /* ---------- divisor de respiración ---------- */
  .breath-divider{padding:70px 0; display:flex; justify-content:center;}
  .breath-divider svg{width:100%; max-width:720px; height:34px; opacity:.55;}
  .breath-path{
    stroke:var(--calma); stroke-width:1.6; fill:none;
    stroke-dasharray:6 10; stroke-linecap:round;
  }

  /* ---------- catalogo ---------- */
  .catalogo{padding:20px 0 100px;}
  .catalogo-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:52px;
  }
  .producto-card{
    background:#fff; border-radius:var(--radio-lg); overflow:hidden;
    border:1px solid var(--linea);
    box-shadow:var(--sombra-sm);
    display:flex; flex-direction:column;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .producto-card:hover{transform:translateY(-6px); box-shadow:var(--sombra);}
  .producto-img{position:relative; aspect-ratio:4/3.9; overflow:hidden; background:var(--musgo);}
  .producto-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
  .producto-card:hover .producto-img img{transform:scale(1.06);}
  .tag-nuevo{
    position:absolute; top:14px; left:14px; background:var(--tinta); color:#fff;
    font-family:'Poppins'; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    padding:6px 12px; border-radius:100px;
  }
  .tag-oferta{
    position:absolute; top:14px; left:14px; background:var(--coral); color:#fff;
    font-family:'Poppins'; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    padding:6px 12px; border-radius:100px;
  }
  .producto-info{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1;}
  .producto-info h3{font-size:18px; margin-bottom:8px;}
  .producto-beneficio{font-size:13.5px; color:var(--tinta-suave); line-height:1.55; margin-bottom:18px; flex:1;}
  .producto-precio{display:flex; align-items:baseline; gap:10px; margin-bottom:18px; font-family:'Poppins';}
  .precio-actual{font-size:19px; font-weight:600; color:var(--tinta);}
  .precio-anterior{font-size:14px; color:var(--tinta-suave); text-decoration:line-through; opacity:.6;}
  .producto-actions{display:flex; gap:10px;}
  .producto-actions .btn{flex:1; padding:11px 14px; font-size:13.5px;}
  .icon-btn{
    width:42px; height:42px; border-radius:100px; border:1.5px solid var(--linea);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:border-color .25s ease, background .25s ease;
  }
  .icon-btn:hover{border-color:var(--lavanda); background:var(--lavanda-suave);}

  /* ---------- compromisos ---------- */
  .compromisos{padding:90px 0; background:var(--calma); color:#fff; border-radius:44px; margin:0 24px;}
  .compromisos .wrap{max-width:1152px;}
  .compromisos .eyebrow{color:#FFE0CC;}
  .compromisos .eyebrow::before{background:#FFE0CC;}
  .compromisos h2{color:#fff; font-size:clamp(26px,3vw,36px); margin:14px 0 50px; max-width:520px;}
  .compromisos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
  .compromiso-item{border-top:1.5px solid rgba(255,255,255,.28); padding-top:22px;}
  .compromiso-num{font-family:'Poppins'; font-size:13px; color:#FFE0CC; letter-spacing:.1em; margin-bottom:14px; display:block;}
  .compromiso-item h3{color:#fff; font-size:19px; margin-bottom:10px;}
  .compromiso-item p{color:#FFE6D5; font-size:14.5px; line-height:1.6;}

  /* ---------- cta final ---------- */
  .cta-final{padding:120px 0; text-align:center;}
  .cta-final .eyebrow{justify-content:center;}
  .cta-final h2{font-size:clamp(32px,4.4vw,52px); max-width:680px; margin:20px auto 20px; line-height:1.12;}
  .cta-final p{max-width:520px; margin:0 auto 38px; color:var(--tinta-suave); font-size:16.5px; line-height:1.6;}
  .cta-final .hero-actions{justify-content:center;}

  /* ---------- footer (full width, sin tarjeta flotante) ---------- */
  footer{
    background:var(--tinta); color:#D7E4EA; padding:70px 0 30px;
    width:100% !important; max-width:100% !important; margin:0; border-radius:0;
    position:relative; left:0; right:0;
  }
  footer .wrap{ max-width:1440px; margin:0 auto; padding:0 40px; }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12);
  }
  .footer-brand .logo{color:#fff;}
  .footer-brand p{color:#A9C3D0; font-size:14.5px; line-height:1.7; margin-top:16px; max-width:300px;}
  .footer-col h4{font-family:'Poppins'; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#3DDCC0; margin-bottom:18px; font-weight:500;}
  .footer-col ul li{margin-bottom:12px;}
  .footer-col a{font-size:15px; color:#DCEAF0; transition:color .2s ease;}
  .footer-col a:hover{color:var(--calma-claro);}
  .footer-col p{font-size:15px; color:#DCEAF0; line-height:1.7;}
  .footer-social{display:flex; gap:12px; margin-top:18px;}
  .footer-social a{
    width:38px; height:38px; border-radius:100px; border:1.5px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease;
  }
  .footer-social a:hover{background:var(--calma); border-color:var(--calma);}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:12px;
  }
  .footer-bottom p{font-size:13.5px; color:#C9DCE4;}

  /* ---------- whatsapp flotante ---------- */
  .whats-float{
    position:fixed; bottom:26px; right:26px; z-index:60;
    width:60px; height:60px; border-radius:50%;
    background:var(--lavanda); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 34px -10px rgba(0,194,168,.6);
    transition:transform .25s ease;
  }
  .whats-float:hover{transform:scale(1.08);}
  .whats-float::before{
    content:""; position:absolute; inset:-6px; border-radius:50%;
    border:1.5px solid var(--lavanda); opacity:.5;
    animation:ondas 2.6s ease-out infinite;
  }
  @keyframes ondas{
    0%{transform:scale(1); opacity:.5;}
    100%{transform:scale(1.5); opacity:0;}
  }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr; gap:60px;}
    .hero-visual{order:-1;}
    .hero-photo-card{margin:0 auto; max-width:340px;}
    .momentos-grid, .catalogo-grid, .compromisos-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
  }
  @media (max-width:720px){
    .nav-links{display:none;}
    .menu-toggle{display:flex;}
    .wrap{padding:0 20px;}
    .momentos-grid, .catalogo-grid, .compromisos-grid, .footer-grid{grid-template-columns:1fr;}
    #quienes-somos > .wrap > div{ grid-template-columns:1fr !important; gap:32px !important; }
    #contacto > .wrap > div{ grid-template-columns:1fr !important; gap:16px !important; }
    .contacto-head{ margin-bottom:32px; }
    .contacto-head h2{ font-size:clamp(26px,8vw,32px); }
    .contacto-head p{ font-size:15px; }
    .contacto-grid .momento-card{ padding:22px 20px; width:100%; box-sizing:border-box; }
    .contacto-grid .momento-card h3{ font-size:19px; }
    .contacto-grid .momento-card .btn{ width:100%; }
    .compromisos{margin:0 12px; border-radius:28px;}
    footer .wrap{ padding:0 20px; }
    .compromisos{padding:60px 0;}
    .hero{padding:44px 0 20px;}
    .cta-final{padding:80px 0;}
  }

/* =========================================================
   Estilos WooCommerce (tienda, producto, carrito, checkout)
   ========================================================= */

/* El área de contenido principal SIEMPRE al 100% del ancho disponible:
   evita el hueco vacío que deja un layout de 2 columnas heredado
   (contenido + sidebar) ahora que la sidebar está eliminada. */
#primary, #main, #content, .content-area, .site-content{
  width:100% !important; max-width:100% !important; float:none !important; margin:0 !important;
}

.woocommerce{
  padding:40px 32px 100px;
  max-width:1440px;
  margin:0 auto;
  box-sizing:border-box;
}
.woocommerce .wrap{ max-width:1440px; margin:0 auto; padding:0; }

/* Tienda: contenedor ancho y centrado para el catálogo */
.shop-content{ max-width:1440px; margin:0 auto; padding:0 32px; box-sizing:border-box; }

/* Limpiar el espacio que dejan los elementos por defecto de WooCommerce
   (avisos vacíos, orden/resultados) antes de que empiece la grilla */
.woocommerce-notices-wrapper:empty{ display:none; margin:0; padding:0; }
.woocommerce-result-count, .woocommerce-ordering{
  font-family:'Inter',sans-serif; font-size:13.5px; color:var(--tinta-suave);
  margin:0 0 20px !important;
}
/* Resultados y orden en la misma línea, arriba de la grilla */
.woocommerce-result-count{ float:left !important; }
.woocommerce-ordering{ float:right !important; }
ul.products{ clear:both !important; }
.woocommerce-ordering select{
  border:1.5px solid var(--linea); border-radius:100px; padding:8px 14px; font-family:'Inter',sans-serif;
  background:#fff; cursor:pointer;
}

ul.products{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  gap:28px !important;
  list-style:none !important; margin:0 !important; padding:0 !important;
  float:none !important;
  width:100% !important;
}
ul.products li.product{
  background:#fff !important; border-radius:var(--radio-lg) !important; overflow:hidden !important;
  border:1px solid var(--linea) !important;
  box-shadow:var(--sombra-sm) !important;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative !important;
  float:none !important; margin:0 !important; padding:0 !important;
  flex:0 0 calc((100% - 56px) / 3) !important;
  max-width:calc((100% - 56px) / 3) !important;
  box-sizing:border-box !important;
  display:flex !important; flex-direction:column !important;
}
ul.products li.product:hover{ transform:translateY(-6px); box-shadow:var(--sombra); border-color:transparent; }
ul.products li.product .producto-card-img{
  position:relative; overflow:hidden; background:var(--musgo); display:block;
  aspect-ratio:1/1;
}
ul.products li.product .producto-card-img img{
  width:100% !important; height:100% !important; max-width:none !important;
  aspect-ratio:1/1 !important; object-fit:contain !important; object-position:center !important;
  display:block !important; transition:transform .6s ease !important;
}
ul.products li.product:hover .producto-card-img img{ transform:scale(1.06); }
ul.products li.product .producto-card-body{
  padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; gap:10px;
}
ul.products li.product .woocommerce-loop-product__title{
  font-family:'Poppins',sans-serif; font-size:18px; margin:0; color:var(--tinta); line-height:1.35;
}
ul.products li.product .woocommerce-loop-product__title a{ display:block !important; padding:0 !important; }
ul.products li.product .producto-descripcion{
  font-size:14px; color:var(--tinta-suave); line-height:1.6;
}
ul.products li.product .producto-card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:auto; padding-top:16px;
}
ul.products li.product .price{
  font-family:'Poppins',monospace; font-size:17px; margin:0; color:var(--tinta); line-height:1.2;
}
ul.products li.product .price del{ opacity:.55; font-size:13px; margin-right:8px; display:inline-block; }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; margin:0 !important;
  background:var(--calma); color:#fff; border-radius:100px; padding:11px 18px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:13px; text-decoration:none;
  transition:background .25s ease, transform .25s ease;
  flex-shrink:0;
}
ul.products li.product .button:hover{ background:var(--calma-oscuro); transform:translateY(-2px); }
ul.products li.product .button.is-added{ background:#3E9B5C; }
ul.products li.product .added_to_cart{ display:none !important; }
ul.products li.product .onsale{
  position:absolute; top:14px; left:14px; background:var(--coral); color:#fff;
  font-family:'Poppins',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; z-index:2;
}

/* Página de producto individual: el layout vive en .product-grid,
   .product-gallery-col, .product-summary-col (ver más abajo). */
.woocommerce div.product .product_title{ font-family:'Poppins',sans-serif; font-size:32px; margin-bottom:14px; }
.woocommerce div.product p.price{ font-family:'Poppins',monospace; font-size:24px; margin-bottom:24px; }
.woocommerce div.product .single_add_to_cart_button{
  background:var(--calma); color:#fff; border:none; border-radius:100px;
  padding:15px 34px; font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; cursor:pointer;
}
.woocommerce div.product .single_add_to_cart_button:hover{ background:var(--calma-oscuro); }
.woocommerce div.product .quantity input{
  border:1.5px solid var(--linea); border-radius:100px; padding:12px 16px; width:80px; font-family:'Poppins';
}
.woocommerce div.product .woocommerce-tabs{ margin-top:56px; max-width:640px; }

/* Productos relacionados: separados claramente y en carrusel (ver más abajo) */
.related.products{ margin-top:70px; padding-top:50px; border-top:1px solid var(--linea); clear:both; }
.related.products > h2{ font-family:'Poppins',sans-serif; font-size:24px; margin-bottom:32px; }

/* Carrito / checkout: tipografía consistente */
.woocommerce table.shop_table{ border-color:var(--linea); font-family:'Inter',sans-serif; }
.woocommerce #payment #place_order,
.woocommerce a.button, .woocommerce button.button{
  background:var(--calma); color:#fff; border-radius:100px; border:none;
  font-family:'Inter',sans-serif; font-weight:700; padding:13px 26px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--calma-oscuro); color:#fff; }

/* =========================================================
   CARRUSEL DE PRODUCTOS
   Se aplica al catálogo del Inicio — desliza horizontal en vez de
   grilla fija. "Productos relacionados" usa carrusel SOLO en móvil
   (ver media query); en desktop es una grilla.
   El JS (main.js) arma los botones de flecha automáticamente.
   ========================================================= */

.carousel-productos ul.products{
  display:flex !important;
  flex-wrap:nowrap !important;
  grid-template-columns:none !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  gap:24px !important;
  padding:4px 4px 12px !important;
  margin:0 !important;
}
.carousel-productos ul.products::-webkit-scrollbar{ display:none; }
.carousel-productos ul.products li.product{
  flex:0 0 auto !important;
  width:270px !important;
  max-width:270px !important;
  scroll-snap-align:start;
}

.carousel-wrap{ position:relative; }
.carousel-arrow{
  position:absolute; top:40%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:100px; border:1px solid var(--linea);
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--sombra-sm); transition:background .2s ease, border-color .2s ease;
}
.carousel-arrow:hover{ background:var(--musgo); border-color:var(--calma); }
.carousel-arrow.prev{ left:-14px; }
.carousel-arrow.next{ right:-14px; }
.carousel-arrow[disabled]{ opacity:.3; cursor:default; pointer-events:none; }

/* =========================================================
   SIN SIDEBAR — el theme no usa widgets laterales en ninguna
   plantilla. display:none quita el espacio por completo (no solo
   lo oculta) por si algún componente ajeno insiste en imprimir una.
   ========================================================= */
#secondary, .widget-area, aside.sidebar, .sidebar,
body.woocommerce #secondary, body.woocommerce-page #secondary{
  display:none !important;
  width:0 !important; height:0 !important; margin:0 !important; padding:0 !important;
}

@media (max-width:780px){
  /* header: quitar el botón "Ver tienda" (ya está en el menú hamburguesa)
     y achicar el logo para que todo entre sin superponerse */
  .nav-cta .btn-ghost{ display:none; }
  .logo{ font-size:15px; gap:8px; }
  .logo img{ height:30px; }
  .nav{ padding:12px 16px; gap:8px; }
  .nav-cta{ gap:8px; }
  .cart-link{ width:36px; height:36px; }
  .menu-toggle{ margin-left:2px; }

  ul.products li.product img{ aspect-ratio:1/1 !important; }
  .woocommerce div.product{ grid-template-columns:1fr; }
  /* Relacionados en móvil: carrusel horizontal táctil */
  .product-page .related.products ul.products{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:20px !important;
    padding:4px 4px 12px !important;
    margin:0 !important;
  }
  .product-page .related.products ul.products::-webkit-scrollbar{ display:none; }
  .product-page .related.products ul.products li.product{
    flex:0 0 220px !important;
    width:220px !important;
    max-width:220px !important;
    scroll-snap-align:start;
  }
  .carousel-productos ul.products li.product{ flex:0 0 220px !important; width:220px !important; max-width:220px !important; }
  .carousel-arrow{ display:none; }
}

/* =========================================================
   GRILLA DE PRODUCTOS EN BLOQUES (WooCommerce Blocks)
   Cubre el caso en que la página Tienda / Inicio use el bloque
   "Catálogo de productos" / "Todos los productos" en vez de la
   grilla clásica de arriba — mismas reglas visuales, otras clases.
   ========================================================= */

.wp-block-woocommerce-product-collection ul.wc-block-product-template,
.wp-block-woocommerce-all-products .wc-block-grid__products,
ul.wc-block-grid__products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:28px !important;
  list-style:none; margin:0; padding:0;
}
.wc-block-product-template__responsive-container,
li.wc-block-grid__product,
.wp-block-woocommerce-product-collection li{
  background:#fff; border-radius:var(--radio-lg); overflow:hidden;
  border:1px solid var(--linea); padding:0 !important; margin:0 !important;
  transition:transform .35s ease, box-shadow .35s ease;
}
.wc-block-product-template__responsive-container:hover,
li.wc-block-grid__product:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }

/* Forzar que CUALQUIER imagen de producto (clásica o en bloques)
   respete una proporción fija y recorte en vez de estirarse */
.woocommerce ul.products img,
.wc-block-grid__product img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.wc-block-product-template img{
  width:100% !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  height:auto !important;
}

.wc-block-components-product-title, .wc-block-grid__product-title{
  font-family:'Poppins',sans-serif !important; font-size:17px !important;
  margin:18px 24px 6px !important; color:var(--tinta) !important;
}
.wc-block-components-product-price, .wc-block-grid__product-price{
  font-family:'Poppins',monospace !important; font-size:17px !important;
  margin:0 24px 16px !important; color:var(--tinta) !important;
}
.wc-block-components-product-button__button,
.wp-block-woocommerce-product-button a{
  display:block !important; margin:0 24px 24px !important; text-align:center !important;
  background:var(--calma) !important; color:#fff !important; border-radius:100px !important;
  padding:11px 14px !important; font-family:'Inter',sans-serif !important; font-weight:700 !important;
  font-size:13.5px !important; border:none !important;
}
.wc-block-components-product-button__button:hover{ background:var(--calma-oscuro) !important; }

@media (max-width:780px){
  .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  ul.wc-block-grid__products{ grid-template-columns:repeat(2,1fr) !important; }
}

/* =========================================================
   MI CUENTA (login, registro, dashboard, pedidos, direcciones)
   ========================================================= */

body.woocommerce-account .section{ max-width:1100px !important; }

/* Layout general: navegación lateral + contenido */
.woocommerce-account .woocommerce {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  align-items:start;
}
.woocommerce-account .woocommerce-MyAccount-navigation{ grid-row:1; }
.woocommerce-account .woocommerce-MyAccount-content{ grid-row:1; min-width:0; }

/* Navegación lateral tipo tarjeta */
.woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:10px;
  background:var(--bruma-alta); border:1px solid var(--linea); border-radius:var(--radio-lg);
  display:flex; flex-direction:column; gap:2px;
}
.woocommerce-MyAccount-navigation li{ margin:0; }
.woocommerce-MyAccount-navigation li a{
  display:block; padding:12px 16px; border-radius:var(--radio-sm);
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--tinta-suave);
  text-decoration:none; transition:background .2s ease, color .2s ease;
}
.woocommerce-MyAccount-navigation li a:hover{ background:var(--musgo); color:var(--tinta); }
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--calma); color:#fff; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--coral); }

/* Título de bienvenida / mensajes */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  font-family:'Poppins',sans-serif; font-size:15px; color:var(--tinta-suave); margin-bottom:24px;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  background:var(--musgo); border:1px solid var(--linea); border-left:4px solid var(--calma);
  border-radius:var(--radio-sm); padding:16px 20px; font-family:'Inter',sans-serif; font-size:14px;
  color:var(--tinta); list-style:none; margin-bottom:24px;
}
.woocommerce-error{ border-left-color:var(--coral); }
.woocommerce-message .button, .woocommerce-info .button{
  background:var(--calma); color:#fff; border-radius:100px; padding:9px 18px; font-size:13px;
  font-weight:700; text-decoration:none; margin-left:12px;
}

/* Formularios: login, registro, editar cuenta, direcciones */
.woocommerce-account form .form-row{ margin-bottom:20px; }
.woocommerce-account form label{
  display:block; margin-bottom:8px; font-family:'Poppins',monospace; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-suave);
}
.woocommerce-account form .required{ color:var(--coral); text-decoration:none; }
.woocommerce-account form input.input-text,
.woocommerce-account form select,
.woocommerce-account form textarea{
  width:100%; border:1.5px solid var(--linea); border-radius:var(--radio-sm);
  padding:13px 16px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--tinta);
  background:#fff; transition:border-color .2s ease;
}
.woocommerce-account form input.input-text:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus{ outline:none; border-color:var(--calma); }

.woocommerce-account form .button,
.woocommerce-account form button[type="submit"]{
  background:var(--calma); color:#fff; border:none; border-radius:100px;
  padding:14px 30px; font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; transition:background .25s ease;
}
.woocommerce-account form .button:hover,
.woocommerce-account form button[type="submit"]:hover{ background:var(--calma-oscuro); }

.woocommerce-account .woocommerce-form-login__rememberme{
  display:flex; align-items:center; gap:8px; font-family:'Inter'; font-size:13.5px; color:var(--tinta-suave);
}
.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-LostPassword a{ color:var(--lavanda); font-size:13.5px; }

/* Login + Registro lado a lado */
.woocommerce-account .u-columns.col2-set{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
}
.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2{
  background:var(--bruma-alta); border:1px solid var(--linea); border-radius:var(--radio-lg); padding:32px;
}
.woocommerce-account .u-columns.col2-set h2{
  font-family:'Poppins',sans-serif; font-size:19px; margin-bottom:20px;
}

/* Dashboard: tarjeta de bienvenida */
.woocommerce-MyAccount-content mark{ background:none; color:var(--calma); font-weight:700; }

/* Tabla de pedidos */
.woocommerce-orders-table{
  width:100%; border-collapse:collapse; font-family:'Inter',sans-serif; font-size:14px;
}
.woocommerce-orders-table thead th{
  text-align:left; padding:14px 16px; font-family:'Poppins',monospace; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); border-bottom:1.5px solid var(--linea);
}
.woocommerce-orders-table tbody td{
  padding:16px; border-bottom:1px solid var(--linea);
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark{
  font-family:'Poppins',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; background:var(--musgo); color:var(--calma-oscuro); font-style:normal;
}
.woocommerce-orders-table .button{
  background:transparent; color:var(--calma); border:1.5px solid var(--calma); border-radius:100px;
  padding:8px 16px; font-size:12.5px; font-weight:700;
}
.woocommerce-orders-table .button:hover{ background:var(--calma); color:#fff; }

/* Detalle de pedido individual */
.woocommerce-order-details, .woocommerce-customer-details{
  background:var(--bruma-alta); border:1px solid var(--linea); border-radius:var(--radio-lg);
  padding:28px; margin-bottom:28px;
}
.woocommerce-order-details table, .woocommerce-table--order-details{
  width:100%; border-collapse:collapse; font-family:'Inter'; font-size:14px;
}
.woocommerce-table--order-details th, .woocommerce-table--order-details td{
  padding:12px 8px; border-bottom:1px solid var(--linea); text-align:left;
}

/* Direcciones */
.woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.woocommerce-Address{
  background:var(--bruma-alta); border:1px solid var(--linea); border-radius:var(--radio-lg); padding:26px;
}
.woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.woocommerce-Address-title h3{ font-family:'Poppins',sans-serif; font-size:16px; }
.woocommerce-Address-title .edit{
  font-family:'Poppins',monospace; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--calma); text-decoration:none;
}
.woocommerce-Address address{ font-style:normal; font-size:14px; line-height:1.7; color:var(--tinta-suave); }

@media (max-width:780px){
  .woocommerce-account .woocommerce{ grid-template-columns:1fr; }
  .woocommerce-account .u-columns.col2-set{ grid-template-columns:1fr; }
  .woocommerce-Addresses{ grid-template-columns:1fr; }
  .woocommerce-orders-table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* =========================================================
   TIENDA — mejoras de experiencia de usuario
   ========================================================= */

/* Encabezado de la tienda (archive-product) */
/* La cabecera de Tienda debe desplazarse normalmente con la página,
   NUNCA quedar pegada (sticky/fixed) mientras se hace scroll. */
.shop-hero{
  margin-bottom:44px;
  position:static !important;
  top:auto !important;
  bottom:auto !important;
  z-index:auto !important;
}
.shop-hero-title{
  font-family:'Poppins',sans-serif;
  font-size:clamp(30px,4vw,44px);
  font-weight:700;
  letter-spacing:-.01em;
  margin:14px 0 16px;
  max-width:640px;
}
.shop-hero-intro{
  font-size:16px; line-height:1.7; color:var(--tinta-suave); max-width:560px;
}
.shop-hero-badges{
  display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:26px;
}
.shop-hero-badges li{
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--tinta-suave);
}
.shop-hero-badges svg{ flex-shrink:0; color:var(--calma); }

/* Chips de categorías */
.shop-cats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.shop-cat-chip{
  display:inline-flex; align-items:center;
  padding:9px 18px; border-radius:100px;
  border:1.5px solid var(--linea); background:#fff;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px; color:var(--tinta-suave);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.shop-cat-chip:hover{ border-color:var(--calma); color:var(--calma); }
.shop-cat-chip.is-active{ background:var(--calma); border-color:var(--calma); color:#fff; }

/* Badges de confianza en la ficha de producto */
.product-trust{
  list-style:none; margin:28px 0 0; padding:20px 0 0; border-top:1px solid var(--linea);
  display:flex; flex-direction:column; gap:11px;
}
.product-trust li{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:600; color:var(--tinta-suave);
}
.product-trust li svg{ flex-shrink:0; color:var(--calma); }

/* Toast al agregar al carrito */
.cart-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  z-index:90;
  background:var(--tinta); color:#fff;
  border-radius:100px; padding:13px 22px;
  display:flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  box-shadow:0 18px 40px -12px rgba(7,50,74,.45);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  max-width:calc(100vw - 40px);
}
.cart-toast.is-show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.cart-toast .cart-toast-ok{
  width:22px; height:22px; border-radius:50%; background:var(--calma);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cart-toast a{ color:var(--calma-claro); font-weight:700; text-decoration:underline; }

@media (max-width:480px){
  ul.products li.product .producto-card-footer{ flex-direction:column; align-items:stretch; }
  ul.products li.product .button{ width:100%; }
  .shop-hero-badges{ gap:10px 16px; }
}

/* =========================================================
   PÁGINA DE PRODUCTO — rediseño orientado a conversión
   ========================================================= */

/* Contenedor ancho en desktop: aprovecha el viewport sin
   depender de la barra de administración de WP. */
body.single-product{ max-width:none !important; margin:0 !important; }
body.single-product #primary,
body.single-product #main{ padding:0 !important; }
body.single-product .product-page{ display:block !important; }
/* El contenedor `.woocommerce` de WooCommerce añade su propio padding
   (40px 32px 100px) que DUPLICA el de .product-page y encoge la galería.
   En la ficha se anula para que la foto llegue al ancho real de 1320px. */
body.single-product .woocommerce{ max-width:none !important; padding:0 !important; }

.product-page{
  max-width:1440px;
  margin:0 auto;
  padding:46px 32px 90px;
  box-sizing:border-box;
}

/* Layout principal: galería + resumen como una sola composición
   compacta y centrada (no estirada a lo ancho del contenedor).
   Flexbox (no Grid): en este hosting, CSS Grid con columnas en fr
   deja tracks vacíos de forma intermitente — ya se corrigió antes
   en la grilla de productos de la tienda con el mismo cambio. */
.product-grid{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:48px !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
.product-gallery-col{
  min-width:0 !important; box-sizing:border-box !important;
  flex:0 0 58% !important;
  max-width:58% !important;
}
.product-summary-col{
  min-width:0 !important; padding-top:4px; box-sizing:border-box !important;
  flex:0 0 calc(42% - 48px) !important;
  max-width:calc(42% - 48px) !important;
}

/* Resetear el layout clásico de WooCommerce (float + width:48%) que
   el core le aplica a .images/.summary con más especificidad que
   nuestras reglas anteriores — causa real del hueco enorme. La
   plantilla nativa de WooCommerce agrega la clase "images" al MISMO
   div que .woocommerce-product-gallery (no es un wrapper aparte), y
   nuestro propio template pone class="summary" en el resumen — ambos
   heredan ".woocommerce div.product div.images/.summary{width:48%;
   float:left/right;}" del CSS por defecto del plugin. Scoped solo a
   la ficha de producto individual, no toca tienda/categorías/carrito.
---------------------------------------------------------- */
.single-product div.product div.images,
.single-product div.product div.summary,
.product-gallery-col .woocommerce-product-gallery.images,
.product-summary-col div.summary{
  float:none !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  clear:none !important;
}

/* ---------- galería: la foto es la protagonista ---------- */
.product-gallery-col .woocommerce-product-gallery{
  position:relative; /* referencia para el badge ¡Oferta! — sin esto,
    .onsale se posiciona respecto a la página entera y aparece pegado
    al borde superior izquierdo del viewport, debajo del header. */
  border-radius:var(--radio-lg);
  overflow:hidden;
  border:1px solid var(--linea);
  background:#fff;
  width:100%;
}
/* Badge ¡Oferta!: mismo lenguaje visual que las tarjetas de la tienda
   (pill pequeña, coral de marca) — WooCommerce lo imprime solo cuando
   el producto realmente está en oferta, esto solo lo reposiciona/viste. */
.product-gallery-col .onsale{
  position:absolute !important; top:16px !important; left:16px !important;
  margin:0 !important; z-index:5;
  background:var(--coral); color:#fff;
  font-family:'Poppins',monospace; font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px;
  min-height:0; min-width:0; line-height:1.4;
}
/* Fuerza el ancho completo de la imagen principal dentro del slider
   nativo de WooCommerce (flexslider): sin esto el wrapper puede
   dejar la foto a un ancho menor al de la columna, con espacio
   muerto alrededor. */
.product-gallery-col .flex-viewport,
.product-gallery-col .woocommerce-product-gallery__wrapper,
.product-gallery-col .woocommerce-product-gallery__image,
.product-gallery-col .woocommerce-product-gallery__image a{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
}
.product-gallery-col .woocommerce-product-gallery__image{
  background:#fff;
}
.product-gallery-col .woocommerce-product-gallery__image img,
.product-gallery-col .woocommerce-product-gallery img{
  width:100% !important; height:auto !important; max-width:none !important; max-height:none !important;
  object-fit:contain !important; /* nunca "cover": las fotos traen texto/infografía, no se pueden recortar */
  object-position:center;
  display:block !important;
}
.product-gallery-col .woocommerce-product-gallery__trigger{
  top:16px !important; right:16px !important;
}

/* Miniaturas: más presencia, gap uniforme, scroll horizontal si hay
   muchas (nunca se comprimen ni generan overflow de toda la página) */
.product-gallery-col .flex-control-thumbs{
  display:flex !important; flex-wrap:nowrap !important;
  overflow-x:auto !important;
  gap:12px !important;
  padding:12px 2px !important;
  margin:10px 0 0 !important;
  list-style:none !important;
  scrollbar-width:thin;
}
.product-gallery-col .flex-control-thumbs li{ margin:0 !important; padding:0 !important; width:auto !important; flex-shrink:0; }
.product-gallery-col .flex-control-thumbs img{
  width:84px !important; height:84px !important;
  object-fit:contain !important;
  background:#fff;
  border-radius:var(--radio-sm);
  border:2px solid var(--linea);
  opacity:.6;
  cursor:pointer;
  transition:opacity .2s ease, border-color .2s ease;
}
.product-gallery-col .flex-control-thumbs img:hover{ opacity:1; }
.product-gallery-col .flex-control-thumbs img.flex-active{ opacity:1; border-color:var(--calma); }

/* ---------- jerarquía de la columna de información ---------- */
.producto-categoria{
  display:inline-flex; align-items:center;
  font-family:'Poppins',monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--calma); background:var(--musgo);
  padding:6px 14px; border-radius:100px;
  margin-bottom:16px;
}
.producto-categoria a{ color:inherit; }
.producto-categoria a:hover{ text-decoration:underline; }

.product-summary-col .product_title{
  font-family:'Poppins',sans-serif;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.015em;
  margin:0 0 14px;
  max-width:640px;
}

.product-summary-col .woocommerce-product-rating{ margin-bottom:6px; }
.product-summary-col .woocommerce-product-rating .star-rating{ color:var(--lavanda); }
.product-summary-col .woocommerce-product-rating .woocommerce-review-link{
  font-size:13px; color:var(--tinta-suave); text-decoration:underline;
}

.product-summary-col p.price{
  font-family:'Poppins',monospace;
  font-size:clamp(24px,2.6vw,32px);
  font-weight:600;
  color:var(--tinta);
  margin:0 0 18px;
}
.product-summary-col p.price del{
  font-size:18px; opacity:.55; margin-right:10px; color:var(--tinta-suave);
  font-weight:400;
}
.product-summary-col p.price ins{ text-decoration:none; color:var(--coral); }

.product-summary-col .woocommerce-product-details__short-description{
  font-size:16px; line-height:1.7; color:var(--tinta-suave);
  margin:0 0 20px; max-width:560px;
}
.product-summary-col .woocommerce-product-details__short-description p{ margin:0 0 10px; }
.product-summary-col .woocommerce-product-details__short-description p:last-child{ margin-bottom:0; }

/* ---------- stock ---------- */
.stock-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  padding:9px 16px; border-radius:100px;
  margin:0 0 22px;
}
.stock-badge .stock-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; flex-shrink:0; }
.stock-badge.stock-disponible{ color:#1F7A45; background:#E4F5EA; }
.stock-badge.stock-pocas{ color:#A86600; background:#FFF3DF; }
.stock-badge.stock-reserva{ color:#00695C; background:var(--lavanda-suave); }
.stock-badge.stock-agotado{ color:#B3392E; background:#FBE9E7; }

/* ---------- cantidad + CTA integrados ---------- */
.product-summary-col form.cart{
  display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;
  margin:0 0 14px;
}
.product-summary-col form.cart .quantity{
  display:inline-flex; align-items:center;
  border:1.5px solid var(--linea); border-radius:100px; overflow:hidden; background:#fff;
}
.product-summary-col form.cart .qty-step{
  width:48px; height:52px; border:none; background:transparent; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:20px; line-height:1; color:var(--tinta);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.product-summary-col form.cart .qty-step:hover{ background:var(--musgo); color:var(--calma); }
.product-summary-col form.cart .qty-step:active{ background:var(--calma-claro); color:#fff; }
.product-summary-col form.cart .qty-step:focus-visible{ outline:2.5px solid var(--lavanda); outline-offset:-2px; border-radius:6px; }
.product-summary-col form.cart .quantity input.qty{
  width:64px; height:52px; border:none;
  border-left:1px solid var(--linea); border-right:1px solid var(--linea);
  text-align:center;
  font-family:'Poppins',monospace; font-size:16px; font-weight:600; color:var(--tinta);
  padding:0;
  -moz-appearance:textfield; appearance:textfield;
}
.product-summary-col form.cart .quantity input.qty::-webkit-outer-spin-button,
.product-summary-col form.cart .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.product-summary-col form.cart .single_add_to_cart_button{
  flex:1 1 250px;
  background:var(--calma); color:#fff;
  border:none; border-radius:100px;
  padding:16px 34px;
  font-family:'Inter',sans-serif; font-weight:800; font-size:15.5px;
  cursor:pointer; letter-spacing:.01em;
  box-shadow:var(--sombra-sm);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.product-summary-col form.cart .single_add_to_cart_button:hover{ background:var(--calma-oscuro); transform:translateY(-2px); }
.product-summary-col form.cart .single_add_to_cart_button:focus-visible{ outline:2.5px solid var(--lavanda); outline-offset:3px; border-radius:100px; }
.product-summary-col form.cart .single_add_to_cart_button:active{ transform:translateY(0); }
.product-summary-col form.cart .single_add_to_cart_button.disabled{ opacity:.55; cursor:not-allowed; }

/* Productos variables: conservar el layout nativo de variaciones */
.product-summary-col form.cart.variations_form{ display:block; }
.product-summary-col form.cart.variations_form table.variations{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.product-summary-col form.cart.variations_form td{ padding:8px 0; }
.product-summary-col form.cart.variations_form td.label{ padding-right:16px; }
.product-summary-col form.cart.variations_form .variations select{
  width:100%; border:1.5px solid var(--linea); border-radius:var(--radio-sm);
  padding:12px 16px; font-family:'Inter',sans-serif; font-size:14.5px; background:#fff; color:var(--tinta);
}
.product-summary-col form.cart.variations_form .reset_variations{ font-size:13px; color:var(--lavanda); }
.product-summary-col form.cart.variations_form .woocommerce-variation-add-to-cart{
  display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;
}
.product-summary-col form.cart.variations_form .woocommerce-variation-price{ flex-basis:100%; }
.product-summary-col form.cart.variations_form .woocommerce-variation-price .price{
  font-family:'Poppins',monospace; font-size:22px; font-weight:600; color:var(--tinta); margin:0;
}
.product-summary-col form.cart.variations_form .woocommerce-variation-availability{ flex-basis:100%; margin:0 0 4px; }
.product-summary-col form.cart.variations_form .woocommerce-variation-availability .stock{ margin:0; font-size:14px; font-weight:700; color:#1F7A45; }

/* ---------- información de confianza ---------- */
.product-trust{
  list-style:none; margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--linea);
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px 18px;
}
.product-trust li{
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--tinta-suave); line-height:1.45;
}
.product-trust li svg{ flex-shrink:0; color:var(--calma); }
.product-trust a{ color:inherit; }
.product-trust a:hover{ color:var(--calma); }

/* ---------- SKU / categorías (secundario y discreto) ---------- */
.product-summary-col .product_meta{
  margin-top:22px; padding-top:18px; border-top:1px dashed var(--linea);
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-family:'Poppins',monospace; font-size:12px; letter-spacing:.04em;
  color:var(--tinta-suave);
}
.product-summary-col .product_meta a{ color:var(--calma); font-weight:600; }
.product-summary-col .product_meta a:hover{ text-decoration:underline; }
.product-summary-col .product_meta .sku{ font-weight:600; color:var(--tinta); }

/* Respaldo: por si el SKU se imprime en algún lugar que no pase por
   woocommerce/single-product/meta.php (no borra el dato, solo lo oculta
   visualmente — sigue existiendo en WooCommerce). */
.sku_wrapper{ display:none !important; }

/* ---------- zona inferior: descripción, detalles, reviews ---------- */
.product-lower{ margin-top:48px; }
.product-lower-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:64px !important;
  align-items:flex-start !important;
}
.product-lower-grid > *:first-child{ flex:0 0 calc(60% - 32px) !important; max-width:calc(60% - 32px) !important; min-width:0; box-sizing:border-box; }
.product-lower-grid > *:nth-child(2){ flex:0 0 calc(40% - 32px) !important; max-width:calc(40% - 32px) !important; min-width:0; box-sizing:border-box; }
.product-lower-grid--solo > *{ flex:0 0 100% !important; max-width:760px !important; }

.product-descripcion h2,
.product-info-adicional h2,
.product-valoraciones .woocommerce-Reviews-title{
  font-family:'Poppins',sans-serif;
  font-size:26px; margin:14px 0 22px;
}
.product-descripcion-content{
  font-size:16.5px; line-height:1.75; color:var(--tinta-suave);
}
.product-descripcion-content p{ margin:0 0 18px; }
.product-descripcion-content p:last-child{ margin-bottom:0; }
.product-descripcion-content ul,
.product-descripcion-content ol{ margin:0 0 18px; padding-left:22px; list-style:disc; }
.product-descripcion-content ol{ list-style:decimal; }
.product-descripcion-content li{ margin-bottom:8px; }
.product-descripcion-content h3,
.product-descripcion-content h4{ font-size:19px; margin:26px 0 12px; color:var(--tinta); }
.product-descripcion-content img{ border-radius:var(--radio-md); }
.product-descripcion-content a{ color:var(--calma); text-decoration:underline; }

/* Información adicional (atributos reales de WooCommerce) */
.product-info-adicional .woocommerce-product-attributes{
  width:100%; border-collapse:collapse;
  font-family:'Inter',sans-serif; font-size:14px;
  background:var(--bruma-alta); border:1px solid var(--linea);
  border-radius:var(--radio-lg); overflow:hidden;
}
.product-info-adicional .woocommerce-product-attributes th,
.product-info-adicional .woocommerce-product-attributes td{
  padding:14px 18px; text-align:left; border-bottom:1px solid var(--linea);
  vertical-align:top;
}
.product-info-adicional .woocommerce-product-attributes tr:last-child th,
.product-info-adicional .woocommerce-product-attributes tr:last-child td{ border-bottom:none; }
.product-info-adicional .woocommerce-product-attributes th{
  font-family:'Poppins',monospace; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave); width:44%;
}
.product-info-adicional .woocommerce-product-attributes td{ color:var(--tinta); font-weight:600; }
.product-info-adicional .woocommerce-product-attributes td p{ margin:0; }

/* Valoraciones */
.product-valoraciones{ margin-top:56px; }
.product-valoraciones .woocommerce-Reviews{
  background:var(--bruma-alta);
  border:1px solid var(--linea);
  border-radius:var(--radio-lg);
  padding:34px 36px 30px;
}
.product-valoraciones .woocommerce-Reviews-title{ font-size:22px !important; }
.product-valoraciones #comments{ margin-bottom:26px; }
.product-valoraciones .commentlist{ list-style:none; margin:0; padding:0; }
.product-valoraciones .commentlist li.comment{
  padding:20px 0; border-bottom:1px solid var(--linea);
  display:grid; grid-template-columns:46px 1fr; gap:0 16px;
}
.product-valoraciones .commentlist li.comment:last-child{ border-bottom:none; }
.product-valoraciones .commentlist .avatar{ border-radius:50%; }
.product-valoraciones .commentlist .meta{ font-size:13px; color:var(--tinta-suave); }
.product-valoraciones .commentlist .description p{ margin:10px 0 0; font-size:14.5px; line-height:1.65; color:var(--tinta); }
.product-valoraciones .star-rating{ color:var(--lavanda); }
.product-valoraciones .comment-form-rating .stars{ color:var(--lavanda); }
.product-valoraciones #review_form_wrapper{ border-top:1px solid var(--linea); padding-top:26px; }
.product-valoraciones #review_form .comment-form p{ margin:0 0 16px; }
.product-valoraciones #review_form label{
  display:block; margin-bottom:8px;
  font-family:'Poppins',monospace; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.product-valoraciones #review_form input[type="text"],
.product-valoraciones #review_form input[type="email"],
.product-valoraciones #review_form textarea{
  width:100%; border:1.5px solid var(--linea); border-radius:var(--radio-sm);
  padding:13px 16px; font-family:'Inter',sans-serif; font-size:14.5px;
  background:#fff; color:var(--tinta);
}
.product-valoraciones #review_form textarea{ min-height:110px; }
.product-valoraciones #review_form .submit{
  background:var(--calma); color:#fff; border:none; border-radius:100px;
  padding:13px 30px; font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; transition:background .25s ease;
}
.product-valoraciones #review_form .submit:hover{ background:var(--calma-oscuro); }

/* ---------- productos relacionados: grilla en desktop ---------- */
.product-page .related.products{
  margin-top:56px; padding-top:48px; border-top:1px solid var(--linea); clear:both;
}
.product-page .related.products > h2{ font-size:28px; margin-bottom:34px; }
@media (min-width:781px){
  .product-page .related.products ul.products{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:28px !important;
    overflow:visible !important;
  }
  .product-page .related.products ul.products li.product{
    flex:0 0 calc((100% - 84px) / 4) !important;
    max-width:calc((100% - 84px) / 4) !important;
  }
}
/* =========================================================
   Páginas legales: Política de Devoluciones y de Garantía
   ========================================================= */
.policy-page{ padding:80px 32px 110px; }
.policy-wrap{ max-width:860px; margin:0 auto; }
.policy-wrap h1{
  font-family:'Poppins',sans-serif;
  font-size:clamp(30px,4vw,46px);
  line-height:1.15; margin:18px 0 30px;
}
.policy-intro{
  font-size:17px; line-height:1.75; color:var(--tinta-suave);
  margin-bottom:46px; max-width:720px;
}
.policy-seccion{ margin-bottom:40px; }
.policy-seccion h2{
  font-family:'Poppins',sans-serif; font-size:21px; margin-bottom:14px;
  padding-left:16px; border-left:3px solid var(--calma);
}
.policy-seccion p{
  font-size:16px; line-height:1.75; color:var(--tinta-suave);
  margin-bottom:10px;
}
.policy-seccion ul{ list-style:none; margin:0; padding:0; }
.policy-seccion ul li{
  position:relative; padding-left:24px; margin-bottom:10px;
  font-size:16px; line-height:1.7; color:var(--tinta-suave);
}
.policy-seccion ul li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:50%; background:var(--calma);
}
.policy-seccion ol{ margin:0; padding-left:22px; }
.policy-seccion ol li{
  margin-bottom:10px; font-size:16px; line-height:1.7; color:var(--tinta-suave);
}
.policy-contacto{
  background:var(--bruma-alta); border:1px solid var(--linea);
  border-radius:var(--radio-lg); padding:28px 32px; margin-top:52px;
}
.policy-contacto h2{ font-family:'Poppins',sans-serif; font-size:20px; margin-bottom:12px; }
.policy-contacto p{ font-size:15px; line-height:1.8; color:var(--tinta-suave); }
@media (max-width:780px){
  .policy-page{ padding:48px 20px 80px; }
  .policy-seccion{ margin-bottom:32px; }
  .policy-contacto{ padding:22px 20px; }
}

/* ---------- header: refinamientos de espaciado y legibilidad (desktop) ---------- */
@media (min-width:781px){
  .nav{ gap:24px; }
  .logo{ font-size:21px; }
  .logo img{ height:44px; }
  .nav-links{ gap:40px; }
  .nav-cta{ gap:16px; }
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .product-grid{ gap:32px !important; }
  .product-summary-col{ flex-basis:calc(42% - 32px) !important; max-width:calc(42% - 32px) !important; }
}
@media (min-width:781px) and (max-width:1100px){
  .product-page .related.products ul.products li.product{
    flex:0 0 calc((100% - 56px) / 3) !important;
    max-width:calc((100% - 56px) / 3) !important;
  }
}@media (max-width:1024px){
  .product-grid{ gap:32px !important; }
  .product-lower-grid{ grid-template-columns:1fr; gap:48px; }
  .product-trust{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:780px){
  .product-page{ padding:24px 20px 70px; }
  .product-grid{ flex-direction:column !important; gap:28px !important; }
  .product-gallery-col, .product-summary-col{ flex-basis:100% !important; max-width:100% !important; min-width:0; }
  .product-summary-col{ padding-top:0; }
  .product-lower{ margin-top:40px; }
  .product-lower-grid{ gap:44px; }
  .product-trust{ grid-template-columns:1fr; gap:12px; }
  .product-summary-col form.cart .single_add_to_cart_button{ flex:1 1 100%; padding:16px 24px; }
  .product-summary-col .product_title{ font-size:30px; }
  .product-valoraciones .woocommerce-Reviews{ padding:24px 20px; }
  .product-page .related.products{ margin-top:56px; }
}
@media (max-width:480px){
  .product-summary-col form.cart .quantity{ flex:0 0 100%; justify-content:space-between; }
  .product-summary-col form.cart .quantity input.qty{ flex:1; }
  .product-summary-col p.price{ font-size:26px; }
}

/* =========================================================
   MEJORAS MÓVILES — ergonomía táctil y accesibilidad
   ========================================================= */
html{ -webkit-tap-highlight-color:transparent; }
a, button, input[type="submit"], input[type="button"], .btn, .shop-cat-chip{ touch-action:manipulation; }

/* Header pegado: respeta el notch de los iPhone */
header{ padding-top:env(safe-area-inset-top); }

/* Hero en pantallas pequeñas: botones a ancho completo, mejor lectura */
@media (max-width:720px){
  .hero{padding:36px 0 20px;}
  .section-head{ margin-bottom:34px; gap:14px; }
  .section-head p{ font-size:15px; }
  .momento-card{ padding:26px 20px 24px; }
  .momentos{padding:70px 0 20px;}
  .catalogo{padding:70px 0 40px;}
}
@media (max-width:480px){
  .hero-actions{ flex-direction:column; align-items:stretch; margin-bottom:30px; }
  .hero-actions .btn{ width:100%; padding:16px 24px; font-size:15.5px; }
  .hero-copy h1.headline{ font-size:clamp(30px,9vw,36px); line-height:1.12; }
  .hero-copy p.lead{ font-size:16px; margin-bottom:26px; }
  .hero-trust{ gap:12px 18px; font-size:12.5px; }
  .hero-photo-card{ border-width:4px; border-radius:22px; }
  .hero-float-card{ left:8px; bottom:-16px; max-width:210px; padding:12px 16px; }
  .hero-float-card .dot{ width:34px; height:34px; }
  .cta-final h2{ font-size:30px; }
}

/* Tienda en móvil: menos padding, tarjetas compactas y chips deslizables */
@media (max-width:780px){
  .woocommerce{ padding:24px 16px 70px; }
  .shop-content{ padding:0 16px; }
  .shop-hero{ margin-bottom:22px; }
  .shop-hero-title{ font-size:clamp(24px,7vw,28px); margin:10px 0 10px; }
  .shop-hero-intro{ font-size:14.5px; line-height:1.55; }
  .shop-hero-badges{ margin-top:16px; }
  .shop-cats{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin:0 0 30px; padding:0 0 6px; gap:8px;
  }
  .shop-cats::-webkit-scrollbar{ display:none; }
  .shop-cat-chip{ flex-shrink:0; white-space:nowrap; padding:10px 16px; font-size:13px; }
  ul.products li.product .producto-card-body{ padding:14px 14px 16px; gap:6px; }
  ul.products li.product .woocommerce-loop-product__title{ font-size:15px; }
  ul.products li.product .producto-descripcion{ font-size:12.5px; line-height:1.5; }
  ul.products li.product .producto-card-footer{ flex-direction:column; align-items:stretch; gap:10px; padding-top:10px; }
  ul.products li.product .button{ width:100%; }
  ul.products li.product .price{ font-size:15.5px; }
}

/* Catálogo del Inicio: carrusel táctil con scroll-snap */
@media (max-width:780px){
  .carousel-productos ul.products{
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:4px 4px 12px !important;
    margin:0 -4px !important;
  }
  .carousel-productos ul.products::-webkit-scrollbar{ display:none; }
  .carousel-productos ul.products li.product{ scroll-snap-align:start; }
}

/* Ficha de producto en móvil: miniaturas y CTA cómodos */
@media (max-width:780px){
  .product-gallery-col .flex-control-thumbs img{ width:72px !important; height:72px !important; }
  .product-summary-col form.cart .qty-step{ height:54px; }
  .product-summary-col form.cart .quantity input.qty{ height:54px; }
  .product-summary-col form.cart .single_add_to_cart_button{ min-height:54px; }
  .product-summary-col .producto-categoria{ font-size:11px; }
}

/* Tarjetas muy angostas: relacionados y carrusel de Home ajustan su
   ancho fijo para no amontonar (Tienda/categorías ya son 1 columna
   fija desde 768px hacia abajo, ver bloque scoped más adelante) */
@media (max-width:360px){
  .product-page .related.products ul.products li.product{ flex:0 0 200px !important; width:200px !important; max-width:200px !important; }
  .carousel-productos ul.products li.product{ flex:0 0 200px !important; width:200px !important; max-width:200px !important; }
}

/* Footer, WhatsApp y toast: respetan la barra inferior de iOS */
@media (max-width:720px){
  footer{ padding-bottom:calc(44px + env(safe-area-inset-bottom)); }
  footer .wrap{ padding:0 20px; }
  .footer-grid{ gap:30px; }
  .whats-float{ bottom:calc(16px + env(safe-area-inset-bottom)); right:16px; width:50px; height:50px; }
  .cart-toast{ bottom:calc(20px + env(safe-area-inset-bottom)); left:16px; right:16px; transform:translate(0,20px); max-width:none; justify-content:center; }
  .cart-toast.is-show{ transform:translate(0,0); }
}

/* =========================================================
   BARRA DE ANUNCIOS (marquee) — siempre fija arriba del header
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:var(--topbar-h);
  display:flex; align-items:center;
  background:var(--calma-oscuro); color:#fff;
  overflow:hidden;
  z-index:60;
}
body.admin-bar .topbar{ top:32px; }
body.admin-bar{ padding-top:calc(var(--topbar-h) + 32px); }
@media (max-width:782px){
  body.admin-bar .topbar{ top:46px; }
  body.admin-bar{ padding-top:calc(var(--topbar-h) + 46px); }
}

.topbar-track{
  display:flex; width:max-content; align-items:center;
  animation:topbar-scroll 32s linear infinite;
  will-change:transform;
}
.topbar:hover .topbar-track{ animation-play-state:paused; }
.topbar-msg{
  display:flex; align-items:center; flex-shrink:0;
  font-family:'Inter',sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  white-space:nowrap;
}
.topbar-msg strong{
  font-family:'Poppins',monospace;
  font-weight:500; letter-spacing:.08em;
  color:#FFE3D6;
  margin-left:4px;
}
.topbar-sep{ margin:0 24px; color:rgba(255,255,255,.55); }

@keyframes topbar-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Accesibilidad: con "reducir movimiento" activado, la regla global
   (arriba, `animation-duration:.001ms`) dejaría el ticker congelado a
   mitad de camino mostrando el texto duplicado cortado. Para el topbar
   se corrige puntualmente: se detiene del todo y se oculta la copia
   duplicada, dejando un solo bloque de texto estático y legible. */
@media (prefers-reduced-motion: reduce){
  .topbar-track{ animation:none !important; transform:none !important; }
  .topbar-msg[aria-hidden="true"]{ display:none !important; }
  .topbar{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (prefers-reduced-motion: reduce){
  .shop-hero-badges{ animation:none !important; transform:none !important; }
  .shop-hero-badges .is-duplicate{ display:none !important; }
  .shop-hero-badges-scroll{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
}

/* =========================================================
   TIENDA — beneficios visuales y panel lateral sticky
   ========================================================= */

/* Beneficios bajo la intro: tarjetas suaves con icono y detalle */
.shop-hero-badges{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;
}
.shop-hero-badges .is-duplicate{ display:none; }
.shop-benefit{
  display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-md);
  padding:14px 18px;
}
.shop-benefit-icon{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--musgo); color:var(--calma); border-radius:100px;
}
.shop-benefit-text{ display:flex; flex-direction:column; gap:2px; }
.shop-benefit-text strong{ font-size:13.5px; font-weight:700; color:var(--tinta); line-height:1.3; }
.shop-benefit-text small{ font-size:12px; color:var(--tinta-suave); line-height:1.4; }

/* Layout: catálogo a la izquierda, panel de ayuda sticky a la derecha */
.shop-layout{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:48px !important;
  align-items:flex-start !important;
}
.shop-main{ min-width:0; flex:1 1 0; }
.shop-side{
  flex:0 0 300px; max-width:300px;
  position:sticky; top:calc(var(--topbar-h) + 98px);
}
.shop-side-card{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-lg);
  padding:26px 24px; box-shadow:var(--sombra-sm);
}
.shop-side-eyebrow{
  font-family:'Poppins',monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--calma);
}
.shop-side-card h2{ font-size:19px; margin:8px 0 8px; }
.shop-side-card > p{ font-size:13.5px; line-height:1.65; color:var(--tinta-suave); margin-bottom:18px; }
.shop-side-card .btn{ width:100%; }
.shop-side-divider{ height:1px; background:var(--linea); margin:22px 0; }
.shop-side-trust{ display:flex; flex-direction:column; gap:11px; }
.shop-side-trust li{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--tinta-suave); }
.shop-side-trust svg{ flex-shrink:0; }
.shop-side-code{
  margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--lavanda-suave); border:1px dashed var(--lavanda);
  border-radius:var(--radio-sm); padding:10px 14px;
}
.shop-side-code span{ font-size:11.5px; font-weight:600; color:var(--tinta-suave); }
.shop-side-code strong{ font-family:'Poppins',monospace; font-size:13px; letter-spacing:.08em; color:var(--lavanda); }

/* Móvil/tablet: el panel pasa sobre el catálogo (no sticky) y
   los beneficios se deslizan en horizontal */
@media (max-width:980px){
  .shop-layout{ flex-direction:column !important; gap:36px !important; }
  .shop-main{ width:100% !important; max-width:100% !important; }
  .shop-side{
    position:static !important; top:auto !important;
    flex-basis:auto !important; width:100% !important; max-width:100% !important;
  }
  .shop-side-card{ padding:22px 20px; }
}
@media (max-width:780px){
  .shop-side-card{ padding:16px 18px; }
  .shop-side-card h2{ font-size:16.5px; margin:6px 0 6px; }
  .shop-side-card p{ font-size:13px; }
  .shop-side-divider{ margin:14px 0; }
  .shop-side-trust{ margin-top:12px; gap:6px; }
  .shop-side-code{ margin-top:12px; padding:8px 12px; }
}
@media (max-width:780px){
  .shop-hero-badges-scroll{ overflow:hidden; }
  .shop-hero-badges{
    flex-wrap:nowrap; width:max-content;
    margin:24px 0 0; padding:0 0 6px; gap:12px;
    animation:shop-badges-scroll 16s linear infinite;
  }
  .shop-hero-badges .is-duplicate{ display:flex; }
  .shop-hero-badges-scroll:hover .shop-hero-badges{ animation-play-state:paused; }
  .shop-benefit{ min-width:220px; }
  @keyframes shop-badges-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .shop-side-trust{ display:none; }
}

/* =========================================================
   FRANJA PROMOCIONAL — pegada al header (sin hueco), también
   con la admin bar de WordPress activa (usuario logueado).
   ========================================================= */
header{ margin:0; }
body.admin-bar header{ top:calc(var(--topbar-h) + 32px); }
@media (max-width:782px){
  body.admin-bar header{ top:calc(var(--topbar-h) + 46px); }
}

/* =========================================================
   DRAWER DE NAVEGACIÓN MÓVIL — panel real (no un simple
   desplegable), con fondo, botón de cierre y CTA.
   ========================================================= */
.drawer-backdrop{
  position:fixed; inset:0; z-index:90;
  background:rgba(7,50,74,.45);
  opacity:0; transition:opacity .28s ease;
}
.drawer-backdrop.is-open{ opacity:1; }
.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:95;
  width:min(86vw,360px);
  background:#fff;
  box-shadow:-18px 0 40px -20px rgba(7,50,74,.35);
  padding:20px 24px calc(28px + env(safe-area-inset-bottom));
  padding-top:calc(20px + env(safe-area-inset-top));
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s ease;
  overflow-y:auto;
}
.mobile-drawer.is-open{ transform:translateX(0); }
.mobile-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--linea);
}
.mobile-drawer-brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--tinta);
}
.mobile-drawer-brand img{ height:30px; width:auto; }
.mobile-drawer-close{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--bruma-alta); border:1px solid var(--linea); border-radius:100px;
  color:var(--tinta); cursor:pointer; flex-shrink:0;
}
.mobile-drawer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mobile-drawer-links li{ border-bottom:1px solid var(--linea); }
.mobile-drawer-links a{
  display:block; padding:18px 4px;
  font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:var(--tinta);
}
.mobile-drawer-cta{ margin-top:28px; width:100%; }
body.drawer-open{ overflow:hidden; }

/* =========================================================
   TARJETAS DE PRODUCTO — MOBILE (grilla clásica: Inicio, Tienda,
   categorías, relacionados). Compactas: imagen cuadrada sin recortar
   texto/infografía, sin descripción, título a 2 líneas, precio y
   botón proporcionados, badge de oferta como pill pequeña.
   ========================================================= */
@media (max-width:780px){
  .wrap{ padding:0 18px; }
  .shop-content{ padding:0 18px; }

  ul.products li.product .producto-card-img img{ object-fit:contain !important; }
  ul.products li.product .producto-card-body{ padding:14px 14px 16px !important; gap:6px !important; }
  ul.products li.product .woocommerce-loop-product__title{
    font-size:14px !important; line-height:1.35 !important;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; min-height:4.05em;
  }
  /* Descripción corta: solo en desktop, en mobile la tarjeta debe
     priorizar imagen → nombre → precio → botón */
  ul.products li.product .producto-descripcion{ display:none !important; }
  ul.products li.product .producto-card-footer{
    flex-direction:column !important; align-items:stretch !important;
    gap:8px !important; padding-top:10px !important;
  }
  ul.products li.product .price{ font-size:15px !important; }
  ul.products li.product .button{
    width:100%; min-height:42px !important;
    display:flex !important; align-items:center; justify-content:center;
    font-size:13.5px !important; padding:10px 14px !important;
  }
  ul.products li.product .onsale{ top:10px !important; left:10px !important; font-size:10px !important; padding:5px 10px !important; }
}

/* =========================================================
   TIENDA Y CATEGORÍAS — RESET MÓVIL DEL LOOP DE WOOCOMMERCE
   Único bloque que controla el ANCHO/COLUMNAS en Tienda y
   categorías (.shop-main, dentro de post-type-archive-product y
   tax-product_cat). Todo scoped — nunca toca ul.products a secas,
   así que el carrusel de Home y "relacionados" NO se ven afectados.
   Elimina floats/anchos heredados de WooCommerce (clear:both,
   float:left en .woocommerce-result-count/.woocommerce-ordering,
   cualquier width en % de versiones viejas del core) y deja SIEMPRE
   2 columnas reales y parejas, sin importar columns-3/4/5 que
   WooCommerce le haya puesto por defecto al <ul>.
   ========================================================= */
@media (max-width:768px){
  /* Resguardo final: además de la corrección de raíz (box-sizing
     universal más arriba) y de los anchos scoped de más abajo, este
     es un cinturón de seguridad — SOLO en el body de Tienda/categorías,
     nunca global — por si queda algún elemento suelto sin detectar
     que siga empujando el ancho de la página. */
  body.post-type-archive-product,
  body.tax-product_cat{
    overflow-x:hidden;
    max-width:100vw;
  }

  /* Header y footer a ancho completo — SOLO en Tienda/categorías,
     como se pidió puntualmente (Home no se toca acá). */
  .post-type-archive-product header,
  .tax-product_cat header{
    width:100% !important; max-width:100% !important;
    left:0 !important; right:0 !important; margin:0 !important;
  }
  .post-type-archive-product footer,
  .tax-product_cat footer{
    width:100% !important; max-width:100% !important;
    left:0 !important; right:0 !important; margin:0 !important;
    position:relative !important;
  }
  .post-type-archive-product footer .wrap,
  .tax-product_cat footer .wrap{
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
  }

  .post-type-archive-product .woocommerce,
  .tax-product_cat .woocommerce,
  .post-type-archive-product .shop-content,
  .tax-product_cat .shop-content,
  .post-type-archive-product main,
  .tax-product_cat main{
    width:100% !important; max-width:100% !important;
  }

  .post-type-archive-product .shop-main ul.products,
  .tax-product_cat .shop-main ul.products{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    width:100% !important; max-width:100% !important;
    margin:0 !important;
    gap:14px !important;
    float:none !important; clear:none !important;
  }
  .post-type-archive-product .shop-main ul.products li.product,
  .tax-product_cat .shop-main ul.products li.product,
  .post-type-archive-product .shop-main ul.products li.product.first,
  .tax-product_cat .shop-main ul.products li.product.first,
  .post-type-archive-product .shop-main ul.products li.product.last,
  .tax-product_cat .shop-main ul.products li.product.last{
    float:none !important; clear:none !important;
    flex:0 0 calc((100% - 14px) / 2) !important;
    width:calc((100% - 14px) / 2) !important;
    max-width:calc((100% - 14px) / 2) !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
}
@media (max-width:340px){
  .post-type-archive-product .shop-main ul.products li.product,
  .tax-product_cat .shop-main ul.products li.product{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
}

/* =========================================================
   FICHA DE PRODUCTO — MOBILE
   Una sola columna, imagen protagonista, beneficios apilados,
   cantidad + carrito cómodos, WhatsApp sin tapar contenido.
   =========================================================
   El orden real (imagen → thumbnails → categoría → título →
   precio → descripción → stock → cantidad → añadir → beneficios
   → descripción larga → valoraciones → relacionados) ya lo define
   woocommerce/content-single-product.php — en mobile solo se
   apilan las columnas con flex-basis:100% (ver breakpoint 780px
   existente más arriba), acá se afina el detalle visual. */
@media (max-width:780px){
  .product-gallery-col .flex-control-thumbs{ gap:10px !important; }
  .product-summary-col form.cart{
    display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px;
  }
  .product-summary-col form.cart .quantity{ flex:0 0 auto; }
  .product-summary-col form.cart .single_add_to_cart_button{
    flex:1 1 100%; width:100%; min-height:50px !important;
  }
  /* Beneficios (envíos / materiales / whatsapp): apilados, no en columnas */
  .product-trust{
    display:flex !important; flex-direction:column !important;
    gap:14px !important; grid-template-columns:none !important;
  }
}

/* =========================================================
   ORDENAMIENTO — MOBILE
   El selector de orden pasa a su propia fila. Los filtros de
   categoría (.shop-cats) ya tienen su propio scroll horizontal
   más abajo, junto al resto de estilos de la tienda.
   ========================================================= */
@media (max-width:780px){
  .woocommerce-products-header{
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .woocommerce-result-count{ margin:0 !important; }
  .woocommerce-ordering{ width:100%; }
  .woocommerce-ordering select{ width:100%; }
}

/* =========================================================
   TIPOGRAFÍA Y ESPACIADO GENERAL — MOBILE
   ========================================================= */
@media (max-width:780px){
  h1{ font-size:clamp(30px,8vw,36px); }
  h2{ font-size:clamp(24px,6.5vw,28px); }
  body{ font-size:16px; }
  .eyebrow{ font-size:11.5px; }
}

/* Resguardo básico: ningún elemento de imagen/tabla debe ser más
   ancho que su contenedor. El overflow horizontal real se corrige
   en cada componente (drawer con transform, carruseles con
   overflow-x:auto scoped, grillas con flex-wrap) — no con un
   overflow-x:hidden global que solo esconde el síntoma. */
@media (max-width:780px){
  img, svg, table{ max-width:100%; }
}

/* =========================================================
   TIENDA Y CATEGORÍAS — SIEMPRE GRID, NUNCA CARRUSEL
   (.shop-main hereda el grid de 2 columnas de ul.products de más
   arriba; a propósito NO se le aplica ningún overflow-x/scroll-snap
   acá — ese comportamiento es exclusivo del Inicio, ver más abajo
   ".home-carousel-dots" y assets/js/main.js.)
   ========================================================= */

/* Indicadores (puntos) del carrusel del INICIO — los genera main.js
   según la cantidad real de productos; el punto activo usa el teal
   de marca. No se usan en Tienda/categorías (ahí es grid, sin JS). */
.home-carousel-dots{
  display:flex; justify-content:center; gap:8px; margin:16px 0 4px;
}
.home-carousel-dots button{
  width:8px; height:8px; padding:0; border:none; border-radius:100px;
  background:var(--linea); cursor:pointer; transition:background .2s ease, width .2s ease;
}
.home-carousel-dots button.is-active{ background:var(--calma); width:20px; }

/* Carrito en móvil: ocultar el precio duplicado (subtotal de línea) a la derecha;
   el precio unitario ya se muestra debajo del nombre del producto */
@container (max-width: 699px){
  .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{
    display:none !important;
  }
}

/* Resumen del pedido (Checkout) en móvil: ocultar el precio total duplicado
   a la derecha; el precio unitario ya se muestra debajo del nombre del producto */
@media (max-width:780px){
  .wc-block-components-order-summary-item__total-price{
    display:none !important;
  }
}

/* =========================================================
   IDENTIDAD DyG — pesos tipográficos de marca
   La guía de identidad visual pide Poppins ExtraBold/Bold para
   títulos, precios y CTAs, e Inter Regular/SemiBold para el resto
   del texto. El theme ya usa Poppins en títulos/precios/etiquetas y
   Inter en el cuerpo (ver mapeo de fuentes arriba); esto solo sube
   el peso de los botones y precios a Bold/ExtraBold como pide la guía.
   ========================================================= */
.btn,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce a.button, .woocommerce button.button,
ul.products li.product .button,
.wc-block-components-product-button__button,
.wp-block-woocommerce-product-button a{
  font-family:'Poppins', sans-serif !important;
  font-weight:700 !important;
}
.precio-actual,
.woocommerce div.product p.price,
.product-summary-col p.price,
ul.products li.product .price,
.wc-block-components-product-price, .wc-block-grid__product-price{
  font-weight:800 !important;
}