/* =====================================================================
   Vestido «Artesanal» (app/Vestidos.php): el de Gustitos Blanquita, copiado pieza por pieza de su demo
   (beholia.com/demos/gustitosblanquita, tema «pasteleria» del CMS viejo). Chocolate y crema, festones que cuelgan entre
   secciones, chispas de dos colores, la foto en un sello festoneado con su sombra rosada y la insignia del negocio encima,
   la cinta inclinada, promociones en mosaico sobre chocolate, pasos numerados y el contacto con sus números.
   Todo sale de los colores de la marca (--t-*): primario = chocolate, acento = frambuesa, fondo = crema, apoyo = caramelo.
   ===================================================================== */
.vestido-artesanal {
  --feston: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20320%20320%27%3E%3Cpath%20d%3D%27M%20160.00%2010.00%20A%2020.97%2020.97%200%200%201%20195.90%2014.36%20A%2020.97%2020.97%200%200%201%20229.71%2027.18%20A%2020.97%2020.97%200%200%201%20259.47%2047.72%20A%2020.97%2020.97%200%200%201%20283.45%2074.79%20A%2020.97%2020.97%200%200%201%20300.25%20106.81%20A%2020.97%2020.97%200%200%201%20308.91%20141.92%20A%2020.97%2020.97%200%200%201%20308.91%20178.08%20A%2020.97%2020.97%200%200%201%20300.25%20213.19%20A%2020.97%2020.97%200%200%201%20283.45%20245.21%20A%2020.97%2020.97%200%200%201%20259.47%20272.28%20A%2020.97%2020.97%200%200%201%20229.71%20292.82%20A%2020.97%2020.97%200%200%201%20195.90%20305.64%20A%2020.97%2020.97%200%200%201%20160.00%20310.00%20A%2020.97%2020.97%200%200%201%20124.10%20305.64%20A%2020.97%2020.97%200%200%201%2090.29%20292.82%20A%2020.97%2020.97%200%200%201%2060.53%20272.28%20A%2020.97%2020.97%200%200%201%2036.55%20245.21%20A%2020.97%2020.97%200%200%201%2019.75%20213.19%20A%2020.97%2020.97%200%200%201%2011.09%20178.08%20A%2020.97%2020.97%200%200%201%2011.09%20141.92%20A%2020.97%2020.97%200%200%201%2019.75%20106.81%20A%2020.97%2020.97%200%200%201%2036.55%2074.79%20A%2020.97%2020.97%200%200%201%2060.53%2047.72%20A%2020.97%2020.97%200%200%201%2090.29%2027.18%20A%2020.97%2020.97%200%200%201%20124.10%2014.36%20A%2020.97%2020.97%200%200%201%20160.00%2010.00%20Z%27%2F%3E%3C%2Fsvg%3E");
  --rosa-suave: color-mix(in srgb, var(--t-rosa) 32%, var(--t-fondo));
  --linea-g: color-mix(in srgb, var(--t-apoyo) 26%, var(--t-fondo));
  --ceja: var(--t-apoyo-texto);
  --t-ancho: 1180px;
  /* el borde entre secciones: medialunas de la sección de arriba que cuelgan sobre la de abajo, como en la demo */
  --borde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Cpath d='M0 0h1a21 21 0 0 0 42 0h1v22H0z'/%3E%3C/svg%3E");
  font-size: 17px;
}
.vestido-artesanal.borde-feston main > .s + .s::before, .vestido-artesanal.borde-feston .vp-seccion + .vp-seccion > .s::before {
  top: -21px; height: 22px; -webkit-mask: var(--borde) repeat-x 0 0 / 44px 22px; mask: var(--borde) repeat-x 0 0 / 44px 22px;
}
.vestido-artesanal .s h1, .vestido-artesanal .s h2, .vestido-artesanal .s h3 { font-weight: 900; line-height: 1.06; letter-spacing: -.01em; }
.vestido-artesanal .s .s-ceja { display: inline-flex; align-items: center; gap: 10px; color: var(--ceja); font-weight: 800; font-size: .8rem; letter-spacing: .2em; }
.vestido-artesanal .s .s-ceja::before { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--t-apoyo); }
.vestido-artesanal .s-cab { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 4vw, 48px); }
.vestido-artesanal .s-cab .s-ceja::after { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--t-apoyo); }
.vestido-artesanal .s-cab h2 { margin: 14px 0 12px; font-size: calc(clamp(2rem, 4.4vw, 3rem) * var(--t-tamano)); letter-spacing: -.02em; }
.vestido-artesanal .s-cab p:not(.s-ceja) { font-size: 1.05rem; }
.vestido-artesanal .s-boton { padding: .85em 1.4em; font-weight: 800; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--b) 85%, transparent); }
.vestido-artesanal .s-boton-borde { box-shadow: none; }
.vestido-artesanal .s-boton-borde:hover { background: var(--tx); color: var(--bg) !important; }

