/* ======================================================
   HERO SOBRE SLIDER (LEGACY SAFE)
====================================================== */
.hero {position: relative;width: 100%;min-height: 520px;overflow: hidden;margin: 0;padding: 0;font-family: "Roboto"}
/* Slider legacy como fondo */
.hero .contenedor-ban {position: absolute;inset: 0;width: 100%;max-width: none;margin: 0;padding: 0;z-index: 1;}
.hero .slideshow, .hero .contenedor-banner, .hero .Panel, .hero .slider, .hero .slider li {width: 100%;height: 100%;margin: 0;padding: 0;}
.hero .slider img {width: 100%;height: 100%;object-fit: cover;}
/* =========================
   SLIDER FULL-WIDTH EN HERO
========================= */
.hero .slider li img {width: 100%;height: 100%;object-fit: cover;}
/* Overlay HERO */
.hero-overlay {position: absolute;inset: 0;z-index: 2;display: flex;align-items: center;background: linear-gradient(to right,rgba(58, 63, 68, 0.80),rgba(64, 70, 76, 0.55),rgba(0, 45, 90, 0.20));}
.hero-overlay__inner {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 16px;}
/* Contenido HERO */
.hero-content {max-width: 1200px;margin:60px;padding: 0 16px;color: #fff;pointer-events: auto;}
.hero-content h1 {max-width: 680px;font-size: clamp(34px, 4.2vw, 56px);font-weight: 600;line-height: 1.1;letter-spacing: -0.02em;margin-bottom: 16px;}
.hero-content p {max-width: 560px;font-size: 17px;font-weight: 300;line-height: 1.5;opacity: 0.95;margin-bottom: 28px;}
/* Botones HERO */
.hero-actions {display: flex;gap: 16px;}
.hero-actions a{text-decoration: none;}
.btn-hero {padding: 12px 26px;font-size: 15px;font-weight: 400;letter-spacing: 0.02em;}
.btn-hero.primary {background: #f26522;color: #fff;border-radius: 5px;}
.btn-hero.secondary {border: 1.5px solid #fff;color: #fff;border-radius: 5px;}
/* =========================
   SLIDER CONTROLS (MOTION)
========================= */
.hero .motion {position: absolute;inset: 0;width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;pointer-events: none;z-index: 3;}
.hero .left, .hero .right {position: absolute;top: 50%;transform: translateY(-50%);pointer-events: auto;font-size: 26px;cursor: pointer;}
.hero .left { left: 2%; }
.hero .right { right: 2%; }
.hero .left i, .hero .right i {padding: 14px 10px;color: #fff;border: 1px solid rgba(255, 255, 255, 0);}
.hero .left:hover i, .hero .right:hover i{background: rgba(242, 101, 34, 0.25);border-color: rgba(242, 101, 34, 0.8);border: 1px solid rgba(118,118,118,0.6);border-radius: 8px;}
.hero .pagination {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);display: flex;gap: 8px;z-index: 4;pointer-events: auto;}
.hero .pagination li {list-style: none;font-size: 22px;color: #c6c6c6;cursor: pointer;padding: 10px;letter-spacing: -2px;}
.hero .pagination li.active {color: #f26522;}
/* =========================
   HOME CATEGORIES
========================= */
.home-categories {padding: 80px 0 90px;background: #fff;font-family: "Roboto"}
.home-categories__container {max-width: 1200px;margin: 0 auto;padding: 0 16px;}
.home-categories__header {max-width: 640px;margin-bottom: 48px;}
.home-categories__header h2 {font-size: 32px;font-weight: 400;margin-bottom: 12px;}
.home-categories__header p {font-size: 17px;line-height: 1.5;color: #555;}
/* Grid */
.home-categories__grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;}
/* Cards */
.category-card {display: flex;flex-direction: column;gap: 12px;padding: 28px 24px;border: 1px solid #e5e5e5;border-radius: 8px;text-decoration: none;color: inherit;background: #fff;transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.category-card:hover {border-color: #f26522;box-shadow: 0 12px 28px rgba(0,0,0,.08);transform: translateY(-4px);}
.category-card__icon img {width: 40px;height: 40px;}
.category-card h3 {font-size: 18px;font-weight: 400;}
.category-card p {font-size: 15px;line-height: 1.5;color: #555;flex-grow: 1;}
.category-card__cta {margin-top: 8px;font-size: 14px;font-weight: 500;color: #f26522;}
/* =========================
   BRAND SECTION
========================= */
.brand-section {background: #fafafa;padding: 64px 0;overflow: hidden;font-family: "Roboto"}
.brand-container {max-width: 1200px;margin: 0 auto;padding: 0 16px;}
.brand-header {text-align: center;margin-bottom: 40px;}
.brand-header h2 {font-size: 28px;font-weight: 400;margin-bottom: 8px;}
.brand-header p {font-size: 15px;color: #666;}
/* =========================
   SLIDER
========================= */
.brand-slider {position: relative;width: 100%;overflow: hidden;}
.brand-track {display: flex;gap: 64px;width: max-content;animation: scroll-brands 40s linear infinite;}
/* Pausa al hover */
.brand-slider:hover .brand-track {animation-play-state: paused;}
@keyframes scroll-brands {
  from {transform: translateX(0);}
  to {transform: translateX(-50%);}
}
/* =========================
   BRAND ITEM
========================= */
.brand-item {display: flex;align-items: center;justify-content: center;min-width: 140px;}
.brand-item img {max-height: 64px;width: auto;filter: grayscale(100%) brightness(0.9);opacity: 0.65;transition: filter 0.3s ease, opacity 0.3s ease;}
/* Hover: color real */
.brand-item:hover img {filter: none;opacity: 1;}
/* =========================
   ABOUT HOME
========================= */
.about-home {background: #fff;padding: 80px 0;}
.about-container {max-width: 900px;margin: 0 auto;padding: 0 16px;text-align: center;}
.about-eyebrow {display: block;font-size: 14px;letter-spacing: 0.08em;text-transform: uppercase;color: #888;  margin-bottom: 8px;}
.about-header h2 {font-size: 36px;font-weight: 600;margin-bottom: 32px;}
.about-content p {font-size: 16px;line-height: 1.7;color: #444;margin-bottom: 20px;}
.about-highlight {margin-top: 32px;font-size: 16px;font-weight: 500;color: #222;}
/* =========================
   INTRO HOME
========================= */
.home-intro {padding: 72px 16px;background: #ffffff;font-family: "Roboto"}
.intro-wrapper {max-width: 760px;margin: 0 auto;text-align: center;}
.intro-eyebrow {display: block;font-size: 12px;letter-spacing: 1px;text-transform: uppercase;color: #6b7280;margin-bottom: 8px;}
.intro-title {font-size: 36px;margin-bottom: 24px;color: #111827;font-weight: 400}
.intro-text p {font-size: 16px;line-height: 1.6;color: #374151;margin-bottom: 16px;text-align: justify}
.intro-highlight {margin-top: 24px;font-size: 15px;color: #111827;}
.home-intro::after {content: "";display: block;width: 80px;height: 2px;background: #e5e7eb;margin: 40px auto 0;}
/* =========================
   HOME – SERVICES
========================= */
.home-services {background: #fbfbfb;padding: 80px 0;font-family: "Roboto"}
.services-container {max-width: 1200px;margin: 0 auto;padding: 0 16px;}
.services-header {max-width: 640px;margin-bottom: 48px;}
.services-header h2 {font-size: 32px;font-weight: 400;margin-bottom: 12px;}
.services-header p {font-size: 16px;color: #666;line-height: 1.5;}
.services-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;}
.service-card {background: #fff;border: 1px solid #e5e5e5;border-radius: 6px;padding: 28px;}
.service-card h3 {font-size: 18px;margin-bottom: 12px;font-weight: 400;}
.service-card p {font-size: 14px;color: #555;line-height: 1.5;}
/* CTA */
.services-cta {margin-top: 48px;}
.btn-secondary {display: inline-block;padding: 12px 22px;border: 2px solid #f26522;color: #f26522;text-decoration: none;font-weight: 400;border-radius: 4px;}
/* =========================
   CTA FINAL
========================= */
.home-cta {background: linear-gradient(135deg,#0a5ea8 0%,#084c88 100%);color: #fff;padding: 96px 16px;font-family: "Roboto"}
.cta-container {max-width: 900px;margin: 0 auto;text-align: center;}
.cta-container h2 {font-size: clamp(28px, 3vw, 40px);margin-bottom: 16px;line-height: 1.2;font-weight: 400;}
.cta-container p {font-size: 18px;max-width: 720px;margin: 0 auto 32px;opacity: 0.95;font-weight: 300;}
.cta-btn {display: inline-block;background: #f26522;color: #fff;padding: 14px 32px;font-size: 16px;font-weight: 400;text-decoration: none;border-radius: 6px;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.cta-btn:hover {transform: translateY(-2px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);}
/* =========================
   PRODUCTO DESTACADO
========================= */
.producto-destacado {background: #f3f5f7;color: #1f2933;padding: 72px 16px;font-family: "Roboto"}
.producto-wrap {max-width: 1100px;margin: 0 auto;}
.producto-header {text-align: center;margin-bottom: 40px;}
.producto-eyebrow {font-size: 12px;letter-spacing: 1px;opacity: 0.7;text-transform: uppercase;}
.producto-header h2 {color: #0a5ea8;font-size: 32px;margin-top: 8px;font-weight: 400;}
/* Grid */
.producto-grid {display: grid;grid-template-columns: 45% 55%;gap: 40px;align-items: center;}
/* Imagen */
.producto-media img {box-shadow: 0 8px 24px rgba(0,0,0,0.08);width: 100%;max-width: 360px;margin: 0 auto;display: block;border-radius: 16px;background: #ffffff;padding: 0;}
/* Texto */
.producto-info ul {padding-left: 18px;margin-bottom: 24px;}
.producto-info li {color: #374151;margin-bottom: 10px;line-height: 1.4;}
/* CTA */
.producto-cta .btn.primary {background: #f26522;color: #fff;padding: 12px 22px;border-radius: 6px;text-decoration: none;font-weight: 600;}
/* =========================
   BLOG TÉCNICO
========================= */
.seccion-blog {padding: 80px 16px;background: #fff;font-family: "Roboto"}
.blog-header {max-width: 1200px;margin: 0 auto 40px;text-align: center;}
.blog-header h2 {font-size: 32px;margin-bottom: 8px;font-weight: 400;}
.blog-header p {color: #666;font-size: 16px;}
/* Contenedor principal */
.blog-feature {  max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr;gap: 40px;align-items: center;}
/* Imagen */
.blog-media {position: relative;border-radius: 16px;overflow: hidden;}
.blog-media img {width: 100%;display: block;transition: transform 0.4s ease;}
.blog-media:hover img {transform: scale(1.05);}
.blog-arrow {  position: absolute;bottom: 16px;right: 16px;background: #f26522;color: #fff;width: 40px;height: 40px;border-radius: 50%;display: grid;place-items: center;font-size: 20px;}
/* Texto */
.blog-content {max-width: 520px;}
.blog-category {display: inline-block;font-size: 13px;text-transform: uppercase;color: #f26522;margin-bottom: 8px;font-weight: 300;}
.blog-content h3 {font-size: 24px;margin-bottom: 12px;font-weight: 400;}
.blog-content p {font-size: 16px;color: #444;line-height: 1.5;margin-bottom: 20px;font-weight: 400;}
.blog-more {color: #f26522;text-decoration: none;font-weight: 500;}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
    .home-categories__grid {grid-template-columns: repeat(2, 1fr);}
    .services-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 900px) {
        /* HERO móvil */
    .hero {min-height: auto;}
    .hero-overlay {padding: 32px 0;}
    .hero-overlay__inner{margin: 0;}
    .hero .contenedor-ban {position: relative;height: 300px;margin: 0;padding: 0}
    .hero-content {text-align: left;margin: 0;}
    .hero-content h1{margin-top: 15px}
    .hero-actions {flex-direction: column;gap: 12px;}
    .hero .left, .hero .right {display: none;}
    .hero .pagination {bottom: 0;margin: 0;display: none}    
    .producto-grid {grid-template-columns: 1fr;text-align: center;}
    .producto-header {text-align: left;}
    .producto-media {order: -1;}
    .blog-feature {grid-template-columns: 1fr;gap: 24px;}
    .producto-info ul {text-align: left;display: inline-block;}    
}
@media (max-width: 768px) {
    .brand-track {gap: 41px;}
    .brand-item img {max-height: 40px;}
    .about-home {padding: 56px 0;}
    intro-wrapper {text-align: left;}
    .about-header h2 {font-size: 28px;}
    .home-cta {padding: 72px 16px;}
    .cta-container p {font-size: 16px;}
}
@media (max-width: 640px) {
  .home-categories {padding: 60px 0;}
  .home-categories__grid {grid-template-columns: 1fr;}
}
@media (max-width: 600px) {
  .services-grid {grid-template-columns: 1fr;}
}