/* Fernandez Dental: home page. */

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--cream); padding: clamp(110px, 12vw, 150px) 0 clamp(110px, 12vw, 160px); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 90px); align-items: center; position: relative; z-index: 1; }
.hero__blob { position: absolute; width: 640px; height: 640px; left: -160px; top: 60px; background: radial-gradient(circle at 30% 30%, var(--pink-100), rgba(246, 185, 193, .55)); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: fd-blob 18s ease-in-out infinite alternate; filter: blur(2px); }
@keyframes fd-blob {
	33% { border-radius: 63% 37% 41% 59% / 55% 38% 62% 45%; transform: translate(40px, -20px) rotate(20deg); }
	66% { border-radius: 38% 62% 55% 45% / 62% 57% 43% 38%; transform: translate(-10px, 30px) rotate(-10deg); }
	100% { border-radius: 52% 48% 37% 63% / 39% 61% 39% 61%; transform: translate(20px, 10px) rotate(8deg); }
}
.hero__media { position: relative; max-width: 470px; justify-self: center; width: 100%; }
.hero__frame { aspect-ratio: 400 / 480; border-radius: 999px 999px 40px 40px; overflow: hidden; box-shadow: var(--shadow); animation: fd-rise 1.2s var(--ease) both .15s; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; animation: fd-kenburns 16s ease-in-out infinite alternate; }
@keyframes fd-kenburns { from { transform: scale(1.04); } to { transform: scale(1.12) translate(-1.5%, 1%); } }
@keyframes fd-rise { from { opacity: 0; transform: translateY(50px) scale(.96); } }
.hero__outline { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); overflow: visible; pointer-events: none; }
.hero__outline path { fill: none; stroke: var(--rose); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fd-drawline 2.4s var(--ease) forwards .7s; }
@keyframes fd-drawline { to { stroke-dashoffset: 0; } }
.tw { position: absolute; fill: var(--rose); animation: fd-twinkle 3.2s ease-in-out infinite; }
.tw--1 { width: 34px; height: 34px; top: 6%; right: -6%; }
.tw--2 { width: 20px; height: 20px; top: 18%; left: -8%; fill: var(--teal-500); animation-delay: 1s; }
.tw--3 { width: 26px; height: 26px; bottom: 30%; right: -10%; fill: var(--pink-300); animation-delay: 2s; }
@keyframes fd-twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.chip { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 999px; padding: 9px 18px 9px 9px; box-shadow: 0 16px 34px -16px rgba(15, 61, 56, .5); font-size: .9rem; color: var(--ink); white-space: nowrap; }
.chip b { font-family: var(--f-head); color: var(--teal-900); }
.chip__ic { width: 38px; height: 38px; border-radius: 50%; background: var(--teal-100); display: grid; place-items: center; }
.chip__ic svg { width: 21px; height: 21px; fill: none; stroke: var(--teal-700); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip--a { left: -14%; bottom: 9%; animation: fd-pop .8s var(--ease) both 1.3s, fd-bob 6s ease-in-out infinite 2.1s; }
.chip--b { right: -12%; bottom: 34%; animation: fd-pop .8s var(--ease) both 1.6s, fd-bob 7s ease-in-out infinite 2.4s; }
.chip--b .chip__ic { background: var(--pink-100); }
.chip--b .chip__ic svg { stroke: var(--rose); }
@keyframes fd-pop { from { opacity: 0; transform: translateY(20px) scale(.8); } }
@keyframes fd-bob { 50% { transform: translateY(-12px); } }

.hero__eyebrow { animation: fd-fadeup .8s var(--ease) both .2s; }
.hero__title { font-size: clamp(2.2rem, 4.2vw, 3.3rem); margin-bottom: .45em; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .ln > span { display: inline-block; animation: fd-lineup 1.1s var(--ease) both; }
.hero__title .ln:nth-child(1) > span { animation-delay: .35s; }
.hero__title .ln:nth-child(2) > span { animation-delay: .55s; }
.hero__title em { font-style: normal; color: var(--rose); position: relative; white-space: nowrap; }
.hero__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; background: var(--pink-300); border-radius: 4px; z-index: -1; transform: scaleX(0); transform-origin: left; animation: fd-underline 1s var(--ease) forwards 1.4s; }
@keyframes fd-underline { to { transform: scaleX(1); } }
@keyframes fd-lineup { from { transform: translateY(110%); } }
@keyframes fd-fadeup { from { opacity: 0; transform: translateY(24px); } }
.hero__sub { font: 500 1.2rem/1.5 var(--f-head); color: var(--teal-700); animation: fd-fadeup .9s var(--ease) both .8s; }
.hero__body { color: var(--muted); animation: fd-fadeup .9s var(--ease) both .95s; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6em; animation: fd-fadeup .9s var(--ease) both 1.1s; }
.wave--hero { bottom: -1px; color: var(--white); }

/* ---------- Offers ---------- */
.offers { position: relative; z-index: 2; margin-top: -70px; }
.offers__card { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.offer { padding: 34px 28px; position: relative; transition: background .35s; }
.offer + .offer { border-left: 1px solid var(--sand); }
.offer:hover { background: var(--cream); }
.offer__ic { width: 62px; height: 62px; border-radius: 20px; background: var(--pink-100); color: var(--rose); display: grid; place-items: center; margin-bottom: 18px; transition: transform .5s var(--ease), border-radius .5s var(--ease); }
.offer:hover .offer__ic { transform: rotate(-8deg) scale(1.08); border-radius: 50%; }
.offer__ic svg { width: 32px; height: 32px; }
.offer h3 { font-size: 1.08rem; margin-bottom: .35em; }
.offer p { font-size: .95rem; color: var(--muted); margin: 0; }

/* ---------- Dark band ---------- */
.band { position: relative; background: var(--teal-900); color: #dcebe8; margin-top: clamp(60px, 8vw, 100px); padding: clamp(110px, 12vw, 160px) 0 clamp(120px, 13vw, 170px); overflow: hidden; }
.band h2 { color: var(--white); }
.band__in { max-width: 860px; }
.band__p { font-size: 1.08rem; }
.band .fd-btn { margin-top: 1em; }
.band .wave--top, .reviews .wave--top { animation-direction: reverse; }
.marquee { margin-top: clamp(50px, 7vw, 80px); overflow: hidden; border-block: 1px solid rgba(255, 255, 255, .14); padding: 22px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 34px; width: max-content; animation: fd-marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font: 600 clamp(1.1rem, 2vw, 1.5rem) var(--f-head); color: var(--white); white-space: nowrap; }
.marquee svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--pink-300); stroke-width: 1.6; }
@keyframes fd-marquee { to { transform: translateX(-50%); } }

/* ---------- Expert care ---------- */
.expert__card { background: var(--cream); border-radius: var(--r-lg); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 70px); }
.stats { display: flex; justify-content: center; gap: clamp(20px, 6vw, 80px); flex-wrap: wrap; margin: 26px 0 50px; }
.stat b { display: block; font: 700 clamp(2.4rem, 5vw, 3.4rem)/1 var(--f-head); color: var(--rose); font-variant-numeric: tabular-nums; }
.stat span { font-size: .95rem; color: var(--muted); }
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 60px; }
.feat { position: relative; padding-left: 82px; }
.feat__ic { position: absolute; left: 0; top: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--white); color: var(--teal-700); display: grid; place-items: center; box-shadow: 0 10px 24px -14px rgba(15, 61, 56, .5); }
.feat__ic svg { width: 30px; height: 30px; }
.feat p { color: var(--muted); }

