/* =============================================================
   Tibor3 — Skin 2026 (reskin del configurador de prendas)
   SOLO PRESENTACIÓN. Acotado a .tibor3-cfg. Carga DESPUÉS de
   configurator.css (plugin) → el plugin queda 100% intacto.
   No toca canvas, zonas, colores/tallas, drag, AJAX ni carrito.
   ============================================================= */

.tibor3-cfg{
  --t3s-blue:#1668e3;  --t3s-blue-d:#0f57c4;
  --t3s-ink:#1f2b45;   --t3s-muted:#6b7787;
  --t3s-line:#e6e9f0;  --t3s-bg:#eef2f7;   --t3s-panel:#fff;
  --t3s-glass:rgba(255,255,255,.58);          /* paneles translúcidos (glass) */
  --t3s-glass-brd:rgba(31,43,69,.08);
  --t3s-r:16px;        --t3s-rc:10px;

  /* Encuadre general: paneles glass sobre un fondo con leve degradado */
  gap:16px;
  background:linear-gradient(160deg,#eef2f7 0%,#e5ebf4 55%,#eaf0f8 100%);
  padding:14px 16px 16px;
  /* Más aire para el header del tema → los paneles ya no se salen por abajo */
  height:min(calc(100vh - 152px), 760px);
}

/* La tarjeta contenedora del tema en esta página → transparente (deja ver el degradado) */
.container:has(.tibor3-cfg) > div{ background:transparent !important; }

/* Paneles laterales = tarjetas TRANSLÚCIDAS elevadas (glass, colores nuestros) */
.tibor3-cfg .tibor3-tools,
.tibor3-cfg .tibor3-product{
  background:var(--t3s-glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--t3s-glass-brd);
  border-radius:var(--t3s-r);
  box-shadow:0 18px 44px rgba(31,43,69,.12);
}
/* Centro SIN recuadro blanco → la camiseta flota sobre el fondo */
.tibor3-cfg .tibor3-stage-wrap{ background:transparent; border:none; box-shadow:none; }
.tibor3-cfg .tibor3-stage{ background:transparent; }

/* =============================================
   BLOQUE 1 · PANEL DERECHO (producto)
============================================= */
.tibor3-cfg .tibor3-product{ padding:22px 22px 24px; gap:16px; }

.tibor3-cfg .tibor3-product-title{
  font-size:1.15rem; font-weight:800; color:var(--t3s-ink); line-height:1.25;
}
.tibor3-cfg .tibor3-product-details{
  color:var(--t3s-blue); text-decoration:underline; font-size:12px; margin-top:-6px;
}
.tibor3-cfg .tibor3-share-btn{
  border-radius:10px; border-color:var(--t3s-line); color:var(--t3s-ink);
}
.tibor3-cfg .tibor3-share-btn:hover{
  background:var(--t3s-blue); border-color:var(--t3s-blue); color:#fff;
}

/* Etiquetas de sección: sentence-case con más presencia */
.tibor3-cfg .tibor3-section-label{
  color:var(--t3s-ink); font-weight:700; letter-spacing:.01em;
  text-transform:none; font-size:13px;
}
.tibor3-cfg .tibor3-section-label strong{ color:var(--t3s-ink); font-weight:800; }

/* Swatches de color: línea suave + anillo azul en el activo */
.tibor3-cfg .tibor3-swatch{ border-color:var(--t3s-line); }
.tibor3-cfg .tibor3-swatch.is-active,
.tibor3-cfg .tibor3-swatch[aria-pressed="true"]{
  border-color:var(--t3s-blue);
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--t3s-blue);
}

/* Desplegable de tallas (matriz talla×cantidad se conserva) */
.tibor3-cfg .tibor3-sizes-dd-sum{
  border-color:var(--t3s-line); border-radius:var(--t3s-rc); padding:12px 14px;
}
.tibor3-cfg .tibor3-sizes-dd-sum:hover{ border-color:var(--t3s-blue); }
.tibor3-cfg .tibor3-sizes-dd[open] .tibor3-sizes-dd-sum{ border-color:var(--t3s-blue); }
.tibor3-cfg .tibor3-sizes-dd[open] .tibor3-sizes{ border-color:var(--t3s-blue); }
.tibor3-cfg .tibor3-size-guide-link{ color:var(--t3s-blue); font-weight:600; }

