/* =========================================================================
   ESENCIA · pieza FICHA DE PRODUCTO
   La pantalla 03 de la maqueta aprobada (p1-esencia.html, ".prod").
   El HTML lo arma la plantilla de Elementor de piezas/ficha.json y los
   atajos de piezas/ficha.php. Todo va dentro de ".esc-ficha", así nada de
   esta hoja se cuela en otras pantallas.

   Medidas EXACTAS de la maqueta, a 1180 px de ancho:
     - caja de 1180 con 44 px a cada lado (contenido de 1092);
     - miga: 11 px, .16em, gris #75747A, 26 px arriba y abajo;
     - dos columnas 1.1fr / .9fr con 56 px en medio (570 + 466);
     - galería: miniaturas de 72 px (3/4, 10 px entre ellas) + 14 px + foto 3/4;
     - derecha: REFERENCIA (10.5 px, .26em) · título Bodoni 37/1.15 a 13 px ·
       precio Bodoni 29 a 18 px · caja Addi a 20 px · talla a 28 px ·
       color a 24 px · botones a 28 px · WhatsApp a 14 px · acordeón a 34 px;
     - "Combínelo": Bodoni 36, 40 px hasta las tarjetas, 82 px abajo.
   Celular y tableta: la maqueta no los trae; diseño propio con el mismo
   lenguaje (abajo, al final).
   ========================================================================= */

/* --------------------------------------------- las cajas de Elementor */

/* Elementor pone relleno y huecos a sus cajas, y Botiga les suma 15 px a
   los lados en tableta y celular. Aquí todas las cajas de la ficha van en
   cero: las medidas las ponen las reglas de abajo. */
.elementor-location-single .esc-ficha.e-con,
.elementor-location-single .esc-ficha .e-con {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --margin-top: 0px; --margin-bottom: 0px;
  padding: 0;
  min-height: 0;
}
body[class*="elementor-page"] .elementor-location-single .esc-ficha.e-con.e-parent {
  --padding-left: 0px !important; --padding-right: 0px !important;
}
/* Los widgets, sin margen propio. Los espacios de la maqueta se ponen más
   abajo con ".esc-ficha .elementor-widget.esc-f-…" (pesa más que esta). */
.esc-ficha .elementor-widget {
  margin: 0 !important;
  --kit-widget-spacing: 0px;
}

/* Letra y color de partida (la base pone peso 300 y espaciado .01em). */
.esc-ficha {
  font-family: var(--esc-sans);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--esc-tinta);
  background: var(--esc-porcelana);
}
.esc-ficha a { text-decoration: none; }

/* La caja de 1180 con 44 px a cada lado. */
.esc-ficha .esc-ficha__env.e-con {
  display: block !important;
  width: 100% !important;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 44px !important;
  box-sizing: border-box;
}

/* ----------------------------------------------------------------- miga */

.esc-ficha .esc-miga {
  display: block;
  padding: 26px 0;
  font-family: var(--esc-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--esc-grafito-pdf);
}
.esc-ficha .esc-miga a,
.esc-ficha .esc-miga a:visited { color: var(--esc-grafito-pdf) !important; }
.esc-ficha .esc-miga a:hover { color: var(--esc-tinta) !important; }
.esc-ficha .esc-miga__sep { white-space: pre; }

/* ------------------------------------------------------- las dos columnas */

.esc-ficha .esc-ficha__prod.e-con {
  display: grid !important;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: start;
  padding: 34px 0 80px !important;
}
.esc-ficha .esc-ficha__prod > * { min-width: 0; width: auto !important; }

/* La galería acompaña al bajar cuando la columna derecha es más larga
   (la descripción real es más larga que el texto de la maqueta). Arriba
   de la página se ve igual que en el PDF. */
