/* ==================================================================== */ /* System Style Definitions */ /* ==================================================================== */ @media all { *#dm div.dmContent h1, *#dm div.dmFooter h1 { color:rgb(102,102,102); } *#dm div.dmRespCol>* { line-height:normal; } *.dmDesktopBody *#dm ul.dmNavWrapper>li>a *.navText, *.dmDesktopBody *#dm ul.dmNavWrapper>li>a *.navItemText, *.dmDesktopBody *#dm ul.dmNavWrapper>li>*.dmNavigation { color:rgb(17,17,17); font-weight:normal; } *.dmDesktopBody *#dm ul.dmNavWrapper>li>a:hover, *.dmDesktopBody *#dm ul.dmNavWrapper>li>a.currentPage { border-color:rgb(17,17,17); } *.dmDesktopBody *#dm ul.dmNavWrapper>li.navItemSelectedServer>a *.navText, *.dmDesktopBody *#dm ul.dmNavWrapper>li.dmNavItemSelected>a *.navItemText, *.dmDesktopBody *#dm ul.dmNavWrapper>li.dmNavItemSelected>*.navItemText { font-weight:bold; } *.stickyHeaderSpacer { height:112px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-family: Lato, "Lato Fallback"; color:rgba(0,0,0,1); } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { color:var(--color_1); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:400; font-style:normal; text-decoration:none; letter-spacing:initial; } *#dm div.dmContent .dmNewParagraph[data-version] h1, *#dm div.dmFooter .dmNewParagraph[data-version] h1, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1, *#dm div.dm-title .dmNewParagraph[data-version] h1 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h1 *, *#dm div.dmFooter .dmNewParagraph[data-version] h1 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1 *, *#dm div.dm-title .dmNewParagraph[data-version] h1 * { text-decoration:none; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { color:rgb(50,20,111); direction:ltr; font-family: Lato, "Lato Fallback"; font-weight:400; font-style:normal; text-decoration:none; line-height:1.5; } *#dm div.dmNewParagraph a, *#dm .dmNewParagraph a, *#dm div.dmBlockElement a, *#dm .dmBlockElement a, *#dm .dmform a.fileUploadLink, .dmPrettyList .link:not(.dmWidget), *#dm .dmGeoLocation a.dmGeoSVSeeAll, *#dm .dmGeoLocation a.dmGeoSVGoToPage, *#dm .postDescription a, *#dm .blog-post-component a, *#dm .timeline-post a, *#dm .rteBlock a, .newPhotoGallery .photoGalleryViewAll.link, .dmTable a, *#dm .ecwid .ec-link:not(.breadcrumbs__link), .dmSignup a:not(.social-link) { color:var(--color_4); } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { color:rgb(50,20,111); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:normal; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h2, *#dm div.dmFooter .dmNewParagraph[data-version] h2, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2, *#dm div.dm-title .dmNewParagraph[data-version] h2 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h2 *, *#dm div.dmFooter .dmNewParagraph[data-version] h2 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2 *, *#dm div.dm-title .dmNewParagraph[data-version] h2 * { text-decoration:none; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { color:rgb(50,20,111); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h3, *#dm div.dmFooter .dmNewParagraph[data-version] h3, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3, *#dm div.dm-title .dmNewParagraph[data-version] h3 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h3 *, *#dm div.dmFooter .dmNewParagraph[data-version] h3 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3 *, *#dm div.dm-title .dmNewParagraph[data-version] h3 * { text-decoration:none; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { color:rgb(50,20,111); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:bold; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h4, *#dm div.dmFooter .dmNewParagraph[data-version] h4, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4, *#dm div.dm-title .dmNewParagraph[data-version] h4 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h4 *, *#dm div.dmFooter .dmNewParagraph[data-version] h4 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4 *, *#dm div.dm-title .dmNewParagraph[data-version] h4 * { text-decoration:none; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { color:var(--color_1); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h5, *#dm div.dmFooter .dmNewParagraph[data-version] h5, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5, *#dm div.dm-title .dmNewParagraph[data-version] h5 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h5 *, *#dm div.dmFooter .dmNewParagraph[data-version] h5 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5 *, *#dm div.dm-title .dmNewParagraph[data-version] h5 * { text-decoration:none; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { color:rgba(0,0,0,1); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:normal; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h6, *#dm div.dmFooter .dmNewParagraph[data-version] h6, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6, *#dm div.dm-title .dmNewParagraph[data-version] h6 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h6 *, *#dm div.dmFooter .dmNewParagraph[data-version] h6 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6 *, *#dm div.dm-title .dmNewParagraph[data-version] h6 * { text-decoration:none; } *#dm div.dmNewParagraph a, *#dm .dmNewParagraph a, *#dm div.dmBlockElement a, *#dm .dmBlockElement a, *#dm .dmform a.fileUploadLink, .dmPrettyList .link:not(.dmWidget), *#dm .dmGeoLocation a.dmGeoSVSeeAll, *#dm .dmGeoLocation a.dmGeoSVGoToPage, *#dm .postDescription a, *#dm .blog-post-component a, *#dm .timeline-post a, *#dm .rteBlock a, .newPhotoGallery .photoGalleryViewAll.link, .dmTable a, *#dm .ecwid .ec-link:not(.breadcrumbs__link), .dmSignup a:not(.social-link), .prev-next-links a { color:rgba(147,147,147,1); } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { color:var(--color_2); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:400; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 * { text-decoration:none; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { color:var(--color_2); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:400; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h2, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h2, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h2 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h2 * { text-decoration:none; } #dmRoot #dm div.dmNewParagraph p, #dmRoot #dm div.dmNewParagraph li { color:var(--color_2); direction:ltr; font-family: Lato, "Lato Fallback"; font-weight:400; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { color:rgba(0,0,0,1); direction:ltr; font-family: "Sulphur Point", "Sulphur Point Fallback"; font-weight:700; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 * { text-decoration:none; } } @media (min-width:1025px) { *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:18px; } #dm div.dmNewParagraph p { font-size:18px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:16px; } #dm DIV.dmOuter DIV.dmInner, #dm DIV.dmOuter DIV#dmSlideRightNavRight { background-image:none; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:18px; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:18px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:60px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:50px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:24px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:18px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } } @media (min-width:768px) and (max-width:1024px) { *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:18px; } #dm div.dmNewParagraph p { font-size:18px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:16px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:18px; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:16px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:54px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:40px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:24px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:18px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } } @media (min-width:0px) and (max-width:767px) { *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:15px; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:15px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:40px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:28px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:24px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:20px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } } /* Estilos Base */ .medical-hero { background-color: #ffffff; padding: 40px 20px; font-family: 'Montserrat', sans-serif; overflow: visible; /* Permitir sombras */ } .container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; } /* --- LOGO Y ENCABEZADO --- */ .hero-content { flex: 1; max-width: 550px; text-align: left; /* Asegurar alineación izquierda */ } /* NUEVO: Contenedor de Logo Grande */ .logo-container { margin-bottom: 20px; display: block; } .header-logo { max-width: 180px; /* Logo mucho más grande */ height: auto; display: block; } .brand-badge { display: inline-block; background: #fceceb; /* Rojo muy suave */ padding: 5px 15px; border-radius: 20px; margin-bottom: 20px; font-size: 0.85rem; color: #E30613; /* Rojo texto */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .hero-content h1 { font-size: 2.8rem; line-height: 1.1; color: #1a1a1a; margin-bottom: 20px; font-weight: 800; } .highlight-text { color: #E30613; position: relative; display: inline-block; } .highlight-text::after { content: ''; position: absolute; bottom: 3px; left: 0; width: 100%; height: 8px; background-color: rgba(227, 6, 19, 0.1); z-index: -1; } .hero-desc { font-size: 1.1rem; color: #555; margin-bottom: 30px; line-height: 1.6; } /* --- BOTONES CORREGIDOS --- */ .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; } /* CORRECCIÓN: Color directo sin variables */ .btn-main { background-color: #E30613 !important; /* Rojo forzado */ color: #ffffff !important; /* Texto blanco forzado */ padding: 14px 35px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; box-shadow: 0 4px 12px rgba(227, 6, 19, 0.4); /* Sombra roja */ transition: transform 0.2s ease, box-shadow 0.2s ease; border: none; } .btn-main:hover { background-color: #c40510 !important; /* Rojo más oscuro al pasar el mouse */ transform: translateY(-2px); color: white !important; } .btn-outline { background-color: transparent !important; border: 1px solid #ccc !important; color: #333 !important; padding: 12px 25px; border-radius: 6px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; } .btn-outline:hover { border-color: #333 !important; background: #f5f5f5 !important; } /* --- BENEFICIOS --- */ .hero-trust { margin-top: 25px; display: flex; gap: 20px; font-size: 0.9rem; color: #666; font-weight: 500; } /* --- IMAGEN DERECHA --- */ .hero-image-container { flex: 1; display: flex; justify-content: flex-end; } .main-img { width: 100%; max-width: 500px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); object-fit: cover; } /* --- MÓVIL --- */ @media (max-width: 900px) { .container { flex-direction: column-reverse; /* Imagen arriba en móvil */ text-align: center; gap: 30px; } .hero-content { max-width: 100%; text-align: center; } .logo-container { display: flex; justify-content: center; /* Centrar logo en móvil */ } .hero-actions { justify-content: center; flex-direction: column; /* Botones uno debajo del otro en móvil */ width: 100%; } .btn-main, .btn-outline { width: 100%; /* Botones anchos en móvil */ justify-content: center; } .hero-trust { justify-content: center; } .hero-content h1 { font-size: 2rem; } } /* --- CONFIGURACIÓN GENERAL --- */ .services-section { padding: 80px 20px; background-color: #fcfcfc; font-family: 'Montserrat', sans-serif; } .container-services { max-width: 1100px; margin: 0 auto; } /* --- ENCABEZADOS --- */ .section-header { text-align: center; margin-bottom: 50px; } .section-header .subtitle { color: #E30613; /* Color Oficial (Rojo/Naranja logo) */ font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; } .section-header h2 { font-size: 2.5rem; color: #1a1a1a; margin-top: 10px; } /* --- GRID DE TARJETAS --- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .service-card { background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: all 0.3s ease; border: 1px solid #f0f0f0; text-align: center; } /* Efecto Hover en la tarjeta completa */ .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(227, 6, 19, 0.15); border-color: #E30613; } /* --- ESTILOS DE LOS ICONOS NATIVOS --- */ .card-icon { margin-bottom: 20px; font-size: 3.5rem; /* Tamaño del icono */ display: inline-block; } .card-icon i { /* AQUÍ SE DEFINE EL COLOR DEL ICONO */ color: #E30613; /* Tu Rojo/Naranja Oficial */ /* Un pequeño degradado sutil si quieres que se vea más moderno (opcional) */ background: -webkit-linear-gradient(#E30613, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: transform 0.3s ease; } /* Si prefieres el color plano sin degradado, borra las lineas de 'background' hasta 'transparent' y deja solo: color: #E30613; */ .service-card:hover .card-icon i { transform: scale(1.1); /* El icono crece un poquito al pasar el mouse */ } /* --- TEXTOS --- */ .service-card h3 { color: #1a1a1a; font-size: 1.3rem; margin-bottom: 15px; font-weight: 700; } .service-card p { color: #666; line-height: 1.6; font-size: 0.95rem; } /* Tarjeta Destacada (Paquetes) */ .highlight-card { border-top: 4px solid #E30613; /* Solo una linea roja arriba para destacar */ } /* Responsivo */ @media (max-width: 768px) { .section-header h2 { font-size: 1.8rem; } .services-grid { grid-template-columns: 1fr; } } /* --- CONFIGURACIÓN DEL CTA --- */ /* ====================================================== NUEVA CTA: FONDO GRIS OSCURO ====================================================== */ /* SECCIÓN PRINCIPAL CON FONDO GRIS OSCURO */ .cta-section { background-color: #131e29 !important; /* El mismo gris oscuro del footer */ padding: 60px 20px; font-family: 'Montserrat', sans-serif; color: #ffffff !important; /* Texto blanco */ border-top: 4px solid #F91606; /* Un toque de rojo arriba para definirla */ } .cta-container { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } /* --- LADO IZQUIERDO: INFO (HORARIOS) --- */ .cta-info { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 300px; } /* Icono del reloj en rojo */ .cta-icon-box { font-size: 3.5rem; color: #F91606 !important; /* Rojo Oficial */ opacity: 0.9; } .cta-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; opacity: 0.9; display: block; margin-bottom: 5px; color: #e0e0e0; /* Gris claro */ } .cta-text h2 { font-size: 2.5rem; margin: 0 0 10px 0; line-height: 1; font-weight: 800; color: #ffffff; /* Título en blanco */ } .schedule-text { font-size: 1.2rem; line-height: 1.4; margin: 0; color: #e0e0e0; /* Texto en gris claro */ } .schedule-text strong { color: #ffffff; /* Horas en blanco para destacar */ } .sunday-note { font-size: 0.9rem; opacity: 0.8; font-weight: 300; color: #F91606; /* "Domingos: Cerrado" en rojo */ } /* --- LADO DERECHO: ACCIÓN (BOTÓN) --- */ .cta-action { text-align: center; background: rgba(255, 255, 255, 0.05); /* Fondo muy sutil para la caja */ padding: 30px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */ backdrop-filter: blur(5px); min-width: 300px; flex: 1; } .action-title { font-size: 1.2rem; margin-bottom: 20px; font-weight: 600; color: #ffffff; } /* BOTÓN BLANCO (Invertido) */ .btn-white-cta { background-color: #ffffff !important; color: #F91606 !important; /* Texto rojo */ padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 800; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border: 2px solid #ffffff; /* Borde blanco para definición */ } .btn-white-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(249, 22, 6, 0.3); /* Sombra roja al pasar el mouse */ background-color: #f0f0f0 !important; color: #F91606 !important; } .small-note { font-size: 0.8rem; margin-top: 15px; opacity: 0.8; color: #e0e0e0; } /* --- RESPONSIVO --- */ @media (max-width: 768px) { .cta-container { flex-direction: column; text-align: center; gap: 30px; } .cta-info { flex-direction: column; text-align: center; } .cta-action { width: 100%; } .cta-text h2 { font-size: 2rem; } } /* --- CONFIGURACIÓN SECCIÓN --- */ .about-section { padding: 100px 20px; background-color: #ffffff; font-family: 'Montserrat', sans-serif; overflow: hidden; } .about-container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; /* Alineación vertical centrada */ gap: 60px; } /* --- IMAGEN (IZQUIERDA) --- */ .about-image-wrapper { flex: 1; position: relative; min-width: 300px; } .about-img { width: 100%; border-radius: 20px 0 20px 0; /* Efecto hoja (esquinas opuestas) */ box-shadow: -15px 15px 0px rgba(227, 6, 19, 0.1); /* Sombra sólida decorativa */ object-fit: cover; height: 450px; } /* Badge Flotante */ .experience-badge { position: absolute; bottom: 30px; right: -20px; background-color: #ffffff; padding: 15px 25px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-left: 5px solid #E30613; display: flex; align-items: center; gap: 10px; } .experience-badge .years { font-size: 2.5rem; font-weight: 800; color: #E30613; line-height: 1; } .experience-badge .text { font-size: 0.85rem; font-weight: 600; color: #333; line-height: 1.2; } /* --- TEXTO (DERECHA) --- */ .about-content { flex: 1; } .section-tag { color: #E30613; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; display: block; margin-bottom: 10px; } .about-content h2 { font-size: 2.5rem; color: #1a1a1a; line-height: 1.2; margin-bottom: 20px; } .about-content .highlight { color: #E30613; text-decoration: underline; text-decoration-color: rgba(227, 6, 19, 0.3); } .main-desc { font-size: 1.05rem; color: #555; line-height: 1.6; margin-bottom: 30px; } /* Lista de Características */ .feature-list { list-style: none; padding: 0; margin: 0 0 30px 0; } .feature-list li { display: flex; gap: 15px; margin-bottom: 25px; } .feature-list i { font-size: 1.5rem; color: #E30613; /* Iconos Rojos */ margin-top: 5px; } .feature-list strong { display: block; font-size: 1.1rem; color: #1a1a1a; margin-bottom: 5px; } .feature-list p { margin: 0; font-size: 0.95rem; color: #666; } /* Enlace simple */ .text-link { color: #E30613; font-weight: 700; text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s ease; } .text-link:hover { gap: 12px; /* Pequeña animación de la flecha al hacer hover */ text-decoration: underline; } /* --- RESPONSIVO --- */ @media (max-width: 900px) { .about-container { flex-direction: column; gap: 40px; } .about-image-wrapper { order: 1; /* Imagen primero en móvil (opcional, puedes ponerla al final con order: 2) */ width: 100%; } .about-img { height: 300px; box-shadow: none; /* Quitar sombra compleja en móvil */ } .experience-badge { right: 10px; bottom: 10px; padding: 10px 20px; } .about-content { order: 2; text-align: left; /* Mantener alineación izquierda para legibilidad */ } .about-content h2 { font-size: 2rem; } } .info-section { padding: 80px 20px; background-color: #f8f9fa; /* Gris muy suave clínico */ font-family: 'Montserrat', sans-serif; } .container-info { max-width: 1100px; margin: 0 auto; display: flex; gap: 50px; } /* --- COLUMNA IZQUIERDA (Definición) --- */ .info-column-left { flex: 1; } .tag-educational { background-color: #e3e3e3; color: #555; padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; } .info-column-left h2 { font-size: 2.2rem; color: #1a1a1a; margin-top: 15px; margin-bottom: 20px; } .main-text { font-size: 1.05rem; line-height: 1.6; color: #555; margin-bottom: 30px; } .sub-heading { color: #E30613; /* Rojo Oficial */ font-size: 1.2rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } /* Tarjetas de Accesos (Fístula/Catéter) */ .access-types { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; } .access-card { background: white; padding: 15px; border-radius: 8px; display: flex; align-items: center; gap: 15px; border-left: 4px solid #ccc; transition: border-color 0.3s ease; } .access-card:hover { border-left-color: #E30613; /* Se ilumina en rojo al pasar el mouse */ } .access-card i { font-size: 1.5rem; color: #E30613; } .access-card strong { display: block; color: #333; } .access-card p { margin: 0; font-size: 0.9rem; color: #666; } .doctor-note { background-color: #fff0ef; /* Fondo rojizo muy suave */ padding: 15px; border-radius: 8px; display: flex; gap: 15px; align-items: center; color: #E30613; } /* --- COLUMNA DERECHA (Tecnología) --- */ .info-column-right { flex: 1; } .tech-box { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-top: 5px solid #E30613; /* Tope rojo */ position: relative; } .tech-header { position: absolute; top: -15px; right: 20px; background: #E30613; color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; } .tech-box h3 { font-size: 1.5rem; margin-bottom: 15px; color: #1a1a1a; } .tech-intro { font-style: italic; color: #666; margin-bottom: 20px; } .tech-list { list-style: none; padding: 0; } .tech-list li { display: flex; gap: 12px; margin-bottom: 15px; font-size: 0.95rem; color: #444; } .tech-list i { color: #E30613; margin-top: 3px; } /* Caja de Conclusión dentro de la tecnología */ .tech-highlight { background-color: #f4f6f9; padding: 15px; border-radius: 8px; margin-top: 20px; border: 1px dashed #bbb; } .tech-highlight strong { color: #E30613; display: block; margin-bottom: 5px; } .tech-highlight p { margin: 0; font-size: 0.9rem; color: #555; } /* --- RESPONSIVO --- */ @media (max-width: 850px) { .container-info { flex-direction: column; gap: 30px; } } .contact-section { padding: 80px 20px; background-color: #f4f6f9; /* Fondo gris para contraste */ font-family: 'Montserrat', sans-serif; } .contact-container { max-width: 1100px; margin: 0 auto; display: flex; gap: 50px; align-items: flex-start; } /* --- IZQUIERDA (Info) --- */ .contact-info { flex: 1; } .tag-location { color: #E30613; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; } .contact-info h2 { font-size: 2.5rem; color: #1a1a1a; margin-top: 10px; margin-bottom: 20px; } .contact-desc { color: #555; margin-bottom: 30px; font-size: 1rem; } .info-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; } .info-item { display: flex; gap: 15px; } .info-item i { background-color: white; color: #E30613; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); flex-shrink: 0; } .info-item strong { display: block; color: #1a1a1a; margin-bottom: 2px; } .info-item p, .info-item a { margin: 0; color: #555; text-decoration: none; font-size: 0.95rem; } .map-wrapper { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border: 4px solid white; } /* --- DERECHA (Formulario) --- */ .form-wrapper { flex: 1; min-width: 300px; } .form-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Sombra elegante */ border-top: 5px solid #E30613; } .form-card h3 { margin-top: 0; color: #1a1a1a; font-size: 1.8rem; } .form-card p { color: #666; margin-bottom: 25px; } /* Inputs Estilizados */ .input-group { margin-bottom: 20px; } .input-group label { display: block; font-weight: 600; color: #333; margin-bottom: 8px; font-size: 0.9rem; } .input-icon { position: relative; } .input-icon i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #aaa; } .custom-form input, .custom-form textarea { width: 100%; padding: 12px 15px 12px 45px; /* Espacio para el icono */ border: 1px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 1rem; transition: all 0.3s ease; box-sizing: border-box; /* Vital para que no se salga del cuadro */ } .custom-form textarea { padding: 12px 15px; /* Sin icono en textarea */ resize: vertical; } .custom-form input:focus, .custom-form textarea:focus { border-color: #E30613; outline: none; background-color: #fffbfb; } /* Botón de Envío */ .btn-submit { width: 100%; background-color: #E30613; color: white; border: none; padding: 15px; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; gap: 10px; } .btn-submit:hover { background-color: #c40510; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(227, 6, 19, 0.3); } .privacy-note { font-size: 0.75rem !important; text-align: center; margin-top: 15px !important; color: #999 !important; } /* --- RESPONSIVO --- */ @media (max-width: 900px) { .contact-container { flex-direction: column; } .form-card { padding: 25px; } } /* Transforma el Widget de Duda en una Tarjeta Moderna */ .form-dialicare { background-color: #ffffff; padding: 40px !important; /* Forzamos el padding */ border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); border-top: 5px solid #E30613; /* El borde rojo arriba */ } /* Estilo de los Inputs (Cajas de texto) de Duda */ .form-dialicare .dm-form-field input, .form-dialicare .dm-form-field textarea { background-color: #ffffff !important; border: 1px solid #ddd !important; border-radius: 8px !important; padding: 15px !important; font-size: 1rem !important; color: #333 !important; transition: all 0.3s ease; } /* Efecto al hacer clic en un input */ .form-dialicare .dm-form-field input:focus, .form-dialicare .dm-form-field textarea:focus { border-color: #E30613 !important; background-color: #fffbfb !important; outline: none !important; } /* Estilo del Botón de Enviar de Duda */ .form-dialicare .dm-form-submit { text-align: center; /* Centrar botón */ margin-top: 20px; } .form-dialicare .dm-button, .form-dialicare input[type="submit"] { background-color: #E30613 !important; /* Rojo Oficial */ color: white !important; width: 100% !important; /* Botón ancho completo */ border-radius: 8px !important; padding: 15px !important; font-weight: 700 !important; font-size: 1.1rem !important; text-transform: none !important; border: none !important; transition: transform 0.2s ease !important; } .form-dialicare .dm-button:hover, .form-dialicare input[type="submit"]:hover { background-color: #c40510 !important; transform: translateY(-2px); } /* Ocultar etiquetas feas si quieres (opcional) */ /* .form-dialicare label { font-weight: 600; color: #333; } */ /* --- CONFIGURACIÓN FOOTER --- */ .site-footer { background-color: #1a1a1a; /* Gris Oscuro */ color: #b0b0b0; /* Texto gris claro para lectura suave */ padding: 60px 20px 20px; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; } .footer-container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; } /* --- COLUMNAS --- */ .footer-logo { color: white; font-size: 1.8rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 20px; /* Si usas imagen, borra las lineas de arriba y pon esto: */ /* display: block; max-width: 150px; filter: brightness(0) invert(1); */ } .footer-desc { line-height: 1.6; margin-bottom: 25px; } .footer-col h3 { color: white; font-size: 1.2rem; margin-bottom: 20px; border-left: 3px solid #E30613; /* Detalle rojo a la izquierda del título */ padding-left: 10px; } /* --- REDES SOCIALES --- */ .social-links { display: flex; gap: 15px; } .social-links a { background-color: #333; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; text-decoration: none; transition: all 0.3s ease; } .social-links a:hover { background-color: #E30613; /* Rojo al pasar el mouse */ transform: translateY(-3px); } /* --- MENÚS --- */ .footer-menu, .contact-list { list-style: none; padding: 0; margin: 0; } .footer-menu li { margin-bottom: 12px; } .footer-menu a { color: #b0b0b0; text-decoration: none; transition: color 0.3s ease; display: inline-block; } .footer-menu a:hover { color: #E30613; transform: translateX(5px); /* Pequeño desplazamiento a la derecha */ } /* --- LISTA DE CONTACTO CON ICONOS --- */ .contact-list li { display: flex; gap: 12px; margin-bottom: 15px; align-items: flex-start; } .contact-list i { color: #E30613; margin-top: 4px; } .contact-list a { color: #b0b0b0; text-decoration: none; transition: color 0.3s; } .contact-list a:hover { color: white; } /* --- BARRA INFERIOR --- */ .footer-bottom { max-width: 1100px; margin: 0 auto; border-top: 1px solid #333; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 0.85rem; } .legal-links a { color: #888; text-decoration: none; margin: 0 10px; transition: color 0.3s; } .legal-links a:hover { color: #E30613; } /* --- RESPONSIVO --- */ @media (max-width: 768px) { .footer-bottom { flex-direction: column; text-align: center; } .footer-col { text-align: center; } .footer-col h3 { border-left: none; /* Quitar borde lateral en móvil */ border-bottom: 2px solid #E30613; /* Poner borde abajo */ display: inline-block; padding-bottom: 5px; } .social-links { justify-content: center; } .contact-list li { justify-content: center; } } /* ====================================================== ACTUALIZACIÓN DE COLOR OFICIAL (ROJO DIALICARE) Color: rgb(249, 22, 6) -> Hex: #F91606 ====================================================== */ /* 1. TEXTOS Y TÍTULOS EN ROJO */ .highlight-text, .section-header .subtitle, .section-tag, .highlight, .text-link, .sub-heading, .tag-location, .tech-highlight strong, .experience-badge .years, .contact-list i, .footer-bottom i { color: #F91606 !important; } /* 2. ICONOS (Servicios, Info, Pasos) */ .card-icon i, .feature-list i, .access-card i, .info-item i, .tech-list i, .check-icon { color: #F91606 !important; /* Mantiene el degradado sutil en iconos grandes si lo tenían */ background: -webkit-linear-gradient(#F91606, #ff4d4d) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* 3. FONDOS SÓLIDOS (Botones, Etiquetas) */ .btn-main, .btn-submit, .tech-header, .form-dialicare .dm-button, .form-dialicare input[type="submit"], .social-links a:hover { background-color: #F91606 !important; } /* 4. SECCIÓN CTA (La franja roja grande) */ .cta-section { background-color: #F91606 !important; background-image: linear-gradient(135deg, #F91606 0%, #d10f00 100%) !important; } /* 5. BORDES Y DETALLES */ .service-card:hover, .highlight-card, .tech-box, .form-card, .form-dialicare { border-color: #F91606 !important; } .footer-col h3 { border-left-color: #F91606 !important; /* La línea vertical del footer */ } .service-card:hover .card-icon { background-color: #F91606 !important; /* Fondo del icono al pasar mouse */ } /* Efecto Hover en Botones (un poco más oscuro) */ .btn-main:hover, .btn-submit:hover, .form-dialicare .dm-button:hover { background-color: #d10f00 !important; } /* ====================================================== CORRECCIÓN FINAL: ICONOS SERVICIOS (SOLO ZOOM) ====================================================== */ /* 1. Eliminar el fondo rojo de la caja del icono al pasar el mouse */ .service-card:hover .card-icon { background-color: transparent !important; /* Quita el cuadro rojo de fondo */ transform: scale(1.1) !important; /* Mantiene el efecto de crecimiento (Zoom) */ border: none !important; } /* 2. Asegurar que el icono se mantenga ROJO (y no cambie a blanco) */ .service-card:hover .card-icon i, .service-card:hover .card-icon svg { color: #F91606 !important; /* Rojo Oficial */ /* Mantiene el degradado elegante del icono */ background: -webkit-linear-gradient(#F91606, #ff4d4d) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ====================================================== CORRECCIÓN FINAL: FORZAR FONDO GRIS EN CTA (Esto elimina el rojo anterior) ====================================================== */ .cta-section { /* 1. ¡ESTO ES LA CLAVE! Elimina el degradado rojo que lo tapa todo */ background-image: none !important; /* 2. Aplica el fondo gris oscuro */ background-color: #131e29 !important; /* 3. Asegura texto blanco */ color: #ffffff !important; } /* Ajustes rápidos para que los textos se lean bien sobre el nuevo fondo oscuro */ .cta-text h2, .action-title { color: #ffffff !important; /* Títulos blancos */ } .cta-label, .schedule-text, .small-note { color: #e0e0e0 !important; /* Textos secundarios gris claro */ } .cta-icon-box i { color: #F91606 !important; /* El icono del reloj en rojo oficial */ } /* CORRECCIÓN VISIBILIDAD: DOMINGOS CERRADO EN FONDO OSCURO */ .cta-section .sunday-note { color: #ff9999 !important; /* Rojo pastel muy claro para que se lea bien */ opacity: 1 !important; /* Quitamos transparencia para máxima nitidez */ font-weight: 500 !important; /* Un poco más gordita la letra */ } /* ====================================================== DISEÑO DE HEADER - VERSIÓN #flex-header (TODO TERRENO) ====================================================== */ /* 1. FONDO BLANCO Y SOMBRA (Atacamos ID y Clase a la vez) */ #flex-header, .flex-header, #dm_header, div[data-region="header"] { background-color: #ffffff !important; background-image: none !important; box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; } /* Forzar transparencia en contenedores internos para que se vea el blanco */ #flex-header *, .flex-header * { background-color: transparent !important; /* Nota: Esto limpia fondos internos, pero respetará el botón rojo porque lo definimos abajo */ } /* 2. TIPOGRAFÍA Y ENLACES */ #flex-header a, .flex-header a, #dm_header a { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 0.9rem !important; text-decoration: none !important; letter-spacing: 1px !important; color: #1a1a1a !important; /* Negro por defecto */ } /* Hover (Rojo) para enlaces que NO son botones */ #flex-header a:not(.dm-button):not([class*="button"]):hover, .flex-header a:not(.dm-button):not([class*="button"]):hover { color: #F91606 !important; } /* 3. BOTÓN "AGENDAR CITA" (Rojo) */ /* Recuperamos el fondo rojo para los botones */ #flex-header .dm-button, .flex-header .dm-button, #flex-header a[class*="button"], .flex-header a[class*="button"] { background-color: #F91606 !important; /* ROJO OFICIAL */ color: #ffffff !important; border: 2px solid #F91606 !important; border-radius: 50px !important; font-weight: 700 !important; padding: 10px 30px !important; box-shadow: 0 5px 15px rgba(249, 22, 6, 0.2) !important; } /* Hover del Botón */ #flex-header .dm-button:hover, .flex-header .dm-button:hover, #flex-header a[class*="button"]:hover, .flex-header a[class*="button"]:hover { background-color: #ffffff !important; color: #F91606 !important; transform: translateY(-2px) !important; } /* 4. MENÚ MÓVIL (Hamburguesa roja) */ #flex-header svg, .flex-header svg, #flex-header i, .flex-header i { fill: #F91606 !important; color: #F91606 !important; } //* ====================================================== SOLUCIÓN FINAL REFORZADA: WIDGET DE ENLACE (dmButtonLink) ====================================================== */ /* 1. ESTADO NORMAL DEL BOTÓN */ /* Usamos #flex-header al principio para darle máxima prioridad */ #flex-header .dmButtonLink, #flex-header [data-widget-type="link"] a, .dmButtonLink, [data-widget-type="link"] a { /* FORZAR VISIBILIDAD Y FORMA */ display: inline-flex !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; /* COLORES OFICIALES (Rojo sólido, Texto blanco) */ background-color: #F91606 !important; background-image: none !important; color: #ffffff !important; /* BORDES Y TAMAÑO */ padding: 12px 30px !important; border-radius: 50px !important; border: 2px solid #F91606 !important; /* TIPOGRAFÍA */ text-decoration: none !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; text-transform: capitalize !important; font-size: 0.9rem !important; /* Asegurar tamaño de letra */ /* ALINEACIÓN */ align-items: center !important; justify-content: center !important; box-shadow: 0 4px 10px rgba(249, 22, 6, 0.3) !important; transition: all 0.3s ease !important; /* Suavizar la transición */ } /* 2. FORZAR COLOR DEL TEXTO INTERNO */ /* Por si el texto está dentro de un 'span' que tiene otro color */ #flex-header .dmButtonLink *, .dmButtonLink * { color: #ffffff !important; } /* 3. HOVER (Efecto al pasar el mouse) */ /* Hacemos el selector más específico para que no falle */ #flex-header .dmButtonLink:hover, #flex-header [data-widget-type="link"] a:hover, .dmButtonLink:hover, [data-widget-type="link"] a:hover { background-color: #ffffff !important; /* Fondo blanco */ color: #F91606 !important; /* Texto rojo */ border-color: #F91606 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(249, 22, 6, 0.4) !important; } /* 4. HOVER DEL TEXTO INTERNO */ #flex-header .dmButtonLink:hover *, .dmButtonLink:hover * { color: #F91606 !important; } /* ====================================================== CORRECCIÓN FINAL: BOTÓN SÓLIDO (MATAR TRANSPARENCIA) ====================================================== */ /* 1. ESTADO NORMAL (Sin pasar el mouse) */ #flex-header .dmButtonLink, #flex-header [data-widget-type="link"] a, .dmButtonLink { /* FONDO: Usamos 'background' para anular gradientes o transparencias */ background: #F91606 !important; /* TEXTO: Blanco para que contraste con el rojo */ color: #ffffff !important; /* BORDE Y FORMA */ border: 2px solid #F91606 !important; border-radius: 50px !important; /* VISIBILIDAD */ opacity: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* TAMAÑO Y ESPACIO */ padding: 10px 30px !important; width: auto !important; min-height: 45px !important; /* Altura mínima para que no se vea aplastado */ /* TIPOGRAFÍA */ font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; text-transform: capitalize !important; text-decoration: none !important; box-shadow: 0 4px 10px rgba(249, 22, 6, 0.3) !important; } /* 2. ASEGURAR COLOR DEL TEXTO INTERNO */ /* A veces el texto está dentro de otra etiqueta que lo vuelve invisible */ #flex-header .dmButtonLink *, .dmButtonLink * { color: #ffffff !important; } /* 3. HOVER (Al pasar el mouse) */ #flex-header .dmButtonLink:hover, #flex-header [data-widget-type="link"] a:hover, .dmButtonLink:hover { background: #ffffff !important; /* Fondo Blanco */ color: #F91606 !important; /* Texto Rojo */ border-color: #F91606 !important; transform: translateY(-2px) !important; } /* 4. HOVER DEL TEXTO INTERNO */ #flex-header .dmButtonLink:hover *, .dmButtonLink:hover * { color: #F91606 !important; } /* ========================================= DISEÑO WIDGET CONTACTO EN MENÚ MÓVIL ========================================= */ .mobile-contact-widget { font-family: 'Montserrat', sans-serif; padding: 20px 0; border-top: 1px solid #eee; /* Línea separadora sutil */ margin-top: 20px; } .mob-title { color: #1a1a1a; font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; } .mob-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; } /* Iconos Rojos */ .mobile-contact-widget i { color: #F91606; /* Rojo Oficial */ font-size: 1.2rem; width: 20px; text-align: center; } /* Enlaces */ .mob-item a { color: #555; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s; } .mob-item a:hover { color: #F91606; } /* Dirección (texto más pequeño) */ .mob-address { display: flex; gap: 12px; margin-top: 15px; font-size: 0.85rem; color: #777; line-height: 1.4; } /* ====================================================== TRANSFORMACIÓN ESTILO FRAMER (INSPIRACIÓN HEALIS/MEDIAID) ====================================================== */ /* 1. FONDO GENERAL MÁS MODERNO */ /* Cambiamos el fondo de servicios de gris plano a un degradado sutil */ .services-section, .info-section { background: linear-gradient(180deg, #fcfcfc 0%, #f4f6f9 100%) !important; } /* 2. TARJETAS DE SERVICIOS "PREMIUM" (Estilo Healis) */ .service-card { border-radius: 24px !important; /* Bordes mucho más redondeados */ border: 1px solid rgba(0,0,0,0.04) !important; /* Borde casi invisible */ box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important; /* Sombra ultra suave */ background: #ffffff !important; padding: 40px 30px !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Animación fluida */ } /* Efecto Hover sofisticado */ .service-card:hover { transform: translateY(-8px) !important; /* Flota hacia arriba */ box-shadow: 0 20px 40px rgba(249, 22, 6, 0.08) !important; /* Sombra roja muy sutil */ border-color: rgba(249, 22, 6, 0.2) !important; } /* 3. TIPOGRAFÍA DE TÍTULOS (Estilo Mediaid) */ /* Títulos grandes más compactos y modernos */ .section-header h2, .hero-content h1, .about-content h2, .info-column-left h2, .contact-info h2 { letter-spacing: -0.5px !important; /* Letras un poco más juntas */ color: #111 !important; /* Negro casi puro */ font-weight: 800 !important; } /* Subtítulos (Esos textos pequeños arriba de los títulos) */ .section-header .subtitle, .section-tag, .tag-location { background-color: rgba(249, 22, 6, 0.08) !important; /* Fondo rojo muy claro */ padding: 6px 12px !important; border-radius: 30px !important; /* Forma de píldora */ display: inline-block !important; margin-bottom: 15px !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* 4. FORMULARIO CONTACTO (Estilo Clean/Minimalista) */ .form-dialicare, .form-card { border-radius: 24px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.03) !important; border-top: none !important; /* Quitamos el borde rojo grueso de arriba para ser más minimalistas */ } /* Inputs más amigables (tipo Healis) */ .form-dialicare input, .form-dialicare textarea, .custom-form input { background-color: #f9f9f9 !important; /* Fondo gris muy claro */ border: 1px solid transparent !important; /* Sin borde visible al inicio */ border-radius: 12px !important; /* Inputs redondeados */ padding: 16px !important; transition: all 0.3s ease !important; } .form-dialicare input:focus, .form-dialicare textarea:focus { background-color: #ffffff !important; border-color: rgba(249, 22, 6, 0.3) !important; /* Borde rojo suave al escribir */ box-shadow: 0 4px 12px rgba(249, 22, 6, 0.05) !important; } /* ====================================================== NUEVO CTA ESTILO "FRAMER / MEDIAID" (Caja Flotante) ====================================================== */ /* 1. EL FONDO DE LA SECCIÓN (Transparente para que la caja "flote") */ .cta-section { background-color: transparent !important; background-image: none !important; border-top: none !important; /* Quitamos bordes viejos */ padding: 60px 20px !important; /* Espacio alrededor de la tarjeta */ } /* 2. LA TARJETA "BENTO" (El contenedor rojo redondeado) */ .cta-container { background: linear-gradient(135deg, #F91606 0%, #d10f00 100%) !important; /* Rojo Oficial Vibrante */ border-radius: 32px !important; /* Bordes MUY redondeados (Clave del estilo Framer) */ padding: 60px 50px !important; /* Sombra de Elevación (Hace que parezca que flota) */ box-shadow: 0 25px 50px rgba(249, 22, 6, 0.25) !important; /* Layout */ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px; max-width: 1100px; margin: 0 auto; /* Centrado */ position: relative; overflow: hidden; /* Para contener brillos */ } /* 3. TEXTOS (Blanco Puro para máximo contraste) */ .cta-text h2 { color: #ffffff !important; font-size: 2.8rem !important; /* Título grande */ letter-spacing: -1px !important; /* Letras compactas modernas */ margin-bottom: 10px !important; } .schedule-text, .cta-label, .sunday-note { color: rgba(255, 255, 255, 0.9) !important; /* Blanco suave */ text-shadow: none !important; } .sunday-note { background: rgba(0,0,0,0.2); /* Pequeña pastilla oscura para el aviso */ padding: 5px 15px; border-radius: 20px; font-size: 0.85rem !important; display: inline-block; margin-top: 10px; color: #fff !important; } /* 4. ICONO DECORATIVO (Sutil de fondo) */ .cta-icon-box i { color: rgba(255, 255, 255, 0.2) !important; /* Blanco muy transparente */ font-size: 5rem !important; } /* 5. EL BOTÓN (Pastilla Blanca) */ .btn-white-cta { background-color: #ffffff !important; color: #F91606 !important; /* Texto Rojo */ font-weight: 800 !important; padding: 20px 45px !important; /* Botón grande y "gordito" */ border-radius: 100px !important; border: none !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; font-size: 1.1rem !important; } .btn-white-cta:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important; background-color: #fcfcfc !important; } /* 6. LIMPIEZA DE ESTILOS ANTERIORES */ /* Quitamos los bordes y fondos de la caja derecha vieja para que se integre */ .cta-action { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; backdrop-filter: none !important; min-width: auto !important; } .action-title, .small-note { display: none !important; /* Ocultamos textos redundantes para limpiar el diseño (estilo minimalista) */ } /* 7. AJUSTE MÓVIL */ @media (max-width: 768px) { .cta-container { padding: 40px 25px !important; text-align: center; flex-direction: column; border-radius: 24px !important; } .cta-text h2 { font-size: 2.2rem !important; } .cta-info { flex-direction: column; gap: 10px; } } /* ====================================================== MEJORA FRAMER: SECCIÓN NOSOTROS (ABOUT) ====================================================== */ /* 1. IMAGEN MÁS ORGÁNICA */ .about-img { border-radius: 32px !important; /* Esquinas uniformemente redondeadas */ box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; /* Sombra difusa */ height: 500px !important; /* Un poco más alta para presencia */ } /* 2. ETIQUETA "5+ AÑOS" ESTILO GLASSMORPHISM (Vidrio) */ .experience-badge { background: rgba(255, 255, 255, 0.85) !important; /* Blanco semitransparente */ backdrop-filter: blur(12px) !important; /* EFECTO DE VIDRIO BORROSO */ -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; border-radius: 20px !important; padding: 20px 30px !important; /* Reposicionamiento para que flote más elegante */ bottom: 40px !important; right: -30px !important; /* Que se salga un poco más para dar profundidad */ } /* Ajuste del texto dentro del badge */ .experience-badge .years { color: #F91606 !important; text-shadow: 0 2px 10px rgba(249, 22, 6, 0.15) !important; /* Brillo suave en el número */ } /* 3. LISTA DE CARACTERÍSTICAS TIPO "SMART CHIPS" */ .feature-list { display: flex !important; flex-direction: column !important; gap: 15px !important; } .feature-list li { background-color: #f8f9fa !important; /* Fondo gris muy claro */ padding: 18px 25px !important; border-radius: 16px !important; /* Bordes redondeados */ border: 1px solid transparent !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; /* Alinear icono y texto */ margin-bottom: 0 !important; /* Quitamos margen viejo */ } /* Efecto al pasar el mouse sobre cada punto */ .feature-list li:hover { background-color: #ffffff !important; border-color: rgba(249, 22, 6, 0.1) !important; transform: translateX(10px) !important; /* Pequeño movimiento a la derecha */ box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; } /* Iconos de la lista */ .feature-list i { background-color: rgba(249, 22, 6, 0.1) !important; /* Círculo rojo claro de fondo */ color: #F91606 !important; width: 35px !important; height: 35px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; margin-right: 15px !important; margin-top: 0 !important; /* Corrección de alineación */ font-size: 1rem !important; } /* Textos de la lista */ .feature-list strong { font-size: 1rem !important; color: #1a1a1a !important; } .feature-list p { font-size: 0.9rem !important; margin-top: 2px !important; opacity: 0.8 !important; } /* RESPONSIVO: Ajuste para que no se rompa en móvil */ @media (max-width: 900px) { .experience-badge { right: 50% !important; transform: translateX(50%) !important; /* Centrado en móvil */ bottom: -20px !important; width: 80% !important; justify-content: center; } .about-img { height: 350px !important; } } /* ====================================================== MEJORA FRAMER: SECCIÓN INFO & TECNOLOGÍA (Dark Card) ====================================================== */ /* 1. TRANSFORMAR LA CAJA DE TECNOLOGÍA A "DARK MODE" */ .tech-box { background-color: #1a1a1a !important; /* Gris casi negro muy elegante */ color: #ffffff !important; /* Texto blanco */ border-radius: 32px !important; /* Bordes Framer */ padding: 50px 40px !important; box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important; /* Sombra profunda */ border: 1px solid rgba(255,255,255,0.1) !important; /* Borde sutil brillante */ border-top: none !important; /* Quitamos el borde rojo viejo */ position: relative !important; overflow: hidden !important; /* Para efectos de brillo */ } /* Títulos y Textos dentro de la caja oscura */ .tech-box h3 { color: #ffffff !important; font-size: 1.8rem !important; margin-bottom: 20px !important; } .tech-intro, .tech-list li, .tech-highlight p { color: #cccccc !important; /* Gris claro para lectura suave sobre fondo negro */ } /* Iconos dentro de la caja oscura */ .tech-list i { color: #F91606 !important; /* El rojo resalta muchísimo sobre negro */ background: rgba(249, 22, 6, 0.15) !important; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 10px; } /* La etiqueta flotante "TECNOLOGÍA" */ .tech-header { background-color: #ffffff !important; /* Etiqueta blanca */ color: #1a1a1a !important; /* Texto negro */ top: 30px !important; right: 30px !important; padding: 8px 18px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important; } /* 2. TARJETAS DE ACCESOS (Fístula/Catéter) - Estilo UI Clean */ .access-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.05) !important; /* Borde sutil */ border-radius: 20px !important; padding: 25px !important; box-shadow: 0 10px 20px rgba(0,0,0,0.03) !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; border-left: none !important; /* Quitamos el borde lateral viejo */ margin-bottom: 20px !important; } /* Hover Interactivo */ .access-card:hover { transform: translateX(10px) scale(1.02) !important; /* Pequeño desplazamiento y zoom */ box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important; border-color: rgba(249, 22, 6, 0.3) !important; } /* Iconos de las tarjetas de acceso */ .access-card i { font-size: 1.8rem !important; background-color: #fff0ef !important; /* Fondo rojo muy pálido */ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 16px !important; /* Cuadrado redondeado (estilo iOS) */ margin-right: 15px; color: #F91606 !important; flex-shrink: 0; /* Que no se aplaste */ } /* 3. PEQUEÑO DETALLE EN LISTA IZQUIERDA */ .tag-educational { background-color: #e6f0ff !important; /* Azul muy suave */ color: #0056b3 !important; /* Texto azul profesional */ border-radius: 6px !important; letter-spacing: 1px !important; } /* ====================================================== CORRECCIÓN: LEGIBILIDAD EN CAJA OSCURA (TECH BOX) ====================================================== */ /* 1. TEXTOS MÁS BRILLANTES */ /* Hacemos que la descripción y la lista sean casi blancas para que se lean perfecto */ .tech-box p, .tech-intro, .tech-list li, .tech-box .main-text { color: #f0f0f0 !important; /* Blanco hueso mucho más legible */ font-weight: 400 !important; line-height: 1.6 !important; } /* 2. CAJA DE "RESULTADO" (La de abajo) CON MÁXIMO CONTRASTE */ /* La convertimos en una tarjeta blanca dentro de la tarjeta negra */ .tech-highlight { background-color: #ffffff !important; /* Fondo blanco puro */ border-radius: 16px !important; padding: 20px !important; margin-top: 25px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; } /* Título rojo dentro de la cajita blanca */ .tech-highlight strong { color: #F91606 !important; font-size: 1.1rem !important; display: block !important; margin-bottom: 8px !important; } /* Texto negro dentro de la cajita blanca */ .tech-highlight p { color: #333333 !important; /* Gris oscuro para lectura fácil */ font-size: 0.95rem !important; } /* 3. ICONOS DE LA LISTA MÁS VIBRANTES */ .tech-list i { background: rgba(249, 22, 6, 0.2) !important; /* Fondo rojo un poco más fuerte */ color: #ff4d4d !important; /* Rojo brillante tipo luz neón */ box-shadow: 0 0 10px rgba(249, 22, 6, 0.4) !important; /* Pequeño brillo */ } /* ====================================================== MEJORA FRAMER: SECCIÓN HERO (Bento Style) ====================================================== */ /* 1. CONTENEDOR PRINCIPAL (Más aire y espacio) */ .medical-hero { padding: 80px 20px 100px !important; /* Más espacio arriba y abajo */ background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%) !important; /* Degradado muy sutil */ } .container { align-items: center !important; /* Asegura centrado vertical */ gap: 60px !important; /* Más separación entre texto e imagen */ } /* 2. CONTENIDO DE TEXTO (Convertirlo en una "Tarjeta" sutil) */ .hero-content { background: rgba(255,255,255,0.8) !important; /* Fondo casi transparente */ backdrop-filter: blur(10px) !important; /* Efecto vidrio sutil */ padding: 40px !important; border-radius: 32px !important; /* Bordes muy redondeados */ box-shadow: 0 20px 40px rgba(0,0,0,0.03) !important; /* Sombra ultra suave */ border: 1px solid rgba(0,0,0,0.03) !important; } /* Título Principal Moderno */ .hero-content h1 { font-size: 3.2rem !important; /* Un poco más grande */ letter-spacing: -1px !important; /* Letras más compactas */ color: #111 !important; /* Negro intenso */ line-height: 1.15 !important; } /* Subtítulo */ .hero-desc { font-size: 1.15rem !important; color: #555 !important; line-height: 1.7 !important; max-width: 90% !important; } /* 3. IMAGEN PRINCIPAL (Estilo Flotante Premium) */ .main-img { border-radius: 32px !important; /* Coincide con el resto del sitio */ box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03) !important; /* Sombra doble para más profundidad */ transform: perspective(1000px) rotateY(-2deg) !important; /* Sutil inclinación 3D (opcional, se ve muy moderno) */ transition: all 0.5s ease !important; } /* Efecto interactivo al pasar el mouse por la imagen */ .main-img:hover { transform: perspective(1000px) rotateY(0deg) translateY(-10px) !important; /* Se endereza y flota */ box-shadow: 0 40px 80px rgba(249, 22, 6, 0.1) !important; /* Sombra roja sutil */ } /* 4. BOTÓN PRINCIPAL (Más grande y llamativo) */ .btn-main { padding: 16px 40px !important; /* Más gordito */ font-size: 1.1rem !important; border-radius: 100px !important; /* Completamente redondo */ box-shadow: 0 10px 25px rgba(249, 22, 6, 0.3) !important; } .btn-main:hover { box-shadow: 0 15px 35px rgba(249, 22, 6, 0.4) !important; transform: translateY(-3px) !important; } /* RESPONSIVO */ @media (max-width: 900px) { .hero-content { padding: 30px 20px !important; /* Menos padding en móvil */ text-align: center !important; } .hero-content h1 { font-size: 2.4rem !important; } .main-img { transform: none !important; /* Quitar efecto 3D en móvil para simplificar */ box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; } } /* ====================================================== MEJORA SERVICIOS: ICONOS EN BURBUJA & DESTACADO ====================================================== */ /* 1. ICONOS DENTRO DE BURBUJAS SUAVES (Estilo App) */ .card-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 80px !important; height: 80px !important; background-color: #fff5f5 !important; /* Rojo ultra pálido de fondo */ border-radius: 24px !important; /* Forma de 'Squircle' moderna */ margin-bottom: 25px !important; transition: all 0.3s ease !important; } /* Ajuste del icono dentro de la burbuja */ .card-icon i { font-size: 2rem !important; /* Tamaño controlado */ margin: 0 !important; /* Aseguramos que el icono sea Rojo Oficial */ color: #F91606 !important; background: none !important; -webkit-text-fill-color: #F91606 !important; } /* Efecto al pasar el mouse sobre la tarjeta (Animación del icono) */ .service-card:hover .card-icon { transform: scale(1.1) rotate(-3deg) !important; /* Pequeño giro divertido */ background-color: #ffe0de !important; /* Se oscurece un poquito el fondo */ } /* 2. MEJORA TARJETA DESTACADA "PAQUETES" */ .highlight-card { border: 2px solid #F91606 !important; /* Borde más definido */ background: linear-gradient(180deg, #fffbfb 0%, #ffffff 100%) !important; /* Degradado sutil */ position: relative !important; overflow: hidden !important; } /* Etiqueta de "Recomendado" (Badge flotante) */ .highlight-card::before { content: 'POPULAR'; position: absolute; top: 15px; right: 15px; background-color: #F91606; color: white; font-size: 0.65rem; font-weight: 800; padding: 5px 10px; border-radius: 20px; letter-spacing: 1px; z-index: 2; } /* 3. TIPOGRAFÍA DE LAS TARJETAS */ .service-card h3 { font-size: 1.25rem !important; margin-bottom: 12px !important; color: #111 !important; } .service-card p { font-size: 0.95rem !important; color: #666 !important; line-height: 1.6 !important; } /* ====================================================== CORRECCIÓN FINAL: ALINEACIÓN PERFECTA (DOBLE TARJETA) ====================================================== */ /* 1. CONVERTIR LA INFO DERECHA EN TARJETA (Igual al Formulario) */ .contact-info-block { background-color: #ffffff !important; /* Fondo blanco */ padding: 40px 30px !important; /* Espacio interno generoso */ border-radius: 24px !important; /* Bordes redondeados Framer */ box-shadow: 0 20px 60px rgba(0,0,0,0.06) !important; /* Sombra suave idéntica */ border: 1px solid rgba(0,0,0,0.03) !important; /* Truco para que se vea cuadrada y llena */ height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; /* Centra el contenido verticalmente si sobra espacio */ } /* 2. AJUSTAR EL MAPA DENTRO DE LA TARJETA */ .map-wrapper { margin-top: 25px !important; border-radius: 16px !important; /* Bordes redondos en el mapa */ border: none !important; /* Quitamos bordes viejos */ overflow: hidden !important; box-shadow: none !important; /* Ya no necesita sombra externa */ width: 100% !important; } /* 3. ALINEAR LOS TÍTULOS VISUALMENTE */ /* Ajustamos el margen del título derecho para que coincida con el izquierdo */ .contact-info-block h2 { margin-top: 0 !important; line-height: 1.2 !important; } .tag-location { margin-bottom: 15px !important; display: inline-block !important; } /* 4. SI USAS FLEXBOX EN LA FILA (Opcional, ayuda a igualar alturas) */ /* Intenta forzar que ambas columnas tengan la misma altura visual */ .contact-section .row, [data-layout="row"] { display: flex !important; align-items: stretch !important; } @media (max-width: 768px) { .contact-info-block { margin-top: 30px !important; /* Separación en celular */ padding: 30px 20px !important; } } /* ====================================================== ARREGLO FINAL FOOTER: COLOR Y VISIBILIDAD ====================================================== */ /* 1. FORZAR COLOR BLANCO EN TÍTULOS (Más específico) */ footer h1, footer h2, footer h3, footer h4, footer h5, .footer-region h3, .footer-region h4, [data-region="footer"] h3, [data-region="footer"] h4, [data-region="footer"] .widget-title, [data-region="footer"] strong, [data-region="footer"] span[style*="color"] { /* Sobrescribe estilos en línea */ color: #ffffff !important; font-family: 'Montserrat', sans-serif !important; text-shadow: none !important; } /* 2. TEXTOS NORMALES Y ENLACES (Gris claro) */ footer p, footer li, footer a, footer span, [data-region="footer"] p, [data-region="footer"] li, [data-region="footer"] a { color: #cccccc !important; /* Gris muy legible */ text-decoration: none !important; } /* 3. HOVER ENLACES (Blanco al pasar el mouse) */ [data-region="footer"] a:hover { color: #ffffff !important; padding-left: 5px !important; /* Pequeño movimiento */ } /* 4. REDES SOCIALES (Solo WhatsApp, ocultar resto) */ /* Ocultar Facebook e Instagram */ [data-region="footer"] a[href*="facebook"], [data-region="footer"] a[href*="instagram"], [data-region="footer"] .fa-facebook, [data-region="footer"] .fa-instagram { display: none !important; } /* Estilo WhatsApp */ [data-region="footer"] a[href*="whatsapp"], [data-region="footer"] .fa-whatsapp { color: #ffffff !important; background-color: rgba(255,255,255,0.1); padding: 10px; border-radius: 50%; margin-top: 10px; } /* ====================================================== ACTUALIZACIÓN DE IDENTIDAD VISUAL NUVEX 2026 COLOR PRINCIPAL: AZUL MARINO (#1A2B44) COLOR DE ACENTO: AZUL CLARO (#E6F0FF) ====================================================== */ /* 1. TEXTOS, TÍTULOS Y ACENTOS EN AZUL */ .highlight-text, .section-header .subtitle, .section-tag, .highlight, .text-link, .sub-heading, .tag-location, .tech-highlight strong, .experience-badge .years, .contact-list i, .footer-bottom i, .cta-icon-box i { color: #1A2B44 !important; /* Azul Marino Oficial Nuvex */ } /* 2. ICONOS (Servicios, Info, Pasos) con Degradado Azul */ .card-icon i, .feature-list i, .access-card i, .info-item i, .tech-list i { color: #1A2B44 !important; background: -webkit-linear-gradient(#1A2B44, #3a5a8c) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* 3. FONDOS SÓLIDOS (Botones, Etiquetas, Widgets) */ .btn-main, .btn-submit, .tech-header, .form-dialicare .dm-button, .form-dialicare input[type="submit"], .social-links a:hover, #flex-header .dm-button, .dmButtonLink { background-color: #1A2B44 !important; /* Fondo Azul Marino */ color: #ffffff !important; } /* 4. SECCIÓN CTA (Caja BENTO flotante) */ .cta-container { background: linear-gradient(135deg, #1A2B44 0%, #0d1624 100%) !important; /* Degradado Azul Profundo */ box-shadow: 0 25px 50px rgba(26, 43, 68, 0.25) !important; } /* 5. BORDES Y DETALLES INTERACTIVOS */ .service-card:hover, .highlight-card, .tech-box, .form-card, .form-dialicare { border-color: #1A2B44 !important; } .footer-col h3 { border-left-color: #1A2B44 !important; /* Línea vertical del footer */ } /* 6. HOVER Y ESTADOS ACTIVOS (Azul más claro/vibrante) */ .btn-main:hover, .btn-submit:hover, .form-dialicare .dm-button:hover, .dmButtonLink:hover { background-color: #2c4669 !important; /* Un azul un poco más claro para el hover */ color: #ffffff !important; transform: translateY(-2px) !important; } /* Botón especial del CTA (Invertido) */ .btn-white-cta { color: #1A2B44 !important; /* Texto Azul sobre fondo blanco */ background-color: #ffffff !important; } .btn-white-cta:hover { box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3) !important; color: #1A2B44 !important; } /* 7. AJUSTE DE INSIGNIA DE EXPERIENCIA (About) */ .experience-badge { border-left: 5px solid #1A2B44 !important; } .experience-badge .years { text-shadow: 0 2px 10px rgba(26, 43, 68, 0.1) !important; } /* 8. AJUSTE DE HEADER (Navegación) */ #flex-header .dmButtonLink, #flex-header a[class*="button"] { background-color: #1A2B44 !important; border: 2px solid #1A2B44 !important; } #flex-header .dmButtonLink:hover { background-color: #ffffff !important; color: #1A2B44 !important; } /* Hamburguesa móvil y SVGs */ #flex-header svg, .flex-header svg, #flex-header i { fill: #1A2B44 !important; color: #1A2B44 !important; } /* ==================================================================== */ /* System Style Definitions */ /* ==================================================================== */ @media all { :root { --btn-text-direction: ltr; --btn-border-r-color: var(--btn-border-color); --btn-border-l-color: var(--btn-border-color); --btn-border-b-width: var(--btn-border-width); --btn-border-width: 1px; --btn-border-radius: 50px; --btn-border-t-width: var(--btn-border-width); --btn-border-tl-radius: var(--btn-border-radius); --btn-border-br-radius: var(--btn-border-radius); --btn-border-bl-radius: var(--btn-border-radius); --btn-bg-color: var(--color_2); --btn-border-color: rgba(0, 0, 0, 0); --btn-border-tr-radius: var(--btn-border-radius); --btn-border-r-width: var(--btn-border-width); --btn-border-b-color: var(--btn-border-color); --btn-border-l-width: var(--btn-border-width); --btn-border-t-color: var(--btn-border-color); --btn-text-align: center; --btn-text-color: var(--color_7); --btn-text-decoration: none; --btn-text-font-weight: 400; --btn-text-font-family: Lato, "Lato Fallback"; --btn-icon-color: rgb(0, 0, 238); --btn-icon-fill: rgb(0, 0, 238); --btn-icon-wrpr-display: none; --btn-hover-border-b-color: var(--btn-hover-border-color); --btn-hover-bg: rgba(65, 67, 69, 0); --btn-hover-border-t-color: var(--btn-hover-border-color); --btn-hover-border-r-color: var(--btn-hover-border-color); --btn-hover-border-l-color: var(--btn-hover-border-color); --btn-hover-border-color: var(--color_2); --btn-hover-text-color: var(--color_1); --btn-hover-text-font-weight: var(--btn-text-font-weight); --btn-hover-text-decoration: var(--btn-text-decoration); --btn-hover-text-font-style: var(--btn-text-font-style); } .button_2 { --btn-text-direction: ltr; --btn-border-r-color: var(--btn-border-color); --btn-border-l-color: var(--btn-border-color); --btn-border-b-width: var(--btn-border-width); --btn-border-width: 1px; --btn-border-radius: 50px; --btn-border-t-width: var(--btn-border-width); --btn-border-tl-radius: var(--btn-border-radius); --btn-border-br-radius: var(--btn-border-radius); --btn-border-bl-radius: var(--btn-border-radius); --btn-bg-color: rgba(0, 0, 0, 0); --btn-border-color: var(--color_2); --btn-border-tr-radius: var(--btn-border-radius); --btn-border-r-width: var(--btn-border-width); --btn-border-b-color: var(--btn-border-color); --btn-border-l-width: var(--btn-border-width); --btn-border-t-color: var(--btn-border-color); --btn-text-align: center; --btn-text-color: var(--color_2); --btn-text-decoration: none; --btn-text-font-weight: 400; --btn-icon-color: rgb(0, 0, 238); --btn-icon-fill: rgb(0, 0, 238); --btn-icon-wrpr-display: none; --btn-hover-border-b-color: var(--btn-hover-border-color); --btn-hover-bg: rgba(65,67,69,0); --btn-hover-border-t-color: var(--btn-hover-border-color); --btn-hover-border-r-color: var(--btn-hover-border-color); --btn-hover-border-l-color: var(--btn-hover-border-color); --btn-hover-border-color: var(--color_2); --btn-hover-text-color: var(--color_1); --btn-hover-text-font-weight: var(--btn-text-font-weight); --btn-hover-text-decoration: var(--btn-text-decoration); --btn-hover-text-font-style: var(--btn-text-font-style); } :root { --section-padding-top: 4%; --section-padding-left: 0%; --section-padding-right: 0%; --section-padding-bottom: 4%; --column-padding-top: 10px; --column-padding-right: 10px; --column-padding-left: 10px; --column-padding-bottom: 10px; --inner-column-padding-left: 10px; --inner-column-padding-right: 10px; --inner-column-padding-top: 10px; --inner-column-padding-bottom: 10px; } } @media (min-width: 1025px) { :root { --btn-text-font-size: 18px; } } @media (min-width: 768px) and (max-width: 1024px) { :root { --btn-text-font-size: 16px; } } @media (min-width: 768px) and (max-width: 1024px) { :root { --btn-text-font-size: 16px; } .button_2 { --btn-text-font-size: 16px; } :root { --section-padding-left: 2%; --section-padding-right: 2%; } } @media (min-width: 0px) and (max-width: 767px) { :root { --btn-text-font-size: 14px; } } @media (min-width: 0px) and (max-width: 767px) { :root { --btn-text-font-size: 16px; } .button_2 { --btn-text-font-size: 16px; } :root { --section-padding-left: 4%; --section-padding-right: 4%; } } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC'] { border-radius: 7px; background-clip: border-box; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDc1IDQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNDA1MDUiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijc1IiBoZWlnaHQ9IjQwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC']:hover { box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC']:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] { border-radius: 0px; background-clip: border-box; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDc1IDQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNDA1MDUiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijc1IiBoZWlnaHQ9IjQwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC']:hover { box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC']:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] { background-clip: border-box; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] { box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.2), 0 -3px 0 0 #ccc; transition: box-shadow 0.1s ease; position: relative; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 #ccc; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'].flexButton { padding: 13px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] .text { position: relative; top: -3px; transition: all 0.1s ease; padding: 13px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover .text { top: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TRANSPARENT'] { border-radius: 5px / 4px; box-shadow: 0 0 18px rgba(5, 5, 6, 0.3); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS'] { background-clip: border-box; border-radius: 0px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS']:before { content: ""; width: 100%; height: 50%; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.15); display: block; position: absolute; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED'] { border-radius: 21px; background-clip: border-box; box-shadow: 0 3px 3px rgba(5, 5, 6, 0.07), inset 0 0 0 2px rgba(0, 0, 0, 0.1); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTI1IiBoZWlnaHQ9IjM4IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED']:hover { box-shadow: 0 3px 3px rgba(5, 5, 6, 0.1); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTI1IiBoZWlnaHQ9IjM4IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED']:active { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 3px 3px rgba(5, 5, 6, 0.3); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMjUiIGhlaWdodD0iMzgiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] { background-clip: border-box; box-shadow: 0 1px 1px rgba(5, 5, 6, 0.5); padding-left: 46px; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON']:hover { box-shadow: 0 1px 1px rgba(5, 5, 6, 0.5), inset 0 0 0 800px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .iconBg { background-color: #f7f7f7; top: 0; bottom: 0; margin: 0; width: 50px; text-align: center; display: block; height: 100%; border-top-left-radius: inherit; border-bottom-left-radius: inherit; opacity: 1; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .icon { display: inline-block; float: none; position: absolute; top: 50%; left: 0; right: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] { overflow: hidden; background-clip: border-box; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .text { opacity: 1; display: inline-block; transition: all 0.3s; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover .text { opacity: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .iconBg { position: absolute; top: -200%; bottom: 0; margin: auto; width: 100%; left: 0; transition: all 0.3s; opacity: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover .iconBg { top: 0; opacity: 1; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .icon { display: block; float: left; position: absolute; font-size: 27px; width: 100%; height: 100%; margin-top: -13px; top: 50%; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] { overflow: initial; background-clip: border-box; border-radius: 2px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] { border-radius: 6px; overflow: initial; background-clip: border-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] { background-clip: border-box; border-radius: 6px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] { background-clip: border-box; border-radius: 3px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ICON'] { background-clip: border-box; border-radius: 0px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] { background-clip: border-box; border-radius: 6px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'].flexButton { padding: 10px 7px 10px 47px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .iconBg { display: block; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] { overflow: initial; background-clip: border-box; border-radius: 1px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'].flexButton { padding: 16px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] .text { padding: 16px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] .iconBg { display: none; } @media (min-width: 768px) { #dm .dmRespRow .dmRespCol > .dmWidget[data-buttonstyle='BORDER_SHORT'], #dm .sticky-widgets-container-global .dmWidget[data-buttonstyle='BORDER_SHORT'], #dm .sticky-widgets-container .dmWidget[data-buttonstyle='BORDER_SHORT'] { width: 222px; } } #dm .dmWidget:not([data-buttonstyle]), div.buttons , #dm .button_2 .dmWidget:not([data-buttonstyle]), #dm .dmWidget.button_2:not([data-buttonstyle]), div.buttons .button_2, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] { border-radius: 50px; } #dm .dmWidget:not([data-buttonstyle]).flexButton, div.buttons .flexButton, #dm .button_2 .dmWidget:not([data-buttonstyle]).flexButton, #dm .dmWidget.button_2:not([data-buttonstyle]).flexButton, div.buttons .button_2.flexButton, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'].flexButton { padding: 10px 0px; } #dm .dmWidget:not([data-buttonstyle]) .textonly, #dm .dmWidget:not([data-buttonstyle]) input, #dm .dmWidget:not([data-buttonstyle]) .text, div.buttons .text, #dm .button_2 .dmWidget:not([data-buttonstyle]) .textonly, #dm .button_2 .dmWidget:not([data-buttonstyle]) input, #dm .button_2 .dmWidget:not([data-buttonstyle]) .text, #dm .dmWidget.button_2:not([data-buttonstyle]) .textonly, #dm .dmWidget.button_2:not([data-buttonstyle]) input, #dm .dmWidget.button_2:not([data-buttonstyle]) .text, div.buttons .button_2 .text, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] .text { padding: 10px 0px; } #dm .dmWidget:not([data-buttonstyle]) .iconBg, #dm .button_2 .dmWidget:not([data-buttonstyle]) .iconBg, #dm .dmWidget.button_2:not([data-buttonstyle]) .iconBg, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] .iconBg { display: none; } #dm div.dmInner #site_content .dmWidget, #dm div.dmInner .dmHeader .dmWidget { background-color: var(--btn-bg-color); border-color: var(--btn-border-color); border-bottom-color: var(--btn-border-b-color); border-left-color: var(--btn-border-l-color); border-right-color: var(--btn-border-r-color); border-top-color: var(--btn-border-t-color); border-radius: var(--btn-border-radius); border-bottom-left-radius: var(--btn-border-bl-radius); border-bottom-right-radius: var(--btn-border-br-radius); border-top-left-radius: var(--btn-border-tl-radius); border-top-right-radius: var(--btn-border-tr-radius); border-width: var(--btn-border-width); border-bottom-width: var(--btn-border-b-width); border-left-width: var(--btn-border-l-width); border-right-width: var(--btn-border-r-width); border-top-width: var(--btn-border-t-width); direction: var(--btn-text-direction); text-align: var(--btn-text-align); } #dm div.dmInner #site_content .dmWidget span.text, #dm div.dmInner #site_content .dmformsubmit input { color: var(--btn-text-color); font-family: var(--btn-text-font-family); font-size: var(--btn-text-font-size); font-weight: var(--btn-text-font-weight); text-decoration: var(--btn-text-decoration); } #dm div.dmInner #site_content .dmWidget:hover, #dm div.dmInner #site_content .dmWidget.hover, #dm div.dmInner .dmHeader .dmWidget:hover, #dm div.dmInner .dmHeader .dmWidget.hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border-color); border-bottom-color: var(--btn-hover-border-b-color); border-left-color: var(--btn-hover-border-l-color); border-right-color: var(--btn-hover-border-r-color); border-top-color: var(--btn-hover-border-t-color); } #dm div.dmInner #site_content .dmWidget:hover span.text, #dm div.dmInner #site_content .dmWidget.hover span.text, #dm div.dmInner .dmHeader .dmWidget:hover span.text, #dm div.dmInner .dmHeader .dmWidget.hover span.text, #dm div.dmInner #site_content .dmWidget:hover input[type="submit"], #dm div.dmInner #site_content .dmWidget.hover input[type="submit"], #dm div.dmInner .dmHeader .dmWidget:hover input[type="submit"], #dm div.dmInner .dmHeader .dmWidget.hover input[type="submit"] { color: var(--btn-hover-text-color); } #dm div.dmInner #site_content .dmWidget span.icon, #dm div.dmInner .dmHeader .dmWidget span.icon { color: var(--btn-icon-color); fill: var(--btn-icon-fill); } #dm div.dmInner #site_content .dmWidget:not([data-buttonstyle]) .iconBg, #dm div.dmInner .dmHeader .dmWidget:not([data-buttonstyle]) .iconBg { display: var(--btn-icon-wrpr-display); } .dmBody [data-layout-grid] > .flex-element.group, .dmFooterContainer [data-layout-grid] > .flex-element.group { padding-bottom: var(--section-padding-bottom); padding-left: var(--section-padding-left); padding-right: var(--section-padding-right); padding-top: var(--section-padding-top); } .dmBody [data-layout-grid] > .flex-element.group > .flex-element.group, .dmFooterContainer [data-layout-grid] > .flex-element.group > .flex-element.group { padding-bottom: var(--column-padding-bottom); padding-left: var(--column-padding-left); padding-right: var(--column-padding-right); padding-top: var(--column-padding-top); } .dmBody [data-layout-grid] > .flex-element.group > .flex-element.group .flex-element.group:not([data-layout-type] *):not([data-layout-type]), .dmFooterContainer [data-layout-grid] > .flex-element.group > .flex-element.group .flex-element.group:not([data-layout-type] *):not([data-layout-type]) { padding-bottom: var(--inner-column-padding-bottom); padding-left: var(--inner-column-padding-left); padding-right: var(--inner-column-padding-right); padding-top: var(--inner-column-padding-top); } @media all { nav.u_1998592992 { color:white !important; } *#dm .dmInner *.u_1306770187 { width:100% !important; } *#dm .dmInner *.u_1581198931 { width:100% !important; } *#dm .dmInner *.u_1040696130 { justify-content:center !important; } *#dm .dmInner *.u_1040696130.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { margin-left:0 !important; padding-top:0 !important; padding-left:20px !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; padding-right:20px !important; } *#dm .dmInner nav.u_1040696130.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:rgba(0,0,0,1) !important; } *#dm .dmInner a.u_1354841978:hover { background-image:none !important; } *#dm .dmInner a.u_1354841978.hover { background-image:none !important; } *#dm .dmInner *.u_1955933514 { width:100% !important; } *#dm .dmInner *.u_1495895470.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { margin-left:0 !important; padding-top:0 !important; padding-left:20px !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; padding-right:20px !important; } *#dm .dmInner nav.u_1495895470.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:rgba(0,0,0,1) !important; } *#dm .dmInner *.u_1495895470 { justify-content:flex-end !important; } *#dm .dmInner *.u_1998592992.main-navigation.unifiednav:not([image]) .unifiednav__container[data-depth="0"] { top:calc(100% - 5px - 0px) !important; } *#dm .dmInner *.u_1998592992.main-navigation.unifiednav[data-nav-structure="HORIZONTAL"] .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child) .unifiednav__container[data-depth="0"] { left:0 !important; } *#dm .dmInner *.u_1998592992.main-navigation.unifiednav[data-nav-structure="SPLIT"] .unifiednav__container:not([data-depth]):not(:last-of-type)>.unifiednav__item-wrap .unifiednav__container[data-depth="0"] { left:0 !important; } *#dm .dmInner *.u_1998592992.main-navigation.unifiednav[data-nav-structure="SPLIT"] .unifiednav__container:not([data-depth]):last-of-type>.unifiednav__item-wrap:not(:last-child) .unifiednav__container[data-depth="0"] { left:0 !important; } *#dm .dmInner *.u_1998592992.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { margin-left:0 !important; padding-top:15px !important; padding-left:0 !important; padding-bottom:15px !important; margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; padding-right:0 !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container[data-depth] .unifiednav__item:hover { text-decoration:underline !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container[data-depth] .unifiednav__item.hover { text-decoration:underline !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container[data-depth] .unifiednav__item.dmNavItemSelected { text-decoration:underline !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container[data-depth] .unifiednav__item { text-decoration:none !important; color:var(--color_2) !important; } *#dm .dmInner *.u_1998592992.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::before { font-size:20px !important; } *#dm .dmInner *.u_1998592992.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::after { font-size:20px !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:var(--color_2) !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item:hover { color:var(--color_2) !important; font-weight:bold !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item.hover { color:var(--color_2) !important; font-weight:bold !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item.dmNavItemSelected { color:var(--color_2) !important; font-weight:bold !important; } *#dm .dmInner div#hamburger-drawer.layout-drawer { background-color:var(--color_7) !important; } *#dm .dmInner *.u_1122522108.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { margin-left:0px !important; padding-top:0px !important; padding-left:20px !important; padding-bottom:0px !important; margin-top:0px !important; margin-bottom:0px !important; margin-right:0px !important; padding-right:20px !important; } *#dm .dmInner *.u_1061745365 { width:100% !important; } *#dm .dmInner nav.u_1122522108.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:rgba(0,0,0,1) !important; } *#dm .dmInner *.u_1122522108 { justify-content:center !important; } *#dm .dmInner a.u_1283881252:hover { background-image:none !important; } *#dm .dmInner a.u_1283881252.hover { background-image:none !important; } } @media (min-width:0) and (max-width:767px) { *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content.hamburger-reverse { transform:translate(-75vw,0) !important; } *#dm .dmInner *#hamburger-drawer.layout-drawer[data-origin="top"]:not([data-auto-height]) { height:100% !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content { transform:translate(0,100%) !important; } } @media (min-width:1025px) { *.stickyHeaderSpacer { height:249.2734375px !important; } } @media (min-width:768px) and (max-width:1024px) { *.stickyHeaderSpacer { height:249.2734375px !important; } div[dmtemplateid="FlexHeader"] .layout-drawer-overlay { background-color:rgba(0,0,0,0.6) !important; } *#dm .dmInner *#hamburger-drawer.layout-drawer[data-origin="top"]:not([data-auto-height]) { height:100% !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { font-size:20px !important; } *#dm .dmInner *#hamburger-drawer.layout-drawer:not([data-origin="top"]) { width:60vw !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content { transform:translate(60vw,0) !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content.hamburger-reverse { transform:translate(-60vw,0) !important; } *#dm .dmInner div#hamburger-drawer.layout-drawer { margin-left:0px !important; padding-top:0px !important; padding-left:0px !important; padding-bottom:0px !important; margin-top:0px !important; margin-bottom:0px !important; margin-right:0px !important; padding-right:0px !important; } } @media (min-width:0px) and (max-width:767px) { *#dm .dmInner div#hamburger-drawer.layout-drawer { margin-left:0px !important; padding-top:0px !important; padding-left:0px !important; padding-bottom:0px !important; margin-top:0px !important; margin-bottom:0px !important; margin-right:0px !important; padding-right:0px !important; } *#dm .dmInner *#hamburger-drawer.layout-drawer:not([data-origin="top"]) { width:82vw !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content { transform:translate(82vw,0) !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content.hamburger-reverse { transform:translate(-82vw,0) !important; } }