/* ═══════════ FICHA DE PRODUCTO ═══════════ */
.mp-ficha{ padding-block:var(--mp-e3) var(--mp-e7) }
.mp-ficha .mp-migas{ margin-bottom:var(--mp-e3) }
.mp-migas__int{ color:var(--mp-tinta-3); font-size:.75rem }
.mp-migas a:hover{ color:var(--mp-vino) }

.mp-ficha__grid{
  display:grid; grid-template-columns:1fr; gap:var(--mp-e5);
}
@media (min-width:860px){
  .mp-ficha__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--mp-e6); align-items:start }
}


/* ── galería ── */
/* En el teléfono es un carrusel que se desliza con el dedo, a todo el ancho y sin
   miniaturas, como la referencia. En el escritorio se ve una sola foto y mandan las
   miniaturas de al lado, ahora grandes y sin marco. Son las MISMAS imágenes en los dos
   casos: cambia el comportamiento, no el contenido, así no se descarga nada dos veces. */
.mp-ficha__galeria{ display:flex; flex-direction:column; gap:.7rem }
@media (min-width:640px){ .mp-ficha__galeria{ flex-direction:row-reverse; justify-content:flex-end; gap:1rem } }

/*
 * En escritorio la galería se queda quieta mientras la columna de la derecha sigue.
 *
 * La foto es lo que sostiene la decisión de compra: al bajar a mirar las tallas, la
 * descripción o las medidas, la prenda desaparecía de la pantalla justo cuando se está
 * decidiendo. Ahora acompaña.
 *
 * Funciona porque la celda de la rejilla es tan alta como la columna más larga —la de
 * la información, 1.294 px contra 684 de la galería— y `align-items:start` deja a la
 * galería con su altura propia dentro de esa celda. Ese hueco sobrante es por donde
 * se desplaza.
 */
@media (min-width:860px){
  .mp-ficha__galeria{
    position:sticky;
    top:calc(var(--mp-cab-alto) + 1.25rem);
    align-self:start;
  }

  /*
   * El tope que impide que una foto alta se salga de la pantalla.
   *
   * Hace falta: hay prendas con UNA sola foto y, sin miniaturas al lado, esa foto ocupa
   * la columna entera —985 px donde bajo la cabecera caben 789—. Además un `sticky` más
   * alto que la ventana deja de pegar.
   *
   * Pero el tope va al ANCHO, no al alto. Topando el alto con el ancho al 100%, la caja
   * dejaba de calzar con la foto y aparecían dos franjas de mate a los lados: un marco,
   * que es justo lo que no se quiere. Convertido con `--mp-foto-n` —la misma proporción
   * en decimal, lo único que CSS sabe multiplicar por una longitud— la caja ES la foto
   * siempre: horizontal si es horizontal, cuadrada si es cuadrada. Lo único que cambia
   * cuando no cabe es que se angosta entera, sin franjas.
   */
  .mp-galeria__slide{
    width:100%;
    max-width:calc((100vh - var(--mp-cab-alto) - 3rem) * var(--mp-foto-n, 0.8));
    /* pegada al lado de sus miniaturas, no flotando al centro de la columna */
    margin-inline:0 auto;
  }
  .mp-galeria__slide img{ width:100%; height:100%; object-fit:contain }
}

.mp-galeria__fotos{
  display:flex; position:relative;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* el ancho completo de la pantalla, escapando del margen del contenedor */
  margin-inline:calc(-1 * var(--mp-gutter));
}
.mp-galeria__fotos::-webkit-scrollbar{ display:none }
.mp-galeria__slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  /* la proporción la pone la foto (`--mp-foto`, inline desde la plantilla). Fijarla acá
     recortaba el 20% del ancho a las fotos cuadradas, que son casi todo el catálogo. */
  aspect-ratio:var(--mp-foto, 4/5);
  background:var(--mp-lino);
  overflow:hidden;
}
/* `contain` y no `cover`: con el marco calzado son equivalentes, pero si el tope de alto
   llega a achicar la caja, `cover` volvería a recortar y `contain` solo deja aire. */
.mp-galeria__slide img{ width:100%; height:100%; object-fit:contain; display:block }

/* puntitos: sólo teléfono */
.mp-galeria__puntos{ display:flex; justify-content:center; gap:.4rem }
.mp-galeria__punto{
  width:6px; height:6px; padding:0; border-radius:50%;
  background:var(--mp-hilo-firme);
  transition:background-color var(--mp-rapido) var(--mp-easing), transform var(--mp-rapido) var(--mp-easing);
}
.mp-galeria__punto.is-activo{ background:var(--mp-tinta); transform:scale(1.25) }

/* miniaturas: sólo escritorio */
.mp-galeria{ display:none }

