.hero {
  height: 520px;
  border: 1px solid var(--line);
  border-radius: 220px 220px 0 0;
  /* arco de granero - patron disenio */
  overflow: hidden;
  position: relative
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .08)
}

/* texto editorial superpuesto al hero */
.hero-text {
  position: absolute;
  bottom: 40px;
  left: 40px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: clamp(42px, 7vw, 90px);
  color: #fff;
  line-height: .92;
  letter-spacing: -.04em;
  margin: 0
}

/* ---------------------------------------------------------
   cuadricula de tarjetas de producto
   --------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line)
}

/* tarjeta individual de producto */
/* bootstrap-equiv: .card */
.card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px;
  background: #fff;
  transition: background .15s
}

.card:hover {
  background: var(--surface)
}

/* imagen de la tarjeta */
.card-img {
  height: 200px;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s
}

.card:hover .card-img img {
  transform: scale(1.05)
}

/* badge de origen - esquina superior derecha de la imagen */
/* bootstrap-equiv: .badge .bg-dark */
.card-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--leaf);
  color: #fff;
  padding: 4px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -.02em
}

/* nombre del producto en serif */
.name {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  margin-top: 14px;
  color: var(--ink)
}

/* fila de precios: pool vs retail */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px
}

/* precio del pool - "ticker" agresivo */
.price {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em
}

.price small {
  font-size: 11px;
  text-transform: uppercase;
  margin-left: 3px
}

/* precio retail tachado con linea terracota */
.retail {
  font-size: 13px;
  color: #a8a29e;
  text-decoration: line-through;
  text-decoration-color: var(--terra);
  text-decoration-thickness: 2px
}

/* ---------------------------------------------------------
   barra de progreso del pool (brutalista rectangular)
   bootstrap-equiv: .progress
   --------------------------------------------------------- */
.prog {
  margin-top: 12px
}

/* encabezado de la barra: etiqueta + porcentaje */
.prog-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--leaf);
  font-weight: 700;
  margin-bottom: 4px
}

/* pista de la barra - 12px alto, sin redondear */
.bar {
  height: 12px;
  background: var(--line)
}

/* relleno de la barra - ochre por defecto */
.bar>i {
  display: block;
  height: 100%;
  background: var(--ochre)
}

/* variante terracota para pool critico */
.bar>i.terra {
  background: var(--terra)
}

/* boton cta de comprometerse al pool */
.btn {
  margin-top: 14px;
  border: 0;
  background: var(--terra);
  color: #fff;
  width: 100%;
  padding: 14px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  display: block;
  text-align: center;
  box-sizing: border-box
}

.btn:hover {
  background: var(--leaf)
}

/* ---------------------------------------------------------
   pagina de detalle del pool (diseno dividido)
   --------------------------------------------------------- */

/* navbar fija - usada en pool_detail donde el layout es 100vh */
.navbar--fixed {
  position: fixed;
  width: 100%
}

/* ticker fijo debajo de la navbar fija */
.ticker--fixed {
  position: fixed;
  top: 64px;
  z-index: 39;
  width: 100%
}

/* layout dividido: imagen izquierda + terminal derecho */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 100vh;
  padding-top: 100px
}

/* columna izquierda con imagen en arco */
.hero-col {
  position: sticky;
  top: 100px;
  height: calc(100vh - 100px);
  background: #fcf2ea;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end
}

/* contenedor de imagen con arco superior - patron de granero */
.arch {
  width: 100%;
  max-width: 380px;
  height: 100%;
  border-radius: 500px 500px 0 0;
  overflow: hidden;
  background: var(--line)
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* metadatos bajo la imagen */
.hero-meta {
  margin-top: 28px;
  text-align: center
}

.hero-meta p:first-child {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--leaf);
  margin-bottom: 6px
}

.hero-meta p:last-child {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--leaf)
}

/* columna derecha del terminal */
.terminal-col {
  border-left: 1px solid var(--line);
  padding: clamp(24px, 4vw, 56px)
}

