/* =========================================================
   HOME — HERO SLIDER (branded, rediseno 2026-06-24)
   ---------------------------------------------------------
   Lleva el hero del home al look branded: titulos Oswald
   MAYUSCULA, kicker con linea de acento, CTA con flecha +
   sombra, marca de agua japonesa (kanji) por slide y fondo
   azul de marca en gradiente. SOLO presentacion: los textos,
   imagenes y links de los slides los genera el WEB BRAIN.

   SCOPE ESTABLE (no depende de ids de slide, que difieren
   LOCAL/VPS, ni del _css_classes de Elementor, que el render
   del slider de WoodMart no emite):
     - `.naccato-hero-active`  -> body class del front (functions.php).
     - `.wd-slide`             -> cada slide del carrusel.
     - `:nth-child(1|2|3)`     -> variante decorativa (kanji) por slide.

   Plantilla canonica de cada slide (Naccato_WebBrain_Slide_Template):
     container row  ->  col izq (wd_color_scheme: dark, ~52%)
                          text-editor (kicker) + wd_title +
                          text-editor (subtitulo) + wd_button (CTA)
                        col der (~48%)  ->  wd_image_or_svg (packshot)

   Tokens de marca: assets/css/variables.css. Fonts (Oswald /
   Roboto / Noto Sans JP) las encola functions.php.
   ========================================================= */

/* =========================================================
   DESBORDE EN COLUMNA ESTRECHA
   ---------------------------------------------------------
   El hero NO ocupa el ancho completo: el slider vive en la
   columna izquierda (~58%) y a la derecha hay 2 banners. Sin
   override, el contenido del slide se recorta dentro de esa
   columna. WoodMart emite por slide `max-width:1200px` en el
   .wd-slide-inner; lo neutralizamos a 100% para que se ciña al
   ancho real. Acotado al hero del front por `.naccato-hero-active`.
   ========================================================= */
.naccato-hero-active .wd-slider .wd-slide .wd-slide-inner {
	max-width: 100% !important;
	position: relative;
	z-index: 2;
}
@media (max-width: 1024px) {
	.naccato-hero-active .wd-slider .wd-slide .wd-slide-inner {
		max-width: 100% !important;
	}
}

/* ALTO ESTABLE ENTRE SLIDES (fix del "grid que salta")
   ---------------------------------------------------------
   El slider y los 2 banners de la derecha son columnas flex de
   IGUAL ALTO: la mas alta define la fila. Si un slide crece (un
   titulo/subtitulo que envuelve mas lineas a ciertos anchos),
   la fila entera crece y los banners "saltan" de alto al rotar
   el carrusel -> se rompe el grid.

   Fix: alto FIJO (no min-height) en el contenido del slide, asi
   NUNCA cambia segun su contenido ni el ancho del viewport. El
   contenido se centra vertical y se acota (clamps de 2 lineas,
   abajo) para que nunca desborde ese alto. Solo en el layout de
   2 columnas (>=769px); en mobile el contenido apilado manda. */
@media (min-width: 769px) {
	.naccato-hero-active .wd-slider .wd-slide .wd-slide-inner {
		height: 360px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
	}
}

