:root{--navy:#102a43;--deep:#081f33;--blue:#164fa8;--mint:#39dbc5;--ink:#153149;--muted:#4d6375;--line:#d9e4ec;--paper:#f3f7fa;--white:#fff;--radius:24px;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--white);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;font-size:17px;line-height:1.65}img{max-width:100%;height:auto;display:block}a{color:inherit;text-underline-offset:5px}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a,button{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[tabindex='-1']:focus-visible{outline:3px solid #1874ca;outline-offset:5px}.dark :focus-visible{outline-color:var(--mint)}button:disabled{cursor:default}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.08;letter-spacing:-.04em}h1{font-size:clamp(2.8rem,6.3vw,6rem);font-weight:500;margin-bottom:26px}h2{font-size:clamp(2rem,4.2vw,3.7rem);font-weight:500;margin-bottom:24px}h3{font-size:1.5rem;font-weight:600;letter-spacing:-.025em}p{margin-bottom:22px}.wrap{width:min(1280px,calc(100% - 64px));margin-inline:auto}.narrow{max-width:880px}.section{padding-block:96px}.eyebrow{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:22px;display:block}.lead{font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--muted);line-height:1.6;max-width:650px}.muted{color:var(--muted)}.dark{background:var(--navy);color:white}.dark .lead,.dark .muted{color:#c4d6e3}.dark .eyebrow,.accent{color:var(--mint)}.paper{background:var(--paper)}.skip{position:fixed;top:-100px;left:18px;padding:12px;background:white;z-index:100}.skip:focus{top:12px}.topbar{background:var(--deep);color:#dcebf4;font-size:.8rem;text-align:center;padding:8px 16px}.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:86px}.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}.brand img{width:146px;height:73px;object-fit:contain}.nav{display:flex;align-items:center;gap:25px}.nav a{text-decoration:none;font-size:.9rem;font-weight:600}.nav a:not(.btn):hover,.nav a[aria-current='page']:not(.btn){color:var(--blue)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--mint);color:var(--deep);padding:15px 22px;border-radius:999px;text-decoration:none;border:1px solid transparent;font-size:.95rem;font-weight:700;line-height:1.3;min-height:52px;transition:transform .2s,background .2s;text-align:center}.btn:hover{background:#70ecdb;transform:translateY(-2px)}.btn.secondary{background:transparent;border-color:var(--line);color:var(--ink)}.dark .btn.secondary{color:white;border-color:#718da1}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.menu-button{display:none;border:1px solid var(--line);background:white;border-radius:12px;padding:10px 15px;color:var(--ink)}.hero{position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.03fr 1fr;min-height:665px;gap:38px;align-items:center;padding-block:60px}.hero-copy{padding-block:20px}.hero h1 em{font-style:normal;color:var(--mint)}.hero-visual{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;border-radius:220px 220px 36px 36px;background:linear-gradient(155deg,#254461,#0b233a);overflow:hidden;min-height:540px}.hero-visual>img{width:94%;max-height:570px;object-fit:contain;mix-blend-mode:screen}.visual-caption{position:absolute;left:24px;right:24px;bottom:22px;background:#102a43ed;border:1px solid #56758a;border-radius:16px;padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem}.visual-caption strong{font-size:1.05rem;display:block}.hero-note{font-size:.85rem;color:#bdd2e2;margin:22px 0 0}.under-hero{border-top:1px solid #38546b;display:grid;grid-template-columns:repeat(3,1fr);padding-block:25px;gap:24px;font-size:.9rem}.under-hero span{color:var(--mint);margin-right:12px}.section-head{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:40px}.section-head h2{margin:0;max-width:760px}.section-head p{max-width:360px;margin:0}.link{font-weight:700;text-decoration:none;display:inline-block;padding-block:10px}.link:hover{text-decoration:underline}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.zone-tile{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;background:white;transition:transform .2s,border-color .2s;min-height:96px}.zone-tile:hover{transform:translateY(-4px);border-color:var(--blue)}.zone-tile img{width:64px;height:64px;border-radius:12px;object-fit:cover}.zone-tile b{font-weight:600}.zone-tile .arrow{margin-left:auto;color:var(--blue)}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.service-card{position:relative;display:flex;flex-direction:column;text-decoration:none;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:white;transition:transform .2s}.service-card:hover{transform:translateY(-5px);border-color:#4c7c9a}.service-card .card-art{height:205px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:18px;margin-bottom:26px;overflow:hidden}.card-art img{height:95%;width:95%;object-fit:contain}.service-card h3{font-size:1.6rem;margin-bottom:14px}.service-card p{color:var(--muted);font-size:1rem}.service-card .link{margin-top:auto;color:var(--blue)}.service-card.feature{background:var(--navy);color:white;grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px}.service-card.feature p{color:#c4d6e3}.service-card.feature .link{color:var(--mint)}.service-card.feature .card-art{height:100%;min-height:230px;background:#23435d;grid-column:2;grid-row:1/5;margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:45px}.step{border-top:1px solid var(--line);padding-top:25px}.step .number{font-size:1rem;font-weight:700;color:var(--blue);display:block;margin-bottom:32px}.step p{color:var(--muted);margin:0}.clinic-image{border-radius:var(--radius);aspect-ratio:16/11;object-fit:cover}.caption{font-size:.8rem;color:var(--muted);margin-top:12px}.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.phone-stage{display:flex;gap:22px;justify-content:center;align-items:center;padding:30px 15px}.phone{width:44%;max-width:225px;border:7px solid #071a2b;border-radius:31px;box-shadow:0 25px 70px #0005;background:#edf6fb;overflow:hidden}.phone img{width:100%;aspect-ratio:430/862;object-fit:cover}.phone:nth-child(2){transform:translateY(34px)}.pill{display:inline-block;font-size:.8rem;padding:6px 12px;border:1px solid #6e8fa3;border-radius:99px;margin-bottom:24px}.checklist{list-style:none;margin:24px 0;padding:0}.checklist li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative}.checklist li:before{content:'↗';position:absolute;left:0;color:var(--blue)}.dark .checklist li{border-color:#38566c}.dark .checklist li:before{color:var(--mint)}.cta-band{padding:60px;border-radius:30px;display:flex;gap:45px;align-items:center;justify-content:space-between;background:var(--mint);color:var(--deep)}.cta-band h2{font-size:clamp(2rem,3.4vw,3rem);max-width:650px;margin-bottom:16px}.cta-band p{margin:0}.cta-band .btn{background:var(--deep);color:white;flex-shrink:0}.footer{background:var(--deep);color:#d8e6f0;padding:65px 0 26px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}.footer h3{font-size:1rem;letter-spacing:0;color:white}.footer a{display:block;text-decoration:none;font-size:.9rem;margin-bottom:10px}.footer a:hover{text-decoration:underline}.footer p{font-size:.9rem}.footer-wordmark{font-size:2.2rem;letter-spacing:-.06em;font-weight:bold;color:white;margin-bottom:14px}.footer-bottom{border-top:1px solid #36536b;padding-top:25px;margin-top:45px;display:flex;justify-content:space-between;gap:20px;font-size:.78rem}.footer-bottom a{font-size:.78rem}.legal-links{display:flex;gap:20px;flex-wrap:wrap}.breadcrumb{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem;padding-block:25px;color:var(--muted)}.breadcrumb a{text-decoration:none}.page-heading{padding:45px 0 70px}.page-heading h1{max-width:1000px}.service-hero{padding:40px 0 70px}.service-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}.service-art{background:var(--navy);border-radius:180px 180px 30px 30px;display:flex;align-items:center;justify-content:center;min-height:470px}.service-art img{width:90%;max-height:470px;object-fit:contain}.service-hero.alt .service-art{border-radius:30px 160px 30px 160px}.service-hero.alt .service-hero-grid{grid-template-columns:1fr 1.15fr}.service-hero.alt .service-art{grid-row:1;grid-column:1}.service-hero.alt .service-intro{grid-column:2}.focus-band{padding:45px 0;border-block:1px solid var(--line);background:var(--paper)}.focus-band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.focus-band h2{font-size:2rem;margin:0}.focus-band p{margin:0;color:var(--muted)}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.content-grid>div{min-width:0}.content-grid h2{font-size:2.5rem}.bullet-list{padding-left:21px}.bullet-list li{margin-bottom:16px}.therapy-panel{padding:45px;border-radius:var(--radius);background:var(--paper)}.faq details{border-bottom:1px solid var(--line);padding:22px 0}.faq summary{font-size:1.12rem;font-weight:600;cursor:pointer;list-style:none;padding-right:32px;position:relative}.faq summary:after{content:'+';position:absolute;right:4px;font-size:1.4rem}.faq details[open] summary:after{content:'−'}.faq details p{margin:18px 25px 0 0;color:var(--muted)}.zone-hero{padding-bottom:70px}.zone-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.zone-portrait{border-radius:30px;width:100%;aspect-ratio:1;object-fit:cover}.zone-hero h1{font-size:clamp(3rem,5vw,5.4rem)}.zone-hero .subhead{font-size:1.8rem;font-weight:500;line-height:1.2}.zone-hero .eyebrow{color:var(--blue)}.evaluation{padding:45px;background:white;border:1px solid var(--line);border-radius:26px}.evaluation h2{font-size:2.5rem}.evaluation fieldset{margin:28px 0;border:0;padding:0;min-width:0}.evaluation legend{font-weight:700;font-size:1.1rem;padding:0;margin-bottom:12px}.choices{display:flex;flex-wrap:wrap;gap:10px}.choice{display:flex;align-items:center;gap:9px;border:1px solid #aabfce;padding:12px 16px;border-radius:12px;cursor:pointer}.choice:has(input:checked){background:#e2f9f4;border-color:#177967}.choice input{width:18px;height:18px;accent-color:#116e60;margin:0}.range-row{display:flex;align-items:center;gap:20px}.range-row input{width:100%;accent-color:#167b6a;min-height:40px}.range-row output{font-weight:700;min-width:45px}.range-labels{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}.result{background:#e9f7f3;border:1px solid #8cc5b7;border-radius:20px;padding:32px;margin-top:30px}.result[hidden]{display:none}.result h3{font-size:1.7rem}.result p:last-child{margin-bottom:0}.privacy-note{font-size:.87rem;color:var(--muted);margin-top:18px}.body-explorer{display:grid;grid-template-columns:.8fr 1fr;gap:65px;align-items:center}.body-map{position:relative;width:100%;max-width:430px;margin:auto;border-radius:140px 140px 24px 24px;overflow:hidden;background:#213b4f}.body-map img{width:100%;aspect-ratio:1/2;object-fit:cover}.hotspot{position:absolute;width:38px;height:38px;border-radius:50%;background:var(--mint);border:3px solid white;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:bold;text-decoration:none;color:var(--deep);box-shadow:0 0 0 7px #39dbc529;transform:translate(-50%,-50%)}.hotspot:hover{background:white;box-shadow:0 0 0 10px #39dbc570}.zone-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.zone-list a{display:flex;gap:14px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 6px;text-decoration:none;font-weight:600}.zone-list a:hover{color:var(--blue)}.zone-list small{font-size:.85rem;color:var(--muted);font-weight:400}.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:25px}.contact-card{border:1px solid var(--line);border-radius:24px;padding:30px}.contact-card h2{font-size:1.7rem}.contact-card a{overflow-wrap:anywhere}.contact-card p:last-child{margin-bottom:0}.location-panel{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--navy);color:white;padding:45px;border-radius:26px;margin-top:30px}.location-panel h2{font-size:2.3rem}.location-panel .address{font-size:1.35rem}.schedule{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:1rem}.schedule dt,.schedule dd{margin:0}.legal{max-width:850px}.legal h2{font-size:1.8rem;margin-top:40px}.pending{border-left:4px solid #b78717;padding:16px 20px;background:#fff7dd;color:#5e4305;border-radius:4px;margin-block:20px}.mobile-cta{display:none}.app-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.app-feature{border-top:1px solid var(--line);padding-top:25px}.app-feature .number{font-size:.85rem;color:var(--blue);font-weight:bold;display:block;margin-bottom:28px}.app-feature h3{font-size:1.5rem}.app-feature p{color:var(--muted)}.gallery{display:grid;grid-template-columns:1fr 1fr .65fr;gap:20px}.gallery figure{margin:0}.gallery img{height:310px;width:100%;object-fit:cover;border-radius:20px}.gallery figcaption{font-size:.85rem;color:var(--muted);margin-top:12px}.reveal{animation:enter .6s ease both}@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @media(min-width:1500px){.hero-grid{min-height:720px}.hero-visual{min-height:590px}} @media(max-width:1100px){.nav{gap:16px}.nav a{font-size:.82rem}.nav .btn{padding:12px 16px;font-size:.82rem}.wrap{width:calc(100% - 48px)}.hero-grid{gap:24px;min-height:610px}.hero-visual{min-height:460px}.split,.app-grid,.zone-hero-grid,.service-hero-grid{gap:38px}.tiles{grid-template-columns:repeat(2,1fr)}.service-grid{gap:16px}.service-card{padding:20px}.service-card h3{font-size:1.3rem}.footer-grid{grid-template-columns:1fr 1fr}.section{padding-block:76px}.service-art{min-height:380px}.body-explorer{gap:36px}.phone-stage{gap:12px;padding-inline:0}.cta-band{padding:40px}.header-row{gap:15px}.brand img{width:120px}.gallery img{height:260px}} @media(max-width:820px){.header-row{min-height:76px;flex-wrap:wrap}.menu-button{display:block}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:24px;gap:6px}.nav.open{display:flex}.nav a{font-size:1rem;padding:12px 16px}.nav .btn{font-size:1rem}.hero h1{font-size:clamp(2.8rem,7vw,4rem)}.hero-grid{min-height:auto;padding-block:45px}.hero-visual{min-height:400px}.visual-caption{left:16px;right:16px;padding:14px;font-size:.8rem}.visual-caption strong{font-size:.95rem}.under-hero{gap:15px;font-size:.8rem}.section-head{display:block}.section-head p{margin-top:24px}.service-grid{grid-template-columns:1fr 1fr}.service-card.feature{grid-column:span 2}.steps{gap:24px}.step h3{font-size:1.3rem}.app-grid{grid-template-columns:1fr 1fr;gap:25px}.app-grid h2{font-size:2.7rem}.cta-band{display:block}.cta-band .btn{margin-top:28px}.content-grid{gap:35px}.content-grid h2{font-size:2rem}.service-hero-grid,.service-hero.alt .service-hero-grid{gap:30px}.service-art{min-height:320px}.service-hero h1{font-size:3.3rem}.body-explorer{grid-template-columns:.8fr 1fr;gap:25px}.zone-list{grid-template-columns:1fr}.body-map{max-width:350px}.app-feature-grid{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}.gallery figure:last-child{grid-column:span 2}.gallery figure:last-child img{height:350px;object-position:50% 40%}.contact-card{padding:24px}.evaluation{padding:32px}.location-panel{grid-template-columns:1fr}.focus-band .wrap{gap:25px}.zone-hero-grid{gap:30px}.zone-hero .subhead{font-size:1.5rem}} @media(max-width:600px){body{font-size:16px}.wrap{width:calc(100% - 36px)}.topbar{font-size:.72rem}.brand img{width:118px;height:65px}.header-row{min-height:70px}.hero-grid{grid-template-columns:1fr;padding-top:28px;gap:30px}.hero-copy{padding:5px 0}.hero h1{font-size:3.1rem;max-width:450px}.hero-visual{min-height:365px;border-radius:180px 180px 24px 24px;max-width:480px;width:100%}.hero-visual>img{height:365px;width:100%}.hero-note{font-size:.8rem}.under-hero{grid-template-columns:1fr;gap:10px;padding-block:22px}.under-hero span{display:inline-block;width:22px}.actions{gap:12px}.actions .btn{flex:1 1 auto}.section{padding-block:58px}.section-head{margin-bottom:28px}h2{font-size:2.3rem}.tiles{gap:10px}.zone-tile{flex-wrap:wrap;padding:14px;gap:9px;min-height:128px}.zone-tile img{width:54px;height:54px}.zone-tile b{font-size:.95rem;flex-basis:100%;order:3}.zone-tile .arrow{align-self:center}.service-grid{grid-template-columns:1fr}.service-card{padding:22px}.service-card .card-art{height:200px}.service-card h3{font-size:1.6rem}.service-card.feature{grid-column:auto;display:flex}.service-card.feature .card-art{height:220px;width:100%;min-height:0}.split,.app-grid,.content-grid,.zone-hero-grid,.service-hero-grid,.service-hero.alt .service-hero-grid{grid-template-columns:1fr;gap:30px}.steps{grid-template-columns:1fr;gap:25px}.step{padding-top:20px;display:grid;grid-template-columns:45px 1fr;column-gap:12px}.step .number{grid-row:1/3;margin:0}.step h3{font-size:1.4rem}.step p{grid-column:2}.app-grid h2{font-size:2.5rem}.phone-stage{padding:14px 0 40px;gap:18px}.phone{max-width:195px;border-width:5px;border-radius:23px}.cta-band{padding:30px 24px;border-radius:22px}.cta-band .btn{width:100%}.footer-grid{gap:30px 18px}.footer-grid>div:first-child{grid-column:span 2}.footer-bottom{display:block}.legal-links{gap:10px 18px;margin-top:16px}.footer{padding-bottom:100px}.mobile-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;background:#fffefdf5;border-top:1px solid var(--line);padding:10px 18px calc(10px + env(safe-area-inset-bottom))}.mobile-cta .btn{width:100%;min-height:46px;padding:12px}.breadcrumb{font-size:.75rem;padding-block:18px}.page-heading{padding:30px 0 40px}.page-heading h1{font-size:2.9rem}.service-hero{padding-top:20px;padding-bottom:45px}.service-hero h1{font-size:2.8rem}.service-hero.alt .service-art,.service-hero.alt .service-intro{grid-column:auto;grid-row:auto}.service-art{min-height:300px;max-height:350px}.service-art img{height:320px}.focus-band{padding-block:32px}.focus-band .wrap{grid-template-columns:1fr;gap:18px}.focus-band h2{font-size:1.7rem}.therapy-panel{padding:27px}.zone-hero{padding-bottom:45px}.zone-hero-grid{gap:26px}.zone-portrait{max-height:360px;object-fit:contain;background:var(--navy);border-radius:22px}.zone-hero h1{font-size:3rem}.zone-hero .subhead{font-size:1.6rem}.evaluation{padding:26px 20px}.evaluation h2{font-size:2rem}.choices{display:grid;grid-template-columns:1fr}.choice{padding:13px}.result{padding:24px}.body-explorer{grid-template-columns:1fr;gap:35px}.body-map{max-width:310px}.zone-list{grid-template-columns:1fr 1fr;gap:8px 18px}.zone-list a{font-size:.95rem;gap:8px}.contact-cards{grid-template-columns:1fr}.location-panel{padding:30px 24px}.schedule{font-size:.9rem}.app-feature-grid{grid-template-columns:1fr}.app-feature .number{margin-bottom:18px}.gallery{grid-template-columns:1fr}.gallery figure:last-child{grid-column:auto}.gallery img{height:240px}.gallery figure:last-child img{height:340px}.legal h1{font-size:2.7rem}.hotspot{width:36px;height:36px}.footer h3{line-height:1.4}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} /* Navegación disponible sin JavaScript; el menú plegable es una mejora progresiva. */ @media(max-width:820px){html:not(.js) .nav{display:flex}html:not(.js) .menu-button{display:none}} .phone{margin:0} .service-intro{min-width:0}.service-intro h1{overflow-wrap:break-word;hyphens:manual} /* ========================================================= REHABME · HEADER LIMPIO ========================================================= */ .header-clean { background:#f4f8f7; border-bottom:1px solid rgba(16,42,67,.08); } .header-clean .header-row { min-height:88px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; } .header-clean .brand img { display:block; width:146px; height:auto; } .nav-clean { display:flex; align-items:center; justify-content:flex-end; gap:34px; } .nav-clean > a:not(.header-cta) { position:relative; padding:34px 0 30px; color:#526771; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; } .nav-clean > a:not(.header-cta)::after { content:""; position:absolute; left:0; right:0; bottom:23px; height:2px; background:#34a194; transform:scaleX(0); transform-origin:center; transition:transform .2s ease; } .nav-clean > a:not(.header-cta):hover::after, .nav-clean > a[aria-current="page"]::after { transform:scaleX(1); } .header-cta { min-height:48px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:12px; background:#123f49; color:#fff !important; font-size:13px; font-weight:750; text-decoration:none; white-space:nowrap; } /* ========================================================= HOME · HUMAN BODY 3D ========================================================= */ .hero-body-3d { display:flex; flex-direction:column; align-items:center; } .body-3d-frame { width:min(430px, calc(78vh * 9 / 16)); aspect-ratio:9 / 16; overflow:hidden; border-radius:30px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 80px rgba(50,180,168,.08); } .body-3d-frame iframe { display:block; width:100%; height:100%; border:0; background:transparent; } .hero-body-3d .visual-caption { width:min(430px, 100%); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:980px) { .header-clean .header-row { min-height:74px; } .nav-clean { gap:20px; } .nav-clean > a:not(.header-cta) { font-size:13px; } .body-3d-frame { width:min(390px, 100%); } } @media (max-width:760px) { .header-clean .header-row { display:flex; justify-content:space-between; } .body-3d-frame { width:min(100%, 390px); border-radius:22px; } .hero-body-3d .visual-caption { width:min(100%,390px); } } /* ========================================================= HOME HERO · AJUSTE VISUAL FINAL - fondo uniforme - sin tarjeta inferior - marco luminoso Human Body ========================================================= */ /* Elimina arco / cápsula del contenedor exterior */ .hero.dark .hero-visual.hero-body-3d { background:transparent; border-radius:0; overflow:visible; min-height:0; } /* Elimina la tarjeta inferior */ .hero-body-3d .visual-caption { display:none; } /* Marco del explorador */ .hero-body-3d .body-3d-frame { position:relative; padding:8px; overflow:hidden; border: 2px solid rgba(255,255,255,.90); border-radius:32px; background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(57,219,197,.18), 0 0 28px rgba(57,219,197,.16), 0 24px 65px rgba(0,0,0,.28); } /* El iframe respeta el marco interior */ .hero-body-3d .body-3d-frame iframe { width:100%; height:100%; border:0; border-radius:24px; overflow:hidden; background:#202020; } /* Mobile */ @media (max-width:760px) { .hero-body-3d .body-3d-frame { padding:6px; border-radius:26px; box-shadow: 0 0 0 1px rgba(57,219,197,.15), 0 0 22px rgba(57,219,197,.13), 0 18px 45px rgba(0,0,0,.24); } .hero-body-3d .body-3d-frame iframe { border-radius:20px; } } /* ========================================================= HUMAN BODY · MARCO ÚNICO ========================================================= */ .hero-body-3d .body-3d-frame { padding:0; border: 3px solid #ffffff; border-radius:30px; background:transparent; box-shadow: 0 0 26px rgba(255,255,255,.10), 0 0 34px rgba(57,219,197,.10), 0 24px 60px rgba(0,0,0,.25); } .hero-body-3d .body-3d-frame iframe { display:block; width:100%; height:100%; border:0; border-radius:0; background:#202020; } /* Mobile */ @media (max-width:760px) { .hero-body-3d .body-3d-frame { padding:0; border: 3px solid #ffffff; border-radius:24px; } .hero-body-3d .body-3d-frame iframe { border-radius:0; } } /* ========================================================= HUMAN BODY · MARCO SIN ALTERAR EL VIEWPORT ========================================================= */ .hero-body-3d .body-3d-frame { position:relative; width:min(430px, calc(78vh * 9 / 16)); aspect-ratio:9 / 16; padding:0; border:0; border-radius:30px; overflow:hidden; background:transparent; box-shadow: 0 0 30px rgba(255,255,255,.10), 0 0 42px rgba(57,219,197,.13), 0 24px 60px rgba(0,0,0,.25); } /* Marco puramente visual. No modifica ancho ni alto del iframe. */ .hero-body-3d .body-3d-frame::after { content:""; position:absolute; inset:0; z-index:10; border: 5px solid #ffffff; border-radius:30px; pointer-events:none; box-sizing:border-box; } /* El Human Body recupera exactamente todo el 9:16 */ .hero-body-3d .body-3d-frame iframe { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:#202020; } /* MOBILE */ @media (max-width:760px) { .hero-body-3d .body-3d-frame { width:min(100%,390px); aspect-ratio:9 / 16; border-radius:24px; } .hero-body-3d .body-3d-frame::after { border-width:5px; border-radius:24px; } } /* ========================================================= HEADER · MENÚ MÓVIL COMPACTO ========================================================= */ @media (max-width:820px) { .header-clean { position:sticky; top:0; z-index:100; } .header-clean .header-row { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:72px; flex-wrap:nowrap; } .header-clean .menu-button { display:flex; align-items:center; justify-content:center; margin-left:auto; padding:9px 13px; border:1px solid rgba(16,42,67,.15); border-radius:10px; background:#fff; color:#123f49; font-size:14px; font-weight:700; } .header-clean .nav-clean { display:none; position:absolute; top:calc(100% + 8px); right:0; width:min(290px, calc(100vw - 32px)); padding:10px; flex-direction:column; align-items:stretch; gap:2px; border:1px solid rgba(16,42,67,.10); border-radius:16px; background:rgba(255,255,255,.98); box-shadow: 0 18px 45px rgba(16,42,67,.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .header-clean .nav-clean.open { display:flex; } .header-clean .nav-clean > a:not(.header-cta) { width:100%; padding:12px 14px; border-radius:9px; font-size:14px; color:#294958; } .header-clean .nav-clean > a:not(.header-cta)::after { display:none; } .header-clean .nav-clean > a:not(.header-cta):hover, .header-clean .nav-clean > a[aria-current="page"] { background:#eef6f5; color:#123f49; } .header-clean .nav-clean .header-cta { width:100%; min-height:46px; margin-top:6px; padding:0 14px; border-radius:10px; justify-content:center; } } /* ========================================================= MOBILE · AJUSTES FINALES DE HEADER / CTA ========================================================= */ @media (max-width:820px) { /* Más separación entre texto e icono del botón Menú */ .header-clean .menu-button { display:inline-flex; align-items:center; gap:8px; } .header-clean .menu-button span { display:inline-block; margin-left:2px; } } /* ========================================================= ELIMINAR CTA FIJA INFERIOR ========================================================= */ .mobile-cta { display:none !important; } @media (max-width:600px) { .mobile-cta { display:none !important; } /* Ya no hace falta reservar espacio inferior */ .footer { padding-bottom:26px; } } /* ========================================================= HEADER · COMPORTAMIENTO AL HACER SCROLL ========================================================= */ .header-clean { transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease; will-change:transform; } .header-clean.header-hidden { transform:translateY(-110%); } .header-clean.header-scrolled { background:rgba(255,255,255,.96); box-shadow: 0 8px 28px rgba(16,42,67,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .header-clean .brand img { transition: width .28s ease, height .28s ease, opacity .28s ease; } .header-clean.header-scrolled .brand img { width:126px; } .header-clean .nav-clean > a:not(.header-cta) { transition: color .22s ease, opacity .22s ease, padding .28s ease; } .header-clean.header-scrolled .nav-clean > a:not(.header-cta) { color:#314f5d; } .header-clean .header-row { transition:min-height .28s ease; } .header-clean.header-scrolled .header-row { min-height:72px; } /* MOBILE */ @media (max-width:820px) { .header-clean.header-scrolled .brand img { width:105px; } .header-clean.header-scrolled .header-row { min-height:64px; } } /* ========================================================= HOME · EXPLORA TU DOLOR ========================================================= */ .home-explore { min-height:100dvh; display:flex; align-items:center; } .home-explore > .wrap { width:100%; } .home-explore-name { margin-bottom:34px; color:#16998f; font-size:12px; font-weight:800; line-height:1; letter-spacing:.18em; text-transform:uppercase; } .home-explore .section-head { margin-bottom:38px; } .home-zones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .home-zone-card { position:relative; min-height:190px; display:grid; grid-template-columns:132px 1fr; align-items:center; gap:25px; padding:22px; overflow:hidden; border:1px solid #d5e1e6; border-radius:22px; background:#fff; color:#102f43; text-decoration:none; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .home-zone-card:hover { transform:translateY(-3px); border-color:#8ccfc7; box-shadow:0 18px 40px rgba(16,47,67,.08); } .home-zone-card img { width:132px; height:132px; display:block; object-fit:cover; border-radius:17px; } .home-zone-card b { padding-right:28px; font-size:21px; line-height:1.15; } .home-zone-card .arrow { position:absolute; top:24px; right:24px; color:#0870bc; font-size:15px; } .home-zone-extra { display:none; } .home-zones.is-expanded .home-zone-extra { display:grid; } .home-zones-toggle { margin-top:24px; padding:0; display:inline-flex; align-items:center; gap:9px; border:0; background:transparent; color:#102f43; font:inherit; font-weight:750; cursor:pointer; } .home-explore-link { display:inline-block; margin-top:22px; } /* ========================================================= HOME · EXPLORA TU DOLOR · MOBILE ========================================================= */ @media (max-width:760px) { .home-explore { min-height:0; padding-top:68px; padding-bottom:68px; align-items:flex-start; } .home-explore-name { margin-bottom:20px; font-size:11px; } .home-explore .section-head { margin-bottom:26px; } .home-zones { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .home-zone-card { min-width:0; min-height:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:9px; border-radius:15px; } .home-zone-card img { width:100%; height:auto; aspect-ratio:1/1; border-radius:11px; } .home-zone-card b { width:100%; padding:0 2px 4px; font-size:13px; line-height:1.15; overflow-wrap:anywhere; } .home-zone-card .arrow { display:none; } .home-zones.is-expanded .home-zone-extra { display:flex; } .home-zones-toggle { margin-top:18px; font-size:15px; } .home-explore-link { margin-top:18px; font-size:14px; } } /* ========================================================= HOME · EXPLORA TU DOLOR · V2 ========================================================= */ .home-explore { min-height:100dvh; display:flex; align-items:center; padding-block:80px; } /* Respeta exactamente el ancho editorial general */ .home-explore > .home-explore-wrap { width:min(1280px, calc(100% - 64px)); margin-inline:auto; } /* --------------------------------------------------------- ENCABEZADO --------------------------------------------------------- */ .home-explore-head { max-width:850px; margin-bottom:34px; } .home-explore-name { display:block; margin-bottom:18px; color:#16998f; font-size:12px; font-weight:800; line-height:1; letter-spacing:.18em; text-transform:uppercase; } .home-explore-head h2 { margin:0 0 18px; color:#153149; font-size:clamp( 3rem, 4.3vw, 4.5rem ); line-height:1.02; } .home-explore-kicker { margin:0 0 12px; color:#153149; } .home-explore-intro { max-width:760px; margin:0; color:#4d6375; font-size:17px; line-height:1.6; } /* --------------------------------------------------------- TARJETAS DESKTOP --------------------------------------------------------- */ .home-zones { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; } .home-zone-card { position:relative; min-width:0; min-height:112px; display:grid; grid-template-columns: 82px minmax(0,1fr); align-items:center; gap:16px; padding:14px; border: 1px solid #d5e1e6; border-radius:18px; background:#fff; color:#102f43; text-decoration:none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-zone-card:hover { transform:translateY(-2px); border-color:#8ccfc7; box-shadow: 0 14px 32px rgba(16,47,67,.07); } .home-zone-card img { width:82px; height:82px; object-fit:cover; border-radius:13px; } .home-zone-card b { padding:0; font-size:17px; line-height:1.18; } /* Desaparece cualquier flecha heredada */ .home-zone-card .arrow { display:none !important; } /* En desktop mostramos las ocho */ .home-zone-mobile-extra { display:grid !important; } /* "Ver todos" solamente existe visualmente en móvil */ .home-zones-all { display:none; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1000px) { .home-zones { grid-template-columns: repeat(4,minmax(0,1fr)); gap:10px; } .home-zone-card { grid-template-columns:68px 1fr; min-height:96px; gap:11px; padding:10px; } .home-zone-card img { width:68px; height:68px; } .home-zone-card b { font-size:15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:760px) { .home-explore { min-height:0; padding: 58px 0 64px; } /* Más aire respecto a los bordes de pantalla */ .home-explore > .home-explore-wrap { width: calc(100% - 48px); margin-inline:auto; } .home-explore-head { margin-bottom:25px; } .home-explore-name { margin-bottom:14px; font-size:10px; } .home-explore-head h2 { margin-bottom:15px; font-size: clamp( 2.3rem, 10vw, 3rem ); } .home-explore-kicker { margin-bottom:10px; font-size:10px; } .home-explore-intro { font-size:15px; line-height:1.55; } /* ----------------------------------------------------- 3 TARJETAS POR FILA ----------------------------------------------------- */ .home-zones { grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; } .home-zone-card { min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding: 7px 7px 10px; border-radius:14px; } .home-zone-card img { width:100%; height:auto; aspect-ratio:1/1; border-radius:10px; } .home-zone-card b { width:100%; padding:0 2px; text-align:center; font-size:12px; line-height:1.15; overflow-wrap:anywhere; } /* En Home móvil mostramos solamente seis */ .home-zone-mobile-extra { display:none !important; } /* Acceso a la página completa */ .home-zones-all { width:max-content; display:block; margin: 18px auto 0; color:#153149; font-size:15px; font-weight:750; text-decoration:none; border-bottom: 1px solid rgba(21,49,73,.35); } } /* ========================================================= HOME · NUESTROS SERVICIOS ========================================================= */ .home-services-head { max-width:820px; margin-bottom:42px; } .home-services-head .eyebrow { margin-bottom:16px; } .home-services-head h2 { margin-bottom:22px; } .home-services-head p { max-width:760px; margin:0; color:#4d6375; font-size:17px; line-height:1.62; } /* --------------------------------------------------------- DESKTOP · TARJETAS --------------------------------------------------------- */ .home-service-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:22px; } .home-service-mobile-only { display:none; } /* --------------------------------------------------------- "CONOCE EL SERVICIO" · HOVER MODERNO --------------------------------------------------------- */ .home-service-card .link { position:relative; isolation:isolate; width:max-content; margin-top:auto; padding: 7px 10px; overflow:hidden; border-radius:7px; color:#0752a7; text-decoration:none; transition: color .25s ease; } .home-service-card .link::before { content:""; position:absolute; inset:0; z-index:-1; background:#39dbc5; transform:scaleX(0); transform-origin:left center; transition: transform .28s ease; } .home-service-card:hover .link::before { transform:scaleX(1); } .home-service-card:hover .link { color:#081f33; } /* Quitar cualquier subrayado heredado */ .home-service-card .link, .home-service-card .link:hover { text-decoration:none; } /* --------------------------------------------------------- PIE DE SECCIÓN --------------------------------------------------------- */ .home-services-footer { display:flex; justify-content:flex-end; margin-top:28px; } .home-services-footer a { display:inline-flex; align-items:center; gap:8px; color:#153149; font-weight:750; text-decoration:none; } .home-services-footer a span { transition: transform .2s ease; } .home-services-footer a:hover span { transform: translate(3px,-3px); } /* ========================================================= MOBILE · SERVICIOS 2 × 2 ========================================================= */ @media (max-width:760px) { .home-services { padding-block:60px; } .home-services > .wrap { width: calc(100% - 48px); } .home-services-head { margin-bottom:28px; } .home-services-head h2 { font-size: clamp( 2.25rem, 10vw, 3rem ); } .home-services-head p { font-size:15px; line-height:1.55; } /* Cuatro servicios */ .home-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; } .home-service-mobile-only { display:flex; } /* Tarjeta compacta */ .home-service-card { min-width:0; padding:9px; border-radius:15px; } .home-service-card .card-art { width:100%; height:auto; min-height:0; aspect-ratio:1 / 1; margin-bottom:13px; border-radius:11px; } .home-service-card .card-art img { width:100%; height:100%; object-fit:contain; } .home-service-card h3 { margin-bottom:7px; font-size:15px; line-height:1.16; } .home-service-card p { margin-bottom:0; font-size:12px; line-height:1.35; } /* En móvil no necesitamos "Conoce el servicio": toda la tarjeta ya es el enlace */ .home-service-card .link { display:none; } /* Ver todos centrado */ .home-services-footer { justify-content:center; margin-top:20px; } .home-services-footer a { font-size:15px; } } /* ========================================================= HOME · CONOCE REHABME ========================================================= */ .home-conoce-link { position:relative; isolation:isolate; width:max-content; display:inline-flex; padding:7px 11px; overflow:hidden; border-radius:7px; color:#153149; font-weight:750; text-decoration:none; transition:color .25s ease; } .home-conoce-link::before { content:""; position:absolute; inset:0; z-index:-1; background:#39dbc5; transform:scaleX(0); transform-origin:left center; transition:transform .28s ease; } .home-conoce-link:hover::before { transform:scaleX(1); } .home-conoce-link:hover { color:#081f33; text-decoration:none; } /* ========================================================= HOME · APP REHABME ========================================================= */ .home-app { position:relative; min-height:100dvh; display:flex; align-items:center; overflow:hidden; } .home-app-grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); align-items:center; gap: clamp( 50px, 7vw, 110px ); } /* ========================================================= COPY ========================================================= */ .home-app-copy { position:relative; z-index:2; } .home-app-copy .eyebrow { margin-bottom:22px; } .home-app-copy h2 { max-width:760px; margin-bottom:28px; font-size: clamp( 3.3rem, 5vw, 5.1rem ); line-height:.98; } .home-app-lead { max-width:690px; margin-bottom:34px; color:#c4d6e3; font-size:18px; line-height:1.62; } /* ========================================================= BENEFICIOS ========================================================= */ .home-app-features { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom:30px; } .home-app-feature { display:grid; grid-template-columns: 42px 1fr; gap:13px; padding: 7px 22px 7px 0; border-right: 1px solid rgba(255,255,255,.14); } .home-app-feature + .home-app-feature { padding-left:22px; } .home-app-feature:last-child { border-right:0; } .home-app-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(57,219,197,.12); color:#39dbc5; font-size:11px; font-weight:800; } .home-app-feature strong { display:block; margin-bottom:7px; color:#fff; font-size:14px; line-height:1.25; } .home-app-feature p { margin:0; color:#aebfcb; font-size:13px; line-height:1.45; } /* ========================================================= TARJETA DE ACOMPAÑAMIENTO ========================================================= */ .home-app-support { max-width:620px; display:grid; grid-template-columns: 58px 1fr; align-items:center; gap:18px; margin-top:30px; padding:18px 22px; border: 1px solid rgba(255,255,255,.17); border-radius:17px; background: rgba(255,255,255,.045); } .home-app-support-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(57,219,197,.12); color:#39dbc5; font-size:26px; line-height:1; } .home-app-support strong { display:block; margin-bottom:3px; color:#39dbc5; font-size:14px; } .home-app-support p { margin:0; color:#b9cbd7; font-size:14px; line-height:1.45; } /* ========================================================= CTA ========================================================= */ .home-app-link { position:relative; isolation:isolate; width:max-content; display:inline-flex; margin-top:28px; padding:11px 15px; overflow:hidden; border: 1px solid rgba(255,255,255,.32); border-radius:9px; color:#fff; font-weight:750; text-decoration:none; transition: color .25s ease, border-color .25s ease; } .home-app-link::before { content:""; position:absolute; inset:0; z-index:-1; background:#39dbc5; transform:scaleX(0); transform-origin:left center; transition:transform .28s ease; } .home-app-link:hover::before { transform:scaleX(1); } .home-app-link:hover { border-color:#39dbc5; color:#081f33; } /* ========================================================= CELULAR ========================================================= */ .home-app-visual { position:relative; min-height:690px; display:flex; align-items:center; justify-content:center; } .home-app-glow { position:absolute; width:520px; height:520px; border-radius:50%; background: radial-gradient( circle, rgba(57,219,197,.19) 0%, rgba(57,219,197,.07) 45%, transparent 72% ); pointer-events:none; } .home-app-visual img { position:relative; z-index:2; width:min(480px, 88%); max-height:720px; object-fit:contain; filter: drop-shadow( 0 36px 42px rgba(0,0,0,.34) ); transform: rotate(5deg) translateY(4px); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1000px) { .home-app-grid { grid-template-columns: 1fr .75fr; gap:30px; } .home-app-features { grid-template-columns:1fr; } .home-app-feature, .home-app-feature + .home-app-feature { padding: 14px 0; border-right:0; border-bottom: 1px solid rgba(255,255,255,.13); } .home-app-feature:last-child { border-bottom:0; } .home-app-visual img { width:100%; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:760px) { .home-app { min-height:0; padding: 62px 0 48px; } .home-app > .wrap { width: calc(100% - 48px); } .home-app-grid { display:flex; flex-direction:column; gap:36px; } .home-app-copy h2 { margin-bottom:22px; font-size: clamp( 2.65rem, 11vw, 3.5rem ); line-height:1; } .home-app-lead { margin-bottom:24px; font-size:15px; } .home-app-features { margin-bottom:22px; } .home-app-feature { grid-template-columns: 42px 1fr; } .home-app-feature strong { font-size:14px; } .home-app-feature p { font-size:12px; } .home-app-support { grid-template-columns: 48px 1fr; margin-top:18px; padding:16px; gap:13px; } .home-app-support-icon { width:42px; height:42px; font-size:22px; } .home-app-support strong, .home-app-support p { font-size:12px; } .home-app-link { margin-top:22px; } /* Imagen debajo del contenido */ .home-app-visual { width:100%; min-height:0; padding: 5px 0 15px; } .home-app-glow { width:330px; height:330px; } .home-app-visual img { width:min(330px,92%); max-height:none; transform: rotate(4deg); } } /* ========================================================= HOME · CTA FINAL ========================================================= */ .home-final-cta { position:relative; min-height:610px; display:flex; align-items:center; overflow:hidden; background: linear-gradient( 135deg, #124f53 0%, #176e66 100% ); color:#fff; } /* Decoración muy sutil */ .home-final-cta::before, .home-final-cta::after { content:""; position:absolute; width:520px; height:520px; border: 1px solid rgba(255,255,255,.08); border-radius:50%; pointer-events:none; } .home-final-cta::before { left:-300px; top:-280px; } .home-final-cta::after { right:-250px; bottom:-320px; } .home-final-cta-inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; } /* ========================================================= KICKER ========================================================= */ .home-final-kicker { display:flex; align-items:center; gap:15px; margin-bottom:25px; color:#8ee5dc; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .home-final-kicker span { width:42px; height:1px; background: rgba(142,229,220,.75); } /* ========================================================= TITULAR ========================================================= */ .home-final-cta h2 { margin: 0 0 28px; font-size: clamp( 3.4rem, 6.3vw, 6.6rem ); font-weight:600; line-height:.94; letter-spacing:-.055em; } .home-final-cta h2 strong { color:#8bded5; font-weight:600; } /* ========================================================= TEXTO ========================================================= */ .home-final-cta > .wrap > p, .home-final-cta-inner > p { max-width:720px; margin: 0 auto 38px; color: rgba(255,255,255,.82); font-size:18px; line-height:1.6; } /* ========================================================= ACCIONES ========================================================= */ .home-final-actions { display:flex; align-items:center; justify-content:center; gap:32px; } /* CTA PRINCIPAL */ .home-final-primary { min-width:320px; min-height:70px; display:inline-flex; align-items:center; justify-content:space-between; gap:30px; padding: 0 28px; border-radius:10px; background:#fff; color:#155a5c; font-weight:800; text-decoration:none; box-shadow: 0 18px 45px rgba(0,0,0,.16); transition: transform .22s ease, box-shadow .22s ease; } .home-final-primary span { font-size:24px; transition: transform .22s ease; } .home-final-primary:hover { transform:translateY(-3px); box-shadow: 0 22px 55px rgba(0,0,0,.22); } .home-final-primary:hover span { transform:translateX(5px); } /* CTA SECUNDARIO */ .home-final-help { display:flex; flex-direction:column; align-items:flex-start; text-align:left; line-height:1.15; } .home-final-help small { margin-bottom:4px; color: rgba(255,255,255,.78); font-size:13px; } .home-final-help a { color:#fff; font-weight:800; text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.65); } .home-final-help a:hover { color:#8ee5dc; border-color:#8ee5dc; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:760px) { .home-final-cta { min-height:0; padding: 72px 0; } .home-final-cta > .wrap { width: calc(100% - 48px); } .home-final-kicker { gap:10px; margin-bottom:20px; font-size:10px; } .home-final-kicker span { width:26px; } .home-final-cta h2 { margin-bottom:22px; font-size: clamp( 2.8rem, 12vw, 4rem ); } .home-final-cta-inner > p { margin-bottom:30px; font-size:15px; } .home-final-actions { width:100%; flex-direction:column; gap:20px; } .home-final-primary { width:100%; min-width:0; min-height:60px; padding: 0 22px; } .home-final-help { align-items:center; text-align:center; } } /* ========================================================= FOOTER · AJUSTE VISUAL ========================================================= */ .footer-logo { display:inline-block !important; margin-bottom:18px !important; } .footer-logo img { width:155px; height:auto; display:block; } .footer a, .footer a:hover, .footer a:focus { text-decoration:none !important; } .footer a { transition: color .2s ease, opacity .2s ease; } .footer a:hover { color:#39dbc5; } .footer-cta { display:inline-block !important; margin-top:14px !important; font-weight:750; } .footer .legal-links a { margin-bottom:0; } /* ========================================================= FOOTER · LOGO BLANCO ========================================================= */ .footer-logo img { width:185px; height:auto; filter: brightness(0) invert(1); opacity:.96; } @media (max-width:760px) { .footer-logo img { width:170px; } } /* ========================================================= FOOTER · VOLVER ARRIBA ========================================================= */ .footer .wrap { position:relative; } .footer-backtop { position:absolute; right:0; bottom:58px; width:46px; height:46px; display:flex !important; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.22); border-radius:50%; background: rgba(255,255,255,.07); color:#fff !important; font-size:22px; font-weight:400; text-decoration:none !important; transition: transform .22s ease, background .22s ease, border-color .22s ease; } .footer-backtop:hover { transform:translateY(-4px); background:#39dbc5; border-color:#39dbc5; color:#081f33 !important; } /* MOBILE */ @media (max-width:760px) { .footer-backtop { position:static; margin: 26px 0 0 auto; width:44px; height:44px; } } /* ========================================================= VOLVER ARRIBA · FLOTANTE GLOBAL ========================================================= */ .footer-backtop { position:fixed !important; right:24px; bottom:24px; z-index:90; width:48px; height:48px; margin:0 !important; display:flex !important; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.34); border-radius:50%; background: rgba(13,72,76,.82); color:#fff !important; font-size:22px; box-shadow: 0 10px 28px rgba(5,31,45,.20); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; visibility:hidden; transform: translateY(12px) scale(.92); pointer-events:none; transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .25s ease, border-color .25s ease; } /* Aparece después del scroll */ .footer-backtop.is-visible { opacity:.82; visibility:visible; transform: translateY(0) scale(1); pointer-events:auto; } .footer-backtop:hover { opacity:1; transform: translateY(-3px) scale(1.04); background:#39dbc5; border-color:#39dbc5; color:#081f33 !important; } /* Cuando llegamos al footer */ .footer-backtop.is-in-footer { opacity:1; background:#176e66; border-color: rgba(255,255,255,.48); box-shadow: 0 10px 28px rgba(0,0,0,.22); } /* ========================================================= MOBILE · MARCA DE AGUA DURANTE NAVEGACIÓN ========================================================= */ @media (max-width:760px) { .footer-backtop { right:16px; bottom: calc( 18px + env(safe-area-inset-bottom) ); width:46px; height:46px; background: rgba(20,105,102,.38); border-color: rgba(255,255,255,.22); box-shadow:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .footer-backtop.is-visible { opacity:.48; } /* En el footer deja de parecer marca de agua */ .footer-backtop.is-visible.is-in-footer { opacity:1; background:#176e66; border-color: rgba(255,255,255,.55); box-shadow: 0 8px 24px rgba(0,0,0,.22); } } /* ========================================================= VOLVER ARRIBA · AJUSTE VISUAL ========================================================= */ .footer-backtop { color:#ffffff !important; } /* Hover más luminoso */ .footer-backtop:hover { opacity:1; transform: translateY(-3px) scale(1.06); background:#39dbc5; border-color:#8ff4e7; color:#ffffff !important; box-shadow: 0 0 0 4px rgba(57,219,197,.13), 0 0 24px rgba(57,219,197,.48), 0 12px 32px rgba(0,0,0,.20); } /* La flecha nunca cambia a negro */ .footer-backtop:hover, .footer-backtop:hover * { color:#ffffff !important; } /* ========================================================= MOBILE · MÁS VISIBLE ========================================================= */ @media (max-width:760px) { .footer-backtop { background: rgba(20,105,102,.72); border-color: rgba(255,255,255,.38); box-shadow: 0 8px 22px rgba(0,0,0,.16); } .footer-backtop.is-visible { opacity:.82; } .footer-backtop.is-visible.is-in-footer { opacity:1; background:#176e66; border-color: rgba(255,255,255,.58); } .footer-backtop:hover { opacity:1; background:#39dbc5; border-color:#8ff4e7; color:#ffffff !important; } } /* ========================================================= REHABME · PÁGINA PRINCIPAL DE SERVICIOS Desktop: selector + preview Mobile: acordeón ========================================================= */ .services-heading{ padding-bottom:58px; } .services-heading h1{ max-width:920px; } .services-heading .eyebrow{ color:#147b70; } .services-heading .lead{ max-width:720px; } .services-section{ padding-block:72px 88px; } .services-desktop{ display:grid; grid-template-columns:minmax(390px,.88fr) minmax(500px,1.12fr); gap:72px; align-items:start; } .services-selector{ border-top:1px solid var(--line); } .services-selector-item{ min-height:82px; display:grid; grid-template-columns:52px 1fr 32px; align-items:center; gap:18px; padding:0 16px 0 8px; border-bottom:1px solid var(--line); text-decoration:none; transition: background .28s ease, padding-left .28s ease; } .services-selector-item:nth-child(even){ background:rgba(57,219,197,.035); } .services-selector-item:hover, .services-selector-item:focus-visible, .services-selector-item.is-active{ background:linear-gradient( 90deg, rgba(57,219,197,.10), rgba(57,219,197,.025) ); padding-left:22px; } .services-selector-number{ color:#708b99; font-size:.78rem; font-weight:700; letter-spacing:.12em; } .services-selector-item.is-active .services-selector-number, .services-selector-item:hover .services-selector-number{ color:#0b8376; } .services-selector-name{ font-size:1.25rem; line-height:1.2; font-weight:650; letter-spacing:-.025em; color:#123447; } .services-selector-arrow{ color:#0b8376; font-size:1.4rem; opacity:0; transform:translateX(-8px); transition: opacity .25s ease, transform .25s ease; } .services-selector-item:hover .services-selector-arrow, .services-selector-item:focus-visible .services-selector-arrow, .services-selector-item.is-active .services-selector-arrow{ opacity:1; transform:translateX(0); } /* PREVIEW DERECHO */ .services-preview{ position:sticky; top:120px; } .services-preview-media{ position:relative; overflow:hidden; min-height:455px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); } .services-preview-image{ display:none; width:100%; height:455px; object-fit:contain; padding:18px; } .services-preview-image.is-active{ display:block; animation:servicesImageIn .35s ease both; } @keyframes servicesImageIn{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:scale(1); } } .services-preview-watermark{ position:absolute; right:22px; bottom:-18px; font-size:8rem; line-height:1; font-weight:700; color:rgba(16,42,67,.08); pointer-events:none; } .services-preview-copy{ padding-top:26px; } .services-preview-copy::before{ content:""; display:block; width:64px; height:3px; margin-bottom:16px; background:#169d8c; } .services-preview-index{ display:block; margin-bottom:7px; color:#168a7c; font-size:.8rem; font-weight:700; letter-spacing:.14em; } .services-preview-copy h2{ margin-bottom:10px; font-size:2.15rem; } .services-preview-copy p{ max-width:680px; margin-bottom:12px; color:var(--muted); font-size:1rem; line-height:1.55; } .services-preview-copy a{ display:inline-flex; align-items:center; gap:22px; padding:7px 0; color:#087d70; font-size:.9rem; font-weight:700; text-decoration:none; border-bottom:1px solid #8bcfc5; } .services-preview-copy a:hover{ color:#102a43; border-color:#102a43; } /* MOBILE */ .services-mobile{ display:none; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1000px) and (min-width:701px){ .services-desktop{ grid-template-columns:.9fr 1.1fr; gap:36px; } .services-selector-name{ font-size:1.05rem; } .services-preview-media, .services-preview-image{ height:390px; min-height:390px; } } /* ========================================================= MOBILE · ACORDEÓN ========================================================= */ @media(max-width:700px){ .services-heading{ padding-bottom:34px; } .services-heading h1{ font-size:2.75rem; } .services-heading .lead{ font-size:1rem; } .services-section{ padding-block:0 58px; background:#fff; } .services-desktop{ display:none; } .services-mobile{ display:block; border-top:1px solid var(--line); } .services-mobile-item{ border-bottom:1px solid var(--line); } .services-mobile-item:nth-child(even){ background:rgba(57,219,197,.045); } .services-mobile-trigger{ width:100%; min-height:76px; display:grid; grid-template-columns:38px 1fr 28px; align-items:center; gap:10px; padding:10px 8px; border:0; background:transparent; color:#123447; text-align:left; } .services-mobile-trigger span{ color:#718b99; font-size:.72rem; font-weight:700; letter-spacing:.12em; } .services-mobile-trigger strong{ font-size:1.08rem; line-height:1.18; font-weight:650; } .services-mobile-trigger i{ justify-self:end; color:#118779; font-size:1.35rem; font-style:normal; font-weight:400; transition:transform .3s ease; } .services-mobile-item.is-open .services-mobile-trigger{ color:#087d70; } .services-mobile-item.is-open .services-mobile-trigger i{ transform:rotate(45deg); } .services-mobile-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s ease; } .services-mobile-item.is-open .services-mobile-panel{ grid-template-rows:1fr; } .services-mobile-inner{ overflow:hidden; } .services-mobile-inner > *{ margin-left:48px; margin-right:8px; } .services-mobile-inner h2{ margin-top:8px; margin-bottom:10px; font-size:1.65rem; } .services-mobile-inner p{ margin-bottom:20px; color:var(--muted); font-size:.94rem; line-height:1.55; } .services-mobile-inner img{ width:calc(100% - 56px); height:auto; aspect-ratio:16 / 10; margin-bottom:18px; object-fit:contain; background:#f3f7fa; border-radius:15px; } .services-mobile-inner a{ display:inline-flex; align-items:center; gap:20px; margin-bottom:27px; padding-bottom:6px; color:#087d70; border-bottom:1px solid #9bd8cf; font-size:.84rem; font-weight:700; text-decoration:none; } } /* ========================================================= SERVICIO MAESTRO · FISIOTERAPIA INTEGRAL ========================================================= */ .service-master-hero{ padding:55px 0 90px; } .service-master-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(430px,.92fr); gap:70px; align-items:center; } .service-master-hero-copy h1{ margin-bottom:12px; font-size:clamp(3.4rem,5.6vw,5.8rem); } .service-master-hero-copy h2{ margin-bottom:24px; font-size:clamp(2rem,3vw,3.15rem); line-height:1.04; } .service-master-hero-copy h2 span, .service-master-section-head h2 span{ color:#168f83; } .service-master-hero-copy > p:not(.lead){ max-width:650px; color:var(--muted); } .service-master-tags{ display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 4px; } .service-master-tags span{ padding:7px 12px; border:1px solid var(--line); border-radius:999px; font-size:.78rem; font-weight:700; background:#fff; } .service-master-photo{ position:relative; overflow:hidden; border-radius:28px; min-height:510px; background:var(--paper); } .service-master-photo img{ width:100%; height:510px; object-fit:cover; } .service-master-photo-label{ position:absolute; right:18px; bottom:18px; padding:7px 11px; border-radius:999px; background:rgba(8,31,51,.75); color:#fff; font-size:.7rem; } /* ========================================================= HEAD DE SECCIONES ========================================================= */ .service-master-section-head{ max-width:850px; margin-bottom:48px; } .service-master-section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; } .service-master-section-head h2{ margin-bottom:20px; } .service-master-section-head p{ max-width:760px; color:var(--muted); } .service-master-section-head.centered p{ margin-left:auto; margin-right:auto; } /* ========================================================= OBJETIVOS ========================================================= */ .service-master-goals{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .service-master-goals article{ padding:28px; border:1px solid var(--line); border-radius:20px; } .service-master-goals article > span{ display:block; margin-bottom:34px; color:#168f83; font-size:.82rem; font-weight:800; } .service-master-goals h3{ font-size:1.25rem; } .service-master-goals p{ margin:0; color:var(--muted); font-size:.92rem; } /* ========================================================= SITUACIONES ========================================================= */ .service-master-situation-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .service-master-situation-grid article{ min-height:260px; padding:28px; border:1px solid #e2e9ee; border-radius:20px; background:#fff; } .service-master-situation-grid article > span{ display:inline-flex; margin-bottom:30px; color:#168f83; font-weight:800; font-size:.8rem; } .service-master-situation-grid h3{ font-size:1.35rem; } .service-master-situation-grid p{ margin:0; color:var(--muted); font-size:.92rem; } /* ========================================================= PROCESO ========================================================= */ .service-master-process-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .service-master-process-grid article{ position:relative; padding:30px 26px; border:1px solid var(--line); border-radius:20px; background:#fff; } .service-master-process-number{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-bottom:28px; border-radius:50%; background:var(--navy); color:#fff; font-size:.8rem; font-weight:800; } .service-master-process-grid article:nth-child(even) .service-master-process-number{ background:#168f83; } .service-master-process-grid small{ display:block; margin-bottom:9px; color:#168f83; text-transform:uppercase; letter-spacing:.08em; font-weight:750; font-size:.68rem; } .service-master-process-grid h3{ font-size:1.35rem; } .service-master-process-grid p{ margin:0; color:var(--muted); font-size:.9rem; } /* ========================================================= MODALIDADES ========================================================= */ .service-master-modality-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .service-master-modality{ display:flex; flex-direction:column; padding:36px; border:1px solid var(--line); border-radius:24px; background:#fff; } .service-master-modality.featured{ border:2px solid #168f83; } .service-master-modality-top{ display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:28px; } .service-master-modality-top span{ color:#168f83; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; } .service-master-modality-top small{ padding:6px 10px; border-radius:999px; background:#e7f8f5; color:#126f66; font-weight:700; } .service-master-modality h3{ margin-bottom:12px; font-size:1.8rem; } .service-master-modality h4{ margin:0 0 17px; color:#274d5e; font-size:1.05rem; } .service-master-modality > p{ color:var(--muted); } .service-master-modality ul{ list-style:none; padding:0; margin:10px 0 32px; } .service-master-modality li{ position:relative; padding:15px 0 15px 27px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.9rem; } .service-master-modality li::before{ content:"✓"; position:absolute; left:0; top:15px; color:#168f83; font-weight:800; } .service-master-modality li strong{ display:block; margin-bottom:3px; color:var(--ink); } .service-master-modality-btn{ margin-top:auto; min-height:52px; display:flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:10px; background:#edf4f8; color:var(--ink); font-weight:750; text-decoration:none; } .service-master-modality-btn.primary{ background:#168f83; color:#fff; } .service-master-modality-btn:hover{ transform:translateY(-2px); } /* ========================================================= APP ========================================================= */ .service-master-app-grid{ display:grid; grid-template-columns:1.05fr .75fr; gap:70px; align-items:center; } .service-master-app h2{ max-width:700px; } .service-master-app-points{ margin:30px 0; } .service-master-app-points > div{ padding:16px 0; border-bottom:1px solid rgba(255,255,255,.15); } .service-master-app-points strong{ display:block; margin-bottom:5px; color:#fff; } .service-master-app-points p{ max-width:650px; margin:0; color:#b9cbd7; font-size:.9rem; } .service-master-app-link{ display:inline-flex; margin-top:8px; padding:11px 15px; border:1px solid rgba(255,255,255,.3); border-radius:9px; color:#fff; text-decoration:none; font-weight:750; } .service-master-app-link:hover{ background:var(--mint); border-color:var(--mint); color:var(--deep); } .service-master-app-phone{ display:flex; align-items:center; justify-content:center; } .service-master-app-phone img{ width:min(400px,100%); max-height:650px; object-fit:contain; transform:rotate(4deg); filter:drop-shadow(0 30px 45px rgba(0,0,0,.3)); } /* ========================================================= FAQ ========================================================= */ .service-master-faq .faq{ margin-top:10px; } .service-master-faq .faq details{ background:#fff; margin-bottom:12px; padding:22px 24px; border:1px solid var(--line); border-radius:14px; } .service-master-faq .faq details:last-child{ border-bottom:1px solid var(--line); } /* ========================================================= TABLET ========================================================= */ @media(max-width:1000px){ .service-master-hero-grid{ grid-template-columns:1fr 1fr; gap:38px; } .service-master-goals, .service-master-process-grid{ grid-template-columns:1fr 1fr; } .service-master-situation-grid{ grid-template-columns:1fr 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .service-master-hero{ padding:30px 0 58px; } .service-master-hero-grid{ grid-template-columns:1fr; gap:34px; } .service-master-hero-copy h1{ font-size:3rem; } .service-master-hero-copy h2{ font-size:2rem; } .service-master-tags{ gap:6px; } .service-master-tags span{ font-size:.68rem; padding:6px 9px; } .service-master-photo{ min-height:0; border-radius:20px; } .service-master-photo img{ height:auto; aspect-ratio:4/3; object-fit:cover; } .service-master-section-head{ margin-bottom:30px; } .service-master-section-head.centered{ text-align:left; } .service-master-goals, .service-master-situation-grid, .service-master-process-grid, .service-master-modality-grid{ grid-template-columns:1fr; } .service-master-goals article, .service-master-situation-grid article{ min-height:0; padding:22px; } .service-master-goals article > span, .service-master-situation-grid article > span{ margin-bottom:18px; } .service-master-process-grid article{ padding:24px; } .service-master-modality{ padding:24px 20px; } .service-master-modality h3{ font-size:1.55rem; } .service-master-app-grid{ grid-template-columns:1fr; gap:32px; } .service-master-app-phone img{ width:min(310px,90%); } .service-master-faq .faq details{ padding:20px 18px; } } /* === SERVICIOS V2 · START === */ .services-v2-hero{ padding:clamp(4rem,8vw,7.5rem) 0 clamp(4rem,7vw,6.5rem); background: radial-gradient(circle at 86% 20%,rgba(39,196,181,.12),transparent 30rem), #fff; } .services-v2-hero-grid{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(320px,.72fr); gap:clamp(3rem,7vw,7rem); align-items:center; } .services-v2-hero-copy h1{ max-width:900px; margin:.9rem 0 1.5rem; font-size:clamp(3rem,5.5vw,6rem); line-height:.95; letter-spacing:-.055em; } .services-v2-hero-copy h1 span{ display:block; color:#168f89; } .services-v2-hero-copy .lead{ max-width:740px; font-size:clamp(1.12rem,1.5vw,1.35rem); } .services-v2-hero-copy > p:not(.lead){ max-width:680px; color:#526575; } .services-v2-hero-actions{ margin-top:2.1rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; } .services-v2-text-link{ display:inline-flex; align-items:center; gap:.6rem; color:#102a43; text-decoration:none; font-weight:700; } .services-v2-text-link span{ transition:transform .25s ease; } .services-v2-text-link:hover span{ transform:translateY(3px); } .services-v2-hero-side{ padding:clamp(1.6rem,3vw,2.4rem); border:1px solid rgba(16,42,67,.12); border-radius:1.6rem; background:rgba(248,251,252,.88); box-shadow:0 24px 60px rgba(16,42,67,.06); } .services-v2-side-kicker{ display:block; margin-bottom:1.4rem; color:#168f89; font-size:.76rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .services-v2-principle{ display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; padding:1.25rem 0; border-top:1px solid rgba(16,42,67,.1); } .services-v2-principle > span{ color:#168f89; font-size:.76rem; font-weight:800; } .services-v2-principle strong{ display:block; margin-bottom:.25rem; color:#102a43; } .services-v2-principle p{ margin:0; color:#607181; font-size:.92rem; line-height:1.55; } /* Encabezados internos */ .services-v2-section-head{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr); gap:4rem; align-items:end; margin-bottom:3rem; } .services-v2-section-head h2{ margin:.8rem 0 0; font-size:clamp(2.3rem,4vw,4.2rem); line-height:1; letter-spacing:-.045em; } .services-v2-section-head h2 span{ color:#168f89; } .services-v2-section-head > p{ margin:0; color:#566b7d; line-height:1.7; } /* Catálogo */ .services-v2-catalog{ padding-top:clamp(4rem,7vw,7rem); padding-bottom:clamp(4rem,8vw,8rem); } .services-showcase-v2 .services-selector-item{ grid-template-columns:2.2rem 2.8rem minmax(0,1fr) 2rem; } .services-v2-icon{ width:2.65rem; height:2.65rem; border-radius:.8rem; display:inline-flex; align-items:center; justify-content:center; background:#eef8f7; color:#137e79; flex:0 0 auto; } .services-v2-icon svg{ width:1.45rem; height:1.45rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .services-selector-item.is-active .services-v2-icon, .services-selector-item:hover .services-v2-icon{ background:#102a43; color:white; } .services-preview-media{ position:relative; } .services-preview-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(9,31,48,.35)); pointer-events:none; } .services-preview-media img{ object-fit:cover; } .services-preview-icon{ position:absolute; left:1.4rem; top:1.4rem; z-index:3; } .services-preview-icon .services-v2-icon{ background:rgba(255,255,255,.92); box-shadow:0 10px 30px rgba(16,42,67,.13); } .services-preview-copy p{ font-size:1.05rem; line-height:1.7; } .services-preview-tags, .services-mobile-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1.35rem 0 1.6rem; } .services-preview-tags span, .services-mobile-tags span{ display:inline-flex; padding:.45rem .7rem; border-radius:999px; background:#eef6f7; color:#37576a; font-size:.74rem; font-weight:700; } /* Orientación */ .services-v2-guidance{ padding:clamp(4.5rem,8vw,8rem) 0; background:#102a43; color:white; } .services-v2-guidance .eyebrow{ color:#6dd7ce; } .services-v2-guidance-grid{ display:grid; grid-template-columns:1fr .82fr; gap:clamp(3rem,8vw,8rem); align-items:start; } .services-v2-guidance h2{ margin:.8rem 0 0; color:white; font-size:clamp(2.6rem,4.8vw,5rem); line-height:1; letter-spacing:-.05em; } .services-v2-guidance h2 span{ color:#74ddd4; } .services-v2-guidance p{ color:#c8d6df; } .services-v2-guidance .lead{ color:white; font-size:1.15rem; } .services-v2-guidance-actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:2rem; } .services-v2-guidance .services-v2-text-link{ color:white; } /* Modalidades */ .services-v2-modalities{ padding-top:clamp(4.5rem,8vw,7rem); padding-bottom:clamp(4.5rem,8vw,8rem); } .services-v2-modality-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; } .services-v2-modality{ position:relative; padding:clamp(1.8rem,3vw,2.6rem); border:1px solid rgba(16,42,67,.12); border-radius:1.5rem; background:#fff; min-height:355px; display:flex; flex-direction:column; } .services-v2-modality-number{ position:absolute; top:1.6rem; right:1.8rem; color:#94a5b1; font-size:.76rem; font-weight:800; } .services-v2-modality-symbol{ width:3.3rem; height:3.3rem; display:flex; align-items:center; justify-content:center; border-radius:1rem; margin-bottom:2.4rem; background:#eaf7f6; color:#137e79; } .services-v2-modality-symbol svg{ width:1.75rem; height:1.75rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .services-v2-modality h3{ margin:0 0 .8rem; font-size:1.55rem; } .services-v2-modality p{ color:#586c7c; line-height:1.7; } .services-v2-modality a{ margin-top:auto; display:inline-flex; gap:.6rem; align-items:center; color:#102a43; font-weight:750; text-decoration:none; } /* App */ .services-v2-app{ overflow:hidden; background:#0d2337; color:white; } .services-v2-app-grid{ min-height:620px; display:grid; grid-template-columns:.92fr 1fr; gap:clamp(3rem,7vw,7rem); align-items:center; } .services-v2-app-copy{ padding:5rem 0; } .services-v2-app .eyebrow{ color:#6fd7cf; } .services-v2-app h2{ margin:.8rem 0 1.4rem; color:white; max-width:640px; font-size:clamp(2.7rem,4.6vw,4.9rem); line-height:.98; letter-spacing:-.05em; } .services-v2-app h2 span{ display:block; color:#70d8d0; } .services-v2-app .lead{ max-width:600px; color:#d3e0e7; } .services-v2-app-features{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.7rem 0; } .services-v2-app-features span{ padding:.55rem .8rem; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#dce8ed; font-size:.78rem; } .services-v2-app-copy > a{ display:inline-flex; align-items:center; gap:.65rem; color:white; font-weight:800; text-decoration:none; margin-top:.5rem; } .services-v2-app-copy small{ display:block; margin-top:1rem; color:#8fa5b3; } .services-v2-app-visual{ position:relative; height:620px; display:flex; justify-content:center; align-items:flex-end; } .services-v2-app-visual img{ position:relative; z-index:2; width:min(72%,390px); max-height:600px; object-fit:contain; object-position:bottom center; transform:rotate(4deg) translateY(3rem); filter:drop-shadow(0 40px 45px rgba(0,0,0,.35)); } .services-v2-app-glow{ position:absolute; width:430px; height:430px; border-radius:50%; background:rgba(43,205,190,.18); filter:blur(40px); bottom:4rem; } /* Mobile */ @media (max-width: 800px){ .services-v2-hero{ padding-top:3.3rem; } .services-v2-hero-grid, .services-v2-section-head, .services-v2-guidance-grid, .services-v2-app-grid{ grid-template-columns:1fr; } .services-v2-hero-grid{ gap:2.5rem; } .services-v2-hero-copy h1{ font-size:clamp(2.6rem,12vw,4.2rem); } .services-v2-hero-side{ padding:1.4rem; } .services-v2-section-head{ gap:1.2rem; margin-bottom:2.2rem; } .services-v2-section-head h2{ font-size:clamp(2.2rem,10vw,3.5rem); } .services-mobile-trigger{ display:grid; grid-template-columns:2rem 2.5rem minmax(0,1fr) 1.4rem; align-items:center; gap:.65rem; } .services-mobile-trigger .services-v2-icon{ width:2.35rem; height:2.35rem; } .services-mobile-inner h2{ margin-bottom:1.2rem; } .services-mobile-inner img{ margin-bottom:1.3rem; aspect-ratio:16/10; object-fit:cover; border-radius:1rem; } .services-v2-guidance-grid{ gap:2rem; } .services-v2-guidance h2{ font-size:clamp(2.4rem,11vw,4rem); } .services-v2-modality-grid{ grid-template-columns:1fr; } .services-v2-modality{ min-height:310px; } .services-v2-app-grid{ gap:0; } .services-v2-app-copy{ padding:4.5rem 0 1rem; } .services-v2-app h2{ font-size:clamp(2.4rem,11vw,4rem); } .services-v2-app-visual{ height:470px; } .services-v2-app-visual img{ width:min(72vw,330px); max-height:450px; transform:rotate(3deg) translateY(2rem); } .services-v2-app-glow{ width:300px; height:300px; } } /* === SERVICIOS V2 · END === */ /* === EXPLORA ZONA V2 · START === */ /* HERO */ .zone-v2-hero{ padding:clamp(3.6rem,7vw,6.8rem) 0; background: radial-gradient( circle at 82% 30%, rgba(35,199,185,.12), transparent 28rem ), #f7fafc; } .zone-v2-hero-grid{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(380px,.86fr); gap:clamp(3rem,7vw,7rem); align-items:center; } .zone-v2-hero-copy h1{ margin:.8rem 0 .45rem; font-size:clamp(3.7rem,6vw,6.8rem); line-height:.9; letter-spacing:-.06em; } .zone-v2-hero-copy h2{ max-width:720px; margin:0 0 1.6rem; color:#15968e; font-size:clamp(1.7rem,2.5vw,2.7rem); line-height:1.05; letter-spacing:-.035em; } .zone-v2-hero-copy .lead{ max-width:700px; font-size:1.18rem; } .zone-v2-hero-copy > p:not(.lead):not(.zone-v2-note){ max-width:680px; color:#586c7c; } .zone-v2-hero-tags{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; margin:1.8rem 0 2rem; } .zone-v2-hero-tags span{ display:inline-flex; align-items:center; gap:.55rem; padding:.54rem .72rem; border:1px solid rgba(16,42,67,.1); border-radius:.6rem; background:white; color:#2d4b5e; font-size:.78rem; font-weight:700; } .zone-v2-hero-tags svg{ width:1rem; height:1rem; fill:none; stroke:#12a99d; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .zone-v2-hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem; } .zone-v2-note{ margin-top:1rem; color:#80919d; font-size:.76rem; } .zone-v2-hero-visual{ padding:1rem; border:1px solid rgba(16,42,67,.09); border-radius:1.35rem; background:white; box-shadow:0 24px 60px rgba(16,42,67,.08); } .zone-v2-image-frame{ position:relative; overflow:hidden; border-radius:1rem; background:#102a43; } .zone-v2-image{ display:block; width:100%; aspect-ratio:1.2/1; object-fit:cover; } .zone-v2-image-label{ position:absolute; right:1rem; top:1rem; padding:.5rem .75rem; border-radius:.55rem; background:rgba(255,255,255,.94); color:#28475a; font-size:.72rem; font-weight:800; box-shadow:0 8px 25px rgba(16,42,67,.12); } .zone-v2-visual-meta{ display:grid; grid-template-columns:.75fr 1.25fr; gap:.55rem; padding-top:.7rem; } .zone-v2-visual-meta > div{ padding:.8rem .9rem; border-radius:.65rem; background:#f0f6f8; } .zone-v2-visual-meta small{ display:block; margin-bottom:.22rem; color:#7c909c; font-size:.6rem; letter-spacing:.06em; } .zone-v2-visual-meta strong{ display:block; color:#15364b; font-size:.79rem; } /* ENCABEZADOS */ .zone-v2-section-head{ display:grid; grid-template-columns:1fr .72fr; gap:4rem; align-items:end; margin-bottom:3rem; } .zone-v2-section-head.centered{ display:block; max-width:780px; margin:0 auto 3rem; text-align:center; } .zone-v2-section-head h2{ margin:.75rem 0 0; font-size:clamp(2.6rem,4.5vw,4.6rem); line-height:.98; letter-spacing:-.05em; } .zone-v2-section-head h2 span{ display:block; color:#14958d; } .zone-v2-section-head.centered p{ max-width:680px; margin:1rem auto 0; color:#60727f; } /* RECONOCER */ .zone-v2-recognize{ padding:clamp(4.5rem,8vw,8rem) 0; background:#fff; } .zone-v2-recognize-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .zone-v2-recognize-card{ min-height:200px; padding:1.4rem; border:1px solid rgba(16,42,67,.1); border-radius:1rem; background:#f7f9fc; } .zone-v2-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; } .zone-v2-card-icon{ width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; border-radius:.75rem; background:#dff3f1; color:#148e87; } .zone-v2-card-icon svg{ width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .zone-v2-card-number{ color:#92a2ad; font-size:.7rem; font-weight:800; } .zone-v2-recognize-card p{ margin:0; color:#243f51; font-weight:650; line-height:1.55; } .zone-v2-daily-impact{ display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; margin-top:4.5rem; padding:clamp(2rem,4vw,3.5rem); border-radius:1.3rem; background:#102a43; color:white; } .zone-v2-daily-impact h3{ margin:.7rem 0 0; color:white; font-size:clamp(2rem,3.2vw,3.2rem); line-height:1; } .zone-v2-daily-impact h3 span{ display:block; color:#6fd8cf; } .zone-v2-daily-impact p{ color:#bed0db; } .zone-v2-daily-impact .lead{ color:white; } /* MOTOR EXISTENTE · SOLO PRESENTACIÓN */ #evalua.section{ padding:clamp(4rem,8vw,7rem) 0; background:#f1f5fb; } #evalua .narrow{ max-width:760px; } #evalua .evaluation{ padding:clamp(1.8rem,4vw,3rem); border:1px solid rgba(16,42,67,.1); border-radius:1.3rem; background:white; box-shadow:0 20px 45px rgba(16,42,67,.08); } #evalua .evaluation h2{ margin:.55rem 0 .6rem; font-size:clamp(2.4rem,4vw,3.8rem); letter-spacing:-.045em; } #evalua .assessment-form{ margin-top:2rem; } #evalua .assessment-form fieldset{ padding:1.5rem 0; border:0; border-top:1px solid rgba(16,42,67,.09); } #evalua .assessment-form legend{ margin-bottom:1rem; color:#102a43; font-size:1.08rem; font-weight:800; } #evalua .choices{ display:flex; flex-wrap:wrap; gap:.55rem; } #evalua .choice span{ display:block; padding:.72rem 1rem; border:1px solid rgba(16,42,67,.13); border-radius:.75rem; background:white; transition:.2s ease; } #evalua .choice input:checked + span{ border-color:#13a99e; background:#e9f8f6; } #evalua .range-row{ margin-top:1rem; } #evalua .actions{ margin-top:1.5rem; } /* VALORACIÓN */ .zone-v2-assessment{ padding:clamp(4.5rem,8vw,8rem) 0; background:white; } .zone-v2-assessment-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } .zone-v2-assessment-grid article{ position:relative; min-height:240px; padding:1.5rem; border:1px solid rgba(16,42,67,.1); border-radius:1rem; background:#f7f9fc; } .zone-v2-assessment-number{ position:absolute; top:1.3rem; right:1.3rem; color:#9aabb5; font-size:.68rem; font-weight:800; } .zone-v2-assessment-icon{ width:2.65rem; height:2.65rem; display:flex; align-items:center; justify-content:center; margin-bottom:2.8rem; border-radius:.8rem; background:#dff3f1; color:#148e87; } .zone-v2-assessment-icon svg{ width:1.4rem; height:1.4rem; fill:none; stroke:currentColor; stroke-width:1.7; } .zone-v2-assessment-grid p{ margin:0; color:#294658; line-height:1.6; } /* OBJETIVOS */ .zone-v2-goals{ padding:clamp(4.5rem,8vw,8rem) 0; background:#102a43; color:white; } .zone-v2-goals-grid{ display:grid; grid-template-columns:1fr .8fr; gap:clamp(3rem,8vw,8rem); } .zone-v2-goals .eyebrow{ color:#6ed7cf; } .zone-v2-goals h2{ margin:.7rem 0 0; color:white; font-size:clamp(2.7rem,4.8vw,5rem); line-height:.98; letter-spacing:-.05em; } .zone-v2-goals h2 span{ display:block; color:#72dad2; } .zone-v2-goals-copy p{ color:#bdced8; } .zone-v2-goals-copy .lead{ color:white; } /* SERVICIOS RELACIONADOS */ .zone-v2-related{ padding-top:clamp(4.5rem,8vw,7rem); padding-bottom:clamp(4.5rem,8vw,8rem); } /* FAQ */ .zone-v2-faq{ padding:clamp(4.5rem,8vw,8rem) 0; background:white; } .zone-v2-faq-head{ margin-bottom:2.4rem; } .zone-v2-faq-head h2{ margin:.6rem 0; font-size:clamp(2.6rem,4.2vw,4rem); letter-spacing:-.045em; } /* MOBILE */ @media(max-width:800px){ .zone-v2-hero{ padding-top:3rem; } .zone-v2-hero-grid, .zone-v2-section-head, .zone-v2-daily-impact, .zone-v2-goals-grid{ grid-template-columns:1fr; } .zone-v2-hero-grid{ gap:2.5rem; } .zone-v2-hero-copy h1{ font-size:clamp(3rem,15vw,5rem); } .zone-v2-hero-copy h2{ font-size:clamp(1.6rem,7vw,2.4rem); } .zone-v2-hero-visual{ padding:.7rem; } .zone-v2-recognize-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .zone-v2-recognize-card{ min-height:175px; padding:1.1rem; } .zone-v2-card-top{ margin-bottom:1.4rem; } .zone-v2-daily-impact{ gap:1.2rem; margin-top:2.5rem; } .zone-v2-section-head{ gap:1.2rem; } .zone-v2-assessment-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #evalua .evaluation{ padding:1.35rem; } #evalua .choices{ display:grid; grid-template-columns:1fr; } #evalua .choice span{ width:100%; } } @media(max-width:520px){ .zone-v2-recognize-grid, .zone-v2-assessment-grid{ grid-template-columns:1fr; } .zone-v2-recognize-card, .zone-v2-assessment-grid article{ min-height:auto; } .zone-v2-visual-meta{ grid-template-columns:1fr; } } /* === EXPLORA ZONA V2 · END === */ /* === CERVICAL HERO V1 · START === */ .cervical-hero{ position:relative; overflow:hidden; padding:clamp(3.2rem,6vw,6rem) 0 clamp(3.5rem,6vw,5.8rem); background: radial-gradient( circle at 80% 30%, rgba(25,172,166,.08), transparent 34rem ), linear-gradient( 135deg, #fbfcff 0%, #f5f8fc 56%, #f7fafc 100% ); } .cervical-hero-main{ display:grid; grid-template-columns:minmax(0,.93fr) minmax(480px,1.07fr); gap:clamp(3rem,6vw,6.5rem); align-items:center; } /* EYEBROW */ .cervical-hero-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; padding:.48rem .82rem; border:1px solid rgba(27,143,177,.18); border-radius:999px; background:#edf7ff; color:#0875a7; font-size:.72rem; font-weight:800; letter-spacing:.025em; text-transform:uppercase; } .cervical-hero-eyebrow i{ width:.48rem; height:.48rem; flex:0 0 auto; border-radius:50%; background:#47c8bd; } /* TITULO */ .cervical-hero-copy h1{ max-width:720px; margin:0 0 1.55rem; color:#062b4e; font-size:clamp(3.3rem,5.1vw,5.65rem); line-height:.96; letter-spacing:-.06em; } .cervical-hero-copy h1 span{ display:block; margin-top:.15em; color:#0978a9; } .cervical-hero-copy h1 span::after{ content:""; display:block; width:clamp(10rem,60%,22rem); height:3px; margin-top:.15rem; border-radius:4px; background:#24aa9f; } /* INTRODUCCION */ .cervical-hero-intro{ max-width:700px; margin:0; color:#334f64; font-size:clamp(.98rem,1.2vw,1.08rem); line-height:1.72; } .cervical-hero-intro + .cervical-hero-intro{ margin-top:.25rem; } .cervical-hero-intro-strong strong{ color:#173c58; font-weight:800; } /* TRES CONCEPTOS */ .cervical-hero-points{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; margin-top:1.8rem; } .cervical-hero-point{ display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.65rem; width:auto; max-width:640px; padding:.72rem .9rem; border:1px solid rgba(18,61,91,.1); border-radius:.65rem; background:rgba(255,255,255,.92); box-shadow:0 5px 16px rgba(13,47,72,.025); } .cervical-point-icon{ width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; color:#10a89e; } .cervical-point-icon svg{ width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .cervical-hero-point strong{ display:block; margin-bottom:.15rem; color:#153c59; font-size:.86rem; line-height:1.3; } .cervical-hero-point small{ display:block; color:#526b7d; font-size:.76rem; line-height:1.45; } /* CTA */ .cervical-hero-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-width:650px; margin-top:2rem; } .cervical-hero-actions .btn{ min-height:4.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-radius:.8rem; line-height:1.25; } .cervical-primary{ background:#087caf; } .cervical-secondary{ background:#fff; } /* IMAGEN */ .cervical-hero-visual{ min-width:0; } .cervical-image-card{ padding:1.1rem; border:1px solid rgba(18,61,91,.1); border-radius:1.25rem; background:rgba(255,255,255,.96); box-shadow: 0 24px 60px rgba(26,57,77,.09), 0 3px 10px rgba(26,57,77,.04); } .cervical-image-wrap{ overflow:hidden; border-radius:.92rem; background:#e8eef2; } .cervical-main-image{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; object-position:center; } /* BLOQUES FUNCIONALES */ .cervical-functional-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin-top:.7rem; } .cervical-functional-grid article{ min-width:0; padding:.85rem .72rem; border-radius:.65rem; background:#f0f5fd; text-align:center; } .cervical-functional-grid span{ display:block; margin-bottom:.25rem; color:#587087; font-size:.58rem; font-weight:700; letter-spacing:.02em; } .cervical-functional-grid strong{ display:block; color:#092f52; font-size:.72rem; line-height:1.3; } .cervical-functional-grid small{ display:block; margin-top:.28rem; color:#687f90; font-size:.62rem; line-height:1.35; } /* TABLET */ @media(max-width:1050px){ .cervical-hero-main{ grid-template-columns:minmax(0,.95fr) minmax(400px,1.05fr); gap:2.5rem; } .cervical-functional-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* MOBILE */ @media(max-width:800px){ .cervical-hero{ padding:2.8rem 0 3.6rem; } .cervical-hero-main{ grid-template-columns:1fr; gap:2.4rem; } .cervical-hero-copy h1{ font-size:clamp(3rem,13vw,4.8rem); } .cervical-hero-copy h1 span::after{ width:70%; } .cervical-hero-points{ align-items:stretch; } .cervical-hero-point{ width:100%; max-width:none; } .cervical-hero-actions{ grid-template-columns:1fr; max-width:none; } .cervical-hero-actions .btn{ min-height:3.8rem; } /* * En móvil la fotografía aparece después del contenido. * No se intenta reproducir el layout desktop en pequeño. */ .cervical-hero-visual{ width:100%; } } /* MOBILE ESTRECHO */ @media(max-width:520px){ .cervical-hero-eyebrow{ font-size:.62rem; } .cervical-hero-copy h1{ font-size:clamp(2.75rem,13.5vw,4.1rem); } .cervical-image-card{ padding:.7rem; border-radius:1rem; } .cervical-image-wrap{ border-radius:.7rem; } .cervical-functional-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; } .cervical-functional-grid article{ padding:.7rem .55rem; } .cervical-functional-grid strong{ font-size:.68rem; } .cervical-functional-grid small{ font-size:.59rem; } } /* === CERVICAL HERO V1 · END === */ /* === CERVICAL HERO · BOTONES V2 === */ /* PRINCIPAL — turquesa claro como estado normal */ .cervical-hero-actions .cervical-primary{ background:#69ddd1 !important; border-color:#69ddd1 !important; color:#062b4e !important; } /* HOVER */ .cervical-hero-actions .cervical-primary:hover{ background:#35cabc !important; border-color:#35cabc !important; color:#062b4e !important; } /* CLICK */ .cervical-hero-actions .cervical-primary:active{ background:#087caf !important; border-color:#087caf !important; color:#ffffff !important; transform:translateY(1px); } .cervical-hero-actions .cervical-primary span{ color:inherit !important; } /* SECUNDARIO */ .cervical-hero-actions .cervical-secondary{ background:#ffffff !important; border-color:#cbd8e2 !important; color:#123c59 !important; } .cervical-hero-actions .cervical-secondary:hover{ background:#e9f8f6 !important; border-color:#69ddd1 !important; color:#08766f !important; } .cervical-hero-actions .cervical-secondary:active{ background:#17b9ad !important; border-color:#17b9ad !important; color:#ffffff !important; transform:translateY(1px); } .cervical-hero-actions .cervical-secondary span{ color:inherit !important; } /* === FIN CERVICAL HERO · BOTONES V2 === */ /* ========================================================= CERVICAL · CONDICIONES FRECUENTES V1 ========================================================= */ .cervical-conditions{ padding:clamp(4.8rem,8vw,8rem) 0; background:#fff; } /* CABECERA */ .cervical-conditions-head{ max-width:820px; margin:0 auto clamp(2.8rem,5vw,4.2rem); text-align:center; } .cervical-conditions-head h2{ margin:.65rem 0 1rem; color:#082f50; font-size:clamp(2.65rem,4.5vw,4.6rem); line-height:.98; letter-spacing:-.052em; } .cervical-conditions-head h2 span{ display:block; color:#087ba8; } .cervical-conditions-head > p{ max-width:720px; margin:0 auto; color:#536b7c; font-size:1rem; line-height:1.7; } /* GRID */ .cervical-condition-grid{ display:grid; gap:1rem; } .cervical-condition-grid-top{ grid-template-columns:repeat(3,minmax(0,1fr)); } .cervical-condition-grid-bottom{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:calc((100% - 1rem) * .67); margin:1rem auto 0; } /* TARJETA */ .cervical-condition-card{ display:flex; flex-direction:column; min-width:0; padding:1.5rem; border:1px solid #d9e4ec; border-radius:1rem; background:#f9fbfd; box-shadow:0 6px 18px rgba(18,57,82,.025); } .cervical-condition-featured{ border-color:#77bdd7; background:#fbfdff; box-shadow: 0 12px 28px rgba(18,92,125,.07), inset 0 3px 0 #1695bd; } /* META */ .cervical-condition-meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; } .cervical-condition-number{ display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:.7rem; background:#e3f3fb; color:#087ca9; font-size:.7rem; font-weight:850; } .cervical-condition-type{ padding:.34rem .55rem; border-radius:999px; background:#edf3fa; color:#48647a; font-size:.6rem; font-weight:800; letter-spacing:.015em; } /* TÍTULOS */ .cervical-condition-card h3{ min-height:3.5rem; margin:0 0 1.4rem; color:#092f4f; font-size:1.22rem; line-height:1.12; letter-spacing:-.025em; } .cervical-condition-card h3 span{ display:block; color:#087da9; } /* CONTENIDO */ .cervical-condition-block{ margin-bottom:1.25rem; } .cervical-condition-block h4{ margin:0 0 .42rem; color:#123e5b; font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.035em; } .cervical-condition-block p, .cervical-condition-block li{ color:#526b7c; font-size:.78rem; line-height:1.58; } .cervical-condition-block p{ margin:0; } .cervical-condition-block ul{ margin:.15rem 0 0; padding-left:1.05rem; } .cervical-condition-block li + li{ margin-top:.28rem; } /* REHABME */ .cervical-rehabme-box{ margin-top:auto; padding:1rem; border:1px solid #d0e5ea; border-radius:.75rem; background:#fff; } .cervical-rehabme-box span{ display:block; margin-bottom:.4rem; color:#078e8a; font-size:.69rem; font-weight:850; } .cervical-rehabme-box p{ margin:0; color:#3f5d70; font-size:.75rem; line-height:1.52; } /* NOTA MÉDICA */ .cervical-medical-note{ display:grid; grid-template-columns:2.8rem minmax(0,1fr); gap:1rem; max-width:980px; margin:3rem auto 0; padding:1.25rem 1.4rem; border:1px solid #d8e3ea; border-radius:.9rem; background:#f7fafc; } .cervical-medical-note-mark{ display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:50%; background:#e7f3f7; color:#087da9; font-size:1rem; font-weight:900; } .cervical-medical-note span{ display:block; margin-bottom:.35rem; color:#123d59; font-size:.84rem; font-weight:850; } .cervical-medical-note p{ margin:0; color:#587080; font-size:.78rem; line-height:1.58; } /* HOVER DESKTOP */ @media(hover:hover){ .cervical-condition-card{ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .cervical-condition-card:hover{ transform:translateY(-4px); border-color:#aed5e3; box-shadow:0 16px 34px rgba(18,70,96,.075); } } /* TABLET */ @media(max-width:1000px){ .cervical-condition-grid-top{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cervical-condition-grid-bottom{ max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); } } /* MOBILE */ @media(max-width:700px){ .cervical-conditions{ padding:4.2rem 0; } .cervical-conditions-head{ text-align:left; } .cervical-condition-grid-top, .cervical-condition-grid-bottom{ grid-template-columns:1fr; } .cervical-condition-card{ padding:1.25rem; } .cervical-condition-card h3{ min-height:auto; font-size:1.2rem; } .cervical-medical-note{ grid-template-columns:1fr; } } /* ========================================================= FIN CERVICAL · CONDICIONES FRECUENTES V1 ========================================================= */ /* ========================================================= CERVICAL · TRATAMIENTO V1 ========================================================= */ .cervical-treatment{ padding:clamp(5rem,8vw,8rem) 0; background:#f7f9fc; } /* CABECERA */ .cervical-treatment-head{ max-width:840px; margin:0 auto clamp(3rem,5vw,4.5rem); text-align:center; } .cervical-treatment-head h2{ margin:.65rem 0 1rem; color:#082f50; font-size:clamp(2.65rem,4.5vw,4.6rem); line-height:.98; letter-spacing:-.052em; } .cervical-treatment-head h2 span{ display:block; color:#087ca8; } .cervical-treatment-head p{ max-width:730px; margin:0 auto; color:#536b7c; font-size:1rem; line-height:1.72; } /* GRID */ .cervical-treatment-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } /* TARJETAS */ .cervical-treatment-card{ position:relative; display:flex; flex-direction:column; min-height:390px; padding:1.5rem; border:1px solid #dce5ec; border-radius:1rem; background:#fff; } .cervical-treatment-card-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; } .cervical-treatment-number{ display:flex; align-items:center; justify-content:center; width:2.35rem; height:2.35rem; border-radius:.72rem; background:#e1f4f4; color:#078e88; font-size:.7rem; font-weight:850; } .cervical-treatment-category{ padding:.35rem .6rem; border-radius:999px; background:#eef4fa; color:#506b80; font-size:.59rem; font-weight:800; } .cervical-treatment-card h3{ margin:0 0 .75rem; color:#082f50; font-size:1.2rem; line-height:1.15; letter-spacing:-.025em; } .cervical-treatment-card > strong{ display:block; margin-bottom:1.15rem; color:#078c88; font-size:.82rem; line-height:1.4; } .cervical-treatment-card p{ margin:0; color:#566e7e; font-size:.78rem; line-height:1.62; } .cervical-treatment-card p + p{ margin-top:.9rem; } /* FRANJA INFERIOR */ .cervical-treatment-band{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,5rem); align-items:center; margin-top:2.2rem; padding:clamp(1.8rem,3vw,2.8rem); border-left:3px solid #0a9fa0; border-radius:1rem; background:#eaf3fb; } .cervical-treatment-band h3{ margin:.55rem 0 0; color:#0a3654; font-size:clamp(1.8rem,3vw,2.8rem); line-height:1; letter-spacing:-.04em; } .cervical-treatment-band h3 span{ display:block; color:#078c88; } .cervical-treatment-band p{ margin:0 0 1.3rem; color:#526c7e; font-size:.88rem; line-height:1.68; } .cervical-treatment-band .btn{ display:inline-flex; } /* HOVER DESKTOP */ @media(hover:hover){ .cervical-treatment-card{ transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .cervical-treatment-card:hover{ transform:translateY(-4px); border-color:#acd8d8; box-shadow:0 15px 32px rgba(15,75,94,.07); } } /* TABLET */ @media(max-width:1000px){ .cervical-treatment-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cervical-treatment-card{ min-height:350px; } } /* MOBILE */ @media(max-width:700px){ .cervical-treatment{ padding:4.2rem 0; } .cervical-treatment-head{ text-align:left; } .cervical-treatment-grid{ grid-template-columns:1fr; } .cervical-treatment-card{ min-height:auto; padding:1.25rem; } .cervical-treatment-band{ grid-template-columns:1fr; gap:1.5rem; } .cervical-treatment-band .btn{ width:100%; justify-content:space-between; } } /* ========================================================= FIN CERVICAL · TRATAMIENTO V1 ========================================================= */ /* === REHABME SERVICES V3 START === */ .services-v3-hero, .services-v3-section, .services-v3-orientation { --sv3-navy: #102a43; --sv3-blue: #1578a7; --sv3-cyan: #42b8c7; --sv3-paper: #f5f8fc; --sv3-soft: #eaf2fb; --sv3-line: rgba(16,42,67,.12); --sv3-muted: #5d6d7d; } /* --------------------------------------------------------- GENERAL --------------------------------------------------------- */ .services-v3-kicker, .services-v3-dark-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .services-v3-kicker { color: var(--sv3-blue); } .services-v3-kicker::before, .services-v3-dark-kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; } .services-v3-section { padding: clamp(76px,8vw,120px) 0; } .services-v3-section-head { max-width: 760px; margin-bottom: 48px; } .services-v3-section-head.centered { text-align: center; margin-left: auto; margin-right: auto; } .services-v3-section-head h2 { margin: 16px 0 18px; font-size: clamp(36px,4vw,62px); line-height: .98; letter-spacing: -.045em; color: var(--sv3-navy); } .services-v3-section-head h2 span { color: var(--sv3-blue); } .services-v3-section-head p { max-width: 700px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--sv3-muted); } /* --------------------------------------------------------- HERO --------------------------------------------------------- */ .services-v3-hero { padding: clamp(64px,7vw,108px) 0 70px; background: radial-gradient(circle at 80% 20%, rgba(66,184,199,.14), transparent 35%), #f4f7fc; } .services-v3-hero-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(320px,.72fr); gap: clamp(50px,7vw,100px); align-items: center; } .services-v3-hero-copy h1 { max-width: 900px; margin: 18px 0 26px; color: var(--sv3-navy); font-size: clamp(48px,5.4vw,78px); line-height: .96; letter-spacing: -.055em; } .services-v3-hero-copy h1 span { display: block; color: var(--sv3-blue); } .services-v3-hero-lead { max-width: 760px; margin-bottom: 14px; color: var(--sv3-navy); font-size: clamp(18px,1.6vw,22px); line-height: 1.6; } .services-v3-hero-copy > p:not(.services-v3-hero-lead) { max-width: 680px; color: var(--sv3-muted); line-height: 1.7; } .services-v3-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 30px 0; } .services-v3-inline-link { color: var(--sv3-navy); font-weight: 750; text-decoration: none; } .services-v3-inline-link span { color: var(--sv3-blue); margin-left: 5px; } .services-v3-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; } .services-v3-hero-pills span { padding: 8px 11px; border: 1px solid rgba(21,120,167,.14); border-radius: 7px; background: white; box-shadow: 0 3px 10px rgba(16,42,67,.04); font-size: 12px; font-weight: 750; color: var(--sv3-navy); } .services-v3-hero-panel { position: relative; padding: 34px; border: 1px solid rgba(16,42,67,.09); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 18px 50px rgba(16,42,67,.08); } .services-v3-panel-label { color: var(--sv3-blue); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .services-v3-panel-icon { margin-top: 24px; } .services-v3-panel-icon .services-v2-icon { width: 48px; height: 48px; } .services-v3-hero-panel h2 { margin: 18px 0; font-size: 30px; line-height: 1.06; letter-spacing: -.035em; color: var(--sv3-navy); } .services-v3-hero-panel h2 span { display: block; color: var(--sv3-blue); } .services-v3-hero-panel > p { color: var(--sv3-muted); line-height: 1.65; } .services-v3-panel-metrics { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--sv3-line); } .services-v3-panel-metrics div { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--sv3-line); } .services-v3-panel-metrics span { color: var(--sv3-blue); font-size: 12px; font-weight: 850; } .services-v3-panel-metrics strong { color: var(--sv3-navy); font-size: 14px; } /* --------------------------------------------------------- CATÁLOGO --------------------------------------------------------- */ .services-v3-catalog { background: white; } .services-v3-catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .services-v3-service-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(16,42,67,.05); transition: transform .25s ease, box-shadow .25s ease; } .services-v3-service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 46px rgba(16,42,67,.10); } .services-v3-card-media { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: var(--sv3-soft); } .services-v3-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .services-v3-service-card:hover .services-v3-card-media img { transform: scale(1.025); } .services-v3-card-number { position: absolute; right: 14px; top: 14px; min-width: 42px; padding: 8px 10px; border-radius: 7px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); color: var(--sv3-navy); font-size: 12px; font-weight: 850; text-align: center; } .services-v3-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; } .services-v3-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .services-v3-card-top .services-v2-icon { width: 42px; height: 42px; } .services-v3-card-type { padding: 6px 8px; border-radius: 6px; background: var(--sv3-soft); color: var(--sv3-blue); font-size: 10px; font-weight: 750; } .services-v3-service-card h3 { margin: 0 0 12px; color: var(--sv3-navy); font-size: 23px; line-height: 1.15; letter-spacing: -.025em; } .services-v3-service-card p { margin: 0 0 20px; color: var(--sv3-muted); line-height: 1.65; } .services-v3-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .services-v3-card-tags span { padding: 5px 8px; border-radius: 5px; background: var(--sv3-soft); color: var(--sv3-navy); font-size: 10px; font-weight: 750; } .services-v3-card-link { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sv3-line); color: var(--sv3-blue); font-weight: 780; text-decoration: none; } /* --------------------------------------------------------- PUNTO DE PARTIDA --------------------------------------------------------- */ .services-v3-start { background: #f5f8fc; } .services-v3-start-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .services-v3-start-card { position: relative; min-height: 330px; padding: 32px; border: 1px solid var(--sv3-line); border-radius: 16px; background: white; display: flex; flex-direction: column; } .services-v3-start-number { color: var(--sv3-blue); font-size: 13px; font-weight: 850; } .services-v3-start-card h3 { margin: 42px 0 16px; color: var(--sv3-navy); font-size: 27px; line-height: 1.1; letter-spacing: -.03em; } .services-v3-start-card p { color: var(--sv3-muted); line-height: 1.65; } .services-v3-start-card a { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--sv3-line); color: var(--sv3-blue); text-decoration: none; font-weight: 780; display: flex; justify-content: space-between; } /* --------------------------------------------------------- PROCESO --------------------------------------------------------- */ .services-v3-process { background: white; } .services-v3-process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; } .services-v3-process-card { min-height: 300px; padding: 28px; border: 1px solid var(--sv3-line); border-radius: 15px; background: #fff; } .services-v3-process-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; } .services-v3-process-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sv3-navy); color: white; font-weight: 850; } .services-v3-process-card:nth-child(even) .services-v3-process-number { background: var(--sv3-blue); } .services-v3-process-top small { padding: 5px 7px; border-radius: 5px; background: var(--sv3-soft); color: var(--sv3-blue); font-size: 9px; font-weight: 800; } .services-v3-process-card h3 { margin: 38px 0 15px; font-size: 23px; line-height: 1.15; color: var(--sv3-navy); } .services-v3-process-card p { color: var(--sv3-muted); line-height: 1.65; } .services-v3-process-statement { display: grid; grid-template-columns: 180px 1fr; gap: 30px; align-items: center; margin-top: 28px; padding: 26px 30px; border-left: 4px solid var(--sv3-blue); background: var(--sv3-soft); } .services-v3-process-statement span { color: var(--sv3-blue); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; } .services-v3-process-statement strong { color: var(--sv3-navy); font-size: 20px; line-height: 1.4; } /* --------------------------------------------------------- CONTINUIDAD + APP --------------------------------------------------------- */ .services-v3-continuity { background: #eef4fd; } .services-v3-continuity-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; margin-bottom: 48px; } .services-v3-continuity-head h2 { margin: 16px 0 0; color: var(--sv3-navy); font-size: clamp(38px,4vw,60px); line-height: 1; letter-spacing: -.045em; } .services-v3-continuity-head h2 span { display: block; color: var(--sv3-blue); } .services-v3-continuity-head > p { margin: 0; color: var(--sv3-muted); line-height: 1.7; } .services-v3-continuity-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; } .services-v3-continuity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .services-v3-continuity-grid article { padding: 26px; border: 1px solid var(--sv3-line); border-radius: 14px; background: white; } .services-v3-continuity-grid article > span { color: var(--sv3-blue); font-size: 12px; font-weight: 850; } .services-v3-continuity-grid h3 { margin: 25px 0 12px; color: var(--sv3-navy); font-size: 21px; line-height: 1.18; } .services-v3-continuity-grid p { color: var(--sv3-muted); line-height: 1.6; } .services-v3-app-feature { background: var(--sv3-navy) !important; } .services-v3-app-feature h3, .services-v3-app-feature p { color: white !important; } .services-v3-app-feature > span, .services-v3-app-feature a { color: #69d5df !important; } .services-v3-app-feature a { display: inline-flex; gap: 15px; margin-top: 8px; text-decoration: none; font-weight: 800; } .services-v3-app-visual { position: relative; overflow: hidden; min-height: 560px; border-radius: 18px; background: var(--sv3-navy); display: flex; align-items: flex-end; justify-content: center; } .services-v3-app-label { position: absolute; z-index: 3; top: 20px; left: 20px; padding: 7px 10px; border-radius: 6px; background: rgba(255,255,255,.12); color: white; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .services-v3-app-visual img { position: absolute; z-index: 1; top: 72px; left: 50%; width: min(72%,310px); max-height: 440px; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 24px 30px rgba(0,0,0,.25)); } .services-v3-app-caption { position: relative; z-index: 2; width: 100%; padding: 80px 28px 28px; color: white; background: linear-gradient(to top,var(--sv3-navy) 45%,transparent); } .services-v3-app-caption strong { font-size: 21px; } .services-v3-app-caption p { margin-bottom: 0; color: #c4d6e3; } /* --------------------------------------------------------- ORIENTACIÓN --------------------------------------------------------- */ .services-v3-orientation { padding: clamp(76px,8vw,110px) 0; background: #0e263d; } .services-v3-orientation-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px,8vw,110px); align-items: center; } .services-v3-dark-kicker { color: #6cd4df; } .services-v3-orientation-copy h2 { margin: 18px 0 22px; color: white; font-size: clamp(40px,4.5vw,64px); line-height: .98; letter-spacing: -.045em; } .services-v3-orientation-copy h2 span { display: block; color: #62cbd6; } .services-v3-orientation-copy p { max-width: 580px; color: #c4d6e3; font-size: 17px; line-height: 1.7; } .services-v3-orientation-options { display: grid; gap: 12px; } .services-v3-orientation-option { display: grid; grid-template-columns: 44px 1fr 30px; gap: 18px; align-items: center; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: white; text-decoration: none; background: rgba(255,255,255,.05); transition: background .2s ease, transform .2s ease; } .services-v3-orientation-option:hover { background: rgba(255,255,255,.09); transform: translateX(3px); } .services-v3-orientation-option.is-primary { background: #1578a7; border-color: #1578a7; } .services-v3-orientation-option > span { color: #6cd4df; font-size: 12px; font-weight: 850; } .services-v3-orientation-option.is-primary > span { color: white; } .services-v3-orientation-option strong, .services-v3-orientation-option small { display: block; } .services-v3-orientation-option strong { font-size: 17px; } .services-v3-orientation-option small { margin-top: 4px; color: #c4d6e3; line-height: 1.45; } .services-v3-orientation-option.is-primary small { color: rgba(255,255,255,.85); } .services-v3-orientation-option i { font-style: normal; text-align: right; } /* --------------------------------------------------------- FAQ --------------------------------------------------------- */ .services-v3-faq { background: #f5f8fc; } .services-v3-faq-wrap { max-width: 960px; } .services-v3-faq-list { display: grid; gap: 12px; } .services-v3-faq-list details { overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: white; } .services-v3-faq-list summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 24px; cursor: pointer; color: var(--sv3-navy); font-weight: 800; font-size: 17px; list-style: none; } .services-v3-faq-list summary::-webkit-details-marker { display: none; } .services-v3-faq-list summary span { color: var(--sv3-blue); font-size: 22px; } .services-v3-faq-list details[open] summary span { transform: rotate(45deg); } .services-v3-faq-list details p { margin: 0; padding: 0 24px 24px; max-width: 800px; color: var(--sv3-muted); line-height: 1.7; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 980px) { .services-v3-hero-grid, .services-v3-continuity-layout, .services-v3-orientation-grid { grid-template-columns: 1fr; } .services-v3-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .services-v3-process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .services-v3-continuity-head { grid-template-columns: 1fr; gap: 20px; } .services-v3-app-visual { min-height: 520px; } } @media (max-width: 720px) { .services-v3-hero { padding-top: 46px; } .services-v3-hero-copy h1 { font-size: clamp(42px,13vw,58px); } .services-v3-hero-panel { padding: 25px; } .services-v3-catalog-grid, .services-v3-start-grid, .services-v3-process-grid, .services-v3-continuity-grid { grid-template-columns: 1fr; } .services-v3-section { padding: 70px 0; } .services-v3-start-card { min-height: 280px; } .services-v3-process-statement { grid-template-columns: 1fr; gap: 10px; } .services-v3-app-visual { min-height: 500px; } .services-v3-orientation-option { grid-template-columns: 32px 1fr 20px; padding: 18px; } .services-v3-faq-list summary { padding: 19px; font-size: 15px; } .services-v3-faq-list details p { padding: 0 19px 20px; } } /* === REHABME SERVICES V3 END === */ /* === REHABME SERVICES V3 MODALITIES START === */ .services-v3-modalities { background: #ffffff; } .services-v3-modalities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 1080px; margin: 0 auto; } .services-v3-modality-card { display: flex; flex-direction: column; min-height: 560px; padding: 34px; border: 1px solid rgba(16,42,67,.12); border-radius: 17px; background: #f7f9fd; box-shadow: 0 8px 30px rgba(16,42,67,.04); } .services-v3-modality-card.is-primary { border-color: rgba(21,120,167,.34); background: linear-gradient( 180deg, rgba(234,242,251,.85) 0%, #f8fbfe 100% ); box-shadow: 0 15px 40px rgba(21,120,167,.08); } .services-v3-modality-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .services-v3-modality-number { color: #1578a7; font-size: 12px; font-weight: 850; letter-spacing: .07em; } .services-v3-modality-label { padding: 6px 9px; border-radius: 6px; background: #eaf2fb; color: #1578a7; font-size: 10px; font-weight: 800; } .services-v3-modality-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 25px; border-radius: 12px; background: #dceafd; color: #1578a7; } .services-v3-modality-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .services-v3-modality-card h3 { margin: 0 0 10px; color: #102a43; font-size: 30px; line-height: 1.08; letter-spacing: -.035em; } .services-v3-modality-subtitle { display: block; margin-bottom: 16px; color: #1578a7; font-size: 15px; line-height: 1.45; } .services-v3-modality-card > p { margin: 0 0 26px; color: #5d6d7d; font-size: 16px; line-height: 1.7; } .services-v3-modality-list { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; } .services-v3-modality-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; color: #334e68; font-size: 14px; line-height: 1.5; } .services-v3-modality-list li span { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1px solid #1578a7; border-radius: 50%; color: #1578a7; font-size: 11px; font-weight: 850; } .services-v3-modality-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; padding: 15px 18px; border-radius: 8px; background: #1578a7; color: white; text-decoration: none; font-weight: 800; transition: transform .2s ease, background .2s ease; } .services-v3-modality-cta:hover { transform: translateY(-2px); background: #102a43; } .services-v3-modality-cta.secondary { border: 1px solid rgba(21,120,167,.16); background: #e3eefc; color: #102a43; } .services-v3-modality-cta.secondary:hover { background: #d4e6f8; } @media (max-width: 800px) { .services-v3-modalities-grid { grid-template-columns: 1fr; } .services-v3-modality-card { min-height: auto; padding: 28px; } .services-v3-modality-card h3 { font-size: 27px; } } /* === REHABME SERVICES V3 MODALITIES END === */ /* ========================================================= EXPLORA TU DOLOR · PRINCIPAL V2 ========================================================= */ .explore-v2-hero{ padding:72px 0 90px; background: linear-gradient(135deg,#f8fbfd 0%,#eef5fa 100%); } .explore-v2-hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:70px; align-items:center; } .explore-v2-kicker{ display:inline-flex; align-items:center; gap:9px; padding:7px 13px; margin-bottom:26px; border:1px solid #cfe0eb; border-radius:999px; color:var(--blue); background:white; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .explore-v2-hero h1{ max-width:720px; font-size:clamp(3.2rem,5.8vw,5.8rem); } .explore-v2-hero h1 span, .explore-v2-section-head h2 span, .explore-v2-origin h2 span, .explore-v2-rae h2 span, .explore-v2-final h2 span{ color:var(--blue); } .explore-v2-lead{ max-width:680px; font-size:1.3rem; color:var(--ink); } .explore-v2-hero-copy>p:not(.explore-v2-lead){ max-width:670px; color:var(--muted); } .explore-v2-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .explore-v2-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); } .explore-v2-trust div{ display:flex; flex-direction:column; gap:2px; } .explore-v2-trust strong{ color:var(--blue); font-size:1.2rem; } .explore-v2-trust span{ color:var(--muted); font-size:.78rem; } .explore-v2-hero-note{ padding:46px; border-radius:28px; background:var(--navy); color:white; box-shadow:0 24px 60px rgba(16,42,67,.15); } .explore-v2-hero-note>span{ display:block; margin-bottom:26px; color:var(--mint); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; } .explore-v2-hero-note h2{ font-size:clamp(2.1rem,3vw,3rem); } .explore-v2-hero-note p{ color:#d5e2eb; } .explore-v2-hero-note small{ display:block; padding-top:20px; border-top:1px solid #38566c; color:#a9c0d0; } /* MAPA */ .explore-v2-map-section{ padding:105px 0; background:#fff; } .explore-v2-section-head{ max-width:820px; margin-bottom:55px; } .explore-v2-section-head h2{ max-width:800px; } .explore-v2-section-head p{ max-width:720px; color:var(--muted); } .explore-v2-map-layout{ display:grid; grid-template-columns:.82fr 1.18fr; gap:36px; align-items:stretch; } .explore-v2-body-panel{ padding:30px; border:1px solid var(--line); border-radius:26px; background:var(--paper); } .explore-v2-body-label{ display:flex; align-items:center; gap:9px; margin-bottom:20px; color:var(--blue); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .explore-v2-body-label span{ width:8px; height:8px; border-radius:50%; background:var(--mint); } .explore-v2-body-map{ position:relative; max-width:400px; margin:auto; overflow:hidden; border-radius:160px 160px 24px 24px; background:#18354c; } .explore-v2-body-map img{ width:100%; aspect-ratio:1/2; object-fit:cover; } .explore-v2-hotspot{ position:absolute; display:flex; align-items:center; justify-content:center; width:38px; height:38px; transform:translate(-50%,-50%); border:3px solid white; border-radius:50%; background:var(--mint); color:var(--deep); box-shadow:0 0 0 7px rgba(57,219,197,.18); font-size:.78rem; font-weight:800; text-decoration:none; } .explore-v2-hotspot:hover{ background:white; box-shadow:0 0 0 10px rgba(57,219,197,.35); } .explore-v2-body-panel>p{ margin:24px 0 0; color:var(--muted); font-size:.82rem; } .explore-v2-map-zones{ padding:38px; border:1px solid var(--line); border-radius:26px; } .explore-v2-map-zones h3{ max-width:570px; margin-bottom:25px; font-size:2.1rem; } .explore-v2-zone-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; } .explore-v2-zone-list a{ display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; min-height:70px; border-bottom:1px solid var(--line); text-decoration:none; } .explore-v2-zone-list a:hover{ color:var(--blue); } .explore-v2-zone-index{ color:var(--blue); font-size:.76rem; font-weight:700; } .explore-v2-zone-list strong{ font-size:.96rem; } .explore-v2-map-help{ margin-top:32px; padding:24px; border-radius:18px; background:#edf5ff; } .explore-v2-map-help strong{ display:block; margin-bottom:8px; } .explore-v2-map-help p{ margin-bottom:12px; color:var(--muted); font-size:.92rem; } .explore-v2-map-help a{ color:var(--blue); font-weight:700; text-decoration:none; } /* CATÁLOGO */ .explore-v2-catalog{ padding:105px 0; background:var(--paper); } .explore-v2-section-centered{ margin-inline:auto; text-align:center; } .explore-v2-section-centered p{ margin-inline:auto; } .explore-v2-zone-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .explore-v2-zone-card{ display:flex; flex-direction:column; min-height:330px; padding:27px; border:1px solid var(--line); border-radius:20px; background:white; color:var(--ink); text-decoration:none; transition:transform .2s,border-color .2s,box-shadow .2s; } .explore-v2-zone-card:hover{ transform:translateY(-5px); border-color:#6ca4c9; box-shadow:0 16px 36px rgba(16,42,67,.08); } .explore-v2-zone-number{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:34px; border-radius:13px; background:#e9f2ff; color:var(--blue); font-size:.8rem; font-weight:800; } .explore-v2-zone-copy>span{ color:var(--blue); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .explore-v2-zone-copy h3{ margin:8px 0 13px; font-size:1.4rem; } .explore-v2-zone-copy p{ color:var(--muted); font-size:.9rem; line-height:1.55; } .explore-v2-zone-link{ display:flex; justify-content:space-between; gap:15px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); color:var(--blue); font-size:.85rem; font-weight:700; } /* PRINCIPIO */ .explore-v2-origin{ padding:105px 0; background:white; } .explore-v2-origin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:85px; } .explore-v2-origin h2{ max-width:580px; } .explore-v2-origin-copy>p{ color:var(--muted); font-size:1.08rem; } .explore-v2-origin-rule{ display:grid; grid-template-columns:50px 1fr; gap:18px; margin-top:35px; padding-top:28px; border-top:1px solid var(--line); } .explore-v2-origin-rule>span{ color:var(--blue); font-weight:800; } .explore-v2-origin-rule strong{ font-size:1.1rem; } .explore-v2-origin-rule p{ margin:6px 0 0; color:var(--muted); } /* RAE */ .explore-v2-rae{ padding:30px 0 105px; background:white; } .explore-v2-rae-panel{ display:grid; grid-template-columns:1fr .95fr; gap:60px; align-items:center; padding:62px; border-radius:30px; background:var(--navy); color:white; box-shadow:0 24px 55px rgba(8,31,51,.14); } .explore-v2-rae-pill{ display:inline-block; margin-bottom:25px; padding:7px 12px; border:1px solid #4d7188; border-radius:999px; color:var(--mint); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .explore-v2-rae h2{ max-width:610px; } .explore-v2-rae h2 span{ color:var(--mint); } .explore-v2-rae-lead{ color:white !important; font-size:1.25rem; font-weight:700; } .explore-v2-rae-copy>p{ max-width:610px; color:#c9d9e5; } .explore-v2-rae-copy ul{ display:grid; gap:8px; margin:25px 0; padding:0; list-style:none; } .explore-v2-rae-copy li{ position:relative; padding-left:25px; color:#d7e4ed; } .explore-v2-rae-copy li:before{ content:'✓'; position:absolute; left:0; color:var(--mint); font-weight:800; } .explore-v2-rae-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:32px; } .explore-v2-rae-actions small{ color:#a9c1d0; } .explore-v2-rae-window{ padding:28px; border-radius:22px; background:white; color:var(--ink); } .explore-v2-rae-window-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); } .explore-v2-rae-window-head>div{ display:flex; align-items:center; gap:10px; } .explore-v2-rae-window-head span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--blue); color:white; font-size:.7rem; font-weight:800; } .explore-v2-rae-window-head small{ color:var(--muted); } .explore-v2-rae-step{ display:grid; grid-template-columns:38px 1fr; gap:15px; margin-top:28px; } .explore-v2-rae-step-number{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#e7f1ff; color:var(--blue); font-weight:800; } .explore-v2-rae-step small{ color:var(--blue); font-weight:700; } .explore-v2-rae-step h3{ margin:5px 0 20px; font-size:1.25rem; } .explore-v2-rae-options{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .explore-v2-rae-options span{ padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:.8rem; } .explore-v2-rae-progress{ height:5px; margin-top:24px; overflow:hidden; border-radius:999px; background:#e5edf3; } .explore-v2-rae-progress span{ display:block; width:28%; height:100%; background:var(--blue); } .explore-v2-rae-window>p{ margin:13px 0 0; color:var(--muted); font-size:.76rem; } /* SEGURIDAD */ .explore-v2-safety{ padding:90px 0; background:#f7f9fb; } .explore-v2-safety-box{ display:grid; grid-template-columns:70px 1fr; gap:28px; padding:40px; border:1px solid #efc6c6; border-radius:22px; background:#fffafa; } .explore-v2-safety-icon{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:#ffe2e2; color:#a52222; font-size:1.5rem; font-weight:800; } .explore-v2-safety .eyebrow{ margin-bottom:12px; color:#a52222; } .explore-v2-safety h2{ max-width:850px; font-size:2rem; } .explore-v2-safety p{ max-width:950px; color:var(--muted); } .explore-v2-safety-note{ margin-bottom:0; font-size:.86rem; } /* FINAL */ .explore-v2-final{ padding:105px 0; background:white; } .explore-v2-final-grid{ display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; } .explore-v2-final-grid p{ color:var(--muted); font-size:1.08rem; } /* RESPONSIVE */ @media(max-width:1000px){ .explore-v2-hero-grid, .explore-v2-map-layout, .explore-v2-origin-grid, .explore-v2-rae-panel, .explore-v2-final-grid{ grid-template-columns:1fr; } .explore-v2-zone-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .explore-v2-hero-note{ max-width:720px; } } @media(max-width:700px){ .explore-v2-hero{ padding:45px 0 65px; } .explore-v2-hero h1{ font-size:clamp(2.8rem,13vw,4rem); } .explore-v2-trust{ grid-template-columns:1fr; gap:15px; } .explore-v2-hero-note, .explore-v2-map-zones, .explore-v2-rae-panel{ padding:28px; } .explore-v2-zone-list{ grid-template-columns:1fr; } .explore-v2-zone-grid{ grid-template-columns:1fr; } .explore-v2-zone-card{ min-height:280px; } .explore-v2-safety-box{ grid-template-columns:1fr; padding:28px; } .explore-v2-rae-options{ grid-template-columns:1fr; } } /* ========================================================= EXPLORA TU DOLOR · AJUSTE MAPA CORPORAL 08 SEP 2026 ========================================================= */ /* Contenedor general izquierdo: limpio y blanco */ .explore-v2-body-panel{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px; } /* Elimina completamente el arco anterior */ .explore-v2-body-map{ position:relative; width:100%; max-width:430px; margin:0 auto; overflow:hidden; border:1px solid #e1e8ee; border-radius:16px; background:#fff; } /* Mostrar la ilustración completa, sin recortar */ .explore-v2-body-map img{ display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; object-position:center; } /* Hotspots mucho más discretos */ .explore-v2-hotspot{ width:24px; height:24px; border:2px solid rgba(255,255,255,.95); border-radius:50%; background:rgba(57,219,197,.92); color:#0b3242; box-shadow: 0 0 0 3px rgba(57,219,197,.12), 0 2px 6px rgba(16,42,67,.12); font-size:.58rem; font-weight:800; transform:translate(-50%,-50%); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } /* Hover también sutil */ .explore-v2-hotspot:hover{ background:#fff; color:var(--blue); box-shadow: 0 0 0 4px rgba(57,219,197,.18), 0 3px 8px rgba(16,42,67,.14); transform:translate(-50%,-50%) scale(1.08); } /* Texto inferior un poco más integrado */ .explore-v2-body-panel>p{ margin:18px 4px 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; line-height:1.5; } /* Móvil */ @media(max-width:700px){ .explore-v2-body-panel{ padding:18px; } .explore-v2-body-map{ max-width:100%; border-radius:14px; } .explore-v2-hotspot{ width:21px; height:21px; font-size:.52rem; border-width:1.5px; } } /* ========================================================= CONÓCENOS · V2 ========================================================= */ .conoce-v2-hero, .conoce-v2-section, .conoce-v2-app, .conoce-v2-final{ --cv2-navy:#102a43; --cv2-blue:#1578a7; --cv2-mint:#39dbc5; --cv2-soft:#eef4fc; --cv2-paper:#f6f8fc; --cv2-muted:#5d6d7d; --cv2-line:rgba(16,42,67,.12); } /* GENERAL */ .conoce-v2-kicker, .conoce-v2-app-kicker, .conoce-v2-final-kicker{ display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; color:var(--cv2-blue); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; } .conoce-v2-kicker:before, .conoce-v2-app-kicker:before, .conoce-v2-final-kicker:before{ content:""; width:18px; height:2px; background:currentColor; } .conoce-v2-section{ padding:105px 0; } .conoce-v2-section-head{ max-width:780px; margin-bottom:52px; } .conoce-v2-section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; } .conoce-v2-section-head h2, .conoce-v2-professional-head h2{ font-size:clamp(2.7rem,4vw,4.1rem); } .conoce-v2-section-head h2 span, .conoce-v2-professional-head h2 span, .conoce-v2-space h2 span, .conoce-v2-app h2 span, .conoce-v2-final h2 span{ color:var(--cv2-blue); } .conoce-v2-section-head p{ max-width:700px; color:var(--cv2-muted); } .conoce-v2-section-head.centered p{ margin-inline:auto; } /* HERO */ .conoce-v2-hero{ padding:65px 0 0; background:#f5f8fd; } .conoce-v2-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; } .conoce-v2-hero-copy h1{ max-width:800px; font-size:clamp(3rem,5vw,5rem); } .conoce-v2-hero-copy h1 span{ display:block; color:var(--cv2-blue); } .conoce-v2-lead{ max-width:690px; font-size:1.24rem; color:var(--cv2-navy); } .conoce-v2-hero-copy>p:not(.conoce-v2-lead){ max-width:680px; color:var(--cv2-muted); } .conoce-v2-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .conoce-v2-hero-visual{ position:relative; overflow:hidden; border-radius:24px; min-height:470px; background:#dfe9f1; } .conoce-v2-hero-image{ width:100%; height:100%; min-height:470px; object-fit:cover; } .conoce-v2-hero-caption{ position:absolute; left:22px; right:22px; bottom:22px; padding:18px 20px; border-radius:15px; background:rgba(16,42,67,.92); color:white; } .conoce-v2-hero-caption span{ display:block; margin-bottom:4px; color:var(--cv2-mint); font-size:.72rem; font-weight:800; text-transform:uppercase; } .conoce-v2-hero-caption strong{ font-size:1rem; } .conoce-v2-principles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:64px; padding:30px 0 38px; border-top:1px solid var(--cv2-line); } .conoce-v2-principles article{ display:grid; grid-template-columns:40px 1fr; gap:3px 12px; } .conoce-v2-principles span{ grid-row:1/3; color:var(--cv2-blue); font-size:.75rem; font-weight:850; } .conoce-v2-principles strong{ color:var(--cv2-navy); font-size:.92rem; } .conoce-v2-principles small{ color:var(--cv2-muted); line-height:1.4; } /* FILOSOFÍA */ .conoce-v2-philosophy{ background:#edf3fc; } .conoce-v2-philosophy-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .conoce-v2-philosophy-grid article{ display:flex; flex-direction:column; min-height:390px; padding:34px; border:1px solid var(--cv2-line); border-radius:18px; background:white; } .conoce-v2-card-top{ margin-bottom:36px; } .conoce-v2-card-top span{ display:grid; place-items:center; width:44px; height:44px; border-radius:11px; background:#eaf2ff; color:var(--cv2-blue); font-size:.78rem; font-weight:850; } .conoce-v2-philosophy-grid h3{ font-size:1.55rem; } .conoce-v2-philosophy-grid p{ color:var(--cv2-muted); } .conoce-v2-card-footer{ display:block; margin-top:auto; padding-top:20px; border-top:1px solid var(--cv2-line); color:#148e82; font-size:.83rem; } /* PROFESIONAL */ .conoce-v2-professional{ background:white; } .conoce-v2-professional-head{ display:grid; grid-template-columns:1.1fr .7fr; gap:60px; align-items:end; margin-bottom:46px; } .conoce-v2-professional-head p{ margin:0; color:var(--cv2-muted); } .conoce-v2-profile{ display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; padding:46px; border:1px solid var(--cv2-line); border-radius:22px; background:#f8fafc; } .conoce-v2-profile-identity{ display:flex; align-items:center; gap:24px; } .conoce-v2-profile-mark{ display:grid; place-items:center; flex:0 0 115px; width:115px; height:115px; border-radius:50%; background:var(--cv2-navy); color:white; font-size:2rem; font-weight:700; } .conoce-v2-profile-identity small{ color:var(--cv2-blue); text-transform:uppercase; font-weight:800; } .conoce-v2-profile-identity h3{ margin:7px 0 4px; font-size:2rem; } .conoce-v2-profile-identity strong{ color:var(--cv2-blue); } .conoce-v2-profile-copy{ padding-left:45px; border-left:1px solid var(--cv2-line); } .conoce-v2-profile-copy p{ color:var(--cv2-muted); } .conoce-v2-profile-copy .lead{ color:var(--cv2-navy); } .conoce-v2-profile-copy a{ display:inline-flex; gap:15px; color:var(--cv2-blue); font-weight:800; text-decoration:none; } /* ESPACIO */ .conoce-v2-space{ background:#edf3fc; } .conoce-v2-space-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:22px; } .conoce-v2-space-main, .conoce-v2-space-side article{ overflow:hidden; border:1px solid var(--cv2-line); border-radius:20px; background:white; } .conoce-v2-space-main{ display:flex; flex-direction:column; } .conoce-v2-space-main img{ width:100%; aspect-ratio:16/9; object-fit:cover; } .conoce-v2-space-content, .conoce-v2-space-side article>div{ padding:28px; } .conoce-v2-space-content span, .conoce-v2-space-side span{ color:var(--cv2-blue); font-size:.72rem; font-weight:800; text-transform:uppercase; } .conoce-v2-space-content h3, .conoce-v2-space-side h3{ margin:10px 0 12px; } .conoce-v2-space-content p, .conoce-v2-space-side p{ margin-bottom:0; color:var(--cv2-muted); } .conoce-v2-space-side{ display:grid; gap:22px; } .conoce-v2-space-side article{ display:grid; grid-template-columns:180px 1fr; } .conoce-v2-space-side img{ width:100%; height:100%; object-fit:cover; } /* VALORACIÓN */ .conoce-v2-assessment{ background:white; } .conoce-v2-assessment-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .conoce-v2-assessment-grid article{ min-height:260px; padding:28px; border:1px solid var(--cv2-line); border-radius:17px; } .conoce-v2-assessment-grid span{ color:var(--cv2-blue); font-size:.76rem; font-weight:850; } .conoce-v2-assessment-grid h3{ margin:40px 0 14px; } .conoce-v2-assessment-grid p{ margin:0; color:var(--cv2-muted); } .conoce-v2-assessment-statement{ display:grid; grid-template-columns:160px 1fr; gap:25px; align-items:center; margin-top:25px; padding:28px; border-left:4px solid var(--cv2-blue); background:#eaf2fd; } .conoce-v2-assessment-statement span{ color:var(--cv2-blue); font-size:.75rem; font-weight:850; text-transform:uppercase; } .conoce-v2-assessment-statement strong{ color:var(--cv2-navy); font-size:1.45rem; } /* PROCESO */ .conoce-v2-process{ background:#edf3fc; } .conoce-v2-process-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .conoce-v2-process-grid article{ min-height:350px; padding:29px; border:1px solid var(--cv2-line); border-radius:17px; background:white; } .conoce-v2-process-number{ display:grid; place-items:center; width:42px; height:42px; margin-bottom:28px; border-radius:50%; background:var(--cv2-navy); color:white; font-weight:850; } .conoce-v2-process-grid article:nth-child(even) .conoce-v2-process-number{ background:var(--cv2-blue); } .conoce-v2-process-grid small{ color:var(--cv2-blue); font-size:.7rem; font-weight:800; text-transform:uppercase; } .conoce-v2-process-grid h3{ margin:10px 0 16px; font-size:1.42rem; } .conoce-v2-process-grid p{ color:var(--cv2-muted); } /* APP */ .conoce-v2-app{ padding:105px 0; background:var(--cv2-navy); color:white; } .conoce-v2-app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .conoce-v2-app-kicker{ color:var(--cv2-mint); } .conoce-v2-app h2{ font-size:clamp(2.8rem,4vw,4.3rem); } .conoce-v2-app h2 span{ display:block; color:var(--cv2-mint); } .conoce-v2-app p{ max-width:650px; color:#c7d7e3; } .conoce-v2-app .lead{ color:white; } .conoce-v2-app-features{ display:flex; flex-wrap:wrap; gap:8px; margin:30px 0; } .conoce-v2-app-features span{ padding:8px 11px; border:1px solid #49677d; border-radius:999px; color:#d6e4ed; font-size:.76rem; } .conoce-v2-app-grid>div>a{ color:var(--cv2-mint); font-weight:800; text-decoration:none; } /* FINAL */ .conoce-v2-final{ padding:95px 0; background:white; } .conoce-v2-final-panel{ display:grid; grid-template-columns:1.2fr .8fr; gap:70px; padding:55px; border-radius:28px; background:var(--cv2-navy); color:white; } .conoce-v2-final-kicker{ color:var(--cv2-mint); } .conoce-v2-final h2{ max-width:720px; font-size:clamp(2.7rem,4vw,4rem); } .conoce-v2-final h2 span{ display:block; color:var(--cv2-mint); } .conoce-v2-final p{ max-width:650px; color:#c6d7e3; } .conoce-v2-final-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .conoce-v2-final .btn.secondary{ color:white; border-color:#617b8e; } .conoce-v2-contact{ display:flex; flex-direction:column; justify-content:center; padding-left:45px; border-left:1px solid #3b566b; } .conoce-v2-contact>span{ margin-bottom:18px; color:var(--cv2-mint); font-size:.75rem; font-weight:800; text-transform:uppercase; } .conoce-v2-contact strong{ font-size:1.2rem; line-height:1.6; } .conoce-v2-contact a{ margin:20px 0 10px; color:white; font-size:1.6rem; font-weight:700; text-decoration:none; } .conoce-v2-contact small{ color:#aebfcb; } /* RESPONSIVE */ @media(max-width:1000px){ .conoce-v2-hero-grid, .conoce-v2-professional-head, .conoce-v2-profile, .conoce-v2-space-grid, .conoce-v2-app-grid, .conoce-v2-final-panel{ grid-template-columns:1fr; } .conoce-v2-principles, .conoce-v2-assessment-grid, .conoce-v2-process-grid{ grid-template-columns:repeat(2,1fr); } .conoce-v2-profile-copy, .conoce-v2-contact{ padding-left:0; padding-top:30px; border-left:0; border-top:1px solid var(--cv2-line); } .conoce-v2-final .conoce-v2-contact{ border-top-color:#3b566b; } } @media(max-width:700px){ .conoce-v2-section, .conoce-v2-app{ padding:72px 0; } .conoce-v2-hero{ padding-top:45px; } .conoce-v2-principles, .conoce-v2-philosophy-grid, .conoce-v2-assessment-grid, .conoce-v2-process-grid{ grid-template-columns:1fr; } .conoce-v2-space-side article{ grid-template-columns:1fr; } .conoce-v2-space-side img{ height:220px; } .conoce-v2-profile{ padding:28px; } .conoce-v2-profile-identity{ align-items:flex-start; } .conoce-v2-profile-mark{ flex-basis:80px; width:80px; height:80px; font-size:1.4rem; } .conoce-v2-assessment-statement{ grid-template-columns:1fr; } .conoce-v2-final-panel{ padding:30px; } } /* ========================================================= FIN CONÓCENOS V2 ========================================================= */ /* ========================================================= CONTACTO · V2 ========================================================= */ .contact-v2-hero, .contact-v2-section, .contact-v2-meet, .contact-v2-final{ --ct-navy:#102a43; --ct-blue:#1578a7; --ct-mint:#39dbc5; --ct-soft:#eaf2fc; --ct-paper:#f5f8fc; --ct-muted:#5d6d7d; --ct-line:rgba(16,42,67,.12); } /* GENERAL */ .contact-v2-kicker, .contact-v2-final-kicker{ display:inline-flex; align-items:center; gap:9px; margin-bottom:19px; color:var(--ct-blue); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; } .contact-v2-kicker:before, .contact-v2-final-kicker:before{ content:""; width:18px; height:2px; background:currentColor; } .contact-v2-section{ padding:100px 0; } .contact-v2-section-head{ max-width:780px; margin-bottom:48px; } .contact-v2-section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; } .contact-v2-section-head h2{ font-size:clamp(2.6rem,4vw,4rem); } .contact-v2-section-head h2 span{ color:var(--ct-blue); } .contact-v2-section-head p{ max-width:700px; color:var(--ct-muted); } .contact-v2-section-head.centered p{ margin-inline:auto; } /* HERO */ .contact-v2-hero{ padding:68px 0 86px; background:#f2f6fc; } .contact-v2-hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; } .contact-v2-hero-copy h1{ max-width:790px; font-size:clamp(3.1rem,5vw,5rem); } .contact-v2-hero-copy h1 span{ display:block; color:var(--ct-blue); } .contact-v2-lead{ max-width:690px; color:var(--ct-navy); font-size:1.23rem; } .contact-v2-hero-copy>p:not(.contact-v2-lead){ color:var(--ct-muted); } .contact-v2-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .contact-v2-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; } .contact-v2-pills span{ padding:7px 10px; border:1px solid var(--ct-line); border-radius:999px; background:white; color:var(--ct-navy); font-size:.75rem; font-weight:700; } .contact-v2-hero-card{ padding:35px; border:1px solid var(--ct-line); border-radius:20px; background:white; box-shadow:0 18px 45px rgba(16,42,67,.07); } .contact-v2-hero-card>span{ color:var(--ct-blue); font-size:.73rem; font-weight:800; text-transform:uppercase; } .contact-v2-hero-card h2{ margin:14px 0 28px; font-size:2rem; } .contact-v2-hero-detail{ padding:17px 0; border-top:1px solid var(--ct-line); } .contact-v2-hero-detail small{ display:block; color:var(--ct-muted); } .contact-v2-hero-detail strong, .contact-v2-hero-detail a{ display:block; margin-top:5px; color:var(--ct-navy); font-weight:700; text-decoration:none; } .contact-v2-map-link{ display:flex; justify-content:space-between; gap:15px; margin-top:22px; padding:14px 16px; border-radius:8px; background:var(--ct-blue); color:white; text-decoration:none; font-weight:750; } /* CANALES */ .contact-v2-channels{ background:white; } .contact-v2-channel-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .contact-v2-channel-card{ display:flex; flex-direction:column; min-height:360px; padding:26px; border:1px solid var(--ct-line); border-radius:17px; background:#fff; } .contact-v2-channel-card.is-featured{ border-color:rgba(21,120,167,.38); background:#f6fbff; } .contact-v2-channel-icon{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:27px; border-radius:11px; background:var(--ct-soft); color:var(--ct-blue); } .contact-v2-channel-icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .contact-v2-channel-card>span{ color:var(--ct-blue); font-size:.7rem; font-weight:800; text-transform:uppercase; } .contact-v2-channel-card h3{ margin:8px 0 12px; font-size:1.4rem; } .contact-v2-email{ font-size:1rem !important; overflow-wrap:anywhere; } .contact-v2-channel-card p{ color:var(--ct-muted); font-size:.9rem; } .contact-v2-channel-card small{ margin-bottom:18px; color:var(--ct-muted); font-size:.72rem; } .contact-v2-channel-card>a{ display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:17px; border-top:1px solid var(--ct-line); color:var(--ct-blue); text-decoration:none; font-weight:750; font-size:.86rem; } /* VISITA */ .contact-v2-visit{ background:#edf3fc; } .contact-v2-visit-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch; } .contact-v2-booking, .contact-v2-location{ padding:40px; border:1px solid var(--ct-line); border-radius:20px; background:white; } .contact-v2-booking h2{ font-size:clamp(2.5rem,3.5vw,3.7rem); } .contact-v2-booking h2 span{ color:var(--ct-blue); } .contact-v2-booking>p{ color:var(--ct-muted); } .contact-v2-booking-steps{ margin-top:34px; } .contact-v2-booking-steps article{ display:grid; grid-template-columns:50px 1fr; gap:16px; padding:22px 0; border-top:1px solid var(--ct-line); } .contact-v2-booking-steps article>span{ color:var(--ct-blue); font-size:.75rem; font-weight:850; } .contact-v2-booking-steps h3{ margin-bottom:7px; font-size:1.12rem; } .contact-v2-booking-steps p{ margin:0; color:var(--ct-muted); font-size:.9rem; } .contact-v2-booking-actions{ margin-top:28px; } .contact-v2-booking-actions>p{ margin:15px 0 0; color:var(--ct-muted); font-size:.82rem; } .contact-v2-booking-actions p a{ color:var(--ct-blue); font-weight:700; } .contact-v2-location{ display:flex; flex-direction:column; } .contact-v2-location-head h3{ margin:5px 0 28px; font-size:2rem; } .contact-v2-location-head h3 span{ display:block; margin-top:5px; color:var(--ct-blue); font-size:1.3rem; } .contact-v2-location-block{ padding:24px 0; border-top:1px solid var(--ct-line); } .contact-v2-location-block>span{ display:block; margin-bottom:13px; color:var(--ct-blue); font-size:.72rem; font-weight:800; text-transform:uppercase; } .contact-v2-location-block dl{ display:grid; grid-template-columns:1fr auto; gap:14px; margin:0; } .contact-v2-location-block dt, .contact-v2-location-block dd{ margin:0; } .contact-v2-location-block dd{ text-align:right; font-weight:700; } .contact-v2-location-block p{ margin:0; color:var(--ct-muted); font-size:.9rem; } .contact-v2-location-cta{ display:flex; justify-content:space-between; gap:15px; margin-top:auto; padding:15px 17px; border-radius:8px; background:var(--ct-blue); color:white; text-decoration:none; font-weight:750; } /* MODALIDADES */ .contact-v2-modalities{ background:white; } .contact-v2-modality-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1080px; margin:auto; } .contact-v2-modality-card{ display:flex; flex-direction:column; min-height:510px; padding:34px; border:1px solid var(--ct-line); border-radius:18px; background:#f8fafc; } .contact-v2-modality-card.is-primary{ border-color:rgba(21,120,167,.36); background:#f3f8ff; } .contact-v2-modality-number{ color:var(--ct-blue); font-size:.76rem; font-weight:850; } .contact-v2-modality-icon{ display:grid; place-items:center; width:50px; height:50px; margin:26px 0; border-radius:12px; background:#dceafd; color:var(--ct-blue); } .contact-v2-modality-icon svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .contact-v2-modality-card h3{ font-size:1.75rem; } .contact-v2-modality-card p{ color:var(--ct-muted); } .contact-v2-modality-card ul{ display:grid; gap:10px; padding-left:20px; color:#334e68; } .contact-v2-modality-card>a{ display:flex; justify-content:space-between; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--ct-line); color:var(--ct-blue); text-decoration:none; font-weight:750; } /* PREPARA VISITA */ .contact-v2-prepare{ background:#edf3fc; } .contact-v2-prepare-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .contact-v2-prepare-grid article{ min-height:280px; padding:29px; border:1px solid var(--ct-line); border-radius:17px; background:white; } .contact-v2-prepare-grid article>span{ color:var(--ct-blue); font-size:.75rem; font-weight:850; } .contact-v2-prepare-grid h3{ margin:38px 0 13px; } .contact-v2-prepare-grid p{ color:var(--ct-muted); } .contact-v2-prepare-grid small{ color:var(--ct-muted); } .contact-v2-prepare-statement{ display:grid; grid-template-columns:170px 1fr; gap:25px; align-items:center; margin-top:24px; padding:27px; border-left:4px solid var(--ct-blue); background:#fff; } .contact-v2-prepare-statement span{ color:var(--ct-blue); font-size:.72rem; font-weight:850; text-transform:uppercase; } .contact-v2-prepare-statement strong{ color:var(--ct-navy); font-size:1.3rem; } /* CONOCE */ .contact-v2-meet{ padding:65px 0; background:white; } .contact-v2-meet-panel{ display:flex; justify-content:space-between; align-items:center; gap:50px; padding:38px; border:1px solid var(--ct-line); border-radius:20px; background:#f6f9fd; } .contact-v2-meet h2{ margin-bottom:12px; font-size:2rem; } .contact-v2-meet p{ max-width:680px; margin:0; color:var(--ct-muted); } .contact-v2-meet .btn{ flex-shrink:0; } /* FAQ */ .contact-v2-faq{ background:#edf3fc; } .contact-v2-faq-wrap{ max-width:960px; } .contact-v2-faq-list{ display:grid; gap:12px; } .contact-v2-faq-list details{ overflow:hidden; border:1px solid var(--ct-line); border-radius:12px; background:white; } .contact-v2-faq-list summary{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 24px; cursor:pointer; color:var(--ct-navy); font-size:1rem; font-weight:750; list-style:none; } .contact-v2-faq-list summary::-webkit-details-marker{ display:none; } .contact-v2-faq-list summary span{ color:var(--ct-blue); font-size:1.3rem; } .contact-v2-faq-list details[open] summary span{ transform:rotate(45deg); } .contact-v2-faq-list details p{ max-width:800px; margin:0; padding:0 24px 24px; color:var(--ct-muted); } /* FINAL */ .contact-v2-final{ padding:90px 0; background:white; } .contact-v2-final-panel{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; padding:52px; border-radius:28px; background:var(--ct-navy); color:white; } .contact-v2-final-kicker{ color:var(--ct-mint); } .contact-v2-final h2{ font-size:clamp(2.7rem,4vw,4rem); } .contact-v2-final h2 span{ display:block; color:var(--ct-mint); } .contact-v2-final p{ color:#c7d7e3; } .contact-v2-final-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; } .contact-v2-final .btn.secondary{ color:white; border-color:#607c90; } .contact-v2-final-data{ display:flex; flex-direction:column; justify-content:center; padding-left:42px; border-left:1px solid #3c586d; } .contact-v2-final-data strong{ line-height:1.6; } .contact-v2-final-data a{ margin-top:16px; color:white; text-decoration:none; overflow-wrap:anywhere; } .contact-v2-final-data a:first-of-type{ color:var(--ct-mint); font-size:1.4rem; font-weight:800; } /* RESPONSIVE */ @media(max-width:1000px){ .contact-v2-hero-grid, .contact-v2-visit-grid, .contact-v2-final-panel{ grid-template-columns:1fr; } .contact-v2-channel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .contact-v2-final-data{ padding-left:0; padding-top:28px; border-left:0; border-top:1px solid #3c586d; } } @media(max-width:700px){ .contact-v2-section{ padding:72px 0; } .contact-v2-hero{ padding:45px 0 65px; } .contact-v2-channel-grid, .contact-v2-modality-grid, .contact-v2-prepare-grid{ grid-template-columns:1fr; } .contact-v2-booking, .contact-v2-location, .contact-v2-hero-card{ padding:27px; } .contact-v2-meet-panel{ flex-direction:column; align-items:flex-start; padding:28px; } .contact-v2-prepare-statement{ grid-template-columns:1fr; } .contact-v2-final-panel{ padding:30px; } } /* ========================================================= FIN CONTACTO V2 ========================================================= */ /* ========================================================= CONTACTO · V2 ========================================================= */ .contact-v2-hero, .contact-v2-section, .contact-v2-meet, .contact-v2-final{ --ct-navy:#102a43; --ct-blue:#1578a7; --ct-mint:#39dbc5; --ct-soft:#eaf2fc; --ct-paper:#f5f8fc; --ct-muted:#5d6d7d; --ct-line:rgba(16,42,67,.12); } /* GENERAL */ .contact-v2-kicker, .contact-v2-final-kicker{ display:inline-flex; align-items:center; gap:9px; margin-bottom:19px; color:var(--ct-blue); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; } .contact-v2-kicker:before, .contact-v2-final-kicker:before{ content:""; width:18px; height:2px; background:currentColor; } .contact-v2-section{ padding:100px 0; } .contact-v2-section-head{ max-width:780px; margin-bottom:48px; } .contact-v2-section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; } .contact-v2-section-head h2{ font-size:clamp(2.6rem,4vw,4rem); } .contact-v2-section-head h2 span{ color:var(--ct-blue); } .contact-v2-section-head p{ max-width:700px; color:var(--ct-muted); } .contact-v2-section-head.centered p{ margin-inline:auto; } /* HERO */ .contact-v2-hero{ padding:68px 0 86px; background:#f2f6fc; } .contact-v2-hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; } .contact-v2-hero-copy h1{ max-width:790px; font-size:clamp(3.1rem,5vw,5rem); } .contact-v2-hero-copy h1 span{ display:block; color:var(--ct-blue); } .contact-v2-lead{ max-width:690px; color:var(--ct-navy); font-size:1.23rem; } .contact-v2-hero-copy>p:not(.contact-v2-lead){ color:var(--ct-muted); } .contact-v2-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .contact-v2-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; } .contact-v2-pills span{ padding:7px 10px; border:1px solid var(--ct-line); border-radius:999px; background:white; color:var(--ct-navy); font-size:.75rem; font-weight:700; } .contact-v2-hero-card{ padding:35px; border:1px solid var(--ct-line); border-radius:20px; background:white; box-shadow:0 18px 45px rgba(16,42,67,.07); } .contact-v2-hero-card>span{ color:var(--ct-blue); font-size:.73rem; font-weight:800; text-transform:uppercase; } .contact-v2-hero-card h2{ margin:14px 0 28px; font-size:2rem; } .contact-v2-hero-detail{ padding:17px 0; border-top:1px solid var(--ct-line); } .contact-v2-hero-detail small{ display:block; color:var(--ct-muted); } .contact-v2-hero-detail strong, .contact-v2-hero-detail a{ display:block; margin-top:5px; color:var(--ct-navy); font-weight:700; text-decoration:none; } .contact-v2-map-link{ display:flex; justify-content:space-between; gap:15px; margin-top:22px; padding:14px 16px; border-radius:8px; background:var(--ct-blue); color:white; text-decoration:none; font-weight:750; } /* CANALES */ .contact-v2-channels{ background:white; } .contact-v2-channel-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .contact-v2-channel-card{ display:flex; flex-direction:column; min-height:360px; padding:26px; border:1px solid var(--ct-line); border-radius:17px; background:#fff; } .contact-v2-channel-card.is-featured{ border-color:rgba(21,120,167,.38); background:#f6fbff; } .contact-v2-channel-icon{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:27px; border-radius:11px; background:var(--ct-soft); color:var(--ct-blue); } .contact-v2-channel-icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .contact-v2-channel-card>span{ color:var(--ct-blue); font-size:.7rem; font-weight:800; text-transform:uppercase; } .contact-v2-channel-card h3{ margin:8px 0 12px; font-size:1.4rem; } .contact-v2-email{ font-size:1rem !important; overflow-wrap:anywhere; } .contact-v2-channel-card p{ color:var(--ct-muted); font-size:.9rem; } .contact-v2-channel-card small{ margin-bottom:18px; color:var(--ct-muted); font-size:.72rem; } .contact-v2-channel-card>a{ display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:17px; border-top:1px solid var(--ct-line); color:var(--ct-blue); text-decoration:none; font-weight:750; font-size:.86rem; } /* VISITA */ .contact-v2-visit{ background:#edf3fc; } .contact-v2-visit-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch; } .contact-v2-booking, .contact-v2-location{ padding:40px; border:1px solid var(--ct-line); border-radius:20px; background:white; } .contact-v2-booking h2{ font-size:clamp(2.5rem,3.5vw,3.7rem); } .contact-v2-booking h2 span{ color:var(--ct-blue); } .contact-v2-booking>p{ color:var(--ct-muted); } .contact-v2-booking-steps{ margin-top:34px; } .contact-v2-booking-steps article{ display:grid; grid-template-columns:50px 1fr; gap:16px; padding:22px 0; border-top:1px solid var(--ct-line); } .contact-v2-booking-steps article>span{ color:var(--ct-blue); font-size:.75rem; font-weight:850; } .contact-v2-booking-steps h3{ margin-bottom:7px; font-size:1.12rem; } .contact-v2-booking-steps p{ margin:0; color:var(--ct-muted); font-size:.9rem; } .contact-v2-booking-actions{ margin-top:28px; } .contact-v2-booking-actions>p{ margin:15px 0 0; color:var(--ct-muted); font-size:.82rem; } .contact-v2-booking-actions p a{ color:var(--ct-blue); font-weight:700; } .contact-v2-location{ display:flex; flex-direction:column; } .contact-v2-location-head h3{ margin:5px 0 28px; font-size:2rem; } .contact-v2-location-head h3 span{ display:block; margin-top:5px; color:var(--ct-blue); font-size:1.3rem; } .contact-v2-location-block{ padding:24px 0; border-top:1px solid var(--ct-line); } .contact-v2-location-block>span{ display:block; margin-bottom:13px; color:var(--ct-blue); font-size:.72rem; font-weight:800; text-transform:uppercase; } .contact-v2-location-block dl{ display:grid; grid-template-columns:1fr auto; gap:14px; margin:0; } .contact-v2-location-block dt, .contact-v2-location-block dd{ margin:0; } .contact-v2-location-block dd{ text-align:right; font-weight:700; } .contact-v2-location-block p{ margin:0; color:var(--ct-muted); font-size:.9rem; } .contact-v2-location-cta{ display:flex; justify-content:space-between; gap:15px; margin-top:auto; padding:15px 17px; border-radius:8px; background:var(--ct-blue); color:white; text-decoration:none; font-weight:750; } /* MODALIDADES */ .contact-v2-modalities{ background:white; } .contact-v2-modality-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1080px; margin:auto; } .contact-v2-modality-card{ display:flex; flex-direction:column; min-height:510px; padding:34px; border:1px solid var(--ct-line); border-radius:18px; background:#f8fafc; } .contact-v2-modality-card.is-primary{ border-color:rgba(21,120,167,.36); background:#f3f8ff; } .contact-v2-modality-number{ color:var(--ct-blue); font-size:.76rem; font-weight:850; } .contact-v2-modality-icon{ display:grid; place-items:center; width:50px; height:50px; margin:26px 0; border-radius:12px; background:#dceafd; color:var(--ct-blue); } .contact-v2-modality-icon svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .contact-v2-modality-card h3{ font-size:1.75rem; } .contact-v2-modality-card p{ color:var(--ct-muted); } .contact-v2-modality-card ul{ display:grid; gap:10px; padding-left:20px; color:#334e68; } .contact-v2-modality-card>a{ display:flex; justify-content:space-between; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--ct-line); color:var(--ct-blue); text-decoration:none; font-weight:750; } /* PREPARA VISITA */ .contact-v2-prepare{ background:#edf3fc; } .contact-v2-prepare-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .contact-v2-prepare-grid article{ min-height:280px; padding:29px; border:1px solid var(--ct-line); border-radius:17px; background:white; } .contact-v2-prepare-grid article>span{ color:var(--ct-blue); font-size:.75rem; font-weight:850; } .contact-v2-prepare-grid h3{ margin:38px 0 13px; } .contact-v2-prepare-grid p{ color:var(--ct-muted); } .contact-v2-prepare-grid small{ color:var(--ct-muted); } .contact-v2-prepare-statement{ display:grid; grid-template-columns:170px 1fr; gap:25px; align-items:center; margin-top:24px; padding:27px; border-left:4px solid var(--ct-blue); background:#fff; } .contact-v2-prepare-statement span{ color:var(--ct-blue); font-size:.72rem; font-weight:850; text-transform:uppercase; } .contact-v2-prepare-statement strong{ color:var(--ct-navy); font-size:1.3rem; } /* CONOCE */ .contact-v2-meet{ padding:65px 0; background:white; } .contact-v2-meet-panel{ display:flex; justify-content:space-between; align-items:center; gap:50px; padding:38px; border:1px solid var(--ct-line); border-radius:20px; background:#f6f9fd; } .contact-v2-meet h2{ margin-bottom:12px; font-size:2rem; } .contact-v2-meet p{ max-width:680px; margin:0; color:var(--ct-muted); } .contact-v2-meet .btn{ flex-shrink:0; } /* FAQ */ .contact-v2-faq{ background:#edf3fc; } .contact-v2-faq-wrap{ max-width:960px; } .contact-v2-faq-list{ display:grid; gap:12px; } .contact-v2-faq-list details{ overflow:hidden; border:1px solid var(--ct-line); border-radius:12px; background:white; } .contact-v2-faq-list summary{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 24px; cursor:pointer; color:var(--ct-navy); font-size:1rem; font-weight:750; list-style:none; } .contact-v2-faq-list summary::-webkit-details-marker{ display:none; } .contact-v2-faq-list summary span{ color:var(--ct-blue); font-size:1.3rem; } .contact-v2-faq-list details[open] summary span{ transform:rotate(45deg); } .contact-v2-faq-list details p{ max-width:800px; margin:0; padding:0 24px 24px; color:var(--ct-muted); } /* FINAL */ .contact-v2-final{ padding:90px 0; background:white; } .contact-v2-final-panel{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; padding:52px; border-radius:28px; background:var(--ct-navy); color:white; } .contact-v2-final-kicker{ color:var(--ct-mint); } .contact-v2-final h2{ font-size:clamp(2.7rem,4vw,4rem); } .contact-v2-final h2 span{ display:block; color:var(--ct-mint); } .contact-v2-final p{ color:#c7d7e3; } .contact-v2-final-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; } .contact-v2-final .btn.secondary{ color:white; border-color:#607c90; } .contact-v2-final-data{ display:flex; flex-direction:column; justify-content:center; padding-left:42px; border-left:1px solid #3c586d; } .contact-v2-final-data strong{ line-height:1.6; } .contact-v2-final-data a{ margin-top:16px; color:white; text-decoration:none; overflow-wrap:anywhere; } .contact-v2-final-data a:first-of-type{ color:var(--ct-mint); font-size:1.4rem; font-weight:800; } /* RESPONSIVE */ @media(max-width:1000px){ .contact-v2-hero-grid, .contact-v2-visit-grid, .contact-v2-final-panel{ grid-template-columns:1fr; } .contact-v2-channel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .contact-v2-final-data{ padding-left:0; padding-top:28px; border-left:0; border-top:1px solid #3c586d; } } @media(max-width:700px){ .contact-v2-section{ padding:72px 0; } .contact-v2-hero{ padding:45px 0 65px; } .contact-v2-channel-grid, .contact-v2-modality-grid, .contact-v2-prepare-grid{ grid-template-columns:1fr; } .contact-v2-booking, .contact-v2-location, .contact-v2-hero-card{ padding:27px; } .contact-v2-meet-panel{ flex-direction:column; align-items:flex-start; padding:28px; } .contact-v2-prepare-statement{ grid-template-columns:1fr; } .contact-v2-final-panel{ padding:30px; } } /* ========================================================= FIN CONTACTO V2 ========================================================= */ /* ========================================================= REHABME · HEADER FLOATING / GLASS Estado inicial integrado → estado flotante al hacer scroll ========================================================= */ /* --------------------------------------------------------- CONTENEDOR GENERAL --------------------------------------------------------- */ .header.header-clean{ position:sticky; top:0; z-index:1000; width:100%; background:transparent; transition: padding .35s ease, background .35s ease; } /* --------------------------------------------------------- FILA PRINCIPAL · ESTADO INICIAL --------------------------------------------------------- */ .header.header-clean .header-row{ width:100%; max-width:none; min-height:84px; margin:0 auto; padding:10px clamp(22px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:28px; background:transparent; border:1px solid transparent; border-radius:0; box-shadow:none; transition: width .42s cubic-bezier(.2,.8,.2,1), max-width .42s cubic-bezier(.2,.8,.2,1), min-height .35s ease, margin .42s cubic-bezier(.2,.8,.2,1), padding .35s ease, border-radius .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; } /* --------------------------------------------------------- LOGO --------------------------------------------------------- */ .header.header-clean .brand{ display:flex; align-items:center; flex-shrink:0; } .header.header-clean .brand img{ display:block; width:auto; height:58px; transition: height .35s ease, transform .35s ease; } /* --------------------------------------------------------- NAVEGACIÓN --------------------------------------------------------- */ .header.header-clean .nav-clean{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(15px,1.7vw,28px); margin-left:auto; } .header.header-clean .nav-clean > a:not(.header-cta){ position:relative; padding:10px 0; white-space:nowrap; transition: opacity .25s ease, color .25s ease, transform .25s ease; } .header.header-clean .nav-clean > a:not(.header-cta):hover{ transform:translateY(-1px); } /* --------------------------------------------------------- CTA --------------------------------------------------------- */ .header.header-clean .header-cta{ white-space:nowrap; transition: padding .35s ease, border-radius .35s ease, transform .25s ease; } /* ========================================================= ESTADO DESPRENDIDO ========================================================= */ .header.header-clean.is-scrolled{ padding-top:12px; pointer-events:none; } .header.header-clean.is-scrolled .header-row{ width:calc(100% - 36px); max-width:1240px; min-height:66px; margin:0 auto; padding:7px 12px 7px 18px; background: linear-gradient( 135deg, rgba(247,251,255,.80), rgba(235,244,250,.68) ); border:1px solid rgba(255,255,255,.72); border-radius:18px; box-shadow: 0 10px 34px rgba(15,42,67,.10), inset 0 1px 0 rgba(255,255,255,.65); -webkit-backdrop-filter:blur(18px) saturate(145%); backdrop-filter:blur(18px) saturate(145%); pointer-events:auto; } /* Logo compacto */ .header.header-clean.is-scrolled .brand img{ height:47px; } /* Navegación un poco más compacta */ .header.header-clean.is-scrolled .nav-clean{ gap:clamp(12px,1.35vw,23px); } .header.header-clean.is-scrolled .nav-clean > a:not(.header-cta){ font-size:.92rem; } /* CTA compacto */ .header.header-clean.is-scrolled .header-cta{ padding:11px 17px; border-radius:12px; } /* ========================================================= EFECTO DE SEPARACIÓN REAL ========================================================= */ .header.header-clean.is-scrolled::before{ content:""; position:absolute; inset:0; background: linear-gradient( to bottom, rgba(255,255,255,.03), rgba(255,255,255,0) ); pointer-events:none; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:900px){ .header.header-clean{ padding:0; } /* Estado inicial */ .header.header-clean .header-row{ position:relative; min-height:74px; padding:8px 18px; } .header.header-clean .brand img{ height:48px; } /* Botón menú */ .header.header-clean .menu-button{ position:relative; z-index:10; display:flex; align-items:center; gap:7px; flex-shrink:0; } /* Estado flotante móvil */ .header.header-clean.is-scrolled{ padding-top:10px; } .header.header-clean.is-scrolled .header-row{ width:calc(100% - 22px); max-width:none; min-height:60px; padding:6px 8px 6px 14px; border-radius:16px; background: linear-gradient( 135deg, rgba(249,252,255,.84), rgba(233,243,250,.76) ); box-shadow: 0 9px 30px rgba(15,42,67,.12), inset 0 1px 0 rgba(255,255,255,.75); } .header.header-clean.is-scrolled .brand img{ height:42px; } /* ------------------------------------------------------- MENÚ DESPLEGABLE Se desprende del mismo contenedor glass ------------------------------------------------------- */ .header.header-clean .nav-clean{ position:absolute; top:calc(100% + 8px); left:0; right:0; width:100%; margin:0; padding:12px; flex-direction:column; align-items:stretch; gap:3px; border-radius:16px; background: rgba(248,251,254,.95); border:1px solid rgba(16,42,67,.08); box-shadow: 0 14px 40px rgba(15,42,67,.13); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); } .header.header-clean.is-scrolled .nav-clean{ background: rgba(246,251,254,.91); border-color: rgba(255,255,255,.70); } .header.header-clean .nav-clean > a:not(.header-cta){ width:100%; padding:12px 13px; border-radius:9px; font-size:.94rem; } .header.header-clean .nav-clean > a:not(.header-cta):hover{ transform:none; background: rgba(21,120,167,.07); } .header.header-clean .header-cta{ width:100%; margin-top:5px; text-align:center; justify-content:center; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media(max-width:520px){ .header.header-clean .header-row{ padding-left:14px; padding-right:14px; } .header.header-clean.is-scrolled .header-row{ width:calc(100% - 16px); } .header.header-clean .brand img{ height:45px; } .header.header-clean.is-scrolled .brand img{ height:40px; } } /* ========================================================= USUARIOS QUE PREFIEREN MENOS MOVIMIENTO ========================================================= */ @media(prefers-reduced-motion:reduce){ .header.header-clean, .header.header-clean .header-row, .header.header-clean .brand img, .header.header-clean .nav-clean, .header.header-clean .header-cta{ transition:none !important; } } /* ========================================================= FIN HEADER FLOATING ========================================================= */ /* ========================================================= REHABME · HEADER FLOATING V2 Corrección estructural ========================================================= */ /* --------------------------------------------------------- 1. EL HEADER EXTERIOR NUNCA TIENE FONDO Y NUNCA DESAPARECE --------------------------------------------------------- */ html body .header.header-clean{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; margin:0 !important; padding:0 !important; background:transparent !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; transform:none !important; translate:none !important; opacity:1 !important; visibility:visible !important; z-index:1000 !important; pointer-events:none; transition:none !important; } /* Neutralizar cualquier pseudo fondo anterior */ html body .header.header-clean::before, html body .header.header-clean::after{ background:transparent !important; box-shadow:none !important; border:0 !important; pointer-events:none; } /* --------------------------------------------------------- 2. ESTADO INICIAL Integrado visualmente a la página --------------------------------------------------------- */ html body .header.header-clean .header-row{ position:relative; width:100% !important; max-width:none !important; min-height:94px; margin:0 auto !important; padding: 12px clamp(28px,4.5vw,86px) !important; background:transparent !important; background-color:transparent !important; border:1px solid transparent !important; border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; transform:none !important; pointer-events:auto; transition: width .38s cubic-bezier(.2,.8,.2,1), max-width .38s cubic-bezier(.2,.8,.2,1), min-height .30s ease, padding .30s ease, border-radius .30s ease, background .30s ease, border-color .30s ease, box-shadow .30s ease, backdrop-filter .30s ease !important; } /* --------------------------------------------------------- 3. AL HACER SCROLL: header fijo y transparente --------------------------------------------------------- */ html body .header.header-clean.is-scrolled{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; padding:14px 0 0 !important; background:transparent !important; transform:none !important; translate:none !important; opacity:1 !important; visibility:visible !important; pointer-events:none; } /* --------------------------------------------------------- 4. SOLO LA FILA SE CONVIERTE EN GLASS --------------------------------------------------------- */ html body .header.header-clean.is-scrolled .header-row{ width:calc(100% - 48px) !important; max-width:1485px !important; min-height:70px; margin:0 auto !important; padding:7px 14px 7px 22px !important; background: linear-gradient( 110deg, rgba(244,249,252,.82), rgba(229,239,245,.72) ) !important; border: 1px solid rgba(255,255,255,.70) !important; border-radius:20px !important; box-shadow: 0 12px 34px rgba(10,35,55,.13), inset 0 1px 0 rgba(255,255,255,.74) !important; -webkit-backdrop-filter: blur(18px) saturate(145%) !important; backdrop-filter: blur(18px) saturate(145%) !important; transform:none !important; pointer-events:auto; } /* --------------------------------------------------------- 5. LOGO --------------------------------------------------------- */ html body .header.header-clean .brand img{ width:auto !important; height:58px; transition: height .30s ease !important; } html body .header.header-clean.is-scrolled .brand img{ height:48px; } /* --------------------------------------------------------- 6. NAVEGACIÓN --------------------------------------------------------- */ html body .header.header-clean .nav-clean{ background:transparent !important; box-shadow:none !important; } html body .header.header-clean.is-scrolled .nav-clean{ background:transparent !important; } /* --------------------------------------------------------- 7. NEUTRALIZAR CUALQUIER SISTEMA ANTERIOR DE OCULTAR HEADER AL BAJAR --------------------------------------------------------- */ html body .header.header-clean, html body .header.header-clean.is-scrolled, html body .header.header-clean.header-hidden, html body .header.header-clean.is-hidden, html body .header.header-clean.hidden, html body .header.header-clean.hide, html body .header.header-clean.nav-up, html body .header.header-clean.scroll-down{ transform:none !important; translate:none !important; opacity:1 !important; visibility:visible !important; } /* --------------------------------------------------------- 8. MOBILE --------------------------------------------------------- */ @media(max-width:900px){ html body .header.header-clean .header-row{ min-height:76px; padding: 8px 16px !important; } html body .header.header-clean .brand img{ height:48px; } html body .header.header-clean.is-scrolled{ padding-top:9px !important; } html body .header.header-clean.is-scrolled .header-row{ width:calc(100% - 18px) !important; min-height:61px; padding: 6px 8px 6px 14px !important; border-radius:17px !important; } html body .header.header-clean.is-scrolled .brand img{ height:40px; } /* * El desplegable debe salir de la cápsula, * no crear una barra blanca de ancho completo. */ html body .header.header-clean .nav-clean{ background: rgba(246,250,253,.96) !important; border: 1px solid rgba(255,255,255,.70); box-shadow: 0 14px 36px rgba(12,39,59,.14) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important; } } /* --------------------------------------------------------- 9. MOBILE PEQUEÑO --------------------------------------------------------- */ @media(max-width:520px){ html body .header.header-clean.is-scrolled .header-row{ width:calc(100% - 12px) !important; } } /* ========================================================= FIN HEADER FLOATING V2 ========================================================= */ /* ========================================================= REHABME · HEADER COLORS Blanco inicial → color original en glass ========================================================= */ /* --------------------------------------------------------- ESTADO INICIAL Logo y navegación blancos --------------------------------------------------------- */ html body .header.header-clean:not(.is-scrolled) .brand img{ filter: brightness(0) invert(1) !important; } html body .header.header-clean:not(.is-scrolled) .nav-clean > a:not(.header-cta){ color:#ffffff !important; } html body .header.header-clean:not(.is-scrolled) .nav-clean > a:not(.header-cta):hover{ color:#ffffff !important; opacity:.78; } html body .header.header-clean:not(.is-scrolled) .nav-clean > a[aria-current="page"]:not(.header-cta){ color:#ffffff !important; } /* --------------------------------------------------------- ESTADO GLASS Regresa al color original --------------------------------------------------------- */ html body .header.header-clean.is-scrolled .brand img{ filter:none !important; } html body .header.header-clean.is-scrolled .nav-clean > a:not(.header-cta){ color:#29495b !important; } html body .header.header-clean.is-scrolled .nav-clean > a:not(.header-cta):hover{ color:#1578a7 !important; opacity:1; } html body .header.header-clean.is-scrolled .nav-clean > a[aria-current="page"]:not(.header-cta){ color:#1578a7 !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:900px){ /* * El botón "Menú" también blanco mientras * está integrado sobre fondo oscuro. */ html body .header.header-clean:not(.is-scrolled) .menu-button{ color:#ffffff !important; } /* * Al entrar el glass recupera el tono oscuro. */ html body .header.header-clean.is-scrolled .menu-button{ color:#29495b !important; } /* * El desplegable siempre tiene fondo claro, * por lo que sus enlaces deben permanecer oscuros * incluso antes del primer scroll. */ html body .header.header-clean .nav-clean > a:not(.header-cta){ color:#29495b !important; } } /* ========================================================= FIN HEADER COLORS ========================================================= */ /* ========================================================= REHABME · MOBILE MENU STATE FIX ========================================================= */ @media(max-width:900px){ /* * Cerrado por defecto. */ html body .header.header-clean .nav-clean{ display:none !important; } /* * Solo abre cuando el botón declara aria-expanded=true. */ html body .header.header-clean .menu-button[aria-expanded="true"] + .nav-clean{ display:flex !important; } /* * Mantener el desplegable como panel independiente * debajo de la barra. */ html body .header.header-clean .nav-clean{ position:absolute !important; top:calc(100% + 8px) !important; left:0 !important; right:0 !important; width:100% !important; margin:0 !important; padding:12px !important; flex-direction:column !important; align-items:stretch !important; border-radius:16px !important; background: rgba(246,250,253,.96) !important; border: 1px solid rgba(255,255,255,.7) !important; box-shadow: 0 14px 36px rgba(12,39,59,.14) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important; } /* * Los enlaces del menú deben verse oscuros * porque el panel es claro. */ html body .header.header-clean .nav-clean > a:not(.header-cta){ color:#29495b !important; } /* * CTA dentro del menú móvil. */ html body .header.header-clean .nav-clean .header-cta{ width:100% !important; margin-top:6px !important; } } /* ========================================================= FIN MOBILE MENU STATE FIX ========================================================= */ /* ========================================================= REHABME · HEADER V3 Universal + Mobile Fix ========================================================= */ /* --------------------------------------------------------- HEADER EXTERIOR Ocupa espacio real: ya no se monta sobre el hero --------------------------------------------------------- */ html body .header.header-clean{ position:sticky !important; top:0 !important; left:auto !important; right:auto !important; width:100% !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; transform:none !important; opacity:1 !important; visibility:visible !important; z-index:1000 !important; pointer-events:none; transition:none !important; } /* eliminar cualquier fondo exterior heredado */ html body .header.header-clean::before, html body .header.header-clean::after{ display:none !important; } /* ========================================================= ESTADO INICIAL GLASS OSCURO UNIVERSAL ========================================================= */ html body .header.header-clean .header-row{ position:relative !important; width:100% !important; max-width:none !important; min-height:92px; margin:0 auto !important; padding: 10px clamp(28px,4.5vw,84px) !important; background: linear-gradient( 110deg, rgba(8,35,56,.88), rgba(13,54,76,.76) ) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; pointer-events:auto; transition: width .36s cubic-bezier(.2,.8,.2,1), max-width .36s cubic-bezier(.2,.8,.2,1), min-height .30s ease, margin .30s ease, padding .30s ease, border-radius .30s ease, background .30s ease, box-shadow .30s ease, backdrop-filter .30s ease !important; } /* Logo blanco */ html body .header.header-clean:not(.is-scrolled) .brand img{ filter: brightness(0) invert(1) !important; } /* enlaces blancos */ html body .header.header-clean:not(.is-scrolled) .nav-clean > a:not(.header-cta){ color:#fff !important; } html body .header.header-clean:not(.is-scrolled) .nav-clean > a:not(.header-cta):hover{ color:#fff !important; opacity:.72; } /* ========================================================= ESTADO FLOTANTE / SCROLL ========================================================= */ html body .header.header-clean.is-scrolled{ padding-top:10px !important; background:transparent !important; pointer-events:none; } html body .header.header-clean.is-scrolled .header-row{ width:calc(100% - 48px) !important; max-width:1485px !important; min-height:68px; margin:0 auto !important; padding: 6px 14px 6px 20px !important; background: linear-gradient( 110deg, rgba(244,249,252,.84), rgba(225,237,244,.76) ) !important; border: 1px solid rgba(255,255,255,.74) !important; border-radius:20px !important; box-shadow: 0 10px 34px rgba(9,34,53,.13), inset 0 1px 0 rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; backdrop-filter: blur(20px) saturate(150%) !important; pointer-events:auto; } /* logo original al entrar glass claro */ html body .header.header-clean.is-scrolled .brand img{ filter:none !important; } /* navegación oscura */ html body .header.header-clean.is-scrolled .nav-clean > a:not(.header-cta){ color:#29495b !important; } html body .header.header-clean.is-scrolled .nav-clean > a:not(.header-cta):hover{ color:#1578a7 !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:900px){ /* ------------------------------------------------------- Barra inicial ------------------------------------------------------- */ html body .header.header-clean .header-row{ min-height:72px; padding: 7px 14px !important; } html body .header.header-clean .brand img{ width:auto !important; height:45px !important; } /* * El hero ya comienza después de estos 72px. * Se elimina la superposición que vemos en la captura. */ /* ------------------------------------------------------- BOTÓN MENÚ ------------------------------------------------------- */ html body .header.header-clean .menu-button{ position:relative !important; z-index:5 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-width:auto !important; min-height:44px !important; padding: 9px 12px !important; color:#fff !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius:11px !important; box-shadow:none !important; font-weight:700 !important; } html body .header.header-clean.is-scrolled .menu-button{ color:#29495b !important; background: rgba(255,255,255,.64) !important; border-color: rgba(16,42,67,.10) !important; } /* ------------------------------------------------------- MENÚ CERRADO POR DEFECTO ------------------------------------------------------- */ html body .header.header-clean .nav-clean{ display:none !important; position:absolute !important; top:calc(100% + 8px) !important; left:0 !important; right:0 !important; width:100% !important; margin:0 !important; padding:10px !important; flex-direction:column !important; align-items:stretch !important; gap:2px !important; border: 1px solid rgba(255,255,255,.72) !important; border-radius:15px !important; background: rgba(244,249,252,.97) !important; box-shadow: 0 16px 40px rgba(7,31,48,.18) !important; -webkit-backdrop-filter: blur(20px) saturate(145%) !important; backdrop-filter: blur(20px) saturate(145%) !important; } /* ------------------------------------------------------- SOLO ABIERTO SI aria-expanded=true ------------------------------------------------------- */ html body .header.header-clean .menu-button[aria-expanded="true"] + .nav-clean{ display:flex !important; } /* ------------------------------------------------------- LINKS DEL PANEL ------------------------------------------------------- */ html body .header.header-clean .nav-clean > a:not(.header-cta){ width:100% !important; padding: 12px 13px !important; color:#29495b !important; border-radius:8px !important; font-size:.92rem !important; } html body .header.header-clean .nav-clean > a:not(.header-cta):hover{ color:#1578a7 !important; background: rgba(21,120,167,.07) !important; } html body .header.header-clean .nav-clean .header-cta{ width:100% !important; margin-top:5px !important; justify-content:center !important; text-align:center !important; } /* ------------------------------------------------------- ESTADO SCROLL MOBILE ------------------------------------------------------- */ html body .header.header-clean.is-scrolled{ padding-top:7px !important; } html body .header.header-clean.is-scrolled .header-row{ width:calc(100% - 14px) !important; min-height:58px; padding: 5px 7px 5px 12px !important; border-radius:16px !important; } html body .header.header-clean.is-scrolled .brand img{ height:38px !important; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media(max-width:520px){ html body .header.header-clean.is-scrolled .header-row{ width:calc(100% - 10px) !important; } } /* ========================================================= FIN HEADER V3 ========================================================= */ /* ========================================================= REHABME · HEADER FINAL POLISH ========================================================= */ /* --------------------------------------------------------- 1. MOBILE Panel claro = texto oscuro --------------------------------------------------------- */ @media(max-width:900px){ html body .header.header-clean .menu-button[aria-expanded="true"] + .nav-clean > a:not(.header-cta){ color:#29495b !important; opacity:1 !important; } html body .header.header-clean .menu-button[aria-expanded="true"] + .nav-clean > a:not(.header-cta):hover, html body .header.header-clean .menu-button[aria-expanded="true"] + .nav-clean > a:not(.header-cta):focus-visible{ color:#1578a7 !important; opacity:1 !important; background:rgba(21,120,167,.07) !important; } html body .header.header-clean .menu-button[aria-expanded="true"] + .nav-clean > a[aria-current="page"]:not(.header-cta){ color:#1578a7 !important; } } /* --------------------------------------------------------- 2. DESKTOP Hover completamente limpio --------------------------------------------------------- */ @media(min-width:901px){ html body .header.header-clean .nav-clean > a:not(.header-cta), html body .header.header-clean .nav-clean > a:not(.header-cta):hover, html body .header.header-clean .nav-clean > a:not(.header-cta):focus, html body .header.header-clean .nav-clean > a:not(.header-cta):focus-visible{ text-decoration:none !important; border-bottom:0 !important; box-shadow:none !important; } html body .header.header-clean .nav-clean > a:not(.header-cta)::before, html body .header.header-clean .nav-clean > a:not(.header-cta)::after{ content:none !important; display:none !important; } } /* ========================================================= FIN HEADER FINAL POLISH ========================================================= */ /* ========================================================= REHABME · MOBILE MENU GLASS FIX Mantener fondo al abrir durante scroll ========================================================= */ @media(max-width:900px){ /* * Esta regla es deliberadamente más específica * que las reglas anteriores de .is-scrolled. * * El menú desplegable SIEMPRE debe tener * superficie propia cuando está abierto. */ html body .header.header-clean.is-scrolled .menu-button[aria-expanded="true"] + .nav-clean, html body .header.header-clean:not(.is-scrolled) .menu-button[aria-expanded="true"] + .nav-clean{ display:flex !important; background: linear-gradient( 135deg, rgba(248,252,254,.97), rgba(235,244,249,.95) ) !important; border: 1px solid rgba(255,255,255,.88) !important; border-radius:16px !important; box-shadow: 0 18px 42px rgba(8,35,54,.18), inset 0 1px 0 rgba(255,255,255,.90) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important; } /* * Asegurar contraste del texto * en ambos estados. */ html body .header.header-clean.is-scrolled .menu-button[aria-expanded="true"] + .nav-clean > a:not(.header-cta), html body .header.header-clean:not(.is-scrolled) .menu-button[aria-expanded="true"] + .nav-clean > a:not(.header-cta){ color:#29495b !important; opacity:1 !important; } /* * Hover / opción activa. */ html body .header.header-clean.is-scrolled .menu-button[aria-expanded="true"] + .nav-clean > a:not(.header-cta):hover, html body .header.header-clean.is-scrolled .menu-button[aria-expanded="true"] + .nav-clean > a[aria-current="page"]:not(.header-cta), html body .header.header-clean:not(.is-scrolled) .menu-button[aria-expanded="true"] + .nav-clean > a:not(.header-cta):hover, html body .header.header-clean:not(.is-scrolled) .menu-button[aria-expanded="true"] + .nav-clean > a[aria-current="page"]:not(.header-cta){ color:#1578a7 !important; } } /* ========================================================= FIN MOBILE MENU GLASS FIX ========================================================= */ /* ========================================================= APP REHABME · V2 ========================================================= */ .app-v2-hero, .app-v2-section, .app-v2-final{ --app-navy:#102d45; --app-blue:#147ca8; --app-teal:#31d5c3; --app-paper:#f4f8fd; --app-soft:#e8f2fc; --app-text:#17324a; --app-muted:#627384; --app-line:rgba(16,45,69,.11); } /* ========================================================= GENERAL ========================================================= */ .app-v2-section{ padding:105px 0; } .app-v2-kicker, .app-v2-final-kicker{ display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; color:var(--app-blue); font-size:.73rem; font-weight:850; text-transform:uppercase; letter-spacing:.09em; } .app-v2-kicker::before, .app-v2-final-kicker::before{ content:""; width:18px; height:2px; background:currentColor; } .app-v2-section-head{ max-width:820px; margin-bottom:52px; } .app-v2-section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; } .app-v2-section-head h2, .app-v2-simple-intro h2, .app-v2-privacy h2{ font-size:clamp(2.6rem,4vw,4rem); line-height:1.03; } .app-v2-section-head h2 span, .app-v2-simple-intro h2 span, .app-v2-privacy h2 span{ color:var(--app-blue); } .app-v2-section-head p{ max-width:680px; margin-inline:auto; color:var(--app-muted); } /* ========================================================= HERO ========================================================= */ .app-v2-hero{ position:relative; overflow:hidden; padding:74px 0 98px; background: radial-gradient( circle at 77% 40%, rgba(49,213,195,.15), transparent 26% ), linear-gradient( 135deg, #102e46 0%, #0f304b 60%, #12374f 100% ); color:white; } .app-v2-hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:78px; align-items:center; } .app-v2-hero .app-v2-kicker{ color:var(--app-teal); } .app-v2-hero-copy h1{ max-width:780px; margin-bottom:25px; color:white; font-size:clamp(3.3rem,5.25vw,5.45rem); line-height:.98; } .app-v2-hero-copy h1 span{ display:block; color:var(--app-teal); } .app-v2-hero-copy p{ max-width:700px; color:#d4e1e9; } .app-v2-hero-copy .app-v2-lead{ color:white; font-size:1.15rem; } .app-v2-hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:31px; } .app-v2-hero .btn.secondary{ color:white; border-color:rgba(255,255,255,.35); } .app-v2-hero-features{ display:flex; flex-wrap:wrap; gap:8px; margin-top:38px; } .app-v2-hero-features span{ padding:7px 11px; border: 1px solid rgba(255,255,255,.17); border-radius:999px; background: rgba(255,255,255,.05); color:#e8f2f6; font-size:.75rem; font-weight:700; } .app-v2-hero-visual{ position:relative; display:flex; justify-content:center; min-height:590px; } .app-v2-phone-glow{ position:absolute; top:100px; left:50%; width:390px; height:390px; border-radius:50%; background: rgba(49,213,195,.18); filter:blur(85px); transform:translateX(-50%); } .app-v2-phone-wrap{ position:relative; z-index:2; width:min(100%,420px); transform: translateY(8px) rotate(2deg); filter: drop-shadow(0 28px 46px rgba(0,0,0,.28)); } .app-v2-phone-wrap > *{ max-width:100%; } .app-v2-floating-card{ position:absolute; z-index:3; min-width:185px; padding:13px 16px; border: 1px solid rgba(255,255,255,.30); border-radius:13px; background: rgba(255,255,255,.90); box-shadow: 0 16px 35px rgba(4,25,39,.20); color:var(--app-navy); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } .app-v2-floating-card small{ display:block; color:var(--app-muted); font-size:.68rem; } .app-v2-floating-card strong{ display:block; margin-top:2px; font-size:.88rem; } .app-v2-floating-card-a{ top:105px; left:0; } .app-v2-floating-card-b{ right:-10px; bottom:95px; } /* ========================================================= BENEFICIOS ========================================================= */ .app-v2-benefits{ background:#f1f6fc; } .app-v2-benefit-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:20px; } .app-v2-benefit-card{ display:flex; flex-direction:column; min-height:420px; padding:29px; border: 1px solid var(--app-line); border-radius:17px; background:white; box-shadow: 0 10px 25px rgba(16,45,69,.035); } .app-v2-benefit-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:42px; } .app-v2-number{ color:var(--app-blue); font-size:.75rem; font-weight:850; } .app-v2-icon{ display:grid; place-items:center; width:46px; height:46px; border-radius:11px; background:var(--app-soft); color:var(--app-blue); } .app-v2-icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .app-v2-benefit-card h3{ margin-bottom:14px; font-size:1.5rem; line-height:1.15; } .app-v2-benefit-card p{ color:var(--app-muted); } .app-v2-benefit-card small{ margin-top:auto; padding-top:20px; border-top: 1px solid var(--app-line); color:var(--app-muted); font-size:.77rem; line-height:1.55; } /* ========================================================= CONTINUIDAD ========================================================= */ .app-v2-continuity{ background:white; } .app-v2-continuity-panel{ display:grid; grid-template-columns: 1.02fr .98fr; gap:70px; padding:60px; border: 1px solid var(--app-line); border-radius:26px; background: linear-gradient( 135deg, #f6faff, #edf5fc ); } .app-v2-continuity-copy h2{ font-size:clamp(2.8rem,4vw,4rem); } .app-v2-continuity-copy h2 span{ display:block; color:var(--app-blue); } .app-v2-continuity-copy > p{ color:var(--app-muted); } .app-v2-continuity-copy .lead{ color:var(--app-text); font-size:1.1rem; } .app-v2-continuity-points{ margin-top:35px; } .app-v2-continuity-points article{ display:grid; grid-template-columns:48px 1fr; gap:15px; padding:20px 0; border-top: 1px solid var(--app-line); } .app-v2-continuity-points article > span{ color:var(--app-blue); font-size:.72rem; font-weight:850; } .app-v2-continuity-points h3{ margin-bottom:6px; font-size:1.05rem; } .app-v2-continuity-points p{ margin:0; color:var(--app-muted); font-size:.87rem; } .app-v2-continuity-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:580px; } .app-v2-continuity-screen{ width:min(100%,390px); filter: drop-shadow(0 24px 40px rgba(15,45,67,.17)); } .app-v2-continuity-screen > *{ max-width:100%; } .app-v2-continuity-message{ position:absolute; left:0; bottom:30px; width:310px; padding:20px; border-left: 4px solid var(--app-teal); border-radius:12px; background:white; box-shadow: 0 16px 34px rgba(15,45,67,.12); } .app-v2-continuity-message span{ display:block; margin-bottom:5px; color:var(--app-blue); font-size:.68rem; font-weight:850; text-transform:uppercase; } .app-v2-continuity-message strong{ display:block; color:var(--app-navy); line-height:1.45; } /* ========================================================= EXPERIENCIA ========================================================= */ .app-v2-simple{ background:#f1f6fc; } .app-v2-simple-intro{ display:grid; grid-template-columns: 1.1fr .9fr; gap:70px; align-items:end; margin-bottom:50px; } .app-v2-simple-intro p{ color:var(--app-muted); } .app-v2-simple-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:20px; } .app-v2-simple-grid article{ min-height:310px; padding:29px; border: 1px solid var(--app-line); border-radius:17px; background:white; } .app-v2-simple-grid .app-v2-icon{ margin-bottom:35px; } .app-v2-simple-grid h3{ margin-bottom:13px; font-size:1.3rem; } .app-v2-simple-grid p{ color:var(--app-muted); font-size:.89rem; } /* ========================================================= CÓMO FUNCIONA ========================================================= */ .app-v2-how{ background:white; } .app-v2-how-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:24px; } .app-v2-how-grid article{ min-height:300px; padding:36px; border: 1px solid var(--app-line); border-radius:18px; background:#f8fafc; text-align:center; } .app-v2-how-number{ display:grid; place-items:center; width:48px; height:48px; margin: 0 auto 34px; border-radius:50%; background:var(--app-navy); color:white; font-size:1.1rem; font-weight:850; } .app-v2-how-grid article:nth-child(2) .app-v2-how-number{ background:var(--app-blue); } .app-v2-how-grid article:nth-child(3) .app-v2-how-number{ background:#139c8a; } .app-v2-how-grid h3{ font-size:1.45rem; } .app-v2-how-grid p{ color:var(--app-muted); font-size:.89rem; } .app-v2-how-cta{ display:flex; justify-content:space-between; align-items:center; gap:25px; margin-top:25px; padding:25px 30px; border-left: 4px solid var(--app-teal); border-radius:12px; background:#eef8f7; } .app-v2-how-cta > span{ color:var(--app-navy); font-weight:750; } /* ========================================================= PRIVACIDAD ========================================================= */ .app-v2-privacy{ background:#edf3fc; } .app-v2-privacy-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:75px; align-items:center; } .app-v2-privacy-grid > div:first-child p{ color:var(--app-muted); } .app-v2-privacy-grid > div:first-child .lead{ color:var(--app-text); font-size:1.08rem; } .app-v2-privacy-cards{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; } .app-v2-privacy-cards article{ padding:24px; border: 1px solid var(--app-line); border-radius:15px; background:white; } .app-v2-privacy-cards .app-v2-icon{ margin-bottom:22px; } .app-v2-privacy-cards h3{ margin-bottom:9px; font-size:1.05rem; } .app-v2-privacy-cards p{ margin:0; color:var(--app-muted); font-size:.83rem; } .app-v2-privacy-note{ display:flex; flex-direction:column; justify-content:center; background:var(--app-navy) !important; color:white; } .app-v2-privacy-note span{ color:var(--app-teal); font-size:.68rem; font-weight:850; text-transform:uppercase; } .app-v2-privacy-note strong{ margin-top:7px; line-height:1.45; } /* ========================================================= FAQ ========================================================= */ .app-v2-faq{ background:white; } .app-v2-faq-wrap{ max-width:960px; } .app-v2-faq-list{ display:grid; gap:12px; } .app-v2-faq-list details{ overflow:hidden; border: 1px solid var(--app-line); border-radius:12px; background:#f8fafc; } .app-v2-faq-list summary{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 24px; cursor:pointer; color:var(--app-navy); font-weight:750; list-style:none; } .app-v2-faq-list summary::-webkit-details-marker{ display:none; } .app-v2-faq-list summary span{ color:var(--app-blue); font-size:1.3rem; transition: transform .2s ease; } .app-v2-faq-list details[open] summary span{ transform:rotate(45deg); } .app-v2-faq-list details p{ max-width:810px; margin:0; padding: 0 24px 23px; color:var(--app-muted); } /* ========================================================= FINAL ========================================================= */ .app-v2-final{ padding:90px 0; background:#edf3fc; } .app-v2-final-panel{ display:grid; grid-template-columns: 1.15fr .85fr; gap:65px; padding:55px; border-radius:27px; background:var(--app-navy); color:white; } .app-v2-final-kicker{ color:var(--app-teal); } .app-v2-final h2{ font-size:clamp(2.8rem,4vw,4.15rem); line-height:1.03; } .app-v2-final h2 span{ display:block; color:var(--app-teal); } .app-v2-final p{ max-width:690px; color:#cddce5; } .app-v2-final-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:28px; } .app-v2-final .btn.secondary{ color:white; border-color:#577184; } .app-v2-final-side{ display:flex; flex-direction:column; justify-content:center; padding-left:42px; border-left: 1px solid rgba(255,255,255,.18); } .app-v2-final-side > span{ color:var(--app-teal); font-size:.7rem; font-weight:850; text-transform:uppercase; } .app-v2-final-side strong{ margin-top:10px; font-size:1.4rem; line-height:1.35; } .app-v2-final-side a{ display:flex; justify-content:space-between; gap:15px; margin-top:30px; padding-top:18px; border-top: 1px solid rgba(255,255,255,.16); color:white; text-decoration:none; font-weight:750; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1050px){ .app-v2-hero-grid, .app-v2-continuity-panel, .app-v2-privacy-grid, .app-v2-final-panel{ grid-template-columns:1fr; } .app-v2-benefit-grid, .app-v2-simple-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } .app-v2-hero-visual{ min-height:540px; } .app-v2-final-side{ padding-left:0; padding-top:30px; border-left:0; border-top: 1px solid rgba(255,255,255,.18); } } @media(max-width:760px){ .app-v2-section{ padding:72px 0; } .app-v2-hero{ padding:55px 0 74px; } .app-v2-hero-grid{ gap:35px; } .app-v2-hero-copy h1{ font-size:clamp(2.8rem,12vw,4.2rem); } .app-v2-hero-visual{ min-height:450px; } .app-v2-phone-wrap{ width:min(90%,360px); } .app-v2-floating-card{ display:none; } .app-v2-benefit-grid, .app-v2-simple-grid, .app-v2-how-grid, .app-v2-privacy-cards{ grid-template-columns:1fr; } .app-v2-benefit-card{ min-height:auto; } .app-v2-simple-intro{ grid-template-columns:1fr; gap:18px; } .app-v2-continuity-panel{ padding:28px; } .app-v2-continuity-visual{ min-height:470px; } .app-v2-continuity-message{ left:0; right:0; bottom:10px; width:auto; } .app-v2-how-grid article{ min-height:auto; padding:30px 24px; } .app-v2-how-cta{ flex-direction:column; align-items:flex-start; } .app-v2-final-panel{ padding:31px; } } @media(max-width:480px){ .app-v2-hero-features{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .app-v2-hero-features span{ text-align:center; } } /* ========================================================= FIN APP REHABME V2 ========================================================= */ /* ========================================================= APP REHABME · HERO MOCKUP ========================================================= */ .app-v2-phone-wrap-mockup{ position:relative; z-index:2; width:min(100%,720px) !important; transform:none !important; filter:none !important; } .app-v2-hero-mockup{ display:block; width:100%; height:auto; object-fit:contain; filter: drop-shadow(0 28px 48px rgba(0,0,0,.24)); } /* Dar más presencia al visual */ .app-v2-hero-visual{ align-items:center; } .app-v2-hero-grid{ grid-template-columns: .95fr 1.05fr; } /* Reubicar tarjetas flotantes alrededor del mockup */ .app-v2-floating-card-a{ top:115px; left:10px; } .app-v2-floating-card-b{ right:0; bottom:105px; } /* Tablet */ @media(max-width:1050px){ .app-v2-phone-wrap-mockup{ width:min(100%,680px) !important; } } /* Mobile */ @media(max-width:760px){ .app-v2-phone-wrap-mockup{ width:min(100%,520px) !important; } .app-v2-hero-mockup{ width:100%; } } /* ========================================================= FIN HERO MOCKUP ========================================================= */ /* ========================================================= APP REHABME · HERO BACKGROUND EFFECT ========================================================= */ .app-v2-hero{ position:relative; isolation:isolate; } /* Halo principal detrás del mockup */ .app-v2-hero::before{ content:""; position:absolute; z-index:-2; width:760px; height:760px; right:4%; top:50%; transform:translateY(-47%); border-radius:50%; background: radial-gradient( circle at center, rgba(22,126,204,.32) 0%, rgba(15,113,190,.18) 33%, rgba(15,113,190,.07) 54%, transparent 72% ); filter:blur(4px); pointer-events:none; } /* Halo secundario teal */ .app-v2-hero::after{ content:""; position:absolute; z-index:-2; width:520px; height:520px; right:13%; top:24%; border-radius:50%; background: radial-gradient( circle, rgba(49,213,195,.14) 0%, rgba(49,213,195,.07) 38%, transparent 70% ); filter:blur(10px); pointer-events:none; } /* Fondo decorativo del área visual */ .app-v2-hero-visual::before{ content:""; position:absolute; z-index:0; width:680px; height:430px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-13deg); border: 1px solid rgba(42,151,235,.22); border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%; box-shadow: 0 0 70px rgba(18,111,186,.12); pointer-events:none; } /* Segunda órbita / línea */ .app-v2-hero-visual::after{ content:""; position:absolute; z-index:0; width:560px; height:340px; left:53%; top:52%; transform: translate(-50%,-50%) rotate(18deg); border: 1px solid rgba(49,213,195,.14); border-radius: 52% 48% 43% 57% / 48% 55% 45% 52%; pointer-events:none; } /* Mockup siempre por encima */ .app-v2-phone-wrap-mockup{ position:relative; z-index:2; } /* Tarjetas flotantes por encima */ .app-v2-floating-card{ z-index:3; } /* Glow adicional cerca de la base */ .app-v2-phone-wrap-mockup::after{ content:""; position:absolute; z-index:-1; left:50%; bottom:4%; width:70%; height:24%; transform:translateX(-50%); background: radial-gradient( ellipse, rgba(24,142,218,.22), rgba(24,142,218,.08) 45%, transparent 72% ); filter:blur(22px); pointer-events:none; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1050px){ .app-v2-hero::before{ width:620px; height:620px; right:50%; top:auto; bottom:-80px; transform:translateX(50%); } .app-v2-hero::after{ width:420px; height:420px; right:50%; top:auto; bottom:40px; transform:translateX(50%); } .app-v2-hero-visual::before{ width:560px; height:360px; } .app-v2-hero-visual::after{ width:470px; height:300px; } } @media(max-width:760px){ .app-v2-hero::before{ width:480px; height:480px; bottom:-60px; } .app-v2-hero::after{ width:330px; height:330px; bottom:50px; } .app-v2-hero-visual::before{ width:420px; height:280px; } .app-v2-hero-visual::after{ width:350px; height:230px; } } @media(max-width:480px){ .app-v2-hero-visual::before{ width:330px; height:220px; } .app-v2-hero-visual::after{ width:290px; height:190px; } } /* ========================================================= FIN APP HERO BACKGROUND EFFECT ========================================================= */ /* ========================================================= APP REHABME · HERO BACKGROUND EFFECT V2 Mayor intensidad, similar a referencia ========================================================= */ .app-v2-hero{ position:relative; isolation:isolate; background: radial-gradient( circle at 76% 48%, rgba(0,133,255,.18) 0%, rgba(0,133,255,.10) 24%, transparent 52% ), radial-gradient( circle at 63% 72%, rgba(0,204,255,.10) 0%, transparent 34% ), linear-gradient( 135deg, #0d2b43 0%, #0d314c 58%, #10344d 100% ) !important; } /* --------------------------------------------------------- HALO PRINCIPAL --------------------------------------------------------- */ .app-v2-hero::before{ content:""; position:absolute; z-index:-2; width:980px; height:760px; right:-2%; top:47%; transform:translateY(-50%); border-radius:50%; background: radial-gradient( circle at center, rgba(0,139,255,.42) 0%, rgba(0,139,255,.28) 24%, rgba(0,139,255,.14) 46%, rgba(0,139,255,.05) 60%, transparent 76% ); filter:blur(12px); pointer-events:none; } /* --------------------------------------------------------- HALO TEAL / CYAN --------------------------------------------------------- */ .app-v2-hero::after{ content:""; position:absolute; z-index:-2; width:720px; height:560px; right:5%; top:52%; transform:translateY(-50%); border-radius:50%; background: radial-gradient( circle, rgba(28,218,220,.22) 0%, rgba(28,218,220,.12) 36%, rgba(28,218,220,.05) 52%, transparent 72% ); filter:blur(18px); pointer-events:none; } /* --------------------------------------------------------- ÓRBITA EXTERIOR --------------------------------------------------------- */ .app-v2-hero-visual::before{ content:""; position:absolute; z-index:0; width:820px; height:500px; left:52%; top:50%; transform: translate(-50%,-50%) rotate(-16deg); border: 2px solid rgba(0,141,255,.42); border-radius: 50% 50% 47% 53% / 48% 55% 45% 52%; box-shadow: 0 0 48px rgba(0,141,255,.18); pointer-events:none; } /* --------------------------------------------------------- ÓRBITA INTERIOR --------------------------------------------------------- */ .app-v2-hero-visual::after{ content:""; position:absolute; z-index:0; width:650px; height:400px; left:55%; top:52%; transform: translate(-50%,-50%) rotate(18deg); border: 1.5px solid rgba(34,220,207,.28); border-radius: 54% 46% 48% 52% / 51% 47% 53% 49%; box-shadow: 0 0 34px rgba(34,220,207,.10); pointer-events:none; } /* --------------------------------------------------------- GLOW DETRÁS DEL MOCKUP --------------------------------------------------------- */ .app-v2-phone-wrap-mockup::before{ content:""; position:absolute; z-index:-1; left:50%; top:48%; width:84%; height:72%; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient( ellipse, rgba(0,153,255,.28) 0%, rgba(0,153,255,.16) 36%, rgba(0,153,255,.05) 58%, transparent 76% ); filter:blur(32px); pointer-events:none; } .app-v2-phone-wrap-mockup::after{ content:""; position:absolute; z-index:-1; left:50%; bottom:3%; width:72%; height:30%; transform:translateX(-50%); background: radial-gradient( ellipse, rgba(0,174,255,.30) 0%, rgba(0,174,255,.12) 42%, transparent 72% ); filter:blur(28px); pointer-events:none; } /* --------------------------------------------------------- Mantener mockup y tarjetas encima --------------------------------------------------------- */ .app-v2-phone-wrap-mockup{ position:relative; z-index:2; } .app-v2-floating-card{ z-index:3; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1050px){ .app-v2-hero::before{ width:760px; height:620px; right:50%; top:auto; bottom:-110px; transform:translateX(50%); } .app-v2-hero::after{ width:540px; height:440px; right:50%; top:auto; bottom:-10px; transform:translateX(50%); } .app-v2-hero-visual::before{ width:650px; height:410px; } .app-v2-hero-visual::after{ width:520px; height:320px; } } @media(max-width:760px){ .app-v2-hero::before{ width:560px; height:470px; } .app-v2-hero::after{ width:420px; height:360px; } .app-v2-hero-visual::before{ width:480px; height:300px; border-width:1.5px; } .app-v2-hero-visual::after{ width:390px; height:245px; } } @media(max-width:480px){ .app-v2-hero-visual::before{ width:360px; height:230px; } .app-v2-hero-visual::after{ width:300px; height:190px; } } /* ========================================================= FIN HERO BACKGROUND EFFECT V2 ========================================================= */ /* ========================================================= APP REHABME · HERO MOBILE COMPOSITION ========================================================= */ /* Oculto en desktop */ .app-v2-mobile-mockup{ display:none; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px){ /* * El visual desktop deja de aparecer debajo * de todo el contenido. */ .app-v2-hero > .wrap > .app-v2-hero-visual{ display:none !important; } /* * Hero de una sola columna. */ .app-v2-hero-grid{ display:block !important; } /* * Mockup situado entre ambos párrafos. */ .app-v2-mobile-mockup{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:350px; margin: 28px 0 30px; overflow:visible; } /* * Halo amplio detrás. */ .app-v2-mobile-mockup::before{ content:""; position:absolute; z-index:0; left:50%; top:50%; width:420px; height:340px; transform: translate(-50%,-50%); border-radius:50%; background: radial-gradient( circle, rgba(0,145,255,.34) 0%, rgba(0,145,255,.18) 38%, rgba(0,145,255,.06) 58%, transparent 76% ); filter:blur(14px); pointer-events:none; } /* * Primera órbita. */ .app-v2-mobile-mockup::after{ content:""; position:absolute; z-index:1; left:50%; top:50%; width:360px; height:250px; transform: translate(-50%,-50%) rotate(-13deg); border: 1.5px solid rgba(0,153,255,.38); border-radius: 52% 48% 45% 55% / 50% 44% 56% 50%; box-shadow: 0 0 38px rgba(0,153,255,.13); pointer-events:none; } /* * Segunda órbita. */ .app-v2-mobile-orbit{ position:absolute; z-index:1; left:50%; top:51%; width:310px; height:215px; transform: translate(-50%,-50%) rotate(17deg); border: 1px solid rgba(49,213,195,.28); border-radius:50%; pointer-events:none; } /* * Mockup protagonista. */ .app-v2-mobile-mockup img{ position:relative; z-index:2; display:block; width:min(118%,470px); max-width:none; height:auto; margin-left:50%; transform: translateX(-50%); filter: drop-shadow( 0 22px 30px rgba(0,0,0,.22) ); } /* * Separación después de la imagen. */ .app-v2-secondary-copy{ margin-top:0 !important; } } /* ========================================================= MÓVIL PEQUEÑO ========================================================= */ @media(max-width:480px){ .app-v2-mobile-mockup{ min-height:305px; margin: 22px 0 25px; } .app-v2-mobile-mockup img{ width:min(124%,430px); } .app-v2-mobile-mockup::before{ width:360px; height:290px; } .app-v2-mobile-mockup::after{ width:320px; height:220px; } .app-v2-mobile-orbit{ width:275px; height:190px; } } /* ========================================================= FIN HERO MOBILE COMPOSITION ========================================================= */ /* ========================================================= APP REHABME · AJUSTES HERO MOBILE + CONTINUIDAD ========================================================= */ /* --------------------------------------------------------- HERO MOBILE Centrar visualmente el mockup y evitar corte lateral --------------------------------------------------------- */ @media(max-width:760px){ .app-v2-mobile-mockup{ overflow:hidden !important; } .app-v2-mobile-mockup img{ width:min(112%,430px) !important; max-width:none !important; margin-left:50% !important; transform: translateX(-47%) !important; } } @media(max-width:480px){ .app-v2-mobile-mockup img{ width:min(110%,400px) !important; transform: translateX(-46%) !important; } } /* --------------------------------------------------------- SECCIÓN CONTINUIDAD Nueva imagen --------------------------------------------------------- */ .app-v2-continuity-screen{ width:min(100%,520px) !important; display:flex; justify-content:center; align-items:center; filter:none !important; } .app-v2-continuity-image{ margin:0; width:100%; } .app-v2-continuity-image img{ display:block; width:100%; height:auto; object-fit:contain; border-radius:28px; filter: drop-shadow( 0 26px 42px rgba(15,45,67,.18) ); } /* Desktop: más protagonista */ @media(min-width:1051px){ .app-v2-continuity-screen{ width:min(100%,540px) !important; } } /* Tablet */ @media(max-width:1050px){ .app-v2-continuity-screen{ width:min(100%,500px) !important; } } /* Mobile */ @media(max-width:760px){ .app-v2-continuity-screen{ width:min(100%,390px) !important; } .app-v2-continuity-image img{ border-radius:22px; } } /* ========================================================= FIN AJUSTES ========================================================= */ /* ========================================================= APP REHABME · IMAGE POSITION / SIZE TUNING ========================================================= */ /* --------------------------------------------------------- MOBILE HERO MOCKUP Mover visual claramente hacia la derecha --------------------------------------------------------- */ @media(max-width:760px){ .app-v2-mobile-mockup{ overflow:hidden !important; } .app-v2-mobile-mockup img{ width:min(108%,410px) !important; max-width:none !important; margin-left:50% !important; transform: translateX(-39%) !important; } } @media(max-width:480px){ .app-v2-mobile-mockup img{ width:min(108%,390px) !important; transform: translateX(-37%) !important; } } /* --------------------------------------------------------- DESKTOP · CONTINUIDAD Reducir imagen a la altura aproximada del bloque de texto --------------------------------------------------------- */ @media(min-width:1051px){ .app-v2-continuity-visual{ min-height:auto !important; align-items:center !important; } .app-v2-continuity-screen{ width:100% !important; max-width:400px !important; margin:0 auto !important; } .app-v2-continuity-image{ width:100% !important; } .app-v2-continuity-image img{ width:100% !important; max-height:560px !important; object-fit:contain !important; } .app-v2-continuity-message{ width:290px !important; left:50% !important; bottom:10px !important; transform: translateX(-58%) !important; } } /* --------------------------------------------------------- DESKTOP GRANDE Aún más contenido para evitar que domine --------------------------------------------------------- */ @media(min-width:1400px){ .app-v2-continuity-screen{ max-width:370px !important; } .app-v2-continuity-image img{ max-height:520px !important; } } /* ========================================================= FIN IMAGE TUNING ========================================================= */ /* ========================================================= APP REHABME · MOBILE MOCKUP CENTER V3 ========================================================= */ @media(max-width:760px){ /* * Mover claramente el conjunto de teléfonos * hacia la derecha. */ .app-v2-mobile-mockup img{ width:min(108%,410px) !important; margin-left:50% !important; transform: translateX(-29%) !important; } /* * El halo acompaña al nuevo centro visual. */ .app-v2-mobile-mockup::before{ left:58% !important; } /* * Órbita exterior. */ .app-v2-mobile-mockup::after{ left:58% !important; } /* * Órbita interior. */ .app-v2-mobile-orbit{ left:59% !important; } } @media(max-width:480px){ .app-v2-mobile-mockup img{ width:min(108%,390px) !important; transform: translateX(-27%) !important; } .app-v2-mobile-mockup::before{ left:59% !important; } .app-v2-mobile-mockup::after{ left:59% !important; } .app-v2-mobile-orbit{ left:60% !important; } } /* ========================================================= FIN MOBILE MOCKUP CENTER V3 ========================================================= */ /* ========================================================= APP · AJUSTE FINAL MOCKUP MOBILE ========================================================= */ @media(max-width:760px){ .app-v2-mobile-mockup img{ transform:translateX(-25%) !important; } .app-v2-mobile-mockup::before, .app-v2-mobile-mockup::after{ left:61% !important; } .app-v2-mobile-orbit{ left:62% !important; } } @media(max-width:480px){ .app-v2-mobile-mockup img{ transform:translateX(-23%) !important; } .app-v2-mobile-mockup::before, .app-v2-mobile-mockup::after{ left:62% !important; } .app-v2-mobile-orbit{ left:63% !important; } } /* ========================================================= RAE · MOSTRAR AGENDA ÚNICAMENTE EN HEADER Mantiene ocultos otros CTA globales dentro del evaluador ========================================================= */ html body.rae-page .header.header-clean .header-cta{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; align-items:center; justify-content:center; } /* Desktop */ @media(min-width:901px){ html body.rae-page .header.header-clean .header-cta{ width:auto !important; } } /* Mobile */ @media(max-width:900px){ html body.rae-page .header.header-clean .nav-clean .header-cta{ display:flex !important; width:100% !important; margin-top:6px !important; justify-content:center !important; } } /* ========================================================= FIN RAE HEADER CTA ========================================================= */ /* ========================================================== REHABME HOME V3 · 2026-09-08 ========================================================== */ .rh-home-hero, .rh-home-evaluator, .rh-home-app{ --rh-navy:#0d2d43; --rh-navy-deep:#071f31; --rh-teal:#34d8c8; --rh-blue:#087eae; --rh-paper:#f4f7fb; } .rh-home-hero{ position:relative; overflow:hidden; background: radial-gradient(circle at 78% 42%,rgba(21,155,196,.24),transparent 30%), linear-gradient(112deg,#09283d 0%,#10364e 58%,#17455c 100%); color:#fff; padding:132px 0 0; } .rh-home-hero::before{ content:""; position:absolute; width:760px; height:760px; right:-160px; top:-210px; border:1px solid rgba(52,216,200,.12); border-radius:50%; pointer-events:none; } .rh-home-hero-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(420px,.75fr); gap:80px; align-items:center; } .rh-home-kicker, .rh-home-dark-kicker{ display:block; margin-bottom:20px; font-size:12px; line-height:1.4; letter-spacing:.16em; font-weight:800; text-transform:uppercase; color:#087eae; } .rh-home-hero .rh-home-kicker, .rh-home-dark-kicker{ color:#35d8c8; } .rh-home-hero-copy h1{ max-width:760px; margin:0 0 30px; font-size:clamp(58px,5.5vw,98px); line-height:.94; letter-spacing:-.055em; font-weight:500; } .rh-home-hero-copy h1 strong{ color:#35d8c8; font-weight:500; } .rh-home-hero-copy p{ max-width:660px; color:rgba(255,255,255,.73); font-size:17px; line-height:1.8; } .rh-home-hero-copy .rh-home-hero-lead{ color:#fff; font-size:20px; line-height:1.65; } .rh-home-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; } .rh-home-primary, .rh-home-secondary{ display:inline-flex; min-height:56px; padding:0 25px; align-items:center; justify-content:center; gap:14px; border-radius:12px; text-decoration:none; font-weight:800; } .rh-home-primary{ color:#06263b; background:#36d8c8; } .rh-home-secondary{ color:#fff; border:1px solid rgba(255,255,255,.35); } .rh-home-hero-points{ display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; } .rh-home-hero-points span{ padding:8px 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:rgba(255,255,255,.78); font-size:12px; } .rh-home-body{ position:relative; min-width:0; } .rh-home-body .body-3d-frame{ position:relative; overflow:hidden; width:100%; min-height:610px; border-radius:28px; border:1px solid rgba(255,255,255,.14); background:rgba(4,22,35,.38); box-shadow:0 30px 90px rgba(0,0,0,.24); } .rh-home-body .body-3d-frame iframe{ display:block; width:100%; height:610px; border:0; } .rh-home-body-label{ position:absolute; z-index:3; top:22px; left:22px; display:flex; flex-direction:column; gap:4px; padding:13px 16px; border-radius:12px; background:rgba(7,31,49,.74); backdrop-filter:blur(12px); } .rh-home-body-label span{ color:#35d8c8; font-size:10px; font-weight:800; letter-spacing:.12em; } .rh-home-body-label strong{ color:#fff; font-size:14px; } .rh-home-body-link{ display:flex; justify-content:space-between; gap:20px; padding:17px 3px 0; color:#fff; text-decoration:none; font-weight:700; } .rh-home-hero-strip{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:68px; border-top:1px solid rgba(255,255,255,.13); } .rh-home-hero-strip div{ display:flex; gap:18px; align-items:center; min-height:94px; padding:20px 30px; border-right:1px solid rgba(255,255,255,.13); } .rh-home-hero-strip div:last-child{ border-right:0; } .rh-home-hero-strip b{ color:#35d8c8; } .rh-home-hero-strip span{ color:#fff; font-weight:700; } /* SERVICES */ .rh-home-services, .rh-home-method, .rh-home-clinic, .rh-home-modality, .rh-home-location{ padding:110px 0; } .rh-home-services{ background:#fff; } .rh-home-section-head{ margin-bottom:58px; } .rh-home-section-head-split, .rh-home-clinic-head{ display:grid; grid-template-columns:1.1fr .7fr; gap:90px; align-items:end; margin-bottom:58px; } .rh-home-section-head h2, .rh-home-clinic-head h2, .rh-home-location h2{ margin:0; color:#102f46; font-size:clamp(45px,4vw,70px); line-height:1.02; letter-spacing:-.045em; font-weight:500; } .rh-home-section-head h2 strong, .rh-home-clinic-head h2 strong, .rh-home-location h2 strong{ color:#087eae; font-weight:500; } .rh-home-section-head p, .rh-home-clinic-head p{ margin:0; color:#627589; font-size:17px; line-height:1.75; } .rh-home-center-link{ display:flex; justify-content:center; margin-top:44px; } .rh-home-center-link a{ color:#087eae; text-decoration:none; font-weight:800; } /* EVALUATOR */ .rh-home-evaluator{ padding:90px 0; background:#fff; } .rh-home-evaluator-card{ position:relative; overflow:hidden; display:grid; grid-template-columns:.9fr 1fr; gap:60px; min-height:500px; padding:70px; align-items:center; border-radius:28px; color:#fff; background: radial-gradient(circle at 78% 45%,rgba(28,150,189,.34),transparent 26%), linear-gradient(125deg,#071f31 0%,#0b2d46 65%,#104760 100%); box-shadow:0 25px 70px rgba(10,41,61,.14); } .rh-home-evaluator-copy{ position:relative; z-index:2; } .rh-home-evaluator h2{ margin:0 0 24px; font-size:clamp(46px,4vw,70px); line-height:1; letter-spacing:-.045em; font-weight:500; } .rh-home-evaluator h2 strong{ color:#35d8c8; font-weight:500; } .rh-home-evaluator p{ max-width:620px; color:rgba(255,255,255,.76); font-size:17px; line-height:1.75; } .rh-home-evaluator-note{ font-size:13px !important; } .rh-home-evaluator-btn{ display:inline-flex; margin-top:20px; padding:16px 22px; gap:24px; border-radius:10px; color:#06283d; background:#35d8c8; text-decoration:none; font-weight:800; } .rh-home-evaluator-graphic{ position:relative; min-height:350px; } .rh-home-eval-orbit{ position:absolute; border:1px solid rgba(53,216,200,.27); border-radius:50%; } .orbit-one{ width:340px; height:340px; left:50%; top:50%; transform:translate(-50%,-50%); } .orbit-two{ width:470px; height:240px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-18deg); } .rh-home-eval-core, .rh-home-eval-node{ position:absolute; z-index:2; padding:18px 20px; border:1px solid rgba(255,255,255,.15); border-radius:16px; background:rgba(255,255,255,.09); backdrop-filter:blur(14px); } .rh-home-eval-core{ left:50%; top:50%; transform:translate(-50%,-50%); } .rh-home-eval-core span, .rh-home-eval-node span{ display:block; margin-bottom:7px; color:#35d8c8; font-size:11px; font-weight:800; } .node-two{ top:28px; right:10px; } .node-three{ bottom:28px; left:5px; } /* METHOD */ .rh-home-method{ background:#f4f7fb; } .rh-home-section-head.centered{ max-width:800px; margin-left:auto; margin-right:auto; text-align:center; } .rh-home-section-head.centered p{ margin:24px auto 0; max-width:720px; } .rh-home-method-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .rh-home-method-grid article{ min-height:330px; padding:32px; border:1px solid #dce6ee; border-radius:16px; background:#fff; } .rh-home-method-grid article > span{ display:block; margin-bottom:70px; color:#a7d1e7; font-size:46px; font-weight:700; } .rh-home-method-grid h3{ color:#102f46; font-size:20px; line-height:1.25; } .rh-home-method-grid p{ color:#66798b; line-height:1.65; } /* CLINIC */ .rh-home-clinic{ background:#fff; } .rh-home-clinic-gallery{ display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:18px; } .rh-home-clinic-gallery figure{ position:relative; overflow:hidden; margin:0; min-height:360px; border-radius:18px; background:#e8eef3; } .rh-home-clinic-gallery img{ width:100%; height:100%; min-height:360px; object-fit:cover; } .rh-home-clinic-gallery figcaption{ position:absolute; left:18px; bottom:18px; padding:9px 13px; border-radius:8px; color:#fff; background:rgba(7,31,49,.78); backdrop-filter:blur(8px); font-size:12px; font-weight:800; } /* MODALITY */ .rh-home-modality{ background:#f4f7fb; } .rh-home-modality-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .rh-home-modality-grid article{ padding:42px; border:1px solid #dbe5ed; border-radius:18px; background:#fff; } .rh-home-modality-number{ display:block; margin-bottom:60px; color:#0a83b2; font-size:13px; font-weight:800; } .rh-home-modality-grid h3{ margin:0 0 15px; color:#102f46; font-size:28px; } .rh-home-modality-grid p{ max-width:600px; color:#647789; line-height:1.7; } .rh-home-modality-grid a{ display:inline-block; margin-top:20px; color:#087eae; text-decoration:none; font-weight:800; } /* APP */ .rh-home-app{ position:relative; overflow:hidden; padding:110px 0; color:#fff; background: radial-gradient(circle at 74% 48%,rgba(17,154,197,.32),transparent 25%), linear-gradient(120deg,#071f31,#0d354e 70%,#0e4963); } .rh-home-app-grid{ display:grid; grid-template-columns:.9fr 1fr; gap:80px; align-items:center; } .rh-home-app h2{ margin:0 0 25px; font-size:clamp(48px,4.4vw,76px); line-height:.98; letter-spacing:-.045em; font-weight:500; } .rh-home-app h2 strong{ color:#35d8c8; font-weight:500; } .rh-home-app-copy > p{ max-width:610px; color:rgba(255,255,255,.75); font-size:17px; line-height:1.75; } .rh-home-app-list{ display:grid; grid-template-columns:1fr 1fr; margin:34px 0; border-top:1px solid rgba(255,255,255,.14); } .rh-home-app-list div{ display:flex; gap:14px; padding:17px 10px 17px 0; border-bottom:1px solid rgba(255,255,255,.14); } .rh-home-app-list b{ color:#35d8c8; } .rh-home-app-note{ font-size:13px !important; } .rh-home-app-link{ display:inline-block; margin-top:12px; color:#35d8c8; text-decoration:none; font-weight:800; } .rh-home-app-visual{ position:relative; min-height:570px; display:flex; align-items:center; justify-content:center; } .rh-home-app-visual img{ position:relative; z-index:2; display:block; width:min(100%,620px); max-height:560px; object-fit:contain; } .rh-home-app-orbit{ position:absolute; width:530px; height:530px; border:1px solid rgba(53,216,200,.22); border-radius:50%; } /* LOCATION */ .rh-home-location{ background:#fff; } .rh-home-location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .rh-home-location p{ margin:28px 0; color:#607487; font-size:18px; line-height:1.7; } .rh-home-location > .wrap > div:first-child > a{ color:#087eae; text-decoration:none; font-weight:800; } .rh-home-contact-card{ padding:46px; border-radius:20px; color:#fff; background:#0b2b42; } .rh-home-contact-card > span{ color:#35d8c8; font-size:11px; font-weight:800; letter-spacing:.14em; } .rh-home-contact-card h3{ margin:18px 0; font-size:32px; } .rh-home-contact-card p{ color:rgba(255,255,255,.73); font-size:16px; } .rh-home-contact-card a{ display:inline-block; margin-top:15px; color:#35d8c8; text-decoration:none; font-weight:800; } /* RESPONSIVE */ @media (max-width: 900px){ .rh-home-hero{ padding-top:110px; } .rh-home-hero-grid, .rh-home-evaluator-card, .rh-home-app-grid, .rh-home-location-grid, .rh-home-section-head-split, .rh-home-clinic-head{ grid-template-columns:1fr; gap:44px; } .rh-home-hero-copy h1{ font-size:clamp(48px,14vw,72px); } .rh-home-body .body-3d-frame, .rh-home-body .body-3d-frame iframe{ min-height:520px; height:520px; } .rh-home-hero-strip{ grid-template-columns:1fr; } .rh-home-hero-strip div{ border-right:0; border-bottom:1px solid rgba(255,255,255,.13); } .rh-home-method-grid{ grid-template-columns:1fr 1fr; } .rh-home-clinic-gallery{ grid-template-columns:1fr 1fr; } .rh-home-clinic-main{ grid-column:1 / -1; } .rh-home-modality-grid{ grid-template-columns:1fr; } } @media (max-width: 600px){ .rh-home-hero{ padding-top:94px; } .rh-home-hero-copy h1{ font-size:49px; } .rh-home-hero-copy .rh-home-hero-lead{ font-size:18px; } .rh-home-actions{ flex-direction:column; } .rh-home-primary, .rh-home-secondary{ width:100%; } .rh-home-body .body-3d-frame, .rh-home-body .body-3d-frame iframe{ min-height:470px; height:470px; } .rh-home-services, .rh-home-method, .rh-home-clinic, .rh-home-modality, .rh-home-app, .rh-home-location{ padding:76px 0; } .rh-home-evaluator{ padding:60px 0; } .rh-home-evaluator-card{ padding:38px 24px; border-radius:20px; } .rh-home-evaluator-graphic{ min-height:300px; } .orbit-one{ width:250px; height:250px; } .orbit-two{ width:320px; height:170px; } .rh-home-method-grid, .rh-home-clinic-gallery{ grid-template-columns:1fr; } .rh-home-clinic-main{ grid-column:auto; } .rh-home-method-grid article{ min-height:auto; } .rh-home-method-grid article > span{ margin-bottom:35px; } .rh-home-app-list{ grid-template-columns:1fr; } .rh-home-app-visual{ min-height:360px; } .rh-home-app-visual img{ max-height:360px; } .rh-home-app-orbit{ width:320px; height:320px; } .rh-home-location-grid{ gap:50px; } .rh-home-contact-card{ padding:30px; } } /* ========================================================= HOME V4 · REDISEÑO ========================================================= */ .hm4-hero, .hm4-section, .hm4-evaluator, .hm4-app{ --h4-navy:#102f46; --h4-deep:#08263a; --h4-blue:#0d84b5; --h4-teal:#36d8c8; --h4-muted:#65788a; --h4-paper:#f4f8fc; --h4-line:#dce6ee; } /* HERO */ .hm4-hero{ padding:82px 0 0; background: radial-gradient( circle at 76% 40%, rgba(31,175,192,.11), transparent 32% ), #f7fbfd; color:var(--h4-navy); } .hm4-hero-grid{ display:grid; grid-template-columns:1.04fr .76fr; align-items:center; gap:76px; } .hm4-kicker{ display:block; margin-bottom:18px; color:var(--h4-blue); font-size:.72rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; } .hm4-kicker-light{ color:var(--h4-teal); } .hm4-hero h1{ margin:0 0 26px; max-width:760px; font-size:clamp(3.4rem,5vw,5.7rem); line-height:.96; letter-spacing:-.055em; font-weight:500; } .hm4-hero h1 strong{ display:block; color:var(--h4-blue); font-weight:500; } .hm4-hero-copy p{ max-width:680px; color:var(--h4-muted); font-size:1.02rem; line-height:1.75; } .hm4-hero-copy .hm4-lead{ color:var(--h4-navy); font-size:1.15rem; } .hm4-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; } .hm4-btn-primary, .hm4-btn-secondary{ display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 23px; border-radius:10px; text-decoration:none; font-weight:800; } .hm4-btn-primary{ gap:20px; background:var(--h4-teal); color:#082a3f; } .hm4-btn-secondary{ border:1px solid var(--h4-line); background:white; color:var(--h4-navy); } .hm4-mini-benefits{ display:flex; flex-wrap:wrap; gap:26px; margin-top:31px; color:#527084; font-size:.75rem; } .hm4-mini-benefits span::before{ content:"✓"; margin-right:7px; color:var(--h4-blue); } /* HUMAN BODY NO SE MODIFICA */ .hm4-hero .hero-body-3d{ margin:0; } /* FRANJA */ .hm4-hero-process{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:55px; border-radius:11px 11px 0 0; overflow:hidden; background:#eaf4fc; } .hm4-hero-process div{ display:flex; align-items:center; gap:18px; padding:22px 28px; border-right:1px solid #cddfeb; } .hm4-hero-process div:last-child{ border:0; } .hm4-hero-process b{ color:var(--h4-blue); } .hm4-hero-process span{ color:var(--h4-navy); font-size:.85rem; font-weight:750; } /* GENERAL SECTIONS */ .hm4-section{ padding:100px 0; } .hm4-section-head{ margin-bottom:46px; } .hm4-section-head-split, .hm4-clinic-head{ display:grid; grid-template-columns:1fr .72fr; gap:80px; align-items:end; } .hm4-section-head h2, .hm4-modalities-title h2, .hm4-contact h2{ margin:0; color:var(--h4-navy); font-size:clamp(2.7rem,4vw,4.2rem); line-height:1; letter-spacing:-.045em; font-weight:500; } .hm4-section-head h2 strong, .hm4-modalities-title h2 strong, .hm4-contact h2 strong{ display:block; color:var(--h4-blue); font-weight:500; } .hm4-section-head p, .hm4-clinic-head p{ margin:0; color:var(--h4-muted); line-height:1.7; } .hm4-center-link{ margin-top:38px; text-align:center; } .hm4-center-link a{ color:var(--h4-blue); text-decoration:none; font-weight:800; } /* SERVICIOS */ .hm4-services{ background:white; } .hm4-service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .hm4-service-card{ overflow:hidden; border:1px solid var(--h4-line); border-radius:15px; background:white; text-decoration:none; color:inherit; box-shadow: 0 8px 22px rgba(15,48,70,.04); } .hm4-service-card img{ display:block; width:100%; height:190px; object-fit:cover; } .hm4-service-card div{ padding:20px; } .hm4-service-card h3{ margin:0 0 10px; color:var(--h4-navy); font-size:1.17rem; } .hm4-service-card p{ min-height:62px; color:var(--h4-muted); font-size:.85rem; line-height:1.55; } .hm4-service-card span{ color:var(--h4-blue); font-size:.78rem; font-weight:800; } /* EVALUADOR */ .hm4-evaluator{ padding:78px 0; background:#fff; } .hm4-evaluator-panel{ position:relative; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:45px; min-height:430px; padding:55px; overflow:hidden; border-radius:24px; background: radial-gradient( circle at 76% 50%, rgba(25,151,205,.28), transparent 30% ), linear-gradient( 120deg, #08273c, #0d3c58 ); box-shadow: 0 18px 50px rgba(8,37,56,.13); } .hm4-evaluator h2{ margin:0 0 20px; color:white; font-size:clamp(2.7rem,4vw,4.1rem); line-height:1; letter-spacing:-.045em; font-weight:500; } .hm4-evaluator h2 strong{ display:block; color:var(--h4-teal); font-weight:500; } .hm4-evaluator p{ color:rgba(255,255,255,.78); line-height:1.7; } .hm4-evaluator small{ display:block; color:rgba(255,255,255,.57); } .hm4-evaluator-copy > a{ display:inline-flex; margin-top:25px; padding:14px 20px; border-radius:9px; background:var(--h4-teal); color:#062a40; text-decoration:none; font-weight:850; } .hm4-evaluator-images{ position:relative; min-height:330px; } .hm4-evaluator-images::before, .hm4-evaluator-images::after{ content:""; position:absolute; left:50%; top:50%; border:1px solid rgba(51,214,203,.20); border-radius:50%; transform:translate(-50%,-50%); } .hm4-evaluator-images::before{ width:470px; height:270px; } .hm4-evaluator-images::after{ width:310px; height:310px; } .hm4-eval-card{ position:absolute; z-index:2; width:165px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:14px; background: rgba(255,255,255,.10); box-shadow: 0 15px 30px rgba(0,0,0,.16); } .hm4-eval-card img{ width:100%; height:130px; display:block; object-fit:cover; } .hm4-eval-card div{ padding:13px; color:white; } .hm4-eval-card b{ display:block; margin-bottom:5px; color:var(--h4-teal); } .hm4-eval-card span{ font-size:.8rem; font-weight:800; } .hm4-eval-one{ left:0; bottom:25px; } .hm4-eval-two{ left:50%; top:0; transform:translateX(-50%); } .hm4-eval-three{ right:0; bottom:25px; } /* MÉTODO */ .hm4-method{ background:#f6f9fc; } .hm4-section-head.centered{ max-width:830px; margin-left:auto; margin-right:auto; text-align:center; } .hm4-section-head.centered p{ max-width:690px; margin:20px auto 0; } .hm4-method-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .hm4-method-grid article{ padding:26px; border:1px solid var(--h4-line); border-radius:15px; background:white; } .hm4-method-grid article > span{ display:block; margin-bottom:14px; color:#5eb5d7; font-size:2.3rem; font-weight:750; } .hm4-method-grid h3{ min-height:55px; color:var(--h4-navy); font-size:1.08rem; } .hm4-method-grid img{ display:block; width:100%; height:135px; margin:18px 0; border-radius:10px; object-fit:cover; } .hm4-method-grid p{ color:var(--h4-muted); font-size:.82rem; line-height:1.55; } /* CLÍNICA */ .hm4-clinic{ background:white; } .hm4-clinic-grid{ display:grid; grid-template-columns:1.4fr .85fr .85fr; gap:18px; margin-top:45px; } .hm4-clinic-grid figure{ position:relative; min-height:300px; margin:0; overflow:hidden; border-radius:15px; } .hm4-clinic-grid img{ display:block; width:100%; height:100%; min-height:300px; object-fit:cover; } .hm4-clinic-grid figcaption{ position:absolute; left:14px; bottom:14px; padding:8px 11px; border-radius:7px; background:rgba(5,32,49,.80); color:white; font-size:.72rem; font-weight:800; } /* MODALIDADES */ .hm4-modalities{ background:#f5f8fc; } .hm4-modalities-layout{ display:grid; grid-template-columns:.7fr 1.3fr; gap:55px; align-items:start; } .hm4-modality-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:17px; } .hm4-modality-grid article{ display:grid; grid-template-columns:135px 1fr; gap:18px; padding:17px; border:1px solid var(--h4-line); border-radius:14px; background:white; } .hm4-modality-grid img{ width:135px; height:135px; border-radius:10px; object-fit:cover; } .hm4-modality-grid h3{ margin:4px 0 8px; color:var(--h4-navy); } .hm4-modality-grid p{ margin:0 0 12px; color:var(--h4-muted); font-size:.78rem; line-height:1.55; } .hm4-modality-grid a{ color:var(--h4-blue); text-decoration:none; font-size:.76rem; font-weight:850; } /* APP */ .hm4-app{ padding:78px 0; background:white; } .hm4-app-panel{ display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; min-height:470px; padding:52px; overflow:hidden; border-radius:23px; background: radial-gradient( circle at 74% 50%, rgba(20,151,203,.33), transparent 28% ), linear-gradient( 120deg, #07283e, #0c405d ); color:white; } .hm4-app h2{ margin:0 0 20px; font-size:clamp(2.6rem,3.8vw,4rem); line-height:1; letter-spacing:-.045em; font-weight:500; } .hm4-app h2 strong{ display:block; color:var(--h4-teal); font-weight:500; } .hm4-app-copy p{ color:rgba(255,255,255,.74); line-height:1.65; } .hm4-app-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 25px; margin:25px 0; } .hm4-app-features span{ color:white; font-size:.85rem; } .hm4-app-copy small{ display:block; color:rgba(255,255,255,.58); } .hm4-app-copy > a{ display:inline-block; margin-top:22px; color:var(--h4-teal); text-decoration:none; font-weight:850; } .hm4-app-image{ position:relative; display:flex; align-items:center; justify-content:center; min-height:360px; } .hm4-app-image img{ position:relative; z-index:2; width:min(100%,550px); max-height:390px; object-fit:contain; } .hm4-app-orbit{ position:absolute; width:410px; height:280px; border:1px solid rgba(51,216,200,.22); border-radius:50%; transform:rotate(-10deg); } /* CONTACTO */ .hm4-contact{ background:white; } .hm4-contact-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:center; } .hm4-contact h2{ max-width:570px; } .hm4-contact p{ color:var(--h4-muted); line-height:1.7; } .hm4-contact > .wrap > div > a{ color:var(--h4-blue); text-decoration:none; font-weight:850; } .hm4-contact aside{ padding:40px; border-radius:18px; background:var(--h4-deep); color:white; } .hm4-contact aside > span{ color:var(--h4-teal); font-size:.7rem; font-weight:850; letter-spacing:.1em; } .hm4-contact aside h3{ margin:14px 0; font-size:1.8rem; } .hm4-contact aside p{ color:rgba(255,255,255,.68); } .hm4-contact aside a{ display:inline-flex; margin-top:15px; padding:13px 17px; border-radius:9px; background:var(--h4-teal); color:#05283d; text-decoration:none; font-weight:850; } /* RESPONSIVE */ @media(max-width:1050px){ .hm4-hero-grid, .hm4-section-head-split, .hm4-clinic-head, .hm4-evaluator-panel, .hm4-modalities-layout, .hm4-app-panel, .hm4-contact-grid{ grid-template-columns:1fr; } .hm4-service-grid, .hm4-method-grid{ grid-template-columns:repeat(2,1fr); } .hm4-clinic-grid{ grid-template-columns:1fr 1fr; } .hm4-clinic-large{ grid-column:1 / -1; } } @media(max-width:700px){ .hm4-hero{ padding-top:50px; } .hm4-hero h1{ font-size:clamp(3rem,13vw,4.5rem); } .hm4-hero-process{ grid-template-columns:1fr; } .hm4-hero-process div{ border-right:0; border-bottom:1px solid #cddfeb; } .hm4-section{ padding:72px 0; } .hm4-service-grid, .hm4-method-grid, .hm4-clinic-grid, .hm4-modality-grid{ grid-template-columns:1fr; } .hm4-clinic-large{ grid-column:auto; } .hm4-evaluator-panel, .hm4-app-panel{ padding:30px 23px; } .hm4-evaluator-images{ min-height:500px; } .hm4-eval-one{ left:0; } .hm4-eval-two{ top:160px; } .hm4-eval-three{ bottom:0; } .hm4-modality-grid article{ grid-template-columns:110px 1fr; } .hm4-modality-grid img{ width:110px; height:110px; } .hm4-app-features{ grid-template-columns:1fr; } .hm4-app-image img{ width:110%; max-width:none; } } /* ========================================================= FIN HOME V4 ========================================================= */ /* ========================================================= HOME · HUMAN BODY SIN FONDO EXTERIOR ========================================================= */ .hm4-hero .hero-body-3d{ background:transparent !important; box-shadow:none !important; border:0 !important; } .hm4-hero .hero-body-3d::before, .hm4-hero .hero-body-3d::after{ display:none !important; content:none !important; } .hm4-hero .body-3d-frame{ background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; overflow:visible !important; } .hm4-hero .body-3d-frame iframe{ display:block; background:transparent !important; } /* ========================================================= FIN ========================================================= */ /* ========================================================= HOME · HUMAN BODY Restaurar presentación original del componente 360° NO modifica Human Body, viewer, frames, hotspots ni JS ========================================================= */ .rh-home-hero .rh-home-human-wrap, .rh-home-hero .rh-home-human-stage, .rh-home-hero .rh-home-human-card, .rh-home-hero .rh-home-human-shell, .rh-home-hero .home-hero-body, .rh-home-hero .home-hero-body-frame { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* El contenedor exterior deja de dibujar una tarjeta/fondo */ .rh-home-hero .rh-home-human-wrap, .rh-home-hero .rh-home-human-stage, .rh-home-hero .rh-home-human-card, .rh-home-hero .home-hero-body { border: 0 !important; border-radius: 0 !important; padding: 0 !important; } /* El marco queda ajustado exactamente al Human Body */ .rh-home-hero .rh-home-human-shell, .rh-home-hero .home-hero-body-frame { position: relative !important; width: min(100%, 475px) !important; margin-inline: auto !important; padding: 0 !important; border: 1px solid rgba(18, 63, 73, .12) !important; border-radius: 30px !important; overflow: hidden !important; } /* El Human Body conserva su proporción original 9:16 */ .rh-home-hero #human-body-shell { position: relative !important; width: 100% !important; max-width: 100% !important; aspect-ratio: 9 / 16 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 28px !important; background: transparent !important; box-shadow: none !important; } /* Viewer e imagen: comportamiento original */ .rh-home-hero #viewer { position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .rh-home-hero #frame { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Evitar pseudo-elementos decorativos del diseño nuevo */ .rh-home-hero .rh-home-human-wrap::before, .rh-home-hero .rh-home-human-wrap::after, .rh-home-hero .rh-home-human-stage::before, .rh-home-hero .rh-home-human-stage::after, .rh-home-hero .rh-home-human-card::before, .rh-home-hero .rh-home-human-card::after, .rh-home-hero .home-hero-body::before, .rh-home-hero .home-hero-body::after, .rh-home-hero .home-hero-body-frame::before, .rh-home-hero .home-hero-body-frame::after { display: none !important; content: none !important; } @media (max-width: 760px) { .rh-home-hero .rh-home-human-shell, .rh-home-hero .home-hero-body-frame { width: min(100%, 390px) !important; } } /* ========================================================= HOME V4 · HUMAN BODY · MARCO FINAL Solo presentación exterior. NO modifica iframe / body-embed / Human Body. ========================================================= */ /* Quitar cualquier decoración heredada detrás */ .hm4-hero .hero-body-3d{ position:relative !important; background:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; overflow:visible !important; } /* Eliminar formas/pseudo-elementos que producen las esquinas diagonales superiores */ .hm4-hero .hero-body-3d::before, .hm4-hero .hero-body-3d::after{ content:none !important; display:none !important; } /* Marco real del Human Body */ .hm4-hero .body-3d-frame{ position:relative !important; width:100% !important; max-width:475px !important; margin:0 auto !important; padding:0 !important; overflow:hidden !important; background:transparent !important; border:5px solid #fff !important; border-radius:32px !important; box-shadow: 0 18px 45px rgba(0,0,0,.13), 0 5px 16px rgba(0,0,0,.08) !important; filter:none !important; } /* Nada decorativo adicional en el marco */ .hm4-hero .body-3d-frame::before, .hm4-hero .body-3d-frame::after{ content:none !important; display:none !important; } /* El iframe llena exactamente el marco */ .hm4-hero .body-3d-frame iframe{ display:block !important; width:100% !important; border:0 !important; border-radius:27px !important; background:transparent !important; } /* Móvil */ @media(max-width:700px){ .hm4-hero .body-3d-frame{ max-width:390px !important; border-width:4px !important; border-radius:28px !important; box-shadow: 0 14px 34px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07) !important; } .hm4-hero .body-3d-frame iframe{ border-radius:24px !important; } } /* ========================================================= FIN HUMAN BODY MARCO FINAL ========================================================= */ /* ========================================================= HOME · HUMAN BODY · AJUSTE RESPONSIVE Desktop: tamaño más contenido Móvil: Human Body entre los dos párrafos del hero NO modifica Human Body, viewer, hotspots ni JS ========================================================= */ /* DESKTOP */ @media(min-width:701px){ .hm4-hero .body-3d-frame{ max-width:420px !important; } } /* MÓVIL */ @media(max-width:700px){ /* * La caja de copy deja de intervenir en el layout * para permitir intercalar el Human Body entre sus textos. * El DOM y el componente Human Body permanecen intactos. */ .hm4-hero .hm4-hero-copy{ display:contents; } /* Orden del hero */ .hm4-hero .hm4-kicker{ order:1; } .hm4-hero h1{ order:2; } .hm4-hero .hm4-lead{ order:3; } .hm4-hero .hero-body-3d{ order:4; width:100%; margin-top:8px; margin-bottom:10px; } .hm4-hero .hm4-hero-copy > p:not(.hm4-lead){ order:5; } .hm4-hero .hm4-actions{ order:6; } .hm4-hero .hm4-mini-benefits{ order:7; } /* * El Human Body conserva su tamaño móvil actual. * Solo aseguramos que quede centrado dentro de su nueva posición. */ .hm4-hero .body-3d-frame{ width:100% !important; max-width:390px !important; margin-left:auto !important; margin-right:auto !important; } } /* ========================================================= FIN AJUSTE HUMAN BODY RESPONSIVE ========================================================= */ /* ========================================================= HOME · HERO MÓVIL COMPACTO Elimina espacios heredados del grid desktop. Human Body permanece intacto. ========================================================= */ @media(max-width:700px){ /* El hero deja de usar la distribución grid de desktop */ .hm4-hero .hm4-hero-grid{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; padding-top:28px !important; } /* Los elementos internos del copy participan directamente */ .hm4-hero .hm4-hero-copy{ display:contents !important; } /* Kicker */ .hm4-hero .hm4-kicker{ order:1 !important; margin:0 0 14px !important; } /* Título */ .hm4-hero h1{ order:2 !important; margin:0 0 22px !important; } /* Primer párrafo */ .hm4-hero .hm4-lead{ order:3 !important; margin:0 0 22px !important; } /* Human Body */ .hm4-hero .hero-body-3d{ order:4 !important; width:100% !important; margin:0 0 24px !important; padding:0 !important; } .hm4-hero .body-3d-frame{ width:100% !important; max-width:390px !important; margin:0 auto !important; } /* Segundo párrafo */ .hm4-hero .hm4-hero-copy > p:not(.hm4-lead){ order:5 !important; margin:0 0 22px !important; } /* Botones */ .hm4-hero .hm4-actions{ order:6 !important; margin:0 0 20px !important; } /* Beneficios */ .hm4-hero .hm4-mini-benefits{ order:7 !important; margin:0 !important; } } /* ========================================================= FIN HERO MÓVIL COMPACTO ========================================================= */ /* ========================================================= HOME · AJUSTE FINAL ESPACIO SUPERIOR MÓVIL ========================================================= */ @media(max-width:700px){ .hm4-hero .hm4-hero-grid{ padding-top:8px !important; } } /* ========================================================= FIN AJUSTE ========================================================= */ /* ========================================================= HOME · ELIMINAR ESPACIO ENTRE MENÚ Y HERO EN MÓVIL ========================================================= */ @media(max-width:700px){ .hm4-hero{ padding-top:0 !important; } .hm4-hero .hm4-hero-grid{ padding-top:14px !important; } } /* ========================================================= FIN ========================================================= */ /* ========================================================= HUMAN BODY · ETIQUETA ORIGINAL ========================================================= */ .home-body-label { position:absolute; z-index:80; top:22px; left:50%; transform:translateX(-50%); width:max-content; padding:7px 13px; border:1px solid rgba(255,255,255,.29); border-radius:999px; background:rgba(12,42,47,.66); color:rgba(255,255,255,.94); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; pointer-events:none; } @media (max-width:700px){ .home-body-label{ top:18px; } } /* === CONOCE · MISION VISION FISIO 20260910 === */ .conoce-values{ background:#fff; } .conoce-values-purpose{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:42px; } .conoce-values-purpose article{ padding:34px; border:1px solid rgba(16,42,67,.10); border-radius:16px; background:#f7faff; } .conoce-values-label{ display:inline-block; margin-bottom:22px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#1689b0; } .conoce-values-purpose h3{ margin:0 0 14px; max-width:520px; } .conoce-values-purpose p{ margin:0; } .conoce-values-heading{ max-width:760px; margin:78px auto 34px; text-align:center; } .conoce-values-heading h2{ margin-top:10px; } .conoce-values-heading h2 span{ color:#1689b0; } .conoce-fisio-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } .conoce-fisio-grid article{ min-width:0; padding:24px 20px; border:1px solid rgba(16,42,67,.10); border-radius:14px; background:#fff; } .conoce-fisio-grid article > span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-bottom:22px; border-radius:9px; background:#e8f7ff; color:#1689b0; font-size:16px; font-weight:800; } .conoce-fisio-grid h3{ margin:0 0 10px; font-size:18px; } .conoce-fisio-grid p{ margin:0; font-size:14px; line-height:1.65; } @media (max-width:900px){ .conoce-fisio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:700px){ .conoce-values-purpose{ grid-template-columns:1fr; } .conoce-values-purpose article{ padding:26px 22px; } .conoce-values-heading{ margin-top:58px; } .conoce-fisio-grid{ grid-template-columns:1fr; } .conoce-fisio-grid article{ display:grid; grid-template-columns:42px 1fr; gap:14px; padding:20px; } .conoce-fisio-grid article > span{ margin:0; } } /* === DANA PERSONAL BRAND 20260910 === */ .conoce-v2-profile-brand{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .conoce-v2-profile-brand img{ display:block; width:170px; max-width:100%; height:auto; object-fit:contain; } @media (max-width:700px){ .conoce-v2-profile-brand img{ width:145px; } } /* === DANA BRAND COLUMN FINAL 20260910 === */ .conoce-v2-profile-identity{ display:flex; align-items:center; justify-content:center; padding:30px; } .conoce-v2-profile-brand{ display:flex; align-items:center; justify-content:center; width:100%; } .conoce-v2-profile-brand img{ display:block; width:min(100%, 310px); height:auto; object-fit:contain; } @media (max-width:700px){ .conoce-v2-profile-identity{ padding:24px 18px; } .conoce-v2-profile-brand img{ width:min(100%, 250px); } } /* === DANA BRAND MOBILE FINAL 20260910 === */ @media (max-width:700px){ .conoce-v2-profile{ gap:0; } .conoce-v2-profile-identity{ padding:4px 18px 24px; align-items:center; justify-content:center; } .conoce-v2-profile-brand img{ width:min(100%, 250px); } .conoce-v2-profile-copy{ padding-top:24px; } } /* ========================================================= REACONDICIONAMIENTO · AJUSTE AISLADO DEL HERO ========================================================= */ .service-master-hero--reconditioning .service-master-hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap:50px; } .service-master-hero--reconditioning .service-master-hero-copy { min-width:0; } .service-master-hero--reconditioning .service-master-hero-copy h1 { font-size:clamp(3rem, 4.25vw, 4.8rem); letter-spacing:-.055em; } @media(max-width:1000px) and (min-width:901px) { .service-master-hero--reconditioning .service-master-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap:32px; } .service-master-hero--reconditioning .service-master-hero-copy h1 { font-size:clamp(2.65rem, 4.2vw, 3.4rem); } } @media(max-width:900px) { .service-master-hero--reconditioning .service-master-hero-grid { grid-template-columns:1fr; } .service-master-hero--reconditioning .service-master-photo { width:100%; max-width:600px; justify-self:center; } .service-master-hero--reconditioning .service-master-hero-copy h1 { font-size:clamp(3rem, 8vw, 4.2rem); } } @media(max-width:600px) { .service-master-hero--reconditioning .service-master-hero-copy h1 { font-size:min(3rem, 8.5vw); } }