/* ==========================================================================
   HERENCIAS PREMIUM — hoja de estilos del tema
   Todo el CSS del tema vive en este archivo. Los tokens (color, tipografia,
   espaciado) se definen en theme.json y se consumen aqui como variables
   --wp--preset--*. No hay estilos inline ni CSS dentro de las plantillas.

   INDICE
   01. Base y tipografia
   02. Utilidades de composicion
   03. Botones y llamadas a la accion
   04. Cabecera y navegacion
   05. Hero
   06. Barra de confianza
   07. Bloques de reconocimiento (tu situacion)
   08. Lista numerada de riesgos
   09. Secciones sobre fondo oscuro y rojo
   10. Metodo por fases
   11. Servicios
   12. Casos hipoteticos
   13. Prueba social
   14. Proceso de contratacion
   15. Reduccion de riesgo
   16. FAQ (bloque Detalles)
   17. Contacto y cierre
   18. Marcos de imagen
   19. Pie de pagina
   20. Barra fija de contacto en movil
   21. Accesibilidad y preferencias de movimiento
   ========================================================================== */


/* ==========================================================================
   01. BASE Y TIPOGRAFIA
   ========================================================================== */

body {
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	overflow-x: hidden;
}

/* Correccion optica del titular a bandera izquierda */
.hp-hero h1,
.hp-cta h2 {
	margin-left: -0.04em;
}

/* Entradilla de hero y de seccion */
.hp-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	max-width: 46ch;
}

/* Etiqueta superior de seccion */
.hp-kicker {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Texto secundario y notas */
.hp-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
}

/* Cifra destacada */
.hp-figure {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.hp-figure-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 6px 0 0;
}


/* ==========================================================================
   02. UTILIDADES DE COMPOSICION
   ========================================================================== */

/* Ritmo vertical de seccion */
.hp-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.hp-section-tight {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Reglas: el sistema separa secciones con linea, no con vacio */
.hp-rule {
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.hp-rule-thin {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Cero radios en todo el tema */
.wp-block-button__link,
.wp-block-image img,
.wp-block-group,
.wp-block-column {
	border-radius: 0;
}

/* Cabecera de seccion con titular limitado en medida */
.hp-section h2,
.hp-cta h2 {
	max-width: 26ch;
}


/* ==========================================================================
   03. BOTONES Y LLAMADAS A LA ACCION
   ========================================================================== */

/* Las etiquetas van a bandera izquierda, tambien dentro de botones anchos */
.wp-block-button__link {
	text-align: left;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
}

/* Boton secundario sobre marfil */
.hp-btn-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.hp-btn-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* Boton secundario sobre fondo oscuro o rojo */
.hp-btn-inverse .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

.hp-btn-inverse .wp-block-button__link:hover {
	background-color: rgba(243, 242, 242, 0.14);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* Microcopy de reduccion de friccion bajo un boton */
.hp-microcopy {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	max-width: 42ch;
}

.hp-cta-row {
	margin-top: var(--wp--preset--spacing--30);
}


/* ==========================================================================
   04. CABECERA Y NAVEGACION
   ========================================================================== */

.hp-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--base);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.admin-bar .hp-header {
	top: 32px;
}

.hp-header .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hp-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hp-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.hp-header-phone a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hp-header-phone a:hover {
	color: var(--wp--preset--color--primary);
}


/* ==========================================================================
   05. HERO
   ========================================================================== */

.hp-hero {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--60);
}

.hp-hero h1 {
	max-width: 19ch;
}

.hp-hero-media .wp-block-image {
	margin: 0;
}


/* ==========================================================================
   06. BARRA DE CONFIANZA
   ========================================================================== */

.hp-trust {
	border-top: 2px solid var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}

.hp-trust p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}


/* ==========================================================================
   07. BLOQUES DE RECONOCIMIENTO (TU SITUACION)
   ========================================================================== */

.hp-quotes > .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--20);
}

.hp-quotes h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.hp-quotes p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.hp-closing-line {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	max-width: 40ch;
}