.terminal-inner {
  max-width: 600px
}

/* titulo grande del pool */
.pool-title {
  font-family: 'Newsreader', serif;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 700;
  color: var(--leaf);
  line-height: .9;
  letter-spacing: -.04em;
  margin-bottom: 14px
}

/* fila de metadatos del pool con divisor de linea */
.pool-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 40px
}

.pool-meta span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #766a62
}

.pool-meta .divider {
  flex: 1;
  height: 1px;
  background: var(--line)
}

.pool-meta .batch {
  font-weight: 700;
  color: var(--ochre)
}

/* caja de datos del terminal */
.terminal-box {
  background: var(--surface);
  padding: 28px;
  border: 1px solid var(--line);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden
}

/* version del terminal - marca de agua */
.terminal-box .ver {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  color: #a09890;
  opacity: .4
}

/* fila de estado superior de la caja */
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px
}

.status-row .label {
  font-size: 11px;
  text-transform: uppercase;
  color: #766a62;
  margin-bottom: 4px
}

.status-row .val {
  font-size: 20px;
  font-weight: 700;
  color: var(--leaf)
}

.status-row .val.terra {
  color: var(--terra)
}

/* etiquetas del track de progreso */
.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: 6px
}

.progress-labels .goal {
  color: var(--ochre);
  font-weight: 700
}

/* barra de progreso grande (22px) del pool detail */
/* bootstrap-equiv: .progress */
.progress-track {
  height: 22px;
  width: 100%;
  background: var(--line);
  border: 1px solid var(--line);
  position: relative;
  margin-bottom: 28px
}

.progress-track i {
  display: block;
  height: 100%;
  background: var(--ochre)
}

/* marcas segmentadas sobre la barra */
.progress-track .mark {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(255, 255, 255, .25)
}

/* rejilla de precios: mercado vs pool */
.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(224, 220, 211, .3)
}

.pricing .label {
  font-size: 11px;
  text-transform: uppercase;
  color: #766a62;
  margin-bottom: 6px
}

.pricing .label.ochre {
  color: var(--ochre);
  font-weight: 700
}

/* precio de mercado tachado con linea terracota */
.market-price {
  font-size: 34px;
  color: #a09890;
  opacity: .5;
  position: relative
}

.market-price::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: var(--terra);
  transform: translateY(-50%)
}

.market-price small {
  font-size: 15px
}

/* precio del pool - prominente, hoja verde */
.pool-price {
  font-size: 40px;
  font-weight: 700;
  color: var(--leaf);
  letter-spacing: -.03em
}

.pool-price small {
  font-size: 17px
}

/* boton de unirse al pool */
.btn-pool {
  width: 100%;
  padding: 20px;
  background: var(--terra);
  color: #fff;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px
}

.btn-pool:hover {
  background: var(--leaf)
}

.btn-pool:disabled {
  background: var(--leaf);
  cursor: default;
  opacity: .86
}

.btn-pool-secundario {
  margin-top: 10px;
  border: 1px solid var(--terra);
  background: transparent;
  color: var(--terra)
}

.btn-pool-secundario:hover {
  background: var(--terra);
  color: var(--bg)
}

.btn-pool svg {
  width: 18px;
  height: 18px
}

.mensaje-grupo {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(192, 82, 42, .28);
  background: rgba(192, 82, 42, .08);
  color: var(--leaf);
  font-size: 13px;
  line-height: 1.4
}

/* detalles del lote y logistica */
.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px
}

.details h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--leaf);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 14px
}

.details .text {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(44, 76, 59, .85);
  font-style: italic
}

/* filas del log de logistica */
.log-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(224, 220, 211, .15)
}

.log-row span:first-child {
  color: #766a62
}

.log-row span:last-child {
  font-weight: 700;
  color: var(--leaf)
}

/* ---------------------------------------------------------
   historias del productor - hero editorial
   --------------------------------------------------------- */
.story-hero {
  position: relative;
  width: 100%;
  height: 820px;
  overflow: hidden;
  display: flex;
  align-items: flex-end
}

