/* ─────────────────────────────────────────────────────────────
   VILLA LABS — styles.css
   ───────────────────────────────────────────────────────────── */

:root {
  --bg:        #0b1a0c;
  --bg2:       #0f2010;
  --bg3:       #071308;
  --green:     #8fff3a;
  --green-dim: #4e9020;
  --cream:     #f2e8d5;
  --cream-dim: #a89880;
  --border:    rgba(242,232,213,0.1);
  --border-g:  rgba(143,255,58,0.18);
  --serif:     'Cormorant Garamond', Georgia, serif;
  --mono:      'DM Mono', 'Courier New', monospace;
  --pad:       clamp(1.5rem, 5vw, 5rem);
}


* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  max-width: 100vw;
}

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:200; opacity:0.3;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── NAV ─────────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.4rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  background:rgba(7,19,8,0.82);
}
.nav-logo { font-family:var(--serif); font-size:1.2rem; font-weight:600; letter-spacing:0.08em; color:var(--cream); text-decoration:none; }
.nav-logo span { color:var(--green); }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { color:var(--cream-dim); text-decoration:none; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover { color:var(--green); }
.nav-right { display:flex; align-items:center; gap:1.5rem; }
.lang-toggle { display:flex; align-items:center; border:1px solid var(--border); }
.lang-btn { padding:0.4rem 0.75rem; background:transparent; border:none; cursor:pointer; color:var(--cream-dim); font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; transition:color 0.2s,background 0.2s; }
.lang-btn.active { background:var(--green); color:var(--bg); }
.lang-btn:not(.active):hover { color:var(--cream); }
.lang-divider { width:1px; height:1.4rem; background:var(--border); }
.nav-cta { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bg); background:var(--green); border:none; padding:0.6rem 1.4rem; cursor:pointer; text-decoration:none; transition:opacity 0.2s; white-space:nowrap; }
.nav-cta:hover { opacity:0.85; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position:relative;
  height:100vh; min-height:640px;
  overflow:hidden; cursor:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) 4rem;
  /* CSS background = always-visible base layer, no WebGL dependency */
  background-color: var(--bg3);
  background-image: url('../images/Sea_-_Old.png');
  background-size: cover;
  background-position: center center;
}
#hero-canvas {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  display:block; z-index:0;
  cursor:none; pointer-events:none;
  /* transparent canvas — only shows video reveal, not the base image */
}
.hero-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(7,19,8,0.97) 0%, rgba(7,19,8,0.6) 45%, rgba(7,19,8,0.3) 100%);
}
.hero-content { position:relative; z-index:2; }
.hero-eyebrow {
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--green); margin-bottom:1.5rem;
  display:flex; align-items:center; gap:1rem;
}
.hero-eyebrow::before { content:''; display:block; width:36px; height:1px; background:var(--green); }
.hero-headline {
  font-family:var(--serif);
  font-size:clamp(3.5rem, 8.5vw, 9rem);
  font-weight:300; line-height:0.93;
  letter-spacing:-0.02em;
  color:var(--cream); margin-bottom:3rem;
}
.hero-headline em { font-style:italic; color:var(--green); }
.hero-tagline {
  font-size:15px; color:rgba(242,232,213,0.7);
  max-width:650px; line-height:1.7;
  border-left:2px solid var(--green);
  padding-left:1.5rem; margin-bottom:2.5rem;
}
.hero-tagline strong { color:var(--cream); font-weight:400; }
.hero-bottom {
  display:flex; gap:3rem;
  border-top:1px solid rgba(242,232,213,0.12);
  padding-top:2rem;
}
.hero-stat { display:flex; flex-direction:column; gap:0.2rem; }
.hero-stat-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream-dim); }
.hero-stat-value { font-family:var(--serif); font-size:1rem; font-weight:400; color:var(--cream); }
.scroll-hint {
  position:absolute; right:var(--pad); bottom:4rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  color:var(--cream-dim); font-size:10px; letter-spacing:0.15em; text-transform:uppercase;
  pointer-events:none;
}
.scroll-line { width:1px; height:50px; background:linear-gradient(to bottom,var(--green),transparent); animation:scrollDown 2s ease-in-out infinite; }
@keyframes scrollDown { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.3} }

