/* Talleres Criado - estilo industrial sobrio (claro). Bootstrap 5.3. */

/* Cache-bust de las fuentes Font Awesome 5 Pro (sobreescribe el src del kit
   con un querystring para forzar la descarga fresca y evitar woff2 cacheados). */
@font-face {
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("/css/fontawesome/webfonts/fa-solid-900.woff2?v=2") format("woff2"),
	     url("/css/fontawesome/webfonts/fa-solid-900.woff?v=2")  format("woff");
}
@font-face {
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("/css/fontawesome/webfonts/fa-regular-400.woff2?v=2") format("woff2"),
	     url("/css/fontawesome/webfonts/fa-regular-400.woff?v=2")  format("woff");
}
@font-face {
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-weight: 300;
	font-display: block;
	src: url("/css/fontawesome/webfonts/fa-light-300.woff2?v=2") format("woff2"),
	     url("/css/fontawesome/webfonts/fa-light-300.woff?v=2")  format("woff");
}
@font-face {
	font-family: "Font Awesome 5 Duotone";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("/css/fontawesome/webfonts/fa-duotone-900.woff2?v=2") format("woff2"),
	     url("/css/fontawesome/webfonts/fa-duotone-900.woff?v=2")  format("woff");
}
@font-face {
	font-family: "Font Awesome 5 Brands";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("/css/fontawesome/webfonts/fa-brands-400.woff2?v=2") format("woff2"),
	     url("/css/fontawesome/webfonts/fa-brands-400.woff?v=2")  format("woff");
}

:root {
	--criado-bg:        #ffffff;
	--criado-bg-soft:   #f5f6f8;
	--criado-line:      #e5e7eb;
	--criado-text:      #1e2530;
	--criado-muted:     #6b7280;
	--criado-accent:    #FF8E00; /* naranja corporativo ya usado en la web */
	--criado-secondary: #0066CC; /* azul secundario existente */
}

html { scroll-behavior: smooth; }

/* --- ANIMACIONES ---------------------------------------------- */
@keyframes criado-fade-up   { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes criado-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes criado-fade-left { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes criado-fade-right{ from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes criado-scale-in  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes criado-dropdown  { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }

.reveal              { opacity: 0; will-change: opacity, transform; }
.reveal.is-visible   { animation: criado-fade-up   .8s cubic-bezier(.22,.61,.36,1) both; }
.reveal--left.is-visible  { animation: criado-fade-left  .8s cubic-bezier(.22,.61,.36,1) both; }
.reveal--right.is-visible { animation: criado-fade-right .8s cubic-bezier(.22,.61,.36,1) both; }
.reveal--scale.is-visible { animation: criado-scale-in   .7s cubic-bezier(.22,.61,.36,1) both; }
.reveal--fade.is-visible  { animation: criado-fade-in    .7s ease both; }

/* Staggering por orden del elemento (data-stagger) */
.reveal[data-stagger="1"].is-visible { animation-delay: .08s; }
.reveal[data-stagger="2"].is-visible { animation-delay: .16s; }
.reveal[data-stagger="3"].is-visible { animation-delay: .24s; }
.reveal[data-stagger="4"].is-visible { animation-delay: .32s; }
.reveal[data-stagger="5"].is-visible { animation-delay: .40s; }
.reveal[data-stagger="6"].is-visible { animation-delay: .48s; }
.reveal[data-stagger="7"].is-visible { animation-delay: .56s; }
.reveal[data-stagger="8"].is-visible { animation-delay: .64s; }

@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal.is-visible { animation: none !important; opacity: 1 !important; transform: none !important; }
}

body {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--criado-text);
	background-color: var(--criado-bg);
}

/* --- HERO (video limpio, sin texto encima) ------------------- */
.criado-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
	line-height: 0;
}
.criado-hero video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- MENU (Bootstrap 5 + tuneo) ------------------------------ */
.menugormatica {
	background: #fff !important;
	box-shadow: 0 1px 0 var(--criado-line), 0 8px 28px rgba(30, 37, 48, .04);
	padding: .25rem 0;
}
.menugormatica .navbar {
	padding: .5rem 0;
}
.menugormatica .navbar-brand img {
	max-height: 56px;
	width: auto;
	transition: opacity .2s ease;
}
.menugormatica .navbar-brand:hover img { opacity: .85; }

/* Quita el border-right entre items que mete la clase por defecto */
.menugormatica .nav-item:not(:last-child) { border-right: 0 !important; }