/* chispas de dos colores: en la portada y en las franjas de chocolate */
.vestido-artesanal :is(.portada, .contacto.fondo-banda) { background-image: var(--t-chispas); }
.vestido-artesanal .fondo-banda { --ceja: var(--t-apoyo-banda); }
.vestido-artesanal .fondo-banda .s-boton-borde { border-color: var(--tx); color: var(--tx) !important; }

/* --- cabecera --- */
.vestido-artesanal .w-cabecera { background: color-mix(in srgb, var(--t-fondo) 92%, transparent); }
.vestido-artesanal .w-cabecera-fila { min-height: 72px; }
.vestido-artesanal .w-marca img { width: 50px; height: 50px; }
.vestido-artesanal .w-marca span { font: 700 1.3rem/1 var(--t-titulos); letter-spacing: -.01em; }
.vestido-artesanal .w-nav { gap: 26px; }
.vestido-artesanal .w-nav a:not(.s-boton) { position: relative; font-weight: 700; color: var(--t-primario); }
.vestido-artesanal .w-nav a:not(.s-boton)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--t-acento); transition: right .25s; }
.vestido-artesanal .w-nav a:not(.s-boton):hover::after { right: 0; }
.vestido-artesanal .w-nav .s-boton { padding: .6em 1em; font-size: .9rem; }