/* ── TICKER ──────────────────────────────────────────────────── */
.ticker { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:0.85rem 0; background:var(--bg2); position:relative; z-index:1; }
.ticker-track { display:flex; animation:tickerMove 28s linear infinite; white-space:nowrap; }
.ticker-item { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream-dim); padding:0 3rem; display:flex; align-items:center; gap:3rem; }
.ticker-item::after { content:'·'; color:var(--green); font-size:1.3rem; line-height:0; }
@keyframes tickerMove { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SECTION BASE ────────────────────────────────────────────── */
section { position:relative; z-index:1; padding:7rem var(--pad); border-top:1px solid var(--border); }
section.alt { background:var(--bg2); }
section.dark { background:#0d1f0e; }

.section-label {
  font-size:10px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--green); margin-bottom:3rem;
  display:flex; align-items:center; gap:1rem;
}
.section-label::after { content:''; flex:1; max-width:50px; height:1px; background:var(--border-g); }

/* ── APERTURA ────────────────────────────────────────────────── */
.apertura {
  border-top:1px solid var(--border);
  padding:6rem var(--pad);
  position:relative; z-index:1;
}
.apertura-text {
  font-family:var(--serif);
  font-size:clamp(2rem, 3.5vw, 3.5rem);
  font-weight:300; line-height:1.25;
  color:var(--cream); max-width:850px;
}
.apertura-text em { font-style:italic; color:var(--green); }

/* ── PITCH ───────────────────────────────────────────────────── */
.pitch {
  display:grid; grid-template-columns:1fr 1fr;
  gap:6rem; align-items:start;
  position:relative;
}

/* Decorative background symbols */
.pitch::before {
  content:'{ }';
  position:absolute; right:5%; top:10%;
  font-size:8rem; color:rgba(143,255,58,0.04);
  font-family:var(--mono); pointer-events:none;
  line-height:1;
}
.pitch::after {
  content:'< />';
  position:absolute; left:5%; bottom:5%;
  font-size:5rem; color:rgba(143,255,58,0.03);
  font-family:var(--mono); pointer-events:none;
  line-height:1;
}

.pitch-heading {
  font-family:var(--serif);
  font-size:clamp(2.5rem, 4vw, 4.5rem);
  font-weight:300; line-height:1.0; color:var(--cream);
}
.pitch-heading em { font-style:italic; color:var(--green); }

.pitch-stats {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--border);
  margin-top:2.5rem; border:1px solid var(--border);
}
.pitch-stat {
  background:var(--bg);
  padding:1.5rem;
  display:flex; flex-direction:column; gap:0.3rem;
}
.pitch-stat-num {
  font-family:var(--serif); font-size:2.5rem;
  font-weight:300; color:var(--green); line-height:1;
}
.pitch-stat-label {
  font-size:11px; color:var(--cream-dim); line-height:1.4;
}

.pitch-body { display:flex; flex-direction:column; gap:1.5rem; }
.pitch-body p { color:var(--cream-dim); font-size:15px; line-height:1.85; }
.pitch-body p strong { color:var(--cream); font-weight:400; }
.pitch-body .pitch-kicker {
  font-family:var(--serif);
  font-size:1.35rem; font-weight:400;
  color:var(--cream); line-height:1.4;
  border-left:2px solid var(--green);
  padding-left:1.5rem;
  margin-top:0.5rem;
}

/* ── PANEL FULL (shader) ─────────────────────────────────────── */
.panel-full {
  position:relative; width:100%;
  padding-top:56.044%;
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  cursor:none; background:var(--bg3);
}
.panel-full canvas {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  display:block; cursor:none;
}

