/* ========================================================================== KineON — kineon.cl Sistema de diseño construido sobre el turquesa del logo (#02BFB8). Orden: tokens · base · utilidades · componentes · secciones · responsive ========================================================================== */ /* --------------------------------------------------------------- 1. TOKENS */ :root { /* Marca */ --brand: #02bfb8; --brand-600: #05a49e; --brand-700: #077e7a; --brand-soft: #e6f9f7; --brand-glow: rgba(2, 191, 184, 0.28); /* Neutros */ --ink: #072a2d; --ink-2: #0f3d41; --text: #172f32; --muted: #5b7679; --surface: #ffffff; --surface-soft: #f3faf9; --surface-alt: #e9f6f4; --border: #dcecea; /* Apoyo */ --whatsapp: #25d366; --whatsapp-dark: #1da851; --star: #f5b301; /* Formas */ --r-sm: 0.5rem; --r-md: 0.875rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pill: 9999px; /* Sombras: suaves y teñidas, no grises planas */ --sh-xs: 0 1px 2px rgba(7, 42, 45, 0.06); --sh-sm: 0 2px 8px rgba(7, 42, 45, 0.07); --sh-md: 0 8px 24px rgba(7, 42, 45, 0.09); --sh-lg: 0 20px 48px rgba(7, 42, 45, 0.13); /* Ritmo */ --section-y: clamp(3.5rem, 7vw, 6.5rem); --gap: clamp(1.25rem, 2.5vw, 2rem); --header-h: 84px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ----------------------------------------------------------------- 2. BASE */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.65; color: var(--text); background-color: var(--surface); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); font-weight: 700; } h1 { font-size: clamp(2rem, 1.3rem + 3.1vw, 3.5rem); font-weight: 800; } h2 { font-size: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem); } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--brand-700); } img { max-width: 100%; height: auto; display: block; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------ 3. UTILIDADES */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .container--narrow { max-width: 820px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; z-index: 300; background: var(--surface); color: var(--brand-700); padding: 0.75rem 1.25rem; border-radius: var(--r-sm); box-shadow: var(--sh-md); font-weight: 600; text-decoration: none; } .skip-link:focus { left: 1rem; top: 1rem; } /* Aparición al hacer scroll. El contenido es VISIBLE por defecto y sólo se oculta cuando el JavaScript confirma que puede animarlo (clase .js-anim en ). Así, si el script falla, si el observador no dispara o si un rastreador no ejecuta JS, la página se ve completa igual. Ocultar por defecto sería arriesgar la página entera a cambio de una animación. */ .reveal { opacity: 1; } html.js-anim .reveal { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } html.js-anim .reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); } /* ------------------------------------------------------- 4. TIPOS DE SECCIÓN */ .section { padding-block: var(--section-y); } /* Las secciones que están fuera de la pantalla no se maquetan ni se pintan hasta que el usuario se acerca a ellas. En una página larga como esta, con nueve secciones y muchas fotos, es lo que más se nota al desplazarse: el navegador deja de rehacer el trabajo de toda la página en cada cuadro. `contain-intrinsic-size` es la altura que se le supone mientras está guardada; sin ese dato la barra de desplazamiento saltaría al entrar cada sección. No se aplica a las dos primeras secciones ni al hero, que se ven de entrada. */ #equipo, #instalaciones, #como-llegar, #preguntas { content-visibility: auto; contain-intrinsic-size: auto 900px; } .section--soft { background: var(--surface-soft); } .section--alt { background: var(--surface-alt); } .section-head { max-width: 720px; margin: 0 auto clamp(2.25rem, 4vw, 3.5rem); text-align: center; } .eyebrow { display: inline-block; margin-bottom: 0.85rem; padding: 0.35rem 0.9rem; background: var(--brand-soft); color: var(--brand-700); border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* Los subtítulos de sección quedan centrados, no justificados. Son de una o dos líneas bajo un título centrado: al justificarlos, la primera línea se estira de borde a borde y la segunda queda corta y suelta, peleando con el eje centrado. Centrado el bloque se lee como una unidad. */ .section-head p { margin-top: 1rem; color: var(--muted); font-size: 1.075rem; text-wrap: pretty; } /* Texto justificado, pero sólo donde la columna da el ancho para hacerlo bien. Justificar reparte el sobrante entre las palabras de la línea: mientras más angosta la columna y más largas las palabras, más se abren esos huecos. En estos dos bloques la línea pasa de las 60 letras y el texto queda parejo y con el borde derecho limpio. En las tarjetas de servicio, los pasos y los testimonios NO se justifica: son columnas de ~40 letras y con palabras como "musculoesquelética" se abrían ríos de espacio en blanco entre palabras, peor que el borde irregular que venían a arreglar. La partición con guiones ayuda, pero Chrome descarga los diccionarios aparte y no se puede contar con ella. El es lo que le permite al navegador partir en español. */ .about__text p, .faq__answer { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* ------------------------------------------------------------- 5. BOTONES */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.9rem 1.6rem; border: 2px solid transparent; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease); } .btn i { font-size: 1.1em; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--brand); color: #04282a; box-shadow: 0 6px 18px var(--brand-glow); } .btn--primary:hover { background: var(--brand-600); box-shadow: 0 12px 28px var(--brand-glow); } .btn--whatsapp { background: var(--whatsapp); color: #08301a; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3); } .btn--whatsapp:hover { background: var(--whatsapp-dark); color: #fff; } .btn--ghost { background: transparent; color: var(--brand-700); border-color: var(--brand); } .btn--ghost:hover { background: var(--brand); color: #04282a; } .btn--on-dark { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.45); backdrop-filter: blur(6px); } .btn--on-dark:hover { background: rgba(255, 255, 255, 0.22); } .btn--sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; } .btn--block { width: 100%; } /* Latido del botón de agendar: es la acción que queremos que se note, así que no se detiene nunca, tampoco al pasar el cursor. La onda de color va en box-shadow y no en un pseudo-elemento escalado: el botón es una píldora ancha, y un scale la engordaría mucho más a lo ancho que a lo alto. El box-shadow crece siguiendo el borde redondeado, parejo por los cuatro lados, y además no ocupa espacio en el layout. */ .btn--pulse { animation: latido 1.4s var(--ease) infinite; } @keyframes latido { 0% { transform: scale(1); box-shadow: 0 6px 18px var(--brand-glow), 0 0 0 0 rgba(2, 191, 184, 0.6); } 45% { transform: scale(1.06); box-shadow: 0 10px 26px var(--brand-glow), 0 0 0 11px rgba(2, 191, 184, 0); } 100% { transform: scale(1); box-shadow: 0 6px 18px var(--brand-glow), 0 0 0 0 rgba(2, 191, 184, 0); } } .btn-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--brand-700); text-decoration: none; } .link-arrow i { transition: transform 0.25s var(--ease); } .link-arrow:hover i { transform: translateX(4px); } /* ------------------------------------------------------------ 6. BARRA SUP. */ .topbar { background: var(--ink); color: #cfe9e7; font-size: 0.83rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 40px; padding-block: 0.4rem; } .topbar__list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; } .topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; } .topbar__item i { color: var(--brand); } /* Separador entre los dos teléfonos. Va como y no como texto suelto para poder atenuarlo, y con aria-hidden para que el lector de pantalla no diga "barra vertical" entre un número y otro. */ .topbar__sep { opacity: 0.4; margin-inline: 0.1rem; } .topbar a { color: inherit; text-decoration: none; } .topbar a:hover { color: #fff; text-decoration: underline; } /* ------------------------------------------------------------ 7. CABECERA */ /* Sin backdrop-filter a propósito. La cabecera va fija y cubre todo el ancho: con desenfoque de fondo, el navegador tiene que volver a desenfocar la franja completa en cada cuadro del scroll, y ahí se van los fotogramas. Encima el fondo estaba al 92% de opacidad, así que el desenfoque casi no se veía. Fondo sólido: se ve prácticamente igual y el scroll queda limpio. */ .header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow 0.3s var(--ease); } .header.is-stuck { box-shadow: var(--sh-sm); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); /* Sin esto, un hijo ancho empuja la cabecera más allá del viewport y arrastra todo el documento hacia la derecha. */ min-width: 0; flex-wrap: nowrap; } .header__logo { display: inline-flex; flex-shrink: 0; } .header__logo img { height: 60px; width: auto; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); } .nav__link { position: relative; padding-block: 0.35rem; color: var(--text); font-size: 0.95rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--brand); border-radius: 2px; transition: width 0.3s var(--ease); } .nav__link:hover { color: var(--brand-700); } .nav__link:hover::after { width: 100%; } .header__actions { display: flex; align-items: center; gap: 0.75rem; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--surface-soft); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 1.15rem; cursor: pointer; text-decoration: none; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .icon-btn:hover { background: var(--brand-soft); color: var(--brand-700); border-color: var(--brand); } .burger { display: none; } /* Menú móvil */ .nav-mobile { display: none; position: absolute; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--sh-lg); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav-mobile.is-open { display: block; } .nav-mobile__inner { display: flex; flex-direction: column; padding: 1rem 0 1.75rem; } .nav-mobile__link { padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--border); color: var(--text); font-size: 1.05rem; font-weight: 600; text-decoration: none; } .nav-mobile__link:hover { color: var(--brand-700); } .nav-mobile__foot { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; } /* --------------------------------------------------------------- 8. HERO */ .hero { position: relative; display: grid; place-items: center; min-height: clamp(560px, 84vh, 780px); padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--ink); overflow: hidden; isolation: isolate; } .hero__slides { position: absolute; inset: 0; z-index: -2; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); } .hero__slide.is-active { opacity: 1; } /* Sin JS sólo se ve la primera diapositiva, que es la que importa. */ .no-js .hero__slide:first-child { opacity: 1; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 22, 24, 0.55) 0%, rgba(4, 22, 24, 0.72) 55%, rgba(4, 22, 24, 0.9) 100%), radial-gradient(70% 60% at 15% 40%, rgba(2, 191, 184, 0.22), transparent 70%); } .hero__content { position: relative; max-width: 780px; text-align: center; color: #fff; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.35rem; padding: 0.45rem 1.1rem; background: rgba(2, 191, 184, 0.16); border: 1px solid rgba(2, 191, 184, 0.5); border-radius: var(--r-pill); color: #7ff1eb; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hero__eyebrow i { font-size: 1rem; } .hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } .hero h1 em { font-style: normal; color: var(--brand); /* El "1:1" no debe partirse entre dos líneas. */ white-space: nowrap; } /* Bajada del título: más grande que el párrafo pero sin competir con el H1. */ .hero__tagline { margin: 1.1rem 0 0; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 600; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } .hero__lead { max-width: 620px; margin: 0.9rem auto 2rem; font-size: clamp(1rem, 0.96rem + 0.3vw, 1.125rem); color: #d5e9e7; } .hero .btn-actions { justify-content: center; } .hero__note { margin-top: 1.75rem; font-size: 0.92rem; color: #a9cbc8; } .hero__note i { color: var(--brand); } /* Controles del carrusel */ /* Los puntos van por encima del borde superior de la barra de confianza, que sube sobre el hero con un margen negativo. */ .hero__dots { position: absolute; left: 50%; bottom: clamp(4.5rem, 7vw, 5.5rem); transform: translateX(-50%); display: flex; gap: 0.6rem; z-index: 3; } .hero__dot { width: 36px; height: 4px; padding: 0; background: rgba(255, 255, 255, 0.35); border: none; border-radius: var(--r-pill); cursor: pointer; transition: background-color 0.3s var(--ease); } .hero__dot.is-active { background: var(--brand); } .hero__dot:hover { background: rgba(255, 255, 255, 0.65); } .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--r-pill); font-size: 1.3rem; cursor: pointer; backdrop-filter: blur(6px); transition: background-color 0.25s var(--ease); } .hero__arrow:hover { background: rgba(255, 255, 255, 0.26); } .hero__arrow--prev { left: clamp(0.5rem, 2vw, 1.75rem); } .hero__arrow--next { right: clamp(0.5rem, 2vw, 1.75rem); } /* ---------------------------------------------------------- 9. BARRA CONFIANZA */ .trust { position: relative; z-index: 5; margin-top: calc(-1 * clamp(2rem, 5vw, 3.5rem)); } .trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); } .trust__item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.35rem 1.1rem; background: var(--surface); } .trust__item i { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; background: var(--brand-soft); color: var(--brand-700); border-radius: var(--r-md); font-size: 1.2rem; } .trust__item strong { display: block; margin-bottom: 0.1rem; font-size: 0.94rem; line-height: 1.35; color: var(--ink); /* Evita que "Metro Príncipe de Gales" se parta en tres líneas. */ text-wrap: balance; } .trust__item span { display: block; font-size: 0.82rem; line-height: 1.45; color: var(--muted); } /* ------------------------------------------------------- 10. QUIÉNES SOMOS */ .about__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .about__text p { color: var(--muted); font-size: 1.075rem; } .about__text .section-head { margin: 0 0 1.5rem; text-align: left; } .about__quote { margin: 1.75rem 0; padding: 1.1rem 0 1.1rem 1.35rem; border-left: 4px solid var(--brand); font-size: 1.15rem; font-weight: 600; color: var(--ink) !important; } .about__list { display: grid; gap: 0.9rem; } .about__list li { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-xs); } .about__list i { flex-shrink: 0; margin-top: 0.15rem; color: var(--brand); font-size: 1.25rem; } .about__list strong { display: block; color: var(--ink); } .about__list span { font-size: 0.92rem; color: var(--muted); } /* --------------------------------------------------------- 11. SERVICIOS */ .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } /* La tarjeta ya no pinta nada: es sólo el escenario 3D y el marco de posicionamiento. Lo que se ve son las dos caras. */ .service { position: relative; perspective: 1400px; /* Alto mínimo parejo: el reverso está posicionado en absoluto, así que no empuja la altura de la fila. Sin esto, en una tarjeta de título corto el reverso no cabría. */ min-height: 340px; } .service__inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 0.7s var(--ease); } .service.is-flipped .service__inner { transform: rotateY(180deg); } .service__face { position: relative; display: flex; flex-direction: column; height: 100%; /* El relleno inferior extra reserva el rincón donde vive el icono de voltear, para que ningún texto se le meta debajo. */ padding: 1.85rem 1.85rem 3.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); overflow: hidden; /* Sin esto se vería el reverso espejado a través del frente. */ backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .service__face--back { position: absolute; inset: 0; transform: rotateY(180deg); background: linear-gradient(160deg, var(--brand-soft) 0%, var(--surface) 60%); /* Válvula de escape: si en una pantalla muy angosta el texto no cupiera, se desplaza en vez de desbordarse fuera de la tarjeta. */ overflow-y: auto; } .service__face::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-600)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .service:hover .service__face { box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } .service:hover .service__face::before { transform: scaleX(1); } .service__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1.25rem; background: var(--brand-soft); color: var(--brand-700); border-radius: var(--r-md); font-size: 1.5rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .service:hover .service__icon { background: var(--brand); color: #04282a; } .service h3 { margin-bottom: 0.6rem; text-wrap: balance; } .service p { color: var(--muted); font-size: 0.98rem; line-height: 1.7; } /* ---- Reverso ---- */ .service__face--back h4 { margin-bottom: 0.3rem; color: var(--brand-700); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .service__face--back h4 + p { margin-bottom: 1.15rem; } .service__face--back p { font-size: 0.95rem; line-height: 1.6; color: var(--text); } .service__face--back ul { display: grid; gap: 0.45rem; margin-top: 0.55rem; } .service__face--back li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: 0.93rem; line-height: 1.45; } .service__face--back li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0.05em; color: var(--brand); font-size: 0.9rem; } /* ---- Botón que voltea ---- */ /* Cubre la tarjeta completa para que sirva presionarla en cualquier punto, y al ser un