/* ===================================================================
   Biopompas — Theme ecologico (Bootstrap 5 nativo + HTMX)
   Basado en el theme de beta.biopompas.com: verde teal + ornamentos.
   Fuentes locales: Oswald (titulos), Barlow (texto).
   =================================================================== */

/* ---- Fuentes locales ---- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/barlow-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../vendor/fonts/barlow-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../vendor/fonts/barlow-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/oswald-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../vendor/fonts/oswald-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../vendor/fonts/oswald-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/fonts/oswald-700-latin.woff2') format('woff2');
}

/* ---- Tokens de color — propuesta "Bosque & Arcilla" (economía circular) ----
   Base: verde bosque profundo + crema cálido.
   Acentos: verde hoja, terracota (arcilla) y ocre.
   Alternativa (no aplicada) "Naturaleza vibrante": esmeralda #0B6E4F,
   lima #9BD770, coral #F4845F y fondo #F2FAF4 — más vivo, menos sobrio. */
:root {
  --bp-teal: #2E6B4F;       /* verde bosque (botones/links) */
  --bp-teal-dark: #1F4D3B;  /* verde bosque oscuro (activos, chat, footer) */
  --bp-green: #6B9E5E;      /* verde hoja (acentos decorativos) */
  --bp-peach: #C96F3B;      /* terracota/arcilla (acento cálido) */
  --bp-ochre: #E5B53B;      /* ocre (detalles, estrellas) */
  --bp-ink: #2E3B2E;        /* tinta (texto principal) */
  --bp-ink-soft: #6B7266;   /* tinta suave */
  --bp-blue: #6EC1E4;       /* celeste acento (compat) */
  --bg-soft: #F4F6EC;       /* fondo crema-verdoso (secciones alternas) */
  --bp-soft2: #E9EFE2;      /* rellenos suaves (hover, mensajes) */
  --bp-cream: #FBF8F0;      /* fondo base crema cálido */
  --bp-green-dark: var(--bp-teal-dark); /* compatibilidad con site.css */
  --bp-light: var(--bg-soft);           /* compatibilidad con site.css */
}

/* ---- Tipografia ---- */
body {
  font-family: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--bp-ink);
  letter-spacing: .01em;
  background: var(--bp-cream);
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .btn, .card-title, .sidebar-title {
  font-family: 'Oswald', 'Barlow', sans-serif;
  letter-spacing: .02em;
}
h1, h2 { font-weight: 600; }
h3, h4, h5, h6 { font-weight: 500; }

/* ---- Botones con el acento del theme ---- */
.btn {
  border-radius: 2rem; /* pill: más orgánico */
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bp-teal);
  border-color: var(--bp-teal);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bp-teal-dark);
  border-color: var(--bp-teal-dark);
}
.btn-outline-primary {
  color: var(--bp-teal);
  border-color: var(--bp-teal);
}
.btn-outline-primary:hover {
  background-color: var(--bp-teal);
  border-color: var(--bp-teal);
  color: #fff;
}
/* btn-light = verde bosque oscuro (contraste AA >= 4.5:1 con texto blanco) */
.btn-light { background: var(--bp-teal); border-color: var(--bp-teal); color: #fff; }
.btn-light:hover { background: var(--bp-teal-dark); border-color: var(--bp-teal-dark); color: #fff; }

/* ---- Enlaces ---- */
a { color: var(--bp-teal); }
a:hover { color: var(--bp-teal-dark); }
.text-muted { color: var(--bp-ink-soft); }

/* ---- Hero ---- */
.hero {
  background:
    radial-gradient(circle at 8% 18%, rgba(107,158,94,.16), transparent 42%),
    radial-gradient(circle at 92% 62%, rgba(201,111,59,.12), transparent 44%),
    radial-gradient(circle at 70% 12%, rgba(229,181,59,.10), transparent 36%),
    linear-gradient(180deg, var(--bg-soft), var(--bp-cream));
  position: relative;
  overflow: hidden;
}
.hero h1 { color: var(--bp-teal-dark); }
.hero .lead { color: var(--bp-ink-soft); max-width: 660px; margin-inline: auto; }

/* ---- Cards ---- */
.card { border-radius: 1.15rem; }
/* Tamaño de título de tarjeta homogéneo (independiente del nivel de heading) */
.card-title { font-size: 1.05rem; }
.card-title a { color: var(--bp-ink); }
.card.shadow-sm {
  border-top: 3px solid rgba(46,107,79,.22);
}
.card.shadow-sm:hover {
  box-shadow: 0 .6rem 1.4rem rgba(20,53,42,.14);
  border-top-color: var(--bp-teal);
}

/* ---- Ornamentos / filigranas ecologicas ---- */
.ornament-rama {
  position: absolute;
  width: 150px;
  height: 150px;
  background: url('../img/ornaments/rama.svg') no-repeat center / contain;
  pointer-events: none;
  opacity: .8;
}
.ornament-rama.top-left { top: -18px; left: -18px; }
.ornament-rama.bottom-right { bottom: -18px; right: -18px; transform: rotate(180deg); }

.ornament-hoja {
  position: absolute;
  width: 64px;
  height: 64px;
  background: url('../img/ornaments/hoja.svg') no-repeat center / contain;
  pointer-events: none;
  opacity: .75;
}

.ornament-ola {
  display: block;
  width: 100%;
  height: 40px;
  background: url('../img/ornaments/ola.svg') no-repeat center / 100% 100%;
  margin: 0;
  border: 0;
}
.ornament-ola.flip { transform: scaleY(-1); }

/* Separador de titulos con hoja */
.section-heading { position: relative; }
.section-heading .section-title { position: relative; display: inline-block; }
.section-heading .section-title::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: .55rem;
  vertical-align: -4px;
  background: url('../img/ornaments/hoja.svg') no-repeat center / contain;
  opacity: .85;
}
.section-heading .section-title:after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  margin: .5rem auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bp-teal), var(--bp-green) 55%, var(--bp-peach));
}

