/* ==========================================================================
   Ficha de producto: galería, resumen, variantes, pestañas, cotización,
   relacionados y barra fija de móvil.
   ========================================================================== */

.zfc-ficha__principal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-6);
  margin-bottom: var(--zfc-esp-8);
}

@media (min-width: 900px) {
  .zfc-ficha__principal { grid-template-columns: 1fr 1fr; gap: var(--zfc-esp-12); }
}

/* --- Galería -------------------------------------------------------------- */

.zfc-ficha__galeria { position: relative; min-width: 0; }

.zfc-ficha__galeria .woocommerce-product-gallery {
  background: var(--zfc-superficie-base);
  border: 1px solid var(--zfc-borde-sutil);
}

.zfc-ficha__galeria .woocommerce-product-gallery__wrapper { margin: 0; }

/* Aire arriba y abajo de la foto principal, para que el corazon y la lupa
   dejen de apoyarse sobre la patilla derecha del marco, o sea encima del
   producto que se esta vendiendo.

   Se hace con relleno y no con una caja de proporcion fija, que fue el primer
   intento y no funciona por dos motivos aprendidos midiendo: los packshots son
   de 2 a 1, asi que dentro de una caja de 4 a 3 la imagen sigue limitada por el
   ancho y NO se agranda; y flexslider le escribe `display: block` en linea al
   contenedor, con lo que cualquier `display: flex` para centrar queda anulado.

   44px es la altura del corazon: es exactamente el aire que necesita para no
   pisar la foto. */
.zfc-ficha__galeria .woocommerce-product-gallery__image {
  /* El aire de arriba es exactamente lo que ocupa el corazon con su margen, y
     sale del mismo token que lo dimensiona: escrito a mano ya se habia
     desincronizado antes. Abajo, lo mismo para la lupa. */
  padding-block: calc(var(--zfc-esp-2) * 2 + var(--zfc-favorito-tam));
}

.zfc-ficha__galeria img { width: 100%; height: auto; }

.zfc-ficha__galeria .flex-control-thumbs {
  display: grid;
  /* Tres y no cuatro: el catalogo trae dos fotos por marco, asi que con cuatro
     celdas la mitad derecha de la fila quedaba vacia y las miniaturas salian
     mas chicas de lo necesario. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--zfc-esp-2);
  list-style: none;
  margin: var(--zfc-esp-2) 0 0;
  padding: var(--zfc-esp-2);
}

/* WooCommerce le da `width: 25%` a cada miniatura para maquetarlas con floats.
   Acá las coloca el grid, así que cada una tiene que ocupar su celda entera:
   con el 25% quedaban de 35px. Hay que igualar su selector para ganarle. */
.woocommerce div.product .zfc-ficha__galeria div.images .flex-control-thumbs li {
  margin: 0;
  width: 100%;
  float: none;
}

/* La miniatura activa se marca con borde marino, no con opacidad: la opacidad
   no se distingue bien. */
/* La miniatura en la MISMA proporcion que la foto grande y contenida, nunca
   recortada. Con `cover` sobre un packshot de 2 a 1 se veia el 50% central, o
   sea el puente de la nariz: dos miniaturas cortadas por la mitad. */
.woocommerce div.product .zfc-ficha__galeria div.images .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--zfc-superficie-base);
  border: 2px solid transparent;
  opacity: 1;
  cursor: pointer;
}

.woocommerce div.product .zfc-ficha__galeria .flex-control-thumbs img.flex-active,
.woocommerce div.product .zfc-ficha__galeria .flex-control-thumbs img:hover { border-color: var(--zfc-accion-primaria); }

/* La lupa del lightbox. Va DEBAJO del corazón de favoritos, que le ganó la
   esquina superior derecha el 31-08-2026: guardar es la acción que el cliente
   pidió destacar y ampliar la foto es secundaria.

   El selector repite el contexto de WooCommerce a propósito. El suyo es
   `.woocommerce div.product div.images .woocommerce-product-gallery__trigger`,
   que vale (0,4,2): la versión corta de este tema valía (0,2,0) y perdía, así
   que este bloque llevaba tiempo siendo CSS muerto y la lupa salía con los
   16px y el z-index 99 de WooCommerce. Al empatar el contexto y añadir una
   clase, gana. NO acortar este selector.

   El desplazamiento se calcula desde el mismo token que el corazón, no con un
   número escrito a mano: el corazón mide 48px en teléfono y 40 en escritorio. */
.woocommerce div.product .zfc-ficha__galeria div.images .woocommerce-product-gallery__trigger {
  position: absolute;
  /* El 1px de menos es el borde de `.woocommerce-product-gallery`, que es su
     contenedor de posicionamiento: el corazón se posiciona contra
     `.zfc-ficha__galeria`, que va por fuera de ese borde. Sin restarlo, los dos
     quedan corridos entre sí. */
  /* Abajo a la derecha, no apilada bajo el corazon: juntos ocupaban 104px de
     columna sobre la foto. */
  top: auto;
  bottom: calc(var(--zfc-esp-2) - 1px);
  right: calc(var(--zfc-esp-2) - 1px);
  z-index: var(--zfc-capa-tarjeta);
  display: flex;
  align-items: center;
  justify-content: center;
  /* WooCommerce le pone `box-sizing: content-box` a este enlace, así que sin
     esto mide 42px con el borde y queda 2px descuadrado respecto al corazón. */
  box-sizing: border-box;
  width: var(--zfc-favorito-tam);
  height: var(--zfc-favorito-tam);
  border: 1px solid var(--zfc-borde-medio);
  background: var(--zfc-superficie-base);
  color: var(--zfc-texto-marca);
  text-decoration: none;
  font-size: var(--zfc-cuerpo-m);
}

/* El corazón de la ficha. La posición y el tamaño ya salen de
   `.zfc-favorito--icono` en componentes.css, que es el mismo de la tarjeta del
   catálogo: acá solo hace falta ganarle al z-index 99 que WooCommerce le pone
   a la lupa, o el corazón queda debajo de ella. */
.zfc-ficha__galeria > .zfc-favorito--icono { z-index: var(--zfc-capa-tarjeta); }

/* La insignia del probador va en la esquina IZQUIERDA, así que no choca con el
   corazón. Se alinea con él: mismo `esp-2` que usa `.zfc-favorito--icono`. */
.zfc-ficha__insignia { position: absolute; top: var(--zfc-esp-2); left: var(--zfc-esp-2); z-index: var(--zfc-capa-tarjeta); }

/* En la ficha la insignia ES el botón del probador, no un rótulo. Hereda todo
   el aspecto de `.zfc-insignia`; acá solo se le quita lo que el navegador le
   pone por ser un `button` y se le añade lo que delata que se puede pulsar. */
button.zfc-ficha__insignia {
  position: relative;
  border: 0;
  font: inherit;
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* El area tocable llega a la zona tactil sin engordar la insignia.
   La insignia mide 28px de alto porque es un rotulo sobre la foto, y subirla a
   52 la convertiria en una barra. Se extiende el blanco de toque con un
   pseudo-elemento centrado, que es la forma de que un control pequeno cumpla el
   minimo sin cambiar de aspecto. La escribo yo y la anoto yo: este boton lo
   cree hoy mismo, en la misma sesion, y nacio 16px por debajo del minimo. */
button.zfc-ficha__insignia::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--zfc-alto-tactil);
  transform: translateY(-50%);
}

button.zfc-ficha__insignia:hover,
button.zfc-ficha__insignia:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgb(0 0 0 / .28);
}

/* --- Resumen -------------------------------------------------------------- */

.zfc-ficha__resumen { min-width: 0; }

