:root {
    /* Aquí va la fuente fallback, es la fuente que tiene el titulo del hero. */
    /* --wp--preset--font-family--nombre-fuente: nombre-fuente, sans-serif; */
}

.wp-block-image figcaption {
	text-align: left;
	margin-bottom: 0;
}

/* La manija de redimensionado nativa deja estirar el campo más allá del ancho
   de su contenedor y genera scroll horizontal. Si un textarea necesita más
   alto, se le da acá o en el CSS del bloque, no arrastrando. */
textarea {
	resize: none;
}

.reset-custom-block {
	--mx: 0px;
	margin-left: var(--mx) !important;
	margin-right: var(--mx) !important;
	max-width: none !important;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.reset-custom-block * {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	box-sizing: border-box;
}

.reset-custom-block picture {
	line-height: 1;
	font-size: 0;
}

.reset-custom-block button {
	border: none;
	padding: 0;
	background: none;
}

/* Utilidad estándar de WordPress: oculta el elemento a la vista sin sacarlo del
   DOM ni de la navegación por teclado o lectores de pantalla. WordPress no la
   trae por defecto: cada tema tiene que declararla. Sin esto, cualquier botón
   con esta clase se renderiza visible y sin estilo, con su tamaño nativo del
   navegador, ocupando espacio real dentro de su contenedor. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* scrollbar-gutter reserva el canal de la barra de scroll siempre, aunque la
   pagina todavia no tenga alto suficiente para necesitarla. Sin esto, cualquier
   cosa que crezca de alto —un acordeon, un menu desplegable, un filtro que
   agrega resultados— hace aparecer la barra de golpe, el viewport se angosta y
   todo el contenido centrado pega un salto hacia la izquierda. */
html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

/* Fallback para navegadores sin scrollbar-gutter (Safari anterior a 18.2).
   Fuerza el track siempre visible: mas feo, pero evita el mismo salto. */
@supports not (scrollbar-gutter: stable) {
	html {
		overflow-y: scroll;
	}
}

/* Margen lateral del sitio. El contenido crece hasta 1600px y se centra; en
   escritorio el margen nunca baja de 80px y en celular es de 20px (diseno del
   8-oct, criterio de interacciones 6 bis). El % se resuelve donde se usa la
   variable: en el padding del contenedor a sangre, que mide lo que la ventana.

   Windtoys se aparta del tema base en el breakpoint de .px-1rem-mob: aca el
   margen lateral es parte del diseno en todas las medidas, no solo en celular,
   asi que la clase lleva el margen completo siempre y el valor cambia en el
   corte del diseno (1023px), no en wideSize + 32px. Sigue saliendo de un solo
   lugar y se usa igual: en el contenedor que fija el ancho. Ver
   project-context/frontend-plan.md. */
:root {
	--windtoys-gutter: max(80px, calc((100% - 1600px) / 2));
	--windtoys-header-height: 96px;
	--windtoys-transition: 300ms ease-out;
}

@media only screen and (max-width: 1023px) {
	:root {
		--windtoys-gutter: 20px;
		--windtoys-header-height: 64px;
	}
}

.px-1rem-mob {
	--px: var(--windtoys-gutter);
	padding-left: var(--px) !important;
	padding-right: var(--px) !important;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Cabecera, contenido y pie van pegados: las secciones traen su propio espaciado. Sin esto, WordPress agrega el
   blockGap entre las partes de la plantilla y queda una franja blanca arriba del pie. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

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

/* Link de texto sin flecha (pie, filtros, migas, disciplinas de la portada).
   Linea azul de 2px que se dibuja de izquierda a derecha con el mismo grosor
   durante toda la animacion: se anima el ancho de un fondo, no un scaleX. Mide
   lo que mide el texto y va 6px por debajo, para no pisar los descendentes. */
.text-link {
	width: fit-content;
	padding-bottom: 6px;
	line-height: 20px;
	background-image: linear-gradient(var(--wp--preset--color--ocean-blue), var(--wp--preset--color--ocean-blue));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size var(--windtoys-transition);
}

.text-link:hover,
.text-link:focus-visible,
.text-link.is-current {
	background-size: 100% 2px;
}

/* Link con la flecha unica (windtoys_icon('arrow')): la flecha se corre 4px.
   Dentro de una tarjeta la flecha se mueve con el hover de toda la tarjeta (ver
   el CSS de cada tarjeta). */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.link-arrow__icon {
	flex: none;
	transition: transform var(--windtoys-transition);
}

.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
	transform: translateX(4px);
}

/* Encabezado de seccion (home, relacionados): antetitulo en mono ("02 / Disciplinas") y titulo; a la derecha,
   opcional, un link con flecha subrayado ("Ver todos los productos"). El tamano del titulo lo pone cada bloque. */
.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
}

.section-head__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.section-head__kicker {
	color: var(--wp--preset--color--line-dark);
}

/* Numeracion de las secciones de la home ("02 / Disciplinas", "03 / Destacados", "04 / Contacto"): se cuenta sola,
   solo con las secciones que estan en la pagina. La portada es la 01 y no lleva antetitulo. Si vuelve la seccion de
   distribuidores o se suma Novedades, los numeros se corren solos. Fuera de la home el antetitulo va sin numero. */
.main-front-page {
	counter-reset: windtoys-section 1;
}

.main-front-page .section-head__kicker::before {
	counter-increment: windtoys-section;
	content: counter(windtoys-section, decimal-leading-zero) " / ";
}

.section-head__link {
	flex: none;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
}

/* Etiqueta en mono: kicker de seccion, metadatos, migas. */
.mono-label {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Animaciones de entrada (criterio, punto 1 bis; js/lib/windtoys-motion.js). Lo que entra animado arranca oculto,
   pero solo con la clase has-motion, que pone el <head> si no se pidio menos movimiento: sin JS, todo se ve. */
.has-motion .js-reveal,
.has-motion .js-reveal-grid > *,
.has-motion .js-hero-intro,
.has-motion .js-footer-logo,
.has-motion .js-footer-item {
	opacity: 0;
}

/* Pantalla de carga de la home: negra hasta que estan la fuente, el primer cuadro del video y las animaciones
   (hero-view.js saca is-loading), como maximo 4 s. */
html.is-loading {
	background-color: var(--wp--preset--color--black);
}

html.is-loading body {
	opacity: 0;
}

body {
	transition: opacity var(--windtoys-transition);
}

/* Scroll suave (Lenis, js/lib/windtoys-motion.js): las reglas que pide la libreria. Mientras Lenis anda, el
   scroll-behavior: smooth del <html> se apaga (lo hace Lenis). */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* Cambio de pagina con un fundido de 300 ms (View Transitions; donde no hay soporte, cambio normal). */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 300ms;
	animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}

	html {
		scroll-behavior: auto;
	}
}