/* ==========================================================
   FIX (20/08/2026): la ficha de producto se quedaba pegada a la
   izquierda con un hueco enorme a la derecha. Causa real (confirmada
   con el inspector del navegador): Storefront reserva un 43,48% de
   ancho a la izquierda para la galería de fotos de serie, aunque la
   hayamos ocultado con display:none, y hace flotar nuestro .summary
   (con todo el configurador dentro) solo en el 56,52% restante a la
   derecha. Esa regla vive en el propio CSS de Storefront dentro de un
   @media (min-width:768px), con selector:
     .storefront-full-width-content.single-product div.product .summary
   Para ganarle by fuerza bruta necesitamos IGUAL o MAYOR especificidad
   y que esta hoja cargue después — como puede que no siempre sea así,
   metemos varias variantes del selector + !important en todo. */
.storefront-full-width-content.single-product div.product .summary,
.storefront-full-width-content.single-product div.product .summary.entry-summary,
body.single-product div.product .summary,
body.single-product div.product .summary.entry-summary,
.single-product div.product .summary.entry-summary,
div.product .summary.entry-summary{
  width:100% !important;
  max-width:1160px !important;
  float:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  clear:both !important;
}
/* Por si la galería oculta sigue contando para el cálculo del ancho del
   contenedor .product (algunos temas usan flex/grid en vez de floats) */
div.product.type-product{
  display:block !important;
}
/* FIX (20/08/2026): position:sticky en .sidebar (foto+resumen) no
   funcionaba en escritorio. La causa más habitual es un overflow:hidden
   (o auto/scroll) en algún antepasado — basta con uno para que el
   navegador ignore el sticky en TODO el árbol de abajo, sin avisar ni
   dar error. La vez anterior forcé overflow:visible en tus propios
   contenedores (.summary, .vasitos-config, .layout), pero es muy
   probable que el verdadero culpable sea un contenedor de
   Storefront/WordPress por fuera de esos (#primary, .content-area,
   #main, #content), que suelen llevar overflow:hidden como truco para
   contener floats. Lo forzamos aquí también. */
body.single-product,
body.single-product #page,
body.single-product #content,
body.single-product #primary,
body.single-product .content-area,
body.single-product #main,
body.single-product .site-main,
body.single-product article,
body.single-product div.product,
body.single-product div.product.type-product,
body.single-product .summary.entry-summary,
body.single-product .vasitos-config,
body.single-product .layout{
  overflow:visible !important;
}

:root{
    --ink:#1A1A1A;
    --paper:#F5F5F4;
    --surface:#FFFFFF;
    --line:#E6E6E4;
    --line-strong:#D4D4D1;
    --muted:#7A7A76;
    --orange:#F46036;
    --orange-wash:#FDEDE6;
    --step-bg:#F0F0EE;
    --shadow:0 1px 2px rgba(20,20,20,.04), 0 6px 20px rgba(20,20,20,.05);
  }
  .vasitos-config *{ box-sizing:border-box; }
  .vasitos-config{ color:var(--ink); font-family:'IBM Plex Sans',sans-serif; -webkit-font-smoothing:antialiased; }
  .vasitos-config a{ color:inherit; }

  /* El título y el precio los pinta WooCommerce ANTES de nuestro configurador
     (fuera de .vasitos-config), así que nunca habían tenido nuestra tipografía. */
  .summary.entry-summary{ max-width:1160px; margin:0 auto; padding:20px 40px 0; font-family:'IBM Plex Sans',sans-serif; box-sizing:border-box; width:100% !important; float:none !important; clear:both; }
  /* La galería de fotos de serie de WooCommerce reservaba una columna a la
     izquierda aunque no mostrara nada — la quitamos del todo. */
  .woocommerce-product-gallery, div.images, .single-product div.images{ display:none !important; width:0 !important; }
  .summary.entry-summary .product_title{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; font-size:34px; line-height:1.05; color:var(--ink); margin:10px 0 14px; padding-left:18px; }
  .vasitos-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin:14px 0 0; padding-left:18px; }
  .vasitos-breadcrumb{ font-size:11.5px; color:var(--muted); padding-left:18px; }
  .vasitos-breadcrumb a{ color:var(--muted); text-decoration:none; }
  .vasitos-breadcrumb a:hover{ color:var(--orange); text-decoration:underline; }
  .vasitos-breadcrumb .sep{ margin:0 6px; opacity:.6; }
  .vasitos-breadcrumb .current{ color:var(--ink); }

  /* FIX (20/08/2026): tenía su propio max-width+padding ADEMÁS del que ya
     aplica el contenedor padre (.summary.entry-summary) — por eso se veía
     más estrecha/descuadrada que el resto y con mucho hueco encima. Ahora
     hereda el ancho del padre y solo controla el espaciado vertical. */
  .vasitos-ficha-tecnica{ margin:0; padding:20px 0 40px; }
  .vasitos-ficha-tecnica h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:20px; color:var(--ink); margin:0 0 18px; padding-left:18px; }
  .vasitos-ficha-tecnica .ficha-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .vasitos-ficha-tecnica .ficha-card{ background:var(--step-bg); border-radius:12px; padding:18px 20px; }
  .vasitos-ficha-tecnica .ficha-card-head{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:13px; color:var(--orange); font-weight:700; margin-bottom:10px; }
  .vasitos-ficha-tecnica .ficha-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:12.5px; border-bottom:1px solid var(--line); }
  .vasitos-ficha-tecnica .ficha-row:last-child{ border-bottom:none; }
  .vasitos-ficha-tecnica .ficha-row span{ color:var(--muted); }
  .vasitos-ficha-tecnica .ficha-row b{ color:var(--ink); font-weight:600; }
  @media (max-width:760px){
    .vasitos-ficha-tecnica{ padding:24px 0 40px; }
    .vasitos-ficha-tecnica .ficha-grid{ grid-template-columns:1fr; }
  }
  .summary.entry-summary .price{ font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; color:var(--orange); margin:0 0 8px; }
  .summary.entry-summary .price .woocommerce-Price-amount{ font-family:inherit; }
  .summary.entry-summary > *{ max-width:100%; }

  /* FIX (20/08/2026): quedaba un hueco grande entre la descripción corta
     ("El equilibrado, el más pedido.") y el paso 1 del configurador —
     era el margen por defecto de WooCommerce en ese párrafo, sumado al
     padding superior del .layout. */
  .summary.entry-summary .woocommerce-product-details__short-description{ margin-bottom:0; padding-left:18px; }
  .summary.entry-summary .woocommerce-product-details__short-description p{ margin:0 0 6px; font-size:14px; color:var(--orange); font-weight:500; }

  .layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; padding:8px 0 16px; align-items:start; }
  .layout.revealed{ align-items:start; }
  .left-col{ min-width:0; }

  /* ===== STEPS (izquierda, estilo vadevasos) ===== */
  .step{ background:var(--step-bg); border-radius:10px; margin-bottom:14px; overflow:hidden; }
  .reveal-step{ display:none; opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease; }
  .reveal-after-method{ display:none; opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease; }
  .reveal-after-method.revealed{ display:block; opacity:1; transform:translateY(0); }
  .reveal-step.revealed{ display:block; opacity:1; transform:translateY(0); }
  .quote-banner.reveal-step.revealed{ display:flex; }
  .step-head{ display:flex; align-items:center; gap:13px; padding:15px 18px; }
  .step-num{ width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; flex-shrink:0; }
  .step-icon{ width:18px; height:18px; stroke:var(--orange); flex-shrink:0; }
  .step-title{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:14.5px; font-weight:600; letter-spacing:.02em; flex:1; }
  .step-price{ background:var(--surface); border-radius:20px; padding:5px 13px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); font-weight:500; }

  .step-body{ padding:0 18px 20px; }

  /* quantity */
  .qty-scroll{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scroll-snap-type:x proximity; }
  .qty-select-mobile{ display:none; width:100%; height:46px; border:1px solid var(--line-strong); border-radius:8px; padding:0 14px; font-size:13.5px; font-family:'IBM Plex Sans',sans-serif; background:var(--surface); color:var(--ink); }
  .qty-cell{ flex:0 0 auto; min-width:72px; border:1px solid var(--line-strong); border-radius:8px; padding:10px 8px; text-align:center; cursor:pointer; background:var(--surface); scroll-snap-align:start; }
  .qty-cell.active{ background:var(--ink); border-color:var(--ink); }
  .qty-cell .n{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); }
  .qty-cell.active .n{ color:#9c988a; }
  .qty-cell .p{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; margin-top:2px; }
  .qty-cell.active .p{ color:var(--orange); }

  .qty-more{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); border-radius:8px; padding:11px 14px; }
  .qty-more span{ font-size:11.5px; color:var(--muted); }
  .qty-more button{ background:none; border:1px solid var(--orange); border-radius:20px; padding:6px 14px; font-size:11px; cursor:pointer; color:var(--orange); font-weight:500; white-space:nowrap; }
  .qty-more button:hover{ background:var(--orange); color:#fff; }

  /* colour */
  .toggle-row{ display:inline-flex; background:var(--surface); border-radius:20px; padding:3px; margin-bottom:14px; }
  .toggle-row button{ border:none; background:none; padding:7px 15px; font-size:11.5px; cursor:pointer; color:var(--muted); border-radius:20px; }
  .toggle-row button.active{ background:var(--ink); color:#fff; font-weight:500; }

  .swatch-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .swatch{ width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid var(--step-bg); background-size:cover; background-position:center; box-shadow:0 0 0 1px var(--line-strong); }
  .swatch.active{ box-shadow:0 0 0 1px var(--step-bg), 0 0 0 2.5px var(--ink); }

  .multicolor-list{ display:none; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:6px; }
  .multicolor-list.show{ display:grid; }
  .mc-row{ display:flex; align-items:center; gap:8px; background:var(--paper); border-radius:8px; padding:6px 8px; }
  .mc-row .sw{ width:28px; height:28px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center; box-shadow:0 0 0 1px var(--line-strong); }
  .mc-row span{ display:none; }
  .mc-stepper{ display:flex; align-items:center; flex:1; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; background:var(--surface); }
  .mc-step-btn{ width:28px; height:32px; border:none; background:var(--surface); color:var(--ink); font-size:15px; font-family:'IBM Plex Sans',sans-serif; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .mc-step-btn:hover{ background:var(--paper); }
  .mc-step-btn:active{ background:var(--line); }
  .mc-row input{ width:100%; min-width:0; height:32px; border:none; border-left:1px solid var(--line-strong); border-right:1px solid var(--line-strong); text-align:center; font-size:12.5px; font-family:'IBM Plex Mono',monospace; -moz-appearance:textfield; }
  .mc-row input::-webkit-outer-spin-button, .mc-row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .mc-row .mc-uds{ display:none; }
  .mc-hint{ font-size:11px; color:var(--muted); margin:9px 2px 0; line-height:1.5; }
  .mc-hint b{ color:var(--ink); font-weight:600; }
  .mc-total{ font-size:11.5px; margin:9px 2px 0; padding:8px 10px; border-radius:6px; }
  .mc-total.ok{ color:#2F7D52; background:#EAF4EE; }
  .mc-total.bad{ color:#B33A22; background:var(--orange-wash); }
  .mc-total b{ font-weight:700; }

  .ink-group{ margin-bottom:14px; }
  .ink-warning{ display:flex; align-items:flex-start; gap:9px; background:var(--orange-wash); border-radius:8px; padding:11px 13px; margin-top:6px; }
  .ink-warning svg{ width:16px; height:16px; stroke:#B33A22; flex-shrink:0; margin-top:1px; }
  .ink-warning span{ font-size:11.5px; color:#B33A22; line-height:1.5; }
  .iml-note{ display:flex; gap:10px; background:var(--paper); border-radius:8px; padding:13px 15px; }
  .iml-note svg{ width:18px; height:18px; stroke:var(--orange); flex-shrink:0; margin-top:1px; }
  .iml-note p{ font-size:12px; color:var(--muted); line-height:1.6; margin:0; }
  .iml-note b{ color:var(--ink); }
  /* Ejemplo visual de IML — siempre visible (no necesita "Ver ejemplo"
     como el del logo, porque en IML es la explicación principal del
     paso, no un extra opcional). Reutiliza el mismo estilo de tarjeta. */
  .iml-visual-example{ margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px; text-align:center; }
  .iml-visual-example svg{ width:140px; height:auto; margin:0 auto 8px; display:block; }
  .iml-visual-example p{ font-size:11.5px; color:var(--muted); line-height:1.5; margin:0; }
  .iml-visual-example p b{ color:var(--ink); }
  .iml-lock-note{ display:flex; gap:9px; background:var(--orange-wash); border-radius:8px; padding:12px 14px; margin-bottom:14px; }
  .iml-lock-note svg{ width:16px; height:16px; stroke:#B33A22; flex-shrink:0; margin-top:1px; }
  .iml-lock-note span{ font-size:11.5px; color:#8a3d20; line-height:1.5; }
  .iml-lock-note b{ color:#8a3d20; }
  .swatch.locked{ opacity:.3; pointer-events:none; }
  #colorModeToggle.locked{ opacity:.4; pointer-events:none; }

  /* Colores sin stock — el color real se sigue viendo, pero con un
     tachado rojo claro encima y sin poder seleccionarse. Ya NO se usa
     pointer-events:none porque eso también bloqueaba el "hover" y con
     él el aviso de "Sin stock" nunca llegaba a verse. El bloqueo de
     selección lo hace el propio JS al comprobar la clase .agotado. */
  .swatch.agotado{
    opacity:.6; position:relative; cursor:not-allowed;
  }
  .swatch.agotado::after{
    content:''; position:absolute; inset:-2px; border-radius:50%;
    background:linear-gradient(to top right, transparent calc(50% - 1.5px), #E2382C calc(50% - 1.5px), #E2382C calc(50% + 1.5px), transparent calc(50% + 1.5px));
  }
  .mc-row.agotado{ opacity:.6; }
  .mc-row.agotado .sw{ position:relative; }
  .mc-row.agotado .sw::after{
    content:''; position:absolute; inset:-2px; border-radius:50%;
    background:linear-gradient(to top right, transparent calc(50% - 1.5px), #E2382C calc(50% - 1.5px), #E2382C calc(50% + 1.5px), transparent calc(50% + 1.5px));
  }
  .mc-row.agotado .mc-input, .mc-row.agotado .mc-step-btn{ cursor:not-allowed; }
  .mc-row.agotado span small{ color:#E2382C; font-weight:600; font-style:normal; margin-left:3px; }
  .colgar-qty-block{ display:none; margin-top:14px; align-items:center; gap:10px; }
  .colgar-qty-block.show{ display:flex; }
  .ink-group-label{ font-size:11.5px; color:var(--muted); margin:0 0 8px; font-weight:500; }
  .ink-swatch-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .ink-swatch{ width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-strong); flex-shrink:0; }
  .ink-swatch.active{ box-shadow:0 0 0 1px var(--surface), 0 0 0 2.5px var(--ink); }
  .ink-swatch.white-ink{ box-shadow:0 0 0 1px var(--line-strong); }
  .ink-swatch.white-ink.active{ box-shadow:0 0 0 1px var(--surface), 0 0 0 2.5px var(--ink); }

  .pantone-link{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink); text-decoration:none; margin-top:12px; cursor:pointer; }
  .pantone-link svg{ width:13px; height:13px; stroke:var(--orange); flex-shrink:0; }
  .pantone-link u{ text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px; }
  .pantone-box{ display:none; margin-top:10px; background:var(--surface); border-radius:8px; padding:13px 15px; }
  .pantone-box.show{ display:block; }
  .pantone-box p{ font-size:11.5px; color:var(--muted); margin:0 0 10px; line-height:1.55; }

  .logo-discount-check{ display:flex; align-items:flex-start; gap:10px; background:var(--orange-wash); border:1.5px dashed var(--orange); border-radius:8px; padding:12px 14px; margin-top:16px; cursor:pointer; }
  .logo-discount-check input{ margin-top:3px; flex-shrink:0; }
  .logo-discount-check b{ color:#8a3d20; font-weight:600; font-size:12.5px; }
  .logo-discount-check small{ display:block; margin-top:3px; color:#8a3d20; opacity:.85; font-size:11px; line-height:1.5; font-weight:400; }
  .ver-ejemplo-link{ display:inline-block; margin-top:6px; font-size:11px; color:var(--orange); font-weight:600; text-decoration:underline; cursor:pointer; }
  .ejemplo-logo-box{ display:none; margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px; text-align:center; }
  .ejemplo-logo-box.show{ display:block; }
  .ejemplo-logo-svg{ width:130px; height:auto; margin:0 auto 8px; display:block; }
  .ejemplo-logo-box p{ font-size:11px; color:var(--muted); line-height:1.5; margin:0; }
  .ejemplo-logo-box p b{ color:var(--ink); }
  .pantone-row{ display:flex; gap:8px; }
  .pantone-row input{ flex:1; height:36px; border:1px solid var(--line-strong); border-radius:5px; padding:0 10px; font-size:12px; }
  .pantone-row button{ background:var(--ink); color:#fff; border:none; border-radius:5px; padding:0 15px; font-size:11px; cursor:pointer; white-space:nowrap; }

  /* tintas / pill */
  .pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .pill{ padding:9px 15px; border:1px solid var(--line-strong); border-radius:20px; font-size:12px; background:var(--surface); cursor:pointer; color:var(--ink); }
  .pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

  /* archivo */
  .upload-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .upload-btn{ flex:1; min-width:130px; padding:11px 8px; border-radius:6px; background:var(--surface); font-size:11.5px; text-align:center; cursor:pointer; color:var(--ink); border:1.5px solid transparent; }
  .upload-btn.active{ background:var(--ink); color:#fff; }
  .upload-btn:hover:not(.active){ box-shadow:var(--shadow); }

  .design-panel{ margin-top:14px; }
  .design-note{ font-size:11.5px; color:var(--muted); line-height:1.6; margin:0 0 10px; }
  .design-note b{ color:var(--ink); font-weight:600; }
  .design-input{ width:100%; height:38px; border:1px solid var(--line-strong); border-radius:6px; padding:0 12px; font-size:12.5px; background:var(--surface); }
  .design-warning{ margin-top:16px; background:#E9F3F3; border-radius:8px; padding:12px 14px; font-size:11px; color:#3E6B6B; line-height:1.6; }
  .design-warning b{ font-weight:700; }
  .white-check{ display:flex; align-items:flex-start; gap:10px; background:var(--paper); border-radius:8px; padding:12px 14px; margin-top:16px; cursor:pointer; }
  .white-check input{ margin-top:3px; flex-shrink:0; }
  .white-check b{ color:var(--ink); font-weight:600; font-size:12.5px; }
  .white-check small{ display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.5; font-weight:400; }
  .whatsapp-help{ display:flex; align-items:center; gap:10px; margin:0; background:#fff; color:#25D366; border:1.5px solid #25D366; border-radius:8px; padding:12px 15px; font-size:12.5px; font-weight:600; text-decoration:none; }
  .whatsapp-help:hover{ background:#F0FBF4; }
  .whatsapp-help svg{ width:19px; height:19px; flex-shrink:0; color:#25D366; }
  /* Variante para "diseño personalizado" — sin icono, solo texto
     subrayado, discreto pero visible; separada del botón de WhatsApp
     por el gap del contenedor #vasitosDesignExtra, no por margen propio. */
  .whatsapp-help.whatsapp-help-outline{
    background:none; border:none; color:var(--muted); font-weight:500;
    padding:0; text-decoration:underline;
    text-decoration-color:var(--line-strong); text-underline-offset:2px;
  }
  .whatsapp-help.whatsapp-help-outline:hover{ color:var(--ink); }
  #vasitosDesignExtra{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }

  /* Caja de subida de archivo (arrastrar y soltar) — antes era texto
     suelto sin ninguna caja visible. */
  .upload-box{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    border:1.5px dashed var(--line-strong); border-radius:10px; background:var(--surface);
    padding:30px 20px; text-align:center; font-size:13px; color:var(--muted); cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .upload-box strong{ color:var(--orange); font-weight:600; }
  .upload-box:hover{ border-color:var(--orange); background:var(--orange-wash); }
  .upload-box.dragover{ border-color:var(--orange); background:var(--orange-wash); }
  .upload-box::before{
    content:''; width:34px; height:34px; margin-bottom:4px; flex-shrink:0;
    background-color:var(--muted);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 16V4m0 0L7 9m5-5l5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 16V4m0 0L7 9m5-5l5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .upload-box.dragover::before{ background-color:var(--orange); }

  /* Enlaces de descarga (plantilla / normas de impresión) — sección
     propia debajo de "Ficha técnica", con el mismo ancho y estilo de
     título que esa sección. */
  .vasitos-descargas-section{ margin:0; padding:0 0 40px; }
  .vasitos-descargas-section h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:20px; color:var(--ink); margin:0 0 18px; padding-left:18px; }
  .vasitos-descargas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
  .vasitos-descargas a{ display:flex; align-items:center; gap:10px; background:var(--step-bg); border-radius:12px; padding:18px 20px; font-size:13.5px; color:var(--ink); text-decoration:none; font-weight:600; }
  .vasitos-descargas a:hover{ background:var(--orange-wash); color:#8a3d20; }
  .vasitos-descargas a svg{ width:19px; height:19px; flex-shrink:0; color:var(--orange); }
  @media (max-width:760px){
    .vasitos-descargas{ grid-template-columns:1fr; }
  }

  .placement-row{ display:flex; gap:10px; }
  .placement-card{ flex:1; border:2px solid var(--surface); border-radius:8px; padding:12px 8px; text-align:center; cursor:pointer; background:var(--surface); }
  .placement-card.active{ border-color:var(--orange); }
  .placement-card svg{ width:30px; height:36px; margin:0 auto 6px; display:block; }
  .placement-card span{ font-size:10.5px; color:var(--ink); display:block; }

  /* Tooltip flotante con el nombre del color (vaso, tinta, varios colores) */
  .vasitos-swatch-tooltip{
    position:fixed; transform:translate(-50%,-100%);
    background:var(--ink); color:#fff; font-size:11px; font-family:'IBM Plex Sans',sans-serif;
    padding:4px 9px; border-radius:6px; pointer-events:none; z-index:9999;
    opacity:0; transition:opacity .12s ease; white-space:nowrap;
  }
  .vasitos-swatch-tooltip.show{ opacity:1; }

  /* ===== SIDEBAR (derecha) ===== */
  .sidebar{ width:100%; position:-webkit-sticky; position:sticky; top:32px; align-self:start; }
  /* Cuando hay sesión de administrador iniciada, WordPress añade su
     propia barra negra fija arriba (32px en escritorio) — la sumamos
     para que el espaciado se vea igual de proporcionado que para un
     visitante normal, que no tiene esa barra. */
  body.admin-bar .sidebar{ top:calc(32px + 32px); }
  .layout.revealed .sidebar{ align-self:start; }
  .sidebar-inner{ width:100%; }
  .card{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px; }

  /* FIX (20/08/2026): la altura de la foto se calcula por JS (para que
     llegue justo hasta el final del paso 2, ni más ni menos) — ver
     product-configurator.js, función ajustarAlturaFoto(). Si por lo que
     sea el JS no llega a ejecutarse, este aspect-ratio de reserva evita
     que la foto se vea rota. */
  .main-img{ aspect-ratio:1/1; width:100%; background:#FFFFFF; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .main-img img{ width:82%; height:82%; max-width:100%; max-height:100%; object-fit:contain; display:block; filter:drop-shadow(0 18px 18px rgba(28,27,20,.10)); }
  .ref-tag{ position:absolute; top:12px; left:12px; background:var(--surface); color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10px; padding:5px 10px; border-radius:20px; box-shadow:var(--shadow); }
  .stock-pill{ position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:5px; background:var(--surface); padding:5px 10px; border-radius:20px; font-size:10px; color:var(--muted); box-shadow:var(--shadow); }
  .stock-dot{ width:5px; height:5px; border-radius:50%; background:#2F7D52; }

  .resumen{ padding:20px; }
  .resumen h3{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:15px; color:var(--ink); margin:0 0 14px; letter-spacing:.02em; }
  .resumen, .resumen *{ text-decoration:none !important; }
  .resumen-row{ display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); }
  .resumen-row .label{ font-size:11.5px; color:var(--muted); }
  .resumen-row .sub{ display:block; font-size:10px; color:var(--muted); opacity:.7; }
  .resumen-row .val{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; color:var(--ink); text-decoration:none !important; }

  .resumen-total{ display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 4px; padding-top:12px; border-top:2px solid var(--ink); }
  .resumen-total .label{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:12.5px; }
  .resumen-total .val{ font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:800; color:var(--orange); }

  .resumen-cta{ width:100%; background:var(--orange); color:#fff; border:none; border-radius:8px; padding:14px 0; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:14px; cursor:pointer; margin-top:12px; box-shadow:0 4px 14px rgba(244,96,54,.25); }
  .resumen-cta:hover{ background:#DB4E27; }
  .resumen-footnote{ font-size:10px; color:var(--muted); margin-top:10px; line-height:1.5; }

  .quote-banner{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); padding:16px 18px; display:flex; align-items:flex-start; gap:12px; }
  .quote-banner svg{ width:20px; height:20px; stroke:var(--orange); flex-shrink:0; margin-top:1px; }
  .quote-banner p{ margin:0; font-size:11.5px; color:var(--muted); line-height:1.5; }
  .quote-banner b{ color:var(--ink); font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:12px; display:block; margin-bottom:2px; letter-spacing:.02em; }

  /* ===== FICHA TECNICA ===== */
  .ficha-section{ padding:56px 40px 8px; }
  .ficha-heading{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:13px; letter-spacing:.08em; color:var(--muted); margin:0 0 20px; }
  .ficha-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .ficha-card{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); padding:20px 22px; }
  .ficha-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .ficha-card-head svg{ width:17px; height:17px; stroke:var(--orange); }
  .ficha-card-head span{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:12.5px; letter-spacing:.03em; color:var(--ink); font-weight:600; }
  .ficha-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:6px 0; border-bottom:1px solid var(--line); }
  .ficha-row:last-child{ border-bottom:none; }
  .ficha-row b{ color:var(--ink); font-weight:500; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }

  .ejemplos{ padding:52px 40px 8px; }
  .ejemplos h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:16px; margin:0 0 18px; }
  .ejemplos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .ejemplo-card{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
  .ejemplo-card .ph{ aspect-ratio:1/1; background:#FFFFFF; display:flex; align-items:center; justify-content:center; position:relative; }
  .ejemplo-card .ph svg{ width:40%; }
  .ejemplo-card .cap{ padding:12px 14px; }
  .ejemplo-card .cap b{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:12.5px; color:var(--ink); letter-spacing:.02em; }
  .ejemplo-card .cap span{ font-size:11px; color:var(--muted); }

  .descripcion{ padding:52px 40px 8px; max-width:680px; }
  .descripcion h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:16px; margin:0 0 10px; }
  .descripcion p{ font-size:13.5px; color:var(--muted); line-height:1.7; }

  .trust{ padding:52px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .trust-item{ padding:20px; background:var(--surface); box-shadow:var(--shadow); border-radius:12px; display:flex; flex-direction:column; gap:10px; }
  .trust-item svg{ width:22px; height:22px; stroke:var(--orange); }
  .trust-item span{ font-size:12px; color:var(--ink); font-weight:500; line-height:1.4; }


  @media (max-width:960px){
    header.top{ padding:16px 24px; }
    .breadcrumb{ padding:14px 24px 0; }
    .title-block{ padding:20px 24px 0; }
    .layout{ grid-template-columns:1fr; padding:20px 0 0; gap:14px; }
    .summary.entry-summary{ padding:16px 20px 0; }
    .summary.entry-summary .product_title{ font-size:26px; }
    .sidebar{ position:static; margin-top:4px; }
    .card{ margin-bottom:10px; }
    .ficha-section{ padding:44px 24px 8px; }
    .ejemplos{ padding:40px 24px 8px; }
    .descripcion{ padding:40px 24px 8px; }
    .trust{ padding:40px 24px; grid-template-columns:repeat(2,1fr); }
    footer{ padding:22px 24px; }
    .ficha-grid{ grid-template-columns:1fr; }
    .vasitos-ficha-tecnica .ficha-grid{ grid-template-columns:1fr; }
    .ejemplos-grid{ grid-template-columns:repeat(2,1fr); }
    .main-img{ max-width:320px; margin:0 auto; }
  }
  @media (max-width:560px){
    .logo{ font-size:18px; }
    nav.top-nav{ gap:14px; font-size:11px; }
    h1{ font-size:24px; }
    .step-title{ font-size:13px; }
    .step-price{ font-size:11px; padding:4px 10px; }
    .qty-cell{ min-width:64px; }
    .qty-scroll{ display:none; }
    .qty-select-mobile{ display:block; }
    .placement-row{ flex-direction:column; }
    .ejemplos-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
    .trust{ grid-template-columns:1fr; }
    .main-img{ max-width:230px; }
    /* FIX (20/08/2026): con 2 columnas, cada fila de "Varios colores" no
       tenía sitio para el círculo + los botones +/− + el número, y se
       cortaba. En móvil pasa a 1 columna, con todo el ancho disponible. */
    .multicolor-list{ grid-template-columns:1fr; }
  }

  /* ===== Pestañas de producto (Descripción / Valoraciones) ===== */
  .woocommerce-tabs{ max-width:1160px; margin:40px auto 0; padding:0 40px 40px; }
  .woocommerce-tabs ul.tabs{ display:flex; gap:8px; list-style:none; margin:0 0 20px; padding:0; border-bottom:1px solid var(--line); }
  .woocommerce-tabs ul.tabs li{ margin:0; }
  .woocommerce-tabs ul.tabs li a{ display:block; padding:12px 18px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:13px; letter-spacing:.03em; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; }
  .woocommerce-tabs ul.tabs li.active a{ color:var(--ink); border-bottom-color:var(--orange); }
  .woocommerce-tabs .panel{ font-size:13.5px; color:var(--muted); line-height:1.75; max-width:760px; }
  .woocommerce-tabs .panel h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:18px; color:var(--ink); margin:0 0 14px; }
  .woocommerce-tabs .panel p{ margin:0 0 12px; }
  .woocommerce-Reviews .comment-form input, .woocommerce-Reviews .comment-form textarea{ border:1px solid var(--line-strong); border-radius:8px; padding:10px 12px; font-family:'IBM Plex Sans',sans-serif; }
  .woocommerce-Reviews #submit{ background:var(--orange); color:#fff; border:none; border-radius:8px; padding:11px 24px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.03em; cursor:pointer; }

  /* ===== Productos relacionados ===== */
  /* Ocultamos el SKU y las categorías (product_meta) que WooCommerce
   pone por defecto debajo del configurador — no aportan nada al
   cliente y no encajan con el diseño. También el enlace de "Editar"
   que solo ven los admins conectados, para que no estorbe al revisar,
   y la navegación lateral "producto anterior/siguiente" que trae
   Storefront de serie (el botón que se expande a un lado). */
.product_meta,
.single-product .edit-link,
.storefront-product-pagination{ display:none !important; }

.related.products{ max-width:1160px; margin:0 auto; padding:40px 40px 60px; border-top:1px solid var(--line); }
  .related.products > h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:22px; color:var(--ink); margin:0 0 20px; }
  .related.products ul.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; margin:0; padding:0; }
  .related.products ul.products li.product{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
  .related.products ul.products li.product img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; padding:16px; }
  .related.products ul.products li.product .woocommerce-loop-product__title{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:15px; font-weight:700; color:var(--ink); padding:0 16px; margin:8px 0 4px; }
  .related.products ul.products li.product .price{ font-family:'Barlow Condensed',sans-serif; color:var(--orange); font-size:15px; font-weight:700; padding:0 16px 16px; }
  .related.products ul.products li.product a.button{ display:block; margin:0 16px 16px; background:var(--orange); color:#fff; text-align:center; padding:10px 0; border-radius:8px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; font-size:12px; text-decoration:none; }
  .related.products ul.products li.product a.button:hover{ background:var(--ink); }
  @media (max-width:760px){
    .woocommerce-tabs{ padding:0 20px 30px; }
    .related.products{ padding:30px 20px 40px; }
    .related.products ul.products{ grid-template-columns:repeat(2,1fr); gap:12px; }
  }

/* ===================================================================
   Carrusel "Clientes que ya han hecho este vaso" — sustituye a los
   "productos relacionados" genéricos de WooCommerce.
=================================================================== */
.vasitos-clientes-carrusel{ max-width:1160px; margin:0 auto; padding:10px 40px 50px; }
.vasitos-clientes-carrusel h2{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:20px;
  color:var(--ink); margin-bottom:16px;
}
.vasitos-clientes-track{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.vasitos-clientes-track::-webkit-scrollbar{ height:6px; }
.vasitos-clientes-track::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:3px; }
.vasitos-clientes-item{
  flex:0 0 auto; width:220px; height:220px; border-radius:12px; overflow:hidden;
  background:var(--step-bg); scroll-snap-align:start;
}
.vasitos-clientes-item img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:760px){
  .vasitos-clientes-carrusel{ padding:10px 20px 40px; }
  .vasitos-clientes-item{ width:160px; height:160px; }
}