/* Panel caption */
.panel-caption {
  padding:3rem var(--pad);
  border-bottom:1px solid var(--border);
  background:var(--bg3);
  position:relative; z-index:1;
}
.panel-caption-text {
  font-family:var(--serif);
  font-size:clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight:300; line-height:1.2;
  color:var(--cream); max-width:700px;
}
.panel-caption-text em { font-style:italic; color:var(--green); }

/* ── SERVICIOS BUBBLES ───────────────────────────────────────── */
.servicios-intro {
  margin-bottom:3rem;
}
.servicios-intro h2 {
  font-family:var(--serif);
  font-size:clamp(2.5rem,4.5vw,5rem);
  font-weight:300; line-height:0.95; color:var(--cream);
  margin-bottom:0.75rem;
}
.servicios-intro h2 em { font-style:italic; color:var(--green); }
.servicios-intro p { color:var(--cream-dim); font-size:15px; max-width:550px; }

.bubbles-grid {
  display:flex; flex-wrap:wrap;
  gap:0.75rem; margin-top:2.5rem;
}
.bubble {
  display:inline-flex; align-items:center; gap:0.6rem;
  border:1px solid var(--border);
  padding:0.75rem 1.4rem;
  border-radius:100px;
  font-size:13px; color:var(--cream-dim);
  cursor:default;
  transition:border-color 0.3s, color 0.3s, transform 0.3s, background 0.3s;
  position:relative; overflow:hidden;
}
.bubble::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center, rgba(143,255,58,0.08), transparent 70%);
  opacity:0; transition:opacity 0.3s;
}
.bubble:hover {
  border-color:var(--green);
  color:var(--cream);
  transform:translateY(-3px) scale(1.03);
}
.bubble:hover::before { opacity:1; }
.bubble-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green); flex-shrink:0;
  opacity:0.5;
  transition:opacity 0.3s;
}
.bubble:hover .bubble-dot { opacity:1; }

/* ── PLANES ──────────────────────────────────────────────────── */
.planes-intro {
  margin-bottom:3rem;
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:end;
}
.planes-intro h2 {
  font-family:var(--serif);
  font-size:clamp(2.5rem,4.5vw,5rem);
  font-weight:300; line-height:0.95; color:var(--cream);
}
.planes-intro h2 em { font-style:italic; color:var(--green); }
.planes-intro p { color:var(--cream-dim); font-size:14px; line-height:1.85; }

.planes-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
}
.plan {
  border:1px solid var(--border); padding:3rem 2.5rem;
  display:flex; flex-direction:column;
  transition:background 0.3s, border-color 0.3s;
  position:relative;
}
.plan + .plan { border-left:none; }
.plan:hover { background:rgba(143,255,58,0.04); border-color:var(--border-g); }
.plan.featured { border-color:var(--green-dim); background:rgba(143,255,58,0.05); }
.plan.featured::before {
  content:'Más popular';
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  background:var(--green); color:var(--bg);
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  padding:0.25rem 0.8rem; white-space:nowrap;
}
.plan-num { font-family:var(--serif); font-size:3rem; font-weight:300; color:var(--border); line-height:1; margin-bottom:2rem; display:block; }
.plan.featured .plan-num { color:var(--green-dim); }
.plan-name { font-family:var(--serif); font-size:1.8rem; font-weight:400; color:var(--cream); margin-bottom:0.4rem; }
.plan-tagline { font-size:12px; color:var(--cream-dim); margin-bottom:1rem; line-height:1.5; }
.plan-price { font-size:13px; letter-spacing:0.05em; color:var(--green); margin-bottom:0.2rem; }
.plan-monthly { font-size:12px; color:var(--cream-dim); margin-bottom:2rem; }
.plan-divider { height:1px; background:var(--border); margin-bottom:2rem; }
.plan-features { display:flex; flex-direction:column; gap:0.8rem; flex:1; margin-bottom:2.5rem; }
.plan-feature { font-size:13px; color:var(--cream-dim); display:flex; gap:0.75rem; align-items:flex-start; line-height:1.5; }
.plan-feature::before { content:'→'; color:var(--green); flex-shrink:0; margin-top:0.05rem; }
.plan-cta {
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bg); background:var(--green-dim);
  padding:0.9rem 1.5rem; text-decoration:none; text-align:center;
  border:none; cursor:pointer; transition:background 0.2s;
  display:block;
}
.plan.featured .plan-cta { background:var(--green); }
.plan-cta:hover { background:var(--green); }

