/* ═══════════════════════════════════════════════════════════════════════════════════ pablotejedazafra.com — estilos del tema 1. Fuentes 2. Colores 3. Base 4. Telón 5. Cabecera y barra 6. Hero 7. Escena 8. Acreditación 9. Secciones 10. Pie 11. Movimiento reducido ═══════════════════════════════════════════════════════════════════════════════════ */ /* ── 1. Fuentes (libres, servidas desde el propio sitio: nada de Google Fonts) ────── */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-sans-v17-latin-regular.woff2) format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dm-sans-v17-latin-500.woff2) format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/dm-sans-v17-latin-700.woff2) format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/outfit-v15-latin-800.woff2) format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/source-serif-4-400-italic-latin.woff2) format('woff2'); } /* ── 2. Colores ──────────────────────────────────────────────────────────────────── */ :root { --amarillo: #fec100; --tinta: #0b0b0c; /* texto sobre amarillo, en los dos modos */ --fondo: #ffffff; --fondo-2: #f5f4f1; --texto: #0b0b0c; --texto-2: #57585e; --linea: rgba(11, 11, 12, 0.09); --oscura-fondo: #0b0b0c; --oscura-texto: #f4f4f2; --letra: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --titular: 'Outfit', 'DM Sans', system-ui, sans-serif; --guion: 'Source Serif 4', Georgia, serif; /* La barra de cristal (los valores de la barra de Gremium) */ --barra-velo: rgba(255, 255, 255, 0.78); --barra-hilo: rgba(15, 23, 42, 0.09); --barra-canto: inset 0 1px 0.5px rgba(255,255,255,0.9), inset 0 -0.5px 0.5px rgba(255,255,255,0.45), inset 0.5px 0 0.5px rgba(255,255,255,0.4), inset -0.5px 0 0.5px rgba(255,255,255,0.4); --barra-flota: 0 10px 30px rgba(15,23,42,0.14), 0 2px 6px rgba(15,23,42,0.06), 0 1px 3px rgba(29,29,31,0.06), 0 8px 20px rgba(29,29,31,0.1); --barra-brillo: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.14) 100%); --pastilla: rgba(118, 118, 128, 0.13); --lente-velo: rgba(255, 255, 255, 0.5); --lente-relleno: rgba(255, 255, 255, 0.96); --lente-bisel: inset 0 0 0 1px rgba(15,23,42,0.24), inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -1.5px 1px rgba(255,255,255,0.7), inset 1.5px 0 1px rgba(255,255,255,0.55), inset -1.5px 0 1px rgba(255,255,255,0.55), inset 0 0 7px rgba(255,255,255,0.6), 0 3px 8px rgba(15,23,42,0.14); --lente-reflejo: rgba(255, 255, 255, 0.7); --rima-alta: 0.95; --rima-baja: 0.5; /* La escena del hero */ --escena-opacidad: 0.5; --poster-escena: url(../3d/escena-claro.webp); color-scheme: light; } :root[data-tema="oscuro"] { --fondo: #0a0a0b; --fondo-2: #121214; --texto: #f4f4f2; --texto-2: #a4a4aa; --linea: rgba(255, 255, 255, 0.1); --oscura-fondo: #161618; --oscura-texto: #f4f4f2; --barra-velo: rgba(28, 28, 30, 0.78); --barra-hilo: rgba(255, 255, 255, 0.14); --barra-canto: inset 0 1px 0.5px rgba(255,255,255,0.28), inset 0 -0.5px 0.5px rgba(255,255,255,0.12), inset 0.5px 0 0.5px rgba(255,255,255,0.12), inset -0.5px 0 0.5px rgba(255,255,255,0.12); --barra-flota: 0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4), 0 10px 26px rgba(0,0,0,0.5); --barra-brillo: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.04) 100%); --pastilla: rgba(255, 255, 255, 0.12); --lente-velo: rgba(40, 42, 46, 0.55); --lente-relleno: rgba(44, 46, 50, 0.96); --lente-bisel: inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 1.5px 1px rgba(255,255,255,0.5), inset 0 -1.5px 1px rgba(255,255,255,0.18), inset 1.5px 0 1px rgba(255,255,255,0.14), inset -1.5px 0 1px rgba(255,255,255,0.14), inset 0 0 7px rgba(255,255,255,0.12), 0 3px 10px rgba(0,0,0,0.4); --lente-reflejo: rgba(255, 255, 255, 0.14); --rima-alta: 0.55; --rima-baja: 0.22; --escena-opacidad: 0.55; --poster-escena: url(../3d/escena-oscuro.webp); color-scheme: dark; } /* ── 3. Base ─────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } html.con-telon { overflow: hidden; } body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.6 var(--letra); -webkit-font-smoothing: antialiased; transition: background-color 300ms ease, color 300ms ease; } img, svg, video, canvas { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3 { margin: 0; font-weight: 800; } p { margin: 0; } :focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--amarillo); color: var(--tinta); } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .saltar { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--amarillo); color: var(--tinta); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; } .saltar:focus { top: 16px; } .contenedor { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } .boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--texto); color: var(--fondo); font: 700 15px/1 var(--letra); text-decoration: none; transition: background-color 200ms ease, color 200ms ease, transform 200ms ease; } .boton:hover { background: var(--amarillo); color: var(--tinta); transform: translateY(-1px); } .boton-sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linea); } .boton-sec:hover { background: var(--fondo-2); color: var(--texto); } /* ── 4. Telón: PABLO TEJEDA, rayos y se parte por la mitad ───────────────────────── */ /* Todo es CSS: si el JavaScript tarda o falla, el telón se abre igual a su hora. */ .telon { position: fixed; inset: 0; z-index: 100; pointer-events: none; animation: telon-fin 0s linear 2.5s forwards; } html.con-telon .telon { pointer-events: auto; } .telon-mitad { position: absolute; left: 0; right: 0; height: 50.2%; overflow: hidden; background: var(--fondo); animation: 850ms cubic-bezier(0.76, 0, 0.24, 1) 1.6s forwards; } .telon-arriba { top: 0; animation-name: telon-sube; } .telon-abajo { bottom: 0; animation-name: telon-baja; } .telon-nombre { position: absolute; left: 0; right: 0; transform: translateY(-50%); text-align: center; white-space: nowrap; font: 800 clamp(46px, 11.5vw, 176px)/1 var(--titular); letter-spacing: -0.035em; text-transform: uppercase; } .telon-arriba .telon-nombre { top: 100%; } .telon-abajo .telon-nombre { top: 0; } .telon-nombre span { display: inline-block; color: transparent; background: linear-gradient(100deg, var(--texto) 0 42%, var(--amarillo) 47%, #fff 50%, var(--amarillo) 53%, var(--texto) 58% 100%); background-size: 320% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; animation: telon-parpadeo 520ms steps(1, end) both, telon-barrido 1.05s cubic-bezier(0.45, 0, 0.25, 1) 0.32s both; } .telon-nombre span + span { animation-delay: 0.12s, 0.42s; } /* Debajo del nombre, en la mitad de abajo, la sección a la que se entra (ptz_seccion_actual): «PORTFOLIO». */ .telon-seccion { position: absolute; left: 0; right: 0; top: calc(clamp(46px, 11.5vw, 176px) * 0.5 + clamp(14px, 2vw, 26px)); text-align: center; font: 700 clamp(13px, 1.6vw, 20px)/1 var(--letra); letter-spacing: 0.42em; text-transform: uppercase; color: var(--texto); } .telon-seccion span { display: inline-block; padding-left: 0.42em; animation: telon-seccion 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; } .telon-seccion span::before { content: ""; display: block; width: 28px; height: 3px; margin: 0 auto 0.85em; border-radius: 2px; background: var(--amarillo); transform: translateX(-0.21em); } /* la línea, encima de la palabra */ @keyframes telon-seccion { from { opacity: 0; transform: translateY(10px); letter-spacing: 0.7em; } } /* Rayos de luz que salen de detrás del nombre. Van dentro de cada mitad, antes del nombre: así quedan por encima del fondo y por debajo de las letras, y se parten con el telón. */ .telon-rayos { position: absolute; left: 50%; width: 160vmax; height: 160vmax; margin-left: -80vmax; background: repeating-conic-gradient(from 0deg, rgba(254, 193, 0, 0.95) 0deg 1.6deg, transparent 1.6deg 7.5deg), repeating-conic-gradient(from 3deg, rgba(255, 236, 160, 0.6) 0deg 0.6deg, transparent 0.6deg 11deg); -webkit-mask: radial-gradient(closest-side, transparent 6%, #000 13%, rgba(0,0,0,0.5) 38%, transparent 66%); mask: radial-gradient(closest-side, transparent 6%, #000 13%, rgba(0,0,0,0.5) 38%, transparent 66%); mix-blend-mode: normal; opacity: 0; animation: telon-rayos 1.5s cubic-bezier(0.3, 0, 0.3, 1) 0.15s both; } .telon-arriba .telon-rayos { top: calc(100% - 80vmax); } .telon-abajo .telon-rayos { top: -80vmax; } /* Destello anamórfico que cruza la pantalla, como el de un objetivo de cine (también por detrás del nombre) */ .telon-destello { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(254, 193, 0, 0.9) 35%, #fff 50%, rgba(254, 193, 0, 0.9) 65%, transparent); box-shadow: 0 0 18px 4px rgba(254, 193, 0, 0.55), 0 0 60px 10px rgba(254, 193, 0, 0.25); opacity: 0; transform: translateX(-70%) scaleX(0.6); animation: telon-destello 1.05s cubic-bezier(0.45, 0, 0.25, 1) 0.32s both; } .telon-arriba .telon-destello { top: calc(100% - 1.5px); } .telon-abajo .telon-destello { top: -1.5px; } /* La costura por donde se parte */ .telon-costura { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--amarillo); box-shadow: 0 0 14px rgba(254, 193, 0, 0.8); transform: scaleX(0); opacity: 0; animation: telon-costura 700ms cubic-bezier(0.6, 0, 0.2, 1) 1.28s both; } @keyframes telon-parpadeo { 0% { opacity: 0; } 18% { opacity: 1; } 26% { opacity: 0.15; } 38% { opacity: 1; } 46% { opacity: 0.4; } 58%, 100% { opacity: 1; } } @keyframes telon-barrido { from { background-position: 100% 0; } to { background-position: 0 0; } } @keyframes telon-rayos { 0% { opacity: 0; transform: rotate(-10deg) scale(0.7); } 30% { opacity: 0.9; } 70% { opacity: 0.45; } 100% { opacity: 0; transform: rotate(12deg) scale(1.12); } } @keyframes telon-destello { 0% { opacity: 0; transform: translateX(-70%) scaleX(0.6); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(70%) scaleX(1); } } @keyframes telon-costura { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } @keyframes telon-sube { to { transform: translateY(-100%); } } @keyframes telon-baja { to { transform: translateY(100%); } } @keyframes telon-fin { to { visibility: hidden; } } /* ── 5. Cabecera: la barra de cristal de Gremium, arriba y con palabras ──────────── */ .cabecera { position: fixed; z-index: 50; left: 0; right: 0; top: max(14px, env(safe-area-inset-top)); display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; } /* La entrada y el encogido van en los hijos y no en la cabecera: un `transform` en ella rompería el `position: fixed` del selector de tema en el móvil. */ .cabecera > * { pointer-events: auto; transition: transform 240ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 240ms cubic-bezier(0.645, 0.045, 0.355, 1); /* `backwards` y no `both`: al terminar la entrada no debe bloquear el `transform` de .compacta */ animation: entra-arriba 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 2s backwards; } .cabecera.compacta > * { transform: scale(0.92); opacity: 0.62; } @keyframes entra-arriba { from { transform: translateY(-24px); opacity: 0; } } .barra { position: relative; flex: 1 1 auto; max-width: 540px; height: 54px; border-radius: 48px; display: flex; align-items: stretch; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .barra-fondo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; background: var(--barra-velo); border: 1px solid var(--barra-hilo); box-shadow: var(--barra-canto), var(--barra-flota); -webkit-backdrop-filter: blur(14px) saturate(210%) brightness(1.05); backdrop-filter: blur(14px) saturate(210%) brightness(1.05); will-change: transform; } .barra-fondo::before { content: ''; position: absolute; inset: 0; background: var(--barra-brillo); } .rima { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .pastilla { position: absolute; top: 3px; left: 0; height: 48px; border-radius: 999px; background: var(--pastilla); pointer-events: none; will-change: transform, opacity; } .celda { flex: 1; position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; color: var(--texto); text-decoration: none; outline: none; -webkit-user-drag: none; } .celda:focus-visible .rotulo, .celda:focus-visible .icono-casa { outline: 2px solid var(--amarillo); outline-offset: 5px; border-radius: 6px; } .rotulo { font: 500 14px/1 var(--letra); white-space: nowrap; pointer-events: none; letter-spacing: -0.005em; } .celda.activa .rotulo, .copia .rotulo { font-weight: 700; } .icono-casa { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .celda.activa .icono-casa, .copia .icono-casa { stroke-width: 2.2; } .lente { position: absolute; left: 0; top: -6px; height: 66px; overflow: hidden; pointer-events: none; border-radius: 33px; opacity: 0; background: var(--lente-velo); box-shadow: var(--lente-bisel); -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.06); backdrop-filter: blur(16px) saturate(180%) brightness(1.06); will-change: transform, opacity; } .lente-dentro { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; } .copia { position: absolute; left: 0; top: 6px; height: 54px; display: flex; align-items: stretch; pointer-events: none; will-change: transform; transform-origin: 50% 50%; } .lente-bisel { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--lente-bisel); } .lente-reflejo { position: absolute; top: 1px; left: 12%; right: 12%; height: 42%; border-radius: 33px; background: linear-gradient(180deg, var(--lente-reflejo), rgba(255,255,255,0)); } .lente-iris { position: absolute; inset: 0; border-radius: inherit; padding: 2px; opacity: 0.32; filter: blur(0.6px); background: conic-gradient(from 200deg, rgba(255,80,160,0.9), rgba(255,210,90,0.8), rgba(90,230,255,0.9), rgba(160,120,255,0.8), rgba(255,80,160,0.9), rgba(255,255,255,0) 60%, rgba(90,230,255,0.9)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .oculto-svg { position: absolute; width: 0; height: 0; pointer-events: none; } /* El selector claro/oscuro: un botón redondo del mismo cristal */ .tema { position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--texto); background: var(--barra-velo); border: 1px solid var(--barra-hilo); box-shadow: var(--barra-canto), var(--barra-flota); -webkit-backdrop-filter: blur(14px) saturate(210%) brightness(1.05); backdrop-filter: blur(14px) saturate(210%) brightness(1.05); transition: transform 200ms ease; } .tema:hover { transform: rotate(-12deg); } .tema:active { transform: scale(0.94); } .tema svg { grid-area: 1 / 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms ease; } .tema-sol, :root[data-tema="oscuro"] .tema-luna { opacity: 0; transform: rotate(-90deg) scale(0.5); } :root[data-tema="oscuro"] .tema-sol { opacity: 1; transform: none; } /* ── 6. Hero ─────────────────────────────────────────────────────────────────────── */ .hero { --alto-hero: max(660px, 100svh); --arranque: 1.85s; /* cuando el telón ya se está abriendo */ position: relative; min-height: var(--alto-hero); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; } /* La escena: el render fijo (sale al instante) y, encima, el 3D en tiempo real cuando llega. */ .escena { position: absolute; z-index: -3; inset: 0; opacity: var(--escena-opacidad); transition: opacity 400ms ease; } .escena-poster { position: absolute; inset: 0; background: var(--poster-escena) center 45% / cover no-repeat var(--fondo); } .escena-3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms ease; } .escena-3d.lista { opacity: 1; } /* El velo: la escena queda detrás, en segundo plano, y el texto se lee bien. */ .escena-velo { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, var(--fondo) 0%, color-mix(in srgb, var(--fondo) 72%, transparent) 34%, color-mix(in srgb, var(--fondo) 10%, transparent) 62%, transparent 80%), linear-gradient(0deg, var(--fondo) 0%, transparent 24%); } .cinta { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .hero-dentro { position: relative; flex: 1; display: flex; align-items: center; padding-top: 110px; padding-bottom: 96px; } .hero-texto { position: relative; z-index: 2; max-width: 660px; } .hero-saludo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 17px/1 var(--letra); color: var(--texto-2); animation: aparece 800ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--arranque) both; } .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 0 rgba(254, 193, 0, 0.6); animation: late 2.4s ease-out infinite; } @keyframes late { 0% { box-shadow: 0 0 0 0 rgba(254, 193, 0, 0.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(254, 193, 0, 0); } } .hero-titulo { font-weight: 800; } .hero-nombre { display: block; font: 800 clamp(56px, 9vw, 144px)/0.86 var(--titular); letter-spacing: -0.045em; text-transform: none; } .hero-nombre .linea { display: block; white-space: nowrap; } .letra { display: inline-block; } .hueco { display: inline-block; width: 0.25em; } /* Las letras suben desde abajo y se enfocan (como el «product» de Sanjay Menon). */ .hero-nombre .letra { animation: sube-letra 1s cubic-bezier(0.16, 0.8, 0.24, 1) calc(var(--arranque) + var(--i) * 48ms) both; } @keyframes sube-letra { from { opacity: 0; transform: translateY(0.55em) scale(0.96); filter: blur(14px); } 55% { filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } } .hero-rol { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1em 0.45em; margin-top: 0.12em; font-weight: 400; } /* El tamaño de letra de este bloque marca el del subrayado; las letras van algo más pequeñas (.letra) para caber holgadas dentro, y el relleno lateral compensa lo que encogen. */ .hero-rol-guion { position: relative; display: inline-block; padding: 0 0.34em 0 0.28em; font: italic 400 clamp(40px, 5.6vw, 88px)/1.05 var(--guion); letter-spacing: -0.02em; color: var(--tinta); } /* El subrayado amarillo de marcador: el amarillo sobre blanco no se lee como texto. */ .hero-rol-guion::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0.2em; bottom: 0.08em; background: var(--amarillo); border-radius: 0.08em 0.22em 0.12em 0.3em; transform-origin: left center; transform: skewX(-8deg); animation: marcador 700ms cubic-bezier(0.7, 0, 0.2, 1) calc(var(--arranque) + 0.4s) both; } @keyframes marcador { from { transform: skewX(-8deg) scaleX(0); } to { transform: skewX(-8deg) scaleX(1); } } .hero-rol-guion .letra { font-size: 0.84em; position: relative; top: -0.07em; animation: sube-letra 900ms cubic-bezier(0.16, 0.8, 0.24, 1) calc(var(--arranque) + 0.55s + var(--i) * 42ms) both; } .hero-rol-resto { font: 500 clamp(20px, 2.1vw, 30px)/1.2 var(--letra); color: var(--texto-2); letter-spacing: -0.01em; animation: aparece 800ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--arranque) + 0.95s) both; } .hero-bajada { max-width: 470px; margin-top: 26px; color: var(--texto-2); font-size: 18px; animation: aparece 800ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--arranque) + 1.1s) both; } .hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; animation: aparece 800ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--arranque) + 1.2s) both; } @keyframes aparece { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .hero-pie { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 var(--letra); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); animation: aparece 800ms ease calc(var(--arranque) + 1.4s) both; } .hero-pie strong { color: var(--texto); font-weight: 700; } .hero-pie-scroll { display: flex; align-items: center; gap: 10px; } .hero-pie-scroll::after { content: ''; width: 36px; height: 1.5px; background: currentColor; transform-origin: left; animation: desliza 2s ease-in-out infinite; } @keyframes desliza { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } /* ── 7. Modo captura (solo en localhost): deja la escena sola para hacer el render fijo ── */ html.captura .telon, html.captura .cabecera, html.captura .saltar, html.captura .escena-velo, html.captura .cinta, html.captura .hero-dentro, html.captura .acreditacion, html.captura .hero-pie, html.captura main > :not(.hero), html.captura .pie { display: none !important; } html.captura .escena { opacity: 1; } html.captura .escena-poster { display: none; } html.captura .escena-3d { transition: none; } /* ── 8. La acreditación que cuelga de la cinta ───────────────────────────────────── */ .acreditacion { --ac-w: 240px; --ac-h: 330px; position: absolute; z-index: 3; left: 0; top: 0; width: var(--ac-w); height: var(--ac-h); transform-origin: 50% 14px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform; } .js .acreditacion { opacity: 0; } .js .acreditacion.lista { opacity: 1; } html:not(.js) .acreditacion { left: auto; right: 8%; top: 120px; transform: rotate(-4deg); } .acreditacion.agarrada { cursor: grabbing; } .acreditacion-giro { width: 100%; height: 100%; perspective: 900px; } .acreditacion-cara { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; border-radius: 16px; padding: 46px 18px 0; background: radial-gradient(120% 80% at 30% 0%, #2c2c30 0%, #18181b 55%, #121214 100%); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px -18px rgba(0,0,0,0.45), 0 12px 24px -10px rgba(0,0,0,0.35); transform-style: preserve-3d; } :root[data-tema="oscuro"] .acreditacion-cara { box-shadow: 0 0 0 1px rgba(255,255,255,0.09) inset, 0 30px 60px -18px rgba(0,0,0,0.8); } .acreditacion-ranura { position: absolute; top: 12px; left: 50%; width: 40px; height: 8px; margin-left: -20px; border-radius: 6px; background: var(--fondo); box-shadow: inset 0 1.5px 2px rgba(0,0,0,0.45); } .acreditacion-ondas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* El logo (corona de laurel), casi transparente arriba a la derecha, como el sello de una acreditación */ .acreditacion-logo { position: absolute; top: 10px; right: 10px; width: 30%; height: auto; opacity: 0.14; pointer-events: none; } .acreditacion-ondas path { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 1; } .acreditacion-foto { position: relative; width: 122px; height: 122px; border-radius: 50%; padding: 4px; background: conic-gradient(from 210deg, var(--amarillo), #fff3c4, var(--amarillo)); box-shadow: 0 8px 22px rgba(0,0,0,0.45); } .acreditacion-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; } .acreditacion-nombre { position: relative; margin-top: 18px; text-align: center; font: 800 30px/0.98 var(--titular); letter-spacing: -0.02em; } .acreditacion-rol { position: relative; margin-top: 10px; font: 700 10px/1 var(--letra); letter-spacing: 0.2em; text-transform: uppercase; color: var(--amarillo); } .acreditacion-pie { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px dashed rgba(255,255,255,0.2); font: 500 13px/1 var(--letra); color: rgba(255,255,255,0.85); } .acreditacion-pie svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; } .acreditacion-brillo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 48%, transparent 62%); background-size: 260% 100%; background-position: var(--brillo-x, 100%) 0; opacity: var(--brillo, 0.3); mix-blend-mode: screen; } /* ── Franja de marcas bajo el hero: carrusel infinito que se puede arrastrar (lo mueve main.js) ── */ .marcas { padding: 72px 0 44px; border-bottom: 1px solid var(--linea); overflow: hidden; } .marcas-titulo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; font: 700 12px/1 var(--letra); letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-2); } .marcas-titulo::before, .marcas-titulo::after { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--amarillo); } /* Los bordes se funden con el fondo: las marcas entran y salen sin corte seco. */ /* El relleno vertical deja sitio al círculo cuando crece (pop y ratón encima): la máscara recorta todo lo que se sale de la caja, y sin él la bola se cortaba por arriba. */ .marcas-ventana { padding: 16px 0 10px; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marcas-pista { display: flex; width: max-content; will-change: transform; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .marcas-pista.arrastrando { cursor: grabbing; } .marcas-pista.arrastrando .marca-enlace { pointer-events: none; } .marcas-tira { display: flex; flex: 0 0 auto; list-style: none; margin: 0; padding: 0; } /* Todas las marcas miden lo mismo: la separación entre círculos es siempre igual. */ .marca { flex: 0 0 auto; width: 196px; padding: 0 8px; } .marca { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--texto); -webkit-user-drag: none; } .marca-foto { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 8px 22px -10px rgba(0, 0, 0, 0.35); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease; } .marca-foto img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* El nombre siempre reserva dos líneas: las descripciones y las @ quedan alineadas en todas las marcas. */ .marca-nombre { display: flex; align-items: center; justify-content: center; min-height: 2.4em; margin-top: 10px; max-width: 100%; font: 700 14.5px/1.2 var(--letra); letter-spacing: -0.005em; text-wrap: balance; } .marca-que { margin-top: 2px; font: 500 13px/1.2 var(--letra); color: var(--texto); opacity: 0.75; } .marca-cuenta { margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.2 var(--letra); color: var(--texto-2); } /* El «pop»: cada marca aparece al entrar la franja en pantalla, de izquierda a derecha. */ .js .marcas .marca { opacity: 0; transform: translateY(14px) scale(0.4); } .js .marcas.vista .marca { animation: marca-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 75ms) both; } @keyframes marca-pop { 0% { opacity: 0; transform: translateY(14px) scale(0.4); } 60% { opacity: 1; transform: translateY(-3px) scale(1.06); } 100% { opacity: 1; transform: none; } } /* ── Quién soy ──────────────────────────────────────────────────────────────────── */ .sobre-cabeza { position: sticky; top: 110px; } .datos.datos-columna { grid-template-columns: 1fr; margin-top: 36px; gap: 0; } .datos-columna li { padding: 16px 0; } .datos-columna a { color: inherit; text-decoration-color: var(--amarillo); text-underline-offset: 3px; } .texto .entradilla { font-size: 21px; line-height: 1.55; color: var(--texto); } .sobre-texto h3 { margin: 34px 0 10px; font: 800 22px/1.2 var(--titular); letter-spacing: -0.02em; color: var(--texto); } /* ── Contenido vertical y horizontal ───────────────────────────────────────────── */ .seccion-intro { max-width: 720px; margin-top: 18px; color: var(--texto-2); font-size: 18px; } .boton-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } .boton-play::after { content: ''; position: absolute; left: 26px; top: 21px; border-left: 17px solid var(--tinta); border-top: 11px solid transparent; border-bottom: 11px solid transparent; } .verticales { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .vertical-dentro { display: block; text-decoration: none; color: var(--texto); } .vertical-img { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #111; } .vertical-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } .vertical-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35)); pointer-events: none; } .destacado-video:hover .boton-play { transform: scale(1.1); } .vertical-pie { display: block; margin-top: 16px; } .vertical-titulo { margin-top: 8px; font: 800 22px/1.15 var(--titular); letter-spacing: -0.02em; } .vertical-enlace { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 15px; text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 4px; } .destacados { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .destacado-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; border-radius: 20px; overflow: hidden; background: #000; margin-bottom: 16px; } .destacado-previa { width: 100%; height: 100%; object-fit: cover; } .destacado-duracion { position: absolute; right: 14px; bottom: 14px; padding: 5px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 700 12px/1 var(--letra); } .destacado-titulo { margin-top: 8px; font: 800 24px/1.15 var(--titular); letter-spacing: -0.02em; } /* El primer destacado (el trabajo más grande) ocupa todo el ancho: vídeo a la izquierda y texto a la derecha. */ .destacados > .destacado:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 36px; align-content: center; } .destacados > .destacado:first-child .destacado-video { grid-row: 1 / span 4; align-self: center; } .destacados > .destacado:first-child .trabajo-tipo { align-self: end; margin-top: 0; } .destacados > .destacado:first-child .destacado-titulo { font-size: clamp(26px, 2.6vw, 34px); } @media (max-width: 900px) { .destacados > .destacado:first-child { display: block; } .destacados > .destacado:first-child .trabajo-tipo { margin-top: 16px; } } .destacado-texto { margin-top: 10px; color: var(--texto-2); } .otros-titulo { margin-top: 72px; font: 800 26px/1.15 var(--titular); letter-spacing: -0.02em; } .boton-centro { margin-top: 48px; text-align: center; } /* El reproductor (se abre al pulsar un vídeo) */ .visor { width: min(1100px, 92vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: #000; overflow: visible; } .visor.vertical { width: min(420px, 92vw); } .visor::backdrop { background: rgba(5, 5, 6, 0.86); backdrop-filter: blur(6px); } .visor-video { display: block; width: 100%; max-height: 92vh; border-radius: 18px; background: #000; } .visor-cerrar { position: absolute; top: -18px; right: -18px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--amarillo); color: var(--tinta); font: 400 28px/1 var(--letra); } /* ── 9. Resto de secciones de la portada ────────────────────────────────────────── */ .seccion { padding: clamp(80px, 11vw, 140px) 0; } .seccion-alt { background: var(--fondo-2); } .seccion-oscura { background: var(--oscura-fondo); color: var(--oscura-texto); --texto-2: #a4a4aa; --linea: rgba(255,255,255,0.12); } .seccion h2 { font: 800 clamp(34px, 4.4vw, 60px)/1.02 var(--titular); letter-spacing: -0.035em; } .antetitulo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 700 12px/1 var(--letra); letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-2); } .antetitulo::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--amarillo); } .rejilla-2 { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .texto p + p { margin-top: 18px; } .texto p { color: var(--texto-2); font-size: 19px; } .texto a { color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .datos { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .datos li { padding-top: 16px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; } .datos strong { font: 800 26px/1 var(--titular); letter-spacing: -0.02em; } .datos span { font-size: 14px; line-height: 1.4; color: var(--texto-2); } .servicios { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; } .servicio { padding: 28px 0 36px; border-top: 1px solid var(--linea); } .servicio h3 { font: 800 24px/1.15 var(--titular); letter-spacing: -0.02em; } .servicio p { margin-top: 10px; color: var(--texto-2); font-size: 16px; } .seccion-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 24px; } .enlace-flecha { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; } .enlace-flecha::after { content: '→'; transition: transform 200ms ease; } .enlace-flecha:hover::after { transform: translateX(4px); } .trabajos { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } .trabajo a { display: block; text-decoration: none; } .trabajo-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--fondo-2); } /* El filtro del portfolio esconde tarjetas con «hidden»; sin esto, el display de .trabajo lo anulaba. */ .trabajo[hidden], .portfolio-grupo[hidden] { display: none; } .trabajo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } .trabajo a:hover .trabajo-img img { transform: scale(1.05); } .trabajo-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--amarillo); transform: scale(0.6); opacity: 0; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease; } .trabajo-play::after { content: ''; position: absolute; left: 23px; top: 19px; border-left: 15px solid var(--tinta); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .trabajo a:hover .trabajo-play, .trabajo a:focus-visible .trabajo-play { transform: none; opacity: 1; } .trabajo-tipo { display: block; margin-top: 16px; font: 700 12px/1 var(--letra); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); } .trabajo-titulo { display: block; margin-top: 8px; font: 800 22px/1.15 var(--titular); letter-spacing: -0.02em; } .islas { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .islas li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linea); font-weight: 500; } .islas li:first-child { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); font-weight: 700; } .seccion-oscura .texto p { color: #c4c4ca; } .preguntas details { border-top: 1px solid var(--linea); } .preguntas details:last-child { border-bottom: 1px solid var(--linea); } .preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; } .preguntas summary::-webkit-details-marker { display: none; } .preguntas summary h3 { font: 700 20px/1.3 var(--letra); letter-spacing: -0.01em; } .preguntas summary::after { content: '+'; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 22px/1 var(--letra); background: var(--fondo-2); transition: transform 300ms ease, background-color 200ms ease; } .preguntas details[open] summary::after { transform: rotate(45deg); background: var(--amarillo); color: var(--tinta); } .preguntas details p { padding: 0 0 26px; color: var(--texto-2); max-width: 640px; } /* Proceso como captura de un editor de vídeo (estilo Premiere): menús, controles de efectos, monitor de programa (donde se lee cada paso), efectos, proyecto, línea de tiempo con un clip por paso y vúmetros. Es una ventana de programa: oscura en los dos temas. Con .fijo (main.js) se queda pegada mientras el scroll mueve el cabezal. */ .editor-ayuda { margin: 26px 0 0; font-size: 14px; color: var(--texto-2); } .editor-scroll { position: relative; margin-top: 18px; } .editor-scroll.fijo .editor { position: sticky; } .editor { --ed-panel: #232327; --ed-borde: rgba(255, 255, 255, 0.07); --ed-texto: #c9c9cf; --ed-tenue: #86868e; --ed-azul: #6fa8ff; border-radius: 14px; overflow: hidden; background: #111113; color: #f4f4f2; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); font: 500 11px/1.3 var(--letra); } .dt::before { content: attr(data-t); } .ed-menu { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 12px; background: #2a2a2e; color: var(--ed-texto); white-space: nowrap; overflow: hidden; } .ed-app { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border-radius: 4px; background: var(--amarillo); color: var(--tinta); font: 800 10px/1 var(--letra); } .ed-ruta { margin-left: auto; color: var(--ed-tenue); } .ed-cuerpo { display: grid; gap: 4px; padding: 4px; grid-template-columns: minmax(170px, 0.85fr) minmax(0, 2.3fr) minmax(150px, 0.7fr); grid-template-areas: 'ctl mon efe' 'pro sec efe'; } .ed-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 6px; background: var(--ed-panel); } .ed-controles { grid-area: ctl; } .editor-monitor { grid-area: mon; } .ed-efectos { grid-area: efe; } .ed-proyecto { grid-area: pro; } .ed-secuencia { grid-area: sec; } .ed-pestanas { display: flex; align-items: center; gap: 14px; margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--ed-borde); color: var(--ed-tenue); white-space: nowrap; overflow: hidden; } .ed-pestanas b { color: #e8e8ec; font-weight: 600; } .ed-pestanas .editor-tc { margin-left: auto; } .ed-origen { margin: 0; padding: 6px 10px; background: #1e1e22; color: var(--ed-azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed-props, .ed-arbol, .ed-bins { list-style: none; margin: 0; padding: 6px 0; } .ed-props li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 10px; color: var(--ed-texto); white-space: nowrap; } .ed-props .ed-nivel-1 { padding-left: 24px; color: var(--ed-tenue); } .ed-valor { color: var(--ed-azul); font-variant-numeric: tabular-nums; } .ed-buscar { height: 20px; margin: 8px 10px 2px; border-radius: 4px; background: #18181b; } .ed-arbol li { padding: 3px 10px; color: var(--ed-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed-arbol .ed-nivel-1 { padding-left: 20px; } .ed-arbol .ed-nivel-2 { padding-left: 34px; color: var(--ed-tenue); } .ed-arbol .elegido { background: #3a3a41; color: #fff; } /* Monitor de programa: la «imagen» es el paso que hay bajo el cabezal */ .editor-pantalla { display: grid; align-items: center; margin: 8px 8px 0; height: clamp(200px, calc(100vh - 480px), 340px); overflow: hidden; container-type: inline-size; background: radial-gradient(120% 90% at 30% 20%, #26262b, #0b0b0d 70%); } .editor-pasos { list-style: none; margin: 0; padding: 3cqw 6cqw; display: grid; } .editor-paso { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 280ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 280ms; } .editor-paso.activo { opacity: 1; visibility: visible; transform: none; } .editor-num { font: 700 clamp(10px, 1.7cqw, 13px)/1 var(--letra); letter-spacing: 0.18em; text-transform: uppercase; color: var(--amarillo); } .editor-paso h3 { margin-top: 1.6cqw; font: 800 clamp(22px, 5cqw, 44px)/1.05 var(--titular); letter-spacing: -0.03em; color: #fff; } .editor-paso p:last-child { margin-top: 2cqw; max-width: 62ch; font-size: clamp(14px, 2.3cqw, 18px); line-height: 1.55; color: #c4c4ca; } .ed-transporte { display: flex; align-items: center; gap: 12px; padding: 8px 10px 2px; color: var(--ed-tenue); white-space: nowrap; } .editor-tc { font: 600 12px/1 ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--amarillo); letter-spacing: 0.04em; } .ed-total { margin-left: auto; font: 600 12px/1 ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--ed-texto); } .ed-mini { position: relative; height: 7px; margin: 4px 10px 0; border-bottom: 1px solid #45454b; } .ed-mini-cabezal { position: absolute; top: -2px; left: 0; width: 10px; height: 9px; margin-left: -5px; background: var(--ed-azul); clip-path: polygon(0 0, 100% 0, 50% 100%); will-change: transform; } .ed-botones { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 7px 0 10px; } .ed-botones svg { width: 13px; height: 13px; fill: #a9a9b0; } .ed-botones .ed-play { width: 17px; height: 17px; fill: #fff; } /* Proyecto: un clip por paso; el del paso actual, marcado */ .ed-bins { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px 6px; padding: 8px; } .ed-bin { min-width: 0; } .ed-bin-img { display: block; aspect-ratio: 16 / 9; border-radius: 3px; background: linear-gradient(135deg, var(--color), #141416 85%); opacity: 0.55; transition: opacity 160ms ease; } .ed-bin.activo .ed-bin-img { opacity: 1; box-shadow: 0 0 0 2px var(--amarillo); } .ed-bin-nombre { display: block; margin-top: 4px; color: var(--ed-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed-bin.activo .ed-bin-nombre { color: #fff; } /* Línea de tiempo */ .ed-linea-caja { display: flex; flex: 1; min-height: 0; } .ed-herramientas { display: flex; flex-direction: column; gap: 7px; padding: 8px 6px; border-right: 1px solid var(--ed-borde); } .ed-herramientas svg { width: 15px; height: 15px; fill: none; stroke: #a9a9b0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ed-herramientas svg:first-child { fill: var(--ed-azul); stroke: none; } .editor-linea { position: relative; flex: 1; min-width: 0; padding: 0 12px 10px; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .editor-regla { height: 24px; margin-left: 44px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0 1px, transparent 1px 10%) 0 100% / 100% 12px no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 2%) 0 100% / 100% 6px no-repeat; } .editor-pista { display: flex; gap: 8px; height: 50px; margin-top: 4px; } .editor-pista-nombre { flex: 0 0 36px; display: grid; place-items: center; border-radius: 4px; background: #2e2e33; font: 700 11px/1 var(--letra); color: #9a9aa2; } .ed-v2 { height: 24px; } .ed-rotulos { position: relative; flex: 1; } .ed-rotulo { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; border-radius: 4px; background: #b48be0; color: #151517; font-weight: 700; font-size: 10px; white-space: nowrap; overflow: hidden; } .editor-clips { flex: 1; min-width: 0; display: flex; } .editor-clip { flex: 0 0 var(--ancho); min-width: 0; margin-right: 2px; padding: 0 10px; border: 0; border-radius: 4px; cursor: inherit; text-align: left; font: 700 12px/1.2 var(--letra); color: #121214; background: var(--color, #8e83d6); opacity: 0.72; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); transition: opacity 160ms ease, box-shadow 160ms ease; } .editor-clip:last-child { margin-right: 0; } .editor-clip span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .editor-clip:nth-child(1), .ed-bin:nth-child(1) { --color: #8e83d6; } .editor-clip:nth-child(2), .ed-bin:nth-child(2) { --color: #5b9bd5; } .editor-clip:nth-child(3), .ed-bin:nth-child(3) { --color: #4fb3a9; } .editor-clip:nth-child(4), .ed-bin:nth-child(4) { --color: #e1a95f; } .editor-clip:nth-child(5), .ed-bin:nth-child(5) { --color: #d97aa5; } .editor-clip:nth-child(6), .ed-bin:nth-child(6) { --color: #7bc96f; } .editor-clip.activo { opacity: 1; box-shadow: inset 0 0 0 2px var(--amarillo), 0 0 0 1px rgba(0, 0, 0, 0.4); } .editor-clip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .editor-audio { height: 30px; } .editor-onda { flex: 1; border-radius: 6px; background: #20302a url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='300' height='40'%3E%3Cg fill='%237fd49a'%3E%3Crect x='0' y='15.5' width='2' height='9' rx='1'/%3E%3Crect x='3' y='15.5' width='2' height='9' rx='1'/%3E%3Crect x='6' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='9' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='12' y='11.0' width='2' height='18' rx='1'/%3E%3Crect x='15' y='11.0' width='2' height='18' rx='1'/%3E%3Crect x='18' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='21' y='9.5' width='2' height='21' rx='1'/%3E%3Crect x='24' y='12.0' width='2' height='16' rx='1'/%3E%3Crect x='27' y='10.0' width='2' height='20' rx='1'/%3E%3Crect x='30' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='33' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='36' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='39' y='11.5' width='2' height='17' rx='1'/%3E%3Crect x='42' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='45' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='48' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='51' y='10.5' width='2' height='19' rx='1'/%3E%3Crect x='54' y='11.5' width='2' height='17' rx='1'/%3E%3Crect x='57' y='11.5' width='2' height='17' rx='1'/%3E%3Crect x='60' y='7.5' width='2' height='25' rx='1'/%3E%3Crect x='63' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='66' y='8.0' width='2' height='24' rx='1'/%3E%3Crect x='69' y='11.5' width='2' height='17' rx='1'/%3E%3Crect x='72' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='75' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='78' y='14.0' width='2' height='12' rx='1'/%3E%3Crect x='81' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='84' y='16.0' width='2' height='8' rx='1'/%3E%3Crect x='87' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='90' y='14.0' width='2' height='12' rx='1'/%3E%3Crect x='93' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='96' y='14.0' width='2' height='12' rx='1'/%3E%3Crect x='99' y='15.5' width='2' height='9' rx='1'/%3E%3Crect x='102' y='15.5' width='2' height='9' rx='1'/%3E%3Crect x='105' y='15.0' width='2' height='10' rx='1'/%3E%3Crect x='108' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='111' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='114' y='12.0' width='2' height='16' rx='1'/%3E%3Crect x='117' y='9.5' width='2' height='21' rx='1'/%3E%3Crect x='120' y='9.0' width='2' height='22' rx='1'/%3E%3Crect x='123' y='9.0' width='2' height='22' rx='1'/%3E%3Crect x='126' y='4.5' width='2' height='31' rx='1'/%3E%3Crect x='129' y='4.5' width='2' height='31' rx='1'/%3E%3Crect x='132' y='8.0' width='2' height='24' rx='1'/%3E%3Crect x='135' y='6.0' width='2' height='28' rx='1'/%3E%3Crect x='138' y='7.5' width='2' height='25' rx='1'/%3E%3Crect x='141' y='6.5' width='2' height='27' rx='1'/%3E%3Crect x='144' y='8.5' width='2' height='23' rx='1'/%3E%3Crect x='147' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='150' y='10.5' width='2' height='19' rx='1'/%3E%3Crect x='153' y='15.0' width='2' height='10' rx='1'/%3E%3Crect x='156' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='159' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='162' y='15.5' width='2' height='9' rx='1'/%3E%3Crect x='165' y='15.0' width='2' height='10' rx='1'/%3E%3Crect x='168' y='16.5' width='2' height='7' rx='1'/%3E%3Crect x='171' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='174' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='177' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='180' y='11.0' width='2' height='18' rx='1'/%3E%3Crect x='183' y='12.0' width='2' height='16' rx='1'/%3E%3Crect x='186' y='9.0' width='2' height='22' rx='1'/%3E%3Crect x='189' y='8.5' width='2' height='23' rx='1'/%3E%3Crect x='192' y='8.0' width='2' height='24' rx='1'/%3E%3Crect x='195' y='8.5' width='2' height='23' rx='1'/%3E%3Crect x='198' y='6.0' width='2' height='28' rx='1'/%3E%3Crect x='201' y='6.0' width='2' height='28' rx='1'/%3E%3Crect x='204' y='10.0' width='2' height='20' rx='1'/%3E%3Crect x='207' y='10.0' width='2' height='20' rx='1'/%3E%3Crect x='210' y='14.0' width='2' height='12' rx='1'/%3E%3Crect x='213' y='11.5' width='2' height='17' rx='1'/%3E%3Crect x='216' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='219' y='11.5' width='2' height='17' rx='1'/%3E%3Crect x='222' y='12.0' width='2' height='16' rx='1'/%3E%3Crect x='225' y='14.0' width='2' height='12' rx='1'/%3E%3Crect x='228' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='231' y='11.0' width='2' height='18' rx='1'/%3E%3Crect x='234' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='237' y='11.5' width='2' height='17' rx='1'/%3E%3Crect x='240' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='243' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='246' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='249' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='252' y='15.5' width='2' height='9' rx='1'/%3E%3Crect x='255' y='15.5' width='2' height='9' rx='1'/%3E%3Crect x='258' y='14.5' width='2' height='11' rx='1'/%3E%3Crect x='261' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='264' y='15.0' width='2' height='10' rx='1'/%3E%3Crect x='267' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='270' y='13.5' width='2' height='13' rx='1'/%3E%3Crect x='273' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='276' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='279' y='12.5' width='2' height='15' rx='1'/%3E%3Crect x='282' y='14.0' width='2' height='12' rx='1'/%3E%3Crect x='285' y='13.0' width='2' height='14' rx='1'/%3E%3Crect x='288' y='12.0' width='2' height='16' rx='1'/%3E%3Crect x='291' y='8.0' width='2' height='24' rx='1'/%3E%3Crect x='294' y='6.0' width='2' height='28' rx='1'/%3E%3Crect x='297' y='10.5' width='2' height='19' rx='1'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 50% / 300px 100%; opacity: 0.9; } .ed-a2 .editor-onda { background-color: #2b2540; background-position: 130px 50%; filter: hue-rotate(110deg); } .editor-cabezal { position: absolute; top: 0; bottom: 10px; left: 0; width: 2px; margin-left: -1px; background: var(--amarillo); pointer-events: none; will-change: transform; box-shadow: 0 0 10px rgba(254, 193, 0, 0.5); } .editor-cabezal::before { content: ''; position: absolute; top: 4px; left: -7px; width: 16px; height: 16px; background: var(--amarillo); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); } .ed-vumetros { display: flex; gap: 3px; padding: 10px 8px; border-left: 1px solid var(--ed-borde); } .ed-vumetros span { position: relative; width: 7px; border-radius: 2px; background: #18181b; overflow: hidden; } .ed-vumetros i { position: absolute; inset: 0; background: linear-gradient(to top, #39c46b 0 62%, #e8d23a 62% 84%, #e2503c 84%); clip-path: inset(calc(100% - var(--nivel, 18%)) 0 0 0); } .ed-vumetros span + span i { clip-path: inset(calc(100% - var(--nivel2, 14%)) 0 0 0); } @media (max-width: 1080px) { .ed-cuerpo { grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2.4fr); grid-template-areas: 'ctl mon' 'pro sec'; } .ed-efectos { display: none; } } @media (max-width: 760px) { .ed-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'mon' 'sec'; } .ed-controles, .ed-proyecto, .ed-vumetros, .ed-herramientas, .ed-menu > .dt:not(.ed-app):not(.ed-ruta), .ed-ajuste { display: none; } .editor-pantalla { height: auto; min-height: 250px; } .editor-pasos { padding: 22px 20px; } .editor-linea { padding: 0 8px 8px; } .editor-clip { padding: 0 6px; font-size: 11px; } .editor-pista-nombre { flex-basis: 26px; } .editor-regla { margin-left: 34px; } } /* Precio a consultar */ .precio-sello { margin-top: 32px; display: inline-flex; flex-direction: column; gap: 8px; padding: 22px 28px; border-radius: 24px; background: var(--amarillo); color: var(--tinta); font: 800 clamp(30px, 3.2vw, 42px)/1 var(--titular); letter-spacing: -0.03em; transform: rotate(-2deg); } .precio-sello span { font: 700 12px/1 var(--letra); letter-spacing: 0.18em; text-transform: uppercase; } .precio-sub { margin-top: 36px; font: 800 22px/1.2 var(--titular); letter-spacing: -0.02em; } .factores { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .factores li { padding: 16px 18px; border-radius: 16px; background: var(--fondo); display: flex; flex-direction: column; gap: 4px; } .factores strong { font-weight: 700; } .factores span { font-size: 15px; line-height: 1.45; color: var(--texto-2); } .precio-acciones { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; } .texto a.boton { color: var(--fondo); text-decoration: none; } .texto a.boton:hover { color: var(--tinta); } .texto a.boton-sec, .texto a.boton-sec:hover { color: var(--texto); } /* Contacto: el texto y el WhatsApp a un lado, el formulario al otro */ .cta { padding-top: 0; } .cta-dentro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 64px); align-items: start; background: var(--fondo-2); color: var(--texto); border: 1px solid var(--linea); border-radius: 32px; padding: clamp(32px, 6vw, 72px); } /* Sin fondo amarillo (era demasiado): el amarillo queda en la línea del antetítulo, los botones y el subrayado. */ .cta .antetitulo { color: var(--texto-2); } .cta-texto h2 { font-size: clamp(30px, 3.6vw, 48px); } .cta-texto h2::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 20px; border-radius: 3px; background: var(--amarillo); } .cta-texto > p { margin: 18px 0 28px; font-size: 18px; color: var(--texto-2); } .cta-texto > p.cta-datos { margin-top: -12px; font-size: 15px; line-height: 1.5; } .cta-directo { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .cta .boton { background: var(--amarillo); color: var(--tinta); } .cta .boton:hover { background: var(--texto); color: var(--fondo); } .cta-email { font-weight: 700; color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 4px; } .icono-wa { flex: none; } /* Formulario de contacto: Forminator con el diseño «Ninguno», así que todo el estilo es este (herramientas/crear_formulario.php) */ .formulario { position: relative; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.3); } .formulario .forminator-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0; } /* Con #formulario para ganar a la rejilla de Forminator (filas en flex con anchos y márgenes propios) */ #formulario .forminator-row { display: contents; } #formulario .forminator-col { grid-column: 1 / -1; min-width: 0; width: auto; max-width: none; margin: 0; padding: 0; flex: none; } #formulario .forminator-col-6 { grid-column: auto; } .formulario .forminator-field { display: flex; flex-direction: column; gap: 7px; } .formulario .forminator-label { font: 700 14px/1.2 var(--letra); } .formulario .forminator-required { color: var(--texto-2); font-weight: 400; } .formulario .forminator-description, .formulario .forminator-hidden { display: none; } .formulario :is(.forminator-input, .forminator-textarea, select) { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--linea); background-color: var(--fondo-2); color: var(--texto); font: 400 16px/1.4 var(--letra); transition: border-color 150ms ease, background-color 150ms ease; } .formulario select { appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a8a90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .formulario .forminator-textarea { min-height: 124px; resize: vertical; } .formulario :is(.forminator-input, .forminator-textarea, select):focus { outline: none; border-color: var(--amarillo); background-color: var(--fondo); } .formulario ::placeholder { color: var(--texto-2); opacity: 0.75; } .formulario .forminator-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; } .formulario .forminator-checkbox input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--amarillo); } .formulario .forminator-checkbox-box { display: none; } .formulario .forminator-checkbox a { text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .privacidad-capa { margin-top: -6px; font-size: 12.5px; line-height: 1.5; color: var(--texto-2); } .formulario .forminator-turnstile { min-height: 65px; } .formulario .forminator-row-last .forminator-field { flex-direction: row; } .formulario .forminator-button-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--amarillo); color: var(--tinta); font: 700 15px/1 var(--letra); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 200ms ease; } .formulario .forminator-button-submit:hover { background: var(--texto); color: var(--fondo); transform: translateY(-1px); } .formulario .forminator-button-submit:disabled { opacity: 0.6; cursor: progress; } /* Errores: cada uno bajo su campo; arriba, solo la frase (la lista repetiría lo mismo) */ .formulario .forminator-has_error :is(.forminator-input, .forminator-textarea) { border-color: #c8321f; } .formulario .forminator-error-message { font-size: 13.5px; line-height: 1.4; color: #c8321f; } .formulario .forminator-response-message { grid-column: 1 / -1; font-size: 15px; line-height: 1.45; } .formulario .forminator-response-message:empty, .formulario .forminator-response-message[aria-hidden="true"] { display: none; } .formulario .forminator-response-message.forminator-error { color: #c8321f; font-weight: 500; } .formulario .forminator-response-message ul { display: none; } .formulario .forminator-response-message.forminator-success { padding: 18px 20px; border-radius: 14px; background: var(--fondo-2); color: var(--texto); font-weight: 700; } :root[data-tema="oscuro"] .formulario :is(.forminator-error-message, .forminator-response-message.forminator-error) { color: #ff7a66; } :root[data-tema="oscuro"] .formulario .forminator-has_error :is(.forminator-input, .forminator-textarea) { border-color: #ff7a66; } /* Pide presupuesto: en la cabecera; en pantallas estrechas, fijo abajo (footer.php) */ .pedir { flex: 0 0 auto; height: 54px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--amarillo); color: var(--tinta); box-shadow: var(--barra-flota); font: 700 14px/1 var(--letra); text-decoration: none; white-space: nowrap; } .pedir:hover { background: var(--texto); color: var(--fondo); } .cabecera.compacta > .pedir { opacity: 1; } html.en-contacto .cabecera > .pedir { opacity: 0; transform: scale(0.9); pointer-events: none; } .cta-fija { display: none; } /* ── 10. Pie ─────────────────────────────────────────────────────────────────────── */ /* Pie: marca con logo, navegación, contacto y redes con su icono; debajo, copyright y legales */ .pie { padding: 72px 0 36px; border-top: 1px solid var(--linea); background: var(--fondo-2); font-size: 15px; color: var(--texto-2); } .pie-dentro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 48px; align-items: start; } .pie-logo { display: inline-block; width: 92px; } .pie-logo img { display: block; width: 100%; height: auto; } .pie-nombre { margin: 14px 0 8px; font: 800 24px/1 var(--titular); color: var(--texto); letter-spacing: -0.02em; } .pie-marca p:last-child { max-width: 34ch; line-height: 1.55; } .pie-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 700 11.5px/1 var(--letra); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto); } .pie-titulo::before { content: ''; width: 18px; height: 2px; background: var(--amarillo); } .pie-enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .pie-contacto { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .pie-contacto a { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; } .pie-contacto a:hover { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; } .pie-contacto svg { flex: none; color: var(--texto-2); } .pie-boton { margin-top: 20px; } .pie-sigueme > p:not(.pie-titulo) { max-width: 30ch; line-height: 1.55; } .pie-redes { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .pie-redes a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; } .pie-redes a:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); transform: translateY(-2px); } .pie-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--linea); font-size: 13px; } @media (max-width: 1000px) { .pie-dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .pie { padding-top: 56px; } .pie-dentro { grid-template-columns: minmax(0, 1fr); gap: 36px; } } .pie-enlaces a { text-decoration: none; } .pie-enlaces a:hover { color: var(--texto); } .pie-legales { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; } .pie-legales a { text-decoration: none; } .pie-legales a:hover, .boton-enlace:hover { color: var(--texto); } .boton-enlace { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } /* ── Páginas de texto (las legales) ── */ .pagina { padding: clamp(130px, 16vw, 180px) 0 clamp(72px, 10vw, 120px); } .pagina-dentro { max-width: 820px; } .pagina h1 { font: 800 clamp(40px, 6vw, 72px)/1 var(--titular); letter-spacing: -0.04em; } .pagina-texto { margin-top: 20px; } .pagina-texto > * + * { margin-top: 16px; } .pagina-texto h2 { margin-top: 48px; font: 800 clamp(24px, 2.6vw, 30px)/1.15 var(--titular); letter-spacing: -0.02em; } .pagina-texto p, .pagina-texto li { color: var(--texto-2); } .pagina-texto strong { color: var(--texto); } .pagina-texto ul { padding-left: 20px; } .pagina-texto li + li { margin-top: 6px; } .pagina-texto li::marker { color: var(--amarillo); } .pagina-texto a { color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .pagina-texto .entradilla { font-size: 19px; color: var(--texto); } .pagina-fecha { font-size: 14px; } .pagina-texto table { width: 100%; border-collapse: collapse; font-size: 15px; } .pagina-texto th, .pagina-texto td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; } .pagina-texto th { font-weight: 700; background: var(--fondo-2); } .pagina-texto td { color: var(--texto-2); } .pagina-texto code { font-size: 0.9em; padding: 2px 6px; border-radius: 6px; background: var(--fondo-2); color: var(--texto); } .pagina-texto ol { padding-left: 22px; } .pagina-texto ol li::marker { font-weight: 700; color: var(--texto); } .pagina .seccion-intro { margin-top: 20px; } /* ── Migas de pan ── */ .migas { margin-bottom: 26px; font-size: 14px; } .migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--texto-2); } .migas li + li::before { content: '/'; margin: 0 10px; opacity: 0.5; } .migas a { color: var(--texto-2); text-decoration: none; } .migas a:hover { color: var(--texto); text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; } .migas [aria-current] { color: var(--texto); font-weight: 500; } /* ── Tarjetas de proyecto (el texto va fuera del enlace de la imagen) ── */ /* El enlace va vacío y cubre la tarjeta: el texto queda fuera de él para que los extractores lo lean. */ .trabajo { position: relative; display: flex; flex-direction: column; } .trabajo-enlace { position: absolute; inset: 0; z-index: 1; border-radius: 16px; } .trabajo-enlace:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 6px; } .trabajo:hover .trabajo-img img { transform: scale(1.05); } .trabajo:hover .trabajo-play, .trabajo:focus-within .trabajo-play { transform: none; opacity: 1; } .trabajo:hover .trabajo-titulo { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: 4px; } .vertical { position: relative; } .vertical-dentro::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 20px; } .vertical:hover .vertical-img img { transform: scale(1.04); } .vertical:hover .boton-play { transform: scale(1.1); } .marca { position: relative; } .marca-enlace { position: absolute; inset: 0; border-radius: 14px; -webkit-user-drag: none; } .marca-enlace:focus-visible { outline-offset: 2px; } .marca:hover .marca-foto, .marca:focus-within .marca-foto { transform: scale(1.08); box-shadow: 0 0 0 3px var(--amarillo), 0 12px 26px -10px rgba(0, 0, 0, 0.4); } .trabajo-cliente { margin-top: 6px; font-size: 14px; color: var(--texto-2); } .trabajos-compactos { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; } .trabajos-compactos .trabajo-titulo { font-size: 17px; } /* ── Filtro del portfolio: buscador + categoría (main.js). Sin JavaScript no se muestra. ── */ .filtro { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } html:not(.js) .filtro { display: none; } .filtro-campo { position: relative; display: flex; align-items: center; min-height: 52px; border-radius: 999px; border: 1px solid var(--linea); background: var(--fondo-2); transition: border-color 150ms ease; } .filtro-campo:focus-within { border-color: var(--amarillo); } .filtro-buscar { flex: 1 1 320px; max-width: 520px; padding-left: 18px; } .filtro-buscar svg { flex: none; fill: none; stroke: var(--texto-2); stroke-width: 2; stroke-linecap: round; } .filtro-buscar input { flex: 1; min-width: 0; height: 50px; padding: 0 18px 0 10px; border: 0; background: transparent; color: var(--texto); font: 400 16px/1 var(--letra); outline: none; } .filtro-buscar input::placeholder { color: var(--texto-2); } .filtro-categoria { flex: 0 1 300px; } .filtro-categoria select { appearance: none; width: 100%; height: 50px; padding: 0 44px 0 20px; border: 0; border-radius: 999px; background: transparent url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5 6 6.5 11 1.5%27 fill=%27none%27 stroke=%27%238a8a90%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") no-repeat right 18px center; color: var(--texto); font: 500 15px/1 var(--letra); cursor: pointer; outline: none; } .filtro-categoria select option { background: var(--fondo); color: var(--texto); } .filtro-cuenta { margin-left: 4px; font-size: 14px; color: var(--texto-2); } .portfolio-grupo { margin-top: 72px; } .portfolio-grupo h2, .relacionados h2 { font: 800 clamp(26px, 3vw, 38px)/1.1 var(--titular); letter-spacing: -0.03em; } .relacionados { margin-top: 80px; } /* ── Un proyecto ── */ .proyecto-cabeza h1 { max-width: 980px; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.05; } .proyecto-videos, .proyecto-imagen { margin: 0; display: grid; gap: 20px; } .proyecto-principal > .pagina-texto { margin-top: 26px; } .proyecto-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; background: #000; } .proyecto-video.vertical { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; } .proyecto-videos.varios { grid-template-columns: 1fr; } .proyecto-imagen img { width: 100%; height: auto; border-radius: 20px; background: var(--fondo-2); } /* Capturas de las webs: la portada grande con el móvil al lado y debajo dos pantallas más, como ventanas */ .proyecto-capturas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; align-items: start; } .captura { grid-column: span 4; margin: 0; } .captura:first-child { grid-column: span 6; } .captura-movil { grid-column: 7 / span 2; grid-row: 1; } .captura img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo-2); box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.55); } .captura-movil img { border-radius: 18px; } .captura-texto { margin-top: 8px; font-size: 13px; color: var(--texto-2); } @media (max-width: 600px) { .proyecto-capturas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .captura, .captura:first-child { grid-column: span 2; } .captura-movil { grid-column: 1 / span 1; grid-row: auto; } } .proyecto-cuerpo { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; } .proyecto-cuerpo .pagina-texto { margin-top: 0; } .proyecto-cuerpo .pagina-texto p:first-child { font-size: 19px; color: var(--texto); } .ficha { padding: 24px; border-radius: 20px; background: var(--fondo-2); position: sticky; top: 96px; } .ficha-titulo { font: 700 12px/1 var(--letra); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); } .ficha ul { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; gap: 10px; font-size: 15px; color: var(--texto-2); } .ficha strong { color: var(--texto); } .ficha a { color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .ficha a.boton { color: var(--fondo); text-decoration: none; } .ficha a.boton:hover { color: var(--tinta); } /* Vídeo de YouTube con fachada: miniatura propia; el reproductor solo se carga al pulsar */ .yt-boton { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #000; cursor: pointer; } .yt-boton img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 300ms ease; } .yt-boton:hover img { transform: scale(1.03); opacity: 0.85; } .yt-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } .yt-play::after { content: ''; position: absolute; left: 30px; top: 24px; border-left: 22px solid var(--tinta); border-top: 14px solid transparent; border-bottom: 14px solid transparent; } .yt-boton:hover .yt-play { transform: scale(1.08); } .yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; background: #000; } .yt-aviso { margin-top: 8px; font-size: 13px; color: var(--texto-2); } .yt-aviso a { color: var(--texto-2); } /* ── Servicios (índice y páginas) ── */ .servicios-pagina { grid-template-columns: repeat(3, 1fr); } .servicios-pagina h2 { font: 800 24px/1.15 var(--titular); letter-spacing: -0.02em; } .servicio-mas { margin-top: 14px; } .preguntas-pagina { margin-top: 80px; } .preguntas-pagina > h2 { margin-bottom: 18px; font: 800 clamp(26px, 3vw, 38px)/1.1 var(--titular); letter-spacing: -0.03em; } /* ── Sobre mí ── */ .sobre-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: center; } .sobre-cabecera .entradilla { margin-top: 24px; font-size: 20px; max-width: 720px; } .sobre-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 10px var(--amarillo); } /* ── Pantallas estrechas ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .rejilla-2 { grid-template-columns: 1fr; } .servicios, .trabajos { grid-template-columns: repeat(2, 1fr); } .servicios-pagina, .trabajos-compactos { grid-template-columns: repeat(2, 1fr); } .proyecto-cuerpo, .sobre-cabecera { grid-template-columns: 1fr; } .ficha { position: static; } .sobre-foto { max-width: 220px; } .sobre-cabeza { position: static; } .destacados { grid-template-columns: 1fr; } .cta-dentro { grid-template-columns: 1fr; } .verticales { gap: 14px; } .hero-dentro { align-items: flex-end; padding-bottom: 84px; } .escena-velo { background: linear-gradient(0deg, var(--fondo) 0%, color-mix(in srgb, var(--fondo) 82%, transparent) 42%, color-mix(in srgb, var(--fondo) 20%, transparent) 70%, transparent 100%); } .acreditacion { --ac-w: 176px; --ac-h: 242px; } .acreditacion-cara { padding-top: 34px; border-radius: 13px; } .acreditacion-foto { width: 88px; height: 88px; padding: 3px; } .acreditacion-nombre { font-size: 22px; margin-top: 12px; } .acreditacion-rol { font-size: 8px; margin-top: 8px; } .acreditacion-pie { height: 38px; font-size: 11px; } .acreditacion-pie svg { width: 16px; height: 16px; } } @media (max-width: 760px) { .pedir { display: none; } .cta-fija { position: fixed; z-index: 45; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 250ms ease; } /* Aparece al dejar atrás el hero y se esconde cuando el formulario ya está a la vista (main.js). */ html.cta-visible .cta-fija, html:not(.js) .cta-fija { transform: none; opacity: 1; pointer-events: auto; } /* Con el verde de WhatsApp y el logo en blanco, como el icono de la aplicación. */ .cta-fija-wa { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25d366; box-shadow: var(--barra-flota); } .cta-fija-wa svg { width: 26px; height: 26px; } .cta-fija-pedir { flex: 1; height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--amarillo); color: var(--tinta); box-shadow: var(--barra-flota); font: 700 15px/1 var(--letra); text-decoration: none; } .pie { padding-bottom: 96px; } } @media (max-width: 600px) { body { font-size: 16px; } .contenedor { padding: 0 18px; } .cabecera { padding: 0 10px; } .barra { height: 50px; max-width: none; } .rotulo { font-size: 12.5px; } /* En el móvil la barra necesita todo el ancho: el selector de tema baja a la esquina. */ .tema { position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 46px; height: 46px; } .marcas { padding: 52px 0 34px; } .marca { width: 160px; padding: 0 6px; } .marca-foto { width: 68px; height: 68px; } .marca-nombre { font-size: 13px; margin-top: 10px; } .marca-que { font-size: 12px; } .marca-cuenta { font-size: 10.5px; } .hero-dentro { padding-bottom: 96px; } .hero-pie-scroll { display: none; } .hero-nombre { font-size: clamp(48px, 14vw, 64px); } .hero-rol-guion { font-size: clamp(36px, 10.5vw, 48px); } .hero-bajada { margin-top: 18px; } .hero-acciones { gap: 10px; margin-top: 22px; } .hero-acciones .boton { min-height: 46px; padding: 0 18px; font-size: 14px; } .acreditacion { --ac-w: 150px; --ac-h: 206px; } .acreditacion-cara { padding-top: 30px; border-radius: 11px; } .acreditacion-ranura { top: 10px; width: 30px; margin-left: -15px; height: 7px; } .acreditacion-foto { width: 74px; height: 74px; } .acreditacion-nombre { font-size: 19px; margin-top: 10px; } .acreditacion-rol { font-size: 7px; letter-spacing: 0.16em; } .acreditacion-pie { height: 32px; font-size: 10px; gap: 6px; } .acreditacion-pie svg { width: 14px; height: 14px; } .servicios, .trabajos, .datos { grid-template-columns: 1fr; } .trabajos-compactos { grid-template-columns: repeat(2, 1fr); } .proyecto-videos.varios { grid-template-columns: 1fr; } .yt-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .yt-play::after { left: 24px; top: 19px; border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; } .cta-fija { right: 70px; } /* La tabla de 4 columnas de cookies no cabe: se desliza de lado dentro de su caja. */ .pagina-texto table { display: block; overflow-x: auto; } .cta-fija-wa, .cta-fija-pedir { height: 46px; } .cta-fija-wa { width: 46px; } .factores { grid-template-columns: 1fr; } .precio-sello { margin-top: 24px; } .cta-dentro { padding: 26px 18px; border-radius: 24px; } .formulario { padding: 20px 16px; } .formulario .forminator-ui { grid-template-columns: minmax(0, 1fr); } #formulario .forminator-col-6 { grid-column: 1 / -1; } /* En el móvil los reels se deslizan de lado, como en Instagram. */ .verticales { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .vertical { scroll-snap-align: start; } .texto .entradilla { font-size: 18px; } .visor-cerrar { top: 8px; right: 8px; } .hero-pie { font-size: 10px; letter-spacing: 0.1em; } .hero-bajada { font-size: 16px; } .texto p { font-size: 17px; } } @media (max-aspect-ratio: 1/1) { :root { --poster-escena: url(../3d/escena-claro-vertical.webp); } :root[data-tema="oscuro"] { --poster-escena: url(../3d/escena-oscuro-vertical.webp); } } /* ── 11. Movimiento reducido ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .telon { display: none; } .hero { --arranque: 0s; } /* Sin carrusel: las marcas, quietas y centradas en varias filas. */ .marcas-pista { width: auto; cursor: auto; transform: none !important; } .marcas-tira { flex-wrap: wrap; justify-content: center; row-gap: 24px; width: 100%; } .marcas-tira[aria-hidden] { display: none; } *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ── Blog ── */ /* Entrada: columna principal y columna lateral (compartir, relacionadas, lo último, categorías), como en los artículos de META Channel */ .entrada-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; margin-top: 8px; } .entrada-cats { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 700 12px/1.3 var(--letra); letter-spacing: 0.14em; text-transform: uppercase; } .entrada-cats a { color: var(--texto); text-decoration: none; border-bottom: 2px solid var(--amarillo); } .entrada-cats a:hover { color: var(--texto-2); } .entrada-principal h1 { margin-top: 14px; } .entrada-lateral { display: grid; gap: 18px; } .lateral-caja { padding: 20px; border-radius: 18px; background: var(--fondo-2); border: 1px solid var(--linea); } .lateral-titulo { display: flex; align-items: center; gap: 10px; font: 700 11.5px/1 var(--letra); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); } .lateral-titulo::before { content: ''; width: 18px; height: 2px; background: var(--amarillo); } .compartir { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .compartir a, .copiar-enlace { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .compartir a:hover, .copiar-enlace:hover, .copiar-enlace.copiado { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); } .compartir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lateral-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; } .lateral-entrada { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; } .lateral-img { grid-row: 1 / span 2; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--fondo); } .lateral-img img { width: 100%; height: 100%; object-fit: cover; } .lateral-entrada-titulo { font: 700 14px/1.3 var(--letra); } .lateral-entrada-titulo a { color: var(--texto); text-decoration: none; } .lateral-entrada-titulo a:hover { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; } .lateral-fecha { margin-top: 4px; font-size: 12.5px; color: var(--texto-2); } .lateral-cats { list-style: none; margin: 10px 0 0; padding: 0; } .lateral-cats li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; } .lateral-cats a { color: var(--texto); text-decoration: none; } .lateral-cats a:hover { color: var(--texto-2); } .lateral-cats span { color: var(--texto-2); font-variant-numeric: tabular-nums; } .lateral-todo { margin-top: 14px; font-size: 14px; font-weight: 700; } .lateral-todo a { color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .blog-filtro { margin-top: 28px; color: var(--texto-2); } .blog-filtro a { color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } @media (max-width: 900px) { .entrada-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 40px; } } .entrada-firma { margin-top: 16px; font-size: 15px; color: var(--texto-2); } .entrada-firma a { color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .entrada-portada { margin: 32px 0 8px; } .entrada-portada img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; background: var(--fondo-2); } .entrada-texto { margin-top: 28px; } .entrada-texto table { display: block; overflow-x: auto; } .entrada-texto blockquote { margin: 24px 0; padding: 18px 22px; background: var(--fondo-2); border-radius: 16px; font-size: 1.06em; } .autor { margin-top: 56px; display: flex; gap: 20px; align-items: flex-start; padding: 22px; border-radius: 20px; background: var(--fondo-2); } .autor img { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--amarillo); } .autor h2 { font: 700 12px/1 var(--letra); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); } .autor p { margin-top: 10px; font-size: 16px; color: var(--texto-2); } .autor strong { color: var(--texto); } .autor a { color: var(--texto); text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .entradas { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } .entrada-extracto { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--texto-2); } .entrada-tarjeta .trabajo-img img { aspect-ratio: 16 / 9; } .paginacion { margin-top: 48px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .paginacion a, .paginacion span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); text-decoration: none; } .paginacion .current { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); } @media (max-width: 900px) { .entradas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .entradas { grid-template-columns: 1fr; } .autor { flex-direction: column; } } /* ── Páginas de servicio: pensadas para contratar (template-parts/servicio.php) ─────────────────────── */ .boton-amarillo { background: var(--amarillo); color: var(--tinta); } .boton-amarillo:hover { background: var(--texto); color: var(--fondo); } .servicio-hero { padding: clamp(120px, 14vw, 160px) 0 clamp(48px, 6vw, 72px); } .servicio-hero-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 8px; } .servicio-hero-rejilla.con-vertical { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } .servicio-hero h1 { font: 800 clamp(36px, 4.6vw, 64px)/1.02 var(--titular); letter-spacing: -0.035em; } .servicio-hero .entradilla { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--texto-2); max-width: 62ch; } .servicio-acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; } .servicio-acciones .icono-wa { width: 20px; height: 20px; } .servicio-sellos { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; font-weight: 600; } .servicio-sellos li { display: inline-flex; align-items: center; gap: 8px; } .servicio-sellos svg { flex: none; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--amarillo); color: var(--tinta); } .servicio-visual { position: relative; margin: 0; } .servicio-visual video, .servicio-visual img { display: block; width: 100%; height: auto; border-radius: 24px; background: #111; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55); } .servicio-visual::before { content: ''; position: absolute; z-index: -1; right: -18px; bottom: 26px; width: 55%; height: 70%; border-radius: 28px; background: var(--amarillo); transform: rotate(4deg); } .servicio-visual-pie { margin-top: 14px; font-size: 14px; color: var(--texto-2); } .servicio-visual-enlace { position: relative; display: block; border-radius: 24px; } .servicio-visual-enlace .trabajo-play { transform: scale(1); opacity: 1; } .servicio-movil { justify-self: center; width: min(300px, 100%); } .servicio-movil video { aspect-ratio: 9 / 16; object-fit: cover; border-radius: 36px; border: 10px solid #111; } .servicio-movil::before { right: -26px; width: 80%; } .servicio-confianza { padding: 8px 0 clamp(56px, 7vw, 88px); } .servicio-confianza-titulo { display: flex; align-items: center; gap: 14px; font: 700 12px/1 var(--letra); letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-2); } .servicio-confianza-titulo::after { content: ''; flex: 1; height: 1px; background: var(--linea); } .servicio-marcas { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 18px 12px; } .servicio-marcas li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--texto-2); } .servicio-marcas img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 10px 20px -12px rgba(0, 0, 0, 0.4); } .incluye { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .incluye li { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 150px; padding: 22px; border-radius: 20px; background: var(--fondo); border: 1px solid var(--linea); font: 700 18px/1.3 var(--letra); letter-spacing: -0.01em; transition: transform 200ms ease, box-shadow 200ms ease; } .incluye li:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.45); } .incluye-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--amarillo); color: var(--tinta); } .incluye-icono svg { width: 22px; height: 22px; } .servicio-bloques { display: grid; gap: clamp(48px, 6vw, 80px); } .servicio-bloque { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 6vw, 96px); align-items: start; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--linea); } .servicio-bloque:first-child { border-top: 0; padding-top: 0; } .seccion .servicio-bloque h2 { font: 800 clamp(26px, 2.8vw, 38px)/1.12 var(--titular); letter-spacing: -0.03em; } .servicio-trabajos { margin-top: 40px; } .pagina-servicio .seccion-oscura { --texto: var(--oscura-texto); --fondo: var(--oscura-fondo); --fondo-2: rgba(255, 255, 255, 0.07); } .empezar { list-style: none; padding: 0; margin: 18px 0 0; } .empezar li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--linea); } .empezar li:first-child { border-top: 0; padding-top: 4px; } .empezar strong { font-weight: 700; } .empezar span { font-size: 15px; line-height: 1.5; color: var(--texto-2); } @media (max-width: 1100px) { .servicio-marcas { grid-template-columns: repeat(5, minmax(0, 1fr)); } .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .servicio-hero-rejilla, .servicio-hero-rejilla.con-vertical, .servicio-bloque { grid-template-columns: minmax(0, 1fr); } .servicio-visual::before { right: -8px; } } @media (max-width: 600px) { .servicio-marcas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 6px; } .servicio-marcas li { font-size: 10.5px; } .servicio-marcas img { width: 48px; height: 48px; } .incluye { grid-template-columns: minmax(0, 1fr); } .incluye li { min-height: 0; flex-direction: row; align-items: center; } .servicio-hero .entradilla { font-size: 17px; } } /* ── Servicios de la portada: tarjetas con un clip de fondo (front-page.php, main.js) ───────────────── Sin JavaScript, rejilla; con .carrusel, óvalo 3D que gira. Las dos caras (.carta-cara) llevan el mismo estilo que la tarjeta suelta. */ .cartas { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .cartas:not(.carrusel) .carta, .carta-cara { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding: 24px 22px; border-radius: 22px; overflow: hidden; isolation: isolate; background: #0b0b0c; color: #fff; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.6); } .cartas:not(.carrusel) .carta::after, .carta-cara::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 48%, rgba(0, 0, 0, 0.4) 78%, rgba(0, 0, 0, 0.18) 100%); } .carta-fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .carta h3 { font: 800 24px/1.12 var(--titular); letter-spacing: -0.02em; color: #fff; } .carta p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); } .carta-enlace { align-self: flex-start; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--amarillo); text-decoration: none; } .carta-enlace::after { content: ' →'; } .carta-enlace:hover { text-decoration: underline; text-underline-offset: 3px; } .cartas.carrusel { display: block; position: relative; height: 470px; margin: 56px calc(50% - 50vw) 0; overflow: hidden; perspective: 2200px; perspective-origin: 50% 45%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .cartas.carrusel.arrastrando { cursor: grabbing; } .cartas.carrusel .carta { position: absolute; left: 50%; top: 14px; width: 300px; height: 425px; margin-left: -150px; opacity: 0; transform-style: preserve-3d; will-change: transform; } .carta-cara { position: absolute; inset: 0; min-height: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .carta-detras { transform: rotateY(180deg); } /* Las que pasan por detrás, algo más oscuras: dan profundidad y dejan que mande la de delante */ .carta-cara::before { content: ''; position: absolute; inset: 0; z-index: 3; background: #000; opacity: var(--sombra, 0); pointer-events: none; border-radius: inherit; } #servicios { overflow-x: clip; } /* la pista de tarjetas mide 100vw: sin barra horizontal */ .cartas-controles { display: flex; justify-content: center; gap: 12px; margin-top: 36px; } .cartas-controles[hidden] { display: none; } .cartas-flecha { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .cartas-flecha:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); } @media (max-width: 600px) { .cartas.carrusel { height: 400px; perspective: 1100px; } .cartas.carrusel .carta { width: 245px; height: 370px; margin-left: -122px; } .cartas-controles { margin-top: 24px; } .carta-cara { padding: 18px 16px; } .carta h3 { font-size: 19px; } .carta p { margin-top: 8px; font-size: 13px; } } /* Cápsula de Instagram en «Quién soy»: cristal líquido como la barra del menú (velo, bisel y reflejo), con una mancha de color detrás para que el cristal se note al desenfocarla */ .capsula-ig-caja { position: relative; isolation: isolate; margin: 28px 0 8px; } .capsula-ig-caja::before { content: ''; position: absolute; z-index: -1; left: 26px; top: 50%; width: 190px; height: 44px; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, #f9ce34, #ee2a7b 55%, #6228d7); opacity: 0.55; filter: blur(14px); } .capsula-ig { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 5px 18px 5px 5px; border-radius: 999px; overflow: hidden; color: var(--texto); font: 700 16px/1 var(--letra); text-decoration: none; background: var(--lente-velo); box-shadow: var(--lente-bisel); -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.06); backdrop-filter: blur(16px) saturate(180%) brightness(1.06); transition: transform 200ms ease, box-shadow 200ms ease; } .capsula-ig::after { content: ''; position: absolute; top: 1px; left: 14%; right: 14%; height: 44%; border-radius: 999px; background: linear-gradient(180deg, var(--lente-reflejo), rgba(255, 255, 255, 0)); pointer-events: none; } .capsula-ig:hover { transform: translateY(-2px); } .capsula-ig-foto { flex: none; padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); } .capsula-ig-foto img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fondo); } .capsula-ig-verificado { flex: none; margin-left: -4px; } /* Aviso de cookies (Complianz, herramientas/configurar_complianz.php): su CSS con la letra de la web y, en modo oscuro, en oscuro. Sus colores van en variables --cmplz_* que define en :root; aquí se cambian sobre el banner. */ .cmplz-cookiebanner { font-family: var(--letra); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35) !important; } .cmplz-cookiebanner .cmplz-title { justify-self: start; grid-column-start: 1; font: 800 19px/1.2 var(--titular); letter-spacing: -0.02em; } .cmplz-cookiebanner .cmplz-btn { font-family: var(--letra); font-weight: 700; } .cmplz-cookiebanner .cmplz-links a { text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 3px; } .cmplz-cookiebanner { --cmplz_category_header_always_active_color: var(--texto-2); } :root[data-tema="oscuro"] .cmplz-cookiebanner { --cmplz_banner_background_color: #161618; --cmplz_banner_border_color: rgba(255, 255, 255, 0.1); --cmplz_text_color: #f2f2f2; --cmplz_hyperlink_color: #f2f2f2; --cmplz_button_deny_background_color: #f2f2f2; --cmplz_button_deny_border_color: #f2f2f2; --cmplz_button_deny_text_color: #0b0b0c; --cmplz_button_settings_background_color: transparent; --cmplz_button_settings_border_color: rgba(255, 255, 255, 0.28); --cmplz_button_settings_text_color: #f2f2f2; --cmplz_slider_inactive_color: #4a4a4f; } :root[data-tema="oscuro"] .cmplz-cookiebanner .cmplz-category { background-color: rgba(255, 255, 255, 0.06); } /* Con el modo de consentimiento de Google, Complianz añade «Preferencias»; esta web no tiene cookies de ese tipo. */ .cmplz-cookiebanner .cmplz-category.cmplz-preferences { display: none; } /* Bola de WhatsApp (Joinchat): abajo a la derecha en pantallas anchas. En el móvil no sale: hace de bola el icono verde de la barra fija, junto a «Pide presupuesto». Con «body» delante: su CSS se carga después que este. */ body .joinchat { --joinchat-font: var(--letra); } @media (max-width: 760px) { body .joinchat { display: none !important; } }