/* Badge eco: sello tipo etiqueta ecológica (borde discontinuo) */
.badge-eco {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .7rem;
  border-radius: 2rem;
  background: #fff;
  border: 1px dashed var(--bp-peach);
  color: var(--bp-teal-dark);
  font-size: .75rem;
  font-weight: 600;
}
.badge-eco::before {
  content: "🌿";
  font-size: .85rem;
}

/* ---- Beneficios (icon-box estilo beta) ---- */
.benefit-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  border: 1px solid rgba(1,150,140,.2);
  font-size: 1.5rem;
  margin-bottom: .75rem;
}

/* ---- FAQ ---- */
.accordion-button:not(.collapsed) {
  background-color: var(--bg-soft);
  color: var(--bp-teal-dark);
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(46,107,79,.18); }

/* ---- Footer ---- */
footer { position: relative; }
footer.bg-dark { background: #14352A !important; }
footer::before {
  content: "";
  display: block;
  height: 40px;
  width: 100%;
  background: url('../img/ornaments/ola.svg') no-repeat center / 100% 100%;
  transform: scaleY(-1);
  opacity: .5;
  margin-bottom: -1px;
  position: absolute;
  top: -39px;
  left: 0;
}

/* ---- Banda "economía circular" ----
   Sección con bordes punteados terracota y radios decorativos,
   usada en los bloques de beneficios (reducir, reutilizar, reciclar). */
.band-circular {
  border-top: 2px dashed rgba(201,111,59,.45);
  border-bottom: 2px dashed rgba(201,111,59,.45);
  background:
    radial-gradient(circle at 12% 50%, rgba(107,158,94,.14), transparent 46%),
    radial-gradient(circle at 88% 50%, rgba(201,111,59,.10), transparent 46%),
    var(--bg-soft);
}

/* ---- Separador de onda entre secciones ---- */
.divider-eco {
  display: block;
  width: 100%;
  height: 56px;
  background: url('../img/ornaments/ola.svg') no-repeat center / 100% 100%;
  opacity: .8;
}

/* ---- Responsive ornamentos ---- */
@media (max-width: 767.98px) {
  .ornament-rama { width: 90px; height: 90px; }
  .ornament-hoja { width: 44px; height: 44px; }
}

/* ---- Área clicable enlaces del footer (audit target-size) ----
   El padding amplía el target a ~48px; el margen negativo compensa
   el espacio extra para no alterar el aspecto visual. */
footer ul.list-unstyled li a {
  display: inline-block;
  padding: 1rem 0;
  margin: -.7rem 0;
}