.planes-footer {
  margin-top:2rem; padding:2rem 2.5rem;
  border:1px solid var(--border); border-top:none;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.planes-footer p { color:var(--cream-dim); font-size:13px; }
.planes-footer p em { color:var(--cream); font-style:italic; }

/* ── CTA BAND ────────────────────────────────────────────────── */
.cta-band {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:5rem var(--pad);
  background:var(--bg2);
  display:flex; align-items:center; justify-content:space-between;
  gap:3rem; position:relative; z-index:1;
}
.cta-band-text {
  font-family:var(--serif);
  font-size:clamp(1.8rem, 3vw, 3rem);
  font-weight:300; line-height:1.2; color:var(--cream);
  max-width:600px;
}
.cta-band-text em { font-style:italic; color:var(--green); }

.btn-primary {
  display:inline-block;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bg); background:var(--green);
  padding:1.1rem 2.5rem; text-decoration:none;
  border:none; cursor:pointer;
  transition:opacity 0.2s, transform 0.1s;
  white-space:nowrap; flex-shrink:0;
}
.btn-primary:hover { opacity:0.88; }
.btn-primary:active { transform:scale(0.98); }

.btn-ghost {
  display:inline-block;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--green); background:transparent;
  padding:1rem 2rem; text-decoration:none;
  border:1px solid var(--border-g); cursor:pointer;
  transition:background 0.2s, color 0.2s;
  white-space:nowrap;
}
.btn-ghost:hover { background:rgba(143,255,58,0.08); }

/* ── PROCESO ─────────────────────────────────────────────────── */
.proceso-flow {
  margin-top:3rem;
  position:relative;
}

/* Snake path connector */
.proceso-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
.proceso-row + .proceso-row { margin-top:0; }

.paso {
  padding:2.5rem 2rem;
  border:1px solid rgba(242,232,213,0.15);
  position:relative;
  transition:background 0.3s;
}
.proceso-row:first-child .paso + .paso { border-left:none; }
.proceso-row:last-child .paso + .paso { border-left:none; }
.proceso-row:last-child .paso { border-top:none; }

/* Arrows between steps */
.paso-arrow {
  position:absolute; top:50%; right:-1.2rem;
  transform:translateY(-50%);
  color:var(--green); font-size:1.2rem;
  z-index:2; pointer-events:none;
  display:none;
}

.paso:hover { background:rgba(143,255,58,0.04); }

.paso-bubble {
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--border-g);
  background:rgba(143,255,58,0.06);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem;
  transition:background 0.3s, border-color 0.3s;
}
.paso:hover .paso-bubble {
  background:rgba(143,255,58,0.12);
  border-color:var(--green);
}
.paso-bubble-num {
  font-family:var(--serif); font-size:1.1rem;
  color:var(--green); font-weight:400;
}
.paso-title { font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--cream); margin-bottom:0.6rem; }
.paso-desc { font-size:13px; color:rgba(242,232,213,0.72); line-height:1.8; }

/* Connector line between rows */
.proceso-connector {
  height:2rem;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:calc(100%/6);
  border-right:1px solid rgba(143,255,58,0.2);
  border-bottom:1px solid rgba(143,255,58,0.2);
  border-left:none; border-top:none;
  margin:0 0 0 calc(100%/3*2);
  position:relative;
}
.proceso-connector::after {
  content:'↓';
  position:absolute; bottom:-0.8rem; right:-0.5rem;
  color:var(--green); font-size:0.8rem;
}

