/* ═══════════════════════════════════════════════════════════════════════ CLÍNICA EPELBAUM — Design System v2.0 · NeoDent Variant Light+Blue Accents · WCAG 2.2 AA · Mobile-First ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS ───────────────────────────────────────────────────────────────────── */ :root{/* ── Backgrounds (Ghost White & Warm accents) ── */--c-bg: #FAF6F0; /* Fondo base (Warm Cream) */--c-bg-lav: #F5EFE6; /* Fondo de tarjetas / crema cálido */--c-bg-periw: rgba(132, 94, 53, 0.12); /* Tono bronce traslúcido para fondos sutiles */--c-dark: #845E35; /* Bronce cálido (acentos ornamentales y líneas activas) */--c-darker: #4D382A; /* Bronce oscuro para estados activos / hover (espresso medio) */--c-deep: #5D4431; /* Acento de marca principal (Marrón Espresso) */ /* ── Text (Espresso & Taupe) ── */--c-h: #221D1A; /* Headline (espresso oscuro) */--c-body: #60564F; /* Subheadline / texto de cuerpo (taupe cálido) */--c-muted: rgba(34, 29, 26, 0.55); /* Texto de cuerpo secundario / atenuado */--c-on-dark: #FAF6F0; /* Texto sobre fondos oscuros (crema claro) */--c-on-dark-2: #F5EFE6; /* Variante clara secundaria */--c-on-dark-m: rgba(250, 246, 240, 0.60); /* ── Borders (Edge) ── */--c-border: rgba(132, 94, 53, 0.15); /* Borde sutil usando color bronce */--c-border-card: rgba(132, 94, 53, 0.20); /* Borde de tarjeta */--c-border-dark: rgba(250, 246, 240, 0.15); /* Borde claro en secciones oscuras */ /* ── Desacoplamiento de Secciones Oscuras (para conservar la jerarquía de contraste) ── */--c-surface: #FFFFFF; /* Tarjetas en secciones claras (blanco puro) */--c-bg-sec-dark: #2A2320; /* Fondo oscuro de secciones (.sec-care, .pricing-dark, .booking-form-col) */--c-bg-footer: #221D1A; /* Pie de página (espresso oscuro) */--c-bg-mobile-nav: #2A2320; /* Menú móvil (espresso) */--c-bg-intl-banner: #845E35; /* Banner internacional en bronce */--c-bg-nav-scrolled: rgba(250, 246, 240, 0.92); /* Fondo de menú sticky (crema traslúcido) */--c-on-btn-filled: #FAF6F0; /* Color del texto sobre botones rellenos */--c-selection: rgba(132, 94, 53, 0.25); /* Resaltador de selección de texto */--c-shadow-glow: rgba(34, 29, 26, 0.12); /* ── Fonts ── */--ff: 'Inter Tight', system-ui, sans-serif;--ff-serif: 'Arapey', Georgia, serif; /* ── Type Scale ── */--fs-h1: clamp(2.5rem, 5.5vw, 5.25rem);--fs-h2: clamp(2rem, 4vw, 4rem);--fs-h3: clamp(1.25rem, 2vw, 2rem);--fs-h4: clamp(1.05rem, 1.2vw, 1.3rem);--fs-body: 1rem;--fs-sm: .875rem;--fs-xs: .75rem;--fs-badge: .78125rem;--fs-ghost: clamp(3.5rem, 9vw, 8rem);--fw-reg: 400;--fw-med: 500;--fw-semi: 600;--fw-bold: 700;--fw-xbold: 800;--lh-h: .9;--lh-snug: 1.1;--lh-body: 1.3;--lh-rel: 1.55;--ls-h:-0.03em;--ls-body:-0.01em;--ls-badge: 0.06em; /* ── Components ── */--r-card: 16px;--r-pill: 40px;--r-btn: 8px;--r-full: 9999px;--shadow: 0 2px 20px rgba(30,28,26,.06);--shadow-h: 0 8px 40px rgba(30,28,26,.12);--shadow-btn: 0 4px 16px var(--c-shadow-glow); /* ── Spacing ── */--sp-2xs: .25rem;--sp-xs: .5rem;--sp-sm: .75rem;--sp-md: 1rem;--sp-lg: 1.5rem;--sp-xl: 2rem;--sp-2xl: 3rem;--sp-3xl: 4rem;--sp-4xl: 5.5rem;--sp-sec: clamp(4rem, 8vw, 7rem); /* ── Layout ── */--max-w: 1360px;--max-sm: 960px;--pad-x: clamp(1.25rem, 5vw, 3rem);--nav-h: 72px; /* ── Transitions ── */--ease: cubic-bezier(.25, 1, .5, 1);--ease-b: cubic-bezier(.34, 1.56, .64, 1);--t-fast: 150ms;--t-norm: 300ms;--t-slow: 500ms;--z-nav: 500;--z-fab: 900;--z-bar: 850}/* ───────────────────────────────────────────────────────────────────── 2. RESET+BASE ───────────────────────────────────────────────────────────────────── */ *, *::before, *::after{box-sizing: border-box; margin: 0; padding: 0}html{scroll-behavior: smooth;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; color-scheme: light}body{font-family: var(--ff); font-size: var(--fs-body); font-weight: var(--fw-reg); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--c-body); background: var(--c-bg); overflow-x: hidden; min-height: 100dvh}img, picture, video, svg{display: block; max-width: 100%; height: auto}button{cursor: pointer; border: none; background: none; font: inherit}a{color: inherit; text-decoration: none}ul, ol{list-style: none}p{max-width: 64ch; text-wrap: pretty}p+p{margin-top: var(--sp-md)}:focus-visible{outline: 2px solid var(--c-dark); outline-offset: 3px; border-radius: var(--r-btn)}:target{scroll-margin-top: calc(var(--nav-h)+24px)}::selection{background: rgba(132, 94, 53, .20); color: var(--c-h)}/* ───────────────────────────────────────────────────────────────────── 3. TYPOGRAPHY ───────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4{font-family: var(--ff); font-weight: var(--fw-bold); color: var(--c-h); line-height: var(--lh-h); letter-spacing: var(--ls-h); text-wrap: balance}h1{font-size: var(--fs-h1); font-weight: var(--fw-xbold)}h2{font-size: var(--fs-h2)}h3{font-size: var(--fs-h3); line-height: var(--lh-snug)}h4{font-size: var(--fs-h4); line-height: var(--lh-snug)}/* Mixed headline: em → Arapey italic */ h1 em, h2 em, h3 em, h4 em{font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg); letter-spacing: 0}.chip{display: inline-flex; align-items: center; gap: .35rem; background: var(--c-bg-lav); color: var(--c-dark); font-size: var(--fs-badge); font-weight: var(--fw-med); letter-spacing: var(--ls-badge); text-transform: uppercase; padding: .35rem .9rem; border-radius: var(--r-pill); border: 1px solid var(--c-border-card); width: fit-content}.chip--dark{background: rgba(250, 246, 240, .12); color: var(--c-on-dark); border-color: var(--c-border-dark)}.chip--dot::before{content: ''; width: 6px; height: 6px; background: currentColor; border-radius: var(--r-full); flex-shrink: 0; opacity: .7}.s-lead{font-size: 1.0625rem; color: var(--c-muted); line-height: var(--lh-rel); max-width: 46ch}.s-lead--dark{color: var(--c-on-dark-m)}/* ───────────────────────────────────────────────────────────────────── 4. LAYOUT ───────────────────────────────────────────────────────────────────── */ .container{width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x)}.sec{padding-block: var(--sp-sec)}.s-hd{margin-bottom: var(--sp-3xl)}.s-hd .chip{margin-bottom: var(--sp-md)}.s-hd h2{margin-bottom: var(--sp-md)}.s-hd--center{text-align: center}.s-hd--center .chip, .s-hd--center .s-lead{margin-inline: auto}/* ───────────────────────────────────────────────────────────────────── 5. BUTTONS ───────────────────────────────────────────────────────────────────── */ .btn-filled{display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--c-deep); color: var(--c-on-dark); border-radius: var(--r-btn); padding: .8rem 1.75rem; font-family: var(--ff); font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); border: none; box-shadow: var(--shadow-btn); transition: all var(--t-norm) var(--ease); text-decoration: none; cursor: pointer; white-space: nowrap}.btn-filled:hover{background: var(--c-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(93, 68, 49, .25); color: var(--c-on-dark)}.btn-filled:active{transform: translateY(0)}.btn-filled--lg{padding: 1rem 2.25rem; font-size: var(--fs-body)}.btn-filled--mid{background: var(--c-dark)}.btn-filled--mid:hover{background: var(--c-deep)}.btn-pill{display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: transparent; color: var(--c-deep); border-radius: var(--r-pill); padding: .75rem 1.75rem; font-family: var(--ff); font-size: var(--fs-sm); font-weight: var(--fw-med); letter-spacing: var(--ls-badge); border: 1.5px solid var(--c-border); transition: all var(--t-norm) var(--ease); text-decoration: none; cursor: pointer; white-space: nowrap}.btn-pill:hover{border-color: var(--c-deep); background: rgba(93, 68, 49, .04); color: var(--c-deep)}.btn-pill--lg{padding: .9rem 2.25rem; font-size: var(--fs-body)}.btn-pill--dark{color: var(--c-on-dark); border-color: rgba(250, 246, 240, .35)}.btn-pill--dark:hover{border-color: var(--c-on-dark); background: rgba(250, 246, 240, .10); color: var(--c-on-dark)}.btn-full{width: 100%}/* ───────────────────────────────────────────────────────────────────── 6. NAVIGATION ───────────────────────────────────────────────────────────────────── */ .nav{position: fixed; inset: 0 0 auto; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; background: transparent; transition: background var(--t-norm) var(--ease), backdrop-filter var(--t-norm), box-shadow var(--t-norm) var(--ease)}.nav--scrolled{background: var(--c-bg-nav-scrolled); backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--c-border), 0 4px 20px rgba(34, 29, 26, .06)}.nav__inner{width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); display: flex; align-items: center; justify-content: space-between}.nav-logo{font-family: var(--ff); font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--c-deep); letter-spacing:-0.04em; line-height: 1; text-decoration: none; display: flex; align-items: center; gap: var(--sp-xs)}.nav-logo em{font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg); color: var(--c-dark)}.nav-logo span{color: var(--c-dark)}.nav-logo-img{width: 32px; height: 32px; object-fit: contain}.nav__links{display: flex; align-items: center; gap: var(--sp-xl)}.nav__link{font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-muted); letter-spacing: var(--ls-badge); padding: .375rem 0; position: relative; transition: color var(--t-fast); text-decoration: none}.nav__link::after{content: ''; position: absolute; bottom:-2px; left: 0; width: 0; height: 1.5px; background: var(--c-deep); border-radius: var(--r-full); transition: width var(--t-norm) var(--ease)}.nav__link:hover{color: var(--c-deep)}.nav__link:hover::after{width: 100%}.nav__cta{margin-left: var(--sp-md)}.nav__hamburger{display: none; flex-direction: column; gap: 5px; width: 28px; cursor: pointer; z-index: calc(var(--z-nav)+20); background: none; border: none; padding: 0}.nav__hamburger span{display: block; width: 100%; height: 1.5px; background: var(--c-deep); border-radius: var(--r-full); transition: transform var(--t-norm) var(--ease), opacity var(--t-fast), background var(--t-fast); transform-origin: center}.nav__hamburger--open span{background: var(--c-on-dark) !important}.nav__hamburger--open span:nth-child(1){transform: translateY(6.5px) rotate(45deg)}.nav__hamburger--open span:nth-child(2){opacity: 0}.nav__hamburger--open span:nth-child(3){transform: translateY(-6.5px) rotate(-45deg)}.nav__mobile{position: fixed; inset: 0; width: 100%; height: 100vh; height: 100svh; z-index: calc(var(--z-nav)+10); background: var(--c-bg-mobile-nav); flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2xl); display: none; opacity: 0; pointer-events: none; transition: opacity var(--t-norm) var(--ease)}.nav__mobile--open{display: flex; opacity: 1; pointer-events: auto}.nav__mobile .nav__link{font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--c-on-dark)}.nav__mobile .nav__link::after{display: none}.nav__mobile .nav__link:hover{color: var(--c-on-dark-2)}.nav__mobile .btn-filled{background: var(--c-on-dark); color: var(--c-deep); box-shadow: 0 4px 14px rgba(93, 68, 49, .15)}.nav__mobile .btn-filled:hover{background: var(--c-on-dark-2); color: var(--c-deep); transform: translateY(-2px)}/* ───────────────────────────────────────────────────────────────────── 7. HERO ───────────────────────────────────────────────────────────────────── */ /* ── Nav light mode (over full-bleed hero) ── */ /* Logo (img+span) stays always in brand colors — only links turn white */ .nav--light:not(.nav--scrolled) .nav__link, .nav--light:not(.nav--scrolled) .nav__link--drop{color: rgba(255, 255, 255, 0.92)}.nav--light:not(.nav--scrolled) .nav__link:hover{color: #fff}.nav--light:not(.nav--scrolled) .nav__cta{color: #fff; border-color: rgba(255, 255, 255, 0.45)}.nav--light:not(.nav--scrolled) .nav__cta:hover{background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7)}.nav--light:not(.nav--scrolled) .nav__hamburger span{background: #fff}.nav--light:not(.nav--scrolled) .drop-caret{color: rgba(255,255,255,0.6)}/* ── Hero full-bleed ── */ .hero{background: #1a1410; overflow: hidden; padding: 0}.hero__fullbleed{position: relative; min-height: 100svh; display: flex; align-items: flex-end}.hero__picture, .hero__picture img, .hero__bg{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top}.hero__overlay{position: absolute; inset: 0; background: linear-gradient( to top, rgba(12, 8, 5, 0.88) 0%, rgba(12, 8, 5, 0.45) 45%, rgba(12, 8, 5, 0.08) 100% )}.hero__content{position: relative; z-index: 1; width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); padding-bottom: clamp(2.5rem, 5vw, 4rem); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2xl)}/* ── Hero text ── */ .hero__text .chip--hero{margin-bottom: var(--sp-lg); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1)}.hero__text h1{font-size: clamp(3.75rem, 9vw, 8rem); color: #fff; line-height: 0.88; letter-spacing:-0.03em; margin-bottom: var(--sp-2xl)}.hero__text h1 em{font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg)}.hero__actions{display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center}.hero__btn-outline{color: rgba(255,255,255,0.9) !important; border-color: rgba(255,255,255,0.4) !important}.hero__btn-outline:hover{background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.7) !important}/* ── Hero right side: contact+booking card ── */ .hero__side{display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-lg); flex-shrink: 0}.hero__contact{display: flex; flex-direction: column; align-items: flex-end; gap: 4px}.hero__contact-phone{font-size: 1.0625rem; font-weight: var(--fw-med); color: rgba(255,255,255,0.90); letter-spacing:-0.01em}.hero__contact-addr{font-size: var(--fs-sm); color: rgba(255,255,255,0.50); letter-spacing: var(--ls-badge); text-transform: uppercase}.hero__booking-card{display: flex; align-items: center; gap: var(--sp-md); background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px); border-radius: var(--r-card); padding: var(--sp-lg) var(--sp-xl); text-decoration: none; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 32px rgba(0,0,0,0.3); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); max-width: 280px}.hero__booking-card:hover{transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.4)}.hero__booking-card-text{display: flex; flex-direction: column; gap: 3px}.hero__booking-card-title{font-size: 1rem; font-weight: var(--fw-semi); color: var(--c-h); line-height: 1.2}.hero__booking-card-sub{font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: 0.01em}.hero__booking-card-arrow{color: var(--c-deep); flex-shrink: 0; transition: transform var(--t-fast) var(--ease)}.hero__booking-card:hover .hero__booking-card-arrow{transform: translate(2px,-2px)}/* Stats bar */ .hero__stats{background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding-block: var(--sp-2xl)}.stats-row{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); text-align: center}.stat{display: flex; flex-direction: column; gap: var(--sp-xs); align-items: center}.stat__n{font-family: var(--ff); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: var(--fw-xbold); color: var(--c-deep); line-height: 1}.stat__l{font-size: var(--fs-xs); font-weight: var(--fw-med); color: var(--c-muted); letter-spacing: var(--ls-badge); text-transform: uppercase}.stat+.stat{border-left: 1px solid var(--c-border)}/* ───────────────────────────────────────────────────────────────────── 8. SERVICES — 3D CAROUSEL ───────────────────────────────────────────────────────────────────── */ .sec-services{background: var(--c-bg); padding-block: var(--sp-sec)}.sc-header{display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: end; margin-bottom: var(--sp-3xl)}.sc-header .chip{margin-bottom: var(--sp-lg)}.sc-header h2{margin-bottom: 0}.sc-header p{color: var(--c-muted); font-size: 1.0625rem; line-height: var(--lh-rel); max-width: 42ch; align-self: end; margin: 0}.sc-wrapper{position: relative; padding-block: var(--sp-lg)}.sc-viewport{perspective: 1400px; overflow: hidden; padding-block: var(--sp-xl)}.sc-track{display: flex; align-items: center; justify-content: center; position: relative; height: 420px; transform-style: preserve-3d}.sc-card{position: absolute; width: 268px; background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow); border: 1px solid var(--c-border-card); overflow: hidden; transition: all .55s var(--ease); cursor: pointer}.sc-card__img{width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-lav)}.sc-card__img img{width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease)}.sc-card:hover .sc-card__img img{transform: scale(1.04)}.sc-card__body{padding: var(--sp-lg)}.sc-card__name{font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--c-h); margin-bottom: var(--sp-xs); line-height: 1.2; letter-spacing: var(--ls-h)}.sc-card__price{display: block; font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-md)}.sc-card__link{font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-dark); letter-spacing: var(--ls-badge); transition: letter-spacing var(--t-fast); text-decoration: none}.sc-card__link:hover{letter-spacing: .08em}/* Carousel states */ .sc-card--far-prev{transform: translateX(-390px) rotateY(42deg) scale(.62); opacity: .18; pointer-events: none}.sc-card--prev{transform: translateX(-230px) rotateY(24deg) scale(.84); opacity: .58; box-shadow: none}.sc-card--active{transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; z-index: 10; box-shadow: var(--shadow-h)}.sc-card--next{transform: translateX(230px) rotateY(-24deg) scale(.84); opacity: .58; box-shadow: none}.sc-card--far-next{transform: translateX(390px) rotateY(-42deg) scale(.62); opacity: .18; pointer-events: none}.sc-card--hidden{opacity: 0; pointer-events: none; transform: scale(.3)}.sc-btn{position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--c-border-card); color: var(--c-deep); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; z-index: 20; box-shadow: var(--shadow); transition: all var(--t-fast); cursor: pointer}.sc-btn:hover{background: var(--c-deep); color: white; border-color: var(--c-deep); transform: translateY(-50%) scale(1.1)}.sc-btn--prev{left: 0}.sc-btn--next{right: 0}/* Category nav */ .sc-cats{display: flex; flex-wrap: wrap; gap: var(--sp-xl); justify-content: center; margin-top: var(--sp-2xl); padding-top: var(--sp-xl); border-top: 1px solid var(--c-border)}.sc-cat{font-family: var(--ff); font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: var(--fw-bold); color: var(--c-deep); letter-spacing: var(--ls-h); cursor: pointer; transition: color var(--t-fast), opacity var(--t-fast); opacity: .78; border: none; background: none}.sc-cat:hover{opacity: 1; color: var(--c-deep)}.sc-cat--active{color: var(--c-deep); opacity: 1}/* ───────────────────────────────────────────────────────────────────── 9. HOW WE CARE ───────────────────────────────────────────────────────────────────── */ .sec-care{background: var(--c-bg-sec-dark); padding-block: var(--sp-sec)}.care-top{display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: end; margin-bottom: var(--sp-3xl)}.care-top .chip{margin-bottom: var(--sp-lg)}.care-top h2{color: var(--c-on-dark)}.care-top h2 em{color: var(--c-on-dark-2)}.care-top p{color: var(--c-on-dark-m); font-size: 1.0625rem; line-height: var(--lh-rel); max-width: 44ch; align-self: end; margin: 0}.care-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); perspective: 1200px}.care-card{background: rgba(250, 246, 240, 0.08); border: 1px solid rgba(250, 246, 240, 0.14); border-radius: var(--r-card); padding: var(--sp-2xl); backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px); transition: all var(--t-norm) var(--ease); position: relative; overflow: hidden}.care-card::before{content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(250, 246, 240, 0.28), transparent); opacity: 0; transition: opacity var(--t-norm)}.care-card:hover{background: rgba(250, 246, 240, 0.13); border-color: rgba(250, 246, 240, 0.22); transform: translateY(-4px) rotateY(0) rotateX(0) !important}.care-card:hover::before{opacity: 1}.care-card:nth-child(1){transform: perspective(800px) rotateY(3.5deg) rotateX(-2deg)}.care-card:nth-child(2){transform: perspective(800px) rotateY(-3.5deg) rotateX(-2deg)}.care-card:nth-child(3){transform: perspective(800px) rotateY(3.5deg) rotateX(2deg)}.care-card:nth-child(4){transform: perspective(800px) rotateY(-3.5deg) rotateX(2deg)}.care-card__header{display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-xl)}.care-card__icon{width: 48px; height: 48px; background: rgba(250, 246, 240, 0.12); border: 1px solid rgba(250, 246, 240, 0.16); border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; font-size: 1.4rem}.care-card__num{font-size: var(--fs-badge); font-weight: var(--fw-med); color: var(--c-on-dark-m); letter-spacing: var(--ls-badge)}.care-card__title{font-family: var(--ff); font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--c-on-dark); margin-bottom: var(--sp-sm); line-height: var(--lh-snug); letter-spacing: var(--ls-h)}.care-card__title em{font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg); color: var(--c-on-dark-2)}.care-card__desc{font-size: var(--fs-sm); color: var(--c-on-dark-m); line-height: var(--lh-rel); max-width: 36ch}.care-card--sta{background: rgba(250, 246, 240, 0.14); border-color: rgba(250, 246, 240, 0.22)}.care-card--sta .care-card__icon{background: rgba(250, 246, 240, 0.2); box-shadow: 0 0 18px rgba(250, 246, 240, 0.10)}/* ── Light variant — for sections with light background (e.g. #enfoque) ── */ .care-card--light{background: var(--c-surface); border-color: var(--c-border-card); box-shadow: var(--shadow)}.care-card--light:hover{background: var(--c-surface); border-color: transparent; box-shadow: var(--shadow-h); transform: translateY(-4px) !important}.care-card--light::before{display: none}.care-card--light .care-card__icon{background: var(--c-bg-lav); border-color: var(--c-border-card)}.care-card--light .care-card__title{color: var(--c-h)}.care-card--light .care-card__title em{font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg); color: var(--c-dark)}.care-card--light .care-card__num{color: var(--c-muted)}.care-card--light .care-card__desc{color: var(--c-muted)}/* ── Sección con fondo claro que contiene cards de cuidado ── */ .sec--light{background: var(--c-bg); padding-block: var(--sp-sec)}.sec--light .care-grid{perspective: none}.sec--light .care-card:nth-child(1), .sec--light .care-card:nth-child(2), .sec--light .care-card:nth-child(3), .sec--light .care-card:nth-child(4){transform: none}/* ───────────────────────────────────────────────────────────────────── 10. TESTIMONIALS ───────────────────────────────────────────────────────────────────── */ .sec-testimonios{background: var(--c-bg); padding-block: var(--sp-sec)}.testi-top{display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2xl); align-items: end; margin-bottom: var(--sp-3xl)}.testi-top .chip{margin-bottom: var(--sp-lg)}.testi-metric{text-align: right; flex-shrink: 0}.testi-num{display: block; font-family: var(--ff); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: var(--fw-xbold); color: var(--c-deep); line-height: 1}.testi-lab{font-size: var(--fs-sm); color: var(--c-muted); font-weight: var(--fw-med); letter-spacing: var(--ls-badge); text-transform: uppercase}.testi-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg)}.testi-card{background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-2xl); box-shadow: var(--shadow); transition: all var(--t-norm) var(--ease); position: relative}.testi-card::before{content: '"'; position: absolute; top: var(--sp-md); right: var(--sp-xl); font-family: var(--ff-serif); font-size: 4rem; color: var(--c-bg-lav); line-height: 1; pointer-events: none}.testi-card:hover{transform: translateY(-4px); box-shadow: var(--shadow-h); border-color: transparent}.testi-stars{color: #F59E0B; font-size: .85rem; margin-bottom: var(--sp-md); letter-spacing: 2px}.testi-quote{font-size: var(--fs-sm); color: var(--c-body); line-height: var(--lh-rel); font-style: italic; margin-bottom: var(--sp-xl)}.testi-author{display: flex; align-items: center; gap: var(--sp-sm)}.testi-avatar{width: 44px; height: 44px; border-radius: var(--r-full); background: var(--c-bg-lav); border: 2px solid var(--c-border-card); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--c-dark); flex-shrink: 0; overflow: hidden}.testi-avatar img{width: 100%; height: 100%; object-fit: cover}.testi-name{font-weight: var(--fw-semi); color: var(--c-h); font-size: var(--fs-sm); display: block}.testi-proc{font-size: var(--fs-xs); color: var(--c-muted)}.testi-footer{text-align: center; margin-top: var(--sp-3xl); display: flex; flex-direction: column; align-items: center; gap: var(--sp-lg)}/* ───────────────────────────────────────────────────────────────────── 11. TEAM ───────────────────────────────────────────────────────────────────── */ .sec-team{background: var(--c-bg-periw); padding-block: var(--sp-sec)}.team-layout{display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--sp-xl); align-items: center; margin-bottom: var(--sp-2xl)}.team-card{background: var(--c-bg-lav); border: 1px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-xl); box-shadow: var(--shadow); transition: transform var(--t-norm) var(--ease), box-shadow var(--t-norm) var(--ease); display: flex; flex-direction: column; gap: var(--sp-md)}.team-card:hover{transform: translateY(-6px); box-shadow: var(--shadow-h)}.team-card--float{will-change: transform}.team-card__badges{display: flex; gap: var(--sp-xs); flex-wrap: wrap}.team-card__badge-item{background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-pill); padding: .25rem .75rem; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-dark); letter-spacing: var(--ls-badge)}.team-card__photo{width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--c-border-card)}.team-card__photo img{width: 100%; height: 100%; object-fit: cover; object-position: center 8%}.team-card__name{font-family: var(--ff); font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--c-h); line-height: 1.2; letter-spacing: var(--ls-h)}.team-card__name em{font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg); color: var(--c-dark)}.team-card__spec{font-size: var(--fs-xs); font-weight: var(--fw-med); color: var(--c-dark); letter-spacing: var(--ls-badge); text-transform: uppercase}.team-card__bio{font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-rel)}.team-card__mat{font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: var(--ls-badge)}/* team-center: foto vertical+texto superpuesto */ .team-center{position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 520px; display: flex; align-items: flex-end}.team-center__visual{position: absolute; inset: 0}.team-center__visual img{width: 100%; height: 100%; object-fit: cover; object-position: center top}.team-center__visual-overlay{position: absolute; inset: 0; background: linear-gradient( to top, rgba(12, 8, 5, 0.90) 0%, rgba(12, 8, 5, 0.40) 55%, rgba(12, 8, 5, 0.05) 100% )}.team-center__text{position: relative; z-index: 1; padding: var(--sp-2xl); display: flex; flex-direction: column; gap: var(--sp-md)}.team-center__text .chip{color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); margin-bottom: 0}.team-center__text h2{color: #fff; margin-bottom: 0; font-size: clamp(1.5rem, 2.8vw, 2.5rem)}.team-center__text h2 em{color: rgba(255,255,255,0.75)}.team-center__text p{color: rgba(255,255,255,0.65); line-height: var(--lh-rel); margin-bottom: 0; max-width: 38ch; font-size: var(--fs-sm)}.team-bottom{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); align-items: stretch}/* team-cta-block: imagen de fondo con overlay */ .team-cta-block{grid-column: 1 /-1; position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 320px; display: flex; flex-direction: column}.team-cta-block__img{position: absolute; inset: 0}.team-cta-block__img img{width: 100%; height: 100%; object-fit: cover; object-position: center}.team-cta-block__overlay{position: absolute; inset: 0; background: rgba(12, 8, 5, 0.72)}.team-cta-block__content{position: relative; z-index: 1; padding: var(--sp-3xl); display: flex; flex-direction: column; gap: var(--sp-lg); height: 100%}.team-cta-block h3{color: var(--c-on-dark)}.team-cta-block h3 em{color: rgba(255,255,255,0.72); font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg)}.team-cta-block ul{display: flex; flex-direction: column; gap: var(--sp-sm)}.team-cta-block li{display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); color: var(--c-on-dark-m); line-height: 1.4}.team-cta-block li::before{content: '✓'; color: var(--c-on-dark-2); font-weight: var(--fw-bold); flex-shrink: 0}/* ───────────────────────────────────────────────────────────────────── 12. PROCESS / STAGES ───────────────────────────────────────────────────────────────────── */ .sec-process{background: var(--c-bg); padding-block: var(--sp-sec)}.process-hd{margin-bottom: var(--sp-3xl)}.process-hd .chip{margin-bottom: var(--sp-lg)}.process-layout{display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-2xl); align-items: start}.process-bar{position: sticky; top: calc(var(--nav-h)+var(--sp-xl)); width: 4px; height: 440px; background: var(--c-border-card); border-radius: var(--r-full); margin-left: auto; overflow: hidden}.process-bar__fill{width: 100%; height: 0%; background: var(--c-dark); border-radius: var(--r-full); transition: height .35s var(--ease)}.process-steps{display: flex; flex-direction: column; gap: var(--sp-3xl)}.process-step{position: relative; padding-left: var(--sp-xl); opacity: .35; transition: opacity var(--t-slow) var(--ease)}.process-step--active{opacity: 1}.process-step--active::before{content: ''; position: absolute; left: 0; top: .5rem; width: 3px; height: calc(100%-.5rem); background: var(--c-dark); border-radius: var(--r-full)}.process-step__ghost{position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--ff); font-size: var(--fs-ghost); font-weight: var(--fw-xbold); color: rgba(0,16,76,.03); line-height: 1; white-space: nowrap; pointer-events: none; letter-spacing: var(--ls-h); user-select: none}.process-step__ghost::after{content: attr(data-text)}.process-step__num{display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-dark); letter-spacing: var(--ls-badge); text-transform: uppercase; margin-bottom: var(--sp-sm)}.process-step h3{margin-bottom: var(--sp-md)}.process-step p{color: var(--c-muted); line-height: var(--lh-rel); max-width: 52ch}/* ───────────────────────────────────────────────────────────────────── 13. PRICING SPLIT ───────────────────────────────────────────────────────────────────── */ .sec-pricing{display: grid; grid-template-columns: 1fr 1fr; min-height: 520px}.pricing-dark{background: var(--c-bg-sec-dark); padding: var(--sp-sec) var(--sp-sec) var(--sp-sec) max(var(--pad-x), calc((100vw-var(--max-w)) / 2+var(--pad-x))); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-xl)}.pricing-step-num{font-family: var(--ff); font-size: clamp(4.5rem, 8vw, 7.5rem); font-weight: var(--fw-xbold); color: rgba(245,247,255,.12); line-height: 1; letter-spacing: var(--ls-h)}.pricing-dark h2{color: var(--c-on-dark)}.pricing-dark h2 em{color: var(--c-on-dark-2)}.pricing-dark p{color: var(--c-on-dark-m); line-height: var(--lh-rel); max-width: 38ch}.pricing-light{background: var(--c-bg); padding: var(--sp-sec) max(var(--pad-x), calc((100vw-var(--max-w)) / 2+var(--pad-x))) var(--sp-sec) var(--sp-sec); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-xl)}.pricing-light h3{letter-spacing: var(--ls-h)}.pricing-light>p{color: var(--c-muted); line-height: var(--lh-rel); max-width: 44ch}.pricing-items{display: flex; flex-direction: column; gap: var(--sp-sm)}.pricing-item{display: flex; align-items: center; justify-content: space-between; padding: var(--sp-md) var(--sp-lg); background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-btn)}.pricing-item__name{font-weight: var(--fw-semi); color: var(--c-h); font-size: var(--fs-sm)}.pricing-item__price{font-weight: var(--fw-bold); color: var(--c-dark); font-size: var(--fs-sm)}/* ───────────────────────────────────────────────────────────────────── 14. BOOKING+MAP ───────────────────────────────────────────────────────────────────── */ .sec-booking{display: grid; grid-template-columns: 1fr 1fr; min-height: 680px}.booking-form-col{background: var(--c-bg-sec-dark); padding: var(--sp-sec) var(--sp-sec) var(--sp-sec) max(var(--pad-x), calc((100vw-var(--max-w)) / 2+var(--pad-x))); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-lg)}.booking-form-col h2{color: var(--c-on-dark)}.booking-form-col h2 em{color: var(--c-on-dark-2)}.booking-offer{font-size: var(--fs-sm); color: var(--c-on-dark-2); background: rgba(250, 246, 240, 0.10); border: 1px solid rgba(250, 246, 240, 0.18); border-radius: var(--r-btn); padding: var(--sp-sm) var(--sp-md); line-height: 1.5}.booking-offer strong{color: var(--c-on-dark)}.booking-form{display: flex; flex-direction: column; gap: var(--sp-md)}.form-row{display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md)}.form-group{position: relative}.form-input, .form-select, .form-textarea{width: 100%; padding: 1.5rem var(--sp-md) .5rem; background: rgba(250, 246, 240, 0.10); border: 1px solid rgba(250, 246, 240, 0.18); border-radius: var(--r-btn); color: var(--c-on-dark); font-family: var(--ff); font-size: var(--fs-sm); line-height: var(--lh-body); transition: border-color var(--t-fast), background var(--t-fast);-webkit-appearance: none}.form-input::placeholder, .form-textarea::placeholder{color: rgba(250, 246, 240, 0.35)}.form-input:focus, .form-select:focus, .form-textarea:focus{outline: none; border-color: rgba(250, 246, 240, 0.4); background: rgba(250, 246, 240, 0.14)}.form-label{position: absolute; left: var(--sp-md); top: .45rem; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: #FAF6F0; letter-spacing: var(--ls-badge); text-transform: uppercase; pointer-events: none}.form-select{cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(250,246,240,0.45)' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-md) center; padding-right: var(--sp-2xl)}.form-select option{background: var(--c-dark); color: var(--c-on-dark)}.form-textarea{min-height: 76px; resize: none; padding-top: 1.6rem}.time-pills-label{font-size: var(--fs-xs); font-weight: var(--fw-semi); color: #FAF6F0; letter-spacing: var(--ls-badge); text-transform: uppercase}.time-pills{display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-xs)}.time-pill{padding: .5rem 1.2rem; border-radius: var(--r-pill); border: 1.5px solid rgba(250, 246, 240, 0.25); color: var(--c-on-dark-m); font-size: var(--fs-xs); font-weight: var(--fw-med); letter-spacing: var(--ls-badge); cursor: pointer; transition: all var(--t-fast); background: none; font-family: var(--ff)}.time-pill:hover, .time-pill--active{background: rgba(250, 246, 240, 0.16); border-color: rgba(250, 246, 240, 0.55); color: var(--c-on-dark)}.booking-map-col{position: relative; background: var(--c-bg); display: flex; flex-direction: column}.booking-map-col iframe{flex: 1; width: 100%; border: none; min-height: 380px; filter: grayscale(15%) contrast(.95) brightness(1.02)}.clinic-info-card{padding: var(--sp-xl); padding-right: max(var(--pad-x), calc((100vw-var(--max-w)) / 2+var(--pad-x))); background: var(--c-surface); border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: var(--sp-sm)}.clinic-info-logo{font-family: var(--ff); font-size: 1.1rem; font-weight: var(--fw-bold); color: var(--c-deep); letter-spacing:-0.03em; margin-bottom: var(--sp-xs); display: flex; align-items: center; gap: var(--sp-xs)}.clinic-info-logo em{font-family: var(--ff-serif); font-style: italic; color: var(--c-dark)}.clinic-info-logo-img{width: 24px; height: 24px; object-fit: contain}.clinic-info-row{display: flex; gap: var(--sp-xs); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-h); line-height: 1.5}.clinic-info-row span, .clinic-info-row a{color: var(--c-h)}.clinic-info-row a:hover{color: var(--c-deep)}.clinic-info-row svg{flex-shrink: 0; margin-top: 2px; color: var(--c-dark); opacity: .7}/* ───────────────────────────────────────────────────────────────────── 15. FAQ — CHAT FORMAT ───────────────────────────────────────────────────────────────────── */ .sec-faq{background: var(--c-bg); padding-block: var(--sp-sec)}.faq-hd{margin-bottom: var(--sp-2xl)}.faq-hd .chip{margin-bottom: var(--sp-lg)}.faq-chips{display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-2xl)}.faq-chip{font-family: var(--ff); font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-body); border: 1.5px solid var(--c-border); border-radius: var(--r-pill); padding: .6rem 1.25rem; cursor: pointer; transition: all var(--t-fast); letter-spacing: var(--ls-body); white-space: nowrap; background: none}.faq-chip:hover{border-color: var(--c-dark); color: var(--c-dark)}.faq-chip--active{background: var(--c-deep); border-color: var(--c-deep); color: white}.faq-answer{max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), margin-bottom .5s var(--ease); margin-bottom: 0}.faq-answer--open{max-height: 280px; margin-bottom: var(--sp-xl)}.faq-bubble{display: flex; gap: var(--sp-lg); align-items: flex-start; background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: 0 var(--r-card) var(--r-card) var(--r-card); padding: var(--sp-xl); box-shadow: var(--shadow); max-width: 680px}.faq-avatar{width: 48px; height: 48px; border-radius: var(--r-full); background: var(--c-dark); color: var(--c-on-dark); font-family: var(--ff); font-weight: var(--fw-bold); font-size: .9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0}.faq-bubble-text{font-size: var(--fs-sm); color: var(--c-body); line-height: var(--lh-rel)}.faq-cta-wrap{max-width: 680px; margin-top: var(--sp-lg)}.faq-cta{display: flex; align-items: center; justify-content: center; gap: var(--sp-sm); width: 100%; padding: var(--sp-md) var(--sp-2xl); background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--r-pill); font-family: var(--ff); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; transition: all var(--t-norm) var(--ease); text-decoration: none}.faq-cta:hover{background: var(--c-deep); transform: translateY(-2px); box-shadow: var(--shadow-btn); color: var(--c-on-dark)}/* ───────────────────────────────────────────────────────────────────── 16. FOOTER ───────────────────────────────────────────────────────────────────── */ .footer{background: var(--c-bg-footer); padding-top: var(--sp-sec); padding-bottom: var(--sp-xl)}.footer-grid{display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.5fr; gap: var(--sp-2xl); margin-bottom: var(--sp-4xl)}.footer-col__title{font-size: var(--fs-xs); font-weight: var(--fw-semi); color: #FAF6F0; letter-spacing: var(--ls-badge); text-transform: uppercase; margin-bottom: var(--sp-lg)}.footer-nav{display: flex; flex-direction: column; gap: var(--sp-sm)}.footer-nav a{font-size: var(--fs-sm); color: var(--c-on-dark-2); transition: color var(--t-fast); line-height: 1.5}.footer-nav a:hover{color: var(--c-on-dark)}.footer-info{display: flex; flex-direction: column; gap: var(--sp-sm)}.footer-info-row{display: flex; align-items: flex-start; gap: var(--sp-xs); font-size: var(--fs-sm); color: var(--c-on-dark-2); line-height: 1.5}.footer-info-row a{color: var(--c-on-dark-2); transition: color var(--t-fast)}.footer-info-row a:hover{color: var(--c-on-dark)}.footer-info-row svg{flex-shrink: 0; margin-top: 2px; opacity: .5}.footer-tagline-col{display: flex; flex-direction: column; justify-content: flex-start}.footer-tagline-col .s-lead--dark{margin-bottom: var(--sp-lg)}.footer-tagline{font-family: var(--ff); font-size: clamp(2rem, 3.2vw, 3.25rem); font-weight: var(--fw-xbold); color: var(--c-on-dark); line-height: 1.0; letter-spacing: var(--ls-h)}.footer-tagline em{font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-reg); color: var(--c-on-dark-2); display: block}.footer-bottom{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-md); padding-top: var(--sp-xl); border-top: 1px solid rgba(250, 246, 240, .10)}.footer-copy{font-size: var(--fs-xs); color: var(--c-on-dark-m)}.footer-legal{display: flex; gap: var(--sp-lg)}.footer-legal a{font-size: var(--fs-xs); color: var(--c-on-dark-m); transition: color var(--t-fast)}.footer-legal a:hover{color: var(--c-on-dark)}.footer-powered{display: flex; align-items: center}.powered-link{display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-on-dark-m); text-decoration: none; transition: color var(--t-fast)}.powered-link:hover{color: var(--c-on-dark)}.powered-logo{height: 18px; width: auto; opacity: 0.75; transition: opacity var(--t-fast)}.powered-link:hover .powered-logo{opacity: 1}.footer-social{display: flex; gap: var(--sp-sm)}.footer-social a{width: 36px; height: 36px; border-radius: var(--r-btn); background: rgba(250, 246, 240, .08); border: 1px solid rgba(250, 246, 240, .12); display: flex; align-items: center; justify-content: center; color: var(--c-on-dark-2); transition: all var(--t-fast)}.footer-social a:hover{background: rgba(250, 246, 240, .16); color: var(--c-on-dark); border-color: rgba(250, 246, 240, .25)}/* ───────────────────────────────────────────────────────────────────── 17. WA FAB+MOBILE BAR ───────────────────────────────────────────────────────────────────── */ .wa-fab{position: fixed; bottom: var(--sp-xl); right: var(--sp-xl); z-index: var(--z-fab); width: 58px; height: 58px; border-radius: var(--r-full); background: #25D366; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.35); transition: all var(--t-norm) var(--ease); text-decoration: none; animation: pulse-wa 2.5s ease-in-out infinite}.wa-fab:hover{transform: scale(1.1) translateY(-3px); box-shadow: 0 8px 32px rgba(37,211,102,.45); color: white}.wa-fab::before{content: ''; position: absolute; inset:-4px; border-radius: inherit; background: rgba(37,211,102,.18); animation: pulse-ring 2.5s ease-out infinite; z-index:-1}.wa-fab__tip{position: absolute; right: calc(100%+.75rem); top: 50%; transform: translateY(-50%) translateX(8px); white-space: nowrap; background: var(--c-surface); color: var(--c-deep); font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: .4rem .9rem; border-radius: var(--r-pill); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all var(--t-fast)}.wa-fab:hover .wa-fab__tip{opacity: 1; transform: translateY(-50%) translateX(0)}.mob-bar{display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-bar); background: rgba(245,247,255,.95); backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--c-border); padding: var(--sp-sm) var(--pad-x); padding-bottom: calc(var(--sp-sm)+env(safe-area-inset-bottom))}.mob-bar__inner{display: flex; gap: var(--sp-sm)}.mob-bar__btn{flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-xs); padding: .75rem var(--sp-md); border-radius: var(--r-btn); font-family: var(--ff); font-size: var(--fs-sm); font-weight: var(--fw-semi); text-decoration: none; letter-spacing: var(--ls-badge); transition: all var(--t-fast)}.mob-bar__btn--p{background: var(--c-deep); color: white}.mob-bar__btn--s{background: var(--c-bg-lav); border: 1px solid var(--c-border-card); color: var(--c-dark)}/* ───────────────────────────────────────────────────────────────────── 18. SCROLL REVEAL ───────────────────────────────────────────────────────────────────── */ .reveal{opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); will-change: opacity, transform}.reveal--left{transform: translateX(-28px)}.reveal--right{transform: translateX(28px)}.reveal--scale{transform: scale(.94); opacity: 0}.reveal--in{opacity: 1; transform: none}.d1{transition-delay: 80ms !important}.d2{transition-delay: 160ms !important}.d3{transition-delay: 240ms !important}.d4{transition-delay: 320ms !important}.d5{transition-delay: 400ms !important}/* ───────────────────────────────────────────────────────────────────── 19. KEYFRAMES ───────────────────────────────────────────────────────────────────── */ @keyframes pulse-wa{0%, 100%{box-shadow: 0 4px 20px rgba(37,211,102,.35)}50%{box-shadow: 0 4px 30px rgba(37,211,102,.55)}} @keyframes pulse-ring{0%{transform: scale(1); opacity: .5}100%{transform: scale(1.55); opacity: 0}} /* ───────────────────────────────────────────────────────────────────── 20. RESPONSIVE ───────────────────────────────────────────────────────────────────── */ @media (max-width: 1280px){.footer-grid{grid-template-columns: 1fr 1fr; gap: var(--sp-xl)}.team-layout{gap: var(--sp-lg)}} @media (max-width: 1024px){.hero__text h1{font-size: clamp(3rem, 7vw, 6rem)}.care-top{grid-template-columns: 1fr}.team-layout{grid-template-columns: 1fr 1fr}.team-layout>.team-card:last-child{display: none}.team-center{min-height: 420px}.team-bottom{grid-template-columns: 1fr}.sec-pricing, .sec-booking{grid-template-columns: 1fr}.pricing-dark, .booking-form-col{padding: var(--sp-3xl) var(--pad-x)}.pricing-light{padding: var(--sp-3xl) var(--pad-x)}.booking-map-col iframe{min-height: 320px}.clinic-info-card{padding: var(--sp-xl) var(--pad-x)}} @media (max-width: 768px){:root{--nav-h: 60px}.nav__links, .nav__cta{display: none}.nav__hamburger{display: flex}/* Hero mobile: solo lo indispensable (chip+h1+CTA primario). Teléfono, dirección, tarjeta de reserva, botón secundario, breadcrumb y lead ya están cubiertos por la mob-bar, el footer o las secciones siguientes — en mobile solo saturan la foto. */ .hero__content{flex-direction: column; align-items: flex-start; gap: var(--sp-xl); padding-bottom: calc(64px+var(--sp-xl)+env(safe-area-inset-bottom))}.hero__side, .hero__btn-outline, .hero__breadcrumb, .sp-hero__lead{display: none}.sp-hero .hero__text .chip--hero{display: none}/* duplica el h1 */ .hero__text h1{font-size: clamp(2.75rem, 11vw, 4rem)}.sp-hero .hero__content{padding-top: calc(var(--nav-h)+var(--sp-lg))}/* endodoncia.html sirve una foto vertical alternativa en mobile (ver picture/source en el HTML) — el "right top" pensado para la foto de desktop la recortaba al revés */ .sp-hero--endodoncia .hero__fullbleed .hero__bg{object-position: center 30%}.stats-row{grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg)}.stat+.stat{border-left: none}.stats-row .stat:nth-child(-n+2){border-bottom: 1px solid var(--c-border); padding-bottom: var(--sp-lg)}.sc-header{grid-template-columns: 1fr; gap: var(--sp-lg)}.sc-card--far-prev, .sc-card--far-next{display: none}.care-grid{grid-template-columns: 1fr}.care-card:nth-child(n){transform: none}.testi-grid{grid-template-columns: 1fr}.testi-top{grid-template-columns: 1fr}.testi-metric{text-align: left}.team-layout{grid-template-columns: 1fr}.team-layout>.team-card:last-child{display: flex}.team-center{order:-1; min-height: 380px}.team-center__text h2{font-size: clamp(1.5rem, 5vw, 2rem)}.team-bottom{grid-template-columns: 1fr}.team-cta-block__content{padding: var(--sp-2xl)}.process-layout{grid-template-columns: 1fr}.process-bar{display: none}.process-step{padding-left: var(--sp-md); opacity: 1}.footer-grid{grid-template-columns: 1fr 1fr; gap: var(--sp-xl)}.mob-bar{display: block}/* La mob-bar ya trae WhatsApp: el FAB flotante duplicaba el acceso y se superponía a los CTA del hero */ .wa-fab{display: none}.footer{padding-bottom: calc(64px+env(safe-area-inset-bottom))}} @media (max-width: 540px){.sc-track{height: 360px}.sc-card{width: 244px}.sc-card--prev, .sc-card--next{display: none}.testi-card{padding: var(--sp-lg)}.footer-grid{grid-template-columns: 1fr}.footer-tagline{font-size: clamp(1.75rem, 7vw, 2.5rem)}.hero__actions{flex-direction: column}.hero__actions a{width: 100%; justify-content: center}.form-row{grid-template-columns: 1fr}.faq-chip{white-space: normal; text-align: left}} /* ───────────────────────────────────────────────────────────────────── 21. REDUCED MOTION ───────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important}.reveal{opacity: 1; transform: none}.wa-fab, .wa-fab::before{animation: none}} /* ───────────────────────────────────────────────────────────────────── 22. UTILITIES ───────────────────────────────────────────────────────────────────── */ .sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin:-1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0}.text-center{text-align: center}.mx-auto{margin-inline: auto}.mt-sm{margin-top: var(--sp-sm)}.mt-md{margin-top: var(--sp-md)}.mt-lg{margin-top: var(--sp-lg)}.mt-xl{margin-top: var(--sp-xl)}.mt-2xl{margin-top: var(--sp-2xl)}.mb-lg{margin-bottom: var(--sp-lg)}.mb-xl{margin-bottom: var(--sp-xl)}.w-full{width: 100%}/* ───────────────────────────────────────────────────────────────────── 23. INTERNATIONAL VISITOR BANNER ───────────────────────────────────────────────────────────────────── */ .intl-banner{background: var(--c-bg-intl-banner); color: var(--c-on-dark); padding: .6rem var(--pad-x); position: relative; z-index: calc(var(--z-nav)-1); border-bottom: 1px solid rgba(250, 246, 240, .12)}.intl-banner__inner{max-width: var(--max-w); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap}.intl-banner__text{font-size: var(--fs-sm); color: var(--c-on-dark-2); flex: 1; min-width: 200px}.intl-banner__text strong{color: var(--c-on-dark)}.intl-banner__cta{font-size: var(--fs-sm); font-weight: var(--fw-semi); color: #D4C4A8; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-fast)}.intl-banner__cta:hover{color: var(--c-on-dark)}.intl-banner__close{background: none; border: none; color: var(--c-on-dark-m); font-size: 1.1rem; cursor: pointer; padding: 0 var(--sp-2xs); line-height: 1; transition: color var(--t-fast); flex-shrink: 0}.intl-banner__close:hover{color: var(--c-on-dark)}@media (max-width: 640px){.intl-banner__cta{display: none}} /* ───────────────────────────────────────────────────────────────────── 24. SAVINGS CALCULATOR ───────────────────────────────────────────────────────────────────── */ .sec-calc{display: none; background: var(--c-bg-sec-dark); padding-block: var(--sp-sec)}.intl-visitor .sec-calc{display: block}.calc-layout{display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-3xl); align-items: center}/* Left: text */ .calc-text .chip{margin-bottom: var(--sp-lg)}.calc-text h2{color: var(--c-on-dark); margin-bottom: var(--sp-lg)}.calc-text h2 em{color: var(--c-on-dark-2)}.calc-text .s-lead{margin-bottom: var(--sp-xl)}.calc-tags{display: flex; flex-wrap: wrap; gap: var(--sp-sm)}.calc-tag{background: rgba(250, 246, 240, .10); border: 1px solid rgba(250, 246, 240, .18); color: var(--c-on-dark-2); font-size: var(--fs-xs); font-weight: var(--fw-med); padding: .3rem .8rem; border-radius: var(--r-pill); letter-spacing: var(--ls-badge)}/* Right: widget card */ .calc-widget{background: var(--c-surface); border-radius: var(--r-card); padding: var(--sp-2xl); box-shadow: 0 24px 64px rgba(34, 29, 26, .08); display: flex; flex-direction: column; gap: var(--sp-xl)}.calc-selects{display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md)}.calc-group{display: flex; flex-direction: column; gap: var(--sp-xs)}.calc-label{font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-muted); letter-spacing: var(--ls-badge); text-transform: uppercase}.calc-select{padding: .65rem var(--sp-md); border: 1.5px solid var(--c-border-card); border-radius: var(--r-btn); font-family: var(--ff); font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-h); background: var(--c-bg); cursor: pointer; transition: border-color var(--t-fast); appearance: none;-webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23845E35' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 2.25rem}.calc-select:focus{border-color: var(--c-dark); outline: none; box-shadow: 0 0 0 3px rgba(93, 68, 49, .12)}/* Comparison bars */ .calc-bars{display: flex; flex-direction: column; gap: var(--sp-lg)}.calc-bar-item__top{display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-xs)}.calc-bar-item__label{font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-muted); text-transform: uppercase; letter-spacing: var(--ls-badge)}.calc-bar-item__price{font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: var(--fw-bold); color: var(--c-muted); letter-spacing: var(--ls-h); line-height: 1}.calc-bar-item__price--epe{color: var(--c-deep)}.calc-bar-item__track{height: 10px; background: var(--c-bg-lav); border-radius: var(--r-pill); overflow: hidden}.calc-bar-item__fill{height: 100%; border-radius: var(--r-pill); transition: width .65s var(--ease)}.calc-bar-item__fill--origin{background: rgba(93, 68, 49, .22)}.calc-bar-item__fill--epe{background: linear-gradient(90deg, var(--c-dark), var(--c-deep)); box-shadow: 0 0 12px rgba(93, 68, 49, .25)}/* Savings result card */ .calc-savings{background: linear-gradient(135deg, var(--c-bg-lav) 0%, var(--c-surface) 100%); border: 1.5px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-lg) var(--sp-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md)}.calc-savings__main{display: flex; flex-direction: column; gap: .2rem}.calc-savings__label{font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-muted); text-transform: uppercase; letter-spacing: var(--ls-badge)}.calc-savings__amount{font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: var(--fw-xbold); color: var(--c-deep); letter-spacing: var(--ls-h); line-height: 1; transition: all .4s var(--ease)}.calc-savings__badge{background: var(--c-dark); color: var(--c-on-dark); font-size: var(--fs-badge); font-weight: var(--fw-bold); letter-spacing: var(--ls-badge); text-transform: uppercase; padding: .45rem 1rem; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; transition: all .4s var(--ease)}.calc-cta{width: 100%; text-align: center; justify-content: center}.calc-disclaimer{font-size: var(--fs-xs); color: var(--c-muted); text-align: center; margin: 0; line-height: 1.5}/* Responsive */ @media (max-width: 960px){.calc-layout{grid-template-columns: 1fr; gap: var(--sp-2xl)}} @media (max-width: 540px){.calc-selects{grid-template-columns: 1fr}.calc-savings{flex-direction: column; align-items: flex-start; gap: var(--sp-sm)}.calc-widget{padding: var(--sp-lg)}} /* ═══════════════════════════════════════════════════════════════════════ END — Clínica Epelbaum Design System v2.0 · NeoDent Variant ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── 25. WARM BRONZE & ESPRESSO VARIANT CUSTOMIZATIONS (design-warm-gold branch) ───────────────────────────────────────────────────────────────────── */ .btn-pill:hover{background: rgba(132, 94, 53, 0.06) !important}.btn-pill--dark:hover{background: rgba(250, 246, 240, 0.10) !important}.calc-select{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23845E35' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important}/* ───────────────────────────────────────────────────────────────────── 26. RIGHT-TO-LEFT (RTL) SUPPORT FOR HEBREW ───────────────────────────────────────────────────────────────────── */ html[dir="rtl"]{text-align: right}html[dir="rtl"] body{direction: rtl; unicode-bidi: embed}/* Navbar */ html[dir="rtl"] .nav__cta{margin-left: 0; margin-right: var(--sp-md)}html[dir="rtl"] .nav__link::after{left: auto; right: 0}/* Stats */ html[dir="rtl"] .stat+.stat{border-left: none; border-right: 1px solid var(--c-border)}@media (max-width: 960px){html[dir="rtl"] .stat+.stat{border-right: none}} /* Services slider buttons */ html[dir="rtl"] .sc-btn--prev{left: auto; right: 0}html[dir="rtl"] .sc-btn--next{right: auto; left: 0}/* Process steps */ html[dir="rtl"] .process-bar{margin-left: 0; margin-right: auto}html[dir="rtl"] .process-step{padding-left: 0; padding-right: var(--sp-xl)}html[dir="rtl"] .process-step--active::before{left: auto; right: 0}html[dir="rtl"] .process-step__ghost{right: auto; left: 0}@media (max-width: 960px){html[dir="rtl"] .process-step{padding-left: 0; padding-right: var(--sp-md)}} /* Testimonials */ html[dir="rtl"] .testi-card::before{right: auto; left: var(--sp-xl)}/* Form fields */ html[dir="rtl"] .form-label{left: auto; right: var(--sp-md)}html[dir="rtl"] .form-select{padding-right: var(--sp-md); padding-left: var(--sp-2xl); background-position: left var(--sp-md) center}html[dir="rtl"] .calc-select{padding-right: 1rem; padding-left: 2.25rem; background-position: left 12px center !important}/* WhatsApp Widget */ html[dir="rtl"] .wa-fab{right: auto; left: var(--sp-xl)}html[dir="rtl"] .wa-fab__tip{right: auto; left: calc(100%+.75rem)}/* ═══════════════════════════════════════════════════════════════════════ SPECIALTY PAGES — Dropdown Navigation+Landing Page Styles ═══════════════════════════════════════════════════════════════════════ */ /* ── NAV DROPDOWN ───────────────────────────────────────────────────── */ .nav__dropdown-wrap{position: relative}.nav__dropdown-wrap::after{content: ''; display: block; position: absolute; top: 100%; left:-16px; right:-16px; height: 14px}.nav__dropdown-wrap>.nav__link--drop{display: flex; align-items: center; gap: .35rem}.nav__dropdown-wrap>.nav__link--drop::after{display: none}.drop-caret{font-style: normal; font-size: .65em; line-height: 1; display: inline-block; transition: transform var(--t-norm) var(--ease)}.nav__dropdown-wrap:hover .drop-caret, .nav__dropdown-wrap:focus-within .drop-caret{transform: rotate(180deg)}.nav__dropdown-wrap:hover>.nav__link--drop{color: var(--c-deep)}.nav__dropdown{position: absolute; top: calc(100%+12px); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-xs); min-width: 240px; box-shadow: 0 8px 32px rgba(34,29,26,.12), 0 2px 8px rgba(34,29,26,.06); display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transition: opacity var(--t-norm) var(--ease), transform var(--t-norm) var(--ease); z-index: 10}.nav__dropdown-wrap:hover .nav__dropdown, .nav__dropdown-wrap:focus-within .nav__dropdown{opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0)}.nav__dropdown a{display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-body); padding: .5rem var(--sp-md); border-radius: 8px; transition: background var(--t-fast), color var(--t-fast); text-decoration: none; white-space: nowrap}.nav__dropdown a:hover{background: var(--c-bg-lav); color: var(--c-deep)}.nav__dropdown a.active{color: var(--c-deep); background: var(--c-bg-lav); font-weight: var(--fw-semi)}.nav__dropdown a svg{width: 1rem; height: 1rem; flex-shrink: 0; opacity: .75}/* Mobile specialty grid */ .nav__mobile-group{display: flex; flex-direction: column; align-items: center; gap: var(--sp-md)}.nav__mobile-group-title{font-size: var(--fs-sm); font-weight: var(--fw-semi); color: rgba(250,246,240,.55); letter-spacing: var(--ls-badge); text-transform: uppercase}.nav__mobile-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; max-width: 320px}.nav__mobile-grid a{font-size: var(--fs-xs); font-weight: var(--fw-med); color: var(--c-on-dark-2); padding: var(--sp-sm) var(--sp-md); background: rgba(250,246,240,.08); border-radius: 8px; text-align: center; text-decoration: none; border: 1px solid rgba(250,246,240,.10); line-height: 1.3; transition: background var(--t-fast), color var(--t-fast)}.nav__mobile-grid a:hover{background: rgba(250,246,240,.16); color: var(--c-on-dark)}/* ── SPECIALTY PAGE TOP / BREADCRUMB ────────────────────────────────── */ /* sp-above: when outside a hero (fallback). Inside .hero__fullbleed it becomes .hero__breadcrumb */ .sp-above{background: var(--c-bg); padding-top: calc(var(--nav-h)+var(--sp-md)); padding-bottom: var(--sp-sm)}/* Breadcrumb overlaid inside the full-bleed hero */ .hero__breadcrumb{position: absolute; top: calc(var(--nav-h)+var(--sp-md)); left: 0; right: 0; z-index: 2; padding-inline: var(--pad-x); max-width: var(--max-w); margin-inline: auto}.hero__breadcrumb .breadcrumb a, .hero__breadcrumb .breadcrumb-sep, .hero__breadcrumb .breadcrumb-current{color: rgba(255, 255, 255, 0.60)}.hero__breadcrumb .breadcrumb a:hover{color: rgba(255, 255, 255, 0.90)}.breadcrumb{font-size: var(--fs-xs); color: var(--c-muted); display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap}.breadcrumb a{color: var(--c-muted); text-decoration: none; transition: color var(--t-fast)}.breadcrumb a:hover{color: var(--c-deep)}.breadcrumb-sep{opacity: .4}.breadcrumb-current{color: var(--c-deep); font-weight: var(--fw-med)}/* ── SPECIALTY HERO ─────────────────────────────────────────────────── */ .sp-hero{background: #1a1410; overflow: hidden; padding: 0}/* Specialty page hero: shift photo right so the dentist appears in the uncovered right half (text block lives on the left) */ .sp-hero .hero__bg{object-position: right top}/* Specialty pages have longer multi-word h1s — scale down significantly */ .sp-hero .hero__text h1{font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: 0.95; margin-bottom: var(--sp-xl)}/* Ensure content never overflows above the breadcrumb area */ .sp-hero .hero__fullbleed{min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end}.sp-hero .hero__content{padding-top: calc(var(--nav-h)+3.5rem); /* reserve space for breadcrumb */}/* Lead paragraph shown inside the full-bleed hero on specialty pages */ .sp-hero__lead{font-size: 1rem; color: rgba(255, 255, 255, 0.65); line-height: var(--lh-rel); max-width: 46ch; margin-bottom: var(--sp-2xl)}/* Legacy classes kept for any older markup still in use */ .sp-hero__inner{display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); align-items: center}.sp-hero__text .chip{margin-bottom: var(--sp-md)}.sp-hero__text h1{margin-bottom: var(--sp-lg)}.sp-hero__text p{font-size: 1.0625rem; color: var(--c-muted); line-height: var(--lh-rel); max-width: 44ch; margin-bottom: var(--sp-2xl)}.sp-hero__actions{display: flex; flex-wrap: wrap; gap: var(--sp-md)}.sp-hero__img{border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-h); background: var(--c-bg-lav)}.sp-hero__img img{width: 100%; height: 100%; object-fit: cover}.sp-hero__placeholder{width: 100%; min-height: 300px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-md); padding: var(--sp-2xl); background: linear-gradient(135deg, var(--c-bg-lav) 0%, rgba(132,94,53,.1) 100%)}.sp-hero__placeholder svg{opacity: .3; color: var(--c-dark)}.sp-hero__placeholder span{font-size: var(--fs-xs); font-weight: var(--fw-med); color: var(--c-muted); letter-spacing: var(--ls-badge); text-transform: uppercase; text-align: center}/* ── INTRO / QUÉ ES ─────────────────────────────────────────────────── */ .sp-intro{background: var(--c-surface); border-top: 1px solid var(--c-border)}.sp-intro__inner{display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); align-items: start}.sp-intro__text .chip{margin-bottom: var(--sp-md)}.sp-intro__text h2{margin-bottom: var(--sp-lg)}.sp-intro__text p{color: var(--c-muted); line-height: var(--lh-rel); margin-bottom: var(--sp-md)}.sp-intro__text p:first-of-type{font-size: 1.0625rem}.sp-intro__cards{display: flex; flex-direction: column; gap: var(--sp-md)}.sp-mini-card{display: flex; gap: var(--sp-md); align-items: flex-start; background: var(--c-bg-lav); border-radius: var(--r-card); padding: var(--sp-lg); border: 1px solid var(--c-border-card); transition: transform var(--t-norm), box-shadow var(--t-norm)}.sp-mini-card:hover{transform: translateX(4px); box-shadow: var(--shadow)}.sp-mini-card__icon{width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--c-dark); display: flex; align-items: center; justify-content: center}.sp-mini-card__icon svg{width: 100%; height: 100%}.sp-mini-card__title{font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-deep); margin-bottom: .25rem}.sp-mini-card__desc{font-size: var(--fs-xs); color: var(--c-muted); line-height: var(--lh-body)}/* ── FEATURES GRID ──────────────────────────────────────────────────── */ .sp-features{background: var(--c-bg)}.sp-features__grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); margin-top: var(--sp-3xl)}.sp-feat-card{background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-xl); transition: box-shadow var(--t-norm), transform var(--t-norm)}.sp-feat-card:hover{box-shadow: var(--shadow-h); transform: translateY(-4px)}.sp-feat-card__icon{width: 2rem; height: 2rem; margin-bottom: var(--sp-md); color: var(--c-dark); display: flex; align-items: center; justify-content: center}.sp-feat-card__icon svg{width: 100%; height: 100%}.sp-feat-card__title{font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-h); margin-bottom: var(--sp-sm)}.sp-feat-card__desc{font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-body)}/* ── PROCESS STEPS ──────────────────────────────────────────────────── */ .sp-process{background: var(--c-bg-sec-dark); color: var(--c-on-dark)}.sp-process .chip{margin-bottom: var(--sp-md)}.sp-process h2{color: var(--c-on-dark); margin-bottom: var(--sp-xl)}.sp-process>.container>p{color: var(--c-on-dark-m); max-width: 52ch}.sp-steps{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); margin-top: var(--sp-3xl); position: relative}.sp-steps::before{content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 1px; background: rgba(250,246,240,.12); z-index: 0}.sp-step{display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1}.sp-step__num{width: 56px; height: 56px; background: var(--c-dark); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: var(--c-on-dark); font-size: 1.25rem; margin-bottom: var(--sp-lg); flex-shrink: 0; box-shadow: 0 4px 16px rgba(132,94,53,.35)}.sp-step__title{font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-on-dark); margin-bottom: var(--sp-sm)}.sp-step__desc{font-size: var(--fs-xs); color: var(--c-on-dark-m); line-height: var(--lh-body)}/* ── FAQ ACCORDION ──────────────────────────────────────────────────── */ .sp-faq{background: var(--c-bg-lav); border-top: 1px solid var(--c-border)}.sp-faq .s-hd{margin-bottom: 0}.sp-faq__list{display: flex; flex-direction: column; gap: var(--sp-xs); margin-top: var(--sp-3xl); max-width: 720px; margin-inline: auto}.sp-faq-item{border: 1px solid var(--c-border-card); border-radius: var(--r-card); overflow: hidden; background: var(--c-surface); transition: box-shadow var(--t-norm)}.sp-faq-item:hover{box-shadow: var(--shadow)}.sp-faq-item__q{width: 100%; text-align: left; padding: var(--sp-lg) var(--sp-xl); font-family: var(--ff); font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--c-h); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); background: none; border: none; line-height: var(--lh-snug)}.sp-faq-item__q:hover{background: var(--c-bg-lav)}.sp-faq-item__q[aria-expanded="true"]{color: var(--c-deep); background: var(--c-bg-lav)}.sp-faq-item__q svg{flex-shrink: 0; transition: transform var(--t-norm) var(--ease); color: var(--c-muted)}.sp-faq-item__q[aria-expanded="true"] svg{transform: rotate(45deg); color: var(--c-deep)}.sp-faq-item__a{max-height: 0; overflow: hidden; transition: max-height .45s var(--ease)}.sp-faq-item--open .sp-faq-item__a{max-height: 600px}.sp-faq-item__a-inner{padding: 0 var(--sp-xl) var(--sp-xl); font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-rel)}/* ── RELATED SPECIALTIES ────────────────────────────────────────────── */ .sp-related{background: var(--c-bg)}.sp-related__grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-top: var(--sp-3xl)}.sp-related-card{background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-lg); text-decoration: none; display: flex; align-items: center; gap: var(--sp-md); transition: box-shadow var(--t-norm), transform var(--t-norm)}.sp-related-card:hover{box-shadow: var(--shadow-h); transform: translateY(-3px)}.sp-related-card__icon{font-size: 1.5rem; flex-shrink: 0; line-height: 1}.sp-related-card__name{font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-h); display: block; margin-bottom: 2px}.sp-related-card__desc{font-size: var(--fs-xs); color: var(--c-muted); display: block; line-height: 1.3}.sp-related-card__arrow{margin-left: auto; color: var(--c-muted); flex-shrink: 0; transition: transform var(--t-norm)}.sp-related-card:hover .sp-related-card__arrow{transform: translateX(3px); color: var(--c-deep)}/* ── SPECIALTY CTA ──────────────────────────────────────────────────── */ .sp-cta{background: var(--c-bg-sec-dark); text-align: center; color: var(--c-on-dark)}.sp-cta .chip{margin-bottom: var(--sp-md)}.sp-cta h2{color: var(--c-on-dark); margin-bottom: var(--sp-lg)}.sp-cta p{color: var(--c-on-dark-m); max-width: 46ch; margin-inline: auto; margin-bottom: var(--sp-2xl)}.sp-cta__actions{display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: center}/* ── SPECIALTY PAGE — RESPONSIVE ───────────────────────────────────── */ @media (max-width: 768px){.sp-hero__inner{grid-template-columns: 1fr}.sp-intro__inner{grid-template-columns: 1fr}.sp-features__grid{grid-template-columns: 1fr 1fr}.sp-steps{grid-template-columns: 1fr 1fr}.sp-steps::before{display: none}.sp-related__grid{grid-template-columns: 1fr 1fr}} @media (max-width: 540px){.sp-features__grid{grid-template-columns: 1fr}.sp-steps{grid-template-columns: 1fr}.sp-related__grid{grid-template-columns: 1fr}} /* ══════════════════════════════════════════════════════════════════════ ARTÍCULOS — Prosa editorial, índice y tarjetas Reutiliza el design system existente (crema cálido · espresso · bronce). ══════════════════════════════════════════════════════════════════════ */ /* ── Cabecera de artículo ─────────────────────────────────────────────── */ .art-head{background: var(--c-bg-lav); border-bottom: 1px solid var(--c-border); padding-block: calc(var(--sp-sec) * .75) var(--sp-3xl)}.art-head__inner{max-width: 74ch; margin-inline: auto}.art-head .breadcrumb{margin-bottom: var(--sp-lg)}.art-head h1{font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.05; letter-spacing: var(--ls-h); margin-block: var(--sp-md) var(--sp-lg)}.art-head h1 em{font-family: var(--ff-serif); font-style: italic; color: var(--c-deep)}.art-standfirst{font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--c-body); margin-bottom: var(--sp-xl)}.art-meta{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-lg); font-size: var(--fs-sm); color: var(--c-muted); padding-top: var(--sp-lg); border-top: 1px solid var(--c-border)}.art-meta__author{display: flex; align-items: center; gap: .5rem; font-weight: var(--fw-med); color: var(--c-h)}.art-meta__author svg{color: var(--c-dark); flex-shrink: 0}.art-meta time{font-variant-numeric: tabular-nums}/* ── Cuerpo del artículo ──────────────────────────────────────────────── */ .art-body{padding-block: var(--sp-sec)}.art-prose{max-width: 68ch; margin-inline: auto}.art-prose>p{font-size: 1.0625rem; line-height: 1.7; color: var(--c-body); margin-bottom: var(--sp-lg)}.art-prose>p:first-of-type{font-size: 1.15rem; color: var(--c-h)}.art-prose h2{font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: var(--ls-h); margin-block: var(--sp-3xl) var(--sp-lg); scroll-margin-top: 90px}.art-prose h2 em{font-family: var(--ff-serif); font-style: italic; color: var(--c-deep)}.art-prose h3{font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: var(--fw-semi); line-height: 1.25; margin-block: var(--sp-2xl) var(--sp-md)}.art-prose ul, .art-prose ol{margin-block: 0 var(--sp-lg); padding-left: 1.35rem; color: var(--c-body); line-height: 1.7}.art-prose li{margin-bottom: .55rem}.art-prose li::marker{color: var(--c-dark)}.art-prose strong{color: var(--c-h); font-weight: var(--fw-semi)}.art-prose a:not(.btn-pill):not(.btn-filled){color: var(--c-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(132, 94, 53, .4)}.art-prose a:not(.btn-pill):not(.btn-filled):hover{text-decoration-color: var(--c-deep)}/* ── Bloque destacado / advertencia clínica ───────────────────────────── */ .art-callout{background: var(--c-surface); border: 1px solid var(--c-border-card); border-left: 3px solid var(--c-dark); border-radius: var(--r-btn); padding: var(--sp-lg) var(--sp-xl); margin-block: var(--sp-2xl)}.art-callout__label{display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-dark); margin-bottom: .5rem}.art-callout p{font-size: var(--fs-body); line-height: 1.65; color: var(--c-body); margin-bottom: 0}.art-callout p+p{margin-top: var(--sp-md)}/* ── Respuesta corta (bloque de extracción para IA/featured snippet) ───── */ .art-answer{background: var(--c-bg-periw); border-radius: var(--r-btn); padding: var(--sp-xl); margin-bottom: var(--sp-2xl)}.art-answer__label{display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-deep); margin-bottom: .6rem}.art-answer p{font-size: 1.05rem; line-height: 1.6; color: var(--c-h); margin-bottom: 0}/* ── Tabla de contenidos ──────────────────────────────────────────────── */ .art-toc{border: 1px solid var(--c-border-card); border-radius: var(--r-btn); padding: var(--sp-lg) var(--sp-xl); margin-bottom: var(--sp-2xl)}.art-toc__title{font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-md)}.art-toc ol{margin: 0; padding-left: 1.15rem}.art-toc li{margin-bottom: .4rem; line-height: 1.45}.art-toc a{color: var(--c-body); text-decoration: none}.art-toc a:hover{color: var(--c-deep); text-decoration: underline; text-underline-offset: 3px}/* ── Tablas dentro de artículos ───────────────────────────────────────── */ .art-table-wrap{overflow-x: auto; margin-block: var(--sp-xl)}.art-table{width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px}.art-table th, .art-table td{text-align: left; padding: .75rem .85rem; border-bottom: 1px solid var(--c-border); color: var(--c-body); vertical-align: top}.art-table th{font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-h); background: var(--c-bg-lav)}.art-table td:first-child{color: var(--c-h); font-weight: var(--fw-med)}/* ── Fuentes / referencias ────────────────────────────────────────────── */ .art-sources{margin-top: var(--sp-3xl); padding-top: var(--sp-xl); border-top: 1px solid var(--c-border)}.art-sources h2{font-size: 1.15rem; margin-block: 0 var(--sp-md)}.art-sources ol{padding-left: 1.2rem; margin: 0}.art-sources li{font-size: var(--fs-sm); line-height: 1.55; color: var(--c-muted); margin-bottom: .6rem}.art-sources a{color: var(--c-deep); word-break: break-word}/* ── Aviso médico ─────────────────────────────────────────────────────── */ .art-disclaimer{margin-top: var(--sp-xl); padding: var(--sp-lg); background: var(--c-bg-lav); border-radius: var(--r-btn); font-size: var(--fs-sm); line-height: 1.6; color: var(--c-muted)}/* ── Índice de artículos ──────────────────────────────────────────────── */ .art-index__grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-xl)}.art-card{display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-xl); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease}.art-card:hover{border-color: var(--c-dark); transform: translateY(-3px); box-shadow: 0 12px 28px-18px var(--c-shadow-glow)}.art-card__tag{font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-dark); margin-bottom: var(--sp-sm)}.art-card__title{font-size: 1.2rem; font-weight: var(--fw-semi); line-height: 1.25; color: var(--c-h); margin-bottom: var(--sp-sm)}.art-card__desc{font-size: var(--fs-sm); line-height: 1.6; color: var(--c-body); margin-bottom: var(--sp-lg)}.art-card__more{margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-deep)}/* ── Artículos relacionados al pie ────────────────────────────────────── */ .art-next{max-width: 68ch; margin: var(--sp-3xl) auto 0}.art-next__title{font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-md)}.art-next__list{display: grid; gap: var(--sp-sm)}.art-next__list a{display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); border: 1px solid var(--c-border-card); border-radius: var(--r-btn); color: var(--c-h); font-size: var(--fs-sm); font-weight: var(--fw-med); text-decoration: none; transition: border-color .2s ease, background .2s ease}.art-next__list a:hover{border-color: var(--c-dark); background: var(--c-bg-lav)}.art-next__list span{color: var(--c-dark)}@media (max-width: 768px){.art-head{padding-block: var(--sp-3xl) var(--sp-2xl)}.art-prose>p:first-of-type{font-size: 1.075rem}.art-callout, .art-answer, .art-toc{padding: var(--sp-lg)}} /* ── Aviso de urgencia médica (artículos de urgencias) ─────────────────── */ .art-urgent{--c-urgent: #8C3A2B; /* Terracota profundo, dentro de la familia cálida */--c-urgent-bg: #F7E9E4; background: var(--c-urgent-bg); border: 1px solid rgba(140, 58, 43, .25); border-left: 4px solid var(--c-urgent); border-radius: var(--r-btn); padding: var(--sp-lg) var(--sp-xl); margin-bottom: var(--sp-xl)}.art-urgent__label{display: flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-urgent); margin-bottom: .6rem}.art-urgent p{font-size: var(--fs-body); line-height: 1.65; color: #4A2A22; margin-bottom: 0}.art-urgent p+p{margin-top: var(--sp-md)}.art-urgent strong{color: var(--c-urgent); font-weight: var(--fw-semi)}/* ── Página de equipo ──────────────────────────────────────────────────── */ .bio-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-xl); margin-bottom: var(--sp-3xl)}.bio-card{display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border-card); border-radius: var(--r-card); padding: var(--sp-xl); scroll-margin-top: 100px}.bio-card__head{padding-bottom: var(--sp-md); margin-bottom: var(--sp-md); border-bottom: 1px solid var(--c-border)}.bio-card__name{font-size: 1.35rem; font-weight: var(--fw-semi); line-height: 1.2; letter-spacing: var(--ls-h); color: var(--c-h); margin-bottom: .3rem}.bio-card__role{font-size: var(--fs-sm); color: var(--c-dark); font-weight: var(--fw-med); margin-bottom: .2rem}.bio-card__lic{font-size: var(--fs-xs); letter-spacing: var(--ls-badge); color: var(--c-muted); font-variant-numeric: tabular-nums; margin-bottom: 0}.bio-card__body{display: flex; flex-direction: column; flex: 1}.bio-card__body>p{font-size: var(--fs-sm); line-height: 1.65; color: var(--c-body); margin-bottom: var(--sp-md)}.bio-card__quote{font-family: var(--ff-serif); font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--c-deep); border-left: 2px solid var(--c-dark); padding-left: var(--sp-md); margin: 0 0 var(--sp-md)}.bio-card__tags{display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 var(--sp-lg)}.bio-card__tags li{font-size: var(--fs-xs); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-dark); background: var(--c-bg-lav); border-radius: var(--r-pill); padding: .3rem .7rem}.bio-card__articles{margin-top: auto; padding-top: var(--sp-md); border-top: 1px solid var(--c-border)}.bio-card__articles-title{font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-badge); text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem}.bio-card__articles a{display: block; font-size: var(--fs-sm); line-height: 1.4; color: var(--c-deep); text-decoration: none; padding: .3rem 0}.bio-card__articles a:hover{text-decoration: underline; text-underline-offset: 3px}.bio-note{max-width: 68ch; margin-inline: auto; padding-top: var(--sp-2xl); border-top: 1px solid var(--c-border)}.bio-note h2{font-size: 1.4rem; letter-spacing: var(--ls-h); margin-bottom: var(--sp-md)}.bio-note p{font-size: var(--fs-body); line-height: 1.7; color: var(--c-body); margin-bottom: var(--sp-md)}.bio-note a{color: var(--c-deep); text-decoration: underline; text-underline-offset: 3px}@media (max-width: 640px){.bio-grid{grid-template-columns: 1fr; gap: var(--sp-lg)}.bio-card{padding: var(--sp-lg)}}