/* ==========================================================================
   V2 · Ficha de producto (2-oct-2026). Carga sólo con ?vista=v2, después de
   v2.css, y todo cuelga de .rv-v2: la tienda viva ni lo ve.

   Plan (skill frontend-design):
   · Paleta de la marca y nada más: negro #1A1A1A, magenta #D6006E, rubor
     #FCF1F6, hueso, línea #E4DFDD. Playfair para precios y el título de los
     bloques; Jost para todo lo demás. Esquinas de 2 px.
   · Lo memorable va en UN lugar: la escalera de precios. Barras que bajan
     de verdad (cada una mide lo que cuesta la pieza en ese escalón), pegadas
     a la cantidad. Lo demás quieto: listas con filete fino, sin cajas de
     colores ni bordes punteados.
   · Celular primero (79 % compra desde el teléfono): todo control de 44 px.
   ========================================================================== */

.rv-v2 { --v2f-rubor: #FCF1F6; }
/* La fila de modelos se desliza dentro de su columna: sin esto, la columna de
   la rejilla crece al ancho de toda la fila y la página se sale de lado. */
.rv-v2 .pdp > * { min-width: 0; }

/* ---------- Título y precio ---------- */
.rv-v2 .pdp__info .h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.06; letter-spacing: -.015em; }
.rv-v2 .pdp__info .pdp__flag { vertical-align: .45em; margin-left: 6px; }

.rv-v2 .v2f-precio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 18px 0 6px;
}
.rv-v2 .v2f-precio .precio {
  font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.5rem); font-weight: 500;
  line-height: 1; color: var(--negro);
}
.rv-v2 .v2f-precio__sub { font-size: .86rem; color: var(--gris); }
.rv-v2 .v2f-precio__desde {
  flex-basis: 100%;
  font-size: .86rem; font-weight: 600; color: var(--magenta);
}

/* Paquete: lo que sale cada pieza y contra la escalera */
.rv-v2 .v2f-paq {
  margin: 14px 0 6px; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--magenta);
  font-size: .9rem; line-height: 1.5;
}
.rv-v2 .v2f-paq p { margin: 0; }
.rv-v2 .v2f-paq p + p { margin-top: 2px; color: var(--gris); }

/* Sobre pedido: una línea con filete, no una caja ámbar con emoji */
.rv-v2 .v2f-aviso {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 14px 0 4px; padding: 12px 0;
  border-top: 1px solid var(--gris-linea); border-bottom: 1px solid var(--gris-linea);
  font-size: .88rem; line-height: 1.5;
}
.rv-v2 .v2f-aviso p { margin: 0; }
.rv-v2 .v2f-aviso svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--magenta); stroke-width: 1.6; }

/* ---------- Modelos con foto ---------- */
.rv-v2 .v2f-mod { margin: 26px 0 0; }
.rv-v2 .v2f-mod__cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 12px; font-size: .9rem;
}
.rv-v2 .v2f-mod__cab b { font-weight: 600; }
.rv-v2 .v2f-mod__n { font-size: .8rem; color: var(--gris); text-align: right; }
.rv-v2 .v2f-mod__fila {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 12px 8px;
}
.rv-v2 .v2f-mod__m { display: block; text-align: center; color: var(--negro); text-decoration: none; min-width: 0; }
.rv-v2 .v2f-mod__foto {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--hueso); border: 1px solid var(--gris-linea); border-radius: var(--radio);
  transition: border-color .2s;
}
.rv-v2 .v2f-mod__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.rv-v2 .v2f-mod__nom {
  display: block; margin-top: 6px; font-size: .74rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-v2 a.v2f-mod__m:hover .v2f-mod__foto { border-color: var(--negro); }
.rv-v2 a.v2f-mod__m:focus-visible { outline: none; }
.rv-v2 a.v2f-mod__m:focus-visible .v2f-mod__foto { outline: 2px solid var(--magenta); outline-offset: 2px; }
.rv-v2 .v2f-mod__m.is-on .v2f-mod__foto { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.rv-v2 .v2f-mod__m.is-on .v2f-mod__nom { color: var(--magenta); font-weight: 600; }
/* Agotado: se ve, apagado y cruzado, ANTES de picarlo */
.rv-v2 .v2f-mod__m.is-sin .v2f-mod__foto img { opacity: .35; filter: grayscale(1); }
.rv-v2 .v2f-mod__m.is-sin .v2f-mod__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .6px), var(--gris) 50%, transparent calc(50% + .6px));
}
.rv-v2 .v2f-mod__m.is-sin .v2f-mod__nom { color: var(--gris); text-decoration: line-through; }
.rv-v2 .v2f-mod__m.is-off { opacity: .55; }

