/* Diseño Vitrina: limpio y directo, con los colores y letras del tema de la florería. Mobile first (375 px). */
.diseno-vitrina{
  --tinta:#1d1b1c;
  --suave:#66605f;
  --linea:color-mix(in srgb, var(--marca) 12%, #e9e6e6);
  --papel:#fff;
  --wa:#25D366;
  --wa-tinta:#04361a;
  --marca-honda:color-mix(in srgb, var(--marca) 80%, #000);
  --r:18px;
}
.diseno-vitrina *{box-sizing:border-box}
html:has(.diseno-vitrina){scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html:has(.diseno-vitrina){scroll-behavior:auto}}
body.diseno-vitrina{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.5 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.diseno-vitrina img{display:block;max-width:100%}
.diseno-vitrina :where(a){color:inherit}
.diseno-vitrina h1,.diseno-vitrina h2{font-family:var(--titulos);font-weight:600;letter-spacing:-.01em;margin:0}
.vt-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}

/* franja de vista previa (la pone el layout) */
.diseno-vitrina .franja-muestra{margin:0;background:var(--marca-suave);color:var(--suave);font-size:12.5px;text-align:center;padding:6px 16px}
.diseno-vitrina .franja-muestra a{color:var(--marca-honda);font-weight:700}

/* la franja corta de la florería */
.vt-aviso{margin:0;background:var(--marca);color:#fff;font-size:13.5px;font-weight:600;text-align:center;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.3}
.vt-aviso i{font-size:16px;flex:0 0 auto}

/* encabezado: el logo siempre a la vista */
.vt-top{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--papel) 94%, transparent);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--linea)}
.vt-top-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.vt-marca{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.vt-marca img{flex:0 0 auto;width:44px;height:44px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--linea)}
.vt-marca span{font-family:var(--titulos);font-weight:600;font-size:18px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* botones */
.vt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font:600 15.5px/1 var(--texto);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease;-webkit-tap-highlight-color:transparent}
.vt-btn i{font-size:20px}
.vt-btn:active{transform:scale(.97)}
.vt-principal{background:var(--marca);color:#fff}
.vt-wa{background:var(--wa);color:var(--wa-tinta)}
@media (hover:hover){.vt-principal:hover{background:var(--marca-honda)}.vt-wa:hover{background:#1fc05b}}
.vt-wa-top{min-height:44px;width:44px;padding:0;font-size:14.5px;flex:0 0 auto}
.vt-wa-top i{font-size:24px}
.vt-wa-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:560px){.vt-wa-top{width:auto;padding:0 18px}.vt-wa-top i{font-size:20px}.vt-wa-top span{position:static;width:auto;height:auto;clip:auto}}
.diseno-vitrina :is(a,button):focus-visible{outline:3px solid var(--marca);outline-offset:3px}

/* categorías como chips */
.vt-chips-fila{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none;scroll-padding-inline:16px}
.vt-chips-fila::-webkit-scrollbar{display:none}
.vt-chip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--linea);background:var(--papel);font-size:14.5px;font-weight:600;text-decoration:none;color:var(--tinta);transition:background .15s,color .15s,border-color .15s}
.vt-chip[aria-current]{background:var(--marca);border-color:var(--marca);color:#fff}
@media (hover:hover){.vt-chip:not([aria-current]):hover{border-color:var(--marca)}}

/* cuadrícula de arreglos (la comparte la liga de mayoreo; la tienda la afina más abajo con .vt-tienda) */
.vt-seccion{padding-top:32px;scroll-margin-top:120px}
.vt-seccion h2{font-size:24px;margin-bottom:14px}
.vt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){.vt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.vt-seccion h2{font-size:28px}}
@media (min-width:1100px){.vt-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.vt-card{display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
@media (hover:hover){.vt-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -16px rgb(29 27 28 / .25)}}
.vt-foto{display:grid;place-items:center;aspect-ratio:4/5;background:var(--marca-suave);overflow:hidden}
.vt-foto img{width:100%;height:100%;object-fit:cover}
.vt-foto i{font-size:44px;color:var(--marca)}
.vt-card-texto{display:flex;flex-direction:column;gap:4px;padding:10px 10px 12px;flex:1}
.vt-card-texto strong{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt-precio{font-weight:700;color:var(--marca-honda);font-size:15px}
.vt-sin-precio{font-weight:500;color:var(--suave);font-size:14px}
@media (min-width:768px){.vt-card-texto{padding:14px 14px 16px}.vt-card-texto strong{font-size:16px}}


/* =====================================================================
   TIENDA (solo dentro de .vt-tienda y .vt-top-tienda; la liga de mayoreo no se toca)
   Sobrio y editorial: poco, centrado, con aire. Sin cajas, sin sombras.
   ===================================================================== */
.vt-top-tienda{background:var(--papel);backdrop-filter:none;-webkit-backdrop-filter:none}
.vt-top-tienda .vt-wrap{max-width:1120px;padding-left:20px;padding-right:20px}
.vt-top-tienda .vt-top-fila{min-height:72px}
.vt-top-tienda .vt-marca{gap:14px}
.vt-top-tienda .vt-marca img{width:auto;max-width:120px;height:52px;border:0;background:none;border-radius:12px;object-fit:contain}
.vt-top-tienda .vt-marca span{font-size:19px;font-weight:600}
@media (min-width:860px){.vt-top-tienda .vt-top-fila{min-height:84px}.vt-top-tienda .vt-marca img{height:56px;max-width:140px}.vt-top-tienda .vt-marca span{font-size:22px}}

.vt-tienda .vt-wrap{max-width:1120px;padding-left:20px;padding-right:20px}

/* portada: en celular foto arriba y texto centrado; en monitor dos columnas */
.vt-portada{display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:24px;padding-bottom:8px;text-align:center}
.vt-portada-foto{width:100%;max-width:460px}
.vt-portada-foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:20px;background:var(--marca-suave)}
.vt-portada-texto{display:flex;flex-direction:column;align-items:center;width:100%}
.vt-ciudad{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--marca-texto)}
.vt-portada h1{font-size:clamp(34px,9.5vw,44px);line-height:1.08;letter-spacing:-.02em;font-weight:600;text-wrap:balance;color:var(--tinta)}
.vt-portada h1 em{font-style:italic;color:var(--marca-texto)}
.vt-sub{margin:16px 0 28px;max-width:34ch;font-size:17px;line-height:1.55;color:var(--suave)}
.vt-btn-grande{min-height:54px;font-size:16.5px;padding:0 36px}
.vt-portada .vt-btn{width:100%}
@media (min-width:860px){
  .vt-portada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:clamp(48px,8vw,112px);align-items:center;text-align:left;padding-top:56px;padding-bottom:24px}
  .vt-portada-foto{grid-column:2;grid-row:1;max-width:none}
  .vt-portada-foto img{aspect-ratio:4/5} /* en el celular cuadrada, para que el título y el botón suban */
  .vt-portada-texto{grid-column:1;grid-row:1;align-items:flex-start}
  .vt-portada h1{font-size:clamp(46px,4.6vw,64px);line-height:1.04}
  .vt-sub{font-size:18px;max-width:30ch;margin:20px 0 36px}
  .vt-portada .vt-btn{width:auto}
  .vt-portada-sin-foto{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:88px;padding-bottom:24px}
  .vt-portada-sin-foto .vt-portada-texto{align-items:center}
  .vt-portada-sin-foto h1{max-width:18ch}
}
@media (max-width:859px){.vt-portada-sin-foto{padding-top:48px}}

