/* ══════════════════════════════════════════════════════════════
   pdp-v3.css — layout nuevo de la ficha (antes pdp-titan.css)

   Va encima de new-product.css en todas las fichas que usan el
   reparto nuevo: galeria grande con el titulo arriba de la foto,
   descripcion a todo el ancho debajo y las caracteristicas dentro
   de una solapa. Hoy son el Titan y todas las fichas sin destacado
   cargado; ver.php decide con $layout_nuevo.

   El bloque .hl-* (destacados largo) lo usa por ahora solo el Titan,
   con el contenido escrito a mano en la vista: los bloques nuevos
   (video promocional, grilla de tarjetas, videos chicos y la franja
   de "Incluye" + manual) todavia no existen en la base. Para llevarlo
   al resto del catalogo hay que sumarlos a mainArts_highlight (stat4,
   promo_video_desktop/mobile) y a dos tablas hijas nuevas:
   mainArts_highlight_cards y mainArts_highlight_videos.

   Salio de layout-draft-pdp.html; el sorteo y el rearmado de la
   galeria quedaron afuera a proposito.
   ══════════════════════════════════════════════════════════════ */

/* ── Tabs de la PDP (Destacados / Caracteristicas) ── */
.pdp-v2 .pdp-tabs { margin: 40px 0 0; }
/* El panel arranca pegado a la barra de tabs: sin margen, la franja azul
   nace justo debajo del subrayado del tab activo y se lee como una sola
   pieza. El aire de lectura se resuelve con el padding interno. */
.pdp-v2 .pdp-tabs-panels { margin-top: 0; }
.pdp-v2 .pdp-highlight-section { margin-top: 0; padding-top: 60px; }
.pdp-v2 .pdp-tab-panel.pdp-section { border-top: none; margin-top: 0; }

/* Azul Oster para el tab activo y el hover (antes iba el dorado) */
.pdp-v2 .pdp-tabs { --pdp2-tab-on: var(--pdp2-navy); --pdp2-tab-soft: #eaedf4; }
.pdp-v2 .pdp-tabs .pdp-tab {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  color: var(--pdp2-navy);
  background: none;
  border: none;
  border-right: 1px solid var(--pdp2-gray-200);
  border-bottom: 3px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.pdp-v2 .pdp-tabs .pdp-tab:last-child { border-right: none; }
.pdp-v2 .pdp-tabs .pdp-tab:hover { background: var(--pdp2-tab-soft); color: var(--pdp2-tab-on); }
.pdp-v2 .pdp-tabs .pdp-tab:focus { outline: none; }
.pdp-v2 .pdp-tabs .pdp-tab.is-active {
  color: var(--pdp2-tab-on);
  border-bottom-color: var(--pdp2-tab-on);
}

/* "Similares" es un ancla, no una solapa: se pinta igual que las otras para
   que la fila se lea pareja, pero nunca toma el estado activo (no hay panel
   que abrir, el bloque vive al final de la ficha). */
.pdp-v2 .pdp-tabs .pdp-tab--anchor { display: block; color: var(--pdp2-navy); text-decoration: none; }
.pdp-v2 .pdp-tabs .pdp-tab--anchor:hover,
.pdp-v2 .pdp-tabs .pdp-tab--anchor:focus { color: var(--pdp2-tab-on); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════
   BLOQUES DE "DESTACADOS" (version corta) + BANDA DE VIDEO PROMO
   Cada bloque es opcional: si el campo viene vacio, no se pinta.
   ══════════════════════════════════════════════════════════════ */

/* ── Encabezado del destacado ──
   Antes el titulo iba encima del MP4 de fondo: el velo se comia el
   video y el video se comia la lectura. Ahora el encabezado es
   tipografia sola sobre el fondo de la seccion, y el promocional se
   mira aparte, en el bloque de videos, que es donde se lo busca. */
/* Centrado, como el bloque "PODER IMPARABLE EN CADA PREPARACION" de
   oster.cl: volanta, titulo en caja alta y bajada, todo al medio y con
   los 4 numeros debajo (antes el titulo iba a la izquierda y los
   numeros a la derecha, en cajas). */
.pdp-v2 .hl-head {
  display: block; text-align: center;
  padding: 4px 0 0; margin-bottom: 0; border-bottom: none;
}
.pdp-v2 .hl-head-txt { max-width: 100%; }
/* El .hl-label del CSS remoto cuelga de .hl-text, que aca ya no existe */
.pdp-v2 .hl-head-txt .hl-label { display: inline-block; color: rgba(255,255,255,0.62); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; }
.pdp-v2 .hl-head-txt .hl-label::before,
.pdp-v2 .hl-head-txt .hl-label::after { content: none; }
.pdp-v2 .hl-head-txt h3 { font-size: 32px; font-weight: 800; color: #fff; line-height: 1.12; letter-spacing: 0.3px; text-transform: uppercase; margin: 0; }

/* Bajada centrada, debajo del titulo */
.pdp-v2 .hl-lead { max-width: 780px; margin: 18px auto 0; font-size: 16px; line-height: 1.7; text-align: center; color: rgba(255,255,255,0.68); }

/* ── Los 4 numeros ──
   Copian la fila de 4 items de oster.cl (PERFECTAMENTE HOMOGENEO /
   SUAVE / CREMOSO / TRITURADO): cuatro columnas iguales, centradas,
   sin caja ni borde, con el dato grande arriba y la etiqueta en caja
   alta abajo. Antes eran cuatro cajitas con borde apiladas a la
   derecha del titulo. */
.pdp-v2 .hl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 34px 0 0; padding: 0 0 30px; border-bottom: 1px solid rgba(164,142,110,0.18); }
.pdp-v2 .hl-stats .hl-stat-box {
  background: none; border: none; border-radius: 0;
  padding: 0 10px; min-width: 0; text-align: center;
  border-left: 1px solid rgba(164,142,110,0.20);
}
.pdp-v2 .hl-stats .hl-stat-box:first-child { border-left: none; }
.pdp-v2 .hl-stats .hl-stat-box .s-val { display: block; font-size: 36px; font-weight: 700; color: #fff; line-height: 1; }
.pdp-v2 .hl-stats .hl-stat-box .s-lbl { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 9px; }

/* ── Video promocional (MP4 de Oster) ──
   Ya no es el fondo del encabezado: es una pieza propia que abre el
   bloque de videos. Conserva el ratio nativo del MP4 (1920x550 en
   desktop, 664x600 en mobile) para que entre entero. */
.pdp-v2 .hl-promo {
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--pdp2-navy);
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  /* width/max-width explicitos: con aspect-ratio + min-height el navegador
     deducia el ancho de la altura y la caja se salia del contenedor
     (803 px contra los 698 de la grilla). Ahora manda el contenedor y la
     altura sale del ratio nativo del MP4. */
  width: 100%; max-width: 100%;
  aspect-ratio: 1920 / 550;
  margin: 0 0 30px;
}
.pdp-v2 .hl-promo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.pdp-v2 .hl-promo-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 40px 18px 14px;
  background: linear-gradient(to top, rgba(0,20,56,0.92), transparent);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35;
  pointer-events: none;
}

/* Boton de sonido sobre el video promocional */
.pdp-v2 .promo-sound {
  position: absolute; right: 16px; top: 16px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(0,20,56,0.55); border: 1px solid rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: background 0.25s ease;
}
.pdp-v2 .promo-sound:hover { background: rgba(164,142,110,0.7); }

/* Nota legal chica (los asteriscos que Oster exige en cada claim) */
.pdp-v2 .hl-note { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.38); margin: 8px 0 0; }

/* Banner ancho (imagen sola: tira de programas, lifestyle, etc.) */
/* Banner de imagen ancha: hoy sin uso, queda por si se vuelve a
   sumar la tira de programas iBlend arriba o abajo del video */
.pdp-v2 .hl-banner { border-radius: 14px; overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,0.45); margin-bottom: 34px; }
.pdp-v2 .hl-banner img { width: 100%; display: block; }

/* Grilla de tarjetas de tecnologia */
/* Dos columnas (antes cuatro): la ficha entra el doble de ancha y el
   texto se puede leer al tamano de oster.cl (16 px de cuerpo, 20 px de
   titulo) en vez de los 12,5 px de antes. La tarjeta va en blanco con
   tipografia azul Oster y esquina casi recta. */
