/* ===== Horizont Atlantic – fixes responsive (no destructivo) ===== Cargado al final del para sobrescribir el tema base ConstructZilla. Generado 2026-05-21 tras auditoría mobile/tablet con Puppeteer. */ /* ---- 1. Overflow horizontal global (cinturón + tirantes) ---- */ html, body { overflow-x: hidden; max-width: 100vw; } /* Las animaciones slide-in dejan elementos translateX fuera del viewport si el IntersectionObserver no llega a dispararse. Forzamos visible. */ .animate-slide-in-right, .animate-slide-in-left { transform: none !important; opacity: 1 !important; } /* Owl carousel: su .owl-stage calcula widths gigantes en JS. Cap al padre. */ .owl-carousel { overflow: hidden; max-width: 100%; } /* ---- 2. Contact Form 7 (formularios embebidos en contenido WPBakery) ---- Las tablas legacy del WP no se adaptan a móvil. */ .wpcf7 table, .wpcf7 tbody, .wpcf7 tr, .wpcf7 td { display: block; width: 100% !important; max-width: 100%; box-sizing: border-box; } .wpcf7 input, .wpcf7 textarea, .wpcf7 select { max-width: 100%; box-sizing: border-box; } /* Imágenes del contenido siempre fluidas */ .dez-post-text img, .content-inner-1 img, .section-full img.img-responsive, .qode-info-card img { max-width: 100% !important; height: auto !important; } /* Tablas del contenido scroll horizontal en lugar de romper el layout */ .dez-post-text table, .content-inner-1 table { display: block; overflow-x: auto; max-width: 100%; } /* ---- 3. Tap targets accesibles (WCAG 2.5.5 — mínimo 44×44) ---- Especificidad alta para vencer al CSS del tema. */ .navbar-toggler, .header .navbar-toggler { min-width: 44px !important; min-height: 44px !important; padding: 10px 12px !important; } .extra-cell .site-button-custom, .extra-nav .site-button.site-button-custom { min-width: 44px !important; min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; } /* Items del menú principal y submenú (móvil/tablet) */ @media (max-width: 991px) { .header .nav.navbar-nav > li > a, .header-nav .nav.navbar-nav > li > a { padding: 14px 16px !important; min-height: 44px !important; line-height: 1.4 !important; display: flex; align-items: center; } .header .nav.navbar-nav .sub-menu > li > a, .header-nav .nav.navbar-nav .sub-menu > li > a { padding: 12px 16px !important; min-height: 44px !important; line-height: 1.4 !important; display: flex; align-items: center; } } /* Submenús del nav en desktop también muy comprimidos; les damos aire */ .header .nav.navbar-nav .sub-menu > li > a, .header-nav .nav.navbar-nav .sub-menu > li > a { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 36px; line-height: 1.4; } /* ---- 4. Texto legible en sidebar y widgets (alta especificidad) ---- */ .side-bar .widget a, .side-bar .widget li, .side-bar .widget_categories ul li a, .side-bar .widget-post-bx .post-title a, .side-bar .widget_recent_entries a, aside.side-bar .widget * a { font-size: 14px !important; line-height: 1.5 !important; } .side-bar .widget .widget-title { font-size: 18px !important; } /* ---- 5. Banner interior responsive (no monstruoso en móvil) ---- */ @media (max-width: 575px) { .dez-bnr-inr { height: 280px !important; } .dez-bnr-inr h1, .dez-bnr-inr h2 { font-size: 1.6rem !important; line-height: 1.3; } .media-container { height: 320px !important; } h1 { font-size: 1.7rem !important; } h2 { font-size: 1.4rem !important; } } /* ---- 6. Espaciado del nav mobile + bottom safe area ---- */ @media (max-width: 991px) { .header-nav .navbar-nav { padding: 10px 0 20px; } .header-nav { max-height: calc(100vh - 90px); overflow-y: auto; } } /* ---- 7. Containers del tema que se salen ---- */ .dez-box, .qode-info-card, .qode-info-card-text-holder { max-width: 100%; } /* ---- 8. Footer y formularios subscribe ---- */ .dzSubscribe input, .dzSubscribe button { max-width: 100%; box-sizing: border-box; } .dez-newsletter .skew-subscribe { transform: none !important; padding: 10px !important; } /* ---- 9. Hide demo skin-switcher si quedara colgado del tema ---- */ .styleswitcher, #styleswitcher, .theme-toggle, [class*="switcher-trigger"] { display: none !important; } /* ---- 10. Footer y enlaces secundarios (tap targets + texto legible) ---- */ .site-footer a, .site-footer .widget a, .footer-bottom a, .footer-top a, .dez-post-info a, .dez-post-meta a { padding-top: 6px !important; padding-bottom: 6px !important; line-height: 1.6 !important; display: inline-block; } .site-footer p, .footer-top p, .recent-posts-entry p, .dez-post-text p, .dez-post-info p, .widget-post .post-title, .recent-posts-entry .post-title { font-size: 13px !important; line-height: 1.5 !important; } .widget .post-title { font-size: 14px !important; } /* Iconos sociales: bump a 32x32 (en lugar de 24) */ .dez-social-icon li a, .footer-social a, .share-details-btn a { min-width: 32px !important; min-height: 32px !important; display: inline-flex; align-items: center; justify-content: center; } /* ---- 11. Botones secundarios y links cortos del contenido ---- */ .dez-post-meta li, .dez-post-meta a, .post-comment a, .dez-info a, .dez-title a { min-height: 28px !important; padding-top: 4px !important; padding-bottom: 4px !important; } /* Form de login: link "olvidaste" más cómodo */ #mi-cuenta-login + * a, .text-muted[href*="password-reset"] { padding: 8px 4px !important; display: inline-block; } /* Búsqueda del sidebar */ .search-bx button { min-width: 44px !important; min-height: 38px !important; } /* ---- 12. Headings clickables (Quiénes somos / Qué hacemos / Cómo trabajamos del home) ---- */ h2 a, h3 a, h4 a, h5 a { display: inline-block; padding: 6px 4px !important; min-height: 36px; line-height: 1.4; } .ow-entry-title a, .dez-title a, .post-title a { display: inline-block; padding: 8px 4px !important; min-height: 36px; line-height: 1.4; } /* ---- 13. Breadcrumb y widget de categorías legibles ---- */ .breadcrumb a, .breadcrumb li a, ol.breadcrumb a, ul.breadcrumb a, .breadcrumb-row a, nav[aria-label*="breadcrumb"] a { font-size: 14px !important; padding: 6px 8px !important; display: inline-block; } .widget_categories ul li a, .widget.widget_categories ul li a, .widget_categories li a, aside .widget_categories a { font-size: 14px !important; padding: 8px 0 !important; display: inline-block; line-height: 1.4 !important; } /* ---- 14. "Posts recientes" del sidebar (categoría debajo) ---- */ .widget-post-bx .post-meta a, .widget-post .dez-post-meta a, .recent-posts-entry a { font-size: 13px !important; padding: 4px 0; display: inline-block; } /* ---- 15. Footer súper específico: vencer cualquier !important del tema ---- */ footer a, footer * a, .site-footer a, .site-footer * a, body .site-footer .widget a, body .site-footer .widget ul li a, body footer.site-footer ul li a { min-height: 32px !important; padding: 6px 8px !important; display: inline-block !important; line-height: 1.5 !important; font-size: 13px !important; } /* ---- 16. Cualquier