/* Acotar titulo y subtitulo a 2 lineas: garantiza que el contenido
   del slide nunca supere el alto fijo, sin importar el ancho (a
   anchos intermedios el texto envuelve mas lineas). Los titulos del
   hero son cortos (<=2 lineas), asi que el clamp es un seguro, no un
   recorte visible. */
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_title .woodmart-title-container {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_title + .elementor-widget-text-editor p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* El container Elementor RAIZ del slide viene "boxed" (content-width
   ~1140px centrado); dentro de la columna estrecha desborda y el
   overflow del carrusel recorta. Forzamos el .e-con raiz (y su inner)
   a fluido. Acotado al hero del front -> no afecta otros .e-con. */
.naccato-hero-active .wd-slider .wd-slide .wd-slide-inner > .elementor > .e-con,
.naccato-hero-active .wd-slider .wd-slide .wd-slide-inner .e-con.e-parent {
	width: 100% !important;
	max-width: 100% !important;
	--width: 100%;
	--content-width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.naccato-hero-active .wd-slider .wd-slide .wd-slide-inner .e-con > .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ----- Fondo: gradiente azul de marca (uniforme) -----
   El contenedor real del fondo es .wd-slide-bg.wd-fill (hermano del
   contenido). La plantilla deja el bg_image vacio: el fondo lo pinta
   este gradiente. La columna de texto es wd_color_scheme:dark, por
   eso el fondo es oscuro y el texto va claro. */
.naccato-hero-active .wd-slider .wd-slide .wd-slide-bg.wd-fill {
	background-image: linear-gradient( 115deg, var(--color-brand-dark) 0%, var(--color-brand-primary) 62%, #2f566b 100% ) !important;
}

/* ----- Marca de agua japonesa (kanji) -----
   ::after del .wd-slide-bg (capa de fondo, sin pointer-events).
   Variante por posicion de slide (decorativa; si el carrusel clona
   slides para el loop, el clon repite el kanji, lo cual es inocuo). */
.naccato-hero-active .wd-slider .wd-slide .wd-slide-bg.wd-fill::after {
	position: absolute;
	top: 50%;
	right: 38%;
	transform: translateY(-50%);
	font-family: var(--font-japanese);
	font-weight: 700;
	font-size: clamp(180px, 34vw, 440px);
	line-height: 0.8;
	color: #ffffff;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: 0;
}
.naccato-hero-active .wd-slider .wd-slide:nth-child(1) .wd-slide-bg.wd-fill::after { content: "パン粉"; }
.naccato-hero-active .wd-slider .wd-slide:nth-child(2) .wd-slide-bg.wd-fill::after { content: "醤油"; }
.naccato-hero-active .wd-slider .wd-slide:nth-child(3) .wd-slide-bg.wd-fill::after { content: "寿司"; }

/* =========================================================
   KICKER  (1er text-editor de la columna de texto)
   Linea de acento (::before) + Manrope con tracking suave.
   ========================================================= */
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-text-editor:first-of-type p {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;   /* demo Vegetables: sin mayusculas -> tracking reducido (#1) */
	text-transform: none;
	font-size: 13px;
	line-height: 1.2;
	margin-bottom: 4px;
	color: #cfe4ee;
}
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-text-editor:first-of-type p::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

/* =========================================================
   TITULO  (wd_title -> .woodmart-title-container)
   Manrope 700, line-height ceñido, blanco (demo: sin mayusculas).
   ========================================================= */
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_title .woodmart-title-container {
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	text-transform: none !important;   /* demo Vegetables: titulos sin mayusculas (#1) */
	line-height: 1.02 !important;
	letter-spacing: 0.01em;
	margin-bottom: 18px;
	color: var(--color-text-on-brand) !important;
}

/* Subtitulo (el text-editor que sigue al titulo): legibilidad sobre el fondo
   azul. Se selecciona por sibling adyacente al wd_title — NO por :nth-of-type,
   que cuenta TODOS los div hermanos (no solo los text-editor) y no matchea. */
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_title + .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* =========================================================
   CTA  (wd_button -> a.btn)  Boton blanco, Manrope capitalize,
   flecha (::after), radius, sombra, hover con translateY.
   ========================================================= */
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_button a.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;   /* demo Vegetables: botones sin mayusculas -> tracking reducido (#1) */
	text-transform: capitalize;
	font-size: 15px;
	padding: 15px 28px !important;
	border-radius: var(--radius-md) !important;
	border: 2px solid transparent !important;
	background: #ffffff !important;
	color: var(--color-brand-dark) !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_button a.btn .wd-btn-text::after {
	content: "\2192";
	display: inline-block;
	margin-left: 10px;
	font-weight: 400;
	transition: transform var(--transition);
}
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_button a.btn:hover {
	background: var(--color-brand-pale) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28) !important;
}
.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_button a.btn:hover .wd-btn-text::after {
	transform: translateX(4px);
}

/* =========================================================
   PACKSHOT  (wd_image_or_svg -> .wd-image img)
   Sombra marcada + flotacion suave infinita (animacion CSS
   pura: no deja el elemento en opacity 0).
   ========================================================= */
.naccato-hero-active .wd-slider .wd-slide .wd-image img {
	/* Agrandar el packshot via transform:scale (no toca el layout flex de
	   Elementor, que no estira el widget): se ve mas grande llenando el espacio
	   vacio, centrado. La escala va integrada en la animacion de flotacion
	   (transform es una sola propiedad) y tambien en el estado base, para que
	   quede grande aunque la animacion este apagada (reduced-motion). 1.4x sobre
	   ~249px => ~349px. En mobile se resetea (layout apilado, ver abajo). */
	transform: scale(1.4);
	transform-origin: center center;
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.26));
	animation: naccato-hero-floaty 6s ease-in-out infinite;
	will-change: transform;
}
@keyframes naccato-hero-floaty {
	0%, 100% { transform: translateY(0) scale(1.4); }
	50%      { transform: translateY(-12px) scale(1.4); }
}

/* =========================================================
   RESPONSIVE
   Tablet <=1024px: acota el packshot, sin apilar.
   Mobile <=768px: apila a una columna, imagen arriba.
   ========================================================= */
@media (max-width: 1024px) {
	.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_image_or_svg img,
	.naccato-hero-active .wd-slider .wd-slide .wd-image img {
		max-height: 320px;
		width: auto;
	}
}

@media (max-width: 768px) {
	.naccato-hero-active .wd-slider .wd-slide .e-parent > .e-con-inner {
		flex-direction: column-reverse !important;
		flex-wrap: nowrap !important;
		gap: 4px !important;
	}
	.naccato-hero-active .wd-slider .wd-slide .e-con.e-child {
		width: 100% !important;
		--width: 100%;
	}
	.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_image_or_svg img,
	.naccato-hero-active .wd-slider .wd-slide .wd-image img {
		max-height: 240px !important;
		width: auto;
		margin-left: auto;
		margin-right: auto;
		animation: none;
		transform: none !important; /* tamano natural en el layout apilado */
	}
	.naccato-hero-active .wd-slider .wd-slide .wd-image {
		text-align: center;
	}
	.naccato-hero-active .wd-slider .wd-slide .e-parent > .e-con-inner > .e-con.e-child:first-child {
		text-align: center !important;
		align-items: center !important;
		padding: 6px 20px 28px !important;
	}
	.naccato-hero-active .wd-slider .wd-slide .wd-button-wrapper,
	.naccato-hero-active .wd-slider .wd-slide .title-wrapper,
	.naccato-hero-active .wd-slider .wd-slide .woodmart-title-container {
		text-align: center !important;
		justify-content: center !important;
	}
	.naccato-hero-active .wd-slider .wd-slide .elementor-widget-text-editor:first-of-type p {
		justify-content: center;
	}
	.naccato-hero-active .wd-slider .wd-slide .wd-slide-bg.wd-fill::after {
		font-size: clamp(120px, 38vw, 200px);
		right: 50%;
		top: 26%;
		transform: translate(50%, -50%);
		opacity: 0.06;
	}
}

@media (prefers-reduced-motion: reduce) {
	.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_button a.btn,
	.naccato-hero-active .wd-slider .wd-slide .elementor-widget-wd_button a.btn .wd-btn-text::after {
		transition: none;
	}
	.naccato-hero-active .wd-slider .wd-slide .wd-image img {
		animation: none;
	}
}