/* ============================================================
   KIT TIPOGRÁFICO: sistema-sans (default — 0 KB, 0 peticiones)
   Look moderno tipo boceto sin CDN (RGPD). Para cambiar de kit:
   sustituir SOLO este bloque por el kit.css de /font-kits/.
   PROHIBIDO font-family directos fuera de este bloque:
   siempre var(--font-titulares) / var(--font-texto).
   ============================================================ */
:root {
	--font-titulares: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body { font-family: var(--font-texto); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-titulares); }
h1, h2 { letter-spacing: -0.01em; }

/* ============================================================
   ESTILOS DE PARTIDA — sistema de temas w3-theme-* (paleta Mainpas)
   Solo cambiar valores de color, nunca los nombres de clase.
   ============================================================ */
:root {
	--a: #ff9900;       /* acento naranja Mainpas */
	--a-dark: #e88a00;  /* naranja hover */
	--d: #141414;       /* oscuro industrial */
	--soft: #f6f7f9;    /* fondo suave de sección */
	--text: #2f3a45;    /* texto general */
}
html, body { font-size: 16px; }
.menufront { color: #fff; font-weight: 700; } /* MENU FRONT (cabecera negra) */
.w3-theme-d1 .menufront:hover, .w3-theme-d1 .w3-button.menufront:hover { color: #ff9900 !important; background-color: transparent !important; } /* hover del menú sobre negro */
.titular1 { color: #141414; } /* TITULAR PRINCIPAL */
.titular2 { color: #ff9900; } /* TITULAR ACENTO */
.w3-theme-l5 { color: #141414; background-color: #ff9900 } /* BOTON CABECERA (telefono) — naranja sobre cabecera negra */
.w3-theme-l4 { color: #141414; background-color: #ff9900 } /* IDIOMA ACTIVO */
.w3-theme-l3 { color: #666; background-color: #fff } /* IDIOMA INACTIVO */
.w3-theme-l2 { color: #fff; background-color: #141414 } /* FOOTER */
.w3-theme-l1 { color: #141414; background-color: #f6f7f9 } /* BOTON FOOTER / BREADCRUMB */
.w3-theme-d1 { color: #fff; background-color: #141414 } /* MENU MOVIL */
.w3-theme-d2 { color: #ff9900; background-color: #fff } /* COLOR ICONOS */
.w3-theme-d3 { color: #fff; background-color: #141414 } /* FONDO TEXTO SLIDESHOW */
.w3-theme-d4 { color: #fff; background-color: #141414 } /* BANNER COOKIES / TITULARES DESTACADOS */
.w3-theme-d5 { color: #141414; background-color: #ff9900 } /* BOTON FORMULARIO / ACEPTAR */
.w3-theme { color: #141414; background-color: #fff } /* SECCION GENERAL */
.w3-text-theme { color: #2f3a45 } /* TEXTO GENERAL */

/* ============================================================
   COMPONENTES MAINPAS — capa propia sobre w3.css (no tocar w3.css)
   Inspirados en el boceto aprobado por la clienta.
   ============================================================ */

/* Botones tipo pastilla (pill) */
.cta-pill { border-radius: 999px !important; font-weight: 700; }
.btn-accent { background: var(--a) !important; color: #141414 !important; font-weight: 800; } /* CTA principal naranja */
.btn-accent:hover { background: var(--a-dark) !important; }
.btn-ghost:hover { border-color: var(--a) !important; color: var(--a) !important; } /* CTA secundario: acento al pasar el cursor */

/* Punto naranja decorativo de la marca */
.brand-dot { display: inline-block; width: 10px; height: 10px; border-radius: 99px; background: var(--a); margin: 0 6px; }

/* Secciones */
.section-pad { padding: 64px 16px; } /* relleno vertical estándar de sección */
.section-soft { background: var(--soft); } /* sección con fondo suave */
.section-dark { background: var(--d); color: #fff; } /* sección oscura */
.section-title { font-weight: 800; line-height: 1.15; margin: 0 0 10px; color: #141414; } /* título de sección */
.section-dark .section-title { color: #fff; }
.muted { color: var(--text); opacity: .9; } /* texto atenuado */

/* HERO con imagen de fondo */
.hero {
	min-height: 74vh;
	background: linear-gradient(115deg, rgba(0,0,0,.80), rgba(0,0,0,.30)), url('../img/secciones/hero-industrial.webp') center/cover no-repeat;
	position: relative;
}
.hero-box { max-width: 880px; color: #fff; } /* caja de texto del hero */
.kicker { display: inline-block; font-size: 12px; letter-spacing: .14em; border: 1px solid rgba(255,255,255,.25); padding: 7px 12px; border-radius: 999px; } /* etiqueta superior del hero */
.hero-h1 { font-size: clamp(30px, 3.2vw, 54px); line-height: 1.06; margin: 14px 0 10px; font-weight: 800; }
.lead { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.55; opacity: .94; margin: 0 0 18px; } /* entradilla destacada */
.hero-cards { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 880px; } /* mini-tarjetas del hero */
.hero-mini { border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 12px; background: rgba(0,0,0,.28); }
.hero-mini b { color: #fff; }
.hero-mini span { color: #fff; opacity: .85; font-size: 13px; display: block; margin-top: 4px; }

/* Tarjetas reutilizables */
.card { background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 18px; padding: 22px; box-shadow: 0 16px 36px rgba(0,0,0,.07); height: 100%; }
.card-accent { border-top: 4px solid var(--a); } /* tarjeta con borde de acento */
.card h3 { margin: 6px 0 10px; font-weight: 800; color: #141414; }
.tag { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); margin-bottom: 8px; } /* etiqueta pequeña */
.card-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,153,0,.16); border: 1px solid rgba(255,153,0,.35); color: var(--a-dark); margin-bottom: 8px; } /* recuadro de icono */
.card-icon .icono { width: 24px; height: 24px; }

/* Grid de servicios */
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.services-grid .card { display: flex; flex-direction: column; }
.services-grid .card .card-cta { margin-top: auto; } /* CTA siempre al fondo de la tarjeta */

/* Cifras destacadas (stats) */
.stat-num { font-size: 38px; font-weight: 800; line-height: 1; color: #fff; }
.stat-txt { opacity: .85; margin-top: 6px; }

/* Lista con marca de verificación */
.check-list { list-style: none; padding-left: 0; margin: 12px 0; }
.check-list li { padding: 6px 0 6px 28px; position: relative; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,153,0,.18); border: 1px solid var(--a); }

/* Imagen redondeada de bloque */
.img-rounded { width: 100%; border-radius: 16px; box-shadow: 0 14px 32px rgba(0,0,0,.10); display: block; }

/* Separadores verticales */
.section-spacer { height: 48px; }
.section-spacer-sm { height: 16px; }

/* Icono SVG inline del sprite (/img/icons.svg) */
.icono { width: 1em; height: 1em; vertical-align: -0.125em; }
.icono-xl { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }

/* ============================================================
   FX — KIT visor-cad (design-kits/_lab/visor-cad-hotspots · CSS puro)
   Visor tipo CAD del hero: viewports por radio+:checked, hotspots
   con tooltip :hover/:focus, plano autodibujado (pathLength).
   ============================================================ */
.fx-cad { width: 100%; }
.fx-cad input { position: absolute; opacity: 0; pointer-events: none; }
.fx-cad-marco { position: relative; background: #101418; border-radius: 12px; overflow: hidden;
	border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 50px rgba(0,0,0,.45);
	background-image:
		linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
		linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
	background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px; }
.fx-cad-barra { display: flex; gap: 8px; align-items: center; padding: 10px 12px;
	border-bottom: 1px solid rgba(255,255,255,.09); }
.fx-cad-barra span { color: #9fb4c7; font-size: .68rem; letter-spacing: .12em; margin-right: auto; }
.fx-cad-barra label { color: #9fb4c7; font-size: .75rem; letter-spacing: .08em; padding: 6px 14px;
	border: 1px solid rgba(255,255,255,.18); border-radius: 6px; cursor: pointer; transition: all .2s; user-select: none; }
.fx-cad-barra label:hover { color: #fff; border-color: var(--a); }
#v-perfil:checked ~ .fx-cad-marco label[for="v-perfil"],
#v-frontal:checked ~ .fx-cad-marco label[for="v-frontal"] {
	background: var(--a); color: #141414; border-color: var(--a); font-weight: 700; }
.fx-cad-lienzo { position: relative; aspect-ratio: 800/470; }
.fx-cad-vista { position: absolute; inset: 0; opacity: 0; transform: scale(.97); visibility: hidden;
	transition: opacity .45s ease, transform .45s ease, visibility .45s; }
#v-perfil:checked ~ .fx-cad-marco .fx-vista-perfil,
#v-frontal:checked ~ .fx-cad-marco .fx-vista-frontal { opacity: 1; transform: scale(1); visibility: visible; }
.fx-cad-vista svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-trz { fill: none; stroke: var(--a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1; stroke-dashoffset: 1;
	animation: fx-dibujar 1.1s cubic-bezier(.6,0,.3,1) forwards; animation-delay: var(--d,0s); }
.fx-trz--fina { stroke-width: 1.8; stroke: #ffb84d; }
.fx-cota { stroke: #68809a; stroke-width: 1.4; }
.fx-texto-cad { fill: #9fb4c7; font-size: 13px; letter-spacing: .08em; font-family: ui-monospace, Consolas, monospace; }
.fx-texto-cad--titulo { fill: #e8f0f7; font-size: 14px; }
@keyframes fx-dibujar { to { stroke-dashoffset: 0 } }
.fx-punto { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
	width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--a);
	background: rgba(255,153,0,.25); cursor: pointer; padding: 0; }
.fx-punto::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--a); }
.fx-punto::after { content: ''; position: absolute; inset: -7px; border-radius: 50%;
	border: 2px solid rgba(255,153,0,.55); animation: fx-pulso 1.8s ease-out infinite; }
@keyframes fx-pulso { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
.fx-tip { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
	width: max-content; max-width: 32ch; background: #fff; color: #141414; text-align: left;
	font-size: .8rem; line-height: 1.45; padding: 10px 14px; border-radius: 8px;
	border-left: 4px solid var(--a); box-shadow: 0 10px 30px rgba(0,0,0,.45);
	opacity: 0; visibility: hidden; transition: all .25s; pointer-events: none; z-index: 5; }
.fx-tip b { display: block; margin-bottom: 2px; }
.fx-punto:hover .fx-tip, .fx-punto:focus .fx-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.fx-punto--izq .fx-tip { left: 0; transform: translateX(-8%) translateY(6px); }
.fx-punto--izq:hover .fx-tip, .fx-punto--izq:focus .fx-tip { transform: translateX(-8%) translateY(0); }

/* ============================================================
   FX — KIT hero-foto-cinematica (design-kits/_lab · CSS puro)
   Franja "tipo vídeo": fotos con paneo/zoom (Ken Burns) + fundido
   encadenado + rótulos sincronizados. Ciclo 24 s (4 fotos × 6 s).
   ============================================================ */
.fx-kb { position: relative; height: 62vh; min-height: 380px; overflow: hidden; border-radius: 18px; }
.fx-kb--full { height: 100vh; min-height: 0; border-radius: 0; }
.fx-kb-capa { position: absolute; inset: 0; opacity: 0; animation: fx-kb-fundido 24s infinite; }
.fx-kb-capa img { width: 100%; height: 100%; object-fit: cover; }
.fx-kb-capa:nth-child(1) { opacity: 1; animation-name: fx-kb-primera; }
.fx-kb-capa:nth-child(2) { animation-delay: 6s; }
.fx-kb-capa:nth-child(3) { animation-delay: 12s; }
.fx-kb-capa:nth-child(4) { animation-delay: 18s; }
@keyframes fx-kb-primera { 0%{opacity:1} 25%{opacity:1} 29.2%{opacity:0} 95.8%{opacity:0} 100%{opacity:1} }
@keyframes fx-kb-fundido { 0%{opacity:0} 4.2%{opacity:1} 25%{opacity:1} 29.2%{opacity:0} 100%{opacity:0} }
.fx-kb-capa:nth-child(1) img { animation: fx-kb-zoom 24s linear infinite; }
.fx-kb-capa:nth-child(2) img { animation: fx-kb-sube 24s linear infinite 6s; transform: scale(1.16); }
.fx-kb-capa:nth-child(3) img { animation: fx-kb-aleja 24s linear infinite 12s; transform: scale(1.14); }
.fx-kb-capa:nth-child(4) img { animation: fx-kb-lado 24s linear infinite 18s; transform: scale(1.15); }
@keyframes fx-kb-zoom  { 0%{transform:scale(1.02)} 33%{transform:scale(1.14)} 100%{transform:scale(1.14)} }
@keyframes fx-kb-sube  { 0%{transform:scale(1.16) translateY(3.5%)} 33%{transform:scale(1.16) translateY(-3.5%)} 100%{transform:scale(1.16) translateY(-3.5%)} }
@keyframes fx-kb-aleja { 0%{transform:scale(1.14)} 33%{transform:scale(1.03)} 100%{transform:scale(1.03)} }
@keyframes fx-kb-lado  { 0%{transform:scale(1.15) translateX(-3%)} 33%{transform:scale(1.15) translateX(3%)} 100%{transform:scale(1.15) translateX(3%)} }
.fx-kb-scrim { position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,20,.42), rgba(20,20,20,.12) 45%, rgba(20,20,20,.68)); }
.fx-kb-texto { position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; padding: 24px; color: #fff; }
.fx-kb-texto .section-title { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.6); }
.fx-kb-rotulos { position: absolute; left: 20px; bottom: 20px; }
.fx-kb-rotulo { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0;
	animation: fx-kb-rotulo 24s infinite; background: rgba(20,20,20,.72); color: #fff;
	border-left: 4px solid var(--a); padding: 8px 14px; border-radius: 6px; font-size: .82rem; letter-spacing: .06em; }
@keyframes fx-kb-rotulo { 0%{opacity:0} 1.5%{opacity:1} 24.5%{opacity:1} 26%{opacity:0} 100%{opacity:0} }
@keyframes fx-kb-rotulo-primera { 0%{opacity:1} 24.5%{opacity:1} 26%{opacity:0} 98.5%{opacity:0} 100%{opacity:1} }
.fx-kb-rotulo:nth-child(1) { opacity: 1; animation-name: fx-kb-rotulo-primera; }
.fx-kb-rotulo:nth-child(2) { animation-delay: 6s; }
.fx-kb-rotulo:nth-child(3) { animation-delay: 12s; }
.fx-kb-rotulo:nth-child(4) { animation-delay: 18s; }

/* Gate de accesibilidad de los kits FX (regla inamovible) */
@media (prefers-reduced-motion: reduce) {
	.fx-trz { animation: none; stroke-dashoffset: 0 }
	.fx-punto::after { animation: none; opacity: 0 }
	.fx-cad-vista, .fx-cad-barra label, .fx-tip { transition: none }
	.fx-kb-capa, .fx-kb-capa img, .fx-kb-rotulo { animation: none }
	.fx-kb-capa:nth-child(n+2), .fx-kb-rotulo:nth-child(n+2) { opacity: 0 }
	.fx-kb-capa img { transform: none }
}

/* ============================================================
   MEDIA QUERIES — orden: 992 → 768 → 600
   ============================================================ */
@media (max-width: 992px) {
	html, body { font-size: 15px; }
	h1 { font-size: 32px } h2 { font-size: 26px } h3 { font-size: 20px } h4 { font-size: 16px }
	.w3-large { font-size: 16px !important } .w3-xlarge { font-size: 20px !important } .w3-xxlarge { font-size: 32px !important } .w3-xxxlarge { font-size: 44px !important } .w3-jumbo { font-size: 60px !important }
	.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	h1 { font-size: 24px } h2 { font-size: 20px } h3 { font-size: 17px }
	.w3-xlarge { font-size: 18px !important } .w3-xxlarge { font-size: 24px !important } .w3-xxxlarge { font-size: 26px !important } .w3-jumbo { font-size: 40px !important }
	.section-pad { padding: 48px 16px; }
	.hero { min-height: 70vh; }
	.hero-cards { grid-template-columns: 1fr; }
	.services-grid { grid-template-columns: 1fr; }
	body { padding-bottom: 64px; } /* hueco para el footer fijo en móvil */
}

@media (max-width: 600px) {
	.hero-box { max-width: 100%; }
}