/* --- portada: la foto en un sello festoneado (sombra rosada + borde de chocolate) con la insignia encima --- */
.vestido-artesanal .portada { padding-block: calc(clamp(40px, 7vw, 88px) * var(--t-aire)) calc(clamp(56px, 8vw, 104px) * var(--t-aire)); }
.vestido-artesanal .portada .rej { grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); }
.vestido-artesanal .s.portada h1 { text-wrap: wrap; }
.vestido-artesanal .portada h1 { margin: 18px 0 20px; font-size: calc(clamp(2.6rem, 6.2vw, 4.6rem) * var(--t-tamano)); letter-spacing: -.02em; line-height: 1.06; }
.vestido-artesanal .s.portada h1 em { position: relative; font-weight: 600; color: var(--t-primario); }
@media (min-width: 561px) { .vestido-artesanal .s.portada h1 em { white-space: nowrap; } }
.vestido-artesanal .portada h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.18em; height: .3em; background: var(--t-apoyo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C60 4 140 2 297 10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C60 4 140 2 297 10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.vestido-artesanal .portada .s-bajada { font-size: 1.15rem; max-width: 33em; }
.vestido-artesanal .portada .s-acciones { margin-top: 30px; }
.vestido-artesanal .portada .s-garantias { margin-top: 34px; gap: 10px 22px; font-weight: 700; font-size: .95rem; color: var(--t-primario); }
.vestido-artesanal .portada .s-garantias .ico { color: var(--t-apoyo-texto); }
.vestido-artesanal .portada.f-sello .fot, .vestido-artesanal .portada.f-texto-foto .fot { justify-self: center; width: min(100%, 520px); aspect-ratio: 1; overflow: visible; border: 0; border-radius: 0; background: none; }
.vestido-artesanal .portada .fot::before, .vestido-artesanal .portada .fot::after { content: ''; position: absolute; inset: 0; -webkit-mask: var(--feston) center / 100% 100% no-repeat; mask: var(--feston) center / 100% 100% no-repeat; }
.vestido-artesanal .portada .fot::before { background: var(--t-rosa); transform: translate(4%, 4%); }
.vestido-artesanal .portada .fot::after { background: var(--t-banda); }
.vestido-artesanal .portada .fot > img { position: absolute; z-index: 1; inset: 3.2%; width: 93.6%; height: 93.6%; border-radius: 0; -webkit-mask: var(--feston) center / 100% 100% no-repeat; mask: var(--feston) center / 100% 100% no-repeat; }
.vestido-artesanal .fot-sello { display: block; position: absolute; z-index: 2; left: -6%; bottom: -4%; width: 34%; aspect-ratio: 1; transform: rotate(-10deg); filter: drop-shadow(0 12px 18px rgba(46, 27, 16, .28)); }
.vestido-artesanal .fot-sello img { width: 100%; height: 100%; object-fit: contain; }
.vestido-artesanal .portada .pega { z-index: 3; top: 10%; right: -4%; gap: 2px; padding: 14px 18px 14px 16px; border-radius: 18px; background: var(--t-superficie); transform: rotate(3deg); box-shadow: 0 18px 34px -18px rgba(46, 27, 16, .55); }
.vestido-artesanal .pega small { color: color-mix(in srgb, var(--t-suave) 85%, var(--t-texto)); font-size: .7rem; letter-spacing: .16em; }
.vestido-artesanal .pega b { font: 600 1.05rem/1.2 var(--t-titulos); color: var(--t-primario); }
.vestido-artesanal .pega strong { font: 900 1.7rem/1 var(--t-titulos); color: var(--t-acento-texto); }

/* --- cinta: caramelo, inclinada, sobre el chocolate que empieza abajo --- */
.vestido-artesanal .s-cinta.fondo-acento, .vestido-artesanal .s-cinta.fondo-alterno { --bg: var(--t-banda); --tx: var(--t-sobre-apoyo); padding-block: 56px 0; overflow: visible; overflow-x: clip; }
/* después de la cinta sigue el mismo chocolate: sin festón encima de la cinta */
.vestido-artesanal main > .s-cinta + .s::before, .vestido-artesanal .vp-seccion:has(> .s-cinta) + .vp-seccion > .s::before { content: none; }
.vestido-artesanal .s-cinta.fondo-acento + .s, .vestido-artesanal .s-cinta.fondo-alterno + .s { padding-top: calc(clamp(30px, 4vw, 48px) * var(--t-aire)); }
.vestido-artesanal .cinta-tira { width: 106%; margin: 0 -3%; overflow: hidden; background: var(--t-apoyo); transform: rotate(-2deg); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5); }
.vestido-artesanal .rueda { align-items: center; gap: 0; padding-block: 14px; font: italic 600 clamp(1.15rem, 2.2vw, 1.55rem)/1 var(--t-titulos); color: var(--t-sobre-apoyo); animation-duration: 45s; }
.vestido-artesanal .rueda span { display: inline-flex; align-items: center; padding: 0 22px; }
.vestido-artesanal .rueda span::after { content: ''; width: 10px; height: 10px; margin: 0 0 0 44px; border-radius: 50%; background: var(--t-acento); box-shadow: 0 0 0 4px rgba(255, 253, 248, .5); opacity: 1; }