@media (min-width: 900px) {
  .rv-v2 .v2f-mod__fila { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* En el teléfono: una sola fila que se desliza, sin empujar la compra hacia abajo */
@media (max-width: 899px) {
  .rv-v2 .v2f-mod__fila {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .rv-v2 .v2f-mod__fila::-webkit-scrollbar { display: none; }
  .rv-v2 .v2f-mod__m { scroll-snap-align: start; }
}

/* ---------- La escalera + la cantidad ----------
   Ronda 2 (Fer, 2-oct): «caja rosa con barras = horrible». Ahora es una lista
   editorial, como la tabla de tallas de una tienda de belleza de lujo: sin
   fondo, sin barras; rango a la izquierda, precio a la derecha, línea fina
   entre renglones. El escalón donde estás lleva un filete fucsia a la
   izquierda; el mejor precio de la línea va en fucsia siempre. */
.rv-v2 .v2f-compra { margin: 30px 0 0; padding: 0; background: none; border: 0; }
.rv-v2 .v2f-esc__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 10px; }
.rv-v2 .v2f-esc__t { margin: 0; font-family: var(--serif); font-size: 1.12rem; font-weight: 500; line-height: 1.25; color: var(--negro); }
.rv-v2 .v2f-esc__s { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--gris); }

.rv-v2 .v2f-esc__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--negro); }
.rv-v2 .v2f-esc__p { position: relative; border-bottom: 1px solid var(--gris-linea); }
.rv-v2 .v2f-esc__p > button,
.rv-v2 .v2f-esc__p > div {
  position: relative; width: 100%; min-height: 46px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2em; align-items: baseline; gap: 12px;
  padding: 13px 4px 11px 14px; background: none; border: 0; text-align: left; color: var(--negro);
  font: inherit; cursor: pointer; transition: background-color .2s;
}
.rv-v2 .v2f-esc__p > div { cursor: default; }
.rv-v2 .v2f-esc__p > button::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: var(--magenta); transform: scaleY(0); transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.rv-v2 .v2f-esc__rango { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--negro); }
.rv-v2 .v2f-esc__ah { font-size: .74rem; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rv-v2 .v2f-esc__barra { display: block; min-width: 3.6em; text-align: right; }
.rv-v2 .v2f-esc__barra b {
  display: inline; width: auto; height: auto; padding: 0; background: none; border: 0;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 500; font-variant-numeric: lining-nums tabular-nums;
  color: var(--negro);
}
/* El mejor precio de la línea, siempre en fucsia */
.rv-v2 .v2f-esc__p:last-child .v2f-esc__barra b { color: var(--magenta); }
.rv-v2 .v2f-esc__p > button:hover { background: rgba(214, 0, 110, .035); }
.rv-v2 .v2f-esc__p > button:focus-visible { outline: 2px solid var(--magenta); outline-offset: -2px; }
/* Donde estás: filete fucsia y el rango en negritas; nada de bloques de color */
.rv-v2 .v2f-esc__p.is-on > button::before { transform: scaleY(1); }
.rv-v2 .v2f-esc__p.is-on .v2f-esc__rango { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rv-v2 .v2f-esc__p > button::before { transition: none; } }

.rv-v2 .v2f-esc__estado {
  margin: 12px 0 0; padding: 0; border: 0; min-height: 2.9em;
  font-size: .8rem; line-height: 1.5; color: var(--gris);
}
.rv-v2 .v2f-esc__estado > span { display: block; }
.rv-v2 .v2f-esc__estado b { color: var(--magenta); font-weight: 600; }

/* La cantidad debajo, sin repetir el «te faltan» (lo dice el renglón de estado) */
.rv-v2 .v2f-compra .campo { margin: 18px 0 14px; }
.rv-v2 .v2f-compra .rv-tarifa { display: none; }

/* Escalera quieta (modelo agotado): igual de fina, sin marca de «donde estás» */
.rv-v2 .v2f-esc--quieta { margin-top: 26px; }
.rv-v2 .v2f-esc--quieta .v2f-esc__p.is-on .v2f-esc__rango { font-weight: 400; }
.rv-v2 .v2f-esc--quieta .v2f-esc__estado { min-height: 0; }

/* ---------- Botones de compra ---------- */
.rv-v2 #rv-compra-original form.cart { margin-top: 18px; }
.rv-v2 #rv-compra-original .single_add_to_cart_button { min-height: 54px; font-size: .78rem; }
.rv-v2 #rv-compra-original .rv-btn-total { font-weight: 700; }

/* ---------- Agotado con salida ---------- */
.rv-v2 .v2f-agotado {
  margin: 26px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--negro);
}
.rv-v2 .v2f-agotado__t { margin: 0 0 6px; font-family: var(--serif); font-size: 1.32rem; line-height: 1.2; }
.rv-v2 .v2f-agotado p:not(.v2f-agotado__t) { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--gris); }
.rv-v2 .v2f-agotado__acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rv-v2 .v2f-agotado__acc .btn { flex: 1 1 200px; min-height: 48px; }