.story-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.25)
}

.story-hero .grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 76, 59, .8), transparent 60%)
}

.story-hero .content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 clamp(24px, 5vw, 80px) 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(253, 251, 247, .3)
}

.story-hero .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(253, 251, 247, .8);
  margin-bottom: 14px
}

.story-hero h1 {
  font-family: 'Newsreader', serif;
  font-size: clamp(50px, 9vw, 120px);
  color: #FDFBF7;
  line-height: .9;
  letter-spacing: -.04em
}

.story-hero .arrow {
  font-size: 44px;
  color: #FDFBF7;
  padding-bottom: 14px
}

/* layout editorial de tres columnas */
.editorial {
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: 40px
}

/* metadatos del productor (sidebar izquierdo) */
.sidebar-meta {
  border-top: 1px solid var(--line);
  padding-top: 20px
}

.sidebar-meta .block {
  margin-bottom: 28px
}

.sidebar-meta .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--terra);
  margin-bottom: 6px
}

.sidebar-meta .val {
  font-family: 'Newsreader', serif;
  font-size: 19px;
  color: var(--leaf)
}

/* articulo editorial central */
.article {
  font-family: 'Newsreader', serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(44, 76, 59, .9)
}

.article p {
  margin-bottom: 22px
}

/* capitular del articulo en terracota */
.article .dropcap::first-letter {
  float: left;
  font-size: 68px;
  font-weight: 700;
  line-height: .8;
  margin-right: 10px;
  color: var(--terra)
}

/* blockquote destacado */
.bq {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
  margin: 40px 0
}

.bq p {
  font-family: 'Newsreader', serif;
  font-size: clamp(24px, 4vw, 40px);
  font-style: italic;
  color: var(--leaf);
  text-align: center;
  line-height: 1.2;
  margin: 0
}

/* sidebar derecho con estado del lote e imagen */
.sidebar-detail {
  display: flex;
  flex-direction: column;
  gap: 24px
}

/* tarjeta de estado del lote */
.batch-card {
  border: 1px solid var(--line);
  padding: 20px;
  background: #fcf2ea
}

.batch-card .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--terra);
  margin-bottom: 14px
}

/* fila de datos del lote */
.batch-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 10px;
  font-size: 13px
}

.batch-row span:last-child {
  font-weight: 700
}

.batch-row span.terra {
  color: var(--terra)
}

/* barra mini para el estado del lote (sidebar) */
.mini-bar {
  height: 10px;
  background: var(--line)
}

.mini-bar i {
  display: block;
  height: 100%;
  background: var(--ochre)
}

/* imagen en escala de grises del sidebar */
.sidebar-img {
  border: 1px solid var(--line);
  filter: grayscale(1);
  aspect-ratio: 3/4;
  overflow: hidden
}

.sidebar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* galeria de fotos del productor (3 columnas) */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.photo-strip figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3
}

.photo-strip figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.5);
  transition: filter .3s
}

.photo-strip figure:hover img {
  filter: grayscale(0)
}

.photo-strip figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(44, 76, 59, .75);
  color: #FDFBF7
}

/* seccion de compra de este productor */
.shop {
  padding: 80px 24px;
  background: var(--bg)
}

.shop-inner {
  max-width: 1240px;
  margin: 0 auto
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 52px
}

.shop-header h2 {
  font-family: 'Newsreader', serif;
  font-size: 32px;
  color: var(--leaf)
}

.shop-header a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--terra);
  font-weight: 700
}

/* cuadricula de tarjetas de compra del productor */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.shop-card figure {
  height: 180px;
  border-radius: 120px 120px 0 0;
  /* arco de producto */
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: none;
  position: relative
}

.shop-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.3);
  transition: transform .4s, filter .3s
}

.shop-card:hover figure img {
  transform: scale(1.06);
  filter: grayscale(0)
}

.shop-card .body {
  border: 1px solid var(--line);
  border-top: none;
  padding: 20px
}