@media (min-width:640px){
  .mp-galeria__fotos{
    display:block; overflow:visible; margin-inline:0;
    flex:1 1 auto; min-width:0;
  }
  .mp-galeria__slide{ display:none; aspect-ratio:var(--mp-foto, 4/5) }
  .mp-galeria__slide.is-activa{ display:block }

  .mp-galeria__puntos{ display:none }

  /*
   * La tira de miniaturas es un carrusel vertical acotado, no una lista infinita.
   *
   * Sin tope, con diez fotos medía ~1.400 px: la columna quedaba más alta que la
   * pantalla, y eso hacía DOS destrozos a la vez — el `position:sticky` de arriba deja
   * de pegar cuando el elemento no cabe en la ventana, y al lado de la foto (509 px)
   * se abría un vacío de 900 px. Acotarla arregla las dos cosas de una.
   *
   * `--mp-alto-foto` lo escribe el JS con la altura real de la foto activa, para que la
   * tira termine exactamente donde termina la foto. El calc() es el respaldo del primer
   * pintado y de si el JS no llega a correr.
   */
  .mp-galeria{
    display:flex; flex-direction:column; gap:.5rem;
    width:110px; flex:0 0 110px;
    max-height:var(--mp-alto-foto, calc(100vh - var(--mp-cab-alto) - 3rem));
    overflow-y:auto;
    scrollbar-width:none;
    scroll-behavior:smooth;
    overscroll-behavior:contain;   /* que no arrastre la página al llegar al final */
    position:relative;
  }
  .mp-galeria::-webkit-scrollbar{ display:none }

  .mp-galeria__foto{
    /* `flex:0 0 auto` obligatorio: `flex-shrink` vale 1 por defecto, así que dentro de
       una columna con tope las miniaturas se APLASTABAN en vez de desbordar y poder
       desplazarse. No se encogen: se sale de ellas con scroll. */
    flex:0 0 auto;
    display:block; width:100%; padding:0; cursor:pointer;
    border:0; background:var(--mp-lino); overflow:hidden;
    aspect-ratio:var(--mp-foto, 4/5);
    opacity:.55;
    transition:opacity var(--mp-rapido) var(--mp-easing);
  }
  .mp-galeria__foto img{ width:100%; height:100%; object-fit:contain; display:block }
  .mp-galeria__foto:hover{ opacity:.85 }
  .mp-galeria__foto.is-activa{ opacity:1 }
}
/*
 * Mientras quede tira por recorrer, un velo abajo lo insinúa. Lo enciende y lo apaga el
 * JS: un degradado fijo taparía la última miniatura al llegar al final.
 *
 * Va DENTRO de la tira y con `position:sticky`, no `absolute` sobre la columna. La
 * primera versión le puso `position:relative` a `.mp-ficha__galeria` para anclarlo y con
 * eso le pisó el `position:sticky` —misma especificidad, gana la regla de más abajo—:
 * la foto dejó de acompañar el scroll, que era justo lo que había que arreglar.
 *
 * El margen negativo lo saca del flujo de la columna para que no sume altura (los 3.5rem
 * del velo más el hueco de .5rem que le pondría el `gap`).
 */
.mp-galeria__mas{
  position:sticky; bottom:0; z-index:1;
  flex:0 0 auto; height:3.5rem; margin-top:calc(-3.5rem - .5rem);
  pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, transparent, var(--mp-papel));
  transition:opacity var(--mp-rapido) var(--mp-easing);
}
.mp-galeria__mas.is-visible{ opacity:1 }

@media (min-width:1024px){
  .mp-galeria{ width:132px; flex:0 0 132px }
}

/* ── resumen ── */
.mp-ficha__resumen{ display:flex; flex-direction:column; gap:.85rem }
.mp-ficha__nom{ font-size:clamp(1.4rem,3.4vw,1.9rem) }
/* el SKU es para quien pregunta por WhatsApp o en tienda: se lee, pero no compite.
   El margen negativo lo pega al nombre (el `gap` del resumen es de .85rem). */
.mp-ficha__sku{
  margin-top:-.55rem;
  font-size:.6875rem; letter-spacing:.08em; color:var(--mp-tinta-3);
  font-variant-numeric:tabular-nums;
}
.mp-ficha__precio{ font-size:1.0625rem; font-weight:500 }
.mp-ficha__precio del{ color:var(--mp-tinta-3); font-weight:400; margin-right:.4rem; font-size:.9em }
.mp-ficha__precio ins{ text-decoration:none; color:var(--mp-vino) }

.mp-ficha__estado{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600 }
.mp-ficha__estado--stock{ color:var(--mp-stock) }
.mp-ficha__estado--agotado{ color:var(--mp-tinta-3) }

.mp-ficha__bloque{ padding-top:.35rem }
.mp-ficha__etq{ display:block; margin-bottom:.55rem; color:var(--mp-tinta-2) }

.mp-ficha__colores{ display:flex; gap:.5rem; flex-wrap:wrap }
.mp-ficha__color{
  display:block; width:44px; height:44px; border-radius:50%; overflow:hidden;
  border:1px solid var(--mp-hilo); transition:border-color var(--mp-rapido) var(--mp-easing);
}
.mp-ficha__color img{ width:100%; height:100%; object-fit:cover }
.mp-ficha__color:hover{ border-color:var(--mp-hilo-firme) }
.mp-ficha__color.is-activo{ border-color:var(--mp-tinta); outline:1px solid var(--mp-tinta); outline-offset:2px }

