/* =========================================================================
   Fancy Art - hoja de estilos unica del tema
   -------------------------------------------------------------------------
   Orden del archivo:
   01. Tokens y base
   02. Utilidades de composicion
   03. Encabezado y navegacion
   04. Hero
   05. Catalogo y tarjetas de producto
   06. Beneficios / Como funciona / Ambientes / Testimonios
   07. Acordeon de preguntas frecuentes
   08. Producto individual (WooCommerce)
   09. Carrito y pago
   10. Pie de pagina y WhatsApp flotante
   11. Accesibilidad, foco y movimiento reducido
   12. Adaptacion a pantallas medianas y moviles
   13. Neutralizacion de estilos por defecto de Gutenberg
   14. Paridad frontend / editor del sitio
   Los colores, tipografias y espaciados vienen de theme.json; aqui solo se
   usan sus variables (--wp--preset--*). No se escriben valores sueltos salvo
   los que el sistema de tokens no cubre.
   ========================================================================= */

/* 01. Tokens y base ------------------------------------------------------ */
:root {
	--fa-ink: var(--wp--preset--color--contrast, #111110);
	--fa-ink-soft: var(--wp--preset--color--ink-soft, #57544f);
	--fa-muted: var(--wp--preset--color--muted, #8c8985);
	--fa-line: var(--wp--preset--color--line, #ecebe8);
	--fa-line-strong: #dcdad6;
	--fa-surface: var(--wp--preset--color--surface, #faf9f8);
	--fa-transition: .25s ease;
	--fa-header-h: 78px;
	--fa-gutter: clamp(1.5rem, 3.4vw, 3rem);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

p { text-wrap: pretty; }

::selection { background: var(--fa-ink); color: #fff; }

/* 02. Utilidades de composicion ------------------------------------------ */
.fa-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow, .6875rem);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--fa-muted);
	margin: 0 0 .875rem;
}

.fa-rule { border-top: 1px solid var(--fa-line); }
.fa-rule-strong { border-top: 1px solid var(--fa-ink); }

.fa-lead { color: var(--fa-ink-soft); }

.fa-note {
	font-size: var(--wp--preset--font-size--small, .8125rem);
	color: var(--fa-muted);
}

/* Marco de imagen: el arte manda, el contenedor desaparece. */
.fa-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 03. Encabezado y navegacion -------------------------------------------- */
.fa-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--fa-line);
}

.fa-header > .wp-block-group {
	min-height: var(--fa-header-h);
	align-items: center;
}

.fa-header .wp-block-navigation__container { gap: clamp(1.125rem, 2.2vw, 2.375rem); }
.fa-header .wp-block-navigation { color: var(--fa-ink-soft); }
.fa-header .wp-block-navigation a:hover { color: var(--fa-ink); }

/* Mini carrito: mismo tratamiento que el enlace "Carrito (n)" del diseno. */
.fa-header .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 0;
	background: none;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fa-ink-soft);
	white-space: nowrap;
}
.fa-header .wc-block-mini-cart__icon { flex: none; }
.fa-header .wc-block-mini-cart__badge { background: none; color: var(--fa-ink-soft); font-size: .75rem; }
.fa-header .wp-block-navigation-item__content { white-space: nowrap; }

.fa-cart-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fa-ink-soft);
	white-space: nowrap;
}
.fa-cart-link svg { flex: none; }

/* 04. Hero --------------------------------------------------------------- */
.fa-hero { min-height: calc(100vh - var(--fa-header-h)); }
.fa-hero.alignfull > .wp-block-column:first-child { padding-left: var(--fa-gutter); }
.fa-hero__copy { animation: fa-rise .9s ease both; }
.fa-hero__media { min-height: 520px; }

@keyframes fa-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* 05. Catalogo y tarjetas de producto ------------------------------------ */
.fa-catalog .wc-block-product-template,
.fa-catalog .wp-block-post-template {
	gap: 3.5rem 2.5rem;
}

.fa-catalog li.wc-block-product,
.fa-catalog .wp-block-post {
	display: flex;
	flex-direction: column;
}

.fa-catalog .wc-block-components-product-image img,
.fa-catalog .wp-block-post-featured-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

.fa-catalog .wc-block-components-product-title,
.fa-catalog .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.3;
	margin: 1.25rem 0 .375rem;
}

