/* ================= Lucía Blasco — editorial light theme ================= */
:root { --paper:#fdfbf7; --paper-warm:#f6f1e8; --ink:#1a1a1a; --ink-soft:#4a4a48; --ink-faint:#8a8781; --accent:#b4552d; --rule:#e4ddd0; --serif:"Fraunces", Georgia, serif; --sans:"Inter", -apple-system, "Helvetica Neue", sans-serif; --max:1200px; }
* { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; } img { display:block; max-width:100%; } a { color:inherit; }
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:1.1rem clamp(1.25rem,4vw,3rem); background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); } .nav-logo { font-family:var(--serif); font-weight:600; font-size:1.35rem; text-decoration:none; letter-spacing:.01em; } .nav-links { display:flex; gap:clamp(.9rem,2vw,1.8rem); align-items:center; } .nav-links a { text-decoration:none; font-size:.84rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); transition:color .2s; } .nav-links a:hover { color:var(--accent); } .nav-cta { border:1px solid var(--ink); border-radius:999px; padding:.45em 1.1em; color:var(--ink)!important; } .nav-cta:hover { background:var(--ink); color:var(--paper)!important; } .lang { position:relative; } .lang-btn { display:inline-flex; align-items:center; gap:.35em; background:none; border:1px solid var(--rule); border-radius:999px; padding:.45em .95em; cursor:pointer; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; color:var(--ink-soft); transition:color .2s,border-color .2s; } .lang-btn:hover,.lang-btn[aria-expanded="true"] { color:var(--accent); border-color:var(--accent); } .lang-btn svg { transition:transform .2s; } .lang-btn[aria-expanded="true"] svg { transform:rotate(180deg); } .lang-menu { position:absolute; top:calc(100% + .5rem); right:0; min-width:9.5rem; background:var(--paper); border:1px solid var(--rule); border-radius:6px; box-shadow:0 12px 30px rgba(26,22,16,.12); padding:.35rem; z-index:60; } .lang-menu[hidden] { display:none; } .lang-menu a { display:block; padding:.5em .8em; border-radius:4px; text-decoration:none; font-size:.8rem; font-weight:500; letter-spacing:.06em; color:var(--ink-soft); } .lang-menu a:hover { background:var(--paper-warm); color:var(--ink); } .lang-menu a[aria-current="true"] { color:var(--accent); }
/* El orden del menú principal queda fijado: Fotografía antes que Vídeo. */ .nav-links > a:nth-child(1) { order:1; } .nav-links > a:nth-child(2) { order:2; } .nav-links > a:nth-child(3) { order:3; } .nav-links > a:nth-child(4) { order:4; } .nav-links > a:nth-child(5) { order:5; } .nav-links > a:nth-child(6) { order:6; } .nav-links > a:nth-child(7) { order:7; } .nav-links > .lang { order:8; }
.hero { max-width:var(--max); margin:0 auto; padding:clamp(3rem,8vh,6rem) clamp(1.25rem,4vw,3rem) clamp(3rem,7vh,5rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .kicker { font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem; } .hero h1 { font-family:var(--serif); font-weight:400; font-size:clamp(2.5rem,5.2vw,4.3rem); line-height:1.08; letter-spacing:-.015em; } .hero h1 em { font-style:italic; color:var(--accent); } .hero-sub { margin-top:1.4rem; font-size:1.06rem; color:var(--ink-soft); max-width:34em; } .hero-badges { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.5rem; } .hero-badges span { font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--rule); background:var(--paper-warm); padding:.4em 1em; border-radius:999px; color:var(--ink-soft); } .hero-figure { position:relative; } .hero-figure img { width:100%; aspect-ratio:4/4.6; object-fit:cover; border-radius:4px; box-shadow:24px 24px 0 -12px var(--paper-warm),0 20px 50px rgba(26,22,16,.18); } .hero-figure figcaption { margin-top:.8rem; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
section { scroll-margin-top:5rem; } .section-head { display:flex; align-items:baseline; gap:1rem; max-width:var(--max); margin:0 auto 2.5rem; padding:0 clamp(1.25rem,4vw,3rem); } .section-no { font-family:var(--serif); font-style:italic; color:var(--accent); font-size:1rem; } .section-head h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.8rem); letter-spacing:-.01em; } .section-head::after { content:""; flex:1; height:1px; background:var(--rule); align-self:center; }
.about { padding:clamp(3rem,8vh,6rem) 0; } .about-grid { max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; } .about-portrait { position:sticky; top:6.5rem; } .about-portrait img { width:100%; filter:grayscale(1) contrast(1.05); border-radius:4px; box-shadow:0 14px 40px rgba(26,22,16,.15); } .about-copy .lead { font-family:var(--serif); font-size:clamp(1.35rem,2.2vw,1.7rem); line-height:1.35; font-weight:400; margin-bottom:1.4rem; } .about-copy p:not(.lead) { color:var(--ink-soft); margin-bottom:1.1rem; max-width:62ch; } .facts { list-style:none; margin-top:2rem; border-top:1px solid var(--rule); } .facts li { padding:.9rem 0; border-bottom:1px solid var(--rule); font-size:.92rem; color:var(--ink-soft); } .facts li span { display:block; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.25rem; }
.experience { padding:clamp(2rem,6vh,4rem) 0 clamp(3rem,8vh,6rem); } .timeline { list-style:none; max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); } .timeline li { display:grid; grid-template-columns:200px 1fr; gap:2rem; padding:1.8rem 0; border-bottom:1px solid var(--rule); } .timeline li:first-child { border-top:1px solid var(--rule); } .tl-when { font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); padding-top:.3rem; } .tl-what h3 { font-family:var(--serif); font-weight:600; font-size:1.25rem; } .tl-what h3 span { font-family:var(--sans); font-weight:400; font-size:.95rem; color:var(--ink-faint); } .tl-what p { color:var(--ink-soft); margin-top:.4rem; max-width:62ch; } .tl-more { max-width:var(--max); margin:1.6rem auto 0; padding:0 clamp(1.25rem,4vw,3rem); } .tl-more a { font-size:.9rem; font-weight:600; color:var(--accent); text-decoration:none; }
.work { padding-bottom:clamp(3rem,8vh,6rem); } .work-grid { max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; } .work-card { background:var(--paper-warm); border:1px solid var(--rule); border-radius:6px; padding:1.8rem 1.9rem; transition:transform .25s ease,box-shadow .25s ease; } .work-card:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(26,22,16,.1); } .work-type { font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .work-card h3 { font-family:var(--serif); font-size:1.35rem; font-weight:600; margin:.5rem 0; } .work-card p { color:var(--ink-soft); font-size:.95rem; }
.photography { background:#14120f; color:#f2ede4; padding:clamp(3.5rem,9vh,6.5rem) 0; } .video { background:#24312e; color:#f2ede4; padding:clamp(3.5rem,9vh,6.5rem) 0; } .section-head-light h2 { color:#f2ede4; } .section-head-light::after { background:#2e2a24; } .video .section-head-light::after { background:#3d4d48; } .photo-intro,.video-intro { max-width:var(--max); margin:-1rem auto 2.5rem; padding:0 clamp(1.25rem,4vw,3rem); color:#b5aea1; } .video-intro { color:#b8c6c1; } .video-empty { max-width:var(--max); margin:0 auto; padding:clamp(3rem,7vw,5rem) 1.5rem; border:1px solid #3d4d48; text-align:center; } .video-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; text-align:left; } .video-item { min-width:0; } .video-item.wide { grid-column:1/-1; max-width:850px; width:100%; margin:0 auto; } .video-item iframe { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; } .video-mark { display:grid; place-items:center; width:3.4rem; height:3.4rem; margin:0 auto 1.2rem; border:1px solid #d17b55; border-radius:50%; color:#e09a75; font-size:.9rem; padding-left:.15em; } .video-empty h3 { font-family:var(--serif); font-size:1.7rem; font-weight:500; } .video-empty p { margin-top:.4rem; color:#9fb1ab; } .photo-grid { max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; } .photo-item { cursor:zoom-in; } .photo-item.wide { grid-column:1/-1; } .photo-item img { width:100%; border-radius:3px; aspect-ratio:3/2; object-fit:cover; transition:opacity .25s; } .photo-item.wide img { aspect-ratio:21/9; object-position:50% 35%; } .photo-item:hover img { opacity:.88; } .photo-item figcaption { margin-top:.7rem; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:#8f887b; } .photo-more { max-width:var(--max); margin:2.5rem auto 0; padding:0 clamp(1.25rem,4vw,3rem); color:#b5aea1; } .photo-more a { color:#f2ede4; text-decoration-color:var(--accent); text-underline-offset:4px; }
.services { padding:clamp(3.5rem,9vh,6.5rem) 0; } .services-grid { max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; } .service { border:1px solid var(--rule); border-radius:6px; padding:2rem 2.1rem; } .service h3 { font-family:var(--serif); font-size:1.45rem; font-weight:600; margin-bottom:.6rem; } .service>p { color:var(--ink-soft); margin-bottom:1.1rem; } .service ul { list-style:none; } .service li { padding:.55rem 0 .55rem 1.4rem; position:relative; color:var(--ink-soft); font-size:.95rem; border-top:1px solid var(--rule); } .service li::before { content:"—"; position:absolute; left:0; color:var(--accent); }
.contact { background:var(--paper-warm); border-top:1px solid var(--rule); padding:clamp(3.5rem,10vh,7rem) clamp(1.25rem,4vw,3rem); text-align:center; } .contact h2 { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.5vw,3.4rem); letter-spacing:-.01em; max-width:16em; margin:0 auto; } .contact-links { margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; } .contact-links a { text-decoration:none; font-size:.9rem; font-weight:500; border:1px solid var(--ink); border-radius:999px; padding:.65em 1.4em; transition:background .2s,color .2s; } .contact-links a:hover { background:var(--ink); color:var(--paper); } .footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:1.4rem clamp(1.25rem,4vw,3rem); font-size:.78rem; color:var(--ink-faint); border-top:1px solid var(--rule); } .lightbox[hidden] { display:none; } .lightbox { position:fixed; inset:0; z-index:100; background:rgba(12,10,8,.94); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1.5rem 2rem; } .lightbox img { max-width:min(1400px,92vw); max-height:80vh; object-fit:contain; border-radius:3px; } .lightbox-caption { color:#b5aea1; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin-top:1rem; } .lightbox-close { position:absolute; top:1rem; right:1.5rem; background:none; border:none; color:#f2ede4; font-size:2.4rem; cursor:pointer; line-height:1; } .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } } @media (max-width:900px) { .hero { grid-template-columns:1fr; } .hero-figure img { aspect-ratio:4/3; } .about-grid { grid-template-columns:1fr; } .about-portrait { position:static; max-width:300px; } .timeline li { grid-template-columns:1fr; gap:.4rem; } .work-grid,.services-grid,.photo-grid,.video-list { grid-template-columns:1fr; } .photo-item.wide img { aspect-ratio:3/2; } .video-item.wide { max-width:none; } }

/* --- Mobile navigation ------------------------------------------------- */
.nav-toggle { display:none; }
@media (max-width:1150px) { .nav { background:var(--paper); backdrop-filter:none; } .nav-toggle { display:flex; position:relative; z-index:70; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; margin-right:-9px; padding:0 9px; background:none; border:none; cursor:pointer; } .nav-toggle span { display:block; width:100%; height:1.5px; border-radius:2px; background:var(--ink); transition:transform .25s ease,opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } .nav-links { position:fixed; inset:0; z-index:65; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:calc(5.5rem + env(safe-area-inset-top,0px)) clamp(1.5rem,7vw,3rem) calc(2rem + env(safe-area-inset-bottom,0px)); background:var(--paper); overflow-y:auto; overscroll-behavior:contain; counter-reset:navitem; opacity:0; visibility:hidden; transition:opacity .28s ease,visibility .28s ease; } .nav-links.open { opacity:1; visibility:visible; } .nav-links > a { display:flex; align-items:baseline; gap:1rem; width:100%; padding:.5em 0; border-bottom:1px solid var(--rule); font-family:var(--serif); font-size:clamp(1.6rem,6.5vw,2.3rem); font-weight:400; letter-spacing:-.01em; text-transform:none; color:var(--ink); } .nav-links:not(.compact) > a:not(.nav-cta)::before { counter-increment:navitem; content:counter(navitem,decimal-leading-zero); flex:none; width:1.9em; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.12em; color:var(--accent); } .nav-links > a.nav-cta { align-self:flex-start; width:auto; justify-content:center; margin-top:2rem; border:1px solid var(--ink); border-radius:999px; padding:.85em 2em; font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .nav-links .lang { position:static; margin-top:auto; padding-top:2.5rem; } .nav-links .lang-btn { display:none; } .nav-links .lang-menu,.nav-links .lang-menu[hidden] { display:flex; gap:.6rem; position:static; min-width:0; padding:0; background:none; border:none; border-radius:0; box-shadow:none; } .nav-links .lang-menu a { border:1px solid var(--rule); border-radius:999px; padding:.6em 1.2em; font-size:.78rem; font-weight:600; letter-spacing:.08em; } .nav-links .lang-menu a[aria-current="true"] { border-color:var(--accent); color:var(--accent); } body.menu-open { overflow:hidden; } }
@media (prefers-reduced-motion:reduce) { .nav-links,.nav-toggle span { transition:none; } }