.elementor-8 .elementor-element.elementor-element-6a49583b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-9860303{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-6bea987{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-3be7167{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-4d634e7{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-9035afe{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-d1d7d3b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-80ea2a5{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-0b67c9a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-db44eb3{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-54096d0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-dfeba6c{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-3a78835{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-6ec5367{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-5d99f24{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-e24ab1e{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-79782a4{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-4d66dc3{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-ac369a7{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-896fca3{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-a66beff{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-292091c{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-9860303 */@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"); /* ================================================== HERO PRINCIPAL ORTODENT VERSIÓN EQUILIBRADA Y RESPONSIVE ================================================== */ #hero-ortodent-nuevo { --ortho-purple: #8d2fb1; --ortho-purple-dark: #6f1d8d; --ortho-purple-deep: #49125e; --ortho-purple-light: #f2e5f7; --ortho-text: #17131b; --ortho-grey: #6f6873; --ortho-border: rgba(141, 47, 177, 0.2); position: relative; width: 100%; min-height: calc(100svh - 84px); display: flex; align-items: center; overflow: hidden; background: radial-gradient( circle at 103% 3%, rgba(141, 47, 177, 0.09) 0, rgba(141, 47, 177, 0.09) 155px, transparent 156px ), linear-gradient( 135deg, #ffffff 0%, #fbf8fc 56%, #f7effa 100% ); font-family: "Montserrat", sans-serif; } #hero-ortodent-nuevo *, #hero-ortodent-nuevo *::before, #hero-ortodent-nuevo *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR PRINCIPAL ================================================== */ #hero-ortodent-nuevo .ortho-hero-container { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 46px 30px; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(400px, 0.96fr); align-items: center; gap: 60px; } /* ================================================== CONTENIDO ================================================== */ #hero-ortodent-nuevo .ortho-hero-content { position: relative; z-index: 3; width: 100%; max-width: 620px; } #hero-ortodent-nuevo .ortho-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--ortho-purple-dark); font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: 1.8px; text-transform: uppercase; } #hero-ortodent-nuevo .ortho-eyebrow::before { content: ""; flex: 0 0 auto; width: 26px; height: 3px; background: linear-gradient( 90deg, var(--ortho-purple-dark), var(--ortho-purple) ); border-radius: 999px; } #hero-ortodent-nuevo h1 { margin: 0; color: var(--ortho-text); font-size: clamp(44px, 4.55vw, 66px); font-weight: 800; line-height: 1.065; letter-spacing: -2.65px; } #hero-ortodent-nuevo h1 span { color: var(--ortho-purple); } #hero-ortodent-nuevo .ortho-description { max-width: 570px; margin: 23px 0 0; color: var(--ortho-grey); font-size: 16px; font-weight: 400; line-height: 1.65; } /* ================================================== BOTONES ================================================== */ #hero-ortodent-nuevo .ortho-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 27px; } #hero-ortodent-nuevo .ortho-button { min-height: 51px; padding: 14px 21px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 13px; font-size: 13.5px; font-weight: 700; line-height: 1; text-decoration: none; transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } #hero-ortodent-nuevo .ortho-button-icon { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s ease; } #hero-ortodent-nuevo .ortho-button:hover .ortho-button-icon, #hero-ortodent-nuevo .ortho-button:focus .ortho-button-icon { transform: translateX(3px); } #hero-ortodent-nuevo .ortho-button-primary { color: #ffffff; background: linear-gradient( 135deg, #7c239d, #9b38bf ); border: 1px solid transparent; box-shadow: 0 11px 25px rgba(141, 47, 177, 0.22); } #hero-ortodent-nuevo .ortho-button-primary:hover, #hero-ortodent-nuevo .ortho-button-primary:focus { color: #ffffff; background: linear-gradient( 135deg, #6b198b, #872ba8 ); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(141, 47, 177, 0.3); } #hero-ortodent-nuevo .ortho-button-secondary { color: var(--ortho-purple-dark); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--ortho-border); } #hero-ortodent-nuevo .ortho-button-secondary:hover, #hero-ortodent-nuevo .ortho-button-secondary:focus { color: var(--ortho-purple); background: #ffffff; border-color: rgba(141, 47, 177, 0.36); transform: translateY(-2px); box-shadow: 0 9px 22px rgba(79, 44, 89, 0.08); } /* ================================================== BENEFICIOS ================================================== */ #hero-ortodent-nuevo .ortho-benefits { display: flex; flex-wrap: wrap; gap: 13px 21px; margin: 25px 0 0; padding: 0; list-style: none; } #hero-ortodent-nuevo .ortho-benefits li { display: inline-flex; align-items: center; gap: 7px; color: #4c4550; font-size: 12.5px; font-weight: 600; line-height: 1.35; } #hero-ortodent-nuevo .ortho-benefit-icon { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ortho-purple); } #hero-ortodent-nuevo .ortho-benefit-icon svg { width: 100%; height: 100%; fill: rgba(141, 47, 177, 0.06); stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== BLOQUE VISUAL ================================================== */ #hero-ortodent-nuevo .ortho-visual { position: relative; z-index: 2; width: 100%; max-width: 490px; margin-left: auto; } #hero-ortodent-nuevo .ortho-image-wrap { position: relative; width: 100%; aspect-ratio: 0.97 / 1; overflow: hidden; background: #e8ddeb; border-radius: 38px 38px 78px 38px; box-shadow: 0 25px 56px rgba(48, 31, 54, 0.15); } #hero-ortodent-nuevo .ortho-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(16, 8, 20, 0.02) 45%, rgba(42, 20, 50, 0.12) 100% ); pointer-events: none; } #hero-ortodent-nuevo .ortho-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ================================================== TARJETAS FLOTANTES ================================================== */ #hero-ortodent-nuevo .ortho-floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 15px; box-shadow: 0 16px 36px rgba(44, 28, 50, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #hero-ortodent-nuevo .ortho-card-top { top: 40px; right: -21px; } #hero-ortodent-nuevo .ortho-card-bottom { left: -30px; bottom: 26px; } #hero-ortodent-nuevo .ortho-card-icon { flex: 0 0 auto; width: 37px; height: 37px; display: grid; place-items: center; color: var(--ortho-purple); background: var(--ortho-purple-light); border: 1px solid rgba(141, 47, 177, 0.08); border-radius: 11px; } #hero-ortodent-nuevo .ortho-card-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #hero-ortodent-nuevo .ortho-card-content strong { display: block; margin: 0 0 2px; color: var(--ortho-text); font-size: 12px; font-weight: 700; line-height: 1.25; } #hero-ortodent-nuevo .ortho-card-content span { display: block; color: #777079; font-size: 9px; font-weight: 500; line-height: 1.35; } /* ================================================== FORMAS DECORATIVAS ================================================== */ #hero-ortodent-nuevo .ortho-shape { position: absolute; border-radius: 50%; pointer-events: none; } #hero-ortodent-nuevo .ortho-shape-one { width: 160px; height: 160px; top: -68px; right: -76px; background: rgba(141, 47, 177, 0.075); } #hero-ortodent-nuevo .ortho-shape-two { width: 88px; height: 88px; left: -38px; bottom: -26px; border: 16px solid rgba(141, 47, 177, 0.065); } /* ================================================== PANTALLAS DE ESCRITORIO CON POCA ALTURA ================================================== */ @media (min-width: 1101px) and (max-height: 820px) { #hero-ortodent-nuevo .ortho-hero-container { padding-top: 34px; padding-bottom: 34px; } #hero-ortodent-nuevo h1 { font-size: clamp(42px, 4.15vw, 60px); } #hero-ortodent-nuevo .ortho-description { margin-top: 19px; font-size: 15px; } #hero-ortodent-nuevo .ortho-actions { margin-top: 23px; } #hero-ortodent-nuevo .ortho-benefits { margin-top: 21px; } #hero-ortodent-nuevo .ortho-visual { max-width: 455px; } } /* ================================================== PORTÁTILES Y TABLET HORIZONTAL ================================================== */ @media (max-width: 1100px) { #hero-ortodent-nuevo { min-height: auto; } #hero-ortodent-nuevo .ortho-hero-container { max-width: 1000px; padding: 46px 26px; grid-template-columns: minmax(0, 1fr) minmax(350px, 0.88fr); gap: 42px; } #hero-ortodent-nuevo .ortho-hero-content { max-width: 560px; } #hero-ortodent-nuevo h1 { font-size: clamp(41px, 5vw, 56px); letter-spacing: -2.1px; } #hero-ortodent-nuevo .ortho-description { font-size: 15px; } #hero-ortodent-nuevo .ortho-visual { max-width: 435px; } #hero-ortodent-nuevo .ortho-card-top { right: -8px; } #hero-ortodent-nuevo .ortho-card-bottom { left: -15px; } } /* ================================================== TABLET VERTICAL ================================================== */ @media (max-width: 820px) { #hero-ortodent-nuevo { background: radial-gradient( circle at 110% 2%, rgba(141, 47, 177, 0.09) 0, rgba(141, 47, 177, 0.09) 120px, transparent 121px ), linear-gradient( 180deg, #ffffff 0%, #faf5fc 100% ); } #hero-ortodent-nuevo .ortho-hero-container { max-width: 680px; padding: 42px 22px 48px; grid-template-columns: 1fr; gap: 38px; } #hero-ortodent-nuevo .ortho-hero-content { max-width: none; text-align: center; } #hero-ortodent-nuevo .ortho-eyebrow { justify-content: center; margin-bottom: 15px; font-size: 10.5px; } #hero-ortodent-nuevo h1 { font-size: clamp(38px, 9.5vw, 51px); line-height: 1.055; letter-spacing: -1.9px; } #hero-ortodent-nuevo .ortho-description { max-width: 550px; margin: 19px auto 0; font-size: 14.5px; } #hero-ortodent-nuevo .ortho-actions { justify-content: center; margin-top: 24px; } #hero-ortodent-nuevo .ortho-benefits { justify-content: center; margin-top: 22px; } #hero-ortodent-nuevo .ortho-visual { max-width: 440px; margin: 0 auto; } #hero-ortodent-nuevo .ortho-image-wrap { border-radius: 31px 31px 66px 31px; } #hero-ortodent-nuevo .ortho-card-top { top: 20px; right: 10px; } #hero-ortodent-nuevo .ortho-card-bottom { left: 10px; bottom: 18px; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #hero-ortodent-nuevo .ortho-hero-container { padding: 34px 16px 40px; gap: 31px; } #hero-ortodent-nuevo .ortho-eyebrow { margin-bottom: 12px; font-size: 9.5px; letter-spacing: 1.3px; } #hero-ortodent-nuevo h1 { font-size: clamp(35px, 10.5vw, 43px); line-height: 1.06; letter-spacing: -1.5px; } #hero-ortodent-nuevo .ortho-description { margin-top: 16px; font-size: 13.5px; line-height: 1.6; } #hero-ortodent-nuevo .ortho-actions { flex-direction: column; gap: 10px; margin-top: 22px; } #hero-ortodent-nuevo .ortho-button { width: 100%; min-height: 48px; } #hero-ortodent-nuevo .ortho-benefits { width: max-content; max-width: 100%; margin: 20px auto 0; flex-direction: column; align-items: flex-start; gap: 9px; } #hero-ortodent-nuevo .ortho-benefits li { font-size: 12px; } #hero-ortodent-nuevo .ortho-visual { max-width: 380px; } #hero-ortodent-nuevo .ortho-floating-card { gap: 8px; padding: 10px 11px; border-radius: 12px; } #hero-ortodent-nuevo .ortho-card-icon { width: 32px; height: 32px; border-radius: 9px; } #hero-ortodent-nuevo .ortho-card-icon svg { width: 16px; height: 16px; } #hero-ortodent-nuevo .ortho-card-content strong { font-size: 10.5px; } #hero-ortodent-nuevo .ortho-card-content span { font-size: 8px; } #hero-ortodent-nuevo .ortho-card-top { top: 13px; right: 7px; } #hero-ortodent-nuevo .ortho-card-bottom { left: 7px; bottom: 13px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #hero-ortodent-nuevo .ortho-button, #hero-ortodent-nuevo .ortho-button-icon { transition: none; } #hero-ortodent-nuevo .ortho-button:hover, #hero-ortodent-nuevo .ortho-button:focus { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-3be7167 *//* ================================================== SECCIÓN DE VALORES ORTODENT CENTRADA, MINIMALISTA Y RESPONSIVE ================================================== */ #valores-ortodent { --valor-bg-start: #18131c; --valor-bg-middle: #25172b; --valor-bg-end: #351040; --valor-purple: #72208e; --valor-purple-light: #dfa9ea; --valor-text: #ffffff; --valor-muted: rgba(255, 255, 255, 0.76); --valor-divider: rgba(255, 255, 255, 0.12); position: relative; width: 100%; overflow: hidden; padding: 0 32px; background: radial-gradient( circle at 100% 0, rgba(114, 32, 142, 0.08) 0, rgba(114, 32, 142, 0.08) 115px, transparent 116px ), linear-gradient( 100deg, var(--valor-bg-start) 0%, var(--valor-bg-middle) 52%, var(--valor-bg-end) 100% ); font-family: "Montserrat", Arial, sans-serif; } #valores-ortodent *, #valores-ortodent *::before, #valores-ortodent *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR CENTRAL ================================================== */ #valores-ortodent .valores-ortodent-container { width: 100%; max-width: 1120px; min-height: 142px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ================================================== ELEMENTOS ================================================== */ #valores-ortodent .valor-ortodent-item { position: relative; min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 14px; padding: 34px 32px 32px; transition: background-color 0.22s ease, transform 0.22s ease; } /* Separadores verticales */ #valores-ortodent .valor-ortodent-item:not(:last-child)::after { content: ""; position: absolute; top: 27px; right: 0; bottom: 27px; width: 1px; background: var(--valor-divider); } /* Hover discreto */ #valores-ortodent .valor-ortodent-item:hover { background: rgba(255, 255, 255, 0.03); } #valores-ortodent .valor-ortodent-item:hover .valor-numero { color: #ffffff; } /* ================================================== NÚMERO ================================================== */ #valores-ortodent .valor-numero { min-width: 28px; padding-top: 4px; display: inline-flex; align-items: flex-start; justify-content: flex-start; color: var(--valor-purple-light); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.7px; transition: color 0.22s ease; } /* ================================================== CONTENIDO ================================================== */ #valores-ortodent .valor-contenido { min-width: 0; } #valores-ortodent .valor-contenido h3 { margin: 0 0 7px; color: var(--valor-text); font-size: 17px; font-weight: 800; line-height: 1.28; letter-spacing: -0.3px; } #valores-ortodent .valor-contenido p { max-width: 285px; margin: 0; color: var(--valor-muted); font-size: 13px; font-weight: 400; line-height: 1.58; } /* ================================================== MONITORES GRANDES ================================================== */ @media (min-width: 1500px) { #valores-ortodent { padding-right: 40px; padding-left: 40px; } #valores-ortodent .valores-ortodent-container { max-width: 1180px; min-height: 148px; } #valores-ortodent .valor-ortodent-item { padding: 36px 36px 34px; } #valores-ortodent .valor-contenido p { max-width: 300px; } } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #valores-ortodent { padding-right: 28px; padding-left: 28px; } #valores-ortodent .valores-ortodent-container { max-width: 900px; min-height: 134px; } #valores-ortodent .valor-ortodent-item { grid-template-columns: 29px minmax(0, 1fr); gap: 12px; padding: 30px 23px 28px; } #valores-ortodent .valor-ortodent-item:not(:last-child)::after { top: 24px; bottom: 24px; } #valores-ortodent .valor-contenido h3 { font-size: 16px; } #valores-ortodent .valor-contenido p { max-width: 250px; font-size: 12.5px; line-height: 1.55; } } /* ================================================== TABLET ================================================== */ @media (max-width: 820px) { #valores-ortodent { padding-right: 24px; padding-left: 24px; } #valores-ortodent .valores-ortodent-container { max-width: 620px; min-height: 0; grid-template-columns: 1fr; } #valores-ortodent .valor-ortodent-item { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 25px 10px; } #valores-ortodent .valor-ortodent-item:not(:last-child)::after { top: auto; right: 10px; bottom: 0; left: 10px; width: auto; height: 1px; } #valores-ortodent .valor-numero { min-width: 30px; padding-top: 4px; font-size: 11.5px; } #valores-ortodent .valor-contenido h3 { margin-bottom: 6px; font-size: 16.5px; } #valores-ortodent .valor-contenido p { max-width: 520px; font-size: 13px; line-height: 1.55; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #valores-ortodent { padding-right: 18px; padding-left: 18px; } #valores-ortodent .valores-ortodent-container { max-width: 100%; } #valores-ortodent .valor-ortodent-item { grid-template-columns: 30px minmax(0, 1fr); gap: 11px; padding: 21px 4px; } #valores-ortodent .valor-ortodent-item:not(:last-child)::after { right: 4px; left: 4px; } #valores-ortodent .valor-numero { min-width: 25px; padding-top: 4px; font-size: 10.5px; } #valores-ortodent .valor-contenido h3 { margin-bottom: 5px; font-size: 15.5px; font-weight: 800; line-height: 1.3; } #valores-ortodent .valor-contenido p { max-width: none; font-size: 12.5px; line-height: 1.52; } } /* ================================================== PANTALLAS MUY PEQUEÑAS ================================================== */ @media (max-width: 380px) { #valores-ortodent { padding-right: 15px; padding-left: 15px; } #valores-ortodent .valor-ortodent-item { grid-template-columns: 27px minmax(0, 1fr); gap: 9px; padding: 19px 2px; } #valores-ortodent .valor-contenido h3 { font-size: 15px; } #valores-ortodent .valor-contenido p { font-size: 12px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #valores-ortodent .valor-ortodent-item, #valores-ortodent .valor-numero { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-9035afe *//* ================================================== ¿QUÉ NECESITAS? — ORTODENT TARJETA DESTACADA DE DOS FILAS ================================================== */ #necesitas.ortho-needs { --needs-purple: #72208e; --needs-purple-dark: #57156d; --needs-purple-light: #dfa9ea; --needs-purple-soft: #f4e8f8; --needs-text: #18131c; --needs-muted: #706873; --needs-border: #e7dfe9; --needs-bg: #fbf9fc; position: relative; width: 100%; overflow: hidden; padding: 64px 32px 68px; background: radial-gradient( circle at 5% 5%, rgba(114, 32, 142, 0.04) 0, rgba(114, 32, 142, 0.04) 110px, transparent 111px ), linear-gradient( 180deg, #ffffff 0%, var(--needs-bg) 100% ); font-family: "Montserrat", Arial, sans-serif; } #necesitas.ortho-needs *, #necesitas.ortho-needs *::before, #necesitas.ortho-needs *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR ================================================== */ #necesitas .ortho-needs__container { width: 100%; max-width: 1120px; margin: 0 auto; } /* ================================================== ENCABEZADO ================================================== */ #necesitas .ortho-needs__header { max-width: 700px; margin: 0 auto 38px; text-align: center; } #necesitas .ortho-needs__eyebrow { margin: 0 0 10px; color: var(--needs-purple); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 2.1px; text-transform: uppercase; } #necesitas .ortho-needs__header h2 { margin: 0; color: var(--needs-text); font-size: clamp(38px, 3.8vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -2px; } #necesitas .ortho-needs__intro { max-width: 620px; margin: 15px auto 0; color: var(--needs-muted); font-size: 14px; font-weight: 400; line-height: 1.62; } /* ================================================== CUADRÍCULA PRINCIPAL ================================================== */ #necesitas .ortho-needs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(225px, auto)) minmax(190px, auto); grid-auto-flow: row; align-items: stretch; gap: 16px; } /* Ubicación de las tarjetas: 1 2 Imagen 3 4 Imagen 5 5 Imagen */ #necesitas .ortho-need-card:nth-child(1) { grid-column: 1; grid-row: 1; } #necesitas .ortho-need-card:nth-child(2) { grid-column: 2; grid-row: 1; } #necesitas .ortho-need-card:nth-child(3) { grid-column: 1; grid-row: 2; } #necesitas .ortho-need-card:nth-child(4) { grid-column: 2; grid-row: 2; } /* Revisión general ocupa las dos columnas inferiores */ #necesitas .ortho-need-card:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; } /* La tarjeta con fotografía ocupa las tres filas */ #necesitas .ortho-need-card--featured { grid-column: 3; grid-row: 1 / span 3; } /* ================================================== TARJETAS NORMALES ================================================== */ #necesitas .ortho-need-card { position: relative; min-width: 0; min-height: 225px; height: 100%; padding: 25px 24px 22px; display: flex; flex-direction: column; overflow: hidden; color: var(--needs-text); background: rgba(255, 255, 255, 0.98); border: 1px solid var(--needs-border); border-radius: 19px; box-shadow: 0 8px 23px rgba(61, 42, 68, 0.045); text-decoration: none; transition: transform 0.23s ease, border-color 0.23s ease, box-shadow 0.23s ease, background-color 0.23s ease; } #necesitas .ortho-need-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, var(--needs-purple-dark), var(--needs-purple) ); opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 0.23s ease, transform 0.23s ease; } #necesitas .ortho-need-card:hover, #necesitas .ortho-need-card:focus-visible { color: var(--needs-text); background: #ffffff; border-color: rgba(114, 32, 142, 0.24); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(71, 38, 83, 0.09); } #necesitas .ortho-need-card:hover::before, #necesitas .ortho-need-card:focus-visible::before { opacity: 1; transform: scaleX(1); } #necesitas .ortho-need-card:focus-visible { outline: 3px solid rgba(114, 32, 142, 0.18); outline-offset: 3px; } /* ================================================== ÍCONOS ================================================== */ #necesitas .ortho-need-card__icon { flex: 0 0 auto; width: 46px; height: 46px; margin-bottom: 17px; display: grid; place-items: center; color: var(--needs-purple); background: var(--needs-purple-soft); border: 1px solid rgba(114, 32, 142, 0.07); border-radius: 13px; transition: color 0.23s ease, background 0.23s ease, transform 0.23s ease, box-shadow 0.23s ease; } #necesitas .ortho-need-card__icon svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #necesitas .ortho-need-card:hover .ortho-need-card__icon, #necesitas .ortho-need-card:focus-visible .ortho-need-card__icon { color: #ffffff; background: var(--needs-purple); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(114, 32, 142, 0.19); } /* ================================================== CONTENIDO ================================================== */ #necesitas .ortho-need-card__body { flex: 1 1 auto; min-width: 0; } #necesitas .ortho-need-card__body h3 { margin: 0 0 8px; color: var(--needs-text); font-size: 17.5px; font-weight: 800; line-height: 1.27; letter-spacing: -0.35px; } #necesitas .ortho-need-card__body p { margin: 0; color: var(--needs-muted); font-size: 13px; font-weight: 400; line-height: 1.56; } /* ================================================== ENLACE ================================================== */ #necesitas .ortho-need-card__link { width: max-content; max-width: 100%; margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; color: var(--needs-purple-dark); font-size: 12.5px; font-weight: 750; line-height: 1.35; transition: color 0.22s ease, gap 0.22s ease; } #necesitas .ortho-need-card__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #necesitas .ortho-need-card:hover .ortho-need-card__link, #necesitas .ortho-need-card:focus-visible .ortho-need-card__link { color: var(--needs-purple); gap: 9px; } /* ================================================== TARJETA DESTACADA OCUPA EL TAMAÑO DE VARIAS TARJETAS ================================================== */ #necesitas .ortho-need-card--featured { position: relative; isolation: isolate; min-height: 0; height: 100%; padding: 28px; justify-content: flex-end; color: #ffffff; background-image: linear-gradient( 180deg, rgba(27, 8, 33, 0.01) 0%, rgba(40, 11, 50, 0.04) 33%, rgba(53, 16, 64, 0.18) 54%, rgba(53, 16, 64, 0.82) 78%, rgba(40, 10, 49, 0.98) 100% ), url("https://ortodentcenter.com/wp-content/uploads/2026/07/atencion-odontologica.jpeg"); background-size: cover; background-position: center 35%; background-repeat: no-repeat; border-color: transparent; box-shadow: 0 18px 42px rgba(87, 21, 109, 0.24); } #necesitas .ortho-need-card--featured::before { display: none; } #necesitas .ortho-need-card--featured::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient( 180deg, transparent 0%, transparent 50%, rgba(25, 6, 31, 0.1) 65%, rgba(25, 6, 31, 0.48) 100% ); pointer-events: none; } /* Ícono de la tarjeta destacada */ #necesitas .ortho-need-card--featured .ortho-need-card__icon { position: relative; z-index: 2; width: 52px; height: 52px; margin-bottom: 17px; color: #ffffff; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 9px 24px rgba(20, 5, 25, 0.2); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } #necesitas .ortho-need-card--featured .ortho-need-card__icon svg { width: 24px; height: 24px; } /* Texto inferior */ #necesitas .ortho-need-card--featured .ortho-need-card__body { flex: 0 0 auto; } #necesitas .ortho-need-card--featured h3, #necesitas .ortho-need-card--featured p, #necesitas .ortho-need-card--featured .ortho-need-card__link { position: relative; z-index: 2; color: #ffffff; } #necesitas .ortho-need-card--featured h3 { max-width: 270px; font-size: 24px; line-height: 1.18; text-shadow: 0 2px 13px rgba(20, 5, 25, 0.48); } #necesitas .ortho-need-card--featured p { max-width: 290px; color: rgba(255, 255, 255, 0.91); font-size: 13.5px; line-height: 1.58; text-shadow: 0 1px 9px rgba(20, 5, 25, 0.4); } #necesitas .ortho-need-card--featured .ortho-need-card__link { margin-top: 22px; color: #ffffff; font-size: 13px; text-shadow: 0 1px 9px rgba(20, 5, 25, 0.4); } /* Hover de la imagen */ #necesitas .ortho-need-card--featured:hover, #necesitas .ortho-need-card--featured:focus-visible { color: #ffffff; background-image: linear-gradient( 180deg, rgba(27, 8, 33, 0) 0%, rgba(40, 11, 50, 0.02) 33%, rgba(53, 16, 64, 0.14) 54%, rgba(53, 16, 64, 0.76) 78%, rgba(40, 10, 49, 0.96) 100% ), url("https://ortodentcenter.com/wp-content/uploads/2026/07/atencion-odontologica.jpeg"); background-size: cover; background-position: center 35%; background-repeat: no-repeat; border-color: transparent; box-shadow: 0 24px 49px rgba(87, 21, 109, 0.31); } #necesitas .ortho-need-card--featured:hover .ortho-need-card__icon, #necesitas .ortho-need-card--featured:focus-visible .ortho-need-card__icon { color: var(--needs-purple-dark); background: #ffffff; } /* ================================================== TARJETA INFERIOR ANCHA ================================================== */ #necesitas .ortho-need-card:nth-child(5) { min-height: 190px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; column-gap: 19px; padding: 24px 26px; } #necesitas .ortho-need-card:nth-child(5) .ortho-need-card__icon { margin: 0; } #necesitas .ortho-need-card:nth-child(5) .ortho-need-card__body { align-self: center; } #necesitas .ortho-need-card:nth-child(5) .ortho-need-card__link { margin: 0; white-space: nowrap; } /* ================================================== MONITORES GRANDES ================================================== */ @media (min-width: 1500px) { #necesitas.ortho-needs { padding: 68px 40px 72px; } #necesitas .ortho-needs__container { max-width: 1180px; } #necesitas .ortho-needs__grid { grid-template-rows: repeat(2, minmax(230px, auto)) minmax(195px, auto); } #necesitas .ortho-need-card--featured { background-position: center 34%; } } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #necesitas.ortho-needs { padding: 58px 28px 62px; } #necesitas .ortho-needs__container { max-width: 900px; } #necesitas .ortho-needs__header { margin-bottom: 33px; } /* En portátil se mantienen tres columnas, pero la columna de la fotografía es ligeramente mayor. */ #necesitas .ortho-needs__grid { grid-template-columns: repeat(2, minmax(0, 0.95fr)) minmax(260px, 1.1fr); grid-template-rows: repeat(2, minmax(215px, auto)) minmax(180px, auto); gap: 15px; } #necesitas .ortho-need-card { padding: 23px; } #necesitas .ortho-need-card__body h3 { font-size: 17px; } #necesitas .ortho-need-card__body p { font-size: 12.5px; } #necesitas .ortho-need-card--featured { padding: 24px; background-position: center 32%; } #necesitas .ortho-need-card--featured h3 { font-size: 21px; } #necesitas .ortho-need-card:nth-child(5) { min-height: 180px; padding: 22px 23px; } } /* ================================================== TABLET ================================================== */ @media (max-width: 820px) { #necesitas.ortho-needs { padding: 51px 24px 55px; } #necesitas .ortho-needs__container { max-width: 620px; } #necesitas .ortho-needs__header { margin-bottom: 29px; } #necesitas .ortho-needs__eyebrow { margin-bottom: 9px; font-size: 10.5px; letter-spacing: 1.8px; } #necesitas .ortho-needs__header h2 { font-size: clamp(35px, 8vw, 45px); line-height: 1.06; letter-spacing: -1.6px; } #necesitas .ortho-needs__intro { margin-top: 14px; font-size: 13.5px; } /* En tablet vuelve a dos columnas. La tarjeta con fotografía ocupa ambas columnas. */ #necesitas .ortho-needs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 14px; } #necesitas .ortho-need-card, #necesitas .ortho-need-card:nth-child(1), #necesitas .ortho-need-card:nth-child(2), #necesitas .ortho-need-card:nth-child(3), #necesitas .ortho-need-card:nth-child(4), #necesitas .ortho-need-card:nth-child(5), #necesitas .ortho-need-card--featured { grid-column: auto; grid-row: auto; } #necesitas .ortho-need-card { min-height: 215px; padding: 22px; border-radius: 18px; } #necesitas .ortho-need-card:nth-child(5) { min-height: 215px; display: flex; padding: 22px; } #necesitas .ortho-need-card:nth-child(5) .ortho-need-card__icon { margin-bottom: 15px; } #necesitas .ortho-need-card:nth-child(5) .ortho-need-card__link { margin-top: 17px; } #necesitas .ortho-need-card--featured { grid-column: 1 / -1; min-height: 430px; padding: 27px; background-position: center 32%; } #necesitas .ortho-need-card--featured h3 { font-size: 23px; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #necesitas.ortho-needs { padding: 44px 18px 48px; } #necesitas .ortho-needs__header { margin-bottom: 25px; } #necesitas .ortho-needs__eyebrow { font-size: 10px; letter-spacing: 1.55px; } #necesitas .ortho-needs__header h2 { font-size: clamp(31px, 9vw, 39px); line-height: 1.08; letter-spacing: -1.25px; } #necesitas .ortho-needs__intro { font-size: 13px; line-height: 1.55; } #necesitas .ortho-needs__grid { grid-template-columns: 1fr; } #necesitas .ortho-need-card, #necesitas .ortho-need-card--featured { grid-column: auto; min-height: 0; padding: 20px; border-radius: 17px; } #necesitas .ortho-need-card__icon { width: 42px; height: 42px; margin-bottom: 14px; } #necesitas .ortho-need-card__body h3 { margin-bottom: 7px; font-size: 16px; line-height: 1.3; } #necesitas .ortho-need-card__body p { font-size: 12.5px; line-height: 1.52; } #necesitas .ortho-need-card__link { margin-top: 15px; font-size: 12px; } #necesitas .ortho-need-card:nth-child(5) { min-height: 0; display: flex; padding: 20px; } #necesitas .ortho-need-card--featured { min-height: 390px; padding: 23px; background-position: center 29%; } #necesitas .ortho-need-card--featured h3 { font-size: 21px; } #necesitas .ortho-need-card--featured p { font-size: 13px; } } /* ================================================== PANTALLAS PEQUEÑAS ================================================== */ @media (max-width: 380px) { #necesitas.ortho-needs { padding-right: 15px; padding-left: 15px; } #necesitas .ortho-need-card { padding: 19px 18px; } #necesitas .ortho-need-card__body h3 { font-size: 15.5px; } #necesitas .ortho-need-card__body p { font-size: 12px; } #necesitas .ortho-need-card--featured { min-height: 365px; padding: 21px; background-position: center 28%; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #necesitas .ortho-need-card, #necesitas .ortho-need-card::before, #necesitas .ortho-need-card__icon, #necesitas .ortho-need-card__link { transition: none; } #necesitas .ortho-need-card:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-80ea2a5 *//* ================================================== TRATAMIENTOS ORTODENT CENTRADA, EQUILIBRADA Y RESPONSIVE ================================================== */ #tratamientos.ortho-treatments { --treat-purple: #72208e; --treat-purple-dark: #57156d; --treat-purple-deep: #30103d; --treat-purple-light: #dfa9ea; --treat-purple-soft: #f4e8f8; --treat-text: #18131c; --treat-muted: #706873; --treat-border: #e7dfe9; --treat-bg: #ffffff; position: relative; width: 100%; overflow: hidden; padding: 66px 32px 70px; background: radial-gradient( circle at 95% 3%, rgba(114, 32, 142, 0.04) 0, rgba(114, 32, 142, 0.04) 115px, transparent 116px ), linear-gradient( 180deg, #ffffff 0%, #fcfafc 100% ); font-family: "Montserrat", Arial, sans-serif; } #tratamientos.ortho-treatments *, #tratamientos.ortho-treatments *::before, #tratamientos.ortho-treatments *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR CENTRAL ================================================== */ #tratamientos .ortho-treatments__container { width: 100%; max-width: 1120px; margin: 0 auto; } /* ================================================== ENCABEZADO ================================================== */ #tratamientos .ortho-treatments__header { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr); align-items: end; gap: 48px; margin-bottom: 38px; } #tratamientos .ortho-treatments__heading { max-width: 610px; } #tratamientos .ortho-treatments__eyebrow { margin: 0 0 10px; color: var(--treat-purple); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 2.1px; text-transform: uppercase; } #tratamientos .ortho-treatments__heading h2 { margin: 0; color: var(--treat-text); font-size: clamp(40px, 4vw, 55px); font-weight: 800; line-height: 1.04; letter-spacing: -2.1px; } #tratamientos .ortho-treatments__intro { max-width: 420px; margin: 0 0 4px auto; color: var(--treat-muted); font-size: 14px; font-weight: 400; line-height: 1.62; } /* ================================================== CUADRÍCULA ================================================== */ #tratamientos .ortho-treatments__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* ================================================== TRATAMIENTO DESTACADO ================================================== */ #tratamientos .ortho-treatment-featured { grid-column: span 2; min-height: 300px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, 0.96fr); overflow: hidden; background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 90px, transparent 91px ), linear-gradient( 135deg, #30103d 0%, #57156d 100% ); border-radius: 21px; box-shadow: 0 16px 37px rgba(48, 16, 61, 0.16); } /* ================================================== IMAGEN DESTACADA ================================================== */ #tratamientos .ortho-treatment-featured__image { position: relative; min-height: 300px; overflow: hidden; } #tratamientos .ortho-treatment-featured__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(20, 5, 27, 0.03) 45%, rgba(48, 16, 61, 0.25) 100% ); pointer-events: none; } #tratamientos .ortho-treatment-featured__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ================================================== CONTENIDO DESTACADO ================================================== */ #tratamientos .ortho-treatment-featured__content { position: relative; min-width: 0; padding: 30px 30px 27px; display: flex; flex-direction: column; color: #ffffff; } #tratamientos .ortho-treatment-featured__icon { width: 44px; height: 44px; margin-bottom: 16px; display: grid; place-items: center; color: #ffffff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 13px; } #tratamientos .ortho-treatment-featured__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #tratamientos .ortho-treatment-featured__label { margin: 0 0 11px; color: var(--treat-purple-light); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.45; letter-spacing: 1.4px; text-transform: uppercase; } #tratamientos .ortho-treatment-featured__content h3 { margin: 0 0 10px; color: #ffffff; font-size: 27px; font-weight: 800; line-height: 1.16; letter-spacing: -0.65px; } #tratamientos .ortho-treatment-featured__content > p:not(.ortho-treatment-featured__label) { max-width: 340px; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 13px; font-weight: 400; line-height: 1.58; } /* ================================================== ENLACE DESTACADO ================================================== */ #tratamientos .ortho-treatment-featured__link { width: max-content; max-width: 100%; margin-top: auto; padding-top: 21px; display: inline-flex; align-items: center; gap: 7px; color: #ffffff; font-size: 12.5px; font-weight: 750; line-height: 1.35; text-decoration: none; transition: gap 0.22s ease, color 0.22s ease; } #tratamientos .ortho-treatment-featured__link:hover, #tratamientos .ortho-treatment-featured__link:focus { color: var(--treat-purple-light); gap: 10px; } #tratamientos .ortho-treatment-featured__link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== TARJETAS ================================================== */ #tratamientos .ortho-treatment-card { position: relative; min-width: 0; min-height: 225px; padding: 24px 23px 22px; display: flex; flex-direction: column; overflow: hidden; color: var(--treat-text); background: rgba(255, 255, 255, 0.98); border: 1px solid var(--treat-border); border-radius: 19px; box-shadow: 0 7px 21px rgba(61, 42, 68, 0.04); text-decoration: none; transition: transform 0.23s ease, border-color 0.23s ease, box-shadow 0.23s ease, background-color 0.23s ease; } /* Línea superior */ #tratamientos .ortho-treatment-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, var(--treat-purple-dark), var(--treat-purple) ); opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 0.23s ease, transform 0.23s ease; } /* Hover */ #tratamientos .ortho-treatment-card:hover, #tratamientos .ortho-treatment-card:focus-visible { color: var(--treat-text); background: #ffffff; border-color: rgba(114, 32, 142, 0.24); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(71, 38, 83, 0.09); } #tratamientos .ortho-treatment-card:hover::before, #tratamientos .ortho-treatment-card:focus-visible::before { opacity: 1; transform: scaleX(1); } #tratamientos .ortho-treatment-card:focus-visible { outline: 3px solid rgba(114, 32, 142, 0.18); outline-offset: 3px; } /* ================================================== CABECERA DE TARJETA ================================================== */ #tratamientos .ortho-treatment-card__top { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 13px; } #tratamientos .ortho-treatment-card__number { color: var(--treat-purple); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.6px; } #tratamientos .ortho-treatment-card__icon { flex: 0 0 auto; width: 43px; height: 43px; display: grid; place-items: center; color: var(--treat-purple); background: var(--treat-purple-soft); border: 1px solid rgba(114, 32, 142, 0.07); border-radius: 13px; transition: color 0.23s ease, background 0.23s ease, transform 0.23s ease, box-shadow 0.23s ease; } #tratamientos .ortho-treatment-card__icon svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #tratamientos .ortho-treatment-card:hover .ortho-treatment-card__icon, #tratamientos .ortho-treatment-card:focus-visible .ortho-treatment-card__icon { color: #ffffff; background: var(--treat-purple); transform: translateY(-2px); box-shadow: 0 8px 17px rgba(114, 32, 142, 0.18); } /* ================================================== TEXTO DE TARJETA ================================================== */ #tratamientos .ortho-treatment-card__body { flex: 1 1 auto; min-width: 0; } #tratamientos .ortho-treatment-card__body h3 { margin: 0 0 8px; color: var(--treat-text); font-size: 17.5px; font-weight: 800; line-height: 1.27; letter-spacing: -0.35px; } #tratamientos .ortho-treatment-card__body p { margin: 0; color: var(--treat-muted); font-size: 13px; font-weight: 400; line-height: 1.56; } /* ================================================== ENLACE DE TARJETA ================================================== */ #tratamientos .ortho-treatment-card__link { width: max-content; max-width: 100%; margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; color: var(--treat-purple-dark); font-size: 12.5px; font-weight: 750; line-height: 1.35; transition: color 0.22s ease, gap 0.22s ease; } #tratamientos .ortho-treatment-card__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #tratamientos .ortho-treatment-card:hover .ortho-treatment-card__link, #tratamientos .ortho-treatment-card:focus-visible .ortho-treatment-card__link { color: var(--treat-purple); gap: 9px; } /* ================================================== MONITORES GRANDES ================================================== */ @media (min-width: 1500px) { #tratamientos.ortho-treatments { padding: 70px 40px 74px; } #tratamientos .ortho-treatments__container { max-width: 1180px; } #tratamientos .ortho-treatment-featured { min-height: 315px; } #tratamientos .ortho-treatment-featured__image { min-height: 315px; } #tratamientos .ortho-treatment-card { min-height: 230px; padding: 26px 25px 23px; } } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #tratamientos.ortho-treatments { padding: 59px 28px 63px; } #tratamientos .ortho-treatments__container { max-width: 900px; } #tratamientos .ortho-treatments__header { gap: 38px; margin-bottom: 33px; } #tratamientos .ortho-treatments__heading h2 { font-size: clamp(38px, 4.8vw, 50px); } #tratamientos .ortho-treatments__intro { font-size: 13.5px; } #tratamientos .ortho-treatments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } #tratamientos .ortho-treatment-featured { grid-column: span 2; min-height: 290px; } #tratamientos .ortho-treatment-featured__image { min-height: 290px; } #tratamientos .ortho-treatment-featured__content { padding: 27px 27px 25px; } #tratamientos .ortho-treatment-featured__content h3 { font-size: 25px; } #tratamientos .ortho-treatment-card { min-height: 215px; padding: 23px; } #tratamientos .ortho-treatment-card__body h3 { font-size: 17px; } #tratamientos .ortho-treatment-card__body p { font-size: 12.5px; } } /* ================================================== TABLET ================================================== */ @media (max-width: 760px) { #tratamientos.ortho-treatments { padding: 51px 24px 55px; } #tratamientos .ortho-treatments__container { max-width: 620px; } #tratamientos .ortho-treatments__header { grid-template-columns: 1fr; gap: 15px; margin-bottom: 29px; } #tratamientos .ortho-treatments__heading { max-width: 570px; } #tratamientos .ortho-treatments__eyebrow { margin-bottom: 9px; font-size: 10.5px; letter-spacing: 1.8px; } #tratamientos .ortho-treatments__heading h2 { font-size: clamp(35px, 8vw, 45px); line-height: 1.06; letter-spacing: -1.6px; } #tratamientos .ortho-treatments__intro { max-width: 560px; margin: 0; font-size: 13.5px; } #tratamientos .ortho-treatments__grid { grid-template-columns: 1fr; gap: 14px; } #tratamientos .ortho-treatment-featured { grid-column: auto; min-height: 0; grid-template-columns: 1fr; border-radius: 19px; } #tratamientos .ortho-treatment-featured__image { min-height: 245px; aspect-ratio: 16 / 10; } #tratamientos .ortho-treatment-featured__content { min-height: 245px; padding: 25px 23px 23px; } #tratamientos .ortho-treatment-featured__content h3 { font-size: 24px; } #tratamientos .ortho-treatment-featured__content > p:not(.ortho-treatment-featured__label) { font-size: 12.5px; } #tratamientos .ortho-treatment-card { min-height: 0; padding: 23px; border-radius: 18px; } #tratamientos .ortho-treatment-card__top { margin-bottom: 15px; } #tratamientos .ortho-treatment-card__icon { width: 42px; height: 42px; } #tratamientos .ortho-treatment-card__body h3 { font-size: 17px; } #tratamientos .ortho-treatment-card__body p { font-size: 12.5px; line-height: 1.55; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #tratamientos.ortho-treatments { padding: 44px 18px 48px; } #tratamientos .ortho-treatments__eyebrow { font-size: 10px; letter-spacing: 1.55px; } #tratamientos .ortho-treatments__heading h2 { font-size: clamp(31px, 9vw, 39px); line-height: 1.08; letter-spacing: -1.25px; } #tratamientos .ortho-treatments__intro { font-size: 13px; line-height: 1.55; } #tratamientos .ortho-treatment-featured { border-radius: 18px; } #tratamientos .ortho-treatment-featured__image { min-height: 215px; } #tratamientos .ortho-treatment-featured__content { min-height: 230px; padding: 22px 20px 20px; } #tratamientos .ortho-treatment-featured__icon { width: 41px; height: 41px; margin-bottom: 14px; } #tratamientos .ortho-treatment-featured__label { margin-bottom: 9px; font-size: 9.5px; } #tratamientos .ortho-treatment-featured__content h3 { font-size: 22px; } #tratamientos .ortho-treatment-featured__content > p:not(.ortho-treatment-featured__label) { font-size: 12.5px; line-height: 1.55; } #tratamientos .ortho-treatment-featured__link { font-size: 12px; } #tratamientos .ortho-treatment-card { padding: 20px; border-radius: 17px; } #tratamientos .ortho-treatment-card__icon { width: 40px; height: 40px; } #tratamientos .ortho-treatment-card__icon svg { width: 19px; height: 19px; } #tratamientos .ortho-treatment-card__body h3 { font-size: 16px; } #tratamientos .ortho-treatment-card__body p { font-size: 12.5px; line-height: 1.52; } #tratamientos .ortho-treatment-card__link { margin-top: 15px; font-size: 12px; } } /* ================================================== PANTALLAS MUY PEQUEÑAS ================================================== */ @media (max-width: 380px) { #tratamientos.ortho-treatments { padding-right: 15px; padding-left: 15px; } #tratamientos .ortho-treatment-featured__content { padding-right: 18px; padding-left: 18px; } #tratamientos .ortho-treatment-card { padding: 19px 18px; } #tratamientos .ortho-treatment-card__body h3 { font-size: 15.5px; } #tratamientos .ortho-treatment-card__body p { font-size: 12px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #tratamientos .ortho-treatment-card, #tratamientos .ortho-treatment-card::before, #tratamientos .ortho-treatment-card__icon, #tratamientos .ortho-treatment-card__link, #tratamientos .ortho-treatment-featured__link { transition: none; } #tratamientos .ortho-treatment-card:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-db44eb3 *//* ================================================== CASOS CLÍNICOS — ORTODENT VERSIÓN MINIMALISTA, CENTRADA Y RESPONSIVE ================================================== */ #casos.ortho-cases { --cases-purple: #72208e; --cases-purple-dark: #57156d; --cases-purple-light: #dfa9ea; --cases-purple-soft: #f4e8f8; --cases-bg-dark: #2b0d35; --cases-bg-medium: #3b1048; --cases-text: #18131c; --cases-muted: #706873; --cases-border: rgba(255, 255, 255, 0.12); --cases-card-border: #e7dfe9; position: relative; width: 100%; overflow: hidden; padding: 66px 32px 46px; background: linear-gradient( 135deg, var(--cases-bg-dark) 0%, var(--cases-bg-medium) 100% ); font-family: "Montserrat", Arial, sans-serif; } #casos.ortho-cases *, #casos.ortho-cases *::before, #casos.ortho-cases *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR CENTRAL ================================================== */ #casos .ortho-cases__container { width: 100%; max-width: 1120px; margin: 0 auto; } /* ================================================== ENCABEZADO ================================================== */ #casos .ortho-cases__header { max-width: 720px; margin: 0 auto 36px; text-align: center; } #casos .ortho-cases__eyebrow { margin: 0 0 10px; color: var(--cases-purple-light); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 2.1px; text-transform: uppercase; } #casos .ortho-cases__header h2 { margin: 0; color: #ffffff; font-size: clamp(40px, 4vw, 55px); font-weight: 800; line-height: 1.04; letter-spacing: -2.1px; } #casos .ortho-cases__intro { max-width: 620px; margin: 15px auto 0; color: rgba(255, 255, 255, 0.76); font-size: 14px; font-weight: 400; line-height: 1.62; } /* ================================================== CUADRÍCULA ================================================== */ #casos .ortho-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; } /* ================================================== TARJETAS ================================================== */ #casos .ortho-case-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 19px; box-shadow: 0 13px 30px rgba(20, 6, 25, 0.16); transition: transform 0.22s ease, box-shadow 0.22s ease; } #casos .ortho-case-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(20, 6, 25, 0.21); } /* ================================================== CABECERA DE TARJETA ================================================== */ #casos .ortho-case-card__top { min-height: 50px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #ffffff; border-bottom: 1px solid var(--cases-card-border); } #casos .ortho-case-card__specialty { min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--cases-purple-dark); font-size: 12px; font-weight: 750; line-height: 1.3; } #casos .ortho-case-card__specialty span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #casos .ortho-case-card__specialty svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #casos .ortho-case-card__number { flex: 0 0 auto; padding: 7px 9px; color: #746b77; background: #f4eff5; border-radius: 999px; font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 0.4px; text-transform: uppercase; } /* ================================================== VISOR ================================================== */ #casos .ortho-clinical-viewer { position: relative; width: 100%; height: 280px; overflow: hidden; background: #e9ddec; } /* Inputs ocultos */ #casos .ortho-clinical-viewer > input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } /* ================================================== PROTECCIÓN CLÍNICA ================================================== */ #casos .ortho-clinical-warning { position: absolute; z-index: 20; inset: 0; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffffff; text-align: center; background: linear-gradient( 145deg, #351040 0%, #681780 100% ); transition: opacity 0.25s ease, visibility 0.25s ease; } #casos .ortho-clinical-warning__icon { width: 46px; height: 46px; margin-bottom: 13px; display: grid; place-items: center; color: #ffffff; background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 14px; } #casos .ortho-clinical-warning__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #casos .ortho-clinical-warning__eyebrow { margin-bottom: 12px; color: var(--cases-purple-light); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; } /* Oculta cualquier texto antiguo adicional */ #casos .ortho-clinical-warning strong, #casos .ortho-clinical-warning p { display: none; } #casos .ortho-clinical-warning__button { min-height: 43px; padding: 11px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--cases-purple-dark); background: #ffffff; border-radius: 11px; font-size: 13px; font-weight: 750; line-height: 1; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } #casos .ortho-clinical-warning__button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 6, 25, 0.2); } #casos .ortho-clinical-warning__button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Ocultar protección */ #casos #revelar-caso-1:checked ~ .ortho-clinical-warning, #casos #revelar-caso-2:checked ~ .ortho-clinical-warning { opacity: 0; visibility: hidden; pointer-events: none; } /* ================================================== CARRUSEL ================================================== */ #casos .ortho-clinical-carousel { position: relative; width: 100%; height: 100%; } #casos .ortho-clinical-slide { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) 64px; opacity: 0; visibility: hidden; pointer-events: none; background: #ffffff; transform: translateX(12px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; } /* Caso 1 */ #casos #caso-1-inicio:checked ~ .ortho-clinical-carousel .ortho-clinical-slide--inicio, #casos #caso-1-progreso:checked ~ .ortho-clinical-carousel .ortho-clinical-slide--progreso, #casos #caso-1-resultado:checked ~ .ortho-clinical-carousel .ortho-clinical-slide--resultado, /* Caso 2 */ #casos #caso-2-inicio:checked ~ .ortho-clinical-carousel .ortho-clinical-slide--inicio, #casos #caso-2-progreso:checked ~ .ortho-clinical-carousel .ortho-clinical-slide--progreso, #casos #caso-2-resultado:checked ~ .ortho-clinical-carousel .ortho-clinical-slide--resultado { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } /* ================================================== IMÁGENES ================================================== */ #casos .ortho-clinical-slide__image { position: relative; min-height: 0; display: block; overflow: hidden; background: linear-gradient( 135deg, #e8dbea 0%, #d7c2dc 100% ); } #casos .ortho-clinical-slide__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 68%, rgba(33, 10, 40, 0.1) 100% ); pointer-events: none; } #casos .ortho-clinical-slide__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.3s ease; } #casos .ortho-clinical-slide__image:hover img { transform: scale(1.02); } /* ================================================== PIE DE CADA ETAPA ================================================== */ #casos .ortho-clinical-slide figcaption { min-width: 0; padding: 10px 54px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #ffffff; } #casos .ortho-clinical-slide__step { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; color: var(--cases-purple-dark); background: var(--cases-purple-soft); border-radius: 9px; font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 9px; font-weight: 600; line-height: 1; } #casos .ortho-clinical-slide figcaption div { min-width: 0; } #casos .ortho-clinical-slide figcaption strong { display: block; margin-bottom: 2px; color: var(--cases-text); font-size: 13px; font-weight: 800; line-height: 1.2; } #casos .ortho-clinical-slide figcaption small { display: block; overflow: hidden; color: var(--cases-muted); font-size: 10.5px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } /* ================================================== FLECHAS ================================================== */ #casos .ortho-clinical-arrow { position: absolute; z-index: 7; top: calc(50% - 32px); width: 36px; height: 36px; display: grid; place-items: center; color: var(--cases-purple-dark); background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 50%; box-shadow: 0 7px 17px rgba(30, 12, 36, 0.16); cursor: pointer; transform: translateY(-50%); transition: transform 0.2s ease, background 0.2s ease; } #casos .ortho-clinical-arrow:hover { background: #ffffff; transform: translateY(-50%) scale(1.05); } #casos .ortho-clinical-arrow--previous { left: 10px; } #casos .ortho-clinical-arrow--next { right: 10px; } #casos .ortho-clinical-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== INDICADORES ================================================== */ #casos .ortho-clinical-dots { position: absolute; z-index: 8; left: 50%; bottom: 70px; display: flex; align-items: center; gap: 6px; transform: translateX(-50%); } #casos .ortho-clinical-dot { width: 7px; height: 7px; display: block; background: rgba(255, 255, 255, 0.65); border-radius: 999px; cursor: pointer; transition: width 0.2s ease, background 0.2s ease; } /* Indicadores activos */ #casos #caso-1-inicio:checked ~ .ortho-clinical-carousel .ortho-clinical-dot--inicio, #casos #caso-1-progreso:checked ~ .ortho-clinical-carousel .ortho-clinical-dot--progreso, #casos #caso-1-resultado:checked ~ .ortho-clinical-carousel .ortho-clinical-dot--resultado, #casos #caso-2-inicio:checked ~ .ortho-clinical-carousel .ortho-clinical-dot--inicio, #casos #caso-2-progreso:checked ~ .ortho-clinical-carousel .ortho-clinical-dot--progreso, #casos #caso-2-resultado:checked ~ .ortho-clinical-carousel .ortho-clinical-dot--resultado { width: 20px; background: #ffffff; } /* ================================================== OCULTAR IMÁGENES ================================================== */ #casos .ortho-clinical-hide { position: absolute; z-index: 10; top: 9px; right: 9px; padding: 8px 10px; color: var(--cases-purple-dark); background: rgba(255, 255, 255, 0.94); border-radius: 8px; font-size: 10px; font-weight: 750; line-height: 1; cursor: pointer; box-shadow: 0 6px 15px rgba(30, 12, 36, 0.13); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease; } #casos #revelar-caso-1:checked ~ .ortho-clinical-carousel .ortho-clinical-hide, #casos #revelar-caso-2:checked ~ .ortho-clinical-carousel .ortho-clinical-hide { opacity: 1; visibility: visible; } /* ================================================== CONTENIDO INFERIOR ================================================== */ #casos .ortho-case-card__content { flex: 1 1 auto; min-height: 175px; padding: 20px 19px 19px; display: flex; flex-direction: column; } #casos .ortho-case-card__heading { display: block; } #casos .ortho-case-card__heading > div { min-width: 0; } #casos .ortho-case-card__category { margin: 0 0 6px; color: var(--cases-purple); font-size: 11.5px; font-weight: 750; line-height: 1.35; } /* Oculta la insignia para aligerar la tarjeta */ #casos .ortho-case-card__verified { display: none; } #casos .ortho-case-card__content h3, #casos .ortho-case-card__heading h3 { margin: 0; color: var(--cases-text); font-size: 17px; font-weight: 800; line-height: 1.27; letter-spacing: -0.3px; } #casos .ortho-case-card__description { margin: 9px 0 0; color: var(--cases-muted); font-size: 12.5px; font-weight: 400; line-height: 1.54; } #casos .ortho-case-card__link { width: max-content; max-width: 100%; margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--cases-purple-dark); font-size: 12px; font-weight: 750; line-height: 1.35; text-decoration: none; transition: color 0.2s ease, gap 0.2s ease; } #casos .ortho-case-card__link:hover { color: var(--cases-purple); gap: 9px; } #casos .ortho-case-card__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== TERCER CASO PENDIENTE ================================================== */ #casos .ortho-case-pending { height: 280px; padding: 23px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient( 145deg, #f7f1f9 0%, #ede0f1 100% ); } #casos .ortho-case-pending__icon { width: 46px; height: 46px; margin-bottom: 13px; display: grid; place-items: center; color: var(--cases-purple); background: #ffffff; border: 1px solid rgba(114, 32, 142, 0.1); border-radius: 14px; } #casos .ortho-case-pending__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } #casos .ortho-case-pending__eyebrow { margin-bottom: 7px; color: var(--cases-purple); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 9px; font-weight: 600; line-height: 1.4; letter-spacing: 1.2px; text-transform: uppercase; } #casos .ortho-case-pending strong { color: var(--cases-text); font-size: 17px; font-weight: 800; line-height: 1.3; } #casos .ortho-case-pending p { max-width: 280px; margin: 9px auto 0; color: var(--cases-muted); font-size: 12.5px; line-height: 1.52; } /* Oculta los tres bloques decorativos */ #casos .ortho-case-pending__steps { display: none; } /* ================================================== AVISO INFERIOR ================================================== */ #casos .ortho-cases__notice { max-width: 760px; margin: 22px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, 0.67); text-align: center; } #casos .ortho-cases__notice svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #casos .ortho-cases__notice p { margin: 0; font-size: 11px; line-height: 1.5; } /* ================================================== MONITORES GRANDES ================================================== */ @media (min-width: 1500px) { #casos.ortho-cases { padding: 70px 40px 48px; } #casos .ortho-cases__container { max-width: 1180px; } #casos .ortho-clinical-viewer, #casos .ortho-case-pending { height: 290px; } } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #casos.ortho-cases { padding: 58px 28px 42px; } #casos .ortho-cases__container { max-width: 900px; } #casos .ortho-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } #casos .ortho-case-card--pending { grid-column: 1 / -1; width: calc(50% - 7.5px); justify-self: center; } } /* ================================================== TABLET ================================================== */ @media (max-width: 760px) { #casos.ortho-cases { padding: 51px 24px 39px; } #casos .ortho-cases__container { max-width: 620px; } #casos .ortho-cases__header { margin-bottom: 29px; } #casos .ortho-cases__eyebrow { font-size: 10.5px; letter-spacing: 1.8px; } #casos .ortho-cases__header h2 { font-size: clamp(35px, 8vw, 45px); line-height: 1.06; letter-spacing: -1.6px; } #casos .ortho-cases__intro { font-size: 13.5px; } #casos .ortho-cases__grid { grid-template-columns: 1fr; gap: 14px; } #casos .ortho-case-card--pending { grid-column: auto; width: 100%; } #casos .ortho-clinical-viewer, #casos .ortho-case-pending { height: 300px; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #casos.ortho-cases { padding: 44px 18px 35px; } #casos .ortho-cases__eyebrow { font-size: 10px; letter-spacing: 1.55px; } #casos .ortho-cases__header h2 { font-size: clamp(31px, 9vw, 39px); line-height: 1.08; letter-spacing: -1.25px; } #casos .ortho-cases__intro { font-size: 13px; line-height: 1.55; } #casos .ortho-case-card { border-radius: 17px; } #casos .ortho-case-card__top { min-height: 47px; padding: 10px 13px; } #casos .ortho-case-card__specialty { font-size: 11.5px; } #casos .ortho-clinical-viewer, #casos .ortho-case-pending { height: 285px; } #casos .ortho-clinical-warning { padding: 20px 17px; } #casos .ortho-clinical-warning__icon { width: 43px; height: 43px; } #casos .ortho-clinical-warning__eyebrow { font-size: 9px; } #casos .ortho-clinical-warning__button { min-height: 42px; font-size: 12.5px; } #casos .ortho-clinical-slide { grid-template-rows: minmax(0, 1fr) 64px; } #casos .ortho-clinical-slide figcaption { padding: 10px 46px; } #casos .ortho-clinical-arrow { width: 34px; height: 34px; } #casos .ortho-clinical-arrow--previous { left: 8px; } #casos .ortho-clinical-arrow--next { right: 8px; } #casos .ortho-case-card__content { min-height: 0; padding: 19px 18px 18px; } #casos .ortho-case-card__content h3, #casos .ortho-case-card__heading h3 { font-size: 16.5px; } #casos .ortho-case-card__description { font-size: 12.5px; } #casos .ortho-case-pending strong { font-size: 16.5px; } #casos .ortho-case-pending p { font-size: 12.5px; } #casos .ortho-cases__notice { align-items: flex-start; margin-top: 20px; } #casos .ortho-cases__notice p { font-size: 10.5px; } } /* ================================================== PANTALLAS MUY PEQUEÑAS ================================================== */ @media (max-width: 380px) { #casos.ortho-cases { padding-right: 15px; padding-left: 15px; } #casos .ortho-case-card__top { padding-right: 11px; padding-left: 11px; } #casos .ortho-case-card__number { display: none; } #casos .ortho-case-card__content { padding-right: 16px; padding-left: 16px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #casos .ortho-case-card, #casos .ortho-clinical-warning, #casos .ortho-clinical-slide, #casos .ortho-clinical-slide__image img, #casos .ortho-clinical-arrow, #casos .ortho-clinical-dot, #casos .ortho-case-card__link { transition: none; } #casos .ortho-case-card:hover, #casos .ortho-clinical-slide__image:hover img { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-dfeba6c *//* ================================================== ESPECIALISTAS ORTODENT CARRUSEL MINIMALISTA Y RESPONSIVE ================================================== */ #especialistas.ortho-specialists { --specialist-purple: #72208e; --specialist-purple-dark: #57156d; --specialist-purple-soft: #f4e8f8; --specialist-text: #18131c; --specialist-muted: #706873; --specialist-border: #e7dfe9; position: relative; width: 100%; overflow: hidden; padding: 58px 32px 48px; background: radial-gradient( circle at 5% 4%, rgba(114, 32, 142, 0.035) 0, rgba(114, 32, 142, 0.035) 105px, transparent 106px ), linear-gradient( 180deg, #ffffff 0%, #fcfafc 100% ); font-family: "Montserrat", Arial, sans-serif; } #especialistas *, #especialistas *::before, #especialistas *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR ================================================== */ #especialistas .ortho-specialists__container { width: 100%; max-width: 1120px; margin: 0 auto; } /* ================================================== ENCABEZADO MINIMALISTA ================================================== */ #especialistas .ortho-specialists__header { margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--specialist-border); padding-bottom: 20px; } #especialistas .ortho-specialists__header-content { max-width: 620px; } #especialistas .ortho-specialists__eyebrow { margin: 0 0 7px; color: var(--specialist-purple); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 9.5px; font-weight: 600; line-height: 1.4; letter-spacing: 1.8px; text-transform: uppercase; } #especialistas .ortho-specialists__header h2 { margin: 0; color: var(--specialist-text); font-size: clamp(29px, 3vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -1.4px; } #especialistas .ortho-specialists__intro { max-width: 570px; margin: 9px 0 0; color: var(--specialist-muted); font-size: 13px; font-weight: 400; line-height: 1.55; } #especialistas .ortho-specialists__counter { flex: 0 0 auto; padding-bottom: 2px; display: flex; align-items: center; gap: 5px; color: #9a909d; font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 9px; font-weight: 600; } #especialistas .ortho-specialists__current { color: var(--specialist-purple); font-size: 14px; } /* ================================================== VISOR Y PISTA ================================================== */ #especialistas .ortho-specialists__viewport { position: relative; width: 100%; } #especialistas .ortho-specialists__track { position: relative; width: 100%; min-height: 620px; } /* ================================================== PERFIL ================================================== */ #especialistas .ortho-profile { position: absolute; inset: 0 auto auto 0; width: 100%; display: grid; grid-template-columns: minmax(340px, 0.84fr) minmax(0, 1.16fr); align-items: center; gap: 56px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(24px); transition: opacity 0.42s ease, visibility 0.42s ease, transform 0.42s ease; } #especialistas .ortho-profile.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } /* ================================================== FOTOGRAFÍA ================================================== */ #especialistas .ortho-profile__visual { position: relative; width: 100%; max-width: 400px; margin: 0 auto; padding-bottom: 31px; } #especialistas .ortho-profile__image { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient( 145deg, #eadcf0, #d8bee3 ); border-radius: 25px 25px 68px 25px; box-shadow: 0 18px 39px rgba(64, 31, 73, 0.12); } #especialistas .ortho-profile__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 68%, rgba(30, 10, 36, 0.09) 100% ); pointer-events: none; } #especialistas .ortho-profile__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ================================================== IMAGEN PENDIENTE ================================================== */ #especialistas .ortho-profile__image--pending { padding: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: linear-gradient( 145deg, #f2e7f5, #ddc8e5 ); } #especialistas .ortho-profile__image--pending::after { display: none; } #especialistas .ortho-profile__pending-icon { width: 52px; height: 52px; margin-bottom: 14px; display: grid; place-items: center; color: var(--specialist-purple); background: rgba(255, 255, 255, 0.78); border-radius: 15px; } #especialistas .ortho-profile__pending-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #especialistas .ortho-profile__image--pending strong { color: var(--specialist-text); font-size: 16px; font-weight: 800; line-height: 1.35; } #especialistas .ortho-profile__image--pending small { max-width: 240px; margin-top: 7px; color: var(--specialist-muted); font-size: 11.5px; line-height: 1.5; } /* ================================================== IDENTIDAD FLOTANTE ================================================== */ #especialistas .ortho-profile__identity { position: absolute; z-index: 4; right: -10px; bottom: 0; width: min(295px, 84%); padding: 14px 17px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(114, 32, 142, 0.09); border-radius: 16px; box-shadow: 0 13px 28px rgba(49, 25, 57, 0.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #especialistas .ortho-profile__identity > span { margin-bottom: 4px; color: var(--specialist-purple); font-size: 9px; font-weight: 750; line-height: 1.3; letter-spacing: 0.8px; text-transform: uppercase; } #especialistas .ortho-profile__identity strong { color: var(--specialist-text); font-size: 15.5px; font-weight: 800; line-height: 1.3; } #especialistas .ortho-profile__identity small { margin-top: 3px; color: var(--specialist-muted); font-size: 11px; line-height: 1.4; } /* ================================================== CONTENIDO ================================================== */ #especialistas .ortho-profile__content { width: 100%; max-width: 620px; min-width: 0; } #especialistas .ortho-profile__label { margin: 0 0 5px; color: var(--specialist-purple); font-size: 9px; font-weight: 750; line-height: 1.4; letter-spacing: 1.2px; text-transform: uppercase; } #especialistas .ortho-profile__heading h3 { margin: 0; color: var(--specialist-text); font-size: clamp(30px, 3vw, 41px); font-weight: 800; line-height: 1.06; letter-spacing: -1.5px; } #especialistas .ortho-profile__specialty { margin: 7px 0 0; color: var(--specialist-purple); font-size: 13.5px; font-weight: 750; line-height: 1.4; } /* ================================================== DATOS DESTACADOS ================================================== */ #especialistas .ortho-profile__facts { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #especialistas .ortho-profile__fact { min-width: 0; padding: 13px; display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid var(--specialist-border); border-radius: 13px; } #especialistas .ortho-profile__fact-icon { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; color: var(--specialist-purple); background: var(--specialist-purple-soft); border-radius: 10px; } #especialistas .ortho-profile__fact-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #especialistas .ortho-profile__fact div { min-width: 0; } #especialistas .ortho-profile__fact div span { display: block; margin-bottom: 2px; color: var(--specialist-muted); font-size: 9.5px; font-weight: 650; line-height: 1.3; text-transform: uppercase; } #especialistas .ortho-profile__fact div strong { display: block; overflow-wrap: anywhere; color: var(--specialist-text); font-size: 13px; font-weight: 800; line-height: 1.35; } /* ================================================== LISTA ================================================== */ #especialistas .ortho-profile__list { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--specialist-border); border-bottom: 1px solid var(--specialist-border); } #especialistas .ortho-profile__list li { padding: 11px 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--specialist-border); } #especialistas .ortho-profile__list li:last-child { border-bottom: 0; } #especialistas .ortho-profile__check { width: 27px; height: 27px; display: grid; place-items: center; color: var(--specialist-purple); background: var(--specialist-purple-soft); border-radius: 8px; } #especialistas .ortho-profile__check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #especialistas .ortho-profile__list strong { display: block; color: var(--specialist-text); font-size: 13.5px; font-weight: 800; line-height: 1.3; } #especialistas .ortho-profile__list p { margin: 3px 0 0; color: var(--specialist-muted); font-size: 12px; line-height: 1.45; } /* ================================================== MENSAJE ================================================== */ #especialistas .ortho-profile__message { max-width: 620px; margin: 15px 0 0; padding: 13px 15px; background: var(--specialist-purple-soft); border-radius: 11px; } #especialistas .ortho-profile__message p { margin: 0; color: #514354; font-size: 12px; font-weight: 550; line-height: 1.5; } /* ================================================== ACCIONES ================================================== */ #especialistas .ortho-profile__actions { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; } #especialistas .ortho-profile__button { min-height: 44px; padding: 12px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #ffffff; background: linear-gradient( 135deg, var(--specialist-purple-dark), var(--specialist-purple) ); border-radius: 11px; box-shadow: 0 10px 22px rgba(87, 21, 109, 0.18); font-size: 12px; font-weight: 750; line-height: 1.3; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease; } #especialistas .ortho-profile__button:hover, #especialistas .ortho-profile__button:focus { color: #ffffff; gap: 10px; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(87, 21, 109, 0.25); } #especialistas .ortho-profile__button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #especialistas .ortho-profile__actions > span { color: #8a818e; font-size: 10.5px; font-weight: 500; line-height: 1.4; } /* ================================================== FLECHAS ================================================== */ #especialistas .ortho-specialists__arrow { position: absolute; z-index: 10; top: 50%; width: 41px; height: 41px; display: grid; place-items: center; color: var(--specialist-purple); background: rgba(255, 255, 255, 0.97); border: 1px solid var(--specialist-border); border-radius: 50%; box-shadow: 0 9px 21px rgba(54, 28, 62, 0.12); cursor: pointer; transform: translateY(-50%); transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } #especialistas .ortho-specialists__arrow:hover, #especialistas .ortho-specialists__arrow:focus-visible { color: #ffffff; background: var(--specialist-purple); transform: translateY(-50%) scale(1.04); } #especialistas .ortho-specialists__arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #especialistas .ortho-specialists__arrow--prev { left: -20px; } #especialistas .ortho-specialists__arrow--next { right: -20px; } /* ================================================== NAVEGACIÓN INFERIOR ================================================== */ #especialistas .ortho-specialists__navigation { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 17px; } #especialistas .ortho-specialists__dots { display: flex; align-items: center; gap: 7px; } #especialistas .ortho-specialists__dot { width: 8px; height: 8px; padding: 0; background: #d9cedc; border: 0; border-radius: 999px; cursor: pointer; transition: width 0.2s ease, background 0.2s ease; } #especialistas .ortho-specialists__dot.is-active { width: 24px; background: var(--specialist-purple); } #especialistas .ortho-specialists__pause { min-height: 31px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 5px; color: var(--specialist-muted); background: #ffffff; border: 1px solid var(--specialist-border); border-radius: 8px; font-family: inherit; font-size: 10px; font-weight: 650; cursor: pointer; } #especialistas .ortho-specialists__pause svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #especialistas .ortho-specialists__play-icon { display: none; } #especialistas .ortho-specialists__pause.is-paused .ortho-specialists__pause-icon { display: none; } #especialistas .ortho-specialists__pause.is-paused .ortho-specialists__play-icon { display: block; } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) and (min-width: 821px) { #especialistas.ortho-specialists { padding: 54px 42px 46px; } #especialistas .ortho-specialists__container { max-width: 900px; } #especialistas .ortho-specialists__track { min-height: 595px; } #especialistas .ortho-profile { grid-template-columns: minmax(295px, 0.8fr) minmax(0, 1.2fr); gap: 42px; } #especialistas .ortho-profile__visual { max-width: 350px; } #especialistas .ortho-profile__heading h3 { font-size: clamp(28px, 3.5vw, 37px); } #especialistas .ortho-specialists__arrow--prev { left: -14px; } #especialistas .ortho-specialists__arrow--next { right: -14px; } } /* ================================================== TABLET ================================================== */ @media (max-width: 820px) { #especialistas.ortho-specialists { padding: 49px 24px 45px; } #especialistas .ortho-specialists__container { max-width: 620px; } #especialistas .ortho-specialists__header { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 27px; } #especialistas .ortho-specialists__header h2 { font-size: clamp(31px, 7vw, 40px); } #especialistas .ortho-specialists__track { min-height: 1050px; } #especialistas .ortho-profile { grid-template-columns: 1fr; gap: 45px; } #especialistas .ortho-profile__visual { max-width: 460px; padding-bottom: 43px; } #especialistas .ortho-profile__content { max-width: 620px; margin: 0 auto; } #especialistas .ortho-specialists__arrow { top: 310px; } #especialistas .ortho-specialists__arrow--prev { left: 4px; } #especialistas .ortho-specialists__arrow--next { right: 4px; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #especialistas.ortho-specialists { padding: 43px 18px 42px; } #especialistas .ortho-specialists__header { padding-bottom: 17px; } #especialistas .ortho-specialists__eyebrow { font-size: 9px; letter-spacing: 1.45px; } #especialistas .ortho-specialists__header h2 { font-size: clamp(29px, 8vw, 36px); line-height: 1.08; } #especialistas .ortho-specialists__intro { font-size: 12.5px; } #especialistas .ortho-specialists__track { min-height: 1000px; } #especialistas .ortho-profile__visual { width: 100%; max-width: 100%; padding-bottom: 58px; } #especialistas .ortho-profile__image { border-radius: 22px 22px 60px 22px; } #especialistas .ortho-profile__identity { right: 7px; width: calc(100% - 14px); padding: 13px 15px; } #especialistas .ortho-profile__heading h3 { font-size: clamp(27px, 8vw, 34px); } #especialistas .ortho-profile__facts { grid-template-columns: 1fr; } #especialistas .ortho-profile__fact { padding: 12px; } #especialistas .ortho-profile__list p { font-size: 12px; line-height: 1.5; } #especialistas .ortho-profile__actions { align-items: stretch; flex-direction: column; } #especialistas .ortho-profile__button { width: 100%; } #especialistas .ortho-specialists__arrow { top: 278px; width: 38px; height: 38px; } #especialistas .ortho-specialists__arrow--prev { left: -5px; } #especialistas .ortho-specialists__arrow--next { right: -5px; } } /* ================================================== PANTALLAS PEQUEÑAS ================================================== */ @media (max-width: 380px) { #especialistas .ortho-specialists__track { min-height: 980px; } #especialistas .ortho-profile__image--pending { padding: 22px; } #especialistas .ortho-profile__identity strong { font-size: 14.5px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #especialistas .ortho-profile, #especialistas .ortho-specialists__arrow, #especialistas .ortho-specialists__dot, #especialistas .ortho-profile__button { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6ec5367 *//* ================================================== EXPERIENCIAS DE PACIENTES — ORTODENT ================================================== */ #opiniones.ortho-reviews { --reviews-purple: #8d2fb1; --reviews-purple-dark: #681780; --reviews-purple-soft: #f4e8f8; --reviews-text: #18131c; --reviews-muted: #706873; --reviews-border: #e8e0eb; --reviews-background: #fbf9fc; position: relative; width: 100%; overflow: hidden; padding: 68px 24px 54px; background: radial-gradient( circle at 95% 5%, rgba(141, 47, 177, 0.05) 0, rgba(141, 47, 177, 0.05) 135px, transparent 136px ), linear-gradient( 180deg, #ffffff 0%, var(--reviews-background) 100% ); font-family: "Montserrat", sans-serif; } #opiniones.ortho-reviews *, #opiniones.ortho-reviews *::before, #opiniones.ortho-reviews *::after { box-sizing: border-box; } #opiniones .ortho-reviews__container { width: 100%; max-width: 1240px; margin: 0 auto; } /* ================================================== ENCABEZADO ================================================== */ #opiniones .ortho-reviews__header { max-width: 850px; margin: 0 auto 39px; text-align: center; } #opiniones .ortho-reviews__eyebrow { margin: 0 0 11px; color: var(--reviews-purple); font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: 1.8px; text-transform: uppercase; } #opiniones .ortho-reviews__header h2 { margin: 0; color: var(--reviews-text); font-size: clamp(40px, 4.3vw, 58px); font-weight: 800; line-height: 1.06; letter-spacing: -2.3px; } #opiniones .ortho-reviews__intro { max-width: 700px; margin: 16px auto 0; color: var(--reviews-muted); font-size: 15px; font-weight: 400; line-height: 1.65; } /* ================================================== CUADRÍCULA ================================================== */ #opiniones .ortho-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 20px; } /* ================================================== TARJETAS ================================================== */ #opiniones .ortho-review-card { min-height: 300px; padding: 25px; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--reviews-border); border-radius: 22px; box-shadow: 0 10px 28px rgba(63, 38, 70, 0.055); transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease; } #opiniones .ortho-review-card:hover { transform: translateY(-4px); border-color: rgba(141, 47, 177, 0.22); box-shadow: 0 19px 42px rgba(63, 38, 70, 0.11); } /* ================================================== CABECERA DE TARJETA ================================================== */ #opiniones .ortho-review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; } #opiniones .ortho-review-card__status { display: inline-flex; align-items: center; gap: 7px; color: var(--reviews-purple-dark); font-size: 11px; font-weight: 750; line-height: 1.3; } #opiniones .ortho-review-card__status svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #opiniones .ortho-review-card__number { padding: 7px 9px; color: #746d78; background: #f3edf5; border-radius: 999px; font-size: 10px; font-weight: 750; line-height: 1; } /* ================================================== ESTRELLAS ================================================== */ #opiniones .ortho-review-card__stars { display: flex; gap: 3px; margin-bottom: 18px; color: #d7b4df; font-size: 18px; line-height: 1; } /* ================================================== CITA ================================================== */ #opiniones .ortho-review-card blockquote { flex: 1 1 auto; margin: 0; padding: 0; color: var(--reviews-text); font-size: 15px; font-weight: 600; line-height: 1.58; } /* ================================================== PIE DE TARJETA ================================================== */ #opiniones .ortho-review-card__footer { margin-top: 22px; padding-top: 18px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--reviews-border); } #opiniones .ortho-review-card__avatar { flex: 0 0 auto; width: 39px; height: 39px; display: grid; place-items: center; color: var(--reviews-purple); background: var(--reviews-purple-soft); border-radius: 50%; } #opiniones .ortho-review-card__avatar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #opiniones .ortho-review-card__footer strong { display: block; color: var(--reviews-text); font-size: 13.5px; font-weight: 750; line-height: 1.3; } #opiniones .ortho-review-card__footer span { display: block; margin-top: 3px; color: var(--reviews-muted); font-size: 12px; line-height: 1.4; } /* ================================================== TARJETA DESTACADA ================================================== */ #opiniones .ortho-review-card--featured { color: #ffffff; background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 95px, transparent 96px ), linear-gradient( 140deg, #421151 0%, #771f92 100% ); border-color: transparent; box-shadow: 0 17px 36px rgba(68, 18, 83, 0.2); } #opiniones .ortho-review-card--featured:hover { border-color: transparent; box-shadow: 0 24px 48px rgba(68, 18, 83, 0.27); } #opiniones .ortho-review-card--featured .ortho-review-card__status, #opiniones .ortho-review-card--featured .ortho-review-card__number { color: #ffffff; } #opiniones .ortho-review-card--featured .ortho-review-card__number { background: rgba(255, 255, 255, 0.14); } #opiniones .ortho-review-card__google-icon { width: 48px; height: 48px; margin-bottom: 18px; display: grid; place-items: center; color: #ffffff; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 15px; } #opiniones .ortho-review-card__google-icon svg { width: 24px; height: 24px; fill: currentColor; } #opiniones .ortho-review-card--featured h3 { margin: 0; color: #ffffff; font-size: 20px; font-weight: 750; line-height: 1.3; } #opiniones .ortho-review-card--featured > p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 13.5px; line-height: 1.58; } #opiniones .ortho-review-card__pending { width: max-content; max-width: 100%; margin-top: auto; padding: 10px 13px; color: #ffffff; background: rgba(255, 255, 255, 0.13); border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.2; } /* ================================================== BLOQUE DE GOOGLE ================================================== */ #opiniones .ortho-reviews__google-box { margin-top: 22px; padding: 21px 23px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #ffffff; border: 1px solid var(--reviews-border); border-radius: 19px; box-shadow: 0 10px 28px rgba(63, 38, 70, 0.05); } #opiniones .ortho-reviews__google-content { min-width: 0; display: flex; align-items: center; gap: 15px; } #opiniones .ortho-reviews__google-logo { flex: 0 0 auto; width: 49px; height: 49px; display: grid; place-items: center; color: var(--reviews-purple); background: var(--reviews-purple-soft); border-radius: 15px; } #opiniones .ortho-reviews__google-logo svg { width: 25px; height: 25px; fill: currentColor; } #opiniones .ortho-reviews__google-label { display: block; margin-bottom: 4px; color: var(--reviews-purple); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } #opiniones .ortho-reviews__google-content h3 { margin: 0; color: var(--reviews-text); font-size: 17px; font-weight: 750; line-height: 1.35; } #opiniones .ortho-reviews__google-content p { margin: 5px 0 0; color: var(--reviews-muted); font-size: 12.5px; line-height: 1.5; } /* ================================================== BOTÓN DE GOOGLE ================================================== */ #opiniones .ortho-reviews__google-button { flex: 0 0 auto; min-height: 46px; padding: 13px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #ffffff; background: linear-gradient( 135deg, var(--reviews-purple-dark), var(--reviews-purple) ); border-radius: 12px; font-size: 12.5px; font-weight: 750; line-height: 1.3; text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease; } #opiniones .ortho-reviews__google-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #opiniones .ortho-reviews__google-button.is-disabled { cursor: default; opacity: 0.72; } /* ================================================== AVISO ================================================== */ #opiniones .ortho-reviews__notice { max-width: 720px; margin: 20px auto 0; color: #8a818e; text-align: center; font-size: 11.5px; line-height: 1.5; } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #opiniones.ortho-reviews { padding: 58px 20px 48px; } #opiniones .ortho-reviews__container { max-width: 940px; } #opiniones .ortho-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; } #opiniones .ortho-review-card--featured { grid-column: 1 / -1; width: calc(50% - 8.5px); justify-self: center; } } /* ================================================== TABLET ================================================== */ @media (max-width: 760px) { #opiniones.ortho-reviews { padding: 50px 17px 43px; } #opiniones .ortho-reviews__header { margin-bottom: 31px; } #opiniones .ortho-reviews__header h2 { font-size: clamp(35px, 8.5vw, 46px); letter-spacing: -1.7px; } #opiniones .ortho-reviews__intro { font-size: 14px; } #opiniones .ortho-reviews__grid { grid-template-columns: 1fr; gap: 15px; } #opiniones .ortho-review-card--featured { grid-column: auto; width: 100%; } #opiniones .ortho-reviews__google-box { align-items: flex-start; flex-direction: column; } #opiniones .ortho-reviews__google-button { width: 100%; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #opiniones.ortho-reviews { padding: 43px 14px 37px; } #opiniones .ortho-reviews__eyebrow { font-size: 11px; } #opiniones .ortho-reviews__header h2 { font-size: clamp(32px, 9vw, 40px); line-height: 1.08; letter-spacing: -1.35px; } #opiniones .ortho-reviews__intro { font-size: 13.5px; line-height: 1.58; } #opiniones .ortho-review-card { min-height: 0; padding: 21px; border-radius: 18px; } #opiniones .ortho-review-card blockquote { font-size: 14px; } #opiniones .ortho-review-card__footer strong { font-size: 13px; } #opiniones .ortho-review-card__footer span { font-size: 11.5px; } #opiniones .ortho-reviews__google-box { padding: 19px; border-radius: 17px; } #opiniones .ortho-reviews__google-content { align-items: flex-start; } #opiniones .ortho-reviews__google-logo { width: 43px; height: 43px; } #opiniones .ortho-reviews__google-content h3 { font-size: 16px; } #opiniones .ortho-reviews__google-content p { font-size: 12px; } #opiniones .ortho-reviews__notice { font-size: 10.5px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #opiniones .ortho-review-card, #opiniones .ortho-reviews__google-button { transition: none; } #opiniones .ortho-review-card:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e24ab1e *//* ================================================== SEDES ORTODENT MINIMAPAS + DISEÑO MINIMALISTA ================================================== */ #sedes.ortho-locations { --locations-purple: #72208e; --locations-purple-dark: #57156d; --locations-purple-soft: #f5ebf8; --locations-purple-pale: #fbf8fc; --locations-text: #211c23; --locations-muted: #716a73; --locations-border: #e9e2eb; --locations-white: #ffffff; position: relative; width: 100%; overflow: hidden; padding: 76px 32px 80px; color: var(--locations-text); background: linear-gradient( 180deg, #ffffff 0%, #fcfafc 100% ); font-family: "Montserrat", Arial, sans-serif; } #sedes *, #sedes *::before, #sedes *::after { box-sizing: border-box; } #sedes .ortho-locations__container { width: 100%; max-width: 1180px; margin: 0 auto; } /* ================================================== ENCABEZADO ================================================== */ #sedes .ortho-locations__header { margin-bottom: 34px; display: grid; grid-template-columns: minmax(0, 0.48fr) minmax(320px, 0.52fr); align-items: end; gap: 42px; } #sedes .ortho-locations__eyebrow { margin: 0 0 9px; color: var(--locations-purple); font-size: 10px; font-weight: 800; line-height: 1.4; letter-spacing: 1.7px; text-transform: uppercase; } #sedes .ortho-locations__heading h2 { margin: 0; color: var(--locations-text); font-size: clamp(36px, 4.3vw, 52px); font-weight: 800; line-height: 1.07; letter-spacing: -1.7px; } #sedes .ortho-locations__intro { max-width: 570px; margin: 0; color: var(--locations-muted); font-size: 14px; line-height: 1.75; } /* ================================================== CLÍNICA ================================================== */ #sedes .ortho-locations__clinic { min-height: 330px; margin-bottom: 25px; display: grid; grid-template-columns: minmax(0, 0.57fr) minmax(0, 0.43fr); overflow: hidden; background: var(--locations-white); border: 1px solid var(--locations-border); border-radius: 20px; box-shadow: 0 15px 36px rgba(53, 37, 58, 0.055); } #sedes .ortho-locations__clinic-image { min-width: 0; min-height: 330px; overflow: hidden; } #sedes .ortho-locations__clinic-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } #sedes .ortho-locations__clinic-content { min-width: 0; padding: 40px 38px; display: flex; justify-content: center; flex-direction: column; } #sedes .ortho-locations__clinic-label { width: max-content; max-width: 100%; margin-bottom: 12px; padding: 6px 10px; color: var(--locations-purple-dark); background: var(--locations-purple-soft); border-radius: 999px; font-size: 9.5px; font-weight: 800; line-height: 1.4; letter-spacing: 0.8px; text-transform: uppercase; } #sedes .ortho-locations__clinic-content h3 { margin: 0; color: var(--locations-text); font-size: clamp(25px, 2.5vw, 33px); font-weight: 800; line-height: 1.17; letter-spacing: -0.8px; } #sedes .ortho-locations__clinic-content > p { margin: 16px 0 0; color: var(--locations-muted); font-size: 13.5px; line-height: 1.7; } #sedes .ortho-locations__clinic-features { margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; } #sedes .ortho-locations__clinic-features span { display: inline-flex; align-items: center; gap: 7px; color: #514a53; font-size: 11.5px; font-weight: 700; line-height: 1.4; } #sedes .ortho-locations__clinic-features svg { flex: 0 0 auto; width: 20px; height: 20px; padding: 4px; color: var(--locations-purple); background: var(--locations-purple-soft); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== GRID ================================================== */ #sedes .ortho-locations__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; } /* ================================================== TARJETA ================================================== */ #sedes .ortho-location-card { min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--locations-white); border: 1px solid var(--locations-border); border-radius: 18px; box-shadow: 0 12px 28px rgba(53, 37, 58, 0.05); transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } #sedes .ortho-location-card:hover { border-color: rgba(114, 32, 142, 0.2); box-shadow: 0 16px 35px rgba(53, 37, 58, 0.085); transform: translateY(-3px); } /* ================================================== MINIMAPA ================================================== */ #sedes .ortho-location-card__map { position: relative; width: 100%; height: 185px; overflow: hidden; background: #f3f0f4; border-bottom: 1px solid var(--locations-border); } #sedes .ortho-location-card__map iframe { width: 100%; height: 100%; display: block; border: 0; filter: saturate(0.72) contrast(0.95) brightness(1.03); } #sedes .ortho-location-card__map::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -24px 28px rgba(255, 255, 255, 0.12); } #sedes .ortho-location-card__map-overlay { position: absolute; right: 12px; bottom: 12px; z-index: 3; min-height: 34px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--locations-purple-dark); background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(114, 32, 142, 0.16); border-radius: 9px; box-shadow: 0 7px 18px rgba(44, 32, 48, 0.12); backdrop-filter: blur(7px); font-size: 10.5px; font-weight: 800; line-height: 1.3; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } #sedes .ortho-location-card__map-overlay:hover, #sedes .ortho-location-card__map-overlay:focus-visible { color: #ffffff; background: var(--locations-purple); text-decoration: none; transform: translateY(-2px); } #sedes .ortho-location-card__map-overlay svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== CONTENIDO ================================================== */ #sedes .ortho-location-card__content { min-width: 0; flex: 1; padding: 25px; display: flex; flex-direction: column; } #sedes .ortho-location-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } #sedes .ortho-location-card__badge { width: max-content; max-width: 100%; margin-bottom: 9px; padding: 5px 9px; color: var(--locations-purple-dark); background: var(--locations-purple-soft); border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1.35; letter-spacing: 0.8px; text-transform: uppercase; } #sedes .ortho-location-card__content h3 { margin: 0; color: var(--locations-text); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.6px; } #sedes .ortho-location-card__city { margin-top: 2px; padding: 6px 9px; color: var(--locations-muted); background: #f8f6f9; border-radius: 8px; font-size: 9.5px; font-weight: 700; line-height: 1.35; } /* ================================================== DIRECCIÓN ================================================== */ #sedes .ortho-location-card__address { min-height: 48px; margin: 15px 0 0; display: flex; align-items: flex-start; gap: 9px; color: var(--locations-muted); font-size: 12.5px; line-height: 1.65; } #sedes .ortho-location-card__address svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--locations-purple); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== DETALLES ================================================== */ #sedes .ortho-location-card__details { margin: 19px 0 23px; padding: 0; display: flex; flex-direction: column; gap: 10px; list-style: none; } #sedes .ortho-location-card__details li { display: flex; align-items: flex-start; gap: 9px; color: #504951; font-size: 11.5px; font-weight: 600; line-height: 1.5; } #sedes .ortho-location-card__details svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--locations-purple); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== ACCIONES ================================================== */ #sedes .ortho-location-card__actions { width: 100%; margin-top: auto; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 9px; } #sedes .ortho-location-card__button, #sedes .ortho-location-card__secondary { min-width: 0; min-height: 46px; padding: 11px 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 1.35; text-align: center; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } #sedes .ortho-location-card__button { color: #ffffff; background: var(--locations-purple); border: 1px solid var(--locations-purple); } #sedes .ortho-location-card__button:hover, #sedes .ortho-location-card__button:focus-visible { color: #ffffff; background: var(--locations-purple-dark); border-color: var(--locations-purple-dark); text-decoration: none; transform: translateY(-2px); } #sedes .ortho-location-card__secondary { color: var(--locations-purple); background: var(--locations-white); border: 1px solid rgba(114, 32, 142, 0.24); } #sedes .ortho-location-card__secondary:hover, #sedes .ortho-location-card__secondary:focus-visible { color: var(--locations-purple-dark); background: var(--locations-purple-soft); border-color: var(--locations-purple); text-decoration: none; transform: translateY(-2px); } #sedes .ortho-location-card__button svg, #sedes .ortho-location-card__secondary svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== AVISO ================================================== */ #sedes .ortho-locations__notice { width: max-content; max-width: 100%; margin: 24px auto 0; padding: 9px 14px; color: #665f68; background: #f8f6f9; border: 1px solid var(--locations-border); border-radius: 999px; font-size: 10.5px; font-weight: 650; line-height: 1.5; text-align: center; } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #sedes.ortho-locations { padding: 67px 28px 71px; } #sedes .ortho-locations__container { max-width: 960px; } #sedes .ortho-locations__clinic-content { padding: 35px 31px; } #sedes .ortho-location-card__content { padding: 23px; } #sedes .ortho-location-card__actions { grid-template-columns: 1fr; } } /* ================================================== TABLET ================================================== */ @media (max-width: 820px) { #sedes.ortho-locations { padding: 59px 24px 63px; } #sedes .ortho-locations__container { max-width: 680px; } #sedes .ortho-locations__header { margin-bottom: 28px; grid-template-columns: 1fr; gap: 13px; } #sedes .ortho-locations__clinic { grid-template-columns: 1fr; } #sedes .ortho-locations__clinic-image { min-height: 290px; max-height: 380px; } #sedes .ortho-locations__clinic-content { padding: 32px 29px 34px; } #sedes .ortho-locations__grid { grid-template-columns: 1fr; } #sedes .ortho-location-card__map { height: 210px; } #sedes .ortho-location-card__address { min-height: auto; } #sedes .ortho-location-card__actions { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #sedes.ortho-locations { padding: 51px 17px 55px; } #sedes .ortho-locations__heading h2 { font-size: clamp(31px, 10vw, 40px); } #sedes .ortho-locations__intro { font-size: 13px; line-height: 1.68; } #sedes .ortho-locations__clinic { margin-bottom: 18px; border-radius: 17px; } #sedes .ortho-locations__clinic-image { min-height: 225px; max-height: 275px; } #sedes .ortho-locations__clinic-content { padding: 26px 20px 28px; } #sedes .ortho-locations__clinic-content h3 { font-size: 24px; } #sedes .ortho-locations__clinic-features { align-items: flex-start; flex-direction: column; } #sedes .ortho-locations__grid { gap: 16px; } #sedes .ortho-location-card { border-radius: 16px; } #sedes .ortho-location-card__map { height: 180px; } #sedes .ortho-location-card__map-overlay { right: 10px; bottom: 10px; } #sedes .ortho-location-card__content { padding: 22px 19px 20px; } #sedes .ortho-location-card__content h3 { font-size: 22px; } #sedes .ortho-location-card__city { font-size: 9px; } #sedes .ortho-location-card__address { font-size: 12px; } #sedes .ortho-location-card__actions { grid-template-columns: 1fr; } #sedes .ortho-location-card__button, #sedes .ortho-location-card__secondary { width: 100%; } #sedes .ortho-locations__notice { width: 100%; border-radius: 11px; } } /* ================================================== PANTALLAS MUY PEQUEÑAS ================================================== */ @media (max-width: 380px) { #sedes.ortho-locations { padding-left: 13px; padding-right: 13px; } #sedes .ortho-location-card__content, #sedes .ortho-locations__clinic-content { padding-left: 16px; padding-right: 16px; } #sedes .ortho-location-card__top { flex-direction: column; gap: 8px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #sedes .ortho-location-card, #sedes .ortho-location-card__map-overlay, #sedes .ortho-location-card__button, #sedes .ortho-location-card__secondary { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-4d66dc3 *//* ================================================== CÓMO INICIAR — ORTODENT MINIMALISTA, CENTRADO Y EQUILIBRADO ================================================== */ #como-iniciar.ortho-process { --process-bg: #18131c; --process-bg-secondary: #1c161f; --process-purple: #72208e; --process-purple-light: #dfa9ea; --process-white: #ffffff; --process-muted: rgba(255, 255, 255, 0.73); --process-border: rgba(255, 255, 255, 0.12); position: relative; width: 100%; overflow: hidden; padding: 68px 32px 72px; color: var(--process-white); background: linear-gradient( 135deg, var(--process-bg) 0%, var(--process-bg-secondary) 100% ); font-family: "Montserrat", Arial, sans-serif; } #como-iniciar.ortho-process *, #como-iniciar.ortho-process *::before, #como-iniciar.ortho-process *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR CENTRAL ================================================== */ #como-iniciar .ortho-process__container { width: 100%; max-width: 1120px; margin: 0 auto; } /* ================================================== ENCABEZADO ================================================== */ #como-iniciar .ortho-process__header { max-width: 650px; margin: 0 auto 42px; text-align: center; } #como-iniciar .ortho-process__eyebrow { margin: 0 0 10px; color: var(--process-purple-light); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 2.2px; text-transform: uppercase; } #como-iniciar .ortho-process__header h2 { margin: 0; color: var(--process-white); font-family: "Montserrat", Arial, sans-serif; font-size: clamp(40px, 4vw, 56px); font-weight: 750; line-height: 1.03; letter-spacing: -2px; } /* ================================================== CONTENEDOR DE LOS PASOS ================================================== */ #como-iniciar .ortho-process__steps { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; background: rgba(255, 255, 255, 0.012); border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); border-radius: 20px; } /* ================================================== PASOS ================================================== */ #como-iniciar .ortho-process-step { min-width: 0; min-height: 225px; padding: 36px 32px 34px; display: flex; flex-direction: column; justify-content: flex-start; border-right: 1px solid var(--process-border); } #como-iniciar .ortho-process-step:last-child { border-right: 0; } /* ================================================== NÚMEROS ================================================== */ #como-iniciar .ortho-process-step__number { width: 50px; height: 50px; margin-bottom: 21px; display: grid; place-items: center; color: #ffffff; background: linear-gradient( 135deg, #622078 0%, var(--process-purple) 100% ); border-radius: 14px; font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; box-shadow: 0 10px 22px rgba(114, 32, 142, 0.2); } /* ================================================== TÍTULOS ================================================== */ #como-iniciar .ortho-process-step h3 { max-width: 290px; margin: 0 0 8px; color: var(--process-white); font-family: "Montserrat", Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; } /* ================================================== DESCRIPCIONES ================================================== */ #como-iniciar .ortho-process-step p { max-width: 300px; margin: 0; color: var(--process-muted); font-family: "Montserrat", Arial, sans-serif; font-size: 13.5px; font-weight: 400; line-height: 1.58; } /* ================================================== MONITORES GRANDES ================================================== */ @media (min-width: 1500px) { #como-iniciar.ortho-process { padding: 72px 40px 76px; } #como-iniciar .ortho-process__container { max-width: 1180px; } #como-iniciar .ortho-process-step { min-height: 235px; padding: 38px 35px 36px; } } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #como-iniciar.ortho-process { padding: 62px 28px 64px; } #como-iniciar .ortho-process__container { max-width: 900px; } #como-iniciar .ortho-process__header { margin-bottom: 38px; } #como-iniciar .ortho-process-step { min-height: 215px; padding: 33px 25px 31px; } #como-iniciar .ortho-process-step h3 { font-size: 17px; } #como-iniciar .ortho-process-step p { font-size: 13px; } } /* ================================================== TABLET ================================================== */ @media (max-width: 820px) { #como-iniciar.ortho-process { padding: 53px 24px 55px; } #como-iniciar .ortho-process__header { margin-bottom: 31px; } #como-iniciar .ortho-process__eyebrow { font-size: 10.5px; letter-spacing: 1.8px; } #como-iniciar .ortho-process__header h2 { font-size: clamp(35px, 8vw, 45px); line-height: 1.06; letter-spacing: -1.6px; } #como-iniciar .ortho-process__steps { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; border-radius: 18px; } #como-iniciar .ortho-process-step { min-height: 0; padding: 27px 28px; border-right: 0; border-bottom: 1px solid var(--process-border); } #como-iniciar .ortho-process-step:last-child { border-bottom: 0; } #como-iniciar .ortho-process-step__number { margin-bottom: 17px; } #como-iniciar .ortho-process-step h3, #como-iniciar .ortho-process-step p { max-width: 100%; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #como-iniciar.ortho-process { padding: 45px 18px 47px; } #como-iniciar .ortho-process__header { margin-bottom: 27px; } #como-iniciar .ortho-process__eyebrow { font-size: 10px; letter-spacing: 1.55px; } #como-iniciar .ortho-process__header h2 { font-size: clamp(31px, 9vw, 39px); line-height: 1.08; letter-spacing: -1.25px; } #como-iniciar .ortho-process__steps { width: calc(100% - 8px); margin: 0 auto; border-radius: 17px; } #como-iniciar .ortho-process-step { padding: 25px 22px; } #como-iniciar .ortho-process-step__number { width: 47px; height: 47px; margin-bottom: 16px; border-radius: 13px; font-size: 14px; } #como-iniciar .ortho-process-step h3 { font-size: 17px; } #como-iniciar .ortho-process-step p { font-size: 13px; line-height: 1.55; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #como-iniciar .ortho-process-step__number { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-896fca3 *//* ================================================== PREGUNTAS FRECUENTES — ORTODENT MINIMALISTA, CENTRADA Y DESPLEGABLE ================================================== */ #preguntas.ortho-faq { --faq-purple: #72208e; --faq-purple-light: #f2e5f6; --faq-text: #18131c; --faq-muted: #706873; --faq-border: #e6dee8; --faq-background: #ffffff; position: relative; width: 100%; overflow: hidden; padding: 68px 32px 72px; background: radial-gradient( circle at 95% 5%, rgba(114, 32, 142, 0.035) 0, rgba(114, 32, 142, 0.035) 115px, transparent 116px ), linear-gradient( 180deg, #ffffff 0%, #fdfbfd 100% ); font-family: "Montserrat", Arial, sans-serif; } #preguntas.ortho-faq *, #preguntas.ortho-faq *::before, #preguntas.ortho-faq *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR CENTRAL ================================================== */ #preguntas .ortho-faq__container { width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr); align-items: start; gap: 72px; } /* ================================================== COLUMNA IZQUIERDA ================================================== */ #preguntas .ortho-faq__intro { position: sticky; top: 105px; max-width: 390px; } #preguntas .ortho-faq__eyebrow { margin: 0 0 11px; color: var(--faq-purple); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 2.1px; text-transform: uppercase; } #preguntas .ortho-faq__intro h2 { margin: 0; color: var(--faq-text); font-size: clamp(40px, 4vw, 55px); font-weight: 800; line-height: 1.03; letter-spacing: -2px; } #preguntas .ortho-faq__description { max-width: 360px; margin: 20px 0 0; color: var(--faq-muted); font-size: 14px; font-weight: 400; line-height: 1.62; } /* ================================================== ENLACE DE CONTACTO ================================================== */ #preguntas .ortho-faq__contact { width: max-content; max-width: 100%; margin-top: 25px; display: inline-flex; align-items: center; gap: 7px; color: var(--faq-purple); font-size: 13px; font-weight: 750; line-height: 1.4; text-decoration: none; transition: gap 0.2s ease, color 0.2s ease; } #preguntas .ortho-faq__contact:hover, #preguntas .ortho-faq__contact:focus { gap: 11px; color: #8d2fb1; } #preguntas .ortho-faq__contact svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== LISTA DE PREGUNTAS ================================================== */ #preguntas .ortho-faq__questions { min-width: 0; border-top: 1px solid var(--faq-border); } /* ================================================== ELEMENTO DESPLEGABLE ================================================== */ #preguntas .ortho-faq-item { border-bottom: 1px solid var(--faq-border); } #preguntas .ortho-faq-item > summary { min-height: 74px; padding: 21px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--faq-text); list-style: none; cursor: pointer; font-size: 16px; font-weight: 800; line-height: 1.4; transition: color 0.2s ease, padding-left 0.2s ease; } #preguntas .ortho-faq-item > summary::-webkit-details-marker { display: none; } #preguntas .ortho-faq-item > summary::marker { display: none; content: ""; } #preguntas .ortho-faq-item > summary:hover { color: var(--faq-purple); } #preguntas .ortho-faq-item[open] > summary { color: var(--faq-purple); } /* ================================================== ÍCONO MÁS / MENOS ================================================== */ #preguntas .ortho-faq-item__icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--faq-purple); background: var(--faq-purple-light); border-radius: 10px; } #preguntas .ortho-faq-item__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #preguntas .ortho-faq-item__vertical { transform-origin: center; transition: opacity 0.2s ease, transform 0.2s ease; } /* Al abrir, el símbolo + se transforma en − */ #preguntas .ortho-faq-item[open] .ortho-faq-item__vertical { opacity: 0; transform: rotate(90deg); } /* ================================================== RESPUESTA ================================================== */ #preguntas .ortho-faq-item__answer { padding: 0 58px 22px 0; color: var(--faq-muted); } #preguntas .ortho-faq-item__answer p { max-width: 660px; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.62; } /* ================================================== ENFOQUE DE TECLADO ================================================== */ #preguntas .ortho-faq-item > summary:focus-visible { outline: 2px solid rgba(114, 32, 142, 0.5); outline-offset: 5px; border-radius: 6px; } /* ================================================== MONITORES GRANDES ================================================== */ @media (min-width: 1500px) { #preguntas.ortho-faq { padding: 72px 40px 76px; } #preguntas .ortho-faq__container { max-width: 1180px; grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr); gap: 78px; } } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #preguntas.ortho-faq { padding: 62px 28px 64px; } #preguntas .ortho-faq__container { max-width: 900px; gap: 52px; } #preguntas .ortho-faq__intro h2 { font-size: clamp(37px, 4.3vw, 49px); } #preguntas .ortho-faq-item > summary { min-height: 70px; font-size: 15px; } #preguntas .ortho-faq-item__answer p { font-size: 13.5px; } } /* ================================================== TABLET ================================================== */ @media (max-width: 820px) { #preguntas.ortho-faq { padding: 53px 24px 55px; } #preguntas .ortho-faq__container { max-width: 650px; grid-template-columns: 1fr; gap: 36px; } #preguntas .ortho-faq__intro { position: static; max-width: 600px; } #preguntas .ortho-faq__intro h2 { max-width: 560px; font-size: clamp(35px, 8vw, 45px); line-height: 1.06; letter-spacing: -1.6px; } #preguntas .ortho-faq__description { max-width: 560px; margin-top: 15px; } #preguntas .ortho-faq__contact { margin-top: 19px; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #preguntas.ortho-faq { padding: 45px 18px 47px; } #preguntas .ortho-faq__container { gap: 29px; } #preguntas .ortho-faq__eyebrow { font-size: 10px; letter-spacing: 1.55px; } #preguntas .ortho-faq__intro h2 { font-size: clamp(31px, 9vw, 39px); line-height: 1.08; letter-spacing: -1.25px; } #preguntas .ortho-faq__description { font-size: 13.5px; line-height: 1.58; } #preguntas .ortho-faq__contact { font-size: 12.5px; } #preguntas .ortho-faq-item > summary { min-height: 0; padding: 19px 0; gap: 15px; font-size: 14.5px; line-height: 1.4; } #preguntas .ortho-faq-item__icon { width: 32px; height: 32px; border-radius: 9px; } #preguntas .ortho-faq-item__answer { padding: 0 0 20px; } #preguntas .ortho-faq-item__answer p { font-size: 13px; line-height: 1.58; } } /* ================================================== MOVIMIENTO REDUCIDO ================================================== */ @media (prefers-reduced-motion: reduce) { #preguntas .ortho-faq__contact, #preguntas .ortho-faq-item > summary, #preguntas .ortho-faq-item__vertical { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-292091c *//* ================================================== FORMULARIO DE CONTACTO — ORTODENT CENTRADO, LIMPIO Y RESPONSIVE ================================================== */ #contacto.ortho-contact { --contact-purple: #72208e; --contact-purple-dark: #57156d; --contact-purple-light: #e2adee; --contact-purple-soft: #f4e8f8; --contact-green: #22b573; --contact-green-dark: #16975d; --contact-text: #18131c; --contact-muted: #706873; --contact-border: #e5dce7; --contact-field: #fbf9fc; position: relative; width: 100%; overflow: hidden; padding: 68px 32px 72px; background: radial-gradient( circle at 4% 9%, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 120px, transparent 121px ), linear-gradient( 125deg, #351040 0%, #59166d 48%, #72208e 100% ); font-family: "Montserrat", Arial, sans-serif; } #contacto.ortho-contact *, #contacto.ortho-contact *::before, #contacto.ortho-contact *::after { box-sizing: border-box; } /* ================================================== CONTENEDOR CENTRAL ================================================== */ #contacto .ortho-contact__container { width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr); align-items: center; gap: 58px; } /* ================================================== COLUMNA INFORMATIVA ================================================== */ #contacto .ortho-contact__content { min-width: 0; max-width: 430px; } #contacto .ortho-contact__eyebrow { margin: 0 0 11px; color: var(--contact-purple-light); font-family: "Michroma", "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 2.1px; text-transform: uppercase; } #contacto .ortho-contact__content h2 { margin: 0; color: #ffffff; font-size: clamp(40px, 4vw, 55px); font-weight: 800; line-height: 1.04; letter-spacing: -2.1px; } #contacto .ortho-contact__intro { max-width: 420px; margin: 20px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 400; line-height: 1.65; } /* ================================================== BENEFICIOS ================================================== */ #contacto .ortho-contact__benefits { margin: 27px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; list-style: none; } #contacto .ortho-contact__benefits li { display: flex; align-items: center; gap: 10px; color: #ffffff; font-size: 13.5px; font-weight: 650; line-height: 1.45; } #contacto .ortho-contact__check { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; color: #ffffff; background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; } #contacto .ortho-contact__check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } /* ================================================== PRIVACIDAD ================================================== */ #contacto .ortho-contact__privacy-note { max-width: 420px; margin-top: 28px; padding: 15px 17px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 11px; background: rgba(255, 255, 255, 0.075); border-left: 2px solid var(--contact-purple-light); border-radius: 0 11px 11px 0; } #contacto .ortho-contact__privacy-note svg { width: 23px; height: 23px; color: var(--contact-purple-light); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #contacto .ortho-contact__privacy-note p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 11.5px; line-height: 1.55; } /* ================================================== TARJETA DEL FORMULARIO ================================================== */ #contacto .ortho-contact__form-card { min-width: 0; padding: 29px 31px 27px; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 24px; box-shadow: 0 24px 58px rgba(28, 7, 35, 0.22); } /* ================================================== ENCABEZADO DEL FORMULARIO ================================================== */ #contacto .ortho-contact__form-header { margin-bottom: 23px; } #contacto .ortho-contact__form-header > span { display: block; margin-bottom: 5px; color: var(--contact-purple); font-size: 10.5px; font-weight: 800; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; } #contacto .ortho-contact__form-header h3 { margin: 0; color: var(--contact-text); font-size: 23px; font-weight: 800; line-height: 1.25; letter-spacing: -0.5px; } #contacto .ortho-contact__form-header p { margin: 6px 0 0; color: var(--contact-muted); font-size: 12.5px; line-height: 1.5; } /* ================================================== FORMULARIO ================================================== */ #contacto .ortho-contact__form { display: flex; flex-direction: column; gap: 18px; } #contacto .ortho-contact__fields { display: grid; gap: 15px; } #contacto .ortho-contact__fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ================================================== CAMPOS ================================================== */ #contacto .ortho-contact__field { min-width: 0; } #contacto .ortho-contact__field label { display: block; margin-bottom: 7px; color: var(--contact-text); font-size: 12.5px; font-weight: 750; line-height: 1.4; } #contacto .ortho-contact__field input, #contacto .ortho-contact__field select, #contacto .ortho-contact__field textarea { width: 100%; color: var(--contact-text); background: var(--contact-field); border: 1px solid var(--contact-border); border-radius: 12px; font-family: inherit; font-size: 13.5px; font-weight: 500; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } #contacto .ortho-contact__field input, #contacto .ortho-contact__field select { height: 49px; padding: 0 15px; } #contacto .ortho-contact__field textarea { min-height: 104px; padding: 14px 15px; resize: vertical; } #contacto .ortho-contact__field input::placeholder, #contacto .ortho-contact__field textarea::placeholder { color: #8c848f; } #contacto .ortho-contact__field input:focus, #contacto .ortho-contact__field select:focus, #contacto .ortho-contact__field textarea:focus { background: #ffffff; border-color: rgba(114, 32, 142, 0.55); box-shadow: 0 0 0 4px rgba(114, 32, 142, 0.09); } /* ================================================== CONSENTIMIENTO ================================================== */ #contacto .ortho-contact__consent { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--contact-muted); font-size: 12px; font-weight: 400; line-height: 1.5; cursor: pointer; } #contacto .ortho-contact__consent > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } #contacto .ortho-contact__consent-box { width: 21px; height: 21px; display: grid; place-items: center; color: #ffffff; background: #ffffff; border: 1px solid #aaa1ad; border-radius: 5px; transition: background 0.2s ease, border-color 0.2s ease; } #contacto .ortho-contact__consent-box svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } #contacto .ortho-contact__consent > input:checked + .ortho-contact__consent-box { background: var(--contact-purple); border-color: var(--contact-purple); } #contacto .ortho-contact__consent > input:checked + .ortho-contact__consent-box svg { opacity: 1; } #contacto .ortho-contact__consent > input:focus-visible + .ortho-contact__consent-box { box-shadow: 0 0 0 4px rgba(114, 32, 142, 0.12); } #contacto .ortho-contact__consent a { color: var(--contact-purple); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; } /* ================================================== BOTÓN ================================================== */ #contacto .ortho-contact__submit { width: 100%; min-height: 52px; padding: 14px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #ffffff; background: linear-gradient( 135deg, var(--contact-green-dark), var(--contact-green) ); border: 0; border-radius: 13px; box-shadow: 0 12px 25px rgba(22, 151, 93, 0.19); font-family: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.3; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, gap 0.22s ease; } #contacto .ortho-contact__submit:hover, #contacto .ortho-contact__submit:focus { gap: 12px; transform: translateY(-2px); box-shadow: 0 17px 32px rgba(22, 151, 93, 0.27); } #contacto .ortho-contact__submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #contacto .ortho-contact__submit svg:last-child { width: 15px; height: 15px; } /* ================================================== NOTA INFERIOR ================================================== */ #contacto .ortho-contact__form-note { max-width: 520px; margin: -4px auto 0; color: #8b838e; text-align: center; font-size: 10.5px; line-height: 1.5; } /* ================================================== PORTÁTILES ================================================== */ @media (max-width: 1100px) { #contacto.ortho-contact { padding: 62px 28px 64px; } #contacto .ortho-contact__container { max-width: 900px; grid-template-columns: minmax(290px, 0.76fr) minmax(0, 1.24fr); gap: 44px; } #contacto .ortho-contact__content h2 { font-size: clamp(37px, 4.3vw, 49px); } #contacto .ortho-contact__form-card { padding: 27px 27px 25px; } } /* ================================================== TABLET ================================================== */ @media (max-width: 820px) { #contacto.ortho-contact { padding: 53px 24px 55px; } #contacto .ortho-contact__container { max-width: 650px; grid-template-columns: 1fr; gap: 36px; } #contacto .ortho-contact__content { max-width: 600px; } #contacto .ortho-contact__content h2 { max-width: 570px; font-size: clamp(35px, 8vw, 45px); line-height: 1.06; letter-spacing: -1.6px; } #contacto .ortho-contact__intro { max-width: 560px; } #contacto .ortho-contact__privacy-note { max-width: 560px; } } /* ================================================== CELULAR ================================================== */ @media (max-width: 520px) { #contacto.ortho-contact { padding: 45px 18px 47px; } #contacto .ortho-contact__container { gap: 29px; } #contacto .ortho-contact__eyebrow { font-size: 10px; letter-spacing: 1.55px; } #contacto .ortho-contact__content h2 { font-size: clamp(31px, 9vw, 39px); line-height: 1.08; letter-spacing: -1.25px; } #contacto .ortho-contact__intro { margin-top: 15px; font-size: 13.5px; line-height: 1.58; } #contacto .ortho-contact__benefits { margin-top: 23px; gap: 11px; } #contacto .ortho-contact__benefits li { font-size: 13px; } #contacto .ortho-contact__privacy-note { margin-top: 23px; } #contacto .ortho-contact__form-card { padding: 23px 20px 21px; border-radius: 19px; } #contacto .ortho-contact__form-header h3 { font-size: 21px; } #contacto .ortho-contact__fields--two { grid-template-columns: 1fr; } #contacto .ortho-contact__form { gap: 16px; } #contacto .ortho-contact__field label { font-size: 12px; } #contacto .ortho-contact__field input, #contacto .ortho-contact__field select, #contacto .ortho-contact__field textarea { font-size: 13px; } #contacto .ortho-contact__consent { font-size: 11.5px; } #contacto .ortho-contact__submit { min-height: 50px; font-size: 13px; } #contacto .ortho-contact__form-note { font-size: 10px; } } /* ================================================== ACCESIBILIDAD ================================================== */ @media (prefers-reduced-motion: reduce) { #contacto .ortho-contact__field input, #contacto .ortho-contact__field select, #contacto .ortho-contact__field textarea, #contacto .ortho-contact__consent-box, #contacto .ortho-contact__submit { transition: none; } #contacto .ortho-contact__submit:hover { transform: none; } }/* End custom CSS */