/* Precio */
.tibor3-cfg .tibor3-price-label{ color:var(--t3s-muted); font-size:13px; }
.tibor3-cfg .tibor3-price{ color:var(--t3s-ink); font-weight:800; }
.tibor3-cfg .tibor3-price-details{ color:var(--t3s-blue); }

/* Botón "Añadir a la cesta": azul del mockup, redondeado */
.tibor3-cfg .tibor3-cart-btn{
  background:var(--t3s-blue); color:#fff; border-radius:12px; font-weight:700;
  box-shadow:0 10px 22px rgba(22,104,227,.28);
}
.tibor3-cfg .tibor3-cart-btn:hover:not(:disabled){ background:var(--t3s-blue-d); }
.tibor3-cfg .tibor3-cart-btn:disabled{ background:#c8d1e0; color:#fff; opacity:1; }

/* Iconos de pago */
.tibor3-cfg .tibor3-pay-ico{
  border-color:var(--t3s-line); color:var(--t3s-muted); border-radius:6px;
}

/* Envío / Devoluciones como filas-tarjeta con chevron ">" */
.tibor3-cfg .tibor3-service{ border-top-color:var(--t3s-line); gap:8px; }
.tibor3-cfg .tibor3-service-row{
  align-items:center; gap:12px; position:relative;
  border:1px solid var(--t3s-line); border-radius:12px; padding:12px 40px 12px 14px;
}
.tibor3-cfg .tibor3-service-row::after{
  content:"\203A"; position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--t3s-muted); font-size:18px; line-height:1;
}
.tibor3-cfg .tibor3-service-ico{ color:var(--t3s-blue); font-size:18px; }
.tibor3-cfg .tibor3-service-txt strong{ color:var(--t3s-ink); font-size:13px; }

/* Fila de compra: "Añadir a la cesta" + corazón */
.tibor3-cfg .tibor3-buy-row{ display:flex; gap:10px; align-items:stretch; }
.tibor3-cfg .tibor3-buy-row .tibor3-cart-btn{ flex:1; margin:0; }
.tibor3-cfg .tibor3-fav-btn{
  flex:0 0 auto; width:52px; border:1px solid var(--t3s-line); border-radius:12px;
  background:#fff; color:var(--t3s-ink); font-size:18px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.tibor3-cfg .tibor3-fav-btn:hover{ color:#e0245e; border-color:#f3c3d0; background:#fff5f8; }

/* =============================================
   BLOQUE 2 · Chip "Editando", barra de herramientas, carrusel, tarjeta de consejo
============================================= */

/* Chip "Editando · Frente": pastilla clara con punto azul */
.tibor3-cfg .tibor3-current-view-chip{
  background:#fff; color:var(--t3s-ink); border:1px solid var(--t3s-line);
  box-shadow:0 4px 14px rgba(31,43,69,.08);
  text-transform:none; letter-spacing:0; font-weight:700;
  border-radius:999px; padding:8px 16px 8px 30px; position:relative;
}
.tibor3-cfg .tibor3-current-view-chip::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--t3s-blue);
}

/* Scroll SIN barra visible: el panel derecho se desplaza pero no se ve la barra;
   el izquierdo, si por altura hiciera falta, también (sin ensuciar el diseño). */
.tibor3-cfg .tibor3-tools,
.tibor3-cfg .tibor3-product{ scrollbar-width:none; -ms-overflow-style:none; }
.tibor3-cfg .tibor3-tools::-webkit-scrollbar,
.tibor3-cfg .tibor3-product::-webkit-scrollbar{ width:0; height:0; }

