/* La página pública. */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Encabezado ──────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--agrum-dark);
  color: #fff;
}

.site-header .wrap {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { height: 34px; }
.brand span { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 21px; letter-spacing: .05em; }

.site-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 600; }
.site-nav a { text-decoration: none; opacity: .85; }
.site-nav a:hover { opacity: 1; }

.site-nav .btn {
  background: var(--agrum-mint);
  color: var(--agrum-text);
  min-height: 46px;
  padding: 0 20px;
  font-size: var(--font-body);
}

.site-nav .btn:hover { background: var(--agrum-mint-light); }

@media (max-width: 860px) { .site-nav a:not(.btn) { display: none; } }

/* ── Portada ─────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(520px 260px at 74% 78%, rgba(255, 214, 138, .20) 0%, transparent 70%),
    radial-gradient(900px 500px at 78% 8%, rgba(115, 200, 131, .16) 0%, transparent 62%),
    linear-gradient(155deg, #021f10 0%, #006633 52%, #0c110f 100%);
  color: #fff;
  padding: 84px 0 92px;
}

.hero .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }

.eyebrow {
  display: inline-block;
  font-size: var(--font-chip);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--agrum-mint);
  margin-bottom: 18px;
}

.hero h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; margin-bottom: 20px; }
.hero p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 52ch; margin: 0 0 30px; }
.hero .actions { display: flex; gap: 13px; flex-wrap: wrap; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.hero .btn-ghost:hover { border-color: var(--agrum-mint); }

.hero-card {
  /*
   * Fondo propio y oscuro, no un velo claro: así la tarjeta garantiza el contraste de
   * sus números sin depender de lo que la ilustración tenga detrás, que justo ahí es
   * la parte más clara —el sol.
   */
  background: rgba(3, 26, 15, .52);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(8px);
}

.hero-card h3 { font-family: 'Inter'; font-size: var(--font-title); margin-bottom: 16px; }
.hero-card .rows { display: flex; flex-direction: column; gap: 11px; }

.hero-card .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--font-body);
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.hero-card .row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-card .k { color: rgba(255,255,255,.66); }
.hero-card .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-card .v.good { color: var(--agrum-mint-light); }
.hero-card .foot { font-size: var(--font-chip); color: rgba(255,255,255,.5); margin: 16px 0 0; line-height: 1.5; }

@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* ── Secciones ───────────────────────────────────────────────────────── */

section { padding: 82px 0; }
section.tinted { background: var(--agrum-surface); }

.kicker {
  font-size: var(--font-chip);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--agrum-interact);
  margin: 0 0 11px;
}

section h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 800; color: var(--agrum-dark); margin-bottom: 18px; }
.section-lead { font-size: 17px; color: var(--agrum-text-muted); max-width: 64ch; margin: 0 0 44px; line-height: 1.62; }

.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 900px) {
  .duo, .trio, .quad { grid-template-columns: 1fr; }
  section { padding: 58px 0; }
}

.panel {
  background: #fff;
  border: 1px solid var(--agrum-border-strong);
  border-radius: var(--radius-lg);
  padding: 30px;
}

.panel h3 { font-family: 'Inter'; font-size: 21px; font-weight: 700; color: var(--agrum-dark); margin-bottom: 12px; }
.panel p { margin: 0; color: var(--agrum-text-muted); line-height: 1.62; font-size: var(--font-body-lg); }

.step .num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--agrum-dark);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--font-body-lg);
  margin-bottom: 15px;
}

.step h3 { font-family: 'Inter'; font-size: var(--font-title); font-weight: 700; margin-bottom: 8px; }
.step p { margin: 0; color: var(--agrum-text-muted); font-size: var(--font-body); line-height: 1.58; }

/* ── Tabla comparativa ───────────────────────────────────────────────── */

