/* ──────────────────────────────────────────
   CREA-BASE.CSS
   Variables, reset, tipografía, keyframes,
   utilidades globales (ambient, dotgrid, reveal)
   ────────────────────────────────────────── */

/* ── TOKENS CORPORATIVOS CREA Studio / NearbyCorp ── */
/* Fondo principal, acento y vidrio: define la base visual del sistema */
/* ── VARIABLES ── */
:root {
  --bg:      #06090F;
  --bg2:     #080C15;
  --bg3:     #0C1220;
  --bg4:     #101829;
  --indigo:  #4F6EF7;
  --indigo2: #6B87FF;
  --indigo3: #8FA5FF;
  --ice:     #B8D4FF;
  --ice2:    #D6E8FF;
  --txt:     #E2EAF8;
  --muted:   #4A5E7A;
  --muted2:  #7A93B0;
  --border:  rgba(79,110,247,0.12);
  --border2: rgba(79,110,247,0.22);
  --glass:   rgba(255,255,255,0.025);
  --glass2:  rgba(255,255,255,0.05);
  --font:    'DM Sans', sans-serif;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--txt);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── AMBIENT ── */
.ambient { position:fixed; inset:0; z-index:0; pointer-events:none; }
.amb-1 {
  position:absolute; width:800px; height:800px;
  top:-300px; right:-200px; border-radius:50%;
  background:radial-gradient(circle,rgba(79,110,247,0.07) 0%,transparent 65%);
  animation:amb 20s ease-in-out infinite;
}
.amb-2 {
  position:absolute; width:600px; height:600px;
  bottom:-200px; left:-100px; border-radius:50%;
  background:radial-gradient(circle,rgba(79,110,247,0.05) 0%,transparent 65%);
  animation:amb 26s ease-in-out infinite reverse;
}
.amb-3 {
  position:absolute; width:400px; height:400px;
  top:50%; left:40%; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(107,135,255,0.04) 0%,transparent 60%);
  animation:amb 18s ease-in-out infinite 4s;
}
@keyframes amb {
  0%,100% { transform:scale(1) translate(0,0); }
  50%      { transform:scale(1.08) translate(-30px,20px); }
}

/* ── DOT GRID ── */
.dotgrid {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(79,110,247,0.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);
}

/* ── LAYOUT ── */
.wrap { max-width:1200px; margin:0 auto; padding:0 6%; }
section { position:relative; z-index:1; }

/* ── SECTION HEADER ── */
.sh { margin-bottom:56px; }
.sh.center { text-align:center; }
.sh.center .sec-tag { justify-content:center; }
.sec-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--indigo3); margin-bottom:16px;
}
.sec-tag::before,.sec-tag::after {
  content:''; flex:0 0 16px; height:1px; background:var(--indigo); opacity:0.4;
}
h2 {
  font-size:clamp(30px,3.8vw,52px); font-weight:700;
  letter-spacing:-2px; line-height:1.04; margin-bottom:14px;
}
h2 .si {
  font-family:'Instrument Serif',serif;
  font-style:italic; font-weight:400; color:var(--indigo2); letter-spacing:-1.5px;
}
.sh-desc { font-size:16px; color:var(--muted2); line-height:1.65; max-width:520px; }
.sh.center .sh-desc { margin:0 auto; }

/* ── REVEAL ── */
.r { opacity:0; transform:translateY(20px); transition:opacity .55s ease,transform .55s ease; }
.r.v { opacity:1; transform:translateY(0); }

/* ── KEYFRAMES ── */
@keyframes up    { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
@keyframes spin  { to{transform:rotate(360deg);} }
@keyframes ring  { 0%{opacity:.7;transform:scale(1);} 100%{opacity:0;transform:scale(1.35);} }

/* ── CALENDARIO PERSONALIZADO ── */
/* 1. Volvemos blanco el ícono nativo (por si acaso) */
.fi[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.fi[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* 2. Ajustes extra para que Flatpickr herede tu diseño oscuro */
.flatpickr-calendar.dark {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
  font-family: var(--font) !important;
}