/* Marca, titulo, calibre, precio y nota son UN bloque de identidad y se leen
   de corrido: van apretados entre si. El aire se guarda para separar ese bloque
   de lo que viene despues, que es donde separar significa algo.

   El ritmo de esta columna estaba medido con texto de 16px y caja de linea fija
   de 26. Con la escala fluida el texto llega a 18 y la caja la calcula cada
   elemento, asi que los mismos margenes pasaron a leerse como el doble de aire. */
.zfc-ficha__marca {
  display: block;
  margin-bottom: var(--zfc-esp-1);
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--zfc-texto-secundario);
}

.zfc-ficha__resumen .product_title { margin: 0 0 var(--zfc-esp-1); }

.zfc-ficha__subtitulo {
  margin: 0 0 var(--zfc-esp-3);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

/* WooCommerce pinta el precio de la ficha en verde con un selector muy
   específico; hay que igualarlo para devolverlo al marino de la marca. */
.woocommerce div.product .zfc-ficha__resumen .price,
.zfc-ficha__resumen .price {
  display: block;
  margin: 0 0 var(--zfc-esp-1);
  font-size: var(--zfc-h3);
  font-weight: 600;
  color: var(--zfc-precio);
  font-variant-numeric: tabular-nums;
}

.woocommerce div.product .zfc-ficha__resumen .price del {
  margin-right: var(--zfc-esp-2);
  font-size: var(--zfc-cuerpo-m);
  font-weight: 400;
  color: var(--zfc-precio-tachado);
  opacity: 1;
}

.woocommerce div.product .zfc-ficha__resumen .price ins { text-decoration: none; }

/* La nota del precio y la descripcion corta van a 12 y el salto de 24 se reserva
   para lo que de verdad separa dos cosas distintas. Tres saltos casi iguales
   seguidos (16, 16, 24) no dicen nada: si todo se separa igual, nada esta
   agrupado. */
.zfc-ficha__nota {
  margin: 0 0 var(--zfc-esp-3);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-ficha__resumen .stock {
  display: block;
  margin: 0 0 var(--zfc-esp-4);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
}

.zfc-ficha__resumen .stock.in-stock { color: var(--zfc-exito); }
.zfc-ficha__resumen .stock.out-of-stock { color: var(--zfc-accion-desactivada-txt); }

.zfc-ficha__resumen .woocommerce-product-details__short-description {
  margin-bottom: var(--zfc-esp-3);
  color: var(--zfc-texto-secundario);
}

/* El ultimo parrafo de la descripcion pierde su margen inferior.
   Sin esto el margen del `p` (16px) COLAPSA hacia fuera del contenedor y gana
   sobre los 12 que declara el bloque: se cambiaba el margen del div y el hueco
   real no se movia. Es la trampa clasica del colapso de margenes. */
.zfc-ficha__resumen .woocommerce-product-details__short-description > p:last-child {
  margin-bottom: 0;
}

/* --- Formulario de compra ------------------------------------------------- */

.zfc-ficha__resumen form.cart {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-3);
  margin-bottom: var(--zfc-esp-6);
}

/* Nadie compra tres marcos iguales de una: la cantidad se ajusta en el
   carrito, si hace falta. */
.zfc-ficha__resumen form.cart .quantity { display: none; }

.zfc-ficha .zfc-ficha__resumen form.cart .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--zfc-boton-l);
  padding: 0 var(--zfc-esp-6);
  border: 1px solid var(--zfc-accion-acento);
  border-radius: var(--zfc-radio);
  background: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  font-weight: 600;
  cursor: pointer;
}

.zfc-ficha .zfc-ficha__resumen form.cart .button:hover {
  background: var(--zfc-accion-acento-hover);
  border-color: var(--zfc-accion-acento-hover);
}

/* Muestras de color y variantes: 46px y siempre con el nombre al lado. Nadie
   distingue «grafito» de «negro mate» en un círculo. */
.zfc-ficha__resumen .variations { width: 100%; }

