/* ===== Reset ===== */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }

/* ===== Tokens – Dark fijo ===== */
:root{
  --text:#f1f5f9;
  --muted:#cbd5e1;
  --accent:#0ea5e9;
  --accent-strong:#0284c7;
  --card-bg:rgba(18,24,38,.95);
  --card-border:rgba(255,255,255,.08);
  --overlay:rgba(10,16,25,.60);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-strong:0 20px 50px rgba(0,0,0,.75);
}

/* ===== Fondo ===== */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  background:#0b1220;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('../images/gana-mucho-dinero-con-europafreelancer.webp') center/cover no-repeat;
  opacity:.40;
  z-index:-2;
  transition: opacity .25s ease;
}
.overlay{
  position:fixed; inset:0;
  background:var(--overlay);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:-1;
}

/* ===== Efectos estacionales (copos detrás del texto) ===== */
.season-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;         /* detrás del contenido, encima del fondo */
  overflow:hidden;
}
.season-item{
  position:absolute;
  top:-40px;
  opacity:0;
  animation:seasonFall linear infinite;
  filter:drop-shadow(0 0 4px rgba(15,23,42,.85));
}
@keyframes seasonFall{
  0%{
    transform:translateY(-40px) translateX(0) rotate(0deg);
    opacity:0;
  }
  10%{
    opacity:.95;
  }
  50%{
    transform:translateY(55vh) translateX(18px) rotate(90deg);
  }
  100%{
    transform:translateY(110vh) translateX(-18px) rotate(180deg);
    opacity:0;
  }
}

/* ===== Dinero (reflejo discreto) ===== */
.cash-overlay{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;               /* por encima de copos, debajo del contenido */
  opacity:.2;              /* <= 50% como pediste */
  transition: opacity .25s ease;
}
.money{
  position:absolute; top:-100px;
  width:199px; height:100px;
  background:url('../images/money300x300.webp') center/contain no-repeat;
  filter: grayscale(100%) brightness(1.15);
  opacity:.6;              /* un toque más suave */
  animation:fall linear infinite;
  will-change: transform;
}
.money:nth-child(1){ left:10%; animation-duration:6s;   animation-delay:0s; }
.money:nth-child(2){ left:30%; animation-duration:7s;   animation-delay:2s; }
.money:nth-child(3){ left:50%; animation-duration:5.5s; animation-delay:1s; }
.money:nth-child(4){ left:70%; animation-duration:6.5s; animation-delay:3s; }
.money:nth-child(5){ left:86%; animation-duration:7.5s; animation-delay:4s; }

@keyframes fall{
  0%{ transform:translateY(-120px) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform:translateY(110vh) rotate(360deg); opacity:0; }
}

/* ===== Escenario ===== */
.stage{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  z-index:2;   /* contenido por encima de copos y dinero */
}

/* ===== Tarjeta ===== */
.container{
  width:min(92vw, 580px);
  padding:clamp(22px, 3.5vw, 38px);
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.container:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-strong);
}

.appear{
  animation:fadeUp .5s ease-out both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* Logo (blanco siempre) */
.logo{
  width:160px;
  height:auto;
  margin-bottom:12px;
  content:url('../images/logo_Europafreelancer.webp');
}

/* ===== Tipografía ===== */
h1{
  font-size:clamp(24px, 2.8vw, 32px);
  line-height:1.2;
  margin:8px 0 12px;
  font-weight:800;
  color:var(--text);
}
h1 .emoji{ font-size:.9em; }
.lead{
  margin-top:2px;
  color:#cbd5e1;
  font-size:clamp(15px,1.6vw,17px);
}
p{
  margin:10px 0;
  color:var(--muted);
  font-size:clamp(15px,1.55vw,17px);
}
.emph{ margin-top:2px; }
strong{ color:var(--text); }
.accent{ color:var(--accent-strong); }
.signature{ margin-top:14px; }

/* ===== Botón ===== */
.cta{ margin-top:10px; }
.btn{
  appearance:none; border:0; border-radius:22px;
  padding:14px 22px; font-weight:800; font-size:16px; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  position:relative;
  z-index:5; 
  letter-spacing: 1.1px;/* siempre por encima de copos/dinero */
}
.btn-primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-strong));
  color:#fff;
  box-shadow: 0 8px 16px rgba(2,132,199,.28), inset 0 -2px 0 rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.06);
  animation: pulseEF 2.2s ease-in-out infinite;
}
.btn-primary:hover{ transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); }
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(2,132,199,.20),
    0 0 0 6px rgba(2,132,199,.35),
    inset 0 -2px 0 rgba(0,0,0,.15);
}
.btn-full{ width:100%; }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal[aria-hidden="false"]{ display:block; }

.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(2,8,23,.80);
  backdrop-filter:blur(4px) saturate(.9);
  -webkit-backdrop-filter:blur(4px) saturate(.9);
}
.modal-card{
  position:relative; width:min(92vw,520px); margin:10vh auto;
  background:rgba(18,24,38,.98);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(2,8,23,.60);
  padding:24px; text-align:left; animation:fadeUp .35s ease-out both;
}
.modal-close{
  position:absolute; top:10px; right:12px;
  border:0; background:transparent; font-size:20px;
  color:#64748b; cursor:pointer;
}
.modal h2{
  font-size:clamp(20px,2.2vw,24px);
  margin:6px 0;
  color:var(--text);
}
.modal-sub{
  margin-top:0;
  color:#cbd5e1;
}

/* Formulario */
.field{ margin:14px 0; }
.field label{
  display:block; font-weight:700; font-size:14px;
  margin-bottom:6px; color:var(--text);
}
.field input{
  width:100%; padding:14px 16px; font-size:16px;
  border:1px solid rgba(148,163,184,.8);
  border-radius:14px;
  background:#0b1220;
  color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{ color:#9aa3af; }
.field input:focus{
  border-color:var(--accent-strong);
  box-shadow:0 0 0 3px rgba(2,132,199,.25);
}
.hint{
  display:block; font-size:12px;
  color:#64748b; margin-top:6px;
}
.form-msg{ margin-top:10px; font-weight:700; }
.form-msg.ok{ color:#059669; }
.form-msg.err{ color:#dc2626; }

/* ===== Accesibilidad y móvil ===== */
@media (max-width:480px){

  .container{
    margin-inline: auto !important; /* centra horizontalmente SIEMPRE */
    display:block;
    width:100%;
    padding:8px;
    
  }

  h1{ font-size:20px; }
  p{ font-size:17px; }
  .btn{ font-size:16px; padding:16px 17px; 
      letter-spacing: 1.1px;
  }
  .modal-card{ padding:20px; border-radius:22px; }

  .logo{
    width:61%;
    margin-top:10px;
  }

  .signature{
    margin-top:17px;
    font-size:14px;
  }
}

/* ===== Comportamiento al abrir modal: foco total en el form ===== */
body.modal-open::before{
  opacity:0 !important;
  background:none !important;
}
body.modal-open .cash-overlay{
  opacity:0 !important;
}
body.modal-open .money{
  animation-play-state:paused !important;
  opacity:0 !important;
  visibility:hidden !important;
}
body.modal-open .overlay{
  background:rgba(8,12,20,.88) !important;
  backdrop-filter:blur(4px) saturate(.9);
  -webkit-backdrop-filter:blur(4px) saturate(.9);
}

/* ===== Logo más grande en desktop ===== */
@media (min-width: 1024px){
  .logo{
    width:221px;    /* ← NUEVO tamaño en desktop */
  }
}

/* Animación premium para la campana del botón */
.btn-primary::first-letter{
  display:inline-block;
  animation: efBell 2.8s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes efBell{
  0%   { transform: rotate(0); }
  5%   { transform: rotate(-10deg); }
  10%  { transform: rotate(10deg); }
  15%  { transform: rotate(-6deg); }
  20%  { transform: rotate(0deg); }
  35%  { transform: scale(1.05); }
  50%  { transform: scale(1); }
  100% { transform: rotate(0); }
}

/* Animación del botón (pulse suave) */
@keyframes pulseEF{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}



/* Quitar efectos SOLO al botón del modal */
.modal-card .btn-primary,
.modal-card .btn-primary::first-letter {
    animation: none !important;
    transform: none !important;
}