.proceso-nota {
  margin-top:2rem; padding:1.5rem 2rem;
  border:1px solid rgba(242,232,213,0.15);
  font-size:12px; color:var(--cream-dim); font-style:italic;
}
.proceso-nota strong { color:var(--cream); font-style:normal; font-weight:400; }

/* ── PORTFOLIO ───────────────────────────────────────────────── */
.portfolio-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; margin-top:3rem;
}
.proyecto {
  border:1px solid var(--border); padding:2.5rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:background 0.3s;
}
.proyecto:nth-child(even) { border-left:none; }
.proyecto:nth-child(n+3) { border-top:none; }
.proyecto:hover { background:rgba(143,255,58,0.03); }
.proyecto-preview {
  width:100%; aspect-ratio:16/9;
  overflow:hidden; margin-bottom:0.5rem;
  background:var(--bg3); border:1px solid var(--border);
}
.proyecto-preview img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.5s ease; filter:grayscale(20%);
}
.proyecto:hover .proyecto-preview img { transform:scale(1.03); filter:grayscale(0%); }
.proyecto-tag { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--green); }
.proyecto-name { font-family:var(--serif); font-size:1.6rem; font-weight:400; color:var(--cream); line-height:1.1; }
.proyecto-desc { font-size:13px; color:var(--cream-dim); line-height:1.75; }
.proyecto-link { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--green); text-decoration:none; margin-top:auto; }
.proyecto-link:hover { opacity:0.7; }

/* ── ABOUT ───────────────────────────────────────────────────── */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; margin-top:3rem; align-items:start;
}
.persona { display:flex; flex-direction:column; gap:1rem; }

/* Circular photo with gradient fade */
.persona-photo-wrap {
  width:180px; height:180px;
  position:relative; margin-bottom:0.5rem;
}
.persona-photo-wrap img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  border-radius:50%;
  display:block;
}
/* Radial gradient overlay to fade into background */
.persona-photo-wrap::after {
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background:radial-gradient(circle, transparent 45%, var(--bg2) 80%);
  pointer-events:none;
}

.persona-name { font-family:var(--serif); font-size:1.6rem; font-weight:400; color:var(--cream); line-height:1.1; }
.persona-role { font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--green); }
.persona-bio { font-size:13px; color:var(--cream-dim); line-height:1.85; max-width:380px; }

.about-footer {
  margin-top:3rem; padding:2.5rem var(--pad);
  border-top:1px solid var(--border);
  font-size:15px; color:var(--cream-dim);
  line-height:1.85; max-width:700px;
}
.about-footer em { font-style:italic; color:var(--cream); }

/* ── CONTACTO ────────────────────────────────────────────────── */
.contacto-grid {
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:6rem;
}
.contacto-heading {
  font-family:var(--serif);
  font-size:clamp(2.5rem, 4.5vw, 5rem);
  font-weight:300; line-height:1.0; color:var(--cream); margin-bottom:3rem;
}
.contacto-heading em { font-style:italic; color:var(--green); }
.contacto-info { display:flex; flex-direction:column; }
.contacto-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 0; border-bottom:1px solid var(--border);
}
.contacto-row:first-child { border-top:1px solid var(--border); }
.contacto-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream-dim); }
.contacto-value { font-family:var(--serif); font-size:1rem; color:var(--cream); text-decoration:none; }
.contacto-value:hover { color:var(--green); }

.form { display:flex; flex-direction:column; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream-dim); }
.form-input, .form-select, .form-textarea {
  background:transparent; border:1px solid var(--border); border-radius:0;
  color:var(--cream); font-family:var(--mono); font-size:13px; font-weight:300;
  padding:0.85rem 1rem; outline:none; transition:border-color 0.2s;
  width:100%; appearance:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--green); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--cream-dim); opacity:0.4; }
