/* ============================================================ AYS AI Technologies — Hoja de estilos común (v2) Extraída de los 3 archivos para evitar duplicación (M-3). ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --white:#ffffff; --black:#000000; --gray:#f5f5f5; --border:rgba(0,0,0,0.1); /* M-1: muted oscurecido de #888 a #6b6b6b para cumplir WCAG AA (≈4.6:1) */ --muted:#6b6b6b; /* tono aún más claro reservado SOLO para texto grande/decorativo */ --muted-soft:#888; --nav:64px; } html{scroll-behavior:smooth} /* B-1: unificado en todas las páginas */ body{ background:var(--white); color:var(--black); font-family:'Inter',sans-serif; font-weight:300; font-size:14px; line-height:1.6; } /* M-2: indicador de foco accesible global (WCAG 2.4.7) */ :focus-visible{outline:2px solid var(--black);outline-offset:3px} /* ===================== NAV ===================== */ nav{position:fixed;top:0;left:0;right:0;height:var(--nav);display:flex;align-items:center;justify-content:space-between;padding:0 48px;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)} .logo a{display:block;text-decoration:none} .logo img{height:36px;width:auto;display:block} .nav-links{display:flex;gap:40px;list-style:none} .nav-links a{text-decoration:none;color:var(--black);font-size:12px;letter-spacing:0.08em;font-weight:400;position:relative;padding-bottom:2px} .nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--black);transition:width 0.25s ease} .nav-links a:hover::after,.nav-links a.active::after{width:100%} /* A-3: botón hamburguesa (oculto en escritorio) */ .nav-toggle{display:none;background:none;border:none;width:40px;height:40px;padding:8px;cursor:pointer;z-index:110;color:var(--black)} .nav-toggle span{display:block;width:100%;height:1px;background:currentColor;transition:transform 0.3s ease,opacity 0.2s ease} .nav-toggle span+span{margin-top:7px} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ===================== FOOTER ===================== */ footer{padding:28px 48px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)} footer a{color:var(--muted);text-decoration:none;transition:color 0.2s} footer a:hover{color:var(--black)} /* ===================== REVEAL ===================== */ /* M-4: el ocultamiento solo aplica cuando JS marca . Si el JS no corre, el contenido queda visible (sin .r{opacity:0}). */ .js .r{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease,transform 0.7s ease} .js .r.in{opacity:1;transform:none} /* M-4: respeta prefers-reduced-motion */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .js .r{opacity:1;transform:none;transition:none} } /* ===================== TIPOGRAFÍA / UTILIDADES COMUNES ===================== */ .eyebrow{font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:32px} .display{font-family:'Playfair Display',serif;font-weight:400;line-height:1.1} .display em{font-style:italic;color:var(--muted)} /* ===================== NAV MÓVIL (≤768px) ===================== */ @media (max-width:768px){ nav{padding:0 24px} .nav-toggle{display:block} /* drawer a pantalla completa */ .nav-links{ position:fixed;inset:0; flex-direction:column;align-items:center;justify-content:center;gap:36px; background:var(--white); transform:translateX(100%); transition:transform 0.35s cubic-bezier(.4,0,.2,1); visibility:hidden; } body.nav-open .nav-links{transform:translateX(0);visibility:visible} body.nav-open{overflow:hidden} /* evita scroll de fondo con el menú abierto */ .nav-links a{font-size:20px;letter-spacing:0.04em} } /* evita scroll horizontal accidental en todo el sitio (refuerzo defensivo) */ html,body{overflow-x:hidden} img,svg,video{max-width:100%;height:auto}