/* ============================================================ PactAr — hoja de estilos principal Paleta: blanco / negro tinta / celeste apagado + acento sol Tipografía: Figtree (geométrica, cercana a la del isologo) ============================================================ */ :root{ --ink: #0e1216; --ink-2: #3a444e; --ink-3: #6d7883; --paper: #ffffff; --paper-2: #f4f6f8; --line: #e2e7ec; --celeste: #8faecb; --celeste-soft: #cfdeea; --celeste-deep: #4e7ca8; --marino: #101d38; /* tira de ideologías */ --sol: #c99700; /* amarillo oro oscuro del Sol de Mayo */ --wrap: 1200px; --pad: clamp(20px, 5vw, 64px); --r: 4px; --ease: cubic-bezier(.22,.61,.36,1); color-scheme: light; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; } /* el color base va en : queda transparente para que se vean los rayos, que son una capa fija detrás del contenido */ html{ background:var(--paper); } body{ margin:0; background:transparent; color:var(--ink); font-family:'Figtree','Poppins','Segoe UI',system-ui,-apple-system,sans-serif; font-size:clamp(16px,.55vw + 14.5px,18px); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{ max-width:100%; } a{ color:inherit; } :focus-visible{ outline:3px solid var(--celeste-deep); outline-offset:3px; border-radius:2px; } .skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:#fff; padding:14px 22px; font-weight:600; } .skip:focus{ left:0; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } /* el SVG con las definiciones reutilizables: no se ve, solo alimenta a los . Va por clase y no por atributo style para poder aplicar una política de seguridad estricta, sin 'unsafe-inline' */ .defs-svg{ position:absolute; } /* ---------- tipografía compartida ---------- */ .eyebrow{ font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin:0 0 18px; } .eyebrow--inv{ color:var(--celeste); } .h-display{ font-weight:400; font-size:clamp(2.3rem,6.2vw,4.6rem); line-height:1.03; letter-spacing:-.03em; margin:0 0 28px; } .h-display em{ font-style:normal; font-weight:900; } .h-display strong{ font-weight:900; } .h-display__b{ display:block; margin-top:.5em; } .h2{ font-weight:800; font-size:clamp(1.7rem,3.5vw,2.85rem); line-height:1.1; letter-spacing:-.025em; margin:0; } .h2--inv{ color:#fff; } .ac{ color:var(--celeste-deep); } .lead{ font-size:clamp(1.02rem,1.2vw,1.22rem); color:var(--ink-2); max-width:52ch; margin:0 0 34px; } .prose p{ margin:0 0 1.1em; color:var(--ink-2); } .prose strong{ color:var(--ink); } .prose p:last-child{ margin-bottom:0; } /* ---------- botones ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 30px; font-weight:700; font-size:.98rem; text-decoration:none; border-radius:var(--r); border:2px solid var(--ink); transition:transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s; } .btn--solid{ background:var(--ink); color:#fff; } .btn--solid:hover{ background:var(--celeste-deep); border-color:var(--celeste-deep); transform:translateY(-3px); box-shadow:0 10px 24px rgba(14,18,22,.18); } .btn--ghost{ background:transparent; color:var(--ink); } .btn--ghost:hover{ background:var(--ink); color:#fff; transform:translateY(-3px); } /* ============================================================ RAYOS LATERALES (fondo del sitio) Reescritura en CSS del efecto "Side Rays" de reactbits.dev, que allá corre sobre WebGL. Cada capa es un degradado cónico con origen en la esquina superior derecha: las paradas de color son los rayos, y la máscara radial hace el apagado con la distancia (el "falloff"). ============================================================ */ :root{ --rayos-visible:1; } /* 0 los apaga */ .rayos{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; opacity:var(--rayos-visible); } /* Velo que apaga los rayos con la distancia (el "falloff"). Antes esto era una mask-image, y salía carísimo: enmascarar obliga a recomponer la capa en cada cuadro mientras gira. Como el fondo del sitio es blanco, pintar blanco encima da exactamente el mismo resultado por una fracción del costo. */ .rayos::after{ content:""; position:absolute; inset:0; background:radial-gradient(135% 125% at 100% 0%, transparent 0%, rgba(255,255,255,.3) 40%, rgba(255,255,255,.76) 64%, #fff 88%); } /* Resplandor en el origen. Sobre fondo claro la luz no puede "brillar" —solo puede teñir—, así que el foco se sugiere con un halo cálido en la esquina, del que después salen los rayos. */ .rayos__foco{ position:absolute; inset:0; background:radial-gradient(48% 42% at 100% 0%, rgba(255,206,94,.40) 0%, rgba(255,226,160,.20) 34%, transparent 72%); animation:latidoFoco 24s ease-in-out infinite alternate; will-change:opacity; } /* El desborde alcanza para cubrir la pantalla con el giro de ±3,4°. Estaba en 25% —cinco megapíxeles entre las dos capas, contra un megapíxel de pantalla— y era plata tirada en pintar afuera del cuadro. */ .rayos__capa{ position:absolute; inset:-12%; transform-origin:100% 0; will-change:transform, opacity; } /* rayos dorados */ .rayos__capa--oro{ background:conic-gradient(from 0deg at 100% 0%, transparent 183deg, rgba(234,179,8,.42) 189deg, transparent 196deg, rgba(234,179,8,.23) 204deg, transparent 211deg, rgba(234,179,8,.50) 217deg, transparent 226deg, rgba(234,179,8,.19) 233deg, transparent 240deg, rgba(234,179,8,.36) 247deg, transparent 255deg, rgba(234,179,8,.25) 261deg, transparent 268deg); animation:derivaRayos 26s ease-in-out infinite alternate, latidoRayos 15s ease-in-out infinite alternate; } /* rayos celestes, en otros ángulos para que se crucen con los dorados */ .rayos__capa--celeste{ background:conic-gradient(from 0deg at 100% 0%, transparent 180deg, rgba(150,200,255,.60) 186deg, transparent 193deg, rgba(150,200,255,.36) 200deg, transparent 208deg, rgba(150,200,255,.52) 214deg, transparent 222deg, rgba(150,200,255,.30) 230deg, transparent 238deg, rgba(150,200,255,.44) 244deg, transparent 252deg, rgba(150,200,255,.32) 259deg, transparent 266deg); animation:derivaRayos 37s ease-in-out infinite alternate-reverse, latidoRayos 21s ease-in-out infinite alternate-reverse; } /* El movimiento son dos cosas a la vez y con períodos distintos: el abanico gira despacio y cada capa respira de intensidad por su cuenta. Al no coincidir los ciclos, nunca se repite el mismo cuadro y se lee como luz viva en vez de como un bucle. */ @keyframes derivaRayos{ from{ transform:rotate(-3.4deg); } to { transform:rotate(3.4deg); } } @keyframes latidoRayos{ from{ opacity:.6; } to { opacity:1; } } /* Solo opacidad, sin scale: escalar un degradado grande obliga a volver a pintarlo en cada cuadro; la opacidad la resuelve la GPU sola. */ @keyframes latidoFoco{ from{ opacity:.7; } to { opacity:1; } } /* ============================================================ HEADER ============================================================ */ .hdr{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; } .hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(14,18,22,.05); } .hdr__in{ max-width:var(--wrap); margin-inline:auto; padding:14px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; } .brand__mark{ height:28px; width:auto; flex:none; display:block; } /* El logo es negro sobre transparente: sobre fondos oscuros se invierte con esta clase */ .logo--inv{ filter:invert(1); } .brand__word{ font-size:1.32rem; font-weight:500; letter-spacing:-.02em; } .brand__word b{ font-weight:900; } .nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); } .nav a{ text-decoration:none; font-size:.94rem; font-weight:600; color:var(--ink-2); position:relative; padding:6px 0; transition:color .2s; } .nav a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--celeste-deep); transition:width .3s var(--ease); } .nav a:hover{ color:var(--ink); } .nav a:hover::after{ width:100%; } .nav__cta{ background:var(--ink); color:#fff !important; padding:10px 20px !important; border-radius:var(--r); } .nav__cta::after{ display:none; } .nav__cta:hover{ background:var(--celeste-deep); } .burger{ display:none; background:none; border:0; padding:10px; cursor:pointer; } .burger span{ display:block; width:26px; height:2px; background:var(--ink); margin:5px 0; transition:transform .3s var(--ease), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:900px){ .burger{ display:block; } .nav{ position:fixed; inset:64px 0 auto; flex-direction:column; align-items:flex-start; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px var(--pad) 28px; clip-path:inset(0 0 100% 0); transition:clip-path .4s var(--ease); } .nav.is-open{ clip-path:inset(0 0 0 0); } .nav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:1.1rem; } .nav__cta{ margin-top:18px; border-bottom:0 !important; text-align:center; justify-content:center; display:block; } } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; overflow:hidden; } .hero__in{ max-width:var(--wrap); margin-inline:auto; padding:clamp(48px,7vw,96px) var(--pad) clamp(40px,6vw,80px); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px); align-items:center; } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; } .hero__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin:38px 0 0; padding:26px 0 0; border-top:1px solid var(--line); } .hero__tags li{ font-size:.8rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:9px; } .hero__tags li::before{ content:""; width:7px; height:7px; background:var(--celeste); border-radius:50%; } .hero__art{ position:relative; display:flex; justify-content:center; } .ar-map{ width:min(100%,340px); height:auto; filter:drop-shadow(0 26px 46px rgba(14,18,22,.14)); animation:floaty 9s ease-in-out infinite; } @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } } .hero__art-note{ position:absolute; left:0; bottom:6%; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:700; color:var(--ink-3); } /* En celular el mapa sale del flujo y pasa a ser una capa de fondo, anclada arriba a la derecha y sangrando por el borde. Antes quedaba debajo de todo el texto: se veía tarde y desconectado del mensaje. */ @media (max-width:900px){ .hero__in{ position:relative; grid-template-columns:1fr; gap:0; padding-top:clamp(30px,7vw,56px); padding-bottom:clamp(36px,8vw,64px); } .hero__txt{ position:relative; z-index:1; } /* se dimensiona por alto, no por ancho: así calza con el hero en cualquier pantalla en vez de estirarse y quedar recortado en tablet */ .hero__art{ position:absolute; z-index:0; pointer-events:none; top:0; bottom:0; right:-5%; left:auto; width:auto; display:flex; align-items:center; justify-content:flex-end; } .ar-map{ height:92%; width:auto; max-width:none; animation:none; opacity:.38; filter:none; /* sin sombra: como fondo ensucia */ /* se desvanece hacia la izquierda para no competir con el texto */ -webkit-mask-image:linear-gradient(105deg, transparent 2%, #000 44%); mask-image:linear-gradient(105deg, transparent 2%, #000 44%); } .hero__art-note{ display:none; } /* Mismo lugar que en escritorio, pero con menos presencia: acá el mapa está detrás del texto y el oro saturado le comía la legibilidad. */ #sol-mapa{ opacity:.5; } /* el titular se mantiene sobre la parte clara del mapa */ .h-display{ max-width:13ch; } } /* ============================================================ MARQUEE / STRIP ============================================================ */ .strip{ background:var(--marino); color:#fff; padding:clamp(34px,5vw,56px) 0; overflow:hidden; } .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__row{ display:flex; align-items:center; gap:26px; width:max-content; animation:slide 34s linear infinite; } .marquee__row span{ font-size:clamp(1.5rem,4vw,3rem); font-weight:800; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.55); white-space:nowrap; transition:color .3s, -webkit-text-stroke-color .3s; } .marquee__row span:hover{ color:#fff; -webkit-text-stroke-color:#fff; } .marquee__row i{ color:var(--celeste); font-style:normal; font-size:1.1rem; } @keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .strip__claim{ max-width:820px; margin:clamp(32px,4vw,50px) auto 0; padding-inline:var(--pad); text-align:center; font-size:clamp(1.1rem,2.1vw,1.55rem); line-height:1.45; color:rgba(255,255,255,.75); } .strip__claim strong{ color:#fff; font-weight:800; } /* ============================================================ SECCIONES ============================================================ */ .sec{ padding:clamp(64px,9vw,132px) 0; position:relative; } .sec--dark{ background:var(--ink); color:#fff; } .sec__head{ max-width:720px; margin-bottom:clamp(40px,5vw,68px); } .sec__sub{ margin:20px 0 0; color:var(--ink-2); font-size:1.02rem; max-width:62ch; } .sec--dark .sec__sub{ color:rgba(255,255,255,.66); } /* ---------- Cita sobre la bandera ---------- Banda a todo el ancho: corta la pared de párrafos y da el respiro visual que en celular más se notaba. La bandera es vectorial (franjas por degradado + Sol de Mayo en SVG), así que no pesa ni pixela. */ .quote{ position:relative; overflow:hidden; margin:clamp(48px,6vw,88px) 0 0; padding:clamp(56px,9vw,124px) 0; color:#fff; } .quote__flag{ position:absolute; inset:0; z-index:0; /* celeste oficial de la bandera */ background:linear-gradient(180deg, #75aadb 0 33.333%, #ffffff 33.333% 66.666%, #75aadb 66.666% 100%); } .quote__sol{ position:absolute; top:50%; left:79%; transform:translate(-50%,-50%); width:clamp(150px,20vw,270px); aspect-ratio:1; } .quote__sol svg{ width:100%; height:100%; display:block; } /* Velo en dos capas. Una horizontal, que oscurece el lado del texto y deja respirar el de la bandera; otra vertical, que refuerza solo sobre la franja blanca, que es donde el texto en blanco se perdería. */ .quote::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(92deg, rgba(14,18,22,.74) 0%, rgba(14,18,22,.46) 46%, rgba(14,18,22,0) 84%), linear-gradient(180deg, rgba(14,18,22,.26) 0 30%, rgba(14,18,22,.36) 40% 60%, rgba(14,18,22,.26) 70% 100%); } .quote .wrap{ position:relative; z-index:2; } .quote p{ margin:0; max-width:24ch; font-size:clamp(1.55rem,4.6vw,3rem); font-weight:800; line-height:1.14; letter-spacing:-.03em; text-wrap:balance; } .quote strong{ color:var(--celeste); font-weight:800; } @media (max-width:760px){ /* En celular el texto ocupa todo el ancho y empuja al sol fuera de la franja blanca, que es donde va en la bandera. Se estira la banda para que las tres franjas entren completas y el sol quede centrado en la blanca, con el texto arriba y sin superponerse. */ .quote{ padding-top:clamp(40px,11vw,56px); padding-bottom:0; min-height:500px; } /* al 50% queda en el centro exacto de la franja blanca y de la banda */ .quote__sol{ left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:clamp(112px,30vw,138px); } /* Acá el texto vive solo en la franja celeste de arriba, así que el velo se concentra ahí y se afloja de la mitad para abajo: el sol vuelve a verse dorado y el celeste, celeste. */ .quote::after{ background:linear-gradient(180deg, rgba(14,18,22,.8) 0 28%, rgba(14,18,22,.64) 38%, rgba(14,18,22,.26) 52%, rgba(14,18,22,.26) 100%); } } /* ---------- Temas de trabajo ---------- */ .temas{ margin-top:clamp(44px,5vw,72px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line); } .temas__t{ margin:0 0 20px; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink-3); } .temas__l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } .temas__l li{ border:1px solid var(--line); border-radius:999px; padding:9px 20px; font-weight:700; font-size:.95rem; background:var(--paper); transition:border-color .25s, color .25s, transform .25s var(--ease); } .temas__l li:hover{ border-color:var(--celeste-deep); color:var(--celeste-deep); transform:translateY(-2px); } .temas__mas{ border-style:dashed !important; color:var(--ink-3); font-weight:600 !important; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,80px); align-items:start; } .grid-2--faq{ grid-template-columns:.8fr 1.2fr; } @media (max-width:860px){ .grid-2,.grid-2--faq{ grid-template-columns:1fr; } } /* ---------- Principios ---------- */ .princ{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.16); } .princ__it{ display:grid; grid-template-columns:110px minmax(210px,320px) 1fr; gap:clamp(14px,3vw,40px); align-items:baseline; padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid rgba(255,255,255,.16); transition:padding-left .35s var(--ease), background-color .35s; } .princ__it:hover{ padding-left:18px; background:rgba(255,255,255,.04); } .princ__n{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:900; color:var(--celeste); letter-spacing:-.02em; } .princ__it h3{ margin:0; font-size:clamp(1.25rem,2.4vw,1.9rem); font-weight:800; letter-spacing:-.02em; } .princ__it p{ margin:0; color:rgba(255,255,255,.68); max-width:56ch; } @media (max-width:860px){ .princ__it{ grid-template-columns:70px 1fr; } .princ__it p{ grid-column:2; } /* el número pasa a ser un elemento gráfico, en contorno como la marquesina */ .princ__n{ font-size:3.1rem; color:transparent; -webkit-text-stroke:1.5px var(--celeste); letter-spacing:-.04em; } } /* ---------- Cards ---------- */ /* minmax de 300px para que los seis formatos entren en 3 + 3 y no quede una fila huérfana de dos tarjetas */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); } .card{ background:var(--paper); padding:clamp(28px,3.4vw,42px); transition:background-color .35s, transform .35s var(--ease); } .card:hover{ background:var(--paper-2); transform:translateY(-4px); } .card__ico{ width:46px; height:46px; margin-bottom:22px; } .card__ico svg{ width:100%; height:100%; fill:none; stroke:var(--celeste-deep); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .card h3{ margin:0 0 12px; font-size:1.24rem; font-weight:800; letter-spacing:-.02em; } .card p{ margin:0; color:var(--ink-2); font-size:.97rem; } /* ---------- Sun / Sumarse ---------- */ .sun{ background:var(--paper-2); overflow:hidden; } /* Foto de fondo opcional para "Cómo sumarse". La clase la pone el JS y solo si la imagen carga de verdad, así que sin foto la sección queda como está. Con foto, el texto se invierte a blanco: negro sobre una foto no se lee. */ /* La imagen la asigna el JS como estilo en línea. No va acá con una variable porque un url() dentro de una custom property se resuelve relativo a esta hoja de estilos, no al documento, y terminaba buscando assets/css/assets/… */ .sun.con-foto{ background-size:cover; background-position:center; } .sun.con-foto::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(8,10,14,.78) 0%, rgba(8,10,14,.5) 44%, rgba(8,10,14,.82) 100%); } .sun.con-foto .sun__in{ position:relative; z-index:1; } .sun.con-foto .h2{ color:#fff; } .sun.con-foto .eyebrow{ color:var(--celeste); } .sun.con-foto .sec__sub{ color:rgba(255,255,255,.82); } .sun.con-foto .step{ box-shadow:0 18px 44px rgba(0,0,0,.4); } .sun__in{ position:relative; } .steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(20px,3vw,34px); } .step{ background:var(--paper); border:1px solid var(--line); padding:clamp(26px,3vw,38px); position:relative; } .step__n{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; font-weight:900; font-size:1.05rem; margin-bottom:20px; } .step h3{ margin:0 0 10px; font-size:1.2rem; font-weight:800; letter-spacing:-.02em; } .step p{ margin:0; color:var(--ink-2); font-size:.97rem; } /* ---------- FAQ ---------- */ .faq details{ border-bottom:1px solid var(--line); } .faq details:first-child{ border-top:1px solid var(--line); } .faq summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-weight:700; font-size:1.05rem; transition:color .2s; } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ color:var(--celeste-deep); } .faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:13px; height:13px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease); } .faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); } .faq details p{ margin:0 0 24px; color:var(--ink-2); max-width:60ch; } /* ============================================================ CTA CONTACTO ============================================================ */ .cta{ background:var(--ink); color:#fff; padding:clamp(64px,9vw,124px) 0; } .cta__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:start; } /* el mapa pasa a marca de agua del bloque: el espacio lo necesita el formulario */ .cta__map{ position:absolute; left:-3%; top:50%; transform:translateY(-50%); height:118%; width:auto; max-width:none; fill:var(--celeste-deep); opacity:.13; pointer-events:none; z-index:0; } .cta__txt, .form{ position:relative; z-index:1; } .cta__p{ color:rgba(255,255,255,.72); max-width:46ch; margin:18px 0 26px; } .cta__alt{ margin:0; font-size:1.02rem; color:rgba(255,255,255,.72); } /* el correo se muestra pero no es un enlace: la vía es el formulario */ .cta__mail{ color:#fff; font-weight:700; border-bottom:2px solid var(--celeste); padding-bottom:2px; user-select:all; /* un clic lo selecciona entero para copiarlo */ } .cta__legal{ margin:26px 0 0; font-size:.86rem; color:rgba(255,255,255,.5); } .cta__legal a{ color:var(--celeste); } /* ---------- Formulario ---------- */ .form{ display:grid; gap:20px; } .form__honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .field{ display:grid; gap:8px; } .field label{ font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.72); } .req{ color:var(--celeste); } .opt{ letter-spacing:.04em; text-transform:none; font-weight:600; color:rgba(255,255,255,.45); } .field input[type=text], .field input[type=email], .field textarea{ width:100%; font:inherit; font-size:1rem; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.22); border-radius:var(--r); padding:14px 16px; transition:border-color .2s, background-color .2s; } .field textarea{ resize:vertical; min-height:110px; } .field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.38); } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--celeste); background:rgba(255,255,255,.09); } .field.is-mal input, .field.is-mal textarea, .field.is-mal .field__fake{ border-color:#ff9a8a; } .field__err{ font-size:.85rem; color:#ff9a8a; letter-spacing:0; text-transform:none; } .field__ayuda{ font-size:.82rem; color:rgba(255,255,255,.45); } /* Turnstile dibuja el widget dentro de un iframe de tamaño fijo. Se le reserva el alto para que el formulario no salte cuando termina de cargar. */ .captcha{ min-height:65px; } .captcha iframe{ max-width:100%; } /* el input de archivo nativo es feo e imposible de estilar: se oculta y se dibuja una etiqueta que hace de botón */ .field__file{ position:absolute; opacity:0; width:1px; height:1px; } /* specificity extra: si no, gana el text-transform del label general */ .field label.field__fake{ display:flex; align-items:center; gap:14px; cursor:pointer; border:1px dashed rgba(255,255,255,.28); border-radius:var(--r); padding:10px 12px; text-transform:none; letter-spacing:0; font-weight:500; transition:border-color .2s, background-color .2s; } .field__fake:hover{ border-color:var(--celeste); background:rgba(255,255,255,.05); } .field__file:focus-visible + .field__fake{ outline:3px solid var(--celeste-deep); outline-offset:3px; } .field__fake-btn{ flex:none; background:rgba(255,255,255,.12); color:#fff; padding:8px 16px; border-radius:var(--r); font-size:.85rem; font-weight:700; } .field__fake-name{ font-size:.9rem; font-weight:500; color:rgba(255,255,255,.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .field__fake-name.tiene{ color:#fff; } .btn--claro{ background:#fff; color:var(--ink); border-color:#fff; justify-self:start; } .btn--claro:hover{ background:var(--celeste); border-color:var(--celeste); color:var(--ink); transform:translateY(-3px); } .btn--claro[disabled]{ opacity:.6; pointer-events:none; } .form__aviso{ margin:0; font-size:.95rem; padding:14px 16px; border-radius:var(--r); } .form__aviso.mal{ background:rgba(255,154,138,.14); color:#ffb3a6; } .form__aviso.bien{ background:rgba(143,174,203,.18); color:#cfe0ef; } @media (max-width:860px){ .cta__in{ grid-template-columns:1fr; } .cta__map{ left:auto; right:-28%; height:100%; opacity:.09; } } /* ---------- Página de confirmación ---------- */ .gracias{ min-height:64vh; display:flex; align-items:center; } .gracias__in{ position:relative; z-index:1; max-width:62ch; } .gracias__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 0; } .btn--linea{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); } .btn--linea:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-3px); } /* ============================================================ FOOTER ============================================================ */ .ft{ background:var(--paper); border-top:1px solid var(--line); padding-top:clamp(48px,6vw,80px); } .ft__in{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,6vw,64px); } .mono{ display:inline-flex; align-items:center; } .mono img{ height:56px; width:auto; display:block; } .ft__brand p{ margin:18px 0 0; color:var(--ink-3); font-size:.95rem; } /* ---------- Enlace a redes ---------- */ .social{ display:inline-flex; align-items:center; gap:11px; margin-top:22px; text-decoration:none; font-weight:700; font-size:.95rem; color:var(--ink-2); transition:color .2s, transform .2s var(--ease); } .social svg{ width:23px; height:23px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; } .social .social__punto{ fill:currentColor; stroke:none; } .social:hover{ color:var(--celeste-deep); transform:translateX(3px); } .ft__nav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:28px; } .ft__nav h4{ margin:0 0 14px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); } .ft__nav a{ display:block; text-decoration:none; color:var(--ink-2); font-size:.95rem; padding:5px 0; transition:color .2s, transform .2s; } .ft__nav a:hover{ color:var(--ink); transform:translateX(3px); } @media (max-width:760px){ .ft__in{ grid-template-columns:1fr; } } .ft__bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:clamp(40px,5vw,64px); padding-top:24px; padding-bottom:28px; border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-3); } .ft__bot p{ margin:0; } .ft__bot a{ text-decoration:none; } .ft__bot a:hover{ color:var(--ink); } /* ============================================================ PÁGINA LEGAL ============================================================ */ .legal{ padding:clamp(48px,7vw,90px) 0 clamp(64px,8vw,110px); } .legal__grid{ display:grid; grid-template-columns:250px 1fr; gap:clamp(30px,6vw,72px); align-items:start; } @media (max-width:900px){ .legal__grid{ grid-template-columns:1fr; } } .toc{ position:sticky; top:104px; } .toc h4{ margin:0 0 14px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); } .toc ol{ margin:0; padding:0; list-style:none; counter-reset:t; border-left:1px solid var(--line); } .toc li{ counter-increment:t; } .toc a{ display:block; padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent; text-decoration:none; color:var(--ink-2); font-size:.9rem; transition:color .2s, border-color .2s; } .toc a::before{ content:counter(t,decimal-leading-zero) " · "; color:var(--ink-3); font-weight:700; } .toc a:hover{ color:var(--ink); border-left-color:var(--celeste); } @media (max-width:900px){ .toc{ position:static; } } .legal__doc h2{ font-size:clamp(1.25rem,2.4vw,1.6rem); font-weight:800; letter-spacing:-.02em; margin:52px 0 14px; } .legal__doc h2:first-child{ margin-top:0; } .legal__doc h3{ font-size:1.02rem; font-weight:800; margin:26px 0 8px; } .legal__doc p,.legal__doc li{ color:var(--ink-2); } .legal__doc p{ margin:0 0 1em; } .legal__doc ul{ margin:0 0 1.2em; padding-left:1.15em; } .legal__doc li{ margin-bottom:.5em; } .legal__doc a{ color:var(--celeste-deep); } .legal__meta{ font-size:.86rem; color:var(--ink-3); border-left:3px solid var(--celeste); padding:4px 0 4px 16px; margin-bottom:40px; } .callout{ background:var(--paper-2); border:1px solid var(--line); padding:22px 24px; margin:0 0 1.4em; } .callout p:last-child{ margin-bottom:0; } .callout--legal{ border-left:4px solid var(--ink); font-size:.92rem; } .legal__hero{ padding:clamp(40px,6vw,72px) 0 0; } .legal__hero h1{ font-size:clamp(2rem,5vw,3.4rem); font-weight:900; letter-spacing:-.03em; line-height:1.05; margin:0 0 16px; } .legal__hero p{ color:var(--ink-2); max-width:56ch; margin:0; } /* ============================================================ EFECTOS Versiones en CSS/JS nativo de recursos vistos en reactbits.dev (allá son componentes de React con GSAP; acá no hay dependencias). ============================================================ */ /* ---------- 1. Entrada del título palabra por palabra (Split + Blur Text) ---------- */ .sw{ display:inline-block; opacity:0; transform:translateY(.42em); filter:blur(10px); transition:opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); } .sw.is-in{ opacity:1; transform:none; filter:blur(0); } /* el resto del hero entra detrás del título */ .h-fade{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .h-fade.is-in{ opacity:1; transform:none; } /* ---------- 2. Brillo que recorre "PactAr" (Shiny Text) ---------- La clase va sobre el mismo elemento que contiene el texto: si se pone en un ancestro, el recorte contra el texto no llega a los hijos. */ .is-shining{ background:linear-gradient(100deg, var(--ink) 42%, var(--celeste-deep) 48%, #a9c4dc 52%, var(--ink) 58%); background-size:280% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:shine 6.5s linear infinite; } @keyframes shine{ from{ background-position:180% 0; } to{ background-position:-80% 0; } } /* ---------- 3. Foco que sigue al cursor en las tarjetas (Spotlight Card) ---------- */ .card, .step{ isolation:isolate; } .card::before, .step::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(143,174,203,.28), transparent 70%); transition:opacity .35s var(--ease); } .card{ position:relative; } .card:hover::before, .step:hover::before{ opacity:1; } /* ---------- 4. Aurora tenue en las secciones oscuras (Aurora) ---------- */ .sec--dark, .cta{ position:relative; overflow:hidden; } .sec--dark::before, .cta::before{ content:""; position:absolute; inset:-12%; pointer-events:none; background: radial-gradient(42% 38% at 22% 28%, rgba(143,174,203,.17), transparent 62%), radial-gradient(38% 34% at 78% 72%, rgba(78,124,168,.15), transparent 62%), radial-gradient(30% 28% at 55% 12%, rgba(201,151,0,.07), transparent 65%); animation:aurora 24s ease-in-out infinite alternate; will-change:transform; } @keyframes aurora{ from{ transform:translate3d(-3%,-2%,0) scale(1); } to { transform:translate3d(4%,3%,0) scale(1.14); } } .sec--dark > .wrap, .cta > .wrap{ position:relative; z-index:1; } /* ---------- 5. Botón magnético (Magnet) ---------- El desplazamiento va en variables para poder combinarlo con el levantado del :hover en vez de pisarlo. */ [data-magnet]{ transform:translate(var(--magx,0px), var(--magy,0px)); will-change:transform; } .btn--solid[data-magnet]:hover{ transform:translate(var(--magx,0px), calc(var(--magy,0px) - 3px)); } /* ============================================================ REVEAL / MOTION ============================================================ */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } html{ scroll-behavior:auto; } .reveal,.h-fade{ opacity:1; transform:none; } .sw{ opacity:1; transform:none; filter:none; } .marquee__row{ animation:none; } .sec--dark::before, .cta::before{ animation:none; } .rayos__capa, .rayos__foco{ animation:none; } .is-shining{ animation:none; -webkit-text-fill-color:currentColor; color:inherit; background:none; } } @media print{ .hdr,.rayos,.hero__art,.marquee{ display:none !important; } body{ color:#000; } }