/* ---------- Entrega, envío gratis y mayoreo: una lista quieta ---------- */
.rv-v2 .v2f-serv { list-style: none; margin: 22px 0 8px; padding: 0; }
.rv-v2 .v2f-serv li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--gris-linea);
  font-size: .88rem; line-height: 1.5;
}
.rv-v2 .v2f-serv li:last-child { border-bottom: 1px solid var(--gris-linea); }
.rv-v2 .v2f-serv svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--magenta); stroke-width: 1.5; stroke-linejoin: round; }
.rv-v2 .v2f-serv svg.v2f-serv__wa { fill: #25D366; stroke: none; }
.rv-v2 .v2f-serv a { color: var(--negro); font-weight: 600; text-decoration: underline; text-decoration-color: var(--magenta); text-underline-offset: 3px; white-space: nowrap; }
.rv-v2 .v2f-serv a:hover { color: var(--magenta); }

/* ---------- Galería en el teléfono: la foto no ocupa pantalla y media ---------- */
@media (max-width: 899px) {
  .rv-v2:not(.rv-linea-sombras-liquidas) .pdp__gal .pdp__main { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; object-position: 50% 40%; }
}

/* ---------- Opiniones vacías: una franja corta ---------- */
.rv-v2 .v2f-op { padding-block: clamp(36px, 5vw, 56px); }
.rv-v2 .v2f-op__caja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px;
  max-width: 960px; margin: 0 auto; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 36px);
  background: #fff; border-left: 2px solid var(--magenta);
}
.rv-v2 .v2f-op__caja > div { flex: 1 1 380px; }
.rv-v2 .v2f-op__t { margin: 0 0 6px; font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 500; }
.rv-v2 .v2f-op__s { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--gris); max-width: 60ch; }
.rv-v2 .v2f-op__s b { color: var(--negro); font-weight: 600; }
.rv-v2 .v2f-op__caja .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .rv-v2 .v2f-op__caja .btn { flex: 1 1 100%; } }

/* ---------- Relacionados: los que suman ---------- */
.rv-v2 .v2f-rel__s { margin: 14px auto 0; max-width: 52ch; font-size: .92rem; line-height: 1.5; color: var(--gris); }

/* ---------- Barra fija de compra ---------- */
@media (min-width: 861px) {
  .rv-v2 .rv-compra-fija { border-radius: var(--radio); }
}
@media (max-width: 560px) {
  .rv-v2 .rv-compra-fija__add { letter-spacing: .06em; font-size: .7rem; }
}

/* ---------- Paquete: «Arma tu paquete» con la misma voz que la escalera ----------
   La caja viene del plugin rv-precios (rosa, 12 px de esquina, borde grueso).
   En la V2 se alinea con el resto: rubor, filete magenta arriba, esquina de 2 px. */
.rv-v2 .paq-conf__caja {
  margin: 26px 0 8px; padding: 16px 0 0;
  background: none; border: 0; border-top: 1px solid var(--negro); border-radius: 0;
}
.rv-v2 .paq-conf__cab b { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; }
.rv-v2 .paq-conf__abrir { width: 100%; min-height: 48px; background: #fff; }