/* --- listas --- */
.vestido-artesanal .filtros { gap: 10px; margin-bottom: 36px; }
.vestido-artesanal .filtros button { min-height: 0; padding: .6em 1.15em; border: 2px solid var(--linea-g); border-radius: 999px; background: var(--t-superficie); color: var(--t-primario); font: 800 .92rem/1 var(--t-cuerpo); }
.vestido-artesanal .filtros button:hover { border-color: var(--t-primario); }
.vestido-artesanal .filtros button.act { background: var(--t-primario); border-color: var(--t-primario); color: var(--t-fondo); }
.vestido-artesanal .item { border: 1px solid var(--linea-g); border-radius: 22px; background: var(--t-superficie); box-shadow: none; transition: transform .25s, box-shadow .25s; }
.vestido-artesanal .item:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(46, 27, 16, .45); }
.vestido-artesanal .item .ifoto img { transition: transform .5s; }
.vestido-artesanal .item:hover .ifoto img { transform: scale(1.05); }
.vestido-artesanal .icuerpo { padding: 16px 18px 18px; }
.vestido-artesanal .icat { display: block; color: var(--t-apoyo-texto); font-weight: 800; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.vestido-artesanal .s .icuerpo h3 { margin: 6px 0; font-weight: 600; font-size: 1.25rem; color: var(--t-primario); }
.vestido-artesanal .icuerpo p { font-size: .93rem; line-height: 1.45; }
.vestido-artesanal .ipie { padding-top: 16px; align-items: flex-end; }
.vestido-artesanal .iprecio { font: 900 1.5rem/1 var(--t-titulos); color: var(--t-acento-texto); }
.vestido-artesanal .ipedir { gap: 6px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: .85rem; }
.vestido-artesanal .ipedir::before { content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.5 4 3.5 1.5.6 2 .7 2.8.6.4-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.5 4 3.5 1.5.6 2 .7 2.8.6.4-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vestido-artesanal .ieti { padding: 5px 10px; background: var(--t-apoyo); color: var(--t-sobre-apoyo); font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; }
@media (min-width: 761px) {
  .vestido-artesanal .l-tarjetas .items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; }
}

/* promociones en la franja de chocolate: piezas con costura punteada dorada y el precio en una etiqueta de frambuesa */
.vestido-artesanal .fondo-banda .item { position: relative; border: 0; border-radius: 22px; background: color-mix(in srgb, var(--bg) 82%, #FFFFFF); color: var(--tx); }
.vestido-artesanal .fondo-banda .item::after { content: ''; position: absolute; inset: 10px; border: 2px dashed color-mix(in srgb, var(--t-apoyo) 55%, transparent); border-radius: 16px; pointer-events: none; }
.vestido-artesanal .s.fondo-banda .icuerpo h3 { color: var(--tx); font-weight: 900; font-size: 1.45rem; }
.vestido-artesanal .fondo-banda .icuerpo p, .vestido-artesanal .fondo-banda .icuerpo ul { color: color-mix(in srgb, var(--tx) 84%, var(--bg)); }
.vestido-artesanal .fondo-banda .icuerpo { padding: 24px 26px; gap: 12px; }
.vestido-artesanal .fondo-banda .iprecio { align-self: flex-start; padding: 10px 18px; border-radius: 16px; background: var(--t-acento); color: var(--t-sobre-acento); font-size: 1.35rem; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); }
.vestido-artesanal .fondo-banda .ipie { flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 761px) {
  .vestido-artesanal .l-grande .items { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; }
  .vestido-artesanal .l-grande .item, .vestido-artesanal .l-grande .item:first-child { max-width: none; }
  .vestido-artesanal .l-grande .item:first-child { grid-row: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .vestido-artesanal .l-grande .item:first-child .ifoto { min-height: 0; aspect-ratio: 16 / 10; }
  .vestido-artesanal .l-grande .item:first-child .icuerpo { padding: 26px 30px 30px; }
  .vestido-artesanal .s.l-grande .item:first-child h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  .vestido-artesanal .fondo-banda .item:first-child .iprecio { font-size: 1.6rem; }
  .vestido-artesanal .l-grande .item:first-child:last-child { grid-column: 1 / -1; grid-row: auto; }
  .vestido-artesanal .l-grande .item:not(:first-child) { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto; }
  .vestido-artesanal .l-grande .item:not(:first-child) .ifoto { aspect-ratio: auto; height: 100%; }
}

/* menú del día: una tarjeta blanca sobre rosa, los platos en filas con línea punteada */
.vestido-artesanal .fondo-alterno { --bg: var(--rosa-suave); }
.vestido-artesanal .l-dia .items { max-width: 760px; }
.vestido-artesanal .l-dia .item { border: 0; border-radius: 28px; background: var(--t-superficie); box-shadow: 0 30px 60px -40px rgba(74, 44, 26, .55); text-align: left; }
.vestido-artesanal .l-dia .icuerpo { align-items: stretch; padding: clamp(24px, 4vw, 48px); }
.vestido-artesanal .l-dia .ieti { align-self: flex-start; background: var(--t-acento); color: var(--t-sobre-acento); }
.vestido-artesanal .l-dia .icuerpo ul { margin: 10px 0 0; }
.vestido-artesanal .l-dia .icuerpo li, .vestido-artesanal .l-dia .icuerpo > p { padding: 14px 0; font: 600 1.3rem/1.25 var(--t-titulos); color: var(--t-texto); }
.vestido-artesanal .l-dia .icuerpo li + li { border-top: 2px dotted var(--linea-g); }
.vestido-artesanal .l-dia .ipie { margin-top: 22px; padding-top: 22px; border-top: 2px solid var(--linea-g); justify-content: space-between; }
.vestido-artesanal .l-dia .iprecio { font-size: 2.3rem; }

/* opiniones: tarjetas blancas con comillas rosadas */
.vestido-artesanal .l-citas .item { position: relative; overflow: visible; border-radius: 22px; }
.vestido-artesanal .l-citas .item::before { content: '“'; position: absolute; top: -18px; left: 22px; font: 900 5rem/1 var(--t-titulos); color: var(--t-rosa); }
.vestido-artesanal .l-citas .icuerpo p { font-style: italic; }

/* --- pasos: tarjetas con su ícono en un círculo rosado y el número grande arriba a la derecha --- */
.vestido-artesanal .s-lista-pasos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; }
.vestido-artesanal .s-lista-pasos .s-tarjeta { position: relative; border: 1px solid var(--linea-g); border-radius: 22px; background: var(--t-superficie); box-shadow: none; }
.vestido-artesanal .s-lista-pasos .s-tarjeta-cuerpo { padding: 30px 26px 28px; }
.vestido-artesanal .s-paso-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--rosa-suave); color: var(--t-primario); }
.vestido-artesanal .s-paso-ico .ico { width: 32px; height: 32px; }
.vestido-artesanal .s-lista-pasos .s-numero { position: absolute; top: 22px; right: 26px; display: block; margin: 0; padding: 0; width: auto; height: auto; background: none; white-space: nowrap; font: 900 2.6rem/1 var(--t-titulos); color: var(--linea-g); }
.vestido-artesanal .s-lista-pasos .s-numero::before { content: '0'; }
.vestido-artesanal .s-lista-pasos h3 { font-size: 1.35rem; margin-bottom: 8px; }
.vestido-artesanal .s-lista-pasos p { font-size: .97rem; }

