/* =============================================================
   A Primera Vista — styles.css
   Arquetipo: Mouse-Reactive Gradient (paleta cálida editorial — brasa/ámbar/dorado)
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0E0B09;   /* negro cálido, nunca puro */
  --bg-2:      #15110D;
  --bg-3:      #1E1813;   /* tarjetas */
  --ink:       #F2EBDA;   /* crema — nunca blanco puro */
  --ink-soft:  #DDD2BC;
  --mute:      #9A8C76;
  --line:      rgba(242, 235, 218, 0.10);
  --line-2:    rgba(242, 235, 218, 0.18);

  --accent:    #C4632E;   /* terracota brasa — acento único */
  --accent-ink:#1A120C;
  --gold:      #C9A35B;   /* dorado cálido secundario */
  --g1:        #C0452A;   /* brasa */
  --g2:        #C77A33;   /* ámbar */
  --g3:        #9A6B2F;   /* bronce */
  --g4:        #7A2E1E;   /* ladrillo profundo */

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1240px;
  --gutter: clamp(1.2rem, 4vw, 3rem);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius: 18px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.04; letter-spacing: -0.01em; font-weight: 400; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.kicker {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
}

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.section-title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  line-height: 1;
  color: var(--ink);
  margin-top: .6rem;
  letter-spacing: -0.005em;
}
.section-title em { font-style: italic; color: var(--accent); }
.section-lead {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--mute);
  max-width: 52ch;
}
.section-lead.note {
  font-size: .92rem;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
}
.section-lead.note strong { color: var(--ink-soft); }

/* container helper applied per-section */
.valor, .portfolio, .reno, .proceso, .pricing, .testimonios, .contacto-inner, .nav-inner, .footer-inner {
  width: min(100% - 0px, var(--maxw));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =============================================================
   4. Botones
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .35s var(--ease-out), background .3s var(--ease-out),
              color .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
  will-change: transform;
}
.btn-primary {
  background: var(--ink);
  color: var(--accent-ink);
  box-shadow: 0 8px 30px rgba(196,99,46, 0.18);
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 40px rgba(196,99,46, 0.45);
}
.btn-ghost {
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-small {
  padding: .55rem 1rem;
  font-size: .85rem;
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); background: rgba(196,99,46,.08); }
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c5e);
  color: #04130b;
  font-weight: 600;
  box-shadow: 0 10px 34px rgba(37, 211, 102, 0.28);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(37, 211, 102, 0.4); }

/* =============================================================
   5. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg);
  /* Red de seguridad CSS: se oculta a los 4.5s aunque el JS falle */
  animation: splashSafety .01s 4.5s forwards;
}
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.splash-mark {
  font-family: var(--serif); font-size: 3rem; color: var(--ink);
  width: 84px; height: 84px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(196,99,46,.55), transparent 60%),
    radial-gradient(120% 120% at 80% 90%, rgba(201,163,91,.45), transparent 60%);
  animation: splashPulse 2.2s var(--ease-soft) infinite;
}
.splash-word {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .35em;
  text-transform: uppercase; color: var(--mute);
}
.splash.is-out {
  opacity: 0; pointer-events: none;
  transition: opacity .7s var(--ease-out), clip-path .8s var(--ease-out);
  clip-path: inset(0 0 100% 0);
}
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
@keyframes splashPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(196,99,46,.0); }
  50%      { transform: scale(1.06); box-shadow: 0 0 40px 0 rgba(196,99,46,.28); }
}

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  transition: background .4s var(--ease-out), backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(14, 11, 9, 0.74);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand-mark {
  font-family: var(--serif); font-size: 1.25rem; line-height: 1;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(196,99,46,.6), transparent 65%),
    radial-gradient(120% 120% at 85% 95%, rgba(201,163,91,.5), transparent 65%);
}
.brand-name { font-weight: 600; font-size: .98rem; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.nav-links a { color: var(--mute); font-size: .92rem; font-weight: 500; transition: color .25s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: .5rem 1rem; color: var(--ink) !important;
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent) !important; }
.nav-links a:not(.nav-cta) { display: none; }