.zfc-ficha__resumen .variations th,
.zfc-ficha__resumen .variations td {
  display: block;
  padding: 0;
  border: 0;
}

.zfc-ficha__resumen .variations th {
  margin-bottom: var(--zfc-esp-2);
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--zfc-texto-secundario);
}

.zfc-ficha__resumen .variations td { margin-bottom: var(--zfc-esp-4); }

.zfc-ficha__resumen .variations select {
  width: 100%;
  height: var(--zfc-campo-alto);
  padding: 0 var(--zfc-esp-3);
  border: 1px solid var(--zfc-borde-campo);
  border-radius: var(--zfc-radio);
  background: var(--zfc-superficie-base);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
}

/* --- Guía de calibres ----------------------------------------------------- */

/* Era un desplegable que empujaba media ficha hacia abajo, y en el teléfono
   tapaba el precio y el botón de comprar. Ahora abre en modal: la tabla no le
   quita sitio a nada y quien la abre sale con una acción, no en una tabla. */

.zfc-calibres__disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  /* 16: aqui cambia el tema (arriba se describe el marco, debajo empieza como
     comprarlo) asi que este salto es mayor que los 12 de las lineas de texto,
     pero NO sube respecto a lo que habia. En la maqueta dibuje este hueco como
     24 y en realidad eran 16: subirlo se comia el ahorro de los otros dos. */
  margin-bottom: var(--zfc-esp-4);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  color: var(--zfc-acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zfc-calibres__disparador:hover { color: var(--zfc-accion-acento-activa); }

.zfc-calibres__tabla { width: 100%; margin: var(--zfc-esp-4) 0; font-size: var(--zfc-cuerpo-s); }
.zfc-calibres__tabla th {
  color: var(--zfc-texto-secundario);
  font-size: var(--zfc-etiqueta);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: left;
  padding-bottom: var(--zfc-esp-2);
}
.zfc-calibres__tabla td { padding: var(--zfc-esp-2) 0; border-top: 1px solid var(--zfc-borde-sutil); }

/* La fila del marco que se está mirando: es el dato que la persona vino a
   buscar, así que se resuelve por ella en vez de dejarle la tabla entera. */
.zfc-calibres__fila--suya td {
  background: var(--zfc-aviso-fondo);
  font-weight: 600;
  color: var(--zfc-texto-marca);
}

.zfc-calibres__suyo {
  margin: 0;
  padding: var(--zfc-esp-3);
  background: var(--zfc-aviso-fondo);
  color: var(--zfc-aviso);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
}

/* --- Modal ---------------------------------------------------------------- */

.zfc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--zfc-capa-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zfc-esp-4);
}

.zfc-modal[hidden] { display: none; }

.zfc-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(10, 26, 47, .55);
}

.zfc-modal__caja {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--zfc-esp-8));
  display: flex;
  flex-direction: column;
  background: var(--zfc-superficie-base);
  box-shadow: var(--zfc-sombra-3);
}

.zfc-modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zfc-esp-3);
  padding: var(--zfc-esp-4) var(--zfc-esp-6);
  border-bottom: 1px solid var(--zfc-borde-sutil);
}

.zfc-modal__titulo { margin: 0; font-size: var(--zfc-h4); line-height: var(--zfc-h4-alto); }

.zfc-modal__cerrar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--zfc-alto-tactil);
  height: var(--zfc-alto-tactil);
  margin-right: calc(var(--zfc-esp-3) * -1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--zfc-texto-secundario);
  cursor: pointer;
}

.zfc-modal__cerrar:hover { color: var(--zfc-texto-marca); }

.zfc-modal__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--zfc-esp-4) var(--zfc-esp-6);
}

.zfc-modal__cuerpo > p:first-child { margin-top: 0; color: var(--zfc-texto-secundario); }

/* El pie no scrollea con el cuerpo: la salida tiene que estar siempre a mano. */
.zfc-modal__pie {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-4) var(--zfc-esp-6) var(--zfc-esp-6);
  border-top: 1px solid var(--zfc-borde-sutil);
}

