/* ==========================================================================
   Las Cuentas Fáciles — hoja de estilos del tema
   1.  Variables
   2.  Base y accesibilidad
   3.  Secciones y utilidades
   4.  Botones
   5.  Cabecera y navegación
   6.  Hero
   7.  Beneficios (tarjetas)
   8.  Proceso
   9.  Galería
   10. Testimonios
   11. Preguntas frecuentes
   12. Llamado a la acción final
   13. Pie de página
   14. Páginas y entradas
   15. Responsive
   ========================================================================== */

/* 1. Variables
   -------------------------------------------------------------------------- */
:root {
	--lcf-base: var(--wp--preset--color--base, #ffffff);
	--lcf-surface: var(--wp--preset--color--surface, #f3f8f7);
	--lcf-surface-alt: var(--wp--preset--color--surface-alt, #e4f0ed);
	--lcf-ink: var(--wp--preset--color--ink, #0d1b19);
	--lcf-ink-soft: var(--wp--preset--color--ink-soft, #4f615e);
	--lcf-primary: var(--wp--preset--color--primary, #0b7a69);
	--lcf-primary-dark: var(--wp--preset--color--primary-dark, #064e44);
	--lcf-accent: var(--wp--preset--color--accent, #e89a2c);
	--lcf-border: var(--wp--preset--color--border, #dbe7e4);

	--lcf-radius-sm: 10px;
	--lcf-radius: 18px;
	--lcf-radius-lg: 28px;

	--lcf-shadow-sm: 0 1px 2px rgba(13, 27, 25, .05), 0 6px 16px rgba(13, 27, 25, .05);
	--lcf-shadow: 0 2px 4px rgba(13, 27, 25, .04), 0 14px 40px rgba(13, 27, 25, .08);
	--lcf-shadow-lg: 0 30px 70px rgba(6, 78, 68, .16);

	--lcf-section-y: clamp(4rem, 9vw, 8rem);
}

/* 2. Base y accesibilidad
   -------------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--lcf-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

img {
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* 3. Secciones y utilidades
   -------------------------------------------------------------------------- */
.lcf-section {
	padding-block: var(--lcf-section-y);
}

.lcf-section__head {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lcf-section__head > * + * {
	margin-top: 1rem;
}

.lcf-eyebrow {
	margin: 0 0 .75rem;
	color: var(--lcf-primary);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.lcf-section__head .lcf-eyebrow {
	text-align: center;
}

.lcf-h2 {
	margin: 0;
}

.lcf-lead {
	max-width: 34em;
}

.lcf-grid {
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.lcf-grid:last-of-type {
	margin-bottom: 0;
}

/* 4. Botones
   -------------------------------------------------------------------------- */
.wp-block-button__link {
	box-shadow: 0 8px 20px rgba(11, 122, 105, .18);
	transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wp-block-button__link:hover {
	box-shadow: 0 12px 28px rgba(6, 78, 68, .24);
	transform: translateY(-1px);
}

.lcf-btn-lg .wp-block-button__link {
	padding: 1.125rem 2.25rem;
	font-size: 1.0625rem;
}

.lcf-btn-xl .wp-block-button__link {
	padding: 1.375rem 3rem;
	font-size: 1.1875rem;
}

.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--lcf-primary);
	background: transparent;
	color: var(--lcf-primary);
	box-shadow: none;
}

.is-style-outline > .wp-block-button__link:hover {
	background: var(--lcf-primary);
	color: var(--lcf-base);
}

.lcf-center-cta {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* 5. Cabecera y navegación
   -------------------------------------------------------------------------- */
.lcf-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--lcf-border);
	backdrop-filter: saturate(180%) blur(8px);
}

.lcf-header__bar {
	gap: 1.5rem;
	padding-block: 1.25rem;
}

.lcf-header__logo {
	margin: 0;
	line-height: 0;
}

.lcf-header__logo img {
	width: clamp(230px, 28vw, 360px);
}

.lcf-header__right {
	gap: clamp(1rem, 3vw, 2.25rem);
}

.lcf-nav a {
	color: var(--lcf-ink);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
}

.lcf-nav a:hover {
	color: var(--lcf-primary);
}

.lcf-nav .wp-block-navigation__container {
	gap: clamp(.75rem, 2vw, 2rem);
}

.lcf-nav.wp-block-navigation {
	min-width: 0;
}

/* Menú desplegable en móvil: los enlaces se apilan y se leen completos. */
.lcf-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem clamp(1.25rem, 5vw, 2.5rem);
}

.lcf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
	align-items: flex-start;
}

.lcf-nav .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: 1.375rem;
	font-weight: 600;
}

.lcf-nav .wp-block-navigation__responsive-container-open,
.lcf-nav .wp-block-navigation__responsive-container-close {
	color: var(--lcf-ink);
}

/* 6. Hero
   -------------------------------------------------------------------------- */
.lcf-hero {
	padding-block: clamp(3rem, 7vw, 6.5rem);
	background-image: radial-gradient(60% 60% at 15% 0%, rgba(228, 240, 237, .9), transparent 70%);
}

.lcf-hero__grid {
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.lcf-hero__copy {
	flex-basis: 46%;
}

.lcf-hero__title {
	margin: 0 0 1.25rem;
}

.lcf-hero__cta {
	gap: .875rem;
	margin-top: 2rem;
}

.lcf-note {
	margin-top: 1.25rem;
}

.lcf-hero__shot {
	margin: 0;
}

.lcf-hero__shot img {
	width: 100%;
	border: 1px solid var(--lcf-border);
	border-radius: var(--lcf-radius-lg);
	box-shadow: var(--lcf-shadow-lg);
}

/* 7. Beneficios (tarjetas)
   -------------------------------------------------------------------------- */
.lcf-card {
	height: 100%;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	border: 1px solid var(--lcf-border);
	border-radius: var(--lcf-radius);
	box-shadow: var(--lcf-shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.lcf-card:hover {
	border-color: rgba(11, 122, 105, .35);
	box-shadow: var(--lcf-shadow);
	transform: translateY(-3px);
}

.lcf-card__title {
	margin: 0 0 .625rem;
}

.lcf-card p {
	margin: 0;
}

.lcf-beneficios .wp-block-column {
	display: flex;
}

.lcf-beneficios .wp-block-column > .lcf-card {
	width: 100%;
}

/* 8. Proceso
   -------------------------------------------------------------------------- */
.lcf-paso {
	height: 100%;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--lcf-radius);
	background: var(--lcf-base);
	border: 1px solid var(--lcf-border);
	box-shadow: var(--lcf-shadow-sm);
}

.lcf-paso__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 1.125rem;
	border-radius: 50%;
	background: var(--lcf-surface-alt);
	color: var(--lcf-primary-dark);
	font-size: .9375rem;
	font-weight: 700;
}

.lcf-paso__title {
	margin: 0 0 .5rem;
}

.lcf-paso p {
	margin: 0;
}

.lcf-pasos .wp-block-column {
	display: flex;
}

.lcf-pasos .wp-block-column > .lcf-paso {
	width: 100%;
}

/* 9. Galería
   -------------------------------------------------------------------------- */
.lcf-gallery.wp-block-gallery {
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: flex-start;
}

.lcf-gallery figure.wp-block-image {
	border-radius: var(--lcf-radius);
	background: var(--lcf-surface);
	border: 1px solid var(--lcf-border);
	box-shadow: var(--lcf-shadow-sm);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.lcf-gallery figure.wp-block-image:hover {
	box-shadow: var(--lcf-shadow);
	transform: translateY(-3px);
}

.lcf-gallery figure.wp-block-image img {
	width: 100%;
	display: block;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.lcf-gallery figcaption.wp-element-caption {
	position: static;
	padding: .875rem 1rem 1.125rem;
	background: var(--lcf-base);
	color: var(--lcf-ink-soft);
	font-size: .9375rem;
	text-align: left;
}

/* 10. Testimonios
   -------------------------------------------------------------------------- */
.lcf-testis .wp-block-column {
	display: flex;
}

.lcf-testis .wp-block-column > .lcf-testi {
	width: 100%;
}

.lcf-testi {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.75rem;
}

.lcf-testi__quote {
	margin: 0;
	color: var(--lcf-ink);
	line-height: 1.5;
}

.lcf-testi__author {
	gap: .875rem;
	align-items: center;
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lcf-border);
}

.lcf-testi__avatar {
	margin: 0;
	flex: 0 0 auto;
}

.lcf-testi__avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.lcf-testi__name,
.lcf-testi__role {
	margin: 0;
}

/* 11. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.lcf-faq__list > * + * {
	margin-top: .875rem;
}

.lcf-faq__item {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--lcf-border);
	border-radius: var(--lcf-radius-sm);
	background: var(--lcf-base);
	box-shadow: var(--lcf-shadow-sm);
}

.lcf-faq__item summary {
	cursor: pointer;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--lcf-ink);
	list-style-position: outside;
}

.lcf-faq__item summary:hover {
	color: var(--lcf-primary);
}

.lcf-faq__item[open] {
	border-color: rgba(11, 122, 105, .35);
}

.lcf-faq__item[open] summary {
	margin-bottom: .75rem;
	color: var(--lcf-primary-dark);
}

.lcf-faq__item p {
	margin: 0;
}

/* 12. Llamado a la acción final
   -------------------------------------------------------------------------- */
.lcf-cta {
	text-align: center;
	background-image: radial-gradient(70% 80% at 50% 0%, rgba(11, 122, 105, .55), transparent 70%);
}

.lcf-cta__title {
	margin: 0 0 1.25rem;
}

.lcf-cta__text {
	margin: 0 auto;
	max-width: 42em;
	color: rgba(255, 255, 255, .92);
}

.lcf-cta__buttons {
	gap: 1rem;
	margin-top: 2.5rem;
}

.lcf-btn-light .wp-block-button__link {
	background: var(--lcf-base);
	color: var(--lcf-primary-dark);
}

.lcf-btn-light .wp-block-button__link:hover {
	background: var(--lcf-accent);
	color: var(--lcf-ink);
}

.lcf-btn-ghost.is-style-outline > .wp-block-button__link {
	border-color: rgba(255, 255, 255, .7);
	color: var(--lcf-base);
}

.lcf-btn-ghost.is-style-outline > .wp-block-button__link:hover {
	background: var(--lcf-base);
	color: var(--lcf-primary-dark);
}

.lcf-cta__note {
	margin-top: 1.5rem;
	color: rgba(255, 255, 255, .8);
}

/* 13. Pie de página
   -------------------------------------------------------------------------- */
.lcf-footer {
	scroll-margin-top: 6rem;
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.lcf-footer__top {
	gap: clamp(2rem, 4vw, 3.5rem);
}

.lcf-footer__brand {
	flex-basis: 40%;
}

.lcf-footer__logo {
	margin: 0 0 1.25rem;
	display: block;
	line-height: 0;
}

.lcf-footer__logo img {
	width: clamp(240px, 24vw, 300px);
}

.lcf-footer__tagline {
	margin: 0;
	max-width: 32em;
	color: rgba(255, 255, 255, .78);
}

.lcf-footer__title {
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lcf-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lcf-footer__list li + li {
	margin-top: .625rem;
}

.lcf-footer a {
	color: var(--lcf-base);
	text-decoration: none;
}

.lcf-footer a:hover {
	color: var(--lcf-accent);
	text-decoration: underline;
}

.lcf-footer__mail {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.lcf-footer__social {
	gap: .5rem;
}

.lcf-footer__bottom {
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .7);
}

.lcf-footer__bottom p {
	margin: 0;
}

/* 13.b Botón «volver arriba»
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

.lcf-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 30;
	margin: 0;
}

.lcf-top__btn .wp-block-button__link {
	padding: .875rem 1.375rem;
	font-size: .9375rem;
	background: var(--lcf-primary-dark);
	box-shadow: 0 10px 30px rgba(6, 78, 68, .3);
}

.lcf-top__btn .wp-block-button__link:hover {
	background: var(--lcf-primary);
}

/* 14. Páginas y entradas
   -------------------------------------------------------------------------- */
.lcf-entry {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.lcf-entry__title {
	margin-bottom: 1.5rem;
}

.lcf-entry__meta {
	margin-bottom: 2rem;
}

.lcf-entry__image img {
	border-radius: var(--lcf-radius);
}

.lcf-archive {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.lcf-post-list > li,
.lcf-post-list .wp-block-post {
	padding-block: 2rem;
	border-bottom: 1px solid var(--lcf-border);
}

.lcf-404 {
	text-align: center;
}

.lcf-404 .wp-block-buttons {
	justify-content: center;
}

/* 15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.lcf-hero__copy,
	.lcf-footer__brand {
		flex-basis: 100%;
	}
}

/* La barra de navegación pasa a su propia línea antes de apretarse. */
@media (max-width: 1000px) {
	.lcf-header__right {
		flex: 0 0 auto;
	}

	.lcf-nav .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: .5rem;
	}
}

@media (max-width: 781px) {
	.lcf-header__bar {
		gap: 1rem;
	}

	.lcf-header__logo img {
		width: 210px;
	}

	.lcf-hero {
		text-align: left;
	}

	.lcf-hero__cta .wp-block-button,
	.lcf-cta__buttons .wp-block-button {
		width: 100%;
	}

	.lcf-hero__cta .wp-block-button__link,
	.lcf-cta__buttons .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	.lcf-gallery.wp-block-gallery.columns-3 figure.wp-block-image {
		width: 100%;
	}

	.lcf-footer__bottom {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.lcf-section {
		padding-block: 3.5rem;
	}

	.lcf-top__btn .wp-block-button__link {
		padding: .75rem 1.125rem;
		font-size: .875rem;
	}

	.lcf-faq__item {
		padding: 1rem 1.125rem;
	}
}