.esc-ficha .esc-f-gal {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* ---------------------------------------------------------------- galería */

.esc-ficha .esc-gal {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.esc-ficha .esc-gal__minis {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esc-ficha .esc-gal__mini {
  display: block;
  position: relative;
  width: 72px;
  aspect-ratio: 3 / 4;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  background: #EAE7E2 !important;
  cursor: pointer;
  overflow: visible;
  line-height: 0;
}
.esc-ficha span.esc-gal__mini { cursor: default; }
.esc-ficha .esc-gal__mini.is-on { outline: 1px solid var(--esc-tinta); outline-offset: 2px; }
.esc-ficha .esc-gal__mini:focus-visible { outline: 2px solid var(--esc-tinta); outline-offset: 2px; }
.esc-ficha .esc-gal__mini img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.esc-ficha .esc-gal__grande {
  display: block;
  cursor: zoom-in;
  position: relative;
  aspect-ratio: 3 / 4;
  background: #EAE7E2;
  overflow: hidden;
}
.esc-ficha .esc-gal__grande img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
}

/* La foto completa, encima de la página (al tocar la foto grande). */
.esc-zoom {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 16px;
  background: var(--esc-porcelana);
  cursor: zoom-out;
}
.esc-zoom img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.esc-zoom .esc-zoom__cerrar,
.esc-zoom .esc-zoom__cerrar:hover,
.esc-zoom .esc-zoom__cerrar:focus {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
  padding: 8px 0 3px;
  border: 0;
  border-bottom: 1px solid var(--esc-tinta);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--esc-tinta);
  font-family: var(--esc-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}
.esc-zoom-abierto,
.esc-zoom-abierto body { overflow: hidden; }

/* ------------------------------------------------------ columna derecha */

.esc-ficha .esc-ficha__info.e-con {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}

/* REFERENCIA 090 */
.esc-ficha .esc-ref {
  margin: 0;
  font-family: var(--esc-sans);
  font-size: 10.5px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--esc-grafito-pdf);
}

/* Título: Bodoni 37 px, interlineado 1.15, 13 px debajo de la referencia. */
.esc-ficha .elementor-widget.esc-f-tit { margin-top: 13px !important; }
.esc-ficha .esc-f-ref:not(:has(.esc-ref)) + .elementor-widget.esc-f-tit { margin-top: 0 !important; }
.esc-ficha h1.esc-titulo {
  margin: 0 !important;
  padding: 0;
  font-family: var(--esc-serif) !important;
  font-size: 37px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  text-wrap: wrap !important;
  color: var(--esc-tinta) !important;
}

/* Precio: Bodoni 29 px, 18 px debajo del título. En oferta: el de ahora
   grande y, al lado, el de antes tachado, más pequeño y en gris. */
.esc-ficha .elementor-widget.esc-f-precio { margin-top: 18px !important; }
.esc-ficha .esc-f-precio .price {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--esc-serif) !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: var(--esc-tinta) !important;
  text-align: left !important;
}
.esc-ficha .esc-f-precio .price .amount,
.esc-ficha .esc-f-precio .price bdi {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}
.esc-ficha .esc-f-precio .price ins {
  order: 1;
  text-decoration: none !important;
  background: none;
  color: var(--esc-tinta) !important;
  font-weight: 400;
}
.esc-ficha .esc-f-precio .price del {
  order: 2;
  font-size: 19px !important;
  color: var(--esc-grafito-pdf) !important;
  opacity: 1 !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.esc-ficha .esc-f-precio .price .screen-reader-text { order: 3; }

/* Caja de Addi: borde de un pelo, fondo nieve, "Addi" a la derecha. */
.esc-ficha .elementor-widget.esc-f-addi { margin-top: 20px !important; }
.esc-ficha .esc-f-addi:not(:has(.esc-addi)) { display: none; }
.esc-ficha .esc-addi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--esc-linea);
  background: var(--esc-nieve);
  padding: 13px 16px;
  font-family: var(--esc-sans);
  font-size: 12.5px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  color: var(--esc-texto-2);
}
.esc-ficha .esc-addi b {
  font-weight: 500;
  color: var(--esc-tinta);
}

/* Talla y color */
.esc-ficha .elementor-widget.esc-f-opciones { margin-top: 28px !important; }
.esc-ficha .esc-f-opciones:not(:has(.esc-opciones)) { display: none; }
.esc-ficha .esc-campo + .esc-campo { margin-top: 24px; }
.esc-ficha .esc-campo__tit {
  margin: 0 0 11px !important;
  font-family: var(--esc-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--esc-tinta);
}
.esc-ficha .esc-campo__nota {
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--esc-grafito-pdf);
}
.esc-ficha .esc-campo__nota a,
.esc-ficha .esc-campo__nota a:visited { color: var(--esc-grafito-pdf) !important; }
.esc-ficha .esc-campo__nota a:hover { color: var(--esc-tinta) !important; text-decoration: underline; text-underline-offset: 3px; }

.esc-ficha .esc-tallas { display: flex; flex-wrap: wrap; gap: 9px; }
.esc-ficha .esc-talla,
.esc-ficha .esc-talla:visited {
  display: inline-block;
  border: 1px solid var(--esc-linea-sv);
  padding: 11px 22px;
  font-family: var(--esc-sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--esc-tinta) !important;
  background: transparent;
  transition: border-color .15s ease;
}
.esc-ficha .esc-talla:hover { border-color: var(--esc-tinta); }
.esc-ficha .esc-talla.is-on,
.esc-ficha .esc-talla.is-on:visited {
  border-color: var(--esc-tinta);
  background: var(--esc-tinta);
  color: var(--esc-porcelana) !important;
}
.esc-ficha .esc-talla.is-agotado { color: var(--esc-grafito-pdf) !important; text-decoration: line-through; text-decoration-thickness: 1px; }

.esc-ficha .esc-colores { display: flex; flex-wrap: wrap; gap: 9px; }
.esc-ficha .esc-color {
  display: block;
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px solid var(--esc-linea-sv);
  background-color: #EAE7E2;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
}
.esc-ficha .esc-color.is-on { outline: 1px solid var(--esc-tinta); outline-offset: 2px; }
.esc-ficha .esc-color:hover { border-color: var(--esc-tinta); }
/* Agotado: una raya fina en diagonal. */
.esc-ficha .esc-color.is-agotado::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .5px), var(--esc-porcelana) calc(50% - .5px), var(--esc-porcelana) calc(50% + .5px), transparent calc(50% + .5px));
}

/* Botones: AGREGAR A LA BOLSA (lleno) y COMPRAR AHORA (borde), mitad y mitad.
   (La base pinta todos los botones de enviar: aquí se fija el de la maqueta.) */
.esc-ficha .elementor-widget.esc-f-comprar { margin-top: 28px !important; }
.esc-ficha .esc-compra {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 !important;
  padding: 0;
}
.esc-ficha .esc-compra .esc-btn,
.esc-ficha .esc-compra button.esc-btn[type="submit"] {
  /* Como en el PDF: si un botón tiene una sola línea y el de al lado dos,
     su texto queda ARRIBA (no centrado de alto). */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 15px 38px !important;
  border: 1px solid var(--esc-tinta) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--esc-tinta) !important;
  font-family: var(--esc-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  box-shadow: none !important;
  float: none !important;
  transition: background-color .18s ease, color .18s ease;
}
.esc-ficha .esc-compra .esc-btn:hover {
  background: var(--esc-tinta) !important;
  color: var(--esc-porcelana) !important;
}
.esc-ficha .esc-compra .esc-btn.esc-btn--sol,
.esc-ficha .esc-compra button.esc-btn.esc-btn--sol[type="submit"] {
  background: var(--esc-tinta) !important;
  color: var(--esc-porcelana) !important;
}
.esc-ficha .esc-compra .esc-btn.esc-btn--sol:hover {
  background: #2C2B31 !important;
  border-color: #2C2B31 !important;
}
.esc-ficha .esc-compra .esc-btn.is-cargando { opacity: .6; cursor: progress; }
.esc-ficha .esc-compra .esc-btn:focus-visible { outline: 2px solid var(--esc-tinta); outline-offset: 2px; }
.esc-ficha .esc-compra--agotado .esc-btn--agotado {
  grid-column: 1 / -1;
  border-color: var(--esc-linea-sv) !important;
  color: var(--esc-grafito-pdf) !important;
  cursor: not-allowed;
}
.esc-ficha .esc-compra--agotado .esc-btn--agotado:hover {
  background: transparent !important;
  color: var(--esc-grafito-pdf) !important;
}
/* WooCommerce agrega "Ver carrito" junto a un botón recién usado: aquí no
   hace falta (la cabecera ya dice "Bolsa (N)"). */