.form-select option { background:var(--bg2); color:var(--cream); }
.form-textarea { resize:vertical; min-height:100px; }
.form-submit {
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bg); background:var(--green); border:none;
  padding:1rem 2rem; cursor:pointer; align-self:flex-start;
  transition:opacity 0.2s, transform 0.1s; margin-top:0.5rem;
}
.form-submit:hover { opacity:0.9; }
.form-submit:active { transform:scale(0.98); }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--border);
  padding:2rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:1; background:var(--bg3);
}
.footer-logo { font-family:var(--serif); font-size:1rem; font-weight:600; letter-spacing:0.06em; color:var(--cream-dim); }
.footer-logo span { color:var(--green); }
.footer-meta { font-size:11px; color:var(--cream-dim); opacity:0.4; letter-spacing:0.06em; }

/* ── REVEAL ──────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }


/* ── PLAQUE CAPTION ─────────────────────────────────────────── */
.panel-caption {
  padding:1.5rem var(--pad);
  border-bottom:1px solid var(--border);
  background:var(--bg3);
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.plaque {
  font-family:'IM Fell English', 'Cormorant Garamond', Georgia, serif;
  font-size:clamp(0.85rem, 1.5vw, 1.1rem);
  font-style:italic;
  color:rgba(242,232,213,0.55);
  letter-spacing:0.04em;
  white-space:nowrap;
  position:relative;
  padding:0.5rem 2rem;
}
.plaque::before, .plaque::after {
  content:'';
  position:absolute; top:50%;
  width:40px; height:1px;
  background:rgba(242,232,213,0.2);
}
.plaque::before { right:100%; }
.plaque::after  { left:100%; }

/* ── SERVICES CATEGORIES ────────────────────────────────────── */
.service-categories {
  display:flex; flex-direction:column; gap:2.5rem;
  margin-top:2.5rem;
}
.service-cat {}
.service-cat-label {
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:1rem;
}

/* ── SANDBOX ────────────────────────────────────────────────── */
.base-product {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:3rem; padding:2.5rem;
  border:1px solid var(--border-g);
  background:rgba(143,255,58,0.04);
  margin-bottom:2rem;
}
.base-product-label {
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--green); margin-bottom:0.75rem;
}
.base-product-name {
  font-family:var(--serif); font-size:2.2rem; font-weight:400;
  color:var(--cream); margin-bottom:0.75rem;
}
.base-product-desc { font-size:13px; color:var(--dim); line-height:1.7; margin-bottom:1rem; max-width:450px; }
.base-product-features {
  list-style:none; display:flex; flex-direction:column; gap:0.4rem;
}
.base-product-features li {
  font-size:12px; color:var(--dim); display:flex; gap:0.5rem;
}
.base-product-features li::before { content:'→'; color:var(--green); flex-shrink:0; }
.base-product-price { display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem; flex-shrink:0; }
.base-price-num { font-family:var(--serif); font-size:2.5rem; font-weight:300; color:var(--green); }
.base-price-label { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); }

.sandbox-intro {
  font-size:14px; color:var(--dim); line-height:1.8;
  margin-bottom:2rem; max-width:600px;
}
.sandbox-intro strong { color:var(--cream); font-weight:400; }

.sandbox {
  display:grid; grid-template-columns:1fr 280px;
  gap:0; border:1px solid var(--border);
}

.sandbox-addons { padding:2rem; border-right:1px solid var(--border); }
.sandbox-cat { margin-bottom:2rem; }
.sandbox-cat:last-child { margin-bottom:0; }
.sandbox-cat-title {
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--green); margin-bottom:0.75rem;
  padding-bottom:0.5rem; border-bottom:1px solid var(--border);
}
.sandbox-bubbles { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.75rem; }

