/* ========================================================================== Clínica Dental Ruiz-Busquets — estilos Tokens basados en el brandbook (PANTONE 289C / 650C) y rb-dashboard/_tokens.scss ========================================================================== */ @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } :root { /* Marca */ --navy: #0c2340; /* PANTONE 289C */ --navy-700: #091c33; --navy-500: #1a4a72; --steel: #ced9e5; /* PANTONE 650C */ --steel-50: #eef2f7; --steel-25: #f6f8fb; --white: #fff; /* Neutros */ --ink: #0c2340; --text: #1e3a4f; --muted: #4b6475; --line: #d4dde7; --success: #15803d; --danger: #b91c1c; --whatsapp: #128c4a; /* Tipografía */ --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); --fs-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); --fs-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem); /* Espaciado y forma */ --space-section: clamp(4rem, 3rem + 4vw, 7rem); --gutter: clamp(1rem, .5rem + 2vw, 2rem); --container: 72rem; --radius: .75rem; --radius-lg: 1.25rem; --shadow: 0 1px 2px rgb(12 35 64 / .06), 0 8px 24px -8px rgb(12 35 64 / .14); --header-h: 4.5rem; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } input, button, select, textarea { font: inherit; color: inherit; } a { color: var(--navy-500); text-underline-offset: .2em; text-decoration-thickness: 1px; } a:hover { color: var(--navy); } :focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; border-radius: 4px; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* --- Tipografía ----------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: 1.25; } p, li { text-wrap: pretty; } .lead { font-size: var(--fs-lg); color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-500); } .eyebrow::before { content: ""; width: 1.75rem; height: .5rem; background: currentColor; mask: url("../img/brand/logo-smile.svg") center / contain no-repeat; } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); } .prose h3 { margin-top: 1.8em; } .prose ul, .prose ol { padding-left: 1.25rem; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--navy-500); } .prose strong { color: var(--ink); font-weight: 600; } .prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-sm); } .prose :is(td, th) { border: 1px solid var(--line); padding: .6rem .75rem; vertical-align: top; text-align: left; } .prose--legal { font-size: var(--fs-sm); } .prose--legal h2 { font-size: 1.4rem; } /* --- Layout --------------------------------------------------------------- */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .container--narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; } .section { padding-block: var(--space-section); } .section--tint { background: var(--steel-25); } .section--navy { background: var(--navy); color: var(--steel); } .section--navy :is(h2, h3) { color: var(--white); } .section__head { max-width: 42rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .section__head > * + * { margin-top: .9rem; } .section__head--center { margin-inline: auto; text-align: center; } .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; } @media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } .split--reverse > :first-child { order: 2; } } .media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .media picture { height: 100%; } .media img { width: 100%; height: 100%; object-fit: cover; } .skip-link { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--navy); color: var(--white); padding: .6rem 1rem; border-radius: var(--radius); } .skip-link:focus { left: .5rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- Botones -------------------------------------------------------------- */ .btn { --bg: var(--navy); --fg: var(--white); --bd: var(--navy); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.4rem; border-radius: 999px; border: 1.5px solid var(--bd); background: var(--bg); color: var(--fg); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; } .btn:hover { --bg: var(--navy-700); color: var(--fg); } .btn:active { transform: translateY(1px); } .btn--outline { --bg: transparent; --fg: var(--navy); } .btn--outline:hover { --bg: var(--steel-50); } .btn--light { --bg: var(--steel); --fg: var(--navy); --bd: var(--steel); } .btn--light:hover { --bg: var(--white); --bd: var(--white); } .btn--ghost-light { --bg: transparent; --fg: var(--white); --bd: rgb(206 217 229 / .5); } .btn--ghost-light:hover { --bg: rgb(255 255 255 / .08); } .btn--whatsapp { --bg: var(--whatsapp); --bd: var(--whatsapp); } .btn--whatsapp:hover { --bg: #0e7a3f; } .btn .icon { width: 1.15rem; height: 1.15rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } .icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* --- Cabecera ------------------------------------------------------------- */ .topbar { background: var(--navy); color: var(--steel); font-size: var(--fs-xs); } .topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.25rem; } .topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .topbar a:hover { color: var(--white); } .topbar .icon { width: .95rem; height: .95rem; } .topbar__contact { display: flex; gap: 1.25rem; } .topbar__hours { display: none; } @media (min-width: 48rem) { .topbar__hours { display: block; } } .lang-switch { display: flex; gap: .15rem; list-style: none; padding: 0; } .lang-switch a, .lang-switch span { padding: .2rem .45rem; border-radius: .3rem; text-transform: uppercase; font-weight: 600; letter-spacing: .06em; } .lang-switch [aria-current] { background: rgb(206 217 229 / .18); color: var(--white); } .header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); } .header__logo { color: var(--navy); flex: none; } .header__logo img { width: clamp(9.5rem, 7rem + 8vw, 14.5rem); height: auto; } @media (max-width: 26rem) { .topbar__contact { gap: .9rem; } .topbar__wa-number { display: none; } .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } .nav { display: flex; align-items: center; gap: 1.5rem; } .nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; } .nav__list > li { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .8rem; border-radius: .5rem; color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); } .nav__link:hover, .nav__link[aria-current="page"] { background: var(--steel-50); color: var(--ink); } .nav__link .icon { width: .9rem; height: .9rem; transition: transform .2s; } .submenu { position: absolute; top: calc(100% + .5rem); left: -1rem; width: 19rem; padding: .6rem; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; } .submenu a { display: block; padding: .5rem .75rem; border-radius: .45rem; color: var(--text); text-decoration: none; font-size: var(--fs-sm); } .submenu a:hover, .submenu a[aria-current="page"] { background: var(--steel-50); color: var(--ink); } .submenu__all { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .35rem; } .submenu__all a { font-weight: 600; color: var(--navy-500); } .has-submenu:hover .submenu, .has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: none; } .has-submenu:hover > .nav__link .icon, .has-submenu:focus-within > .nav__link .icon { transform: rotate(180deg); } .menu-toggle { display: none; } @media (max-width: 63.99rem) { .nav { display: none; } .menu-toggle { display: block; } .menu-toggle > summary { list-style: none; display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; padding: .55rem .9rem; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); transition: background .25s, color .25s, border-color .25s; } .menu-toggle > summary::-webkit-details-marker { display: none; } .menu-toggle[open] > summary { background: var(--navy); color: var(--white); border-color: var(--navy); } /* Icono hamburguesa → aspa */ .burger { position: relative; display: block; width: 1.15rem; height: .9rem; } .burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .2s, top .35s cubic-bezier(.65,0,.35,1); } .burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: calc(50% - 1px); } .burger i:nth-child(3) { top: calc(100% - 2px); } .menu-toggle[open] .burger i:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); } .menu-toggle[open] .burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); } .menu-toggle[open] .burger i:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); } /* Absoluto respecto a la cabecera sticky (su backdrop-filter impide usar position: fixed). */ .menu-toggle__panel { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--header-h)); overflow-y: auto; background: var(--white); padding: 1rem var(--gutter) 6rem; border-top: 1px solid var(--line); overscroll-behavior: contain; } .menu-toggle__panel ul { list-style: none; padding: 0; } .mobile-nav li { border-bottom: 1px solid var(--line); } .mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .mobile-nav a .icon { color: var(--navy-500); transition: transform .25s; } .mobile-nav a:active .icon { transform: translateX(4px); } .mobile-nav a[aria-current="page"] { color: var(--navy-500); } .mobile-nav__title { margin-top: 1.75rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .mobile-nav__title a { color: var(--muted); text-decoration: none; } .menu-toggle__panel .mobile-sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem; margin-top: .75rem; } .mobile-sub a { display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border-radius: var(--radius); background: var(--steel-25); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; } .mobile-sub a .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--navy-500); } .mobile-sub a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); } .mobile-sub a[aria-current="page"] .icon { color: var(--white); } .mobile-nav__info { display: flex; align-items: center; gap: .5rem; margin-top: 1.75rem; font-size: var(--fs-sm); color: var(--muted); } .mobile-nav__info .icon { flex: none; width: 1.1rem; height: 1.1rem; } @media (prefers-reduced-motion: no-preference) { .menu-toggle[open] .menu-toggle__panel { animation: panel-in .45s cubic-bezier(.2,.8,.2,1) both; } .menu-toggle[open] .menu-toggle__panel :is(li, p) { animation: item-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.08s + min(var(--i, 0), 12) * 35ms); } } } @keyframes panel-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes item-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } html:has(.menu-toggle[open]) { overflow: hidden; } @media (min-width: 64rem) { .menu-toggle { display: none; } } /* --- Hero (home) --------------------------------------------------------- */ .hero { position: relative; overflow: hidden; isolation: isolate; color: var(--steel); padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(4rem, 3rem + 5vw, 7.5rem); background: radial-gradient(60rem 40rem at 85% 10%, rgb(206 217 229 / .14), transparent 60%), radial-gradient(40rem 30rem at 0% 100%, rgb(26 74 114 / .55), transparent 70%), var(--navy); } .hero h1 { color: var(--white); font-size: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem); line-height: 1.05; } .hero .lead { color: var(--steel); max-width: 34rem; } .hero__grid { display: grid; gap: clamp(3rem, 2rem + 4vw, 5rem); align-items: center; } @media (min-width: 56rem) { .hero__grid { grid-template-columns: 1.1fr .9fr; } } .hero__content > * + * { margin-top: 1.5rem; } .hero__content .btn-row { margin-top: 2.25rem; } .hero__arc { position: absolute; z-index: -1; inset: auto -10% -18% -10%; width: 120%; height: auto; fill: none; stroke: rgb(206 217 229 / .12); stroke-width: 70; stroke-linecap: round; } .hl { color: var(--steel); } .hero__media { position: relative; max-width: 34rem; justify-self: center; width: 100%; } .hero__frame { aspect-ratio: 4 / 4.6; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .45); border: 6px solid rgb(206 217 229 / .18); } .hero__frame picture, .hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .float-card { position: absolute; display: flex; align-items: center; gap: .75rem; max-width: 16rem; padding: .8rem 1rem; background: var(--white); color: var(--muted); border-radius: var(--radius); box-shadow: var(--shadow); font-size: var(--fs-xs); line-height: 1.35; } .float-card strong { display: block; color: var(--ink); font-size: var(--fs-sm); } .float-card .icon { width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: 50%; background: var(--steel-50); color: var(--navy); } .float-card--top { top: 7%; left: -2.5rem; } .float-card--bottom { bottom: 8%; right: -1rem; } /* Móvil: las tarjetas van debajo de la foto, montando solo su borde inferior, para no tapar caras. */ @media (max-width: 40rem) { .hero__media { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .hero__frame { grid-column: 1 / -1; } .float-card { position: static; max-width: none; margin-top: -3rem; padding: 1rem; flex-direction: column; align-items: flex-start; gap: .6rem; } .float-card .icon { width: 2rem; height: 2rem; padding: .45rem; flex: none; } } .badges { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; font-size: var(--fs-sm); color: var(--muted); } .badges li { display: inline-flex; align-items: center; gap: .4rem; } .badges .icon { color: var(--navy-500); width: 1.1rem; height: 1.1rem; } .badges--light { color: var(--steel); } .badges--light .icon { color: var(--steel); } .eyebrow--light { color: var(--steel); } /* --- Ticker --------------------------------------------------------------- */ .ticker { overflow: hidden; background: var(--steel); color: var(--navy); border-block: 1px solid rgb(12 35 64 / .08); } .ticker__track { display: flex; width: max-content; } .ticker span { display: inline-flex; align-items: center; gap: 2.5rem; padding: 1rem 0 1rem 2.5rem; font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem); white-space: nowrap; } .ticker span::after { content: ""; width: 1.6rem; height: .5rem; background: currentColor; mask: url("../img/brand/logo-smile.svg") center / contain no-repeat; opacity: .5; } /* --- Bento de tratamientos destacados ----------------------------------- */ .section__head--row { display: grid; gap: 1rem 3rem; max-width: none; align-items: end; } @media (min-width: 56rem) { .section__head--row { grid-template-columns: 1.2fr 1fr; } } .section__head--row > * + * { margin-top: 0; } .section__head--row h2 { margin-top: .9rem; } .bento { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); } @media (min-width: 56rem) { .bento { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; } .tile--hero { grid-row: span 2; } } .tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .8rem; min-height: 15rem; padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); border-radius: var(--radius-lg); background: var(--steel-25); border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--steel); } .tile__num { font-family: var(--font-display); font-size: 1rem; color: var(--navy-500); letter-spacing: .1em; } .tile__icon { position: absolute; right: -1.5rem; bottom: -1.5rem; width: 9rem; height: 9rem; stroke-width: .9; color: var(--navy); opacity: .07; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s; } .tile:hover .tile__icon { transform: rotate(-8deg) scale(1.08); opacity: .12; } .tile h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin-top: auto; } .tile p { color: var(--muted); max-width: 30rem; } .tile__link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; color: var(--navy); } .tile__link::after { content: ""; position: absolute; inset: 0; } .tile__link .icon { width: 1rem; height: 1rem; transition: transform .25s; } .tile:hover .tile__link .icon { transform: translateX(4px); } .tile--hero { background: var(--navy); border-color: var(--navy); color: var(--steel); min-height: 22rem; } .tile--hero h3 { color: var(--white); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); } .tile--hero p { color: var(--steel); } .tile--hero .tile__num, .tile--hero .tile__link { color: var(--steel); } .tile--hero .tile__icon { color: var(--steel); opacity: .12; width: 14rem; height: 14rem; } /* Foto del tratamiento principal: llena la parte alta y se funde con el azul bajo el texto. */ .tile__media { position: absolute; inset: 0; z-index: -1; } .tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--navy) 38%, rgb(12 35 64 / .55) 62%, rgb(12 35 64 / .1)); } .tile:hover .tile__media img { transform: scale(1.03); } .tile--hero:has(.tile__media) { min-height: 30rem; isolation: isolate; } .tile--hero:has(.tile__media) .tile__icon { display: none; } .tile--hero:has(.tile__media) .tile__num { color: var(--white); } .list-title { margin: clamp(3rem, 2rem + 2vw, 4.5rem) 0 1rem; font-size: 1.35rem; } .link-list { border-top: 1px solid var(--line); } .link-list li { border-bottom: 1px solid var(--line); } .link-list a { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem 1.25rem; align-items: center; padding: 1.25rem .5rem; color: inherit; text-decoration: none; transition: background-color .25s, padding .25s; } @media (min-width: 48rem) { .link-list a { grid-template-columns: auto 16rem 1fr auto; } } .link-list a > .icon:first-child { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 50%; background: var(--steel-50); color: var(--navy); } .link-list__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); } .link-list__text { grid-column: 2 / -1; color: var(--muted); font-size: var(--fs-sm); } @media (min-width: 48rem) { .link-list__text { grid-column: auto; } } .link-list__arrow { grid-row: 1; grid-column: 3; color: var(--navy-500); transition: transform .25s; } @media (min-width: 48rem) { .link-list__arrow { grid-column: 4; } } .link-list a:hover { background: var(--steel-25); padding-inline: 1rem; } .link-list a:hover .link-list__arrow { transform: translateX(4px); } /* --- Imágenes con forma ------------------------------------------------- */ .media--arch { aspect-ratio: 4 / 3.6; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); } .media--offset { aspect-ratio: 3 / 2; overflow: visible; box-shadow: none; position: relative; } .media--offset::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border-radius: var(--radius-lg); background: var(--steel); z-index: -1; } .media--offset picture { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .split--top { align-items: start; } .prose > h2 { margin-top: .75rem; } /* --- Proceso ------------------------------------------------------------ */ .process { position: relative; display: grid; gap: 2rem; counter-reset: step; } @media (min-width: 56rem) { .process { grid-template-columns: repeat(4, 1fr); } .process::before { content: ""; position: absolute; top: 1.75rem; left: 12.5%; right: 12.5%; height: 2px; background: var(--steel); transform-origin: left; } } .process li { position: relative; text-align: center; padding-inline: .5rem; } .process__num { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-display); font-size: 1.35rem; box-shadow: 0 0 0 8px var(--white); } .process h3 { font-size: 1.25rem; } .process p { margin-top: .5rem; color: var(--muted); font-size: var(--fs-sm); } .section--navy { position: relative; overflow: hidden; isolation: isolate; } .section__smile { position: absolute; z-index: -1; right: -6rem; top: -2rem; width: 34rem; height: auto; color: rgb(206 217 229 / .06); } .page-hero { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); background: var(--steel-25); border-bottom: 1px solid var(--line); } .page-hero h1 { margin-top: .75rem; max-width: 22ch; } .page-hero .lead { margin-top: 1rem; max-width: 46rem; } .page-hero .btn-row { margin-top: 1.75rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; font-size: var(--fs-xs); color: var(--muted); } .breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: var(--line); } .breadcrumbs a { color: inherit; text-decoration: none; } .breadcrumbs a:hover { color: var(--ink); text-decoration: underline; } /* --- Tarjetas ------------------------------------------------------------- */ .grid { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.5rem, 1.25rem + 1vw, 2rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, box-shadow .2s, transform .2s; } .card:has(a.card__link:hover) { border-color: var(--steel); box-shadow: var(--shadow); transform: translateY(-2px); } .card__icon { width: 3rem; height: 3rem; padding: .7rem; border-radius: .9rem; background: var(--steel-50); color: var(--navy); } .card h3 { font-size: 1.3rem; } .card p { color: var(--muted); font-size: var(--fs-sm); flex: 1; } .card__link { font-weight: 600; font-size: var(--fs-sm); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .card__link .icon { width: 1rem; height: 1rem; transition: transform .2s; } .card:hover .card__link .icon { transform: translateX(3px); } .card--featured { background: var(--navy); border-color: var(--navy); color: var(--steel); } .card--featured h3 { color: var(--white); } .card--featured p { color: var(--steel); } .card--featured .card__icon { background: rgb(206 217 229 / .14); color: var(--steel); } .card--featured .card__link { color: var(--white); } .feature-list { display: grid; gap: 1.5rem; list-style: none; padding: 0; } .feature-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; } .feature-list .icon { width: 2.75rem; height: 2.75rem; padding: .65rem; border-radius: 50%; background: var(--steel-50); color: var(--navy); } .feature-list h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin-bottom: .2rem; } .feature-list p { color: var(--muted); font-size: var(--fs-sm); } .section--navy .feature-list .icon { background: rgb(206 217 229 / .14); color: var(--steel); } .section--navy .feature-list p { color: var(--steel); opacity: .85; } .section--navy .feature-list h3 { color: var(--white); } .check-list { list-style: none; padding: 0; display: grid; gap: .6rem; } .check-list li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; } .check-list .icon { margin-top: .2rem; color: var(--navy-500); } /* --- Página de tratamiento ----------------------------------------------- */ .layout-aside { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); } @media (min-width: 64rem) { .layout-aside { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } } .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .facts div { background: var(--white); padding: 1rem 1.25rem; } .facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .facts dd { margin-top: .2rem; font-weight: 600; color: var(--ink); } .reviewed { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--muted); } .reviewed img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; object-position: top; } .reviewed strong { display: block; color: var(--ink); } .faq { display: grid; gap: .75rem; } .faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary .icon { transition: transform .2s; color: var(--navy-500); } .faq details[open] summary .icon { transform: rotate(45deg); } .faq .faq__answer { padding: 0 1.25rem 1.25rem; color: var(--text); } /* --- Equipo --------------------------------------------------------------- */ /* --- Banda CTA ------------------------------------------------------------ */ .cta-band { position: relative; overflow: hidden; } .cta-band .container { display: grid; gap: 2rem; align-items: center; } @media (min-width: 56rem) { .cta-band .container { grid-template-columns: 1.3fr 1fr; } } .cta-band p { margin-top: .9rem; max-width: 36rem; } .cta-band .btn-row { justify-content: flex-start; } @media (min-width: 56rem) { .cta-band .btn-row { justify-content: flex-end; } } .cta-band__mark { position: absolute; right: -4rem; bottom: -3rem; width: 22rem; color: rgb(206 217 229 / .07); pointer-events: none; } /* --- Formulario ----------------------------------------------------------- */ .form-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); color: var(--text); } .form-card h2 { font-size: 1.75rem; } .form-card > p { margin-top: .5rem; color: var(--muted); font-size: var(--fs-sm); } .form { display: grid; gap: 1rem; margin-top: 1.5rem; } .form__row { display: grid; gap: 1rem; } @media (min-width: 36rem) { .form__row { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: .35rem; } .field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: .6rem; background: var(--white); transition: border-color .15s, box-shadow .15s; } .field textarea { min-height: 6rem; resize: vertical; } .field :is(input, select, textarea):focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px rgb(26 74 114 / .15); } .field [aria-invalid="true"] { border-color: var(--danger); } .field__error { font-size: var(--fs-xs); color: var(--danger); } .checkbox { display: grid; grid-template-columns: auto 1fr; gap: .6rem; font-size: var(--fs-sm); } .checkbox input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--navy); } .form__legal { font-size: var(--fs-xs); color: var(--muted); } .form .btn { width: 100%; } .hp { position: absolute; left: -9999px; } .alert { padding: 1rem 1.25rem; border-radius: var(--radius); font-size: var(--fs-sm); } .alert--success { background: #ecfdf3; color: var(--success); border: 1px solid #b7ebcb; } .alert--error { background: #fef2f2; color: var(--danger); border: 1px solid #fbd0d0; } /* --- Contacto / ubicación ------------------------------------------------- */ .contact-list { list-style: none; padding: 0; display: grid; gap: 1.1rem; } .contact-list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; } .contact-list .icon { width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 50%; background: var(--steel-50); color: var(--navy); } .contact-list strong { display: block; color: var(--ink); font-size: var(--fs-sm); } .contact-list a { color: var(--text); text-decoration: none; } .contact-list a:hover { color: var(--navy); text-decoration: underline; } /* --- Pie ------------------------------------------------------------------ */ .footer { background: var(--navy); color: var(--steel); font-size: var(--fs-sm); padding-block: 4rem 2rem; } .footer a { color: var(--steel); text-decoration: none; } .footer a:hover { color: var(--white); text-decoration: underline; } .footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .footer__brand img { width: 11rem; } .footer__brand p { margin-top: 1.25rem; opacity: .85; max-width: 18rem; } .footer h2 { font-family: var(--font-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--white); margin-bottom: 1rem; } .footer ul { list-style: none; padding: 0; display: grid; gap: .5rem; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(206 217 229 / .2); font-size: var(--fs-xs); opacity: .85; } .footer__bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; } /* --- Barra de acción móvil ------------------------------------------------ */ .action-bar { display: none; } @media (max-width: 47.99rem) { body { padding-bottom: 4.25rem; } .action-bar { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -10px rgb(12 35 64 / .25); padding-bottom: env(safe-area-inset-bottom); } .action-bar a { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .25rem; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); text-decoration: none; } .action-bar a:last-child { background: var(--navy); color: var(--white); } .action-bar a.is-whatsapp .icon { color: var(--whatsapp); } } /* --- Cabeceras de páginas internas ---------------------------------------- */ .page-hero { position: relative; overflow: hidden; isolation: isolate; } .page-hero::after { content: ""; position: absolute; z-index: -1; right: -8rem; bottom: -5rem; width: 36rem; aspect-ratio: 113 / 34; background: var(--steel); opacity: .45; mask: url("../img/brand/logo-smile.svg") center / contain no-repeat; } /* --- Cabecera al hacer scroll ------------------------------------------------ */ .header { transition: box-shadow .3s, background-color .3s; } .header .container { transition: min-height .3s; } .is-scrolled .header { box-shadow: 0 8px 24px -16px rgb(12 35 64 / .35); } @media (min-width: 64rem) { .is-scrolled .header .container { min-height: 3.75rem; } } /* --- Animaciones ------------------------------------------------------------ Solo con JS activo (clase .js en ) y si el usuario no pide menos movimiento. El contenido sin JS se ve siempre. */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 110ms); } .js [data-reveal].is-visible { opacity: 1; transform: none; } .js .media[data-reveal] img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.2,.8,.2,1); } .js .media[data-reveal].is-visible img { transform: none; } .js .process[data-reveal] { opacity: 1; transform: none; } .js .process[data-reveal]::before { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.65,0,.35,1) .2s; } .js .process[data-reveal].is-visible::before { transform: scaleX(1); } .js .process[data-reveal] li { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; transition-delay: calc(var(--d) * 220ms + .2s); } .js .process[data-reveal].is-visible li { opacity: 1; transform: none; } /* Hero: sin ocultar el H1 ni la imagen (no retrasar el LCP); solo detalles. */ .hero__arc path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.65,0,.35,1) .2s forwards; } .float-card { animation: pop .7s cubic-bezier(.2,.8,.2,1) both, float 6s ease-in-out 1s infinite; } .float-card--top { animation-delay: .6s, 1.3s; } .float-card--bottom { animation-delay: .85s, 2.2s; } .hero__frame img { animation: settle 1.6s cubic-bezier(.2,.8,.2,1) both; } .ticker__track { animation: marquee 40s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .btn--arrow .icon:last-child, .btn .icon { transition: transform .25s; } .btn--arrow:hover .icon:last-child { transform: translateX(3px); } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes float { 50% { translate: 0 -8px; } } @keyframes settle { from { transform: scale(1.06); } } @keyframes marquee { to { transform: translateX(-50%); } } @media print { .topbar, .header, .action-bar, .cta-band, .footer form { display: none !important; } } /* --- Páginas de tratamiento --------------------------------------------- */ .section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--space-section); } @media (min-width: 60rem) { .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 3rem; align-items: center; } } .facts-card { margin-top: 2rem; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); } @media (min-width: 60rem) { .facts-card { margin-top: 0; transform: rotate(1deg); transition: transform .4s; } .facts-card:hover { transform: none; } } .facts-card__title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); } .facts-card__title .icon { width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: 50%; background: var(--navy); color: var(--white); } .facts-card .facts { border: 0; background: var(--steel-50); gap: 2px; } .facts-card .facts div { background: var(--steel-25); } .tlayout { display: grid; gap: 2rem; } .tlayout > * { min-width: 0; } @media (min-width: 64rem) { .tlayout { grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(3rem, 2rem + 3vw, 5rem); align-items: start; } .tlayout__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; } } .tlayout__main { max-width: 46rem; } /* Índice: chips deslizables en móvil, lista con indicador en escritorio. */ .toc__title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .toc ol { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .toc a { display: block; white-space: nowrap; padding: .45rem .9rem; border-radius: 999px; background: var(--steel-25); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text); text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .toc a:hover, .toc a.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); } @media (min-width: 64rem) { .toc ol { display: block; overflow: visible; margin-inline: 0; padding-inline: 0; border-left: 2px solid var(--line); } .toc a { white-space: normal; padding: .45rem 0 .45rem 1rem; margin-left: -2px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; line-height: 1.35; } .toc a:hover { background: none; color: var(--navy-500); } .toc a.is-active { background: none; color: var(--ink); font-weight: 600; border-left-color: var(--navy); } } .aside-card { display: none; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--navy); color: var(--steel); } @media (min-width: 64rem) { .aside-card { display: block; } } .aside-card__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--white); } .aside-card .btn { width: 100%; margin-top: .6rem; } .aside-card .btn:first-of-type { margin-top: 1.25rem; } /* Secciones del texto */ .tsec + .tsec, .tlayout__main > .prose + .tsec { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); } .tsec__head { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .tsec__num { flex: none; font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem); line-height: 1; color: var(--steel); -webkit-text-stroke: 1px var(--navy-500); } .tsec h2, .tsec .faq h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); scroll-margin-top: calc(var(--header-h) + 1.5rem); } .tsec__body { margin-top: 1.5rem; } .tsec__body.prose ul, .tsec__body.prose ol { padding-left: 0; } .answer { position: relative; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--steel-25); border-left: 4px solid var(--navy); font-size: var(--fs-lg); color: var(--ink); } .check-list { list-style: none; display: grid; gap: .6rem; } @media (min-width: 40rem) { .check-list { grid-template-columns: repeat(2, 1fr); } } .check-list li, .tick-cards li { display: flex; gap: .75rem; align-items: flex-start; } .prose .check-list li + li, .prose .tick-cards li + li { margin-top: 0; } .check-list li { padding: .85rem 1rem; border-radius: var(--radius); background: var(--steel-25); } .check-list .icon, .tick-cards .icon { flex: none; width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--navy); color: var(--white); stroke-width: 3; } .tick-cards { list-style: none; display: grid; gap: 1rem; } @media (min-width: 40rem) { .tick-cards { grid-template-columns: repeat(2, 1fr); } } .tick-cards li { flex-direction: column; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; } .tick-cards .icon { width: 2.25rem; height: 2.25rem; padding: .5rem; background: var(--steel-50); color: var(--navy); } .tick-cards strong { color: var(--ink); } @media (min-width: 48rem) { .tick-cards:has(> li:nth-child(3):last-child), .tick-cards:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } } .step-list { list-style: none; counter-reset: step; display: grid; gap: 0; } .step-list li { position: relative; counter-increment: step; padding: 0 0 1.75rem 3.75rem; min-height: 2.75rem; } .prose .step-list li + li { margin-top: 0; } .step-list li::before { content: counter(step); position: absolute; left: 0; top: -.35rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-display); font-size: 1.15rem; box-shadow: 0 0 0 6px var(--white); } .step-list li:not(:last-child)::after { content: ""; position: absolute; left: 1.25rem; top: 2.5rem; bottom: .25rem; width: 2px; background: var(--steel); transform-origin: top; } .sub-cards { display: grid; gap: 1rem; } @media (min-width: 40rem) { .sub-cards { grid-template-columns: repeat(2, 1fr); } } .prose .sub-cards { margin-top: 1.5rem; } .sub-card { position: relative; padding: 1.5rem 1.25rem 1.25rem; border-radius: var(--radius-lg); background: var(--steel-25); overflow: hidden; } .sub-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--navy), var(--navy-500)); } .sub-card h3 { font-size: 1.2rem; margin: 0; } .sub-card p { margin-top: .5rem; font-size: var(--fs-sm); } .mid-cta { display: grid; gap: 1rem; align-items: center; margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding: 1.5rem; border-radius: var(--radius-lg); background: var(--navy); color: var(--steel); position: relative; overflow: hidden; isolation: isolate; } .mid-cta::after { content: ""; position: absolute; z-index: -1; right: -3rem; bottom: -2.5rem; width: 16rem; aspect-ratio: 113 / 34; background: var(--white); opacity: .06; mask: url("../img/brand/logo-smile.svg") center / contain no-repeat; } @media (min-width: 40rem) { .mid-cta { grid-template-columns: auto 1fr auto; padding: 1.75rem 2rem; } } .mid-cta__icon { width: 3rem; height: 3rem; padding: .7rem; border-radius: 50%; background: rgb(255 255 255 / .1); color: var(--white); } .mid-cta__title { font-family: var(--font-display); font-size: 1.35rem; color: var(--white); } .mid-cta p + p { margin-top: .25rem; font-size: var(--fs-sm); } .mid-cta + .tsec { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); } @media (prefers-reduced-motion: no-preference) { .js .check-list[data-reveal], .js .tick-cards[data-reveal], .js .sub-cards[data-reveal], .js .step-list[data-reveal] { opacity: 1; transform: none; } .js :is(.check-list, .tick-cards, .step-list)[data-reveal] li, .js .sub-cards[data-reveal] .sub-card { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; } .js :is(.check-list, .tick-cards, .step-list)[data-reveal].is-visible li, .js .sub-cards[data-reveal].is-visible .sub-card { opacity: 1; transform: none; } .js :is(.check-list, .tick-cards, .step-list, .sub-cards)[data-reveal] > :nth-child(2) { transition-delay: .1s; } .js :is(.check-list, .tick-cards, .step-list, .sub-cards)[data-reveal] > :nth-child(3) { transition-delay: .2s; } .js :is(.check-list, .tick-cards, .step-list, .sub-cards)[data-reveal] > :nth-child(4) { transition-delay: .3s; } .js :is(.check-list, .tick-cards, .step-list, .sub-cards)[data-reveal] > :nth-child(5) { transition-delay: .4s; } .js :is(.check-list, .tick-cards, .step-list, .sub-cards)[data-reveal] > :nth-child(n+6) { transition-delay: .5s; } .js .step-list[data-reveal] li::after { transform: scaleY(0); transition: transform .8s .4s; } .js .step-list[data-reveal].is-visible li::after { transform: none; } .js .tsec__head[data-reveal] .tsec__num { display: inline-block; transform: translateX(-12px); opacity: 0; transition: transform .8s .15s, opacity .8s .15s; } .js .tsec__head[data-reveal].is-visible .tsec__num { transform: none; opacity: 1; } .tick-cards li:hover { transform: translateY(-3px); } } /* --- Equipo -------------------------------------------------------------- */ .team-hero__img { display: none; } @media (min-width: 60rem) { .team-hero__img { display: block; aspect-ratio: 4 / 4.4; } .team-hero__img img { height: 100%; object-fit: cover; } } .person__role { margin-top: .3rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; } .tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .tags li { padding: .25rem .7rem; border-radius: 999px; background: var(--steel-50); color: var(--navy-500); font-size: var(--fs-xs); font-weight: 600; } .team-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 64rem) { .team-grid { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } } .page-hero .hl { color: var(--navy-500); } .person { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); overflow: hidden; transition: transform .35s, box-shadow .35s; } .person:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(12 35 64 / .06), 0 18px 36px -12px rgb(12 35 64 / .25); } .person__photo { aspect-ratio: 4 / 4.4; overflow: hidden; background: linear-gradient(180deg, var(--steel-50), var(--steel)); border-radius: 999px 999px 0 0; margin: .75rem .75rem 0; } .person__photo picture, .person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .person:hover .person__photo img { transform: scale(1.04); } .person__body { padding: 1rem 1rem 1.25rem; } .person h3 { font-size: 1.05rem; letter-spacing: -.015em; } .person .tags { margin-top: 1rem; } .avatar { display: block; width: 100%; height: 100%; } .avatar__hair { fill: var(--navy-500); opacity: .28; } .avatar__face { fill: var(--steel-25); } .avatar__body { fill: var(--white); opacity: .75; } .team-lead__photo { aspect-ratio: 4 / 5; max-width: 30rem; width: 100%; justify-self: center; } .team-lead__photo picture, .team-lead__photo img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 15%; } /* --- Mapa ------------------------------------------------------------------ */ .map { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--steel-50); box-shadow: var(--shadow); } .map iframe { display: block; width: 100%; height: clamp(18rem, 45vw, 28rem); border: 0; filter: saturate(.85); } .map figcaption { padding: .8rem 1.1rem; background: var(--white); font-size: var(--fs-sm); } .map figcaption a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; } .map figcaption .icon { width: 1.1rem; height: 1.1rem; } /* --- Cookies ---------------------------------------------------------------- */ .link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .cookie-panel { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--text); box-shadow: 0 24px 60px -16px rgb(12 35 64 / .35); font-size: var(--fs-sm); line-height: 1.5; } .cookie-panel[hidden] { display: none; } .cookie-panel__title, .cookie-panel h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); } .cookie-panel p { margin-top: .6rem; color: var(--muted); } .cookie-panel a { color: var(--navy-500); } #cookie-banner { position: fixed; z-index: 90; right: 1.5rem; bottom: 1.5rem; width: min(26rem, calc(100% - 2rem)); max-height: 80vh; overflow: auto; } @media (max-width: 63.99rem) { #cookie-banner { right: 1rem; bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 9rem); } } .cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; } .cookie-actions .btn { flex: 1 1 auto; padding-block: .65rem; } .cookie-actions .link-button { color: var(--navy-500); font-weight: 600; } #cookie-settings { width: min(34rem, calc(100% - 2rem)); max-height: 85vh; margin: auto; } #cookie-settings::backdrop { background: rgb(12 35 64 / .55); } .cookie-option { display: flex; gap: .8rem; align-items: flex-start; margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--steel-25); cursor: pointer; } .cookie-option input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--navy); } .cookie-option strong { display: block; color: var(--ink); } .footer__bottom .link-button { font-size: inherit; } @media (prefers-reduced-motion: no-preference) { #cookie-banner:not([hidden]) { animation: item-in .5s cubic-bezier(.2,.8,.2,1) .4s both; } } .map__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: clamp(18rem, 45vw, 28rem); padding: 1.5rem; text-align: center; background: radial-gradient(circle at 50% 40%, var(--white), var(--steel-50) 70%); } .map__pin { width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 50%; background: var(--navy); color: var(--white); margin-bottom: .5rem; } .map__placeholder p { color: var(--text); } .map__note { max-width: 26rem; margin-top: .4rem; font-size: var(--fs-sm); color: var(--muted) !important; } .map__placeholder .btn { margin-top: .9rem; } /* --- Fotos dentro de los tratamientos ----------------------------------- */ .tfigure { margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0; } .tfigure .media { aspect-ratio: 3 / 2; } .tfigure .media picture, .tfigure .media img { width: 100%; height: 100%; object-fit: cover; } .tfigure--portrait .media { aspect-ratio: 4 / 3; } .tfigure--portrait .media img { object-position: 50% 30%; } .tfigure figcaption { margin-top: .75rem; padding-left: .9rem; border-left: 3px solid var(--steel); font-size: var(--fs-sm); color: var(--muted); } .tfigure + .tsec { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); } /* --- Galería de la clínica -------------------------------------------------- */ .gallery { display: grid; gap: 1.25rem; } /* Tres columnas: la primera foto ocupa 2×2 y el resto rellena filas de tres (sirve para 3, 6, 9… fotos). */ @media (min-width: 56rem) { .gallery { grid-template-columns: repeat(3, 1fr); } .gallery__item--wide { grid-column: span 2; grid-row: span 2; } } .gallery__item { margin: 0; display: flex; flex-direction: column; } .gallery__item .media { flex: 1; aspect-ratio: 4 / 3; } .gallery__item .media picture, .gallery__item .media img { width: 100%; height: 100%; object-fit: cover; } /* La foto grande llena el alto de las dos filas sin empujar su pie de foto. */ @media (min-width: 56rem) { .gallery__item--wide .media { position: relative; aspect-ratio: auto; min-height: 0; } .gallery__item--wide .media img { position: absolute; inset: 0; } } .gallery__item figcaption { margin-top: .6rem; font-size: var(--fs-sm); color: var(--muted); } /* --- Hero: fondo en movimiento -------------------------------------------- Foto de la clínica bajo un velo azul con un zoom muy lento (efecto "vídeo") y dos luces que flotan. Todo CSS: sin peso de vídeo ni impacto en el LCP. Quieto si se pide menos movimiento. */ .hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .hero__bg picture, .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__bg img { opacity: .34; filter: grayscale(.4) contrast(1.05); transform-origin: 70% 40%; } .hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(12 35 64 / .2), rgb(12 35 64 / .75) 70%, var(--navy)); } .hero__glow { position: absolute; z-index: 1; border-radius: 50%; filter: blur(60px); } .hero__glow--a { width: 34rem; height: 34rem; top: -12rem; right: -10rem; background: rgb(206 217 229 / .22); } .hero__glow--b { width: 28rem; height: 28rem; bottom: -12rem; left: -10rem; background: rgb(26 74 114 / .7); } @media (prefers-reduced-motion: no-preference) { .hero__bg img { animation: hero-pan 32s ease-in-out infinite alternate; } .hero__glow--a { animation: glow-a 18s ease-in-out infinite alternate; } .hero__glow--b { animation: glow-b 22s ease-in-out infinite alternate; } } @keyframes hero-pan { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.22) translate3d(-3%, 2%, 0); } } @keyframes glow-a { to { transform: translate3d(-14rem, 10rem, 0) scale(1.15); } } @keyframes glow-b { to { transform: translate3d(12rem, -8rem, 0) scale(1.2); } } /* --- Móvil: más aire -------------------------------------------------------- Márgenes laterales y separación entre secciones más generosos para que la web respire. */ @media (max-width: 47.99rem) { :root { --gutter: 1.5rem; --space-section: 5.5rem; } body { line-height: 1.7; } .lead { line-height: 1.75; } .section__head { margin-bottom: 3rem; } .section__head > * + * { margin-top: 1.25rem; } .section__head--row { gap: 1.25rem; } .hero { padding-block: 4.5rem 6rem; } .hero__content > * + * { margin-top: 1.75rem; } .hero__content .btn-row { margin-top: 2.5rem; } .hero__grid { gap: 4.5rem; } .grid, .bento { gap: 1.75rem; } .split { gap: 3.5rem; } .feature-list { gap: 2.25rem; } .process { gap: 2.75rem; } .prose > * + * { margin-top: 1.35em; } .prose h2 { margin-top: 2.6em; } .section--tight { padding-block: 3.5rem var(--space-section); } } /* --- Blog ------------------------------------------------------------------ */ .post-grid { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 1.5rem; overflow: hidden; transition: box-shadow .25s, transform .25s; } .post-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .post-card__media picture, .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .post-card:hover .post-card__media img { transform: scale(1.04); } .post-card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 1.5rem 1.75rem; } .post-card__title { font-size: var(--fs-h3); line-height: 1.25; } .post-card__title a { color: var(--ink); text-decoration: none; } .post-card__title a::after { content: ""; position: absolute; inset: 0; } .post-card { position: relative; } .post-card__body > p:last-child { color: var(--muted); font-size: var(--fs-sm); } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--navy-500); } .post-meta .icon { width: 1rem; height: 1rem; } .post-meta--hero { margin-top: 1.5rem; color: var(--muted); } .post-cover { margin-top: clamp(-2rem, -1rem - 2vw, -1rem); position: relative; z-index: 1; } /* 16:9 y no 21:9: con fotos verticales, una franja tan estrecha deja fuera las cabezas. */ .post-cover .media { aspect-ratio: 16 / 9; border-radius: 1.5rem; } @media (max-width: 47.99rem) { .post-cover .media { aspect-ratio: 4 / 3; } } .prose--intro { font-size: var(--fs-lg); } .post-treatments { margin-top: 3rem; padding: 1.75rem; border-radius: 1.5rem; background: var(--steel-25); border: 1px solid var(--line); } .post-treatments__title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--fs-h3); margin-bottom: 1rem; } .post-treatments ul { display: grid; gap: .75rem; list-style: none; padding: 0; } .post-treatments a { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--white); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); line-height: 1.5; transition: box-shadow .2s; } .post-treatments a:hover { box-shadow: var(--shadow); } .post-treatments a > .icon:first-child { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 50%; background: var(--steel-50); color: var(--navy); } .post-treatments strong { display: block; color: var(--ink); font-size: var(--fs-base); } @media (max-width: 40rem) { .post-treatments { padding: 1.25rem; } .post-treatments a { padding: .9rem 1rem; } .post-treatments__desc { display: none; } } /* --- Encuesta de satisfacción ------------------------------------------------ */ .survey-page { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--space-section); background: var(--steel-25); min-height: 70vh; } .survey { position: relative; padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem); background: var(--white); border-radius: 1.5rem; box-shadow: var(--shadow); } .survey__intro .lead { margin-top: .75rem; } .survey__intro h1 { margin-top: .5rem; font-size: var(--fs-h2); } .survey__progress { height: .3rem; margin-top: 2rem; border-radius: 1rem; background: var(--steel-50); overflow: hidden; } .survey__progress span { display: block; width: var(--progress, 0%); height: 100%; background: var(--navy-500); border-radius: inherit; transition: width .4s ease; } html:not(.js) .survey__progress, html:not(.js) .survey__nav { display: none; } .survey > .alert { margin-top: 1.5rem; } .survey__step { margin: 0; padding: 0; border: 0; min-width: 0; } .survey__step + .survey__step { margin-top: 2.5rem; } .survey__step legend { padding: 0; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--ink); } .survey__step > :not(legend) { margin-top: 1.25rem; } .survey__step > .field__error { margin-top: .75rem; } .survey__options { display: grid; gap: .75rem; } .survey__option { position: relative; display: flex; align-items: center; gap: .85rem; padding: 1.05rem 1.25rem; border: 1.5px solid var(--line); border-radius: 1rem; cursor: pointer; font-weight: 600; color: var(--ink); transition: border-color .2s, background-color .2s, transform .2s; } .survey__option:hover { border-color: var(--navy-500); background: var(--steel-25); } .survey__option input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--navy); } .survey__option:has(input:checked) { border-color: var(--navy); background: var(--steel-50); } .survey__option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(26 74 114 / .25); } .survey__rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; } .survey__rating input { position: absolute; opacity: 0; width: 1px; height: 1px; } .survey__rating label { padding: .25rem; cursor: pointer; color: var(--line); transition: color .15s, transform .15s; } .survey__rating label .icon { width: clamp(2.5rem, 2rem + 3vw, 3.25rem); height: auto; aspect-ratio: 1; stroke-width: 1.25; } .survey__rating input:checked ~ label, .survey__rating label:hover, .survey__rating label:hover ~ label { color: #f5b301; } .survey__rating input:checked ~ label .icon, .survey__rating label:hover .icon, .survey__rating label:hover ~ label .icon { fill: currentColor; } .survey__rating label:hover { transform: scale(1.08); } .survey__rating input:focus-visible + label { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: .5rem; } .survey__send { display: grid; gap: 1.25rem; } .survey__send .btn { justify-self: start; } .survey__ready { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--ink); } .survey__nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2.5rem; } .survey__nav [hidden] { display: none; } .survey__nav [data-next]:only-child, .survey__nav [data-prev][hidden] + [data-next] { margin-left: auto; } /* Con JS: una pregunta por pantalla. */ .js .survey[data-ready] .survey__step { display: none; margin-top: 2rem; } .js .survey[data-ready] .survey__step.is-current { display: block; animation: survey-in .35s ease both; } .js .survey[data-ready] .survey__send.is-current { display: grid; } .js .survey[data-ready] .survey__intro { display: none; } .js .survey[data-ready][data-step="0"] .survey__intro { display: block; } @keyframes survey-in { from { opacity: 0; transform: translateY(.75rem); } } .survey--thanks { text-align: center; } .survey--thanks .lead { margin: 1rem auto 0; max-width: 34rem; } .survey__badge { display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--steel-50); color: var(--navy-500); } .survey__badge .icon { width: 1.75rem; height: 1.75rem; } .survey__review { display: grid; justify-items: center; gap: 1rem; margin-top: 2.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: 1.25rem; background: var(--steel-25); border: 1px solid var(--line); } .survey__review p { max-width: 30rem; color: var(--text); } .survey__stars { display: flex; gap: .25rem; color: #f5b301; } .survey__stars .icon { width: 1.75rem; height: 1.75rem; fill: currentColor; } .survey__follow { margin-top: 2rem; color: var(--muted); } .survey__follow a { margin-left: .5rem; font-weight: 600; } .survey__home { display: inline-block; margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); } @media (prefers-reduced-motion: reduce) { .js .survey[data-ready] .survey__step.is-current { animation: none; } } @media (max-width: 40rem) { .survey { padding: 1.5rem 1.25rem; border-radius: 1.25rem; } .survey__send .btn, .survey__review .btn { justify-self: stretch; } .survey__nav .btn { flex: 1; } } .survey { scroll-margin-top: calc(var(--header-h) + 1rem); } .survey__nav [data-next]:disabled { opacity: .35; cursor: not-allowed; transform: none; } /* --- Casos reales (antes / después) ------------------------------------------- */ .case-grid { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .case { margin: 0; } .case__media { position: relative; border-radius: 1.25rem; overflow: hidden; background: var(--steel-50); box-shadow: var(--shadow); } /* La imagen se ve entera (sin recorte): ya contiene las dos fotos. */ .case__media picture, .case__media img { display: block; width: 100%; height: auto; } .case__tag { position: absolute; bottom: .75rem; left: .75rem; padding: .3rem .7rem; border-radius: 999px; background: rgb(12 35 64 / .78); color: var(--white); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(4px); } .case__tag--after { left: calc(50% + .75rem); background: var(--white); color: var(--navy); } .case--v .case__tag { bottom: auto; top: .75rem; } .case--v .case__tag--after { left: .75rem; top: calc(50% + .75rem); } .case figcaption { margin-top: .9rem; font-size: var(--fs-sm); color: var(--muted); } .case figcaption strong { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink); } .case-note { margin-top: 2rem; font-size: var(--fs-xs); color: var(--muted); max-width: 46rem; } /* --- Reseñas de Google ---------------------------------------------------------- */ .reviews__score { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; font-weight: 600; color: var(--ink); } .reviews__stars { display: inline-flex; gap: .1rem; color: #f5b301; } .reviews__stars .icon { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke-width: 1.25; } .reviews { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .review { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1.75rem; border-radius: 1.5rem; background: var(--white); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(12 35 64 / .04); } .section--tint .review { border-color: transparent; box-shadow: var(--shadow); } .review blockquote { margin: 0; flex: 1; } .review blockquote p { font-size: var(--fs-base); line-height: 1.65; color: var(--text); } .review blockquote p::before { content: "“"; } .review blockquote p::after { content: "”"; } .review figcaption { display: flex; flex-direction: column; font-size: var(--fs-sm); } .review figcaption strong { color: var(--ink); } .review figcaption span { color: var(--muted); font-size: var(--fs-xs); } /* En móvil, carrusel horizontal para no alargar la página. */ @media (max-width: 40rem) { .reviews { grid-auto-flow: column; grid-auto-columns: 85%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) 1rem; scrollbar-width: none; } .reviews::-webkit-scrollbar { display: none; } .review { scroll-snap-align: start; } } /* --- Vídeos de testimonios ---------------------------------------------------- */ .videos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .video { margin: 0; } .video__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 1.5rem; overflow: hidden; background: var(--navy); box-shadow: var(--shadow); } .video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Portada ligera (AVIF/WebP) encima del vídeo; sin JS se usa el póster nativo del