/* Links */
.menugormatica .nav-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: 1.1rem 1.1rem !important;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--criado-text) !important;
	position: relative;
	transition: color .2s ease;
}
/* Garantiza que el <div> que envuelve el texto del item no genere salto de linea */
.menugormatica .nav-link > div { display: inline; }
.menugormatica .nav-link:hover,
.menugormatica .nav-link.active {
	color: var(--criado-accent) !important;
}
.menugormatica .nav-link.active::after { transform: scaleX(1); }
/* Quita el subrayado/borde feo que mete .menugormatica por defecto */
.menugormatica .nav-link div { padding-bottom: 0 !important; border-bottom: 0 !important; }
.menugormatica .nav-link.active div { border-bottom: 0 !important; }
/* Subrayado animado (debajo del texto, no atravesandolo) */
.menugormatica .nav-link::after {
	content: ""; position: absolute;
	left: 1.1rem; right: 1.1rem; bottom: 0;
	height: 3px; background: var(--criado-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform .25s ease;
}
.menugormatica .nav-link:hover::after,
.menugormatica .nav-link.active::after { transform: scaleX(1); }
/* En el menu desktop quitamos el text-decoration por si BS/algun reset lo aplica */
.menugormatica .nav-link,
.menugormatica .nav-link:hover { text-decoration: none !important; }

/* Indicador (chevron FA) en items con submenu */
.menugormatica .nav-link.dropdown-toggle::before {
	content: "\f078"; /* fa-chevron-down */
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	font-size: .65rem;
	margin-right: .4rem;
	vertical-align: 1px;
	color: var(--criado-accent);
	transition: transform .25s ease;
	display: inline-block;
}
.menugormatica .dropdown:hover .nav-link.dropdown-toggle::before,
.menugormatica .nav-item.show .nav-link.dropdown-toggle::before {
	transform: rotate(-180deg);
}
/* Oculta el caret nativo de Bootstrap (la flecha cuadrada) */
.menugormatica .dropdown-toggle::after { display: none !important; }

/* Dropdown */
.menugormatica .dropdown-menu {
	border: 0;
	border-radius: 0;
	box-shadow: 0 16px 40px rgba(30, 37, 48, .12);
	padding: .5rem 0;
	margin-top: 0 !important;
	min-width: 240px;
}
.menugormatica .dropdown-menu.show {
	animation: criado-dropdown .22s ease both;
}
.menugormatica .dropdown-item {
	padding: .65rem 1.25rem;
	font-size: .9rem;
	font-weight: 500;
	color: var(--criado-text);
	transition: background .15s ease, color .15s ease, padding-left .2s ease;
}
.menugormatica .dropdown-item:hover,
.menugormatica .dropdown-item:focus {
	background: var(--criado-bg-soft);
	color: var(--criado-accent);
	padding-left: 1.6rem;
}
.menugormatica .dropdown-item.active {
	background: transparent;
	color: var(--criado-accent);
	font-weight: 700;
}

/* Offcanvas (móvil) */
.menugormatica .navbar-toggler {
	border: 1px solid var(--criado-line);
	padding: .4rem .7rem;
}
.menugormatica .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 142, 0, .15); }
.menugormatica .offcanvas-title { font-weight: 700; }
@media (max-width: 991.98px) {
	.menugormatica .nav-link::after { display: none; }
	.menugormatica .nav-link { padding: .85rem 0 !important; border-bottom: 1px solid var(--criado-line); }
}

/* --- TOPBAR ---------------------------------------------------- */
.criado-topbar {
	background: #f0f1f3;
	color: var(--criado-muted);
	font-size: .85rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--criado-line);
}
.criado-topbar a { color: var(--criado-muted); text-decoration: none; }
.criado-topbar a:hover { color: var(--criado-text); }

/* --- SECCIONES GENERICAS ------------------------------------- */
.criado-section { padding: 5.5rem 0; }
.criado-section--soft { background: var(--criado-bg-soft); }
.criado-section h2 {
	font-family: "Montserrat Alternates", "Montserrat", sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--criado-text);
	margin-bottom: 1.25rem;
}
.criado-section h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}
.criado-section p.lead {
	color: var(--criado-muted);
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
	margin-bottom: 2.5rem;
}
.criado-eyebrow {
	display: inline-block;
	font-size: .8rem; letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--criado-accent);
	font-weight: 700;
	margin-bottom: .75rem;
}

/* --- PRODUCTOS (icono + texto al lado) ------------------------ */
.criado-producto-item {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--criado-line);
	background: #fff;
	color: var(--criado-text);
	text-decoration: none;
	height: 100%;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.criado-producto-item:hover {
	border-color: var(--criado-accent);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(30, 37, 48, .08);
	color: var(--criado-text);
}
.criado-producto-item .ico {
	flex: 0 0 auto;
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 142, 0, .1);
	color: var(--criado-accent);
	font-size: 1.7rem;
	border-radius: 2px;
	transition: background .25s ease, color .25s ease;
}
.criado-producto-item:hover .ico {
	background: var(--criado-accent);
	color: #fff;
}
.criado-producto-item .txt {
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.25;
}

/* --- BANNER SOLDADURA (parallax JS) -------------------------- */
.criado-banner {
	position: relative;
	min-height: 460px;
	display: flex; align-items: center;
	overflow: hidden;
	color: #fff;
	padding: 7rem 0;
}
.criado-banner-bg {
	position: absolute; inset: -10% 0;
	background-image:
		linear-gradient(120deg, rgba(8,10,14,.78), rgba(8,10,14,.45)),
		url("/images/soldadura.jpg"),
		url("/images/page-02_bg-01.jpg"); /* fallback si no existe soldadura.jpg */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
}
.criado-banner > .container { position: relative; z-index: 2; max-width: 900px; }
.criado-banner h2 {
	color: #fff;
	font-size: clamp(2.4rem, 5.5vw, 4.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.025em;
	margin-bottom: 1.25rem;
}
.criado-banner .lead-banner {
	color: rgba(255,255,255,.88);
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	max-width: 720px;
	margin: 0;
}

/* --- DESARROLLO / PARALLAX ----------------------------------- */
.criado-parallax {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: 7rem 0;
	background-color: #11161d;
}
.criado-parallax::before {
	content: ""; position: absolute; inset: -10% 0;
	background-image:
		linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.75)),
		url("/images/page-01_bg-02.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
	transform: translate3d(0, var(--p-offset, 0), 0);
	z-index: 1;
}
.criado-parallax > .container { position: relative; z-index: 2; }
.criado-parallax h2 {
	color: #fff;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
}
.criado-parallax h3 {
	color: var(--criado-accent);
	font-weight: 600;
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	margin-bottom: 1rem;
}
.criado-parallax .lead-parallax {
	font-size: 1.15rem;
	color: rgba(255,255,255,.92);
	margin-top: 1rem;
}
.criado-parallax p { color: rgba(255,255,255,.78); }
.criado-index-list {
	list-style: none; padding: 0; margin: 0;
}
.criado-index-list li {
	padding: 1.25rem 0 1.25rem 2rem;
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,.15);
}
.criado-index-list li:last-child { border-bottom: 0; }
.criado-index-list li::before {
	content: ""; position: absolute; left: 0; top: 1.7rem;
	width: 14px; height: 14px;
	background: var(--criado-accent);
}
.criado-index-list li h4 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 600;
	line-height: 1.4;
}

/* --- ESPECIALIZADOS ------------------------------------------ */
.criado-especializados img { width: 100%; height: auto; display: block; }

/* --- NOTICIAS ------------------------------------------------ */
.criado-news {
	background: #fff;
	border: 1px solid var(--criado-line);
	height: 100%;
	display: flex; flex-direction: column;
	transition: box-shadow .25s ease, transform .25s ease;
}
.criado-news:hover {
	box-shadow: 0 12px 32px rgba(30, 37, 48, .08);
	transform: translateY(-3px);
}
.criado-news .img {
	aspect-ratio: 16 / 10; overflow: hidden; background: #f5f6f8;
}
.criado-news .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.criado-news:hover .img img { transform: scale(1.04); }
.criado-news .body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.criado-news .fecha {
	font-size: .75rem; letter-spacing: .15em; text-transform: uppercase;
	color: var(--criado-secondary);
}
.criado-news h3 {
	font-size: 1.1rem; font-weight: 700; margin: .6rem 0 .4rem; color: var(--criado-text);
}
.criado-news h3 a { color: inherit; text-decoration: none; }
.criado-news h3 a:hover { color: var(--criado-accent); }
.criado-news p.lead { color: var(--criado-muted); font-size: .95rem; margin: 0; }

/* --- FOOTER (sobre el bg oscuro #272d33 de style.css) ------ */
footer, footer p, footer a { color: #cfd5dc; }
footer a:not(.rights):hover { color: var(--criado-accent); }
footer h3 { color: #fff; }
.footer-cnt .copyright { color: #98a2b3; }
.footer-cnt .copyright a:not(.rights) { color: #98a2b3; }

/* --- FEDER --------------------------------------------------- */
.criado-feder {
	border: 1px solid var(--criado-line);
	padding: 2rem;
	color: var(--criado-text);
	background: #fff;
}
.criado-feder h3 {
	color: var(--criado-text);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.criado-feder .box {
	border: 1px solid var(--criado-line);
	padding: 1rem 1.25rem;
	margin: 1rem 0;
}