/* ===== SHARED STYLES — Diego García ===== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Josefin+Sans:wght@100;300;400&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --cream:#f5f0e8; --dark:#1a1410; --gold:#c8a96e; --gold-light:#e8d5a3; --text:#2c2418; } html{scroll-behavior:smooth} body{background:var(--dark);color:var(--cream);font-family:'Josefin Sans',sans-serif;overflow-x:hidden} /* Subpages carry data-subpage on . CSS hides them immediately — no white flash ever. shared.js reveals them: instant if normal nav, 1.5s fade if from home. */ body[data-subpage]{opacity:0} /* ─── LANG SWITCHER ─── */ .lang-switcher{position:fixed;top:28px;right:32px;z-index:300;display:flex;border:1px solid rgba(200,169,110,.4);overflow:hidden} .lang-btn{background:transparent;color:var(--gold);font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;padding:8px 14px;cursor:pointer;border:none;transition:all .3s ease} .lang-btn.active{background:rgba(200,169,110,.25);color:var(--gold-light)} .lang-btn:hover:not(.active){background:rgba(200,169,110,.1)} /* ─── BACK BUTTON ─── */ .back-btn{position:fixed;top:28px;left:32px;z-index:200;background:rgba(20,14,8,.7);border:1px solid rgba(200,169,110,.4);color:var(--gold);font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;padding:10px 20px;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(8px);text-decoration:none;display:inline-flex;align-items:center;gap:8px} .back-btn:hover{background:rgba(200,169,110,.2);border-color:var(--gold)} /* ─── SUB-NAV ─── */ .sub-nav{position:fixed;top:28px;left:50%;transform:translateX(-50%);z-index:200;display:flex;border:1px solid rgba(200,169,110,.25);overflow:hidden;backdrop-filter:blur(8px)} .sub-nav a{background:transparent;color:rgba(200,169,110,.6);font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;padding:10px 16px;text-decoration:none;border-right:1px solid rgba(200,169,110,.15);transition:all .3s ease;white-space:nowrap} .sub-nav a:last-child{border-right:none} .sub-nav a:hover{background:rgba(200,169,110,.1);color:var(--gold)} .sub-nav a.current{background:rgba(200,169,110,.15);color:var(--gold-light)} /* ─── CONTACT FOOTER ─── */ .contact-footer{position:fixed;bottom:24px;right:32px;z-index:200;display:flex;align-items:center;gap:16px} .contact-link{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(200,169,110,.6);text-decoration:none;transition:color .3s ease} .contact-link:hover{color:var(--gold)} .contact-sep{color:rgba(200,169,110,.3);font-size:.6rem} /* ═══════════════════════════════════════════ HERO BANNER — OPCIÓN A (cinematic strip) Height: ~38vh — gradient left-to-right Title bottom-left — full photo visible ═══════════════════════════════════════════ */ .page-hero{ width:100%;height:38vh; position:relative;overflow:hidden; background:var(--dark); } /* The actual background photo */ .page-hero img.hero-bg{ width:100%;height:100%; object-fit:cover;object-position:center 30%; filter:brightness(.5) contrast(1.05); display:block; /* Subtle alive scale on load */ transform:scale(1.05); transition:transform 1.6s ease; } .page-hero.loaded img.hero-bg{transform:scale(1.0)} /* Left-to-right dark gradient (Option A) */ .page-hero::after{ content:''; position:absolute;inset:0; background:linear-gradient(to right,rgba(26,20,16,.93) 0%,rgba(26,20,16,.28) 55%,transparent 100%); pointer-events:none; } /* Text sits bottom-left above gradient */ .page-hero-text{ position:absolute;bottom:36px;left:52px;z-index:2; } .page-hero-text h1{ font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,4rem); font-weight:300;letter-spacing:.1em; color:var(--cream);line-height:1.05; } .page-hero-text .subtitle{ font-family:'Josefin Sans',sans-serif;font-weight:100; font-size:.68rem;letter-spacing:.4em;text-transform:uppercase; color:var(--gold);margin-top:10px; } /* ─── PAGE CONTENT ─── */ .page-content{max-width:1100px;margin:0 auto;padding:60px 40px 100px;position:relative;z-index:1} /* ─── SHARED TYPOGRAPHY ─── */ .bio-text h2,.page2-text h2{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--gold);letter-spacing:.05em;margin-bottom:24px} .bio-text p,.page2-text p{font-family:'Cormorant Garamond',serif;font-size:1.1rem;line-height:1.85;color:#d4cdc0;margin-bottom:20px;font-weight:300} .bio-text em,.page2-text em{font-style:italic;color:var(--gold-light)} .bio-text a,.page2-text a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(200,169,110,.3);transition:border-color .3s ease} .bio-text a:hover,.page2-text a:hover{border-color:var(--gold)} .gold-line{width:60px;height:1px;background:var(--gold);margin-bottom:28px} .divider{width:100%;height:1px;background:rgba(200,169,110,.2);margin:36px 0} /* ─── LANG ─── */ [data-lang]{display:none}[data-lang].visible{display:block} span[data-lang]{display:none}span[data-lang].visible{display:inline} /* ─── ANIMATIONS ─── */ @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .page-enter{opacity:0;animation:fadeIn .9s ease forwards} /* ─── AUDIO PLAYER ─── */ .audio-player-wrap audio{width:100%;height:36px;accent-color:var(--gold);margin-top:6px} /* ═══════════════ MOBILE ═══════════════ */ @media(max-width:700px){ .sub-nav{ position:static;transform:none; display:flex;flex-wrap:wrap;width:100%; border:none;border-bottom:1px solid rgba(200,169,110,.2); justify-content:center; } .sub-nav a{font-size:.5rem;padding:8px 10px} .back-btn{left:16px;top:16px;font-size:.6rem;padding:8px 14px} .lang-switcher{top:16px;right:16px} .page-hero{height:28vh} .page-hero-text{left:20px;bottom:18px} .page-hero-text h1{font-size:clamp(1.4rem,6vw,2.4rem)} .page-content{padding:30px 18px 80px} .contact-footer{right:12px;bottom:12px;gap:8px} }