.s-bubble {
  display:inline-flex; align-items:center; gap:0.5rem;
  border:1px solid var(--border);
  padding:0.5rem 1rem;
  border-radius:100px;
  font-size:12px; color:var(--dim);
  cursor:pointer;
  transition:border-color .25s, color .25s, background .25s, transform .2s, box-shadow .25s;
  user-select:none;
}
.s-bubble span {
  font-size:10px; color:var(--green); opacity:0.7;
  transition:opacity .25s;
}
.s-bubble:hover {
  border-color:var(--border-g);
  color:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 0 12px rgba(143,255,58,0.12);
}
.s-bubble:hover span { opacity:1; }
.s-bubble.active {
  border-color:var(--green);
  background:rgba(143,255,58,0.1);
  color:var(--cream);
}
.s-bubble.active span { opacity:1; }

.sandbox-resumen {
  padding:1.5rem; display:flex; flex-direction:column; gap:1rem;
  position:sticky; top:72px; height:fit-content;
  background:var(--bg2);
}
.sandbox-resumen-title {
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--green); padding-bottom:0.75rem; border-bottom:1px solid var(--border);
}
.sandbox-base-row {
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--cream);
  padding-bottom:0.75rem; border-bottom:1px solid var(--border);
}
.sandbox-items { display:flex; flex-direction:column; gap:0; min-height:60px; }
.sandbox-empty {
  font-size:11px; color:var(--dim); font-style:italic;
  padding:1rem 0; text-align:center;
  border:1px dashed var(--border); display:flex;
  align-items:center; justify-content:center;
}
.sandbox-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.5rem 0; border-bottom:1px solid var(--border);
  font-size:11px; gap:0.5rem; animation:fadeIn .2s ease;
}
.sandbox-item span:first-child { color:var(--cream); flex:1; line-height:1.3; }
.sandbox-item span:nth-child(2) { color:var(--green); white-space:nowrap; flex-shrink:0; }
.sandbox-item button {
  background:none; border:none; cursor:pointer;
  color:var(--dim); font-size:14px; padding:0; flex-shrink:0;
  transition:color .2s; line-height:1;
}
.sandbox-item button:hover { color:var(--cream); }
@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.sandbox-totals { border-top:1px solid var(--border); padding-top:0.75rem; display:flex; flex-direction:column; gap:0.4rem; }
.sandbox-total-row { display:flex; justify-content:space-between; font-size:12px; color:var(--dim); }
.sandbox-total-row.highlight { color:var(--cream); }
.sandbox-total-row.highlight span:last-child { font-family:var(--serif); font-size:1.2rem; color:var(--green); }

.sandbox-disclaimer {
  font-size:11px; color:var(--dim); font-style:italic; line-height:1.6;
  padding:0.75rem; background:rgba(143,255,58,0.04); border:1px solid var(--border-g);
}
.sandbox-btn {
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--bg); background:var(--green); border:none;
  padding:0.85rem; cursor:pointer; width:100%;
  transition:opacity .2s;
}
.sandbox-btn:hover { opacity:0.88; }
.sandbox-nota { font-size:10px; color:var(--dim); text-align:center; letter-spacing:0.08em; }