/* portada de monitor (≥1024 px): oculta en celular y tableta. .vt-heroe-a es el mosaico (Omar, 11-nov); .vt-heroe-b (foto al frente) solo cuando hay menos de 4 fotos */
.vt-heroe{display:none}
@media (min-width:1024px){
  .vt-portada-movil{display:none}
  .vt-heroe{display:block;position:relative;width:100%;height:clamp(620px,calc(100svh - 120px),920px);overflow:hidden}
  .vt-heroe-b{height:auto;min-height:clamp(620px,calc(100svh - 120px),920px);display:flex} /* un lema largo crece hacia abajo, no se corta */
  .vt-heroe h1{font-size:clamp(72px,6.6vw,104px);line-height:.98;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
  .vt-heroe .vt-ciudad{margin-bottom:26px;font-size:13px;letter-spacing:.22em}
  .vt-heroe .vt-sub{max-width:32ch;font-size:19px;margin:28px 0 40px}
  .vt-heroe .vt-btn{width:auto}
}

/* A · Mosaico: collage a todo el ancho; el título va en un panel sólido */
@media (min-width:1024px){
  .vt-heroe-mosaico{display:grid;height:100%;gap:7px;grid-template-columns:min(38%,600px) repeat(3,minmax(0,1fr));grid-template-rows:56fr 44fr;background:var(--fondo)}
  .vt-mt{overflow:hidden;background:var(--marca-suave);min-height:0;min-width:0}
  .vt-mt img{width:100%;height:100%;object-fit:cover}
  .vt-mt-1{grid-column:1;grid-row:1/3}
  .vt-heroe-panel{grid-column:2/5;grid-row:1;background:var(--papel);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(32px,4.4vw,80px);min-width:0}
  .vt-heroe-a .vt-heroe-panel h1{font-size:clamp(60px,5.6vw,92px)}
  .vt-mt-2{grid-column:2;grid-row:2}
  .vt-mt-3{grid-column:3;grid-row:2}
  .vt-mt-4{grid-column:4;grid-row:2}
}

/* B · Foto al frente: fondo borroso de la misma foto y la foto nítida delante */
@media (min-width:1024px){
  .vt-heroe-b{background:#1d1416;color:#fff}
  .vt-heroe-fondo{position:absolute;inset:0;overflow:hidden}
  .vt-heroe-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(48px) saturate(1.6);transform:scale(1.25)}
  .vt-heroe-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--marca) 25%,rgba(14,6,9,.97)) 0,rgba(14,6,9,.74) 38%,rgba(14,6,9,.28) 72%,rgba(14,6,9,.4))}
  .vt-heroe-fila{position:relative;width:100%;padding-block:64px;max-width:1360px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,6vw,120px)}
  .vt-heroe-b .vt-ciudad{color:rgba(255,255,255,.88)}
  .vt-heroe-b h1{color:#fff}
  .vt-heroe-b h1 em{color:color-mix(in srgb, var(--marca) 30%, #fff)}
  .vt-heroe-b .vt-sub{color:rgba(255,255,255,.9)}
  .vt-heroe-texto{display:flex;flex-direction:column;align-items:flex-start}
  .vt-heroe-b h1{font-size:clamp(68px,6vw,96px)}
  .vt-heroe-frente{width:clamp(380px,32vw,480px)}
  .vt-heroe-frente img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:20px;box-shadow:0 40px 90px -20px rgba(0,0,0,.65),0 12px 28px rgba(0,0,0,.35)}
}

/* categorías y tarjetas */
.vt-tienda .vt-seccion{padding-top:56px;scroll-margin-top:96px}
.vt-tienda .vt-seccion h2{font-size:28px;margin-bottom:22px}
.vt-tienda .vt-grid{gap:28px 14px}
.vt-tienda .vt-card{background:none;border:0;border-radius:0;overflow:visible;box-shadow:none;transform:none;transition:none;gap:0}
.vt-tienda .vt-foto{border-radius:16px;position:relative}
.vt-tienda .vt-foto img{transition:transform .5s cubic-bezier(.16,1,.3,1),filter .3s}
.vt-tienda .vt-foto i{font-size:48px;color:var(--marca-honda);opacity:.7}
.vt-tienda .vt-card-texto{padding:14px 2px 0;gap:3px}
.vt-tienda .vt-card-texto strong{font-size:16px;font-weight:500;line-height:1.35;color:var(--tinta)}
.vt-tienda .vt-precio{font-weight:400;font-size:15px;color:var(--suave)}
.vt-tienda .vt-sin-precio{font-size:14.5px}
.vt-lo-quiero{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:2px;font-size:15px;font-weight:600;color:var(--marca-texto)}
.vt-lo-quiero span{display:inline-block;transition:transform .25s}
.vt-tienda .vt-card:focus-visible{outline:3px solid var(--marca);outline-offset:4px;border-radius:16px}
@media (hover:hover){
  .vt-tienda .vt-card:hover .vt-foto img{transform:scale(1.04);filter:brightness(1.03)}
  .vt-tienda .vt-card:hover .vt-lo-quiero span{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){.vt-tienda .vt-foto img,.vt-lo-quiero span{transition:none}.vt-tienda .vt-card:hover .vt-foto img,.vt-tienda .vt-card:hover .vt-lo-quiero span{transform:none}}
@media (min-width:768px){
  .vt-tienda .vt-grid{gap:36px 24px}
  .vt-tienda .vt-card-texto{padding:16px 2px 0}
}
@media (min-width:860px){.vt-tienda .vt-seccion{padding-top:72px}.vt-tienda .vt-seccion h2{font-size:34px;margin-bottom:30px}}
@media (min-width:1100px){.vt-tienda .vt-grid{gap:44px 28px}}

.vt-vacio{padding:72px 20px;text-align:center}
.vt-vacio h2{font-size:26px}
.vt-vacio p{color:var(--suave);margin:8px 0 22px}

/* pie */
.vt-pie{margin-top:88px;border-top:1px solid var(--linea);text-align:center;padding:48px 0 40px;background:none}
.vt-pie img{width:auto;max-width:72px;height:64px;border-radius:12px;object-fit:contain;margin:0 auto 12px}
.vt-pie h2{font-size:22px}
.vt-pie ul{list-style:none;margin:12px 0 22px;padding:0;display:grid;gap:6px;color:var(--suave);font-size:15px}
.vt-pie li{display:flex;align-items:center;justify-content:center;gap:6px}
.vt-pie li a{color:var(--suave)}
.vt-hecho{margin:36px 0 0;color:var(--suave);font-size:13.5px}
.vt-hecho a{color:var(--suave);display:inline-block;padding:10px 4px}

/* Texto que no cabe: una palabra larguísima se parte; un lema largo baja de tamaño en la portada de monitor */
.vt-tienda :is(h1,.vt-sub,.vt-card-texto strong),.vt-pie h2{overflow-wrap:anywhere}
@media (min-width:1024px){
  .vt-heroe.vt-titulo-largo h1,.vt-heroe-a.vt-titulo-largo .vt-heroe-panel h1,.vt-heroe-b.vt-titulo-largo h1{font-size:clamp(40px,3.8vw,60px);line-height:1.05}
}
/* Botón y foco con contraste AA aun con un color de marca claro (--marca-pie y --marca-texto los calcula Tema) */
.vt-tienda .vt-principal{background:var(--marca-pie)}
.vt-tienda :is(a,button):focus-visible,.vt-top-tienda :is(a,button):focus-visible,.vt-tienda .vt-card:focus-visible{outline-color:var(--marca-texto)}