/* ========================================================================== TOKENS — valores REALES extraídos de la maqueta vía Figma MCP, no aproximados. Steradian Bold: fuente real, cargada desde fonts/Steradian-Bold.otf (la adjuntaste). Lexend queda de respaldo si esa fuente no carga (pedido tuyo). ========================================================================== */ @font-face{ font-family:'Steradian'; src:url('../fonts/Steradian-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } :root{ --bg:#000000; --surface:#121212; --surface-2:#1a1a1a; --text:#f5f3ef; --text-strong:#ffffff; --text-dim:#9a9a94; --line:#2a2a2a; --accent:#fe3759; --accent-ink:#1a0006; --btn-hover-grad:linear-gradient(135deg,#FFB8C6 0%,#D2B1FF 100%); --nav-bg:#ffffff; --nav-fg:#000000; --font-display:'Steradian', 'Lexend', 'Helvetica Neue', Arial, sans-serif; /* real; Lexend de respaldo si Steradian no carga */ --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif; /* real */ --font-nav:'Lexend', 'Helvetica Neue', Arial, sans-serif; /* real, solo para los links del nav */ --font-proto:ui-monospace, 'SF Mono', Menlo, monospace; /* SOLO para el chrome de este prototipo (asset-tags) — no es parte del diseño real */ --container:1500px; /* padding lateral de todas las secciones; el contenedor lo SUMA a su ancho para que el contenido quede exactamente a 1500px en desktop (medido en Figma: el contenido arranca a 210px de un frame de 1920 => 1920 - 2*210 = 1500). Antes el padding se restaba de los 1500 y el contenido quedaba 48px angosto a cada lado. */ --pad-x:clamp(1.25rem,4vw,3rem); --container-box:calc(var(--container) + 2 * var(--pad-x)); --nav-h:70px; --ease:cubic-bezier(.16,.84,.44,1); } *,*::before,*::after{ box-sizing:border-box; } html{ background:var(--bg); scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 34px); } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2{ font-family:var(--font-display); color:var(--text-strong); font-weight:700; /* único peso real disponible de Steradian (Bold) */ letter-spacing:-.05em; /* real: tracking -7.5px sobre 150px = -5% */ text-wrap:balance; margin:0; } /* Los titulos de cada proyecto (.case-name) y de cada area de trabajo (.service-title) pasaron de

/ a

real para que la jerarquia de encabezados sea la misma que la jerarquia visual. El aspecto no cambia: cada clase ya define su tipografia; aca solo se anula el margen por defecto del navegador. */ h3{ margin:0; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } ul{ margin:0; padding:0; list-style:none; } p{ margin:0; } .skip-link{ position:absolute; left:0; top:-40px; z-index:200; background:var(--accent); color:#fff; padding:.6em 1em; font-family:var(--font-proto); font-size:.8rem; transition:top .2s var(--ease); } .skip-link:focus{ top:0; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* ---------- Botones — hover real: degradado lineal #FFB8C6 → #D2B1FF ---------- */ .btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-body); font-weight:500; font-size:.82rem; letter-spacing:.04em; /* Inter Medium, tracking real ~0.7px/14px */ text-transform:uppercase; white-space:nowrap; padding:.9em 1.4em; border-radius:100px; border:1px solid var(--text-strong); transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } /* el hover de .btn-pill pasaba de un degradé (background-image) a un color sólido (background-color) — el navegador no interpola eso, salta de golpe (probé igualar el tipo de valor con un linear-gradient blanco-blanco y tampoco interpola en Chromium). La solución robusta es un crossfade real: una capa blanca aparte, encima del degradé pero DEBAJO del texto (z-index:-1 respecto del botón, que es su propio contexto de stacking), que sube de opacidad 0→1 en hover — eso sí es una transición nativa suave. */ .btn-pill{ position:relative; background:var(--btn-hover-grad); border-color:transparent; color:#000; } .btn-pill::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#fff; opacity:0; transition:opacity .3s var(--ease); pointer-events:none; } .btn-pill:hover::before{ opacity:1; } .btn-pill:hover{ border-color:transparent; color:#000; transform:translateY(-2px); } .btn-white{ background:#fff; border-color:#fff; color:#000; } .btn-white:hover{ background:var(--btn-hover-grad); border-color:transparent; color:#000; transform:translateY(-2px); } .btn-white .btn-icon{ filter:none; } .btn-outline{ background:transparent; color:var(--text-strong); } .btn-outline:hover{ background:#fff; border-color:transparent; color:#000; transform:translateY(-2px); } .btn-lg{ padding:1.1em 1.8em; font-size:.85rem; } button.btn{ cursor:pointer; } /* ícono real icon_link.svg (aporta el arco) — nunca el carácter tipográfico "↗". .btn-pill tiene texto negro en ambos estados (default y hover), así que usa el ícono negro (icon_link.svg) siempre. .btn-outline tiene texto blanco por defecto y negro en hover — usa el ícono blanco (icon_link_white.svg) e invierte su color con un filtro CSS al hacer hover, en vez de cargar un segundo archivo. */ .btn-icon{ width:.7em; height:.7em; flex:0 0 auto; } .btn-outline:hover .btn-icon{ filter:invert(1); } /* ---------- Nav — real: pill flotante #030303, fixed sobre el contenido (flota sobre el hero, no empuja el resto de la página). Logo a la izquierda, ítems centrados en el espacio libre entre logo y CTA (flex, no posiciones fijas: se reacomoda solo si el botón cambia de ancho en otras páginas). ---------- */ .site-nav-wrap{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px clamp(1rem,3vw,2rem) 0; transform:translateY(0); transition:transform .35s var(--ease); } .site-nav-wrap.nav--hidden{ transform:translateY(-130%); } .site-nav{ display:flex; align-items:center; width:100%; max-width:1200px; height:var(--nav-h); padding:0 clamp(1.25rem,3vw,2.5rem); background:var(--nav-bg); border-radius:999px; } .nav-logo{ line-height:0; flex:0 0 auto; } .nav-logo img{ height:23px; width:auto; filter:invert(1); } /* el SVG del logo viene blanco; sobre el nav claro va negro */ .nav-links{ display:flex; gap:1.75rem; flex:1 1 auto; justify-content:center; } .nav-links a{ position:relative; font-family:var(--font-nav); font-size:.8125rem; letter-spacing:.15em; text-transform:uppercase; color:var(--nav-fg); opacity:1; transition:opacity .2s; } /* punto indicador de la página actual (Figma) */ .nav-links a[aria-current="page"]::after{ content:''; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:currentColor; } .nav-links a:hover{ opacity:.6; } .nav-cta{ font-size:.72rem; padding:.75em 1.2em; flex:0 0 auto; background:#000; border-color:#000; color:#fff; } .nav-cta .btn-icon{ filter:invert(1); } .nav-cta:hover{ background:#222; border-color:#222; color:#fff; } /* Servicios / Contacto / Lythium llevan el nav negro y el CTA en degradé (Figma) */ body.nav-dark{ --nav-bg:#030303; --nav-fg:#f9f7f4; } body.nav-dark .nav-logo img{ filter:none; } body.nav-dark .nav-cta{ background:var(--btn-hover-grad); border-color:transparent; color:#000; } body.nav-dark .nav-cta .btn-icon{ filter:none; } body.nav-dark .nav-cta:hover{ background:#fff; border-color:transparent; color:#000; } .nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; margin-left:auto; background:none; border:none; cursor:pointer; } .nav-burger span{ display:block; height:2px; background:var(--nav-fg); transition:transform .25s var(--ease), opacity .25s; } .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* inset:0 (no solo debajo del nav): el fondo negro cubre TODO el alto de pantalla desde el top real del sitio, incluida la franja donde flota la pill del nav — el contenido se empuja hacia abajo con padding-top en vez de recortar el fondo con el inset. */ .mobile-menu{ position:fixed; inset:0; z-index:90; background:var(--bg); display:flex; flex-direction:column; padding:calc(var(--nav-h) + 42px) clamp(1.25rem,6vw,3rem) 2rem; gap:1.8rem; /* +20% respecto de 1.5rem */ overflow-y:auto; } .mobile-menu[hidden]{ display:none; } /* el atributo hidden nativo no gana contra .mobile-menu{display:flex} sin esto */ /* imita la tipografía real del nav de desktop (Lexend, uppercase, tracking) en vez del Steradian bold que tenía antes — agrandada 30% respecto del tamaño real del nav desktop (.8125rem × 1.3). */ .mobile-menu a{ font-family:var(--font-nav); font-weight:500; font-size:1.056rem; letter-spacing:.15em; text-transform:uppercase; color:#f9f7f4; } .mobile-menu-ctas{ display:flex; flex-direction:column; gap:40px; margin-top:1rem; } .mobile-menu-ctas .btn{ align-self:flex-start; } body.menu-open{ overflow:hidden; } /* ---------- Eyebrow / labels — real: Inter Regular, uppercase, blanco 50%, tracking 1.8px/18px ---------- */ .eyebrow{ font-family:var(--font-body); font-weight:400; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); } /* ---------- Reveal on scroll ---------- */ .reveal{ opacity:0; transform:translateY(0); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--delay,0s); } .reveal-up{ transform:translateY(120px); } .reveal-side-left{ transform:translate(-100px,120px); } .reveal-side-right{ transform:translate(100px,120px); } .reveal.is-visible{ opacity:1; transform:translate(0,0); } /* ---------- Hero — real: H1 Steradian 150px centrado, tracking -7.5px. Imagen pegada al top a full-width (aspect-ratio real 1920:600); título fijo a 400px del top de la página ---------- */ /* sin overflow:hidden a propósito: el reveal-up de los botones parte 120px más abajo de su posición final (transform, no ocupa espacio en el flujo) — recortarlo aquí lo dejaría bajo el borde inferior del contenedor mientras dura la animación de entrada, y el IntersectionObserver nunca lo detectaría como visible (queda oculto para siempre). */ .hero{ position:relative; text-align:center; } .hero-media{ position:absolute; top:0; left:0; width:100%; z-index:0; } .hero-media-placeholder{ width:100%; aspect-ratio:1920/600; background-image: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.88) 94%), url('../images/bg_home.jpg'); /* bg_home, export real de Figma (JPEG q80: 1.14 MB -> 202 KB, es el LCP del Home) — pendiente de reemplazo por el video (spec 5.5) */ background-size:cover; background-position:center top; } /* padding-top real: 400px medidos a un ancho de referencia de 1920px (400/1920 = 20.8333vw) — escala de forma proporcional y continua según el ancho real de pantalla, no es un valor fijo. */ .hero-copy{ position:relative; z-index:1; max-width:1600px; margin:0 auto; padding:20.8333vw clamp(1rem,3vw,2rem) 4rem; } /* 150px a 1920 y estrictamente proporcional debajo: asi el H1 conserva en TODO ancho los mismos 3 cortes de linea de la maqueta (los cortes van fijos en el HTML). */ .hero-copy h1{ font-size:min(7.8125vw,150px); line-height:1.01; } .hero-copy h1 .h1-line{ display:block; } .hero-copy p{ max-width:56ch; margin:60px auto 0; font-family:var(--font-body); font-weight:300; font-size:clamp(1rem,1.6vw,1.2rem); color:var(--text-strong); } .hero-ctas{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; justify-content:center; } /* ---------- Símbolos — posición fijada por JS (top calculado desde el elemento de referencia real), cruzan detrás del contenido de About + Servicios ---------- */ /* posición fija desde el top de la página (no relativa a otro elemento); el transform de traslado por scroll lleva una transición corta para el "efecto suave al llegar a destino" pedido — ver JS para el cálculo del delay/tope de recorrido. */ .parallax-el{ position:absolute; z-index:0; pointer-events:none; will-change:transform,opacity; transition:transform .5s cubic-bezier(.16,.84,.44,1), opacity .6s var(--ease); opacity:1; } .symbol-shape{ display:block; width:100%; height:auto; } /* suma_simbolo_02 (video suma_colaborar) */ #simbolo02{ top:650px; left:2%; width:min(26vw,500px); } /* suma_simbolo_01 (video suma_ideas) */ #simbolo01{ top:900px; right:0; width:min(38vw,800px); } /* ---------- Sombreado + grano de los símbolos ---------- Aproximación del look que mostraron las 2 imágenes de referencia (esfera con degradés de negro en 2 direcciones + textura de ruido) que sí se ve en Figma pero no sobrevivió a la exportación del video. Esto es una aproximación visual mía a partir de esas 2 imágenes, no viene de datos exactos de Figma — si Pablo pasa los valores reales (ángulos, stops, parámetros del ruido) se puede afinar para que calce exacto. ::before = 2 degradés direccionales de negro 100%→0%. ::after = ruido/grano vía SVG feTurbulence, sin depender de ningún archivo de imagen extra. */ /* sin mix-blend-mode a propósito: un elemento con blend-mode no puede promoverse a su propia capa de composición simple — el navegador tiene que re-mezclarlo contra lo que hay debajo en cada frame en que .parallax-el se traslada por scroll, lo que generaba los "trabones" momentáneos al hacer scroll. Con opacidad simple (sin blend-mode) el resultado visual es prácticamente igual para un degradé de negro (multiplicar por negro ≈ aplicar negro con alpha) y se puede componer por GPU sin recalcular nada. */ .parallax-el::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(200deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 60%), linear-gradient(20deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 55%); } /* el cuadrado visible que se veía era este ruido: sin el mask, el grano se pintaba parejo en TODO el rectángulo (también en las esquinas, donde el video ya es negro puro), y esa capa gris pareja es lo que se notaba como un cuadrado contra el negro de la página. El mask lo desvanece cerca del borde para que no se note el límite del rectángulo — la esfera del video ocupa casi todo el cuadro, así que el radio es generoso y no recorta contenido visible. */ .parallax-el::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); background-size:180px 180px; opacity:.18; -webkit-mask-image:radial-gradient(closest-side, #000 88%, transparent 100%); mask-image:radial-gradient(closest-side, #000 88%, transparent 100%); } /* Simbolo del hero en paginas interiores: en Figma la esfera (Book) y el remolino (Servicios) asoman por el borde derecho, detras del titulo. Posiciones estimadas de la maqueta, no valores exactos de Figma. */ .page-symbol{ position:absolute; z-index:0; pointer-events:none; } .page-symbol video{ display:block; width:100%; height:auto; } /* mismo apagado que los símbolos del Home (degradés de negro + grano): sin esto el video sale a contraste pleno y se come el titular. */ .page-symbol::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(200deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 60%), linear-gradient(20deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 55%); } .page-symbol::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); background-size:180px 180px; opacity:.18; -webkit-mask-image:radial-gradient(closest-side, #000 88%, transparent 100%); mask-image:radial-gradient(closest-side, #000 88%, transparent 100%); } /* posiciones tomadas de la maqueta: el símbolo asoma por el borde derecho */ .page-symbol--book{ top:30px; right:-4%; width:min(32vw,600px); } .page-symbol--serv{ top:290px; right:-3%; width:min(30vw,560px); } .page-symbol--planes{ top:-14%; right:-7%; width:min(34vw,620px); } /* ---------- About / sello ---------- */ .about{ position:relative; z-index:1; padding:clamp(4rem,10vw,7rem) var(--pad-x) clamp(2rem,6vw,4rem); } .asset-tag{ position:absolute; bottom:8%; left:50%; transform:translateX(-50%); font-family:var(--font-proto); font-size:.62rem; letter-spacing:.03em; color:var(--text-dim); background:rgba(0,0,0,.55); border:1px dashed var(--line); padding:.3em .6em; border-radius:100px; white-space:nowrap; } /* sello real: dos capas — el anillo de texto (SVG real, texto editable vía ) gira, el símbolo "S." (SVG real suma_cl_iso) queda fijo encima, sin rotar. */ .sello{ position:relative; z-index:1; width:min(30vw,187px); aspect-ratio:1; margin:0 auto 150px; } /* espacio entre los logos de clientes y este sello reducido en 150px respecto del sello grande */ .sello--sm{ width:150px; margin-top:0; } .sello-ring{ position:absolute; inset:0; width:100%; height:100%; animation:spin 22s linear infinite; } .sello-ring text{ font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.873em; /* -10%: con .97em el texto no alcanzaba a cerrar la vuelta completa del anillo y el ". " final después de "DISEÑO" quedaba cortado */ fill:#fff; text-transform:uppercase; } .sello-mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42%; height:auto; } @keyframes spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .sello-ring{ animation:none; } } .about-copy{ position:relative; z-index:1; max-width:1500px; margin:3rem auto 0; text-align:left; } .about-copy p{ max-width:1130px; font-family:var(--font-body); font-weight:300; font-size:clamp(1.3rem,2.3vw,2.5rem); line-height:1.25; color:var(--text-strong); } .about-copy strong{ font-weight:700; } /* ---------- Servicios ---------- */ .services{ position:relative; z-index:1; padding:clamp(3rem,8vw,6rem) var(--pad-x) calc(clamp(3rem,8vw,6rem) + 100px); max-width:var(--container-box); margin:0 auto; } /* Planes Multi-Servicio: esta área termina en "3 planes:" justo antes de .plans, así que su colchón inferior es, en los hechos, el espacio entre ese rótulo y las 3 cajas. Se recorta 100px solo acá, sin tocar el colchón de las otras 3 áreas de trabajo. */ #planes.services{ padding-bottom:3rem; } /* cabecera de Servicios: rotulo a la izquierda y boton "IR A SERVICIOS" a la derecha, en la misma linea (Figma) — antes solo existia el rotulo. */ /* Título de cada Área de Trabajo: nombre en bold + bajada en peso liviano (Figma). Steradian solo trae Bold, así que la bajada usa Lexend Light. */ .area-title{ font-family:var(--font-display); font-weight:700; color:var(--text-strong); letter-spacing:-.03em; line-height:1.1; margin:0 0 1.2rem; font-size:clamp(1.8rem,3.6vw,3.2rem); max-width:1000px; } .area-title .area-title-sub{ font-family:var(--font-nav); font-weight:300; } .services-head{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; } .services > .eyebrow{ display:block; margin-bottom:1.5rem; } .services > :not(.page-symbol){ position:relative; z-index:1; } /* real: el índice va apilado justo encima del título (misma columna izquierda), la descripción vive en una columna aparte a la derecha — no son 3 columnas parejas */ .service-row{ position:relative; display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:2rem; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:2.4rem calc(50vw - 50%); border-top:1px solid var(--line); } .services > a:last-of-type{ border-bottom:1px solid var(--line); } /* overlay de oscurecimiento: los símbolos quedan en la capa de más abajo (z-index:0 de .parallax-el, ver arriba) y cada fila de Área de Trabajo vive por encima de ellos (.services tiene z-index:1). Este ::before es la capa intermedia propia de CADA fila: transparente por defecto y al 70% de negro en hover, para que el texto se siga leyendo bien aunque el símbolo pase "por detrás" — transición rápida pero suave. */ .service-row::before{ content:''; position:absolute; inset:0; z-index:0; background:rgba(0,0,0,0); transition:background .25s var(--ease); pointer-events:none; } body:not(.is-scrolling) .service-row:hover::before{ background:rgba(0,0,0,.7); } /* el hover mueve SOLO el título (transform, no reflow) — el párrafo de al lado no se mueve ni cambia de tamaño */ .service-row:hover .service-title{ transform:translateX(14px); } .service-heading{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.6rem; } .service-index{ font-size:.8rem; letter-spacing:.1em; } .service-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,4vw,3.2rem); letter-spacing:-.02em; color:var(--text-strong); display:inline-block; transition:transform .3s var(--ease); } .service-desc{ position:relative; z-index:1; font-family:var(--font-body); font-weight:300; color:var(--text-strong); font-size:1.1rem; line-height:1.4; max-width:46ch; } .services-footer{ display:flex; align-items:center; justify-content:center; gap:40px; margin-top:3rem; flex-wrap:wrap; } .services-footer p{ font-family:var(--font-body); font-weight:400; font-size:1.1rem; color:var(--text-strong); } .services--ruled{ border-top:1px solid var(--line); } /* ---------- Cinta / marquee — fondo BLANCO, texto negro Inter, 40px. Todo en negro, sin rojo. Base regular; solo "Diagnóstico Express de Madurez de Marca" y "nivel de madurez de tu marca" van en semi-bold (600). ---------- */ /* mismo problema que en .btn-pill (fondo sólido → degradé no interpola) y misma solución: una capa con el degradé, debajo del texto/marquee, que sube de opacidad en hover. */ .ribbon{ position:relative; z-index:1; /* por encima de los símbolos (z-index:0) — antes quedaba debajo */ display:block; overflow:hidden; background:#fff; color:#000; padding:clamp(1.5rem,3.5vw,3.75rem) 0; /* real: py-[60px] */ } .ribbon::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--btn-hover-grad); opacity:0; transition:opacity .4s var(--ease); pointer-events:none; } /* hover: mismo degradado del active de los botones — el marquee sigue en movimiento continuo, no se pausa. Además, solo se activa si el usuario NO está scrolleando (ver body.is-scrolling en el JS): si el mouse queda quieto mientras el ribbon pasa por debajo con la rueda, el navegador dispara :hover igual, y ese cambio de fondo justo mientras se hace scroll era la causa más probable del "trabón" momentáneo reportado. */ body:not(.is-scrolling) .ribbon:hover::before{ opacity:1; } .ribbon-track{ display:flex; width:max-content; animation:marquee 30s linear infinite; } @media (prefers-reduced-motion:reduce){ .ribbon-track{ animation-duration:100s; } } /* El item era flex con gap:1.1rem. En flex cada corrida de texto se vuelve un item anonimo y el espacio en blanco de sus bordes se descarta, asi que ese gap tenia que hacer de espacio entre palabras: quedaba igual de ancho entre "el" y "nivel" que entre el texto y el iso, y hasta separaba el "?" de la palabra anterior. Ahora el item es flujo inline normal: el texto lleva su propio espacio de palabra y los elementos decorativos (el iso y las estrellas) llevan 50px exactos a cada lado. Para que sean 50px justos, en el HTML los decorativos van pegados al texto, sin espacio en blanco alrededor. */ .ribbon-item{ display:block; white-space:nowrap; font-family:var(--font-body); font-weight:600; font-size:clamp(1.4rem,3vw,2.5rem); /* real: 40px */ padding:0; color:#000; } /* El margen izquierdo del iso es, ademas, la separacion entre el ultimo texto de una copia del mensaje y el comienzo de la siguiente. */ /* display:inline-block explicito: el reset global pone las imagenes en block y el iso se iba a una linea aparte, encima del texto. */ .ribbon-mark{ display:inline-block; width:.85em; height:auto; margin:0 50px; vertical-align:middle; } .ribbon-item strong{ font-weight:600; color:#000; } .ribbon-stars{ display:inline-flex; align-items:center; gap:.15em; margin:0 50px; vertical-align:middle; } .ribbon-stars img{ height:.7em; width:auto; } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ---------- Copy de transición — base light, solo las palabras clave en semi-bold ---------- */ /* +100px de margen izquierdo real (Figma): este párrafo arranca más adentro que el resto de los rótulos de la sección (BOOK & CASOS, Ver Todos los proyectos), no al mismo borde. */ .transition-copy{ padding:calc(clamp(4rem,10vw,7rem) + 50px) var(--pad-x) calc(clamp(2rem,5vw,3.5rem) - 50px); padding-left:calc(var(--pad-x) + 100px); max-width:var(--container-box); margin:0 auto; } /* Inter, no Steradian: Steradian solo tiene el archivo Bold (700), así que un peso light no existiría — para lograr el contraste light/semibold real que pediste, este párrafo usa Inter (que sí tiene los pesos 300 y 600 disponibles). */ .split-lines{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.5rem,2.2vw,2.4rem); line-height:1.25; color:var(--text-strong); } .split-lines strong{ font-weight:600; } /* padding-bottom/margin-bottom que se cancelan entre si: le dan aire al overflow:hidden para que no recorte los descendentes (la "g" de "creciendo", por ejemplo) sin mover el interlineado visible de la linea siguiente. */ .line-mask{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; } .line{ display:inline-block; transform:translateY(110%); transition:transform .7s var(--ease); } .line.is-visible{ transform:translateY(0); } /* ---------- Book & Casos ---------- */ .book-casos{ padding:clamp(3rem,8vw,6rem) var(--pad-x); max-width:var(--container-box); margin:0 auto; } .book-casos-head{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:2.5rem; flex-wrap:wrap; } .cases-grid{ display:grid; grid-template-columns:repeat(2,1fr); row-gap:clamp(3rem,7vw,8.5rem); column-gap:clamp(2rem,5vw,6.5rem); } .case-card{ display:block; } .case-media{ position:relative; aspect-ratio:700/850; border-radius:18px; overflow:hidden; background:var(--surface); } /* fallback si la imagen/video aún no está */ .case-media-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.2s var(--ease), filter 1.2s var(--ease); /* zoom 2x más lento, sin blur */ } .case-media-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter 1.2s var(--ease); } .case-card:hover .case-media-bg, .case-card:hover .case-media-video{ transform:scale(1.06); filter:brightness(.85); } .case-media .asset-tag{ bottom:.9rem; left:.9rem; right:.9rem; transform:none; z-index:2; } .case-name-row{ display:flex; align-items:baseline; gap:15px; margin-top:1.1rem; flex-wrap:wrap; } .case-name{ font-family:var(--font-body); font-weight:600; font-size:1.05rem; } .case-link-icon{ width:13px; height:auto; flex:0 0 auto; } .case-flag{ font-family:var(--font-proto); font-size:.62rem; color:var(--accent); font-weight:400; } .case-tags{ font-family:var(--font-body); font-weight:300; font-size:.72rem; color:rgba(255,255,255,.5); margin:0; } /* ---------- Logos clientes ---------- */ .cases-grid--ruled{ padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line); } .clients{ padding:clamp(3rem,7vw,5rem) var(--pad-x); text-align:center; } .clients p{ font-family:var(--font-body); font-weight:300; color:rgba(255,255,255,.6); max-width:60ch; margin:0 auto 2rem; font-size:1.875rem; } .clients-strip{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* efecto "gif animado": 4 imágenes en la misma caja, cada una fija 2s y luego un crossfade de 0.5s hacia la siguiente — loop de 10s (4 × 2.5s) */ .clients-cycle{ position:relative; width:100%; max-width:1355px; height:clamp(56px,8vw,110px); margin:0 auto; } .clients-cycle img{ position:absolute; inset:0; width:100%; max-width:1355px; height:100%; object-fit:contain; opacity:0; animation:clientsFade 10s ease infinite; } @keyframes clientsFade{ 0%,20%{ opacity:1; } 25%,100%{ opacity:0; } } @media (prefers-reduced-motion:reduce){ .clients-cycle img{ animation:none; opacity:0; } .clients-cycle img:first-child{ opacity:1; } } /* ---------- CTA intermedio — mismo tratamiento tipográfico Steradian que el otro "H1 Proyecto" ---------- */ /* real: fondo collage de casos (Frame 98 / Rectangle 43) — se me había pasado, no era fondo negro plano */ /* el collage (bg_cta_contacto.jpg) trae internamente una franja negra entre sus 2 filas de miniaturas — con "cover" en una sección alta esa franja quedaba visible a mitad de camino. Ajustado a ancho de pantalla (100% de ancho, alto proporcional) para que no se recorte ni se estire de forma rara. */ /* el collage (bg_cta_contacto.jpg) mide 1920x500 reales — su alto renderizado a "100% auto" es siempre 26.04vw exactos (500/1920). Se ancla abajo (center bottom) para que quede pegado al cierre de la sección, y el padding-bottom reserva ese mismo alto más un colchón extra, para que el título y el botón queden siempre arriba del collage — nunca encima de la parte clara de la imagen — sea cual sea el ancho real de pantalla. */ /* el collage se limita a un ancho máximo de 1200px: sin el límite, su alto reservado (26.04vw) crecía sin techo en monitores anchos y dejaba un espacio enorme debajo del botón. Con el límite, a 1920px de ancho el alto pasa de 500px a 312.5px (-187.5px) sin tocar el colchón de 4rem que evita que el texto quede sobre la imagen — bajar ese colchón en vez del ancho reintroducía exactamente el bug de superposición que se corrigió la ronda pasada. */ .cta-mid{ position:relative; text-align:center; padding:clamp(0rem,8vw,6rem) var(--pad-x) calc(100vw * .260416 + 0rem); background-color:var(--bg); background-image: url('../images/bg_cta_contacto.jpg'); background-size:100vw auto; background-position:center bottom; background-repeat:no-repeat; } .cta-mid h2{ font-size:clamp(2.1rem,6vw,5.2rem); line-height:1.02; max-width:980px; margin:.75rem auto calc(2rem + 20px); } /* ---------- Diagnóstico Express — real: banner contenido con esquinas redondeadas (Rectangle 44 en Figma, confirmado vía MCP: x=110 y=9197 w=1700 h=950 en un frame de 1920 → 110/1920 = 5.729% de margen por lado, 25px de radio), NO de borde a borde como estaba antes. El margen horizontal es un % (no un max-width fijo) para que el banner se achique proporcional en cualquier ancho, no solo recién por debajo de 1700px; el max-width lo tapa para que en pantallas gigantes no crezca más allá del tamaño real. */ /* padding vertical real: 130px arriba / 144px abajo, medidos del contenido dentro del banner en Figma (confirmado vía MCP) — antes el padding (hasta 8rem) + 130px de colchón sumaba hasta 258px abajo, muy por encima de los 144px reales, y dejaba un hueco enorme bajo el botón. El piso de 130px en el padding-bottom hace de colchón para el reveal-up del botón final, que parte 120px más abajo de su posición final (transform, fuera del flujo): sin un piso >=120px, overflow:hidden (necesario para contener el zoom del fondo) lo recortaría por completo y nunca se volvería visible — como los 144px reales ya superan ese mínimo, no hace falta sumarle nada aparte. */ .diagnostico{ position:relative; overflow:hidden; text-align:center; width:88.54%; max-width:1700px; margin:clamp(2rem,5vw,4rem) auto; border-radius:25px; padding:clamp(2rem,6.77vw,130px) var(--pad-x) clamp(130px,7.5vw,144px); } /* fondo en capa aparte para poder animarle un zoom continuo sin mover el texto encima */ .diagnostico::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 100%), url('../images/bg_cta_diagnostico.jpg'); background-size:cover; background-position:center; animation:diagnosticoZoom 18s ease-in-out infinite; will-change:transform; } @keyframes diagnosticoZoom{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } } @media (prefers-reduced-motion:reduce){ .diagnostico::before{ animation:none; } } .diagnostico > *{ position:relative; z-index:1; } .diagnostico h2{ font-size:clamp(2.1rem,6.5vw,5.4rem); line-height:1.02; max-width:1200px; margin:.9rem auto 50px; } .diagnostico p{ font-family:var(--font-body); font-weight:300; max-width:52ch; margin:0 auto; color:var(--text-strong); font-size:1.05rem; } .diagnostico-stars{ display:flex; align-items:center; justify-content:center; gap:.45em; margin:1.8rem 0 2.2rem; } .diagnostico-stars img{ height:18px; width:auto; filter:brightness(0) invert(1); } /* El selector lleva el p a propósito: `.diagnostico p { margin:0 auto }` de arriba tiene más especificidad que `.diagnostico-time` a secas, así que el margen superior de este párrafo nunca llegaba a aplicarse. */ .diagnostico p.diagnostico-time{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:20px; font-family:var(--font-body); font-size:.9rem; color:rgba(255,255,255,.8); } .diagnostico-time .icon-clock{ height:.95em; width:auto; filter:brightness(0) invert(1); } /* ---------- Ideas & Reflexiones (home) — real: título "IDEAS & REFLEXIONES" es un gráfico vectorial (texto con filtro de grano aplicado en Figma), no texto real: se usa tal cual lo exportó el MCP (titulo_ideas_reflexiones.svg), nunca recreado con CSS. Tarjetas: aspect-ratio 715/550 real, radio 25px (vs. 18px de .case-media), texto superpuesto sobre la foto (no debajo, a diferencia de .case-card). ---------- */ .home-recursos{ padding:clamp(3rem,8vw,6rem) var(--pad-x); max-width:var(--container-box); margin:0 auto; } .home-recursos-head{ text-align:center; margin-bottom:clamp(2.5rem,5vw,3.5rem); } .home-recursos-head .eyebrow{ display:block; margin-bottom:1rem; } .home-recursos-title{ margin:0 auto; max-width:874px; } .home-recursos-title img{ width:100%; height:auto; margin:0 auto; } .recursos-feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,4vw,3rem); } .recurso-feature{ position:relative; display:block; aspect-ratio:715/550; border-radius:25px; overflow:hidden; background:var(--surface); } .recurso-feature-media{ position:absolute; inset:0; } .recurso-feature-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); } .recurso-feature:hover .recurso-feature-media img{ transform:scale(1.06); } /* degradé real: negro 0% arriba -> 50% abajo, para que el texto sea legible sobre cualquier foto */ .recurso-feature-media::after{ content:''; position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%); } .recurso-feature-body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(1.8rem,4vw,2.9rem); } .recurso-feature-body .eyebrow{ margin-bottom:.9rem; } .recurso-feature-body h3{ font-family:var(--font-body); font-weight:700; font-size:clamp(1.7rem,3.4vw,3.75rem); line-height:1.2; letter-spacing:-.03em; color:var(--text-strong); opacity:.9; max-width:9ch; } .recurso-feature-desc{ font-family:var(--font-body); font-weight:400; font-size:1.25rem; line-height:1.2; letter-spacing:-.03em; color:var(--text-strong); opacity:.9; max-width:28ch; margin-top:clamp(1.2rem,3vw,2.2rem); } .recurso-feature-body .btn{ margin-top:auto; } .btn-outline-soft{ background:transparent; color:var(--text-strong); border-color:rgba(255,255,255,.4); } .btn-outline-soft:hover{ background:#fff; border-color:transparent; color:#000; transform:translateY(-2px); } .btn-outline-soft:hover .btn-icon{ filter:invert(1); } /* icon_arrow_right.svg es 30×15 (2:1) real — .btn-icon de base es una caja .7em cuadrada (pensada para icon_link.svg, casi cuadrado) que lo aplastaba a la mitad de su ancho. */ .icon-arrow{ width:1.4em; height:.7em; } .home-recursos-footer{ display:flex; justify-content:center; margin-top:clamp(2.5rem,5vw,3.5rem); } /* pulso sutil del título gráfico: solo opacity (sin layout/paint de más), costo casi nulo */ @keyframes ideasPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } } .home-recursos-title img{ animation:ideasPulse 4s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .home-recursos-title img{ animation:none; } } /* ---------- Footer ---------- */ .site-footer{ padding:calc(clamp(3rem,7vw,5rem) + 100px) var(--pad-x) 2.5rem; border-top:1px solid var(--line); } .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:3rem; flex-wrap:wrap; max-width:1500px; margin:0 auto; } /* real: 279×56 en el frame de 1920 (confirmado en Figma) — antes quedaba hasta 80px, mucho más grande que el tamaño real del logo grande del footer. */ .footer-logo{ height:clamp(40px,2.92vw,56px); width:auto; } /* real: Inter Medium 14px, blanco 50%, "suma." en semi-bold, centrado, separado del resto del footer por un filete de 1px (Line 31 en Figma, y=12640) — antes faltaba ese filete. El filete es full-bleed (ancho completo del frame en Figma, no acotado al padding del footer) — mismo quiebre de márgen que .service-row usa para sus filetes full-bleed. */ .footer-credit{ margin-top:clamp(3rem,7vw,130px); margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:1.7rem calc(50vw - 50%) 0; border-top:1px solid var(--line); text-align:center; font-family:var(--font-body); font-weight:500; font-size:.85rem; color:rgba(255,255,255,.5); } .footer-credit strong{ font-weight:600; color:rgba(255,255,255,.5); } .footer-cols{ display:grid; grid-template-columns:repeat(3,minmax(140px,180px)); gap:2.5rem; } .footer-col{ display:flex; flex-direction:column; } .footer-col a:not(.footer-col-title){ display:block; padding:.4rem 0; font-family:var(--font-body); font-weight:300; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.6); } .footer-col a:not(.footer-col-title):hover{ color:var(--text-strong); } .footer-col-title{ display:block; font-family:var(--font-body); font-weight:500; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-strong); margin-bottom:.9rem; } /* ícono de Instagram, restaurado debajo de "Contacto" a pedido tuyo — se había sacado en una ronda anterior porque no estaba pedido en ese momento. */ .footer-social{ display:inline-flex; margin-top:.7rem; opacity:1; transition:opacity .2s; } .footer-social:hover{ opacity:.6; } .footer-social img{ width:20px; height:20px; } .footer-logo-link{ display:inline-block; line-height:0; cursor:pointer; } /* ---------- Cursor "mouseover" custom — real: círculo negro, borde blanco 30% opacidad, ícono "icon_more" centrado (100×100, tamaño real de los frames "mouseover" en Figma: 697:380 / 697:438). Sin texto, sin color de acento. ---------- */ .mouseover-el{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; transform:translate(-1000px,-1000px); } .mouseover-el .mouseover-circle{ display:flex; align-items:center; justify-content:center; width:100px; height:100px; margin:-50px 0 0 -50px; border-radius:50%; background:#000; border:1px solid rgba(255,255,255,.3); opacity:0; transform:scale(.6); transition:opacity .25s var(--ease), transform .25s var(--ease); } .mouseover-el .mouseover-icon{ width:28px; height:28px; } .mouseover-el.is-active .mouseover-circle{ opacity:1; transform:scale(1); } /* ---------- Volver arriba ---------- */ .to-top{ position:fixed; right:clamp(1rem,2.5vw,2.5rem); bottom:clamp(1rem,2.5vw,2.5rem); z-index:120; display:flex; align-items:center; justify-content:center; width:72px; height:72px; padding:0; border-radius:50%; cursor:pointer; background:#000; border:1px solid rgba(255,255,255,.3); opacity:0; visibility:hidden; transform:scale(.6); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .25s var(--ease), border-color .25s var(--ease); } .to-top.is-visible{ opacity:1; visibility:visible; transform:scale(1); } .to-top:hover{ background:#fff; border-color:#fff; } .to-top svg{ width:26px; height:26px; stroke:#fff; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s var(--ease); } .to-top:hover svg{ stroke:#000; } @media (prefers-reduced-motion:reduce){ .to-top{ transition:opacity .2s; } } /* ---------- Dev notes (solo prototipo) ---------- */ /* ========================================================================== RESPONSIVE — propuesta mobile (sin maqueta Figma de referencia) ========================================================================== */ @media (max-width:1023px){ .nav-links{ display:none; } .nav-cta{ display:none; } .nav-burger{ display:flex; } .service-row{ grid-template-columns:1fr; gap:.5rem; } .footer-cols{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } } @media (max-width:767px){ :root{ --nav-h:64px; } /* +200px de aire entre el top de la página y el H1 del hero, pedido puntual para mobile (se suma al padding proporcional que ya escala con el ancho real de pantalla). */ .hero-copy{ padding-top:calc(20.8333vw + 200px); } .cases-grid{ grid-template-columns:1fr; } .recursos-feature-grid{ grid-template-columns:1fr; } .recurso-feature{ aspect-ratio:343/420; } /* en mobile el +100px real se vuelve desproporcionado (se come casi todo el ancho disponible) — se reduce a un cuarto, perceptible pero sin romper el layout. */ .transition-copy{ padding-left:calc(var(--pad-x) + 25px); } /* Símbolos en mobile: la posición "top" heredada de desktop (900px, calibrada para un layout de 1920px de ancho) no tiene sentido en mobile porque las secciones apiladas tienen otra proporción — se reemplaza por un valor en vh, pensado para aparecer cerca de Servicios igual que en desktop. No tengo maqueta mobile de referencia para esto: es mi mejor criterio técnico, no una medición — si tenés un mockup mobile lo ajusto a píxel exacto. La velocidad y el recorrido máximo también se atenúan en JS para que no se sientan demasiado bruscos en una pantalla chica (ver spec 5.1 en el JS). */ #simbolo01{ top:55vh; width:60vw; } #simbolo02{ display:none; } /* compite con el texto en mobile, ver spec 4 */ .footer-top{ flex-direction:column; gap:calc(2rem + 50px); } .footer-cols{ grid-template-columns:1fr 1fr; gap:1.5rem 1rem; } .clients-strip{ justify-content:flex-start; } /* "En más de 17 años..." -25% */ .clients p{ font-size:1.40625rem; } /* "Este sitio web..." -20% */ .footer-credit{ font-size:.68rem; } .service-desc{ max-width:none; } .btn{ white-space:normal; text-align:center; max-width:100%; } } /* ========================================================================== PÁGINAS INTERIORES — Servicios / Book & Casos / Contacto (2026) Extensión del mismo sistema de arriba: ningún token, componente ni patrón de Home se redefine — todo lo de acá es aditivo, para maximizar reutilización de código entre páginas (pedido explícito de Pablo) y minimizar CSS nuevo. ========================================================================== */ /* ---------- Hero interior (Servicios / Book / Contacto): mismo tratamiento tipográfico que .hero pero sin imagen de fondo full-bleed ni altura de 100vh — el H1 vive directo sobre el fondo negro de la página. ---------- */ .page-hero{ position:relative; z-index:1; max-width:var(--container-box); margin:0 auto; padding:calc(var(--nav-h) + 6rem) var(--pad-x) 3rem; text-align:left; } .page-hero .eyebrow{ display:block; margin-bottom:1.2rem; } .page-hero h1{ font-size:min(5.21vw,100px); line-height:1.09; max-width:1400px; margin:0; } .page-hero h1 .h1-line{ display:block; } /* el texto del hero va por encima del simbolo animado */ .page-hero > :not(.page-symbol){ position:relative; z-index:1; } .page-hero p{ max-width:60ch; margin:1.6rem 0 0; font-family:var(--font-body); font-weight:300; font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1.35; color:var(--text-strong); } .page-hero p strong{ font-weight:700; } /* el sello va centrado aunque el resto del hero quede alineado a la izquierda */ .page-hero .sello{ margin:clamp(2.5rem,5vw,4.5rem) auto clamp(2.5rem,5vw,4.5rem); } .page-hero .sello + p{ margin-top:0; } /* Contacto es la única página interior con el hero centrado (Figma) */ .page-hero--center{ text-align:center; } .page-hero--center h1{ margin:0 auto; } .page-hero--center p{ margin-left:auto; margin-right:auto; } /* ---------- Sub-nav ancla (Servicios: salta entre las 4 Áreas de Trabajo) ---------- Mismo look que .filter-group (pill blanca + pills oscuras) pero de navegación por ancla, no de filtro con estado — por eso no lleva aria-pressed. */ .subnav{ display:flex; align-items:center; justify-content:center; gap:clamp(1rem,2.4vw,2.6rem); width:100%; max-width:1200px; height:52px; padding:0 clamp(1.25rem,3vw,2.5rem); background:#fff; border-radius:999px; } .subnav-label{ font-family:var(--font-nav); font-size:.75rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(0,0,0,.45); flex:0 0 auto; } .subnav a{ font-family:var(--font-nav); font-size:.75rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#000; white-space:nowrap; transition:opacity .2s var(--ease); } .subnav a:hover{ opacity:.6; } /* con sub-nav el hero debe despejar las DOS pills, no solo la del nav */ .has-subnav .page-hero{ padding-top:calc(var(--nav-h) + 52px + 8px + 5rem); } /* ---------- Filtros (Book & Casos): dos grupos independientes, una sola opción "activa" por grupo — el estado lo maneja JS con aria-pressed sobre cada pill; acá solo el look. Pill "Todas/Todos" siempre visible como opción de reset. ---------- */ .filters{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; max-width:var(--container-box); margin:0 auto 4rem; padding:0 var(--pad-x); } .filter-group{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-start; } .filter-pill{ font-family:var(--font-nav); font-size:.8125rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:1.1em 1.5em; border-radius:100px; border:1px solid rgba(255,255,255,.3); background:#111; color:rgba(255,255,255,.6); cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .filter-pill:hover{ border-color:#fff; color:#fff; } .filter-pill[aria-pressed="true"]{ background:#fff; border-color:#fff; color:#000; } /* ---------- Grid de proyectos con carga incremental (batches de 6) ---------- Reutiliza .cases-grid / .case-card / .case-media tal cual (mismo componente de Home) — lo nuevo es solo el estado oculto/visible por lote y el sentinel que dispara la carga del siguiente lote al acercarse al final. */ .cases-grid.is-book{ row-gap:clamp(3rem,7vw,6rem); } .case-card[hidden]{ display:none; } .book-empty{ display:none; grid-column:1/-1; text-align:center; padding:4rem 1rem; font-family:var(--font-body); font-weight:300; font-size:1.2rem; color:rgba(255,255,255,.6); } .book-empty.is-visible{ display:block; } .book-sentinel{ grid-column:1/-1; height:1px; } .book-loading{ grid-column:1/-1; text-align:center; padding:1rem; font-family:var(--font-proto); font-size:.7rem; letter-spacing:.05em; color:var(--text-dim); opacity:0; transition:opacity .2s; } .book-loading.is-active{ opacity:1; } /* ---------- Planes Multi-Servicio (Servicios) ---------- */ .plans{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; max-width:var(--container-box); margin:0 auto; padding:0 var(--pad-x) 2rem; } .plan-card{ position:relative; border-radius:20px; padding:clamp(2rem,2.6vw,3.2rem) clamp(1.5rem,2vw,2.4rem); border:1px solid rgba(255,255,255,.2); background:linear-gradient(180deg, rgba(17,17,17,.85) 0%, rgba(0,0,0,.85) 100%); display:flex; flex-direction:column; gap:clamp(1.4rem,2vw,2.2rem); /* el botón usa margin-top:auto, así que baja al fondo de esta altura mínima: restar 80px acá (a los 3 valores del clamp por igual) es lo que acerca el botón al listado "podrías obtener:". */ min-height:clamp(480px, calc(48.5vw - 80px), 860px); } .plan-card.is-featured{ border-color:rgba(255,255,255,.45); } .plan-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,3.2vw,2.9rem); line-height:1.05; letter-spacing:-.03em; color:var(--text-strong); } .plan-tagline{ font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--text-strong); } .plan-desc{ font-family:var(--font-body); font-weight:300; font-size:1rem; color:rgba(255,255,255,.8); margin-top:-.8rem; } .plan-obtain-label{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); } .plan-list{ display:flex; flex-direction:column; gap:clamp(.7rem,1vw,1.05rem); } .plan-list li{ font-family:var(--font-body); font-size:.95rem; color:var(--text-strong); } .plan-card .btn{ align-self:flex-start; margin-top:auto; } .plan-guide{ max-width:var(--container-box); margin:0 auto; padding:0 var(--pad-x) clamp(3rem,8vw,6rem); } .plan-guide p{ font-family:var(--font-body); font-weight:300; font-size:1.1rem; line-height:1.6; color:rgba(255,255,255,.85); max-width:78ch; } .plan-guide strong{ font-weight:600; color:var(--text-strong); } /* ---------- Recursos: grilla del índice ---------- */ .recursos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; max-width:var(--container-box); margin:0 auto; padding:0 var(--pad-x) clamp(3rem,8vw,6rem); } .recurso-card{ border:1px solid var(--line); border-radius:14px; padding:clamp(1.6rem,2vw,2.2rem); display:flex; flex-direction:column; gap:.9rem; transition:border-color .25s var(--ease); } .recurso-card:hover{ border-color:rgba(255,255,255,.4); } .recurso-card .eyebrow{ margin:0; } .recurso-card h3{ font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.2; } .recurso-card p{ font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.5; color:rgba(255,255,255,.75); margin:0; } .recurso-card .recurso-link{ font-family:var(--font-nav); font-weight:500; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-strong); display:inline-flex; align-items:center; gap:.4em; margin-top:auto; } /* ---------- Recursos: cuerpo de un artículo ---------- */ .article-body{ max-width:var(--container-box); margin:0 auto; padding:0 var(--pad-x) clamp(3rem,8vw,6rem); } .article-byline{ font-family:var(--font-body); font-weight:600; color:var(--text-strong); max-width:72ch; margin:0 0 .3rem; } .article-meta{ font-family:var(--font-body); font-weight:300; font-style:italic; color:var(--text-dim); font-size:.95rem; max-width:72ch; margin:0 0 2.5rem; } .article-body h2{ font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.15; max-width:72ch; margin:3rem 0 1rem; } .article-body h2:first-of-type{ margin-top:0; } .article-body p{ font-family:var(--font-body); font-weight:300; font-size:1.1rem; line-height:1.65; color:rgba(255,255,255,.85); max-width:72ch; margin:0 0 1.4rem; } .article-body p strong{ font-weight:600; color:var(--text-strong); } .article-body ul{ max-width:72ch; margin:0 0 1.4rem; padding-left:1.3rem; } .article-body li{ font-family:var(--font-body); font-weight:300; font-size:1.1rem; line-height:1.6; color:rgba(255,255,255,.85); list-style:disc; margin-bottom:.7rem; } .article-body li strong{ font-weight:600; color:var(--text-strong); } .article-body hr{ border:none; border-top:1px solid var(--line); max-width:72ch; margin:3rem 0 2rem; } .article-cta .btn{ margin:.75rem 0 1.75rem; } /* ---------- FAQ (acordeón) ---------- */ .faq{ max-width:var(--container-box); margin:0 auto; padding:clamp(3rem,8vw,6rem) var(--pad-x); } .faq-item{ border-top:1px solid var(--line); } .faq:last-of-type, .faq-item:last-child{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.6rem 0; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--font-body); font-weight:300; font-size:clamp(1.05rem,1.8vw,1.4rem); color:var(--text-strong); } .faq-icon{ flex:0 0 auto; width:22px; height:22px; position:relative; } .faq-icon::before, .faq-icon::after{ content:''; position:absolute; top:50%; left:50%; background:#fff; transition:transform .3s var(--ease); } .faq-icon::before{ width:16px; height:1.5px; transform:translate(-50%,-50%); } .faq-icon::after{ width:1.5px; height:16px; transform:translate(-50%,-50%); } .faq-item[aria-expanded="true"] .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); } .faq-a{ height:0; overflow:hidden; transition:height .35s var(--ease); } .faq-a-inner{ padding:0 0 1.8rem; max-width:78ch; font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.6; color:rgba(255,255,255,.7); } .faq-a-inner p + p{ margin-top:1rem; } /* ---------- Necesidad (Contacto): tarjetas multi-select con toggle propio ---------- */ .necesidad-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem; max-width:var(--container-box); margin:0 auto; padding:0 var(--pad-x); } .necesidad-card{ position:relative; height:290px; border-radius:14px; padding:1.6rem; border:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#000; } .necesidad-tag{ font-family:var(--font-nav); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(0,0,0,.55); } .necesidad-copy{ font-family:var(--font-body); font-weight:600; font-size:1.15rem; line-height:1.3; } .necesidad-toggle{ align-self:flex-start; display:inline-flex; align-items:center; gap:.5em; border:none; cursor:pointer; background:#000; color:#fff; font-family:var(--font-body); font-weight:500; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; padding:.85em 1.1em; border-radius:100px; transition:background .25s var(--ease), color .25s var(--ease); } .necesidad-toggle .plus{ display:inline-block; line-height:1; } .necesidad-toggle .plus::before{ content:'+'; } .necesidad-card[data-selected="true"] .necesidad-toggle{ background:#fff; color:#000; } .necesidad-card[data-selected="true"] .necesidad-toggle .plus::before{ content:'✓'; } /* ---------- Modal "Agenda con un consultor" (Diagnóstico) ---------- Confirma el contacto sin sacar a la persona de su informe. Reutiliza .field / .field-grid / .form-consent del formulario de Contacto: mismo componente, cero CSS nuevo para los campos. */ body.dx-modal-abierto{ overflow:hidden; } .dx-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,2.5rem); } .dx-modal-fondo{ position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .dx-modal-caja{ position:relative; z-index:1; width:100%; max-width:720px; max-height:90vh; overflow-y:auto; background:#0e0e0e; border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:clamp(1.6rem,3.5vw,2.8rem); animation:dxModalEntra .28s var(--ease) both; } @keyframes dxModalEntra{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .dx-modal-caja{ animation:none; } } .dx-modal-cerrar{ position:absolute; top:.9rem; right:1rem; width:38px; height:38px; line-height:1; background:none; border:none; color:rgba(255,255,255,.6); font-size:1.8rem; cursor:pointer; border-radius:50%; transition:color .2s var(--ease), background .2s var(--ease); } .dx-modal-cerrar:hover{ color:#fff; background:rgba(255,255,255,.08); } .dx-modal-titulo{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; color:var(--text-strong); font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; margin:.6rem 0 .8rem; } .dx-modal-texto{ font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.5; color:rgba(255,255,255,.75); margin:0 0 1.8rem; max-width:52ch; } .dx-modal-texto strong{ font-weight:600; color:var(--text-strong); } .dx-modal-form .field-grid{ gap:1rem; } .dx-modal-form .dx-op{ color:rgba(255,255,255,.45); text-transform:none; letter-spacing:0; } .dx-modal-form .form-consent{ margin-top:1.3rem; } .dx-modal-error{ margin:1rem 0 0; font-family:var(--font-body); font-size:.9rem; color:#ff8fa3; } .dx-modal-acciones{ display:flex; gap:.8rem; justify-content:flex-end; flex-wrap:wrap; margin-top:1.6rem; } .dx-modal-ok{ text-align:center; padding:1rem 0; } .dx-modal-ok .dx-modal-texto{ margin-left:auto; margin-right:auto; } .dx-modal-ok .dx-modal-acciones{ justify-content:center; } @media (max-width:600px){ .dx-modal{ padding:0; align-items:flex-end; } .dx-modal-caja{ max-width:none; max-height:94vh; border-radius:20px 20px 0 0; } .dx-modal-acciones .btn{ flex:1 1 100%; justify-content:center; } } /* ---------- Anillos concéntricos del hero de Contacto ---------- En la maqueta el título se apoya sobre una onda de anillos. Va en CSS y no como archivo: es un patrón geométrico puro, así que un gradiente lo resuelve sin sumar peso y escala sin pixelarse en ningún ancho. */ .page-hero--anillos::before{ content:''; position:absolute; z-index:0; pointer-events:none; /* Medido en la maqueta a 1920: círculo de ~1256px con el centro a 400px del tope del hero, o sea a la altura del H1. Se expresa en vw para que la onda caiga en el mismo punto del titular en cualquier ancho. */ left:50%; transform:translateX(-50%); width:min(1256px,86vw); aspect-ratio:1; top:calc(20.8vw - min(628px,43vw)); background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.15) 0 1.5px, rgba(255,255,255,0) 1.5px 26px); -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 62%); mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 62%); } /* ---------- Formulario (Contacto) ---------- */ .contact-form{ max-width:calc(1180px + 2 * var(--pad-x)); margin:0 auto; padding:clamp(3rem,8vw,5rem) var(--pad-x) 0; } .contact-form h2.form-title{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.3rem,2.6vw,1.9rem); text-align:center; letter-spacing:0; margin-bottom:2.2rem; text-transform:none; } .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } .field{ display:flex; flex-direction:column; gap:.5rem; } .field.full{ grid-column:1/-1; } .field label{ font-family:var(--font-body); font-weight:500; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-strong); } .field input, .field select, .field textarea{ background:#333; border:1px solid transparent; border-radius:12px; padding:.95em 1em; font-family:var(--font-body); font-style:italic; font-size:1rem; color:rgba(255,255,255,.9); transition:border-color .2s var(--ease); } .field select{ font-style:normal; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 1em center; background-size:12px 8px; padding-right:2.8em; } .field textarea{ resize:vertical; min-height:120px; font-family:var(--font-body); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:rgba(255,255,255,.5); } .field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.8); } .form-actions{ display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:50px; } .form-consent{ display:flex; align-items:center; gap:.7rem; padding:.7em 1.2em; border-radius:100px; background:#1c1c1c; font-family:var(--font-body); font-size:.82rem; color:rgba(255,255,255,.8); } .form-consent input{ width:18px; height:18px; accent-color:#fff; } .form-consent a{ color:#699bff; } .form-submit{ color:#000; border:none; } .form-submit::before{ opacity:1; } /* en reposo, blanco */ .form-submit:hover::before{ opacity:0; } /* en hover, degradado estable */ .form-submit:disabled{ opacity:.55; cursor:progress; } .form-submit:disabled::before{ opacity:1; } /* Enviado: se queda en el estado active y deja de ser un botón */ .form-submit.is-sent{ opacity:1; cursor:default; } .form-submit.is-sent::before{ opacity:0; } .form-submit.is-sent .btn-icon{ display:none; } /* Casilla de marketing: separada del consentimiento de la política y SIN marcar por defecto. No es una preferencia de diseño, lo exige el art. 12 de la Ley 21.719 (ver NOTAS-LEY-21719.md): una casilla premarcada no es consentimiento inequívoco y no serviría como prueba. Por eso va debajo de los botones y con menos peso visual: es opcional, no un requisito más. */ .form-marketing{ display:flex; align-items:flex-start; gap:.7rem; max-width:48rem; margin:1.4rem auto 0; font-family:var(--font-body); font-size:.82rem; line-height:1.45; color:rgba(255,255,255,.55); } .form-marketing input{ width:16px; height:16px; margin-top:.15rem; flex:0 0 auto; accent-color:#fff; } /* Campo trampa anti-bot: fuera de la pantalla en vez de display:none, porque varios bots saltan los campos ocultos con display y este necesita que lo vean para caer. Invisible para lectores de pantalla por el aria-hidden del contenedor. */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Consentimiento comercial: separado del obligatorio y visiblemente secundario, para que se lea como opcional y no como un segundo requisito. Sin esta casilla marcada, a esa persona solo se le puede responder su consulta. */ .form-estado{ max-width:48rem; margin:1.6rem auto 0; padding:1rem 1.3rem; border-radius:14px; font-family:var(--font-body); font-size:.95rem; line-height:1.55; text-align:center; } .form-estado.is-ok{ background:#1c1c1c; border:1px solid var(--line); color:var(--text); } .form-estado.is-error{ background:#1c1c1c; border:1px solid var(--accent); color:var(--text); } .form-estado a{ color:#699bff; } /* ---------- Páginas de texto legal (/privacidad/) ---------- Reusa los tokens y el filete de 1px que separan .services y .faq-item, para que un documento legal no parezca pegado de otro sitio. Medida de lectura cómoda: 68ch. */ .legal{ max-width:68ch; margin:0 auto; padding:0 var(--pad-x) 1rem; font-family:var(--font-body); } .legal-version{ font-family:var(--font-proto); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin:0 0 2rem; } .legal-intro{ font-size:1.12rem; line-height:1.7; color:var(--text); margin:0 0 1rem; } .legal-block{ border-top:1px solid var(--line); padding:2.6rem 0 0; margin:2.6rem 0 0; } .legal-block h2{ font-family:var(--font-display); font-size:1.28rem; line-height:1.3; letter-spacing:-.01em; text-transform:none; margin:0 0 1.1rem; color:var(--text-strong); } .legal-block p{ font-size:1rem; line-height:1.75; color:rgba(255,255,255,.76); margin:0 0 1.1rem; } .legal-block p:last-child{ margin-bottom:0; } .legal-block strong{ color:var(--text-strong); font-weight:600; } .legal-block a{ color:#699bff; } .legal-block ul{ margin:0 0 1.1rem; padding-left:1.1rem; } .legal-block li{ font-size:1rem; line-height:1.75; color:rgba(255,255,255,.76); margin:0 0 .6rem; } /* La tabla scrollea dentro de su caja: en móvil una tabla de 3 columnas empuja el ancho de la página entera si no se contiene. */ .legal-tabla{ width:100%; border-collapse:collapse; margin:0 0 1.4rem; display:block; overflow-x:auto; } .legal-tabla th, .legal-tabla td{ text-align:left; vertical-align:top; padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--line); font-size:.94rem; line-height:1.6; } .legal-tabla th{ font-family:var(--font-proto); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); font-weight:400; } .legal-tabla td{ color:rgba(255,255,255,.76); } .legal-tabla tr:last-child td{ border-bottom:none; } /* ---------- Book_lythium: caso detalle ---------- */ .case-hero{ position:relative; height:38.18vw; min-height:420px; overflow:hidden; } .case-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; } .case-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.85) 92%); } .case-back{ position:absolute; top:140px; left:clamp(1.25rem,8.33vw,10rem); z-index:2; display:inline-flex; align-items:center; gap:.6em; border:1px solid rgba(255,255,255,.5); border-radius:100px; padding:.9em 1.4em; font-family:var(--font-body); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.85); transition:border-color .2s var(--ease), color .2s var(--ease); } .case-back:hover{ border-color:#fff; color:#fff; } .case-intro{ position:relative; z-index:1; max-width:var(--container-box); margin:-33.2vw auto 0; padding:0 var(--pad-x) clamp(3rem,7vw,5rem); } /* rótulo + botón "volver" en una sola fila arriba del H1 (Figma) */ .case-intro-top{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.3rem; } .case-intro-top .eyebrow{ margin:0; } .case-back--inline{ position:static; padding:.62em 1.1em; font-size:.72rem; } /* "los ayudamos con:" es la etiqueta a la IZQUIERDA de la lista, no un pie debajo */ .case-credits{ display:flex; align-items:flex-start; gap:clamp(1rem,3vw,3rem); margin-top:1.8rem; } .case-credits .case-help{ flex:0 0 auto; margin:0; font-size:.8rem; letter-spacing:.1em; } .case-credits .case-tagline{ margin:0; font-size:clamp(1rem,1.25vw,1.15rem); color:var(--text-strong); letter-spacing:0; max-width:34ch; } .case-intro .eyebrow{ display:block; margin-bottom:1rem; } .case-intro h1{ font-size:clamp(2rem,4.7vw,5.6rem); line-height:1.15; max-width:1200px; } .case-tagline{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.2rem,2.3vw,1.9rem); color:rgba(245,245,245,.7); letter-spacing:-.02em; max-width:620px; margin-top:1.5rem; } .case-help{ font-family:var(--font-body); font-weight:400; font-size:1.125rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:2.5rem; } .case-about{ max-width:var(--container-box); margin:0 auto; padding:0 var(--pad-x) clamp(3rem,7vw,5rem); } .case-about .eyebrow{ display:block; margin-bottom:1.3rem; } .case-about p{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.4; color:var(--text-strong); max-width:1500px; } .case-about p strong{ font-weight:600; } .case-about p + p{ margin-top:1.6rem; } .case-gallery{ max-width:var(--container-box); margin:0 auto; padding:0 var(--pad-x); display:flex; flex-direction:column; gap:clamp(1.5rem,3.5vw,3rem); } .case-gallery img{ width:100%; height:auto; border-radius:4px; } .case-related{ max-width:var(--container-box); margin:0 auto; padding:clamp(3rem,8vw,6rem) var(--pad-x); } .case-related-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; } .case-related-head p{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.15rem,2vw,1.7rem); color:var(--text-strong); max-width:60ch; } @media (max-width:1023px){ .plans{ grid-template-columns:1fr; } .necesidad-grid{ grid-template-columns:1fr 1fr; } .field-grid{ grid-template-columns:1fr; } } @media (max-width:767px){ .cases-grid{ grid-template-columns:1fr; } .necesidad-grid{ grid-template-columns:1fr; } .case-back{ top:110px; left:1.25rem; } .case-intro{ margin-top:1rem; } .recursos-grid{ grid-template-columns:1fr; } } /* ========================================================================== DIAGNÓSTICO SUMA EXPRESS — /diagnostico/ Todo el módulo vive bajo el prefijo .dx- para que no colisione con nada del resto del sitio, y reutiliza los tokens, .btn, .eyebrow, .field y .form-consent ya definidos arriba en vez de redefinirlos. Lenguaje visual: el informe usa los mismos recursos que el resto del sitio — filetes de 1px como separador (igual que .services y .faq-item) y una sola caja real, la del arquetipo, con el mismo tratamiento de .plan-card. Nada de tarjetas rellenas ni acentos rojos: el color vive en el degradé rosa de marca. ========================================================================== */ .dx-wrap{ position:relative; max-width:calc(1100px + 2 * var(--pad-x)); margin:0 auto; /* el top suma --nav-h porque el nav es fijo */ padding:calc(var(--nav-h) + 4rem) var(--pad-x) clamp(4rem,10vw,7rem); } /* Alto mínimo estable: sin esto la página salta de largo en cada pregunta (4 alternativas vs 8, texto corto vs largo) y el scroll se siente errático. */ #dx{ position:relative; z-index:1; min-height:clamp(30rem,58vh,44rem); } /* ---------- Banda de header: la misma foto y el mismo zoom lento del banner de Diagnóstico del Home, presente en TODOS los pasos (portada, preguntas, datos e informe). Va a sangre completa aunque .dx-wrap esté limitado a 1100px, y recorta el zoom con overflow:hidden para que la imagen no se asome por debajo del degradado. ---------- */ .dx-hero{ position:absolute; top:0; left:50%; width:100vw; margin-left:-50vw; height:var(--dx-hero-h,620px); overflow:hidden; z-index:0; pointer-events:none; } /* la imagen en su propia capa: el zoom la mueve a ella sola. El velo va acá y no en el ::after para que el degradado a negro de abajo quede exactamente como se pidió (0% a 100% sobre la mitad inferior). Es el mismo recurso del banner del Home: sin él, el texto blanco al 50% no se lee sobre las zonas claras de la foto. */ .dx-hero::before{ content:''; position:absolute; inset:0; background-image: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.3) 100%), url('../images/bg_cta_diagnostico.jpg'); background-size:cover; background-position:center top; animation:diagnosticoZoom 18s ease-in-out infinite; will-change:transform; } /* degradado a negro sobre la mitad inferior, quieto encima del zoom */ .dx-hero::after{ content:''; position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(0,0,0,0) 50%, #000 100%); } @media (prefers-reduced-motion:reduce){ .dx-hero::before{ animation:none; } } /* ---------- Portada ---------- */ .dx-intro{ text-align:center; padding-top:clamp(1rem,4vw,3rem); } .dx-intro .eyebrow{ display:block; margin-bottom:1.2rem; } .dx-intro-title{ font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.02; max-width:18ch; margin:0 auto; } .dx-intro-title:focus-visible{ outline:none; } .dx-intro-lead{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.5; color:rgba(255,255,255,.82); max-width:56ch; margin:1.6rem auto 0; } .dx-intro-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:2.4rem auto 2.6rem; max-width:46rem; } .dx-intro-facts li{ display:flex; align-items:baseline; gap:.45em; padding:.7em 1.2em; border:1px solid rgba(255,255,255,.3); border-radius:100px; font-family:var(--font-body); font-size:.88rem; color:rgba(255,255,255,.8); } .dx-intro-facts strong{ font-weight:600; color:var(--text-strong); } .dx-intro-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem; } .dx-btn-note{ opacity:.55; text-transform:none; letter-spacing:0; font-weight:400; } .dx-intro-legal{ margin-top:2rem; font-family:var(--font-body); font-size:.85rem; color:rgba(255,255,255,.55); } /* ---------- Pregunta ---------- */ .dx-step{ animation:dxIn .4s var(--ease) both; } @keyframes dxIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .dx-step{ animation:none; } } /* La etiqueta de sección usa el mismo pre-título del resto del sitio (.eyebrow): Inter Regular, mayúsculas, blanco 50%. */ .dx-q-seccion{ display:block; margin-bottom:1.1rem; } .dx-q-title{ font-family:var(--font-display); font-weight:700; color:var(--text-strong); font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.12; letter-spacing:-.03em; text-wrap:balance; max-width:40ch; } .dx-q-title:focus-visible{ outline:none; } .dx-q-help{ font-family:var(--font-body); font-weight:300; font-size:1rem; color:rgba(255,255,255,.6); margin-top:.9rem; max-width:54ch; } .dx-options{ display:flex; flex-direction:column; gap:.6rem; margin-top:clamp(1.8rem,4vw,2.6rem); } .dx-option{ display:flex; align-items:center; gap:1rem; width:100%; text-align:left; padding:1.05rem 1.3rem; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:linear-gradient(180deg, rgba(17,17,17,.85) 0%, rgba(0,0,0,.85) 100%); color:var(--text); cursor:pointer; font-family:var(--font-body); font-weight:400; font-size:1.02rem; line-height:1.35; transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .dx-option:hover{ border-color:rgba(255,255,255,.55); transform:translateX(4px); } .dx-option-key{ flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.6); font-family:var(--font-body); font-size:.72rem; font-weight:500; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .dx-option-text{ flex:1 1 auto; } .dx-option-check{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.25); position:relative; transition:border-color .2s var(--ease), background .2s var(--ease); } .dx-option-check::after{ content:''; position:absolute; inset:0; margin:auto; width:6px; height:10px; border:2px solid #000; border-top:0; border-left:0; transform:rotate(45deg) translate(-1px,-1px) scale(0); transition:transform .2s var(--ease); } .dx-option.is-selected{ background:var(--btn-hover-grad); border-color:transparent; color:#000; transform:translateX(4px); } .dx-option.is-selected .dx-option-key{ background:rgba(0,0,0,.14); border-color:transparent; color:#000; } .dx-option.is-selected .dx-option-check{ background:#000; border-color:#000; } .dx-option.is-selected .dx-option-check::after{ border-color:#fff; transform:rotate(45deg) translate(-1px,-1px) scale(1); } /* ---------- Progreso — va DEBAJO de las alternativas ---------- */ .dx-progress{ margin-top:clamp(2rem,5vw,3rem); } .dx-progress-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.8rem; font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; } .dx-progress-step{ color:rgba(255,255,255,.55); } .dx-progress-pct{ color:var(--text-strong); font-weight:500; font-variant-numeric:tabular-nums; } .dx-progress-track{ height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; } .dx-progress-fill{ height:100%; border-radius:3px; background:var(--btn-hover-grad); transition:width .45s var(--ease); } .dx-nav{ display:flex; align-items:center; justify-content:flex-start; gap:1rem; margin-top:1.6rem; } .dx-back{ background:none; border:0; cursor:pointer; padding:.4em 0; font-family:var(--font-body); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:color .2s var(--ease); } .dx-back:hover{ color:var(--text-strong); } /* ---------- Captura de datos ---------- */ .dx-lead{ display:flex; flex-direction:column; gap:1.1rem; margin-top:clamp(1.8rem,4vw,2.4rem); max-width:34rem; } .dx-opt-tag{ font-weight:400; letter-spacing:.04em; color:rgba(255,255,255,.4); text-transform:none; } .dx-lead-error{ font-family:var(--font-body); font-size:.88rem; color:#FFB8C6; } /* Corrección de un correo mal tipeado en un clic: el mensaje propone la dirección probable y este botón la aplica y reenvía. */ .dx-lead-fix{ background:none; border:0; padding:0 0 1px; margin-left:.3em; cursor:pointer; font:inherit; color:#fff; border-bottom:1px solid rgba(255,255,255,.5); transition:border-color .2s var(--ease); } .dx-lead-fix:hover{ border-bottom-color:#fff; } .dx-consent{ align-self:flex-start; } .dx-lead-submit{ align-self:flex-start; border:none; cursor:pointer; } .dx-lead-legal{ font-family:var(--font-body); font-size:.8rem; color:rgba(255,255,255,.4); } /* ---------- Informe ---------- */ .dx-report{ animation:dxIn .5s var(--ease) both; } .dx-report-head{ text-align:center; padding-bottom:clamp(2.5rem,6vw,4rem); } .dx-report-head .eyebrow{ display:block; margin-bottom:1rem; } .dx-report-title{ font-size:clamp(2.2rem,6.5vw,4.8rem); line-height:1; } .dx-report-title:focus-visible{ outline:none; } .dx-report-resena{ font-family:var(--font-body); font-weight:300; font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.55; color:rgba(255,255,255,.82); max-width:62ch; margin:1.5rem auto 0; } .dx-stars{ display:flex; justify-content:center; gap:.5rem; margin:1.6rem 0 0; } .dx-star{ width:20px; height:20px; background:rgba(255,255,255,.22); -webkit-mask:url('../images/icon_star.svg') center/contain no-repeat; mask:url('../images/icon_star.svg') center/contain no-repeat; } .dx-star.is-full{ background:#fff; } /* media estrella: el mismo ícono, relleno solo en su mitad izquierda */ .dx-star.is-half{ background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,.22) 50%); } /* Los bloques del informe se separan con filete, igual que .services y .faq */ .dx-block{ padding:clamp(2.4rem,5vw,3.6rem) 0; border-top:1px solid var(--line); } .dx-block-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.1; letter-spacing:-.03em; color:var(--text-strong); } .dx-block-lead{ font-family:var(--font-body); font-weight:300; font-size:1rem; color:rgba(255,255,255,.6); margin-top:.7rem; max-width:64ch; } /* Pilares */ .dx-pilares{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem 3rem; margin-top:2.2rem; } .dx-pilar-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.8rem; } .dx-pilar-nombre{ font-family:var(--font-body); font-weight:500; font-size:1.05rem; color:var(--text-strong); } .dx-pilar-tag{ font-family:var(--font-body); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); } /* Los dos estados que piden atención se marcan en el rosa de marca; los resueltos quedan en blanco atenuado. El largo de la barra ya dice cuánto. */ .dx-pilar[data-estado="critico"] .dx-pilar-tag, .dx-pilar[data-estado="fragil"] .dx-pilar-tag{ color:#FFB8C6; } .dx-pilar-track{ height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; } .dx-pilar-fill{ height:100%; width:0; border-radius:3px; background:var(--btn-hover-grad); transition:width .8s var(--ease); } .dx-pilar-fill.is-on{ width:var(--w); } @media (prefers-reduced-motion:reduce){ .dx-pilar-fill{ transition:none; } } .dx-pilar-desc{ font-family:var(--font-body); font-weight:300; font-size:.88rem; color:rgba(255,255,255,.5); margin-top:.7rem; } /* Arquetipo — única caja real del informe, con el mismo tratamiento de .plan-card */ .dx-arquetipo{ border:1px solid rgba(255,255,255,.2); border-radius:20px; background:linear-gradient(180deg, rgba(17,17,17,.85) 0%, rgba(0,0,0,.85) 100%); padding:clamp(2rem,3.4vw,3.2rem); } .dx-arq-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.05; letter-spacing:-.03em; color:var(--text-strong); margin-top:.8rem; } .dx-arq-desc{ font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.55; color:rgba(255,255,255,.82); margin-top:1.1rem; max-width:64ch; } .dx-arq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.15); } .dx-arq-grid p{ font-family:var(--font-body); font-weight:300; font-size:.98rem; line-height:1.5; color:rgba(255,255,255,.78); } .dx-arq-label{ font-family:var(--font-body); font-weight:400; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:.6rem; } /* Hallazgos — filas regladas, no tarjetas */ .dx-hallazgos{ margin-top:2.2rem; } .dx-hallazgo{ display:flex; gap:1.4rem; padding:1.8rem 0; border-top:1px solid var(--line); } .dx-hallazgo:last-child{ border-bottom:1px solid var(--line); } .dx-hallazgo-num{ flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--btn-hover-grad); color:#000; font-family:var(--font-body); font-size:.8rem; font-weight:600; } .dx-hallazgo-q{ font-family:var(--font-body); font-weight:500; font-size:1rem; color:var(--text-strong); line-height:1.4; } .dx-hallazgo-r{ font-family:var(--font-body); font-weight:300; font-style:italic; font-size:.88rem; color:rgba(255,255,255,.5); margin-top:.4rem; } .dx-hallazgo-t{ font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.55; color:rgba(255,255,255,.85); margin-top:.9rem; max-width:70ch; } /* Lista breve de pendientes */ .dx-lista{ display:flex; flex-direction:column; gap:.8rem; margin-top:1.4rem; } .dx-lista li{ display:flex; align-items:flex-start; gap:.9rem; font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.45; color:rgba(255,255,255,.7); } .dx-dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; margin-top:.5em; background:var(--btn-hover-grad); } /* Recomendaciones — filas regladas de dos columnas (etiqueta / contenido), el mismo patrón de .service-row */ .dx-recos{ margin-top:2.2rem; } .dx-reco{ display:grid; grid-template-columns:minmax(180px,22%) 1fr; gap:1.5rem 2.5rem; padding:1.8rem 0; border-top:1px solid var(--line); } /* Todo el contenido de la recomendación va en la segunda columna. Sin este contenedor, los párrafos son hijos directos de la grilla y se reparten entre las dos columnas: el cuerpo caía debajo de la etiqueta. */ .dx-reco-cont{ min-width:0; } .dx-reco-cont .dx-lista{ margin-top:1rem; } .dx-reco:last-child{ border-bottom:1px solid var(--line); } .dx-reco-label{ font-family:var(--font-body); font-weight:400; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); } .dx-reco-titulo{ font-family:var(--font-body); font-weight:600; font-size:1.1rem; color:var(--text-strong); margin-bottom:.6rem; } .dx-reco-cuerpo{ font-family:var(--font-body); font-weight:300; font-size:1.02rem; line-height:1.55; color:rgba(255,255,255,.8); max-width:70ch; } .dx-reco-accion{ font-family:var(--font-body); font-weight:400; font-size:.95rem; line-height:1.45; color:var(--text-strong); margin-top:1rem; } .dx-reco-accion span{ display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:.35rem; } /* Caso */ .dx-caso .eyebrow{ display:block; margin-bottom:1.1rem; } .dx-caso-texto{ font-family:var(--font-body); font-weight:300; font-size:clamp(1.1rem,2vw,1.45rem); line-height:1.45; color:var(--text-strong); max-width:64ch; } .dx-link{ display:inline-block; margin-top:1.3rem; background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-body); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); border-bottom:1px solid rgba(255,255,255,.25); transition:color .2s var(--ease), border-color .2s var(--ease); } .dx-link:hover{ color:#fff; border-color:#fff; } /* CTA final — misma foto y mismo zoom lento que el banner del Home */ .dx-cta{ position:relative; overflow:hidden; text-align:center; border-radius:20px; padding:clamp(3.5rem,8vw,6rem) clamp(1.5rem,4vw,3rem); margin-top:clamp(2.5rem,5vw,4rem); } .dx-cta::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.7) 100%), url('../images/bg_cta_diagnostico.jpg'); background-size:cover; background-position:center; animation:diagnosticoZoom 18s ease-in-out infinite; will-change:transform; } @media (prefers-reduced-motion:reduce){ .dx-cta::before{ animation:none; } } .dx-cta > *{ position:relative; z-index:1; } .dx-cta-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.05; letter-spacing:-.03em; color:var(--text-strong); max-width:20ch; margin:0 auto; } .dx-cta-text{ font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.55; color:var(--text-strong); max-width:54ch; margin:1.2rem auto 0; } .dx-cta-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem; margin-top:2.2rem; } .dx-cta-actions button{ cursor:pointer; } .dx-report-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; } .dx-report-meta{ font-family:var(--font-body); font-size:.8rem; color:rgba(255,255,255,.4); } @media (max-width:900px){ .dx-reco{ grid-template-columns:1fr; gap:.6rem; } } @media (max-width:767px){ .dx-wrap{ --dx-hero-h:460px; } .dx-pilares, .dx-arq-grid{ grid-template-columns:1fr; } .dx-option{ font-size:.95rem; padding:.95rem 1.1rem; gap:.8rem; } .dx-hallazgo{ gap:1rem; } .dx-intro-facts{ gap:.5rem; } } /* ---------- Impresión = el "PDF" del informe ---------- El CTA "Descargar el informe en PDF" llama a window.print(): el navegador ofrece "Guardar como PDF" sin que haga falta un generador de PDF en el servidor. Estas reglas son las que hacen que ese PDF se vea como un documento y no como una captura de una web negra. */ @media print{ @page{ margin:16mm 14mm; } html, body{ background:#fff !important; color:#111 !important; } .site-nav-wrap, .mobile-menu, .ribbon, .site-footer, .sello, .cursor, .ck-panel, .dx-report-foot .dx-link, .dx-cta-actions, .dx-nav{ display:none !important; } .dx-wrap{ max-width:none; padding:0; } .dx-wrap::before, .dx-wrap::after, .dx-cta::before{ display:none !important; } #dx{ min-height:0; } .dx-report{ animation:none; } .dx-report-head{ text-align:left; border-bottom:2px solid #111; padding-bottom:1.2rem; } .dx-report-title, .dx-arq-name, .dx-cta-title, .dx-block-title{ color:#111 !important; } .dx-report-resena, .dx-arq-desc, .dx-hallazgo-t, .dx-reco-cuerpo, .dx-caso-texto, .dx-lista li, .dx-arq-grid p, .dx-block-lead, .dx-pilar-desc, .dx-hallazgo-r, .dx-cta-text, .dx-reco-label, .dx-arq-label, .dx-pilar-tag{ color:#333 !important; } .dx-hallazgo-q, .dx-reco-titulo, .dx-pilar-nombre, .dx-reco-accion{ color:#111 !important; } .dx-star{ background:#ccc; } .dx-star.is-full{ background:#111; } .dx-star.is-half{ background:linear-gradient(90deg,#111 50%,#ccc 50%); } .dx-stars{ justify-content:flex-start; } .dx-block, .dx-hallazgo, .dx-reco{ border-top-color:#ddd !important; } .dx-hallazgo:last-child, .dx-reco:last-child{ border-bottom-color:#ddd !important; } .dx-arquetipo, .dx-cta{ background:#f6f6f6 !important; border:1px solid #ddd !important; } .dx-hallazgo-num{ background:#111 !important; color:#fff !important; } .dx-dot{ background:#111 !important; } .dx-pilar-track{ background:#e8e8e8; } .dx-pilar-fill{ width:var(--w) !important; background:#111 !important; transition:none; } .dx-block, .dx-report-head, .dx-hallazgo, .dx-reco, .dx-arquetipo{ break-inside:avoid; } .dx-cta{ break-before:page; } } /* ========================================================================== PANEL DE COOKIES — Consent Mode v2 (ver js/consentimiento.js) Barra fija abajo, no un muro: el sitio se puede leer mientras se decide, y con todo denegado por defecto no hay nada que bloquear. Reutiliza los tokens y las clases .btn del resto del sitio. ========================================================================== */ .ck-panel{ position:fixed; z-index:1200; left:0; right:0; bottom:0; padding:0 var(--pad-x) clamp(1rem,2.5vw,1.5rem); opacity:0; transform:translateY(16px); transition:opacity .3s var(--ease), transform .3s var(--ease); } .ck-panel.is-visible{ opacity:1; transform:none; } /* `display` en una clase gana sobre la regla `[hidden]{display:none}` del navegador, así que los bloques plegables lo declaran ellos mismos. */ .ck-panel[hidden], .ck-opciones[hidden], .ck-btn[hidden]{ display:none; } @media (prefers-reduced-motion:reduce){ .ck-panel{ transition:none; transform:none; } } .ck-caja{ max-width:var(--container-box); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; padding:1.35rem clamp(1.25rem,3vw,2rem); background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 50px rgba(0,0,0,.55); } .ck-texto{ flex:1 1 380px; min-width:0; } .ck-titulo{ margin:0 0 .35rem; font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.01em; color:var(--text-strong); } .ck-cuerpo{ margin:0; font-size:.86rem; line-height:1.55; color:var(--text-dim); } .ck-cuerpo a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; } .ck-cuerpo a:hover{ color:var(--text-strong); } /* Las acciones no se encogen, para que "Rechazar" nunca quede más chico ni más escondido que "Aceptar todo". */ .ck-acciones{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; } .ck-btn{ cursor:pointer; } .ck-link{ background:none; border:none; padding:.4em .2em; cursor:pointer; font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); text-decoration:underline; text-underline-offset:4px; transition:color .25s var(--ease); } .ck-link:hover{ color:var(--text-strong); } /* Las preferencias ocupan la fila completa al desplegarse, debajo del texto y de los botones, para que abrirlas no mueva las acciones de lugar. */ .ck-opciones{ flex:1 1 100%; order:3; display:grid; gap:.85rem; margin-top:.25rem; padding-top:1.15rem; border-top:1px solid var(--line); } .ck-opcion{ display:flex; align-items:flex-start; gap:.7rem; font-size:.84rem; line-height:1.5; color:var(--text-dim); cursor:pointer; } .ck-opcion input{ flex:0 0 auto; width:17px; height:17px; margin:.15rem 0 0; accent-color:#D2B1FF; cursor:pointer; } .ck-opcion strong{ display:block; font-weight:600; color:var(--text-strong); margin-bottom:.1rem; } .ck-opcion.is-fija{ cursor:default; opacity:.75; } .ck-opcion.is-fija input{ cursor:default; } @media (max-width:720px){ .ck-caja{ padding:1.25rem; border-radius:18px; } .ck-acciones{ width:100%; } .ck-acciones .ck-btn{ flex:1 1 auto; justify-content:center; } .ck-link{ flex:1 1 100%; text-align:center; } }