/* ── PROCESO SIMPLE ─────────────────────────────────────────── */
.proceso-simple {
  display:flex; align-items:flex-start; gap:0;
  margin-top:1rem;
}
.paso-simple {
  flex:1; padding:1.5rem;
  border:1px solid rgba(242,232,213,0.12);
  transition:background .3s;
}
.paso-simple:not(:first-child) { border-left:none; }
.paso-simple:hover { background:rgba(143,255,58,0.04); }
.paso-simple-num {
  font-family:var(--serif); font-size:2rem; font-weight:300;
  color:rgba(143,255,58,0.3); line-height:1; margin-bottom:1rem; display:block;
}
.paso-simple-title {
  font-family:var(--serif); font-size:1.1rem; font-weight:400;
  color:var(--cream); margin-bottom:0.5rem;
}
.paso-simple p { font-size:12px; color:rgba(242,232,213,0.65); line-height:1.7; }
.paso-simple-arrow {
  color:var(--green); font-size:1rem; padding:2rem 0.25rem;
  align-self:center; flex-shrink:0; opacity:0.4;
}

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(7,19,8,0.9); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:2rem;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg2); border:1px solid var(--border-g);
  padding:3rem; max-width:500px; width:100%; position:relative;
  transform:translateY(20px); transition:transform .3s;
}
.modal-overlay.open .modal { transform:none; }
.modal-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:none; cursor:pointer;
  color:var(--dim); font-size:1.2rem; transition:color .2s;
}
.modal-close:hover { color:var(--cream); }
.modal-input {
  background:transparent; border:1px solid var(--border);
  color:var(--cream); font-family:var(--mono); font-size:13px; font-weight:300;
  padding:0.85rem 1rem; outline:none; transition:border-color .2s; width:100%;
}
.modal-input:focus { border-color:var(--green); }
.modal-input::placeholder { color:var(--dim); opacity:0.5; }
.modal-resumen {
  background:rgba(143,255,58,0.05); border:1px solid var(--border-g);
  padding:1rem; font-size:12px; color:var(--dim); line-height:1.8;
}
.modal-submit {
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bg); background:var(--green); border:none;
  padding:1rem; cursor:pointer; width:100%; transition:opacity .2s;
}
.modal-submit:hover { opacity:0.88; }
.modal-success { display:none; text-align:center; padding:2rem 0; }


/* ── TOUCH HINT ─────────────────────────────────────────────── */
.touch-hint {
  display:none; /* hidden on desktop */
  position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(242,232,213,0.45); pointer-events:none; z-index:2;
  white-space:nowrap;
  animation:pulseHint 2.5s ease-in-out infinite;
}
@keyframes pulseHint {
  0%,100%{opacity:0.45} 50%{opacity:0.9}
}
@media(hover:none) and (pointer:coarse){
  .touch-hint { display:block; }
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media(max-width:900px){
  nav { padding:1.2rem 1.5rem; }
  .nav-links, .nav-cta { display:none; }
  section { padding:5rem 1.5rem; }
  .apertura, .cta-band { padding:5rem 1.5rem; }
  .hero { padding:0 1.5rem 3.5rem; }
  .hero-bottom { flex-direction:column; gap:1.5rem; }
  .pitch { grid-template-columns:1fr; gap:3rem; }
  .pitch-stats { grid-template-columns:1fr 1fr; }
  .planes-intro { grid-template-columns:1fr; gap:2rem; }
  .planes-grid { grid-template-columns:1fr; }
  .plan + .plan { border-left:1px solid var(--border); border-top:none; }
  .proceso-row { grid-template-columns:1fr; }
  .proceso-row .paso + .paso { border-left:1px solid rgba(242,232,213,0.15); border-top:none; }
  .portfolio-grid { grid-template-columns:1fr; }
  .proyecto:nth-child(even) { border-left:1px solid var(--border); }
  .proyecto:nth-child(n+3) { border-top:none; }
  .about-grid { grid-template-columns:1fr; gap:3rem; }
  .cta-band { flex-direction:column; align-items:flex-start; }
  .contacto-grid { grid-template-columns:1fr; gap:3rem; }
  footer { flex-direction:column; gap:1rem; text-align:center; }
  .scroll-hint { display:none; }
  .planes-footer { flex-direction:column; align-items:flex-start; }
  .proceso-connector { display:none; }
  .sandbox { grid-template-columns:1fr; }
  .sandbox-resumen { position:static; border-top:1px solid var(--border); }
  .s-bubble { font-size:11px; padding:0.4rem 0.8rem; }
  .base-product { flex-direction:column; gap:1.5rem; padding:1.5rem; }
  .proceso-simple { flex-direction:column; gap:0; }
  .paso-simple:not(:first-child) { border-left:1px solid rgba(242,232,213,0.12); border-top:none; }
  .paso-simple-arrow { display:none; }
  .plaque { white-space:normal; text-align:center; }

}