/* overflow-x must live on BOTH html and body: in standards mode most mobile
   browsers (Android/MIUI Chrome included) scroll the <html> element, not
   <body> — overflow-x:hidden on body alone does nothing there, and any
   decorative element with a negative offset (corner frames, blur circles)
   was making the whole page horizontally draggable and pushing fixed-position
   elements (burger, WhatsApp button) off-screen on real devices. */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
/* !important: GeneratePress's own inline customizer CSS loads after this
   stylesheet and would otherwise win the body/heading/link cascade. */
body { margin: 0 !important; background: #0b0b0d !important; color: #f2f0ea !important; font-family: 'Archivo', sans-serif !important; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; }
h1, h2, h3, h4, h5, h6 { color: #f2f0ea !important; }
p, div, span, li { color: inherit; }
a { color: #f2f0ea; text-decoration: none !important; }
::selection { background: #d9b566; color: #0b0b0d; }

/* Gradient "gold" text-clip effect used throughout — needs !important on
   background-clip itself, not just background/color, or the parent theme's
   CSS wins the cascade and it renders as a solid block instead of clipped text. */
[style*="background-clip: text"] { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }

@keyframes yfZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes yfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes yfPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes yfScrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(26px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes yfShine { from { background-position: 200% center; } to { background-position: -200% center; } }
@keyframes yfScan { 0% { top: 8%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 92%; opacity: 0; } }
@keyframes yfEcg { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes yfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes yfPanA { 0%,100% { object-position: 50% 30%; } 50% { object-position: 50% 70%; } }

/* Contact form (Contacto page) */
input, select, textarea { font-family: 'Archivo', sans-serif; }
input::placeholder, textarea::placeholder { color: rgba(242,240,234,.4); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(217,181,102,.8) !important; background: rgba(217,181,102,.06) !important; }
select option { background: #141417; color: #f2f0ea; }

/* Mobile menu (not part of the source designs — added for real-world usability) */
.yf-mobile-menu {
	position: fixed; inset: 0; z-index: 200; background: #0b0b0d;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	gap: 28px; padding: 40px;
	transform: translateY(-100%); transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.yf-mobile-menu.is-open { transform: translateY(0); }
.yf-mobile-nav { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.yf-mobile-nav a { font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; color: #f2f0ea; }
.yf-mobile-nav a:hover { color: #d9b566; }
.yf-mobile-close {
	position: absolute; top: 26px; right: 26px; width: 46px; height: 46px; border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: #f2f0ea; font-size: 22px;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.yf-mobile-cta {
	display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; font-size: 12px; font-weight: 800;
	letter-spacing: .2em; text-transform: uppercase; color: #0b0b0d;
	background: linear-gradient(115deg, #f3dfa3, #d3a84c 55%, #b8863b);
}
.yf-burger {
	width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25);
	background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.yf-burger span, .yf-burger span::before, .yf-burger span::after {
	content: ''; display: block; width: 18px; height: 2px; background: #f2f0ea; position: relative;
}
.yf-burger span::before { top: -6px; }
.yf-burger span::after { top: 4px; }

.yf-logo-img { height: clamp(56px, 6vw, 76px); }

/* Reusable full-section background video (hero already had its own bespoke
   version inline; this is the same pattern for the other homepage sections). */
.yf-video-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.yf-video-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yf-video-bg-overlay { position: absolute; inset: 0; background: rgba(11,11,13,.82); }
.yf-section-content { position: relative; z-index: 1; width: 100%; }

@media (max-width: 860px) {
	/* Full-viewport-height video sections don't fit well on small phones —
	   revert to natural content height there, desktop keeps the 100vh match. */
	.yf-video-full-height { min-height: auto !important; display: block !important; }
}

/* "recuperación funcional" hero line — matches the logo's own typeface: a thin,
   wide-tracked geometric sans (Poppins Light), not the cursive Great Vibes used
   for other manuscript-style accents on the page. */
.yf-hero-logo-type { font-family: 'Poppins', sans-serif; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; }

/* Metodología benefits — single circular badge holding a real Lottie animation
   (assets/lottie/*.json, two-tone brand recolor of useAnimations.com's CC-BY
   icon set) that loops continuously, never sitting static. */
.yf-icon-badge { width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(217,181,102,.08); border: 1px solid rgba(217,181,102,.5); overflow: hidden; }
.yf-icon-badge svg { width: 44px !important; height: 44px !important; }

/* Quiénes somos — values icons, bigger than the shared badge default so they
   read clearly next to a full paragraph of copy instead of a short title. */
.yf-valor-icon { width: 110px !important; height: 110px !important; }
.yf-valor-icon svg { width: 60px !important; height: 60px !important; }

@media (max-width: 860px) {
	.yf-nav-desktop, .yf-cta-desktop { display: none !important; }
	.yf-burger { display: flex !important; }
	#yf-header > div { position: relative; }
	.yf-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

/* ============================================================
   RESPONSIVE — the source designs were built for a fixed desktop
   preview with no breakpoints. Below, every multi-column layout
   used across the 5 pages collapses to a single readable column
   on tablet/mobile. `display: block !important` is used instead
   of overriding grid-template-columns directly: on this server
   the inline `grid-template-columns: repeat(3, 1fr)` etc. kept
   winning over a `grid-template-columns: 1fr !important` media
   query in testing (children still rendered as 2 uneven tracks),
   so instead we drop these containers out of grid layout entirely
   at narrow widths, which reliably stacks every child full-width.
   ============================================================ */
@media (max-width: 980px) {
	.yf-cols-2, .yf-cols-3, .yf-cols-4, .yf-cols-4-hero, .yf-cols-2-rev, .yf-footer-grid, .yf-tratamiento-row, .yf-beneficio-row {
		display: block !important;
	}
	.yf-cols-2 > *, .yf-cols-3 > *, .yf-cols-4 > *, .yf-cols-4-hero > *, .yf-cols-2-rev > *, .yf-footer-grid > *, .yf-tratamiento-row > *, .yf-beneficio-row > * {
		width: 100% !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}
	.yf-cols-2 > * + *, .yf-cols-3 > * + *, .yf-cols-4 > * + *, .yf-cols-4-hero > * + *, .yf-cols-2-rev > * + *, .yf-footer-grid > * + *, .yf-tratamiento-row > * + *, .yf-beneficio-row > * + * {
		margin-top: 22px;
	}
	/* Beneficios cards (Metodología): the right-aligned cards had a clamp()
	   margin-left indent that no longer makes sense once stacked full-width. */
	.yf-beneficio-row { margin-left: 0 !important; }
	/* "05" method card (Home): title + "Pide tu cita" button sat side by side
	   with no wrap, pushing the button off the right edge on narrow screens. */
	.yf-metodo5-card { align-items: flex-start !important; }
	.yf-metodo5-card > a { width: 100%; justify-content: center; }
	/* Clinica gallery (Home): the big video/photo cell had grid-row:span 2 at a
	   fixed 280px row height — once stacked, give it (and every cell) a real height. */
	.yf-cols-2-rev > * { height: 280px !important; }
	/* Tratamientos: reset the alternating image/text order once stacked, and
	   let the util-section sticky sidebar (Metodología) behave like a normal block. */
	.yf-tratamiento-row [style*="order: 1"], .yf-tratamiento-row [style*="order: 2"] { order: initial !important; }
	[style*="position: sticky"] { position: static !important; }
}
@media (max-width: 640px) {
	.yf-cols-4-hero { display: block !important; }
}

/* Quiénes somos — team grid: 4 cols desktop, 2 cols tablet, 1 col phone. */
@media (max-width: 980px) {
	.yf-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
	.yf-team-grid { grid-template-columns: 1fr !important; row-gap: 72px !important; }
	/* Circular gold-ringed avatar layout for the team cards, matching the
	   reference photo — only the image container is round; the card itself
	   loses its box chrome and the text below recenters to match. */
	.yf-team-card { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-top: none !important; display: flex; flex-direction: column; align-items: center; }
	.yf-team-photo { width: 340px !important; height: 340px !important; max-width: 88vw; max-height: 88vw; border-radius: 50%; border: 3px solid #d9b566 !important; overflow: hidden; }
	.yf-team-photo img { border-radius: 50%; object-position: center 32%; }
	.yf-team-info { text-align: center; margin-top: 22px; padding: 26px 24px !important; background: rgba(255,255,255,.05); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.12); }

	/* Quiénes somos — values rows: icon + text side by side on desktop,
	   stacked and centered on phones so the icon badge doesn't cramp the copy. */
	.yf-valor-row { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }
}

/* Small phones — the source hero headings use clamp() with a fixed desktop
   minimum (e.g. 56–118px) that doesn't shrink far enough below ~420px width
   and starts wrapping into 3+ lines / overflowing horizontally. */
@media (max-width: 480px) {
	h1 { font-size: clamp(32px, 11vw, 60px) !important; }
	section, header > div { padding-left: 20px !important; padding-right: 20px !important; }
	/* Uppercase CTA buttons use wide letter-spacing (.16–.2em) that reads fine
	   on desktop but can push a long label wider than very narrow phones
	   (~320–375px), overflowing the viewport horizontally — tighten tracking
	   and allow wrapping as a safety net on any button, anywhere on the site. */
	a[style*="letter-spacing: .2em"], a[style*="letter-spacing: .18em"], a[style*="letter-spacing: .16em"] {
		letter-spacing: .06em !important;
		white-space: normal !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* Cookie Notice plugin — restyled to match the site's gold/dark system.
   The plugin gives every button the same solid background via inline style
   (color.button), so accept/refuse/policy-link all looked identical —
   here accept stays the primary gold CTA, refuse becomes an outline
   button, and the policy link becomes a plain underlined text link. */
#cookie-notice {
	font-family: 'Archivo', sans-serif !important;
	padding: 22px clamp(20px, 4vw, 40px) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid rgba(217,181,102,.35) !important;
	z-index: 999999 !important;
}
#cookie-notice .cookie-notice-container { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#cn-notice-text { font-size: 14px; line-height: 1.6; max-width: 640px; }
#cn-notice-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#cookie-notice .cn-button {
	font-family: 'Archivo', sans-serif !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	padding: 13px 26px !important;
	border-radius: 0 !important;
	transition: transform .3s, box-shadow .3s, background .3s, border-color .3s !important;
}
#cn-accept-cookie {
	background: linear-gradient(115deg, #f3dfa3, #d3a84c 55%, #b8863b) !important;
	color: #0b0b0d !important;
	border: none !important;
}
#cn-accept-cookie:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(211,168,76,.35); }
#cn-refuse-cookie {
	background: transparent !important;
	color: #d9b566 !important;
	border: 1px solid rgba(217,181,102,.5) !important;
}
#cn-refuse-cookie:hover { background: rgba(217,181,102,.1) !important; }
#cn-more-info {
	background: transparent !important;
	color: rgba(242,240,234,.6) !important;
	border: none !important;
	padding: 13px 4px !important;
	text-decoration: underline !important;
	font-weight: 600 !important;
}
#cn-more-info:hover { color: #e8cf8f !important; }
#cn-close-notice { border-color: rgba(242,240,234,.4); }
@media (max-width: 640px) {
	#cookie-notice .cookie-notice-container { flex-direction: column; align-items: flex-start; }
	#cn-notice-buttons { width: 100%; }
	#cookie-notice .cn-button { flex: 1; text-align: center; }
}

/* Universal overflow safety net */
img, video, iframe { max-width: 100%; }
body { max-width: 100vw; }