.mp-ficha__tallas{ display:flex; gap:.5rem; flex-wrap:wrap }
.mp-ficha__talla{
  min-width:2.9rem; padding:.55rem .5rem;
  border:1px solid var(--mp-hilo-firme); background:transparent; color:var(--mp-tinta);
  font-family:var(--mp-sans); font-size:.8125rem; cursor:pointer;
  transition:border-color var(--mp-rapido) var(--mp-easing), background-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-ficha__talla:hover:not(:disabled){ border-color:var(--mp-tinta) }
.mp-ficha__talla.is-activa{ background:var(--mp-tinta); border-color:var(--mp-tinta); color:var(--mp-papel) }
.mp-ficha__talla:disabled{
  color:var(--mp-tinta-3); border-style:dashed; text-decoration:line-through;
  cursor:not-allowed; opacity:.7;
}

/* el <select> nativo de WooCommerce sigue en el DOM (lo necesita su JS de precio/stock)
   pero la interfaz real son las píldoras de arriba */
.variations{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.single_variation_wrap .woocommerce-variation-add-to-cart{ display:flex; flex-direction:column; gap:.7rem }
.woocommerce-variation-availability{ font-size:.8rem; color:var(--mp-tinta-2) }
.woocommerce-variation-price{ display:none } /* el precio ya se muestra arriba */

.mp-ficha__compra{ margin-top:.15rem }
/* WooCommerce le pone `style="display:block"` EN LÍNEA al encontrar la variación — le gana
   a cualquier regla de hoja de estilos que no sea !important, y el stepper reaparecía. */
.mp-ficha__compra .quantity{ display:none !important } /* una unidad por defecto; simplifica el paso a compra */
/* WooCommerce trae el botón «.button.alt» en su morado de fábrica con :where(), que
   mantiene la especificidad baja A PROPÓSITO para que el tema mande — pero como el botón
   real lleva TRES clases (button, alt, single_add_to_cart_button), su selector de 3 clases
   le gana a uno de 2. Se iguala repitiendo las clases reales del botón. */
.mp-ficha__compra button.single_add_to_cart_button.button.alt,
.mp-ficha__compra button[type="submit"]{
  width:100%; padding:.95rem 1.2rem;
  background:var(--mp-tinta) !important; color:var(--mp-papel) !important; border:0;
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-ficha__compra button.single_add_to_cart_button.button.alt:hover{ background:var(--mp-vino) !important }
.mp-ficha__compra button.disabled, .mp-ficha__compra button:disabled{
  background:var(--mp-hilo-firme) !important; color:var(--mp-tinta-3) !important; cursor:not-allowed;
}
.mp-ficha__compra .reset_variations{ display:none }

.mp-ficha__wa{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.8rem 1.2rem; border:1px solid var(--mp-tinta);
  font-size:.8125rem; letter-spacing:.06em; color:var(--mp-tinta);
  transition:background-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-ficha__wa:hover{ background:var(--mp-tinta); color:var(--mp-papel) }

/* ── acordeón ── */
.mp-acordeon{ margin-top:.6rem; border-top:1px solid var(--mp-hilo) }
.mp-acordeon__item{ border-bottom:1px solid var(--mp-hilo) }
.mp-acordeon__item summary{
  padding-block:.9rem; cursor:pointer; list-style:none;
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  display:flex; justify-content:space-between; align-items:center;
}
.mp-acordeon__item summary::-webkit-details-marker{ display:none }
.mp-acordeon__item summary::after{ content:"+"; font-family:var(--mp-serif); font-size:1.1rem; color:var(--mp-tinta-3) }
.mp-acordeon__item[open] summary::after{ content:"–" }
.mp-acordeon__cont{ padding-bottom:1rem; font-size:.8438rem; color:var(--mp-tinta-2); line-height:1.7 }
.mp-acordeon__cont a{ color:var(--mp-vino); text-decoration:underline; text-underline-offset:2px }
/* el reset del tema deja los <p> sin margen; en la descripción sí hacen falta */
.mp-acordeon__cont p + p{ margin-top:.75em }

.mp-detalles{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:0 }
.mp-detalles dt{ color:var(--mp-tinta-3) }
.mp-detalles dd{ margin:0 }
.mp-detalles-html ul{ margin:0; padding-left:1.1rem }
.mp-detalles-html li{ margin-bottom:.3rem }

/* ═══════════ ESTRELLAS ═══════════ */
/* dos capas de estrellas: las vacías detrás y las llenas recortadas por ancho,
   así una puntuación de 4,3 se ve como 4,3 y no redondeada */
.mp-estrellas{ position:relative; display:inline-block; white-space:nowrap; line-height:1; font-size:.875rem; letter-spacing:.08em }
.mp-estrellas__fondo{ color:var(--mp-hilo-firme) }
.mp-estrellas__lleno{
  position:absolute; left:0; top:0; overflow:hidden;
  color:var(--mp-tinta); white-space:nowrap; letter-spacing:.08em;
}
.mp-estrellas--grande{ font-size:1.25rem }

.mp-ficha__nota{ display:flex; align-items:center; gap:.5rem; color:var(--mp-tinta-2) }
.mp-ficha__nota:hover{ color:var(--mp-tinta) }

/* ═══════════ RESEÑAS ═══════════ */
.mp-resenas{ border-top:1px solid var(--mp-hilo); padding-block:var(--mp-e6) var(--mp-e7); margin-top:var(--mp-e5) }
.mp-resenas__tit{ font-size:clamp(1.3rem,3vw,1.75rem); margin-bottom:var(--mp-e4) }

.mp-resenas__resumen{
  display:grid; grid-template-columns:1fr; gap:var(--mp-e4);
  padding-bottom:var(--mp-e4); margin-bottom:var(--mp-e4); border-bottom:1px solid var(--mp-hilo);
}
@media (min-width:720px){ .mp-resenas__resumen{ grid-template-columns:auto 1fr; gap:var(--mp-e6); align-items:center } }
.mp-resenas__nota{ display:flex; flex-direction:column; gap:.4rem; align-items:flex-start }
.mp-resenas__promedio{ font-size:2.75rem; font-weight:500; line-height:1 }

.mp-resenas__reparto{ display:flex; flex-direction:column; gap:.35rem; max-width:22rem }
.mp-resenas__fila{ display:grid; grid-template-columns:2.2rem 1fr 2rem; align-items:center; gap:.6rem; font-size:.75rem; color:var(--mp-tinta-2) }
.mp-resenas__barra{ height:5px; background:var(--mp-lino-hondo); display:block }
.mp-resenas__barra span{ display:block; height:100%; background:var(--mp-tinta) }
.mp-resenas__cuenta{ text-align:right; font-variant-numeric:tabular-nums }

.mp-resenas__cuerpo{ display:grid; grid-template-columns:1fr; gap:var(--mp-e6) }
@media (min-width:900px){ .mp-resenas__cuerpo{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--mp-e6) } }

.mp-resenas__items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.mp-resena{ border-bottom:1px solid var(--mp-hilo); padding-block:var(--mp-e3) }
.mp-resena:first-child{ padding-top:0 }
.mp-resena__cab{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.4rem }
.mp-resena__autor{ font-weight:500; font-size:.9375rem }
.mp-resena__verificada{
  display:inline-block; margin-left:.5rem; padding:.15rem .4rem;
  background:var(--mp-lino); color:var(--mp-stock);
  font-size:.5625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.mp-resena__texto{ margin-top:.5rem; color:var(--mp-tinta-2); line-height:1.7; font-size:.9375rem }
.mp-resena__texto p{ margin-bottom:.5rem }
.mp-resena__talla{ margin-top:.5rem; color:var(--mp-tinta-3) }
.mp-resena__talla strong{ color:var(--mp-tinta) }

.mp-resena__fotos{ display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap }
.mp-resena__foto{ display:block; width:72px; height:72px; overflow:hidden; background:var(--mp-lino) }
.mp-resena__foto img{ width:100%; height:100%; object-fit:cover; transition:transform var(--mp-medio) var(--mp-easing) }
.mp-resena__foto:hover img{ transform:scale(1.06) }

.mp-resenas__vacio{ color:var(--mp-tinta-2); max-width:44ch; line-height:1.7 }
.mp-resenas__paginacion{ margin-top:var(--mp-e4) }

/* ── formulario ── */
.mp-resenas__formulario .comment-reply-title{
  font-family:var(--mp-sans); font-size:.75rem; font-weight:600;
  letter-spacing:var(--mp-track-etq); text-transform:uppercase; display:block; margin-bottom:var(--mp-e3);
}
.mp-resenas__formulario label{ display:block; font-size:.8125rem; color:var(--mp-tinta-2); margin-bottom:.35rem }
.mp-resenas__formulario input[type="text"],
.mp-resenas__formulario input[type="email"],
.mp-resenas__formulario textarea,
.mp-resenas__formulario select{
  width:100%; padding:.7rem .8rem;
  border:1px solid var(--mp-hilo-firme); background:var(--mp-papel);
  font-family:var(--mp-sans); font-size:.9375rem; color:var(--mp-tinta); border-radius:0;
}
.mp-resenas__formulario textarea{ min-height:7rem; resize:vertical }
.mp-resenas__formulario input:focus, .mp-resenas__formulario textarea:focus, .mp-resenas__formulario select:focus{
  outline:0; border-color:var(--mp-tinta);
}
.mp-resenas__formulario p{ margin-bottom:var(--mp-e2) }
.mp-resenas__formulario input[type="file"]{ font-size:.8125rem; color:var(--mp-tinta-2) }
.mp-resena__ayuda{ display:block; margin-top:.3rem; color:var(--mp-tinta-3) }
.mp-resenas__formulario .submit{
  padding:.9rem 1.8rem; background:var(--mp-tinta); color:var(--mp-papel); border:0;
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-resenas__formulario .submit:hover{ background:var(--mp-vino) }

/* las estrellas para puntuar, que WooCommerce dibuja con su propia tipografía de iconos */
.mp-resenas__formulario .stars a{ color:var(--mp-tinta) }
.comment-form-rating label{ margin-bottom:.2rem }
/* la nota de WordPress sobre el correo salía con el mismo peso que el título */
.mp-resenas__formulario .comment-notes{ font-size:var(--mp-t-menor); color:var(--mp-tinta-3); margin-bottom:var(--mp-e3) }
.mp-resenas__formulario .comment-notes .required{ color:var(--mp-vino) }

/* ── la opinión destacada, arriba, como burbuja de conversación ── */
.mp-burbuja{
  display:block; padding:.9rem 1.1rem; margin-top:.2rem;
  background:var(--mp-lino); border:1px solid var(--mp-hilo);
  border-radius:14px;
  transition:border-color var(--mp-rapido) var(--mp-easing);
}
.mp-burbuja:hover{ border-color:var(--mp-hilo-firme); color:inherit }
.mp-burbuja__autor{ display:block; font-weight:600; font-size:.875rem; margin-bottom:.2rem }
.mp-burbuja__texto{ display:block; font-size:.9375rem; line-height:1.55; color:var(--mp-tinta-2) }

/* ═══════════ FILAS DE SUGERENCIAS ═══════════ */
.mp-fila{ padding-block:var(--mp-e5) }
.mp-fila__tit{ font-size:clamp(1.1rem,2.4vw,1.5rem); margin-bottom:var(--mp-e3); text-align:center }
.mp-fila__riel{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr);
  gap:var(--mp-e2);
  overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none;
  /* Sin esto, lo absoluto de adentro (el «precio original era…» que WooCommerce deja para
     lectores de pantalla) toma de referencia la página y no el riel: el recorte no lo
     alcanza, y las tarjetas fuera de pantalla estiraban la ficha a 600-800 px en el
     teléfono (la página se veía alejada y corrida). Va en todo riel con scroll. */
  position:relative;
  /* El riel se sale del margen del contenedor para que las tarjetas se corten en el borde
     de la pantalla al deslizar. El `padding` devuelve el aire de la primera y la última…
     pero `scroll-snap-align:start` alinea la tarjeta con el BORDE del contenedor, no con
     su caja de contenido: el navegador se desplazaba solo 20 px al cargar y la primera
     tarjeta quedaba pegada a la orilla, desalineada con todo el resto de la página.
     `scroll-padding-inline` es lo que mueve ese punto de anclaje. */
  padding-inline:var(--mp-gutter); margin-inline:calc(-1 * var(--mp-gutter));
  scroll-padding-inline:var(--mp-gutter);
}
.mp-fila__riel::-webkit-scrollbar{ display:none }
@media (min-width:900px){
  .mp-fila__riel{ grid-auto-columns:minmax(0,1fr); grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:row; overflow:visible; padding-inline:0; margin-inline:0; gap:var(--mp-e3) }
}
.mp-fila__item{ scroll-snap-align:start; min-width:0 }
.mp-fila__foto{ position:relative; display:block; aspect-ratio:2/3; background:var(--mp-lino); overflow:hidden; margin-bottom:.6rem }
.mp-fila__foto img{ width:100%; height:100%; object-fit:cover; aspect-ratio:2/3; transition:transform var(--mp-medio) var(--mp-easing) }
.mp-fila__item:hover .mp-fila__foto img{ transform:scale(1.03) }
.mp-fila__oferta{
  position:absolute; top:.5rem; left:.5rem;
  background:var(--mp-vino); color:var(--mp-papel);
  font-size:.625rem; font-weight:600; letter-spacing:.06em; padding:.2rem .45rem;
}
.mp-fila__nom{ font-family:var(--mp-sans); font-size:.8125rem; font-weight:400; line-height:1.35; margin:0 }
.mp-fila__precio{ font-size:.8125rem; margin-top:.15rem }
.mp-fila__precio del{ color:var(--mp-tinta-3); font-weight:400; margin-right:.3rem }
.mp-fila__precio ins{ text-decoration:none; color:var(--mp-vino) }

/* ═══════════ VENTANA DE OPINIÓN, POR PASOS ═══════════ */
.mp-resenas__invita{
  border:1px solid var(--mp-hilo); background:var(--mp-lino);
  padding:var(--mp-e3); text-align:center; border-radius:14px;
}
/*
 * En dos columnas la caja es un ítem de rejilla, y un ítem de rejilla se ESTIRA por
 * defecto hasta el alto de su fila: con seis opiniones al lado, la caja crecía hasta
 * abajo y quedaba medio metro de relleno gris bajo el botón. `start` la deja del alto
 * de lo que tiene dentro, y ya que no se estira puede además quedarse pegada mientras
 * se recorre la lista —el mismo `sticky` que usa el resumen del checkout—.
 */
@media (min-width:900px){
  .mp-resenas__invita{
    align-self:start;
    position:sticky; top:calc(var(--mp-cab-alto) + 1rem);
  }
}
.mp-resenas__invita-txt{ color:var(--mp-tinta-2); font-size:.9375rem; line-height:1.6; margin-bottom:var(--mp-e2) }
.mp-resenas__abrir{
  padding:.85rem 1.6rem; background:var(--mp-tinta); color:var(--mp-papel); border:0;
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-resenas__abrir:hover{ background:var(--mp-vino) }

.mp-modal__fondo{
  position:fixed; inset:0; z-index:100; background:rgba(30,27,25,.5);
  opacity:0; pointer-events:none; transition:opacity var(--mp-medio) var(--mp-easing);
}
.mp-modal:not([hidden]) + .mp-modal__fondo{ opacity:1; pointer-events:auto }

.mp-modal{
  position:fixed; inset:0; z-index:101;
  display:flex; align-items:center; justify-content:center;
  padding:var(--mp-gutter); pointer-events:none;
}
.mp-modal[hidden]{ display:none }
.mp-modal__panel{
  pointer-events:auto;
  width:min(520px, 100%); max-height:min(88vh, 720px);
  background:var(--mp-papel); box-shadow:0 24px 60px -20px rgba(30,27,25,.4);
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
}
@media (max-width:560px){
  .mp-modal{ padding:0; align-items:flex-end }
  .mp-modal__panel{ max-height:92vh; border-radius:16px 16px 0 0 }
}

.mp-modal__cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--mp-e3) .9rem; flex:0 0 auto;
}
.mp-modal__tit{ font-size:1.05rem; font-weight:500 }
.mp-modal__cerrar{ padding:.4rem; color:var(--mp-tinta-2) }
.mp-modal__cerrar:hover{ color:var(--mp-tinta) }

.mp-modal__progreso{ height:2px; background:var(--mp-hilo); flex:0 0 auto }
.mp-modal__progreso span{
  display:block; height:100%; width:20%; background:var(--mp-tinta);
  transition:width var(--mp-medio) var(--mp-easing);
}

.mp-modal__cuerpo{ flex:1 1 auto; overflow-y:auto; padding:var(--mp-e4) var(--mp-e3) }
.mp-modal__form{ margin:0 }

/* un paso a la vez */
.mp-paso{ display:none }
.mp-paso.is-activo{ display:block; animation:mp-paso-entra .24s var(--mp-easing) both }
@keyframes mp-paso-entra{ from{ opacity:0; transform:translateY(6px) } }
.mp-paso__pregunta{
  font-family:var(--mp-sans); font-size:1.0625rem; font-weight:500;
  margin-bottom:var(--mp-e3); line-height:1.4;
}
.mp-paso__ayuda{ margin-top:-.7rem; margin-bottom:var(--mp-e3); color:var(--mp-tinta-3) }
.mp-paso__aviso{ margin-top:.9rem; color:var(--mp-vino); font-size:.8125rem }

/* los tiles, que son la forma de responder cada paso */
.mp-tiles{ display:flex; flex-direction:column; gap:.5rem }
.mp-tiles--notas .mp-tile{ justify-content:flex-start; gap:.8rem }
.mp-tile{
  display:flex; align-items:center; width:100%;
  padding:.85rem 1rem; text-align:left;
  border:1px solid var(--mp-hilo-firme); background:transparent;
  font-family:var(--mp-sans); font-size:.9375rem; color:var(--mp-tinta);
  cursor:pointer; border-radius:10px;
  transition:border-color var(--mp-rapido) var(--mp-easing), background-color var(--mp-rapido) var(--mp-easing);
}
.mp-tile:hover{ border-color:var(--mp-tinta) }
.mp-tile.is-elegido{ border-color:var(--mp-tinta); background:var(--mp-tinta); color:var(--mp-papel) }
.mp-tile__estrellas{ color:var(--mp-vino); letter-spacing:.06em; font-size:.9375rem }
.mp-tile.is-elegido .mp-tile__estrellas{ color:var(--mp-papel) }
.mp-tiles:has(.mp-tile--corto){ flex-direction:row; flex-wrap:wrap }
.mp-tile--corto{ width:auto; min-width:4.2rem; justify-content:center }

.mp-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

.mp-paso__previas{ display:flex; gap:.5rem; margin-top:.9rem; flex-wrap:wrap }
.mp-paso__previas img{ width:64px; height:64px; object-fit:cover; border-radius:8px }

.mp-modal__pie{
  flex:0 0 auto; display:flex; gap:.6rem; justify-content:space-between;
  padding:var(--mp-e2) var(--mp-e3) var(--mp-e3); border-top:1px solid var(--mp-hilo);
}
.mp-modal__atras{
  padding:.8rem 1.2rem; border:1px solid var(--mp-hilo-firme); background:transparent;
  font-family:var(--mp-sans); font-size:.8125rem; letter-spacing:.06em; cursor:pointer; border-radius:10px;
}
.mp-modal__atras[hidden]{ display:none }
.mp-modal__siguiente,
.mp-modal__form .submit{
  flex:1 1 auto; padding:.85rem 1.4rem;
  background:var(--mp-tinta); color:var(--mp-papel); border:0; border-radius:10px;
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-modal__siguiente:hover, .mp-modal__form .submit:hover{ background:var(--mp-vino) }
.mp-modal__siguiente[hidden], .mp-modal__form .submit[hidden]{ display:none }
/* el botón de enviar vive dentro del formulario pero se ve en el pie */
.mp-modal__form .form-submit{ margin:0; position:absolute; bottom:var(--mp-e3); left:var(--mp-e3); right:var(--mp-e3); z-index:2 }
.mp-modal__panel{ position:relative }
.mp-modal__form .form-submit .submit{ width:100% }
/* WooCommerce convierte el <select> de puntuación en su propio widget de estrellas.
   Acá la forma de puntuar son los tiles del primer paso, así que ese widget sobra. */
#mp-opinion .stars{ display:none }

/* los campos nativos de WordPress del último paso, al mismo idioma que los tiles */
.mp-modal__form .comment-form-author,
.mp-modal__form .comment-form-email{ margin-bottom:.9rem }
.mp-modal__form .comment-form-url{ display:none } /* «Web» en una reseña sólo atrae spam */
.mp-modal__form .comment-form-author label,
.mp-modal__form .comment-form-email label{
  display:block; margin-bottom:.35rem;
  font-size:.8125rem; color:var(--mp-tinta-2);
}
.mp-modal__form input[type="text"],
.mp-modal__form input[type="email"],
.mp-modal__form textarea{
  width:100%; padding:.8rem .9rem;
  border:1px solid var(--mp-hilo-firme); border-radius:10px;
  background:var(--mp-papel); font-family:var(--mp-sans); font-size:.9375rem; color:var(--mp-tinta);
}
.mp-modal__form input:focus, .mp-modal__form textarea:focus{ outline:0; border-color:var(--mp-tinta) }
.mp-modal__form .required{ color:var(--mp-vino) }
.mp-modal__form .comment-form-cookies-consent{ display:none }

/* el motivo por el que no se pudo agregar, bajo el botón (antes era un alert del sistema) */
.mp-ficha__aviso{
  margin-top:.7rem; padding:.7rem .9rem;
  background:var(--mp-lino); border-left:3px solid var(--mp-vino);
  font-size:.8125rem; line-height:1.45; color:var(--mp-tinta);
}

/* ═══════════ GUÍA DE TALLAS ═══════════ */
/* El enlace va pegado a la etiqueta «Talla», que es donde nace la duda. */
.mp-ficha__tallas-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--mp-e2); margin-bottom:.55rem;
}
.mp-ficha__tallas-cab .mp-ficha__etq{ margin-bottom:0 }
.mp-ficha__guia{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:0; background:none; border:0;
  font-family:var(--mp-sans); font-size:.75rem; letter-spacing:.02em;
  color:var(--mp-tinta-2); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color var(--mp-rapido) var(--mp-easing);
}
.mp-ficha__guia:hover{ color:var(--mp-vino) }

/* la guía necesita más ancho que el formulario de opinión: la tabla tiene 4 columnas */
.mp-modal__panel--ancho{ width:min(620px, 100%) }

.mp-pestanas{
  display:flex; flex:0 0 auto;
  border-bottom:1px solid var(--mp-hilo);
  padding-inline:var(--mp-e3);
  gap:1.25rem;
}
.mp-pestana{
  position:relative; padding:0 0 .7rem; background:none; border:0;
  font-family:var(--mp-sans); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mp-tinta-3); cursor:pointer; white-space:nowrap;
  transition:color var(--mp-rapido) var(--mp-easing);
}
.mp-pestana:hover{ color:var(--mp-tinta-2) }
.mp-pestana.is-activa{ color:var(--mp-tinta) }
.mp-pestana.is-activa::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--mp-tinta);
}
@media (max-width:420px){
  .mp-pestanas{ gap:.9rem; padding-inline:var(--mp-e2) }
  .mp-pestana{ font-size:.6875rem; letter-spacing:.06em }
}