.zfc-modal__principal { width: 100%; }

.zfc-modal__secundarias { display: flex; gap: var(--zfc-esp-2); }
.zfc-modal__secundarias .zfc-boton { flex: 1; }

@media (max-width: 480px) {
  .zfc-modal { padding: 0; align-items: flex-end; }
  .zfc-modal__caja { max-width: none; max-height: 92vh; }
  .zfc-modal__secundarias { flex-direction: column; }
}

/* --- Las dos vías --------------------------------------------------------- */

.zfc-vias { margin-bottom: var(--zfc-esp-6); }
.zfc-vias__titulo { margin: 0 0 var(--zfc-esp-3); font-size: var(--zfc-h4); }

/* Las dos vías son hermanas y se ven como dos opciones, no como una principal y
   una sobra. Una al lado de la otra en escritorio, apiladas en teléfono. */
.zfc-vias__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-4);
  align-items: stretch;
}

@media (min-width: 700px) {
  .zfc-vias__lista { grid-template-columns: 1fr 1fr; }
}

/* Los dos botones al MISMO alto y a ancho completo dentro de su caja: sueltos
   quedaban de altos distintos (56 el de comprar, 44 el de cotizar) y eso los
   leia como una accion principal y una sobra, cuando son las dos vias de venta
   del sitio.

   Se repite la clase para ganarle a `.zfc-boton.zfc-boton--acento`, que vale
   (0,2,0) igual que la version corta de esto y decidiria el orden del archivo. */
.zfc-vias__opcion .zfc-boton.zfc-boton,
.zfc-vias__opcion .single_add_to_cart_button {
  width: 100%;
  min-height: var(--zfc-boton-l);
  margin-top: auto;
}

/* La caja crece hasta igualar a su hermana y el botón se va al fondo. */
.zfc-vias__opcion { display: flex; flex-direction: column; gap: var(--zfc-esp-2); }

.zfc-vias__opcion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-bloque);
  border-left: 3px solid var(--zfc-accion-acento);
}

.zfc-vias__opcion h3 { margin: 0; font-size: var(--zfc-h6); }
.zfc-vias__opcion p { margin: 0; color: var(--zfc-texto-secundario); }
.zfc-vias__opcion .zfc-boton { margin-top: var(--zfc-esp-2); }

/* Es un <button> porque abre el probador en la misma página, pero se lee como
   el enlace de acento que pide el diseño. */
/* Probarse el marco es LA función que diferencia esta tienda, así que se ve
   como una acción y no como un enlace de texto. Va en contorno, no en ámbar: el
   ámbar está reservado para «Añadir al carrito» y «Cotizar con mi receta», y
   dos botones llenos compitiendo dejarían de decir cuál es el paso siguiente.

   Ancho completo, porque desde el 02-09-2026 vive justo encima del carrito y
   alineado con él: probarse va antes de comprar. Cuando era un enlace suelto
   quedaba después del carrito y de todo el bloque de cristales, 438 píxeles más
   abajo, y no se encontraba. */
.zfc-ficha__probador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zfc-esp-2);
  width: 100%;
  min-height: var(--zfc-boton-m);
  margin-bottom: var(--zfc-esp-4);
  padding: 0 var(--zfc-esp-6);
  border: 1px solid var(--zfc-accion-primaria);
  border-radius: var(--zfc-radio);
  background: transparent;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  color: var(--zfc-accion-primaria);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.zfc-ficha__probador:hover,
.zfc-ficha__probador:focus-visible {
  background: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
  text-decoration: none;
}
.zfc-ficha__probador[aria-busy="true"] { opacity: .6; cursor: progress; }
.zfc-ficha__probador:disabled { cursor: default; }

/* --- Promesas y ayuda ----------------------------------------------------- */