.esc-ficha .esc-compra .added_to_cart { display: none !important; }

/* Texto solo para lectores de pantalla. */
.esc-ficha .esc-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* PREGUNTAR POR WHATSAPP */
.esc-ficha .elementor-widget.esc-f-wa { margin-top: 14px !important; }
.esc-ficha .esc-wa,
.esc-ficha .esc-wa:visited {
  display: block;
  text-align: center;
  border: 1px solid var(--esc-linea);
  padding: 13px;
  font-family: var(--esc-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--esc-texto-2) !important;
  transition: border-color .15s ease, color .15s ease;
}
.esc-ficha .esc-wa:hover { border-color: var(--esc-tinta); color: var(--esc-tinta) !important; }

/* ------------------------------------------------------------- acordeón */

.esc-ficha .esc-acor.e-con {
  display: block !important;
  margin-top: 34px !important;
  border-top: 1px solid var(--esc-linea);
}
.esc-ficha .esc-acor__item.e-con { display: block !important; }

/* El título de cada fila (un widget "Título" de Elementor; el código de la
   página le mete un botón adentro para abrir y cerrar). */
.esc-ficha .esc-acor__tit .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--esc-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-wrap: wrap !important;
  color: var(--esc-grafito-pdf) !important;
}
.esc-ficha .esc-acor__tit .elementor-heading-title,
.esc-ficha .esc-acor--listo .esc-acor__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--esc-linea);
  padding: 17px 0 !important;
}
.esc-ficha .esc-acor--listo .esc-acor__tit .elementor-heading-title {
  border-bottom: 0;
  padding: 0 !important;
}
.esc-ficha .esc-acor__btn,
.esc-ficha .esc-acor__btn:hover,
.esc-ficha .esc-acor__btn:focus {
  margin: 0;
  border: 0;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}
.esc-ficha .esc-acor--listo .esc-acor__btn { border-bottom: 1px solid var(--esc-linea); }
.esc-ficha .esc-acor__btn:focus-visible { outline: 2px solid var(--esc-tinta); outline-offset: 2px; }
.esc-ficha .esc-acor__btn::after {
  content: "+";
  color: var(--esc-grafito-pdf);
  font-weight: 400;
  letter-spacing: .16em;
  flex: none;
  margin-left: 16px;
}
.esc-ficha .esc-acor__item.is-open .esc-acor__btn::after { content: "\2212"; }
.esc-ficha .esc-acor__item.is-open .esc-acor__tit .elementor-heading-title { color: var(--esc-tinta) !important; }

