/* Sycamore Tree Seeds — sitio en construcción. Paleta definitiva (23-09, docs/brand/paleta-definitiva.jpg). Tipografías: manual V1. Cormorant sustituye a Ivyora Display hasta tener la licencia web. */ @font-face{font-family:"Cormorant";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-italic-400.woff2) format("woff2")} @font-face{font-family:"Raleway";font-style:normal;font-weight:300 400;font-display:swap;src:url(fonts/raleway-latin-var.woff2) format("woff2")} :root{ --carbon:#1D1D1B;--ceniza:#EDEDED;--malva:#5A475A;--crepusculo:#1A172A;--naranja:#DA5437; --bg:var(--malva);--fg:var(--ceniza); --pad:clamp(20px,4vw,56px); color-scheme:dark; } *{box-sizing:border-box;margin:0} html{background:var(--bg);color:var(--fg)} body{font-family:Raleway,system-ui,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100svh} a{color:inherit} :focus-visible{outline:2px solid var(--ceniza);outline-offset:4px} /* ---------- layout ---------- */ .page{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto 1fr auto;padding:var(--pad);gap:0 4vw} .lang{grid-column:2;justify-self:end;display:flex;gap:1rem;font-size:.9rem;position:relative;z-index:2} .lang a{text-decoration:none;opacity:.75;padding:.25rem 0} .lang a:hover{opacity:1} .lang a[aria-current]{opacity:1} .copy{grid-column:1;grid-row:2;align-self:end;max-width:34rem;position:relative;z-index:2} .wordmark{font-family:Cormorant,Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(2.75rem,6vw,5.25rem);line-height:.95;letter-spacing:-.01em} .lede{margin-top:1.5rem;font-size:clamp(1.0625rem,1.3vw,1.1875rem);max-width:30em} .soon{margin-top:.9rem;font-size:1rem;color:rgba(237,237,237,.82)} .mail{display:inline-block;margin-top:1.75rem;font-weight:400;text-decoration:none;border-bottom:1px solid rgba(237,237,237,.5);padding-bottom:3px;transition:border-color .3s} .mail:hover{border-color:var(--naranja)} .foot{grid-column:1 / -1;grid-row:3;margin-top:2.5rem;font-size:.8125rem;color:rgba(237,237,237,.75);position:relative;z-index:2} /* ---------- isotipo sobre la flor de la vida ---------- */ .stage{position:absolute;inset:0;display:grid;place-items:center end;padding:var(--pad);pointer-events:none} .flower{height:min(82svh,58vw);width:auto;overflow:visible;margin-right:2vw} .grid circle{fill:none;stroke:var(--ceniza);stroke-width:1.2;opacity:.2;transition:stroke .5s,opacity .5s} .grid circle.outer{opacity:.3} .grid circle.hot{stroke:var(--naranja);opacity:.85} .mark path{fill:var(--ceniza);stroke:var(--ceniza);stroke-width:1.4;stroke-opacity:0} /* Estado inicial sin dibujar solo si corre el JS: sin JS se ve el logo terminado. */ .js .grid circle,.js .mark path{stroke-dasharray:1;stroke-dashoffset:1} .js .mark path{fill-opacity:0;stroke-opacity:1} /* La secuencia arranca cuando pasa el age gate (clase .go en ). */ .go .grid circle{animation:draw var(--t,1.1s) cubic-bezier(.55,0,.35,1) var(--d,0s) forwards} .go .mark path{animation:draw 2.2s cubic-bezier(.6,0,.3,1) 2.9s forwards,fill 1.1s ease 4.8s forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fill{to{fill-opacity:1;stroke-opacity:0}} /* ---------- age gate ---------- */ .gate{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:var(--pad);background:var(--malva);color:var(--ceniza);display:none;place-items:center;text-align:center} .gate[open]{display:grid} .gate::backdrop{background:var(--malva)} .gate-inner{max-width:26rem} .gate svg{width:56px;height:auto;fill:var(--ceniza);margin:0 auto 2rem;display:block} .gate h2{font-family:Cormorant,Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(2rem,5vw,2.75rem);line-height:1.1} .gate p{margin-top:1rem;color:rgba(237,237,237,.82)} .gate-actions{margin-top:2.25rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap} .gate button{font:inherit;font-weight:400;font-size:1rem;padding:.8rem 1.5rem;border-radius:999px;cursor:pointer;border:1px solid var(--ceniza);transition:background .25s,color .25s,border-color .25s} .gate .yes{background:var(--ceniza);color:var(--carbon)} .gate .yes:hover{background:#fff;border-color:var(--naranja)} .gate .no{background:transparent;color:var(--ceniza)} .gate .no:hover{border-color:var(--naranja)} .gate .denied{display:none} .gate.is-denied .ask{display:none} .gate.is-denied .denied{display:block} /* ---------- mobile ---------- */ @media (max-width:760px){ .page{grid-template-columns:1fr;grid-template-rows:auto auto auto auto} .lang{grid-column:1} .stage{position:relative;inset:auto;grid-row:2;place-items:center;padding:1rem 0 0} .flower{height:auto;width:min(92vw,52svh);margin:0} .copy{grid-row:3;max-width:none;margin-top:1.5rem} .foot{grid-row:4} } @media (prefers-reduced-motion:reduce){ .js .grid circle,.js .mark path{stroke-dashoffset:0} .js .mark path{fill-opacity:1;stroke-opacity:0} .go .grid circle,.go .mark path{animation:none} }