/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 7rem var(--gutter) 4rem;
  overflow: hidden;
}
.hero-ambient {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .62; filter: brightness(.74) saturate(1.06) contrast(1.02);
  pointer-events: none;
}
.hero-gradient {
  position: absolute; inset: -10%; z-index: 1;
  background:
    radial-gradient(circle 620px at var(--mx, 28%) var(--my, 40%), var(--g1) 0%, transparent 58%),
    radial-gradient(circle 700px at calc(var(--mx, 70%) + 16%) calc(var(--my, 55%) - 6%), var(--g2) 0%, transparent 58%),
    radial-gradient(circle 520px at 80% 18%, var(--g3) 0%, transparent 55%);
  filter: blur(64px) saturate(120%);
  opacity: .42; mix-blend-mode: screen;
  pointer-events: none;
  transition: background .6s var(--ease-soft);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,11,9,.88) 0%, rgba(14,11,9,.55) 40%, rgba(14,11,9,.2) 70%, transparent 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(14,11,9,.55) 100%),
    linear-gradient(180deg, rgba(14,11,9,.4) 0%, transparent 22%, transparent 55%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 3; width: min(100%, var(--maxw)); margin-inline: auto; }
.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 8.5vw, 6.6rem);
  line-height: 0.98;
  color: var(--ink);
  margin: 1.2rem 0 0;
  letter-spacing: -0.015em;
  max-width: 16ch;
}
.hero-title em {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold), var(--accent) 55%, #D98A4E);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.hero-sub {
  margin-top: 1.6rem; max-width: 46ch;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  color: var(--ink-soft);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero-scroll {
  margin-top: 3.2rem; display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
}
.hero-scroll-line {
  width: 46px; height: 1px; background: var(--line-2); position: relative; overflow: hidden;
}
.hero-scroll-line::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--accent); animation: scrollLine 2.4s var(--ease-soft) infinite;
}
@keyframes scrollLine { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }

/* =============================================================
   8. Propuesta de valor
   ============================================================= */
.valor { padding-block: clamp(4rem, 9vw, 7rem); }
.pillars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pillar { background: var(--bg-2); padding: clamp(1.6rem, 3vw, 2.6rem); transition: background .4s var(--ease-out); }
.pillar:hover { background: var(--bg-3); }
.pillar-num {
  font-family: var(--mono); font-size: .8rem; color: var(--accent);
  letter-spacing: .1em;
}
.pillar h3 {
  font-family: var(--serif); font-size: 1.7rem; color: var(--ink);
  margin: .8rem 0 .6rem;
}
.pillar p { color: var(--mute); font-size: .98rem; }

/* =============================================================
   9. Marquee
   ============================================================= */