.shop-card .sname {
  font-family: 'Newsreader', serif;
  font-size: 19px;
  color: var(--leaf);
  margin-bottom: 4px
}

.shop-card .lot {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #766a62;
  margin-bottom: 10px
}

.shop-card .sprice {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px
}

/* boton de comprometerse en tarjeta de compra */
.shop-card .sbtn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--terra);
  color: var(--bg);
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s
}

.shop-card .sbtn:hover {
  background: var(--leaf)
}

.productores-relacionados {
  padding: 44px 24px 0;
  background: var(--bg)
}

.productores-relacionados-inner {
  max-width: 1240px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 24px
}

.productores-relacionados h2 {
  font-family: 'Newsreader', serif;
  font-size: 28px;
  color: var(--leaf);
  margin-bottom: 18px
}

.productores-relacionados-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px
}

.productor-relacionado {
  border: 1px solid var(--line);
  padding: 14px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface)
}

.productor-relacionado.activo {
  border-color: var(--terra);
  background: rgba(192, 82, 42, .08)
}

.productor-relacionado span,
.productor-relacionado small {
  color: #766a62;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.productor-relacionado strong {
  color: var(--leaf);
  font-family: 'Newsreader', serif;
  font-size: 19px;
  line-height: 1.05
}

.historia-vacia {
  grid-column: 1 / -1;
  color: #766a62;
  border: 1px solid var(--line);
  padding: 18px
}

/* ---------------------------------------------------------
   selector de rol - checkbox hack, sin javascript
   --------------------------------------------------------- */

/* ocultar el input real */
.role-input {
  display: none
}

/* etiqueta del toggle - contenedor horizontal */
.role-label {
  display: flex;
  border: 1px solid var(--line);
  cursor: pointer;
  width: fit-content;
  margin: 0 auto 32px
}

/* cada opcion de rol */
.role-comprador,
.role-productor {
  padding: 12px 28px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  transition: background .2s, color .2s
}

/* estado por defecto: comprador activo */
.role-comprador {
  background: var(--leaf);
  color: #fff
}

.role-productor {
  background: #fff;
  color: #766a62
}

/* estado checked: productor activo */
.role-input:checked ~ .role-label .role-comprador {
  background: #fff;
  color: #766a62
}

.role-input:checked ~ .role-label .role-productor {
  background: var(--terra);
  color: #fff
}

/* logica de visibilidad de las vistas */
.view-comprador {
  display: block
}

.view-productor {
  display: none
}

.role-input:checked ~ .view-productor {
  display: block
}

.role-input:checked ~ .view-comprador {
  display: none
}

/* ---------------------------------------------------------
   panel del productor - estilos del placeholder
   --------------------------------------------------------- */

/* formulario de publicacion de cosecha (placeholder) */
.form-cosecha {
  border: 1px solid var(--line);
  padding: 32px;
  background: var(--surface);
  margin-bottom: 40px
}

.form-cosecha h3 {
  font-family: 'Newsreader', serif;
  font-size: 26px;
  color: var(--leaf);
  margin-bottom: 22px
}

/* campo de formulario del productor */
.form-campo {
  margin-bottom: 16px
}

.form-campo label {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(92, 75, 68, .78);
  margin-bottom: 4px
}

.form-campo input,
.form-campo select,
.form-cosecha .form-control,
.form-cosecha .form-select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 27, 22, .72);
  font-family: 'Space Grotesk', sans-serif
}

.form-campo input:focus,
.form-campo select:focus,
.form-cosecha .form-control:focus,
.form-cosecha .form-select:focus {
  outline: none;
  border-bottom: 2px solid var(--terra);
  box-shadow: none;
  color: var(--ink)
}

/* mensajes de validacion discretos para no dominar el formulario */
.form-cosecha .invalid-feedback {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(200, 90, 50, .78)
}

.form-cosecha.was-validated .form-control:invalid ~ .invalid-feedback,
.form-cosecha.was-validated .form-select:invalid ~ .invalid-feedback {
  display: block
}