/* --- nosotros --- */
.vestido-artesanal .nosotros h2 { margin: 14px 0 18px; font-size: calc(clamp(2.2rem, 5vw, 3.4rem) * var(--t-tamano)); }
.vestido-artesanal .s.nosotros h2 em { font-weight: 600; color: var(--t-primario); }
.vestido-artesanal .nosotros .s-bajada { font-size: 1.1rem; max-width: 36em; }
.vestido-artesanal .nosotros:not(.f-sello) .fot { border-radius: 28px; transform: rotate(-2deg); box-shadow: 14px 14px 0 var(--t-rosa); overflow: hidden; }
.vestido-artesanal .nosotros.f-sello .fot::before { background: var(--t-rosa); opacity: .28; }

/* --- contacto --- */
.vestido-artesanal .contacto h2 { font-size: calc(clamp(2.3rem, 5.4vw, 3.8rem) * var(--t-tamano)); }
.vestido-artesanal .contacto .s-bajada { font-size: 1.12rem; max-width: 32em; margin-inline: auto; }
.vestido-artesanal .contacto.f-lineas .lineas { gap: 14px; margin-top: 32px; }
.vestido-artesanal .contacto.f-lineas .lineas .s-boton { padding: 1em 1.6em; font-size: 1.1rem; border-radius: 999px; }
.vestido-artesanal .contacto.f-lineas .datos { margin-top: 40px; }
.vestido-artesanal .contacto .datos .ico { color: var(--t-apoyo-banda); }
.vestido-artesanal .contacto .s-form h3 { font: 900 1.35rem var(--t-titulos); }
.vestido-artesanal .fondo-banda .s-form input, .vestido-artesanal .fondo-banda .s-form textarea { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); color: var(--tx); }