.mp-hoja{ display:none }
.mp-hoja.is-activa{ display:block; animation:mp-paso-entra .24s var(--mp-easing) both }
.mp-hoja__intro{ font-size:.875rem; color:var(--mp-tinta-2); margin-bottom:var(--mp-e3); line-height:1.5 }
.mp-hoja__nota{ font-size:.75rem; color:var(--mp-tinta-3); margin-top:var(--mp-e2); line-height:1.5 }

/* ── calculadora ── */
.mp-medidas{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.6rem }
@media (max-width:420px){ .mp-medidas{ grid-template-columns:1fr; gap:.5rem } }
.mp-medida{ position:relative; display:block }
.mp-medida > span{
  display:block; margin-bottom:.3rem;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mp-tinta-2);
}
.mp-medida input{
  width:100%; padding:.65rem 2.2rem .65rem .7rem;
  border:1px solid var(--mp-hilo-firme); border-radius:0; background:var(--mp-papel);
  font-family:var(--mp-sans); font-size:1rem; color:var(--mp-tinta);
}
/* 16px reales: bajo eso iOS hace zoom al enfocar el campo */
.mp-medida input:focus{ outline:none; border-color:var(--mp-tinta) }
.mp-medida input::-webkit-outer-spin-button,
.mp-medida input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.mp-medida input[type=number]{ -moz-appearance:textfield; appearance:textfield }
.mp-medida > i{
  position:absolute; right:.7rem; bottom:.75rem;
  font-style:normal; font-size:.75rem; color:var(--mp-tinta-3);
}

.mp-hoja__accion{
  width:100%; margin-top:var(--mp-e3); padding:.8rem 1rem;
  background:var(--mp-tinta); color:var(--mp-papel); border:0;
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-hoja__accion:hover{ background:var(--mp-vino) }

.mp-resultado{
  margin-top:var(--mp-e3); padding:.9rem 1.1rem;
  background:var(--mp-lino); border-left:3px solid var(--mp-tinta);
}
.mp-resultado.is-aviso{ border-left-color:var(--mp-vino) }
.mp-resultado__tit{ font-size:1rem; line-height:1.4 }
.mp-resultado__tit b{ font-weight:600 }
.mp-resultado__det{ font-size:.8125rem; color:var(--mp-tinta-2); margin-top:.35rem; line-height:1.5 }

/* ── tabla ── */
/* En teléfono la tabla no cabe: se desliza sola en vez de apretar las columnas. */
.mp-tabla-tallas__caja{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch }
.mp-tabla-tallas{ width:100%; border-collapse:collapse; font-size:.8125rem; min-width:320px }
.mp-tabla-tallas th, .mp-tabla-tallas td{
  padding:.6rem .5rem; text-align:left;
  border-bottom:1px solid var(--mp-hilo);
  font-variant-numeric:tabular-nums;
}
.mp-tabla-tallas thead th{
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mp-tinta-3); font-weight:500;
}
.mp-tabla-tallas tbody th{ font-weight:600; width:4.5rem }
.mp-tabla-tallas tbody tr.is-tuya{ background:var(--mp-lino) }
.mp-tabla-tallas tbody tr.is-tuya th{ color:var(--mp-vino) }

/* ── cómo medirse ── */
.mp-comomedir{ list-style:none; margin:0; padding:0; counter-reset:medir }
.mp-comomedir li{
  position:relative; padding:0 0 var(--mp-e3) 2.25rem;
  font-size:.875rem; line-height:1.55; color:var(--mp-tinta-2);
}
.mp-comomedir li:last-child{ padding-bottom:0 }
.mp-comomedir li::before{
  counter-increment:medir; content:counter(medir);
  position:absolute; left:0; top:0;
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:1px solid var(--mp-hilo-firme);
  font-size:.75rem; line-height:1.4rem; text-align:center; color:var(--mp-tinta);
}
.mp-comomedir strong{ display:block; color:var(--mp-tinta); font-weight:500 }

/* ── tipos de cuerpo ── */
.mp-cuerpos{ margin-top:var(--mp-e5); padding-top:var(--mp-e4); border-top:1px solid var(--mp-hilo) }
.mp-cuerpos__tit{ font-size:.9375rem; font-weight:500; margin-bottom:.2rem }
.mp-cuerpos__riel{
  display:grid; grid-auto-flow:column; grid-auto-columns:96px;
  gap:.7rem; margin-top:var(--mp-e3); position:relative;
  overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
  /* mismo cuidado que el riel de la ficha: sin esto el scroll-snap se come el aire */
  padding-inline:var(--mp-e3); margin-inline:calc(-1 * var(--mp-e3));
  scroll-padding-inline:var(--mp-e3);
}
.mp-cuerpos__riel::-webkit-scrollbar{ display:none }
.mp-cuerpo{ scroll-snap-align:start; display:block; text-align:center }
.mp-cuerpo__foto{
  display:block; aspect-ratio:3/4; background:var(--mp-lino);
  overflow:hidden; margin-bottom:.4rem;
}
.mp-cuerpo__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.mp-cuerpo__nom{ font-size:.75rem; line-height:1.3; color:var(--mp-tinta-2) }
.mp-cuerpo:hover .mp-cuerpo__nom{ color:var(--mp-vino) }

