/* ============================================ KARLA.CSS Scope: karla.html — perfil ejecutivo de una sola vista. Pagina standalone para eventos (se llega por QR). No usa header/footer del sitio: el objetivo es que en 15 segundos se entienda quien es, que hace y como contactarla. Depende de: variables.css ============================================ */ .profile-page { min-height: 100svh; background: var(--color-darker); color: var(--color-text-inverse); display: flex; justify-content: center; padding: var(--space-xl) var(--space-md) var(--space-lg); position: relative; /* Sin overflow:hidden. Puesto en se propaga al viewport y bloquea el scroll de toda la pagina en movil. El backdrop ya esta acotado por su propio inset, no necesita que lo recorten aca. */ overflow-x: clip; /* "safe center" y no "center" a secas: cuando la tarjeta es mas alta que el viewport, un center normal desborda hacia ARRIBA y dejaba la foto y el nombre fuera de alcance del scroll. Con safe, en ese caso alinea al inicio. Los navegadores viejos ignoran la segunda linea y se quedan con la primera. */ align-items: center; align-items: safe center; } /* Textura de fondo: se difumina hacia abajo para no competir con el contenido */ .profile-page__backdrop { position: absolute; inset: 0 0 auto 0; height: 46vh; min-height: 280px; background-position: center top; background-size: cover; opacity: 0.34; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 48%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 48%, transparent 100%); pointer-events: none; } /* Vuelta al sitio, arriba a la derecha. Es el monograma de marca y no una casita: en una pagina de correduria de seguros el icono de casa se lee "seguro de hogar", no "inicio". Va en blanco y no en rose-gold porque el acento de marca ya carga significado en esta pagina (tagline, tarjeta destacada, boton primario); en blanco al 55% se lee como navegacion y no compite. */ .profile-page__home { position: absolute; top: var(--space-sm); /* A la izquierda, igual que el resto del sitio: `.header__inner` es un flex con space-between y `.header__logo` es su primer hijo, asi que el logo vive en la esquina superior izquierda en todas las demas paginas. */ left: var(--space-sm); z-index: 2; /* 44x44 de area tactil aunque el monograma dibuje 30px */ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); opacity: 0.55; transition: opacity var(--transition-fast), background var(--transition-fast); } .profile-page__home img { width: 30px; height: 30px; display: block; } .profile-page__home:hover, .profile-page__home:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.07); } .profile-page__home:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .profile { width: 100%; max-width: 440px; position: relative; z-index: 1; } /* ---------- Identidad ---------- */ .profile__identity { text-align: center; } .profile__avatar { width: clamp(92px, 26vw, 116px); height: clamp(92px, 26vw, 116px); border-radius: var(--radius-full); object-fit: cover; object-position: 50% 22%; display: block; margin: 0 auto var(--space-md); border: 2px solid var(--color-primary-20); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), var(--shadow-lg); } .profile__name { font-family: var(--font-family); font-weight: var(--font-weight-extrabold); font-size: clamp(1.75rem, 7.4vw, 2.125rem); line-height: var(--line-height-tight); letter-spacing: -0.02em; color: var(--color-white); } .profile__disciplines { margin-top: var(--space-sm); font-family: var(--font-family); font-weight: var(--font-weight-bold); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); } .profile__roles { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--font-family); font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-gray-400); } .profile__roles strong { color: var(--color-white); font-weight: var(--font-weight-semibold); } /* ---------- Bio (acento serif de marca) ---------- */ .profile__bio { margin-top: var(--space-md); font-family: var(--font-serif); font-size: clamp(1.0625rem, 4.4vw, 1.1875rem); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); text-align: center; color: var(--color-cream-dark); } /* ---------- Declaracion destacada ---------- Lleva a kios.com.mx/agenda (sesion gratuita de diagnostico) y no a agendar-consultoria de esta misma landing: el CTA dice "conoce como lo logramos", y el "como" es KIOS. Mandarlo al formulario de consultoria de seguros seria prometer una explicacion y entregar otra cosa. */ .profile__statement { display: block; text-decoration: none; color: inherit; margin-top: var(--space-lg); padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg); background: var(--color-dark); border: 1px solid rgba(255, 255, 255, 0.07); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .profile__statement:hover, .profile__statement:focus-visible { transform: translateY(-4px); background: var(--color-dark-surface); border-color: rgba(255, 255, 255, 0.12); border-left-color: var(--color-primary-light); box-shadow: var(--shadow-lg); } .profile__statement-label { display: block; font-family: var(--font-family); font-weight: var(--font-weight-bold); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); } .profile__statement-text { display: block; margin-top: var(--space-sm); font-family: var(--font-serif); font-size: clamp(1.125rem, 4.8vw, 1.3125rem); line-height: var(--line-height-snug); color: var(--color-white); } .profile__statement-cta { display: inline-block; margin-top: var(--space-sm); font-family: var(--font-family); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); letter-spacing: 0.04em; color: var(--color-primary); transition: color var(--transition-fast); } .profile__statement:hover .profile__statement-cta, .profile__statement:focus-visible .profile__statement-cta { color: var(--color-primary-light); } /* ---------- Enlaces ---------- */ .profile__links { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); } .profile__link { display: flex; align-items: center; gap: var(--space-md); min-height: 58px; padding: var(--space-sm) var(--space-md); text-decoration: none; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); background: var(--color-dark); color: var(--color-white); transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .profile__link:hover, .profile__link:focus-visible { transform: translateY(-4px); background: var(--color-dark-surface); border-color: var(--color-primary-20); box-shadow: var(--shadow-lg); } .profile__link-icon { width: 20px; height: 20px; flex: none; fill: currentColor; opacity: 0.85; } .profile__link-text { flex: 1; min-width: 0; } .profile__link-title { display: block; font-family: var(--font-family); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); letter-spacing: -0.005em; } .profile__link-sub { display: block; margin-top: 1px; font-family: var(--font-family); font-size: var(--font-size-xs); line-height: var(--line-height-snug); color: var(--color-gray-400); } .profile__link-arrow { flex: none; font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-gray-500); transition: transform var(--transition-fast), color var(--transition-fast); } .profile__link:hover .profile__link-arrow, .profile__link:focus-visible .profile__link-arrow { transform: translateX(3px); color: var(--color-primary); } /* Accion principal en rose-gold de marca */ .profile__link--primary { background: var(--color-primary); border-color: transparent; color: var(--color-dark); } /* 0.82 y no 0.72: a 0.72 el subtitulo queda en 3.7:1 sobre el rose-gold y no pasa WCAG AA. A 0.82 da 4.8:1. */ .profile__link--primary .profile__link-sub { color: rgba(26, 26, 26, 0.82); } .profile__link--primary .profile__link-arrow { color: rgba(26, 26, 26, 0.6); } .profile__link--primary:hover, .profile__link--primary:focus-visible { background: var(--color-primary-light); border-color: transparent; } .profile__link--primary:hover .profile__link-arrow, .profile__link--primary:focus-visible .profile__link-arrow { color: var(--color-dark); } /* ---------- Pie ---------- */ .profile__footer { margin-top: var(--space-lg); text-align: center; font-family: var(--font-family); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; /* gray-400 y no gray-500: sobre #0d0d0d el 500 da 3.9:1 y no pasa AA. */ color: var(--color-gray-400); line-height: var(--line-height-relaxed); } .profile__footer a { color: var(--color-gray-400); text-decoration: none; border-bottom: 1px solid rgba(188, 149, 123, 0.35); transition: color var(--transition-fast), border-color var(--transition-fast); } .profile__footer a:hover, .profile__footer a:focus-visible { color: var(--color-primary); border-color: var(--color-primary); } /* ---------- Foco visible ---------- */ .profile a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* ---------- Entrada ---------- */ @media (prefers-reduced-motion: no-preference) { .profile > * { animation: profile-rise var(--transition-slow) both; } .profile__identity { animation-delay: 40ms; } .profile__bio { animation-delay: 100ms; } .profile__statement { animation-delay: 160ms; } .profile__links { animation-delay: 220ms; } .profile__footer { animation-delay: 300ms; } @keyframes profile-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } } /* ---------- Pantallas cortas ---------- Referencia real: Safari en iPhone deja ~664px de viewport util, no 844, porque las barras del navegador se comen el resto. El objetivo no es que entre TODO sin scroll (ningun diseno lo logra ahi), sino que sobre la linea de flote queden identidad, bio, la declaracion y los dos primeros contactos. El resto se descubre con un scroll corto. */ @media (max-height: 900px) { .profile-page { padding: var(--space-lg) var(--space-md) var(--space-md); } .profile__avatar { margin-bottom: 6px; } .profile__roles { margin-top: var(--space-sm); padding-top: var(--space-sm); } .profile__bio { margin-top: var(--space-sm); } .profile__statement { margin-top: 12px; padding: 7px var(--space-md) 9px var(--space-lg); } .profile__links { margin-top: 12px; gap: 6px; } .profile__link { min-height: 52px; padding: 6px var(--space-md); } .profile__footer { margin-top: var(--space-md); } }