/* ---------- Doctor ---------- */
.doctor { padding-top: 0; }
.doctor__card { position: relative; background: var(--teal-900); color: #dcebe8; border-radius: var(--r-lg); padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 80px); align-items: center; overflow: hidden; }
.doctor__card::before { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 185, 193, .2), transparent 70%); animation: fd-bob 9s ease-in-out infinite; }
.doctor__card h2 { color: var(--white); }
.doctor__photo { position: relative; border-radius: 50%; aspect-ratio: 1; border: 8px solid var(--pink-300); max-width: 400px; justify-self: center; width: 100%; }
.doctor__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.press { list-style: none; padding: 0; margin: 4px 0 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.press li { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(246, 185, 193, .45); font: 500 .85rem var(--f-head); color: var(--pink-300); }

/* ---------- Treatments ---------- */
.treatments { background: linear-gradient(var(--white), var(--cream)); }
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 50px; perspective: 900px; }
.tcard { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-md); padding: 30px 26px; text-decoration: none; color: var(--ink); border: 2px solid transparent; box-shadow: 0 14px 36px -24px rgba(15, 61, 56, .45); transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; overflow: hidden; }
.tcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(246, 185, 193, .35), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.tcard:hover { border-color: var(--pink-300); box-shadow: 0 24px 46px -24px rgba(15, 61, 56, .55); }
.tcard:hover::before { opacity: 1; }
.tcard__ic { width: 58px; height: 58px; border-radius: 18px; background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; margin-bottom: 18px; transition: background .3s, color .3s, transform .5s var(--ease); }
.tcard:hover .tcard__ic { background: var(--rose); color: var(--white); transform: translateY(-4px) rotate(-6deg); }
.tcard__ic svg { width: 30px; height: 30px; }
.tcard h3 { font-size: 1.08rem; }
.tcard p { font-size: .95rem; color: var(--muted); flex: 1; }
.tcard .fd-link { font-size: .88rem; }