.zfc-ficha__promesas {
  list-style: none;
  margin: 0 0 var(--zfc-esp-4);
  padding: var(--zfc-esp-4) 0;
  border-block: 1px solid var(--zfc-borde-sutil);
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-3);
}

.zfc-ficha__promesas li {
  display: flex;
  align-items: flex-start;
  gap: var(--zfc-esp-3);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-ficha__promesas .zfc-icono { flex: none; color: var(--zfc-acento-texto); }
.zfc-ficha__promesas strong { color: var(--zfc-texto-principal); }

.zfc-ficha__ayuda {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-3);
  padding: var(--zfc-esp-3) var(--zfc-esp-4);
  background: var(--zfc-superficie-bloque);
  border: 1px solid var(--zfc-borde-sutil);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
  text-decoration: none;
}

.zfc-ficha__ayuda:hover { border-color: var(--zfc-accion-primaria); color: var(--zfc-texto-secundario); }
.zfc-ficha__ayuda .zfc-icono { flex: none; color: var(--zfc-acento-texto); }
.zfc-ficha__ayuda strong { display: block; color: var(--zfc-texto-principal); }

/* --- Pestañas ------------------------------------------------------------- */

/* Las pestañas nativas vienen con fondo, esquinas redondeadas y sombras. Acá
   son solo texto con un subrayado marino, así que hay que igualar los
   selectores de WooCommerce para anular todo eso. */
.woocommerce div.product .woocommerce-tabs { margin-bottom: var(--zfc-esp-8); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--zfc-esp-6);
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--zfc-esp-6);
  padding: 0;
  border-bottom: 1px solid var(--zfc-borde-medio);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }

/* `.active` va en el selector porque WooCommerce le pone a la pestaña abierta
   un fondo blanco con bordes redondeados y sombra, que sobre esta superficie
   se veía como un recuadro pegado encima del panel. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--zfc-esp-3) 0;
  border-bottom: 2px solid transparent;
  color: var(--zfc-texto-secundario);
  font-size: var(--zfc-cuerpo-m);
  font-weight: 500;
  text-decoration: none;
  text-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--zfc-accion-primaria);
  color: var(--zfc-texto-marca);
  font-weight: 600;
}

.woocommerce-tabs .panel { max-width: 720px; color: var(--zfc-texto-secundario); }
.woocommerce-tabs .panel h2 { display: none; }
.woocommerce-tabs .shop_attributes th { width: 40%; color: var(--zfc-texto-principal); }

/* La descripción es texto corrido y necesita la misma medida que las guías:
   a 720px daba 80 caracteres por línea, y lo legible son 65 a 75. La tabla de
   medidas no se toca, que ahí el ancho lo pide el contenido. */
#tab-description { max-width: 65ch; }
#tab-description p { margin: 0 0 var(--zfc-esp-4); }
#tab-description p:last-child { margin-bottom: 0; }

/* En móvil las pestañas no se parten en dos filas: se deslizan de lado. */
@media (max-width: 599px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--zfc-esp-4);
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li { flex: none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
}

/* --- Cómo funciona la cotización ------------------------------------------ */

.zfc-cotizacion { padding: var(--zfc-esp-6); margin-bottom: var(--zfc-esp-8); }
.zfc-cotizacion__cabecera { margin-bottom: var(--zfc-esp-6); }
.zfc-cotizacion__cabecera h2 { margin: 0 0 var(--zfc-esp-2); }
.zfc-cotizacion__cabecera p { margin: 0; color: var(--zfc-texto-secundario); }

.zfc-cotizacion__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-6);
}

@media (min-width: 900px) {
  .zfc-cotizacion__pasos { grid-template-columns: repeat(4, 1fr); }
}

.zfc-cotizacion__paso {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-2);
  padding-top: var(--zfc-esp-4);
  border-top: 2px solid var(--zfc-accion-acento);
}

.zfc-cotizacion__paso h3 { margin: 0; font-size: var(--zfc-h6); }
.zfc-cotizacion__paso p { margin: 0; color: var(--zfc-texto-secundario); }

/* --- Relacionados --------------------------------------------------------- */

.zfc-relacionados { padding-block: 0 var(--zfc-esp-8); }
.zfc-relacionados h2 { margin-bottom: var(--zfc-esp-6); }

/* --- Barra fija de compra en móvil ---------------------------------------- */

.zfc-barra-compra { display: none; }

@media (max-width: 899px) {
  .zfc-barra-compra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--zfc-capa-barra-fija);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zfc-esp-4);
    padding: var(--zfc-esp-3) var(--zfc-esp-4);
    background: var(--zfc-superficie-base);
    border-top: 1px solid var(--zfc-borde-medio);
    box-shadow: var(--zfc-sombra-2);
  }

  .zfc-barra-compra__precio {
    font-size: var(--zfc-h5);
    font-weight: 600;
    color: var(--zfc-precio);
    font-variant-numeric: tabular-nums;
  }

  .zfc-barra-compra__precio del { display: none; }
  .zfc-barra-compra__precio ins { text-decoration: none; }

  /* La ficha reserva el alto de la barra para que el pie no quede debajo. */
  .single-product .zfc-pie { padding-bottom: 72px; }
}


/* En el telefono la lupa del lightbox se retira.
   Se ancla al contenedor de la galeria, que incluye las miniaturas, asi que
   ninguna cantidad de relleno de la foto la saca de encima del marco: a 375
   caia dentro de la imagen aunque el corazon ya estuviera libre.

   Y ahi sobra: en una pantalla tactil la foto ya se amplia tocandola, que es lo
   que hace la propia galeria de WooCommerce, y para acercarse se pellizca. Un
   icono de lupa es vocabulario de raton. En escritorio se queda. */
@media (max-width: 899px) {
  .woocommerce div.product .zfc-ficha__galeria div.images .woocommerce-product-gallery__trigger {
    display: none;
  }
}


/* --- Modal de calibres: la respuesta primero ------------------------------ */

/* La frase que responde la pregunta abre el modal, en tamano de titular y sobre
   el fondo ambar suave. Antes iba al final de la tabla y en un telefono salia
   cortada por la mitad. */
.zfc-modal__cuerpo .zfc-calibres__suyo:first-child {
  margin: 0 0 var(--zfc-esp-4);
  padding: var(--zfc-esp-3) var(--zfc-esp-4);
  background: var(--zfc-aviso-fondo, #FBF2DF);
  border-left: 3px solid var(--zfc-accion-acento);
  font-size: var(--zfc-h5);
  line-height: var(--zfc-h5-alto);
  font-weight: 600;
  color: var(--zfc-texto-marca);
}

/* El pie: un boton a ancho completo y la salida a WhatsApp como enlace, no como
   un tercer boton que compite. Ocupaba 189px con tres botones. */
.zfc-modal__pie {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-3);
  align-items: center;
}

.zfc-modal__pie .zfc-modal__principal { width: 100%; min-height: var(--zfc-boton-m); }

.zfc-modal__consulta {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  min-height: var(--zfc-alto-tactil);
  color: var(--zfc-texto-secundario);
  font-size: var(--zfc-cuerpo-s);
  text-decoration: none;
}

.zfc-modal__consulta:hover { color: var(--zfc-texto-marca); text-decoration: underline; }

/* El formulario del carrito, dentro de su caja, apila cantidad y boton en el
   telefono: en una fila el boton quedaba en 183px contra los 308 del de
   cotizar, y las dos vias tienen que verse iguales. */
@media (max-width: 699px) {
  .zfc-vias__opcion form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zfc-esp-2);
  }

  .zfc-vias__opcion form.cart .quantity { flex: 0 0 auto; }
  .zfc-vias__opcion form.cart .single_add_to_cart_button { flex: 1 0 100%; }
}