.marquee {
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; width: max-content; will-change: transform;
  animation: marquee 38s linear infinite;
}
.marquee-group {
  display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem;
  flex: 0 0 auto;
  font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--ink);
}
.marquee-group .dot { color: var(--accent); }
.marquee-group span:not(.dot) { opacity: .78; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* -50% recorre exactamente un grupo: los dos grupos son idénticos → bucle sin saltos */
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   10. Portfolio
   ============================================================= */
.portfolio { padding-block: clamp(4rem, 9vw, 7rem); }
.work-grid {
  display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
.work-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .4s, box-shadow .5s var(--ease-out);
}
.work-card:hover {
  border-color: var(--line-2);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8),
              0 0 0 1px color-mix(in srgb, var(--card-a) 30%, transparent);
}
.work-thumb {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3; overflow: hidden;          /* casillas más grandes */
  background: var(--bg-3);
  border: 0; border-bottom: 1px solid var(--line);
  padding: 0; cursor: pointer; font: inherit; color: inherit;
}
.browser {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: 34px; display: flex; align-items: center; gap: .7rem;
  padding: 0 .9rem;
  background: rgba(14,11,9,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.browser-dots { display: inline-flex; gap: .35rem; }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.browser-dots i:nth-child(1){ background:#d98b6a; } .browser-dots i:nth-child(2){ background:#e0b673; } .browser-dots i:nth-child(3){ background:#a9b58a; }
.browser-url {
  font-family: var(--mono); font-size: .72rem; color: var(--mute);
  background: rgba(242,235,218,.06); padding: .15rem .7rem; border-radius: 6px;
}
/* Poster de respaldo (se ve mientras carga la preview o si falla) */
.work-poster {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--card-a) 50%, var(--bg-3)), var(--bg-3) 72%);
}
.work-mono {
  font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4.4rem);
  color: rgba(243, 231, 211, .9); line-height: 1;
}
/* Preview real de la web (iframe escalado) */
.work-preview {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  opacity: 0;
  transition: opacity .55s var(--ease-out), transform 2.6s var(--ease-out), filter .6s var(--ease-out);
  will-change: transform;
}
.work-preview.is-loaded { opacity: 1; }
/* hover: la preview cobra vida — zoom lento tipo ken-burns + un punto más de luz */
.work-card:hover .work-preview { transform: scale(1.08); filter: brightness(1.05); }
.work-frame {
  width: 1280px; height: 960px; max-width: none; border: 0; background: #fff;
  transform: scale(var(--thumb-scale, 0.3)); transform-origin: top left;
  pointer-events: none;
}
/* Velo + etiqueta al pasar el cursor */
.work-hover {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  opacity: 0; transition: opacity .4s var(--ease-out); pointer-events: none;
  background: linear-gradient(0deg, rgba(14,11,9,.6), rgba(14,11,9,.05) 60%);
}
.work-card:hover .work-hover { opacity: 1; }
.work-hover span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: 999px; padding: .55rem 1.1rem; background: rgba(14,11,9,.45);
}

/* Selector de dispositivo: ordenador / móvil (esquina superior de la preview) */
.device-toggle {
  position: absolute; top: 7px; right: 9px; z-index: 6;
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: rgba(14, 11, 9, .72);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: .55; transition: opacity .3s var(--ease-out);
}
.work-card:hover .device-toggle { opacity: 1; }
.device-btn {
  width: 28px; height: 22px; display: grid; place-items: center;
  border-radius: 999px; color: rgba(242, 235, 218, .72); cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.device-btn:hover { color: var(--ink); }
.device-btn.is-active { background: var(--accent); color: var(--accent-ink); }
.device-btn svg { display: block; }

/* Vista móvil: el sitio se muestra a lo ancho de un teléfono, centrado y con marco */
.work-card.is-mobile .browser { display: none; }
.work-card.is-mobile .work-preview {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-3), var(--bg-2));
}
.work-card.is-mobile .work-frame {
  flex: none;                    /* que el flex no lo encoja por debajo de 400px */
  width: 400px; height: 820px; max-width: none;
  transform: scale(var(--mobile-scale, 0.3)); transform-origin: center center;
  border-radius: 30px;
  box-shadow: 0 0 0 18px #14100c, 0 22px 44px rgba(0, 0, 0, .5);
}
.work-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem;
}
.work-client { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); }
.work-sector { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: .2rem; }

/* =============================================================
   10b. Renovación — comparador antes / después
   ============================================================= */
