/* ============================================================ ICONA — Edición Diurna / Editorial Concepto alterno: revista cálida sobre crema. Mismos colores + tipografías del brandbook, otra atmósfera. ============================================================ */ /* Fuentes: se cargan en el (preconnect + variables) — ver Layout.astro */ :root{ /* ---- Paleta brandbook ---- */ --ink:#000000; --olive:#3D3D2B; --olive-deep:#2A2A1D; --cream:#EDEEE5; --cream-2:#E5E4D6; --paper:#F4F4ED; --lime:#ADC25C; --rosa:#CF94B1; --teal:#8AC5CF; --rojo:#D74719; --azul-rey:#2740B0; /* color de espacio · El Café */ --accent:var(--rojo); /* ---- Semánticos (claro por defecto) ---- */ --bg:var(--cream); --fg:var(--olive); --fg-dim:color-mix(in srgb, var(--olive) 85%, var(--cream)); --line:color-mix(in srgb, var(--olive) 26%, transparent); /* ---- Tipografía ---- */ --font-display:'Hanken Grotesk', system-ui, sans-serif; --font-tech:'Space Grotesk', system-ui, sans-serif; --font-meta:'Montserrat', system-ui, sans-serif; /* ---- Escala ---- */ --t-mega:clamp(4rem, 15vw, 15rem); --t-h1:clamp(2.6rem, 7vw, 6rem); --t-h2:clamp(2rem, 5vw, 3.8rem); --t-h3:clamp(1.35rem, 3vw, 2.1rem); --t-body:clamp(1.04rem, 1.35vw, 1.28rem); --t-meta:0.74rem; --gutter:clamp(1.25rem, 5vw, 5.5rem); --maxw:1440px; --nav-h:70px; --ease:cubic-bezier(.22,1,.36,1); --motion:1; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem);-webkit-text-size-adjust:100%} body{ font-family:var(--font-display); background:var(--bg);color:var(--fg); font-size:var(--t-body);line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,label,textarea{font-family:inherit;color:inherit} ::selection{background:var(--accent);color:var(--cream)} /* ---- foco de teclado (accesibilidad / detalle) ---- */ a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .chip:has(input:focus-visible) span,.consent:has(input:focus-visible) .box{outline:2px solid var(--accent);outline-offset:3px} /* ---- helpers ---- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{position:relative;padding-block:clamp(4.5rem,10vh,8.5rem)} .eyebrow{font-family:var(--font-meta);font-size:var(--t-meta);font-weight:600;letter-spacing:.3em;text-transform:uppercase} .tech{font-family:var(--font-tech);letter-spacing:-.02em} .meta{font-family:var(--font-meta)} em{font-style:italic} /* ---- color fields ---- */ .f-cream{background:var(--cream);color:var(--olive);--fg:var(--olive);--fg-dim:color-mix(in srgb,var(--olive) 85%,var(--cream));--line:color-mix(in srgb,var(--olive) 26%,transparent)} .f-paper{background:var(--paper);color:var(--olive);--fg:var(--olive);--fg-dim:color-mix(in srgb,var(--olive) 84%,var(--paper));--line:color-mix(in srgb,var(--olive) 22%,transparent)} .f-ink{background:var(--ink);color:var(--cream);--fg:var(--cream);--fg-dim:color-mix(in srgb,var(--cream) 60%,transparent);--line:color-mix(in srgb,var(--cream) 18%,transparent)} .f-olive{background:var(--olive);color:var(--cream);--fg:var(--cream);--fg-dim:color-mix(in srgb,var(--cream) 64%,transparent);--line:color-mix(in srgb,var(--cream) 20%,transparent)} .f-rosa{background:var(--rosa);color:var(--olive-deep);--fg:var(--olive-deep);--fg-dim:color-mix(in srgb,var(--olive-deep) 70%,var(--rosa));--line:color-mix(in srgb,var(--olive-deep) 30%,transparent)} .f-teal{background:var(--teal);color:var(--olive-deep);--fg:var(--olive-deep);--fg-dim:color-mix(in srgb,var(--olive-deep) 70%,var(--teal));--line:color-mix(in srgb,var(--olive-deep) 30%,transparent)} /* ---- reveal ---- */ .reveal{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)} @media (prefers-reduced-motion:no-preference){ html.anim .reveal:not(.in){opacity:0;transform:translateY(calc(30px * var(--motion)))} } .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ============================================================ NAV ============================================================ */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;align-items:center; transition:background .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);color:var(--olive)} /* El efecto frosted va en un ::before para que .nav NO sea containing block de sus hijos position:fixed (el menú móvil). Si se pone en .nav directamente, backdrop-filter rompe el posicionamiento del menú a pantalla completa. */ .nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s var(--ease);background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)} .nav.solid::before{opacity:1} .nav.solid{box-shadow:0 1px 0 var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%} .nav-mark{font-weight:900;letter-spacing:.02em;font-size:1.45rem;line-height:1;display:flex;align-items:center;gap:.5rem} .nav-logo{height:24px;width:auto;display:block} .nav-mark b{color:var(--accent)} .nav-mark .issue{font-family:var(--font-tech);font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);padding-left:.6rem;border-left:1px solid var(--line)} .nav-links{display:flex;gap:clamp(1rem,2.2vw,2.2rem);align-items:center} .nav-links a{font-family:var(--font-meta);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;position:relative;padding-block:4px;opacity:.78;transition:opacity .25s var(--ease)} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--accent);transition:width .3s var(--ease)} .nav-links a:hover{opacity:1}.nav-links a:hover::after{width:100%} .nav-links a.active{opacity:1}.nav-links a.active::after{width:100%} .nav-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:var(--cream)!important;padding:.6rem 1.1rem;border-radius:999px;font-weight:700;letter-spacing:.04em;opacity:1!important;font-family:var(--font-meta);font-size:.72rem;text-transform:uppercase;transition:transform .25s var(--ease),background .25s var(--ease)} .nav-cta::after{display:none} .nav-cta:hover{transform:translateY(-2px);background:var(--accent);color:var(--cream)!important} .nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px} .nav-burger span{width:25px;height:2px;background:currentColor;transition:.3s var(--ease)} @media(max-width:880px){ .nav-links{position:fixed;inset:var(--nav-h) 0 0 0;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.7rem;padding:2.5rem var(--gutter) max(2.5rem,env(safe-area-inset-bottom));background:var(--cream);transform:translateY(-110%);transition:transform .42s var(--ease);overflow-y:auto} .nav-links.open{transform:none}.nav-links a{font-size:1.05rem;opacity:1} .nav-burger{display:flex} body.menu-open{overflow:hidden} .nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.open .nav-burger span:nth-child(2){opacity:0} .nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ============================================================ HERO — portada de revista ============================================================ */ .hero{min-height:100svh;position:relative;display:flex;flex-direction:column;padding-top:var(--nav-h);overflow:hidden} .hero .wrap{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;flex:1} /* dateline strip */ .hero-dateline{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:clamp(1rem,2.4vh,1.8rem);border-bottom:1px solid var(--line);font-family:var(--font-tech);font-size:.74rem;letter-spacing:.04em;color:var(--fg-dim);flex-wrap:wrap} .hero-dateline .star{color:var(--accent)} .hero-dateline--intro{opacity:1} @media (prefers-reduced-motion:no-preference){html.anim .hero-dateline--intro{animation:fadein 1.1s var(--ease) .25s both}} @keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .hero-stage{flex:1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(1.5rem,4vh,3rem)} .hero-left{position:relative;z-index:2} .hero-kicker{display:inline-flex;align-items:center;gap:.7rem;color:var(--accent);margin-bottom:clamp(1rem,2vw,1.6rem)} .hero-kicker .rule{width:46px;height:1.5px;background:var(--accent)} .hero-wordmark{font-weight:900;line-height:.8;letter-spacing:-.03em;font-size:var(--t-mega);display:flex;flex-wrap:wrap} .hero-logo{margin:0;line-height:0} .hero-logo img{width:min(600px,95%);height:auto;display:block} @media (prefers-reduced-motion:no-preference){html.anim .hero-logo{animation:logo-in 1s var(--ease) .15s both}} @keyframes logo-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero-wordmark .ch{display:inline-block;transition:transform 1s var(--ease),opacity 1s var(--ease)} .hero-wordmark .ch.accent{color:var(--accent)} @media (prefers-reduced-motion:no-preference){html.anim .hero-wordmark:not(.go) .ch{transform:translateY(118%);opacity:0}} .hero-wordmark .ch:nth-child(2){transition-delay:.06s} .hero-wordmark .ch:nth-child(3){transition-delay:.12s} .hero-wordmark .ch:nth-child(4){transition-delay:.18s} .hero-wordmark .ch:nth-child(5){transition-delay:.24s} .hero-tag{font-family:var(--font-tech);font-weight:500;font-size:clamp(1.2rem,3vw,2.4rem);letter-spacing:-.01em;margin-top:clamp(1.1rem,2vw,1.8rem);max-width:18ch;line-height:1.18} .hero-tag span{transition:opacity .7s var(--ease),transform .7s var(--ease)} @media (prefers-reduced-motion:no-preference){html.anim .hero-tag:not(.go) span{opacity:0;transform:translateY(16px)}} .hero-tag .w1{color:var(--rosa)}.hero-tag .w2{color:var(--teal)}.hero-tag .w3{color:var(--accent)} .hero-tag.go span:nth-child(1){transition-delay:.5s}.hero-tag.go span:nth-child(2){transition-delay:.62s}.hero-tag.go span:nth-child(3){transition-delay:.74s} .hero-actions{display:flex;align-items:center;gap:1.4rem;margin-top:clamp(1.6rem,3vw,2.6rem);flex-wrap:wrap} /* arch portrait on the right */ .hero-arch{position:relative;width:clamp(220px,30vw,420px);aspect-ratio:3/4.2;border:1.5px solid var(--olive);border-radius:999px 999px 22px 22px;overflow:hidden;background:var(--cream-2)} .hero-arch .ph{border-radius:inherit} .hero-arch-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} .hero-illo{position:absolute;z-index:3; filter: drop-shadow(0 0 2.5px var(--cream)) drop-shadow(2.5px 2.5px 2px var(--cream)) drop-shadow(-2.5px -2.5px 2px var(--cream)) drop-shadow(2.5px -2.5px 2px var(--cream)) drop-shadow(-2.5px 2.5px 2px var(--cream)) drop-shadow(0 0 1.5px var(--cream)) drop-shadow(5px 9px 6px rgba(0,0,0,.3))} .hero-illo.disco{top:4%;right:-26px;width:clamp(74px,10vw,116px);color:var(--teal);animation:floaty 7s ease-in-out infinite} .hero-illo.martini{bottom:-18px;left:-28px;width:clamp(66px,9vw,104px);color:var(--rojo);animation:floaty 6s ease-in-out infinite reverse} @keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}} .scrollcue{display:flex;align-items:center;gap:.7rem;font-family:var(--font-meta);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim)} .scrollcue .bar{position:relative;width:44px;height:2px;background:var(--line);overflow:hidden} .scrollcue .bar::after{content:"";position:absolute;inset:0;width:40%;background:var(--accent);animation:cue 2.4s var(--ease) infinite} @keyframes cue{0%{transform:translateX(-110%)}60%,100%{transform:translateX(260%)}} @media(max-width:820px){.hero-stage{grid-template-columns:1fr}.hero-arch{display:none}} .btn{display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;border:0;background:var(--ink);color:var(--cream);font-family:var(--font-meta);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.8rem;padding:1rem 1.6rem;border-radius:999px;transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)} .btn svg{width:18px;height:18px} .btn:hover{transform:translateY(-2px);background:var(--accent);box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 34%,transparent)} .btn:active{transform:scale(.97)} .btn:disabled{opacity:.4;cursor:not-allowed} .btn:disabled:hover{transform:none;background:var(--ink);box-shadow:none} /* estado de carga (spinner) al enviar */ .btn.loading{color:transparent !important;pointer-events:none;position:relative;opacity:1} .btn.loading svg{opacity:0} .btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px; border:2px solid color-mix(in srgb,var(--cream) 35%,transparent);border-top-color:var(--cream);border-radius:50%; animation:btn-spin .7s linear infinite} @keyframes btn-spin{to{transform:rotate(360deg)}} /* destello (gloss) deslizante en el botón del hero */ .hero-actions .btn{position:relative;overflow:hidden} .hero-actions .btn::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.5) 50%,transparent 75%); transform:translateX(-150%)} @media (prefers-reduced-motion:no-preference){ .hero-actions .btn:hover::after{animation:btn-shine 1.9s ease 1} } @keyframes btn-shine{to{transform:translateX(150%)}} .btn--ghost{background:transparent;color:currentColor;border:1.5px solid var(--line)} .btn--ghost:hover{background:transparent;border-color:currentColor;box-shadow:none;transform:translateY(-2px)} .link-underline{font-family:var(--font-meta);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem;border-bottom:1.5px solid var(--accent);padding-bottom:3px} .link-underline svg{width:16px;height:16px} /* ============================================================ INTERLUDIO (frase de marca) ============================================================ */ .statement{position:relative;overflow:hidden;text-align:center;padding-block:clamp(3.4rem,8vw,6.5rem)} .statement .wrap{position:relative;z-index:1} .statement-kicker{display:inline-flex;align-items:center;justify-content:center;gap:clamp(.7rem,1.6vw,1.2rem); font-family:var(--font-meta);font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim)} .statement-kicker i{color:var(--accent);font-style:normal;font-size:.8em} .statement-line{font-size:clamp(2.3rem,7vw,5.6rem);font-weight:900;line-height:.98;letter-spacing:-.03em; margin-top:clamp(1.1rem,2.4vw,1.8rem);text-wrap:balance} .statement-line em{font-style:italic;color:var(--accent)} .statement-foot{font-family:var(--font-tech);font-size:clamp(.85rem,1.4vw,1.05rem);letter-spacing:.02em; color:var(--fg-dim);margin-top:clamp(1.2rem,2.4vw,1.8rem)} /* faint oversized brand glyph behind */ .statement::before{content:"✦";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-size:clamp(16rem,40vw,34rem);line-height:1;color:color-mix(in srgb,var(--cream) 5%,transparent); z-index:0;pointer-events:none} @media(max-width:640px){ .band{grid-template-columns:1fr 1fr} .band-seg:nth-child(3),.band-seg:nth-child(4){border-top:1.5px solid var(--ink)} .band-seg:nth-child(3){border-left:0} } /* ============================================================ NOSOTROS — apertura editorial con capitular ============================================================ */ .lede-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center} .lede-side .eyebrow{color:var(--accent)} .lede-side h2{font-size:var(--t-h2);font-weight:900;line-height:.96;letter-spacing:-.025em;margin-top:1rem;text-wrap:balance} .lede-side h2 em{font-style:italic;color:var(--accent)} .lede-body{font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.55;max-width:52ch} .lede-body p{margin-bottom:1.2rem} .lede-body p strong{font-weight:700} .lede-body .dropcap::first-letter{font-weight:900;font-size:3.4em;line-height:.72;float:left;padding:.06em .12em 0 0;color:var(--accent)} .lede-meta{display:flex;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)} .lede-meta div{display:flex;flex-direction:column;gap:.2rem} .lede-meta .k{font-family:var(--font-meta);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)} .lede-meta .v{font-family:var(--font-tech);font-size:1.05rem} @media(max-width:860px){.lede-grid{grid-template-columns:1fr;gap:2rem}.lede-side{position:static}} /* ============================================================ ESPACIOS — capítulos (sin cards) ============================================================ */ .chapters-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem);padding-bottom:1.4rem;border-bottom:1px solid var(--line)} .chapters-head h2{font-size:clamp(2.2rem,5.6vw,4.8rem);font-weight:900;line-height:.94;letter-spacing:-.03em} .chapters-head .meta{max-width:32ch;color:var(--fg-dim);font-size:.95rem} .chapter{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,3rem);padding-block:clamp(2.2rem,5vw,4rem);border-bottom:1px solid var(--line);align-items:start} .chapter:last-child{border-bottom:0} .chapter-no{font-family:var(--font-tech);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--accent);line-height:1;padding-top:.4rem} .chapter-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,4rem);align-items:start} .chapter:nth-child(even) .chapter-media{order:2} .chapter-media{position:relative;aspect-ratio:5/4;border-radius:18px;overflow:hidden;border:1px solid var(--line)} .chapter-img{width:100%;height:100%;object-fit:cover;display:block} .chapter-media .ph,.chapter-media .chapter-img{transition:transform .9s var(--ease)} .chapter:hover .chapter-media .ph,.chapter:hover .chapter-media .chapter-img{transform:scale(1.05)} /* ---- Café · efecto blur misterioso (se enfoca al pasar el cursor) ---- */ .chapter-media--mystery{cursor:pointer} .chapter-media--mystery .ph,.chapter-media--mystery .chapter-img{filter:blur(14px) brightness(.86);transform:scale(1.1); transition:filter .6s var(--ease),transform .6s var(--ease)} .chapter-media--mystery .mystery-veil{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--olive) 32%,transparent);transition:opacity .5s var(--ease);pointer-events:none} .chapter-media--mystery .mystery-hint{display:inline-flex;align-items:center;gap:.55rem; font-family:var(--font-meta);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream); text-shadow:0 2px 10px rgba(0,0,0,.55);text-align:center;padding:1.2rem} .chapter-media--mystery .mystery-hint svg{width:16px;height:16px;color:var(--lime)} /* revelar (enfocar) */ .chapter-media--mystery:hover .ph,.chapter-media--mystery:hover .chapter-img, .chapter-media--mystery:focus-visible .ph,.chapter-media--mystery:focus-visible .chapter-img, .chapter-media--mystery.open .ph,.chapter-media--mystery.open .chapter-img{filter:blur(0) brightness(1);transform:scale(1)} .chapter-media--mystery:hover .mystery-veil, .chapter-media--mystery:focus-visible .mystery-veil, .chapter-media--mystery.open .mystery-veil{opacity:0} .chapter-media--mystery:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .chapter-media--mystery .ph,.chapter-media--mystery .chapter-img,.chapter-media--mystery .mystery-veil{transition-duration:.25s} .chapter-media--mystery .ph,.chapter-media--mystery .chapter-img{transform:none}} .chapter-kicker{font-family:var(--font-meta);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .chapter-title{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:900;line-height:1.0;letter-spacing:-.025em;margin:.7rem 0 1rem;text-wrap:balance} .chapter-lead{color:var(--fg-dim);font-size:1.05rem;margin-bottom:1.4rem;max-width:42ch} .chapter-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem} .chapter-tags span{font-family:var(--font-meta);font-size:.74rem;letter-spacing:.02em;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px} .chapter-foot{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-meta);font-size:.8rem;letter-spacing:.03em;color:var(--fg-dim)} .chapter-foot .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.5} .chapter-foot .dot--ready{background:var(--lime);opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 26%,transparent)} .chapter--soon .chapter-media .ph,.chapter--soon .chapter-media .chapter-img{filter:grayscale(1) brightness(.95)} .chapter--soon .chapter-title{color:var(--fg-dim)} /* ---- El Café · color de espacio (azul rey) ---- */ .chapter--cafe .chapter-no, .chapter--cafe .chapter-kicker{color:var(--azul-rey)} .chapter--cafe .chapter-foot .dot--ready{background:var(--azul-rey);box-shadow:0 0 0 4px color-mix(in srgb,var(--azul-rey) 26%,transparent)} .chapter--cafe .chapter-media--mystery .mystery-veil{background:color-mix(in srgb,var(--azul-rey) 20%,transparent)} .chapter--cafe .chapter-media--mystery .mystery-hint svg{color:var(--azul-rey)} .chapter--cafe .chapter-media--mystery:focus-visible{outline-color:var(--azul-rey)} @media(max-width:820px){ .chapter{grid-template-columns:1fr;gap:.8rem} .chapter-no{padding-top:0} .chapter-inner{grid-template-columns:1fr;gap:1.4rem} .chapter:nth-child(even) .chapter-media{order:0} .chapter-media{aspect-ratio:16/10} } /* ============================================================ CASONA — contact sheet / postales ============================================================ */ .casona-head{max-width:48ch;margin-bottom:clamp(2.4rem,5vw,3.4rem)} .casona-head .eyebrow{color:var(--accent)} .casona-head h2{font-size:clamp(2.2rem,5.6vw,4.8rem);font-weight:900;line-height:.94;letter-spacing:-.03em;margin:1rem 0 1.1rem;text-wrap:balance} .casona-head h2 em{font-style:italic;color:var(--accent)} .casona-head p{color:var(--fg-dim);font-size:var(--t-body);max-width:52ch} /* galería tipo scrapbook — adaptable a cualquier cantidad de fotos */ .postales{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.6vw,2.4rem);align-items:start} .postal{position:relative;background:var(--cream);padding:.7rem .7rem 2.6rem;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 30px color-mix(in srgb,var(--olive) 16%,transparent);transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .postal .ph{aspect-ratio:4/3;border-radius:3px} .postal-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block} .postal figcaption{position:absolute;left:1rem;bottom:.85rem;font-family:var(--font-tech);font-size:.72rem;letter-spacing:.02em;color:var(--fg-dim)} .postal:hover{transform:translateY(-6px) rotate(0deg)!important;box-shadow:0 22px 50px color-mix(in srgb,var(--olive) 26%,transparent);z-index:3} /* inclinaciones y escalonado alternados (cualquier N) */ .postal:nth-child(odd){rotate:-1.3deg} .postal:nth-child(even){rotate:1.5deg;margin-top:clamp(1rem,3vw,2.2rem)} .postal:nth-child(4n+3){rotate:1.1deg} .postal:nth-child(4n){rotate:-1deg} /* si el total es impar, la última ocupa el ancho completo y se centra */ .postal:last-child:nth-child(odd){grid-column:1/-1;max-width:62%;margin-inline:auto;margin-top:0} .postal .stamp{position:absolute;top:-16px;right:14px;width:66px;height:66px;border-radius:50%;background:var(--cream);display:grid;place-items:center;isolation:isolate;overflow:hidden;rotate:7deg;box-shadow:0 0 0 3px var(--accent),0 0 0 8px var(--cream),0 9px 20px rgba(0,0,0,.28)} .postal .stamp img{width:72%;height:72%;object-fit:contain;mix-blend-mode:multiply} @media(max-width:760px){.postales{grid-template-columns:1fr}.postal{rotate:0deg!important;margin-top:0!important;grid-column:auto!important;max-width:none!important}} /* ============================================================ COMUNIDAD — panel de manifiesto ============================================================ */ .comunidad{position:relative;overflow:hidden;text-align:center} .comunidad .eyebrow{color:var(--accent)} .manifesto{font-size:clamp(2rem,6.2vw,5.2rem);font-weight:900;line-height:1.0;letter-spacing:-.03em;max-width:18ch;margin:1.6rem auto 0;text-wrap:balance} .manifesto .hl{display:inline-block} .manifesto .c-rosa{color:var(--rosa)}.manifesto .c-teal{color:var(--teal)}.manifesto .c-lime{color:var(--lime)}.manifesto .c-rojo{color:var(--rojo)} .comunidad-sub{margin:clamp(1.8rem,4vw,2.8rem) auto 0;max-width:56ch;color:var(--fg-dim);font-size:var(--t-body)} /* ilustraciones de marca — en las esquinas (desktop) */ .comunidad .wrap{position:relative;z-index:1} .comunidad-illus{position:absolute;inset:0;z-index:0;pointer-events:none} .comunidad-illus .illo{position:absolute;width:clamp(110px,11.5vw,174px);margin:0;transform-origin:50% 85%;opacity:.6;pointer-events:auto;transition:opacity .35s var(--ease)} .comunidad-illus .illo:hover{opacity:1} .comunidad-illus .illo img{width:100%;height:auto;display:block} /* destello (shine) al pasar el mouse — barrido blanco sobre la forma del arte */ .comunidad-illus .illo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; -webkit-mask:var(--art) center/contain no-repeat; mask:var(--art) center/contain no-repeat; background:linear-gradient(-75deg,transparent 38%,rgba(255,255,255,.92) 50%,transparent 62%); background-size:250% 100%;background-position:160% 0} @media (prefers-reduced-motion:no-preference){ .comunidad-illus .illo:hover::after{opacity:1;animation:shine 2.1s ease 2} } @keyframes shine{ from{background-position:160% 0} to{background-position:-60% 0} } .illo--tl{top:clamp(.5rem,2.5vh,1.8rem);left:clamp(.4rem,2vw,2rem)} .illo--tr{top:clamp(.5rem,2.5vh,1.8rem);right:clamp(.4rem,2vw,2rem)} .illo--bl{bottom:clamp(.5rem,2.5vh,1.8rem);left:clamp(.4rem,2vw,2rem)} .illo--br{bottom:clamp(.5rem,2.5vh,1.8rem);right:clamp(.4rem,2vw,2rem)} /* bailecito sutil al entrar en pantalla (cada una con su ritmo) */ @media (prefers-reduced-motion:no-preference){ .comunidad-illus.in .illo--tl{animation:illo-dance-1 3.2s var(--ease) infinite .05s} .comunidad-illus.in .illo--tr{animation:illo-dance-2 3.8s var(--ease) infinite .25s} .comunidad-illus.in .illo--bl{animation:illo-dance-3 3.5s var(--ease) infinite .15s} .comunidad-illus.in .illo--br{animation:illo-dance-1 3.7s var(--ease) infinite .35s} } /* móvil: 2x2 debajo del texto */ @media(max-width:820px){ .comunidad-illus{position:static;inset:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,6vw,2.5rem);justify-items:center;align-items:center;margin:clamp(2.5rem,7vw,3.5rem) auto 0;max-width:440px} .comunidad-illus .illo{position:static!important;width:clamp(110px,32vw,160px)} } @keyframes illo-dance-1{ 0%,100%{transform:translateY(0) rotate(-3deg)} 30%{transform:translateY(-7px) rotate(2deg)} 60%{transform:translateY(-2px) rotate(3deg)} 80%{transform:translateY(-5px) rotate(-1deg)} } @keyframes illo-dance-2{ 0%,100%{transform:translateY(0) rotate(2deg)} 25%{transform:translateY(-5px) rotate(-2deg)} 55%{transform:translateY(-9px) rotate(1deg)} 80%{transform:translateY(-3px) rotate(-3deg)} } @keyframes illo-dance-3{ 0%,100%{transform:translateY(0) rotate(-2deg)} 35%{transform:translateY(-6px) rotate(3deg)} 65%{transform:translateY(-2px) rotate(-2deg)} 85%{transform:translateY(-7px) rotate(1deg)} } /* ============================================================ REGISTRO ============================================================ */ .registro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,5.5rem);align-items:center} @media(max-width:900px){.registro-grid{grid-template-columns:1fr;gap:2.4rem}} .registro-lead .eyebrow{color:var(--accent)} .registro-lead h2{font-size:clamp(2.2rem,5.4vw,4.6rem);font-weight:900;line-height:.94;letter-spacing:-.03em;margin-top:1rem;text-wrap:balance} .registro-lead h2 em{font-style:italic} .registro-lead p{margin-top:1.3rem;color:var(--fg-dim);font-size:var(--t-body);max-width:42ch} .registro-points{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem} .registro-points li{display:flex;gap:.8rem;align-items:center;list-style:none;font-family:var(--font-meta);font-size:.9rem;letter-spacing:.02em} .registro-points svg{width:20px;height:20px;color:var(--accent);flex-shrink:0} .form{background:color-mix(in srgb,var(--cream) 60%,transparent);border:1px solid var(--line);border-radius:22px;padding:clamp(1.6rem,3vw,2.6rem)} .field{margin-bottom:1.1rem;position:relative} .field label{display:block;font-family:var(--font-meta);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:.5rem} .field input{width:100%;background:color-mix(in srgb,var(--cream) 70%,#fff);border:1.5px solid var(--line);border-radius:11px;padding:.92rem 1rem;font-size:1rem;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)} .field input::placeholder{color:color-mix(in srgb,var(--olive) 40%,transparent)} .field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)} .field input.err{border-color:var(--rojo)} .field-msg{display:block;margin-top:.45rem;font-family:var(--font-meta);font-size:.68rem;letter-spacing:.02em;color:var(--rojo);min-height:1em;line-height:1.3} .consent + .field-msg{margin-top:.6rem} .field .hint{position:absolute;right:0;top:0;font-family:var(--font-meta);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)} .chips{display:flex;flex-wrap:wrap;gap:.6rem} .chip{position:relative;cursor:pointer} .chip input{position:absolute;opacity:0;inset:0;cursor:pointer} .chip span{display:inline-flex;align-items:center;padding:.55rem 1rem;border-radius:999px;border:1.5px solid var(--line);font-family:var(--font-meta);font-size:.78rem;font-weight:500;transition:.25s var(--ease)} .chip input:checked + span{background:var(--ink);color:var(--cream);border-color:var(--ink);font-weight:700} .chip:hover span{border-color:currentColor;transform:translateY(-1px)} .chip input:checked + span{box-shadow:0 6px 16px color-mix(in srgb,var(--ink) 22%,transparent)} .consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.3rem;cursor:pointer} .consent input{position:absolute;opacity:0} .consent .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);flex-shrink:0;display:grid;place-items:center;transition:.25s var(--ease);margin-top:1px} .consent .box svg{width:14px;height:14px;opacity:0;transform:scale(.6);transition:.25s var(--ease);color:var(--cream)} .consent input:checked + .box{background:var(--ink);border-color:var(--ink)} .consent input:checked + .box svg{opacity:1;transform:none} .consent small{font-family:var(--font-meta);font-size:.76rem;color:var(--fg-dim);line-height:1.5} .consent a{text-decoration:underline;text-underline-offset:2px} .form .btn{width:100%;justify-content:center;margin-top:1.4rem} .form-reassure{font-family:var(--font-meta);font-size:.72rem;color:var(--fg-dim);text-align:center;margin-top:.9rem} .form-error{color:var(--rojo);font-family:var(--font-meta);font-size:.78rem;margin-top:.6rem;min-height:1.1em;text-align:center} .form-success{display:none;text-align:center;padding:clamp(1rem,3vw,2rem) 0} .form.done .form-body{display:none}.form.done .form-success{display:block} .success-ico{width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--olive-deep);display:grid;place-items:center;margin:0 auto 1.4rem;animation:pop .5s var(--ease)} .success-ico svg{width:36px;height:36px} @keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} .form-success h3{font-size:var(--t-h3);font-weight:800;margin-bottom:.6rem} .form-success p{color:var(--fg-dim);max-width:34ch;margin-inline:auto} /* ============================================================ UBICACIÓN ============================================================ */ .ubica-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:stretch} @media(max-width:860px){.ubica-grid{grid-template-columns:1fr}} .ubica-info .eyebrow{color:var(--accent)} .ubica-info h2{font-size:var(--t-h2);font-weight:900;line-height:.96;letter-spacing:-.025em;margin:1rem 0 1.4rem} .ubica-row{display:flex;gap:.9rem;padding-block:1.1rem;border-top:1px solid var(--line);align-items:flex-start} .ubica-row:last-of-type{border-bottom:1px solid var(--line)} .ubica-row svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;margin-top:3px} .ubica-row .k{font-family:var(--font-meta);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:.3rem} .ubica-row .v{font-size:1.02rem} .ubica-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem} .ubica-map{position:relative;min-height:360px;border-radius:18px;overflow:hidden;border:1px solid var(--line)} .ubica-iframe{width:100%;height:100%;min-height:360px;border:0;display:block;pointer-events:none} .map-ph{position:absolute;inset:0;background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb,var(--teal) 36%,var(--cream)), var(--cream))} .map-ph .grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(color-mix(in srgb,var(--olive) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--olive) 12%,transparent) 1px,transparent 1px);background-size:40px 40px} .map-ph .pin{position:absolute;top:46%;left:52%;transform:translate(-50%,-100%);color:var(--accent);width:42px;height:42px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))} .map-ph .pin-pulse{position:absolute;top:46%;left:52%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--accent) 40%,transparent);animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}100%{box-shadow:0 0 0 26px transparent}} .map-label{position:absolute;bottom:14px;left:14px;font-family:var(--font-meta);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);background:color-mix(in srgb,#fff 60%,transparent);padding:.4rem .6rem;border-radius:6px} /* ============================================================ FOOTER ============================================================ */ .footer{padding-block:clamp(3.5rem,6vw,5.5rem) 2.4rem} .footer-top{display:flex;justify-content:space-between;gap:clamp(2rem,6vw,5rem);align-items:flex-start} @media(max-width:760px){.footer-top{flex-direction:column;gap:2.5rem}.footer-nav{flex-wrap:wrap;justify-content:flex-start}} .footer-mark{font-weight:900;font-size:clamp(3rem,9vw,7rem);line-height:.8;letter-spacing:-.03em} .footer-mark b{color:var(--accent)} .footer-logo{width:min(280px,62%);height:auto;display:block} .footer-tag{margin-top:1rem;font-family:var(--font-tech);font-size:.9rem;letter-spacing:.02em;color:var(--fg-dim)} .footer-nav{display:flex;gap:clamp(1.8rem,4vw,4rem);flex-wrap:nowrap;justify-content:flex-end} .footer-col h4{font-family:var(--font-meta);font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:1rem} .footer-col a{display:block;font-family:var(--font-meta);font-size:.9rem;margin-bottom:.7rem;opacity:.85;transition:opacity .2s,color .2s} .footer-col a:hover{opacity:1;color:var(--accent)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,5rem);padding-top:1.6rem;border-top:1px solid var(--line);font-family:var(--font-meta);font-size:.74rem;color:var(--fg-dim);letter-spacing:.02em} .footer-credit a{color:var(--accent);font-weight:600;transition:opacity .2s var(--ease)} .footer-credit a:hover{opacity:.75;text-decoration:underline;text-underline-offset:2px} .footer-socials{display:flex;gap:.7rem} .footer-socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.25s var(--ease)} .footer-socials a:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)} .footer-socials svg{width:18px;height:18px} /* ============================================================ PHOTO PLACEHOLDER ============================================================ */ .ph{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden; background:repeating-linear-gradient(135deg,var(--cream-2) 0 14px,color-mix(in srgb,var(--olive) 14%,var(--cream-2)) 14px 28px)} .ph::after{content:attr(data-label);position:absolute;bottom:12px;left:12px;font-family:var(--font-meta);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);background:color-mix(in srgb,#fff 55%,transparent);padding:.4rem .6rem;border-radius:6px} .ph .ph-ico{width:30%;max-width:120px;opacity:.45;color:var(--olive)} .f-ink .ph,.f-olive .ph{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--olive) 70%,#000) 0 14px,color-mix(in srgb,var(--olive) 50%,#000) 14px 28px)} .f-ink .ph::after,.f-olive .ph::after{color:var(--cream);background:color-mix(in srgb,#000 40%,transparent)} .f-ink .ph .ph-ico,.f-olive .ph .ph-ico{color:var(--cream)} /* ---- placeholder banner ---- */ .ph-note{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:55;font-family:var(--font-meta);font-size:.66rem;letter-spacing:.08em;background:var(--ink);color:var(--cream);border:1px solid var(--line);padding:.5rem .9rem;border-radius:999px;display:flex;gap:.6rem;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3)} .ph-note b{color:var(--lime)} .ph-note button{background:none;border:0;cursor:pointer;color:color-mix(in srgb,var(--cream) 60%,transparent);font-size:1rem;line-height:1} @media(max-width:560px){.ph-note{display:none}} /* ---- botón volver arriba ---- */ .to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:57; width:48px;height:48px;border-radius:50%;border:0;cursor:pointer; background:var(--ink);color:var(--cream);display:grid;place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.28); opacity:0;visibility:hidden;transform:translateY(14px) scale(.92); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .25s var(--ease)} .to-top.show{opacity:.6;visibility:visible;transform:none} .to-top.show:hover,.to-top.show:focus-visible{opacity:1} .to-top:hover{background:var(--accent);transform:translateY(-3px)} .to-top:active{transform:scale(.94)} .to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .to-top svg{width:22px;height:22px} @media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s linear,visibility .2s}} /* version switch link */ .vswitch{position:fixed;right:14px;bottom:14px;z-index:55;font-family:var(--font-meta);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;background:var(--olive);color:var(--cream);padding:.55rem .9rem;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.25);transition:.25s var(--ease);display:inline-flex;gap:.5rem;align-items:center} .vswitch:hover{background:var(--accent);transform:translateY(-2px)} .vswitch svg{width:14px;height:14px} @media(max-width:560px){.vswitch{bottom:14px;right:14px}} /* ============================================================ LIGHTBOX — galería de la casona ============================================================ */ .postal{cursor:zoom-in} .postal .ph{cursor:zoom-in} .postal-zoom{position:absolute;top:.9rem;left:.9rem;z-index:2;width:36px;height:36px;border-radius:50%; background:color-mix(in srgb,var(--ink) 78%,transparent);color:var(--cream);display:grid;place-items:center; opacity:0;transform:scale(.85);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none} .postal-zoom svg{width:17px;height:17px} .postal:hover .postal-zoom,.postal:focus-visible .postal-zoom{opacity:1;transform:scale(1)} .postal:focus-visible{outline:2px solid var(--accent);outline-offset:4px} .lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center; background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:clamp(1rem,4vw,3rem)} .lightbox.open{display:grid;animation:lb-fade .3s var(--ease)} @keyframes lb-fade{from{opacity:0}to{opacity:1}} body.lb-open{overflow:hidden} .lb-stage{position:relative;max-width:min(92vw,1100px);width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem} .lb-media{width:100%;max-height:78vh;border-radius:10px;overflow:hidden;background:var(--olive-deep); box-shadow:0 30px 80px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center} .lb-media img{width:100%;max-height:78vh;object-fit:contain;display:block} .lb-media .ph{width:100%;aspect-ratio:4/3;max-height:78vh} .lb-cap{font-family:var(--font-tech);font-size:.84rem;letter-spacing:.02em;color:color-mix(in srgb,var(--cream) 78%,transparent);text-align:center} .lb-count{position:fixed;top:clamp(1rem,3vw,1.8rem);left:50%;transform:translateX(-50%); font-family:var(--font-meta);font-size:.74rem;letter-spacing:.14em;color:color-mix(in srgb,var(--cream) 70%,transparent)} .lb-btn{position:fixed;z-index:2;border:0;cursor:pointer;background:color-mix(in srgb,var(--cream) 12%,transparent); color:var(--cream);width:clamp(44px,5vw,54px);height:clamp(44px,5vw,54px);border-radius:50%;display:grid;place-items:center; transition:background .22s var(--ease),transform .22s var(--ease)} .lb-btn svg{width:24px;height:24px} .lb-btn:hover{background:var(--accent);transform:scale(1.06)} .lb-btn:active{transform:scale(.94)} .lb-close{top:clamp(1rem,3vw,1.8rem);right:clamp(1rem,3vw,1.8rem)} .lb-prev{left:clamp(.8rem,3vw,2rem);top:50%;transform:translateY(-50%)} .lb-next{right:clamp(.8rem,3vw,2rem);top:50%;transform:translateY(-50%)} .lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)} .lb-prev:active,.lb-next:active{transform:translateY(-50%) scale(.94)} @media (prefers-reduced-motion:reduce){.lightbox.open{animation:none}.lb-btn,.lb-btn:hover{transition:none}} @media(max-width:560px){ .lb-prev{left:.6rem}.lb-next{right:.6rem} .lb-prev,.lb-next{top:auto;bottom:1.2rem;transform:none} .lb-prev:hover,.lb-next:hover,.lb-prev:active,.lb-next:active{transform:scale(1.04)} } /* ============================================================ PÁGINAS LEGALES (aviso de privacidad / términos) ============================================================ */ .legal-nav{position:sticky;top:0;z-index:60;height:var(--nav-h);display:flex;align-items:center; background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .legal-nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%} .legal-back{font-family:var(--font-meta);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);transition:color .2s var(--ease)} .legal-back:hover{color:var(--accent)} .legal{background:var(--cream);color:var(--olive);padding-block:clamp(2.5rem,6vw,5rem) clamp(3.5rem,8vw,6rem);min-height:70vh} .legal-wrap{max-width:760px;margin-inline:auto} .legal-kicker{color:var(--accent)} .legal h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:900;line-height:1.02;letter-spacing:-.025em;margin:.6rem 0 .4rem} .legal-updated{font-family:var(--font-meta);font-size:.78rem;color:var(--fg-dim);margin-bottom:2rem} .legal-body{font-size:1.02rem;line-height:1.7} .legal-body h2{font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:800;letter-spacing:-.01em;margin:2.2rem 0 .7rem} .legal-body p{margin-bottom:1rem;color:color-mix(in srgb,var(--olive) 92%,var(--cream))} .legal-body ul{margin:0 0 1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem} .legal-body li{padding-left:.2rem} .legal-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .legal-body strong{font-weight:700} .legal-body code{font-family:var(--font-tech);font-size:.92em;background:color-mix(in srgb,var(--olive) 12%,transparent);padding:.05em .35em;border-radius:4px} .legal-note{background:color-mix(in srgb,var(--accent) 10%,var(--cream));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:12px;padding:1rem 1.2rem;font-size:.9rem;line-height:1.6;margin-bottom:2.2rem} .legal-contact{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:1.02rem} .legal-foot{background:var(--ink);color:var(--cream)} .legal-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:2rem; font-family:var(--font-meta);font-size:.76rem;color:color-mix(in srgb,var(--cream) 65%,transparent);letter-spacing:.02em} .legal-foot-links{display:flex;gap:1.4rem;flex-wrap:wrap} .legal-foot-links a{transition:color .2s var(--ease)} .legal-foot-links a:hover{color:var(--accent)} /* ---- botones de compartir ---- */ .share-btn{margin-top:1.6rem} .footer-share{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;background:none;border:0;cursor:pointer; font-family:var(--font-meta);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--fg-dim);transition:color .2s var(--ease)} .footer-share:hover{color:var(--accent)} .footer-share svg{width:16px;height:16px} /* ============================================================ 404 ============================================================ */ .error404{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--nav-h) + 1rem) var(--gutter) 3rem} .e404-wrap{max-width:560px} .e404-logo{display:inline-block;margin-bottom:clamp(2rem,5vw,3rem)} .e404-logo img{height:30px;width:auto} .e404-kicker{color:var(--accent)} .e404-title{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:900;line-height:.98;letter-spacing:-.03em;margin:.8rem 0 1.1rem;text-wrap:balance} .e404-title em{font-style:italic;color:var(--accent)} .e404-text{color:var(--fg-dim);font-size:var(--t-body);max-width:44ch;margin:0 auto 2rem} .error404 .btn{margin-inline:auto}