/* ── pie del modal ── */
.mp-modal__pie{
  flex:0 0 auto; padding:.9rem var(--mp-e3);
  border-top:1px solid var(--mp-hilo); background:var(--mp-lino);
}
.mp-modal__wa{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.8125rem; color:var(--mp-tinta);
}
.mp-modal__wa:hover{ color:var(--mp-vino) }

/* «Guardar en favoritos» en la ficha: en línea, bajo el botón de comprar */
.mp-ficha__guardar{ margin-top:.7rem }
.mp-ficha__guardar .mp-fav--linea{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem 0;
  font-family:var(--mp-sans); font-size:.8125rem; letter-spacing:.02em;
}
/* Acá el texto del botón SÍ se ve. Es el mismo <span> que en la tarjeta queda sólo
   para lectores de pantalla, y que el JS mantiene al día: no se duplica en el CSS,
   que además no se traduce. */
.mp-fav--linea .mp-solo-lectores{
  position:static; width:auto; height:auto; margin:0;
  overflow:visible; clip:auto; clip-path:none;
}

/* ═══════════ «LE QUEDA BIEN A» ═══════════ */
/* Sale de los campos «Tipo de Cuerpo: X: SI» que venían enterrados en la descripción,
   cruzados con las páginas que la tienda ya tenía escritas sobre cada tipo de cuerpo. */