/* --- pie: chocolate tostado, la marca y el menú en una fila --- */
.vestido-artesanal .w-pie { background: color-mix(in srgb, var(--t-banda) 68%, #000000); color: color-mix(in srgb, var(--t-sobre-banda) 78%, var(--t-banda)); padding-block: 34px calc(100px + env(safe-area-inset-bottom, 0px)); text-align: left; }
.vestido-artesanal .w-pie .s-envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; }
.vestido-artesanal .w-pie strong { color: var(--t-sobre-banda); font: 700 1.25rem var(--t-titulos); }
.vestido-artesanal .w-pie nav { margin: 0; gap: 8px 22px; }
.vestido-artesanal .w-pie nav a { font-weight: 700; }
.vestido-artesanal .w-pie nav a:hover { color: var(--t-sobre-banda); }
.vestido-artesanal .w-pie > .s-envoltura > p:last-child { flex-basis: 100%; }

/* --- botón flotante: la píldora «Pedir por WhatsApp» --- */
.vestido-artesanal .w-flotante { width: auto; height: auto; gap: 10px; padding: 14px 20px 14px 16px; border-radius: 999px; display: flex; align-items: center; font-weight: 800; text-decoration: none; box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--t-acento) 80%, transparent); }
.vestido-artesanal .w-flotante::after { content: 'Pedir por WhatsApp'; }
.vestido-artesanal .w-flotante .ico { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .vestido-artesanal .portada .rej { grid-template-columns: minmax(0, 1fr); }
  .vestido-artesanal .portada.f-sello .fot, .vestido-artesanal .portada.f-texto-foto .fot { width: min(100%, 360px); margin-top: 8px; }
  .vestido-artesanal .portada .pega { right: 0; }
  .vestido-artesanal .l-grande .item:not(:first-child) { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto; }
  .vestido-artesanal .l-grande .item:not(:first-child) .ifoto { aspect-ratio: auto; height: 100%; min-height: 120px; }
  .vestido-artesanal .l-grande .item:not(:first-child) .icuerpo p { display: none; }
  .vestido-artesanal .nosotros.f-sello .fot { justify-self: center; }
  .vestido-artesanal .w-flotante { padding: 14px; }
  .vestido-artesanal .w-flotante::after { content: none; }
}
@media (prefers-reduced-motion: reduce) { .vestido-artesanal .item:hover, .vestido-artesanal .item:hover .ifoto img { transform: none; } }

/* diseño «franja» de cualquier lista: la tarjeta va del acento con su letra clara, también sobre la franja de chocolate */
.vestido-artesanal .s.l-franja .item { border: 0; background: var(--t-acento); color: var(--t-sobre-acento); }
.vestido-artesanal .s.l-franja .item::after { content: none; }
.vestido-artesanal .s.l-franja .icuerpo h3, .vestido-artesanal .s.l-franja .icuerpo p, .vestido-artesanal .s.l-franja .icuerpo ul, .vestido-artesanal .s.l-franja .iprecio { color: var(--t-sobre-acento); }

