/* ========================================================================= Custom overrides — kept separate from theme files for easy maintenance. Loaded last in , after the original frontend stylesheets. ========================================================================= */ /* -------------------------------------------------------------------------- Navbar breakpoint: The original theme switched to the burger menu at <=1199px (laptops!). We want the full horizontal nav on laptops/desktops, burger only on tablet portrait and below (<=991px). -------------------------------------------------------------------------- */ @media (min-width: 992px) { .site-header .site-menu, .site-header .site-header-widget { display: block !important; } .site-header .navbar-toggle { display: none !important; } } @media (max-width: 991px) { .site-header .site-menu, .site-header .site-header-widget { display: none !important; } .site-header .navbar-toggle { display: block !important; } } /* Make sure the burger sits inside the header on small viewports */ @media (max-width: 991px) { .site-header .navbar-toggle { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); z-index: 10; } } /* -------------------------------------------------------------------------- Home slider — full viewport height, no gap with the next section -------------------------------------------------------------------------- */ .rev_slider_wrapper, #slider1.rev_slider, #slider1 .tp-revslider-mainul, #slider1 .tp-revslider-slidesli { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } /* The header sits on top of the slide (transparent header) so the slide really fills the viewport from y=0 to y=100vh. */ .rev_slider_wrapper { margin-bottom: 0 !important; } /* -------------------------------------------------------------------------- Off-canvas mobile menu — tipografía y bandera de idioma -------------------------------------------------------------------------- */ .primary-mobile-nav ul.menu li a { font-size: 19px !important; line-height: 1.4 !important; padding: 10px 0 !important; } .primary-mobile-nav .close-canvas-mobile-panel { display: flex !important; align-items: center; justify-content: flex-start; padding: 18px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* anula el "Ninoshka" como texto */ font-size: 0 !important; line-height: 0 !important; } .primary-mobile-nav .mobile-nav-logo { height: 36px; width: auto; display: block; } .primary-mobile-nav .menu-language { margin-top: 20px; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 17px; } .primary-mobile-nav .menu-language img { width: 36px; height: 22px; object-fit: cover; vertical-align: middle; margin-right: 8px; } /* ========================================================================= PORTAFOLIO DE MARCAS — padding en cada tarjeta para separar las imágenes (aplica tanto en desktop como en mobile) ========================================================================= */ .gallerypagesec .project-thumbnail { padding: 14px 18px; background: #fff; border: 1px solid #ececec; border-radius: 4px; transition: box-shadow .25s, border-color .25s; } .gallerypagesec .project-thumbnail:hover { border-color: #d0d0d0; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .gallerypagesec .project-thumbnail img { width: 100%; height: auto; display: block; object-fit: contain; } /* ========================================================================= ACCESSIBILITY — visually hide text but keep it for SEO/screen readers ========================================================================= */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================================= MOBILE TYPOGRAPHY & SLIDER FIXES ========================================================================= */ /* -------------------------------------------------------------------------- Hero móvil — reemplaza al Revolution Slider en pantallas chicas En desktop/tablet ancha (≥992px) el slider Revolution se ve. En mobile se oculta entero y aparece este hero con la imagen de fondo y un overlay sencillo de flexbox. Sin pelearse con el motor de Revolution. -------------------------------------------------------------------------- */ /* Por defecto (desktop) el hero móvil no se muestra */ .mobile-hero { display: none; } @media (max-width: 991px) { /* Esconder TODO el Revolution Slider en mobile */ .rev_slider_wrapper { display: none !important; } /* Mostrar el hero móvil ocupando toda la viewport */ .mobile-hero { display: flex; align-items: center; justify-content: center; text-align: center; position: relative; min-height: 100vh; padding: 100px 22px 60px; /* espacio extra arriba para el header sticky */ background-size: cover; background-position: center center; background-repeat: no-repeat; color: #fff; } /* Velo oscuro para asegurar contraste sobre la foto */ .mobile-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%); z-index: 0; } .mobile-hero-inner { position: relative; z-index: 1; max-width: 92%; } /* H1 principal (arriba) — la frase descriptiva es el heading SEO de la página en mobile. Se ve grande y prominente. */ .mobile-hero-lead { color: #fff; font-size: 26px; line-height: 1.2; font-weight: 700; margin: 0 0 14px; letter-spacing: 0.3px; text-shadow: 0 2px 8px rgba(0,0,0,0.55); } /* h3 secundario (abajo) — "MAS DE 45 AÑOS DE EXPERIENCIA" como gancho */ .mobile-hero-years { color: #5fb4ff; font-size: 14px; line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 22px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .mobile-hero-cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .btn-mobile-outline { display: inline-block; border: 2px solid #fff; color: #fff !important; padding: 12px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; background: rgba(0,0,0,0.18); transition: background .25s, border-color .25s, color .25s; } .btn-mobile-outline:hover, .btn-mobile-outline:focus { background: #ff0000; border-color: #ff0000; color: #fff !important; } } @media (max-width: 575px) { .mobile-hero { padding: 90px 18px 50px; } .mobile-hero-lead { font-size: 22px; margin-bottom: 12px; } .mobile-hero-years { font-size: 12px; margin-bottom: 20px; letter-spacing: 0.5px; } .btn-mobile-outline { padding: 11px 14px; font-size: 12px; } } /* -------------------------------------------------------------------------- Tipografía móvil para el resto del sitio El theme heredado usa tamaños desktop para los títulos. Los reducimos en móvil para que dejen de sentirse "pasados". -------------------------------------------------------------------------- */ @media (max-width: 991px) { /* Cabeceras de sección (Bienvenidos, ¿Qué hacemos?, Sistema Comercial, etc.) */ .fh-section-title h1, .fh-section-title h2 { font-size: 26px !important; line-height: 1.25 !important; } .fh-section-title.f30 h2, .fh-section-title.f25 h2 { font-size: 24px !important; } /* Títulos especialmente grandes (sobre-nosotros) */ .aboutsec-2 .fh-section-title h2 { font-size: 24px !important; line-height: 32px !important; } /* Page banner / breadcrumb */ .page-header .header-title h1.page-title { font-size: 28px !important; line-height: 1.2 !important; } /* Bloques de iconos y servicios */ .fh-icon-box .box-title, .fh-service-box .service-title { font-size: 18px !important; line-height: 1.3 !important; } /* "¿Por qué elegirnos?" en /sobre-nosotros — la grid es col-md-4 (5 cards con descripción), distinta a la de home que es col-md-3 (12 cards sólo con título). Targeteamos solo la de sobre-nosotros para no romper la otra. */ .whychoos-3 .col-md-4 .fh-icon-box .box-title { font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; margin-top: 6px !important; margin-bottom: 4px !important; } .whychoos-3 .col-md-4 .fh-icon-box .desc p { font-size: 14.5px !important; line-height: 1.5 !important; } .whychoos-3 .col-md-4 .fh-icon-box .fh-icon i { font-size: 38px !important; } /* Conteos y headings de secciones bluebg / homecounts */ .homecounts h2.count-title { font-size: 24px !important; line-height: 1.25 !important; } .homecounts p big { font-size: 14px !important; line-height: 1.45 !important; } /* Texto general — +2 px sobre la base anterior para mejor legibilidad */ body, p { font-size: 16px; line-height: 1.55; } .haeadingpara { font-size: 16px !important; line-height: 1.55 !important; } /* Footer — compactado: filas más juntas y bloques con menos padding */ .footer-widgets { padding: 0 !important; } .contact-widget { padding: 30px 0 !important; } .contact-widget .row { margin: 0 !important; } .contact-widget .col-md-3 { margin-bottom: 16px !important; padding: 0 12px !important; } .contact-widget .col-md-3:last-child { margin-bottom: 0 !important; } .contact-widget i { margin-bottom: 6px !important; font-size: 22px !important; } .contact-widget h4 { font-size: 16px !important; line-height: 1.3 !important; margin: 4px 0 0 !important; } .contact-widget p { font-size: 14px !important; margin: 0 !important; line-height: 1.3 !important; } .footer-sidebars { padding: 24px 0 !important; } .footer-sidebars .row { margin: 0 !important; } .footer-sidebar { margin-bottom: 18px !important; padding: 0 12px !important; } .footer-sidebar:last-child { margin-bottom: 0 !important; } .footer-sidebars .widget { margin-bottom: 0 !important; } .footer-widgets h4.widget-title { font-size: 15px !important; margin: 0 0 8px !important; padding-bottom: 6px !important; } .footer-sidebar .textwidget p { font-size: 14.5px !important; line-height: 1.45 !important; margin: 0 !important; } .footer-sidebar ul.menu { margin: 0 !important; padding: 0 !important; } .footer-sidebar ul.menu li { padding: 3px 0 !important; } .footer-sidebar ul.menu li a { font-size: 14.5px !important; } .list-social.style-1 { line-height: 1 !important; } .list-social.style-1 a { margin: 0 6px 0 0 !important; } /* Esconder la columna vacía del medio en mobile (md-1 con ) */ .footer-sidebar.footer-2.col-md-1 { display: none !important; } .site-footer { padding: 14px 0 !important; } .footer-copyright .site-info { font-size: 13px !important; line-height: 1.4 !important; } /* Bullets / bloques de mision-vision-tres */ .fh-feature-box .box-title big { font-size: 18px !important; } .fh-feature-box .desc { font-size: 16px !important; line-height: 1.5 !important; } /* Spacing global más apretado */ .secpadd { padding-top: 50px !important; padding-bottom: 50px !important; } .secpaddbig { padding-top: 50px !important; padding-bottom: 50px !important; } .paddbtm40, .paddbtm30 { padding-bottom: 18px !important; } .paddbtm20 { padding-bottom: 12px !important; } .margbtm30 { margin-bottom: 18px !important; } .margtop30 { margin-top: 18px !important; } /* Inline padding-top/bottom de 100px que las secciones traen como style="" */ .welcomesec[style*="padding-top: 100px"], .aboutsec-2[style*="padding-top: 100px"], .aboutsec-3[style*="padding-top: 100px"], .whychoose-1[style*="padding-top: 100px"], .whychoos-3[style*="padding-top: 100px"], .partener-1[style*="padding-top: 50px"], section[style*="padding-top: 80px"] { padding-top: 50px !important; padding-bottom: 50px !important; } /* Cards de "Calidad / Responsabilidad / Eficiencia" en home — el theme deja huecos enormes; las apretamos. */ .welservices.row > .col-md-4 { margin-bottom: 14px; } .welservices.row > .col-md-4:last-child { margin-bottom: 0; } .welservices .fh-icon-box.icon-left { position: relative; padding: 12px 14px 12px 70px !important; margin: 0 !important; background: rgba(0,0,0,0.02); border-radius: 6px; min-height: 0 !important; } .welservices .fh-icon-box.icon-left .fh-icon { position: absolute !important; top: 12px; left: 12px; width: 48px; height: 48px; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; } .welservices .fh-icon-box.icon-left .fh-icon img { width: 100% !important; height: auto !important; max-width: 48px; } .welservices .fh-icon-box.icon-left .box-title { margin: 0 0 4px !important; padding: 0 !important; font-size: 16px !important; line-height: 1.2 !important; } .welservices .fh-icon-box.icon-left .desc { padding: 0 !important; margin: 0 !important; } .welservices .fh-icon-box.icon-left .desc p { margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; text-align: justify !important; hyphens: none; word-break: normal; } /* Las grids de Bootstrap 3 usan `float`, lo que rompe filas cuando una card es más alta que sus vecinas (la siguiente "se cuelga" debajo de la chica). Convertimos las rows críticas a flex para que toda la fila comparta altura. */ .whychoos-3 .row, .whychoos-3 .row > * { float: none !important; } .whychoos-3 .row { display: flex !important; flex-wrap: wrap; padding-top: 0 !important; } .whychoos-3 .row > [class*="col-"] { display: flex; flex-direction: column; padding-left: 8px; padding-right: 8px; } .whychoos-3 .fh-icon-box { flex: 1 1 auto; margin-bottom: 16px; padding: 10px 6px; } .whychoos-3 .fh-icon-box img { width: 36% !important; padding-bottom: 8px !important; } .whychoos-3 .fh-icon-box .box-title { font-size: 13px !important; line-height: 1.25 !important; } .whychoos-3 .fh-icon-box .box-title span { display: inline-block; } /* Mismo arreglo para las cards de Sistema Comercial y Bienvenidos */ .special_services .row, .welservices.row, .whychoose-1 .row { display: flex !important; flex-wrap: wrap; } .special_services .row > [class*="col-"], .welservices.row > [class*="col-"], .whychoose-1 .row > [class*="col-"] { float: none !important; display: flex; flex-direction: column; } .welservices.row > .col-md-4 .fh-icon-box, .special_services .row > .col-md-4 .fh-service-box { flex: 1 1 auto; } /* Cards de servicios (Sistema Comercial — Auto Servicio / Mayoreo / Detalle) Layout vertical limpio: icono arriba, título, descripción. Sin huecos. */ .special_services .row { margin: 0 -10px; } .special_services .col-md-4 { padding: 0 10px; margin-bottom: 14px; } .special_services .col-md-4:last-child { margin-bottom: 0; } .fh-service-box { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 20px 22px !important; margin: 0 !important; height: auto !important; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; } .fh-service-box .fh-icon { position: static !important; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 12px !important; font-size: 26px !important; line-height: 1 !important; flex: 0 0 auto; } .fh-service-box .fh-icon i { font-size: 26px !important; line-height: 1 !important; } .fh-service-box .service-title { margin: 0 0 8px !important; font-size: 16px !important; line-height: 1.25 !important; padding-left: 0 !important; } .fh-service-box .service-title a { color: #fff !important; } .fh-service-box .desc { padding-left: 0 !important; margin: 0 !important; } .fh-service-box .desc p { font-size: 15.5px !important; line-height: 1.5 !important; margin: 0 !important; } /* Iconos cuadrados grandes en cards */ .fh-icon-box .fh-icon img { max-width: 70px; } /* "¿Qué hacemos?" — icono fijo a la izquierda, título + texto como un solo bloque a la derecha (ambos alineados en la misma columna). Usamos position:absolute para el icono y padding-left en la tarjeta para que TODO el contenido empiece después del icono. */ .whychoose-1 .fh-icon-box.style-2 { position: relative; padding: 14px 14px 14px 70px !important; /* 44 icon + 12 gap + 14 inset */ margin: 0 0 12px !important; background: rgba(0,0,0,0.02); border-radius: 6px; text-align: left; } .whychoose-1 .fh-icon-box.style-2 .fh-icon { position: absolute !important; top: 14px; left: 14px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; font-size: 26px !important; line-height: 1 !important; color: #ff0000; } .whychoose-1 .fh-icon-box.style-2 .fh-icon i { font-size: 26px !important; line-height: 1 !important; } .whychoose-1 .fh-icon-box.style-2 .box-title, .whychoose-1 .fh-icon-box.style-2 .desc, .whychoose-1 .fh-icon-box.style-2 .desc p { padding: 0 !important; margin: 0 !important; text-align: left !important; } .whychoose-1 .fh-icon-box.style-2 .box-title { margin-bottom: 4px !important; } .whychoose-1 .fh-icon-box.style-2 .desc p { font-size: 15.5px !important; line-height: 1.5 !important; } /* La línea vertical/diagonal "has-line" entre cards en desktop no aplica en mobile. */ .whychoose-1 .fh-icon-box.has-line:after, .whychoose-1 .fh-icon-box.has-line:before { display: none !important; } /* En mobile la columna derecha (las dos fotos) la ocultamos. */ .whychoose-1 .col-lg-4.quofrm1 { display: none; } /* Sección ISO / Marcas — quitar espacio extra entre imagen y texto */ .aboutsec-3 .col-md-6 + .col-md-6 { margin-top: 14px; } .aboutsec-3 .abotimglft img { max-height: 220px; object-fit: contain; } /* Mision / Vision feature box */ .features-3 .col-sm-6 { margin-bottom: 18px; } .features-3 .col-sm-6:last-child { margin-bottom: 0; } .features-3 .fh-feature-box { padding-left: 50px; } .features-3 .fh-feature-box img { width: 30px !important; } /* Pasarela de partners */ .partener-1 .partner-item img { max-height: 60px; width: auto !important; } /* Tres fotos en sobre-nosotros */ .allservsec .item-service { margin-bottom: 14px; } .allservsec .entry-thumbnail img { width: 100%; } /* Blog — títulos de post más pequeños en mobile */ .blogpage .entry-title, .blogpage .entry-title a { font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; } .blogpage.single-post .entry-title { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; } .blogpage .blog-wrapper { margin-bottom: 22px; } .blogpage .entry-meta .meta { font-size: 11px !important; } .blogpage .entry-content p { font-size: 15.5px !important; line-height: 1.5 !important; } .blogpage .button-58 { font-size: 12px !important; padding: 8px 18px !important; } /* Sidebar del blog (buscador + categorías) */ .blogpage .widget_categories h4.widget-title { font-size: 16px !important; } .blogpage .widget_categories ul li a { font-size: 15.5px !important; } /* Portafolio de Marcas — 2 columnas en mobile. Importante: el theme legacy fuerza `.all-project .project-wrapper { width: 100%; }` en responsive.css alrededor de la línea 1284. Esa regla gana sobre col-xs-6 porque es más específica. Aquí ganamos por especificidad + !important. */ .gallerypagesec .list-project { margin: 0 -6px; } .gallerypagesec .all-project .project-wrapper, .gallerypagesec .project-wrapper { width: 50% !important; padding: 0 6px !important; margin-bottom: 12px; float: left !important; } .gallerypagesec .project-thumbnail { height: auto; } .gallerypagesec .project-thumbnail img { width: 100%; height: auto; display: block; } /* Filtros de categoría (Alimentos, Confitería, …) — botones tipo pill */ .gallerypagesec .filters-dropdown ul.filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 0 0 22px; list-style: none; } .gallerypagesec .filters-dropdown ul.filter li { font-size: 13px !important; font-weight: 600 !important; padding: 8px 16px !important; line-height: 1.1 !important; border: 1px solid #e1e1e1 !important; border-radius: 999px !important; background: #fff !important; color: #333 !important; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; text-transform: none !important; letter-spacing: 0.2px; } .gallerypagesec .filters-dropdown ul.filter li:hover { border-color: #c4c4c4 !important; background: #f7f7f7 !important; } .gallerypagesec .filters-dropdown ul.filter li.active { background: #ff0000 !important; border-color: #ff0000 !important; color: #fff !important; box-shadow: 0 4px 10px rgba(255, 0, 0, 0.25); } /* Formulario de contacto — campos más juntos en mobile */ .contactpagform .fh-form p.field { margin: 0 0 10px !important; } .contactpagform .fh-form p.field input, .contactpagform .fh-form p.field textarea { margin-bottom: 0 !important; } .contactpagform .fh-form p.single-field { margin-bottom: 10px !important; } .contactpagform .fh-form .row { margin-left: -8px; margin-right: -8px; } .contactpagform .fh-form .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } .contactpagform .fh-form p.submit { margin-top: 8px !important; margin-bottom: 0 !important; } .contactpagform .fh-form p.submit button { margin-top: 4px !important; } /* La columna del textarea queda pegada a la columna izquierda */ .contactpagform .fh-form .col-md-6 + .col-md-6 { margin-top: 0 !important; } /* Sección "Políticas empresariales" en /sobre-nosotros — los h3 con estilo inline blanco salen enormes en mobile. */ section[style*="background: #0c1239"] .fh-section-title h2, section[style*="background: #0c1239"] h3 { font-size: 18px !important; line-height: 1.3 !important; } section[style*="background: #0c1239"] .col-md-6 { margin-bottom: 24px; } section[style*="background: #0c1239"] .col-md-6:last-child { margin-bottom: 0; } section[style*="background: #0c1239"] p { font-size: 15px !important; line-height: 1.55 !important; } } /* Phones más chicos: aún un poco más compacto */ @media (max-width: 575px) { .fh-section-title h1, .fh-section-title h2 { font-size: 22px !important; } .page-header .header-title h1.page-title { font-size: 22px !important; } #slider1 .tp-caption.ch_title { font-size: 18px !important; line-height: 20px !important; } #slider1 .tp-caption.ch_content { font-size: 12px !important; line-height: 16px !important; } #slider1 .tp-caption.ch_button, #slider1 .ch_button.rev-btn { padding: 8px 16px !important; font-size: 12px !important; } }