/* Wiri Hybrid · estilos comunes de wiri.ai (18-oct-2026). Tema claro (gris) por decisión de Claudio. */ /* ───────── Wiri Hybrid · identidad (18-oct-2026) · TEMA CLARO (gris) por decisión de Claudio. Fuentes OFL locales (CSP 'self'). ───────── */ @font-face { font-family: "Space Grotesk"; src: url("/marca/fuentes/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "Inter"; src: url("/marca/fuentes/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("/marca/fuentes/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/marca/fuentes/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400 600; font-display: swap; } :root { --fucsia: #ff2fa6; --cian: #12c8ff; --gris-simbolo: #2e2f34; --fondo: #e9eaed; /* gris claro: la base de toda la página */ --fondo-2: #f5f5f7; /* blanco roto: franjas alternas */ --fondo-pie: #dfe0e4; --tarjeta: #ffffff; --borde: #d3d5da; --borde-2: #c2c4ca; --fucsia-texto: #c8117a; /* fucsia para LETRAS sobre claro (contraste 4,6:1); el #ff2fa6 solo para adornos */ --cian-adorno: #0a84b0; /* el cian puro no se ve sobre claro: este, solo para puntos y cuadritos */ --carbon: #1d1d20; --texto: #1d1d20; --texto-2: #55575e; --texto-3: #8a8c93; --oscuro: #050609; /* solo para los marcos de las capturas (la app es oscura) */ --titular: "Space Grotesk", system-ui, sans-serif; --cuerpo: "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); font-size: 17px; line-height: 1.55; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* height:auto: sin esto las capturas salían estiradas */ section { scroll-margin-top: 76px; } /* comunes */ .etiqueta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: #3a3c42; display: inline-flex; align-items: center; gap: 8px; } .etiqueta::before { content: ""; width: 7px; height: 7px; background: var(--cian-adorno); display: inline-block; flex: none; } .etiqueta.fucsia::before { background: var(--fucsia); } .capsula { font-family: var(--cuerpo); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 12px 3px; display: inline-block; color: var(--texto-2); } .titular { font-family: var(--titular); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; color: var(--carbon); } .titular .f, .f { color: var(--fucsia-texto); } .titular .r { font-weight: 400; color: #3d3f45; } .boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 16px; padding: 15px 26px; border-radius: 999px; transition: transform .15s ease, box-shadow .15s ease; } .boton:hover { transform: translateY(-1px); } .boton.lleno { background: var(--fucsia); color: #160611; box-shadow: 0 10px 24px rgba(255,47,166,0.22); } .boton.vacio { border: 1px solid var(--borde-2); color: var(--carbon); background: rgba(255,255,255,0.4); } .marco-app { border-radius: 14px; overflow: hidden; border: 1px solid #2a2b30; box-shadow: 0 34px 70px rgba(20,22,30,0.22), 0 6px 18px rgba(20,22,30,0.10); background: #111; } .marco-app .cromo { height: 30px; background: #18181b; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid #26272c; } .marco-app .cromo i { width: 10px; height: 10px; border-radius: 50%; background: #3a3b41; display: block; } .costura { position: absolute; background: var(--fucsia); z-index: 2; pointer-events: none; } .pixeles { position: absolute; display: grid; grid-template-columns: repeat(var(--n, 5), var(--p, 10px)); gap: 3px; z-index: 2; } .pixeles i { width: var(--p, 10px); height: var(--p, 10px); background: var(--cian); opacity: 0.9; display: block; } .pixeles i.o { opacity: 0; } .pie { font-family: var(--mono); font-size: 12px; color: var(--texto-3); letter-spacing: 0.06em; } /* barra (fija al bajar) y selector de idioma */ .barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 56px; background: rgba(233,234,237,0.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(29,29,32,0.06); } .lockup { display: flex; align-items: center; gap: 12px; } .lockup img { width: 36px; height: 36px; } .lockup .nombre { font-family: var(--titular); font-size: 21px; letter-spacing: -0.02em; color: var(--carbon); } .lockup .nombre b { font-weight: 700; } .lockup .nombre span { font-weight: 400; } .barra { transition: box-shadow .3s ease, background .3s ease, padding .3s ease; } .barra.con-sombra { box-shadow: 0 10px 30px rgba(20,22,30,0.08); background: rgba(238,239,241,0.9); padding-top: 11px; padding-bottom: 11px; } .menu { display: flex; align-items: center; gap: clamp(4px, 1vw, 12px); margin: 0 auto 0 clamp(20px, 3vw, 48px); font-size: 15px; color: var(--texto-2); } .menu > a, .menu .abre { color: var(--texto-2); padding: 8px 12px; border-radius: 999px; transition: color .15s ease, background .15s ease; } .menu > a:hover, .menu .abre:hover, .grupo.abierto .abre { color: var(--carbon); background: rgba(29,29,32,0.05); } .abre { font: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; } .abre i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; } .grupo.abierto .abre i { transform: translateY(1px) rotate(225deg); } .grupo { position: relative; } .grupo.mega { position: static; } .panel { position: absolute; top: calc(100% + 10px); left: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index: 70; } .grupo.abierto .panel { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; } .menu > .grupo:last-child .panel.chico { left: auto; right: 0; } .panel.chico { min-width: 260px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px rgba(20,22,30,0.16); } .panel a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--carbon); transition: background .15s ease; } .panel a:hover { background: #f2f2f4; } .panel a b { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; } .panel a small { display: block; color: var(--texto-3); font-size: 13px; margin-top: 2px; } .grupo.mega .panel { left: 0; right: 0; top: 100%; padding: 0; transform-origin: top left; } .panel-dentro { position: relative; width: var(--mm-w, min(1080px, calc(100vw - 32px))); margin: 10px 0 0 var(--mm-x, 16px); background: #fff; border: 1px solid var(--borde); border-radius: 20px; box-shadow: 0 30px 80px rgba(20,22,30,0.18); padding: 26px; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 18px; } .col { display: grid; align-content: start; gap: 2px; } .col-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--texto-3); padding: 4px 12px 8px; } .col-t.sep { margin-top: 12px; border-top: 1px solid #ececef; padding-top: 14px; } .capsula.mini { font-size: 9.5px; padding: 2px 8px 1px; letter-spacing: 0.16em; color: var(--texto-2); } .capsula.mini.pro { color: var(--fucsia-texto); } .destacado { display: grid !important; align-content: start; gap: 8px; padding: 12px !important; background: #f4f4f6; border-radius: 14px !important; } .destacado:hover { background: #ededf0 !important; } .destacado .foto { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16/8; margin-bottom: 6px; } .destacado .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .destacado:hover .foto img { transform: scale(1.04); } .destacado b { font-family: var(--titular); font-size: 20px !important; letter-spacing: -0.02em; line-height: 1.15; } .acciones-barra { display: flex; align-items: center; gap: 10px; } .acciones-barra .entrar { color: var(--carbon); border: 1px solid var(--borde-2); padding: 8px 16px; border-radius: 999px; font-size: 15px; } .acciones-barra .entrar:hover { background: rgba(255,255,255,0.6); } .acciones-barra .abrir { background: var(--carbon); color: #fff; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background .15s ease, transform .15s ease; } .acciones-barra .abrir:hover { background: #000; transform: translateY(-1px); } .hamburguesa { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--borde-2); background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; } .hamburguesa i { display: block; width: 16px; height: 1.6px; background: var(--carbon); transition: transform .25s ease; } .hamburguesa[aria-expanded="true"] i:first-child { transform: translateY(3.8px) rotate(45deg); } .hamburguesa[aria-expanded="true"] i:last-child { transform: translateY(-3.8px) rotate(-45deg); } .menu-movil { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 45; background: var(--fondo); padding: 12px 16px 30px; overflow-y: auto; } .menu-movil[hidden] { display: none; } .menu-movil details { border-bottom: 1px solid var(--borde); } .menu-movil summary { list-style: none; cursor: pointer; font-family: var(--titular); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; padding: 16px 4px; color: var(--carbon); display: flex; justify-content: space-between; align-items: center; } .menu-movil summary::-webkit-details-marker { display: none; } .menu-movil summary::after { content: "+"; font-weight: 400; color: var(--texto-3); } .menu-movil details[open] summary::after { content: "–"; } .menu-movil details a { display: block; padding: 9px 6px; font-size: 17px; color: var(--texto-2); } .menu-movil details[open] { padding-bottom: 10px; } .menu-movil .suelto { display: block; font-family: var(--titular); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; padding: 16px 4px; border-bottom: 1px solid var(--borde); color: var(--carbon); } .pie-movil { display: flex; gap: 12px; align-items: center; margin-top: 24px; } .pie-movil .boton { padding: 10px 20px; font-size: 15px; } .idioma { position: relative; } .idioma > button { font: 600 13px var(--cuerpo); letter-spacing: 0.06em; color: var(--carbon); background: transparent; border: 1px solid var(--borde-2); border-radius: 999px; padding: 8px 12px; cursor: pointer; } .idioma > button span { color: var(--texto-3); font-size: 11px; } .idioma ul { display: none; position: absolute; right: 0; top: calc(100% + 8px); list-style: none; background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 6px; min-width: 170px; z-index: 60; box-shadow: 0 20px 50px rgba(20,22,30,0.16); } .idioma.abierto ul { display: block; } .idioma li { padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--carbon); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; } .idioma li:hover { background: #f1f1f3; } .idioma li.on { color: var(--fucsia-texto); } .idioma li.pronto { color: #a3a5ab; cursor: default; } .idioma li small { font-family: var(--mono); font-size: 10px; color: #a3a5ab; } /* A · portada */ .portada { position: relative; min-height: 820px; overflow: hidden; background: radial-gradient(1100px 650px at 80% 35%, rgba(18,200,255,0.10), transparent 62%), radial-gradient(900px 600px at 12% 85%, rgba(255,47,166,0.08), transparent 60%), var(--fondo); } .portada .contenido { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 40px; padding: 60px 56px 60px; position: relative; z-index: 3; } .portada .titular { font-size: clamp(56px, 6.1vw, 88px); margin: 26px 0 28px; } .portada p.sub { font-size: 20px; color: var(--texto-2); max-width: 520px; } .portada p.sub b { color: var(--carbon); font-weight: 600; } .portada .botones { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; } .portada .ediciones { display: flex; gap: 10px; align-items: center; margin-top: 34px; color: var(--texto-2); font-size: 14px; flex-wrap: wrap; } .escena { position: relative; height: clamp(460px, 44vw, 640px); } .escena .marco-app { position: absolute; width: min(760px, 54vw); right: -60px; top: 40px; transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); } .escena .tarjeta { position: absolute; left: 10px; bottom: 34px; background: rgba(255,255,255,0.94); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; width: 300px; z-index: 4; box-shadow: 0 18px 40px rgba(20,22,30,0.14); } .escena .tarjeta .etiqueta { margin-bottom: 8px; } .escena .tarjeta p { font-size: 14px; color: var(--carbon); line-height: 1.45; } .escena .tarjeta .mano { margin-top: 10px; font-size: 12px; color: var(--fucsia-texto); font-family: var(--mono); } .portada .simbolo-fondo { position: absolute; width: 520px; right: -150px; bottom: -190px; opacity: 0.08; z-index: 1; } .franja-modulos { display: flex; justify-content: space-between; align-items: center; padding: 20px 56px; border-top: 1px solid var(--borde); position: relative; z-index: 4; gap: 16px; background: var(--fondo-2); } .franja-modulos .modulos { display: flex; gap: 26px; font-family: var(--mono); font-size: 13px; color: var(--texto-2); flex-wrap: wrap; } .franja-modulos .modulos span::before { content: "■ "; color: var(--cian-adorno); font-size: 9px; vertical-align: 2px; } /* B · franja de campaña */ .hibrido { position: relative; min-height: 860px; overflow: hidden; background: var(--fondo-2); color: var(--carbon); } .hibrido .contenido { position: relative; z-index: 3; padding: 110px 56px 40px; } .hibrido .titular { font-size: clamp(64px, 8.9vw, 128px); line-height: 0.94; margin-top: 22px; } .hibrido .lema { max-width: min(560px, 46vw); margin-top: 44px; } .hibrido .lema p { font-size: 21px; color: #45474e; } .hibrido .lema p b { color: var(--carbon); font-weight: 600; } .hibrido .boton.vacio { margin-top: 28px; } .hibrido .mano-grande { position: absolute; width: 700px; right: -170px; bottom: -260px; z-index: 1; } .hibrido .ventana { position: absolute; right: clamp(24px, calc(25vw - 160px), 200px); top: clamp(400px, calc(1100px - 48vw), 560px); width: min(600px, 38vw); z-index: 2; transform: rotate(-2deg) translateZ(0); backface-visibility: hidden; } .hibrido .ventana .etiqueta { position: absolute; left: 0; top: -34px; background: var(--carbon); color: #e6e7ea; padding: 6px 12px; font-size: 12px; white-space: nowrap; } .hibrido .costura-diag { position: absolute; z-index: 2; height: 2px; width: 1600px; background: var(--fucsia); left: -100px; top: 780px; transform: rotate(-11deg); transform-origin: left center; } .hibrido .pie-franja { position: absolute; left: 56px; bottom: 30px; z-index: 3; display: flex; gap: 22px; align-items: center; } /* todo en uno (producto) */ .app { padding: 110px 56px 120px; position: relative; overflow: hidden; background: var(--fondo); } .app .cabecera { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 70px; } .app .cabecera .titular { font-size: clamp(44px, 5.3vw, 76px); margin-top: 18px; } .app .cabecera p { font-size: 19px; color: var(--texto-2); max-width: 540px; } .modulo { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 56px; align-items: center; padding: 46px 0; border-top: 1px solid var(--borde); } .modulo.inv { grid-template-columns: 1.4fr 0.8fr; } .modulo.inv .texto { order: 2; } .modulo h3 { font-family: var(--titular); font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -0.03em; line-height: 1.05; margin: 14px 0; color: var(--carbon); font-weight: 700; } .modulo p { color: var(--texto-2); font-size: 17px; max-width: 440px; } .modulo ul { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: 15px; color: var(--carbon); } .modulo li::before { content: "→ "; color: var(--fucsia-texto); } .plantillas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .plantillas figure { border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: var(--tarjeta); box-shadow: 0 14px 30px rgba(20,22,30,0.10); } .plantillas img { width: 100%; aspect-ratio: 9/14; object-fit: cover; } .plantillas figcaption { font-family: var(--mono); font-size: 12px; color: var(--texto-2); padding: 9px 10px; } .agente { margin-top: 40px; border: 1px solid var(--borde); border-radius: 18px; padding: 40px 44px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; background: linear-gradient(135deg, rgba(255,47,166,0.07), rgba(18,200,255,0.07)), var(--tarjeta); position: relative; overflow: hidden; } .agente h3 { font-family: var(--titular); font-size: clamp(32px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1.02; font-weight: 700; margin: 14px 0; color: var(--carbon); } .agente p { color: var(--texto-2); font-size: 17px; } .conversacion { display: grid; gap: 12px; align-content: start; } .burbuja { border-radius: 14px; padding: 13px 16px; font-size: 15px; max-width: 92%; } .burbuja.tu { background: var(--carbon); color: #f1f1f3; justify-self: end; } .burbuja.ia { background: #fff; border: 1px solid var(--borde); color: var(--carbon); } .burbuja.ia .etiqueta { font-size: 11px; margin-bottom: 6px; display: flex; } .cerebros { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .cerebros span { font-family: var(--mono); font-size: 12px; border: 1px solid var(--borde-2); border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,0.6); } .cerebros span::before { content: "● "; color: var(--cian-adorno); } /* Lite y Pro */ .descarga { padding: 110px 56px 90px; position: relative; overflow: hidden; background: radial-gradient(900px 500px at 50% 0%, rgba(255,47,166,0.08), transparent 70%), var(--fondo-2); } .descarga .cab { text-align: center; max-width: 1080px; margin: 0 auto 60px; } .descarga .titular { font-size: clamp(44px, 4.9vw, 70px); margin: 18px 0; } .descarga .cab p { font-size: 19px; color: var(--texto-2); } .tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1120px; margin: 0 auto; } .ed { border: 1px solid var(--borde); border-radius: 20px; padding: 36px 36px 32px; background: var(--tarjeta); box-shadow: 0 18px 40px rgba(20,22,30,0.06); } .ed.pro { border-color: rgba(255,47,166,0.6); background: linear-gradient(180deg, rgba(255,47,166,0.06), #fff 45%); } .ed .arriba { display: flex; align-items: center; gap: 14px; } .ed .arriba img { width: 46px; } .ed .nombre { font-family: var(--titular); font-size: 30px; letter-spacing: -0.02em; color: var(--carbon); } .ed .nombre b { font-weight: 700; } .ed .capsula { margin-left: auto; } .ed.pro .capsula { color: var(--fucsia-texto); } .ed .para { margin: 22px 0 18px; font-size: 18px; color: var(--carbon); } .ed ul { list-style: none; display: grid; gap: 11px; font-size: 15px; color: var(--texto-2); } .ed li { display: flex; gap: 10px; } .ed li::before { content: ""; width: 7px; height: 7px; background: var(--cian-adorno); margin-top: 8px; flex: none; } .ed.pro li::before { background: var(--fucsia); } .ed .acciones { display: flex; gap: 12px; margin-top: 30px; align-items: center; flex-wrap: wrap; } .ed .nota { font-family: var(--mono); font-size: 12px; color: var(--texto-3); margin-top: 16px; } .web { max-width: 1120px; margin: 26px auto 0; border: 1px dashed var(--borde-2); border-radius: 16px; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,0.5); } .web p { color: var(--texto-2); font-size: 16px; } .web p b { color: var(--carbon); } /* banda de aviso arriba */ .aviso { background: var(--carbon); color: #e6e7ea; text-align: center; font-size: 13px; padding: 8px 16px; position: relative; z-index: 51; } .aviso a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.35); margin-left: 6px; } .aviso a:hover { border-color: var(--fucsia); } .aviso .punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fucsia); margin-right: 8px; vertical-align: 1px; animation: parpadea 2.4s ease-in-out infinite; } /* llamada final */ .final { padding: 120px 56px; text-align: center; background: radial-gradient(800px 400px at 50% 100%, rgba(255,47,166,0.10), transparent 70%), var(--fondo-2); position: relative; overflow: hidden; } .final .titular { font-size: clamp(48px, 6vw, 92px); margin: 18px auto 22px; max-width: 1000px; } .final p { font-size: 19px; color: var(--texto-2); } .final .botones { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; } .final .simbolo { width: 64px; margin: 0 auto; } /* vídeo en bucle con botón de pausa */ .marco-app video { display: block; width: 100%; height: auto; background: #111; } .pausa { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .pausa::before, .pausa::after { content: ""; width: 3px; height: 12px; background: #fff; margin: 0 2px; border-radius: 1px; } .pausa.parado::before { width: 0; height: 0; background: none; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; border-radius: 0; } .pausa.parado::after { display: none; } .marco-app { position: relative; } .escena .pausa { top: 42px; bottom: auto; right: 84px; } /* barrido antes / después (SynColor) */ .barrido { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1044/434; background: #111; box-shadow: 0 34px 70px rgba(20,22,30,0.22), 0 6px 18px rgba(20,22,30,0.10); --x: 50%; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .barrido img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .barrido .antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); } .barrido .linea { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--fucsia); } .barrido .linea span { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--fucsia); box-shadow: 0 6px 20px rgba(255,47,166,0.45); } .barrido .linea span::before, .barrido .linea span::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 2px solid #fff; border-left: 2px solid #fff; margin-top: -4px; } .barrido .linea span::before { left: 9px; transform: rotate(-45deg); } .barrido .linea span::after { right: 9px; transform: rotate(135deg); } .barrido .rotulo { position: absolute; bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: #fff; background: rgba(0,0,0,0.45); padding: 4px 9px; border-radius: 6px; backdrop-filter: blur(6px); } .barrido .rotulo.izq { left: 12px; } .barrido .rotulo.der { right: 12px; } /* cinta de módulos (marquesina) */ .cinta { overflow: hidden; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--fondo); padding: 26px 0; } .cinta-pista { display: flex; gap: 56px; width: max-content; animation: cinta 38s linear infinite; } .cinta span { font-family: var(--titular); font-weight: 700; font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1.2px #a9abb2; white-space: nowrap; } .cinta span.f { color: var(--fucsia-texto); -webkit-text-stroke: 0; } @keyframes cinta { to { transform: translateX(calc(-50% - 28px)); } } /* SynPhoto y Delivery */ .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--borde); padding-top: 46px; margin-top: 0; } .mini-mod { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 30px 32px; transition: transform .3s ease, box-shadow .3s ease; } .mini-mod:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(20,22,30,0.10); } .mini-mod h3 { font-family: var(--titular); font-size: clamp(26px, 2.3vw, 32px); letter-spacing: -0.03em; line-height: 1.08; margin: 12px 0 10px; font-weight: 700; } .mini-mod p { color: var(--texto-2); font-size: 16px; } /* nosotros */ .nosotros { padding: 120px 56px; background: var(--fondo-2); color: var(--carbon); position: relative; overflow: hidden; } .nosotros .titular { font-size: clamp(42px, 5vw, 72px); margin-top: 18px; max-width: 1100px; } .nos-cuerpo { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; margin-top: 60px; align-items: start; } .nos-p { font-size: 20px; color: var(--texto-2); line-height: 1.6; } .nos-p b { color: var(--carbon); } .principios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .principios > div { border-top: 1px solid var(--borde-2); padding-top: 18px; } .principios .num { font-family: var(--mono); font-size: 12px; color: var(--fucsia-texto); } .principios h3 { font-family: var(--titular); font-size: 22px; letter-spacing: -0.02em; margin: 10px 0 8px; color: var(--carbon); } .principios p { font-size: 15px; color: var(--texto-2); } /* preguntas */ .preguntas { padding: 110px 56px; background: var(--fondo); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: start; } .preguntas .titular { font-size: clamp(40px, 4.4vw, 62px); margin-top: 18px; } .lista-preg details { border-top: 1px solid var(--borde-2); } .lista-preg details:last-child { border-bottom: 1px solid var(--borde-2); } .lista-preg summary { list-style: none; cursor: pointer; padding: 22px 4px; font-family: var(--titular); font-weight: 700; font-size: 21px; letter-spacing: -0.015em; display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--carbon); } .lista-preg summary::-webkit-details-marker { display: none; } .lista-preg summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.8px solid var(--texto-2); border-bottom: 1.8px solid var(--texto-2); transform: rotate(45deg); transition: transform .25s ease; margin-top: -4px; } .lista-preg details[open] summary::after { transform: rotate(225deg); margin-top: 4px; } .lista-preg p { padding: 0 4px 24px; color: var(--texto-2); font-size: 17px; max-width: 640px; } /* pie completo */ .pie-web { background: var(--fondo-pie); border-top: 1px solid var(--borde); padding: 70px 56px 30px; } .pie-arriba { display: grid; grid-template-columns: 0.8fr 2fr; gap: 56px; max-width: 1240px; margin: 0 auto; } .pie-marca .lema { font-family: var(--titular); font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; color: var(--carbon); margin: 22px 0 26px; max-width: 340px; } .pie-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .pie-cols h4 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 14px; } .pie-cols a { display: block; font-size: 15px; color: var(--carbon); padding: 5px 0; } .pie-cols a:hover { color: var(--fucsia-texto); } .pie-abajo { max-width: 1240px; margin: 56px auto 0; padding-top: 22px; border-top: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); } .pie-izq, .pie-der { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .pie-der .red { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borde-2); display: inline-flex; align-items: center; justify-content: center; color: var(--carbon); } .pie-der .red:hover { color: var(--fucsia-texto); border-color: var(--fucsia-texto); } .idioma.arriba ul { top: auto; bottom: calc(100% + 8px); } .credito { max-width: 1240px; margin: 18px auto 0; font-family: var(--mono); font-size: 11px; color: var(--texto-3); letter-spacing: 0.02em; } /* ───── animaciones (sin librerías; se apagan con "reducir movimiento") ───── */ @keyframes entra { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } @keyframes entra-app { from { opacity: 0; transform: perspective(1600px) translateX(80px) rotateY(-22deg) rotateX(6deg); } to { opacity: 1; transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); } } @keyframes cose-v { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes parpadea { 0%, 100% { opacity: .9; } 50% { opacity: .15; } } @keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .js .portada .contenido > div:first-child > * { animation: entra .9s cubic-bezier(.2,.7,.2,1) both; } .js .portada .contenido > div:first-child > :nth-child(2) { animation-delay: .08s; } .js .portada .contenido > div:first-child > :nth-child(3) { animation-delay: .2s; } .js .portada .contenido > div:first-child > :nth-child(4) { animation-delay: .3s; } .js .portada .contenido > div:first-child > :nth-child(5) { animation-delay: .4s; } .js .portada .escena .marco-app { animation: entra-app 1.3s cubic-bezier(.2,.7,.2,1) .15s both; } .js .portada .escena .tarjeta { animation: entra .9s cubic-bezier(.2,.7,.2,1) .7s both, flota 6s ease-in-out 2s infinite; } .js .portada .costura { transform-origin: top; animation: cose-v 1.4s cubic-bezier(.6,0,.2,1) .2s both; } .pixeles i:nth-child(3n) { animation: parpadea 2.6s ease-in-out infinite; } .pixeles i:nth-child(3n+1) { animation: parpadea 3.4s ease-in-out .8s infinite; } .js .portada .escena .marco-app.inclina { animation: none; transform: perspective(1600px) rotateY(var(--giro, -9deg)) rotateX(var(--giro-x, 3deg)); transition: transform .1s linear; } .js .revela { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--retraso, 0s); } .js .revela.visto { opacity: 1; transform: none; } .js .revela-img { opacity: 0; transform: translateY(40px) scale(.965); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); } .js .revela-img.visto { opacity: 1; transform: none; } .js .hibrido .titular { clip-path: inset(0 0 100% 0); transform: translateY(30px); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1); } .js .hibrido.visto .titular { clip-path: inset(0 0 -10% 0); transform: none; } .js .hibrido .costura-diag { transform: rotate(-11deg) scaleX(0); transition: transform 1.6s cubic-bezier(.7,0,.2,1) .3s; } .js .hibrido.visto .costura-diag { transform: rotate(-11deg) scaleX(1); } .js .hibrido .mano-grande { transform: translateY(60px) rotate(8deg); opacity: 0; transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .2s, opacity 1.2s ease .2s; } .js .hibrido.visto .mano-grande { transform: none; opacity: 1; } .js .agente .burbuja { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .js .agente.visto .burbuja { opacity: 1; transform: none; } .js .agente.visto .burbuja:nth-child(2) { transition-delay: 1.1s; } .js .agente.visto .burbuja:nth-child(3) { transition-delay: 2.3s; } .js .barrido.paseo .antes { transition: clip-path 1.6s cubic-bezier(.6,0,.2,1); } .js .barrido.paseo .linea { transition: left 1.6s cubic-bezier(.6,0,.2,1); } .boton.lleno { position: relative; overflow: hidden; } .boton.lleno::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); transition: left .7s ease; } .boton.lleno:hover::after { left: 120%; } .ed { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .js .revela.visto.ed:hover, .js .revela.visto.mini-mod:hover, .js .revela.visto.ruta:hover, .js a.revela.visto.hueco:hover { transform: translateY(-4px); transition-delay: 0s; } .ed:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(20,22,30,0.12); } .modulo .marco-app img, .plantillas img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } .modulo .marco-app:hover img { transform: scale(1.025); } .plantillas figure:hover img { transform: scale(1.05); } /* móvil */ @media (max-width: 900px) { .barra { padding: 12px 16px; } .menu { display: none; } .acciones-barra .entrar, .acciones-barra > .idioma { display: none; } .hamburguesa { display: flex; } .lockup img { width: 30px; height: 30px; } .lockup .nombre { font-size: 18px; } .acciones-barra .abrir { padding: 9px 14px; font-size: 14px; } .cinta { padding: 16px 0; } .cinta-pista { gap: 30px; } .dos { grid-template-columns: 1fr; padding-top: 32px; } .mini-mod { padding: 24px 22px; } .nosotros { padding: 70px 16px; } .nosotros .titular { font-size: 40px; } .nos-cuerpo { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; } .nos-p { font-size: 17px; } .principios { grid-template-columns: 1fr; gap: 0; } .principios > div { padding: 18px 0; } .preguntas { padding: 70px 16px; grid-template-columns: 1fr; gap: 20px; } .preguntas .titular { font-size: 40px; } .lista-preg summary { font-size: 18px; padding: 18px 2px; } .pie-web { padding: 50px 16px 26px; } .pie-arriba { grid-template-columns: 1fr; gap: 36px; } .pie-cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; } .pie-abajo { flex-direction: column; align-items: flex-start; margin-top: 36px; } .final { padding: 70px 16px; } .final .titular { font-size: 46px; } .final p { font-size: 17px; } .final .botones { flex-direction: column; align-items: stretch; } .aviso { font-size: 12px; } .pixeles { display: none; } .portada { min-height: 0; } .portada .contenido { grid-template-columns: 1fr; padding: 24px 16px 28px; gap: 28px; } .portada .titular { font-size: 58px; margin: 18px 0; } .portada p.sub { font-size: 17px; } .portada .botones { flex-direction: column; align-items: stretch; margin-top: 26px; } .escena { height: auto; } .escena .marco-app { position: relative; width: 100%; right: auto; top: auto; transform: none; } .escena .tarjeta { position: relative; left: auto; bottom: auto; width: auto; margin: -26px 12px 0; } .franja-modulos { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; } .franja-modulos .modulos { gap: 12px; } .portada .costura { left: auto !important; right: 5px; } .escena .pausa { top: 40px; right: 12px; } .portada .simbolo-fondo { width: 320px; right: -110px; bottom: -120px; } .hibrido { min-height: 0; } .hibrido .contenido { padding: 60px 16px 10px; } .hibrido .titular { font-size: 60px; } .hibrido .lema { margin-top: 24px; max-width: none; } .hibrido .lema p { font-size: 17px; } .hibrido .ventana { position: relative; right: auto; top: auto; width: auto; margin: 54px 16px 150px; transform: rotate(-1.5deg); } .hibrido .mano-grande { width: 360px; right: -120px; bottom: -140px; } .hibrido .costura-diag { top: 980px; width: 900px; } .hibrido .pie-franja { left: 16px; bottom: 18px; } .hibrido .pie-franja .pie { display: none; } .app { padding: 60px 16px 70px; } .app .cabecera { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; } .app .cabecera .titular { font-size: 44px; } .app .cabecera p { font-size: 17px; } .modulo, .modulo.inv { grid-template-columns: 1fr; gap: 22px; padding: 32px 0; } .modulo.inv .texto { order: 0; } .modulo h3 { font-size: 30px; } .plantillas { grid-template-columns: repeat(2, 1fr); } .agente { grid-template-columns: 1fr; padding: 26px 20px; gap: 26px; } .agente h3 { font-size: 32px; } .descarga { padding: 60px 16px 50px; } .descarga .titular { font-size: 44px; } .descarga .cab p { font-size: 17px; } .tarjetas { grid-template-columns: 1fr; } .ed { padding: 26px 22px; } .ed .nombre { font-size: 26px; } .ed .acciones { flex-direction: column; align-items: flex-start; } .web { flex-direction: column; align-items: flex-start; } } /* ───── páginas sueltas: Academia y Comunidad ───── */ .sub-portada { position: relative; padding: 110px 56px 90px; background: radial-gradient(1000px 520px at 85% 20%, rgba(18,200,255,0.10), transparent 62%), radial-gradient(800px 500px at 10% 90%, rgba(255,47,166,0.09), transparent 60%), var(--fondo); overflow: hidden; } .sub-portada .titular { font-size: clamp(56px, 7vw, 104px); margin: 26px 0 26px; max-width: 1100px; } .sub-portada .sub { font-size: 20px; color: var(--texto-2); max-width: 640px; } .sub-portada .botones { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; } .capsula.mini.pronto { color: var(--fucsia-texto); margin-left: 6px; } .sub-cab { margin-bottom: 46px; max-width: 1120px; } .sub-cab .titular { font-size: clamp(40px, 4.6vw, 66px); margin-top: 18px; } .sub-p { font-size: 19px; color: var(--texto-2); margin-top: 20px; max-width: 680px; } .rutas-sec, .vitrina { padding: 110px 56px; background: var(--fondo-2); } .vitrina { background: var(--fondo); } .rutas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ruta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 14px 14px 24px; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .ruta:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(20,22,30,0.10); } .ruta-foto { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: #111; margin-bottom: 18px; } .ruta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); } .ruta:hover .ruta-foto img { transform: scale(1.05); } .ruta-foto .capsula { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.92); } .ruta .etiqueta, .ruta h3, .ruta p, .ruta ul { margin-left: 8px; margin-right: 8px; } .ruta h3 { font-family: var(--titular); font-size: 28px; letter-spacing: -0.02em; margin-top: 8px; color: var(--carbon); } .ruta .lecciones { font-family: var(--mono); font-size: 12px; color: var(--texto-3); margin-top: 4px; } .ruta ul { list-style: none; margin-top: 16px; display: grid; gap: 7px; font-size: 15px; color: var(--carbon); } .ruta li::before { content: "▸ "; color: var(--fucsia-texto); } .ruta-final { display: flex; flex-direction: column; justify-content: center; padding: 30px; background: linear-gradient(135deg, rgba(255,47,166,0.08), rgba(18,200,255,0.08)), var(--tarjeta); } .ruta-final h3 { font-size: 34px; margin: 14px 8px 10px; } .ruta-final p { color: var(--texto-2); font-size: 16px; } .sub-tres { padding: 100px 56px; background: var(--fondo); } .sub-tres .principios { max-width: 1240px; } .vitrina + .sub-tres { padding-top: 10px; } .funciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .funciones .num, .sub-tres .num { font-family: var(--mono); font-size: 12px; color: var(--fucsia-texto); } .huecos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .hueco { aspect-ratio: 4/5; border: 1.5px dashed var(--borde-2); border-radius: 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; gap: 10px; background: rgba(255,255,255,0.45); transition: border-color .25s ease, background .25s ease, transform .35s ease; } a.hueco:hover { border-color: var(--fucsia-texto); background: #fff; transform: translateY(-3px); } .hueco .mas { width: 56px; height: 56px; border-radius: 50%; background: var(--carbon); color: #fff; font-size: 30px; line-height: 54px; } .hueco b { font-family: var(--titular); font-size: 24px; letter-spacing: -0.02em; color: var(--carbon); } .hueco small { color: var(--texto-2); font-size: 15px; max-width: 240px; } .hueco.vacio { background: repeating-linear-gradient(135deg, rgba(29,29,32,0.03) 0 12px, transparent 12px 24px); } .pagina-academia .menu a[href="/academia"], .pagina-comunidad .menu a[href="/comunidad"] { color: var(--carbon); background: rgba(29,29,32,0.06); } @media (max-width: 900px) { .sub-portada { padding: 56px 16px 60px; } .sub-portada .titular { font-size: 52px; } .sub-portada .sub { font-size: 17px; } .sub-portada .botones { flex-direction: column; align-items: stretch; } .rutas-sec, .vitrina, .sub-tres { padding: 64px 16px; } .sub-cab { margin-bottom: 28px; } .sub-cab .titular { font-size: 38px; } .rutas, .funciones, .huecos { grid-template-columns: 1fr; } .hueco { aspect-ratio: auto; min-height: 220px; } .hueco.vacio { display: none; } } @media (min-width: 901px) and (max-width: 1180px) { .rutas { grid-template-columns: repeat(2, 1fr); } .funciones { grid-template-columns: repeat(2, 1fr); } } /* ───── 18-oct noche: menos cajas, más cine ───── */ .panel-dentro::before { content: ""; position: absolute; top: -7px; left: var(--mm-flecha, 60px); width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--borde); border-top: 1px solid var(--borde); transform: rotate(45deg); } .etiqueta.claro { color: rgba(255,255,255,0.86); } .etiqueta.claro::before { background: var(--fucsia); } /* franja de cine */ .cine { position: relative; overflow: hidden; background: #0b0b0d; color: #fff; aspect-ratio: 2.4 / 1; min-height: 460px; max-height: 760px; width: 100%; } .cine-video { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transform: translateY(var(--py, 0px)) scale(1.04); will-change: transform; } .cine-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,9,0.78) 0%, rgba(5,6,9,0.35) 45%, rgba(5,6,9,0) 70%), linear-gradient(0deg, rgba(5,6,9,0.55), rgba(5,6,9,0) 40%); } .cine-texto { position: absolute; left: 56px; bottom: 64px; max-width: 640px; z-index: 2; } .cine .titular { color: #fff; font-size: clamp(46px, 5.6vw, 84px); margin: 18px 0 18px; } .cine .titular span { color: rgba(255,255,255,0.62); font-weight: 400; } .cine p { font-size: 19px; color: rgba(255,255,255,0.82); max-width: 520px; } .cine .pausa { right: 24px; bottom: 24px; } .cine-credito { position: absolute; right: 72px; bottom: 32px; font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,0.55); z-index: 2; } /* galería de plantillas */ .galeria { padding: 46px 0 10px; border-top: 1px solid var(--borde); } .galeria-cab { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 40px; margin-bottom: 26px; } .galeria-cab .etiqueta { grid-column: 1 / -1; } .galeria-cab h3 { font-family: var(--titular); font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.03em; color: var(--carbon); } .galeria-cab p { color: var(--texto-3); font-size: 14px; font-family: var(--mono); } .galeria-pista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; } .pl { scroll-snap-align: start; position: relative; border-radius: 14px; overflow: hidden; background: #111; aspect-ratio: 9 / 16; cursor: pointer; } .pl video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .pl:hover video { transform: scale(1.03); } .pl figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-family: var(--mono); font-size: 12px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent); } /* ficha técnica de Delivery */ .ficha { font-family: var(--mono); border-top: 1px solid var(--carbon); } .ficha-cab { display: flex; align-items: baseline; gap: 16px; padding: 22px 0 18px; border-bottom: 1px solid var(--borde-2); font-size: 13px; color: var(--texto-2); letter-spacing: 0.02em; } .ficha-num { font-family: var(--titular); font-weight: 700; font-size: clamp(64px, 6vw, 92px); letter-spacing: -0.04em; line-height: 0.9; color: var(--carbon); } .ficha-fila { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--borde); font-size: 14px; color: var(--texto-2); align-items: baseline; transition: background .2s ease, padding .2s ease; } .ficha-fila span:first-child { color: var(--carbon); font-weight: 600; } .ficha-fila b { font-weight: 600; color: var(--carbon); white-space: nowrap; } .ficha-fila b i { font-style: normal; font-family: var(--titular); font-size: 20px; letter-spacing: -0.02em; } .ficha-fila:hover { background: rgba(255,255,255,0.5); padding-left: 8px; padding-right: 8px; } /* agente sin caja: texto + panel con la cara de la app */ .agente { margin-top: 0; border: 0; border-top: 1px solid var(--borde); border-radius: 0; padding: 70px 0 10px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; background: none; overflow: visible; align-items: center; } .agente h3 { font-size: clamp(36px, 3.6vw, 54px); } .cerebros { gap: 0; margin-top: 26px; } .cerebros span { border: 0; border-radius: 0; padding: 0 16px 0 0; margin-right: 16px; background: none; border-right: 1px solid var(--borde-2); font-size: 12.5px; color: var(--carbon); } .cerebros span:last-child { border-right: 0; } .panel-agente { background: #15161a; border-radius: 16px; border: 1px solid #2a2b30; box-shadow: 0 40px 80px rgba(20,22,30,0.25); overflow: hidden; color: #e6e7ea; } .pa-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #26272c; font-size: 14px; } .pa-cab b { font-family: var(--titular); font-weight: 600; letter-spacing: -0.01em; } .pa-estado { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #8d8f96; display: flex; align-items: center; gap: 6px; } .pa-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 10px var(--cian); animation: parpadea 2.2s ease-in-out infinite; } .panel-agente .conversacion { padding: 22px 18px 10px; min-height: 250px; } .panel-agente .burbuja.tu { background: #2b2c32; color: #f1f1f3; } .panel-agente .burbuja.ia { background: #1c1d22; border: 1px solid #303138; color: #e6e7ea; } .panel-agente .burbuja.ia .etiqueta { color: var(--cian); } .panel-agente .burbuja.ia .etiqueta::before { background: var(--cian); } .pa-pie { margin: 6px 18px 18px; border: 1px solid #303138; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #6f7178; display: flex; align-items: center; gap: 4px; } .pa-pie i { width: 2px; height: 16px; background: var(--fucsia); animation: parpadea 1s steps(2) infinite; } /* Lite y Pro sin cajas */ .tarjetas.sin-caja { gap: 64px; } .tarjetas.sin-caja .ed { background: none; border: 0; border-top: 2px solid var(--borde-2); border-radius: 0; box-shadow: none; padding: 30px 0 0; } .tarjetas.sin-caja .ed.pro { border-top-color: var(--fucsia); background: none; } .tarjetas.sin-caja .ed:hover { transform: none; box-shadow: none; } .js .revela.visto.ed:hover { transform: none; } .web { border: 0; border-top: 1px solid var(--borde); border-radius: 0; background: none; padding: 24px 0 0; margin-top: 46px; } /* titulares que aparecen por líneas */ .js .linea-a-linea { clip-path: inset(0 0 100% 0); transform: translateY(26px); opacity: 1; transition: clip-path 1.15s cubic-bezier(.7,0,.2,1), transform 1.15s cubic-bezier(.2,.7,.2,1); } .js .linea-a-linea.visto { clip-path: inset(0 0 -14% 0); transform: none; } .pie-cols .todos { color: var(--fucsia-texto); font-weight: 600; } @media (max-width: 900px) { .cine { aspect-ratio: auto; min-height: 560px; } .cine-texto { left: 16px; right: 16px; bottom: 70px; } .cine .titular { font-size: 44px; } .cine p { font-size: 16px; } .cine-velo { background: linear-gradient(0deg, rgba(5,6,9,0.85) 0%, rgba(5,6,9,0.25) 70%); } .cine-credito { left: 16px; right: auto; bottom: 22px; } .galeria-cab { grid-template-columns: 1fr; } .galeria-pista { grid-auto-columns: 62%; } .ficha-fila { grid-template-columns: 1fr auto; } .ficha-fila span:nth-child(2) { display: none; } .agente { grid-template-columns: 1fr; gap: 30px; padding-top: 46px; } .cerebros span { margin-bottom: 8px; } .tarjetas.sin-caja { gap: 40px; } .pie-cols { grid-template-columns: 1fr 1fr; } .panel-dentro { width: auto; margin: 0; } } @media (min-width: 901px) and (max-width: 1180px) { .pie-cols { grid-template-columns: repeat(3, 1fr); } } /* página de Modelos */ .cifras { display: flex; gap: clamp(28px, 5vw, 72px); margin-top: 44px; flex-wrap: wrap; } .cifras div { display: grid; gap: 4px; border-top: 1px solid var(--carbon); padding-top: 14px; min-width: 160px; } .cifras b { font-family: var(--titular); font-size: clamp(48px, 5vw, 72px); letter-spacing: -0.04em; line-height: 0.95; color: var(--carbon); } .cifras span { font-family: var(--mono); font-size: 12px; color: var(--texto-2); letter-spacing: 0.04em; } .modelos-sec { padding: 40px 56px 100px; background: var(--fondo-2); } .mod-tipo { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 34px 0; border-top: 1px solid var(--borde-2); } .mod-tipo-cab { display: flex; align-items: baseline; gap: 12px; } .mod-tipo-cab h2 { font-family: var(--titular); font-size: 28px; letter-spacing: -0.02em; color: var(--carbon); } .mod-n { font-family: var(--mono); font-size: 13px; color: var(--texto-3); } .mod-lista { list-style: none; columns: 3; column-gap: 32px; } .mod-lista li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 16px; color: var(--carbon); transition: color .2s ease, padding .2s ease; } .mod-lista li:hover { color: var(--fucsia-texto); padding-left: 6px; } .mod-kulexov b { font-family: var(--titular); font-size: clamp(40px, 4vw, 60px); letter-spacing: -0.03em; color: var(--carbon); line-height: 1; } .mod-kulexov p { color: var(--texto-2); font-size: 17px; max-width: 560px; margin-top: 10px; } .mod-nota { margin-top: 30px; font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); } .pagina-modelos .menu a[href="/modelos"] { color: var(--carbon); background: rgba(29,29,32,0.06); } @media (max-width: 900px) { .modelos-sec { padding: 20px 16px 60px; } .mod-tipo { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; } .mod-lista { columns: 1; } } @media (min-width: 901px) and (max-width: 1180px) { .mod-lista { columns: 2; } .mod-tipo { grid-template-columns: 220px 1fr; } } /* galería en rejilla con filtros + looks */ .galeria-cab .filtros { grid-column: 1 / -1; display: flex; gap: 6px 26px; flex-wrap: wrap; margin-top: 18px; border-bottom: 1px solid var(--borde); } .filtros button { font: 500 15px var(--cuerpo); background: none; border: 0; padding: 10px 0 12px; color: var(--texto-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; } .filtros button small { font-family: var(--mono); font-size: 11px; color: var(--texto-3); margin-left: 4px; } .filtros button:hover { color: var(--carbon); } .filtros button.on { color: var(--carbon); border-bottom-color: var(--fucsia); } .galeria-cab h3 .gal-n, .galeria-cab h3 .gal-n2 { color: var(--fucsia-texto); } .galeria-pista.rejilla { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); overflow: visible; scroll-snap-type: none; gap: 14px; } .js .pl.oculta { display: none; } .pl.aparece { animation: entra .6s cubic-bezier(.2,.7,.2,1) both; } .ver-todas { display: block; margin: 26px auto 0; font: 600 15px var(--cuerpo); color: var(--carbon); background: none; border: 1px solid var(--borde-2); border-radius: 999px; padding: 12px 24px; cursor: pointer; transition: background .15s ease; } .ver-todas:hover { background: rgba(255,255,255,0.6); } .ver-todas b { font-family: var(--titular); } .ver-todas[hidden] { display: none; } .looks { padding: 46px 0 10px; border-top: 1px solid var(--borde); margin-top: 46px; } .looks-rejilla { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .looks-rejilla figure { margin: 0; } .looks-rejilla img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; } .looks-rejilla figure:hover img { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(20,22,30,0.18); } .looks-rejilla figcaption { font-family: var(--mono); font-size: 12px; color: var(--texto-2); margin-top: 8px; } .looks-rejilla figure:first-child figcaption { color: var(--fucsia-texto); } @media (max-width: 900px) { .galeria-pista.rejilla { grid-template-columns: repeat(2, 1fr); } .looks-rejilla { grid-template-columns: repeat(2, 1fr); } .filtros { gap: 4px 18px; } } @media (min-width: 901px) and (max-width: 1180px) { .looks-rejilla { grid-template-columns: repeat(4, 1fr); } .looks-rejilla figure:nth-child(n+9) { display: none; } } .menu, .menu > a, .menu .abre, .acciones-barra a { white-space: nowrap; } .menu { flex-wrap: nowrap; min-width: 0; } .menu .panel { white-space: normal; } .panel-dentro { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr); } .panel-dentro.cuatro { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr); } @media (min-width: 901px) and (max-width: 1360px) { .acciones-barra .entrar, .menu .nav-ed { display: none; } .menu { margin-left: 18px; gap: 2px; } .menu > a, .menu .abre { padding: 8px 9px; font-size: 14.5px; } } /* Modelos v2: menú, fichas, buscador */ .panel-dentro.cuatro { grid-template-columns: 1fr 1fr 1fr 1.05fr; } .panel a b .cuenta { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--texto-3); } .destacado.kulexov { background: linear-gradient(160deg, #1d1d20, #2e2f34) !important; color: #f1f1f3 !important; } .destacado.kulexov:hover { background: linear-gradient(160deg, #111114, #2a2b30) !important; } .destacado.kulexov .etiqueta { color: #ff6fc0; } .destacado.kulexov b { color: #fff; font-size: 28px !important; } .destacado.kulexov small { color: #b9bbc1 !important; } .kx-cara { display: block; width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.06); padding: 6px; margin-bottom: 4px; } .ver-modelos { margin-top: 10px; font-weight: 600; color: #fff; font-size: 14px; } .mod-kulexov-banda { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: center; padding: 28px 32px; border-radius: 18px; background: linear-gradient(135deg, #1d1d20, #2e2f34); color: #e6e7ea; margin: 10px 0 34px; } .mod-kulexov-banda .etiqueta { color: #ff6fc0; } .mod-kulexov-banda b { display: block; font-family: var(--titular); font-size: clamp(40px, 4vw, 58px); letter-spacing: -0.03em; color: #fff; line-height: 1; margin-top: 8px; } .mod-kulexov-banda p { color: #b9bbc1; font-size: 17px; } .mod-herramientas { position: sticky; top: 74px; z-index: 5; background: rgba(245,245,247,0.92); backdrop-filter: blur(10px); padding: 14px 0; margin-bottom: 10px; border-bottom: 1px solid var(--borde); display: grid; gap: 12px; } .mod-buscar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde-2); border-radius: 999px; padding: 10px 18px; max-width: 560px; } .mod-buscar input { border: 0; outline: 0; font: 15px var(--cuerpo); width: 100%; background: transparent; color: var(--carbon); } .mod-buscar .lupa { width: 14px; height: 14px; border: 2px solid var(--texto-3); border-radius: 50%; position: relative; flex: none; } .mod-buscar .lupa::after { content: ""; position: absolute; width: 6px; height: 2px; background: var(--texto-3); right: -5px; bottom: -3px; transform: rotate(45deg); } .mod-chips { display: flex; gap: 6px 22px; flex-wrap: wrap; } .mod-chips button { font: 500 14.5px var(--cuerpo); background: none; border: 0; padding: 6px 0 8px; color: var(--texto-2); cursor: pointer; border-bottom: 2px solid transparent; } .mod-chips button small { font-family: var(--mono); font-size: 11px; color: var(--texto-3); margin-left: 3px; } .mod-chips button:hover { color: var(--carbon); } .mod-chips button.on { color: var(--carbon); border-bottom-color: var(--fucsia); } .mod-verbo { padding: 40px 0 10px; } .mod-verbo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--carbon); padding-top: 18px; margin-bottom: 8px; } .mod-verbo-cab .titular { font-size: clamp(34px, 3.4vw, 50px); } .mod-verbo-cab .mod-n { font-family: var(--mono); font-size: 14px; color: var(--texto-3); letter-spacing: 0; font-weight: 400; vertical-align: middle; } .mod-verbo-cab p { color: var(--texto-2); font-size: 16px; } .mod-grupo { padding: 22px 0 8px; } .mod-grupo-t { font-family: var(--titular); font-size: 21px; letter-spacing: -0.02em; color: var(--carbon); margin-bottom: 14px; } .mod-grupo-t small { font-family: var(--mono); font-size: 12px; color: var(--texto-3); font-weight: 400; } .mod-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .mod-tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .mod-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20,22,30,0.12); } .js .revela.visto.mod-tarjeta:hover { transform: translateY(-3px); } .mod-cara { position: relative; height: 92px; background: #17181c; display: flex; align-items: flex-end; gap: 8px; padding: 12px; overflow: hidden; --c1: #ff2fa6; --c2: #12c8ff; } .mod-cara::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--c1), transparent 65%); opacity: .55; transition: transform .6s ease; } .mod-cara::after { content: ""; position: absolute; left: -30px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--c2), transparent 65%); opacity: .35; } .mod-tarjeta:hover .mod-cara::before { transform: translate(-14px, 10px) scale(1.1); } .mod-glifo { position: absolute; top: 14px; left: 14px; width: 22px; height: 22px; z-index: 1; opacity: .9; } .t-video .mod-glifo, .t-edicion .mod-glifo, .t-movimiento .mod-glifo { width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .t-imagen .mod-glifo, .t-ampliar .mod-glifo { border: 2px solid #fff; border-radius: 4px; } .t-avatar .mod-glifo, .t-labios .mod-glifo { border: 2px solid #fff; border-radius: 50%; } .t-voz .mod-glifo, .t-audio .mod-glifo { width: 22px; height: 16px; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px); -webkit-mask: linear-gradient(0deg, #000 30%, transparent 30%, transparent 40%, #000 40%); } .t-imagen .mod-cara { --c1: #12c8ff; --c2: #ff2fa6; } .t-edicion .mod-cara { --c1: #9b5cff; --c2: #12c8ff; } .t-movimiento .mod-cara { --c1: #ffb020; --c2: #ff2fa6; } .t-ampliar .mod-cara { --c1: #3b82f6; --c2: #12c8ff; } .t-audio .mod-cara { --c1: #22c55e; --c2: #12c8ff; } .t-avatar .mod-cara { --c1: #ff7a45; --c2: #ff2fa6; } .t-labios .mod-cara { --c1: #ff2fa6; --c2: #ff7a45; } .t-voz .mod-cara { --c1: #14b8a6; --c2: #9b5cff; } .mod-tipo-et { position: relative; z-index: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-right: auto; } .mod-badge { position: relative; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 2px 8px; } .mod-badge.dest { background: var(--fucsia); border-color: var(--fucsia); color: #160611; } .mod-tarjeta h3 { font-family: var(--titular); font-size: 20px; letter-spacing: -0.02em; color: var(--carbon); padding: 14px 16px 0; line-height: 1.15; } .mod-empresa { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); padding: 3px 16px 0; } .mod-tarjeta dl { padding: 12px 16px 16px; display: grid; gap: 5px; } .mod-tarjeta dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-top: 1px solid #f0f0f2; padding-top: 5px; } .mod-tarjeta dt { color: var(--texto-3); } .mod-tarjeta dd { color: var(--carbon); font-weight: 600; text-align: right; } .mod-tarjeta.oculta, .mod-grupo.oculta, .mod-verbo.oculta { display: none; } .mod-vacio { padding: 40px 0; color: var(--texto-2); font-size: 17px; } @media (max-width: 900px) { .mod-kulexov-banda { grid-template-columns: 1fr; padding: 22px; } .mod-herramientas { top: 64px; } .mod-rejilla { grid-template-columns: repeat(2, 1fr); gap: 10px; } .mod-tarjeta h3 { font-size: 17px; } .mod-tarjeta dl div { font-size: 12px; flex-direction: column; gap: 0; } .mod-tarjeta dd { text-align: left; } } /* Delivery ancho (vídeo real de la Pro) */ .modulo-ancho { padding: 56px 0 46px; border-top: 1px solid var(--borde); } .ancho-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; margin-bottom: 28px; } .ancho-cab h3 { font-family: var(--titular); font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -0.03em; line-height: 1.05; margin: 14px 0; color: var(--carbon); font-weight: 700; } .ancho-cab p { color: var(--texto-2); font-size: 17px; max-width: 520px; } .cifras-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cifras-dl div { border-top: 1px solid var(--carbon); padding-top: 12px; display: grid; gap: 4px; } .cifras-dl b { font-family: var(--titular); font-size: clamp(34px, 3.4vw, 50px); letter-spacing: -0.04em; line-height: 1; color: var(--carbon); } .cifras-dl span { font-family: var(--mono); font-size: 12px; color: var(--texto-2); line-height: 1.4; } .marco-app.ancho video { width: 100%; height: auto; } .dl-nota { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); margin-top: 10px; } .dl-abajo { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 34px; align-items: start; } .dl-specs { display: grid; gap: 0; border-top: 1px solid var(--carbon); } .dl-specs div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--borde); } .dl-specs dt { font-family: var(--mono); font-size: 12px; color: var(--texto-3); letter-spacing: 0.04em; padding-top: 2px; } .dl-specs dd { font-size: 15px; color: var(--carbon); font-weight: 500; } @media (max-width: 900px) { .ancho-cab, .dl-abajo { grid-template-columns: 1fr; gap: 22px; } .cifras-dl { gap: 10px; } .cifras-dl b { font-size: 30px; } .dl-specs div { grid-template-columns: 90px 1fr; } } /* Modelos de Wiri (propios) */ .mod-propios { margin: 10px 0 34px; } .mod-propios-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .mod-propios-cab p { color: var(--texto-2); font-size: 15px; } .mod-propios-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .mod-propio.grande { grid-column: span 2; grid-row: span 2; align-content: end; } .capsula.mini.local { color: #9fe6ff !important; border-color: #9fe6ff !important; } .mod-propio { position: relative; border-radius: 18px; padding: 24px 24px 22px; background: linear-gradient(150deg, #1d1d20, #2e2f34); color: #e6e7ea; display: grid; gap: 8px; align-content: start; overflow: hidden; } .mod-propio::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,47,166,0.35), transparent 65%); } .mod-propio .capsula { justify-self: start; color: #ff6fc0; border-color: #ff6fc0; position: relative; z-index: 1; } .mod-propio .mod-tipo-et { color: rgba(255,255,255,0.6); } .mod-propio b { font-family: var(--titular); font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -0.03em; color: #fff; line-height: 1; position: relative; z-index: 1; } .mod-propio.grande b { font-size: clamp(40px, 4vw, 60px); } .mod-propio p { color: #b9bbc1; font-size: 15px; position: relative; z-index: 1; } @media (max-width: 900px) { .mod-propios-rejilla { grid-template-columns: 1fr; } .mod-propio.grande { grid-column: auto; grid-row: auto; } } @media (min-width: 901px) and (max-width: 1180px) { .mod-propios-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Soporte */ .soporte-rutas { padding: 70px 56px; background: var(--fondo-2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; } .so-ruta { position: relative; display: grid; gap: 6px; padding: 24px 40px 24px 0; border-top: 1px solid var(--borde-2); transition: padding .25s ease; } .so-ruta:hover { padding-left: 8px; } .so-ruta .num { font-family: var(--mono); font-size: 12px; color: var(--fucsia-texto); } .so-ruta h3 { font-family: var(--titular); font-size: 22px; letter-spacing: -0.02em; color: var(--carbon); } .so-ruta p { color: var(--texto-2); font-size: 15px; } .so-ruta .flecha { position: absolute; right: 6px; top: 26px; font-size: 20px; color: var(--texto-3); transition: transform .25s ease, color .25s ease; } .so-ruta:hover .flecha { transform: translateX(4px); color: var(--fucsia-texto); } .so-req { max-width: 900px; } .so-req div { grid-template-columns: 200px 1fr; } .pagina-soporte .menu .grupo:nth-of-type(3) .abre { color: var(--carbon); } @media (max-width: 900px) { .soporte-rutas { grid-template-columns: 1fr; padding: 40px 16px; } .so-req div { grid-template-columns: 1fr; gap: 4px; } } @media (min-width: 901px) and (max-width: 1180px) { .soporte-rutas { grid-template-columns: repeat(2, 1fr); } } /* ───── Portada de Wiri AI (empresa) ───── */ .wa-portada { padding: 72px 56px 70px; background: radial-gradient(1100px 600px at 85% 10%, rgba(18,200,255,0.10), transparent 62%), radial-gradient(900px 600px at 5% 95%, rgba(255,47,166,0.09), transparent 60%), var(--fondo); } .wa-texto { max-width: 980px; } .wa-portada .titular { font-size: clamp(56px, 7vw, 104px); margin: 22px 0 22px; } .wa-portada .sub { font-size: 20px; color: var(--texto-2); max-width: 680px; } .wa-portada .botones { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; } .escaparate { margin-top: 54px; } .esc-marco { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 7; background: #0d0d10; box-shadow: 0 40px 90px rgba(20,22,30,0.22); } .esc-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .9s ease; color: #fff; } .esc-slide.activo { opacity: 1; z-index: 1; } .esc-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 7s ease-out; } .esc-slide.activo .esc-media { transform: scale(1); } .esc-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,9,0.82) 0%, rgba(5,6,9,0.45) 42%, rgba(5,6,9,0) 72%), linear-gradient(0deg, rgba(5,6,9,0.5), transparent 45%); } .esc-texto { position: absolute; left: 44px; bottom: 42px; max-width: 540px; display: grid; gap: 12px; z-index: 2; } .esc-texto b { font-family: var(--titular); font-size: clamp(38px, 4.4vw, 66px); letter-spacing: -0.035em; line-height: 1; } .esc-texto > span:not(.etiqueta):not(.esc-cta) { font-size: 18px; color: rgba(255,255,255,0.82); } .esc-cta { justify-self: start; margin-top: 8px; background: #fff; color: var(--carbon); font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 999px; transition: transform .2s ease; } .esc-slide:hover .esc-cta { transform: translateX(4px); } .esc-texto > * { transform: translateY(14px); opacity: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease; } .esc-slide.activo .esc-texto > * { transform: none; opacity: 1; } .esc-slide.activo .esc-texto > :nth-child(2) { transition-delay: .08s; } .esc-slide.activo .esc-texto > :nth-child(3) { transition-delay: .16s; } .esc-slide.activo .esc-texto > :nth-child(4) { transition-delay: .24s; } .esc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; } .esc-tabs button { position: relative; text-align: left; background: none; border: 0; border-top: 2px solid var(--borde-2); padding: 12px 0 4px; font: 500 15px var(--cuerpo); color: var(--texto-2); cursor: pointer; } .esc-tabs button:hover { color: var(--carbon); } .esc-tabs button.on { color: var(--carbon); } .esc-tabs button i { position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--fucsia); } .esc-tabs button.on i { width: 100%; } .escaparate.corriendo .esc-tabs button.on i { width: 0; animation: esc-progreso 6s linear forwards; } @keyframes esc-progreso { to { width: 100%; } } .wa-pilares { padding: 100px 56px; background: var(--fondo-2); } .wa-pilares .principios > a { display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--borde-2); padding-top: 18px; color: inherit; transition: transform .25s ease; } .wa-pilares .principios > a:hover { transform: translateY(-3px); } .wa-pilares .principios h3 { font-size: 26px; } .wa-pilares .principios p { font-size: 16px; } .wa-pilares .mas { font-weight: 600; color: var(--fucsia-texto); font-size: 15px; margin-top: 6px; } .wa-modelos { padding: 100px 56px; background: var(--fondo); } .mod-propios-rejilla.tres { grid-template-columns: 1.4fr 1fr 1fr; } .mod-propios-rejilla.tres .mod-propio.grande { grid-column: auto; grid-row: auto; } .wa-ver { margin-top: 26px; } .wa-empresas { padding: 100px 56px; background: var(--fondo-2); display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; } .wa-empresas .titular { font-size: clamp(40px, 4.6vw, 66px); margin: 18px 0; } .wa-empresas p { color: var(--texto-2); font-size: 18px; max-width: 540px; margin-bottom: 28px; } .wa-lista { list-style: none; border-top: 1px solid var(--carbon); } .wa-lista li { padding: 18px 0; border-bottom: 1px solid var(--borde); font-family: var(--titular); font-size: 21px; letter-spacing: -0.015em; color: var(--carbon); } .wa-lista li::before { content: "■ "; color: var(--fucsia); font-size: 11px; vertical-align: 4px; } .wa-descargar { padding: 100px 56px; background: var(--fondo); } .wa-descargas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .wa-des { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--borde-2); padding-top: 22px; } .wa-des.pro { border-top-color: var(--fucsia); } .wa-des .capsula { justify-self: start; } .wa-des.pro .capsula { color: var(--fucsia-texto); } .wa-des b { font-family: var(--titular); font-size: 28px; letter-spacing: -0.02em; color: var(--carbon); } .wa-des p { color: var(--texto-2); font-size: 16px; min-height: 48px; } .wa-des .boton { justify-self: start; margin-top: 6px; } .mm-producto { background: #f4f4f6; margin-bottom: 8px; } .mm-producto b { font-family: var(--titular); font-size: 18px !important; } @media (max-width: 900px) { .wa-portada { padding: 40px 16px 50px; } .wa-portada .titular { font-size: 52px; } .wa-portada .sub { font-size: 17px; } .wa-portada .botones { flex-direction: column; align-items: stretch; } .esc-marco { aspect-ratio: 4 / 5; border-radius: 16px; } .esc-texto { left: 20px; right: 20px; bottom: 24px; } .esc-texto b { font-size: 36px; } .esc-texto > span:not(.etiqueta):not(.esc-cta) { font-size: 15px; } .esc-velo { background: linear-gradient(0deg, rgba(5,6,9,0.88) 0%, rgba(5,6,9,0.2) 70%); } .esc-tabs { grid-template-columns: repeat(4, minmax(110px, 1fr)); overflow-x: auto; } .esc-tabs button { font-size: 13px; } .wa-pilares, .wa-modelos, .wa-empresas, .wa-descargar { padding: 60px 16px; } .wa-empresas, .wa-descargas { grid-template-columns: 1fr; gap: 30px; } .mod-propios-rejilla.tres { grid-template-columns: 1fr; } .wa-lista li { font-size: 18px; } } @media (min-width: 901px) and (max-width: 1024px) { .menu { display: none !important; } .hamburguesa { display: flex; } .acciones-barra .entrar, .acciones-barra > .idioma { display: none; } } @media (min-width: 1025px) and (max-width: 1120px) { .barra { padding-left: 24px; padding-right: 24px; } .menu { margin-left: 10px; gap: 0; } .menu > a, .menu .abre { padding: 7px 7px; font-size: 14px; } .lockup .nombre { font-size: 19px; } .acciones-barra .abrir { padding: 8px 14px; font-size: 14px; } } @media (min-width: 901px) and (max-width: 1080px) { .menu .nav-ed { display: none; } .menu { margin-left: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .revela, .js .revela-img, .js .agente .burbuja, .js .hibrido .mano-grande { opacity: 1; transform: none; } .js .hibrido .titular { clip-path: none; transform: none; } .js .hibrido .costura-diag { transform: rotate(-11deg); } } /* 19-oct · símbolos de los modelos (sesión Identidad visual Hybrid). Cian = la máquina; fucsia solo en el toque humano de Kulexov. */ .con-simbolos .mod-propio::after { background: radial-gradient(circle, rgba(18,200,255,0.22), transparent 65%); } .mod-propio .mod-simbolo { position: relative; z-index: 1; width: 76px; height: 76px; margin: -4px 0 6px -6px; } .mod-propio.grande .mod-simbolo { position: absolute; right: 26px; top: 26px; width: min(44%, 260px); height: auto; aspect-ratio: 1; margin: 0; } @media (max-width: 900px) { .mod-propio.grande .mod-simbolo { position: relative; right: auto; top: auto; width: 150px; margin: 0 0 8px; } } .mod-cara .mod-logo { position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; z-index: 1; object-fit: contain; } /* 20-oct · modelos recién llegados: «Nuevo · Beta» en fucsia */ .mod-badge.nuevo { color: var(--fucsia-texto); border-color: currentColor; } .mod-cara .mod-badge.nuevo { color: #ff6fc0; border-color: #ff6fc0; background: rgba(255,47,166,.14); font-weight: 700; } .mod-nuevos .mod-verbo-cab h2 .mod-n { color: var(--fucsia-texto); } /* 20-oct · Wiri ID: con la sesión abierta, «Entrar» pasa a «Mi cuenta» con la foto (o la inicial) */ .con-sesion { display: inline-flex !important; align-items: center; gap: 8px; } .con-sesion::before { content: attr(data-inicial); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--foto, var(--gris-simbolo)) center / cover no-repeat; color: #fff; font: 700 11px/24px var(--cuerpo); text-align: center; } /* ═════════ 20-oct · TARJETAS QUE ABREN SU MODELO + LA PÁGINA DE CADA MODELO (wiri.ai/modelos/) ═════════ */ .mod-tarjeta { position: relative; } .mod-tarjeta .mod-enlace { color: inherit; text-decoration: none; } .mod-tarjeta .mod-enlace::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 16px; } /* toda la tarjeta se puede pulsar */ .mod-tarjeta .mod-enlace:focus-visible { outline: none; } .mod-tarjeta:has(.mod-enlace:focus-visible) { outline: 2px solid var(--fucsia); outline-offset: 2px; } /* la miniatura del vídeo OFICIAL dentro de la cabecera oscura; los colores siguen moviéndose por encima */ .mod-cara .mod-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .62; filter: saturate(1.1); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s ease; } .mod-tarjeta.con-foto .mod-cara::before, .mod-tarjeta.con-foto .mod-cara::after { z-index: 1; mix-blend-mode: screen; } .mod-tarjeta.con-foto .mod-cara { background: linear-gradient(180deg, rgba(23,24,28,0) 30%, rgba(23,24,28,.78)), #17181c; } .mod-tarjeta.con-foto .mod-cara > :not(.mod-foto) { z-index: 2; } .mod-tarjeta.con-foto:hover .mod-foto { transform: scale(1.06); opacity: .78; } .pagina-modelo main { background: var(--fondo); } .md-portada { position: relative; padding: 46px 56px 64px; background: radial-gradient(1000px 520px at 85% 10%, rgba(18,200,255,0.10), transparent 62%), radial-gradient(800px 500px at 5% 95%, rgba(255,47,166,0.08), transparent 60%); } .md-volver { display: inline-flex; gap: 6px; font-family: var(--mono); font-size: 13px; color: var(--texto-2); text-decoration: none; } .md-volver:hover { color: var(--fucsia-texto); } .md-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 52px; align-items: center; max-width: 1240px; margin: 30px auto 0; } .md-etiquetas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .md-etiquetas .mod-badge { color: var(--fucsia-texto); border-color: rgba(200,17,122,.45); background: rgba(255,47,166,.07); } .md-texto .titular { font-size: clamp(46px, 5.4vw, 82px); margin: 18px 0 12px; } .md-creador { font-family: var(--mono); font-size: 14px; color: var(--texto-2); } .md-creador b { color: var(--carbon); font-weight: 600; } .md-para { font-size: 19px; line-height: 1.55; color: var(--texto-2); margin-top: 20px; max-width: 560px; } .md-texto .botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .md-media { min-width: 0; } .md-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #0b0c0f; cursor: pointer; box-shadow: 0 30px 70px rgba(20,22,30,.22); } .md-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .md-video:hover img { transform: scale(1.03); } .md-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .md-play { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: rgba(255,47,166,.92); box-shadow: 0 10px 30px rgba(255,47,166,.45); transition: transform .2s ease; } .md-play::after { content: ""; position: absolute; left: 31px; top: 24px; border-left: 22px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } .md-video:hover .md-play { transform: scale(1.08); } .md-credito { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--texto-3); } .md-sin-video.mod-cara { height: auto; aspect-ratio: 16 / 9; border-radius: 18px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; padding: 26px; box-shadow: 0 30px 70px rgba(20,22,30,.18); } .md-sin-video.mod-cara::before { width: 420px; height: 420px; animation: md-flota 9s ease-in-out infinite alternate; } .md-sin-video.mod-cara::after { width: 360px; height: 360px; left: -60px; bottom: -140px; animation: md-flota 11s ease-in-out infinite alternate-reverse; } @keyframes md-flota { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.15); } } .md-sin-video .md-logo { position: absolute; top: 26px; left: 26px; width: 64px; height: 64px; z-index: 1; object-fit: contain; } .md-sin-video .md-glifo { top: 30px; left: 30px; transform: scale(1.8); transform-origin: top left; } .md-sin-video .mod-tipo-et { margin-right: 0; } .md-ver-oficial { position: relative; z-index: 1; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; } .md-ver-oficial:hover { border-bottom-color: #fff; } .md-cuerpo { max-width: 1240px; margin: 0 auto; padding: 10px 56px 90px; display: grid; gap: 18px; } .md-bloque { background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 28px 30px; } .md-h { font-family: var(--titular); font-size: 24px; letter-spacing: -0.02em; color: var(--carbon); margin-bottom: 16px; } .md-lista { display: grid; gap: 10px; list-style: none; padding: 0; } .md-lista li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--texto-2); } .md-lista li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 50%; } .md-lista.si li::before { background: var(--fucsia); box-shadow: 0 0 0 4px rgba(255,47,166,.14); } .md-lista.no li::before { background: var(--texto-3); border-radius: 2px; } .md-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; } .md-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 8px; } .md-dl { display: grid; gap: 0; } .md-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #eef0f2; font-size: 15px; } .md-dl dt { color: var(--texto-3); } .md-dl dd { color: var(--carbon); font-weight: 600; text-align: right; } .md-fuentes { list-style: none; padding: 0; display: grid; gap: 8px; } .md-fuentes a { color: var(--fucsia-texto); text-decoration: none; font-weight: 600; } .md-fuentes a:hover { text-decoration: underline; } .md-pronto p { color: var(--texto-2); font-size: 16px; } .md-nota { margin-top: 6px; } @media (max-width: 900px) { .md-portada { padding: 28px 16px 40px; } .md-cab { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; } .md-cuerpo { padding: 4px 16px 60px; } .md-bloque { padding: 22px 18px; } .md-para { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .md-sin-video.mod-cara::before, .md-sin-video.mod-cara::after { animation: none; } } /* 21-oct-2026 · demo oficial en X (página del modelo) y su marca en la tarjeta */ .md-x { width: 100%; min-height: 220px; } .md-x-cargar { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; font: inherit; } .md-x-cargar .md-x-txt { position: relative; z-index: 2; font-size: 15px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.45); } .md-x-cargar .md-play { position: relative; z-index: 2; } .md-x-cargar[aria-busy="true"] { cursor: progress; opacity: .8; } .md-x .twitter-tweet { margin: 0 auto !important; } .mod-badge.demo { background: rgba(255,47,166,.16); color: #ff2fa6; } /* 21-oct-2026 · demo oficial del creador en la página del modelo (vídeo, imagen o audio) */ .md-con-demo { margin-bottom: 18px; } .md-demo { margin: 0; } .md-demo video, .md-demo img { display: block; width: 100%; max-height: 72vh; object-fit: contain; border-radius: 18px; background: #0b0c0f; box-shadow: 0 18px 40px rgba(20,20,30,.18); } .md-demo-audio { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--fondo-2); } .md-demo audio { width: 100%; } .md-demo .md-credito a { color: inherit; } .md-media-extra { margin-top: 18px; } .md-con-demo { margin-bottom: 0; } a.md-x-cargar { text-decoration: none; } /* 21-oct-2026 · /alternativas: comparativa honesta con otras suites (datos de cada fabricante, con su fuente) */ .cmp-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: 18px; background: var(--tarjeta); } .cmp { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; } .cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); } .cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; } .cmp thead th { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); background: var(--fondo-2); position: sticky; top: 0; } .cmp tbody th { font-weight: 600; color: var(--texto); width: 190px; background: var(--tarjeta); position: sticky; left: 0; z-index: 1; } .cmp .wiri { background: rgba(255,47,166,.06); } .cmp thead .wiri { color: var(--fucsia-texto); box-shadow: inset 0 3px 0 var(--fucsia); } .cmp td small { display: block; color: var(--texto-2); font-size: 13px; margin-top: 4px; } .cmp sup a { color: var(--texto-2); text-decoration: none; font-family: var(--mono); font-size: 11px; margin-left: 2px; } .cmp-nota { margin-top: 14px; font-size: 14px; color: var(--texto-2); } .cmp-puntos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 10px; } .cmp-punto { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 24px; } .cmp-punto h3 { margin: 0 0 8px; font-size: 19px; } .cmp-punto p { margin: 0; color: var(--texto-2); font-size: 15.5px; } .cmp-fuentes { columns: 2 320px; column-gap: 40px; font-size: 14px; color: var(--texto-2); padding-left: 18px; } .cmp-fuentes li { break-inside: avoid; margin-bottom: 8px; } .cmp-fuentes a { color: inherit; } @media (max-width: 760px) { .cmp th, .cmp td { padding: 12px 12px; } .cmp tbody th { width: 130px; } } /* ───────── Página de prensa /prensa (21-oct-2026) ───────── */ .pr-peso { font-weight: 500; opacity: .7; font-size: 13px; } .pr-intro { font-size: 18px; color: var(--texto-2); max-width: 720px; margin-top: 16px; } .pr-textos { background: var(--fondo-2); } .pr-bloques { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px; max-width: 1240px; } .pr-bloque { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 22px 24px 24px; } .pr-bloque header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .pr-bloque p { font-size: 17px; color: var(--carbon); } .pr-bloque.lema { grid-column: 1 / -1; } .pr-bloque.lema p { font-size: clamp(30px, 3.6vw, 48px); } .pr-copiar { font: 600 13px var(--cuerpo); border: 1px solid var(--borde-2); background: var(--fondo-2); color: var(--carbon); border-radius: 999px; padding: 7px 14px; cursor: pointer; flex: none; } .pr-copiar:hover { border-color: var(--carbon); } .pr-copiar.hecho { background: var(--carbon); color: #fff; border-color: var(--carbon); } .pr-ficha, .pr-letras { max-width: 980px; } .pr-ficha div { grid-template-columns: 160px 1fr; } .pr-ficha a, .pr-lista-cuentas a { color: var(--fucsia-texto); } .pr-logos { background: var(--fondo-2); } .pr-rejilla-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1240px; } .pr-logo { border: 1px solid var(--borde); border-radius: 18px; overflow: hidden; background: var(--tarjeta); display: flex; flex-direction: column; } .pr-logo.ancho { grid-column: span 2; } .pr-logo-caja { flex: 1; min-height: 190px; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--carbon); } .pr-logo.claro .pr-logo-caja { background: #f4f4f6; } .pr-logo-caja img { max-height: 150px; width: auto; } .pr-logo:first-child .pr-logo-caja img { max-height: 110px; } .pr-logo figcaption { padding: 14px 16px 16px; display: grid; gap: 8px; } .pr-logo figcaption b { font-size: 15px; } .pr-logo figcaption span { display: flex; flex-wrap: wrap; gap: 6px; } .pr-logo figcaption a { font: 600 12px var(--mono); letter-spacing: .03em; border: 1px solid var(--borde-2); border-radius: 999px; padding: 5px 11px; } .pr-logo figcaption a:hover { border-color: var(--carbon); } .pr-reglas { list-style: none; margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; max-width: 1240px; } .pr-reglas li { position: relative; padding-left: 20px; color: var(--texto-2); font-size: 15px; } .pr-reglas li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--fucsia); } .pr-muestras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1240px; margin-bottom: 36px; } .pr-muestra { display: grid; gap: 4px; } .pr-muestra i { display: block; height: 110px; border-radius: 14px; background: var(--m); border: 1px solid rgba(0,0,0,.08); margin-bottom: 8px; } .pr-muestra b { font-size: 15px; } .pr-muestra code { font: 13px var(--mono); color: var(--texto-2); } .pr-capturas { background: var(--fondo-2); } .pr-rejilla-cap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1240px; } .pr-cap { display: grid; gap: 8px; } .pr-cap img { border-radius: 14px; border: 1px solid #2a2b30; box-shadow: 0 20px 44px rgba(20,22,30,0.16); transition: transform .2s ease; margin-bottom: 6px; } .pr-cap:hover img { transform: translateY(-2px); } .pr-cap small { color: var(--texto-2); font-size: 15px; } .pr-credito { margin-top: 26px; font-size: 13px; color: var(--texto-3); max-width: 900px; } .pr-lista-cuentas { list-style: none; max-width: 980px; border-top: 1px solid var(--carbon); } .pr-lista-cuentas li { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 0; border-bottom: 1px solid var(--borde); align-items: baseline; } .pr-lista-cuentas span { font: 12px var(--mono); color: var(--texto-3); letter-spacing: .04em; width: 140px; text-transform: uppercase; } .pr-lista-cuentas a { font-weight: 600; } @media (max-width: 900px) { .pr-bloques, .pr-rejilla-cap, .pr-reglas { grid-template-columns: 1fr; } .pr-rejilla-logos { grid-template-columns: 1fr; } .pr-logo.ancho { grid-column: auto; } .pr-muestras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-ficha div { grid-template-columns: 100px 1fr; } .pr-lista-cuentas span { width: 100%; } } @media (min-width: 901px) and (max-width: 1180px) { .pr-rejilla-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-muestras { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pr-logo.oscuro .pr-logo-caja { background: #2e2f34; } /* el mismo gris de fondo que traen los PNG oscuros: se funden */ .pr-logo.oscuro:first-child .pr-logo-caja { background: var(--carbon); } /* el símbolo lleva su círculo gris: sobre carbón se ve */ /* revisión «Identidad visual» 21-oct: esquina fija al deslizar en móvil, borde que marca la columna fija y letra más ajustada */ .cmp thead th:first-child { left: 0; z-index: 2; } .cmp tbody th { box-shadow: inset -1px 0 0 var(--borde); } @media (max-width: 760px) { .cmp { min-width: 780px; font-size: 14px; } .cmp td small { font-size: 12.5px; } .cmp tbody th { width: 112px; } } /* 22-oct · tabla Web · Lite · Pro por grupos (Color, Sonido, IA…): fila de título de grupo */ .cmp .cmp-grupo th { background: var(--fondo-2); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fucsia-texto); padding-top: 22px; padding-bottom: 10px; } /* 22-oct · páginas legales (/terminos, /licencia, /privacidad, /reembolsos, /avisos): texto largo y legible */ .legal-portada { padding-bottom: 56px; } .legal-portada .titular { font-size: clamp(40px, 5vw, 72px); } .legal { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 56px; justify-content: center; padding-top: 56px; } .legal-nav { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .legal-nav a { color: var(--texto-2); text-decoration: none; } .legal-nav a[aria-current="page"] { color: var(--fucsia-texto); font-weight: 600; } .legal-texto { font-size: 17px; line-height: 1.7; color: var(--texto); } .legal-texto h2 { font-size: 24px; margin: 48px 0 12px; scroll-margin-top: 96px; } .legal-texto h3 { font-size: 19px; margin: 28px 0 8px; } .legal-texto p, .legal-texto ul, .legal-texto ol { margin: 0 0 14px; } .legal-texto li { margin: 4px 0; } .legal-texto a { color: var(--fucsia-texto); } .legal-texto sub { font-size: 13px; color: var(--texto-2); } .legal-tabla { overflow-x: auto; margin: 16px 0 22px; } .legal-tabla table { border-collapse: collapse; width: 100%; font-size: 15px; } .legal-tabla th, .legal-tabla td { border-bottom: 1px solid var(--borde); padding: 10px 12px; text-align: left; vertical-align: top; } @media (max-width: 860px) { .legal { grid-template-columns: 1fr; gap: 24px; } .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; } } /* 22-oct · enlaces legales del pie */ .pie-legal { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; } .pie-legal a { color: var(--texto-2); text-decoration: none; } .pie-legal a:hover { color: var(--texto); text-decoration: underline; } /* 22-oct · Academia: tutoriales de SynCut (herramientas/academia.py) */ .aca-grupo { margin-top: 44px; } .aca-grupo h3 { font-size: 20px; margin: 0 0 16px; } .aca-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; } .aca-video { margin: 0; } .aca-video .md-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #111; cursor: pointer; } .aca-video .md-video img { width: 100%; height: 100%; object-fit: cover; display: block; } .aca-video .md-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .aca-video figcaption { margin-top: 10px; font-size: 15px; line-height: 1.4; } .aca-video figcaption small { font-family: var(--mono); color: var(--texto-2); margin-right: 4px; }