.compare { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--agrum-border-strong); }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--agrum-border); font-size: var(--font-body-lg); }
.compare thead th { background: var(--agrum-surface); font-size: var(--font-meta); text-transform: uppercase; letter-spacing: .07em; color: var(--agrum-text-muted); }
.compare tbody th { font-weight: 500; color: var(--agrum-text-muted); }
.compare td { font-weight: 700; font-variant-numeric: tabular-nums; }
.compare .win { color: var(--agrum-dark); }
.compare .lose { color: var(--agrum-text-faint); }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare .highlight td, .compare .highlight th { background: #f4fbf6; }

.legal { font-size: var(--font-meta); color: var(--agrum-text-faint); margin-top: 16px; line-height: 1.55; }

/* ── Corredor ────────────────────────────────────────────────────────── */

.districts { display: flex; flex-wrap: wrap; gap: 11px; }

.districts span {
  padding: 11px 22px;
  border-radius: 999px;
  border: 2px solid var(--agrum-mint);
  font-weight: 600;
  color: var(--agrum-dark);
  background: #fff;
}

/* ── Equipo ──────────────────────────────────────────────────────────── */

.member {
  text-align: center;
  background: #fff;
  border: 1px solid var(--agrum-border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  position: relative;
  overflow: hidden;
}

.member .photo {
  width: 108px; height: 108px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(145deg, var(--agrum-mint-light), var(--agrum-mint));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat'; font-weight: 900; font-size: 32px; color: var(--agrum-dark);
}

.member h3 { font-family: 'Inter'; font-size: var(--font-title); font-weight: 700; margin-bottom: 3px; }
.member .role { font-size: var(--font-meta); color: var(--agrum-interact); font-weight: 600; margin: 0; }

/* El mini CV aparece al pasar el mouse, y en pantalla chica queda siempre visible:
   en un teléfono no hay puntero que pueda pasar por encima. */
.member .bio {
  margin: 14px 0 0;
  font-size: var(--font-meta);
  color: var(--agrum-text-muted);
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s ease, opacity .28s ease, margin-top .28s ease;
}

.member:hover .bio,
.member:focus-within .bio { max-height: 240px; opacity: 1; }

@media (hover: none) {
  .member .bio { max-height: none; opacity: 1; }
}

/* ── Contacto y pie ──────────────────────────────────────────────────── */

.contact { background: #0d110f; color: #fff; }
.contact h2 { color: #fff; }
.contact .section-lead { color: rgba(255,255,255,.7); }
.contact .duo { align-items: start; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 17px; }
.field label { font-size: var(--font-meta); font-weight: 600; color: rgba(255,255,255,.78); }

.field input, .field textarea {
  font-family: inherit;
  font-size: var(--font-body-lg);
  padding: 14px 16px;
  min-height: var(--touch-min);
  border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--agrum-mint); border-color: transparent; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.38); }

.contact .btn-primary { background: var(--agrum-mint); color: var(--agrum-text); width: 100%; }
.contact .btn-primary:hover { background: var(--agrum-mint-light); }

.contact-side { border-left: 1px solid rgba(255,255,255,.12); padding-left: 34px; }
.contact-side dt { font-size: var(--font-chip); text-transform: uppercase; letter-spacing: .1em; color: var(--agrum-mint); font-weight: 700; margin-bottom: 5px; }
.contact-side dd { margin: 0 0 22px; font-size: var(--font-body-lg); }

@media (max-width: 900px) { .contact-side { border-left: 0; padding-left: 0; padding-top: 30px; } }

.site-footer { background: #050806; color: var(--agrum-text-faint); padding: 30px 0; font-size: var(--font-meta); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Avisos del formulario ───────────────────────────────────────────── */

.flash-ok {
  background: rgba(115, 200, 131, .16);
  border: 1px solid var(--agrum-mint);
  color: #fff;
  padding: 15px 18px;
  border-radius: var(--radius-card);
  font-weight: 600;
  margin: 0 0 26px;
}

.flash-error {
  background: rgba(135, 38, 80, .2);
  border: 1px solid var(--agrum-alert);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--radius-card);
  margin: 0 0 18px;
  font-size: var(--font-body);
}

.flash-error ul { margin: 0; padding-left: 20px; }

.field select {
  font-family: inherit;
  font-size: var(--font-body-lg);
  padding: 14px 16px;
  min-height: var(--touch-min);
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.field select:focus { outline: 2px solid var(--agrum-mint); border-color: transparent; }
.field select option { background: #0d110f; }

/* Trampa para robots: fuera de la pantalla, no oculta con display:none, que algunos
   rellenadores automáticos detectan y saltean. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* La foto del equipo, cuando hay una cargada. */
img.photo { object-fit: cover; }

/* ── Imagen de portada ───────────────────────────────────────────────── */



/* ── Iconos de los pasos ─────────────────────────────────────────────── */

.step { position: relative; }

.step-icon {
  width: 52px;
  height: 52px;
  display: block;
  margin-bottom: 14px;
}

/* El número pasa a ser una marca chica al lado del icono: el icono dice de qué se
   trata y el número, en qué orden. Dos cosas distintas, dos pesos distintos. */
.step .num {
  position: absolute;
  top: 0;
  left: 38px;
  width: 24px;
  height: 24px;
  font-size: var(--font-chip);
  border: 2px solid #fff;
}


.band img {
  width: 100%;
  height: clamp(260px, 38vw, 460px);
  object-fit: cover;
  /* El encuadre entra justo entre el tope de la rueda del molino y el pasto de
     adelante. Más abajo corta la rueda; más arriba deja demasiado cielo vacío. */
  object-position: center 52%;
  display: block;
}

/* ── Fondo de la portada ─────────────────────────────────────────────── */

/*
 * La ilustración, detrás del titular y bien suavizada.
 *
 * El desenfoque no es un adorno: es lo que la hace funcionar. Nítida, las formas
 * vectoriales se leen como piezas de juguete; desenfocada y a baja opacidad, quedan
 * manchas de color que sugieren campo, sol y horizonte sin pedir que se las mire de
 * cerca. Lo que aporta acá es atmósfera, no detalle.
 *
 * La escala compensa el desenfoque, que si no deja los bordes transparentes.
 */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: 0;
  pointer-events: none;
  /*
   * El brillo bajo es lo que sostiene la legibilidad. El verde de la portada ya está
   * en 7,12:1 con el texto blanco —justo en el mínimo que el proyecto exige— así que
   * cualquier imagen que lo aclare lo saca de norma. Oscurecida, la ilustración suma
   * forma y atmósfera y el contraste incluso mejora.
   */
  opacity: .38;
  filter: blur(3px) saturate(.8) brightness(.55);
  transform: scale(1.06);
  /* Se desvanece hacia arriba para fundirse con el verde del encabezado en lugar de
     cortarse con una línea. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
}

.hero .wrap { position: relative; z-index: 1; }