.fa-catalog .wc-block-components-product-price {
	font-size: 1rem;
	color: var(--fa-ink);
}

/* Boton de compra presente pero no invasivo: contorno hasta el hover. */
.fa-catalog .wp-block-button__link,
.fa-catalog .wc-block-components-product-button .wp-block-button__link {
	background: transparent;
	color: var(--fa-ink);
	border: 1px solid var(--fa-line-strong);
	width: 100%;
	padding: .75rem 0;
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: background var(--fa-transition), border-color var(--fa-transition), color var(--fa-transition);
}
.fa-catalog .wp-block-button__link:hover,
.fa-catalog .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--fa-ink);
	border-color: var(--fa-ink);
	color: #fff;
}

/* 06. Beneficios / Como funciona / Ambientes / Testimonios --------------- */
.fa-benefit svg { display: block; }
.fa-benefit h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 400;
	margin: 1.375rem 0 .625rem;
}

.fa-step__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.5rem;
	font-weight: 300;
	color: #c9c6c1;
	margin: 0 0 1.375rem;
}

.fa-quote {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	line-height: 1.55;
	font-weight: 300;
}
.fa-quote cite {
	display: block;
	margin-top: 1.375rem;
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fa-muted);
}

/* 07. Acordeon de preguntas frecuentes ----------------------------------- */
.fa-faq .wp-block-details {
	border-top: 1px solid var(--fa-line);
	padding: 0;
}
.fa-faq .wp-block-details:first-child { border-top-color: var(--fa-ink); }
.fa-faq .wp-block-details:last-child { border-bottom: 1px solid var(--fa-line); }

.fa-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.625rem 0;
	font-size: 1.0625rem;
	font-weight: 400;
}
.fa-faq summary::-webkit-details-marker { display: none; }
.fa-faq summary::after {
	content: "+";
	float: right;
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--fa-muted);
	transition: transform .3s ease;
}
.fa-faq details[open] summary::after { transform: rotate(45deg); }
.fa-faq .wp-block-details > :not(summary) {
	margin: 0 0 1.875rem;
	max-width: 62ch;
	color: var(--fa-ink-soft);
	line-height: 1.8;
}

/* 08. Producto individual (WooCommerce) ---------------------------------- */
.fa-product .wc-block-components-product-image img,
.fa-product .woocommerce-product-gallery__image img { aspect-ratio: 4 / 5; object-fit: cover; }

.fa-product .wp-block-woocommerce-product-price { font-size: 1.5rem; font-weight: 300; }

.fa-product .wc-block-components-product-add-to-cart-button,
.fa-product .single_add_to_cart_button {
	width: 100%;
	background: var(--fa-ink);
	color: #fff;
	border: 1px solid var(--fa-ink);
	padding: 1.1875rem 0;
	font-size: .75rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: background var(--fa-transition);
}
.fa-product .single_add_to_cart_button:hover { background: #3d3b38; }

.fa-related .wc-block-product-template { gap: 2.5rem; }

/* 09. Carrito y pago ----------------------------------------------------- */
.fa-shop .wc-block-cart,
.fa-shop .wc-block-checkout { --wp--style--global--wide-size: 1180px; }

.fa-shop .wc-block-cart-items__row { border-top: 1px solid var(--fa-line); }
.fa-shop .wc-block-cart-items__row:first-child { border-top-color: var(--fa-ink); }

.fa-shop .wc-block-components-sidebar-layout .wc-block-components-sidebar {
	background: var(--fa-surface);
	padding: 2.625rem 2.375rem;
}

.fa-shop .wc-block-components-totals-item__label,
.fa-shop .wc-block-components-order-summary__title { letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }

.fa-shop .wc-block-components-text-input input,
.fa-shop .wc-block-components-address-form input {
	border: none;
	border-bottom: 1px solid var(--fa-line-strong);
	border-radius: 0;
	background: transparent;
	padding: .6875rem 0;
}

.fa-shop .wc-block-components-checkout-place-order-button,
.fa-shop .wc-block-cart__submit-button {
	width: 100%;
	background: var(--fa-ink);
	color: #fff;
	border-radius: 0;
	padding: 1.1875rem 0;
	font-size: .75rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* 10. Pie de pagina y WhatsApp flotante ---------------------------------- */
.fa-list-plain {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.fa-list-plain li { margin: 0; }

.fa-footer { border-top: 1px solid var(--fa-line); }
.fa-footer a { color: var(--fa-ink-soft); font-size: .875rem; }
.fa-footer a:hover { color: var(--fa-ink); }

.fa-whatsapp-float {
	position: fixed;
	right: 1.625rem;
	bottom: 1.625rem;
	z-index: 50;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--fa-line-strong);
	color: var(--fa-ink);
	transition: border-color var(--fa-transition);
}
.fa-whatsapp-float:hover { border-color: var(--fa-ink); }

/* 11. Accesibilidad, foco y movimiento reducido -------------------------- */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 1px solid var(--fa-ink);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 1rem; left: 1rem;
	z-index: 100;
	background: #fff;
	padding: .75rem 1.25rem;
	border: 1px solid var(--fa-ink);
}

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

/* 12. Adaptacion a pantallas medianas y moviles -------------------------- */
@media (max-width: 1140px) {
	/* Core muestra el menu superpuesto solo por debajo de 600px; el diseno lo
	   hace a 1140px, cuando las etiquetas en espanol dejan de caber. */
	.fa-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.fa-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		background-color: #fff;
	}
	.fa-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		color: var(--fa-ink-soft);
	}
	.fa-hero { min-height: 0; }
}

