/*
 * Portada de Agro Market (frontend/views/site/index.php). Solo estilo: los textos y enlaces están en la vista.
 * Fotografías en /img/inicio/ (se reemplazan por otras con el mismo nombre):
 *   hero.jpg · paso-1-registro.jpg · paso-2-productos.jpg · paso-3-convocatorias.jpg · productor-cta.jpg · noticia-generica.jpg
 */

/* ── Portada (hero) ─────────────────────────────────────── */
.inicio-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(8rem, 14vw, 10.5rem);
  background: var(--c-verde-950) url('../img/inicio/hero.jpg') center / cover no-repeat;
}
.inicio-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(5, 46, 22, .94) 0%, rgba(5, 46, 22, .82) 36%, rgba(5, 46, 22, .35) 72%, rgba(5, 46, 22, .15) 100%),
    linear-gradient(0deg, rgba(5, 46, 22, .6) 0%, transparent 45%);
}
.inicio-hero::after { /* destello cálido, como el sol de la tarde */
  content: '';
  position: absolute;
  z-index: -1;
  width: 60vw;
  height: 60vw;
  right: -20vw;
  top: -30vw;
  background: radial-gradient(circle, rgba(251, 191, 36, .28), transparent 65%);
  pointer-events: none;
}
.inicio-hero__contenido { max-width: 660px; animation: inicio-sube .7s ease-out both; }
.inicio-hero__contenido h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.inicio-hero__contenido p {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}
.inicio-hero .btn-agro--lg { min-height: 54px; padding: 0 1.75rem; border-radius: var(--radius-full); font-weight: 650; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.inicio-hero .btn-agro--accent:hover { transform: translateY(-1px); }
.btn-agro--claro { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-agro--claro:hover, .btn-agro--claro:focus-visible { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }

/* ── Cifras: tarjetas que montan sobre la portada ───────── */
.inicio-metricas { position: relative; z-index: 2; margin-top: clamp(-6rem, -9vw, -4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.inicio-metricas .agro-grid { gap: var(--sp-4); }
.inicio-metrica {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: var(--sp-4);
  background: #fff;
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: 0 22px 44px -22px rgba(5, 46, 22, .45), 0 2px 6px rgba(16, 24, 40, .04);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: inicio-sube .7s .1s ease-out both;
}
.inicio-metrica:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -22px rgba(5, 46, 22, .5); }
.inicio-metrica__icono { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--c-verde-50); color: var(--c-verde-700); }
.inicio-metrica--dorado .inicio-metrica__icono { background: var(--c-dorado-100); color: var(--c-dorado-700); }
.inicio-metrica--azul .inicio-metrica__icono { background: #e0f2fe; color: #0369a1; }
.inicio-metrica__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inicio-metrica .card-metrica__valor { font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--c-verde-950); }
.inicio-metrica .card-metrica__valor--dorado { color: var(--c-dorado-700); }
.inicio-metrica .card-metrica__valor--azul { color: #0369a1; }
.inicio-metrica .card-metrica__label { font-size: var(--text-sm); color: var(--c-gris-muted); }

/* ── Secciones ──────────────────────────────────────────── */
.inicio-seccion { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.inicio-seccion--clara { background: #fff; }
.inicio-seccion--crema { background: linear-gradient(180deg, var(--c-crema, #fbf8f1), #fff); }
.inicio-seccion__titulo {
  text-align: center;
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-verde-950);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.inicio-seccion__titulo::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin: var(--sp-4) auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-verde-600), var(--c-dorado-400));
}
.inicio-seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.inicio-seccion__cabecera .inicio-seccion__titulo { text-align: left; margin: 0; }
.inicio-seccion__cabecera .inicio-seccion__titulo::after { margin-left: 0; }

/* ── ¿Cómo funciona? ────────────────────────────────────── */
.inicio-pasos { gap: clamp(1rem, 2.5vw, 1.75rem) !important; }
.inicio-paso {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.inicio-paso:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.inicio-paso__foto { aspect-ratio: 16 / 10; background: var(--c-verde-100) center / cover no-repeat; transition: transform .6s ease; }
.inicio-paso:hover .inicio-paso__foto { transform: scale(1.04); }
.inicio-paso__foto--1 { background-image: url('../img/inicio/paso-1-registro.jpg'); }
.inicio-paso__foto--2 { background-image: url('../img/inicio/paso-2-productos.jpg'); }
.inicio-paso__foto--3 { background-image: url('../img/inicio/paso-3-convocatorias.jpg'); }
.inicio-paso__num {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: -28px 0 var(--sp-4) var(--sp-6);
  border-radius: 18px;
  border: 4px solid #fff;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-verde-600), var(--c-verde-800));
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 10px 22px -8px rgba(21, 128, 61, .65);
}
.inicio-paso h3 { color: var(--c-verde-950); font-size: 1.2rem; font-weight: 750; margin: 0 var(--sp-6) var(--sp-2); }
.inicio-paso p { color: var(--c-gris-muted); margin: 0 var(--sp-6) var(--sp-6); line-height: 1.6; }

/* ── Noticias y convocatorias ───────────────────────────── */
.inicio-noticias { gap: clamp(1rem, 2.5vw, 1.75rem) !important; }
.inicio-noticia {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.inicio-noticia:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c-verde-300); }
.inicio-noticia__img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; background: var(--c-verde-100) url('../img/inicio/noticia-generica.jpg') center / cover; }
.inicio-noticia__sin-img { aspect-ratio: 16 / 9; background: var(--c-verde-100) url('../img/inicio/noticia-generica.jpg') center / cover; }
.inicio-noticia .card-agro__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.inicio-noticia .badge-agro { align-self: flex-start; margin-bottom: 0 !important; }
.inicio-noticia h3 { font-size: 1.08rem !important; font-weight: 700; line-height: 1.35; margin: 0 !important; }
.inicio-noticia h3 a { color: var(--c-verde-950); text-decoration: none; }
.inicio-noticia h3 a::after { content: ''; position: absolute; inset: 0; } /* toda la tarjeta es el enlace */
.inicio-noticia:hover h3 a { color: var(--c-verde-700); }
.inicio-noticia p { line-height: 1.55; }
.inicio-ver-todas { border-radius: var(--radius-full) !important; }

/* ── Llamado final ──────────────────────────────────────── */
.inicio-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  background: var(--c-dorado-900) url('../img/inicio/productor-cta.jpg') center / cover no-repeat;
}
.inicio-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(5, 46, 22, .9) 0%, rgba(20, 83, 45, .78) 45%, rgba(120, 53, 15, .72) 100%);
}
.inicio-cta h2 { color: #fff !important; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--sp-4) !important; text-wrap: balance; }
.inicio-cta p { color: rgba(255, 255, 255, .88) !important; font-size: 1.08rem; max-width: 52ch !important; margin-bottom: var(--sp-8) !important; }
.inicio-cta .btn-agro--lg { min-height: 54px; padding: 0 2rem; border-radius: var(--radius-full); background: var(--c-dorado-400); border-color: var(--c-dorado-400); color: var(--c-dorado-900); font-weight: 700; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }
.inicio-cta .btn-agro--lg:hover { background: #f59e0b; border-color: #f59e0b; transform: translateY(-1px); }

/* El llamado final empalma con el pie de página (sin la franja del margen superior del pie). */
.site-main:has(> .inicio-cta:last-child) + .site-footer { margin-top: 0; }

/* Con sesión iniciada la portada se ve dentro del panel: bloques redondeados en lugar de franjas completas. */
.app-content .inicio-hero, .app-content .inicio-cta { border-radius: var(--radius-xl); }
.app-content .inicio-hero { padding-bottom: clamp(7rem, 12vw, 9rem); }
.app-content .inicio-seccion--clara, .app-content .inicio-seccion--crema { background: transparent; }

@keyframes inicio-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .inicio-hero__contenido, .inicio-metrica { animation: none; }
  .inicio-paso, .inicio-paso__foto, .inicio-noticia, .inicio-metrica { transition: none; }
}
@media (max-width: 640px) {
  .inicio-hero .btn-agro--lg { width: 100%; justify-content: center; }
  .inicio-metrica { padding: var(--sp-4) var(--sp-5); }
}