/* ===================================================== AMANAH – Service Detail Pages Uso exclusivo en páginas de detalle de servicio Requisito: ===================================================== */ /* ========================================= PAGE INTERNA – Ajuste menú horizontal (NO afecta home) ========================================= */ /* Reset del desplazamiento heredado del template */ .page-interna .navbar-nav{ transform: none; } /* Links del menú horizontal: tamaño editorial */ .page-interna .navbar-nav .nav-link{ font-size: 18px; font-weight: 500; min-height: auto; padding: 10px 14px; text-transform: none; } /* Evitar que invadan el hero */ .page-interna header .navbar{ position: relative; z-index: 20; } /* Responsive: tablet */ @media (max-width: 991px){ .page-interna .navbar-nav .nav-link{ font-size: 16px; } } /* ========================================= PAGE INTERNA – Side Menu (Hamburguesa) Solo páginas internas ========================================= */ /* Menú lateral un poco más compacto en desktop */ .page-interna .side-menu{ width: min(420px, 85vw); /* antes 45% */ } /* Quitar centrado vertical y dar aire arriba */ .page-interna .side-menu .inner-wrapper{ align-items: flex-start !important; padding-top: 90px !important; } /* Letras pequeñas en el menú hamburguesa */ .page-interna .side-menu .navbar-nav .nav-link{ font-size: 28px !important; line-height: 1.15 !important; min-height: auto !important; font-weight: 600; text-transform: none; } /* Texto BLANCO solo en el menú hamburguesa */ .page-interna .side-menu .nav-link{ color: #ffffff !important; } .page-interna .side-menu .nav-link:hover, .page-interna .side-menu .nav-link:focus, .page-interna .side-menu .nav-link.active{ color: #ffffff !important; opacity: 0.9; } /* En pantallas chicas, aún más compacto */ @media (max-width: 575px){ .page-interna .side-menu .navbar-nav .nav-link{ font-size: 22px !important; } } /* Ocultar botón de WhatsApp cuando el menú esté abierto */ .page-interna .side-menu.side-menu-active ~ .btn-whatsapp, .page-interna .side-menu.side-menu-active + #close_side_menu ~ .btn-whatsapp{ opacity: 0; pointer-events: none; } /* ========================================= PAGE INTERNA – HERO (Standalone / Servicio) Solo afecta el slider-sec de páginas internas Requiere: ========================================= */ .page-interna #slider-sec.slider-sec{ min-height: 320px; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; position: relative; } /* Oscurecer imagen para que el texto se lea (premium) */ .page-interna #slider-sec.slider-sec .overlay{ background: rgba(0,0,0,.55); /* ajusta .45–.65 si quieres más/menos oscuro */ padding: 70px 16px 60px; } /* Contenedor del título/breadcrumb */ .page-interna #slider-sec .slide-contain{ max-width: 980px; margin: 0 auto; } /* Título del hero */ .page-interna #slider-sec .slide-contain h4{ font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.15; color: #ffffff; margin: 0 0 16px; text-transform: none; letter-spacing: -0.02em; text-shadow: 0 8px 30px rgba(0,0,0,.45); } /* Breadcrumb: quitar “caja fea” y hacerlo discreto */ .page-interna #slider-sec .crumbs{ margin-top: 6px; } .page-interna #slider-sec .breadcrumb{ background: transparent !important; padding: 0 !important; margin: 0 !important; display: inline-flex; gap: 10px; align-items: center; } .page-interna #slider-sec .breadcrumb-item{ font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); } .page-interna #slider-sec .breadcrumb-item + .breadcrumb-item::before{ content: "·"; color: rgba(255,255,255,.55); padding: 0 8px 0 2px; } .page-interna #slider-sec .breadcrumb-item a{ color: rgba(255,255,255,.92); text-decoration: none; } .page-interna #slider-sec .breadcrumb-item a:hover{ color: #d49439; } .page-interna #slider-sec .breadcrumb-item.active{ color: rgba(255,255,255,.70); } /* Separación visual del header blanco vs hero */ .page-interna header#home nav.navbar{ box-shadow: 0 10px 30px rgba(0,0,0,.08); } .page-interna #slider-sec.slider-sec .overlay{ background: rgba(0,0,0,.55); padding: 70px 16px 60px; min-height: 320px; /* mismo valor que el hero */ } /* ========================================= PAGE INTERNA – SOLO ESPACIADO ========================================= */ /* Espacio arriba del título */ .page-interna .heading-section{ padding-top: 80px; } /* Separar título / intro del bloque de columnas */ .page-interna .pro-detail-sec{ margin-bottom: 40px; } /* Separar imagen del texto derecho */ .page-interna .product-detail{ margin-top: 20px; } /* Separar imagen de los párrafos */ .page-interna .product-detail-slider{ margin-bottom: 20px; } /* Separar párrafos del texto derecho */ .page-interna .product-single-price .text{ margin-bottom: 18px; } /* Separar lista de checks del texto */ .page-interna .product-checklist{ margin-top: 20px; } /* ========================================= Contacto estilo template (centrado + limpio) ========================================= */ .contact-cta{ padding: 110px 0; background: #ffffff; } .contact-cta-kicker{ font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px; color: #d49439; /* dorado Amanah */ font-weight: 500; } .contact-cta-title{ font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.05; color: #111; margin: 0 0 18px; } .contact-cta-text{ font-size: 16px; line-height: 1.75; color: #666; max-width: 820px; margin: 0 auto 34px; } .contact-cta-actions{ margin-top: 10px; } /* Botón estilo “pill” como el template */ .contact-cta-btn{ padding: 14px 34px; border-radius: 999px; background: #111; border: 1px solid #111; color: #fff; font-size: 16px; font-weight: 500; } .contact-cta-btn:hover{ background: #d49439; border-color: #d49439; color: #fff; } /* Responsive */ @media (max-width: 575px){ .contact-cta{ padding: 80px 0; } .contact-cta-text{ margin-bottom: 26px; } } /* ===== FORZAR CENTRADO TOTAL CONTACT SECTION ===== */ #contact, #contact * { text-align: center !important; } /* Párrafos con ancho limitado */ #contact .info, #contact .info_width, #contact .contact_margin { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Botón */ #contact a, #contact .work-btn, #contact .btn-main { display: inline-block !important; margin-left: auto !important; margin-right: auto !important; float: none !important; text-align: center !important; } /* Por si algún estilo viejo usa floats */ #contact .contact_text { float: none !important; text-align: center !important; } /* Por si hay pseudo-elementos raros */ #contact::before, #contact::after { display: none !important; } /* ===== FORZAR CENTRADO TOTAL — ENFOQUE ===== */ #counters, #counters .counter-heading, #counters .counter-heading * { text-align: center !important; } /* Centrar párrafos con ancho limitado */ #counters .info, #counters .info_width { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Por si algún estilo heredado usa floats o posicionamiento */ #counters .counter-heading { float: none !important; display: block !important; } /* Asegurar que el h1 no tenga alineación forzada */ #counters h1 { text-align: center !important; } /* ===== ENFOQUE: evitar que quede pegado ===== */ /* Aire arriba/abajo de la sección */ #counters { padding-top: 80px !important; padding-bottom: 70px !important; } /* Separación interna del heading */ #counters .counter-heading .colored_heading { margin-bottom: 14px !important; } #counters .counter-heading h1 { margin-bottom: 18px !important; } #counters .counter-heading .info { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.75 !important; max-width: 920px !important; } /* Separación con lo que sigue (por si el siguiente bloque no trae margen) */ #counters + section, #counters + div { margin-top: 50px !important; } /* Si hay

o elementos que colapsan márgenes, esto estabiliza */ #counters .row, #counters .col-12 { margin-top: 0 !important; margin-bottom: 0 !important; } /* ===== DETAIL PROCESS: bloque centrado, texto a la izquierda ===== */ /* Centrar el bloque de texto dentro de la columna */ #detail_process .process_text { max-width: 560px; /* ancho editorial */ margin-left: auto !important; margin-right: auto !important; text-align: left !important; } /* Asegurar que los textos no hereden centrado */ #detail_process .process_text p, #detail_process .process_text h1, #detail_process .process_text .info { text-align: left !important; } /* Dar aire vertical para que no se vea pegado */ #detail_process .process_text .colored_heading { margin-bottom: 10px; } #detail_process .process_text h1 { margin-bottom: 16px; line-height: 1.2; } #detail_process .process_text .info { line-height: 1.75; } /* En móvil: ocupar todo el ancho pero mantener lectura */ @media (max-width: 991.98px) { #detail_process .process_text { max-width: 100%; padding-left: 16px; padding-right: 16px; } }