.reno { padding-block: clamp(4rem, 9vw, 7rem); }
.reno-compare {
  --reno-pos: 50%;
  --reno-scale: 0.3;
  position: relative;
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-3);
  aspect-ratio: 16 / 10;
  user-select: none; -webkit-user-select: none;
}
.reno-stage { position: absolute; inset: 34px 0 0 0; }
.reno-pane--after { position: absolute; inset: 0; overflow: hidden; }
/* capa "antes" recortada por ANCHO (recorte rectangular, sin clip-path) */
.reno-clip { position: absolute; top: 0; left: 0; height: 100%; width: var(--reno-pos); overflow: hidden; z-index: 2; }
.reno-pane--before { position: absolute; top: 0; left: 0; }
.reno-frame {
  width: 1440px; height: 900px; max-width: none; border: 0; background: #fff;
  transform: scale(var(--reno-scale, 0.3)); transform-origin: top left;
  pointer-events: none;
}
.reno-tag {
  position: absolute; top: 12px; z-index: 5; pointer-events: none;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: rgba(14, 11, 9, .55);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .3rem .75rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.reno-tag--before { left: 14px; }
.reno-tag--after { right: 14px; }
.reno-handle {
  position: absolute; top: 0; bottom: 0; left: var(--reno-pos); z-index: 6;
  width: 30px; margin-left: -15px; background: transparent;
  cursor: ew-resize; touch-action: none;
}
.reno-handle::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px; background: rgba(242, 235, 218, .92);
}
.reno-handle-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent-ink);
  background: var(--accent); box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  transition: transform .2s var(--ease-out);
}
.reno-handle:hover .reno-handle-grip, .reno-handle:focus-visible .reno-handle-grip { transform: translate(-50%, -50%) scale(1.08); }
.reno-compare.is-dragging .reno-handle-grip { transform: translate(-50%, -50%) scale(.94); }
/* botón ampliar / reducir */
.reno-expand {
  position: absolute; right: 12px; bottom: 12px; z-index: 7;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: rgba(14, 11, 9, .62);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .42rem .8rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer; transition: background .25s var(--ease-out), border-color .25s, color .25s;
}
.reno-expand:hover { border-color: var(--accent); color: var(--accent); background: rgba(14, 11, 9, .78); }
.reno-expand-icon { flex: none; }

/* ---------- Modal ampliado: una web a pantalla casi completa + pestañas Antes/Después ---------- */
.reno-modal {
  position: fixed; inset: 0; z-index: 520;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s;
}
.reno-modal.is-open { opacity: 1; visibility: visible; }
.reno-modal-shell {
  position: relative; z-index: 1;
  width: 95vw; height: 95vh;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.9);
}
.reno-modal.is-open .reno-modal-shell { animation: lightboxIn .42s var(--ease-out); }
.reno-modal-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(242, 235, 218, .05);
}
.reno-modal-tab {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242, 235, 218, .72); padding: .5rem 1.15rem; border-radius: 999px;
  cursor: pointer; transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.reno-modal-tab:hover { color: var(--ink); }
.reno-modal-tab.is-active { background: var(--accent); color: var(--accent-ink); }
.reno-modal-stage { position: relative; flex: 1; background: #fff; overflow: hidden; }
/* las dos vistas quedan cargadas y superpuestas: cambiar de pestaña solo alterna opacidad → instantáneo, sin recarga */
.reno-modal-view {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-out);
}
.reno-modal-view.is-active { opacity: 1; pointer-events: auto; }
/* móvil: frame centrado y con margen (para que el marco del teléfono no choque con los bordes del modal) */
.reno-modal.is-mobile .reno-modal-view {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vh, 3rem) clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
  background: radial-gradient(120% 100% at 50% 0%, var(--bg-3), var(--bg-2));
}
.reno-modal-phone { display: contents; }
/* mismo principio que .reno-frame: ancho de diseño fijo + transform:scale (sin compresión del layout);
   en escritorio el alto lo fija JS dinámicamente (ver initRenoModal) para llenar el espacio disponible
   exacto, así el iframe con scroll nunca queda recortado por un ancestro (evita el glitch de Chrome) */
.reno-modal-frame {
  width: 1440px; max-width: none; border: 0; background: #fff;
  transform: scale(var(--reno-modal-scale, .3)); transform-origin: top left;
}
/* móvil: proporción real de teléfono (400×820, "una pantalla"), NUNCA deformada — se ajusta ENTERA
   dentro del hueco disponible (contain-fit); el resto de la página se ve haciendo scroll dentro. */
.reno-modal.is-mobile .reno-modal-phone {
  display: block; position: relative;
  width: 400px; height: 820px; flex: none;
  transform: scale(var(--reno-modal-scale, .3)); transform-origin: center center;
}
/* el marco/esquinas se pintan POR ENCIMA sin recortar el iframe (mismo motivo que en el lightbox:
   recortar directamente un iframe que scrollea provoca un glitch de repintado en Chrome) */
