/* Styles base para imitar diseño del mockup */
:root{
  --bg:#f5f5f5;
  --card:#ffffff;
  --text:#222;
  --muted:#777;
  --accent:#e91e63;
  --glass-bg: rgba(250,250,250,0.75);
  --glass-border: rgba(0,0,0,0.06);
  --glass-shadow: rgba(16,16,16,0.08);
  --transition-fast: 200ms;
  /* Wave colors (decorative) */
  --wave-1: rgba(233,30,99,0.12);
  --wave-2: rgba(233,30,99,0.08);
  --wave-3: rgba(233,30,99,0.04);
}
*{box-sizing:border-box}
.html,body{height:100%;font-family:Poppins,system-ui,Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:var(--text)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 48px;position:relative}
.nav-left{display:none;gap:20px;list-style:none;margin:0;padding:0}
.nav-left a{color:var(--text);text-decoration:none}
.nav-left.open{display:flex;flex-direction:column;position:absolute;left:16px;top:64px;background:var(--card);padding:12px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:120}
.nav-left.open a{padding:8px 12px}
.logo{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#111;color:#fff;font-weight:700}
.logo{position:relative;overflow:visible;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#111;color:#fff;font-weight:700}
.logo .letter{display:inline-block;transform-origin:center;transition:transform .28s cubic-bezier(.1,.9,.2,1),opacity .28s}
.logo:hover .letter{ /* fallback subtle hover */ }
.logo .letter.reset{transform:none}
/* ring effect on demand */
.logo::after{content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.logo.ring::after{animation:arc-ring 900ms ease-out forwards}
@keyframes arc-ring{
  0%{box-shadow:0 0 0 0 rgba(233,30,99,0.28);opacity:1}
  40%{width:84px;height:84px;box-shadow:0 0 22px 6px rgba(233,30,99,0.14);opacity:.6}
  100%{width:140px;height:140px;box-shadow:0 0 44px 18px rgba(233,30,99,0);opacity:0}
}
.socials{display:flex;gap:12px;align-items:center}
.hamburger{background:none;border:0;font-size:22px;padding:6px;border-radius:6px;cursor:pointer}

/* Hero */
.hero{padding:48px 6%;position:relative;overflow:visible;padding-bottom:140px}
.hero-inner{display:flex;gap:20px;align-items:center;justify-content:space-between}

/* Wave container and animations */
.wave-container{position:absolute;left:0;right:0;bottom:-1px;height:140px;overflow:hidden;pointer-events:none;z-index:10}
.waves{width:200%;height:100%;display:block}
.wave{transform-origin:0 0;will-change:transform;opacity:1}
.wave1{fill:var(--wave-1);animation:waveMove 10s linear infinite}
.wave2{fill:var(--wave-2);animation:waveMove 14s linear infinite}
.wave3{fill:var(--wave-3);animation:waveMove 20s linear infinite}

@keyframes waveMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wave1,.wave2,.wave3{animation:none}
}
.hero-left{position:relative;width:48%}
.portrait-frame{width:320px;height:420px;border-radius:20px;padding:22px;background:#fff;border:4px solid #111;box-shadow:18px 18px 0 rgba(0,0,0,.2);}
.portrait-frame img{width:100%;height:100%;object-fit:cover;border-radius:12px}
/* Removed circular 'Vamos!' badge (.rotator) — using two image cards instead */
.hero-right{width:48%}
.hero-right h1{font-size:48px;line-height:1.02;margin:0 0 18px;font-weight:900}
.novedad{font-size:72px;line-height:1.02;margin:0 0 8px;font-weight:900}
.lead{color:var(--muted);max-width:520px;font-size:18px;margin:0}
.cta{margin-top:18px;display:flex;gap:18px;align-items:center}
.btn{background:#111;color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none}
.link{color:var(--text);text-decoration:underline}

/* About section */
.section-title{text-align:center;font-size:64px;margin:28px 0 18px;font-weight:900}
.about{padding:48px 6%}
.about-grid{display:grid;grid-template-columns:1fr 460px 240px;gap:32px;align-items:center}
.about-grid .frame-large{z-index:1}
.about-grid .stats{z-index:2}
.bio h3{color:var(--muted);letter-spacing:1px}
.bio p{color:var(--text);line-height:1.7}
.frame-large{border-radius:20px;padding:26px;background:#fff;border:4px solid #111;box-shadow:14px 14px 0 rgba(0,0,0,.2)}
.frame-large img{width:100%;height:420px;object-fit:cover;border-radius:12px}
.stats{display:flex;flex-direction:column;gap:28px}
.stat{display:flex;flex-direction:column;align-items:flex-end}
.big{font-size:46px;font-weight:900}
.label{color:var(--muted)}

/* Projects */
.projects{padding:0 6% 120px;display:flex;flex-direction:column;gap:48px;margin-top:-40px}
.project-card{background:#111;border-radius:20px;padding:28px;color:#fff;display:flex;gap:24px;align-items:center;box-shadow:14px 14px 0 rgba(0,0,0,.25)}
.project-media{width:44%;height:260px;background-size:cover;background-position:center;border-radius:12px}
.project-body{flex:1}
.kicker{color:#3dd8c8;margin-bottom:8px}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(18px);transition:all .7s cubic-bezier(.2,.9,.3,1);will-change:opacity,transform}
.reveal.visible{opacity:1;transform:none}

/* Dropdown animation */
@keyframes dropDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-left.open{animation:dropDown .22s ease-out}

/* Hover & subtle animations */
.project-card{transition:transform .36s ease,box-shadow .36s ease}
.project-card:hover{transform:translateY(-6px);box-shadow:20px 24px 40px rgba(0,0,0,.32)}
.portrait-frame img,.frame-large img{transition:transform .6s cubic-bezier(.2,.9,.3,1)}
.portrait-frame img:hover,.frame-large img:hover{transform:scale(1.03)}

/* Hero cards layout (two framed image-like cards) */
.hero-cards{display:flex;gap:28px;align-items:center;justify-content:center;width:100%}
.card-large{width:360px;height:480px;border-radius:20px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06));border:4px solid rgba(255,255,255,0.06);box-shadow:18px 20px 30px rgba(0,0,0,.35)}
.card-large{transform-style:preserve-3d;will-change:transform;transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.card-label{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:56px;font-weight:900;text-align:center;transition:transform .45s cubic-bezier(.2,.9,.3,1)}

/* Gentle floating idle animation for cards */
@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.card-large{animation:floatY 6s ease-in-out infinite}

/* Slight lag/hover boost */
.card-large:hover{transition:transform .28s cubic-bezier(.2,.9,.3,1);transform:translateY(-6px) scale(1.02)}

/* Make hero container provide perspective for 3D parallax */
.hero-cards{perspective:900px;transform-style:preserve-3d}

@media (max-width:960px){
  .card-large{width:100%;height:360px}
  .card-label{font-size:36px}
}

/* Footer */
.site-footer{padding:28px 6%;text-align:center;color:var(--muted)}

/* Dark mode */
body.dark{--bg:#161616;--card:#222;--text:#f5f5f5;--muted:#bdbdbd}
body.dark .project-card{background:#222}
/* Dark-mode overrides for glass variables */
body.dark{
  --glass-bg: rgba(34,34,34,0.45);
  --glass-border: rgba(255,255,255,0.06);
  --glass-shadow: rgba(0,0,0,0.6);
}

/* Ensure text contrast on glass cards */
.project-card{color:var(--text)}
.portrait-frame, .frame-large{color:var(--text)}

/* Responsive */
@media (max-width:960px){
  .nav{padding:16px}
  .hero-inner{flex-direction:column}
  .hero-left,.hero-right{width:100%}
  .section-title{font-size:44px}
  .about-grid{grid-template-columns:1fr;}
  .portrait-frame{width:100%;height:360px}
  .frame-large img{height:320px}
  .about-grid{row-gap:26px}
  .stats{order:3;align-items:flex-start}
  .project-card{flex-direction:column}
  .project-media{width:100%;height:220px}
}

@media (max-width:960px){
  .novedad{font-size:44px}
  .lead{font-size:16px}
}

/* Glassmorphism / Liquid glass effect */
.glass{
  background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.25));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 30px var(--glass-shadow);
}

/* Apply glass to common elements */
.portrait-frame, .frame-large, .project-card, .site-footer, .nav-left.open, .btn{
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* Ensure project-body text is readable over images */
.project-card .project-body{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  padding: 12px 10px;
  border-radius: 10px;
}
.project-card .project-body h3{color:var(--text);margin:0 0 8px}
.project-card .project-body p{color:var(--muted);margin:0}

/* For cards with light backgrounds ensure dark text */
.project-card[style*="background:#fff"], .project-card.light{
  color: #111;
}

/* Large stacked project blocks (NEXTCLOUD / MINECRAFT) */
.project-card.project-large{display:flex;align-items:center;justify-content:center;padding:44px;border-radius:18px;height:220px;text-decoration:none}
.project-card.project-large .large-title{font-size:72px;font-weight:900;letter-spacing:2px;text-align:center}

.bg-nextcloud{background:linear-gradient(135deg,#e6f8ff,#cfefff);color:#042f4f}
.bg-minecraft{background:linear-gradient(135deg,#f0fff0,#d6f5d6);color:#0b4d13}

/* PIHOLE card: light red/pink tone */
.bg-pihole{background:linear-gradient(135deg,#ffecec,#ffd6d6);color:#4a0000}

.site-footer{position:relative;z-index:20}

@media (max-width:960px){
  .project-card.project-large{height:160px;padding:28px}
  .project-card.project-large .large-title{font-size:48px}
  .projects{gap:28px}
}

/* Hover-bubble that wraps the hovered card */
.card-bubble{position:absolute;pointer-events:none;border-radius:16px;border:2px solid rgba(255,255,255,0.45);box-shadow:0 18px 40px rgba(0,0,0,.18);transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .22s ease,top .12s linear,left .12s linear;width:100%;height:100%;inset:0}
.card-bubble.glow{border:2px solid rgba(233,30,99,0.9);box-shadow:0 18px 48px rgba(233,30,99,0.14),0 6px 18px rgba(0,0,0,.12)}

/* Make sure card containers are positioned relative to support absolute bubble */
.project-card,.portrait-frame,.frame-large,.bio{position:relative}

/* Sheen animation for liquid glass */
.glass-sheen{position:relative;overflow:hidden}
.glass-sheen::after{
  content:'';position:absolute;inset:0;pointer-events:none;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.02) 100%);transition:transform .9s cubic-bezier(.2,.9,.3,1);}
.glass-sheen:hover::after{transform:translateX(120%)}

/* Stronger hover scale for cards */
.project-card{transform:translateY(0);will-change:transform,box-shadow}
.project-card:hover{transform:translateY(-14px) scale(1.02);box-shadow:28px 40px 60px rgba(0,0,0,.45)}

/* Parallax helper */
.parallax{will-change:transform}

/* Smooth theme transitions */
body, .nav, .project-card, .portrait-frame, .frame-large, .site-footer{transition:background-color .55s cubic-bezier(.2,.9,.3,1), color .45s ease, box-shadow .45s ease}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .project-card,.reveal,.glass-sheen::after{transition:none!important;animation:none!important}
}

@media (prefers-reduced-motion: reduce){
  .card-large{animation:none!important;transition:none!important}
  .card-label{transition:none!important}
}

/* Improve dropdown readability on light backgrounds */
.nav-left.open{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.9));border:1px solid rgba(0,0,0,0.06);padding:10px}
.nav-left.open a{color:var(--text);padding:8px 12px;display:block}

/* Dark mode menu overrides: ensure hamburger and menu text are visible */
body.dark .hamburger{color:var(--text)}
body.dark .nav-left.open{background:linear-gradient(180deg, rgba(20,20,20,0.85), rgba(18,18,18,0.9));border:1px solid rgba(255,255,255,0.04)}
body.dark .nav-left.open a{color:var(--text)}

/* Modal (credenciales) */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:28px;z-index:400;opacity:0;pointer-events:none;transition:opacity .22s ease}
.modal.open{opacity:1;pointer-events:auto;background:rgba(0,0,0,0.45)}
.modal-content{max-width:520px;width:100%;border-radius:14px;padding:20px;position:relative}
.modal-header{font-weight:700;margin-bottom:8px}
.modal-body{color:var(--text);line-height:1.6}
.modal-footer{display:flex;justify-content:flex-end;margin-top:14px;gap:8px}
.modal .close-btn{background:transparent;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
.modal .primary-btn{background:#e91e63;color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}

/* Coming soon styling */
.coming-soon{font-size:48px;font-weight:900;text-align:center;letter-spacing:1px;color:var(--text)}

/* Wave animation for title letters */
.wave-letter{display:inline-block;animation-name:wave;animation-duration:1800ms;animation-timing-function:cubic-bezier(.2,.9,.3,1);animation-iteration-count:infinite;animation-fill-mode:both}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Slightly reduce motion on small screens */
@media (max-width:960px){
  .coming-soon{font-size:36px}
}

/* loading dots next to coming-soon */
.loading-dots{display:inline-block;width:48px;margin-left:8px;color:var(--muted);font-weight:700}
.loading-dots::after{content:"...";opacity:0;animation:dotFade 1200ms infinite steps(3, end)}
@keyframes dotFade{0%{opacity:0}33%{opacity:.33}66%{opacity:.66}100%{opacity:1}}

/* Social blocks (reusable with project-card/project-large) */
.social-section{padding:12px 6% 48px}
.social-content{display:flex;align-items:center;justify-content:space-between;width:100%;gap:18px}
.social-logo{width:72px;height:72px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 72px;overflow:hidden}
.social-logo svg{width:56px;height:56px;display:block}
.social-logo img{width:56px;height:56px;object-fit:cover;display:block}

/* Instagram-like gradient border for the default social logo */
.project-card.bg-social-default .social-logo{
  padding:6px;
  border-radius:18px;
  background: linear-gradient(135deg,#f58529 0%,#dd2a7b 50%,#8134af 100%);
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.project-card.bg-social-default .social-logo img{
  width:56px;height:56px;border-radius:12px;object-fit:cover;background:#fff;display:block;padding:2px
}
.social-arrow{color:#1e88ff;font-size:36px;flex:0 0 44px;display:flex;align-items:center;justify-content:center}
.bg-instagram{background:linear-gradient(135deg,#f58529 0%,#dd2a7b 50%,#8134af 100%);color:#fff}
.bg-social-default{background:linear-gradient(135deg,#f7f7f7 0%,#ededed 100%);color:#111}

/* Ensure project-body remains centered for these social blocks */
.social-section .project-body{display:flex;align-items:center;justify-content:center}

/* Subtle hosted label for project cards */
.project-card .hosted-label{margin-top:8px;color:var(--muted);font-size:13px;font-weight:600;opacity:0.85;letter-spacing:0.2px}
.project-card.project-large .hosted-label{font-size:14px}