:root { --navy:#082b3a; --teal:#0e5962; --aqua:#48c7c8; --mist:#eaf6f4; --ivory:#fbf7ef; --gold:#d6a64f; --ink:#18343c; --muted:#587078; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ivory); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:96px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; gap:44px; background:rgba(251,247,239,.96); position:relative; z-index:20; border-bottom:1px solid rgba(8,43,58,.06); }
.brand { display:flex; align-items:center; gap:14px; color:var(--navy); font-family:Georgia,serif; font-size:clamp(23px,2.2vw,38px); letter-spacing:.04em; white-space:nowrap; margin-right:auto; }
.brand em { color:#2295a1; font-style:normal; font-weight:400; }
.brand-mark { width:48px; height:48px; border:3px solid var(--teal); border-left-color:var(--gold); border-bottom-color:transparent; border-radius:50%; transform:rotate(-22deg); }
.desktop-nav { display:flex; align-items:center; gap:clamp(25px,3vw,52px); font-weight:600; color:var(--navy); }
.desktop-nav a { position:relative; padding:34px 0 28px; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:20px; height:2px; background:var(--gold); transition:right .2s; }
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav a.active::after { right:0; }
.header-cta { border:1px solid var(--gold); padding:15px 25px; font-weight:700; color:var(--navy); transition:.2s; }
.header-cta:hover { background:var(--navy); border-color:var(--navy); color:white; }
.mobile-menu { display:none; }
.hero { min-height:calc(100vh - 96px); position:relative; isolation:isolate; overflow:hidden; padding:clamp(76px,9vw,138px) clamp(24px,5vw,76px) 170px; background:linear-gradient(90deg,var(--ivory) 0%,var(--ivory) 45%,transparent 58%); }
.hero-media { position:absolute; inset:0 0 0 43%; background:url('https://sanidad360.mx/assets/hero-sanidad360.png') 60% center/cover no-repeat; z-index:0; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ivory) 0%,rgba(251,247,239,.58) 16%,transparent 45%),linear-gradient(0deg,rgba(8,43,58,.2),transparent 40%); }
.hero-shape { position:absolute; top:-12%; left:38%; width:22%; height:125%; border-radius:50%; border-left:38px solid rgba(72,199,200,.22); transform:rotate(-14deg); z-index:1; }
.hero-copy { width:min(610px,46vw); position:relative; z-index:2; animation:rise .7s ease-out both; }
.eyebrow { margin:0 0 22px; color:#b77b1d; font-size:14px; text-transform:uppercase; letter-spacing:.15em; font-weight:800; }
h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; font-weight:500; color:var(--navy); }
h1 { margin:0; font-size:clamp(47px,5vw,78px); line-height:1.01; letter-spacing:-.035em; }
h1 em { font-style:normal; }
.title-line { display:block; width:86px; height:3px; margin:29px 0; background:var(--aqua); }
.hero-lede { max-width:600px; font-size:clamp(18px,1.4vw,23px); line-height:1.55; color:#314a51; margin:0; }
.hero-actions { display:flex; align-items:center; gap:38px; margin-top:32px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:58px; padding:0 28px; font-weight:700; transition:transform .2s,background .2s; }
.button span,.text-link span { transition:transform .2s; }
.button:hover span,.text-link:hover span { transform:translateX(5px); }
.button.primary { background:var(--navy); color:white; }
.button.primary:hover { background:var(--teal); transform:translateY(-2px); }
.text-link { color:var(--teal); border-bottom:2px solid var(--aqua); padding:13px 0 8px; font-weight:700; display:inline-flex; gap:15px; }
.service-ribbon { position:absolute; z-index:3; left:clamp(24px,5vw,76px); right:clamp(24px,5vw,76px); bottom:30px; min-height:130px; display:grid; grid-template-columns:1.55fr repeat(4,1fr); background:rgba(239,249,248,.95); border:1px solid rgba(14,89,98,.12); border-radius:16px; box-shadow:0 20px 50px rgba(8,43,58,.12); backdrop-filter:blur(12px); }
.ribbon-promise,.ribbon-service { display:flex; align-items:center; justify-content:center; padding:22px; }
.ribbon-promise { justify-content:flex-start; gap:22px; }
.ribbon-promise strong { color:var(--navy); font:500 21px/1.3 Georgia,serif; }
.people-icon { width:64px; height:64px; border:1.5px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:28px; }
.ribbon-service { flex-direction:column; gap:13px; text-align:center; border-left:1px solid rgba(14,89,98,.18); transition:background .2s,transform .2s; }
.ribbon-service:hover { background:white; transform:translateY(-4px); }
.ribbon-service span { color:var(--teal); font-size:31px; line-height:1; }
.ribbon-service strong { color:var(--navy); font-size:14px; }
.section { padding:clamp(82px,9vw,140px) clamp(24px,7vw,110px); }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:end; margin-bottom:65px; }
.section h2,.audiences h2,.contact-section h2 { font-size:clamp(39px,4.5vw,68px); line-height:1.06; letter-spacing:-.035em; margin:0; }
.section h2 em { font-style:italic; color:var(--teal); }
.section-heading>p,.method-copy>p,.about-copy>p { color:var(--muted); line-height:1.75; font-size:17px; margin:0; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #d9e6e3; background:white; }
.service-card { padding:38px 30px 34px; min-height:520px; display:flex; flex-direction:column; position:relative; border-right:1px solid #d9e6e3; transition:transform .25s,box-shadow .25s; overflow:hidden; }
.service-card:last-child { border-right:0; }
.service-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--aqua); transform:scaleX(0); transform-origin:left; transition:.25s; }
.service-card:hover { transform:translateY(-8px); box-shadow:0 22px 50px rgba(8,43,58,.12); z-index:2; }
.service-card:hover::before { transform:scaleX(1); }
.card-number { color:#92a4a8; font:13px Arial,sans-serif; letter-spacing:.12em; }
.card-icon { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:35px 0 28px; background:var(--mist); color:var(--teal); font-size:30px; }
.service-card h3 { margin:0 0 18px; font-size:29px; line-height:1.08; }
.service-card p { color:var(--muted); line-height:1.65; min-height:132px; }
.service-card ul { margin:0 0 28px; padding:0; list-style:none; color:var(--ink); }
.service-card li { padding:8px 0 8px 18px; position:relative; border-bottom:1px solid #eef2f1; font-size:14px; }
.service-card li::before { content:""; width:5px;height:5px;border-radius:50%;background:var(--gold);position:absolute;left:0;top:14px; }
.service-card a { margin-top:auto; color:var(--teal); font-size:14px; font-weight:700; display:flex; justify-content:space-between; }
.audiences { display:grid; grid-template-columns:1fr 1fr; background:var(--navy); color:white; }
.audiences article { padding:clamp(66px,7vw,110px); position:relative; overflow:hidden; }
.audiences article+article { background:var(--teal); }
.audiences article::after { content:""; position:absolute; width:360px;height:360px;border:1px solid rgba(72,199,200,.25);border-radius:50%;right:-180px;bottom:-190px; }
.audiences .eyebrow { color:var(--gold); }
.audiences h2 { color:white; font-size:clamp(38px,3.8vw,58px); }
.audiences p:not(.eyebrow) { max-width:580px; line-height:1.7; color:rgba(255,255,255,.76); font-size:17px; }
.tag-list { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0; }
.tag-list span { border:1px solid rgba(255,255,255,.28); padding:9px 13px; border-radius:20px; font-size:13px; }
.text-link.light { color:white; border-color:var(--gold); position:relative; z-index:1; }
.method-section { display:grid; grid-template-columns:.88fr 1.12fr; gap:10vw; align-items:center; background:#f1f7f5; }
.method-copy h2 { margin-bottom:28px; }
.method-copy .button { margin-top:30px; }
.method-steps { border-top:1px solid #bfd6d2; }
.method-steps article { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid #bfd6d2; }
.method-steps article>span { width:45px;height:45px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gold);color:#a66e17;font-size:13px; }
.method-steps h3 { margin:0 0 7px; font-size:27px; }
.method-steps p { color:var(--muted); margin:0; line-height:1.55; }
.impact-strip { padding:55px 6vw; background:var(--ivory); display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:30px; align-items:center; border-block:1px solid #dedbd2; }
.impact-strip>p { font:italic 25px/1.35 Georgia,serif; color:var(--navy); margin:0; }
.impact-strip div { display:flex; flex-direction:column; border-left:1px solid #d8c9ac; padding-left:24px; }
.impact-strip strong { color:var(--teal); font:24px Georgia,serif; }
.impact-strip span { color:var(--muted); margin-top:6px; font-size:13px; }
.about-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; align-items:center; background:white; }
.about-visual { min-height:560px; background:radial-gradient(circle at center,#f7faf8 0 35%,#e9f3f0 36% 55%,#d7ebe7 56% 65%,transparent 66%),linear-gradient(145deg,var(--ivory),#eaf5f2); display:grid; place-items:center; position:relative; }
.about-visual::before,.about-visual::after { content:"";position:absolute;border-radius:50%;border:1px solid rgba(14,89,98,.17); }
.about-visual::before { width:76%;height:76%; }.about-visual::after { width:92%;height:92%; }
.circle-statement { text-align:center; position:relative; z-index:1; }
.circle-statement span { display:block;color:var(--gold);font:55px Georgia,serif; }
.circle-statement strong { color:var(--navy);font:500 25px/1.45 Georgia,serif; }
.about-copy h2 { margin-bottom:30px; }
.about-copy>p { margin-bottom:18px; }
blockquote { margin:35px 0 0; padding:22px 0 22px 26px; border-left:3px solid var(--gold); color:var(--teal); font:italic 23px/1.5 Georgia,serif; }
.faq-section { background:var(--ivory); display:grid; grid-template-columns:.65fr 1.35fr; gap:10vw; }
.faq-list { border-top:1px solid #c8d3d1; }
.faq-list details { border-bottom:1px solid #c8d3d1; padding:0 5px; }
.faq-list summary { cursor:pointer; list-style:none; padding:28px 0; display:flex; justify-content:space-between; gap:20px; color:var(--navy); font:500 21px Georgia,serif; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { font:28px Arial,sans-serif;color:var(--teal); transition:.2s; }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list details p { color:var(--muted); line-height:1.7; margin:0 50px 25px 0; }
.contact-section { padding:clamp(80px,9vw,130px) clamp(24px,8vw,130px); background:var(--navy); color:white; display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.contact-section h2 { color:white; margin-bottom:28px; }
.contact-copy>p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.7; font-size:17px; }
.contact-note { margin-top:40px; display:flex; flex-direction:column; gap:8px; border-left:2px solid var(--gold); padding-left:20px; }
.contact-note strong { font-family:Georgia,serif;font-size:20px; }.contact-note span { color:rgba(255,255,255,.6);font-size:13px; }
.contact-form { display:grid; gap:20px; }
.contact-form label { display:grid; gap:9px; font-size:13px; color:#c9d8d9; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.24); color:white; padding:15px 16px; font:inherit; border-radius:0; outline:none; }
.contact-form select option { color:var(--navy); }.contact-form textarea { resize:vertical; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--aqua); box-shadow:0 0 0 2px rgba(72,199,200,.12); }
.contact-form .button { border:0; background:var(--gold); color:var(--navy); cursor:pointer; justify-self:start; }
.contact-form small { color:rgba(255,255,255,.5); }
footer { padding:65px clamp(24px,6vw,90px) 28px; background:#061f2a; color:white; display:grid; grid-template-columns:1fr auto; gap:35px; align-items:center; }
footer .brand { color:white; font-size:27px; }
footer .brand-mark { width:39px;height:39px; }
footer>p { grid-column:1; color:#9fb4b8; margin:0; }
footer>nav { grid-column:2;grid-row:1/3;display:flex;gap:28px;color:#dbe4e5;font-size:14px; }
.footer-bottom { grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:25px;display:flex;justify-content:space-between;color:#789096;font-size:12px; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@media (max-width:1050px) { .desktop-nav,.header-cta { display:none; } .mobile-menu { display:block; position:relative; } .mobile-menu summary { list-style:none; width:42px; height:42px; display:grid; align-content:center; gap:6px; cursor:pointer; } .mobile-menu summary::-webkit-details-marker { display:none; } .mobile-menu summary span { height:2px; width:28px; background:var(--navy); } .mobile-menu nav { position:absolute; right:0; top:52px; width:230px; background:white; padding:18px; box-shadow:0 16px 40px rgba(8,43,58,.18); display:grid; } .mobile-menu nav a { padding:12px; font-weight:700; } .hero-copy { width:min(650px,58vw); } .service-ribbon { grid-template-columns:repeat(4,1fr); } .ribbon-promise { display:none; } }
@media (max-width:1050px) { .service-grid { grid-template-columns:1fr 1fr; }.service-card:nth-child(2){border-right:0}.service-card{border-bottom:1px solid #d9e6e3}.impact-strip{grid-template-columns:1fr 1fr 1fr}.impact-strip>p{grid-column:1/-1}.method-section,.about-section,.faq-section{gap:6vw}.contact-section{gap:6vw} }
@media (max-width:720px) { .site-header { height:76px; padding-inline:20px; } .brand { font-size:22px;gap:9px }.brand-mark { width:35px;height:35px;border-width:2px } .hero { min-height:auto; padding:52px 22px 26px; display:flex; flex-direction:column; background:var(--ivory); } .hero-media { position:relative; inset:auto; width:calc(100% + 44px); margin:44px -22px 0; height:390px; background-position:64% center; z-index:0; order:2; } .hero-media::after { background:linear-gradient(0deg,rgba(8,43,58,.2),transparent 45%); } .hero-shape { display:none; } .hero-copy { width:100%; } h1 { font-size:47px; } .hero-lede { font-size:18px; } .hero-actions { gap:18px; align-items:stretch; flex-direction:column; } .button { width:100%; } .text-link { align-self:flex-start; } .service-ribbon { position:relative; inset:auto; order:3; margin:-42px 0 0; grid-template-columns:1fr 1fr; border-radius:12px; } .ribbon-service { min-height:115px; border-bottom:1px solid rgba(14,89,98,.13); } .section-heading,.audiences,.method-section,.about-section,.faq-section,.contact-section { grid-template-columns:1fr; }.section-heading{gap:28px;margin-bottom:42px}.section{padding:78px 22px}.service-grid{grid-template-columns:1fr}.service-card,.service-card:nth-child(2){border-right:0;min-height:auto}.service-card p{min-height:auto}.audiences article{padding:70px 24px}.method-section{gap:55px}.impact-strip{grid-template-columns:1fr 1fr;padding:50px 24px}.impact-strip>p{grid-column:1/-1}.impact-strip div{padding-left:15px}.impact-strip strong{font-size:20px}.about-visual{min-height:380px;order:2}.about-copy{order:1}.faq-section{gap:44px}.contact-section{padding:75px 24px;gap:55px}footer{grid-template-columns:1fr;padding:50px 24px 25px}footer>p,footer>nav,.footer-bottom{grid-column:1;grid-row:auto}footer>nav{flex-wrap:wrap}.footer-bottom{flex-direction:column;gap:10px} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }