/* Ficha PPR v2 (post_templates/ppr.php). Mobile-first. El simulador va en ppr-simulador.css. */

.ppr-ficha {
	--ppr-primario: #135D77;
	--ppr-acento: #00c4bb;
	--ppr-texto: #26323b;
	--ppr-suave: #5d6b75;
	--ppr-borde: #dfe6ea;
	--ppr-fondo: #f4f8fa;
	color: var(--ppr-texto);
	padding: 16px 0 8px;
}

/*
 * En el DOM el cotizador (.ppr-aside) va antes de las opiniones para que sus ids ganen en getElementById
 * (ver post_templates/ppr/opiniones.php). Visualmente: contenido → opiniones → cotizador → FAQ/autor.
 */
.ppr-grid { display: flex; flex-direction: column; }
.ppr-main, .ppr-aside { min-width: 0; }
.ppr-grid > .ppr-main { order: 1; }
.ppr-grid > .ppr-opiniones { order: 2; }
.ppr-grid > .ppr-aside { order: 3; }
.ppr-grid > .ppr-main--fin { order: 4; }

/* El tema da mucho interlineado a los párrafos; en los textos chicos de la ficha se reduce. */
.ppr-actualizado, .ppr-fuente, .ppr-aside__intro, .ppr-autor__info p { line-height: 1.5; }

/* Bloque 1 */
.ppr-cabecera { margin-bottom: 20px; }
.ppr-cabecera__logo { display: block; width: auto; max-width: 160px; height: auto; max-height: 74px; margin: 0 0 12px; }
.ppr-cabecera h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 6px; text-align: left; }
.ppr-actualizado { color: var(--ppr-suave); font-size: .9rem; margin: 0 0 12px; }
.ppr-resumen { font-size: 1.1rem; line-height: 1.5; margin: 0 0 14px; }

.ppr-btn {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
}
/* #007f7a: contraste 4.9:1 con texto blanco (el acento #00c4bb no llega a 4.5:1). */
.ppr-btn--ancla, .ppr-btn--ancla:visited { background: #007f7a; color: #fff; }
.ppr-btn--ancla:hover, .ppr-btn--ancla:focus { background: #00675f; color: #fff; text-decoration: none; }
.ppr-btn--whatsapp, .ppr-btn--whatsapp:visited { display: block; margin-top: 12px; background: #25d366; color: #0b3d1f; }
.ppr-btn--whatsapp:hover, .ppr-btn--whatsapp:focus { background: #1ebe5b; color: #0b3d1f; text-decoration: none; }

.ppr-bloque { margin: 0 0 28px; }
.ppr-bloque h2 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 12px; }

/* Bloque 2: tabla de datos */
.ppr-datos__tabla { width: 100%; border-collapse: collapse; font-size: .97rem; }
.ppr-datos__tabla th, .ppr-datos__tabla td { padding: 10px 12px; border-bottom: 1px solid var(--ppr-borde); text-align: left; vertical-align: top; }
.ppr-datos__tabla th { width: 42%; background: var(--ppr-fondo); color: var(--ppr-texto); font-weight: 600; }
.ppr-fuente { font-size: .85rem; color: var(--ppr-suave); margin: 8px 0 0; }

/* Ejemplos de ahorro (tabla vieja) */
.ppr-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ppr-ejemplos__tabla { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .93rem; }
.ppr-ejemplos__tabla th, .ppr-ejemplos__tabla td { padding: 8px 10px; border-bottom: 1px solid var(--ppr-borde); text-align: right; white-space: nowrap; }
.ppr-ejemplos__tabla th:first-child, .ppr-ejemplos__tabla td:first-child { text-align: left; }
.ppr-ejemplos__tabla thead th { background: var(--ppr-primario); color: #fff; font-weight: 600; }
.ppr-ejemplos__tabla td { color: var(--ppr-texto); }

/* Bloque 4: contenido del editor */
.ppr-contenido { margin: 0 0 28px; }
.ppr-contenido img { max-width: 100%; height: auto; }

/* Bloque 5: pros y contras */
.ppr-pc__cols { display: grid; gap: 14px; }
.ppr-pc__col { border-radius: 8px; padding: 12px 16px; }
.ppr-pc__col h3 { font-size: 1.05rem; margin: 0 0 6px; }
.ppr-pc__col ul { margin: 0; padding-left: 20px; }
.ppr-pc__col li { margin: 4px 0; }
.ppr-pc__col--pros { background: #eaf8f1; border: 1px solid #c4ead6; }
.ppr-pc__col--contras { background: #fdf0ef; border: 1px solid #f3cfcb; }

/* Bloque 6: contratar (cotizador one-step) */
.ppr-aside { margin: 0 0 28px; scroll-margin-top: 16px; }
.ppr-aside__caja { background: #fff; border: 2px solid var(--ppr-acento); border-radius: 12px; padding: 16px; }
.ppr-aside__caja > h2 { font-size: 1.3rem; margin: 0 0 6px; }
.ppr-aside__intro { font-size: .95rem; color: var(--ppr-suave); margin: 0 0 10px; }
.ppr-aside .form-container { padding: 0; gap: 0; }
.ppr-aside .image-box { width: 100%; min-width: 0; padding: 10px; border-radius: 10px 10px 0 0; }
.ppr-aside .image-box img, .ppr-aside .image-box p { display: none; }
.ppr-aside .image-box h2 { font-size: 1.1rem; margin: 0; }
.ppr-aside .responsive-form { width: 100%; min-width: 0; border-radius: 0 0 10px 10px; }
.ppr-aside #resultado [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.ppr-aside #resultado .container { padding-left: 0; padding-right: 0; }

/* Bloque 7: FAQ */
.ppr-faq__item { border-bottom: 1px solid var(--ppr-borde); }
.ppr-faq__item summary { cursor: pointer; padding: 12px 28px 12px 0; font-weight: 600; list-style: none; position: relative; }
.ppr-faq__item summary::-webkit-details-marker { display: none; }
.ppr-faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 1.3rem; color: var(--ppr-primario); }
.ppr-faq__item[open] summary::after { content: "−"; }
.ppr-faq__respuesta { padding: 0 0 12px; }
.ppr-faq__respuesta p { margin: 0 0 8px; }

/* Bloque 8: autor */
.ppr-autor { display: flex; gap: 14px; align-items: flex-start; background: var(--ppr-fondo); border-radius: 10px; padding: 14px; }
.ppr-autor__foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 72px; }
.ppr-autor__info p { margin: 0 0 4px; font-size: .95rem; }
.ppr-autor__fecha, .ppr-autor__bio { color: var(--ppr-suave); }

/* Escritorio: contenido a la izquierda y el cotizador en una columna lateral sticky. */
@media (min-width: 992px) {
	.ppr-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: 36px;
		align-items: start;
	}
	.ppr-main { grid-column: 1; }
	.ppr-aside {
		grid-column: 2;
		grid-row: 1 / span 3;
		position: sticky;
		top: 16px;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
	.ppr-cabecera h1 { font-size: 2.2rem; }
	.ppr-pc__cols { grid-template-columns: 1fr 1fr; }
}