/* Barra de herramientas: compacta para que quepan las 6 sin scroll; cada icono es un BOTONCITO */
.tibor3-cfg .tibor3-tools{ padding:12px 10px; gap:6px; overflow-y:auto; justify-content:space-between; }
.tibor3-cfg .tibor3-tool{ border-radius:12px; padding:8px 4px; background:transparent; color:var(--t3s-muted); }
.tibor3-cfg .tibor3-tool:hover{ background:transparent; }
.tibor3-cfg .tibor3-tool-ico{
  width:46px; height:46px; border-radius:13px;
  background:#fff; border:1px solid var(--t3s-line);
  box-shadow:0 1px 2px rgba(31,43,69,.05);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--t3s-ink); font-weight:400;
  transition:border-color .15s, box-shadow .15s, background .15s, color .15s;
}
.tibor3-cfg .tibor3-tool:hover .tibor3-tool-ico{ border-color:#c3d4f2; box-shadow:0 6px 14px rgba(31,43,69,.10); }
.tibor3-cfg .tibor3-tool.is-active .tibor3-tool-ico{ background:#eaf1fe; border-color:var(--t3s-blue); color:var(--t3s-blue); }
.tibor3-cfg .tibor3-tool.is-active .tibor3-tool-lbl{ color:var(--t3s-blue); }
.tibor3-cfg .tibor3-tool-lbl{ font-size:11px; color:var(--t3s-muted); margin-top:2px; }

/* Carrusel de vistas ENCERRADO en un panel abajo */
.tibor3-cfg .tibor3-views{
  background:var(--t3s-glass);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--t3s-glass-brd); border-radius:16px;
  padding:12px 14px; margin-top:16px; box-shadow:0 12px 30px rgba(31,43,69,.10);
}
.tibor3-cfg .tibor3-view-thumb{ border-radius:10px; }
.tibor3-cfg .tibor3-view-thumb:hover{ border-color:#c3d4f2; }
.tibor3-cfg .tibor3-view-thumb.is-active{ border-color:var(--t3s-blue); box-shadow:0 0 0 1px var(--t3s-blue) inset; }
.tibor3-cfg .tibor3-view-label{ color:var(--t3s-muted); font-weight:600; margin-top:10px; }

/* Tarjeta flotante "Consejo de personalización" */
.tibor3-cfg .tibor3-stage-wrap{ position:relative; }
.tibor3-cfg .tibor3-tipcard{
  position:absolute; left:18px; bottom:76px; z-index:5;
  width:288px; max-width:calc(100% - 36px);
  background:#fff; border:1px solid var(--t3s-line); border-radius:16px;
  box-shadow:0 18px 40px rgba(31,43,69,.14); padding:16px 16px 14px;
}
.tibor3-cfg .tibor3-tipcard-x{
  position:absolute; top:10px; right:12px; border:0; background:transparent;
  color:var(--t3s-muted); font-size:18px; line-height:1; cursor:pointer;
}
.tibor3-cfg .tibor3-tipcard-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tibor3-cfg .tibor3-tipcard-ico{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:#eaf1fe; color:var(--t3s-blue);
  display:inline-flex; align-items:center; justify-content:center; font-size:16px;
}
.tibor3-cfg .tibor3-tipcard-head strong{ color:var(--t3s-ink); font-size:14px; }
.tibor3-cfg .tibor3-tipcard-txt{ margin:0 0 12px; color:var(--t3s-muted); font-size:12.5px; line-height:1.5; }
.tibor3-cfg .tibor3-tipcard-chip{
  display:flex; align-items:center; gap:10px;
  background:#eef4fe; border:1px solid #d9e6fd; border-radius:10px; padding:10px 12px;
  color:var(--t3s-ink); font-size:12px; line-height:1.35;
}
.tibor3-cfg .tibor3-tipcard-chip i{ color:var(--t3s-blue); font-size:16px; flex:none; }
.tibor3-cfg .tibor3-tipcard-chip b{ font-weight:800; }

/* En móvil la tarjeta de consejo estorba el lienzo → oculta */
@media (max-width:820px){
  .tibor3-cfg .tibor3-tipcard{ display:none; }
}

/* =============================================================
   MOBILE APP 2026
   El skin de escritorio se carga después del plugin. Esta capa
   neutraliza únicamente sus dimensiones desktop y deja una sola
   composición móvil coherente, sin tocar el motor del configurador.
   ============================================================= */
@media (max-width:760px){
  body:has(.tibor3-cfg){
    overflow:hidden!important;
    background:#edf3fa;
  }

  body:has(.tibor3-cfg) .t26-chrome:not(.t26-footer) > .promo,
  body:has(.tibor3-cfg) .t26-chrome:not(.t26-footer) > .mainnav,
  body:has(.tibor3-cfg) .t26-chrome.t26-footer,
  body:has(.tibor3-cfg) footer.t26-footer,
  body:has(.tibor3-cfg) .tibor-footer-usp,
  body:has(.tibor3-cfg) .tibor-footer-main{
    display:none!important;
  }

  .container:has(.tibor3-cfg),
  .container:has(.tibor3-cfg) > div,
  .container:has(.tibor3-cfg) .entry-content{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .container:has(.tibor3-cfg) > div > h1{
    display:none!important;
  }

  .tibor3-cfg[data-mode="mobile"]{
    --t3m-blue:#0b3f91;
    --t3m-blue-dark:#072f70;
    --t3m-ink:#13233b;
    --t3m-muted:#687b91;
    --t3m-line:#d7e3f0;
    --t3m-surface:rgba(255,255,255,.96);
    position:fixed;
    top:var(--t3-header-h,0px);
    right:0;
    bottom:0;
    left:0;
    z-index:9000;
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    min-width:0;
    max-width:none;
    height:calc(100dvh - var(--t3-header-h,0px));
    min-height:0;
    max-height:none;
    margin:0;
    padding:0 0 calc(78px + env(safe-area-inset-bottom));
    overflow:hidden;
    border:0;
    border-radius:0;
    background:
      radial-gradient(circle at 50% 42%,rgba(255,255,255,.95) 0,rgba(242,247,253,.86) 36%,rgba(224,234,246,.92) 100%);
    box-shadow:none;
    box-sizing:border-box;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-breadcrumb{
    display:none!important;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-breadcrumb a{
    flex:none;
    color:var(--t3m-blue);
    font-weight:750;
    text-decoration:none;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-breadcrumb-current{
    min-width:0;
    overflow:hidden;
    color:#7a8ba0;
    text-overflow:ellipsis;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-tools,
  .tibor3-cfg[data-mode="mobile"] .tibor3-product{
    display:none!important;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-stage-wrap{
    position:relative;
    flex:1 1 auto;
    width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-stage{
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    background:transparent;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbar{
    position:absolute;
    top:12px;
    left:0;
    right:0;
    z-index:20;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
    width:100%;
    padding:0 16px;
    border:0;
    background:transparent;
    pointer-events:none;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbar > *{
    pointer-events:auto;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-undoredo{
    justify-self:start;
    display:grid;
    grid-template-columns:48px 48px;
    min-height:50px;
    overflow:hidden;
    border:1px solid var(--t3m-line);
    border-radius:18px;
    background:var(--t3m-surface);
    box-shadow:0 10px 28px rgba(21,54,93,.12);
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbtn{
    width:48px;
    height:50px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--t3m-blue);
    font-size:17px;
    box-shadow:none;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbtn + .tibor3-m-topbtn{
    border-left:1px solid #e3ebf4;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbtn:disabled{
    color:#b4c0cd;
    opacity:1;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-colorbtn{
    justify-self:center;
    min-width:122px;
    min-height:50px;
    margin:0;
    padding:0 16px;
    border:1px solid var(--t3m-line);
    border-radius:18px;
    background:var(--t3m-surface);
    color:var(--t3m-ink);
    font-size:14px;
    font-weight:750;
    box-shadow:0 10px 28px rgba(21,54,93,.12);
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-colorbtn-dot{
    width:23px;
    height:23px;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #a9b7c7;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-morebtn{
    justify-self:end;
    width:50px;
    height:50px;
    margin:0;
    padding:0;
    border:1px solid var(--t3m-line);
    border-radius:18px;
    background:var(--t3m-surface);
    color:var(--t3m-blue);
    font-size:18px;
    box-shadow:0 10px 28px rgba(21,54,93,.12);
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-views{
    position:relative;
    z-index:10;
    flex:0 0 auto;
    align-self:center;
    display:grid;
    grid-template-columns:46px minmax(112px,1fr) 46px;
    grid-template-rows:30px 20px;
    align-items:center;
    justify-items:center;
    width:min(272px,calc(100% - 64px));
    min-width:0;
    height:64px;
    margin:6px auto 8px;
    padding:5px 8px;
    column-gap:2px;
    row-gap:0;
    border:1px solid var(--t3m-line);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 26px rgba(21,54,93,.11);
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-arrow{
    grid-row:1 / span 2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:0;
    padding:0;
    border:0;
    border-radius:13px;
    background:transparent;
    color:var(--t3m-blue);
    font-size:18px;
  }

  .tibor3-cfg[data-mode="mobile"] #tibor3-m-prev{ grid-column:1; }
  .tibor3-cfg[data-mode="mobile"] #tibor3-m-next{ grid-column:3; }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-dots{
    grid-column:2;
    grid-row:1;
    justify-content:center;
    gap:0;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-dot{
    width:21px;
    height:30px;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-view-label{
    grid-column:2;
    grid-row:2;
    margin:0;
    color:var(--t3m-ink);
    font-size:12px;
    font-weight:750;
    line-height:1;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    display:grid;
    grid-template-columns:1fr 1fr 1.25fr;
    gap:6px;
    min-height:calc(72px + env(safe-area-inset-bottom));
    margin:0;
    padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border:1px solid rgba(205,219,234,.98);
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:20px 20px 0 0;
    background:rgba(255,255,255,.97);
    box-shadow:0 14px 36px rgba(8,47,112,.20);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab{
    width:100%;
    min-width:0;
    min-height:58px;
    margin:0;
    padding:7px 4px 6px;
    border:1px solid transparent;
    border-radius:15px;
    background:transparent;
    color:var(--t3m-ink);
    font-size:11px;
    font-weight:750;
    line-height:1.1;
    box-shadow:none;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab-add{
    border-color:#e0e9f3;
    background:#f3f7fc;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab-cart{
    border-color:var(--t3m-blue);
    background:linear-gradient(145deg,#0d4aa8 0%,#082f78 100%);
    color:#fff;
    box-shadow:0 8px 18px rgba(11,63,145,.24);
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab-ico,
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab-add-ico{
    min-height:22px;
    color:var(--t3m-blue);
    font-size:19px;
  }

  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab-cart .tibor3-m-tab-ico{
    color:#fff;
  }

  .tibor3-cfg[data-mode="mobile"] :is(.tibor3-m-topbtn,.tibor3-m-colorbtn,.tibor3-m-morebtn,.tibor3-m-arrow,.tibor3-m-tab):focus-visible{
    outline:3px solid rgba(22,104,227,.32);
    outline-offset:2px;
  }
}

@media (max-width:370px){
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbar{
    padding-inline:10px;
    gap:5px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-undoredo{
    grid-template-columns:44px 44px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbtn{
    width:44px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-colorbtn{
    min-width:108px;
    padding-inline:12px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tabbar{
    grid-template-columns:.92fr .92fr 1.28fr;
    gap:4px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab{
    font-size:10px;
  }
}

@media (max-width:760px) and (max-height:640px){
  .tibor3-cfg[data-mode="mobile"]{
    padding-bottom:calc(70px + env(safe-area-inset-bottom));
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-topbar{
    top:8px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-views{
    height:58px;
    margin-block:4px 6px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tabbar{
    min-height:66px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab{
    min-height:52px;
    padding-block:5px;
  }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .tibor3-cfg[data-mode="mobile"] *,
  .tibor3-cfg[data-mode="mobile"] *::before,
  .tibor3-cfg[data-mode="mobile"] *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

/* =============================================================
   PULIDO VISUAL DEL MÓVIL — 9 ago 2026
   Solo presentación y SOLO móvil (<=760px). No toca el escritorio,
   ni el canvas, ni las zonas, ni precio/carrito/AJAX.
   Va al final a propósito: misma especificidad que las reglas de
   arriba, así que gana por orden y se puede borrar de una pieza.
   ============================================================= */
@media (max-width:760px){

  /* 1. FIGURA / FONDO — el problema de raíz.
     El producto casi siempre es BLANCO (bolsa, gorra, camiseta) y el lienzo
     tenía el núcleo casi blanco: la prenda se disolvía en el fondo y la
     pantalla parecía vacía. El degradado arranca con más tinte azul para que
     el producto tenga silueta. Sigue siendo claro: un fondo oscuro delataría
     los recortes con halo de los mockups. */
  .tibor3-cfg[data-mode="mobile"]{
    background:radial-gradient(120% 90% at 50% 38%,#f2f7fd 0%,#e6eef8 46%,#d6e2f0 100%);
  }

  /* 2. AIRE ALREDEDOR DEL PRODUCTO.
     El visor iba a sangre: el mockup tocaba la píldora de Color por arriba y
     el carrusel de vistas por abajo. Konva reajusta su canvas al redimensionar
     y las zonas de diseño se dibujan DENTRO de ese mismo canvas, así que este
     margen NO puede descolocarlas respecto al producto (comprobado en vivo). */
  .tibor3-cfg[data-mode="mobile"] .tibor3-stage-wrap{
    padding:76px 20px 12px;
  }

  /* 3. LA BARRA INFERIOR DEJA DE SER UNA LOSA BLANCA.
     Eran 72px de blanco opaco a todo el ancho con filo y sombra fuerte: contra
     el lienzo azul se leía como un borde blanco pegado abajo (es lo que Javier
     señaló). Ahora es superficie translúcida sobre el propio lienzo — el blur
     ya estaba puesto —, así que se integra con lo que tenga detrás. */
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tabbar{
    border-top:0;
    border-radius:24px 24px 0 0;
    background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.66) 55%,rgba(255,255,255,.72) 100%);
    box-shadow:0 -1px 0 rgba(255,255,255,.9) inset,0 -10px 30px rgba(15,52,105,.10);
  }

  /* 4. UNA SOLA ACCIÓN PRIMARIA.
     "Añadir" llevaba tarjeta propia y "Productos" no: dos secundarios con peso
     distinto, compitiendo entre ellos y con el CTA. El único destacado debe ser
     la cesta. */
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab-add{
    background:transparent;
    border-color:transparent;
  }

  /* 5. ESCALA DE RADIOS COHERENTE — 24 barra · 18 tarjetas · 14 botones.
     Convivían 13, 14, 15, 18, 19 y 20 sin criterio; la irregularidad se lee
     como falta de acabado aunque no se sepa nombrar. */
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-views,
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-undoredo,
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-colorbtn,
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-morebtn{
    border-radius:18px;
  }
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-tab{
    border-radius:14px;
  }
}

/* Pantallas bajas: se recorta el aire de arriba para no comerse el visor.
   Va después del bloque de max-height:640px de más arriba, que ajusta otras
   propiedades (min-height, márgenes) y sigue mandando en ellas. */
@media (max-width:760px) and (max-height:640px){
  .tibor3-cfg[data-mode="mobile"] .tibor3-stage-wrap{
    padding:62px 16px 8px;
  }
}

/* =============================================================
   CORRECCIONES MÓVIL — 9 ago 2026 (menú duplicado · menú que no
   abría · franja blanca inferior). Diagnosticadas en vivo sobre
   pruebas.dforp.es, no a ojo. Solo presentación y solo <=760px.
   ============================================================= */
@media (max-width:760px){

  /* A. DOBLE MENÚ.
     En la cabecera había DOS hamburguesas: `.burger` del tema (izquierda, la
     buena) y `.tibor3-header-menu` (derecha), que `style.css` enseña solo en
     esta página. La de la derecha además NO HACÍA NADA: su handler
     (configurator.js) hace click sobre `.mobile-menu-toggle`, un elemento que
     no existe en el DOM. Se oculta y queda la del tema, que sí funciona. */
  body:has(.tibor3-cfg) .tibor3-header-menu{
    display:none !important;
  }

  /* B. EL MENÚ SÍ SE ABRÍA — pero no se veía.
     Dos causas encadenadas:
     1) Para ganar viewport, el CSS del configurador oculta `.mainnav` con
        `display:none!important`. Eso también mataba el menú al desplegarlo:
        quedaba con class="mainnav open" y display:none. Se exceptúa el estado
        abierto (`.open` sube la especificidad, así que gana al !important).
     2) `.t26-chrome` es `position:relative; z-index:9000` → crea contexto de
        apilado. Subirle el z-index al hijo NO sirve: no puede escapar del
        padre, y `.tibor3-cfg` (también 9000, pero posterior en el DOM) pintaba
        encima. Por eso se sube el CONTENEDOR, y solo mientras el menú está
        abierto: al cerrarlo vuelve a 9000 él solo. */
  body:has(.tibor3-cfg) .t26-chrome:not(.t26-footer) > .mainnav.open{
    display:block !important;
  }
  body:has(.tibor3-cfg):has(.mainnav.open) .t26-chrome:not(.t26-footer){
    z-index:9500;
  }

  /* C. LA FRANJA BLANCA DE ABAJO.
     No era la barra: era `.tibor3-m-sheet`, el panel inferior CERRADO. El CSS
     del plugin lo convirtió en tarjeta flotante con `bottom:8px` pero lo sigue
     escondiendo con `translateY(100%)`, que desplaza solo su propia altura →
     asomaban esos 8px por encima del borde, pintados sobre la barra. Se aparca
     contando también el hueco y la sombra. Al abrirse manda `.is-open`. */
  .tibor3-cfg[data-mode="mobile"] .tibor3-m-sheet:not(.is-open){
    transform:translateY(calc(100% + max(8px, env(safe-area-inset-bottom)) + 10px));
  }
}