:root { --ink:#14213d; --muted:#526077; --brand:#087fa2; --brand-dark:#046483; --accent:#20b386; --line:#dce5ea; --surface:#f5fafb; --white:#fff; --shadow:0 14px 35px rgba(15,50,70,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:auto; scroll-padding-top:84px; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button,input,select,textarea { font:inherit; }
.container { width:min(1120px,calc(100% - 40px)); margin-inline:auto; } .section { padding:92px 0; } .section-tint { background:var(--surface); }
.skip-link { position:fixed; left:12px; top:-48px; z-index:100; background:var(--ink); color:#fff; padding:9px 14px; border-radius:8px; transition:top .2s; } .skip-link:focus { top:12px; }
.site-header { position:sticky; z-index:20; top:0; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(220,229,234,.9); backdrop-filter:blur(12px); }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand { flex:none; } .brand img { width:178px; height:auto; }
.primary-nav { display:flex; align-items:center; gap:25px; font-size:.92rem; font-weight:650; color:#34425a; } .primary-nav > a:not(.button) { position:relative; } .primary-nav > a:not(.button)::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--brand); transform:scaleX(0); transition:transform .2s; } .primary-nav > a:not(.button):hover::after,.primary-nav > a:not(.button):focus-visible::after { transform:scaleX(1); }
.menu-toggle { display:none; border:0; background:none; padding:9px 2px; cursor:pointer; } .menu-toggle span:not(.sr-only) { display:block; width:24px; height:2px; margin:5px; background:var(--ink); transition:.2s; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:47px; padding:11px 20px; border:1px solid var(--brand); border-radius:8px; background:var(--brand); color:#fff; font-size:.93rem; font-weight:750; line-height:1.25; cursor:pointer; box-shadow:0 8px 18px rgba(8,127,162,.17); transition:background .2s,transform .2s,box-shadow .2s; }.button:hover { background:var(--brand-dark); border-color:var(--brand-dark); transform:translateY(-2px); box-shadow:0 12px 23px rgba(8,127,162,.24); }.button-small { min-height:39px; padding:8px 13px; font-size:.84rem; }.button-outline { background:#fff; border-color:#b6d4de; color:var(--brand-dark); box-shadow:none; }.button-outline:hover { background:#eef9fc; color:var(--brand-dark); border-color:var(--brand); }
.hero { overflow:hidden; padding:86px 0 82px; background:linear-gradient(115deg,#f5fbfc 0%,#fff 57%,#e5f6f3 100%); }.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:68px; }.eyebrow { margin:0 0 11px; color:var(--brand-dark); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.hero h1,.section-heading h2,.about h2,.appointment h2 { margin:0; color:var(--ink); font-size:clamp(2.1rem,4.3vw,3.72rem); line-height:1.12; letter-spacing:-.045em; }.hero-intro { max-width:610px; margin:23px 0 30px; font-size:1.07rem; color:var(--muted); }.button-row { display:flex; flex-wrap:wrap; gap:12px; }.image-frame { overflow:hidden; border-radius:22px; box-shadow:var(--shadow); }.hero-image { aspect-ratio:1.15 / 1; }.image-frame img { width:100%; height:100%; object-fit:cover; }.hero-image img { object-position:center; }
.section-heading { max-width:670px; margin-bottom:41px; }.section-heading h2 { font-size:clamp(1.9rem,3.5vw,2.72rem); }.section-heading > p:last-child { margin:14px 0 0; color:var(--muted); }.split-heading { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:30px; }.split-heading > p { max-width:350px; margin:0 0 3px !important; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.service-card { padding:30px 28px; min-height:264px; border:1px solid var(--line); border-radius:15px; background:var(--white); transition:transform .2s,box-shadow .2s,border-color .2s; }.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#bfdae1; }.service-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--brand-dark); background:#dff4f4; font-size:1.6rem; font-weight:700; }.service-card h3 { margin:20px 0 8px; font-size:1.2rem; }.service-card p { margin:0; color:var(--muted); font-size:.94rem; }.service-card a { display:inline-block; margin-top:18px; color:var(--brand-dark); font-size:.91rem; font-weight:800; }.service-card a span { margin-left:4px; }
.carousel { position:relative; overflow:hidden; border-radius:18px; background:#143240; box-shadow:var(--shadow); }.carousel-viewport { overflow:hidden; }.carousel-track { display:flex; will-change:transform; transition:transform 650ms cubic-bezier(.22,.61,.36,1); }.carousel-slide { flex:0 0 100%; position:relative; margin:0; aspect-ratio:16/8.1; min-height:290px; }.carousel-slide img { width:100%; height:100%; object-fit:cover; object-position:center; }.carousel-slide:first-child img { object-position:center 57%; }.carousel-slide:nth-child(4) img { object-position:center 44%; }.carousel-slide figcaption { position:absolute; left:0; right:0; bottom:0; padding:40px 26px 20px; color:#fff; font-weight:650; background:linear-gradient(transparent,rgba(0,0,0,.55)); }.carousel-controls { position:absolute; z-index:2; left:0; right:0; bottom:14px; display:flex; align-items:center; justify-content:center; gap:12px; }.carousel-button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(6,30,40,.42); color:#fff; font-size:1.25rem; cursor:pointer; transition:background .2s,transform .2s; }.carousel-button:hover { transform:scale(1.07); background:var(--brand); }.carousel-dots { display:flex; gap:7px; }.carousel-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.65); cursor:pointer; transition:width .2s,background .2s; }.carousel-dot[aria-current="true"] { width:24px; border-radius:5px; background:#fff; }
.about-grid { display:grid; grid-template-columns:.74fr 1.1fr; align-items:center; gap:80px; }.about-image { aspect-ratio:3/4; max-height:570px; }.about-image img { object-position:center 35%; }.about h2,.appointment h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); }.about > .container > div > p:not(.eyebrow) { color:var(--muted); }.benefit-list { display:grid; gap:18px; margin-top:28px; }.benefit-list > div { display:flex; gap:13px; align-items:flex-start; }.benefit-list span { display:grid; flex:none; place-items:center; width:23px; height:23px; margin-top:3px; border-radius:50%; color:#fff; background:var(--accent); font-size:.78rem; font-weight:900; }.benefit-list p { margin:0; color:var(--muted); font-size:.94rem; }.benefit-list strong { display:block; color:var(--ink); }
.location-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.location-card { display:flex; flex-direction:column; padding:27px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:transform .2s,box-shadow .2s; }.location-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }.pin { color:var(--brand); font-size:1.6rem; }.location-card h3 { margin:14px 0 7px; font-size:1.13rem; }.location-card p { min-height:91px; margin:0 0 15px; color:var(--muted); font-size:.87rem; line-height:1.55; }.location-phone { width:max-content; color:var(--ink); font-size:1.08rem; font-weight:800; }.location-phone:hover { color:var(--brand-dark); }.location-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; }.location-actions a { color:var(--brand-dark); font-size:.87rem; font-weight:800; }.location-actions a:hover { text-decoration:underline; }
.appointment { background:var(--ink); color:#fff; }.appointment h2 { color:#fff; }.appointment-grid { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:76px; }.appointment .eyebrow { color:#83ded0; }.appointment-copy > p:not(.eyebrow) { color:#d6e1ea; }.whatsapp-inline { display:inline-block; margin-top:18px; color:#9de7da; font-size:.93rem; font-weight:750; }.appointment-form { padding:28px; border-radius:15px; background:#fff; color:var(--ink); box-shadow:0 17px 37px rgba(0,0,0,.2); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field { margin-bottom:16px; }.field label { display:block; margin-bottom:6px; color:#26364e; font-size:.84rem; font-weight:750; }.field label span { color:#64748b; font-weight:500; }.field input,.field select,.field textarea { width:100%; border:1px solid #bccbd2; border-radius:7px; background:#fff; color:#14213d; font-size:.95rem; outline:none; transition:border-color .2s,box-shadow .2s; }.field input,.field select { height:45px; padding:0 12px; }.field textarea { padding:11px 12px; resize:vertical; }.field input::placeholder,.field textarea::placeholder { color:#697a8d; opacity:1; }.field select:invalid { color:#697a8d; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(8,127,162,.16); }.field input:user-invalid,.field select:user-invalid { border-color:#c44343; }.form-note { min-height:20px; margin:13px 0 0; color:#56687b; font-size:.78rem; }.form-note.is-success { color:#087856; font-weight:650; }.form-note.is-error { color:#aa2828; font-weight:650; }
.contact-strip { background:#0c92a1; color:#fff; }.contact-strip .container { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:22px; }.contact-strip p { margin:0; font-size:1.04rem; font-weight:700; }.contact-strip a { padding-bottom:2px; border-bottom:1px solid currentColor; font-size:.94rem; font-weight:800; }
.site-footer { padding:35px 0; background:#0e1a32; color:#d7e0eb; }.footer-inner { display:flex; align-items:center; gap:26px; }.footer-brand { padding:7px 10px; border-radius:5px; background:#fff; }.footer-brand img { width:170px; filter:none; opacity:1; }.site-footer p { margin:0; font-size:.86rem; }.footer-links { display:flex; flex-wrap:wrap; gap:18px; margin-left:auto; font-size:.85rem; font-weight:650; }.footer-links a:hover { color:#9de7da; }
.whatsapp-float { position:fixed; z-index:18; right:22px; bottom:22px; display:flex; align-items:center; gap:8px; min-height:51px; padding:10px 17px 10px 12px; border:2px solid #fff; border-radius:999px; background:#20bd68; color:#fff; box-shadow:0 8px 24px rgba(1,78,40,.32); font-size:.9rem; font-weight:800; transition:transform .2s,background .2s; }.whatsapp-float:hover { background:#159957; transform:translateY(-3px); }.whatsapp-float svg { width:26px; height:26px; }.whatsapp-float:focus-visible { outline:3px solid #ffe46b; outline-offset:3px; }
:focus-visible { outline:3px solid #f7b84b; outline-offset:3px; } @media (max-width:850px) { .section { padding:72px 0; }.hero { padding:62px 0 68px; }.hero-grid,.about-grid,.appointment-grid { grid-template-columns:1fr; gap:38px; }.hero-image { max-width:690px; }.about-image { width:min(100%,460px); }.service-grid,.location-grid { grid-template-columns:1fr; }.service-card { min-height:0; }.split-heading { align-items:start; flex-direction:column; }.appointment-copy { max-width:600px; }.footer-inner { flex-wrap:wrap; }.footer-links { margin-left:0; } }
@media (max-width:700px) { html { scroll-padding-top:68px; }.container { width:min(100% - 32px,1120px); }.header-inner { min-height:64px; }.brand img { width:151px; }.menu-toggle { display:block; }.primary-nav { position:absolute; top:100%; left:0; right:0; display:none; align-items:stretch; gap:0; padding:8px 16px 16px; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 15px 20px rgba(15,50,70,.08); }.primary-nav.is-open { display:flex; flex-direction:column; }.primary-nav > a:not(.button) { padding:10px 0; }.primary-nav > a:not(.button)::after { display:none; }.primary-nav .button { margin-top:7px; }.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform:translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity:0; }.menu-toggle[aria-expanded="true"] span:nth-child(4) { transform:translateY(-7px) rotate(-45deg); }.hero h1 { font-size:clamp(2.08rem,11vw,3rem); }.hero-image { aspect-ratio:1.14/1; }.section-heading { margin-bottom:29px; }.carousel-slide { min-height:235px; aspect-ratio:1.25/1; }.carousel-slide img { object-position:center; }.carousel-slide figcaption { padding:38px 17px 15px; font-size:.88rem; }.carousel-controls { bottom:10px; }.carousel-button { width:34px; height:34px; }.form-row { grid-template-columns:1fr; gap:0; }.appointment-form { padding:21px 17px; }.contact-strip .container { min-height:112px; align-items:flex-start; justify-content:center; flex-direction:column; gap:4px; }.whatsapp-float { right:14px; bottom:14px; min-height:49px; padding:10px 13px; }.whatsapp-float span { display:none; }.footer-inner { align-items:flex-start; flex-direction:column; gap:15px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }.carousel-track { transition:none; } }