/* ==========================================================================
   08. LISTA NUMERADA DE RIESGOS
   ========================================================================== */

.hp-risks {
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.hp-risks p {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--20) 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.hp-risks strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
}


/* ==========================================================================
   09. SECCIONES SOBRE FONDO OSCURO Y ROJO
   ========================================================================== */

.hp-dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.hp-red {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.hp-dark .hp-kicker,
.hp-red .hp-kicker {
	color: var(--wp--preset--color--accent-light);
}

.hp-dark .hp-lead,
.hp-red .hp-lead,
.hp-dark .hp-microcopy,
.hp-red .hp-microcopy {
	color: rgba(243, 242, 242, 0.82);
}

.hp-dark p,
.hp-red p {
	color: rgba(243, 242, 242, 0.86);
}

.hp-dark h2,
.hp-dark h3,
.hp-red h2,
.hp-red h3 {
	color: var(--wp--preset--color--base);
}

.hp-dark a:not(.wp-block-button__link),
.hp-red a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
}

/* Rejilla de pilares dentro del bloque oscuro */
.hp-pillars {
	border-top: 2px solid rgba(243, 242, 242, 0.35);
	padding-top: var(--wp--preset--spacing--30);
}

.hp-pillars h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--medium);
}

.hp-pillars p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}


/* ==========================================================================
   10. METODO POR FASES
   ========================================================================== */

.hp-phases {
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.hp-phases > .wp-block-columns {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--30) 0;
	margin-bottom: 0;
}

.hp-phase-col-num {
	flex-basis: 80px;
	flex-grow: 0;
}

.hp-phase-col-title {
	flex-basis: 280px;
	flex-grow: 0;
}

.hp-phase-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.hp-phases h3 {
	margin: 0;
}

.hp-phases p:not(.hp-phase-num) {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}


/* ==========================================================================
   11. SERVICIOS
   ========================================================================== */

/* Las juntas de la rejilla se dibujan con la propia linea del sistema */
.hp-cards {
	gap: 2px;
	background: var(--wp--preset--color--line);
	margin-bottom: 2px;
}

.hp-cards > .wp-block-column {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.hp-card-tag {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin: 0;
}

.hp-cards h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.hp-cards p:not(.hp-card-tag):not(.hp-card-solves) {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	flex: 1;
}

.hp-card-solves {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast);
	margin: 0;
	margin-top: auto;
}


/* ==========================================================================
   12. CASOS HIPOTETICOS
   ========================================================================== */

.hp-cases > .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--20);
}

.hp-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.hp-case-problem {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.hp-case-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin: 0 0 4px;
}

.hp-cases p:not(.hp-badge):not(.hp-case-problem):not(.hp-case-label) {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}


/* ==========================================================================
   13. PRUEBA SOCIAL
   ========================================================================== */

.hp-stats {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--20);
}

.hp-reviews > .wp-block-column {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--30);
}

.hp-reviews .wp-block-quote {
	margin: 0;
	padding: 0;
}

.hp-reviews .wp-block-quote p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.hp-reviews .wp-block-quote cite {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Banda de autoridad */
.hp-authority {
	background: var(--wp--preset--color--surface);
	border-top: 2px solid var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}


/* ==========================================================================
   14. PROCESO DE CONTRATACION
   ========================================================================== */

.hp-steps {
	gap: 2px;
	background: var(--wp--preset--color--line);
}

.hp-steps > .wp-block-column {
	background: var(--wp--preset--color--base);
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--20);
}

.hp-step-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--primary);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.hp-steps h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--medium);
}

.hp-steps p:not(.hp-step-num) {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}


/* ==========================================================================
   15. REDUCCION DE RIESGO
   ========================================================================== */

.hp-assurances {
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.hp-assurances h3 {
	margin: var(--wp--preset--spacing--20) 0 4px;
	font-size: var(--wp--preset--font-size--medium);
}

.hp-assurances p {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}


/* ==========================================================================
   16. FAQ (BLOQUE DETALLES)
   ========================================================================== */

.hp-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.hp-faq .wp-block-details:first-of-type {
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.hp-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.hp-faq summary:hover {
	color: var(--wp--preset--color--accent-deep);
}

.hp-faq .wp-block-details > :not(summary) {
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}


/* ==========================================================================
   17. CONTACTO Y CIERRE
   ========================================================================== */

.hp-cta {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.hp-contact-card {
	border-top: 2px solid rgba(243, 242, 242, 0.4);
	padding-top: var(--wp--preset--spacing--30);
}

.hp-contact-card p {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--small);
}

.hp-contact-phone {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
}

.hp-contact-phone a {
	text-decoration: none;
}


/* ==========================================================================
   18. MARCOS DE IMAGEN
   ========================================================================== */

.hp-frame figure,
figure.hp-frame {
	margin: 0;
}

.hp-frame img {
	width: 100%;
	display: block;
	object-fit: cover;
	filter: grayscale(1) contrast(1.08);
}

.hp-frame-45 img {
	aspect-ratio: 4 / 5;
}

.hp-frame-54 img {
	aspect-ratio: 5 / 4;
}

/* Hueco sin foto: conserva proporcion para que la maqueta no salte */
.hp-frame:not(:has(img)) {
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--line);
	min-height: 240px;
}

.hp-frame-45:not(:has(img)) {
	aspect-ratio: 4 / 5;
}

.hp-frame-54:not(:has(img)) {
	aspect-ratio: 5 / 4;
}


/* ==========================================================================
   19. PIE DE PAGINA
   ========================================================================== */

.hp-footer {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

.hp-footer h4 {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--10);
}

.hp-footer p,
.hp-footer li {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0 0 6px;
}

.hp-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-footer a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.hp-footer a:hover {
	color: var(--wp--preset--color--primary);
}

.hp-legal {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--20);
}

.hp-legal p {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin: 0;
	max-width: 90ch;
}


/* ==========================================================================
   20. BARRA FIJA DE CONTACTO EN MOVIL
   ========================================================================== */

.hp-sticky-bar {
	display: none;
}

@media (max-width: 781px) {
	.hp-sticky-bar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		background: var(--wp--preset--color--base);
		border-top: 2px solid var(--wp--preset--color--contrast);
		padding: 10px 14px;
	}

	.hp-sticky-bar .wp-block-buttons {
		gap: 8px;
		flex-wrap: nowrap;
	}

	.hp-sticky-bar .wp-block-button {
		flex: 1;
	}

	.hp-sticky-bar .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
		font-size: var(--wp--preset--font-size--small);
	}

	/* Espacio para que la barra no tape el pie */
	.hp-footer {
		padding-bottom: calc(var(--wp--preset--spacing--40) + 76px);
	}

	/* En movil los botones ocupan el ancho completo */
	.hp-hero .wp-block-button,
	.hp-cta .wp-block-button,
	.hp-dark .wp-block-button,
	.hp-section .wp-block-button {
		width: 100%;
	}

	.hp-hero .wp-block-button__link,
	.hp-cta .wp-block-button__link,
	.hp-dark .wp-block-button__link,
	.hp-section .wp-block-button__link {
		width: 100%;
	}
}


/* ==========================================================================
   21. ACCESIBILIDAD Y PREFERENCIAS DE MOVIMIENTO
   ========================================================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

::selection {
	background: rgba(236, 48, 19, 0.28);
}

html {
	scroll-behavior: smooth;
}

/* Los enlaces internos no quedan tapados por la cabecera fija */
[id] {
	scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* ==========================================================================
   22. MARCA — logotipo Herencias Premium (monograma + wordmark)
   ========================================================================== */

.hp-brand {
	gap: 11px;
	align-items: center;
	flex-wrap: nowrap;
}

.hp-monogram {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	margin: 0;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.03em;
}

.hp-brand-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hp-brand-text .wp-block-site-title {
	margin: 0;
	line-height: 1;
}

.hp-brand-text .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.015em;
	text-decoration: none;
}

.hp-brand-tagline {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0.6;
}

.hp-dark .hp-brand-tagline,
.hp-footer .hp-brand-tagline {
	opacity: 0.7;
}