/* ==========================================================================
   Vive Copiapó — Parcelas · landing "home"
   Réplica del diseño original (lienzo 400px en mobile / 960px en desktop).
   Las medidas van en rem y el tamaño de raíz escala con el viewport, igual
   que en el original: por eso todo el layout se mantiene proporcional.
   ========================================================================== */

/* --------------------------------------------------------- Base / tokens */

:root {
  font-size: 16px;

  --marron-oscuro: #412204;
  --marron-medio:  #653405;
  --naranja:       #AE5907;
  --crema:         #F4EEE8;
  --gris-claro:    #FBFBFB;
  --blanco-roto:   #F9F6F6;

  --font-titulo: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif;
  --font-texto:  Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 400px)  { :root { font-size: 4vw; } }
@media screen and (min-width: 768px) and (max-width: 1200px) { :root { font-size: 1.33vw; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  background: #000;
  font-family: var(--font-texto);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
img { max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* Lienzo: 400px en mobile, 960px (60rem) en desktop, siempre centrado. */
.wrap {
  position: relative;
  height: 100%;
  max-width: 25rem;
  margin: 0 auto;
}

section { position: relative; }

/* Todo bloque directo del lienzo se posiciona por coordenadas, como el original. */
.wrap > * { position: absolute; }

/* Botones naranjas (WHATSAPP / ¡CONTÁCTANOS!) */
.btn-naranja {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--naranja);
  color: #fff;
  font-family: var(--font-texto);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 1px 3px rgba(1, 1, 1, .5);
  transition: background .3s;
}
.btn-naranja:hover { background: var(--marron-oscuro); color: #fff; }


/* ------------------------------------------------------------------ HERO */

.hero {
  height: 64.0625rem;
  background: #000 url(../img/hero-copiapo.jpg) no-repeat 50% 50% / cover;
}

.hero__panel {
  top: 3.1875rem;
  left: 0;
  width: 18.9375rem;
  height: 24.8125rem;
  background: rgba(101, 52, 5, .68);
  z-index: 1;
}

.hero__strip {
  top: 54.6875rem;
  left: 0;
  width: 18.9375rem;
  height: 9.375rem;
  background: var(--marron-medio);
  z-index: 2;
}

.hero__note {
  top: 57.375rem;
  left: 1.125rem;
  width: 15.5rem;
  z-index: 3;
  color: #fff;
  font-size: 1.3622rem;
  line-height: 1.625rem;
}

.hero__title {
  top: 4.3125rem;
  left: 1.125rem;
  width: 16.8125rem;
  z-index: 4;
  color: #fff;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 2.291rem;
  line-height: 2.3125rem;
  /* El original duplica el título en marrón, desplazado, detrás del blanco. */
  text-shadow: .25rem .3125rem 0 var(--marron-oscuro);
}

.hero__tagline {
  top: 12.0625rem;
  left: 1.25rem;
  width: 13.9375rem;
  z-index: 4;
  color: #fff;
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: 1.6099rem;
  line-height: 1.9375rem;
}

.hero__rule { display: none; }

/* --- Tarjeta del formulario --- */

.card {
  top: 20.8125rem;
  left: 2.5625rem;
  width: 22.5rem;
  z-index: 6;
  padding: 2.125rem 1.5625rem 2.75rem 1.5rem;
  background: var(--crema);
  border-radius: 1.125rem;
  box-shadow: rgba(65, 34, 4, .55) 2px 0 6px 6px;
}

.card__title {
  color: var(--marron-medio);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.8576rem;
  line-height: 2.25rem;
  text-align: center;
}

.form { margin-top: .6875rem; }

.field { margin-top: 1.5625rem; }
.field:first-child { margin-top: 0; }

.field label {
  display: block;
  margin-bottom: 1.0625rem;
  color: #000;
  font-size: 1.25rem;
  line-height: 1.375rem;
}

.field input {
  display: block;
  width: 100%;
  height: 3.5rem;
  padding: .5rem .625rem .5625rem;
  border: 1px solid var(--marron-medio);
  border-radius: 3px;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 1.25rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28);
}
.field input:user-invalid { border-color: #E12627; }

.form__submit {
  display: block;
  width: 100%;
  height: 3.375rem;
  margin-top: 3.125rem;
  border: 2px solid var(--marron-medio);
  border-radius: 5px;
  background: var(--naranja);
  color: #fff;
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: .8669rem;
  line-height: 120%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(1, 1, 1, .5);
  transition: background .3s;
}
.form__submit:hover:not(:disabled) { background: var(--marron-oscuro); }
.form__submit:disabled { opacity: .7; cursor: default; }

.form__msg {
  display: block;
  margin-top: .5rem;
  color: var(--marron-oscuro);
  font-size: .9375rem;
  line-height: 1.25rem;
  text-align: center;
}


/* ---------------------------------------------------- CTA de WhatsApp */

.cta {
  height: 16.1875rem;
  background: var(--gris-claro);
}

.cta__title {
  top: 1.1875rem;
  left: 1.4375rem;
  width: 22.0625rem;
  color: var(--marron-oscuro);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.8576rem;
  line-height: 2.25rem;
  text-align: center;
}

.cta__btn {
  top: 6.8125rem;
  left: 5.875rem;
  width: 13.25rem;
  height: 3.625rem;
  border-radius: 9px;
  font-size: 1.6099rem;
}

.cta__icon {
  top: 9.0625rem;
  left: 15.875rem;
  width: 6.125rem;
  height: 6.125rem;
}


/* --------------------------------------------------------- Proyecto */

.proyecto {
  height: 80.9375rem;
  background: var(--crema);
}

.proyecto__title {
  top: 2.25rem;
  left: 1.25rem;
  width: 22.5rem;
  color: var(--marron-oscuro);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.8576rem;
  line-height: 2.625rem;
  text-align: center;
}

.proyecto__rule {
  top: 6.5625rem;
  left: 2.9375rem;
  width: 19.125rem;
  height: 0;
  border-bottom: .25rem solid var(--naranja);
}

.feature {
  left: 3.5625rem;
  width: 17.5rem;
  text-align: center;
}
.feature--1 { top: 8.875rem; }
.feature--2 { top: 31.75rem; }
.feature--3 { top: 58.3125rem; }

.feature h3 {
  color: var(--marron-oscuro);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.3622rem;
  line-height: 1.625rem;
}

.feature img {
  display: block;
  width: 17.5rem;
  height: 17.5rem;
  margin: 1.1875rem auto 0;
  border-radius: 50%;
  object-fit: cover;
}


/* ----------------------------------------------------------- Precio */

.precio {
  height: 8.75rem;
  background: var(--marron-oscuro);
}

.precio__title {
  top: 2.125rem;
  left: 1.1875rem;
  width: 22.5rem;
  color: #fff;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.9814rem;
  line-height: 2.8125rem;
  text-align: center;
}

.precio__nota {
  top: 5.375rem;
  left: 1.1875rem;
  width: 22.5rem;
  color: #fff;
  font-size: .9907rem;
  line-height: 1.375rem;
  text-align: center;
}

.precio__rule { display: none; }


/* --------------------------------------------------- Financiamiento */

.financiamiento {
  height: 25.5625rem;
  background: var(--gris-claro);
}

.financiamiento__foto {
  top: 0;
  left: 0;
  width: 24.9375rem;
  height: 25.5625rem;
  object-fit: cover;
}

.financiamiento__banda {
  top: 4.1875rem;
  left: 5rem;
  width: 20rem;
  height: 5.5rem;
  background: var(--marron-oscuro);
}

.financiamiento__title {
  top: 4.6875rem;
  left: 7rem;
  width: 16.6875rem;
  color: var(--blanco-roto);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.6099rem;
  line-height: 2.25rem;
  text-align: right;
}

.credito {
  height: 4.9375rem;
  background: var(--marron-oscuro);
}

.credito__title {
  top: .75rem;
  left: 2.125rem;
  width: 20.625rem;
  color: var(--blanco-roto);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.4861rem;
  line-height: 1.8125rem;
  text-align: center;
}


/* ----------------------------------------------------------- Cierre */

.cierre {
  height: 17.25rem;
  background: var(--crema) url(../img/atacama.jpg) no-repeat 48% 5% / cover;
}

.cierre__title {
  top: 1.1875rem;
  left: 5.25rem;
  width: 14.3125rem;
  color: var(--marron-oscuro);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.4861rem;
  line-height: 1.8125rem;
  text-align: center;
}

.cierre__btn {
  top: 7rem;
  left: 6.0625rem;
  width: 12.75rem;
  height: 2.5rem;
  border-radius: 5px;
  font-size: .8669rem;
}


/* ================================================== DESKTOP (≥ 768px) === */

@media screen and (min-width: 768px) {

  .wrap { max-width: 60rem; }

  /* ---- Hero ---- */
  .hero { height: 40.1875rem; }

  .hero__panel {
    top: 7.5rem;
    left: 4.375rem;
    width: 55.5625rem;
    height: 25.5rem;
  }

  .hero__strip {
    top: 31.125rem;
    left: 5rem;
    width: 51.375rem;
    height: 4.75rem;
  }

  .hero__note {
    top: 32.625rem;
    left: 9rem;
    width: 46.1875rem;
    font-size: 1.4861rem;
    line-height: 2.375rem;
  }

  .hero__title {
    top: 9rem;
    left: 1.375rem;
    width: 28rem;
    font-size: 3.7771rem;
    line-height: 3.8125rem;
    text-shadow: .125rem .25rem 0 var(--marron-oscuro);
  }

  .hero__tagline {
    top: 21.25rem;
    left: 9rem;
    width: 17.6875rem;
    font-size: 1.9814rem;
    line-height: 2.375rem;
  }

  .hero__rule {
    display: block;
    top: 21.5625rem;
    left: 7.6875rem;
    width: 0;
    height: 12.8125rem;
    border-left: .5rem solid #fff;
    z-index: 5;
  }

  /* ---- Tarjeta / formulario ---- */
  .card {
    top: 6.6875rem;
    left: 31.25rem;
    width: 21.375rem;
    padding: 1.5rem 1.4375rem 1.5625rem 1.5rem;
  }

  .card__title {
    font-size: 1.6099rem;
    line-height: 1.9375rem;
  }

  .form  { margin-top: 1.5625rem; }
  .field { margin-top: .8125rem; }

  .field label {
    margin-bottom: .5rem;
    font-size: .89375rem;
    line-height: 1.1875rem;
  }

  .field input {
    height: 2.6875rem;
    font-size: .9375rem;
  }

  .form__submit {
    height: 2.5625rem;
    margin-top: 1.3125rem;
  }

  /* ---- CTA WhatsApp ---- */
  .cta { height: 12.875rem; }

  .cta__title {
    top: 3.25rem;
    left: 5.4375rem;
    width: 30.6875rem;
    font-size: 2.3529rem;
    line-height: 2.875rem;
    text-align: left;
  }

  .cta__btn {
    top: 4.3125rem;
    left: 35.9375rem;
  }

  .cta__icon {
    top: 2.875rem;
    left: 48.1875rem;
    z-index: 1;
  }

  /* ---- Proyecto ---- */
  .proyecto { height: 31.9375rem; }

  .proyecto__title {
    top: 3.5rem;
    left: -0.125rem;
    width: 59.9375rem;
    font-size: 2.3529rem;
    line-height: 2.875rem;
  }

  .proyecto__rule {
    top: 7.75rem;
    left: 20.8125rem;
  }

  .feature { top: 10.4375rem; width: 17.5rem; }
  .feature--1 { left: .125rem; }
  .feature--2 { left: 21.1875rem; }
  .feature--3 { left: 42.3125rem; }

  .feature h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 1.1146rem;
    line-height: 1.375rem;
  }

  .feature img {
    width: 12.8125rem;
    height: 12.8125rem;
    margin-top: 1.5625rem;
    border: .375rem solid var(--marron-oscuro);
  }

  /* ---- Precio ---- */
  .precio { height: 11.5625rem; }

  .precio__title {
    top: 2.4375rem;
    left: 0;
    width: 59.9375rem;
    font-size: 3.2817rem;
    line-height: 4rem;
  }

  .precio__nota {
    top: 6.75rem;
    left: 9.4375rem;
    width: 41.9375rem;
    font-size: 1.2384rem;
    line-height: 2rem;
  }

  .precio__rule {
    display: block;
    top: 3.0625rem;
    width: 0;
    height: 5.6875rem;
    border-left: 3px solid #fff;
  }
  .precio__rule--izq { left: 13.3125rem; }
  .precio__rule--der { left: 48.0625rem; }

  /* ---- Financiamiento ---- */
  .financiamiento { height: 21.5rem; }

  .financiamiento__foto {
    width: 34.125rem;
    height: 21.5rem;
  }

  .financiamiento__banda {
    top: 7.1875rem;
    left: 25.75rem;
    width: 34.1875rem;
    height: 7.125rem;
  }

  .financiamiento__title {
    top: 7.75rem;
    left: 26.9375rem;
    width: 29.3125rem;
    font-size: 2.9102rem;
    line-height: 2.9375rem;
    text-align: left;
  }

  .credito { height: 5.6875rem; }

  .credito__title {
    top: 1.875rem;
    left: 6.9375rem;
    width: 46.9375rem;
    font-size: 2.1672rem;
    line-height: 2.1875rem;
    text-align: left;
  }

  /* ---- Cierre ---- */
  .cierre {
    height: 23.875rem;
    background-position: 49% 15%;
  }

  .cierre__title {
    top: 4.625rem;
    left: 18.9375rem;
    width: 22rem;
    font-size: 2.3529rem;
    line-height: 2.875rem;
  }

  .cierre__btn {
    top: 10.875rem;
    left: 22.5rem;
    width: 14.9375rem;
    font-size: 1.3622rem;
  }
}


/* ======================================= Botón flotante de WhatsApp === */

#wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1000; }

#wa-btn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }

#wa-popup {
  position: absolute;
  right: 0;
  bottom: 75px;
  width: 260px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
  font-family: var(--font-texto);
  font-size: 14px;
}

#wa-popup-header {
  background: #128C7E;
  color: #fff;
  padding: 12px 15px;
  font-weight: 600;
}

#wa-popup-body { padding: 15px; }

#wa-popup-msg { margin: 0 0 12px; color: #333; }

#wa-send {
  width: 100%;
  background: #25D366;
  color: #fff;
  border: 0;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

@media (max-width: 480px) { #wa-float { right: 15px; bottom: 15px; } }