/**
 * Secciones de la ficha de producto.
 *
 * Se carga SOLO en fichas con la plantilla activa. Presupuesto en categorías:
 * cero (regla T-1 de docs/pdp-impacto-seo.md).
 *
 * Las trampas de Astra están en skills/agente-frontend.md. Las que muerden aquí:
 *   · el rem del tema es 14,59px → los tamaños que importan van en px
 *   · Astra pinta button:hover y :focus en verde con especificidad (0,1,1)
 *   · un nodo de texto suelto dentro de un flex se convierte en ítem propio
 */

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

.lucilu-ficha__kicker {
	margin: 0 0 6px;
	color: var(--lucilu-brand, #ff2971);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* El total con domicilio. Secundario a propósito: el precio canónico sigue
   siendo el <p class="price"> de WooCommerce, que es lo que leen Rank Math y
   el feed de Merchant Center. */
.lucilu-ficha__total {
	margin: -6px 0 16px;
	padding: 12px 14px;
	border-left: 3px solid var(--lucilu-brand, #ff2971);
	background: #fffaf7;
}

.lucilu-ficha__total-cifra {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: #001524;
}

.lucilu-ficha__total-cifra span {
	font-size: 13px;
	font-weight: 400;
	color: #5a5a5a;
}

.lucilu-ficha__total-desglose {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: #5a5a5a;   /* mínimo para 4.5:1 sobre el fondo cálido */
}

.lucilu-ficha__garantias {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: #5a5a5a;
}

.lucilu-ficha__garantias li::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--lucilu-brand, #ff2971);
	vertical-align: middle;
}

.lucilu-ficha__ancla {
	display: block;
	scroll-margin-top: 90px;   /* la cabecera de Astra es fija y tapa el destino */
}

/* --- El hueco bajo la foto: NO se resuelve con CSS -------------------------
 *
 * En escritorio la columna izquierda es una foto cuadrada y la derecha lleva
 * título, precio, total, resumen, entrega, garantías y botón. Con una sola
 * imagen —26 de las 57 fichas— queda un vacío grande bajo la foto.
 *
 * Se intentó rellenarlo subiendo «Qué incluye» a esa columna. DOS VECES, y las
 * dos se revirtieron:
 *
 *   1. Convirtiendo `div.product` en grid → la foto salió a ancho completo con
 *      el resumen debajo. Reemplazar la maquetación de un tema comercial desde
 *      un plugin es demasiada superficie.
 *   2. Con un tercer flotado y `clear: left` → el propietario lo dejó como
 *      estaba (2026-08-21).
 *
 * **No volver a intentarlo por CSS.** El hueco no es un problema de maqueta:
 * es que faltan fotos. Con 3-4 imágenes WooCommerce pinta la fila de
 * miniaturas y la columna crece sola. Ese es el arreglo, y es de fotografía.
 *
 * Además solo afecta al 21 % del tráfico: el 78 % es móvil, donde todo se
 * apila en una columna y el hueco no existe.
 * ------------------------------------------------------------------------ */

/* --- Secciones ----------------------------------------------------------- */

/* `clear: both` no es opcional aquí.
 *
 * Astra flota la galería a la izquierda y el resumen a la derecha. Sin librar
 * esos flotados, las secciones se metían en la columna estrecha que queda al
 * lado de la foto: el rótulo «Qué incluye» se partía en «QUÉ» / «INCLUYE» y
 * aparecía encima de la imagen. Visto en producción el 2026-08-21.
 *
 * La separación va como `padding` y NO como `margin`: cuando un elemento con
 * `clear` tiene que librar un flotado, el navegador genera *clearance* y se
 * come el margen superior. Es la trampa nº 2 de skills/agente-frontend.md, y
 * el síntoma clásico es que funciona en móvil (sin flotado) y falla en
 * escritorio. `float: none` con !important porque el tema sí lo declara. */
.lucilu-ficha__seccion {
	clear: both !important;
	float: none !important;
	width: 100%;
	padding: 44px 0;
	border-top: 1px solid #f0f0f0;
}

.lucilu-ficha__eyebrow {
	margin: 0 0 6px;
	color: var(--lucilu-brand, #ff2971);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lucilu-ficha__seccion h2 {
	margin: 0 0 20px;
	line-height: 1.2;
}

/* Qué incluye */
.lucilu-ficha__lista {
	columns: 2;
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #eee;
}

.lucilu-ficha__lista li {
	break-inside: avoid;
	padding: 11px 0;
	border-bottom: 1px solid #eee;
	font-size: 15px;
}

.lucilu-ficha__fine {
	margin: 16px 0 0;
	font-size: 12px;
	color: #5a5a5a;
}

/* Cómo funciona */
.lucilu-ficha__pasos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.lucilu-ficha__pasos article {
	padding-top: 12px;
	border-top: 2px solid #001524;
}

.lucilu-ficha__num {
	display: block;
	margin-bottom: 8px;
	color: var(--lucilu-brand, #ff2971);
	font-size: 13px;
	font-weight: 700;
}

.lucilu-ficha__pasos h3 {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.3;
}

.lucilu-ficha__pasos p {
	margin: 0;
	font-size: 14px;
	color: #5a5a5a;
}

/* Preguntas frecuentes */
.lucilu-ficha__faq details {
	padding: 14px 0;
	border-top: 1px solid #eee;
}

.lucilu-ficha__faq details:last-of-type {
	border-bottom: 1px solid #eee;
}

.lucilu-ficha__faq summary {
	min-height: 24px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	list-style-position: outside;
}

.lucilu-ficha__faq details p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #5a5a5a;
}

/* Cierre */
.lucilu-ficha__cierre {
	text-align: center;
}

.lucilu-ficha__cierre p {
	margin: 0 0 20px;
	color: #5a5a5a;
}

/* Es un <a>, no un <button>: así el :hover verde de Astra —que gana a
   cualquier clase con especificidad (0,1,1)— no entra en juego. Aun así se
   cubren los tres estados, porque en móvil el :hover se queda pegado tras el
   toque. Sin el !important, el tema repinta el fondo. */
.lucilu-ficha__cierre .lucilu-ficha__boton,
.lucilu-ficha__cierre .lucilu-ficha__boton:hover,
.lucilu-ficha__cierre .lucilu-ficha__boton:focus,
.lucilu-ficha__cierre .lucilu-ficha__boton:active {
	display: inline-block;
	min-height: 52px;
	padding: 15px 32px;
	border-radius: 6px;
	background: var(--lucilu-brand, #ff2971) !important;
	color: #fff !important;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.lucilu-ficha__cierre .lucilu-ficha__boton:hover,
.lucilu-ficha__cierre .lucilu-ficha__boton:focus {
	background: var(--lucilu-brand-dark, #d6165a) !important;
}

/* --- Móvil --------------------------------------------------------------- */

@media (max-width: 768px) {
	.lucilu-ficha__pasos {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 520px) {
	.lucilu-ficha__seccion {
		padding: 32px 0;
	}
	.lucilu-ficha__lista {
		columns: 1;
	}
	.lucilu-ficha__pasos {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.lucilu-ficha__garantias {
		grid-template-columns: 1fr;
	}
}