/* CSS de la home (sep 2026): antes vivia incrustado en index.html (~90 KB por visita, sin cache). Misma cascada: se carga despues de styles.css, footer.css, navdrop.css y pricing.css. Sustituir con ?v= nuevo al editar. */ /* ═══ PUENTE AL DESIGN SYSTEM ═══ Nuestros roles semanticos ahora NO tienen valores propios: apuntan a los tokens del sistema. Cambiar el sistema cambia la landing. */ :root{ /* GRIS FANTASMA — se sube de #BDBDBD a #A8A8A8 porque al adelgazar el trazo (display a 300, h2 a 400) las palabras fantasma perdieron legibilidad real. El override vive AQUI y no en tokens/colors.css: el design system oficial queda intacto y este archivo declara su desviacion. #8E8E8E da 3.28:1 sobre blanco y 3.01:1 sobre la banda: PASA AA de texto grande (umbral 3:1) en los dos fondos. NO lo devuelvas a #BDBDBD ni a #A8A8A8: ninguno pasa. Ver docs/decisiones.md. */ --text-ghost:#8E8E8E; --r-panel:var(--radius-lg);--r-control:var(--radius-pill); --gutter:clamp(1.5rem,5vw,6rem);--maxw:var(--container-max); /* La pagina es CLARA. El manual no contempla modo oscuro: hay un solo juego de valores. Las secciones oscuras puntuales usan .drama (--surface-inverse). */ --lienzo:var(--surface-page);--elevada:var(--surface-alt);--hundida:var(--surface-sunken); --texto:var(--text-strong);--texto-2:var(--text-body);--texto-3:var(--text-muted); --linea:var(--border-subtle);--linea-suave:var(--neutral-150); --lienzo-rgb:255,255,255;--lienzo-c:255 255 255;--texto-c:10 10 10; /* MONOCROMO ESTRICTO (manual): el enfasis es de VALOR, no de tono. El acento es tinta; --status-positive queda disponible solo donde la semantica de UI lo exija, que en una landing es practicamente nunca. */ --acento:var(--control-fill);--acc-txt:var(--control-fg); /* VERDE DE ESTADO (ago 2026): unico color fuera del monocromo, tomado del producto (chat.iudex.mx). Se usa con cuentagotas y SOLO como señal de estado vivo/listo: puntitos, nunca texto ni botones. */ --verde:#0FA47A; /* particulas de los tres canvas: rampa de grises del sistema */ --part-1:var(--ink);--part-2:var(--neutral-600);--part-3:var(--neutral-400); /* alias historicos: leen roles, nunca valores */ --ink-txt:var(--texto); --bone:var(--lienzo);--bone-deep:var(--elevada);--paper:var(--elevada); --gray:var(--texto-2);--faint:var(--texto-3); --accent:var(--acento);--accent-dark:var(--control-fill-hover);--accent-lite:var(--acento); --line:var(--linea);--line-soft:var(--linea-suave); --sans:var(--font-sans);--serif:var(--font-display);--mono:var(--font-mono); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--sans);color:var(--ink-txt);background:var(--lienzo);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* seleccion de texto en verde palido: el color del producto aparece justo cuando el lector interactua, sin pintar el lienzo */ ::selection{background:rgba(15,164,122,.16)} /* DRAMA — corte a negro sobre lienzo blanco. Al quitarse La brecha (jul 2026) esta clase quedo SIN USAR. Se conserva a proposito: es el mecanismo completo para volver a oscurecer una seccion con solo agregarle la clase. Ver docs/decisiones.md. */ .drama{ --lienzo:#0A0A0A;--elevada:#171717;--hundida:#050505; --texto:#FFFFFF;--texto-2:#B4B4B4;--texto-3:#8F8F8F; --acento:var(--white);--acc-txt:var(--ink); --part-1:var(--white);--part-2:var(--neutral-400);--part-3:var(--neutral-600); --linea:rgba(255,255,255,.12);--linea-suave:rgba(255,255,255,.07); --lienzo-c:10 10 10;--texto-c:255 255 255; /* los alias se re-declaran aqui a proposito: un alias definido en :root se computa ahi y los hijos heredan el valor YA resuelto, asi que re-mapear solo los roles no bastaria */ --ink:#FFFFFF;--bone:#0A0A0A;--bone-deep:#171717;--paper:#171717; --gray:#B4B4B4;--faint:#8F8F8F; --accent:var(--white);--accent-dark:var(--white);--accent-lite:var(--white); --line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.07); background:var(--lienzo);color:var(--texto); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* :link y :visited del navegador ganan por especificidad a la regla de arriba y le devuelven el azul (y el violeta de visitado) a cualquier enlace sin clase. :where() los neutraliza SIN sumar especificidad, asi que ninguna regla existente cambia de comportamiento. El hover usa --texto, no --ink-txt, porque --texto si se re-declara en .drama y en el pie: el enlace hereda el valor correcto sobre fondo claro Y sobre fondo oscuro. */ a:where(:link,:visited){color:inherit} a:hover{color:var(--texto)} /* pretty equilibra el reparto de lineas para que ninguna quede con una sola palabra huerfana. No cambia anchos: solo decide donde corta. */ p,li{text-wrap:pretty} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-xs)} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} /* Palabras FANTASMA del titular a dos tonos: el gesto tipografico de la marca. Mismo peso y misma familia que el resto — el contraste es de VALOR, no de tono. */ .gh{color:var(--text-ghost)} .num{font-variant-numeric:tabular-nums} /* nav */ /* ═══ BARRA ═══ En el tope es totalmente transparente. Al bajar gana fondo y desenfoque; al seguir bajando se encoge. Al subir vuelve a su alto completo. Todo por clase: el JS solo decide cual poner, las transiciones las hace el CSS. */ .nav{position:sticky;top:0;z-index:40;background:transparent;backdrop-filter:none; will-change:transform; transition:transform .45s var(--ease-out),background .45s var(--ease-out), backdrop-filter .45s var(--ease-out),border-color .45s var(--ease-out), box-shadow .45s var(--ease-out)} /* mas alla del umbral y bajando: se va del todo. -110% y no -100%: la sombra de la capsula asoma si el corte es exacto. */ .nav--oculta{transform:translateY(-110%)} /* El fondo, el radio y el margen NO van en .nav —que ocupa todo el ancho— sino en un envoltorio interno: asi la capsula se recorta de los dos lados y se despega del tope sin sacar la barra del flujo. Se anima max-width y no scaleX porque scaleX deformaria el texto de los enlaces. */ .nav-caja{position:relative;max-width:100%;margin:0 auto;border-radius:0; background:transparent;border:1px solid transparent; transition:max-width .45s var(--ease-out),border-radius .45s var(--ease-out), margin-top .45s var(--ease-out),background .45s var(--ease-out), border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)} /* EL DESENFOQUE VA EN UN ::before, NO EN .nav-caja. Un backdrop-filter crea una "raiz de fondo": cualquier descendiente con su propio backdrop-filter (los paneles desplegables) solo desenfoca lo que hay DENTRO de ese ancestro, no la pagina de atras (Safari lo muestra crudo). Con el blur en un pseudo-elemento hermano, los paneles si ven el video. */ .nav-caja::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; pointer-events:none;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0); transition:-webkit-backdrop-filter .45s var(--ease-out),backdrop-filter .45s var(--ease-out)} .nav--fondo .nav-caja{background:rgba(var(--lienzo-rgb),.85);border-bottom-color:var(--line-soft)} .nav--fondo .nav-caja::before{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .nav--chica .nav-caja{max-width:86%;margin-top:10px; border-radius:var(--radius-pill);border-color:var(--line-soft); background:rgba(var(--lienzo-rgb),.94); box-shadow:0 6px 26px rgba(10,10,10,.07)} .nav--chica .nav-caja::before{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .nav--chica .nav-in{padding-inline:clamp(20px,2.6vw,38px)} @media(max-width:760px){ .nav--chica .nav-caja{max-width:92%} } .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px; transition:height .45s var(--ease-out),padding .45s var(--ease-out)} .nav--chica .nav-in{height:52px} .nav .mark img{transition:transform .45s var(--ease-out);transform-origin:left center} .nav--chica .mark img{transform:scale(.85)} /* SUBRAYADO: crece desde la IZQUIERDA al entrar y se retrae hacia la DERECHA al salir. El truco es el origen, que NO se transiciona: cambia de golpe. */ .nav-links a:not(.btn){position:relative;padding-bottom:5px} .nav-links a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:0; height:1px;background:var(--verde);transform:scaleX(0); transform-origin:right center;transition:transform .25s var(--ease-out)} .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).act::after{transform:scaleX(1);transform-origin:left center} .nav-links a:not(.btn).act{color:var(--ink-txt)} @media (prefers-reduced-motion:reduce){ .nav,.nav-caja,.nav-caja::before,.nav-in,.nav .mark img,.nav-links a:not(.btn)::after{transition:none} .nav--chica .nav-caja{max-width:100%;margin-top:0;border-radius:0} .nav--oculta{transform:none} .nav--chica .nav-in{height:64px} .nav--chica .mark img{transform:none} } /* SOBRE EL HERO DE VIDEO (home): la barra se invierte a blanco y, cuando gana fondo al bajar, usa vidrio oscuro en vez de blanco. El wordmark del nav es el PNG negro incrustado: invert(1) lo vuelve blanco sin otro archivo. */ .nav .mark img{transition:filter .35s var(--ease-out),transform .45s var(--ease-out)} .nav--claro .mark img{filter:invert(1)} .nav--claro .nav-links{color:rgba(255,255,255,.8)} .nav--claro .nav-links a:hover,.nav--claro .nav-links a:not(.btn).act{color:#fff} .nav--claro .btn-ghost{background:transparent;border-color:rgba(255,255,255,.38);color:#fff} .nav--claro .btn-ghost:hover{background:rgba(255,255,255,.12)} .nav--claro .btn-dark{background:#fff;color:#0A0A0A} .nav--claro .btn-dark:hover{background:#E6E6E6} .nav--claro .nav-burger span{background:#fff} .nav--claro.nav--fondo .nav-caja{background:rgba(10,10,10,.38);border-bottom-color:rgba(255,255,255,.08)} .nav--claro.nav--chica .nav-caja{background:rgba(10,10,10,.55);border-color:rgba(255,255,255,.12); box-shadow:0 6px 26px rgba(0,0,0,.3)} /* Los paneles desplegables (Soluciones / Compañía) siguen el mismo vidrio oscuro mientras la barra esta sobre el video: la tarjeta blanca opaca tapaba el hero (feedback del dueño, 23 ago 2026). Fuera del hero vuelven a la tarjeta clara de navdrop.css. */ /* Vidrio esmerilado real: desenfoca el video (ver nota del ::before de .nav-caja: el blur de la barra NO puede ser ancestro de este panel). */ .nav--claro .nav-panel-card{background:rgba(12,12,12,.62); -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3); border-color:rgba(255,255,255,.12); box-shadow:0 4px 12px rgba(0,0,0,.2),0 28px 70px rgba(0,0,0,.45)} .nav--claro .nav-panel-item strong{color:#fff} .nav--claro .nav-panel-item span{color:rgba(255,255,255,.66)} .nav--claro .nav-panel-item:hover{background:rgba(255,255,255,.09)} .nav--claro .nav-panel-todas{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.66)} .nav--claro .nav-panel-todas:hover{color:#fff} .mark{display:inline-flex;align-items:center} .mark img{height:26px;width:auto} .nav-links{display:flex;align-items:center;gap:26px;font-size:13.5px;color:var(--gray)} .nav-links a:hover{color:var(--ink-txt)} /* Pastilla del sistema: etiqueta SIEMPRE versal y tracked (Button.prompt.md) */ .btn{display:inline-block;font-size:var(--fs-label);font-weight:var(--fw-medium); padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill); border:1px solid transparent;text-transform:uppercase;letter-spacing:var(--ls-label-sm); transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)} .btn-dark{background:var(--control-fill);color:var(--control-fg);box-shadow:var(--shadow-pill)} .btn-dark:hover{background:var(--control-fill-hover)} .btn-accent{background:var(--control-fill);color:var(--control-fg);box-shadow:var(--shadow-pill)} .btn-accent:hover{background:var(--control-fill-hover)} .btn-ghost{background:var(--control-outline-bg);border-color:var(--control-outline-border);color:var(--text-primary)} .btn-ghost:hover{background:var(--control-ghost-fill)} /* En la barra el boton va DISCRETO: sin la sombra colgante (dentro de una capsula delgada se lee como bloque pegado), mas petite y con la etiqueta mas fina. El negro primario se queda; lo tosco era el volumen. */ .nav .btn{padding:7px 16px;font-size:11px;letter-spacing:.09em; box-shadow:none;transform:translateZ(0)} .nav .btn:hover{box-shadow:none} /* Sesion: pastilla delineada con icono de persona; enlaza a chat.iudex.mx */ .nav .btn-sesion{display:inline-flex;align-items:center;gap:7px;vertical-align:middle} .btn-sesion svg{width:13px;height:13px;flex:none} /* ─ MENU MOVIL: en angosto la barra queda logo + hamburguesa; los enlaces se despliegan en un panel oscuro a pantalla completa ─ */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;padding:9px 8px;background:none;border:0;cursor:pointer} .nav-burger span{display:block;height:2px;background:var(--text-strong);border-radius:1px} .menu-movil{position:fixed;inset:0;z-index:80;background:rgba(5,5,5,.30); padding:10px 10px 0;opacity:0;visibility:hidden;pointer-events:none} .menu-movil.abierto{opacity:1;visibility:visible;pointer-events:auto} .menu-movil-marca{display:none} /* la tarjeta de vidrio: hermana del panel desplegable de escritorio */ .menu-movil-carta{background:rgba(12,12,12,.62); -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px); border:1px solid rgba(255,255,255,.12);border-radius:18px; color:var(--text-on-inverse);display:flex;flex-direction:column; max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow:auto; padding:6px 20px 18px;box-shadow:0 24px 70px rgba(0,0,0,.45)} .menu-movil-top{display:flex;align-items:center;justify-content:space-between;height:52px;flex:none} .menu-movil-top img{height:20px;width:auto;filter:invert(1)} .menu-movil-cerrar{position:relative;width:42px;height:42px;background:none;border:0; color:inherit;margin-right:-10px;cursor:pointer} .menu-movil-cerrar span{position:absolute;left:9px;right:9px;top:50%;height:2px;margin-top:-1px; background:currentColor;border-radius:1px} .menu-movil-cerrar span:first-child{translate:0 -4px} .menu-movil-cerrar span:last-child{translate:0 4px} .menu-movil.abierto .menu-movil-cerrar span{translate:0 0} .menu-movil.abierto .menu-movil-cerrar span:first-child{rotate:45deg} .menu-movil.abierto .menu-movil-cerrar span:last-child{rotate:-45deg} .menu-movil-links{list-style:none;margin:0;padding:0} .menu-movil-links li{border-top:1px solid rgba(255,255,255,.10)} .menu-movil-links a{display:flex;align-items:center;justify-content:space-between;gap:12px; font-size:17px;color:var(--text-on-inverse);padding:14px 2px} .menu-sesion{margin-top:14px;align-self:stretch;justify-content:center; background:var(--white);color:var(--ink); border-radius:var(--radius-pill);padding:13px 26px;font-size:12px; display:inline-flex;align-items:center;gap:9px} .menu-sesion svg{width:11px;height:11px;flex:none} /* submenú acordeón (Soluciones): chevron abajo cerrado, arriba abierto */ .menu-sub-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; font-size:17px;color:var(--text-on-inverse);padding:15px 2px;background:none;border:0; font-family:inherit;text-align:left;cursor:pointer} .menu-sub-btn::after{content:"";width:7px;height:7px;flex:none;margin-right:3px; border-top:1.5px solid rgba(255,255,255,.5);border-right:1.5px solid rgba(255,255,255,.5); rotate:135deg;transition:rotate .25s var(--ease-out)} .menu-sub.abierto .menu-sub-btn::after{rotate:-45deg} .menu-sub-caja{display:grid;grid-template-rows:0fr} .menu-sub.abierto .menu-sub-caja{grid-template-rows:1fr} .menu-sub-lista{list-style:none;margin:0;padding:0;overflow:hidden;min-height:0} .menu-movil-links .menu-sub-lista li{border-top:0} .menu-movil-links .menu-sub-lista a{font-size:15px;color:rgba(255,255,255,.78); padding:10px 2px 10px 16px} .menu-movil-links .menu-sub-lista a::after{content:none} /* iOS: el rebote inferior mostraba franja blanca bajo el pie negro; el lienzo pinta blanco arriba y negro abajo para que el overscroll siga a la pagina */ html{background:linear-gradient(var(--surface-page) 50%,var(--surface-inverse) 50%)} /* apertura: el panel funde, los enlaces suben escalonados y la marca de fondo asienta con un zoom sutil; al cerrar todo funde junto y rapido */ @media (prefers-reduced-motion:no-preference){ .menu-movil{transition:opacity .22s ease,visibility 0s linear .22s} .menu-movil.abierto{transition:opacity .24s ease} .menu-movil-carta{translate:0 -12px;scale:.98; transition:translate .28s var(--ease-out),scale .28s var(--ease-out)} .menu-movil.abierto .menu-movil-carta{translate:0 0;scale:1} .menu-movil-cerrar span{transition:translate .18s ease,rotate .22s var(--ease-out)} .menu-movil.abierto .menu-movil-cerrar span{ transition:translate .18s ease .1s,rotate .25s var(--ease-out) .28s} .menu-movil-links li,.menu-movil .menu-sesion{opacity:0;translate:0 10px; transition:opacity .26s ease,translate .3s var(--ease-out)} .menu-movil.abierto .menu-movil-links li, .menu-movil.abierto .menu-sesion{opacity:1;translate:0 0} .menu-movil.abierto .menu-movil-links li:nth-child(1){transition-delay:.05s} .menu-movil.abierto .menu-movil-links li:nth-child(2){transition-delay:.09s} .menu-movil.abierto .menu-movil-links li:nth-child(3){transition-delay:.13s} .menu-movil.abierto .menu-movil-links li:nth-child(4){transition-delay:.17s} .menu-movil.abierto .menu-movil-links li:nth-child(5){transition-delay:.21s} .menu-movil.abierto .menu-movil-links li:nth-child(6){transition-delay:.25s} .menu-movil.abierto .menu-sesion{transition-delay:.3s} .menu-sub-caja{transition:grid-template-rows .34s var(--ease-out)} .menu-sub-lista{opacity:0;translate:0 -6px;transition:opacity .26s ease,translate .3s var(--ease-out)} .menu-sub.abierto .menu-sub-lista{opacity:1;translate:0 0} } /* scaffold */ /* RECORTADO (ago 2026, "mucho espacio"): --section-y (80-144px) duplicado entre seccion y seccion daba huecos de ~290px. Un tercio menos. */ .section{padding-block:clamp(52px,7vw,96px)} .band{--paper:var(--lienzo);background:var(--elevada);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .drama .mono{color:rgba(255,255,255,.5)} .drama .lede{color:rgba(255,255,255,.72)} .drama .eyebrow{border-bottom-color:rgba(255,255,255,.18)} .eyebrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:clamp(28px,4vw,44px);border-bottom:1px solid var(--line)} .h1{font-size:clamp(42px,8.4vw,92px);line-height:.98;letter-spacing:-.035em;font-weight:var(--fw-light);margin:0 0 24px} .h1 .gh{display:block} .h2{font-size:clamp(30px,4.6vw,54px);line-height:1.06;letter-spacing:-.03em;font-weight:var(--fw-light);margin:0 0 20px;text-wrap:balance} .lede{font-size:var(--fs-body-lg);line-height:var(--lh-snug);color:var(--text-body);max-width:52ch;margin:0 0 var(--space-7);text-wrap:pretty} /* hero con video de fondo */ /* Dos clips de 8 s (CDMX: Reforma y Bellas Artes) que se alternan con fundido cruzado. La gradacion (saturacion, contraste, exposicion) va HORNEADA en los archivos, no en filter CSS: un filter sobre video a pantalla completa cuesta GPU en cada cuadro. El poster es el respaldo universal: reduced-motion, Save-Data, autoplay bloqueado o JS apagado. */ .hero-media{position:absolute;inset:0;z-index:-2; background:#0A0A0A url(assets/video/hero-a.jpg) center/cover no-repeat} .hero-media__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.1s ease} .hero-media__v.is-on{opacity:1} .hero-media--fija .hero-media__v{display:none} /* velo oscuro: mas denso arriba (barra legible) y abajo (boton), y una vineta elipsoidal detras del bloque de texto para que el blanco lea */ .hero-media::after{content:"";position:absolute;inset:0; background:radial-gradient(ellipse 62% 58% at 50% 60%,rgba(5,5,5,.48),rgba(5,5,5,0) 72%), linear-gradient(180deg,rgba(5,5,5,.52) 0%,rgba(5,5,5,.30) 38%,rgba(5,5,5,.62) 100%)} .vidctl{position:absolute;top:20px;right:var(--gutter);z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);display:grid;place-items:center;transition:background .18s,border-color .18s} .vidctl:hover{background:rgba(255,255,255,.95);border-color:rgba(11,11,11,.24)} .vidctl svg{width:13px;height:13px;fill:var(--ink-txt)} .vidctl .ic-pause{display:block}.vidctl .ic-play{display:none} .vidctl[data-paused="true"] .ic-pause{display:none} .vidctl[data-paused="true"] .ic-play{display:block} .no-video .vidctl{display:none} /* hero */ .actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,64px)} /* El sistema no contempla serif italica, asi que "Rest assured." pasa a la segunda voz de la marca: etiqueta versal tracked. Ver nota al usuario. */ .assured{font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--text-muted);margin:0 0 18px} .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat{padding:22px 20px 20px;border-right:1px solid var(--line-soft)} .stat:last-child{border-right:0} .stat-n{font-size:clamp(22px,2.6vw,30px);font-weight:var(--fw-medium);letter-spacing:-.028em;line-height:1.1} .stat .mono{display:block;margin-top:7px;letter-spacing:.09em} /* frame */ .hero-sellos{font-size:11px;letter-spacing:.11em;color:var(--faint);margin:22px 0 0;line-height:1.9} /* marquee de clientes */ .strip{padding-block:34px;border-bottom:1px solid var(--line-soft);background:var(--bone-deep)} .strip-h{text-align:center;margin-bottom:24px} .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .mq-track{display:flex;width:max-content;gap:14px;animation:mq 38s linear infinite} .marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused} @keyframes mq{to{transform:translateX(-50%)}} .plate{ flex:0 0 auto;display:grid;place-items:center; width:186px;height:66px;border:1px solid var(--line);border-radius:var(--radius-pill); background:var(--bone);color:var(--faint); font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; } .srcs a{border-bottom:1px solid rgba(255,255,255,.25)} /* ═══ PASADA FINAL DE PULIDO ═══ Estados consistentes en TODO lo clicable. Antes, cuatro familias (el logo, los enlaces de cita, los resúmenes del acordeón y varios botones) cambiaban de golpe o no cambiaban: el hover se sentía roto según dónde cayera el ratón. */ a,button,summary{transition:color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)} .mark{display:inline-block;transition:opacity var(--dur-fast) var(--ease-out)} .mark:hover{opacity:.62} .foot-legal a:hover{color:var(--text-on-inverse)} .cite-row a:hover{opacity:.6} summary{cursor:pointer} summary:hover{color:var(--text-strong)} /* el foco nunca queda tapado por la barra pegajosa */ :focus-visible{scroll-margin-top:96px} /* el ancla de sección tampoco */ section[id]{scroll-margin-top:80px} /* ═══ 01 · HERO MINIMO ═══ Pantalla completa, centrado en los dos ejes. El vacio es deliberado: el espaciado sale de la escala del sistema, no de numeros sueltos. */ .hero-min{position:relative;isolation:isolate;min-height:100vh;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;padding:calc(var(--space-8) + var(--nav-h)) var(--gutter) var(--space-7); gap:clamp(8px,1.4vw,18px);overflow:clip; /* la barra es sticky y ocupa su alto en el flujo: el hero se mete debajo para que el video llegue hasta el borde superior de la ventana */ --nav-h:66px;margin-top:calc(-1 * var(--nav-h));color:#fff} /* LOGO DEL HERO — presencia por difusion, no por elementos nuevos. El halo va absoluto para que su tamaño NO estire la fila del grid; si estuviera en flujo, los 700px de diametro empujarian todo el hero. */ .hero-min__logo{position:relative;display:grid;place-items:center} .hero-min__halo{position:absolute;left:50%;top:50%;translate:-50% -50%; width:min(1600px,190vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle closest-side,rgba(5,5,5,.30),rgba(5,5,5,0) 70%)} .hero-min__mark,.hero-min__difusa{grid-area:1/1;height:clamp(280px,min(34vw,44vh),560px); width:auto;max-width:88vw;object-fit:contain;display:block} .hero-min__mark{z-index:2} .hero-min__difusa{z-index:1;filter:blur(48px);opacity:.14;pointer-events:none} @keyframes marcaEntra{from{opacity:0;scale:.94}to{opacity:1;scale:1}} @keyframes difusaEntra{from{opacity:0;scale:.94}to{opacity:.10;scale:1}} /* 3s de ida en alternate = ciclo de respiracion de 6s. La curva es el equivalente CSS de sine.inOut. */ @keyframes respira{from{opacity:.10;scale:1}to{opacity:.18;scale:1.06}} @keyframes subeEntra{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}} .hero-min__mark{animation:marcaEntra 1.1s var(--ease-out) both} .hero-min__difusa{animation:difusaEntra 1.1s var(--ease-out) both, respira 3s cubic-bezier(.37,0,.63,1) 1.1s infinite alternate} /* el titular entra DESPUES del monograma */ .hero-min__title{animation:subeEntra .8s var(--ease-out) .6s both} .hero-min__lead{animation:subeEntra .8s var(--ease-out) .75s both} .hero-min .btn{animation:subeEntra .8s var(--ease-out) .9s both} /* El titular ya NO es el elemento dominante: con el monograma a 490px, a --fs-display competia. Baja a rango de subtitulo. */ .hero-min__title{font-size:clamp(28px,3.4vw,48px);font-weight:var(--fw-light); letter-spacing:var(--ls-display);line-height:var(--lh-display); color:#fff;max-width:22ch;margin:0;text-shadow:0 1px 24px rgba(0,0,0,.35)} .hero-min__title .gh{color:rgba(255,255,255,.56)} .hero-min__lead{font-size:var(--fs-body-lg);line-height:var(--lh-snug); color:rgba(255,255,255,.82);max-width:46ch;margin:0;text-shadow:0 1px 18px rgba(0,0,0,.35)} /* sobre video oscuro el boton negro desaparece: pastilla blanca */ .hero-min .btn-accent{background:#fff;color:#0A0A0A;box-shadow:0 10px 30px rgba(0,0,0,.35)} .hero-min .btn-accent:hover{background:#E9E9E9} /* COMPACTADO (ago 2026, "el botón quedaba muy abajo"): el texto sube hacia el monograma; el margen grande vivía aquí. */ .hero-min__logo{margin-bottom:clamp(2px,1vw,10px)} .hero-min .btn{margin-top:var(--space-2)} /* En pantallas bajas el indicador de scroll cede el paso: el logo no se toca. */ @media (max-height:760px),(max-width:640px){.hero-min__scroll{display:none}} /* indicador de scroll: una linea fina que late. Sin texto, sin flecha. */ .hero-min__scroll{width:1px;height:64px;margin-top:auto; background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,transparent 100%); transform-origin:50% 0;animation:latido 2.8s var(--ease-in-out) infinite} @keyframes latido{0%,100%{opacity:.3;transform:scaleY(.62)}50%{opacity:1;transform:scaleY(1)}} /* ═══ RÉPLICA DE LA PLATAFORMA ═══ La perspectiva vive en el PADRE y la rotacion en el hijo: si van en el mismo elemento, rotateX se aplica antes que la perspectiva y el efecto se aplana. */ .rep{overflow:clip} /* El hero centrado ya deja aire abajo: con el padding de seccion completo se sumaban los dos vacios y la seccion arrancaba a media pantalla de distancia. Solo se recorta el tope; el cierre conserva el ritmo del sistema. */ #replica{padding-block-start:clamp(24px,4vw,56px)} /* El margen superior compensa EXACTAMENTE el desplazamiento de -100px: sin el, al subir el titular se mete encima del indice de seccion. */ /* 48px de compensacion = el nuevo desplazamiento del parallax (antes 100): con -100 el titular quedaba lejisimos de la ventana al asentarse */ .rep-t{text-align:center;max-width:24ch;margin-inline:auto; margin-top:48px;margin-bottom:clamp(14px,2.5vw,28px); /* talla propia, por encima del .h2 base: este titular presenta la plataforma y debe dominar. Trazo LIGERO (300): a talla display el 400 se ve pesado y distinto a los heros interiores (feedback 16 ago). */ font-size:clamp(36px,5.8vw,74px);font-weight:var(--fw-light)} /* En movil el parallax del titular se apaga (ver JS): el margen que lo compensaba se va con el, o queda como hueco muerto. */ @media(max-width:760px){.rep-t{margin-top:0}} .rep-persp{perspective:1000px;perspective-origin:50% 20%} /* La tarjeta es una VENTANA de tamaño fijo: barra de chrome arriba, cuerpo hundido en medio (las dos vistas superpuestas), redactor y aviso abajo. El alto NUNCA lo dicta el contenido — por eso no salta al cambiar de vista. */ .rep-card{position:relative;max-width:1160px;margin-inline:auto; height:clamp(600px,84vh,920px);display:flex;flex-direction:column; background:var(--lienzo);border:1px solid var(--linea); border-radius:var(--radius-lg);padding:0;overflow:clip; transform-origin:50% 0%; /* sombra en escalones, monocroma: cuatro capas de opacidad decreciente dan profundidad sin un solo desenfoque gigante que se ve sucio */ box-shadow:0 2px 4px rgba(10,10,10,.05), 0 10px 20px rgba(10,10,10,.06), 0 30px 60px rgba(10,10,10,.08), 0 70px 120px rgba(10,10,10,.10)} /* chrome de ventana: puntos y URL, todo por valor, cero color */ .rep-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding:11px 16px;border-bottom:1px solid var(--linea);flex:none} .rep-dots{display:flex;gap:6px} .rep-dots i{width:9px;height:9px;border-radius:50%; background:var(--hundida);border:1px solid var(--linea)} .rep-url{font-family:var(--mono);font-size:11px;letter-spacing:.08em; color:var(--texto-3)} /* cuerpo hundido: las vistas viven superpuestas y se funden, nunca se cortan */ .rep-body{position:relative;flex:1;min-height:0;background:var(--hundida)} .rep-view{position:absolute;inset:0;overflow:hidden; padding:clamp(16px,2.4vw,30px) clamp(16px,2.6vw,34px); opacity:0;visibility:hidden; transition:opacity .7s var(--ease-out),visibility 0s linear .7s} .rep-view--on{opacity:1;visibility:visible; transition:opacity .7s var(--ease-out)} .rep-hero{display:flex;flex-direction:column;align-items:center; justify-content:center;height:100%; padding:clamp(22px,4vw,52px) 0 clamp(18px,3vw,34px)} .rep-mark{height:clamp(26px,3vw,38px);width:auto} .rep-ask{margin:clamp(16px,2.4vw,26px) 0 clamp(18px,2.8vw,30px); font-size:clamp(15px,1.5vw,19px);color:var(--texto-2)} .rep-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .rep-pill{border:1px solid var(--linea);border-radius:var(--radius-pill); padding:9px 17px;font-size:13px;color:var(--texto-2);background:var(--lienzo)} .rep-thread{height:100%;padding:6px 2px 14px; display:flex;flex-direction:column;gap:14px} /* la burbuja va en blanco: recorta contra el cuerpo hundido */ .rep-q{align-self:flex-end;max-width:74%;background:var(--lienzo); border:1px solid var(--linea);border-radius:var(--radius-md); padding:11px 15px;font-size:14px;line-height:1.5;color:var(--texto); opacity:0;transform:translateY(14px)} /* los puntos de pensando se funden y colapsan, sin aparecer de golpe */ .rep-think{display:flex;gap:5px;padding:0;height:0;opacity:0;overflow:hidden; transition:opacity .5s var(--ease-out),height .5s var(--ease-out), padding .5s var(--ease-out)} .rep-think.on{height:12px;opacity:1;padding:2px 0} .rep-think span{width:6px;height:6px;border-radius:50%;background:var(--texto-3); animation:repPunto 1.15s infinite ease-in-out} .rep-think span:nth-child(2){animation-delay:.16s} .rep-think span:nth-child(3){animation-delay:.32s} @keyframes repPunto{0%,80%,100%{opacity:.25;transform:translateY(0)} 40%{opacity:1;transform:translateY(-4px)}} .rep-a{font-size:14px;line-height:1.62;color:var(--texto-2);max-width:72ch; opacity:0;transform:translateY(14px)} /* STREAMING POR PALABRA: cada span .w nace invisible y se enciende en secuencia con un fundido corto — la respuesta FLUYE como un modelo entregando tokens; nunca cae en bloques (se veia abrupto y barato) */ .rep-a .w{opacity:0;transition:opacity .3s var(--ease-out)} .rep-a .w.on{opacity:1} @media (prefers-reduced-motion:reduce){.rep-a .w{transition:none}} .rep-a-i{margin:0} .rep-a-t{margin:14px 0 0} .rep-a-t strong{color:var(--texto);font-weight:var(--fw-medium)} .rep-src{opacity:0;transform:translateY(14px)} .rep-src-t{font-family:var(--mono);font-size:var(--fs-label-sm); letter-spacing:var(--ls-label-sm);text-transform:uppercase;color:var(--texto-3); margin:0 0 9px} .rep-src-i{display:flex;gap:10px;align-items:baseline;font-size:13px; line-height:1.5;color:var(--texto-2);margin-bottom:7px} .rep-src-i b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em; color:var(--texto-3);flex:none;font-weight:400;padding-top:2px} .rep-src-i em{font-style:normal;color:var(--texto)} .rep-comp{border:1px solid var(--linea);border-radius:var(--radius-md); padding:14px 15px 11px;background:var(--lienzo);flex:none; margin:14px clamp(16px,2.6vw,34px) 0} .rep-comp-top{display:flex;align-items:flex-start;gap:14px} .rep-input{flex:1;margin:0;min-height:38px;font-size:14.5px;line-height:1.5; color:var(--texto)} .rep-ph{color:var(--texto-3)} .rep-caret{display:none;width:1px;height:1.05em;background:var(--texto); vertical-align:text-bottom;margin-left:1px;animation:repCaret 1s steps(1) infinite} .rep-input.escribiendo .rep-caret{display:inline-block} @keyframes repCaret{0%,50%{opacity:1}51%,100%{opacity:0}} .rep-send{flex:none;width:34px;height:34px;border-radius:var(--radius-sm); display:grid;place-items:center;background:var(--hundida)} .rep-send svg{width:16px;height:16px;fill:none;stroke:var(--texto-2); stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .rep-modes{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px} .rep-clip{width:26px;height:26px;border-radius:var(--radius-sm);display:grid; place-items:center;background:var(--hundida);flex:none} .rep-clip svg{width:13px;height:13px;fill:none;stroke:var(--texto-3); stroke-width:1.8;stroke-linecap:round} .rep-mode{font-size:11.5px;padding:5px 11px;border-radius:var(--radius-pill); color:var(--texto-3);background:var(--hundida)} /* el producto real marca el modo activo en verde petroleo; aqui por VALOR */ .rep-mode--on{background:var(--texto);color:var(--lienzo)} .rep-note{margin:12px clamp(16px,2.6vw,34px) clamp(13px,1.8vw,18px);flex:none; text-align:center;font-size:11.5px;line-height:1.5;color:var(--texto-3)} @media(max-width:760px){ .rep-persp{perspective:700px} /* CELULAR (3 sep 2026, feedback del dueño: "está muy larga"): la ventana del chat se acorta a poco mas de media pantalla y se retira la fila de modos (Corporativo, Extendido...) que solo sumaba alto. El hilo sigue desplazandose solo mientras escribe la respuesta. Escritorio intacto. */ .rep-card{height:min(56svh,460px)} .rep-view{padding:14px} .rep-comp{margin:10px 14px 0} .rep-modes{display:none} .rep-input{min-height:34px;font-size:14px} .rep-note{margin:8px 14px 10px;font-size:10.5px} .rep-pills{gap:7px} .rep-pill{padding:7px 13px;font-size:12px} .rep-modes{gap:5px} .rep-mode{font-size:10.5px;padding:4px 9px} .rep-q{max-width:88%} } @media (prefers-reduced-motion:reduce){ .rep-think span{animation:none;opacity:.5} .rep-caret{animation:none} .rep-view,.rep-think{transition:none} .seg-carta,.seg-carta::before{transition:none} } @media (prefers-reduced-motion:reduce){ .hero-min__scroll{animation:none;opacity:.5} /* sin respiracion y sin entrada: el halo y la difusion quedan quietos */ .hero-min__mark,.hero-min__difusa,.hero-min__title,.hero-min__lead,.hero-min .btn{animation:none} .hero-min__difusa{opacity:.14} /* sin video en movimiento: queda el poster fijo del fondo */ .hero-media__v{display:none} } /* firma de marca en el pie: la excepcion de idioma vive aqui, no en el hero */ .foot-firma{font-style:normal;letter-spacing:var(--ls-label);text-transform:uppercase} /* ═══ 02 · EL ACERVO ═══ Estado por defecto (y respaldo sin canvas): hero de texto estatico. */ .h01{position:relative;padding:clamp(64px,9vw,110px) 0 clamp(48px,7vw,88px)} .h01-stick{position:relative} #acvCanvas{display:none} .h01-frases{margin-top:clamp(44px,6vw,72px)} .acv-close{font-size:clamp(15px,1.8vw,20px);color:var(--gray);margin:26px 0 0} /* ═══ MODO VIVO: lo activa el script DESPUES del primer pintado ═══ */ /* 240vh (ago 2026; eran 420 y antes 520). A 420 la fase de particulas exigia tanto scroll que los usuarios creian que la pagina se habia trabado; a 280 el dueño aun la sintio larga. El reparto de fases es proporcional (fracciones de progress), asi que acortar la seccion acelera TODO el recorrido sin tocar la coreografia. */ .h01--vivo{height:240vh;padding:0} /* Fuera del modo vivo las cifras no se muestran: la version estatica de la seccion ya lista los 40 nombres y agregarlas seria repetir. */ /* Version estatica (reduced-motion, sin WebGL, pantalla chica): las cifras se ven quietas y en flujo normal, sin particulas. Es lo que pide la regla de degradado y tambien lo que pide prefers-reduced-motion. */ /* ═══ EL BLOQUE DE CIFRAS DENTRO DEL ACERVO ═══ En modo vivo el bloque .know se vuelve la fase de texto del acervo: absoluto, centrado y encima del canvas. Se compacta —cifra mas chica, filas mas juntas, descripcion mas corta de linea— porque cuatro filas de tres columnas a tamaño de seccion normal no caben en 100vh. */ .h01--vivo .know{position:absolute;inset:0;z-index:4;margin:0 auto; display:flex;flex-direction:column;justify-content:center; max-width:var(--maxw);padding:0 var(--gutter);pointer-events:none} /* RECOMPACTADO A CINCO FILAS (ago 2026, entro la fila del TFJA): padding y cifra bajan un paso para que el bloque completo siga cabiendo en 100vh durante la fase fija. Medido tras el cambio — ver decisiones.md. */ .h01--vivo .know-row{padding:clamp(7px,1.05vw,14px) 0; grid-template-columns:minmax(190px,.62fr) minmax(0,1.5fr) minmax(0,.85fr)} .h01--vivo .know-v{font-size:clamp(28px,3vw,46px)} .h01--vivo .know-c{margin-top:6px} .h01--vivo .know-d{font-size:var(--fs-body-sm);line-height:1.46} .h01--vivo .know-chips{margin-top:7px} @media(max-width:1180px){ .h01--vivo .know-row{grid-template-columns:minmax(150px,.6fr) minmax(0,1.3fr) minmax(0,.8fr)} } /* pantallas BAJAS: con cinco filas el bloque desbordaba 100vh (medido: 728px en 700 de alto). Ceden chips y subtitulos — no se muestrean y son lo menos esencial; cifra, etiqueta, descripcion y fuente se conservan. */ @media(max-height:760px){ .h01--vivo .know-row{padding:5px 0} .h01--vivo .know-v{font-size:clamp(24px,2.4vw,32px)} .h01--vivo .know-d{font-size:13px;line-height:1.35} .h01--vivo .know-chips,.h01--vivo .know-sub{display:none} } .h01--vivo .h01-stick{position:sticky;top:0;height:100vh;overflow:hidden} .h01--vivo #acvCanvas{display:block;position:absolute;inset:0;width:100%;height:100%} .h01--vivo .h01-frases{position:absolute;inset:0;margin:0;z-index:2;pointer-events:none} .h01--vivo .h01-frases .wrap{position:static;padding:0;max-width:none} /* Orbitan alrededor del centro: el bucle solo escribe transform y opacity (nunca top/left), asi el navegador no recalcula layout en ningun cuadro. */ .h01--vivo .acv-close{position:absolute;left:var(--gutter);right:var(--gutter);bottom:17%;margin:0;text-align:center;opacity:0} /* SIN LIMITES — sustituyo a la tabla comparativa (Diferencia) por decision del dueño (ago 2026). Tres columnas cortas bajo un enunciado grande. */ .ilim{border-top:1px dotted var(--divider-dotted);max-width:1000px;margin-inline:auto; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,44px);padding-top:clamp(22px,3vw,34px)} .ilim-t{margin:0 0 8px;font-size:clamp(19px,1.8vw,24px);font-weight:var(--fw-regular); letter-spacing:-.015em;color:var(--texto)} .ilim-d{margin:0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--texto-2)} @media(max-width:760px){.ilim{grid-template-columns:1fr;gap:20px}} /* ── CANDADO MINIMO ── el diagrama interactivo de cuatro pestañas salio por decision del dueño (ago 2026): "too much". Queda el gesto esencial. El arco nace CERRADO en CSS; el JS lo abre al cargar y lo deja caer a cerrado cuando la seccion entra a vista. Sin JS o con reduced-motion: cerrado y quieto. */ .segrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px); align-items:center} .segrid-txt .lede{margin-top:var(--space-6)} .segrid-txt .cand-cap{margin:var(--space-8) 0 0} .segrid-txt .cand-d{margin:10px 0 0;font-size:var(--fs-body-sm);color:var(--texto-2);max-width:46ch} .segrid-art{position:relative;display:flex;flex-direction:column; justify-content:center;align-items:center;min-height:clamp(260px,30vw,420px)} /* la linea que se cifra y descifra bajo el candado */ .cand-cifra{position:relative;z-index:1;margin:22px 0 0;font-size:12.5px; letter-spacing:.09em;color:var(--texto-2);text-align:center; font-variant-numeric:tabular-nums;min-height:1.4em} .cand-svg.cand-clic{animation:candClic .3s var(--ease-out)} /* halo que respira, mismo lenguaje del hero */ .cand-halo{position:absolute;left:50%;top:50%;translate:-50% -50%; width:clamp(320px,34vw,540px);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle closest-side,rgba(10,10,10,.05),rgba(10,10,10,0) 70%); animation:candRespira 3s cubic-bezier(.37,0,.63,1) infinite alternate} @keyframes candRespira{from{scale:1}to{scale:1.08}} /* onda unica al cerrar: un anillo hairline que se expande y se desvanece */ .cand-onda{position:absolute;left:50%;top:50%;translate:-50% -50%; width:clamp(150px,17vw,240px);aspect-ratio:1;border-radius:50%; border:1px solid var(--texto-3);opacity:0;pointer-events:none} /* particulas de marca: un campo discreto orbitando el candado con la misma rampa de grises del acervo. El canvas queda DETRAS del SVG (z 0 vs 1). */ /* width/height 100% EXPLICITOS y no solo inset:0 — el canvas es un elemento REEMPLAZADO: absoluto con left+right y width:auto usa su tamano INTRINSECO (el atributo width, que el JS fija a caja x DPR) e ignora right. En retina eso lo hacia medir el DOBLE de su caja (684px en un viewport de 390), inflaba el layout viewport a 708 y toda la pagina se podia panear en horizontal. Con el width CSS explicito el atributo solo dimensiona el bitmap, como debe ser. */ .cand-particulas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .cand-svg{position:relative;z-index:1;width:clamp(120px,14vw,190px);height:auto; color:var(--texto);stroke:currentColor;stroke-width:1.6;stroke-linecap:round; fill:none;overflow:visible} /* COREOGRAFIA. Estados: espera (invisible, antes de entrar a vista) → anima (dibuja 0-0.9s · el arco cae con rebote 0.75-1.3s · clic del cuerpo 1.15s · onda 1.2s). Sin JS ninguna clase se pone y el candado queda completo y quieto. */ .cand--espera .cand-trazo{stroke-dasharray:1;stroke-dashoffset:1} .cand--anima .cand-trazo{stroke-dasharray:1;stroke-dashoffset:1; animation:candDibuja .85s var(--ease-out) forwards} .cand--anima .cand-arco{animation:candCae .55s cubic-bezier(.34,1.56,.64,1) .78s both} .cand--anima .cand-cuerpo{transform-origin:50% 65%; animation:candClic .32s var(--ease-out) 1.16s both} .cand--anima .cand-onda{animation:candOnda .9s var(--ease-out) 1.2s both} @keyframes candDibuja{to{stroke-dashoffset:0}} @keyframes candCae{from{transform:translateY(-8px)}62%{transform:translateY(1.4px)}to{transform:translateY(0)}} @keyframes candClic{0%{transform:scale(1)}45%{transform:scale(1.04)}100%{transform:scale(1)}} @keyframes candOnda{0%{opacity:.4;transform:scale(.6)}100%{opacity:0;transform:scale(1.3)}} @media(max-width:860px){ .segrid{grid-template-columns:1fr;gap:var(--space-8)} .segrid-art{min-height:clamp(220px,52vw,300px)} } @media (prefers-reduced-motion:reduce){ .cand-halo,.cand-onda{animation:none} .cand--espera .cand-trazo,.cand--anima .cand-trazo{stroke-dasharray:none;stroke-dashoffset:0;animation:none} .cand--anima .cand-arco,.cand--anima .cand-cuerpo,.cand-svg.cand-clic{animation:none} } /* ROTURAS DEL RITMO — a proposito. Una pagina donde todas las secciones tienen la misma estructura (eyebrow, numero, titular, bajada) se lee como plantilla. */ .h2--suelto{font-size:clamp(38px,6.4vw,88px);max-width:20ch;margin-bottom:34px} /* La seccion Capacidades se fue (ago 2026) y con ella .caps/.cap/.cap--ancha, pero .cap-n, .cap-t y .cap-d TAMBIEN visten la lista de Soporte: se quedan. */ .cap-n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent);margin-bottom:14px} .cap-t{font-size:20px;font-weight:var(--fw-regular);letter-spacing:-.02em;margin:0 0 8px} .cap-d{font-size:var(--fs-body-sm);color:var(--text-body);line-height:var(--lh-body);margin:0 0 12px;max-width:62ch} /* fundamento */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:start} .cite{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:clamp(20px,3vw,28px)} .cite-q{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--gray);line-height:1.5;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line-soft)} .cite-q svg{width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:3px} .cite-group{margin-bottom:22px} .cite-group > .mono{display:block;margin-bottom:13px;letter-spacing:.12em} .cite-row{display:flex;gap:12px;align-items:baseline;margin-bottom:11px;font-size:13.5px;line-height:1.5} .cite-row:last-child{margin-bottom:0} /* version fundida de la primera fila: solo existe en celular (ver bloque movil) */ .cite-mov{display:none} .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--faint);flex-shrink:0;padding-top:3px} .cite-row a{color:var(--texto);border-bottom:1px solid var(--linea)} .cite-row span{color:var(--gray)} .doc{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line-soft);padding-top:18px;flex-wrap:wrap} .doc-l{display:flex;align-items:center;gap:12px} .doc-l svg{width:20px;height:20px;stroke:var(--gray);fill:none;stroke-width:1.5} .doc-name{font-size:13.5px} /* señal "listo": puntito verde antes de "Listo para revision" */ .doc-l .mono::before{content:"";display:inline-block;width:5px;height:5px; border-radius:50%;background:var(--verde);margin-right:6px;vertical-align:1px} .doc .btn{padding:9px 18px;font-size:12.5px} /* ACERVO EN CIFRAS — tratamiento oficial del sistema para las cifras de prueba (ui_kits/marketing/Knowledge.jsx + .iudex-stat), traducido de kit.css a CSS plano sobre nuestros tokens. Sin React y sin build. Tres filas: cifra a --fs-stat / descripcion al centro / fuente a la derecha, separadas por el divisor punteado, que es el recurso de ritmo de la marca. NOTA DE CONTRASTE: el sistema pinta .iudex-stat con --text-ghost (#BDBDBD, 1.88:1). Sobre las cifras que cargan el argumento eso reprueba AA incluso como texto grande, asi que se usa --texto-2 (7.4:1) para el tono bajo y --texto para el alto. Se conserva el ritmo de dos valores del sistema; lo unico que sube es el tono. */ .hr-dot{border:0;border-top:1px dotted var(--divider-dotted);margin:0} /* RESULTADOS — dos columnas de filas de cifra. La cifra va deliberadamente mas chica que la del acervo (--fs-stat): en dos columnas no cabe a 80px, y en jerarquia estas son secundarias frente a las tres cifras del acervo. */ /* ═══ SEGUIMIENTO DE JUICIOS ═══ */ .seg{position:relative;overflow:clip; background:linear-gradient(180deg,var(--lienzo) 0%,var(--elevada) 55%,var(--lienzo) 100%)} .seg-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px); align-items:center} .seg-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono); font-size:var(--fs-label-sm);letter-spacing:var(--ls-label-sm);text-transform:uppercase; color:var(--texto-2);background:var(--lienzo);border:1px solid var(--linea); border-radius:var(--radius-pill);padding:8px 15px;margin-bottom:var(--space-7); box-shadow:0 1px 3px rgba(10,10,10,.04)} .seg-badge i{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none} .seg .h2{max-width:14ch} .seg .lede{margin-block:var(--space-6) var(--space-8)} /* el monograma gigante detras, muy tenue */ .seg-art{position:relative;display:flex;justify-content:center;align-items:center; min-height:clamp(500px,58vw,820px)} /* ENTERO, NUNCA RECORTADO (ago 2026; MUCHO mas grande desde el 24 ago a peticion del dueño). La regla sigue viva: el logo se lee COMPLETO detras del mazo, jamas en fragmentos. El truco para crecer sin recortar: la caja del arte CRECE con el (min-height de .seg-art = su alto) y el ancho sobrante se derrama hacia la izquierda por detras del texto, que al 6% de opacidad no estorba. height:100% + width:auto = cero distorsion. */ .seg-marca{position:absolute;right:0;top:50%;translate:0 -50%; height:100%;width:auto;max-width:none; /* pisa el img{max-width:100%} global: estrujaba el logo */ opacity:.06;pointer-events:none;user-select:none} /* MAZO DE FUENTES — tres tarjetas apiladas e inclinadas (una por fuente de seguimiento: PJF, TFJA, CDMX) que se abren al pasar el cursor. Recrea en CSS puro el gesto de las display-cards que pidio el dueño (ago 2026): grid de un solo area, skewY, offsets escalonados y velo que se levanta al hover. Monocromo estricto: el velo es blanco, el enfasis es por valor. */ .seg-mazo{position:relative;z-index:1;display:grid;grid-template-areas:'pila'; place-items:center; /* compensa el abanico (que crece hacia abajo-derecha) para centrar el grupo */ translate:calc(clamp(56px,8vw,112px)/-2) calc(-44px)} .seg-carta{grid-area:pila;position:relative;width:clamp(270px,26vw,345px); min-height:150px;display:flex;flex-direction:column;justify-content:space-between; gap:10px;padding:16px 18px; background:var(--lienzo);border:1px solid var(--linea); border-radius:var(--radius-md); box-shadow:0 3px 8px rgba(10,10,10,.05), 0 14px 34px rgba(10,10,10,.09); transform:skewY(-8deg) translate(var(--dx,0px),var(--dy,0px)); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)} /* velo que atenua las tarjetas de atras y se levanta al hover */ .seg-carta::before{content:'';position:absolute;inset:0;border-radius:inherit; background:rgba(255,255,255,.62);opacity:1;pointer-events:none; transition:opacity .5s var(--ease-out)} .seg-carta:nth-child(1){--dx:0px;--dy:0px} .seg-carta:nth-child(2){--dx:clamp(28px,4vw,56px);--dy:44px} .seg-carta:nth-child(3){--dx:clamp(56px,8vw,112px);--dy:88px} .seg-carta:nth-child(3)::before{opacity:0} /* la del frente, siempre nitida */ /* AL ACERCARSE EL MAZO SE ABRE EN ABANICO (ago 2026): las tarjetas de atras bajan y se separan para dejar aire, y la tarjeta activa SUBE despejada del monton para desplegar su notificacion SIN taparse con la siguiente — la superposicion del primer intento se veia poco natural. */ .seg-mazo:hover .seg-carta:nth-child(2){--dy:74px} .seg-mazo:hover .seg-carta:nth-child(3){--dy:148px} .seg-carta:hover{transform:skewY(-8deg) translate(var(--dx),calc(var(--dy) - 52px)); box-shadow:0 6px 14px rgba(10,10,10,.07), 0 22px 48px rgba(10,10,10,.12); z-index:3} .seg-carta:hover::before{opacity:0} .seg-carta__top{display:flex;align-items:center;justify-content:space-between;gap:10px} .seg-carta__id{display:inline-flex;align-items:center;gap:8px;min-width:0} .seg-carta__exp{font-family:var(--mono);font-size:10px;letter-spacing:.05em; color:var(--texto-2);white-space:nowrap} .seg-carta__sigla{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em; color:var(--texto-2);background:var(--hundida);border:1px solid var(--linea); border-radius:var(--radius-pill);padding:3px 9px;flex:none} .seg-carta__t{margin:0;font-size:16.5px;color:var(--texto);letter-spacing:-.015em;line-height:1.25} .seg-carta__d{margin:0;font-size:12.5px;line-height:1.45;color:var(--texto-2)} .seg-carta__m{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--texto-3); display:inline-flex;align-items:center;gap:5px} /* señal "vivo": el acuerdo llego HOY — uno de los tres unicos usos del verde */ .seg-carta__m::before{content:"";width:5px;height:5px;border-radius:50%; background:var(--verde);flex:none} /* la notificacion del acuerdo: colapsada, se despliega al alto natural al hover (grid-rows, sin max-height magico) */ .seg-carta__n{display:grid;grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out)} .seg-carta__n>p{overflow:hidden;min-height:0;margin:0;font-size:12.5px; line-height:1.55;color:var(--texto-2);border-top:1px dotted var(--divider-dotted); padding-top:0;transition:padding-top .5s var(--ease-out)} .seg-carta:hover .seg-carta__n{grid-template-rows:1fr} .seg-carta:hover .seg-carta__n>p{padding-top:9px} /* sin cursor (tactil) no hay hover: la notificacion va siempre desplegada */ @media (hover:none){ .seg-carta__n{grid-template-rows:1fr} .seg-carta__n>p{padding-top:9px} } @media(max-width:860px){ .seg-grid{grid-template-columns:1fr;gap:var(--space-9)} .seg .h2{max-width:none} .seg-art{min-height:0;margin-top:var(--space-4)} /* tambien completo en movil: la forma del logo no se recorta nunca */ .seg-marca{height:84%} } .stx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,92px)} .stx-lbl{display:block;color:var(--texto-3);margin-bottom:var(--space-5)} /* min-height de dos lineas: si un titular ocupa una linea y el otro dos, los divisores punteados de las dos columnas dejan de alinearse y el ritmo se rompe. Reservar el alto los empata sin tocar el copy. */ .stx-h{font-size:clamp(26px,2.9vw,38px);margin-bottom:var(--space-7);max-width:18ch; min-height:calc(2 * 1.06em)} @media(max-width:900px){.stx-h{min-height:0}} /* La columna de la cifra tiene que aguantar valores LARGOS ("$259,200", "menos de 1"): con nowrap y una columna angosta se salian encima de la descripcion. Ahora la cifra puede partir por espacios —nunca dentro de un numero— y la columna es mas ancha. */ .stx-row{display:grid;grid-template-columns:minmax(104px,.58fr) minmax(0,1fr); gap:clamp(14px,2vw,28px);padding:var(--space-6) 0;align-items:start} .stx-v{font-size:clamp(28px,2.2vw,38px);font-weight:var(--fw-medium);line-height:1.06; letter-spacing:-.03em;color:var(--texto);font-variant-numeric:tabular-nums; overflow-wrap:normal;word-break:keep-all} .stx-c{display:block;color:var(--texto);margin-bottom:7px} .stx-d{margin:0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--texto-2)} .stx-src{margin:var(--space-8) 0 0;color:var(--texto-3);text-align:right} @media(max-width:900px){ .stx{grid-template-columns:1fr;gap:var(--space-10)} .stx-h{max-width:none} .stx-src{text-align:left} } /* El bloque vive dentro del acervo, que NO tiene .wrap. Sin esto queda pegado a los dos bordes en el modo estatico. Mismo contenedor que el resto: ancho maximo del sistema, gutter lateral y centrado. */ .know{margin:clamp(44px,6.5vw,86px) auto 0;max-width:var(--maxw); padding-inline:var(--gutter)} /* El minimo de la primera columna NO es decorativo: a --fs-stat pleno (79px) "300 mil" mide ~280px y sin el se parte en dos lineas, con lo que la cifra mas larga queda mas debil que las otras dos. nowrap + minmax lo garantizan. */ .know-row{display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr) minmax(0,.78fr); gap:clamp(16px,3.2vw,52px);padding:clamp(26px,3.8vw,46px) 0;align-items:start} .know-v{display:block;font-family:var(--sans);font-size:var(--fs-stat); font-weight:var(--fw-medium);line-height:1;letter-spacing:-.035em; color:var(--texto-2);font-variant-numeric:tabular-nums;white-space:nowrap} .know-row--alto .know-v{color:var(--texto)} .know-c{display:block;margin-top:13px;font-family:var(--mono); font-size:var(--fs-label-sm);letter-spacing:var(--ls-label-sm); text-transform:uppercase;color:var(--texto-3)} .know-d{margin:0;font-size:var(--fs-body);line-height:1.62;color:var(--texto-2); max-width:54ch} .know-s{text-align:right} .know-f{font-family:var(--mono);font-size:var(--fs-label-sm); letter-spacing:var(--ls-label-sm);text-transform:uppercase;color:var(--texto)} .know-sub{margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--texto-3)} .know-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:12px} .know-chip{font-family:var(--mono);font-size:var(--fs-label-sm); letter-spacing:var(--ls-label-sm);text-transform:uppercase;color:var(--texto-2); background:var(--lienzo);border:1px solid var(--linea); border-radius:var(--radius-pill);padding:5px 11px;white-space:nowrap} @media(max-width:860px){.know-chips{justify-content:flex-start}} @media(max-width:1180px){ .know-row{grid-template-columns:minmax(230px,.8fr) minmax(0,1.3fr) minmax(0,.8fr); gap:clamp(14px,2.4vw,34px)} } @media(max-width:860px){ .know-row{grid-template-columns:1fr;gap:12px;padding:26px 0} .know-s{text-align:left} .know-d{max-width:none} } .sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;margin-top:22px} .source{background:var(--bone);padding:16px} .source .mono{display:block;margin-bottom:6px;letter-spacing:.1em} .source-n{font-size:13px;color:var(--text-body);line-height:1.45} .disclaim{font-size:12.5px;color:var(--faint);line-height:1.55;margin:18px 0 0;max-width:62ch} /* calculadora */ /* testimonios */ .tcar{position:relative} .tview{overflow:hidden} .ttrack{display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1)} .tslide{flex:0 0 100%;padding-right:2px} .tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:clamp(26px,4vw,44px)} .tq{font-size:clamp(19px,2.6vw,29px);line-height:1.32;letter-spacing:-.022em;font-weight:500;margin:0 0 26px;max-width:34ch} .tmeta{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line-soft)} .tav{width:40px;height:40px;border-radius:50%;background:var(--bone-deep);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--gray);flex-shrink:0} .tname{font-size:14px;font-weight:500} .trole{font-size:12.5px;color:var(--faint)} .tnav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px} .tdots{display:flex;gap:8px} .tdot{width:7px;height:7px;border-radius:50%;background:var(--line);padding:0;transition:background .2s,transform .2s} .tdot[aria-current="true"]{background:var(--accent);transform:scale(1.35)} .tarrows{display:flex;gap:8px} .tarr{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .18s,border-color .18s} .tarr:hover{background:rgba(11,11,11,.05);border-color:rgba(11,11,11,.24)} .tarr svg{width:16px;height:16px;stroke:var(--ink-txt);fill:none;stroke-width:1.7} /* seguridad */ .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden} .tri{background:var(--bone);padding:clamp(22px,3vw,32px)} .tri svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.5;margin-bottom:16px} .tri-t{font-size:17px;font-weight:var(--fw-regular);letter-spacing:-.015em;margin:0 0 8px} .tri-d{font-size:var(--fs-body-sm);color:var(--text-body);line-height:var(--lh-body);margin:0;max-width:58ch} /* objeciones */ .faq{border-top:1px dotted var(--divider-dotted)} details{border-bottom:1px dotted var(--divider-dotted)} summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(16px,1.9vw,19px);font-weight:500;letter-spacing:-.015em} summary::-webkit-details-marker{display:none} summary::after{content:"";flex:none;width:22px;height:1px;background:var(--texto-3);transition:width .45s var(--ease-out),background .3s} details.act summary::after{width:9px;background:var(--accent)} /* sin JS los details funcionan nativos con este estilo */ details p{font-size:14.5px;color:var(--gray);line-height:1.65;margin:0 0 22px;max-width:68ch} /* ACORDEON EXCLUSIVO (ago 2026). El JS deja el atributo open SIEMPRE puesto y el alto lo controla la clase .act con grid-template-rows 0fr→1fr: anima al alto NATURAL del texto, sin max-height magico — por eso nunca se recorta. */ .faq-c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)} details.act .faq-c{grid-template-rows:1fr} /* OJO: el padding-bottom tiene que COLAPSAR con la fila. Fijo, el texto desbordado se pintaba dentro del relleno (overflow recorta en el borde del padding, no del contenido) y cada pregunta cerrada asomaba una linea. */ .faq-c>p{overflow:hidden;min-height:0;margin:0;padding-bottom:0; transition:padding-bottom .55s var(--ease-out)} details.act .faq-c>p{padding-bottom:22px} @media (prefers-reduced-motion:reduce){ .faq-c,.faq-c>p,summary::after{transition:none} } /* cierre */ /* MAS PRESENCIA (ago 2026, "se ve muy chico"): la seccion vivia apretada en 660px sobre viewports de 1440. Se ensancha y los caminos suben un paso. */ .close-in{text-align:center;max-width:1020px;margin:0 auto} .close-in .lede{margin-inline:auto;margin-bottom:30px} .close-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* footer */ /* pie en superficie inversa del sistema */ .foot{padding-block:var(--space-9);background:var(--surface-inverse);color:var(--text-on-inverse); --texto:var(--text-on-inverse);--texto-2:var(--text-on-inverse-dim);--texto-3:var(--text-on-inverse-dim); --ink-txt:var(--text-on-inverse);--gray:var(--text-on-inverse-dim);--faint:var(--text-on-inverse-dim); --line:rgba(255,255,255,.14);--line-soft:rgba(255,255,255,.08)} .foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .foot .mark img{height:30px} /* chips de confianza */ .hero .actions{margin-bottom:18px} /* ticker de materias */ .ticker{padding-block:15px;border-bottom:1px solid var(--line-soft);overflow:hidden;background:var(--bone)} /* 100s: con 20 materias el track mide el doble que con 10; la duracion escala igual para conservar la misma velocidad en pantalla */ .tk-track{display:flex;width:max-content;animation:mq 100s linear infinite} .ticker:hover .tk-track{animation-play-state:paused} .tk-item{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-inline:20px;white-space:nowrap} /* los "/" en verde: presencia ritmica y minima del color de producto */ .tk-item b{color:var(--verde);font-weight:400;margin-right:9px} /* metodo */ .method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden} .mcell{background:var(--bone);padding:clamp(22px,3vw,34px)} /* .mpromise (parrafo grande) se sustituyo por la letra chica .mnota */ .mnota{margin:26px 0 0;font-size:var(--fs-label-sm);letter-spacing:var(--ls-label-sm); color:var(--text-muted);line-height:1.7;text-transform:none} /* seguridad 2x2 */ .trio--4{grid-template-columns:repeat(2,minmax(0,1fr))} .tri-spec{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:12px} /* ─ cumplimiento a normativa: vive DENTRO de la tarjeta del trio; el "+" despliega el detalle (ISO en proceso, GDPR alineado, LFPDPPP) ─ */ .tri--cumple{position:relative} .tri-mas{position:absolute;top:14px;right:16px;background:none;border:0;cursor:pointer; font-family:var(--mono);font-size:16px;line-height:1;padding:6px;color:var(--texto-3); transition:rotate .3s var(--ease-out),color .2s} .tri-mas:hover{color:var(--texto)} .tri--abierta .tri-mas{rotate:45deg} .tri-est{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out)} .tri-est>span{overflow:hidden;display:block} .tri--abierta .tri-est{grid-template-rows:1fr} .tri-linea{display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:12.5px;color:var(--texto);padding-top:10px} .tri-linea:first-child{padding-top:14px} .norma-chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--texto-2);white-space:nowrap; border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 10px} /* el borde punteado dice "en camino" sin fingir un sello que aun no existe */ .norma-chip--proceso{border-style:dashed;color:var(--texto-3)} @media(prefers-reduced-motion:reduce){.tri-est,.tri-mas{transition:none}} /* ─ #impacto: el mismo "+" despliega como se obtuvieron las cifras (sep 2026, pedido del dueño: la muestra y el periodo solo se ven al picarle) ─ */ .stx-src--mas .mono{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:2px} .stx-mas{position:static;top:auto;right:auto;display:inline-grid;place-items:center;padding:4px 6px} .stx-src--abierta .stx-mas{rotate:45deg} .stx-met{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out)} .stx-met>p{overflow:hidden;margin:0;font-family:var(--font-sans,inherit);font-size:12.5px;line-height:1.6; letter-spacing:0;text-transform:none;color:var(--texto-2);max-width:56ch;margin-left:auto;text-align:right} .stx-src--abierta .stx-met{grid-template-rows:1fr} .stx-src--abierta .stx-met>p{padding-top:8px} @media(max-width:900px){.stx-src--mas .mono{justify-content:flex-start}.stx-met>p{margin-left:0;text-align:left}} @media(prefers-reduced-motion:reduce){.stx-met{transition:none}} /* ═══ EN EQUIPO: demo multijugador en dos actos — elegir persona (avatares que se levantan, como el grupo de la referencia) y despliegue del arbol de carpetas compartidas. Vanilla CSS/JS: sin frameworks, como todo el sitio. ═══ */ .eq-demo{width:100%;max-width:560px;justify-self:center} .eq-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--texto-3);margin:0 0 14px} .eq-avs{display:flex;align-items:center;padding-top:26px} .eq-av{position:relative;border:0;background:none;padding:0;cursor:pointer;margin-left:-10px} .eq-av:first-child{margin-left:0} /* iniciales en sans medium, como los avatares del producto — el mono se sentia "de terminal" para nombres de personas */ .eq-av__c{display:grid;place-items:center;width:52px;height:52px;border-radius:50%; background:var(--hundida);border:2px solid var(--lienzo); font-family:var(--sans);font-weight:var(--fw-medium);font-size:15px;color:var(--texto); box-shadow:0 1px 2px rgba(10,10,10,.06); transition:translate .55s cubic-bezier(.3,1.4,.45,1),scale .55s cubic-bezier(.3,1.4,.45,1), background .25s,color .25s,box-shadow .3s} /* la persona elegida: pop con resorte y sombra que la despega del plano */ .eq-av--on .eq-av__c{scale:1.1;box-shadow:0 6px 16px rgba(10,10,10,.16)} .eq-av:hover .eq-av__c,.eq-av:focus-visible .eq-av__c{translate:0 -30%} /* --paso: el "cursor invisible" del autoplay — misma pose que el hover, con su tooltip, para que el barrido presente a cada persona */ .eq-av--paso .eq-av__c{translate:0 -30%} .eq-av--paso .eq-tip{opacity:1;translate:-50% 0} .eq-av--on .eq-av__c{background:var(--texto);color:var(--lienzo)} /* presencia: el verde vive SOLO en la persona elegida (regla del verde) */ .eq-av--on::after{content:"";position:absolute;right:1px;bottom:1px;width:9px;height:9px; border-radius:50%;background:var(--verde);border:2px solid var(--lienzo)} .eq-tip{position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 4px;white-space:nowrap; font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase; background:var(--texto);color:var(--lienzo);padding:6px 10px;border-radius:8px; opacity:0;pointer-events:none;transition:opacity .18s,translate .18s;z-index:2} .eq-av:hover .eq-tip,.eq-av:focus-visible .eq-tip{opacity:1;translate:-50% 0} /* panel: cerrado hasta la primera eleccion; abre con grid-rows (sin JS de alturas) y una curva con ligero resorte para que se sienta vivo */ .eq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s cubic-bezier(.3,1.15,.4,1);margin-top:18px} .eq-panel--abierto{grid-template-rows:1fr} .eq-panel__in{overflow:hidden} .eq-arbol{border:1px solid var(--linea);border-radius:var(--r-panel);padding:10px;background:var(--lienzo)} .eq-fila{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none; padding:9px 10px;border-radius:10px;font-family:var(--sans);font-size:13.5px;color:var(--texto); transition:background .2s,opacity .25s} button.eq-fila{cursor:pointer} .eq-fila svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;color:var(--texto-2);flex:none} .eq-chev{width:12px !important;height:12px !important;transition:rotate .25s var(--ease-out)} .eq-nodo--abierto .eq-chev{rotate:90deg} .eq-hijos{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)} .eq-nodo--abierto>.eq-hijos{grid-template-rows:1fr} .eq-hijos>div{overflow:hidden} .eq-hijos .eq-fila{margin-left:26px;width:calc(100% - 26px)} .eq-quien{margin-left:auto;display:flex;flex:none} .eq-quien i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%; background:var(--hundida);border:1.5px solid var(--lienzo);margin-left:-6px; font-family:var(--sans);font-weight:var(--fw-medium);font-style:normal; font-size:8.5px;color:var(--texto-2)} /* jerarquia tipografica del arbol: carpetas en medium; archivos y expedientes en mono chico (nombres tecnicos); subtitulos apagados */ .eq-fila--carpeta>span:not(.eq-quien):not(.eq-chev){font-weight:var(--fw-medium)} .eq-doc{font-family:var(--mono);font-size:12px;letter-spacing:.01em} .eq-sub{font-size:11.5px;color:var(--texto-3)} .eq-nota{margin:10px 4px 0;font-family:var(--mono);font-size:9.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);line-height:1.6} /* cascada de filas al abrir el panel; --listo resetea los delays para que las interacciones posteriores respondan al instante */ .eq-panel .eq-fila{opacity:0;translate:0 14px;scale:.985} .eq-panel--abierto .eq-fila{opacity:1;translate:0 0;scale:1; transition:opacity .4s ease,translate .5s cubic-bezier(.3,1.3,.45,1), scale .5s cubic-bezier(.3,1.3,.45,1),background .2s; transition-delay:calc(var(--d,0)*48ms)} .eq-panel--listo .eq-fila{transition-delay:0s} /* al elegir persona: sus filas se marcan, el resto baja de presencia */ .eq-panel--listo .eq-fila--sin{opacity:.4} .eq-fila--con{background:var(--hundida)} .eq-quien i{transition:background .25s,color .25s,scale .4s cubic-bezier(.3,1.5,.5,1)} .eq-fila--con .eq-quien i[data-yo]{position:relative;background:var(--texto);color:var(--lienzo);scale:1.18} .eq-fila--con .eq-quien i[data-yo]::after{content:"";position:absolute;right:-2px;bottom:-2px; width:7px;height:7px;border-radius:50%;background:var(--verde);border:1.5px solid var(--lienzo)} @media(max-width:640px){ /* compactado movil (pedido del dueño, ago 2026): la demo ocupaba mas de una pantalla. Avatares mas chicos y encimados, filas y tipografia un punto abajo, aires recortados y fuera la nota de "datos ficticios" — detalle de escritorio que aqui solo sumaba tres renglones. */ .eq-av__c{width:38px;height:38px;font-size:10.5px} .eq-av{margin-left:-14px} .eq-avs{padding-top:10px} .eq-panel{margin-top:10px} .eq-arbol{padding:6px} .eq-fila{padding:6px 8px;font-size:12.5px;gap:7px} .eq-doc{font-size:11px} .eq-sub{font-size:10.5px} .eq-quien i{width:17px;height:17px} .eq-hijos .eq-fila{margin-left:14px;width:calc(100% - 14px)} .eq-nota{display:none} } @media(prefers-reduced-motion:reduce){ .eq-av__c,.eq-tip,.eq-panel,.eq-hijos,.eq-chev,.eq-panel--abierto .eq-fila{transition:none} .eq-av:hover .eq-av__c{translate:none} } /* ═══ RADAR DOF: el correo de la mañana como pieza. Mismo lenguaje del email real (Radar DOF) condensado: cabecera, cifras, alerta y dos bloques, con fundido inferior que sugiere que el reporte sigue. ═══ */ .rd{width:100%;max-width:520px;justify-self:center} /* correo a la IZQUIERDA y texto a la DERECHA (peticion del dueño); en una columna (movil) el orden del flujo se conserva: primero el texto */ @media(min-width:941px){ #radar .split>.rv:not(.rd){order:2} #radar .split>.rd{order:1} } .rd-mail{position:relative;border:1px solid var(--linea);border-radius:var(--r-panel); background:var(--lienzo);padding:clamp(22px,3vw,30px);overflow:hidden; box-shadow:0 2px 4px rgba(10,10,10,.04),0 18px 44px rgba(10,10,10,.08)} .rd-top{display:flex;justify-content:space-between;align-items:baseline; border-bottom:1px solid var(--linea);padding-bottom:12px} .rd-logo{font-weight:700;letter-spacing:-.02em;font-size:15px;color:var(--texto)} .rd-mail .mono{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3)} .rd-ed{margin:16px 0 0} .rd-h{font-size:clamp(21px,2.3vw,26px);line-height:1.18;letter-spacing:-.01em; color:var(--texto);margin:10px 0 6px} /* la fecha lleva el punto verde de "vivo": este correo es el de HOY. Va ARRIBA del titular, bajo la linea del DOF (orden editorial). */ .rd-fecha{margin:6px 0 0;display:inline-flex;align-items:center;gap:6px} .rd-fecha::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--verde);flex:none} .rd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px; border-block:1px solid var(--linea);padding:14px 0;margin:16px 0 4px} .rd-stats b{display:block;font-size:22px;font-weight:var(--fw-medium); color:var(--texto);font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:3px} .rd-stats div:first-child b{color:var(--texto-3)} .rd-bloque{padding:14px 0;border-bottom:1px dotted var(--linea-suave)} .rd-bloque:last-of-type{border-bottom:0} .rd-bloque--alerta{background:var(--hundida);margin:10px -12px 0;padding:14px 12px; border-radius:12px;border-bottom:0;border-left:2px solid var(--verde)} .rd-bh{display:flex;justify-content:space-between;margin-bottom:8px} .rd-t{margin:0 0 4px;font-size:13.5px;line-height:1.4;color:var(--texto);font-weight:var(--fw-medium)} .rd-d{margin:0;font-size:12.5px;line-height:1.5;color:var(--texto-2)} .rd-fade{position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none; background:linear-gradient(rgba(255,255,255,0),var(--lienzo))} .rd-nota{text-align:center;margin:12px 0 0;font-family:var(--mono);font-size:10px; letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3)} /* el CSS de los modales (.modal*, .fld*) se fue con el modal de contacto: el contacto vive ahora en contacto.html */ /* El PNG del logo es negro monocromo; invert(1) da la variante blanca, que solo se necesita dentro de las secciones inversas. */ .drama .mark img,.drama .foot-in img,.foot .foot-in img{filter:invert(1)} /* ── DOS VIDEOS apilados, grandes, con el texto al costado ── Nada de border, box-shadow, background ni radius sobre el video: va directo sobre el lienzo. El metraje se recorto (fuera los cartones), se paso a escala de grises y se le subio el punto blanco, asi que se funde con la pagina. La seccion NO lleva .band: sobre gris se recortaba el rectangulo. */ .duo{display:flex;flex-direction:column;gap:var(--space-12);margin-top:var(--space-8)} .duo-item{margin:0;display:grid;grid-template-columns:26% 1fr;gap:var(--space-8);align-items:center} /* Colocacion EXPLICITA: el