/* ---------- Split rows ---------- */
.split__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.split--rev .split__media { order: 2; }
.split--sand { background: var(--cream); }
.split__media .circle { max-width: 440px; margin-inline: auto; }
.circle--illus > img { opacity: 0; transform: scale(.9) rotate(-4deg); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.circle--illus > img.is-on { opacity: 1; transform: none; }
.tabs { position: relative; display: inline-flex; gap: 4px; padding: 6px; background: var(--cream); border-radius: 999px; margin-bottom: 24px; flex-wrap: wrap; }
.tabs button { position: relative; z-index: 1; border: 0; background: none; padding: 11px 20px; border-radius: 999px; font: 600 .9rem var(--f-head); color: var(--teal-900); cursor: pointer; transition: color .3s; }
.tabs button[aria-selected="true"] { color: var(--white); }
.tabs__ink { position: absolute; z-index: 0; top: 6px; left: 0; height: calc(100% - 12px); width: 0; border-radius: 999px; background: var(--teal-900); transition: transform .5s var(--ease), width .5s var(--ease); }
.panel { animation: fd-fadeup .6s var(--ease); }
.panel p { color: var(--muted); }

/* ---------- Before / after ---------- */
.gallery { background: var(--white); }
.ba-wrap { max-width: 920px; margin: 46px auto 0; }
.ba { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; border: 8px solid var(--pink-300); box-shadow: var(--shadow); user-select: none; touch-action: pan-y; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba.is-swapping .ba__img { opacity: 0; }
.ba__tag { position: absolute; top: 16px; padding: 6px 14px; border-radius: 999px; font: 600 .78rem var(--f-head); letter-spacing: .08em; text-transform: uppercase; background: rgba(15, 61, 56, .8); color: var(--white); pointer-events: none; }
.ba__tag--b { left: 16px; }
.ba__tag--a { right: 16px; background: var(--rose); }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--white); box-shadow: 0 0 12px rgba(0, 0, 0, .3); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: var(--pos); z-index: 2; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); pointer-events: none; }
.ba__handle svg { width: 26px; height: 26px; fill: none; stroke: var(--rose); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ba__handle::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: fd-ping 2s ease-out infinite; }
@keyframes fd-ping { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.ba__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible + * , .ba:focus-within .ba__handle { outline: 3px solid var(--rose); outline-offset: 3px; }
.ba-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.ba-thumbs button { position: relative; border: 3px solid transparent; border-radius: 16px; padding: 0; overflow: hidden; cursor: pointer; background: none; transition: border-color .3s, transform .3s var(--ease); }
.ba-thumbs button:hover { transform: translateY(-3px); }
.ba-thumbs button.is-on { border-color: var(--rose); }
.ba-thumbs img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ba-thumbs span { position: absolute; left: 8px; bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); font: 600 .75rem var(--f-head); color: var(--teal-900); }

/* ---------- Technology ---------- */
.tech { padding-top: 0; }
.tech__card { background: var(--cream); border-radius: var(--r-lg); padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.tech__media .circle { max-width: 420px; margin-inline: auto; }
.techlist { list-style: none; padding: 0; margin: 1.5em 0 0; display: grid; gap: 18px; }
.techlist li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.techlist svg { flex: none; width: 44px; height: 44px; padding: 9px; border-radius: 14px; background: var(--white); color: var(--rose); }
.techlist b { color: var(--teal-900); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.tgrid { grid-template-columns: repeat(2, 1fr); }
	.offers__card { grid-template-columns: repeat(2, 1fr); }
	.offer:nth-child(3) { border-left: 0; }
	.offer:nth-child(n+3) { border-top: 1px solid var(--sand); }
	.chip--a { left: -4%; }
	.chip--b { right: -4%; }
	.hero__title { font-size: clamp(2.2rem, 5vw, 3rem); }
}
@media (max-width: 860px) {
	.hero__in, .split__in, .doctor__card, .tech__card { grid-template-columns: 1fr; }
	.hero { padding-top: 70px; }
	.hero__media { max-width: 360px; }
	.split--rev .split__media { order: 0; }
	.split__media .circle, .tech__media .circle { max-width: 340px; }
	.feats { grid-template-columns: 1fr; }
	.doctor__photo { max-width: 300px; }
}
@media (max-width: 640px) {
	.offers__card, .tgrid { grid-template-columns: 1fr; }
	.offer + .offer { border-left: 0; border-top: 1px solid var(--sand); }
	.chip { font-size: .8rem; padding-right: 14px; }
	.chip__ic { width: 32px; height: 32px; }
	.chip--a { left: -2%; bottom: 8%; }
	.chip--b { right: -2%; bottom: 30%; }
	.tw--2 { left: -2%; }
	.tw--1, .tw--3 { right: -2%; }
	.feat { padding-left: 0; padding-top: 76px; }
	.ba-thumbs { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__outline path { stroke-dashoffset: 0; }
	.circle--illus > img { transition: none; }
}