.pdp-v2 .hl-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-bottom: 34px; }
.pdp-v2 .hl-card { background: #fff; border: 1px solid rgba(164,142,110,0.25); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
/* Los JPG de Oster son cuadrados (537x547). Con el recorte 16/10 que
   habia, en dos columnas se comia media licuadora: ahora la caja es
   cuadrada y la foto entra entera. */
.pdp-v2 .hl-card > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #fff; }
.pdp-v2 .hl-card-body { padding: 20px 24px 24px; flex: 1; background: #fff; }
.pdp-v2 .hl-card h5 { color: var(--pdp2-navy); font-size: 20px; font-weight: 700; line-height: 1.25; text-transform: none; margin: 0 0 9px; }
.pdp-v2 .hl-card p { color: var(--pdp2-navy); font-size: 16px; line-height: 1.55; margin: 0; }

/* Fila de videos (reemplaza al banner grande de video) */
.pdp-v2 .hl-video-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 34px; }
.pdp-v2 .hl-vid-mini { border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; background: #000; box-shadow: 0 10px 35px rgba(0,0,0,0.4); }
.pdp-v2 .hl-vid-mini img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 0.5s ease, opacity 0.3s ease; }
.pdp-v2 .hl-vid-mini:hover img { transform: scale(1.05); opacity: 0.75; }
.pdp-v2 .hl-vid-mini .vid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; background: rgba(0,20,56,0.65); border: 2px solid rgba(164,142,110,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 2; }
.pdp-v2 .hl-vid-mini:hover .vid-play { background: rgba(164,142,110,0.45); border-color: var(--pdp2-gold); transform: translate(-50%,-50%) scale(1.1); }
.pdp-v2 .hl-vid-mini .vid-play svg { width: 19px; height: 19px; fill: #fff; margin-left: 2px; }
.pdp-v2 .hl-vid-mini .vid-mini-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 18px 16px; background: linear-gradient(to top, rgba(0,20,56,0.92), transparent); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35; z-index: 2; }
.pdp-v2 .hl-vid-mini iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: none; z-index: 5; }
.pdp-v2 .hl-vid-mini.playing iframe { display: block; }
.pdp-v2 .hl-vid-mini.playing img,
.pdp-v2 .hl-vid-mini.playing .vid-play,
.pdp-v2 .hl-vid-mini.playing .vid-mini-cap { opacity: 0; pointer-events: none; }

/* Franja de cierre: que incluye + manual, todo en una linea */
.pdp-v2 .hl-strip { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid rgba(164,142,110,0.18); padding: 26px 0 45px; }
/* Grilla de 5 columnas iguales y etiqueta de alto fijo: antes cada
   medalla tomaba el ancho de su texto y las de dos lineas empujaban a
   las vecinas, asi que la hilera quedaba despareja. */
/* Las columnas son tantas como piezas tenga el "Incluye": la vista pasa
   el numero en --inc-cols (el Titan carga 5). */
.pdp-v2 .hl-strip-inc { display: grid; grid-template-columns: repeat(var(--inc-cols, 5), 1fr); align-items: start; gap: 14px 10px; flex: 1; min-width: 300px; }
.pdp-v2 .hl-strip-lbl { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,0.62); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
/* Los "incluye" dejan de ser pastillas: ahora repiten la iconografia del
   arte de iBlend (BTF_image_2) -> circulo blanco, aro dorado metalico,
   icono azul adentro y el nombre debajo. El aro es un doble fondo
   (relleno en padding-box + degrade en border-box) para que el borde
   tenga el mismo brillo del original. */