/* El texto de cada fila. Sin el código de la página se ve todo abierto. */
.esc-ficha .esc-acor__cont {
  margin: 13.5px 0 !important;
  padding: 2px 0 17px;
  border-bottom: 1px solid var(--esc-linea);
  font-family: var(--esc-sans);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: normal;
  color: var(--esc-texto-2);
}
.esc-ficha .esc-acor--listo .esc-acor__item:not(.is-open) .esc-acor__cont { display: none; }
.esc-ficha .esc-acor__cont p,
.esc-ficha .esc-acor__cont ul,
.esc-ficha .esc-acor__cont li {
  font-family: var(--esc-sans) !important;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: normal;
  color: var(--esc-texto-2);
}
.esc-ficha .esc-acor__cont p { margin: 0 0 10px; }
.esc-ficha .esc-acor__cont p:last-child,
.esc-ficha .esc-acor__cont ul:last-child { margin-bottom: 0; }
.esc-ficha .esc-acor__cont b,
.esc-ficha .esc-acor__cont strong { font-weight: 500; color: var(--esc-tinta); }
.esc-ficha .esc-desc__lista {
  list-style: none;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.esc-ficha .esc-desc__lista li {
  position: relative;
  margin: 0;
  padding-left: 16px;
}
.esc-ficha .esc-desc__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .9em;
  width: 7px;
  height: 1px;
  background: var(--esc-grafito-pdf);
}
.esc-ficha .esc-desc ul:not(.esc-desc__lista) { margin: 0 0 10px; padding-left: 18px; }
.esc-ficha .esc-guia__linea {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--esc-tinta) !important;
}
.esc-ficha .esc-wa-enlace,
.esc-ficha .esc-wa-enlace:visited {
  color: var(--esc-tinta) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.esc-ficha .esc-wa-enlace:hover { text-decoration-color: var(--esc-grafito-pdf); }

/* --------------------------------------------------------- Combínelo */

.esc-ficha .esc-ficha__sec.e-con {
  display: block !important;
  padding: 0 0 82px !important;
}
.esc-ficha .esc-ficha__sec-tit.e-con {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px !important;
}
.esc-ficha .esc-f-sec-h .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--esc-serif) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--esc-tinta) !important;
}
.esc-ficha .esc-vermas,
.esc-ficha .esc-vermas:visited {
  display: inline-block;
  font-family: var(--esc-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--esc-tinta) !important;
  border-bottom: 1px solid var(--esc-tinta);
  padding-bottom: 3px;
}
.esc-ficha .esc-combinelo ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 34px 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.esc-ficha .esc-combinelo ul.products::before,
.esc-ficha .esc-combinelo ul.products::after { display: none !important; }
.esc-ficha .esc-combinelo ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* Los avisos de WooCommerce ("… se ha añadido a tu carrito", "No hay más
   unidades"…). Salen solo si la página se recarga (sin el código de la
   página o si WooCommerce no pudo agregar). Botiga los pone fuera de la
   plantilla: aquí se meten en la misma caja de la ficha. Su aspecto (fondo
   nieve, raya arriba, botón) es el de la base, igual que en la bolsa y el pago. */
.single-product .woocommerce-notices-wrapper:not(:empty) {
  flex: 0 0 100%;
  width: 100%;
  max-width: 1180px;
  margin: 24px auto 0;
  padding: 0 44px;
  box-sizing: border-box;
}
.single-product .woocommerce-notices-wrapper .woocommerce-message,
.single-product .woocommerce-notices-wrapper .woocommerce-info,
.single-product .woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  outline: none;
}
.single-product .woocommerce-notices-wrapper .button { order: 2; margin: 0 !important; float: none !important; }

/* ===================================================== TABLETA Y CELULAR */

/* Entre 881 y 1024 px: las mismas dos columnas, con 32 px a los lados. */
@media (max-width: 1024px) {
  .esc-ficha .esc-ficha__env.e-con { padding: 0 32px !important; }
  .esc-ficha .esc-ficha__prod.e-con { gap: 40px; }
  .esc-ficha h1.esc-titulo { font-size: 33px !important; }
  .esc-ficha .esc-compra .esc-btn,
  .esc-ficha .esc-compra button.esc-btn[type="submit"] { padding: 15px 18px !important; letter-spacing: .22em !important; }
  .single-product .woocommerce-notices-wrapper:not(:empty) { padding: 0 32px; }
}

