/* Aluca · página de producto
   En el tema: se suma a style-async.tpl (o un asset propio). Parte de los estilos .vista__* de la vista rápida. */

/* ---------- migas ---------- */
.migas { margin: clamp(10px, 1.2vw, 20px) var(--g) clamp(12px, 1.4vw, 24px); padding-inline: calc(var(--g) * 1.2); font-size: var(--t-xs); color: var(--suave); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.migas li { display: inline-flex; align-items: center; gap: 6px; }
.migas a { transition: color .3s; }
.migas a:hover { color: var(--acento); }
.migas svg { width: 11px; height: 11px; opacity: .55; }
.migas [aria-current] { color: var(--texto); font-weight: 600; }

/* ---------- ficha: galería + compra ---------- */
.pg { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 64px); margin: 0 var(--g); align-items: start; }

.pg__galeria { position: sticky; top: var(--g); display: grid; grid-template-columns: clamp(56px, 5.4vw, 92px) minmax(0, 1fr); grid-template-areas: "minis escena"; gap: var(--g); align-items: start; }
.pg__escena { grid-area: escena; position: relative; aspect-ratio: 1 / 1; max-height: calc(100svh - var(--g) * 2); border-radius: var(--r); background: var(--tarjeta); overflow: hidden; transition: background-color .6s; }
.pg__escena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; opacity: 0; transition: opacity .6s var(--facil); }
.pg__escena[data-tipo="mesa"] .pg__lamp { object-position: 50% 100%; inset: 10% 0 0; height: 90%; }
.pg__escena .pg__foto { object-fit: cover; object-position: 50% 50%; }
.pg__escena[data-vista="lamp"][data-luz="off"] .f-dia,
.pg__escena[data-vista="lamp"][data-luz="on"] .f-noche,
.pg__escena[data-vista="foto"] .pg__foto { opacity: 1; }
.pg__escena[data-vista="lamp"][data-luz="on"] { background: #17110D; }
.pg__escena[data-vista="foto"] .vista__luz { opacity: 0; pointer-events: none; }
.pg__escena .vista__luz { transition: opacity .3s; }

.pg__minis { grid-area: minis; display: grid; gap: var(--g); margin: 0; padding: 0; list-style: none; }
.pg__mini { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: calc(var(--r) * .7); background: var(--tarjeta); overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .3s, background-color .6s, opacity .3s; opacity: .78; }
.pg__mini:hover { opacity: 1; }
.pg__mini[aria-current="true"] { outline-color: var(--texto); opacity: 1; }
.pg__mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.pg__mini--mesa img { object-position: 50% 100%; }
.pg__mini--foto img { object-fit: cover; object-position: 50% 50%; }
.pg__mini--noche { background: #17110D; }

/* compra */
.pg__compra { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 22px); padding-block: clamp(4px, 1vw, 20px); max-width: 560px; }
.pg__cabeza { display: grid; gap: 10px; justify-items: start; }
.pg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg__nombre { margin: 0; font: 600 clamp(32px, 3.4vw, 60px)/1.04 'Manrope', sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.pg__resenas { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--suave); }
.pg__resenas b { color: var(--texto); }
.pg__resenas:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.pg__precio { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pg__monto { font: 700 clamp(26px, 2.3vw, 40px)/1 'Manrope', sans-serif; letter-spacing: -.02em; }
.pg__precio s { font: 600 var(--t-m)/1 'Manrope', sans-serif; color: var(--suave); }
.pg__pagos { display: grid; gap: 6px; margin: calc(var(--g) * -.4) 0 0; padding: 0; list-style: none; color: var(--suave); font-size: var(--t-s); }
.pg__pagos b { color: var(--texto); font-weight: 700; }

.pg__fila { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 4px; }
.cant { display: inline-flex; align-items: center; border-radius: 999px; background: var(--pastilla); padding: 4px; transition: background-color .6s; }
.cant button { display: grid; place-items: center; width: clamp(40px, 3vw, 50px); aspect-ratio: 1; border-radius: 50%; font: 600 var(--t-m)/1 'Manrope', sans-serif; transition: background-color .3s, opacity .3s; }
.cant button:hover:not(:disabled) { background: var(--tarjeta-2); }
.cant button:disabled { opacity: .3; cursor: default; }
.cant output { min-width: 2.2em; text-align: center; font: 700 var(--t-m)/1 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.pg__agregar { font-size: var(--t-m); }
.pg__wpp { width: 100%; padding-block: 1.1em; border: 1px solid var(--linea); }
.pg__wpp .pastilla__ic { color: #1FA855; }
.pg__wpp:hover .pastilla__ic { color: #fff; }

.pg__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--g); margin: 4px 0 0; padding: clamp(16px, 1.5vw, 24px); border-radius: var(--r); background: var(--tarjeta); list-style: none; transition: background-color .6s; }
.pg__datos li { display: flex; gap: 12px; align-items: flex-start; }
.pg__datos svg { width: 22px; height: 22px; margin-top: 1px; color: var(--acento); }
.pg__datos span { display: grid; gap: 2px; font-size: var(--t-xs); line-height: 1.4; color: var(--suave); }
.pg__datos b { font-size: var(--t-s); color: var(--texto); font-weight: 700; }

/* ---------- detalle: descripción + ficha técnica ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 64px); }
.pd__texto, .pd__ficha { display: grid; gap: clamp(14px, 1.4vw, 24px); align-content: start; }
.pd__parrafos { display: grid; gap: 1em; }
.pd__parrafos .parrafo { max-width: 56ch; }
.ficha { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.ficha th, .ficha td { padding: clamp(12px, 1.1vw, 18px) 0; border-top: 1px solid var(--linea); text-align: left; vertical-align: top; line-height: 1.45; }
.ficha tr:last-child th, .ficha tr:last-child td { border-bottom: 1px solid var(--linea); }
.ficha th { width: 34%; padding-right: 16px; font-weight: 700; color: var(--texto); }
.ficha td { color: var(--suave); }

/* preguntas: una sola columna angosta no, mismas tarjetas de la home */
.pf .faq__item summary span { text-wrap: balance; }

/* relacionados */
.grilla--rel { grid-template-columns: repeat(4, 1fr); }

/* ---------- clave desconocida ---------- */
.pvacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-block: clamp(40px, 8vw, 140px); }
.pvacio[hidden] { display: none; }
.pvacio .parrafo { max-width: 34em; }

/* ---------- barra fija del celular ---------- */
.pbarra { display: none; }

@media (max-width: 1024px) {
  .grilla--rel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pg { grid-template-columns: 1fr; gap: 24px; }
  .pg__galeria { position: static; grid-template-columns: 1fr; grid-template-areas: "escena" "minis"; }
  .pg__escena { max-height: none; }
  .pg__minis { grid-auto-flow: column; grid-auto-columns: clamp(58px, 17vw, 84px); overflow-x: auto; scrollbar-width: none; }
  .pg__minis::-webkit-scrollbar { display: none; }
  .pg__compra { max-width: none; padding-inline: calc(var(--g) * .6); }
  .pd { grid-template-columns: 1fr; gap: 40px; }
  .grilla--rel .prod:last-child { display: block !important; }  /* aluca.css oculta la última en 2 columnas; acá son 4 */
}
@media (max-width: 760px) {
  .pbarra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea); transform: translateY(105%); visibility: hidden; transition: transform .45s var(--facil), visibility 0s .45s, background-color .6s; }
  .pbarra--on { transform: none; visibility: visible; transition: transform .45s var(--facil), visibility 0s, background-color .6s; }
  .pbarra__precio { display: grid; gap: 2px; }
  .pbarra__precio b { font: 700 var(--t-l)/1 'Manrope', sans-serif; letter-spacing: -.02em; }
  .pbarra__precio small { font-size: var(--t-xs); color: var(--suave); }
  .pbarra .pastilla { padding-inline: 2.2em; }
  /* WhatsApp sube para no quedar tapado por la barra (suma a lo que ya sube con las cookies) */
  .wpp { transition: transform .5s var(--facil), bottom .45s var(--facil); }
  .hay-barra .wpp { bottom: calc(var(--alto-barra, 72px) + 14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .migas { padding-inline: 0; }
  .pg__datos { grid-template-columns: 1fr; }
  .pg__compra { padding-inline: 0; }
  .grilla--rel { display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--g) * -1); padding-inline: var(--g); scrollbar-width: none; }
  .grilla--rel::-webkit-scrollbar { display: none; }
  .grilla--rel .prod { flex: 0 0 74%; scroll-snap-align: center; }
  .pr .seccion__cabeza { align-items: center; }
}