.reno-modal.is-mobile .reno-modal-phone::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 30px;
  box-shadow: 0 0 0 18px #14100c, 0 22px 44px rgba(0, 0, 0, .5);
}
.reno-modal.is-mobile .reno-modal-frame {
  width: 100%; height: 100%; transform: none; border-radius: 0;
}
body.reno-modal-lock { overflow: hidden; }

/* =============================================================
   11. Proceso
   ============================================================= */
.proceso {
  padding-block: clamp(4rem, 9vw, 7rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.proceso-media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.proceso-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); aspect-ratio: 4/3; }
.proceso-media-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(14,11,9,.55)),
             radial-gradient(80% 60% at 80% 100%, rgba(196,99,46,.4), transparent 70%);
  mix-blend-mode: screen;
}
.steps { list-style: none; display: grid; gap: 1.4rem; margin-top: 1.6rem; }
.step { display: flex; gap: 1.1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step-num {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 1rem; color: var(--accent);
  border: 1px solid var(--line-2);
  background: radial-gradient(120% 120% at 30% 20%, rgba(196,99,46,.18), transparent 65%);
}
.step h3 { font-family: var(--serif); font-size: 1.45rem; color: var(--ink); margin-bottom: .2rem; }
.step p { color: var(--mute); font-size: .96rem; }

/* =============================================================
   12. Testimonios
   ============================================================= */
.testimonios { padding-block: clamp(4rem, 9vw, 7rem); }
/* el carrusel sangra a todo el ancho; el head usa el contenedor normal */
.testimonios .section-head { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--gutter); }
.review-carousel {
  overflow: hidden; margin-top: 2.4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.review-track {
  display: flex; gap: 1.2rem; width: max-content; padding: .6rem var(--gutter);
  will-change: transform; animation: reviewScroll 64s linear infinite;
}
.review-carousel:hover .review-track { animation-play-state: paused; }
@keyframes reviewScroll { to { transform: translateX(-50%); } }
.review-card {
  flex: 0 0 auto; width: min(84vw, 380px);
  display: flex; flex-direction: column; gap: 1.1rem;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.7rem 1.6rem;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s var(--ease-out), opacity .4s;
}
.review-stars { color: var(--gold); letter-spacing: .14em; font-size: .98rem; }
.review-card blockquote {
  font-family: var(--serif); font-size: 1.32rem; line-height: 1.34; color: var(--ink-soft);
  flex: 1;
}
.review-card figcaption { display: flex; align-items: center; gap: .8rem; }
.review-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.08rem; color: var(--ink);
  background: linear-gradient(135deg, var(--accent), var(--g3));
}
.review-who strong { display: block; color: var(--ink); font-size: .95rem; }
.review-who em { font-style: normal; color: var(--mute); font-size: .8rem; }
/* al pasar el cursor: se pausa (arriba) y se resalta la reseña, atenuando el resto */
.review-track:hover .review-card { opacity: .45; }
.review-track:hover .review-card:hover {
  opacity: 1; transform: translateY(-6px) scale(1.035);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.9);
}

/* =============================================================
   12b. Precios / Planes
   ============================================================= */
.pricing { padding-block: clamp(4rem, 9vw, 7rem); }
.plans { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: 1fr; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem);
}
.plan--featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
  box-shadow: 0 26px 64px -36px color-mix(in srgb, var(--accent) 55%, transparent);
}
.plan-badge {
  position: absolute; top: -.72rem; left: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .32rem .75rem; border-radius: 999px;
}
.plan-name { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); }
.plan-desc { color: var(--mute); font-size: .96rem; margin-top: .35rem; }
.plan-price { display: flex; align-items: baseline; gap: .5rem; margin: 1.3rem 0 .1rem; }
.plan-amount { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 3.4rem); color: var(--ink); line-height: 1; }
.plan-unit { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.plan-was { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-top: .45rem; }
.plan-was s { text-decoration-color: var(--accent); text-decoration-thickness: 2px; color: var(--ink-soft); }
.plan-feats {
  list-style: none; display: grid; gap: .7rem;
  margin: 1.4rem 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.plan-feats li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); font-size: .96rem; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600; }