/* Hasta 880 px: una sola columna (galería arriba, compra abajo). Toda la
   ficha (miga, prenda y "Combínelo") va en una caja centrada de 620 px de
   contenido, para que la foto no ocupe dos pantallas y todo empiece en la
   misma línea por la izquierda. */
@media (max-width: 880px) {
  .esc-ficha .esc-ficha__env.e-con,
  .single-product .woocommerce-notices-wrapper:not(:empty) { max-width: 684px; }
  .esc-ficha .esc-miga { padding: 20px 0; }
  .esc-ficha .esc-ficha__prod.e-con {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 8px 0 64px !important;
  }
  .esc-ficha .esc-f-gal { position: static; }
  .esc-ficha .esc-ficha__sec.e-con { padding-bottom: 64px !important; }
  .esc-ficha .esc-ficha__sec-tit.e-con { margin-bottom: 28px !important; }
  .esc-ficha .esc-f-sec-h .elementor-heading-title { font-size: 32px !important; }
  .esc-ficha .esc-combinelo ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 16px !important;
  }
  .esc-ficha .esc-compra .esc-btn,
  .esc-ficha .esc-compra button.esc-btn[type="submit"] { padding: 16px 18px !important; letter-spacing: .24em !important; }
}

/* Celular (hasta 600 px): la foto a lo ancho; las miniaturas, si hay más
   de una foto, en fila debajo; los botones uno debajo del otro, a lo ancho. */
@media (max-width: 600px) {
  .esc-ficha .esc-ficha__env.e-con { padding: 0 16px !important; }
  .single-product .woocommerce-notices-wrapper:not(:empty) { padding: 0 16px; margin-top: 16px; }
  .esc-ficha .esc-miga { padding: 16px 0; font-size: 10px; letter-spacing: .14em; }
  .esc-ficha .esc-ficha__prod.e-con { gap: 26px; padding: 0 0 56px !important; }
  .esc-ficha .esc-gal { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .esc-ficha .esc-gal__grande { order: 1; }
  .esc-ficha .esc-gal__minis { order: 2; flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 3px; }
  .esc-ficha .esc-gal__mini { width: 56px; }
  .esc-ficha .esc-gal--una .esc-gal__minis { display: none; }
  .esc-ficha h1.esc-titulo { font-size: 30px !important; line-height: 1.15 !important; }
  .esc-ficha .elementor-widget.esc-f-tit { margin-top: 10px !important; }
  .esc-ficha .elementor-widget.esc-f-precio { margin-top: 14px !important; }
  .esc-ficha .esc-f-precio .price { font-size: 26px !important; }
  .esc-ficha .esc-f-precio .price del { font-size: 17px !important; }
  .esc-ficha .elementor-widget.esc-f-addi { margin-top: 18px !important; }
  .esc-ficha .esc-addi { padding: 12px 14px; }
  .esc-ficha .elementor-widget.esc-f-opciones { margin-top: 24px !important; }
  .esc-ficha .esc-campo + .esc-campo { margin-top: 20px; }
  .esc-ficha .esc-talla { padding: 12px 24px; }
  .esc-ficha .esc-color { width: 30px; height: 30px; }
  .esc-ficha .elementor-widget.esc-f-comprar { margin-top: 26px !important; }
  .esc-ficha .esc-compra { grid-template-columns: minmax(0, 1fr); }
  .esc-ficha .esc-compra .esc-btn,
  .esc-ficha .esc-compra button.esc-btn[type="submit"] { padding: 17px 16px !important; }
  .esc-ficha .elementor-widget.esc-f-wa { margin-top: 10px !important; }
  .esc-ficha .esc-wa { padding: 15px 13px; }
  .esc-ficha .esc-acor.e-con { margin-top: 28px !important; }
  .esc-ficha .esc-ficha__sec.e-con { padding-bottom: 56px !important; }
  .esc-ficha .esc-f-sec-h .elementor-heading-title { font-size: 28px !important; }
  .esc-ficha .esc-ficha__sec-tit.e-con { margin-bottom: 22px !important; }
}