/* =====================  segunda vuelta  ===================== */

/* cabecera de la compra: etiqueta, nombre y datos con aire */
.pg__cabeza { gap: 0; }
.pg__cabeza .etiqueta { margin-bottom: clamp(8px, .8vw, 14px); }
.pg__nombre { margin-bottom: clamp(12px, 1.1vw, 18px); }
.pg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(14px, 1.4vw, 22px); }
.pg__precio { margin-top: clamp(2px, .4vw, 8px); padding-top: clamp(14px, 1.4vw, 22px); border-top: 1px solid var(--linea); }

/* colores y cables */
.pg__opciones { display: grid; gap: clamp(14px, 1.3vw, 20px); }
.opc { display: grid; gap: 10px; }
.opc__tit { margin: 0; font-size: var(--t-s); color: var(--suave); }
.opc__tit b { color: var(--texto); font-weight: 700; }
.opc__lista { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { position: relative; width: clamp(34px, 2.6vw, 42px); aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(30, 28, 26, .22); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .25s, transform .2s; }
.sw:hover { transform: scale(1.06); }
.sw[aria-checked="true"] { outline-color: var(--texto); }
.pil { display: inline-flex; align-items: center; gap: 8px; padding: .6em 1em .6em .7em; border-radius: 999px; border: 1px solid var(--linea); font: 600 var(--t-xs)/1 'Manrope', sans-serif; letter-spacing: 0; transition: background-color .3s, color .3s, border-color .3s; }
.pil i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(30, 28, 26, .3); }
.pil:hover { border-color: var(--suave); }
.pil[aria-checked="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.pg__aviso { position: absolute; z-index: 3; top: 12px; left: 12px; margin: 0; padding: .55em .9em; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #250A03; font: 600 var(--t-xs)/1 'Manrope', sans-serif; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pg__aviso[hidden] { display: none; }

/* fotos grandes */
.ed { display: grid; gap: var(--g); }
.ed__gran { position: relative; margin: 0; aspect-ratio: 21 / 9; border-radius: var(--r); overflow: hidden; background: var(--tostado); }
.ed__gran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed__gran::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 10, 6, .62), rgba(20, 10, 6, 0) 62%); }
.ed__gran figcaption { position: absolute; z-index: 1; left: clamp(20px, 3.4vw, 64px); bottom: clamp(20px, 3.4vw, 64px); display: grid; gap: 12px; max-width: 24em; color: #fff; }
.ed__gran b { font: 600 var(--t-xl)/1.05 'Manrope', sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.ed__gran span { font-size: var(--t-m); line-height: 1.5; opacity: .9; }
.ed__bloques { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.ed__bloque { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); background: var(--tarjeta); overflow: hidden; transition: background-color .6s; }
.ed__bloque img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ed__bloque--noche img { background: #17110D; object-fit: contain; }
.ed__bloque div { display: grid; gap: 8px; align-content: start; padding: clamp(18px, 1.9vw, 34px); }
.ed__bloque h3 { margin: 0; font: 600 var(--t-l)/1.18 'Manrope', sans-serif; letter-spacing: -.01em; }
.ed__bloque p { margin: 0; color: var(--suave); font-size: var(--t-m); line-height: 1.55; max-width: 34ch; text-wrap: pretty; }

/* descripción y ficha en tarjetas */
.pd { gap: var(--g); grid-template-columns: 1fr 1fr; }
.pd__texto, .pd__ficha { padding: clamp(22px, 2.8vw, 52px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.pd__texto { align-content: start; }
.ficha th, .ficha td { border-color: var(--linea); }
.ficha tr:first-child th, .ficha tr:first-child td { border-top: 0; padding-top: 0; }
.ficha tr:last-child th, .ficha tr:last-child td { border-bottom: 0; padding-bottom: 0; }

/* cómo se instala */
.pi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.4vw, 64px); align-items: center; }
.pi__pasos { display: grid; gap: clamp(14px, 1.4vw, 24px); }
.pasos { display: grid; gap: clamp(10px, 1vw, 16px); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; padding: clamp(14px, 1.3vw, 22px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.pasos li::before { content: counter(paso); grid-row: span 2; display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 50%; background: var(--acento); color: #fff; font: 700 var(--t-s)/1 'Manrope', sans-serif; }
.pasos b { font-size: var(--t-m); font-weight: 700; }
.pasos span { color: var(--suave); font-size: var(--t-s); line-height: 1.5; }
.video { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; background: var(--tostado); display: grid; place-items: center; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.video__play { position: relative; display: grid; place-items: center; width: clamp(64px, 6vw, 96px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #250A03; cursor: default; }
.video__play svg { width: 36%; height: 36%; margin-left: 6%; }
.video__texto { position: absolute; left: 0; right: 0; bottom: clamp(14px, 1.6vw, 28px); margin: 0; text-align: center; color: #fff; font: 600 var(--t-s)/1.2 'Manrope', sans-serif; }

@media (max-width: 860px) {
  .ed__gran { aspect-ratio: 4 / 3.4; }
  .ed__bloques { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--g) * -1); padding-inline: var(--g); scrollbar-width: none; }
  .ed__bloques::-webkit-scrollbar { display: none; }
  .ed__bloque { flex: 0 0 78%; scroll-snap-align: center; }
  .pd { grid-template-columns: 1fr; }
  .pi { grid-template-columns: 1fr; gap: 24px; }
  .pi__pasos { order: 2; }
  .video { order: 1; }
  .faq__lista.pf .faq__col { display: contents; }
  .faq__lista.pf { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ed__gran figcaption b { font-size: var(--t-xl); }
  .ed__gran { aspect-ratio: 4 / 4.6; }
  .pil { font-size: 12px; }
}