demasiado pequeño en el contenido del home/secciones ---- */ .dez-newsletter p, .dez-info p, .ow-entry-text p, .section-content p, body .container p, body .container small { font-size: 13px !important; line-height: 1.6 !important; } /* ---- 17. Lista de "Categorias" del blog – máxima especificidad ---- */ body aside.side-bar .widget.widget_categories ul li a, body .widget.widget_categories ul li a, body .widget_categories a { font-size: 14px !important; padding: 8px 4px !important; display: inline-block !important; line-height: 1.5 !important; } /* ---- 18. Cajas decorativas vacías heredadas del tema (testimonial-11) ---- .quote-right en testimonial-11 espera un icono que el theme nunca llegó a definir (::after content vacío). Mantiene una caja 50x75 fantasma. */ .testimonial-11 .quote-right:empty, .testimonial-11 .quote-left:empty { display: none !important; } /* El layout space-between dejaba un hueco grande entre el nombre y el comentario. Agrupamos el contenido arriba y centramos el texto del testimonio. */ .testimonial-11 { justify-content: flex-start !important; min-height: 240px !important; } .testimonial-11 .testimonial-text { padding-top: 15px !important; text-align: center; } .testimonial-11 .testimonial-text p { text-align: center !important; } /* ---- 19. Headings vacíos heredados del contenido migrado (residuos WP) ---- */ .dez-post-text h1:empty, .dez-post-text h2:empty, .dez-post-text h3:empty, .dez-post-text h4:empty, .dez-post-text h5:empty, .dez-post-text h6:empty, .dez-post-text p:empty { display: none !important; } /* ---- 21. Acordeón Qode migrado del WP (llega sin su JS, todos abiertos) ---- Lo cerramos por defecto y el JS del layout añade .qode-open al hacer click. No depende del wrapper .qode-accordion-holder porque algunas páginas migradas lo perdieron (ej. /mudanzas-de-sevilla-a-lanzarote). */ .qode-accordion-content { display: none; } .qode-accordion-content.qode-open { display: block; } .qode-title-holder { cursor: pointer; } .qode-title-holder .icon_minus-06 { display: none; } .qode-title-holder.qode-open .icon_plus { display: none; } .qode-title-holder.qode-open .icon_minus-06 { display: inline-block; } /* ---- 20. Estilo por defecto de los botones (.site-button) ---- Hover gris con texto blanco + leve desplazamiento hacia arriba. Aplica a TODOS los botones del sitio (incluye el de subir archivo del formulario de presupuesto, que reusa .site-button). */ .site-button { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } /* Selectores reforzados: algunos botones llevan además .btn .btn-primary de Bootstrap, cuyo :hover empata en especificidad. Doblamos la clase para ganar siempre. */ .site-button.site-button:hover, .site-button.site-button:focus, .site-button.btn-primary:hover, .site-button.btn-primary:focus { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); } /* ============================================================= FIX OVERFLOW HORIZONTAL GLOBAL: si cualquier seccion provoca un desborde por la derecha (grid mal dimensionado, fondo con background-attachment fixed, banner con padding negativo, etc), esta regla previene el scroll horizontal a nivel pagina sin recortar contenido legitimo. ============================================================= */ html, body { overflow-x: hidden !important; max-width: 100% !important; } /* ============================================================= FIX TIPOGRAFIA GLOBAL: el tema base usa line-height MENOR que el font-size en h2/h3 (24px sobre 30/25px = ratio 0.8/0.96), lo que provoca solapamiento de lineas cuando hay wrap. Sucede en paginas de town, FAQ, hero, h2 en cards, etc. Solucion: ratio minimo 1.25 con margen aireado por defecto. ============================================================= */ h1 { font-size: clamp(28px, 4vw, 40px) !important; line-height: 1.2 !important; margin-bottom: 22px !important; } h2 { font-size: clamp(22px, 2.6vw, 30px) !important; line-height: 1.3 !important; margin-bottom: 18px !important; } h3 { font-size: clamp(19px, 2vw, 25px) !important; line-height: 1.35 !important; margin-bottom: 14px !important; } h4 { font-size: 18px !important; line-height: 1.4 !important; margin-bottom: 12px !important; } h5 { line-height: 1.4 !important; } h6 { line-height: 1.4 !important; } p, li { line-height: 1.65 !important; } /* Cards / componentes con su propia tipografia mas pequena, mantenemos line-height holgado relativo */ .dez-title, .dez-tilte, .icon-content h3, .icon-content h4, .qode-icwi-title, .feature-card h4 { line-height: 1.4 !important; } /* Hero overlay text */ .poblacion-hero h1 { line-height: 1.15 !important; } .dez-bnr-inr h1, .dez-bnr-inr h2 { line-height: 1.2 !important; } /* ============================================================ TRANSPORTE MERCANCIA A CANARIAS — tabla buques + secciones Limpio el HTML legacy WP. Diseno moderno responsive. ============================================================ */ .tmc-extra-details { max-width: 1100px; margin: 0 auto; padding: 50px 20px; } .tmc-section { margin-bottom: 50px; } .tmc-section h2 { color: #1a2a3f; font-weight: 700; margin: 36px 0 18px; padding-bottom: 12px; border-bottom: 2px solid #1a2a3f; line-height: 1.3; } .tmc-section h3 { color: #1a2a3f; font-weight: 600; margin: 26px 0 12px; line-height: 1.35; } .tmc-section p, .tmc-section li { line-height: 1.7; color: #333; } .tmc-section ul, .tmc-section ol { margin: 14px 0 22px; padding-left: 24px; } .tmc-section ul li, .tmc-section ol li { margin-bottom: 6px; } /* Tabla buques */ .tmc-buques-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); margin: 20px 0; } .tmc-buques-table caption { caption-side: bottom; font-size: 13px; color: #6a7a93; padding: 12px 8px 0; text-align: left; font-style: italic; } .tmc-buques-table thead th { background: #1a2a3f; color: #fff; padding: 14px 12px; font-weight: 600; font-size: 13px; text-align: center; text-transform: uppercase; letter-spacing: .3px; border: none; vertical-align: middle; } .tmc-buques-table tbody th { background: #f7f9fc; color: #1a2a3f; font-weight: 700; padding: 12px; text-align: center; border-bottom: 1px solid #e4ebf3; font-size: 14px; } .tmc-buques-table tbody td { padding: 12px; text-align: center; border-bottom: 1px solid #e4ebf3; color: #333; font-size: 13.5px; line-height: 1.45; } .tmc-buques-table tbody tr:nth-child(even) th, .tmc-buques-table tbody tr:nth-child(even) td { background-color: #fbfcfd; } .tmc-buques-table tbody tr:hover th, .tmc-buques-table tbody tr:hover td { background-color: #eef2f7; } /* table-responsive (Bootstrap-like) para mobile */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; } @media (max-width: 768px) { .tmc-buques-table thead th, .tmc-buques-table tbody th, .tmc-buques-table tbody td { font-size: 12px; padding: 9px 6px; } } /* ABBR (definicion ADR) */ .tmc-section abbr[title] { text-decoration: underline dotted; cursor: help; } /* Servicio Combinado: CTA + modal */ .tmc-cta-row { margin: 22px 0 10px; } .tmc-cta-btn { display: inline-block; background: #1a2a3f; color: #fff !important; padding: 14px 28px; border-radius: 28px; text-decoration: none !important; font-weight: 600; border: 2px solid #1a2a3f; transition: all .25s ease; cursor: pointer; } .tmc-cta-btn:hover { background: #2c4060; border-color: #2c4060; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,42,63,.25); } /* Modal combinado */ .tmc-modal .modal-content { border-radius: 14px; border: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .tmc-modal .modal-header { background: #1a2a3f; color: #fff; border-radius: 14px 14px 0 0; padding: 20px 28px; border-bottom: 0; } .tmc-modal .modal-title { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; } .tmc-modal .btn-close { filter: invert(1); opacity: .85; } .tmc-modal .modal-body { padding: 28px; } .tmc-modal .tmc-form-intro { color: #6a7a93; margin-bottom: 22px; line-height: 1.55; font-size: 14.5px; } .tmc-modal .form-label { font-weight: 600; color: #1a2a3f; font-size: 13.5px; margin-bottom: 6px; } .tmc-modal .form-control { border: 1px solid #d4dae3; border-radius: 8px; padding: 10px 14px; font-size: 14.5px; background: #fff; transition: border-color .2s, box-shadow .2s; } .tmc-modal .form-control:focus { border-color: #1a2a3f; box-shadow: 0 0 0 3px rgba(26,42,63,.12); outline: 0; } .tmc-modal .form-check-label { font-size: 14px; color: #3a4a60; line-height: 1.5; } .tmc-modal .req { color: #c0392b; font-weight: 700; } .tmc-modal .modal-footer { border-top: 1px solid #e4ebf3; padding: 18px 28px; } .tmc-modal .btn-outline-secondary { border-radius: 24px; padding: 10px 22px; font-weight: 600; } .tmc-modal .tmc-cta-btn { padding: 11px 26px; font-size: 15px; } .tmc-modal .tmc-captcha-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 6px; } .tmc-modal .cf-turnstile { margin: 0 auto; min-height: 65px; } /* ===================================================================== TYPE_OF_SHIPMENT como cards HORIZONTALES alternadas: desktop: imagen izq + texto der, siguiente card al reves (zigzag horizontal) mobile (<768px): SIEMPRE imagen arriba + texto abajo (orden natural) ===================================================================== */ .shipment-list { display: flex; flex-direction: column; gap: 28px; } .shipment-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(26,42,63,0.08); transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; /* mobile default: img arriba */ } .shipment-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26,42,63,0.14); } .shipment-card-img { overflow: hidden; background: #e6e9ee; aspect-ratio: 16/9; flex-shrink: 0; } .shipment-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; border: 0; } .shipment-card:hover .shipment-card-img img { transform: scale(1.04); } .shipment-card-body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; min-width: 0; /* critico en flex: permite shrink y evita desborde */ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .shipment-card { min-width: 0; overflow: hidden; } .shipment-card-desc, .shipment-card-desc p { overflow-wrap: break-word; word-wrap: break-word; word-break: normal; } .shipment-card-title { color: #1a2a3f; font-weight: 700; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #1a2a3f; width: max-content; max-width: 100%; text-transform: uppercase; letter-spacing: 0.3px; } .shipment-card-desc { color: #3a4a60; line-height: 1.7; font-size: 15px; } .shipment-card-desc p { margin: 0 0 12px; line-height: 1.7; color: #3a4a60; } .shipment-card-desc p:last-child { margin-bottom: 0; } .shipment-card-desc strong { color: #1a2a3f; } .shipment-card-desc ul { padding-left: 22px; margin: 8px 0 12px; } .shipment-card-desc ul li { margin-bottom: 5px; line-height: 1.6; font-size: 14.5px; } /* Boton "Leer mas / Mostrar menos" */ .shipment-card-more { background: transparent; border: 0; color: #1a2a3f; font-weight: 600; font-size: 14px; padding: 8px 0 0; margin-top: 4px; align-self: flex-start; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 2px solid #1a2a3f; line-height: 1.4; } .shipment-card-more:hover { color: #2c4060; border-color: #2c4060; } .shipment-card-more::after { content: '\f078'; /* fa-chevron-down */ font-family: 'FontAwesome'; font-size: 11px; transition: transform .25s ease; } .shipment-card.is-expanded .shipment-card-more::after { transform: rotate(180deg); } .shipment-card-more .less-label { display: none; } .shipment-card.is-expanded .shipment-card-more .less-label { display: inline; } .shipment-card.is-expanded .shipment-card-more .more-label { display: none; } /* DESKTOP: card horizontal, ancha y corta uniforme, texto recortado expandible */ @media (min-width: 768px) { .shipment-card { flex-direction: row; max-height: 360px; /* altura uniforme en estado compacto */ transition: max-height .4s ease; } .shipment-card.is-expanded { max-height: 1400px; /* deja crecer al natural */ } .shipment-card-img { flex: 0 0 42%; max-width: 42%; aspect-ratio: auto; min-height: 360px; } .shipment-card-body { flex: 1; padding: 28px 34px; position: relative; overflow: hidden; } .shipment-card-desc { max-height: 200px; overflow: hidden; position: relative; transition: max-height .4s ease; padding-bottom: 30px; /* hueco para el gradient fade */ } .shipment-card-desc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 90%); pointer-events: none; transition: opacity .25s ease; } .shipment-card.is-expanded .shipment-card-desc { max-height: 1100px; padding-bottom: 0; } .shipment-card.is-expanded .shipment-card-desc::after { opacity: 0; } /* Zigzag: cards impares con imagen a la derecha */ .shipment-card--reverse { flex-direction: row-reverse; } } /* Mobile: el toggle tambien funciona pero sin max-height (todo visible) o si prefieres compacto en mobile tambien, descomenta: */ @media (max-width: 767px) { .shipment-card-more { display: none !important; } /* en mobile mostramos todo el texto */ } /* ===================================================================== FAQ estilo PROD (limpio, gris suave, acordeon con +/-). Fondo: signo de interrogacion (bg21) a la izquierda, uniforme en TODO el proyecto. El !important gana al background inline del partial. ===================================================================== */ .faq-prod-section { background: #f4f6f8 url(../images/background/bg21.jpg) no-repeat center center !important; background-size: cover !important; /* el signo ocupa todo el ancho y alto de la seccion */ } .faq-prod-side { padding-right: 30px; } .faq-prod-title { color: #1a2a3f !important; font-weight: 800 !important; font-size: clamp(20px, 1.9vw, 26px) !important; line-height: 1.35 !important; margin: 0 0 22px !important; } .faq-prod-intro p { color: #4a6080; line-height: 1.65; margin-bottom: 14px; font-size: 15px; } .faq-prod-cta { display: inline-block; margin-top: 12px; background: #1a2a3f; color: #fff !important; padding: 12px 32px; border-radius: 4px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none !important; font-size: 13px; transition: background .25s ease, transform .2s ease, box-shadow .25s ease; border: 2px solid #1a2a3f; } .faq-prod-cta:hover { background: #2c4060; border-color: #2c4060; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,42,63,.25); } .faq-prod-accordion { display: flex; flex-direction: column; gap: 14px; } .faq-prod-item { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(26,42,63,.08); overflow: hidden; transition: box-shadow .2s ease; } .faq-prod-item:hover { box-shadow: 0 4px 12px rgba(26,42,63,.12); } .faq-prod-q { margin: 0 !important; padding: 0 !important; } .faq-prod-q::after { display: none !important; } /* anula la barra de acento de h3 si la hay */ .faq-prod-toggle { width: 100%; background: transparent; border: 0; padding: 18px 22px; text-align: left; color: #1a2a3f; font-weight: 700; font-size: 16px; line-height: 1.4; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; transition: color .2s ease; } .faq-prod-toggle:hover { color: #2c4060; } .faq-prod-toggle:focus-visible { outline: 2px solid #1a2a3f; outline-offset: -2px; } .faq-prod-q-text { flex: 1; text-align: left; color: inherit; } .faq-prod-q-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: rgba(26,42,63,.08); color: #1a2a3f; font-weight: 700; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease, background .2s ease; } .faq-prod-toggle:not(.collapsed) .faq-prod-q-icon { background: #1a2a3f; color: #fff; transform: rotate(45deg); /* + -> x */ } .faq-prod-a-wrap { background: #fff; } .faq-prod-a { padding: 4px 22px 22px; color: #3a4a60; line-height: 1.7; font-size: 14.5px; } .faq-prod-a p { margin: 0 0 10px; line-height: 1.7; color: #3a4a60; } .faq-prod-a p:last-child { margin-bottom: 0; } .faq-prod-a ul { padding-left: 22px; margin: 8px 0 12px; } .faq-prod-a ul li { margin-bottom: 5px; line-height: 1.6; } .faq-prod-a strong { color: #1a2a3f; } .faq-prod-a h4, .faq-prod-a h5, .faq-prod-a h6 { color: #1a2a3f; margin: 16px 0 8px; font-size: 15px; font-weight: 700; } @media (max-width: 991px) { .faq-prod-side { padding-right: 15px; margin-bottom: 24px; } .faq-prod-cta { margin-bottom: 12px; } } @media (max-width: 767px) { /* El signo sigue cubriendo toda la seccion tambien en movil. */ .faq-prod-section { background-position: center center !important; background-size: cover !important; padding: 46px 0 !important; } } /* ===================================================================== ¿POR QUE CONTRATARNOS? — modernizar la seccion WHY_CHOOSE_US que aparece en todas las service pages (transporte, mudanzas-nacionales, trasteros, etc.). Cards con backdrop-filter, hover lift, mejor tipografia, icons con gradiente y efecto pulse. ===================================================================== */ .section-full.overlay-black-dark.content-inner { padding: 70px 0 90px; position: relative; } .section-full.overlay-black-dark.content-inner .section-head h2 { font-size: clamp(26px, 3vw, 38px) !important; margin-bottom: 12px !important; font-weight: 800 !important; letter-spacing: 0.5px; } .section-full.overlay-black-dark.content-inner .dez-separator-outer { margin: 14px auto 40px; text-align: center; } .section-full.overlay-black-dark.content-inner .section-content > .row { margin-top: 30px !important; align-items: stretch; row-gap: 24px; column-gap: 0; } /* Card moderna por cada item why-choose */ .section-full.overlay-black-dark.content-inner [class*="col-lg-"], .section-full.overlay-black-dark.content-inner [class*="col-md-"], .section-full.overlay-black-dark.content-inner [class*="col-sm-"] { padding-left: 14px !important; padding-right: 14px !important; } .section-full.overlay-black-dark.content-inner [class*="col-"] > .m-b30 { background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 36px 26px 30px !important; margin: 0 0 24px !important; /* margen explicito mobile-safe (row-gap fallback) */ height: auto; min-height: 280px; transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } @media (min-width: 992px) { .section-full.overlay-black-dark.content-inner [class*="col-"] > .m-b30 { height: 100%; margin: 0 !important; /* desktop: el row-gap maneja el espaciado */ } } .section-full.overlay-black-dark.content-inner [class*="col-lg-"] > .m-b30:hover { transform: translateY(-6px); background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.40); box-shadow: 0 18px 38px rgba(0,0,0,0.35); } /* Icono circular (paleta gris/blanco corporativa, sin naranja) */ .section-full.overlay-black-dark.content-inner .icon-bx-lg { width: 84px !important; height: 84px !important; min-width: 84px !important; max-width: 84px !important; min-height: 84px !important; max-height: 84px !important; line-height: 84px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.55) !important; background: rgba(255,255,255,0.08); display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 22px auto !important; /* fuerza centrado horizontal y separa del titulo */ padding: 0 !important; flex: 0 0 84px !important; /* no shrink ni grow, basis fijo */ box-sizing: border-box !important; transition: transform .3s ease, border-color .3s ease, background .3s ease; } /* Asegurar que la fuente Font Awesome cargo y se ve el icono dentro */ .section-full.overlay-black-dark.content-inner .icon-bx-lg .icon-cell { width: 100%; height: 100%; display: flex !important; align-items: center !important; justify-content: center !important; } .section-full.overlay-black-dark.content-inner .icon-bx-lg .icon-cell i, .section-full.overlay-black-dark.content-inner .icon-bx-lg .icon-cell .fa { font-size: 32px !important; line-height: 1 !important; color: #fff !important; } .section-full.overlay-black-dark.content-inner [class*="col-lg-"] > .m-b30:hover .icon-bx-lg { transform: scale(1.07); border-color: #ffffff !important; background: rgba(255,255,255,0.18); } .section-full.overlay-black-dark.content-inner .icon-bx-lg .icon-cell { width: 100%; height: 100%; display: inline-flex !important; align-items: center; justify-content: center; } .section-full.overlay-black-dark.content-inner .icon-bx-lg .icon-cell i { font-size: 32px; color: #fff; line-height: 1; } /* Titulo card */ .section-full.overlay-black-dark.content-inner .font-26 { font-size: 17px !important; line-height: 1.3 !important; margin-bottom: 14px !important; font-weight: 700 !important; letter-spacing: 0.3px; text-transform: uppercase; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Descripcion card */ .section-full.overlay-black-dark.content-inner .m-b30 > span, .section-full.overlay-black-dark.content-inner .m-b30 > .text-white:last-child { font-size: 14.5px; line-height: 1.6 !important; color: rgba(255,255,255,0.85); display: block; } /* Responsive: si hay 4 o 5 cards en 2 filas, centrar la ultima */ @media (min-width: 992px) { .section-full.overlay-black-dark.content-inner .row.justify-content-center { justify-content: center !important; } } /* ===================================================================== "¿QUE SERVICIOS PODEMOS OFRECER?" cards igual altura uniforme. Template: .bg-gray-light > .section-content > .row > col > .dez-box con .dez-media dentro (img + h3 + desc). Flex column para que todas las cards igualen alto al mas alto. ===================================================================== */ .bg-gray-light .section-content > .row { align-items: stretch; } .bg-gray-light .section-content > .row > [class*="col-"] { display: flex; margin-bottom: 28px; } .bg-gray-light .section-content > .row > [class*="col-"] > .dez-box { display: flex !important; flex-direction: column; height: 100%; width: 100%; overflow: hidden; margin: 0 !important; box-shadow: 0 3px 10px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; } .bg-gray-light .section-content > .row > [class*="col-"] > .dez-box:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.12); } .bg-gray-light .section-content .dez-box .dez-media { display: flex; flex-direction: column; flex: 1; } /* Imagen: aspect ratio uniforme + crop centrado, ocupa borde a borde */ .bg-gray-light .section-content .dez-box .dez-media > a:first-child { display: block; aspect-ratio: 16/10; overflow: hidden; margin: -20px -20px 16px; background: #e6e9ee; } .bg-gray-light .section-content .dez-box .dez-media > a:first-child img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .bg-gray-light .section-content .dez-box:hover .dez-media > a:first-child img { transform: scale(1.04); } /* Titulo h3: min-height para alinear cards aunque el titulo tenga 1 o 2 lineas */ .bg-gray-light .section-content .dez-box .dez-media h3 { color: #1a2a3f; font-weight: 700; font-size: 16px !important; line-height: 1.3 !important; min-height: 44px; margin: 0 0 12px !important; padding: 0 !important; text-align: center; text-transform: uppercase; letter-spacing: 0.3px; display: flex; align-items: center; justify-content: center; } /* Descripcion crece para llenar el resto del card */ .bg-gray-light .section-content .dez-box .dez-media > :not(a):not(h3) { flex: 1; color: #3a4a60; font-size: 14px; line-height: 1.55; text-align: center; } /* ===================================================================== IGUALAR ALTURA EN TODAS LAS CARDS DEL PROYECTO (DEFAULTS UNIVERSALES) Cualquier fila Bootstrap con .dez-box, .icon-bx-wraper, .feature-card, o .service-photo-card como cards: stretch al alto maximo. Aplica a: - Destiny towns (col-lg-2 + .dez-box) - Service routes ("conoce todas nuestras rutas") - Meet-ask boxes del banner superior - Cualquier card legacy del tema en filas Bootstrap ===================================================================== */ .row > [class*="col-"] > .dez-box, .row > [class*="col-"] > .icon-bx-wraper, .row > [class*="col-"] > .feature-card { height: 100%; display: flex; flex-direction: column; } .row:has(> [class*="col-"] > .dez-box), .row:has(> [class*="col-"] > .icon-bx-wraper), .row:has(> [class*="col-"] > .feature-card) { align-items: stretch; } /* Fallback para browsers sin :has() (Firefox <121, ya raros) */ .row.justify-content-center, .row.equal-height, .row.equal { align-items: stretch; } .row.justify-content-center > [class*="col-"], .row.equal-height > [class*="col-"], .row.equal > [class*="col-"] { display: flex; flex-direction: column; } .row.justify-content-center > [class*="col-"] > .dez-box, .row.justify-content-center > [class*="col-"] > div:first-child, .row.equal-height > [class*="col-"] > div:first-child { flex: 1; display: flex; flex-direction: column; } /* Destiny town cards (col-lg-2 con .dez-box): imagen + titulo */ .row.justify-content-center > [class*="col-"] > .dez-box .dez-media { flex: 0 0 auto; } .row.justify-content-center > [class*="col-"] > .dez-box .dez-info { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; } .row.justify-content-center > [class*="col-"] > .dez-box .dez-title { margin: 0 !important; line-height: 1.3; } /* Service-photo-cards (poblacion_view) y nearby-card: ya tienen flex, reforzamos por si el contenedor padre no lo aplica */ .row > [class*="col-"]:has(> .service-photo-card), .row > [class*="col-"]:has(> .nearby-card) { display: flex; } .service-photo-card, .nearby-card { width: 100%; } /* =========================================================== DEFENSA contra overflow horizontal en pantallas muy anchas. Si algun widget/owl/iframe se desborda sin que el padre lo recorte, este safety net evita que aparezca scrollbar o espacios en blanco a la derecha del documento. =========================================================== */ html, body { overflow-x: hidden !important; max-width: 100vw; } .page-wraper, .page-content { overflow-x: clip; /* clip > hidden: no genera contexto de scroll */ max-width: 100%; } /* Owl carousel: forzar que su stage-outer recorte siempre */ .owl-carousel, .owl-stage-outer { overflow: hidden !important; } /* =========================================================== FORMULARIOS: esquinas redondeadas globales Aplica a TODOS los formularios del proyecto (presupuesto, combinado, contacto, agendar-llamada, login, registro, etc.) =========================================================== */ .dzForm .input-group, .dzForm .form-control, .dzForm input[type="text"], .dzForm input[type="email"], .dzForm input[type="tel"], .dzForm input[type="date"], .dzForm input[type="number"], .dzForm input[type="password"], .dzForm input[type="file"], .dzForm textarea, .dzForm select, form .form-control, form input.form-control, form select.form-control, form textarea.form-control, form .input-group { border-radius: 10px !important; } /* Bootstrap mete border-radius:0 a los hijos del input-group cuando hay addons. Forzamos el redondeo tambien en los .form-control internos. */ .input-group > .form-control, .input-group > input, .input-group > select, .input-group > textarea { border-radius: 10px !important; } /* Botones de formulario (Enviar, Elegir archivo, btn-primary) */ .dzForm .site-button, .dzForm button[type="submit"], .dzForm .btn, form .site-button, form button[type="submit"] { border-radius: 10px !important; } /* Mensajes de error inline + el dzFormMsg (caja exito/error) */ .dzForm .help-block, .dzForm .invalid-feedback, .dzFormMsg .alert { border-radius: 8px; } /* ============================================================ COLOR OVERRIDE: corporate navy (#032843) en lugar del naranja legacy (#EFBB20, #ffaa1c, #ffb822, #EF9800, #ffd166) del tema ConstructZilla. Solo overrides; el tema base queda intacto. ============================================================ */ /* Links default — tema usa #EFBB20 */ a { color: #032843; } a:hover, a:focus, a:active { color: #054a7a; } /* Site buttons base + variantes warm-color del tema → navy */ .site-button, .site-button.button-md, .site-button.button-lg, .site-button.button-sm, .site-button.yellow, .site-button.orange, .site-button.box-shadow.yellow, .site-button.box-shadow.orange, .site-button.gradient.yellow, .site-button.gradient.orange, .site-button-link.yellow, .site-button-link.orange, button.site-button, input[type="submit"].site-button { background-color: #032843 !important; color: #ffffff !important; border-color: #032843 !important; } .site-button:hover, .site-button:focus, .site-button.yellow:hover, .site-button.orange:hover, .site-button-link.yellow:hover, .site-button-link.orange:hover, button.site-button:hover, input[type="submit"].site-button:hover { background-color: #054a7a !important; color: #ffffff !important; border-color: #054a7a !important; } /* Outline buttons del tema base → navy con bordes */ .site-button.outline, .site-button.outline.yellow, .site-button.outline.orange { background-color: transparent !important; color: #032843 !important; border: 2px solid #032843 !important; } .site-button.outline:hover, .site-button.outline.yellow:hover, .site-button.outline.orange:hover { background-color: #032843 !important; color: #ffffff !important; } /* Separadores skew/borders del tema en color warm → navy (afectan a .dez-separator, .blockquote-style-1::before, etc.) */ .dez-separator.bg-primary, .dez-separator.bg-secondry, .dez-separator-outer .dez-separator { background-color: #032843; } /* Iconos circulares y titulos destacados del tema en warm-color */ .icon-content .dez-tilte-inner, .icon-bx-wraper .text-primary, .font-26.text-primary, .text-primary { color: #032843 !important; } /* Background warm del tema (.bg-primary, .bg-secondry) → navy */ .bg-primary, .bg-secondry { background-color: #032843 !important; } /* Hover de items de menu / widgets que el tema deja warm */ .widget li a:hover, .dez-tilte a:hover, .post-title a:hover, .entry-meta-list li a:hover { color: #054a7a !important; } /* Botones bootstrap primary del proyecto → navy (consistencia con .route-btn) */ .btn-primary { background-color: #032843 !important; border-color: #032843 !important; } .btn-primary:hover, .btn-primary:focus { background-color: #054a7a !important; border-color: #054a7a !important; } /* ============================================================ HEADER: logo y menu mas grandes en desktop (la pantalla ancha los hacia parecer pequenos). Mobile/tablet mantiene defaults. ============================================================ */ @media (min-width: 992px) { .header-style-1 .logo-header, .header-style-1 .logo-header.mostion { height: 110px !important; padding: 12px 0 !important; } .header-style-1 .logo-header img { height: 80px !important; width: auto !important; max-width: none !important; } .header-style-1 .header-nav .nav > li > a { font-size: 15.5px !important; font-weight: 600 !important; padding: 36px 16px !important; letter-spacing: 0.3px !important; } .header-style-1 .header-nav .nav > li > a:hover, .header-style-1 .header-nav .nav > li.active > a { color: #032843 !important; } .header-style-1 .extra-nav { padding: 32px 0 !important; } .header-style-1 .extra-nav .site-button-custom { padding: 12px 16px !important; font-size: 15px !important; } } @media (min-width: 1400px) { .header-style-1 .logo-header img { height: 92px !important; } .header-style-1 .header-nav .nav > li > a { font-size: 16.5px !important; padding: 40px 18px !important; } } /* ============================================================ HEADER (desktop): la fila logo+menu ocupa TODO el ancho y el menu va SIEMPRE en una sola linea (antes el .container lo limitaba a ~1140px y "Guia Practica" saltaba a una 2a linea en pantallas anchas). ============================================================ */ @media (min-width: 992px) { /* Fila a ancho completo con margen lateral comodo */ .header-style-1 .main-bar > .container-fluid { padding-left: 40px !important; padding-right: 40px !important; } /* Menu en una sola linea (sin wrap) */ .header-style-1 .header-nav .nav.navbar-nav { flex-wrap: nowrap !important; white-space: nowrap !important; } .header-style-1 .header-nav .nav.navbar-nav > li { float: none !important; display: inline-block !important; } }