/*
 * Tía Inox — ajustes finos de diseño
 * La paleta, tipografía, espaciados y sombras viven en theme.json.
 * Este archivo solo contiene lo que theme.json no puede expresar.
 *
 * Índice
 *  0. Base y utilidades
 *  1. Header
 *  2. Hero
 *  3. Trust Bar
 *  4. Productos
 *  5. Video
 *  6. Trayectoria (Sobre nosotros)
 *  7. CTA final
 *  8. Footer
 *  9. Plantillas internas
 * 10. Responsive y accesibilidad
 */

/* ==========================================================================
   0. Base y utilidades
   ========================================================================== */
:root {
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--header-offset: 6rem;
	--radius: 4px;
}

/* Enlaces sin subrayado.
   La jerarquia se marca con color, peso y tamano, no con rayas: los
   subrayados por defecto del navegador compiten con el diseno y ensucian
   los botones de la portada. El pie del tema de bloques conserva su
   subrayado al hover porque lo define con mas especificidad. */
a,
a:hover,
a:focus,
a:active,
a:visited {
	text-decoration: none;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-offset);
}

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

/* Sin separación automática entre bloques de página completa */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks .site-main > * {
	margin-block: 0;
}

.section {
	padding: var(--wp--preset--spacing--80) var(--gutter);
}

.section__head {
	max-width: 46rem;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--60);
	text-align: center;
}

.section__head h2 {
	text-transform: uppercase;
}

/* Kicker: mayúsculas pequeñas con tracking */
.is-style-kicker {
	margin-block-end: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
}

/* Lista con tildes */
.wp-block-list.is-style-checklist {
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-checklist li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block-end: 0.375rem;
}

.wp-block-list.is-style-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.4em;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--azul);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   1. Header
   ========================================================================== */
.site-header-wrap {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--blanco);
	border-bottom: 1px solid var(--wp--preset--color--borde);
	box-shadow: var(--wp--preset--shadow--sutil);
}

.admin-bar .site-header-wrap {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header {
	padding: 0.75rem var(--gutter);
}

.site-header__inner {
	gap: 0.75rem 1.5rem;
}

.brand-logo {
	padding: 0.4rem 0.75rem;
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--radius);
}

.brand-logo__img,
.brand-logo--light {
	margin: 0;
}

.brand-logo img {
	display: block;
	width: 9.5rem;
	height: auto;
	border-radius: 0;
}

.site-nav .wp-block-navigation__container {
	gap: 0.25rem 1.75rem;
}

.site-nav .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.site-nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--azul);
}

.site-header__actions {
	gap: 0.75rem;
}

.site-header__search .wp-block-search__button {
	margin: 0;
	padding: 0.5rem;
	color: var(--wp--preset--color--carbon);
	background: transparent;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--radius);
}

.site-header__search .wp-block-search__button:hover {
	border-color: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--azul);
}

.site-header__cta .wp-block-button__link {
	padding: 0.65rem 1.25rem;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero {
	min-height: clamp(34rem, 82vh, 52rem);
	padding: var(--wp--preset--spacing--80) var(--gutter);
}

.hero .wp-block-cover__inner-container {
	width: 100%;
}

.hero__content {
	max-width: 52rem;
	margin-inline: 0;
}

.hero .is-style-kicker {
	color: var(--wp--preset--color--blanco);
	opacity: 0.92;
}

.hero__title {
	margin-block-end: 1.25rem;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.hero__lead {
	max-width: 40rem;
	line-height: 1.55;
}

.hero__actions {
	margin-block-start: 2rem;
	gap: 1rem;
}

.hero .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	background: transparent;
}

.hero .is-style-outline .wp-block-button__link:hover,
.hero .is-style-outline .wp-block-button__link:focus {
	color: var(--wp--preset--color--carbon);
	background: var(--wp--preset--color--blanco);
}

/* ==========================================================================
   3. Trust Bar
   ========================================================================== */
.trust-bar {
	padding: var(--wp--preset--spacing--60) var(--gutter);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.trust-bar__label {
	margin-block-end: 1.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}

.trust-bar__logos {
	gap: 1.5rem 2rem;
	align-items: center;
}

.trust-bar__logo {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
	opacity: 0.85;
}

/* Si se reemplazan por imágenes de logos: monocromo en escala de grises */
.trust-bar__logos img {
	max-height: 2.5rem;
	width: auto;
	margin-inline: auto;
	filter: grayscale(1);
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.trust-bar__logos img:hover {
	opacity: 1;
}

/* ==========================================================================
   4. Productos
   ========================================================================== */
.products-grid {
	gap: var(--wp--preset--spacing--50);
}

.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--radius);
	box-shadow: var(--wp--preset--shadow--sutil);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.product-card:hover {
	box-shadow: var(--wp--preset--shadow--elevada);
	transform: translateY(-3px);
}

.product-card > * {
	margin: 0;
}

.product-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
}

.product-card__body > * {
	margin: 0;
}

.product-card__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.product-card__body > .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: 0.75rem;
}

.products-more {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   5. Video
   ========================================================================== */
.video-section__player {
	margin-block: 0 var(--wp--preset--spacing--60);
}

.video-section__player video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--pizarra);
	border-radius: var(--radius);
	box-shadow: var(--wp--preset--shadow--elevada);
}

.video-section__player figcaption {
	margin-block-start: 0.75rem;
	font-size: 0.875rem;
	text-align: center;
	color: var(--wp--preset--color--grafito);
}

.process-steps {
	gap: var(--wp--preset--spacing--50);
}

.process-step {
	padding-block-start: 1.25rem;
	border-top: 3px solid var(--wp--preset--color--azul);
}

.process-step > * {
	margin: 0 0 0.5rem;
}

.process-step__num {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--azul);
}

/* ==========================================================================
   6. Trayectoria (Sobre nosotros)
   ========================================================================== */
.about__split {
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.about__text h2 {
	text-transform: uppercase;
}

.about__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--wp--preset--shadow--elevada);
}

.pillar {
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: 1rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.pillar > * {
	margin: 0 0 0.35rem;
	grid-column: 2;
}

.pillar__num {
	grid-column: 1;
	grid-row: 1 / span 3;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--wp--preset--color--azul);
}

.stats-grid {
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--borde);
}

.stat > * {
	margin: 0;
}

.stat__value {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--azul);
}

.stat__label {
	margin-block-start: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}

/* ==========================================================================
   7. CTA final
   ========================================================================== */
.cta-final .is-style-kicker {
	color: var(--wp--preset--color--blanco);
	opacity: 0.9;
}

.cta-final h2 {
	text-transform: uppercase;
}

.cta-final .wp-block-buttons {
	gap: 1rem;
}

.cta-final .wp-block-button__link:hover {
	color: var(--wp--preset--color--blanco);
	background-color: var(--wp--preset--color--pizarra);
}

.cta-final .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	background: transparent;
}

.cta-final .is-style-outline .wp-block-button__link:hover,
.cta-final .is-style-outline .wp-block-button__link:focus {
	color: var(--wp--preset--color--azul);
	background: var(--wp--preset--color--blanco);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer {
	padding: var(--wp--preset--spacing--70) var(--gutter) var(--wp--preset--spacing--50);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--blanco);
	text-decoration: underline;
}

.site-footer__cols {
	gap: var(--wp--preset--spacing--60);
}

.footer__title {
	margin-block-end: 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.brand-logo--light {
	margin-block-end: 1rem;
}

.brand-logo--light img {
	display: block;
	width: 10rem;
	height: auto;
	border-radius: 0;
}

.site-footer p {
	margin-block: 0 0.75rem;
}

.footer__map {
	margin-block: 0.5rem;
}

.footer__map img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius);
}

.footer-nav {
	margin-block-end: 1rem;
}

.footer-nav .wp-block-navigation__container {
	gap: 0.5rem;
}

.footer-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--niebla);
}

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

.site-footer .wp-block-social-links .wp-social-link a {
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
}

.site-footer .wp-block-social-links svg {
	fill: currentColor;
}

.footer__bottom {
	gap: 0.5rem 1.5rem;
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   9. Plantillas internas (page, single, 404, index)
   ========================================================================== */
.site-main--page {
	padding: var(--wp--preset--spacing--70) var(--gutter);
}

/* ==========================================================================
   10. Responsive y accesibilidad
   ========================================================================== */
:where(a, button, input, summary, video):focus-visible {
	outline: 3px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
}

.hero :where(a):focus-visible,
.cta-final :where(a):focus-visible,
.site-footer :where(a):focus-visible {
	outline-color: var(--wp--preset--color--blanco);
}

/* Tablets: el menú pasa a una segunda fila bajo el logo */
@media (min-width: 600px) and (max-width: 1100px) {
	.site-header__inner .site-nav {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
	}
}

/* Móviles: el botón de cotización se ofrece desde el logo y el hero */
@media (max-width: 599px) {
	:root {
		--header-offset: 5rem;
	}

	.site-header__cta {
		display: none;
	}

	.brand-logo img {
		width: 7.5rem;
	}

	.hero__actions .wp-block-button,
	.hero__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.admin-bar .site-header-wrap {
		top: 0;
	}
}

/* Footer: 2 columnas en tablet */
@media (min-width: 782px) and (max-width: 1100px) {
	.site-footer__cols {
		flex-wrap: wrap !important;
	}

	.site-footer__cols > .wp-block-column {
		flex-basis: calc(50% - 2rem) !important;
	}
}

/* Pantallas ultra anchas */
@media (min-width: 1920px) {
	.hero {
		min-height: min(82vh, 56rem);
	}

	.section {
		padding-block: 9rem;
	}
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}