@media (max-width: 781px) {
	.fa-hero__media { min-height: 380px; }
	.fa-catalog .wc-block-product-template,
	.fa-catalog .wp-block-post-template { gap: 2.5rem 1.5rem; }
	.fa-step { border-right: none !important; padding-left: 0 !important; }
	.fa-quote { font-size: 1.25rem; }
}

/* 13. Neutralizacion de estilos por defecto de Gutenberg -----------------
   Reglas defensivas: el tema no activa 'wp-block-styles', pero core y
   WooCommerce siguen inyectando algunos valores. Aqui se devuelven a los
   del diseno aprobado, sin cambiar ningun valor visual.
   ----------------------------------------------------------------------- */

/* Citas: core dibuja borde izquierdo y cursiva. El diseno no los tiene. */
.wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-style: normal;
}
.wp-block-quote p { margin: 0; }

/* Separadores: linea completa de 1px, nunca la barra corta centrada. */
.wp-block-separator:not(.is-style-dots) {
	border: none;
	border-top: 1px solid var(--fa-line);
	width: 100%;
	max-width: none;
	opacity: 1;
	margin: 0;
}

/* Detalles: sin padding ni fondo propios. */
.wp-block-details { background: none; }

/* Imagenes: proporcion fija, tambien cuando el bloque aun no tiene archivo. */
.fa-figure,
.fa-figure .wp-block-image,
.fa-figure figure { margin: 0; height: 100%; }

.wp-block-image.fa-figure img,
.fa-figure .wp-block-image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* Botones: core reserva su propio radio y padding; el diseno usa esquina viva. */
.wp-block-button__link { border-radius: 0; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--fa-line-strong);
	background: transparent;
	color: var(--fa-ink);
	padding: 1.1875rem 2.125rem;
	transition: border-color var(--fa-transition);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--fa-ink); }
.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: #4a4744;
	color: #fff;
}
.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #fff; }

/* Columnas: core las apila a 781px; el diseno mantiene esa misma frontera. */
.wp-block-columns { margin-bottom: 0; }

/* WooCommerce: sus bloques traen radios y sombras que el diseno no usa. */
.woocommerce .button,
.wc-block-components-button,
.wc-block-components-panel,
.wc-block-components-text-input input {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* 14. Paridad frontend / editor del sitio -------------------------------
   El lienzo del editor no tiene <body> propio ni el header sticky; estas
   reglas hacen que los bloques se midan igual que en el frontend.
   ----------------------------------------------------------------------- */
.editor-styles-wrapper {
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

.editor-styles-wrapper .fa-header { position: static; backdrop-filter: none; }

/* Marcador de imagen vacia: conserva la proporcion para que el editor no
   colapse la seccion mientras no se ha subido la foto. */
.editor-styles-wrapper .fa-figure .wp-block-image .components-placeholder,
.editor-styles-wrapper .fa-hero__media .components-placeholder {
	min-height: 100%;
	aspect-ratio: 4 / 5;
	background: repeating-linear-gradient(135deg, #f4f2f0 0 12px, #edeae7 12px 24px);
	border: none;
	box-shadow: none;
	color: var(--fa-muted);
}