/* cuadricula de formulario del productor */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

/* panel de estadisticas del productor */
.lotes-panel {
  border: 1px solid var(--line);
  margin-bottom: 40px
}

.lotes-panel-titulo {
  background: var(--leaf);
  color: #fff;
  padding: 14px 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700
}

.lotes-stat {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px
}

.lotes-stat:last-child {
  border-bottom: none
}

.lotes-stat span:last-child {
  font-weight: 700;
  color: var(--leaf)
}

.lotes-lista {
  padding: 0
}

.lote-productor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line)
}

.lote-productor:last-child {
  border-bottom: 0
}

.lote-productor strong,
.lote-productor span {
  display: block
}

.lote-productor strong {
  color: var(--leaf);
  font-family: 'Newsreader', serif;
  font-size: 18px
}

.lote-productor span {
  margin-top: 3px;
  color: #766a62;
  font-size: 12px
}

.lote-productor-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px
}

.lote-productor-meta a {
  border: 1px solid var(--terra);
  background: transparent;
  color: var(--terra);
  padding: 8px 10px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  cursor: pointer
}

.lote-productor-meta a:hover {
  background: var(--terra);
  color: var(--bg)
}

.lotes-vacio {
  margin: 0;
  padding: 16px 20px;
  color: #766a62;
  font-size: 13px
}

/* indicador de fecha limite estatica */
.deadline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--terra);
  font-weight: 700;
  margin-top: 8px
}

.deadline-icono {
  font-size: 16px
}

/* ---------------------------------------------------------
   modelos de entrega - badge en pool_detail y radio en productor
   --------------------------------------------------------- */

/* bloque de modelo de entrega */
.modelo-entrega {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .75rem 1rem;
  border-left: 3px solid var(--ochre);
  background: var(--surface);
  margin-top: 1rem
}

/* icono del modelo */
.modelo-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px
}

/* titulo del modelo - label agresivo */
.modelo-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink)
}

/* descripcion del modelo */
.modelo-desc {
  font-size: .75rem;
  opacity: .75;
  margin-top: .25rem;
  line-height: 1.5
}

/* variantes de borde segun tipo */
.modelo-nodo {
  border-left-color: var(--leaf)
}

.modelo-envio {
  border-left-color: var(--ochre)
}

.modelo-empresa {
  border-left-color: var(--terra)
}

/* fieldset de radios para seleccion de modelo */
.modelo-fieldset {
  border: 1px solid var(--line);
  padding: 20px;
  margin-top: 16px;
  margin-bottom: 16px
}

.modelo-fieldset legend {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--leaf);
  padding: 0 8px
}

/* cada opcion de radio de modelo */
.modelo-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer
}

.modelo-radio:last-child {
  border-bottom: none
}

.modelo-radio input[type='radio'] {
  margin-top: 3px;
  accent-color: var(--terra)
}

.modelo-radio-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink)
}

.modelo-radio-desc {
  font-size: 12px;
  color: #766a62;
  margin-top: 2px
}

/* ---------------------------------------------------------
   responsive marketplace y detalle del pool
   --------------------------------------------------------- */
@media (max-width: 980px) {
  .grid {
    grid-template-columns: 1fr
  }

  .hero {
    height: 380px
  }

  .hero-text {
    font-size: 38px;
    left: 20px;
    bottom: 20px
  }
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    padding-top: 100px
  }

  .hero-col {
    position: static;
    height: 500px
  }

  .details {
    grid-template-columns: 1fr
  }

  .editorial {
    grid-template-columns: 1fr
  }

  .shop-grid {
    grid-template-columns: 1fr
  }

  .photo-strip {
    grid-template-columns: 1fr
  }

  .productores-relacionados-grid {
    grid-template-columns: 1fr
  }
}
/* formato de avance del pool: X/Y principal y % secundario */
.prog-head .pool-cantidad,
.progress-labels .pool-cantidad {
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--leaf)
}

.prog-head .pool-porcentaje,
.progress-labels .pool-porcentaje {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700
}