.plan-extra {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px dashed var(--line-2); border-radius: 10px;
  padding: .55rem .8rem; margin-bottom: 1.3rem;
}
.plan-cta { justify-content: center; margin-top: auto; }
.addons-title { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: clamp(2rem, 4vw, 3rem) 0 1.1rem; }
.addons { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.addon { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.addon h4 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.addon-price { font-family: var(--serif); font-size: 1.85rem; color: var(--accent); margin: .35rem 0 .55rem; }
.addon-price span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-left: .2rem; }
.addon p:last-child { color: var(--mute); font-size: .92rem; }
.pricing-note { margin-top: 1.6rem; color: var(--mute); font-size: .9rem; }
@media (min-width: 720px) { .addons { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================
   13. Contacto
   ============================================================= */
.contacto { position: relative; padding-block: clamp(4rem, 10vw, 8rem); overflow: hidden; }
.contacto-gradient {
  position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(circle 600px at var(--mx, 30%) var(--my, 40%), var(--g1) 0%, transparent 58%),
    radial-gradient(circle 640px at calc(var(--mx, 75%) + 10%) calc(var(--my, 60%)), var(--g2) 0%, transparent 58%),
    radial-gradient(circle 460px at 60% 90%, var(--g3) 0%, transparent 55%);
  filter: blur(70px) saturate(115%); opacity: .32;
  transition: background .6s var(--ease-soft);
}
.contacto-inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.contacto-copy .section-title { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.form {
  display: grid; gap: 1rem;
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .form { background: #17120D; }
}
.field { display: grid; gap: .4rem; }
.field span { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.field input, .field textarea {
  font: inherit; color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2); border-radius: 12px;
  padding: .8rem 1rem; transition: border-color .3s, background .3s;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #5c5c70; }
.field input:focus, .field textarea:focus { border-color: var(--accent); background: rgba(196,99,46,.06); outline: none; }
.form-submit { justify-content: center; margin-top: .3rem; position: relative; }
.form-check { display: none; }
.form.is-sent .form-submit-label { display: none; }
.form.is-sent .form-check { display: block; }
.form.is-sent .form-submit { background: var(--accent); color: var(--accent-ink); }
.form-hint { text-align: center; font-size: .8rem; color: var(--mute); }

/* =============================================================
   14. Footer
   ============================================================= */
.footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); margin-top: 2rem; }
.footer-inner { display: grid; gap: 1rem; }
.footer-tag { color: var(--mute); font-size: .95rem; }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a { color: var(--mute); font-size: .88rem; transition: color .25s; }
.footer-links a:hover { color: var(--ink); }
.footer-credits { color: #5c5c70; font-size: .8rem; }
.footer-credits a { color: var(--mute); border-bottom: 1px solid var(--line-2); }
.footer-credits a:hover { color: var(--accent); border-color: var(--accent); }

/* =============================================================
   15. Lightbox
   ============================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(4,4,8,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lightbox-shell {
  position: relative; z-index: 1;
  width: min(94vw, 1500px); height: 92vh;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.9);
  /* Sin transform persistente: el iframe no debe scrollear dentro de un ancestro
     transformado. La entrada se hace con una animación que revierte a transform:none. */
}
.lightbox.is-open .lightbox-shell { animation: lightboxIn .42s var(--ease-out); }
@keyframes lightboxIn {
  from { transform: scale(.96) translateY(10px); }
  to   { transform: scale(1) translateY(0); }
}
.lightbox-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--line);
  background: rgba(14,11,9,.6);
}
.lightbox-info { display: flex; flex-direction: column; min-width: 0; }
.lightbox-client { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.lightbox-sector { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.lightbox-tools { display: flex; align-items: center; gap: .8rem; flex: none; }
.lb-device {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(242, 235, 218, .05);
}
.lightbox-ext { font-family: var(--mono); font-size: .78rem; color: var(--mute); border-bottom: 1px solid var(--line-2); transition: color .25s, border-color .25s; }
.lightbox-ext:hover { color: var(--accent); border-color: var(--accent); }
.lightbox-x { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); border: 1px solid var(--line-2); transition: background .25s, border-color .25s; }
.lightbox-x:hover { background: rgba(255,255,255,.06); border-color: var(--accent); }
.lightbox-frame-wrap { position: relative; flex: 1; display: flex; align-items: stretch; }
.lightbox-stage { position: relative; flex: 1; background: #fff; }
.lightbox-phone, .lightbox-screen { width: 100%; height: 100%; }
.lightbox-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
/* Vista móvil dentro del lightbox: teléfono grande, centrado y navegable */
.lightbox.is-mobile .lightbox-stage {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, var(--bg-3), var(--bg-2));
  padding: clamp(1rem, 3vh, 2.5rem) 1rem;
}
.lightbox.is-mobile .lightbox-phone {
  flex: none;
  width: 406px; max-width: 92vw;
  height: 100%; max-height: 860px;
  padding: 16px;                    /* grosor del marco = spread del overlay (sin desborde) */
  background: #14100c;              /* color del marco */
  border-radius: 48px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
}
/* La pantalla NO recorta el iframe: un clip (clip-path/overflow) sobre un iframe que
   scrollea provoca repintado defectuoso de la franja superior en Chrome. Las esquinas
   redondeadas se pintan POR ENCIMA con un overlay que no recorta la capa del iframe. */
.lightbox.is-mobile .lightbox-screen { position: relative; background: #fff; border-radius: 32px; }
.lightbox.is-mobile .lightbox-frame { position: relative; z-index: 1; border-radius: 0; }
.lightbox.is-mobile .lightbox-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 32px;
  /* spread 16 > 32·(√2−1)≈13,25 → cubre por completo las esquinas cuadradas del iframe */
  box-shadow: 0 0 0 16px #14100c;
}
.lightbox-empty {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem;
  text-align: center; padding: 2rem; background: var(--bg-3); color: var(--mute);
}
.lightbox-empty[hidden] { display: none; }   /* el atributo hidden debe ganar a display:grid */
.lightbox-empty-mono { font-family: var(--serif); font-size: 4rem; color: var(--ink); }
.lightbox-empty code { font-family: var(--mono); color: var(--accent); font-size: .85rem; background: rgba(196,99,46,.08); padding: .2rem .5rem; border-radius: 6px; }
.lightbox-empty-hint { font-size: .85rem; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); background: rgba(14,11,9,.7); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s, transform .25s var(--ease-out), border-color .25s;
}
.lightbox-nav:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lightbox-nav.prev { left: .8rem; } .lightbox-nav.next { right: .8rem; }
.lightbox-nav.prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-nav.next:hover { transform: translateY(-50%) translateX(3px); }
body.lb-lock { overflow: hidden; }

/* =============================================================
   16. Reveals (defensivo)
   ============================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }   /* defensa A.4.5 */
/* stagger dentro de grupos */
.pillars .reveal:nth-child(2) { transition-delay: .08s; }
.pillars .reveal:nth-child(3) { transition-delay: .16s; }
.work-grid .reveal:nth-child(2) { transition-delay: .08s; }
.work-grid .reveal:nth-child(3) { transition-delay: .16s; }

/* =============================================================
   17. Responsive
   ============================================================= */
@media (min-width: 720px) {
  .nav-links a:not(.nav-cta) { display: inline; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr auto; align-items: end; grid-template-areas: "brand links" "tag tag" "credits credits"; }
  .footer-inner .brand { grid-area: brand; }
  .footer-links { grid-area: links; }
  .footer-tag { grid-area: tag; }
  .footer-credits { grid-area: credits; }
}
@media (min-width: 960px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .proceso { grid-template-columns: 1fr 1fr; }
  .contacto-inner { grid-template-columns: 1.05fr .95fr; }
}
@media (min-width: 1280px) {
  .hero-title { font-size: clamp(4rem, 7vw, 7rem); }
}

/* =============================================================
   18. Reduced motion — solo efectos intrusivos
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .review-track { animation: none; }
  .review-carousel { overflow-x: auto; }
  .hero-scroll-line::after { animation: none; }
  .splash-mark { animation: none; }
}