/* Fernandez Dental: components shared across pages (loaded site-wide). */

/* ---------- Shared bits ---------- */
.fd-eyebrow--light { color: var(--pink-300); }
.ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed var(--pink-300); animation: fd-spin 50s linear infinite; pointer-events: none; }
.circle { position: relative; aspect-ratio: 1; border-radius: 50%; border: 8px solid var(--pink-300); background: var(--white); box-shadow: var(--shadow); }
.circle > img { object-position: 50% 30%; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.circle--illus > img, .circle--light > img { object-fit: contain; padding: 12%; background: var(--white); }
.circle--light > img { padding: 4%; background: #eef2e4; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.6em; display: grid; gap: .7em; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--pink-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8425f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ticks b { color: var(--teal-900); }

/* Animated waves: each path is two identical periods wide, so sliding it -50% loops seamlessly. */
.wave { position: absolute; left: 0; width: 200%; height: clamp(40px, 6vw, 90px); display: block; animation: fd-wave 22s linear infinite; pointer-events: none; }
.wave path { fill: currentColor; }
@keyframes fd-wave { to { transform: translateX(-50%); } }
.wave--top { top: -1px; color: var(--white); }
.wave--bottom { bottom: -1px; color: var(--white); animation-duration: 28s; }

/* ---------- Reviews ---------- */
.reviews { background: var(--teal-900); padding-top: clamp(120px, 12vw, 170px); overflow: hidden; }
.reviews h2 { color: var(--white); }
.rv { position: relative; margin-top: 40px; }
.rv__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 4px 24px; scrollbar-width: none; }
.rv__track::-webkit-scrollbar { display: none; }
.rcard { scroll-snap-align: start; margin: 0; background: var(--white); border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .4s var(--ease); }
.rcard:hover { transform: translateY(-6px); }
.rcard__top { display: flex; align-items: center; gap: 12px; }
.rcard__top b { display: block; font-family: var(--f-head); color: var(--teal-900); }
.rcard__top small { color: var(--muted); }
.rcard__av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 1.1rem var(--f-head); color: var(--white); background: hsl(var(--h) 45% 42%); flex: none; }
.gmark { margin-left: auto; font: 700 1.3rem var(--f-head); background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars { display: flex; gap: 3px; }
.stars svg { width: 19px; height: 19px; fill: #f5b301; }
.rcard blockquote { margin: 0; color: var(--ink); font-size: .98rem; }
.rv__btn { position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; margin-top: -32px; border-radius: 50%; border: 0; background: var(--pink-300); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.rv__btn:hover { transform: scale(1.1); background: var(--white); }
.rv__btn svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-900); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv__btn--prev { left: -24px; }
.rv__btn--next { right: -24px; }
.rv__btn--next svg { transform: scaleX(-1); }
.rv__more { color: #cfe2de; margin-top: 10px; }
.rv__more a { color: var(--pink-300); }

/* ---------- CTA (ocean) ---------- */
.cta { position: relative; background: linear-gradient(180deg, var(--teal-900) 0%, #17564e 100%); color: #dcebe8; padding: clamp(80px, 10vw, 120px) 0 clamp(170px, 18vw, 230px); overflow: hidden; }
.cta h2 { color: var(--white); font-size: clamp(2.2rem, 5vw, 3.4rem); }
.cta__in { position: relative; z-index: 2; max-width: 940px; }
.cta__in > p { font-size: 1.12rem; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.cta__btns .fd-btn svg { transition: none; }
.cta__btns .fd-btn:hover svg { transform: rotate(-12deg); }
.cta__sea { position: absolute; inset: auto 0 0; height: 100%; pointer-events: none; }
.sea { position: absolute; left: 0; bottom: 0; width: 200%; height: 140px; animation: fd-wave linear infinite; }
.sea--1 { height: 190px; fill: #2a7a6f; opacity: .55; animation-duration: 26s; }
.sea--2 { height: 150px; fill: #8fd0c4; opacity: .45; animation-duration: 18s; animation-direction: reverse; }
.sea--3 { height: 100px; fill: var(--white); animation-duration: 14s; }
.bub { position: absolute; bottom: 40px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); animation: fd-bubble var(--t) ease-in infinite var(--dl); opacity: 0; }
@keyframes fd-bubble { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 50% { transform: translate(14px, -45vh); } 100% { transform: translate(-8px, -90vh); opacity: 0; } }

/* ---------- Locations ---------- */
.locs { padding-top: clamp(30px, 4vw, 60px); }
.locs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.loc { background: var(--cream); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s; }
.loc:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.loc__map { aspect-ratio: 16 / 9; background: var(--sand); }
.loc__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }
.loc__body { padding: 28px 30px 32px; }
.loc__line { display: flex; gap: 12px; color: var(--muted); }
.loc__line svg { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loc__line a { color: var(--teal-900); font-weight: 700; text-decoration: none; }
.emerg { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 22px 28px; border-radius: var(--r-md); background: var(--pink-100); }
.emerg p { margin: 0; }
.emerg__ic { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--white); color: var(--rose); display: grid; place-items: center; animation: fd-pulse 2.4s ease-in-out infinite; }
.emerg__ic svg { width: 30px; height: 30px; }
@keyframes fd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 66, 95, .35); } 50% { box-shadow: 0 0 0 12px rgba(200, 66, 95, 0); } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.rv__track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 860px) {
	.locs__grid { grid-template-columns: 1fr; }
	.rv__btn--prev { left: -8px; }
	.rv__btn--next { right: -8px; }
}
@media (max-width: 640px) {
	.rv__track { grid-auto-columns: 88%; }
	.emerg { flex-direction: column; text-align: center; }
	.rv__btn { display: none; }
}