.pdp-v2 .hl-chip { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-radius: 0; padding: 0; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; }
.pdp-v2 .hl-chip .hl-chip-ic {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #e3d2b3 0%, var(--pdp2-gold) 45%, #7c684c 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
/* Trazo, no relleno: el arte de Oster usa iconos de linea */
.pdp-v2 .hl-chip .hl-chip-ic svg {
  width: 32px; height: 32px; display: block;
  fill: none; stroke: var(--pdp2-navy);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pdp-v2 .hl-doc-btn { display: inline-flex; align-items: center; gap: 11px; padding: 13px 24px; border: 1px solid #fff; border-radius: 4px; background: #fff; color: var(--pdp2-navy); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all 0.25s ease; }
.pdp-v2 .hl-doc-btn i { color: var(--pdp2-gold); font-size: 18px; transition: color 0.25s ease; }
/* En hover invierte a relleno solido azul Oster (antes iba transparente y
   se veia el fondo animado a traves del boton, que leia como opacidad) */
.pdp-v2 .hl-doc-btn:hover { background: var(--pdp2-navy, #001438); border-color: #fff; color: #fff; text-decoration: none; opacity: 1; }
.pdp-v2 .hl-doc-btn:hover i { color: #fff; }


@media (max-width: 1024px) {
  .pdp-v2 .hl-head-txt h3 { font-size: 28px; }
  .pdp-v2 .hl-stats .hl-stat-box .s-val { font-size: 30px; }
}
/* En mobile el encabezado se apila y el promo cambia al MP4 de 664x600 */
@media (max-width: 768px) {
  /* Pegada a los tabs, igual que en desktop: los 20px de margen dejaban
     una franja blanca entre el subrayado del tab activo y el arranque
     del azul, y la barra se leia como algo suelto. El aire lo pone el
     padding de adentro. */
  .pdp-v2 .pdp-highlight-section { margin-top: 0; padding-top: 44px; }
  .pdp-v2 .hl-head { display: block; padding-bottom: 0; margin-bottom: 0; }
  .pdp-v2 .hl-head-txt { max-width: 100%; }
  .pdp-v2 .hl-head-txt h3 { font-size: 24px; }
  .pdp-v2 .hl-stats { margin-top: 26px; padding-bottom: 24px; }
  .pdp-v2 .hl-stats .hl-stat-box .s-val { font-size: 27px; }
  .pdp-v2 .hl-stats .hl-stat-box .s-lbl { font-size: 12px; }
  .pdp-v2 .hl-promo { aspect-ratio: 664 / 600; margin-bottom: 24px; }
}
@media (max-width: 560px) {
  .pdp-v2 .hl-cards { grid-template-columns: 1fr; }
  .pdp-v2 .hl-card h5 { font-size: 18px; }
  /* La grilla de 3 columnas dejaba la ultima fila (2 medallas de 5)
     pegada a la izquierda, con la tercera columna vacia. En flex, la
     fila incompleta se centra sola. */
  .pdp-v2 .hl-strip-inc { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
  .pdp-v2 .hl-strip-lbl { width: 100%; }
  .pdp-v2 .hl-chip { width: 88px; font-size: 13px; }
  .pdp-v2 .hl-chip .hl-chip-ic { width: 56px; height: 56px; }
  .pdp-v2 .hl-chip .hl-chip-ic svg { width: 27px; height: 27px; }
  .pdp-v2 .hl-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  .pdp-v2 .hl-stats .hl-stat-box:nth-child(3) { border-left: none; }
  .pdp-v2 .hl-video-row { grid-template-columns: 1fr; }
  .pdp-v2 .hl-strip { flex-direction: column; align-items: center; }
  .pdp-v2 .hl-doc-btn { width: 100%; justify-content: center; }
}

.pdp-v2 .pdp-tab-panel { display: none; }
.pdp-v2 .pdp-tab-panel.is-active { display: block; }

/* ── Animacion al cambiar de solapa ──
   El panel pasa de display:none a block, asi que la animacion se
   reinicia sola en cada cambio: no hace falta tocar el JS.

   El panel entero solo hace fade (es la seccion azul, que mide 20.000 px
   de ancho por el truco del full-bleed: moverla con transform seria
   repintar media pantalla). El desplazamiento va en el contenido, y
   escalonado, para que la solapa se arme de arriba hacia abajo. */
@keyframes pdpPanelFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdpPanelRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.pdp-v2 .pdp-tab-panel.is-active { animation: pdpPanelFade 0.3s ease both; }

.pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *,
.pdp-v2 #pdp-specs.is-active > * {
  animation: pdpPanelRise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *:nth-child(1),
.pdp-v2 #pdp-specs.is-active > *:nth-child(1) { animation-delay: 0.04s; }
.pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *:nth-child(2),
.pdp-v2 #pdp-specs.is-active > *:nth-child(2) { animation-delay: 0.10s; }
.pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *:nth-child(3) { animation-delay: 0.16s; }
.pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *:nth-child(4) { animation-delay: 0.22s; }
.pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *:nth-child(5) { animation-delay: 0.28s; }
.pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *:nth-child(n+6) { animation-delay: 0.34s; }

/* Barrido azul del subrayado del tab activo: el borde real se apaga y
   la linea la dibuja el ::after, que es lo que se puede animar */
.pdp-v2 .pdp-tabs .pdp-tab { position: relative; }
.pdp-v2 .pdp-tabs .pdp-tab.is-active { border-bottom-color: transparent; }
.pdp-v2 .pdp-tabs .pdp-tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--pdp2-tab-on);
  transform-origin: center;
  animation: pdpTabUnderline 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes pdpTabUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Quien pidio menos movimiento, no lo recibe */
@media (prefers-reduced-motion: reduce) {
  .pdp-v2 .pdp-tab-panel.is-active,
  .pdp-v2 #pdp-highlight.is-active .hl-content-wrap > *,
  .pdp-v2 #pdp-specs.is-active > *,
  .pdp-v2 .pdp-tabs .pdp-tab.is-active::after { animation: none; }
}



/* ══════════════════════════════════════════════════════════
   DRAFT: la foto manda
   El grid viejo era 80px | 1fr | 1.4fr: la ficha se quedaba
   con mas ancho que la imagen. Ahora el titulo sube arriba,
   la galeria se queda con todo el ancho y la descripcion
   baja a un bloque propio debajo.
   ══════════════════════════════════════════════════════════ */

/* --- Galeria grande: titulo e imagen en la misma grilla ---
   Antes el encabezado era un grid aparte que dejaba vacia su primera
   columna: arriba de los thumbs quedaba un hueco del alto del titulo.
   Ahora el titulo vive dentro de la galeria (fila 1, columna derecha)
   y la tira de thumbs cruza las dos filas, con lo cual arranca a la
   altura del titulo y ese hueco desaparece.
   La columna de thumbs mide lo que mide un thumb (120px): con 72px
   las miniaturas se desbordaban del carril y pisaban el titulo. */
.pdp-v2 .pdp-main--gallery {
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 0 8px;
  align-items: start;
}

/* --- Encabezado (fila 1, sobre la imagen) --- */
.pdp-v2 .pdp-main--gallery .pdp-head {
  display: block;
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  margin: 0;
  padding: 0 0 12px;
  text-align: left;
}
.pdp-v2 .pdp-head .pdp-category-badge { display: inline-block; margin-bottom: 8px; }
.pdp-v2 .pdp-head .pdp-title {
  font-size: 20px;
  line-height: 1.32;
  margin: 0 0 5px;
}
.pdp-v2 .pdp-head .pdp-sku { margin-bottom: 0; }

/* --- Thumbs: cruzan titulo + imagen ---
   height: 0 + min-height: 100% es a proposito: con alto automatico las
   12 miniaturas estiraban la fila y la tira terminaba mucho mas abajo
   que la foto. Asi la columna de thumbs no aporta alto al grid (lo
   marca el lado del titulo + imagen) pero lo ocupa entero. */
.pdp-v2 .pdp-main--gallery .pdp-thumbs-wrapper {
  grid-column: 1;
  grid-row: 1 / -1;
  height: 0;
  min-height: 100%;
  max-height: none;
  overflow: hidden;
}
.pdp-v2 .pdp-main--gallery .pdp-thumbs-scroll  {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: none;
}
.pdp-v2 .pdp-main--gallery .pdp-thumbs-scroll::-webkit-scrollbar { display: none; }
.pdp-v2 .pdp-main--gallery .pdp-thumb          { width: 120px; height:120px; }
.pdp-v2 .pdp-main--gallery .pdp-thumbs-arrow   { width: 120px; }
.pdp-v2 .pdp-main--gallery .pdp-main-image     { grid-column: 2; grid-row: 2; }
.pdp-v2 .pdp-main--gallery .pdp-main-image {
  min-height: 480px;
  background: transparent;   /* sin el recuadro gris */
  border-radius: var(--pdp2-radius);
  padding: 0;
  cursor: zoom-in;
}
.pdp-v2 .pdp-main--gallery .pdp-main-image img {
  max-width: 100%;
  max-height: 420px;
  will-change: transform;
}
/* El scale fijo del hover lo maneja ahora el JS del zoom */
.pdp-v2 .pdp-main--gallery .pdp-main-image:hover img { transform: none; }

/* --- Lupa --- */
.pdp-v2 .pdp-main-image .pdp-zoom-hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--pdp2-gray-200);
  color: var(--pdp2-navy);
  font-size: 11px;
  box-shadow: 0 2px 10px rgba(0,20,56,0.14);
  pointer-events: none;
  transition: opacity var(--pdp2-transition), transform var(--pdp2-transition);
}
.pdp-v2 .pdp-main-image.is-zooming { cursor: zoom-out; }
.pdp-v2 .pdp-main-image.is-zooming .pdp-zoom-hint { opacity: 0; transform: scale(.8); }

/* --- Descripcion, ahora abajo --- */
.pdp-v2 .pdp-desc-block {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 8px 4px;
  border-top: 1px solid var(--pdp2-gray-200);
}
.pdp-v2 .pdp-desc-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pdp2-navy);
  margin: 0 0 12px;
}
.pdp-v2 .pdp-desc-block .pdp-description {
  max-height: 99px;   /* 4 lineas exactas: el degrade no corta a mitad de renglon */
  max-width: 900px;
  font-size: 15px;
}

@media (max-width: 991px) {
  /* En mobile la galeria vuelve a ser una pila (flex column de .pdp-main):
     el titulo queda primero por orden natural, foto y thumbs debajo. */
  .pdp-v2 .pdp-main--gallery { max-width: 100%; padding: 14px 0 8px; }
  .pdp-v2 .pdp-main--gallery .pdp-head {
    display: block; grid-column: auto; grid-row: auto;
    text-align: left; max-width: 100%; padding: 0 0 4px;
  }
  .pdp-v2 .pdp-head .pdp-title { font-size: 16px; margin-left: 0; }
  .pdp-v2 .pdp-main--gallery .pdp-thumbs-wrapper {
    grid-column: auto; grid-row: auto; height: auto; min-height: 0; overflow: visible;
  }
  .pdp-v2 .pdp-main--gallery .pdp-main-image { grid-column: auto; grid-row: auto; }
  .pdp-v2 .pdp-main--gallery .pdp-main-image {
    height: 260px !important;
    min-height: 0 !important;
    padding: 0;
    background: transparent !important;
    cursor: default;
  }
  /* En tactil no hay hover: la lupa no aporta */
  .pdp-v2 .pdp-main-image .pdp-zoom-hint { display: none; }
  .pdp-v2 .pdp-main--gallery .pdp-main-image img { max-height: 248px !important; }
  .pdp-v2 .pdp-main--gallery .pdp-thumb { width: 50px !important; height: 50px !important; }
  .pdp-v2 .pdp-main--gallery .pdp-thumbs-arrow { width: 22px !important; height: 50px !important; }

  .pdp-v2 .pdp-desc-block { max-width: 100%; padding: 20px 0 4px; }
}

@media (max-width: 575px) {
  .pdp-v2 .pdp-main--gallery .pdp-main-image { height: 220px !important; }
  .pdp-v2 .pdp-main--gallery .pdp-main-image img { max-height: 208px !important; }
}

/* --- "Recetas Destacadas" alineado al contenedor ---
   El titulo tenia un sangrado fijo (padding: 0 130px) que no
   corresponde a ningun ancho del container de Bootstrap: en desktop
   quedaba corrido a la izquierda del contenido y en mobile se iba
   afuera de la pantalla. Ahora cuelga de un .container de verdad,
   asi que arranca en la misma linea que el breadcrumb en todos los
   anchos y el padding propio se anula. */
.pdp-v2 .pdp-stories-bar .stories-header { padding: 0 0 10px; }

@media (max-width: 991px) {
  .pdp-v2 .pdp-stories-bar .stories-header { padding: 0 0 8px; }
}



/* ══════════════════════════════════════════════════════════
   Fichas de una sola foto
   Dos de cada tres productos tienen una sola imagen: ahi no
   se dibuja la tira de miniaturas (una miniatura sola con sus
   flechas y el contador "1 / 1" es ruido) y la galeria deja
   de reservarle la columna de 120px.
   ══════════════════════════════════════════════════════════ */
.pdp-v2 .pdp-main--gallery.pdp-main--solo { grid-template-columns: minmax(0, 1fr); }
.pdp-v2 .pdp-main--gallery.pdp-main--solo .pdp-head,
.pdp-v2 .pdp-main--gallery.pdp-main--solo .pdp-main-image { grid-column: 1; }

/* ── "Ver mas" solo cuando el texto no entra ──
   El degrade y el boton estaban siempre, aunque la descripcion
   fueran dos renglones. A todo el ancho eso se nota: si el texto
   entra entero, el JS marca .is-full y no hay corte ni boton. */
.pdp-v2 .pdp-description.is-full { max-height: none; }
.pdp-v2 .pdp-description.is-full::after { opacity: 0; }

/* Ficha sin foto: el "no-photo" no merece el alto de una imagen real */
.pdp-v2 .pdp-main--gallery.pdp-main--sinfoto .pdp-main-image { min-height: 300px; }
.pdp-v2 .pdp-main--gallery.pdp-main--sinfoto .pdp-main-image img { max-height: 240px; opacity: 0.55; }


/* ══════════════════════════════════════════════════════════
   DESTACADO ARMADO DESDE LA BASE
   Mismo reparto que el del Titan, con lo que cada ficha tenga
   cargado: encabezado, bajada, numeros, hasta dos fotos y un
   video. Lo unico que cambia son las medidas, porque las
   piezas son menos.
   ══════════════════════════════════════════════════════════ */

/* Los numeros son hasta tres (el Titan tiene cuatro): la fila se
   reparte segun cuantos vengan, asi no queda una columna vacia. */
.pdp-v2 .hl-stats--1 { grid-template-columns: minmax(0, 1fr); }
.pdp-v2 .hl-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdp-v2 .hl-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Las fotos ocupan la tarjeta entera, como en el Titan: ahi el fondo
   blanco es del texto, no de la imagen, y aca no hay texto.
   Cada una conserva su proporcion en vez de entrar en un cuadrado
   recortada: varias son infografias con texto adentro y el recorte se
   comeria palabras. Por eso la fila no fuerza un alto comun (align-items:
   start): si las dos fotos no miden igual, cada tarjeta termina donde
   termina su imagen y no queda un sobrante blanco abajo. */
.pdp-v2 .hl-cards--fotos { padding-top: 34px; align-items: start; }
.pdp-v2 .hl-cards--fotos .hl-card > img {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
  padding: 0;
}
.pdp-v2 .hl-cards--una { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }

/* Un solo video: ocupa la fila entera */
.pdp-v2 .hl-video-row--uno { grid-template-columns: minmax(0, 1fr); padding-top: 34px; padding-bottom: 16px; }
/* La bajada del video, debajo del cuadro y centrada como la del encabezado */
.pdp-v2 .hl-vid-desc {
  max-width: 780px; margin: 0 auto; padding-bottom: 40px;
  font-size: 15px; line-height: 1.65; text-align: center;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 560px) {
  /* Con dos numeros la fila ya esta en dos columnas; con tres, el
     tercero se iria solo a una fila de una sola columna. */
  .pdp-v2 .hl-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdp-v2 .hl-stats--3 .hl-stat-box .s-val { font-size: 22px; }
  .pdp-v2 .hl-stats--3 .hl-stat-box .s-lbl { font-size: 11px; letter-spacing: 0.6px; }
  /* La regla de dos columnas le saca la linea al tercero; con tres en
     una fila, esa linea es la que los separa. */
  .pdp-v2 .hl-stats--3 .hl-stat-box:nth-child(3) { border-left: 1px solid rgba(164,142,110,0.20); }
  .pdp-v2 .hl-cards--fotos { grid-template-columns: 1fr; }
}

/* Destacado que termina en los numeros (la ficha no tiene fotos ni video):
   la linea de abajo de la fila separaba de un bloque que no existe. */
.pdp-v2 .hl-content-wrap > .hl-head:last-child { padding-bottom: 22px; }
.pdp-v2 .hl-content-wrap > .hl-head:last-child .hl-stats { border-bottom: none; padding-bottom: 6px; }