/* ====== MEDITERRÁNEO — design system · Laura Llavador ====== */ /* Tema claro (Mediterráneo Día). El oscuro se activa con [data-theme="dark"] en , resuelto por el script inline del : preferencia guardada o prefers-color-scheme. */ :root{ color-scheme:light; --bg:#F7F2E7; /* arena clara */ --bg-2:#F1EBDC; /* banda de sección */ --surface:#FDFBF4; /* tarjetas */ --abyss:#ECE4CF; /* contacto */ --ink:#1E2B21; /* tinta bosque */ --ink-soft:#5F6D57; /* musgo */ --cream:#1E2B21; /* sólido de contraste (botones, marquee) */ --ink-inverse:#F7F2E7; /* texto sobre --cream y acentos sólidos */ --sea:#2E7D71; --turquoise:#1E8A63; --leaf:#6F8628; /* oliva */ --olive:#77813F; --terracotta:#C25A2B; /* barro rústico */ --terracotta-dark:#A84A20; --sun:#B27A1A; /* ámbar oscuro */ --sun-soft:#E8A64C; --live:#1FA35B; --line:rgba(30,43,33,.14); --shadow:0 30px 70px -25px rgba(30,43,33,.22); --nav-bg:rgba(247,242,231,.6); --nav-bg-scrolled:rgba(247,242,231,.9); --nav-shadow:0 10px 30px rgba(30,43,33,.1); --nav-shadow-scrolled:0 16px 44px rgba(30,43,33,.16); --badge-shadow:0 16px 34px -12px rgba(30,43,33,.25); --blob-blend:multiply; --blob-1:#BFE0CE; --blob-2:#F0D9AE; --blob-3:#C4E1DF; --arch-grad:linear-gradient(180deg,#DCEDE0 0%,#CDE3CF 46%,#EFD9AC 78%,#E3BE84 100%); --value-grad-1:linear-gradient(180deg,#E2EFE5,#EDF4EA); --value-grad-2:linear-gradient(180deg,#F3ECD6,#F8F2E3); --value-grad-3:linear-gradient(180deg,#F5E3D6,#F9EDE3); --media-grad-1:linear-gradient(135deg,#CFE5DB,#C2DCCE); --media-grad-2:linear-gradient(135deg,#EBDFC0,#E1D2AC); --media-grad-3:linear-gradient(135deg,#F0DACC,#E7CBB9); --media-grad-4:linear-gradient(135deg,#CBE2E7,#BDD8DF); --next-grad:linear-gradient(120deg,var(--surface),#F0E9D6); --ease:cubic-bezier(.22,1,.36,1); } /* Tema oscuro (Bosque Mediterráneo) */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#0B110D; /* noche de bosque */ --bg-2:#0E140F; --surface:#141D16; --abyss:#070B08; --ink:#EDE6D6; /* texto arena */ --ink-soft:#A3AE98; --cream:#EDE6D6; --ink-inverse:#131A12; --sea:#4FB3A5; --turquoise:#56C998; --leaf:#A6C25E; --olive:#8E9B52; --terracotta:#DE7549; --terracotta-dark:#C45E37; --sun:#E8A64C; --sun-soft:#F3C77E; --live:#57C97E; --line:rgba(237,230,214,.13); --shadow:0 30px 70px -25px rgba(0,0,0,.65); --nav-bg:rgba(11,17,13,.55); --nav-bg-scrolled:rgba(9,14,11,.85); --nav-shadow:0 10px 30px rgba(0,0,0,.3); --nav-shadow-scrolled:0 16px 44px rgba(0,0,0,.45); --badge-shadow:0 16px 34px -12px rgba(0,0,0,.55); --blob-blend:screen; --blob-1:#1E5C44; --blob-2:#6E4A1C; --blob-3:#174D4D; --arch-grad:linear-gradient(180deg,#16312B 0%,#1C3A2A 46%,#4A3A1E 78%,#6B4A24 100%); --value-grad-1:linear-gradient(180deg,#12251F,#101B16); --value-grad-2:linear-gradient(180deg,#252012,#1A160E); --value-grad-3:linear-gradient(180deg,#261812,#1B120D); --media-grad-1:linear-gradient(135deg,#1A3A33,#143028); --media-grad-2:linear-gradient(135deg,#3A2D17,#2C2110); --media-grad-3:linear-gradient(135deg,#3A241B,#2B1A12); --media-grad-4:linear-gradient(135deg,#16333A,#10262C); --next-grad:linear-gradient(120deg,var(--surface),#11180F); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:100px} body{ font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; line-height:1.55; } ::selection{background:var(--leaf);color:var(--ink-inverse)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;background:none;border:none;color:inherit;cursor:pointer} ul{list-style:none} .container{width:min(1180px,92vw);margin-inline:auto} /* grain rústico */ body::after{ content:"";position:fixed;inset:0;z-index:998;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); opacity:.07;mix-blend-mode:overlay; } /* barra de progreso de scroll */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:140;pointer-events:none} .progress i{ display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,var(--sea),var(--leaf),var(--sun)); } /* hojas y luciérnagas */ .frond{position:absolute;pointer-events:none;z-index:1} .frond svg{display:block;width:100%;height:auto;animation:sway 9s ease-in-out infinite;transform-origin:50% 100%} @keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} .ff{ position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:3; background:radial-gradient(circle,#F6D391 0%,rgba(243,199,126,.45) 40%,transparent 70%); box-shadow:0 0 14px 3px rgba(232,166,76,.45); animation-name:ffdrift,ffblink; animation-timing-function:ease-in-out,ease-in-out; animation-iteration-count:infinite,infinite; animation-direction:alternate,normal; } @keyframes ffdrift{from{transform:translate(0,0)}to{transform:translate(36px,-48px)}} @keyframes ffblink{0%,100%{opacity:.12}50%{opacity:1}} /* ============ NAV ============ */ .nav{ position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:120; width:min(1180px,94vw); display:flex;align-items:center;justify-content:flex-start;gap:12px; padding:10px 12px 10px 22px;border-radius:999px; background:var(--nav-bg); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--line); box-shadow:var(--nav-shadow); transition:box-shadow .4s,background .4s; } .nav.scrolled{background:var(--nav-bg-scrolled);box-shadow:var(--nav-shadow-scrolled)} .logo{font-size:1rem;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:2px} .logo .star{color:var(--terracotta);display:inline-block;animation:spin 9s linear infinite} .nav-links{display:flex;gap:2px;align-items:center;margin-right:auto} .nav-back{ display:inline-flex;align-items:center;gap:8px;margin-right:auto; padding:9px 16px;border-radius:999px;font-size:.93rem;color:var(--ink-soft); transition:background .3s,color .3s,gap .3s; } .nav-back:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);gap:11px} .nav-links a{ padding:9px 16px;border-radius:999px;font-size:.93rem;color:var(--ink-soft); transition:background .3s,color .3s; } .nav-links a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)} .nav-cta{ background:var(--cream);color:var(--ink-inverse);padding:11px 22px;border-radius:999px; font-size:.93rem;font-weight:600;display:inline-flex;align-items:center;gap:8px; transition:background .3s,transform .3s; } .nav-cta:hover{background:var(--terracotta)} .theme-toggle{ flex:none;position:relative;width:58px;height:30px;border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb,var(--ink) 7%,transparent); transition:background .3s,border-color .3s; } .theme-toggle:hover{border-color:var(--ink-soft)} .theme-toggle .knob{ position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%; background:var(--cream);color:var(--ink-inverse); display:flex;align-items:center;justify-content:center; transition:transform .35s var(--ease),background .3s; } :root[data-theme="dark"] .theme-toggle .knob{transform:translateX(28px)} .theme-toggle svg{width:13px;height:13px} .theme-toggle .tt-moon{display:none} :root[data-theme="dark"] .theme-toggle .tt-moon{display:block} :root[data-theme="dark"] .theme-toggle .tt-sun{display:none} .burger{display:none;width:42px;height:42px;border-radius:50%;background:var(--cream);position:relative;z-index:130} .burger span{position:absolute;left:12px;right:12px;height:1.6px;background:var(--bg);transition:.35s var(--ease)} .burger span:nth-child(1){top:17px} .burger span:nth-child(2){top:24px} body.menu-open .burger span:nth-child(1){top:20.5px;transform:rotate(45deg)} body.menu-open .burger span:nth-child(2){top:20.5px;transform:rotate(-45deg)} /* mobile menu */ .mmenu{ position:fixed;inset:0;z-index:110;background:var(--bg); display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 8vw; opacity:0;pointer-events:none;transition:opacity .45s var(--ease); } body.menu-open .mmenu{opacity:1;pointer-events:auto} .mmenu a{ font-size:clamp(2.3rem,9vw,3.5rem);font-weight:750;letter-spacing:-.03em;padding:12px 0; border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:18px; transform:translateY(24px);opacity:0;transition:.5s var(--ease); } body.menu-open .mmenu a{transform:none;opacity:1} .mmenu a:nth-child(2){transition-delay:.06s}.mmenu a:nth-child(3){transition-delay:.12s} .mmenu a:nth-child(4){transition-delay:.18s}.mmenu a:nth-child(5){transition-delay:.24s} .mmenu a i{font-style:normal;font-size:.8rem;font-weight:500;letter-spacing:.2em;color:var(--terracotta)} .mmenu-theme{ margin-top:28px;display:flex;align-items:center;justify-content:space-between; transform:translateY(24px);opacity:0;transition:.5s var(--ease) .3s; } body.menu-open .mmenu-theme{transform:none;opacity:1} .mmenu-theme span{ font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-soft); } /* ============ HERO (home) ============ */ .hero{ position:relative;min-height:100svh;display:flex;align-items:center; padding:150px 0 90px;overflow:hidden; } .grid-lines{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:84px 84px; -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 38%,#000 25%,transparent 72%); mask-image:radial-gradient(ellipse 90% 70% at 50% 38%,#000 25%,transparent 72%); } .blob{ position:absolute;border-radius:50%;filter:blur(85px);pointer-events:none; mix-blend-mode:var(--blob-blend);animation:breathe 9s ease-in-out infinite alternate; transform:translate(calc(var(--px,0)*1px),calc(var(--py,0)*1px)); } .blob-1{width:560px;height:560px;background:var(--blob-1);top:-150px;right:-110px;opacity:.6} .blob-2{width:480px;height:480px;background:var(--blob-2);bottom:-150px;left:-150px;opacity:.55;animation-delay:-3s} .blob-3{width:340px;height:340px;background:var(--blob-3);top:32%;left:36%;opacity:.45;animation-delay:-6s} @keyframes breathe{from{opacity:.32}to{opacity:.62}} .hero-meta{ position:absolute;top:104px;left:0;right:0; display:flex;justify-content:space-between; font-size:.7rem;font-weight:500;letter-spacing:.16em; color:var(--ink-soft);text-transform:uppercase;font-variant-numeric:tabular-nums; } .hero-grid{ position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr; gap:48px;align-items:center;width:100%; } .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:.78rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:var(--terracotta);margin-bottom:22px; } .eyebrow::before{content:"";width:38px;height:1.5px;background:var(--terracotta)} .hero-title{ font-weight:780; font-size:clamp(3.3rem,9vw,7.2rem);line-height:.97;letter-spacing:-.045em; } .line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em} .line .up{display:block;transform:translateY(118%);transition:transform 1.1s var(--ease)} .line:nth-child(2) .up{transition-delay:.14s} body.loaded .line .up{transform:none} .grad{ font-style:italic;font-weight:680;display:inline-block;padding-right:.1em; background:linear-gradient(94deg,var(--sea) 0%,var(--turquoise) 48%,var(--leaf) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-title .star{ display:inline-block;font-style:normal;color:var(--sun);font-size:.36em; vertical-align:super;animation:spin 12s linear infinite; -webkit-text-fill-color:var(--sun); } .hero-sub{ max-width:46ch;margin-top:26px;font-size:clamp(1rem,1.4vw,1.16rem); color:var(--ink-soft);font-weight:300; } .hero-sub em{font-style:italic;color:var(--turquoise);font-weight:450} .hero-sub strong{color:var(--ink);font-weight:600} .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} .btn{ display:inline-flex;align-items:center;gap:10px;border-radius:999px; padding:16px 30px;font-size:.96rem;font-weight:600;letter-spacing:.01em; transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease); will-change:transform; } .btn .arr{transition:transform .35s var(--ease);display:inline-block} .btn:hover .arr{transform:translateX(5px)} .btn-primary{background:var(--terracotta);color:#FFF3E6;box-shadow:0 16px 40px -12px rgba(222,117,73,.5)} .btn-primary:hover{background:var(--terracotta-dark)} .btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)} .btn-ghost:hover{border-color:var(--cream);background:color-mix(in srgb,var(--ink) 8%,transparent)} .hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px} .chip{ display:inline-flex;align-items:center;gap:9px; font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; padding:9px 16px;border:1px solid var(--line);border-radius:999px; background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink-soft);font-variant-numeric:tabular-nums; } .chip b{color:var(--ink);font-weight:700} .dot-live{width:8px;height:8px;border-radius:50%;background:var(--live);position:relative} .dot-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--live);animation:ping 1.8s ease-out infinite} @keyframes ping{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.25);opacity:0}} /* portrait */ .portrait-zone{position:relative;z-index:2;display:flex;justify-content:center} .portrait{position:relative;width:min(400px,78vw)} .arch{ position:relative;overflow:hidden;aspect-ratio:4/4.9; border-radius:999px 999px 30px 30px; background:var(--arch-grad); border:1px solid var(--line);box-shadow:var(--shadow); } .sun-disc{ position:absolute;top:7%;left:50%;transform:translateX(-50%); width:72%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 36% 30%,var(--sun-soft),var(--sun) 72%); box-shadow:0 0 90px rgba(232,166,76,.55); animation:sunfloat 7s ease-in-out infinite alternate; } @keyframes sunfloat{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-12px)}} .arch-waves{position:absolute;left:0;right:0;top:54%;opacity:.6} .arch-waves svg{display:block;width:200%;animation:drift 9s linear infinite} @keyframes drift{to{transform:translateX(-50%)}} .arch img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center bottom} .badge{ position:absolute;z-index:4;display:flex;align-items:center;gap:10px; background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:999px;padding:11px 18px; font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; box-shadow:var(--badge-shadow);white-space:nowrap; } .badge-avail{top:24px;left:-44px;animation:hover1 6s ease-in-out infinite alternate} .badge-work{bottom:64px;right:-48px;animation:hover1 7s ease-in-out infinite alternate-reverse} .badge-work .star{color:var(--terracotta)} @keyframes hover1{from{transform:translateY(0)}to{transform:translateY(-14px)}} .rotor{position:absolute;z-index:5;bottom:-30px;left:-34px;width:124px;height:124px} .rotor svg{width:100%;height:100%;animation:spin 16s linear infinite} .rotor svg text{font-family:'Inter',sans-serif;font-size:7.6px;font-weight:600;letter-spacing:.24em;fill:var(--ink)} .rotor .core{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:1.5rem;color:var(--terracotta);animation:spin 16s linear infinite reverse; } @keyframes spin{to{transform:rotate(360deg)}} .scroll-hint{ position:absolute;bottom:22px;left:50%;transform:translateX(-50%); font-size:.7rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase; color:var(--ink-soft);display:flex;align-items:center;gap:10px;z-index:2; } .scroll-hint i{font-style:normal;animation:bob 1.6s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* ============ MARQUEE ============ */ .marquee{ background:var(--cream);color:var(--ink-inverse);overflow:hidden; padding:18px 0;position:relative;z-index:4; } .marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-group{display:flex;align-items:center;gap:54px;padding-right:54px} .marquee-group span{font-style:italic;font-size:1.3rem;font-weight:650;letter-spacing:-.02em;white-space:nowrap} .marquee-group i{font-style:normal;color:var(--terracotta);font-size:1.1rem;animation:spin 7s linear infinite} @keyframes marquee{to{transform:translateX(-50%)}} /* ============ SECTIONS ============ */ section{position:relative;padding:120px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px} .sec-label{ display:flex;align-items:center;gap:12px; font-size:.74rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase; color:var(--terracotta);margin-bottom:16px; } .sec-label::before{content:"";width:36px;height:1.5px;background:var(--terracotta)} .sec-title{font-weight:760;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.04em} .sec-title em{font-style:italic;font-weight:600;color:var(--turquoise)} .sec-link{ font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px;padding-bottom:5px; border-bottom:1.5px solid var(--line);transition:border-color .3s,color .3s;white-space:nowrap; } .sec-link:hover{border-color:var(--leaf);color:var(--leaf)} .sec-link.is-disabled{ color:var(--ink-soft);opacity:.75;cursor:not-allowed; border-bottom:1.5px dashed var(--line); } .sec-link.is-disabled:hover{border-color:var(--line);color:var(--ink-soft)} .sec-link .soon{ font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--sun);background:color-mix(in srgb,var(--sun) 12%,transparent); border:1px solid color-mix(in srgb,var(--sun) 35%,transparent);border-radius:999px;padding:4px 10px; white-space:nowrap; } /* ============ ABOUT ============ */ .statement{ font-weight:560; font-size:clamp(1.6rem,3.3vw,2.6rem);line-height:1.34;letter-spacing:-.025em; max-width:23em;position:relative;z-index:2; } .statement em{font-style:italic;color:var(--turquoise);font-weight:500} .statement .hl{ background:linear-gradient(transparent 62%,rgba(232,166,76,.35) 0); padding:0 .08em;border-radius:2px; } .values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:70px;position:relative;z-index:2} .value-card{ border-radius:130px 130px 22px 22px;padding:54px 26px 32px;text-align:center; border:1px solid var(--line); transition:transform .5s var(--ease),box-shadow .5s,border-color .5s; } .value-card:nth-child(1){background:var(--value-grad-1)} .value-card:nth-child(2){background:var(--value-grad-2)} .value-card:nth-child(3){background:var(--value-grad-3)} .value-glyph{font-size:1.9rem;margin-bottom:14px;display:inline-block} .value-card:nth-child(1) .value-glyph{color:var(--sea)} .value-card:nth-child(2) .value-glyph{color:var(--leaf)} .value-card:nth-child(3) .value-glyph{color:var(--sun);animation:spin 10s linear infinite} .value-card h3{font-style:italic;font-weight:680;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:8px} .value-card p{font-size:.92rem;color:var(--ink-soft);font-weight:300} .about-foot{ display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start;margin-top:90px; padding-top:60px;border-top:1px solid var(--line);position:relative;z-index:2; } .tools-title{ font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:20px; } .tools{display:flex;flex-wrap:wrap;gap:10px} .tool{ font-size:.8rem;font-weight:500;padding:9px 17px; border:1px solid var(--line);border-radius:999px;background:var(--surface); transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s; } .tool:hover{background:var(--cream);color:var(--ink-inverse);border-color:var(--cream);transform:translateY(-3px)} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .stat{border-left:1.5px solid var(--line);padding-left:20px} .stat-num{ font-weight:800;font-size:clamp(2.5rem,4.6vw,3.7rem); line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums; } .stat-num sup{color:var(--terracotta);font-size:.55em;font-style:italic} .stat-label{font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px} /* ============ WORK ============ */ #work{background:var(--bg-2);border-block:1px solid var(--line)} .work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px} .card{ position:relative;display:flex;flex-direction:column;overflow:hidden; border-radius:26px;background:var(--surface);border:1px solid var(--line); transition:transform .55s var(--ease),box-shadow .55s,border-color .55s; } .card:hover{transform:translateY(-9px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--ink) 25%,transparent)} .card-w7{grid-column:span 7} .card-w5{grid-column:span 5} .card-media{position:relative;overflow:hidden;aspect-ratio:16/10.5} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .card:hover .card-media img{transform:scale(1.06)} .card:nth-child(1) .card-media{background:var(--media-grad-1)} .card:nth-child(2) .card-media{background:var(--media-grad-2)} .card:nth-child(3) .card-media{background:var(--media-grad-3)} .card:nth-child(4) .card-media{background:var(--media-grad-4)} .card-tags{position:absolute;top:16px;left:16px;right:16px;display:flex;flex-wrap:wrap;gap:8px;z-index:3} .tag{ font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; background:color-mix(in srgb,var(--surface) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:999px;padding:6px 12px;color:var(--ink); } .tag-hot{background:var(--sun);border-color:var(--sun);color:var(--ink-inverse);font-weight:800} .card-body{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:26px 28px 28px} .card-num{ font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--terracotta);display:block;margin-bottom:8px; } .card-body h3{font-weight:700;font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.22;letter-spacing:-.025em;max-width:20ch} .card-cta{ flex:none;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line); display:flex;align-items:center;justify-content:center;font-size:1.1rem; transition:background .35s,color .35s,transform .5s var(--ease),border-color .35s; } .card:hover .card-cta{background:var(--terracotta);border-color:var(--terracotta);color:#FFF3E6;transform:rotate(45deg)} /* ============ JOURNEY ============ */ .timeline{margin-top:10px} .t-item{ display:grid;grid-template-columns:150px 30px 1fr;gap:0 30px; padding:34px 10px;border-radius:18px; transition:background .35s;position:relative; } .t-item:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)} .t-year{grid-area:1/1;font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--ink-soft);padding-top:6px;white-space:nowrap;font-variant-numeric:tabular-nums} .t-line{grid-area:1/2;position:relative} .t-line::before{content:"";position:absolute;left:50%;top:-34px;bottom:-34px;width:1.5px;background:var(--line)} .t-item:first-child .t-line::before{top:10px} .t-item:last-child .t-line::before{bottom:auto;height:calc(100% + 34px)} .t-line::after{ content:"";position:absolute;left:50%;top:11px;transform:translateX(-50%); width:13px;height:13px;border-radius:50%;background:var(--bg); border:2.5px solid var(--terracotta);z-index:2;transition:background .3s; } .t-item:hover .t-line::after{background:var(--terracotta)} .t-item.now .t-line::after{background:var(--terracotta);box-shadow:0 0 0 0 rgba(222,117,73,.5);animation:halo 2s ease-out infinite} @keyframes halo{to{box-shadow:0 0 0 13px rgba(222,117,73,0)}} .t-body{grid-area:1/3} .t-body h3{font-weight:720;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.03em;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .t-now{ font-size:.6rem;font-weight:800;letter-spacing:.18em;color:var(--ink-inverse); background:var(--sun);border-radius:999px;padding:5px 12px;text-transform:uppercase; } .t-role{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--turquoise);margin:8px 0 12px} .t-body p{color:var(--ink-soft);font-weight:300;max-width:62ch;font-size:.97rem} /* ============ CONTACT ============ */ #contact{ background:var(--abyss);color:var(--ink); border-radius:54px 54px 0 0;margin-top:60px; padding:130px 0 0;overflow:hidden; border-top:1px solid var(--line); } #contact.compact{padding-top:100px;margin-top:40px} .sunset{ position:absolute;left:50%;bottom:-30%;transform:translateX(-50%); width:min(900px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 50% 38%,rgba(232,166,76,.55),rgba(222,117,73,.22) 52%,transparent 72%); filter:blur(8px);animation:breathe 8s ease-in-out infinite alternate; } .c-waves{position:absolute;left:0;right:0;bottom:120px;opacity:.14;pointer-events:none} .c-waves svg{display:block;width:200%;animation:drift 14s linear infinite} .contact-inner{position:relative;text-align:center;z-index:2} .contact-label{justify-content:center;color:var(--sun)} .contact-label::before{background:var(--sun)} .contact-title{ font-weight:780; font-size:clamp(2.4rem,6.4vw,5rem);line-height:1.05;letter-spacing:-.045em; max-width:17em;margin-inline:auto; } .contact-title em{ font-style:italic;font-weight:650; background:linear-gradient(92deg,var(--sun),var(--terracotta)); -webkit-background-clip:text;background-clip:text;color:transparent; padding-right:.06em; } .contact-sub{color:color-mix(in srgb,var(--ink) 68%,transparent);font-weight:300;margin:24px auto 0;max-width:48ch} .contact-ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:44px} .btn-sand{background:var(--cream);color:var(--ink-inverse)} .btn-sand:hover{background:var(--sun)} .btn-line{border:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink)} .btn-line:hover{border-color:var(--sun);color:var(--sun)} .contact-meta{ display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-top:54px; font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:color-mix(in srgb,var(--ink) 55%,transparent); } .contact-meta a{border-bottom:1px solid transparent;transition:color .3s,border-color .3s} .contact-meta a:hover{color:var(--sun);border-color:var(--sun)} footer{ position:relative;margin-top:110px;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); padding:26px 0 30px;z-index:2; } #contact.compact footer{margin-top:80px} .foot-inner{ display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-size:.7rem;font-weight:500;letter-spacing:.12em; color:color-mix(in srgb,var(--ink) 50%,transparent);text-transform:uppercase; } .foot-inner .star{color:var(--sun)} /* ============ PROJECT PAGES ============ */ .pp-hero{position:relative;padding:180px 0 70px;overflow:hidden} .pp-hero .blob-1{width:480px;height:480px;top:-180px;right:-140px} .pp-hero .blob-2{width:420px;height:420px;bottom:-200px;left:-160px} .back{ display:inline-flex;align-items:center;gap:8px;margin-bottom:30px; font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-soft);transition:color .3s,gap .3s; } .back:hover{color:var(--leaf);gap:12px} .pp-title{ font-weight:780;font-size:clamp(2.4rem,6.4vw,4.8rem); line-height:1.02;letter-spacing:-.045em;max-width:18em;position:relative;z-index:2; } .pp-title em{font-style:italic;font-weight:650;color:var(--turquoise)} .pp-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;position:relative;z-index:2} .pp-intro{ max-width:62ch;margin-top:26px;font-size:clamp(1rem,1.35vw,1.14rem); color:var(--ink-soft);font-weight:300;position:relative;z-index:2; } .pp-intro strong{color:var(--ink);font-weight:600} .pp-meta{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px; margin-top:50px;padding-top:40px;border-top:1px solid var(--line);position:relative;z-index:2; } .pm{border-left:1.5px solid var(--line);padding-left:18px} .pm dt{font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px} .pm dd{font-weight:600;font-size:.94rem;letter-spacing:-.01em} .pp-hero-img{ margin-top:60px;border-radius:28px;overflow:hidden; border:1px solid var(--line);box-shadow:var(--shadow); background:var(--surface);position:relative;z-index:2; } .pp-hero-img img{width:100%} /* figure */ .pp-figure{ border-radius:26px;overflow:hidden;border:1px solid var(--line); background:var(--surface); } .pp-figure img{width:100%} .pp-figure figcaption{ padding:14px 22px;font-size:.68rem;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--line); } /* split rows */ .split{ display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; padding:64px 0;border-top:1px solid var(--line); } .split.first{border-top:none;padding-top:10px} .split h3{font-weight:740;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.035em;line-height:1.15} .split .kicker{ font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:var(--sun);margin-bottom:14px;display:block; } .split p{color:var(--ink-soft);font-weight:300;margin-top:14px} .check{margin-top:22px;display:flex;flex-direction:column;gap:12px} .check li{display:flex;gap:12px;color:var(--ink-soft);font-weight:300;align-items:flex-start} .check li::before{content:"✓";color:var(--leaf);font-weight:800;flex:none} /* steps / process */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .steps-4{grid-template-columns:repeat(4,1fr)} .step{ background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 26px; transition:transform .5s var(--ease),box-shadow .5s,border-color .5s; } .step:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--ink) 25%,transparent)} .step-num{font-style:italic;font-weight:850;font-size:2.1rem;line-height:1;color:var(--terracotta)} .step h4{margin:16px 0 8px;font-weight:700;letter-spacing:-.02em;font-size:1.08rem} .step p{font-size:.9rem;color:var(--ink-soft);font-weight:300} .mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px} .mini span{ font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft); } /* galleries */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .screens{ display:flex;gap:18px;overflow-x:auto;padding:6px 4px 18px; scroll-snap-type:x mandatory;scrollbar-color:var(--terracotta) transparent; } .screens::-webkit-scrollbar{height:8px} .screens::-webkit-scrollbar-track{background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:99px} .screens::-webkit-scrollbar-thumb{background:var(--terracotta);border-radius:99px} .screens > *{ flex:0 0 auto;width:232px;scroll-snap-align:start; border-radius:20px;border:1px solid var(--line);overflow:hidden;background:var(--surface); } .screens img{width:100%} .drag-hint{ margin-top:16px;text-align:center; font-size:.66rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft); } /* design tokens (sportai) */ .tokens{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .token{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px} .sw{width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);margin-bottom:18px} .token h4{font-weight:700;font-size:1rem;letter-spacing:-.01em} .token p{font-size:.84rem;color:var(--ink-soft);font-weight:300;margin:5px 0 12px} .token code{ font-size:.78rem;color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent); padding:4px 10px;border-radius:7px;letter-spacing:.06em; } /* skill bars (nextport) */ .skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px} .skill-group h4{ font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--sun);margin-bottom:18px; } .bar-row{display:grid;grid-template-columns:110px 1fr 42px;gap:14px;align-items:center;padding:8px 0} .bar-row label{font-size:.84rem;color:var(--ink-soft);font-weight:400} .bar{height:6px;background:color-mix(in srgb,var(--ink) 10%,transparent);border-radius:99px;overflow:hidden} .bar i{ display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--sea),var(--leaf)); transition:width 1.3s var(--ease) .2s; } .bar-row.in .bar i{width:var(--w)} .bar-val{font-size:.72rem;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums} .certs{margin-top:6px} .certs li{ display:flex;justify-content:space-between;gap:16px;align-items:baseline; border-bottom:1px solid var(--line);padding:15px 4px;font-weight:400;font-size:.95rem; } .certs li span{color:var(--terracotta);font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums} /* quote (outcome) */ .quote{ font-size:clamp(1.4rem,3vw,2.2rem);font-style:italic;font-weight:560; line-height:1.42;letter-spacing:-.02em;max-width:30em; } .quote em{ font-style:italic; background:linear-gradient(92deg,var(--sun),var(--terracotta)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* next project */ .next{ display:flex;justify-content:space-between;align-items:center;gap:24px; padding:46px 44px;border:1px solid var(--line);border-radius:28px; background:var(--next-grad); transition:transform .5s var(--ease),box-shadow .5s,border-color .5s; } .next:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:var(--terracotta)} .next .nx-label{ font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:var(--sun);display:block;margin-bottom:10px; } .next h3{font-weight:760;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-.04em;line-height:1.1} .next .card-cta{width:64px;height:64px;font-size:1.3rem} .next:hover .card-cta{background:var(--terracotta);border-color:var(--terracotta);color:#FFF3E6;transform:rotate(45deg)} /* ============ REVEALS & MISC ============ */ .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s ease,transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} .sec-num{ position:absolute;top:60px;right:4vw;pointer-events:none; font-style:italic;font-weight:850; font-size:clamp(5rem,12vw,10rem);line-height:1;color:var(--ink);opacity:.045; letter-spacing:-.05em; } /* cursor */ .cursor-dot,.cursor-ring{display:none} @media (hover:hover) and (pointer:fine){ .cursor-dot{ display:block;position:fixed;z-index:999;width:8px;height:8px;border-radius:50%; background:var(--terracotta);pointer-events:none;transform:translate(-50%,-50%); left:0;top:0; } .cursor-ring{ display:flex;align-items:center;justify-content:center; position:fixed;z-index:999;width:38px;height:38px;border-radius:50%; border:1.5px solid rgba(222,117,73,.75);pointer-events:none;transform:translate(-50%,-50%); left:0;top:0;transition:width .3s,height .3s,border-color .3s,background .3s; } .cursor-ring.grow{width:72px;height:72px;border-color:var(--turquoise);background:rgba(86,201,152,.1)} } /* ============ RESPONSIVE ============ */ @media (max-width:1020px){ .card-w7,.card-w5{grid-column:span 12} .steps,.steps-4{grid-template-columns:repeat(2,1fr)} .skills-grid{grid-template-columns:1fr;gap:34px} .tokens{grid-template-columns:1fr} .pp-meta{grid-template-columns:repeat(2,1fr);gap:28px 20px} } @media (max-width:900px){ .nav-links,.nav .nav-cta,.nav .theme-toggle,.nav-back{display:none} .burger{display:block;margin-left:auto} /* nav sin hamburguesa (kimera): conserva back, CTA y toggle */ .nav-simple .nav-back{display:inline-flex} .nav-simple .nav-cta{display:inline-flex} .nav-simple .theme-toggle{display:block} .nav-simple .nav-back-label{display:none} .nav-simple .nav-cta{padding:10px 16px;font-size:.88rem} .hero{padding-top:130px} .hero-grid{grid-template-columns:1fr;gap:64px} .portrait{width:min(340px,80vw)} .badge-avail{left:-10px} .badge-work{right:-10px} .rotor{left:-14px;width:104px;height:104px} .hero-meta{display:none} .frond{display:none} .about-foot{grid-template-columns:1fr;gap:48px} .values{grid-template-columns:1fr;gap:18px} .value-card{border-radius:90px 90px 20px 20px;padding:40px 24px 28px} .sec-head{flex-direction:column;align-items:flex-start} .t-item{grid-template-columns:26px 1fr;gap:0 20px;padding:26px 4px} .t-line{grid-area:1/1} .t-year{grid-area:1/2;padding-top:0;color:var(--terracotta)} .t-body{grid-area:2/2;margin-top:6px} .t-line::before{top:-26px;bottom:-26px} section{padding:84px 0} .stats{grid-template-columns:1fr 1fr} .scroll-hint{display:none} .pp-hero{padding:150px 0 50px} .split{grid-template-columns:1fr;gap:30px;padding:48px 0} .split .split-img{order:-1} .steps,.steps-4{grid-template-columns:1fr} .grid-2,.grid-3{grid-template-columns:1fr} .next{padding:34px 28px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal,.line .up{opacity:1!important;transform:none!important} .bar-row.in .bar i{width:var(--w)!important} html{scroll-behavior:auto} }