.mp-calza{ margin-top:var(--mp-e4); padding-top:var(--mp-e3); border-top:1px solid var(--mp-hilo) }
.mp-calza__tit{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mp-tinta-2); margin-bottom:.7rem;
}
.mp-calza__lista{ display:flex; flex-wrap:wrap; gap:.75rem }
.mp-calza__uno{ display:flex; align-items:center; gap:.5rem; max-width:100% }
.mp-calza__foto{
  display:block; width:38px; height:50px; flex:0 0 auto;
  background:var(--mp-lino); overflow:hidden;
}
.mp-calza__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.mp-calza__nom{
  font-size:.75rem; line-height:1.3; color:var(--mp-tinta-2);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--mp-hilo-firme);
  transition:color var(--mp-rapido) var(--mp-easing);
}
.mp-calza__uno:hover .mp-calza__nom{ color:var(--mp-vino) }
.mp-calza__todo{ font-size:.875rem; color:var(--mp-tinta-2); line-height:1.5 }
.mp-calza__todo a{ text-decoration:underline; text-underline-offset:3px; color:var(--mp-tinta) }
.mp-calza__todo a:hover{ color:var(--mp-vino) }

/* cuando falta elegir talla: se marca dónde hay que tocar, en vez de un alert del sistema */
@keyframes mp-pide{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-4px) } 75%{ transform:translateX(4px) } }
.mp-ficha__tallas.mp-pide{ animation:mp-pide .3s var(--mp-easing) }
.mp-ficha__tallas.mp-pide .mp-ficha__talla:not(.is-agotada){ border-color:var(--mp-vino) }
@media (prefers-reduced-motion: reduce){ .mp-ficha__tallas.mp-pide{ animation:none } }

/* ═══════════ MARCO SEGÚN EL ORIGEN DE LA FOTO ═══════════ */
/* Las fotos de Anymarket vienen cuadradas y el marco 4:5 les calza. Las que producimos
   para la tienda son verticales 2:3: en un 4:5 se les corta la cabeza o los pies, que en
   una foto de cuerpo entero es justo lo que hay que ver. El marco sigue a la foto. */
/* Ya no hay excepción «galería vertical» por producto: cada foto trae su proporción
   desde la plantilla, así que el juego editorial 2:3 y las cuadradas 1:1 conviven sin
   reglas aparte. */

/* ═══════════ ASESORÍA ONLINE ═══════════ */
.mp-asesoria__abrir{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.4rem; cursor:pointer;
  border:1px solid var(--mp-tinta); background:transparent; color:var(--mp-tinta);
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  transition:background-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-asesoria__abrir:hover{ background:var(--mp-tinta); color:var(--mp-papel) }
/* sobre la foto del hero, en claro */
.mp-asesoria__abrir--claro{ border-color:rgba(251,250,247,.75); color:var(--mp-papel) }
.mp-asesoria__abrir--claro:hover{ background:var(--mp-papel); color:var(--mp-tinta); border-color:var(--mp-papel) }
/* en la ficha ocupa el ancho, junto al de WhatsApp */
.mp-ficha__asesoria{ margin-top:.7rem }
.mp-ficha__asesoria .mp-asesoria__abrir{ width:100% }

.mp-ase-fecha, .mp-ase-texto{
  width:100%; padding:.75rem .85rem;
  border:1px solid var(--mp-hilo-firme); border-radius:0; background:var(--mp-papel);
  font-family:var(--mp-sans); font-size:1rem; color:var(--mp-tinta);
}
.mp-ase-fecha:focus, .mp-ase-texto:focus{ outline:none; border-color:var(--mp-tinta) }
.mp-ase-texto + .mp-paso__ayuda{ margin-bottom:.4rem }

/* pie con acciones: atrás a la izquierda, avanzar a la derecha */
.mp-modal__pie--acciones{
  display:flex; align-items:center; gap:.75rem; justify-content:flex-end;
  background:var(--mp-papel);
}
.mp-modal__atras{
  margin-right:auto; padding:.6rem 0; background:none; border:0; cursor:pointer;
  font-family:var(--mp-sans); font-size:.8125rem; color:var(--mp-tinta-2);
}
.mp-modal__atras:hover{ color:var(--mp-tinta) }
.mp-modal__seguir{
  padding:.8rem 1.6rem; cursor:pointer; border:0;
  background:var(--mp-tinta); color:var(--mp-papel);
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-modal__seguir:hover{ background:var(--mp-vino) }