/* =====================================================================
   Movimiento, como en la demo de Gustitos: chispas a la deriva, la portada que entra por partes (la foto gira al entrar, la insignia
   cae y se mece, la etiqueta del precio flota), el subrayado que se dibuja, botones con destello y su ícono que se menea, el botón
   flotante que sube y late, la cinta que se detiene al pasar el mouse, el precio de las promociones que se columpia, los platos del día
   que entran uno a uno, los pasos que rebotan, la insignia de Nosotros que gira lenta. El paralaje, las chispitas sueltas, el confeti
   al pedir y la barra de lectura los pone temas/estandar/sitio.js. Todo sale de los colores de la marca: vale en claro y en oscuro.
   Solo con movimiento en Aspecto (en el editor y las miniaturas no hay) y nunca para quien pidió menos movimiento.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* chispas a la deriva en la portada y en el contacto de chocolate */
  .vestido-artesanal:is(.mov-suave, .mov-alegre) :is(.portada, .contacto.fondo-banda) { animation: art-chispas 60s linear infinite; }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .contacto.fondo-banda { animation-duration: 70s; }
  @keyframes art-chispas { to { background-position: 140px 280px; } }

  /* portada: el texto entra por partes y el subrayado se dibuja */
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .portada.visto .txt { animation: none; opacity: 1; }
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .portada.visto .txt > * { animation: art-entrar .9s cubic-bezier(.2, .8, .2, 1) both; }
  .vestido-artesanal .portada.visto .txt > :nth-child(2) { animation-delay: .15s; }
  .vestido-artesanal .portada.visto .txt > :nth-child(3) { animation-delay: .3s; }
  .vestido-artesanal .portada.visto .txt > :nth-child(4) { animation-delay: .45s; }
  .vestido-artesanal .portada.visto .txt > :nth-child(n + 5) { animation-delay: .6s; }
  @keyframes art-entrar { from { opacity: 0; transform: translateY(26px); } }
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .portada.visto h1 em::after { animation: art-trazo .9s ease-out 1.05s both; }
  @keyframes art-trazo { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  /* la foto entra girando, la insignia cae y se mece, la etiqueta del precio baja y flota */
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .portada.visto .fot { animation: art-foto 1.1s cubic-bezier(.2, .9, .25, 1.15) .2s both; }
  @keyframes art-foto { from { opacity: 0; transform: scale(.82) rotate(-8deg); } }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .portada.visto .fot-sello { animation: art-sello-cae .9s cubic-bezier(.3, 1.5, .5, 1) .9s both, art-balanceo 6s ease-in-out 1.8s infinite; }
  @keyframes art-sello-cae { from { opacity: 0; transform: scale(0) rotate(-220deg); } to { transform: rotate(-10deg); } }
  @keyframes art-balanceo { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-3deg) scale(1.03); } }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .portada.visto .pega { animation: art-etiqueta .8s cubic-bezier(.3, 1.5, .5, 1) 1.15s both, art-flotar 4s ease-in-out 1.95s infinite; }
  @keyframes art-etiqueta { from { opacity: 0; transform: translateY(-36px) rotate(14deg); } to { transform: rotate(3deg); } }
  @keyframes art-flotar { 0%, 100% { transform: rotate(3deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .pega:hover { scale: 1.07; }
  /* paralaje: cada capa sigue al mouse a distinta distancia (--mx y --my, entre -1 y 1, los pone sitio.js) */
  .vestido-artesanal .portada .fot::before { translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -10px); }
  .vestido-artesanal .portada .fot::after, .vestido-artesanal .portada .fot > img { translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 6px); }
  .vestido-artesanal .portada .fot-sello { translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 18px); }
  .vestido-artesanal .portada .pega { translate: calc(var(--mx, 0) * 24px) calc(var(--my, 0) * 24px); }
  .vestido-artesanal .portada .fot > *, .vestido-artesanal .portada .fot::before, .vestido-artesanal .portada .fot::after { transition: translate .4s ease-out, scale .25s; }
  /* chispitas sueltas alrededor de la foto (las crea sitio.js) */
  .vestido-artesanal .art-chispa { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w, 16px); height: var(--h, 6px); border-radius: 6px; background: var(--c); pointer-events: none;
    animation: art-chispa var(--t, 5s) ease-in-out var(--dl, 0s) infinite alternate; }
  @keyframes art-chispa { from { transform: translateY(0) rotate(var(--r, 20deg)); } to { transform: translateY(-16px) rotate(calc(var(--r, 20deg) + 50deg)); } }

  /* botones: un destello que pasa cada tanto, se hunden al pulsarlos y su ícono se menea */
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .s-boton:not(.s-boton-borde) { position: relative; overflow: hidden; isolation: isolate; }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .s-boton:not(.s-boton-borde)::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 253, 248, .45) 50%, transparent 65%); transform: translateX(-120%); animation: art-destello 4.5s ease-in-out 2s infinite;
  }
  @keyframes art-destello { 0%, 62% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) :is(.s-boton, .ipedir, .filtros button) { transition: transform .15s, background .2s, color .2s, box-shadow .2s; }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) :is(.s-boton, .ipedir, .filtros button):active { transform: scale(.95); }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) :is(.s-boton:hover .ico, .item:hover .ipedir::before, .s-tarjeta:hover .s-paso-ico .ico) { animation: art-menear .6s ease-in-out; }
  @keyframes art-menear { 0%, 100% { rotate: 0deg; } 25% { rotate: -16deg; } 50% { rotate: 12deg; } 75% { rotate: -6deg; } }

  /* cabecera: la insignia da una vuelta al pasar el mouse */
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .w-marca img { transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .w-marca:hover img { transform: rotate(360deg); }

  /* botón flotante: sube al cargar, late con un halo y su ícono «timbra» cada tanto */
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .w-flotante { animation: art-halo 2.4s ease-out 2.4s infinite; transition: translate .2s, filter .2s; }
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .w-flotante { animation: art-subir .7s cubic-bezier(.3, 1.5, .5, 1) 1.6s both, art-halo 2.4s ease-out 2.4s infinite; }
  @keyframes art-subir { from { opacity: 0; transform: translateY(120%); } }
  @keyframes art-halo {
    from { box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--t-acento) 80%, transparent), 0 0 0 0 color-mix(in srgb, var(--t-acento) 55%, transparent); }
    to { box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--t-acento) 80%, transparent), 0 0 0 18px color-mix(in srgb, var(--t-acento) 0%, transparent); }
  }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .w-flotante:hover { translate: 0 -3px; filter: brightness(1.06); }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .w-flotante .ico { animation: art-timbre 6s ease-in-out 3s infinite; }
  @keyframes art-timbre { 0%, 88%, 100% { rotate: 0deg; } 90% { rotate: -18deg; } 92% { rotate: 16deg; } 94% { rotate: -12deg; } 96% { rotate: 8deg; } }

  /* cinta: se detiene al pasar el mouse para leerla */
  .vestido-artesanal .cinta-tira:hover .rueda { animation-play-state: paused; }

  /* listas: el precio crece al pasar por la tarjeta; el de las promociones se columpia como una etiqueta colgada */
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .iprecio { transform-origin: 0 100%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .item:hover .iprecio { transform: scale(1.12); }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .fondo-banda .iprecio { transform-origin: 50% -20px; animation: art-columpio 3.2s ease-in-out infinite; }
  @keyframes art-columpio { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }

  /* menú del día: un punto que late en la etiqueta y los platos que entran uno a uno */
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .l-dia .ieti::before { animation: art-latido 1.8s ease-out infinite; }
  @keyframes art-latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in srgb, currentColor 0%, transparent); } }
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .l-dia:not(.visto) .icuerpo li { opacity: 0; }
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .l-dia.visto .icuerpo li { animation: art-entrar .6s cubic-bezier(.2, .8, .2, 1) .3s both; }
  .vestido-artesanal .l-dia.visto .icuerpo li:nth-child(2) { animation-delay: .41s; }
  .vestido-artesanal .l-dia.visto .icuerpo li:nth-child(3) { animation-delay: .52s; }
  .vestido-artesanal .l-dia.visto .icuerpo li:nth-child(4) { animation-delay: .63s; }
  .vestido-artesanal .l-dia.visto .icuerpo li:nth-child(n + 5) { animation-delay: .74s; }

  /* pasos: el ícono rebota al llegar y la tarjeta se levanta al pasar el mouse */
  html.js .vestido-artesanal:is(.mov-suave, .mov-alegre) .s-pasos.visto .s-paso-ico { animation: art-rebote .8s cubic-bezier(.3, 1.7, .5, 1) .5s both; }
  .vestido-artesanal .s-pasos.visto .s-tarjeta:nth-child(2) .s-paso-ico { animation-delay: .62s; }
  .vestido-artesanal .s-pasos.visto .s-tarjeta:nth-child(3) .s-paso-ico { animation-delay: .74s; }
  .vestido-artesanal .s-pasos.visto .s-tarjeta:nth-child(n + 4) .s-paso-ico { animation-delay: .86s; }
  @keyframes art-rebote { from { transform: scale(.2) rotate(-30deg); } }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .s-lista-pasos .s-tarjeta { transition: transform .25s, box-shadow .25s; }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .s-lista-pasos .s-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -26px rgba(46, 27, 16, .5); }

  /* nosotros: la insignia gira lenta, como un sello, y su círculo respira */
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .nosotros.f-sello .fot > img { animation: art-girar 70s linear infinite; }
  .vestido-artesanal .nosotros.f-sello .fot:hover > img { animation-play-state: paused; }
  .vestido-artesanal:is(.mov-suave, .mov-alegre) .nosotros.f-sello .fot::before { animation: art-respirar 5s ease-in-out infinite; }
  @keyframes art-girar { to { transform: rotate(360deg); } }
  @keyframes art-respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

  /* barra de lectura arriba (la pone sitio.js) y el confeti que salta al pedir */
  .vestido-artesanal .art-avance { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--t-apoyo), var(--t-acento));
    transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); }
  .art-confeti { position: fixed; z-index: 80; width: 10px; height: 4px; border-radius: 2px; pointer-events: none; }
}
/* la etiqueta del menú del día lleva su punto, con o sin movimiento */
.vestido-artesanal .l-dia .ieti { display: inline-flex; align-items: center; gap: 8px; }
.vestido-artesanal .l-dia .ieti::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }