/* Abanquino — portal público
 *
 * Paleta anclada en el valle de Abancay y en la marca que ya existe en
 * Waigo, no en colores inventados: el verde y el celeste son
 * exactamente los del logo de la app, así que quien llega desde el
 * portal a Waigo siente que es la misma casa.
 */

:root {
  --papel: #ffffff;
  --niebla: #f4f7f4;   /* gris con una gota de verde, no crema */
  --borde: #e3e9e4;
  --tinta: #111512;    /* negro con matiz verde, no azulado */
  --tinta-media: #495049;
  --tinta-suave: #6b7670;
  --verde: #1e6b3c;
  --verde-claro: #2f8f54;
  --celeste: #2e9cca;

  --ancho: 1120px;
  --radio: 18px;
  --radio-chico: 10px;

  --sombra-suave: 0 1px 2px rgba(17, 21, 18, .04), 0 8px 24px rgba(17, 21, 18, .05);
  --sombra-alta: 0 2px 6px rgba(17, 21, 18, .06), 0 24px 60px rgba(17, 21, 18, .10);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------- tipografía */

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 600;
}

h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }

p { margin: 0 0 1em; max-width: 62ch; }
.plomo { color: var(--tinta-media); }
.tenue { color: var(--tinta-suave); font-size: 0.94rem; }

/* ------------------------------------------------------- barra */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.barra.pegada { border-bottom-color: var(--borde); }

.barra-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  gap: 20px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.marca-punto {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px rgba(30, 107, 60, .13);
}

.barra-links { display: flex; align-items: center; gap: 28px; }
.barra-links a {
  text-decoration: none;
  color: var(--tinta-media);
  font-size: 0.95rem;
  transition: color .18s ease;
}
.barra-links a:hover { color: var(--tinta); }
@media (max-width: 720px) { .barra-links .ocultar-movil { display: none; } }

/* ------------------------------------------------------ botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.97rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.boton:active { transform: scale(.975); }

.boton-lleno { background: var(--verde); color: #fff; }
.boton-lleno:hover { background: var(--verde-claro); box-shadow: 0 6px 20px rgba(30, 107, 60, .26); }

.boton-linea { background: transparent; color: var(--tinta); border-color: var(--borde); }
.boton-linea:hover { border-color: var(--tinta-suave); background: var(--niebla); }

.boton-chico { padding: 9px 17px; font-size: .9rem; }

/* -------------------------------------------------------- aviso */

.aviso {
  background: var(--tinta);
  color: #f2f5f2;
  font-size: .92rem;
  text-align: center;
  padding: 10px 24px;
}
.aviso a { color: #fff; text-underline-offset: 3px; }

/* --------------------------------------------------------- hero */

.hero { padding: clamp(56px, 10vw, 104px) 0 clamp(40px, 7vw, 72px); }

.hero-rejilla {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-rejilla { grid-template-columns: 1fr; gap: 40px; }
}

.hero h1 { margin-bottom: 22px; }
.hero .bajada {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--tinta-media);
  margin-bottom: 30px;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* El mapa del valle: la pieza donde se gasta toda la audacia visual.
   Todo lo demás alrededor se mantiene callado a propósito. */
.mapa-marco {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--niebla);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  aspect-ratio: 4 / 3.4;
}
.mapa-marco svg { width: 100%; height: 100%; display: block; }

.mapa-pie {
  position: absolute;
  left: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  font-size: .82rem;
  color: var(--tinta-media);
  border: 1px solid var(--borde);
}
.pulso {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde);
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 107, 60, .45); }
  60% { box-shadow: 0 0 0 8px rgba(30, 107, 60, 0); }
}

/* El auto recorre la ruta una sola vez al cargar y se queda. Es el
   único movimiento que no responde a una acción de la persona. */
.auto { offset-path: path('M 44 286 C 96 250, 118 214, 168 196 S 250 168, 296 122 S 352 78, 396 62'); offset-rotate: auto; animation: recorrer 5.2s cubic-bezier(.42, 0, .25, 1) .5s both; }
@keyframes recorrer { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.ruta-trazo { stroke-dasharray: 520; stroke-dashoffset: 520; animation: trazar 5.2s cubic-bezier(.42, 0, .25, 1) .5s both; }
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* ----------------------------------------------------- secciones */

.seccion { padding: clamp(56px, 8vw, 100px) 0; }
.seccion-niebla { background: var(--niebla); }
.seccion + .seccion-niebla, .seccion-niebla + .seccion { border-top: 1px solid var(--borde); }

.encabezado-seccion { max-width: 640px; margin-bottom: clamp(32px, 5vw, 52px); }
.encabezado-seccion h2 { margin-bottom: 14px; }

/* --------------------------------------------------- productos */

.producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding: clamp(30px, 4vw, 46px);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
}
.producto + .producto { margin-top: 22px; }
@media (max-width: 860px) { .producto { grid-template-columns: 1fr; } }

.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  color: var(--tinta-media);
  margin-bottom: 14px;
}
.estado-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
}
.estado-pronto .estado-punto { background: var(--celeste); }

.producto h3 { margin-bottom: 12px; }
.producto-nombre {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}

/* Los puntos fuertes no son una secuencia, así que no van numerados:
   van como una lista con una marca discreta. */
.puntos { list-style: none; padding: 0; margin: 0 0 26px; }
.puntos li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--tinta-media);
  font-size: .98rem;
}
.puntos li::before {
  content: '';
  position: absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--verde);
  opacity: .45;
}

.producto-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.tarjeta-app {
  border-radius: var(--radio);
  background: linear-gradient(160deg, #f7faf7, #eef3ef);
  border: 1px solid var(--borde);
  padding: clamp(24px, 4vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 260px;
  text-align: center;
}
.icono-app {
  width: 84px; height: 84px;
  border-radius: 21px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 2.1rem;
  font-weight: 600;
  box-shadow: var(--sombra-alta);
}
.icono-app img { width: 100%; height: 100%; border-radius: 21px; object-fit: cover; }

/* -------------------------------------------------------- acerca */

.acerca-rejilla {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .acerca-rejilla { grid-template-columns: 1fr; } }
.acerca-texto p { font-size: 1.05rem; }

.datos { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.dato { background: var(--papel); padding: 22px 24px; }
.dato-valor { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.dato-nota { color: var(--tinta-suave); font-size: .92rem; margin-top: 2px; }

/* ---------------------------------------------------- publicidad */

.banda-anuncios { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.anuncio {
  display: block;
  border-radius: var(--radio-chico);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--papel);
  transition: box-shadow .2s ease;
}
.anuncio:hover { box-shadow: var(--sombra-suave); }
.anuncio img { width: 100%; height: auto; }

.vender-espacio {
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  padding: 30px;
  text-align: center;
  background: var(--papel);
}

/* ------------------------------------------------------ contacto */

.contacto-rejilla {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 860px) { .contacto-rejilla { grid-template-columns: 1fr; } }

.campo { margin-bottom: 15px; }
.campo label {
  display: block;
  font-size: .9rem;
  color: var(--tinta-media);
  margin-bottom: 6px;
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  background: var(--papel);
  font-family: inherit;
  font-size: 1rem;
  color: var(--tinta);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(30, 107, 60, .13);
}
.campo textarea { resize: vertical; min-height: 118px; }

/* Campo trampa para robots: invisible para una persona, pero sin
   display:none, que algunos robots detectan y saltan. */
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.recado { padding: 12px 15px; border-radius: var(--radio-chico); font-size: .94rem; margin-bottom: 14px; }
.recado-ok { background: #eaf4ee; color: #16512e; }
.recado-error { background: #fdeeee; color: #8c2020; }

.canal {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  text-decoration: none;
  margin-bottom: 10px;
  transition: border-color .16s ease, background-color .16s ease;
}
.canal:hover { border-color: var(--tinta-suave); background: var(--niebla); }
.canal-icono { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--niebla); flex: none; }
.canal-titulo { font-weight: 500; }

/* --------------------------------------------------------- pie */

.pie { border-top: 1px solid var(--borde); padding: 40px 0 52px; color: var(--tinta-suave); font-size: .92rem; }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--tinta); }

/* ------------------------------------------------- accesibilidad */

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Aparición al bajar. Es sutil a propósito: la página no debe
   "actuar", solo acomodarse. */
.aparece { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aparece { opacity: 1; transform: none; }
  .auto { offset-distance: 100%; }
  .ruta-trazo { stroke-dashoffset: 0; }
}