/* ============================================
   Lente Studio — preview
   Fondo #4164FE. Marco interior difuminado #7EC4FF.
   Texto blanco. Tracking muy cerrado. Estilo suizo editorial.
   ============================================ */

@font-face{
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --blue: #4164FE;
  --glow: #7EC4FF;
  --white: #FFFFFF;
  --white-soft: rgba(255,255,255,0.62);
  --white-faint: rgba(255,255,255,0.38);
  --white-tint: rgba(255,255,255,0.08);
  --white-tint-strong: rgba(255,255,255,0.14);
  --radius-pill: 999px;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body{ height: 100%; }

body{
  background: var(--blue);
  color: var(--white);
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

@media (hover: hover) and (pointer: fine){ body{ cursor: none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal{ opacity:1 !important; filter:none !important; transform:none !important; }
}

a{ color: inherit; }

/* ===== marco interior — inner shadow difuminado, esquinas rectas, más presencia ===== */
.frame{
  position: fixed;
  inset: 0;
  box-shadow:
    inset 0 0 0 1px rgba(126,196,255,0.65),
    inset 0 0 90px 22px rgba(126,196,255,0.65),
    inset 0 0 200px 60px rgba(126,196,255,0.45);
  pointer-events: none;
  z-index: 30;
}

/* ===== cursor ===== */
.cursor-dot{
  display: none;
  position: fixed; top:0; left:0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%,-50%);
  transition: width 0.25s var(--ease-soft), height 0.25s var(--ease-soft);
}
.cursor-dot.active{ display: block; }
.cursor-dot.grow{ width: 24px; height: 24px; }

/* ===== reveal ===== */
.reveal{
  opacity: 0;
  filter: blur(32px);
  transform: translateY(18px);
  transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.in{ opacity: 1; filter: blur(0); transform: translateY(0); }

/* ===== hero / preview ===== */
.stage{
  position: relative;
  min-height: 100vh;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align: center;
  padding: 60px 24px;
  z-index: 10;
}

.logo{
  width: clamp(220px, 42vw, 420px);
  height: auto;
  margin-bottom: 34px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 9px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white-soft);
  margin-bottom: 22px;
}
.eyebrow .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

h1{
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 4.2vw, 40px);
  letter-spacing: -0.055em;
  line-height: 1.15;
  max-width: 640px;
  margin-bottom: 36px;
}

.cta-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--blue);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.02em;
  transition: background 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}
.cta-pill:hover{
  background: transparent;
  color: var(--white);
}
.cta-pill:active{ transform: scale(0.97); }
.cta-pill svg{ width: 14px; height: 14px; }

.stage-footer{
  position: absolute;
  bottom: 40px; left: 0; right: 0;
  display:flex;
  justify-content:center;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--white-faint);
}

/* ===== contact page ===== */
.book-page{
  position: relative;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 110px 24px 100px;
  z-index: 10;
}
.narrow{ max-width: 460px; margin: 0 auto; width: 100%; }

.book-back{
  position: fixed;
  top: 24px; left: 24px; z-index: 50;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white-tint);
  border: 1px solid transparent;
  display:flex; align-items:center; justify-content:center;
  color: var(--white);
  text-decoration:none;
  transition: background 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
}
.book-back:hover{ background: transparent; border-color: var(--white); }
.book-back:active{ transform: scale(0.92); }
.book-back svg{ width: 15px; height: 15px; }

.book-logo{
  width: 100px;
  height: auto;
  margin: 0 auto 28px;
  display:block;
}

.book-title{
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 4.5vw, 34px);
  letter-spacing: -0.05em;
  margin-bottom: 8px;
  text-align:center;
}
.book-sub{
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--white-soft);
  max-width: 360px;
  margin: 0 auto 32px;
  text-align:center;
}

.field{ margin-bottom: 12px; }
.field label{
  display:block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white-soft);
  margin-bottom: 7px;
  padding-left: 18px;
}
.field input, .field textarea{
  width:100%; border:none;
  background: var(--white-tint);
  border-radius: var(--radius-pill);
  padding: 14px 20px;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: -0.03em;
  color: var(--white);
  outline:none;
  transition: background 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}
.field input:focus, .field textarea:focus{
  background: var(--white-tint-strong);
  box-shadow: inset 0 0 0 1.5px var(--glow);
}
.field textarea{ border-radius: 20px; resize: vertical; min-height: 100px; font-family: inherit; }
.field input::placeholder, .field textarea::placeholder{ color: var(--white-faint); }

.send-row{ display:flex; flex-direction:column; gap: 10px; margin-top: 16px; }
.send-btn{
  display:flex; align-items:center; justify-content:center; gap: 9px;
  width:100%;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  border:none;
  cursor:pointer;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration:none;
  transition: opacity 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}
.send-btn svg{ width: 16px; height: 16px; flex-shrink:0; }
.send-btn.primary{ background: var(--white); color: var(--blue); border: 1px solid var(--white); }
.send-btn.primary:not(.disabled):hover{ background: transparent; color: var(--white); }
.send-btn.secondary{ background: transparent; color: var(--white); border: 1px solid var(--white-tint-strong); }
.send-btn.secondary:not(.disabled):hover{ background: var(--white); color: var(--blue); border-color: var(--white); }
.send-btn:not(.disabled):active{ transform: scale(0.98); }
.send-btn.disabled{ pointer-events: none; opacity: 0.3; }
.send-note{
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--white-faint);
  text-align:center;
  margin-top: 4px;
}