:root {
  --bg: #F2EFEA;
  --fg: #111111;
  --muted: #4a4a4a;
  --card: #ffffff;
  --border: rgba(0,0,0,0.12);
  --accent: #6b8cff;
  --accent-2: #9ad4b1;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --container: 640px;
  --darkest: rgba(0,0,0,0.10);
  --green-1: #9ad4b1;
  --blue-1: #6b8cff;
  --red-1: #f6a6a6;
  --yellow-1: #f2e9b5;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Lora", Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

body:not(.form-mode) {
  background:
    linear-gradient(180deg, transparent, var(--darkest)),
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.0) 60%),
    linear-gradient(-45deg, var(--green-1), var(--blue-1), var(--red-1), var(--yellow-1));
  background-size: 100% 100%, 100% 100%, 400% 400%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%, 50% 100%, 0% 50%; }
  50%  { background-position: 0% 50%, 50% 100%, 100% 50%; }
  100% { background-position: 0% 50%, 50% 100%, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.form-mode) {
    animation: none;
  }
}

body.form-mode {
  background:
    linear-gradient(180deg, transparent, var(--darkest)),
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.0) 60%),
    linear-gradient(-45deg, var(--green-1), var(--blue-1), var(--red-1), var(--yellow-1));
  background-size: 100% 100%, 100% 100%, 400% 400%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  animation: gradientShift 15s ease infinite;
  transition: background-color .3s ease, background-image .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.form-mode {
    animation: none;
  }
}

.page {
min-height:100dvh;
display:grid;
grid-template-rows:auto 1fr auto;
}

.hero {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(64px, 16vh, 120px) 20px clamp(64px, 16vh, 120px);
  background:
    radial-gradient(900px 400px at 50% -20%, rgba(0,0,0,0.04), transparent 60%),
    radial-gradient(900px 400px at 20% 0%, rgba(0,0,0,0.03), transparent 60%),
    radial-gradient(900px 400px at 80% 0%, rgba(0,0,0,0.03), transparent 60%);
}

.title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(20px, 6.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 10px 0 6px;
  white-space: nowrap;
  overflow: visible;
}

.subtitle {
  max-width: var(--container);
  margin: 0 auto;
  font-size: clamp(13px, 2.6vw, 26px);
  font-style: italic;
  color: #222;
}

.cta { margin-top: 10px; }

.hero-video { width: 100%; max-width: var(--container); margin: 8px auto 10px; }
.hero-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: #fff;
  object-fit: cover;
  pointer-events: none;
  aspect-ratio: 16 / 9;
}

.hero-note { width: 100%; max-width: var(--container); margin: 16px auto 18px; }
.note-paper {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #000;
  box-shadow: var(--shadow);
  padding: clamp(28px, 6vw, 48px);
  color: #fff;
  aspect-ratio: 16 / 9;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  position: relative;
}
.note-paper::before{
  content:"";
  position:absolute; inset:0; border-radius:16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)),
             linear-gradient(-45deg, var(--green-1), var(--blue-1), var(--red-1), var(--yellow-1));
  background-size:100% 100%, 400% 400%;
  background-repeat:no-repeat,no-repeat;
  opacity:.22; pointer-events:none; animation: gradientShift 16s ease infinite;
}
.note-paper h3{ margin:0 0 10px; font-size:clamp(18px,2.6vw,22px); font-style:italic; text-align:center; }
.note-paper h3{ position: relative; z-index: 1; }
.note-paper .note-content{ max-width:680px; margin:0 auto; padding:28px 16px; display:grid; gap:16px; position: relative; z-index: 1; }
.note-paper .note-content h3{ margin:18px 0 10px; text-align:center; font-size:clamp(16px,2.2vw,20px); font-style:italic; }
.note-paper, .note-paper .note-content, .note-paper h3, .note-paper .note-content h3{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.note-paper .note-content p{
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.75;
}
.note-paper .note-content p{
  margin:0;
  padding-left:0;
  color:#fff;
  text-align-last:center;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  position:relative;
}
.note-paper .note-content p::before{ content:none; }
.note-video { width:100%; max-width:var(--container); margin:8px auto 10px; }
.note-video img{ width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); background:#000; object-fit:cover; aspect-ratio:16/9; }

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.25em 0.5em;
  border-radius: 8px;
  border: 3px solid currentColor;
  background: transparent;
  color: #000;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 1px 1px 0 0 currentColor,
              2px 2px 0 0 currentColor,
              3px 3px 0 0 currentColor,
              4px 4px 0 0 currentColor,
              5px 5px 0 0 currentColor;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: top .05s ease, left .05s ease, box-shadow .05s ease;
}
.button.primary { background: transparent; color: #000; }
.button:active, .button.primary:active { box-shadow: 0 0 0 0 currentColor; top:5px; left:5px; }

.form-section {
  display: grid;
  place-items: center;
  padding: clamp(12px, 6vh, 36px) 20px clamp(48px, 12vh, 90px);
  transition: opacity .35s ease, transform .35s ease;
  background: transparent;
}
.form-section-title { margin:0 0 8px; text-align:center; font-size:clamp(18px,2.6vw,22px); letter-spacing:2px; text-transform:uppercase; opacity:.85; }
.form-section-copy { margin:0 0 28px; text-align:center; color:var(--muted); font-size:13px; opacity:.8; }
.form-section.collapsed { opacity:0; max-height:0; padding-top:0; padding-bottom:0; overflow:hidden; pointer-events:none; }
.form-section:not(.collapsed) { opacity:1; }
.form-card { width:100%; max-width:var(--container); background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; backdrop-filter:none; }
.form-section.collapsed .form-card{ opacity:0; transform:translateY(8px); pointer-events:none; }
.form-section:not(.collapsed) .form-card{ opacity:1; transform:translateY(0); }
.form-title{ font-family:"Lora", Georgia, "Times New Roman", serif; font-size:clamp(20px,2.6vw,28px); margin:0 0 4px; }
.form-copy{ color:var(--muted); margin:0 0 14px; font-size:14px; }
form{ display:grid; gap:10px; }
.field{ display:block; overflow:hidden; max-height:0; opacity:0; transform:translateY(6px); transition:max-height .35s ease, opacity .25s ease, transform .35s ease, margin .3s ease; margin:0; text-align:center; }
.field.active{ max-height:1400px; opacity:1; transform:translateY(0); margin:6px 0; }
.wizard-controls{ display:flex; gap:10px; justify-content:center; align-items:center; margin-top:2px; }
.wizard-controls #back{ opacity:.8; }
.progress{ position:relative; width:100%; height:3px; background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.1); border-radius:999px; overflow:hidden; margin:0 0 10px; }
.progress .bar{ height:100%; width:0%; background:linear-gradient(90deg, rgba(107,140,255,0.9), rgba(154,212,177,0.9)); border-radius:999px; transition:width .25s ease; }

.progress-scenery{ position:relative; width:100%; max-width:var(--container); height:90px; margin:6px auto 6px; border-radius:12px; overflow:hidden; }
.progress-scenery::before{ content:""; position:absolute; inset:0; z-index:0; transition:background .6s ease; }
.progress-scenery[data-phase="day"]::before{ background:linear-gradient(180deg, #a9d6ff 0%, #f2efe9 75%); }
.progress-scenery[data-phase="dusk"]::before{ background:linear-gradient(180deg, #ffb57d 0%, #f1d6c0 75%); }
.progress-scenery[data-phase="night"]::before{ background:linear-gradient(180deg, #2a0e4e 0%, #120824 75%); }
.progress-scenery::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; transition:opacity .6s ease; }
.progress-scenery[data-phase="day"]::after{ opacity:0; }
.progress-scenery[data-phase="dusk"]::after{ opacity:.25; background: radial-gradient(120% 80% at 50% -10%, rgba(255,197,143,0.25), transparent 60%); }
.progress-scenery[data-phase="night"]::after{ opacity:.55; background: radial-gradient(140% 100% at 50% -20%, rgba(0,0,0,0.55), transparent 60%), repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0.65) 0 1px, transparent 2px), repeating-radial-gradient(circle at 70% 20%, rgba(255,255,255,0.5) 0 1px, transparent 3px), repeating-radial-gradient(circle at 40% 60%, rgba(255,255,255,0.35) 0 1px, transparent 3px); background-size:100% 100%, 3px 3px, 4px 4px, 5px 5px; background-repeat:no-repeat, repeat, repeat, repeat; }
.progress-scenery .mountains{ position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:12px; overflow:hidden; z-index:1; }
.progress-scenery .mountains .ridge1, .progress-scenery .mountains .ridge2{ transition:fill .6s ease; }
.progress-scenery[data-phase="day"] .mountains .ridge1{ fill:#bdb8ab; }
.progress-scenery[data-phase="day"] .mountains .ridge2{ fill:#a7a293; }
.progress-scenery[data-phase="dusk"] .mountains .ridge1{ fill:#9d9482; }
.progress-scenery[data-phase="dusk"] .mountains .ridge2{ fill:#8b826f; }
.progress-scenery[data-phase="night"] .mountains .ridge1{ fill:#4e4b43; }
.progress-scenery[data-phase="night"] .mountains .ridge2{ fill:#3e3b34; }
.progress-sun{ position:absolute; width:22px; height:22px; background:radial-gradient(circle at 35% 35%, #ffd27a, #ffb347 60%, #f4973b 100%); border-radius:50%; box-shadow:0 0 14px rgba(255,179,71,0.6), 0 0 30px rgba(255,210,122,0.4); left:-10px; bottom:14px; transition:left .45s cubic-bezier(.2,.8,.2,1), bottom .45s cubic-bezier(.2,.8,.2,1); pointer-events:none; z-index:2; }
.progress-scenery[data-phase="dusk"] .progress-sun,
.progress-scenery[data-phase="night"] .progress-sun{ background: radial-gradient(circle at 35% 35%, #ffffff, #dbe7ff 60%, #b5c9ff 100%); box-shadow:0 0 10px rgba(219,231,255,0.7), 0 0 20px rgba(181,201,255,0.5); filter:saturate(0.9); }

label{ font-size:clamp(14px,2vw,18px); color:#111; text-transform:uppercase; letter-spacing:1.5px; font-weight:700; text-align:center; margin-bottom:6px; display:block; }
.form-section input, .form-section textarea, .form-section select{
  width:100%; max-width:560px; margin-left:auto; margin-right:auto; padding:12px 14px;
  border-radius:12px; border:none; background:rgba(255,255,255,0.10); color:var(--fg); font:inherit; outline:none; text-align:center;
  transition:background .2s ease, box-shadow .2s ease;
}
.form-section input::placeholder, .form-section textarea::placeholder{ color:#777; }
.form-section input:focus, .form-section textarea:focus, .form-section select:focus{ background:rgba(255,255,255,0.16); box-shadow:0 0 0 4px rgba(0,0,0,0.10); }

.options{ display:grid; gap:10px; padding:6px 0 0; }
.options .opt{ position:relative; display:block; }
.options .opt input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.options .opt span{
  display:flex; align-items:center; justify-content:center; min-height:40px; padding:8px 16px 8px 40px;
  border:2px solid #000; border-radius:12px; background:#fff; color:#000; letter-spacing:.5px; font-size:14px; line-height:1.2; box-shadow:2px 2px 0 #000;
  transition:transform .1s ease, box-shadow .1s ease, background .2s ease, color .2s ease, border-color .2s ease; text-align:center; position:relative;
}
.options .opt span::before{ content:""; position:absolute; left:12px; top:50%; width:14px; height:14px; border-radius:50%; border:2px solid #000; background:#fff; transform:translateY(-50%); transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.options .opt input:checked + span{ background:#000; color:#fff; transform:translate(2px,2px); box-shadow:0 0 0 #000; }
.options .opt input:checked + span::before{ border-color:#fff; background:#fff; box-shadow:0 0 8px rgba(255,255,255,0.6); }
.options .opt span:hover{ border-color:#111; background:linear-gradient(135deg, rgba(107,140,255,0.16), rgba(154,212,177,0.16)); }
.options .opt input:checked + span:hover{ background:#000; }
@media (min-width:560px){ .options{ grid-template-columns:repeat(2,1fr); } }

.form-note{ margin:6px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.form-status{ min-height:18px; font-size:13px; }
.form-status.error{ color:#c53f3f; }
.form-status.success{ color:#2f7d31; }
.footer { padding:24px 20px 36px; text-align:center; color:var(--muted); font-size:13px; }

.success-banner{
  display: grid;
  place-items: center;
  padding: 12px 14px;
  margin: 6px auto 14px;
  max-width: var(--container);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  color: #0f5132;
  border: 2px solid rgba(15,81,50,0.25);
  border-radius: 14px;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}
.success-banner[hidden]{ display: none !important; }


.badge{
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--muted);
border:1px solid var(--border);
padding:5px 10px;
border-radius:999px;
background:rgba(255,255,255,0.03);
}

.title{
font-weight:700;
font-style:italic;
font-size:clamp(20px,6.6vw,52px);
line-height:1.12;
margin:10px 0 6px;
}

.subtitle{
max-width:var(--container);
margin:0 auto;
font-size:clamp(13px,2.6vw,26px);
font-style:italic;
color:#222;
}

.hero-video{
width:100%;
max-width:var(--container);
margin:8px auto 10px;
}

.hero-video video{
width:100%;
border-radius:16px;
border:1px solid var(--border);
box-shadow:var(--shadow);
aspect-ratio:16/9;
}

/* -------- BUTTON -------- */

.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.35em 0.7em;
border-radius:8px;
border:3px solid currentColor;
background:transparent;
color:#000;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
cursor:pointer;

box-shadow:
1px 1px 0 currentColor,
2px 2px 0 currentColor,
3px 3px 0 currentColor,
4px 4px 0 currentColor;

position:relative;
transition:.05s;
}

.button:active{
box-shadow:none;
top:4px;
left:4px;
}

.button.primary{
background:transparent;
color:#000;
}

/* -------- FORM SECTION -------- */

.form-section{
display:grid;
place-items:center;
padding:40px 20px 80px;
}

.form-card{
width:100%;
max-width:var(--container);
}

form{
display:grid;
gap:14px;
}

/* -------- WIZARD STEPS -------- */

.step{
display:none;
opacity:0;
transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease;
}

.step.active{
display:block;
opacity:1;
transform:translateY(0);
}

/* field solo estética ahora */

.field{
text-align:center;
}

/* -------- LABEL -------- */

label{
font-size:clamp(14px,2vw,18px);
color:#111;
text-transform:uppercase;
letter-spacing:1.5px;
font-weight:700;
display:block;
margin-bottom:8px;
}

/* -------- INPUTS -------- */

input,
textarea,
select{
width:100%;
max-width:560px;
margin:auto;
padding:12px 14px;
border-radius:12px;
border:none;
background:rgba(255,255,255,0.16);
font:inherit;
text-align:center;
outline:none;
}

input:focus,
textarea:focus,
select:focus{
background:rgba(255,255,255,0.22);
box-shadow:0 0 0 4px rgba(0,0,0,0.10);
}

/* -------- RADIO OPTIONS -------- */

.options{
display:grid;
gap:10px;
}

.options label{
display:block;
padding:10px;
border:2px solid #000;
border-radius:10px;
cursor:pointer;
background:#fff;
box-shadow:2px 2px 0 #000;
transition:.15s;
}

.options input{
display:none;
}

.options input:checked + span{
background:#000;
color:#fff;
}

/* -------- WIZARD CONTROLS -------- */

.navigation{
display:flex;
gap:10px;
justify-content:center;
margin-top:12px;
}

/* -------- FOOTER -------- */

.footer{
padding:24px 20px 36px;
text-align:center;
color:var(--muted);
font-size:13px;
}