/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO — se carga solo en las fichas (inc/tienda/ficha.php).
   Diseño: boceto aprobado por Lucas (docs/bocetos/ficha.html v2, 2026-09-24).
   En la ficha no se cargan los estilos generales de WooCommerce: todo lo que se ve
   está acá (foto, cantidad, botón, avisos). La tarjeta de producto está en tienda.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.pagina-ficha { --pad-section: clamp(3.5rem, 6.5vw, 5.5rem); }
:where(.pagina-ficha .site-main) :is(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(.pagina-ficha .site-main) :is(ul, ol) { padding: 0; list-style: none; }
.pagina-ficha .h-lg { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pagina-ficha .sec-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* El marco de WooCommerce no limita el ancho: cada sección trae su .wrap. */
.woo-marco-ficha { max-width: none; padding: 0; }

/* ═══ 1. COMPRA ══════════════════════════════════════════════════════════ */
.ficha-compra { padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.ficha-compra .migas { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.ficha-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* Foto (galería de WooCommerce: zoom al pasar el mouse y lupa para verla grande).
   Recortes sin fondo: se ven completos. Fotos de estudio (.foto-llena): llenan el marco. */
.ficha-foto {
	position: sticky; top: 110px; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: var(--r-lg); border: 1px solid var(--line);
	background: radial-gradient(90% 90% at 70% 20%, #fff 0%, var(--mist) 50%, var(--mist-2) 100%);
}
.ficha-foto .woocommerce-product-gallery { position: absolute; inset: 0; margin: 0; }
.ficha-foto .woocommerce-product-gallery__wrapper { height: 100%; margin: 0; }
.ficha-foto .woocommerce-product-gallery__image { position: relative; height: 100%; overflow: hidden; }
.ficha-foto .woocommerce-product-gallery__image > a { display: block; height: 100%; cursor: zoom-in; }
.ficha-foto .woocommerce-product-gallery__image > a img {
	display: block; width: 100%; height: 100%; padding: 8%;
	object-fit: contain; mix-blend-mode: multiply;
}
.ficha-foto.foto-llena .woocommerce-product-gallery__image > a img { padding: 0; object-fit: cover; mix-blend-mode: normal; }
.ficha-foto .zoomImg { background: #fff; }
.ficha-foto .tp-cartel { top: 1.1rem; left: 1.1rem; }

/* Lupa: la dibuja WooCommerce con un emoji; se reemplaza por el ícono del sitio. */
.woocommerce-product-gallery__trigger {
	position: absolute; top: 1rem; right: 1rem; z-index: 3;
	width: 42px; height: 42px; border-radius: 50%;
	background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm);
	transition: transform .2s var(--e-out);
}
.woocommerce-product-gallery__trigger:hover { transform: scale(1.06); }
.woocommerce-product-gallery__trigger span { display: none; }
.woocommerce-product-gallery__trigger::before {
	content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
	background: var(--ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Datos de compra */
.ficha-etiqueta { margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.ficha-nombre { font-size: clamp(2.2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: var(--ink); }
.ficha-resumen { margin-top: 1rem; max-width: 34rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
.ficha-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; margin-top: 1.6rem; }
.ficha-precio b { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.ficha-precio span { font-size: .9rem; font-weight: 600; color: var(--ink-3); }
.ficha-stock { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .85rem; font-weight: 700; color: var(--ok); }
.ficha-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(18,153,110,.15); }
.ficha-stock.agotado { color: var(--ink-3); }
.ficha-stock.agotado::before { box-shadow: none; }

/* Cantidad + "Agregar al carrito" (formulario estándar de WooCommerce) */
.pagina-ficha form.cart { display: flex; gap: .8rem; margin-top: 1.6rem; }
.pagina-ficha .quantity { min-height: 52px; } /* El campo de cantidad está en tienda.css. */

/* El botón de WooCommerce con el aspecto de .btn.btn-solid (componentes.css). */
.pagina-ficha .single_add_to_cart_button {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-height: 52px; padding: 0 1.9rem; border: 0; border-radius: var(--r-full);
	font: inherit; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
	background: var(--brand-600); color: #fff; cursor: pointer;
	box-shadow: 0 4px 14px rgba(var(--brand-600-rgb), .28);
	transition: background .22s var(--e-soft), transform .18s var(--e-out), box-shadow .22s var(--e-soft);
}
.pagina-ficha .single_add_to_cart_button:hover { background: var(--brand-700); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--brand-600-rgb), .34); }
.pagina-ficha .single_add_to_cart_button:active { transform: scale(.975); }
.pagina-ficha .single_add_to_cart_button.loading { opacity: .7; cursor: progress; }
.pagina-ficha .single_add_to_cart_button::before { content: none; display: none; } /* Sin el ícono que agrega "Add to Cart Text Changer". */
/* Botón de cotización / "Sin stock" */
.ficha-acciones { display: flex; margin-top: 1.6rem; }
.ficha-acciones .btn { flex: 1; }
.ficha-acciones .btn[disabled] { background: var(--line); color: var(--ink-3); box-shadow: none; cursor: not-allowed; transform: none; }

.ficha-enlaces { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.2rem; }
.ficha-enlaces .link-arrow { color: var(--deep-2); }

/* Recuadro de envío y pago */
.datos-compra { margin-top: 1.8rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist); }
.datos-compra li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; align-items: start; padding: .85rem 1.1rem; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.datos-compra li + li { border-top: 1px solid var(--line); }
.datos-compra svg { width: 19px; height: 19px; margin-top: .1rem; color: var(--brand-600); }
.datos-compra b { color: var(--ink); }

/* ═══ Recuadro que lleva a la landing (solo Piscinas) ═════════════════════ */
.puente {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 3rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--r-lg);
	background: radial-gradient(120% 160% at 100% 0%, var(--deep-2) 0%, var(--abyss) 62%);
}
.puente .eyebrow { margin-bottom: .6rem; }
.puente .h-lg { letter-spacing: -.035em; }
.puente p:not(.eyebrow) { margin-top: .6rem; max-width: 36rem; line-height: 1.6; color: rgba(255,255,255,.78); }

/* ═══ 2. INFORMACIÓN DEL PRODUCTO ════════════════════════════════════════ */
.ficha-info-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ficha-info-titulo { position: sticky; top: 110px; }

/* Piscinas: bloques numerados con los textos de la landing */
.bloque { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.bloque:last-child { border-bottom: 1px solid var(--line); }
.bloque h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; font-size: 1.15rem; }
.bloque h3 small { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--brand-600); }
.bloque p { font-size: .98rem; line-height: 1.7; }
.bloque li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .7rem; padding: .35rem 0; font-size: .98rem; line-height: 1.6; }
.bloque li svg { width: 17px; height: 17px; margin-top: .3rem; color: var(--brand-600); }

/* Resto: descripción de WooCommerce tal cual (párrafos, negritas, listas) */
.ficha-texto { font-size: .98rem; line-height: 1.7; color: var(--ink-2); }
.ficha-texto p { margin: 0 0 1rem; }
.ficha-texto :is(strong, b) { color: var(--ink); }
.ficha-texto :is(ul, ol) { margin: 0 0 1rem; padding-left: 1.2rem; list-style: disc; }
.ficha-texto ol { list-style: decimal; }
.ficha-texto li { margin-bottom: .35rem; }
.ficha-texto > :last-child { margin-bottom: 0; }

/* ═══ 3. MÁS PRODUCTOS DE LA LÍNEA ═══════════════════════════════════════ */
@media (min-width: 981px) {
	.ficha-mas .tarjetas { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ ADAPTACIÓN A PANTALLAS ═════════════════════════════════════════════ */
@media (max-width: 980px) {
	.ficha-grid, .ficha-info-grid { grid-template-columns: 1fr; }
	.ficha-foto, .ficha-info-titulo { position: relative; top: auto; }
	.ficha-foto { width: 100%; max-width: 520px; }
}
@media (max-width: 480px) {
	.pagina-ficha form.cart { flex-direction: column; }
	.pagina-ficha .quantity { align-self: flex-start; }
}