/* Estilos para Landing Guardian del Maipo 2025 */
:root{
  --c1:#131f2f; /* navy muy oscuro */
  --c2:#102e4d; /* navy */
  --c3:#3f4f6e; /* slate */
  --c4:#695c7b; /* purple muted */
  --c5:#e66f5c; /* coral */
  --c6:#fe9b62; /* peach */
}

html, body { height:100%; }
body.landing-no-scroll { overflow:hidden; }
/* Oculta header/footer del tema para vista limpia */
body.landing-no-scroll header,
body.landing-no-scroll footer,
body.landing-no-scroll .wp-site-blocks>header,
body.landing-no-scroll .wp-site-blocks>footer{ display:none !important; }
body.landing-no-scroll #wpadminbar{ display:none !important; }

.kayak-landing{
  position:relative; min-height:100svh; height:100svh; width:100%;
  display:grid; place-items:center; isolation:isolate;
  font-family: "Trade Winds", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#1e293b;
  background:
    radial-gradient(circle at 75% 20%, rgba(254,155,98,.35), rgba(254,155,98,0) 60%),
    radial-gradient(circle at 20% 80%, rgba(230,111,92,.28), rgba(230,111,92,0) 55%),
    linear-gradient(135deg,#f8fafc 0%, #eef4f8 45%, #e6edf3 100%);
}

/* Fondo animado y con transición */
.kayak-landing .background{
  position:absolute; inset:0; z-index:-2;
  background-image: var(--bg-url, radial-gradient(1200px_600px at 70% 20%, var(--c6), transparent), radial-gradient(800px_600px at 20% 80%, var(--c5), transparent)), linear-gradient(160deg, var(--c2), var(--c1));
  background-size: cover; background-position:center; background-repeat:no-repeat;
  transform: translate(0,0);
  filter: blur(4px);
  will-change: transform, filter, opacity;
  transition: opacity .8s cubic-bezier(.4,.2,.2,1), filter .8s cubic-bezier(.4,.2,.2,1), transform .3s cubic-bezier(.4,.2,.2,1);
  animation: subtleFocus 10s ease-in-out infinite alternate;
}

.kayak-landing .overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 55%, rgba(255,255,255,.15) 100%); z-index:-1; mix-blend-mode:normal; }

@keyframes subtleFocus{
  0%{ filter: blur(0px) brightness(.92); }
  100%{ filter: blur(5px) brightness(.85); }
}

.kayak-landing .content{
  width:min(92vw, 980px);
  max-height:min(80vh, 680px);
  margin:0 auto;
  text-align:center;
  display:grid;
  gap:2rem;
  align-items:center;
  justify-items:center;
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--c3) 60%, transparent) transparent;
  will-change: opacity, backdrop-filter;
}

.kayak-landing .brand{ display:grid; gap:.5rem; }
.kayak-landing .brand .custom-logo{ max-width:min(42vw, 320px); height:auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.kayak-landing .site-title{ font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); font-weight:700; letter-spacing:.02em; color:#1e293b; margin:0; }
.kayak-landing .subtitle{ font-weight:600; color: var(--c5); margin:0; text-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* Formulario animado y con transición de opacidad/blur */
.kayak-landing .register{
  width:min(92vw, 800px); max-height:min(80vh, 560px); padding:1.25rem 1.25rem 2.25rem; border-radius:28px; background:rgba(255,255,255,.85);
  backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 8px 40px rgba(0,0,0,.08);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem 1.25rem; align-items:start; overflow:auto;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) transparent;
  will-change: opacity, backdrop-filter;
  transition: opacity .6s ease, backdrop-filter 1.2s ease;
}
.kayak-landing .register .field{ display:grid; gap:.25rem; text-align:left; }
.kayak-landing .register label{ font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#475569; }
.kayak-landing .register input,
.kayak-landing .register textarea{
  border:1px solid #c9d2dc; border-radius:10px; padding:.7rem .85rem; background:#f8fafc; color:#0f172a; outline:none; transition: border-color .18s, background .25s, box-shadow .18s; font-size:.95rem; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.kayak-landing .register input:focus,
.kayak-landing .register textarea:focus{ border-color: var(--c5); background:#ffffff; box-shadow:0 0 0 3px rgba(230,111,92,.25); }
.kayak-landing .register .field--wide{ grid-column: 1 / -1; }
.kayak-landing .register .cta{ font-size:1.05rem; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; grid-column: span 2; padding: .95rem 1.2rem; border:none; cursor:pointer; background:linear-gradient(90deg,var(--c5),var(--c6)); color: #1a1f2b; font-weight:700; letter-spacing:.06em; border-radius:14px; text-transform:uppercase; box-shadow: 0 4px 18px rgba(0,0,0,.15); transition: transform .08s ease, filter .25s ease, box-shadow .25s ease; }
.kayak-landing .register .cta:hover{ filter:brightness(1.05); box-shadow:0 6px 28px rgba(0,0,0,.18); }
.kayak-landing .register .cta:active{ transform: translateY(1px); filter: brightness(.92); }
.kayak-landing .register .form-msg{ grid-column: span 2; min-height:1.25rem; margin:0; font-size:.95rem; }

/* Loader y estados */
.register .loader{ display:none; grid-column: span 2; place-content:center; }
.register.sending .loader{ display:grid; }
.spinner{ width:36px; height:36px; border:4px solid #e2e8f0; border-top-color: var(--c5); border-radius:50%; animation: spin .85s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Mensaje final */
.thank-you{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:1.2rem; text-align:center; padding:2rem; color:#1e293b; }
.thank-you.active{ display:flex; animation: fadeIn .6s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }


.kayak-landing .bases-btn{
  appearance:none;
  background: color-mix(in oklab, var(--c1) 85%, var(--c3) 15%);
  color: #e9f2ff;
  border: 1px solid color-mix(in oklab, var(--c3) 55%, transparent);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  cursor:pointer;
  opacity: .95;
  transition: opacity .2s, box-shadow .2s, transform .1s, background .2s, border-color .2s;
  margin-top: .35rem;
}
.kayak-landing .bases-btn:hover{
  opacity: 1;
  background: color-mix(in oklab, var(--c1) 70%, var(--c3) 30%);
  border-color: color-mix(in oklab, var(--c3) 70%, transparent);
}

/* Modal */
.bases-modal{
  border:none;
  padding:0;
  border-radius:16px;
  background: var(--c2); 
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  width:min(92vw, 800px);
  color:#fff;
}
.bases-modal::backdrop{
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.bases-modal .modal-content{
  padding:1.25rem;
  display:grid;
  gap:1rem;
}
.bases-modal h3{
  margin:0;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.bases-modal .modal-close{
  justify-self:end;
  padding:.5rem .9rem;
  border-radius: 10px;
  border:1px solid color-mix(in oklab, var(--c3) 40%, transparent);
  background: color-mix(in oklab, var(--c5) 80%, var(--c1) 20%);
  color:#fff;
  cursor:pointer;
  font-weight:300;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Botón Bases modo claro (si no se ha actualizado todavía) */
.kayak-landing .bases-btn{ appearance:none; background:#ffffff; color:#1e293b; border:1px solid #cbd5e1; border-radius:40px; padding:.55rem 1.1rem; font-size:.7rem; font-weight:600; letter-spacing:.08em; box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:pointer; opacity:.92; transition:background .25s,border-color .25s,opacity .2s; margin-top:.35rem; }
.kayak-landing .bases-btn:hover{ opacity:1; background:#f1f5f9; }

/* Responsivo */
@media (max-width:640px){
  .kayak-landing .content{
    width:98vw;
    max-height:88vh;
    padding:0 0.5rem;
  }
  .kayak-landing .register{
    grid-template-columns:1fr;
    width:100%;
    max-height:unset;
    min-width:0;
  }
  .kayak-landing .register .cta{ grid-column: auto; }
  .kayak-landing .register .field--wide{ grid-column: 1; }
}