/* =========================================================
   Wacira — Hoja de estilos
   Paleta naranja sobre fondos cremas.
   ========================================================= */

:root {
  --crema:        #FBF8F5;   /* fondo principal */
  --beige:        #F4EDE6;   /* fondo alterno */
  --beige-2:      #F0E6DC;   /* fondo alterno oscuro */
  --linea:        #EADFD4;
  --linea-2:      #E3D6C9;
  --borde:        #DCCDBF;
  --texto:        #3A2F28;   /* marron oscuro */
  --parrafo:      #6B5A4E;
  --suave:        #8A7767;
  --naranja:      #E9711B;   /* color principal */
  --naranja-h:    #CE5F12;
  --naranja-dk:   #B4531A;
  --naranja-dk-h: #8A3D12;
  --naranja-3:    #7A3510;
  --tinte:        #F6E7DA;
  --tinte-2:      #F6DFCC;
  --verde:        #4E8B5A;
  --err:          #C0392B;
  --ancho:        1200px;
  --ease:         cubic-bezier(.22,.61,.36,1);
  --font:         "Poppins", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font);
  background: var(--crema);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.container { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 32px; }
.container--md { max-width: 1080px; }
.container--sm { max-width: 820px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--naranja);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { background: var(--naranja-h); color: #fff; }
.btn--dk { background: var(--naranja-dk); }
.btn--dk:hover { background: var(--naranja-dk-h); }
.btn--linea { background: transparent; color: var(--texto); border-color: var(--borde); font-weight: 500; }
.btn--linea:hover { background: transparent; border-color: var(--texto); color: var(--texto); }
.btn--out { background: transparent; color: var(--naranja-dk); border-color: #DCC6B2; }
.btn--out:hover { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.btn--sm { padding: 12px 30px; font-weight: 500; }
.btn--block { display: flex; width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Cabecera ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
}
.header__inner { display: flex; align-items: center; gap: 48px; padding-block: 18px; }

.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__img { height: 26px; width: auto; display: block; }
.logo .logo__txt { display: none; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.logo--sinimg .logo__txt { display: inline-block; }

.nav { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.nav__link { color: var(--parrafo); font-size: 15px; transition: color .2s; }
.nav__link:hover, .nav__link.is-active { color: var(--naranja-dk); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--linea-2);
  background: var(--beige);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  margin-left: 10px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--texto); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Portada ---------- */
.hero { background: var(--beige); }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 104px 0 96px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--crema);
  border: 1px solid var(--linea-2);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 500;
  color: var(--parrafo);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); }

.hero__title { font-size: 62px; line-height: 1.06; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.hero__text { margin-top: 24px; font-size: 17px; line-height: 1.7; color: var(--parrafo); max-width: 460px; text-wrap: pretty; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; align-items: center; }

/* Mosaico de la portada */
.mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 180px 150px 150px; gap: 14px; }
.mosaico figure { margin: 0; border-radius: 16px; overflow: hidden; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mos-alto { grid-row: span 2; }
.mosaico__dato {
  border-radius: 16px;
  background: var(--naranja-dk);
  display: flex; flex-direction: column; justify-content: center;
  padding: 18px;
}
.mosaico__dato b { color: #fff; font-size: 28px; font-weight: 700; line-height: 1; }
.mosaico__dato span { color: var(--tinte-2); font-size: 12px; line-height: 1.4; margin-top: 4px; }

/* ---------- Secciones ---------- */
.seccion { padding: 96px 0; }
.seccion--crema { background: var(--crema); }
.seccion--beige { background: var(--beige); }
.seccion--beige2 { background: var(--beige-2); }
.centro { text-align: center; }

.titulo { font-size: 42px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.titulo--md { font-size: 40px; }
.bajada { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--parrafo); }
.centro .bajada { margin-inline: auto; max-width: 560px; }

/* Tarjetas de proceso */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.paso { background: var(--beige); border: 1px solid var(--linea); border-radius: 18px; padding: 30px; text-align: left; }
.paso__num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--naranja);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
}
.paso:nth-child(2) .paso__num { background: var(--naranja-dk); }
.paso:nth-child(3) .paso__num { background: var(--naranja-3); }
.paso h3 { margin: 22px 0 10px; font-size: 18px; font-weight: 600; }
.paso p { font-size: 15px; line-height: 1.65; color: var(--parrafo); }
.acciones-centro { display: flex; justify-content: center; margin-top: 48px; }

/* Bloque de dos columnas */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.duo .bajada { margin-top: 20px; max-width: 440px; }
.duo__media { border-radius: 20px; overflow: hidden; border: 1px solid #DFD0C0; }
.duo__media img { width: 100%; height: 320px; object-fit: cover; }

/* Píldora de estado */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  background: var(--beige);
  border: 1px solid #E6D9CC;
  border-radius: 999px;
  padding: 14px 26px;
  text-align: left;
}
.seccion--beige .estado { background: var(--crema); }
.estado__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--suave); flex: none; }
.estado__dot.is-open { background: var(--verde); }
.estado__dot.is-closed { background: var(--err); }
.estado strong { display: block; font-size: 14px; font-weight: 600; }
.estado small { font-size: 13px; color: var(--parrafo); }

/* Somos Wacira */
.somos { font-size: 38px; font-weight: 400; letter-spacing: -.03em; }
.somos strong { font-weight: 700; }

/* Presencia */
.presencia h3 { font-size: 17px; font-weight: 600; margin-bottom: 22px; }
.presencia__linea { height: 1px; background: var(--linea); }
.presencia ul { padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.presencia li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.chip-pais {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: var(--naranja-dk); background: var(--tinte);
  padding: 4px 8px; border-radius: 5px;
}

/* =========================================================
   Página Nosotros
   ========================================================= */
.banner { position: relative; isolation: isolate; overflow: hidden; background: var(--naranja-3); }
.banner__img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .32;
  /* La foto es azulada: se pasa a tono calido para que pegue con el naranja */
  filter: grayscale(1) sepia(.45);
}
.banner__inner { max-width: 700px; margin: 0 auto; padding: 130px 24px; text-align: center; }
.banner h1 { font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.banner p { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--tinte-2); text-wrap: pretty; }

.bloque { margin-bottom: 72px; }
.bloque__titulo { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 22px; }
.bloque__cols { display: flex; gap: 72px; align-items: flex-start; flex-wrap: wrap; }
.bloque__texto { flex: 1 1 460px; max-width: 660px; }
.bloque__texto p { font-size: 17px; line-height: 1.75; }
.bloque__texto p + p { margin-top: 26px; font-size: 15px; color: var(--parrafo); max-width: 560px; }

.cifras { display: flex; flex-direction: column; gap: 18px; width: 280px; }
.cifras div { display: flex; flex-direction: column-reverse; }
.cifras dt { font-size: 12px; font-weight: 500; color: var(--suave); }
.cifras dd { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }

.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.valores dt { font-size: 17px; font-weight: 600; }
.valores dd { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--parrafo); text-wrap: pretty; }

/* =========================================================
   Página Contacto
   ========================================================= */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contacto > * { min-width: 0; }
.contacto h1 { font-size: 40px; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.contacto__intro { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--parrafo); max-width: 520px; }
.contacto h2 { margin: 46px 0 20px; font-size: 20px; font-weight: 600; }

.datos-contacto { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; font-size: 16px; }
.datos-contacto li { display: flex; align-items: center; gap: 16px; }
.datos-contacto svg { width: 20px; height: 20px; flex: none; color: var(--naranja); }
.datos-contacto span, .datos-contacto a { overflow-wrap: anywhere; color: var(--texto); }
.datos-contacto a:hover { color: var(--naranja-dk); }

.redes { margin-top: 34px; display: flex; gap: 12px; }
.redes a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--naranja);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  transition: background .2s;
}
.redes a:hover { background: var(--naranja-h); color: #fff; }

/* ---------- Formulario ---------- */
.form-wrap {
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 36px;
  text-align: left;
}
.form__group { border: 0; margin-bottom: 26px; }
.form__group legend { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); padding-bottom: 16px; font-weight: 600; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.field { margin-bottom: 18px; }
.field label, .field .label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
.field__help { color: var(--suave); font-size: 12.5px; margin: -3px 0 10px; }
.req { color: var(--naranja-dk); }

.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field input[type="number"], .field input[type="date"], .field select, .field textarea {
  width: 100%;
  padding: 12px 15px;
  background: var(--beige);
  border: 1px solid var(--linea-2);
  border-radius: 10px;
  font-size: 14px;
  transition: border-color .18s, background .18s;
}
.field textarea { resize: vertical; min-height: 116px; }
.field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A7767' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: calc(100% - 15px) center;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input::placeholder, .field textarea::placeholder { color: #A89584; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--naranja);
  outline-offset: -2px;
  border-color: var(--naranja);
  background: #fff;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); }

.error { display: block; color: var(--err); font-size: 12px; min-height: 15px; margin-top: 4px; }
.field__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.counter { color: var(--suave); font-size: 12px; white-space: nowrap; }

.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px;
  border: 1px solid var(--linea-2);
  border-radius: 10px;
  background: var(--beige);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 400 !important;
  transition: border-color .18s, background .18s;
}
.check:hover { border-color: var(--naranja); }
.check input { accent-color: var(--naranja); width: 16px; height: 16px; cursor: pointer; margin-top: 2px; flex-shrink: 0; }
.check:has(input:checked) { border-color: var(--naranja); background: var(--tinte); }
.check--terms { padding: 14px 17px; }

.form__actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.form__required { font-size: 12px; color: var(--suave); }
.form__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.exito { text-align: center; padding: 34px 10px; }
.exito__icono {
  width: 60px; height: 60px; margin: 0 auto 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--verde); font-size: 26px; color: #fff;
}
.exito h3 { font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.exito p { color: var(--parrafo); font-size: 15px; line-height: 1.7; margin-bottom: 26px; }
.exito__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Pie ---------- */
.footer { background: var(--beige-2); border-top: 1px solid var(--linea-2); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 64px 0; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; }
.footer__nav a { color: var(--parrafo); font-size: 14px; }
.footer__nav a:hover { color: var(--naranja-dk); }
.footer__legal { text-align: center; font-size: 13px; line-height: 1.7; color: var(--suave); }
.footer__dev { display: inline-block; margin-top: 8px; }
.footer__dev a { color: var(--naranja-dk); font-weight: 600; }
.footer__dev a:hover { color: var(--naranja-dk-h); }

/* ---------- WhatsApp flotante y barra móvil ---------- */
/* Aparece a los 2 minutos: el JS le pone .is-visible */
.wa {
  position: fixed;
  right: 22px; bottom: 26px;
  width: 56px; height: 56px;
  display: block;
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), visibility .4s, transform .4s var(--ease);
}
.wa.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa img { width: 100%; height: 100%; }
.wa.is-visible:hover { transform: scale(1.07); }

.barra-movil { display: none; }

/* ---------- Aparición ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; padding: 64px 0 72px; }
  .hero__title { font-size: 44px; }
  .duo { grid-template-columns: 1fr; gap: 36px; }
  .pasos { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; gap: 48px; }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque__cols { gap: 40px; }
  .cifras { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 24px 40px; }
  .seccion { padding: 64px 0; }
  .titulo, .titulo--md { font-size: 32px; }
  .banner__inner { padding: 96px 24px; }
  .banner h1 { font-size: 36px; }
}

@media (max-width: 860px) {
  .container { padding-inline: 20px; }
  .header__inner { gap: 12px; padding-block: 14px; }
  .nav {
    position: fixed;
    inset: 73px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 18px;
    background: var(--crema);
    border-bottom: 1px solid var(--linea);
    transform: translateY(-130%);
    transition: transform .3s var(--ease);
    margin-left: 0;
  }
  .nav.is-open { transform: none; }
  .nav__link { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid #F0E6DC; }
  .nav__link:last-of-type { border-bottom: 0; }
  .nav-toggle { display: flex; }
  .btn--cabecera { margin-left: auto; padding: 11px 20px; font-size: 14px; }

  .hero__title { font-size: 38px; letter-spacing: -.03em; }
  .hero__text { font-size: 16px; }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .btn { width: 100%; padding: 17px 24px; font-size: 16px; }

  .mosaico { grid-template-rows: 150px 105px 105px; gap: 10px; }
  .mosaico__dato b { font-size: 24px; }

  .titulo, .titulo--md { font-size: 30px; }
  .somos { font-size: 28px; }
  .form-wrap { padding: 22px 18px; }
  .form__row { grid-template-columns: 1fr; }
  .valores { grid-template-columns: 1fr; gap: 30px; }
  .duo__media img { height: 240px; }
  .banner h1 { font-size: 30px; }
  .banner__inner { padding: 72px 20px; }

  /* Barra fija inferior en móvil, con el WhatsApp dentro */
  .wa { display: none; }
  .barra-movil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(251,248,245,.96);
    border-top: 1px solid var(--linea);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  }
  .barra-movil .btn { flex: 1; padding: 15px 20px; font-size: 15px; }
  .barra-movil__wa {
    width: 48px; height: 48px; flex: none;
    border-radius: 50%;
    background: var(--beige);
    border: 1px solid var(--linea-2);
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    overflow: hidden;
    transition: width .35s var(--ease), padding .35s var(--ease), opacity .35s;
  }
  /* Oculto hasta que pasen los 2 minutos: se despliega sin dar un salto */
  .barra-movil__wa:not(.is-visible) {
    width: 0; padding: 0; border-width: 0; opacity: 0;
  }
  .barra-movil__wa img { width: 100%; height: 100%; }
  body { padding-bottom: 86px; }
}

@media (max-width: 560px) {
  .titulo, .titulo--md { font-size: 27px; }
  .hero__title { font-size: 34px; }
  .checks { flex-direction: column; }
  .checks--grid { grid-template-columns: 1fr; }
  .form__buttons .btn, .exito__acciones .btn { flex: 1 1 100%; }
  .footer__nav { gap: 20px; }
}