/* ========================================================================== iisivideo.fi — hoja de estilos principal DIRECCIÓN El vídeo es el color del sitio. Todo lo demás es neutro: negro casi puro donde vive la imagen, hueso cálido donde vive el texto, y el ámbar de la marca reservado para lo que hay que pulsar. Nada compite con el trabajo. TIPOGRAFÍA Schibsted Grotesk (titulares) — grotesca nórdica, diseñada para un grupo de medios noruego. Fuerte a tamaño grande, con carácter sin ser moda. Public Sans (texto) — neutra, altura de x generosa, pensada para leerse. Las dos con Latin Extended completo: ä, ö y å salen bien. TONOS DE SECCIÓN Cada sección declara --fg / --surface / --line, así que tarjetas, citas y formularios funcionan igual en claro y en oscuro sin duplicar reglas. ========================================================================== */ :root { /* neutros — la escala completa del sitio */ --ink: #14171C; /* negro cálido: fondos oscuros y texto */ --ink-soft: #1C2027; /* superficies sobre el negro */ --ink-soft2: #252A33; --paper: #FFFFFF; --bone: #F4F3EF; /* hueso: la alternancia clara */ --line-light: #E3E1DA; --mut: #5C6270; --dim: #8A8F9C; /* acento — el único color de marca */ --amber: #FCA311; --amber-ink: #8A5600; /* versión legible sobre claro */ --whatsapp: #25D366; --font-head: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --shadow-sm: 0 1px 2px rgba(20, 23, 28, .04), 0 4px 14px rgba(20, 23, 28, .05); --shadow-md: 0 6px 18px rgba(20, 23, 28, .07), 0 22px 48px rgba(20, 23, 28, .10); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .3); --radius: 4px; /* esquinas casi rectas: más galería, menos app */ --radius-lg: 6px; --wrap: 1240px; --header-h: 78px; --ease: cubic-bezier(.22, .61, .36, 1); color-scheme: light; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* El desplazamiento lateral en móvil se corta aquí, en , no solo en : con la regla puesta únicamente en body, Safari y algunos Android siguen dejando arrastrar la página de lado. `clip` es mejor que `hidden` porque no crea un contenedor de scroll; `hidden` queda de reserva para navegadores que no lo entiendan. */ html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg, iframe { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; cursor: pointer; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -.035em; margin: 0 0 .5em; color: var(--fg, var(--ink)); text-wrap: balance; } h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); line-height: .98; } h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; } h3 { font-size: 1.14rem; font-weight: 700; line-height: 1.3; letter-spacing: -.018em; } p { margin: 0 0 1.1em; } strong, b { font-weight: 700; } :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--amber); color: var(--ink); } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .center { text-align: center; } .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; } /* ========================================================================== TONOS DE SECCIÓN ========================================================================== */ .section { --fg: var(--ink); --fg-mut: var(--mut); --fg-dim: var(--dim); --surface: var(--paper); --line: var(--line-light); --accent: var(--amber-ink); --card-sh: var(--shadow-sm); --card-sh-hover: var(--shadow-md); padding: clamp(4.5rem, 9vw, 8.5rem) 0; position: relative; background: var(--paper); color: var(--fg); } .section--tint { background: var(--bone); --surface: var(--paper); } .section--dark { --fg: #fff; --fg-mut: #A8AEBA; --fg-dim: #767C89; --surface: var(--ink-soft); --line: rgba(255, 255, 255, .11); --accent: var(--amber); --card-sh: none; --card-sh-hover: 0 20px 50px rgba(0, 0, 0, .55); background: var(--ink); color: var(--fg); } .section--dark + .section--dark { padding-top: 0; } section[id] { scroll-margin-top: calc(var(--header-h) + 8px); } /* ---------- encabezado de sección: alineado a la izquierda, en dos columnas -- */ .sec-head { margin-bottom: clamp(2.75rem, 5vw, 4.25rem); } .sec-head h2 { margin: 0; } .sec-head__lede { color: var(--fg-mut); font-size: 1.06rem; margin: 0; max-width: 46ch; line-height: 1.65; } @media (min-width: 900px) { .sec-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: end; } } .lede { font-size: 1.06rem; color: var(--fg-mut); max-width: 58ch; line-height: 1.7; } /* ---------- eyebrow: etiqueta pequeña con número de sección ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem; } .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; } /* ---------- botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: -.01em; text-decoration: none; padding: 1.05rem 1.85rem; border-radius: 2px; border: 1.5px solid transparent; transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s; } .btn svg { width: 18px; height: 18px; flex: none; } .btn--primary { background: var(--amber); color: var(--ink); } .btn--primary:hover { background: #FFB43A; transform: translateY(-2px); } .btn--solid { background: var(--ink); color: #fff; } .btn--solid:hover { background: #000; transform: translateY(-2px); } .btn--ghost { border-color: rgba(255, 255, 255, .32); color: #fff; } .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); transform: translateY(-2px); } .btn--outline { border-color: var(--line); color: var(--fg); } .btn--outline:hover { border-color: var(--fg); transform: translateY(-2px); } .btn--wa { background: var(--whatsapp); color: #06240f; } .btn--wa:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } .center .btn-row { justify-content: center; } /* ---------- header ---------- */ .header { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--header-h); display: flex; align-items: center; background: transparent; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); } .header.is-solid, .header.is-inner { background: rgba(20, 23, 28, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .header__inner { display: flex; align-items: center; gap: 1.4rem; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; } .brand img { height: 38px; width: auto; max-width: 190px; object-fit: contain; } .brand__text { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.04em; color: #fff; } .brand__text span { color: var(--amber); } .nav { display: flex; align-items: center; gap: .1rem; } .nav a { font-family: var(--font-head); font-weight: 600; font-size: .87rem; letter-spacing: -.01em; text-decoration: none; color: rgba(255, 255, 255, .78); padding: .5rem .8rem; border-radius: 2px; transition: color .2s; } .nav a:hover { color: #fff; } .nav a[aria-current="page"], .nav a.is-active { color: var(--amber); } @media (min-width: 1001px) { .nav > .btn { display: none; } } .langs { display: flex; align-items: center; gap: .35rem; padding-left: .9rem; margin-left: .4rem; border-left: 1px solid rgba(255, 255, 255, .2); } .langs a { font-family: var(--font-head); font-weight: 700; font-size: .78rem; text-decoration: none; color: rgba(255, 255, 255, .5); padding: .3rem .1rem; transition: color .2s; } .langs a[aria-current="true"] { color: #fff; } .langs a:not([aria-current="true"]):hover { color: rgba(255, 255, 255, .85); } .header__cta { display: inline-flex; } .header .btn { padding: .68rem 1.15rem; font-size: .82rem; } .burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .burger span { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform .3s var(--ease), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 1000px) { .header__cta { display: none; } .burger { display: flex; } .nav { position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.25rem 1.75rem; background: rgba(20, 23, 28, .985); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(-125%); transition: transform .38s var(--ease); } .nav.is-open { transform: translateY(0); } .nav a { padding: .95rem .4rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .09); } .nav .btn { margin-top: 1.1rem; border-bottom: 0; } } /* ---------- hero ---------- */ .hero { --fg: #fff; --accent: var(--amber); position: relative; display: grid; align-items: end; min-height: min(100vh, 940px); padding: calc(var(--header-h) + 4rem) 0 clamp(3rem, 7vw, 5.5rem); background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; } .hero--compact { min-height: 0; align-items: center; padding: calc(var(--header-h) + 5rem) 0 4.5rem; } .hero__media { position: absolute; inset: 0; z-index: -3; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, rgba(20, 23, 28, .95) 0%, rgba(20, 23, 28, .55) 42%, rgba(20, 23, 28, .18) 75%, rgba(20, 23, 28, .45) 100%), linear-gradient(100deg, rgba(20, 23, 28, .55) 0%, rgba(20, 23, 28, .12) 55%, transparent 100%); } .hero h1 { color: #fff; max-width: 16ch; margin-bottom: .35em; } .hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: #D2D5DB; margin: 0 0 2rem; max-width: 46ch; line-height: 1.6; } .hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0 0 1.6rem; padding: 0; list-style: none; font-family: var(--font-head); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .hero__meta li { display: flex; align-items: center; gap: .5rem; } .hero__meta li::before { content: ""; width: 5px; height: 5px; background: var(--amber); border-radius: 50%; flex: none; } .hero--compact h1 { max-width: 20ch; } .hero--compact .hero__sub { margin-bottom: 0; } /* En móvil el hero no ocupa toda la pantalla. Con min-height:100vh y el contenido alineado abajo quedaba una franja negra enorme entre el menú y el titular: en pantallas altas eran cientos de píxeles de nada. Aquí el bloque mide lo que mide su contenido y empieza justo debajo del menú. El reel tampoco se carga en móvil, así que no hay vídeo que enseñar ahí. */ @media (max-width: 760px) { :root { --header-h: 64px; } .hero { min-height: 0; align-items: start; padding: calc(var(--header-h) + 1.75rem) 0 2.75rem; } .hero--compact { padding: calc(var(--header-h) + 1.75rem) 0 2.5rem; } .hero__sub { margin-bottom: 1.6rem; } .hero__meta { margin-bottom: 1.2rem; } } .hero__sound { position: absolute; right: clamp(1.25rem, 4vw, 3rem); top: calc(var(--header-h) + 2rem); z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(20, 23, 28, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-head); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; transition: border-color .2s, background-color .2s; } .hero__sound:hover { border-color: var(--amber); color: var(--amber); } .hero__sound svg { width: 15px; height: 15px; } .hero__sound[hidden] { display: none; } /* ---------- tarjetas de servicio ---------- */ .grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } /* Columnas fijas, no auto-fit: seis servicios llenan dos filas exactas y la invitación ocupa la tercera entera. Con auto-fit quedaba un hueco vacío. */ .grid--3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } .grid--2 { display: grid; gap: 1.5rem; background: none; border: 0; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } /* rejilla sin huecos, estilo tabla: más sobrio que tarjetas flotantes */ .card { position: relative; background: var(--surface); padding: 2.5rem 2rem 2.75rem; transition: background-color .3s var(--ease); } .card:hover { background: var(--bone); } .section--dark .card:hover { background: var(--ink-soft2); } .card__n { font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .1em; color: var(--fg-dim); display: block; margin-bottom: 1.6rem; } .card__icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); margin-bottom: 1.1rem; } .card__icon svg { width: 27px; height: 27px; } .card h3 { margin-bottom: .55rem; } .card p { margin: 0; color: var(--fg-mut); font-size: .97rem; line-height: 1.62; } /* tarjeta invitación: el "¿otra cosa en mente?" */ .card--invite { background: var(--ink); color: #fff; grid-column: 1 / -1; display: grid; gap: .4rem 3rem; align-items: center; } @media (min-width: 780px) { .card--invite { grid-template-columns: auto 1fr auto; padding-block: 2.1rem; } .card--invite .card__n { margin-bottom: 0; } .card--invite h3 { margin: 0; white-space: nowrap; } .card--invite p { grid-column: 2; } .card--invite a { margin-top: 0; white-space: nowrap; } } @media (min-width: 780px) { .card--invite { grid-template-columns: auto minmax(0, 1fr) auto; } .card--invite .card__n { grid-row: 1; } } .card--invite h3 { color: #fff; } .card--invite p { color: #A8AEBA; } .card--invite a { color: var(--amber); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; } .card--invite a:hover { text-decoration: underline; } .card--invite:hover { background: #0E1115; } /* ---------- bloque de especialidad (terveydenhuolto) ---------- */ .spot { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .spot { grid-template-columns: 1fr 1fr; } } .spot__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.4rem; } .spot__list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .spot__list svg { width: 20px; height: 20px; color: var(--accent); margin-top: 4px; } .spot__list b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1rem; margin-bottom: .15rem; letter-spacing: -.015em; } .spot__list span { color: var(--fg-mut); font-size: .96rem; line-height: 1.6; } /* ---------- razones ---------- */ .reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .reasons li { position: relative; display: grid; gap: .35rem 2.5rem; padding: 1.9rem 0 1.9rem 1.4rem; border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease); } /* Barra ámbar que aparece a la izquierda de la fila activa. */ .reasons li::before { content: ""; position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 2px; background: var(--amber); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); } @media (min-width: 800px) { .reasons li { grid-template-columns: 1fr 1.6fr; align-items: baseline; } } .reasons b { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; transition: color .35s var(--ease); } .reasons span { color: var(--fg-mut); font-size: 1rem; line-height: 1.65; } /* is-here lo pone main.js cuando la fila cruza la franja central de la pantalla; el :hover hace lo mismo para quien usa ratón. */ .reasons li.is-here::before, .reasons li:hover::before { transform: scaleY(1); } .reasons li.is-here > b, .reasons li:hover > b { color: var(--amber-ink); } .reasons li:hover { padding-left: 1.8rem; } @media (prefers-reduced-motion: reduce) { .reasons li, .reasons li::before, .reasons b { transition: none; } .reasons li:hover { padding-left: 1.4rem; } } /* ---------- nota destacada ---------- */ .note { display: flex; gap: 1rem; align-items: flex-start; border-left: 2px solid var(--amber); padding: .3rem 0 .3rem 1.4rem; margin-top: 2.5rem; } .note svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 4px; } .note p { margin: 0; font-size: .97rem; color: var(--fg-mut); } /* ---------- banda CTA ---------- */ .cta-band { --fg: #fff; --fg-mut: #A8AEBA; --accent: var(--amber); background: var(--ink); color: #fff; } .cta-band h2 { color: #fff; max-width: 18ch; } .cta-band .split { align-items: center; } /* ---------- logos de clientes ---------- Rejilla estática, no carrusel: se ven todos a la vez y a tamaño legible. Sin mix-blend-mode ni opacidad: los logos llegan con fondos muy distintos (transparente, blanco, blanco sobre negro, escudos oscuros) y cualquier filtro global destroza la mitad. Sobre blanco cada uno se ve como es. */ .logos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; } /* Cada logo en su propia celda con borde al pasar el ratón. Los 15 archivos llegan con fondo blanco opaco, así que sobre el blanco de la sección la tarjeta solo se nota por el borde: ningún logo queda con recuadro visible. */ .logos__grid a, .logos__grid span.logo-cell { display: grid; place-items: center; padding: 1.35rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius); transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .logos__grid img { width: 100%; max-width: 190px; height: 76px; object-fit: contain; transition: transform .3s var(--ease); } .logos__grid .logo-cell:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 23, 28, .07); } .logos__grid .logo-cell:hover img { transform: scale(1.07); } @media (max-width: 900px) { .logos__grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; } .logos__grid .logo-cell { padding: .9rem .5rem; } .logos__grid img { height: 58px; max-width: 130px; } } @media (max-width: 420px) { .logos__grid img { height: 50px; } } @media (prefers-reduced-motion: reduce) { .logos__grid .logo-cell:hover, .logos__grid .logo-cell:hover img { transform: none; } } @media (prefers-reduced-motion: reduce) { .logos__grid img:hover { transform: none; } } /* ---------- testimonios ---------- */ .quote { border-top: 2px solid var(--ink); padding-top: 1.8rem; } .quote p { font-size: 1.02rem; color: var(--fg); line-height: 1.65; } .quote footer { display: flex; flex-direction: column; gap: .05rem; margin-top: 1.4rem; } .quote cite { font-style: normal; font-family: var(--font-head); font-weight: 700; color: var(--fg); letter-spacing: -.015em; } .quote small { color: var(--fg-dim); font-size: .85rem; } /* ---------- portafolio: rejilla ---------- */ .pf-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .pf-card { border: 0; padding: 0; background: transparent; text-align: left; display: flex; flex-direction: column; gap: .95rem; } .pf-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-soft); border-radius: var(--radius); } .pf-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; } .pf-card:hover .pf-card__thumb img { transform: scale(1.045); } .pf-card__play { position: absolute; left: 1rem; bottom: 1rem; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .3); transition: background-color .3s var(--ease), color .3s, transform .3s var(--ease); z-index: 3; } .pf-card:hover .pf-card__play { background: var(--amber); color: var(--ink); border-color: var(--amber); transform: scale(1.06); } .pf-card__play svg { width: 18px; height: 18px; margin-left: 2px; } .pf-card h3 { font-size: 1.05rem; margin: 0; color: var(--fg); } .pf-card time { font-size: .8rem; color: var(--fg-dim); letter-spacing: .02em; } .pf-card__thumb--v { display: grid; place-items: center; } .pf-card__thumb--v img { position: absolute; inset: 0; margin: auto; z-index: 1; height: 100%; width: auto; aspect-ratio: 9 / 16; object-fit: cover; } .pf-card__blur { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(28px) brightness(.4); transform: scale(1.08); } /* ---------- portafolio: tira vertical ---------- */ .shorts { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1.5rem; margin-inline: calc(50% - 50vw); padding-inline: max(1.25rem, calc(50vw - var(--wrap) / 2)); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; /* La tira se desborda a propósito de lado a lado con 50vw. Esto evita que el gesto de arrastrarla se contagie a la página o dispare el "atrás" del navegador: el deslizamiento se queda dentro de la tira. */ overscroll-behavior-x: contain; } .shorts::-webkit-scrollbar { height: 6px; } .shorts::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); } .shorts::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); } .short { flex: 0 0 auto; width: clamp(184px, 21vw, 232px); scroll-snap-align: start; border: 0; padding: 0; background: transparent; text-align: left; display: flex; flex-direction: column; gap: .8rem; } .short__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink-soft); border-radius: var(--radius); } .short__frame img { width: 100%; height: 100%; object-fit: cover; } .short__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; } .short__badge { position: absolute; top: .6rem; left: .6rem; z-index: 3; font-family: var(--font-head); font-weight: 700; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; padding: .25rem .55rem; background: rgba(20, 23, 28, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .short__play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 3; transition: opacity .3s, transform .3s var(--ease), background-color .3s; } .short:hover .short__play { background: var(--amber); color: var(--ink); border-color: var(--amber); } .short__play svg { width: 17px; height: 17px; margin-left: 2px; } .short.is-playing .short__play { opacity: 0; transform: scale(.7); pointer-events: none; } .short h3 { font-size: .9rem; margin: 0; color: var(--fg); line-height: 1.4; font-weight: 600; } .shorts-hint { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.4rem; font-family: var(--font-head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); } .shorts-hint svg { width: 15px; height: 15px; } /* ---------- portafolio: estados ---------- */ .pf-skeleton { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .pf-skeleton div { aspect-ratio: 16 / 9; border-radius: var(--radius); background: linear-gradient(100deg, #1C2027 30%, #262B34 50%, #1C2027 70%); background-size: 220% 100%; animation: shimmer 1.5s linear infinite; } @keyframes shimmer { to { background-position: -220% 0; } } .pf-fallback { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); } .pf-fallback iframe { width: 100%; height: 100%; border: 0; } /* ---------- lightbox ---------- */ .lb { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 1.25rem; background: rgba(10, 12, 15, .96); backdrop-filter: blur(10px); } .lb.is-open { display: grid; } .lb__box { width: min(100%, 1100px); } .lb__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .lb__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .lb__box.is-vertical .lb__frame { aspect-ratio: 9 / 16; width: min(100%, 430px); margin-inline: auto; } .lb__title { color: #fff; font-family: var(--font-head); font-weight: 700; margin: 1.2rem .25rem 0; text-align: center; letter-spacing: -.02em; } .lb__close { position: absolute; top: 1.2rem; right: 1.2rem; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; display: grid; place-items: center; transition: background-color .2s, transform .2s; } .lb__close:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); } .lb__close svg { width: 19px; height: 19px; } /* ---------- bloque partido / retrato ---------- */ .split { display: grid; gap: clamp(2.25rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1.4fr; } .split--flip > :first-child { order: 2; } } .portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; max-width: 320px; margin-inline: auto; background: var(--bone); border-radius: var(--radius); } .portrait img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 900px) { .split--flip .portrait { margin-inline: auto 0; } } /* ---------- bloque "Minusta" ---------- Columnas más ajustadas y foto a todo el ancho de su columna: antes el retrato iba capado a 320 px dentro de una columna de ~480, y entre el final del texto y la foto quedaba un vacío de más de 600 px. */ .bio-figure { margin: 0; } .bio-figure figcaption { margin-top: .9rem; font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mut); } .split--bio .portrait { aspect-ratio: 1 / 1; max-width: 440px; } /* Ligero acercamiento al pasar el ratón. El recuadro no crece: lo que se mueve es la foto dentro de él, gracias al overflow:hidden de .portrait. */ .split--bio .portrait img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); } .split--bio .bio-figure:hover .portrait img { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .split--bio .bio-figure:hover .portrait img { transform: none; } } @media (min-width: 900px) { .split--bio { grid-template-columns: 1fr .82fr; gap: clamp(2.5rem, 4vw, 3.75rem); } .split--bio > :last-child > .lede, .split--bio > :last-child > p { max-width: 36rem; } .split--bio .bio-figure figcaption { text-align: right; } } .facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; padding: 0; list-style: none; } .facts li { font-family: var(--font-head); font-weight: 600; font-size: .78rem; padding: .4rem .85rem; border: 1px solid var(--line); color: var(--fg-mut); border-radius: 2px; } /* ---------- contacto ---------- */ .contact-grid { display: grid; gap: 2.75rem; grid-template-columns: 1fr; } @media (min-width: 940px) { .contact-grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; } } .contact-list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .contact-list a { display: flex; align-items: center; gap: 1rem; text-decoration: none; padding: 1.15rem .25rem; border-bottom: 1px solid var(--line); transition: padding-left .25s var(--ease), color .2s; } .contact-list a:hover { padding-left: .75rem; color: var(--amber-ink); } .contact-list .ico { display: grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--accent); } .contact-list .ico svg { width: 19px; height: 19px; } .contact-list b { display: block; font-family: var(--font-head); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-dim); font-weight: 700; } .contact-list span > span { color: var(--fg); font-weight: 600; } .form { display: grid; gap: 1.05rem; background: var(--surface); border: 1px solid var(--line); padding: clamp(1.6rem, 3vw, 2.5rem); border-radius: var(--radius); } .form h3 { margin-bottom: .3rem; } .field { display: grid; gap: .4rem; } .field label { font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--fg); } .field input, .field textarea { font: inherit; font-size: .97rem; color: var(--ink); padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); transition: border-color .2s, box-shadow .2s; } .field input::placeholder, .field textarea::placeholder { color: var(--dim); } .field input:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 23, 28, .07); } .field textarea { resize: vertical; min-height: 150px; } .form__note { font-size: .82rem; color: var(--fg-dim); margin: 0; } .form__status { margin: 0; font-size: .93rem; font-weight: 600; } .form__status.is-ok { color: #12784A; } .form__status.is-err { color: #B3261E; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } /* ---------- footer ---------- */ .footer { background: var(--ink); color: #A8AEBA; padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; } .footer__cta { padding-bottom: 3.25rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .footer__cta h2 { color: #fff; margin-bottom: 1.7rem; max-width: 18ch; } .footer__grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 3rem 0 2rem; } .footer h4 { font-family: var(--font-head); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 1.1rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .footer a { color: #A8AEBA; text-decoration: none; transition: color .2s; } .footer a:hover { color: #fff; } .footer a.btn--primary, .footer a.btn--primary:hover { color: var(--ink); } .footer a.btn--wa, .footer a.btn--wa:hover { color: #06240f; } .footer a.btn--ghost, .footer a.btn--ghost:hover { color: #fff; } .footer__brand img { height: 42px; width: auto; max-width: 210px; object-fit: contain; margin-bottom: 1.1rem; } .footer__brand p { font-size: .93rem; max-width: 32ch; } .footer__social { display: flex; gap: .9rem; margin-top: 1.2rem; } .footer__social a { display: grid; place-items: center; width: 22px; height: 22px; color: #767C89; transition: color .2s; } .footer__social a:hover { color: var(--amber); } .footer__social svg { width: 20px; height: 20px; } .footer__bar { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; color: #767C89; } /* ---------- WhatsApp flotante ---------- */ .wa-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 80; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--whatsapp); color: #06240f; box-shadow: 0 8px 26px rgba(37, 211, 102, .34); transition: transform .25s var(--ease); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 27px; height: 27px; } /* ---------- reveal: discreto, una sola vez ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }