/* ============================================================
   Frigidaire · Landing "Atrévete a sentir la diferencia"
   Rebuilt from formulario.ai (artboard 1080 px wide)
   ============================================================ */

/* ---------- Fonts (licensed Gotham, provided with the design) ---------- */
@font-face{
  font-family:"GothamSSm";
  src:url("fonts/GothamSSm-Book.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"GothamSSm";
  src:url("fonts/GothamSSm-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("fonts/GothamBook.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("fonts/GothamMedium_1.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("fonts/Gotham-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --red-pink:#ef405a;   /* hero accent  */
  --red:#d5323e;        /* brand red    */
  --ink:#333333;        /* hero body    */
  --ink-2:#2a2c2e;      /* labels/logo  */
  --panel:#f2f2f2;      /* card fill    */
  --white:#ffffff;
  --sans-display:"GothamSSm","Gotham","Montserrat",system-ui,sans-serif;
  --sans:"Gotham","Montserrat",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Stage: a fluid poster.  1cqw == 1% of its width ---------- */
.stage{
  width:min(94vw,760px);
  margin:0 auto;
  padding:clamp(18px,3cqw,34px) 0 clamp(40px,7cqw,72px);
  container-type:inline-size;
  position:relative;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-block:clamp(10px,2cqw,24px) 0}

.hero__kitchen{
  position:absolute;
  left:50%;top:0;
  width:100%;
  aspect-ratio:1080/1180;
  transform:translateX(-50%);
  background:url("assets/kitchen.webp") top center / 100% auto no-repeat;
  z-index:0;
  pointer-events:none;
  will-change:transform;
}

.hero__copy{
  position:relative;
  z-index:2;
  margin-left:13%;
  max-width:82%;
}

.headline{
  margin:0;
  font-family:var(--sans-display);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.005em;
  color:var(--ink);
  font-size:clamp(30px,10.3cqw,78px);
  text-transform:uppercase;
}
.headline__line{display:block}
.headline__line--accent{color:var(--red-pink)}

.rule{
  display:block;
  width:clamp(90px,16cqw,120px);
  height:clamp(3px,.42cqw,4px);
  margin:clamp(14px,2.6cqw,26px) 0 clamp(16px,3cqw,30px);
  background:var(--red-pink);
  transform-origin:left center;
}

.lead{
  margin:0;
  font-family:var(--sans-display);
  font-weight:400;
  line-height:1.28;
  letter-spacing:.005em;
  color:var(--ink);
  text-transform:uppercase;
  font-size:clamp(12px,2.9cqw,22px);
}
.lead strong{color:var(--red-pink);font-weight:700}

.hero__products{
  position:relative;
  z-index:1;
  width:78%;
  margin:clamp(10px,2.5cqw,26px) auto 0;
}
.hero__products img{display:block;width:100%;height:auto}

/* ============================================================
   SIGN-UP  (badge + card + brand)
   ============================================================ */
.signup{
  position:relative;
  z-index:2;
  margin-top:clamp(20px,4cqw,44px);
}

.badge{
  position:absolute;
  left:50%;
  top:0;
  width:clamp(60px,10cqw,78px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:3;
  filter:drop-shadow(0 6px 14px rgba(213,50,62,.28));
}
.badge svg{display:block;width:100%;height:100%}

.card{
  position:relative;
  border:clamp(2px,.28cqw,3px) solid var(--red);
  border-radius:clamp(22px,5cqw,46px);
  background:var(--panel);
  padding:clamp(46px,7cqw,72px) clamp(20px,4cqw,44px) clamp(28px,4.5cqw,48px);
  overflow:hidden;
}

.welcome{text-align:center;padding:clamp(6px,1.5cqw,16px) 4% clamp(14px,2.6cqw,26px)}
.welcome__title{
  margin:0 0 clamp(8px,1.6cqw,16px);
  font-family:var(--sans);
  font-weight:500;
  line-height:1;
  color:var(--red);
  font-size:clamp(34px,9.7cqw,74px);
}
.welcome__text{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  line-height:1.32;
  color:var(--ink-2);
  font-size:clamp(13px,3.5cqw,26px);
}

.form-title{
  margin:0;
  text-align:center;
  font-family:var(--sans);
  font-weight:700;
  line-height:1;
  color:var(--red);
  font-size:clamp(26px,6.7cqw,50px);
  padding:clamp(10px,2cqw,20px) 0 clamp(6px,1.4cqw,14px);
}

/* ---- form ---- */
.form{margin:0}
.field{
  margin:0;
  text-align:center;
  padding:clamp(14px,2.6cqw,26px) 0;
  border-bottom:3px solid var(--white);
}
.field label{
  display:block;
  font-family:var(--sans);
  font-weight:500;
  color:var(--ink-2);
  font-size:clamp(15px,3.7cqw,28px);
  margin-bottom:clamp(8px,1.5cqw,16px);
}
.field input{
  width:min(86%,620px);
  height:clamp(46px,8cqw,62px);
  padding:0 clamp(16px,3cqw,28px);
  font-family:var(--sans);
  font-size:clamp(14px,3.2cqw,22px);
  color:var(--ink-2);
  background:var(--white);
  border:2px solid var(--red);
  border-radius:999px;
  outline:none;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.field input:focus{
  border-color:var(--red-pink);
  box-shadow:0 0 0 4px rgba(239,64,90,.18);
}
.field input:focus + .field__error{opacity:0}
.field.is-invalid input{
  border-color:var(--red-pink);
  box-shadow:0 0 0 4px rgba(239,64,90,.16);
}
.field.is-invalid label{color:var(--red-pink)}
.field__error{
  display:block;
  min-height:1.1em;
  margin-top:.5em;
  font-size:clamp(11px,2.3cqw,15px);
  font-weight:500;
  color:var(--red-pink);
  opacity:0;
  transition:opacity .2s var(--ease);
}
.field.is-invalid .field__error{opacity:1}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  width:min(52%,300px);
  min-height:clamp(44px,6.6cqw,58px);
  margin:clamp(22px,4cqw,40px) auto 0;
  padding:0 1.4em;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(16px,4.1cqw,30px);
  color:var(--white);
  background:var(--red);
  border:0;
  border-radius:999px;
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  box-shadow:0 8px 20px rgba(213,50,62,.28);
}
.submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(213,50,62,.36)}
.submit:active{transform:translateY(0) scale(.98)}
.submit:disabled{cursor:default;opacity:.75;box-shadow:none}
.submit__spinner{
  width:1em;height:1em;
  border:.16em solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  display:none;
}
.submit.is-loading .submit__spinner{display:block;animation:spin .7s linear infinite}
.submit.is-done{background:#1f9d55;box-shadow:0 8px 20px rgba(31,157,85,.3)}

.form-status{
  margin:clamp(12px,2cqw,20px) 0 0;
  text-align:center;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(13px,2.9cqw,19px);
  min-height:1.2em;
}
.form-status.is-ok{color:#1f9d55}
.form-status.is-err{color:var(--red-pink)}

/* ---- brand ---- */
.brand{
  display:flex;
  justify-content:center;
  margin-top:clamp(26px,5cqw,52px);
}
.brand__logo{
  display:block;
  width:clamp(190px,50cqw,390px);
  height:auto;
}

/* ============================================================
   Entrance animations  (transition-based → never gets stuck hidden)
   ============================================================ */
/* --- hidden (base) states --- */
[data-anim],[data-field]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.headline__line[data-anim]{transform:translateY(.5em)}
.hero__products[data-anim]{transform:translateY(34px) scale(.97)}
.rule[data-anim]{transform:scaleX(0);transform-origin:left center}
.badge[data-anim]{
  transform:translate(-50%,-50%) scale(.4) rotate(-20deg);
  transition-timing-function:cubic-bezier(.2,1.4,.4,1);
}

/* --- revealed states (declared last, each ≥ specificity of its base) --- */
[data-anim].is-in,[data-field].is-in{opacity:1;transform:translateY(0)}
.headline__line[data-anim].is-in{transform:none}
.hero__products[data-anim].is-in{transform:none}
.rule[data-anim].is-in{transform:scaleX(1)}
.badge[data-anim].is-in{transform:translate(-50%,-50%) scale(1) rotate(0)}

@keyframes spin{to{transform:rotate(360deg)}}

/* gentle idle float on the appliances */
@media (prefers-reduced-motion:no-preference){
  .hero__products.is-in img{animation:float 6s ease-in-out 1s infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

  .submit:not(:disabled){animation:cta-glow 2.6s ease-in-out infinite}
  @keyframes cta-glow{
    0%,100%{box-shadow:0 8px 20px rgba(213,50,62,.28)}
    50%{box-shadow:0 8px 26px rgba(213,50,62,.5)}
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-anim],[data-field]{opacity:1!important;transform:none!important}
  .badge[data-anim]{transform:translate(-50%,-50%)!important}
  .hero__kitchen{transform:translateX(-50%)!important}
}

/* larger screens: a touch more breathing room */
@container (min-width:680px){
  .welcome__text{line-height:1.4}
}