:root{
  --bg: #faf9f7;
  --surface: #ffffff;
  --text: #16171b;
  --muted: #6b6f76;
  --line: #e7e5e1;
  --accent: #4b3cf0;
  --accent-soft: #eeecfd;
  --accent-2: #e0342d;
  --accent-2-soft: #fdeceb;
  --radius: 14px;
  --max: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

.accent{color:var(--accent);}

/* ===== NAV ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,249,247,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.logo{
  font-family:'Fraunces', serif;
  font-size:22px; letter-spacing:1.5px;
}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:500;}
.nav-links a{color:var(--muted); transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.nav-cta{
  background:var(--text); color:#fff !important;
  padding:9px 18px; border-radius:100px;
}
.nav-cta:hover{background:var(--accent) !important;}

.burger{
  display:none; flex-direction:column; gap:5px;
  width:26px; background:none; border:none; cursor:pointer; padding:8px;
}
.burger span{width:100%; height:2px; background:var(--text); border-radius:2px; transition:.25s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== HERO ===== */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter:grayscale(.35) brightness(.92);
}
.hero-bg-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(250,249,247,.88) 55%, var(--bg) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:150px 24px 60px;
  text-align:left;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; letter-spacing:.03em;
  padding:7px 14px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
}
.tag-live{color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft);}
.live-dot{
  position:relative; display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}
.tag-location{
  position:absolute; top:158px; right:24px;
  transform:rotate(4deg);
  border-style:dashed;
}

.hero-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(64px, 13vw, 148px);
  line-height:0.88;
  letter-spacing:-1px;
  margin-top:28px;
}
.hero-title em{
  font-style:italic; font-weight:500; color:var(--accent-2);
}
.hero-sub{
  margin-top:20px; font-size:clamp(16px,2.4vw,20px); color:var(--muted); font-weight:500;
}
.handle{color:var(--text); font-weight:700;}

.hero-stats{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:14px 44px;
  margin:60px 0 0;
}
.stat{text-align:left;}
.stat:nth-child(2n){transform:translateY(12px);}
.stat:nth-child(3){transform:translateY(-6px);}
.stat-num{
  display:block; font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(26px,3.6vw,40px); letter-spacing:-.5px;
}
.stat-label{
  display:block; font-size:11.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin-top:2px;
}

.hero-cta{
  display:flex; justify-content:flex-start; gap:14px; margin-top:44px; flex-wrap:wrap;
}
.btn{
  padding:14px 28px; border-radius:100px; font-weight:600; font-size:15px;
  transition:transform .15s, background .2s, color .2s, border-color .2s;
  display:inline-block;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--text); color:#fff;}
.btn-primary:hover{background:var(--accent);}
.btn-outline{border:1.5px solid var(--line); color:var(--text);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}

.btn-glow{
  background:var(--accent-2); color:#fff;
  box-shadow:0 0 0 0 rgba(224,52,45,.55);
  animation:btn-glow-pulse 2.2s ease-in-out infinite;
}
.btn-glow:hover{background:var(--accent-2); transform:translateY(-2px) scale(1.03);}
@keyframes btn-glow-pulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(224,52,45,.55), 0 4px 14px rgba(224,52,45,.35);}
  50%{box-shadow:0 0 0 10px rgba(224,52,45,0), 0 4px 22px rgba(224,52,45,.5);}
}

/* ===== PLACEHOLDER (visual boxes for future photos/videos) ===== */
.media-placeholder{
  position:relative; width:100%;
  background:repeating-linear-gradient(135deg, #f1efeb, #f1efeb 10px, #e9e6e0 10px, #e9e6e0 20px);
  border:1.5px dashed #cfccc4;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.media-placeholder::after{
  content: attr(data-label);
  font-size:12.5px; font-weight:600; color:#8a877f;
  background:#fff; padding:6px 12px; border-radius:8px;
  text-align:center; max-width:80%;
}

/* Cuando el placeholder se sustituye por <img> o <video> real,
   conserva el tamaño/redondeado pero quita el rayado y la etiqueta */
img.media-placeholder, video.media-placeholder{
  background:none; border:none; object-fit:cover; display:block; width:100%;
}
img.media-placeholder::after, video.media-placeholder::after{content:none;}

/* Al pulsar pantalla completa, ignora el aspect-ratio/overflow de la tarjeta
   para que el vídeo ocupe toda la pantalla en lugar de quedarse recortado */
video.media-placeholder:fullscreen,
video.media-placeholder:-webkit-full-screen{
  width:100vw; height:100vh; max-width:none; aspect-ratio:auto; object-fit:contain;
}

/* ===== MARQUEE ===== */
.marquee-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:28px 0; overflow:hidden; background:var(--surface);
}
.marquee-heading{
  text-align:center; font-size:12.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px;
}
.marquee{display:flex; flex-direction:column; gap:14px;}
.marquee-track{
  display:flex; gap:12px; white-space:nowrap; width:max-content;
}
.marquee-track.row-1{animation:scroll-left 38s linear infinite;}
.marquee-track.row-2{animation:scroll-right 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}

.chip{
  display:inline-flex; align-items:center;
  padding:10px 20px; border-radius:100px;
  border:1.5px solid var(--line);
  font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:clamp(12.5px,1.4vw,14.5px); letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted);
  transition:.2s ease;
}
.chip:hover{transform:translateY(-2px); color:#fff;}
.row-1 .chip:nth-child(3n+1){border-color:var(--accent-soft); color:var(--accent);}
.row-1 .chip:nth-child(3n+1):hover{background:var(--accent); border-color:var(--accent);}
.row-1 .chip:nth-child(3n+2){border-color:var(--accent-2-soft); color:var(--accent-2);}
.row-1 .chip:nth-child(3n+2):hover{background:var(--accent-2); border-color:var(--accent-2);}
.row-1 .chip:nth-child(3n){border-color:var(--line); color:var(--muted);}
.row-1 .chip:nth-child(3n):hover{background:var(--text); border-color:var(--text);}
.row-2 .chip:nth-child(3n+1){border-color:var(--accent-2-soft); color:var(--accent-2);}
.row-2 .chip:nth-child(3n+1):hover{background:var(--accent-2); border-color:var(--accent-2);}
.row-2 .chip:nth-child(3n+2){border-color:var(--line); color:var(--muted);}
.row-2 .chip:nth-child(3n+2):hover{background:var(--text); border-color:var(--text);}
.row-2 .chip:nth-child(3n){border-color:var(--accent-soft); color:var(--accent);}
.row-2 .chip:nth-child(3n):hover{background:var(--accent); border-color:var(--accent);}

@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes scroll-right{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

/* ===== SECTIONS ===== */
.section{
  max-width:var(--max); margin:0 auto; padding:110px 24px;
  position:relative;
}
.section-alt{background:var(--surface);}
.section-num{
  position:absolute; top:6px; left:24px; z-index:0;
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  font-size:clamp(90px,15vw,190px); line-height:1;
  color:var(--line); letter-spacing:0;
  pointer-events:none; user-select:none;
}
.section-title{
  position:relative; z-index:1;
  font-family:'Fraunces', serif;
  font-size:clamp(34px,5vw,56px);
  margin-top:8px; margin-bottom:48px; letter-spacing:-.5px;
}
.section-note{
  margin-top:-32px; margin-bottom:40px; color:var(--muted); font-size:14px; font-style:italic;
}
.subsection-title{
  font-family:'Fraunces', serif;
  font-size:clamp(22px,3vw,28px); letter-spacing:.5px;
  margin:56px 0 28px;
}
.tool-list{font-weight:600; color:var(--text) !important;}

/* ===== ABOUT ===== */
.about-grid{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start;
}
.about-photo{aspect-ratio:4/5; border-radius:var(--radius);}
.about-copy p{color:var(--muted); margin-bottom:18px; font-size:16px;}
.highlight{
  font-weight:600; color:var(--text); padding:0 3px; box-decoration-break:clone;
  background-image:linear-gradient(var(--accent-2-soft), var(--accent-2-soft));
  background-repeat:no-repeat; background-size:100% 42%; background-position:0 85%;
}
.about-copy strong{color:var(--text);}
.about-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px;
}
.about-stats > div{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:16px 10px; text-align:center;
}

/* ===== CONTENT GRID ===== */
.content-grid, .project-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
.content-card, .project-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; transition:transform .25s, box-shadow .25s;
}
.content-card:hover, .project-card:hover{
  transform:translateY(-4px) rotate(-.6deg); box-shadow:0 14px 32px rgba(20,20,20,.08);
}
.content-grid > *:nth-child(2n):hover, .project-grid > *:nth-child(2n):hover{
  transform:translateY(-4px) rotate(.6deg);
}
.card-tag{
  font-size:11.5px; font-weight:700; color:var(--accent);
  letter-spacing:.06em; text-transform:uppercase;
}
.card-thumb{aspect-ratio:16/10; border-radius:10px; margin:14px 0;}
.content-card h3, .project-card h3{font-size:19px; margin-bottom:8px; margin-top:6px;}
.card-brand{
  font-family:'Fraunces', serif; font-size:26px; letter-spacing:.5px;
  margin:0;
}
.content-card p, .project-card p{color:var(--muted); font-size:14.5px;}
.card-stats{
  margin-top:16px; padding-top:18px; border-top:1px solid var(--line);
  text-align:center;
}
.stat-big{
  display:block; font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(30px,4vw,44px); letter-spacing:-.5px; color:var(--accent-2);
  line-height:1;
}
.stat-big-label{
  display:block; margin-top:4px; font-size:11.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em;
}
.platform-stats{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.platform-stat{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color:var(--text);
}
.pico{width:16px; height:16px; flex-shrink:0;}
.link-arrow{
  display:inline-block; margin-top:14px; font-weight:600; font-size:14.5px; color:var(--accent);
}

/* ===== GALLERY ===== */
.gallery{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.gallery-item{aspect-ratio:3/4; border-radius:10px;}

/* ===== CONTACT ===== */
.contact{text-align:center;}
.contact-sub{color:var(--muted); max-width:520px; margin:0 auto 36px; font-size:16px;}
.contact-links{
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.contact-links a{
  font-size:clamp(16px,3vw,22px); font-weight:600;
  padding:6px 0; border-bottom:1px solid transparent; transition:border-color .2s, color .2s;
}
.contact-links a:hover{color:var(--accent); border-color:var(--accent);}

.footer{
  text-align:center; padding:32px 24px; color:var(--muted); font-size:13px;
  border-top:1px solid var(--line);
}

/* ===== EMAIL COPY BUTTON ===== */
.email-row{display:flex; align-items:center; justify-content:center; gap:10px;}
.copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:100px;
  padding:7px 14px; font-size:13px; font-weight:600; color:var(--muted);
  cursor:pointer; transition:.2s;
}
.copy-btn:hover{border-color:var(--accent); color:var(--accent);}
.copy-btn.copied{border-color:#1e9e5a; color:#1e9e5a;}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--accent); z-index:200; pointer-events:none;
}

/* ===== GRAIN TEXTURE ===== */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.035;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  mix-blend-mode:multiply;
}

/* ===== CORNER MARKS (detalle cinematográfico) ===== */
.corner-marks{position:fixed; inset:0; z-index:5; pointer-events:none;}
.corner{position:absolute; width:18px; height:18px; opacity:.35;}
.corner.tl{top:14px; left:14px; border-top:1.5px solid var(--muted); border-left:1.5px solid var(--muted);}
.corner.tr{top:14px; right:14px; border-top:1.5px solid var(--muted); border-right:1.5px solid var(--muted);}
.corner.bl{bottom:14px; left:14px; border-bottom:1.5px solid var(--muted); border-left:1.5px solid var(--muted);}
.corner.br{bottom:14px; right:14px; border-bottom:1.5px solid var(--muted); border-right:1.5px solid var(--muted);}

/* ===== VIDEO THUMBNAILS: hover preview + lightbox ===== */
.thumb-wrap{position:relative; cursor:pointer; margin:14px 0;}
.thumb-wrap .card-thumb{margin:0;}
.thumb-wrap::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transition:opacity .2s, transform .2s;
}
.thumb-wrap::before{
  content:''; position:absolute; top:50%; left:calc(50% + 3px); transform:translate(-50%,-50%);
  width:0; height:0; z-index:1;
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  border-left:16px solid var(--text);
  transition:opacity .2s;
}
.thumb-wrap:hover::after, .thumb-wrap:hover::before{opacity:0; transform:translate(-50%,-50%) scale(.8);}

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,10,12,.92); padding:40px;
}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:min(90vw, 720px); width:100%;}
.lightbox-inner video{width:100%; max-height:85vh; border-radius:10px; display:block; background:#000;}
.lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:none;
  color:#fff; font-size:36px; line-height:1; cursor:pointer; opacity:.8;
}
.lightbox-close:hover{opacity:1;}

/* ===================================================================
   RESPONSIVE — MOBILE
==================================================================== */
@media (max-width: 860px){
  .about-grid{grid-template-columns:1fr;}
  .content-grid, .project-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(3,1fr);}
  .about-stats{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 720px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--surface); flex-direction:column; align-items:flex-start;
    padding:100px 32px 32px; gap:26px; font-size:17px;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-8px 0 30px rgba(0,0,0,.08);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-cta{padding:12px 20px;}
  .burger{display:flex;}

  .hero-inner{padding-top:120px;}
  .tag-location{position:static; display:inline-flex; transform:none; margin:10px 0 0;}
  .hero-stats{gap:14px 28px;}

  .section{padding:72px 20px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 420px){
  .tag{font-size:11px; padding:6px 10px;}
}