/* ========================================================================== Sonrisa City — hoja de estilos Dirección: vidrio claro sobre celeste clínico. El celeste sale del logo de la clínica; el ámbar es el color de acción y aparece en botones y datos destacados. El efecto "glass" necesita color detrás para verse, por eso hay una capa de luz ambiente fija (.ambient) detrás de todo el sitio. Las animaciones de entrada las maneja main.js?v=835e2792 con GSAP. Acá solo se declaran los estados iniciales, y SOLO bajo la clase .anim, que el pone si hay JS y no se pidió reducir movimiento. Sin esa clase, todo el contenido es visible de entrada. ========================================================================== */ @property --ang { syntax: ''; inherits: false; initial-value: 0deg; } /* Tipografías alojadas en el sitio. Son variables: un solo archivo por familia cubre todos los pesos. Solo el alfabeto latino (incluye á, ñ, ¿, ½). */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('fonts/figtree-latin.woff2?v=57fd1acf') format('woff2'); } @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/noto-sans-latin.woff2?v=c916a811') format('woff2'); } :root { /* --- Color ------------------------------------------------------------- */ --cyan: #0891B2; --cyan-400: #22C3E0; --cyan-600: #0E7490; --cyan-800: #155E75; --deep: #0A3D4C; --deeper: #072C38; --sky: #CFF3FB; --sky-100: #E6F8FC; --paper: #F4FBFD; --paper-2: #EAF6FA; --amber: #F5A524; --amber-600: #D98B05; --amber-ink: #3A2600; --ink: #0B2A33; --muted: #4F6B74; --line: #D5EAF1; --white: #FFFFFF; --wa: #25D366; /* --- Vidrio ------------------------------------------------------------ */ --glass-bg: rgba(255, 255, 255, .58); --glass-bg-hi: rgba(255, 255, 255, .78); --glass-line: rgba(255, 255, 255, .75); --glass-blur: blur(18px) saturate(170%); /* Borde de luz arriba + sombra tintada: lo que hace que el vidrio se lea como una lámina con espesor y no como un rectángulo blanco. */ --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(10, 61, 76, .06), 0 18px 40px -22px rgba(10, 61, 76, .30); /* --- Brillos ----------------------------------------------------------- */ --glow-cyan: 0 0 0 1px rgba(8, 145, 178, .18), 0 20px 50px -18px rgba(8, 145, 178, .45); --glow-amber: 0 10px 30px -8px rgba(245, 165, 36, .65), 0 0 0 1px rgba(245, 165, 36, .25); /* --- Tipografía -------------------------------------------------------- */ --font-display: 'Figtree', system-ui, -apple-system, sans-serif; --font-body: 'Noto Sans', system-ui, -apple-system, sans-serif; /* --- Forma ------------------------------------------------------------- */ --r-2xl: 32px; --r-xl: 24px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px; --shadow-sm: 0 2px 10px -4px rgba(10, 61, 76, .16); --shadow-md: 0 14px 30px -14px rgba(10, 61, 76, .26); --shadow-lg: 0 34px 70px -30px rgba(10, 61, 76, .40); /* --- Layout ------------------------------------------------------------ */ --maxw: 1240px; --gutter: clamp(18px, 4.5vw, 48px); --header-h: 64px; --header-top: 14px; /* --- Movimiento: tres duraciones con intención distinta ---------------- */ --t-fast: 160ms cubic-bezier(.4, 0, .2, 1); --t-base: 300ms cubic-bezier(.4, 0, .2, 1); --t-slow: 650ms cubic-bezier(.22, 1, .36, 1); } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--header-top) + 20px); -webkit-text-size-adjust: 100%; } /* Lenis maneja el scroll suave; el nativo se apaga para que no peleen. */ html.lenis { scroll-behavior: auto; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } figure { margin: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; margin: 0; color: var(--deep); text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--sky); color: var(--deep); } /* Foco visible en todo lo interactivo. Nunca se remueve. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; } /* ========================================================================== Utilidades ========================================================================== */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: var(--r-md); background: var(--deep); color: var(--white); font-weight: 600; transition: top var(--t-fast); } .skip:focus { top: 16px; } .glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); } .section { position: relative; padding-block: clamp(72px, 9vw, 130px); } .section-head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; } .section-head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-top: 16px; } .section-head .lead { margin-top: 16px; font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); border: 1px solid rgba(8, 145, 178, .18); box-shadow: 0 6px 18px -10px rgba(8, 145, 178, .5); color: var(--cyan-800); font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(8, 145, 178, .15); } .eyebrow-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--sky); box-shadow: none; } .eyebrow-dark::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 165, 36, .18); } /* Íconos en recuadro, compartidos por varias secciones. */ .ico { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; color: var(--cyan); background: linear-gradient(145deg, #fff 0%, var(--sky-100) 100%); border: 1px solid rgba(8, 145, 178, .14); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(8, 145, 178, .55); } .ico.is-amber { color: var(--amber-600); background: linear-gradient(145deg, #fff 0%, #FFF3DC 100%); border-color: rgba(245, 165, 36, .25); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(245, 165, 36, .6); } /* ========================================================================== Luz ambiente (fija, detrás de todo) Gradientes radiales en vez de filter: blur: se ven igual y no le cuestan nada a la placa de video, que es lo que importa en un celular. ========================================================================== */ .ambient { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; } .ambient .blob { position: absolute; border-radius: 50%; will-change: transform; /* --py lo mueve main.js?v=835e2792 con el scroll; va en translate para no pisar la animación de deriva, que usa transform. */ translate: 0 var(--py, 0px); } .ambient .b1 { width: 70vmax; height: 70vmax; left: -25vmax; top: -20vmax; background: radial-gradient(circle, rgba(34, 195, 224, .20) 0%, rgba(34, 195, 224, 0) 62%); animation: drift 26s ease-in-out infinite alternate; } .ambient .b2 { width: 60vmax; height: 60vmax; right: -22vmax; top: 30vh; background: radial-gradient(circle, rgba(8, 145, 178, .16) 0%, rgba(8, 145, 178, 0) 62%); animation: drift 32s ease-in-out infinite alternate-reverse; } .ambient .b3 { width: 50vmax; height: 50vmax; left: 20vw; bottom: -30vmax; background: radial-gradient(circle, rgba(245, 165, 36, .12) 0%, rgba(245, 165, 36, 0) 62%); animation: drift 38s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4vw, -3vh, 0) scale(1.08); } 100% { transform: translate3d(-3vw, 4vh, 0) scale(.95); } } /* ========================================================================== Botones ========================================================================== */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; min-height: 48px; border: 0; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .98rem; font-weight: 700; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), color var(--t-fast); will-change: transform; } /* Destello que cruza el botón al pasar el mouse. */ .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform 800ms cubic-bezier(.22, 1, .36, 1); } .btn:hover::after { transform: translateX(120%); } .btn:active { transform: scale(.97); } .btn svg { flex: 0 0 auto; } .btn-lg { padding: 17px 30px; min-height: 56px; font-size: 1.02rem; } .btn-sm { padding: 10px 18px; min-height: 42px; font-size: .9rem; } .btn-block { width: 100%; margin-top: 18px; } .btn-primary { background: linear-gradient(180deg, #FFB43E 0%, var(--amber) 100%); color: var(--amber-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), var(--glow-amber); } .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 40px -8px rgba(245, 165, 36, .8), 0 0 0 1px rgba(245, 165, 36, .3); } .btn-wa { background: linear-gradient(180deg, #3FE07F 0%, var(--wa) 100%); color: #06301A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -10px rgba(37, 211, 102, .65); } .btn-wa:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 38px -8px rgba(37, 211, 102, .8); } .btn-glass { background: var(--glass-bg-hi); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--deep); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 1px 0 #fff, 0 12px 28px -16px rgba(10, 61, 76, .4); } .btn-glass:hover { box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .35), var(--glow-cyan); color: var(--cyan-800); } .btn-glass-dark { background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } .btn-glass-dark:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(207, 243, 251, .6), 0 0 30px -6px rgba(34, 195, 224, .5); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; } .link-arrow svg { transition: transform var(--t-base); } .link-arrow:hover svg { transform: translateX(5px); } /* ========================================================================== Tarjetas con luz que sigue al cursor (.spot) e inclinación (.tilt) main.js?v=835e2792 actualiza --mx y --my. En pantallas táctiles no se activa. ========================================================================== */ .spot { position: relative; isolation: isolate; } .spot::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -30%), rgba(34, 195, 224, .18), transparent 60%); opacity: 0; transition: opacity var(--t-base); } /* El mismo círculo de luz, pero solo en el borde. */ .spot::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1px; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -30%), rgba(8, 145, 178, .7), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--t-base); } .spot:hover::before, .spot:hover::after { opacity: 1; } .spot > * { position: relative; z-index: 1; } .tilt { transform-style: preserve-3d; transition: transform var(--t-base), box-shadow var(--t-base); } /* ========================================================================== Barra de progreso de scroll ========================================================================== */ .scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: 200; height: 3px; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--cyan-400), var(--amber)); box-shadow: 0 0 12px rgba(34, 195, 224, .7); transform: scaleX(0); transform-origin: left; } /* ========================================================================== Header: píldora de vidrio flotante ========================================================================== */ .site-header { position: fixed; top: var(--header-top); left: 0; right: 0; z-index: 100; padding-inline: var(--gutter); pointer-events: none; transition: transform var(--t-slow); } .site-header.is-hidden { transform: translateY(calc(-100% - var(--header-top) - 10px)); } .nav { pointer-events: auto; position: relative; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 18px; height: var(--header-h); padding: 0 8px 0 20px; border-radius: var(--r-pill); transition: box-shadow var(--t-base), background var(--t-base); } .site-header.is-stuck .nav { background: rgba(255, 255, 255, .74); box-shadow: inset 0 1px 0 #fff, 0 18px 40px -20px rgba(10, 61, 76, .35); } .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .brand-logo { height: 36px; width: auto; } .brand-text { padding-left: 12px; border-left: 1px solid rgba(10, 61, 76, .14); font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .nav-links { position: relative; display: flex; align-items: center; gap: 2px; } .nav-links a { position: relative; z-index: 1; display: block; padding: 9px 14px; border-radius: var(--r-pill); font-size: .9rem; font-weight: 500; color: var(--muted); transition: color var(--t-fast); } .nav-links a:hover { color: var(--deep); } .nav-links a.is-active { color: var(--cyan-800); font-weight: 600; } /* Píldora que se desliza hasta la sección activa. */ .nav-pill { position: absolute; z-index: 0; top: 50%; height: 38px; width: var(--w, 0); left: var(--x, 0); transform: translateY(-50%); border-radius: var(--r-pill); background: linear-gradient(180deg, #fff, var(--sky-100)); box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .18), 0 6px 16px -8px rgba(8, 145, 178, .55); opacity: 0; transition: left var(--t-slow), width var(--t-slow), opacity var(--t-base); pointer-events: none; } .nav-pill.is-on { opacity: 1; } .nav-cta { display: flex; align-items: center; gap: 8px; } .burger { display: none; position: relative; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(10, 61, 76, .1); cursor: pointer; } .burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--deep); transition: transform var(--t-base), opacity var(--t-fast), top var(--t-base); } .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; } .burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + var(--header-top) + 40px) 0 110px; } .hero-bg { position: absolute; inset: 0; z-index: -2; } .hero-mesh span { position: absolute; border-radius: 50%; will-change: transform; } .hero-mesh span:nth-child(1) { width: 900px; height: 900px; right: -200px; top: -250px; background: radial-gradient(circle, rgba(34, 195, 224, .34) 0%, rgba(34, 195, 224, 0) 62%); animation: drift 20s ease-in-out infinite alternate; } .hero-mesh span:nth-child(2) { width: 700px; height: 700px; right: 10%; bottom: -320px; background: radial-gradient(circle, rgba(8, 145, 178, .22) 0%, rgba(8, 145, 178, 0) 62%); animation: drift 24s ease-in-out infinite alternate-reverse; } .hero-mesh span:nth-child(3) { width: 620px; height: 620px; left: -260px; bottom: -200px; background: radial-gradient(circle, rgba(245, 165, 36, .16) 0%, rgba(245, 165, 36, 0) 62%); animation: drift 28s ease-in-out infinite alternate; } /* Trama de puntos que se desvanece: da textura de "laboratorio" sin ruido. */ .hero-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(8, 145, 178, .22) 1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(60% 55% at 72% 45%, #000 0%, transparent 78%); mask-image: radial-gradient(60% 55% at 72% 45%, #000 0%, transparent 78%); } /* --- Escenario del diente --- */ .hero-stage { position: absolute; z-index: -1; top: 0; bottom: 0; right: max(0px, calc((100vw - var(--maxw)) / 2 - 40px)); width: min(56vw, 800px); } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; } .hero.is-dragging .hero-canvas { cursor: grabbing; } .hero-stage { user-select: none; -webkit-user-select: none; } /* El bloque del texto cubre el lienzo en todo su ancho: se deja pasar el mouse salvo sobre el texto mismo, así el diente se puede agarrar. */ .hero-inner { pointer-events: none; } .hero-text { pointer-events: auto; } .float-chip { pointer-events: none; } .drag-hint { position: absolute; left: 50%; bottom: 7%; z-index: 3; display: none; align-items: center; gap: 8px; padding: 8px 15px 8px 12px; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--cyan-800); transform: translateX(-50%); pointer-events: none; transition: opacity var(--t-slow), transform var(--t-slow); } .drag-hint svg { animation: giro 2.8s ease-in-out infinite; } @keyframes giro { 0%, 60% { transform: rotate(0); } 80%, 100% { transform: rotate(360deg); } } @media (hover: hover) and (pointer: fine) { .hero.has-webgl .drag-hint { display: inline-flex; } } .hero.was-dragged .drag-hint { opacity: 0; transform: translate(-50%, 10px); } /* Accesos rápidos: solo en el celular (ver más abajo). */ .hero-quick { display: none; } .hero-poster { display: none; position: absolute; left: 50%; top: 50%; width: min(100%, 620px); height: auto; transform: translate(-50%, -48%); } .hero.no-webgl .hero-poster { display: block; } .hero.no-webgl .hero-canvas { display: none; } /* Halo detrás del diente: lo despega del fondo. */ .hero-halo { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -46%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 45%), radial-gradient(circle, rgba(34, 195, 224, .30) 0%, rgba(34, 195, 224, 0) 68%); } /* --- Tarjetitas flotantes alrededor del diente --- */ .float-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 9px; border-radius: 18px; animation: floaty 6s ease-in-out infinite; will-change: transform; } .float-chip .ico { width: 38px; height: 38px; border-radius: 12px; } .float-chip b { display: block; font-family: var(--font-display); font-size: .88rem; color: var(--deep); line-height: 1.2; } .float-chip small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.3; } .fc-1 { left: 12%; bottom: 13%; animation-delay: -1s; } .fc-2 { right: 4%; top: 18%; animation-delay: -3s; } .fc-3 { right: 6%; bottom: 30%; animation-delay: -4.5s; } @keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* --- Texto --- */ .hero-inner { position: relative; z-index: 1; } .hero-text { max-width: 600px; } .status-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--cyan-800); } .status-chip .dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); } .status-chip[data-state="open"] .dot { background: #16A34A; } .status-chip[data-state="open"] .dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(22, 163, 74, .55); animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } .status-chip[data-state="open"] { color: #166534; } .status-chip[data-state="closed"] .dot { background: var(--amber); } .status-chip[data-state="closed"] { color: #7A4B00; } .status-sm { padding: 5px 12px 5px 10px; margin-top: 8px; font-size: .78rem; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); } @keyframes ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.9); opacity: 0; } } .hero-title { margin-top: 22px; font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; } .hero-title em { font-style: normal; /* Degradé entre dos celestes: queda limpio aunque la frase se parta en dos renglones. (Celeste→ámbar pasaba por un verde sucio en el medio.) */ background: linear-gradient(95deg, var(--cyan-600) 0%, var(--cyan) 45%, var(--cyan-400) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cyan); } /* SplitText mete cada palabra en su propio elemento: el degradé tiene que ir en cada una, porque el del ya no alcanza a sus hijos. */ .hero-title em * { background: linear-gradient(95deg, var(--cyan-600) 0%, var(--cyan) 50%, var(--cyan-400) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .lead { margin-top: 22px; max-width: 52ch; font-size: clamp(1.02rem, 1.4vw, 1.14rem); color: var(--muted); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: .86rem; font-weight: 600; color: #7A4B00; } .hero-note svg { color: var(--amber-600); } .hero-trust { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .stat { display: flex; flex-direction: column; justify-content: center; min-width: 132px; padding: 14px 18px; border-radius: var(--r-lg); } .stat b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--deep); font-variant-numeric: tabular-nums; } .stat span { margin-top: 6px; font-size: .78rem; color: var(--muted); line-height: 1.3; } /* Indicador de scroll: un mouse con la ruedita bajando. */ .scroll-cue { position: absolute; left: 50%; bottom: 30px; z-index: 2; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px; } .scroll-cue .mouse { position: relative; width: 24px; height: 38px; border: 2px solid rgba(10, 61, 76, .35); border-radius: 14px; } .scroll-cue .wheel { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--cyan); animation: wheel 1.8s ease-in-out infinite; } @keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* ========================================================================== Tira de especialidades en movimiento ========================================================================== */ .marquee { position: relative; overflow: hidden; padding: 20px 0; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 45s linear infinite; } /* Margen en cada pieza (no gap): así la mitad del recorrido mide exactamente una vuelta y el salto del bucle no se nota. */ .marquee-track > * { margin-right: 30px; } .marquee span { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; color: var(--deep); white-space: nowrap; letter-spacing: -.01em; } .marquee i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan-400), var(--amber)); box-shadow: 0 0 12px rgba(34, 195, 224, .7); } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } /* ========================================================================== Especialidades: grilla "bento" ========================================================================== */ .bento { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense; } .b-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-xl); overflow: hidden; } .b-card .ico { margin-bottom: 8px; } .b-card h3 { font-size: 1.14rem; } .b-card p { font-size: .93rem; color: var(--muted); } .b-card.glass:hover { box-shadow: var(--glass-shadow), var(--glow-cyan); } .b-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 20px; } .b-wide .ico { margin-bottom: 0; } /* --- Tarjeta destacada con foto --- */ .b-feature { grid-column: 1 / 3; grid-row: 1 / 3; justify-content: flex-end; min-height: 440px; padding: 32px; color: var(--white); background: var(--deep); box-shadow: var(--shadow-lg); } .b-feature > img { /* z-index -1 dentro del contexto aislado de .spot: así el velo (::before) queda por encima de la foto y el texto se lee. */ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); } .b-feature:hover > img { transform: scale(1.06); } .b-feature::before { /* el velo va sobre la foto; se reutiliza el ::before de .spot */ opacity: 1 !important; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 120%), rgba(34, 195, 224, .30), transparent 60%), linear-gradient(180deg, rgba(7, 44, 56, .05) 0%, rgba(7, 44, 56, .55) 45%, rgba(7, 44, 56, .95) 100%); } .b-feature-body { display: grid; gap: 12px; max-width: 460px; } .b-feature h3 { color: var(--white); font-size: clamp(1.6rem, 2.6vw, 2.1rem); } .b-feature p { color: rgba(255, 255, 255, .85); font-size: .98rem; } .b-feature .link-arrow { color: var(--sky); margin-top: 4px; } .tag { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .28); color: var(--white); } .tag-amber { background: rgba(245, 165, 36, .16); border-color: rgba(245, 165, 36, .4); color: #8A5600; } .tag .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245, 165, 36, .7); animation: pulse 1.8s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(245, 165, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); } } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips li { padding: 6px 13px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* --- Urgencias --- */ .b-urgent { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; background: linear-gradient(135deg, #FFF8EA 0%, #FFEBC6 100%); border: 1px solid rgba(245, 165, 36, .35); box-shadow: inset 0 1px 0 #fff, 0 20px 44px -24px rgba(217, 139, 5, .55); } .b-urgent > div { display: grid; gap: 8px; } .b-urgent h3 { font-size: 1.3rem; } .b-urgent p { color: #6B4A10; } .b-urgent .btn { flex: 0 0 auto; } .b-urgent::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -30%), rgba(245, 165, 36, .25), transparent 60%); } .b-urgent::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -30%), rgba(245, 165, 36, .9), transparent 65%); } /* ========================================================================== Por qué elegirnos (sección oscura con aurora) ========================================================================== */ .why { background: var(--deeper); color: #CFE8F0; overflow: hidden; isolation: isolate; } .why h2 { color: var(--white); } .why-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .why-aurora span { position: absolute; border-radius: 50%; will-change: transform; } .why-aurora span:nth-child(1) { width: 900px; height: 900px; left: -300px; top: -300px; background: radial-gradient(circle, rgba(8, 145, 178, .45) 0%, rgba(8, 145, 178, 0) 62%); animation: drift 22s ease-in-out infinite alternate; } .why-aurora span:nth-child(2) { width: 700px; height: 700px; right: -200px; bottom: -300px; background: radial-gradient(circle, rgba(34, 195, 224, .30) 0%, rgba(34, 195, 224, 0) 62%); animation: drift 26s ease-in-out infinite alternate-reverse; } /* Grilla fina encima de la aurora. */ .why::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); } .why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; } .why-intro { position: sticky; top: calc(var(--header-h) + var(--header-top) + 50px); } .why-intro h2 { margin-top: 18px; font-size: clamp(2rem, 4vw, 3.1rem); } .why-big { display: flex; align-items: center; gap: 20px; margin-top: 34px; } .why-big b { font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 12vw, 10rem); line-height: .8; letter-spacing: -.06em; background: linear-gradient(180deg, #fff 10%, rgba(103, 232, 249, .55) 60%, rgba(103, 232, 249, .05) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 40px rgba(34, 195, 224, .45)); } .why-big span { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: #9FCEDD; line-height: 1.35; } .why-list { display: grid; gap: 14px; } .why-item { display: flex; align-items: flex-start; gap: 20px; padding: 24px 26px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow), opacity var(--t-slow); } .why-n { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--amber); padding-top: 3px; font-variant-numeric: tabular-nums; } .why-item p { font-size: 1.05rem; color: #CFE8F0; line-height: 1.55; } .why-item strong { color: var(--white); font-weight: 600; } /* Con animaciones, los ítems se encienden a medida que pasan por el centro. */ .anim .why-item { opacity: .38; } .why-item.is-active { opacity: 1; background: rgba(255, 255, 255, .09); border-color: rgba(103, 232, 249, .35); box-shadow: 0 0 0 1px rgba(103, 232, 249, .12), 0 24px 60px -24px rgba(34, 195, 224, .7); transform: translateX(-8px); } /* ========================================================================== Tratamientos En el celular: acordeón. En escritorio: pestañas a la izquierda y el contenido a la derecha, con el mismo HTML (ver el @media más abajo). ========================================================================== */ .trat-list { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; } .trat { border-radius: var(--r-xl); overflow: hidden; transition: box-shadow var(--t-base); } .trat.is-open { box-shadow: var(--glass-shadow), var(--glow-cyan); } .trat-btn { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; } .trat-btn .ico { width: 44px; height: 44px; border-radius: 13px; transition: all var(--t-base); } .trat.is-open .trat-btn .ico { color: var(--white); background: linear-gradient(145deg, var(--cyan-400), var(--cyan-600)); border-color: transparent; box-shadow: 0 10px 22px -8px rgba(8, 145, 178, .8); } .trat-btn h3 { flex: 1; font-size: 1.08rem; } .trat-btn .arrow { flex: 0 0 auto; color: var(--muted); transition: transform var(--t-base), color var(--t-base); } .trat.is-open .trat-btn .arrow { transform: rotate(180deg); color: var(--cyan); } .trat-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow); } .trat.is-open .trat-panel { grid-template-rows: 1fr; } .trat-panel > div { overflow: hidden; min-height: 0; } .trat-body { padding: 0 22px 26px; } .trat-body p { color: var(--muted); font-size: .98rem; } .trat-body p + p, .trat-body p + h4, .trat-body ul + h4, .trat-body div + h4 { margin-top: 18px; } .trat-body h4 { font-size: .78rem; font-weight: 700; color: var(--cyan-800); letter-spacing: .09em; text-transform: uppercase; } .trat-body h4 + ul, .trat-body h4 + p { margin-top: 12px; } .tick-list { display: grid; gap: 9px; } .tick-list li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--ink); } .tick-list li::before { content: ''; position: absolute; left: 0; top: .28em; width: 17px; height: 17px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2600' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(145deg, #FFC45C, var(--amber)); box-shadow: 0 3px 8px -2px rgba(245, 165, 36, .6); } .trat-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--sky-100), rgba(255, 255, 255, .6)); border: 1px solid rgba(8, 145, 178, .15); font-size: .9rem; color: var(--cyan-800); } .mat-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 16px; padding: 4px; border-radius: var(--r-pill); background: rgba(8, 145, 178, .07); border: 1px solid rgba(8, 145, 178, .1); } .mat-tab { padding: 9px 17px; background: transparent; border: 0; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .87rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: all var(--t-base); } .mat-tab:hover { color: var(--cyan-800); } .mat-tab[aria-selected="true"] { /* --cyan-600 y no --cyan: con blanco encima, el cyan claro da 3.7:1 y el mínimo para texto es 4.5:1. */ background: var(--cyan-600); color: var(--white); box-shadow: 0 8px 18px -8px rgba(8, 145, 178, .8); } .mat-panel[hidden] { display: none; } .mat-panel:not([hidden]) { animation: fadeUp var(--t-slow) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ========================================================================== Casos: comparador antes / después ========================================================================== */ .casos-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); } .caso { border-radius: var(--r-xl); overflow: hidden; background: var(--glass-bg-hi); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); transition: transform var(--t-base), box-shadow var(--t-base); } .caso:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow), var(--glow-cyan); } .cmp { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: pan-y; /* deja scrollear hacia abajo; el arrastre lateral lo toma el JS */ background: var(--paper-2); } .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .cmp .after { clip-path: inset(0 0 0 var(--pos, 50%)); } .cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 14px rgba(34, 195, 224, .9), 0 0 0 1px rgba(10, 61, 76, .15); pointer-events: none; } .cmp-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background-color: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid #fff; box-shadow: 0 8px 22px -6px rgba(10, 61, 76, .45), 0 0 0 5px rgba(255, 255, 255, .25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px; } .cmp-tag { position: absolute; top: 12px; padding: 6px 12px; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; } .cmp-tag.is-before { left: 12px; background: rgba(7, 44, 56, .6); color: var(--white); border: 1px solid rgba(255, 255, 255, .2); } .cmp-tag.is-after { right: 12px; background: rgba(245, 165, 36, .92); color: var(--amber-ink); } /* Pista "arrastrá" que desaparece cuando la persona toca el comparador. */ .cmp-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(7, 44, 56, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--white); font-size: .74rem; font-weight: 600; pointer-events: none; transition: opacity var(--t-base); } .cmp.is-touched .cmp-hint { opacity: 0; } .caso-info { padding: 18px 20px 20px; } .caso-info h3 { font-size: 1rem; line-height: 1.35; } .caso-info .meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .8rem; color: var(--muted); } /* ========================================================================== Registro de ortodoncia: carrusel / galería fijada ========================================================================== */ .orto { position: relative; padding-block: clamp(20px, 3vw, 40px) clamp(72px, 9vw, 120px); } .orto-pin { position: relative; } .orto-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); } .orto-head h2 { margin-top: 14px; font-size: clamp(2rem, 4.4vw, 3.2rem); } .orto-head .lead { margin-top: 12px; color: var(--muted); max-width: 46ch; } .orto-ctrl { flex: 0 0 auto; display: grid; gap: 10px; min-width: 180px; } .orto-count { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .orto-count b { color: var(--deep); font-size: 1.6rem; font-weight: 800; } .orto-bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; } .orto-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--amber)); transform: scaleX(.1667); transform-origin: left; transition: transform var(--t-base); } /* El carril arranca alineado al texto de arriba y termina con aire. */ .orto-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .orto-viewport::-webkit-scrollbar { display: none; } .orto-track { display: flex; gap: 22px; width: max-content; padding: 10px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 30px; } .orto-item { flex: 0 0 auto; width: clamp(270px, 30vw, 420px); scroll-snap-align: start; scroll-margin-inline-start: var(--gutter); border-radius: var(--r-xl); overflow: hidden; background: var(--glass-bg-hi); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); transition: transform var(--t-base), box-shadow var(--t-base); } .orto-item:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow), var(--glow-cyan); } .orto-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; } .orto-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); } .orto-item:hover .orto-media img { transform: scale(1.06); } .orto-num { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-display); font-size: .78rem; font-weight: 800; color: var(--cyan-800); } .orto-item figcaption { padding: 16px 18px 18px; font-family: var(--font-display); font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--deep); } /* En escritorio la galería se fija y avanza con el scroll (main.js?v=835e2792). */ .orto.is-pinned .orto-viewport { overflow: visible; scroll-snap-type: none; } /* ========================================================================== El consultorio ========================================================================== */ /* Ladrillo: ancha + angosta arriba, angosta + ancha abajo. Las cuatro fotos son apaisadas, así ninguna queda recortada en vertical. */ .espacio-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, clamp(220px, 24vw, 330px)); } .espacio-item { position: relative; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-md); background: var(--paper-2); } .espacio-item:nth-child(1), .espacio-item:nth-child(4) { grid-column: span 2; } /* El cartel del frente está arriba en la foto: se ancla ahí. */ .espacio-item:nth-child(1) img { object-position: 50% 0%; } .espacio-item img { width: 100%; height: 118%; object-fit: cover; transform: translateY(-8%); will-change: transform; } .espacio-item figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .9); font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--deep); transform: translateY(8px); opacity: 0; transition: transform var(--t-base), opacity var(--t-base); } .espacio-item:hover figcaption { transform: none; opacity: 1; } /* ========================================================================== Turnos ========================================================================== */ .turnos-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(22px, 3.5vw, 44px); align-items: start; } .form-card { padding: clamp(24px, 3.5vw, 38px); border-radius: var(--r-2xl); background: var(--glass-bg-hi); } /* Borde con luz que gira alrededor del formulario. */ .glow-border { position: relative; } .glow-border::before { content: ''; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 55%, var(--cyan-400) 70%, var(--amber) 82%, transparent 95%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 7s linear infinite; } .glow-border { box-shadow: var(--glass-shadow), 0 40px 90px -40px rgba(34, 195, 224, .55); } .glow-border > * { position: relative; z-index: 1; } @keyframes spin { to { --ang: 360deg; } } .field { margin-bottom: 16px; } .field label { display: block; margin-bottom: 7px; font-family: var(--font-display); font-size: .86rem; font-weight: 600; color: var(--deep); } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; background: rgba(255, 255, 255, .75); border: 1.5px solid var(--line); border-radius: var(--r-md); font-size: .95rem; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-base); } .field input:hover, .field select:hover, .field textarea:hover { border-color: #B9DDE8; } .field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(8, 145, 178, .14), 0 10px 24px -14px rgba(8, 145, 178, .6); outline: none; } .field textarea { resize: vertical; min-height: 88px; } .field .hint { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field .err { display: none; margin-top: 6px; font-size: .8rem; font-weight: 600; color: #C2410C; } .field.has-error input, .field.has-error select { border-color: #EA580C; box-shadow: 0 0 0 4px rgba(234, 88, 12, .1); } .field.has-error .err { display: block; } .wa-preview { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-lg); background: linear-gradient(135deg, #E7FBEF 0%, #F2FFF7 100%); border: 1px solid rgba(37, 211, 102, .25); } .wa-preview .lbl { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #15803D; } .wa-preview p { font-size: .88rem; color: #0F3B22; white-space: pre-line; } .info-stack { display: grid; gap: 14px; } .info-card { display: flex; gap: 16px; padding: 22px 24px; border-radius: var(--r-xl); transition: box-shadow var(--t-base), transform var(--t-base); } .info-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow), var(--glow-cyan); } .info-card .ico { width: 44px; height: 44px; border-radius: 13px; } .info-card h3 { font-size: 1.02rem; margin-bottom: 6px; } .info-card p, .info-card li { font-size: .9rem; color: var(--muted); } .info-card a { color: var(--cyan-800); font-weight: 600; } .info-card a:hover { text-decoration: underline; } .horarios { margin-top: 10px; } .horarios li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 10px; margin-inline: -10px; border-radius: var(--r-sm); font-size: .88rem; } .horarios li + li { border-top: 1px dashed var(--line); } .horarios li b { color: var(--deep); font-weight: 600; } .horarios li span { color: var(--muted); text-align: right; white-space: nowrap; } /* El día de hoy se marca solo (main.js?v=835e2792, con la hora de Argentina). */ .horarios li.is-today { background: var(--sky-100); border-top-color: transparent; } .horarios li.is-today + li { border-top-color: transparent; } .horarios li.is-today b::after { content: 'Hoy'; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--cyan-600); color: var(--white); font-size: .68rem; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; } /* ========================================================================== Ubicación ========================================================================== */ .map-wrap { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .8); } .map-embed { display: block; width: 100%; height: clamp(420px, 42vw, 540px); border: 0; filter: saturate(.9); } .map-card { /* Abajo a la derecha: arriba a la izquierda está el recuadro de Google. */ position: absolute; right: 24px; bottom: 24px; width: min(360px, calc(100% - 48px)); padding: 24px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .82); } .map-card .ico { margin-bottom: 14px; } .map-card h3 { font-size: 1.2rem; } .map-card p { margin-top: 6px; font-size: .9rem; color: var(--muted); } .map-train { display: flex; align-items: center; gap: 8px; color: var(--cyan-800) !important; font-weight: 600; } .map-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } /* ========================================================================== Franja de cierre ========================================================================== */ .cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 11vw, 150px); background: var(--deeper); color: var(--white); text-align: center; } .cta-aurora { position: absolute; inset: 0; z-index: -1; } .cta-aurora span { position: absolute; border-radius: 50%; will-change: transform; } .cta-aurora span:nth-child(1) { width: 800px; height: 800px; left: -10%; top: -60%; background: radial-gradient(circle, rgba(8, 145, 178, .55) 0%, rgba(8, 145, 178, 0) 62%); animation: drift 18s ease-in-out infinite alternate; } .cta-aurora span:nth-child(2) { width: 700px; height: 700px; right: -8%; bottom: -70%; background: radial-gradient(circle, rgba(34, 195, 224, .45) 0%, rgba(34, 195, 224, 0) 62%); animation: drift 22s ease-in-out infinite alternate-reverse; } .cta-aurora span:nth-child(3) { width: 500px; height: 500px; left: 40%; top: 10%; background: radial-gradient(circle, rgba(245, 165, 36, .22) 0%, rgba(245, 165, 36, 0) 62%); animation: drift 26s ease-in-out infinite alternate; } .cta-band h2 { color: var(--white); font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; letter-spacing: -.035em; } .cta-band p { margin: 18px auto 0; max-width: 56ch; color: #B9DEE9; font-size: 1.05rem; } .cta-band .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; overflow: hidden; background: var(--deeper); color: #9FCEDD; padding-block: 60px 26px; border-top: 1px solid rgba(255, 255, 255, .06); } .foot-grid { display: grid; gap: 34px; grid-template-columns: 1.4fr 1fr 1fr; } .foot-grid h4 { font-size: .78rem; color: var(--white); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; } .foot-grid a, .foot-grid p, .foot-grid li { font-size: .9rem; color: #9FCEDD; } .foot-grid ul { display: grid; gap: 9px; } .foot-grid a { transition: color var(--t-fast); } .foot-grid a:hover { color: var(--white); } .foot-brand .brand-logo { height: 44px; width: auto; opacity: .95; } .foot-brand p { margin-top: 14px; max-width: 38ch; } .socials { display: flex; gap: 10px; margin-top: 18px; } .socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: var(--white); transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-base); } .socials a:hover { background: var(--cyan); transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(34, 195, 224, .8); } /* Marca gigante que se "llena" de luz con el scroll (main.js?v=835e2792 mueve --fill). */ .foot-word { margin: 40px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.2rem, 15vw, 13rem); line-height: .85; letter-spacing: -.05em; white-space: nowrap; text-align: center; color: transparent; background: linear-gradient(90deg, rgba(103, 232, 249, .55) 0%, rgba(245, 165, 36, .45) var(--fill, 0%), rgba(255, 255, 255, .05) calc(var(--fill, 0%) + 12%)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1px rgba(255, 255, 255, .08); user-select: none; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; } /* ========================================================================== WhatsApp flotante ========================================================================== */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(180deg, #3FE07F, var(--wa)); color: #06301A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 30px -10px rgba(37, 211, 102, .75); transition: transform var(--t-base), opacity var(--t-base); } .wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .6); animation: ring 2.4s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes ring { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } } .wa-float:hover { transform: translateY(-3px) scale(1.05); } .wa-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(20px); } /* ========================================================================== Asistente de consultas ========================================================================== */ .chat-launcher { position: fixed; right: 20px; bottom: 90px; z-index: 95; width: 58px; height: 58px; display: grid; place-items: center; background: linear-gradient(145deg, var(--cyan-400), var(--cyan-600)); color: var(--white); border: 0; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -10px rgba(8, 145, 178, .8); cursor: pointer; transition: transform var(--t-base), background var(--t-base); } .chat-launcher:hover { transform: scale(1.07) rotate(-6deg); } .chat-launcher.is-open { background: var(--deep); } .chat-dot { position: absolute; top: 12px; right: 12px; width: 11px; height: 11px; background: var(--amber); border: 2px solid var(--cyan); border-radius: 50%; animation: pulse 1.8s infinite; } .chat-launcher.is-open .chat-dot { display: none; } .chat-panel { position: fixed; right: 20px; bottom: 90px; z-index: 96; display: flex; flex-direction: column; width: min(390px, calc(100vw - 32px)); height: min(580px, calc(100vh - 140px)); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255, 255, 255, .9); border-radius: var(--r-2xl); box-shadow: 0 40px 80px -30px rgba(10, 61, 76, .5), 0 0 0 1px rgba(8, 145, 178, .08); overflow: hidden; } .chat-panel[hidden] { display: none; } .chat-panel.is-open { animation: chatIn var(--t-slow) both; transform-origin: bottom right; } @keyframes chatIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } } .chat-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: linear-gradient(120deg, var(--cyan-600), var(--deep)); color: var(--white); } .chat-avatar { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border-radius: 50%; } .chat-title { flex: 1; display: flex; flex-direction: column; line-height: 1.25; } .chat-title b { font-family: var(--font-display); font-size: .96rem; } .chat-title span { font-size: .74rem; color: #BDE6F0; } .chat-close { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: var(--white); border: 0; border-radius: 10px; cursor: pointer; transition: background var(--t-fast); } .chat-close:hover { background: rgba(255, 255, 255, .24); } .chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; overscroll-behavior: contain; } .chat-msg { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: .9rem; line-height: 1.55; animation: msgIn 260ms both; } @keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .chat-msg.is-bot { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; box-shadow: 0 6px 16px -10px rgba(10, 61, 76, .3); color: var(--ink); } .chat-msg.is-yo { align-self: flex-end; background: linear-gradient(145deg, var(--cyan-600), var(--cyan-800)); color: var(--white); border-bottom-right-radius: 6px; box-shadow: 0 8px 18px -10px rgba(8, 145, 178, .8); } .chat-msg b { font-weight: 700; } .chat-msg.is-typing { padding: 13px 15px; } .chat-typing { display: flex; gap: 4px; } .chat-typing i { width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; animation: typing 1.1s infinite ease-in-out; } .chat-typing i:nth-child(2) { animation-delay: .15s; } .chat-typing i:nth-child(3) { animation-delay: .3s; } @keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } } .chat-wa { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: linear-gradient(180deg, #3FE07F, var(--wa)); color: #06301A; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .85rem; font-weight: 700; box-shadow: 0 10px 22px -10px rgba(37, 211, 102, .8); transition: transform var(--t-fast); } .chat-wa:hover { transform: translateY(-2px); } .chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } .chat-chip { padding: 7px 13px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .79rem; color: var(--cyan-800); cursor: pointer; transition: all var(--t-fast); } .chat-chip:hover { background: var(--sky-100); border-color: var(--cyan); transform: translateY(-1px); } .chat-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(8, 145, 178, .1); background: rgba(255, 255, 255, .6); } .chat-form input { flex: 1; padding: 11px 15px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-pill); font-size: .9rem; transition: border-color var(--t-fast), box-shadow var(--t-base); } .chat-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(8, 145, 178, .12); outline: none; } .chat-form button { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; background: linear-gradient(145deg, var(--cyan-400), var(--cyan-600)); color: var(--white); border: 0; border-radius: 50%; cursor: pointer; transition: transform var(--t-fast); } .chat-form button:hover { transform: scale(1.06); } .chat-foot { padding: 0 14px 12px; background: rgba(255, 255, 255, .6); font-size: .68rem; color: var(--muted); text-align: center; } /* ========================================================================== Estados iniciales de las animaciones Solo con .anim (ver el ). main.js?v=835e2792 los lleva a su estado final. ========================================================================== */ .anim .hero-anim, .anim [data-fade], .anim [data-stagger], .anim .caso, .anim .orto-item, .anim .info-card, .anim .form-card, .anim .float-chip { opacity: 0; } .anim [data-split], .anim [data-split-hero] { visibility: hidden; } /* SplitText: cada renglón es una máscara y las palabras suben desde abajo. */ .split-line { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } /* ========================================================================== Mapa: mientras no carga el real, uno dibujado en CSS ========================================================================== */ .map-facade { position: relative; display: grid; place-items: center; background-color: #E4F1F5; /* Calles: dos tramas de líneas blancas cruzadas en diagonal, más una avenida ancha. Suficiente para leerse como mapa sin pesar nada. */ background-image: linear-gradient(28deg, transparent 47.5%, #fff 47.5%, #fff 52.5%, transparent 52.5%), repeating-linear-gradient(28deg, transparent 0 46px, rgba(255, 255, 255, .95) 46px 50px), repeating-linear-gradient(-62deg, transparent 0 58px, rgba(255, 255, 255, .95) 58px 62px), radial-gradient(circle at 70% 30%, rgba(34, 195, 224, .18), transparent 45%), radial-gradient(circle at 20% 80%, rgba(130, 205, 150, .25), transparent 30%); background-size: 100% 100%, auto, auto, 100% 100%, 100% 100%; cursor: pointer; } .map-pin { position: absolute; left: 50%; top: 42%; color: #E0352B; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); animation: floaty 2.6s ease-in-out infinite; } .map-pin::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 6px; margin-left: -8px; border-radius: 50%; background: rgba(0, 0, 0, .18); } .map-load { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); } .map-load:active { transform: translateX(-50%) scale(.97); } .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .map-facade.is-loaded { cursor: auto; background: #E4F1F5; } .map-facade.is-loaded > :not(iframe) { display: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { .hero-stage { width: 52vw; right: -4vw; } } @media (max-width: 1024px) { .nav-links { display: none; } .burger { display: block; } /* Menú desplegable de vidrio, colgado de la píldora del header. */ .nav-links.is-open { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid #fff; box-shadow: var(--shadow-lg); animation: menuIn 220ms both; } .nav-links.is-open a { padding: 14px 16px; border-radius: var(--r-md); font-size: 1rem; font-weight: 600; color: var(--deep); } .nav-links.is-open a:hover, .nav-links.is-open a.is-active { background: var(--sky-100); color: var(--cyan-800); } .nav-pill { display: none; } .bento { grid-template-columns: repeat(2, 1fr); } .b-feature { grid-column: span 2; grid-row: auto; min-height: 380px; } .why-grid { grid-template-columns: 1fr; gap: 40px; } .why-intro { position: static; } .why-big { margin-top: 22px; } .casos-grid { grid-template-columns: 1fr 1fr; } .turnos-grid { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: span 2; } } @keyframes menuIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } /* --- Escritorio: tratamientos en pestañas --- display: contents "disuelve" cada
y deja al botón y al panel como hijos directos de la grilla: los botones caen en la columna 1 y el panel abierto ocupa la columna 2. Mismo HTML que el acordeón. */ @media (min-width: 1025px) { .trat-list { max-width: none; grid-template-columns: minmax(280px, 340px) 1fr; grid-auto-rows: min-content; gap: 10px 32px; align-items: start; } .trat { display: contents; } .trat-btn { grid-column: 1; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .7); transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .trat-btn:hover { background: rgba(255, 255, 255, .8); transform: translateX(4px); } .trat.is-open .trat-btn { background: var(--white); box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .25), var(--glow-cyan); transform: translateX(8px); } .trat-btn .arrow { transform: rotate(-90deg); } .trat.is-open .trat-btn .arrow { transform: rotate(-90deg) translateY(4px); } .trat-panel { grid-column: 2; grid-row: 1 / span 6; display: none; border-radius: var(--r-2xl); background: var(--glass-bg-hi); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow), 0 40px 80px -40px rgba(8, 145, 178, .45); } .trat.is-open .trat-panel { display: grid; animation: panelIn var(--t-slow) both; } .trat-body { padding: 34px 38px 36px; } .trat-body > p:first-child { font-size: 1.06rem; color: var(--ink); } .trat.is-open { box-shadow: none; } } @keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { /* Hero en columna: primero la composición del diente, después el texto. */ .hero { min-height: auto; flex-direction: column; align-items: stretch; padding: calc(var(--header-h) + var(--header-top) + 14px) 0 56px; } .hero-stage { display: none; } .hero-dots { -webkit-mask-image: radial-gradient(70% 40% at 50% 25%, #000, transparent); mask-image: radial-gradient(70% 40% at 50% 25%, #000, transparent); } .hero-text { max-width: none; text-align: center; } .hero .lead { margin-inline: auto; } .hero-cta, .hero-trust { justify-content: center; } /* Sin diente: el hero arranca por el texto. Dos anillos de luz, quietos, le dan profundidad arriba a la derecha sin costar nada. */ .hero-text { text-align: left; } .hero .lead { margin-inline: 0; } .hero-cta, .hero-trust { justify-content: flex-start; } .hero-bg::before, .hero-bg::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .hero-bg::before { width: 420px; height: 420px; right: -210px; top: 30px; border: 1px solid rgba(8, 145, 178, .16); background: radial-gradient(circle, rgba(34, 195, 224, .22) 0%, rgba(34, 195, 224, 0) 62%); } .hero-bg::after { width: 280px; height: 280px; right: -140px; top: 100px; border: 1px dashed rgba(8, 145, 178, .22); } .hero-trust { display: none; } .hero-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; } .qa { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 14px 13px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, 0 12px 26px -18px rgba(10, 61, 76, .45); -webkit-tap-highlight-color: transparent; transition: transform var(--t-fast), box-shadow var(--t-fast); } .qa:active { transform: scale(.97); } .qa .ico { width: 36px; height: 36px; border-radius: 11px; margin-bottom: 8px; } .qa b { font-family: var(--font-display); font-size: .95rem; color: var(--deep); line-height: 1.2; } .qa small { font-size: .76rem; color: var(--muted); line-height: 1.3; } .qa-amber { background: linear-gradient(135deg, #FFF8EA 0%, #FFEBC6 100%); border-color: rgba(245, 165, 36, .35); } .qa-amber b { color: #6B4200; } .scroll-cue { display: none; } .orto-head { flex-direction: column; align-items: flex-start; } .orto-ctrl { width: 100%; grid-template-columns: auto 1fr; align-items: center; gap: 16px; } } @media (max-width: 720px) { :root { --header-h: 58px; --header-top: 10px; } .section { padding-block: 64px; } .section-head { margin-bottom: 30px; } .nav { padding: 0 6px 0 16px; } .brand-logo { height: 30px; } .brand-text { display: none; } .nav-cta .btn { display: none; } .hero-title { font-size: clamp(2.2rem, 10vw, 2.9rem); margin-top: 16px; } .hero .lead { font-size: .98rem; margin-top: 16px; } .hero-cta { margin-top: 22px; flex-wrap: nowrap; gap: 10px; } .hero-cta .btn { flex: 1 1 0; padding: 15px 12px; min-height: 52px; font-size: .95rem; } .hero-note { font-size: .8rem; } .hero-trust { gap: 8px; margin-top: 22px; flex-wrap: nowrap; } .stat { min-width: 0; flex: 1; padding: 12px 10px; text-align: center; } .stat b { font-size: 1.35rem; } .stat span { font-size: .7rem; } .marquee { padding: 14px 0; } /* En el hero ya están los botones de turno y WhatsApp: los flotantes aparecen recién al bajar, así no tapan esos botones. */ body:not(.past-hero) .wa-float, body:not(.past-hero) .chat-launcher { opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; } .chat-launcher { transition: transform var(--t-base), opacity var(--t-base), background var(--t-base); } /* Bento compacto: dos columnas y textos cortos. */ .bento { gap: 10px; grid-auto-rows: auto; } .b-card { padding: 18px; gap: 6px; border-radius: var(--r-lg); } .b-card .ico { width: 42px; height: 42px; margin-bottom: 4px; } .b-card h3 { font-size: 1rem; } .b-card p { font-size: .84rem; line-height: 1.45; } .b-feature { min-height: 330px; padding: 22px; } .b-wide, .b-urgent { grid-column: span 2; } .b-wide { flex-direction: column; align-items: flex-start; gap: 6px; } .b-urgent { flex-direction: column; align-items: stretch; } .why-item { padding: 18px; gap: 14px; } .why-item p { font-size: .96rem; } .why-item.is-active { transform: none; } .why-big b { font-size: 5.5rem; } .trat-btn { padding: 15px 16px; } .trat-body { padding: 0 16px 22px; } .casos-grid { grid-template-columns: 1fr; gap: 16px; } .orto-item { width: 78vw; } .espacio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 42vw; gap: 10px; } .espacio-item { border-radius: var(--r-lg); } .espacio-item:nth-child(1), .espacio-item:nth-child(4) { grid-column: span 2; } /* En táctil no hay hover: los epígrafes se ven siempre. */ .espacio-item figcaption { transform: none; opacity: 1; font-size: .72rem; left: 10px; bottom: 10px; } .field-row { grid-template-columns: 1fr; } .form-card { border-radius: var(--r-xl); } .horarios li { flex-wrap: wrap; } .map-wrap { border-radius: var(--r-xl); overflow: visible; box-shadow: none; } .map-embed { height: 300px; border-radius: var(--r-xl); box-shadow: var(--shadow-md); } .map-card { position: relative; right: auto; bottom: auto; width: auto; margin: -40px 12px 0; } .foot-grid { grid-template-columns: 1fr; } .foot-brand { grid-column: span 1; } .foot-word { margin-top: 30px; } .wa-float { right: 14px; bottom: 14px; width: 54px; height: 54px; } .chat-launcher { right: 14px; bottom: 78px; width: 54px; height: 54px; } .chat-panel { right: 10px; left: 10px; bottom: 10px; width: auto; height: min(78vh, 560px); } } /* ========================================================================== Modo liviano (.lite: celulares, tablets y equipos de gama baja) Se ve igual; lo que cambia es CÓMO se dibuja. Cada regla saca algo que en una placa de video chica cuesta mucho y casi no se nota: ========================================================================== */ /* 1. Sin desenfoque de fondo (backdrop-filter). Es lo más caro del "glass": obliga a redibujar lo que hay detrás en cada cuadro de scroll. Se reemplaza por un blanco un poco más opaco, que sobre fondos claros se ve casi igual. El header lo conserva salvo en gama baja. */ .lite *:not(.nav), .lite *::before, .lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .low .nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .lite .glass { background: rgba(255, 255, 255, .86); } .lite .btn-glass { background: rgba(255, 255, 255, .94); } .lite .caso, .lite .orto-item, .lite .form-card { background: rgba(255, 255, 255, .94); } .lite .marquee { background: rgba(255, 255, 255, .82); } .lite .why-item { background: rgba(255, 255, 255, .06); } .lite .chat-panel { background: rgba(255, 255, 255, .98); } .lite .cmp-handle::after, .lite .orto-num, .lite .espacio-item figcaption { background-color: rgba(255, 255, 255, .95); } .lite .cmp-tag.is-before, .lite .cmp-hint { background: rgba(7, 44, 56, .78); } .low .site-header .nav, .low .site-header.is-stuck .nav { background: rgba(255, 255, 255, .95); } /* 2. Manchas de luz quietas. Moverlas redibuja capas del tamaño de la pantalla todo el tiempo, aunque nadie toque nada. Quedan en su lugar. */ .lite .ambient .blob, .lite .hero-mesh span, .lite .why-aurora span, .lite .cta-aurora span { animation: none; will-change: auto; } /* 3. El borde de luz del formulario no gira: una propiedad animada con @property se repinta en cada cuadro. Queda fijo, con el mismo degradé. */ .lite .glow-border::before { animation: none; --ang: 200deg; } /* 4. Sin la luz que sigue al cursor: en táctil no hay cursor. */ .lite .spot::before, .lite .spot::after { display: none; } /* 5. Sombras más cortas en lo que se repite mucho: menos píxeles a pintar. */ .lite .why-item.is-active { box-shadow: 0 0 0 1px rgba(103, 232, 249, .2), 0 14px 30px -18px rgba(34, 195, 224, .7); } /* 6. La entrada del hero va por CSS, no por JS: arranca con el primer pintado, sin esperar a que cargue GSAP. En un teléfono lento es la diferencia entre ver el título enseguida o casi un segundo después. */ @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .lite.anim [data-split-hero] { visibility: visible; } .lite.anim .hero .hero-anim, .lite.anim .hero-title { animation: heroIn .8s cubic-bezier(.22, 1, .36, 1) both; } .lite.anim .hero .status-chip { animation-delay: .05s; } .lite.anim .hero-title { animation-delay: .12s; } .lite.anim .hero .lead { animation-delay: .22s; } .lite.anim .hero-cta { animation-delay: .32s; } .lite.anim .hero-note { animation-delay: .4s; } .lite.anim .hero-quick { animation-delay: .48s; } /* ========================================================================== Preferencias del sistema ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .marquee-track { animation: none; } .espacio-item img { transform: none; height: 100%; } } @media print { .site-header, .wa-float, .chat-launcher, .chat-panel, .scroll-progress, .ambient, .hero-stage, .marquee { display: none !important; } }