/* =============================================================
   Tarjeta según el boceto de Enrique, video de uso, Natu-Packs y
   guías de cultivo.

   Se carga DESPUÉS de estilos.css: algunas reglas de aquí ajustan
   las de allá a propósito.
============================================================= */

/* =============================================================
   Tokens nuevos
============================================================= */
:root {
  --ambar: #7C5F1B;
  --ambar-claro: #F6EEDC;
  /* El amarillo de marcatextos con que Enrique resalta sus hojas. */
  --marcador: #F3EE6A;
}

html[data-tema="dark"] {
  --ambar: #D6B368;
  --ambar-claro: #2A2314;
  --marcador: #5E5C1C;
}

/* En celular, una sola columna. Sin min(), una tarjeta de 29rem no
   cabe en un teléfono de 375 px y la página se desborda de lado. */
/* Cuántos productos por renglón lo decide el panel; en pantallas
   chicas siempre cae a uno. */
.rejilla {
  grid-template-columns: repeat(var(--columnas-catalogo, 2), minmax(0, 1fr));
}

@media (max-width: 62rem) {
  .rejilla { grid-template-columns: 1fr; }
}

/* =============================================================
   Tarjeta según el boceto de Enrique (15 de septiembre de 2026)

   Arriba: nombre, descripción y cuatro botones — Tiene OMRI,
   Ficha técnica, MSD y Video de uso. Abajo: elige tu presentación.

   El bidón se queda. En la junta del 7 pidió que se viera grande
   porque es la figura que el productor reconoce; el boceto ordena
   la información, no la quita.
============================================================= */
.producto-titulo {
  margin: 0;
  /* Más grandes y en negritas: se pidió en la junta del 16 de
     septiembre, pensando en la lectura desde el celular. */
  font-size: calc(1.55rem * var(--escala-titulos, 1));
  font-weight: 800;
  letter-spacing: -.01em;
}

/* El bidón manda: ocupa casi todo el alto del recuadro, y la
   descripción con sus documentos va al costado. Así se acordó en
   la junta del 7 de septiembre. */
.producto-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.producto-cabeza .producto-foto { height: var(--alto-foto, 21rem); min-height: 0; }

.producto-lado { display: flex; flex-direction: column; gap: .7rem; }

.producto-descripcion { display: flex; flex-direction: column; gap: .5rem; }
.producto-descripcion p { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--tinta-media); }

.botones-producto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin-top: auto;
}

.boton-producto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .1rem;
  min-height: 3.7rem;
  padding: .5rem .6rem;
  border: 1.5px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}

/* Letra grande a propósito: en la junta se puso número a quién
   lee esto, productores de más de 40 años. */
.boton-producto b { font-size: 1rem; line-height: 1.2; }
.boton-producto span { font-size: .8rem; line-height: 1.25; color: var(--tinta-suave); }

a.boton-producto:hover,
button.boton-producto:hover {
  border-color: var(--verde);
  background: var(--verde-claro);
}

.boton-producto:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* Un color por tipo de documento: así se aprenden de vista, que
   fue lo que se pidió en la junta del 16 de septiembre. */
.boton-omri { border-color: var(--cielo); background: color-mix(in srgb, var(--cielo) 7%, transparent); }
.boton-omri b { color: var(--cielo); }

.boton-ficha { border-color: var(--verde); }
.boton-ficha b { color: var(--verde); }

.boton-msds { border-color: var(--ambar); }
.boton-msds b { color: var(--ambar); }

.boton-video b::before { content: "\25B6\00a0"; font-size: .75em; }

/* Lo que todavía no existe se ve apagado en vez de esconderse. */
.boton-pendiente { border-style: dashed; background: transparent; opacity: .55; cursor: default; }

.compra-titulo { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--cielo); }

.producto.resaltada { box-shadow: 0 0 0 3px var(--verde); }

@media (max-width: 34rem) {
  .producto-cabeza { grid-template-columns: 1fr; }
  .producto-cabeza .producto-foto { height: 17rem; }
}

/* =============================================================
   Cómo comprar: el video corto de la portada
============================================================= */
.como-comprar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: 10px;
}

.como-comprar h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.como-comprar p { margin: 0; color: var(--tinta-media); }

@media (max-width: 48rem) {
  .como-comprar { grid-template-columns: 1fr; }
}

/* =============================================================
   Ventanas: video de uso y guías
============================================================= */
.dialogo {
  width: min(62rem, 94vw);
  max-height: 90vh;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
}

/* Solo cuando está abierta: con un display fijo, la ventana se
   vería aunque estuviera cerrada. */
.dialogo[open] { display: flex; flex-direction: column; }

.dialogo::backdrop { background: rgba(22, 36, 28, .55); }

.dialogo-cabeza {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--linea);
}

.dialogo-cabeza h2 { margin: 0; font-size: 1.2rem; }

.dialogo-video { width: min(54rem, 94vw); }
.dialogo-video-cuerpo { background: #000; }

.video-marco { position: relative; aspect-ratio: 16 / 9; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-archivo { display: block; width: 100%; max-height: 75vh; background: #000; }

.dialogo-guia-cuerpo { overflow: auto; padding: 1.25rem 1.4rem 2rem; }

/* =============================================================
   Natu-Packs y guías — lista
============================================================= */
.guias { padding-bottom: 2.5rem; }

.guias-grupo + .guias-grupo { margin-top: 1.75rem; }
.guias-grupo h3 { margin: 0; font-size: 1.15rem; }
.guias-grupo-nota { margin: .2rem 0 .8rem; font-size: .95rem; color: var(--tinta-suave); }

.guias-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: .6rem;
}

.guia-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}

.guia-tarjeta:hover { border-color: var(--verde); background: var(--verde-claro); }
.guia-tarjeta:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.guia-nombre { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.guia-variedad { font-size: .82rem; color: var(--tinta-media); }
.guia-cuenta { font-size: .82rem; color: var(--tinta-suave); }
.guia-accion { margin-top: .35rem; font-size: .85rem; font-weight: 700; color: var(--verde); }

.guia-miembros { border-style: dashed; }
.guia-miembros .guia-accion { color: var(--ambar); }

/* =============================================================
   Guía abierta
============================================================= */
mark {
  background: linear-gradient(transparent 45%, var(--marcador) 45%);
  color: inherit;
  padding: 0 .12em;
}

.guia-vista-previa {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .6rem;
  border-radius: 4px;
  background: var(--ambar-claro);
  color: var(--ambar);
  font-size: .85rem;
  font-weight: 600;
}

.guia-descripcion {
  margin: 0 0 1.25rem;
  max-width: 50rem;
  font-size: 1.05rem;
  color: var(--tinta-media);
  white-space: pre-line;
}

.guia-pdf { display: inline-block; margin-bottom: 1rem; font-weight: 700; color: var(--verde); }

/* --- Hoja del ciclo: la hoja a mano de Enrique, pasada a pantalla --- */
.hoja-ayuda { margin: 0 0 .4rem; font-size: .82rem; color: var(--tinta-suave); }

.hoja-marco {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--fondo);
  margin-bottom: 1.75rem;
}

.hoja {
  display: grid;
  /* Columnas de ancho fijo: con max-content una nota larga estiraba
     su etapa a 400 px y la hoja medía casi 5 000. */
  grid-template-columns: repeat(var(--columnas), minmax(9.5rem, 1fr));
  min-width: calc(var(--columnas) * 9.5rem);
}

.hoja > div { border-right: 1px solid var(--linea); }

.hoja-fase {
  padding: .4rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linea);
}

.hoja-fase-vegetativa { background: var(--verde-claro); color: var(--verde); }
.hoja-fase-reproductiva { background: var(--ambar-claro); color: var(--ambar); }

.hoja-etapa {
  min-height: 3.4rem;
  padding: .5rem .6rem .35rem;
  display: flex;
  align-items: flex-end;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.25;
}

.hoja-numero {
  padding: .25rem;
  text-align: center;
  border-top: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  background: var(--superficie);
}

.hoja-numero mark { font-size: 1.3rem; font-weight: 800; }

.hoja-dias {
  padding: .35rem;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--linea);
}

.hoja-dias small { font-weight: 400; color: var(--tinta-suave); }

.hoja-aplicaciones {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .55rem;
  min-height: 6rem;
}

.hoja-aplicacion {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .45rem .5rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie);
}

.hoja-producto { align-self: flex-start; font-weight: 800; font-size: .95rem; }
.hoja-dosis { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.hoja-nota { font-size: .75rem; line-height: 1.35; color: var(--tinta-media); }

/* --- Pasos con fotos y videos --- */
.guia-detalle h3,
.paquete-seccion h3,
.paquete-instrucciones h3 {
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--tinta);
  font-size: 1.15rem;
}

.guia-paso { padding: 1rem 0; border-bottom: 1px solid var(--linea); }

.guia-paso header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .75rem;
  margin-bottom: .4rem;
}

.guia-paso h4 { margin: 0; font-size: 1.1rem; }
.guia-paso p { margin: 0 0 .6rem; color: var(--tinta-media); white-space: pre-line; }

.guia-paso-etiqueta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde);
}

.guia-paso-dias {
  font-size: .8rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 1rem;
  background: var(--verde-claro);
  color: var(--verde);
}

.guia-medios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: .75rem;
  margin-top: .6rem;
}

.guia-medio { margin: 0; }

.guia-medio img,
.guia-medio video {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #000;
}

.guia-medio figcaption { margin-top: .3rem; font-size: .82rem; color: var(--tinta-suave); }

.youtube-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.youtube-poster img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.youtube-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .7);
  color: #FFF;
  font-size: 1.2rem;
}

/* --- Natu-Pack --- */
.paquete-instrucciones,
.paquete-seccion { margin-bottom: 1.75rem; }

.paquete-instrucciones ol {
  margin: 0;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.paquete-instrucciones li p { margin: .2rem 0 0; color: var(--tinta-media); }

.instr-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-weight: 800;
}

.instr-dosis,
.paquete-dosis {
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: .12rem .5rem;
  border-radius: 1rem;
  background: var(--verde-claro);
  color: var(--verde);
  white-space: nowrap;
}

.paquete-producto { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.paquete-producto:last-child { border-bottom: none; }

.paquete-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}

.paquete-nombre { font-size: 1.15rem; font-weight: 800; }
.paquete-que { display: block; margin-top: .1rem; font-size: .92rem; color: var(--tinta-media); }

.paquete-subtitulo {
  display: block;
  margin: .5rem 0 .15rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.paquete-texto { margin: 0; color: var(--tinta-media); white-space: pre-line; }
.paquete-ingredientes { margin: 0; font-size: .85rem; color: var(--tinta-suave); }

.enlace-producto {
  margin-top: .6rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--verde);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Guía para miembros --- */
.guia-bloqueada { max-width: 34rem; margin: 1rem auto; text-align: center; }
.guia-bloqueada h3 { margin: .5rem 0; font-size: 1.3rem; }
.guia-bloqueada p { color: var(--tinta-media); }

.guia-bloqueada-sello {
  display: inline-block;
  margin: 0;
  padding: .25rem .7rem;
  border-radius: 1rem;
  background: var(--ambar-claro);
  color: var(--ambar);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* La tarjeta es más alta que muchas pantallas de laptop: al llegar
   desde una guía se alinea arriba, con aire, para que se lea el nombre. */
.producto { scroll-margin-top: 1rem; }

/* =============================================================
   El lema bajo la marca
============================================================= */
.lema {
  margin: .1rem 0 .35rem;
  max-width: 34rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-media);
}

/* =============================================================
   MEMBRESÍA: botón del encabezado y ventana de la cuenta
============================================================= */
.btn-miembro {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .05rem;
  padding: .5rem .9rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: var(--verde);
  background: var(--superficie);
  border: 1.5px solid var(--verde);
  border-radius: var(--radio, 8px);
  cursor: pointer;
}

.btn-miembro:hover { background: var(--verde-claro); }

.miembro-estado {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ambar);
}

.miembro-estado.miembro-activo { color: var(--verde); }

.dialogo-cuenta { width: min(58rem, 94vw); }
.dialogo-cuenta-cuerpo { overflow: auto; padding: 1.25rem 1.4rem 1.6rem; }

.cuenta-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1.75rem;
}

.cuenta-forma { display: flex; flex-direction: column; gap: .7rem; }
.cuenta-forma h3 { margin: 0; font-size: 1.15rem; }
.cuenta-forma-alta { border-left: 1px solid var(--linea); padding-left: 1.75rem; }

.cuenta-nota { margin: 0; font-size: .92rem; color: var(--tinta-media); }

.cuenta-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.campo-ancho { grid-column: 1 / -1; }

.campo-cuenta { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; }
.campo-cuenta span { font-weight: 600; }
.campo-cuenta em { font-weight: 400; font-style: normal; color: var(--tinta-suave); }

.campo-cuenta input {
  padding: .6rem .7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio, 8px);
}

.campo-cuenta input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

.btn-cuenta {
  align-self: flex-start;
  padding: .7rem 1.3rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--verde);
  border: none;
  border-radius: var(--radio, 8px);
  cursor: pointer;
}

.btn-cuenta:hover { background: var(--verde-vivo, #2C6B49); }

.btn-cuenta-tenue {
  margin-top: 1rem;
  color: var(--tinta-media);
  background: transparent;
  border: 1.5px solid var(--linea);
}

.cuenta-aviso {
  margin: 0 0 1.25rem;
  padding: .8rem 1rem;
  background: var(--ambar-claro);
  border-left: 3px solid var(--ambar);
  border-radius: var(--radio, 8px);
}

.cuenta-aviso-bien { background: var(--verde-claro); border-left-color: var(--verde); }

.cuenta-error {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  background: #F5E4E2;
  border-left: 3px solid #8C2F2A;
  border-radius: var(--radio, 8px);
  color: #8C2F2A;
  font-weight: 600;
}

.cuenta-error-bien { background: var(--verde-claro); border-left-color: var(--verde); color: var(--verde); }

.cuenta-pedidos { margin: .4rem 0 0; padding: 0; list-style: none; }
.cuenta-pedidos li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linea);
}

.guia-bloqueada-pie { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.guia-bloqueada-nota { margin: 0; font-size: .88rem; color: var(--tinta-suave); text-align: center; }

@media (max-width: 52rem) {
  .cuenta-columnas { grid-template-columns: 1fr; }
  .cuenta-forma-alta { border-left: none; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 1.5rem; }
  .cuenta-rejilla { grid-template-columns: 1fr; }
}

/* =============================================================
   NOVEDADES
============================================================= */
.noticias-sitio { padding-bottom: 2.5rem; }

.noticias-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 1rem;
}

.noticia-tarjeta {
  padding: 1.1rem 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: var(--radio, 8px);
}

.noticia-fecha {
  display: block;
  margin-bottom: .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.noticia-tarjeta h3 { margin: 0 0 .45rem; font-size: 1.15rem; }
.noticia-tarjeta p { margin: 0; color: var(--tinta-media); white-space: pre-line; }

/* =============================================================
   PIE LEGAL Y AVISO DE COOKIES
============================================================= */
.pie-contacto { margin: .6rem 0 0; font-size: .9rem; }
.pie-contacto a { color: inherit; }

.pie-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linea);
}

.enlace-legal {
  padding: 0;
  font: inherit;
  font-size: .88rem;
  color: inherit;
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  opacity: .85;
}

.enlace-legal:hover { opacity: 1; }
.pie-separador { opacity: .4; }
.pie-copia { margin: .9rem 0 0; font-size: .82rem; opacity: .7; }

.aviso-cookies {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 54rem;
  margin: 0 auto;
  padding: 1rem 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: var(--radio, 8px);
  box-shadow: 0 18px 40px -22px rgba(22, 36, 28, .55);
}

.aviso-cookies p { margin: 0; flex: 1; min-width: 16rem; font-size: .92rem; }
.aviso-cookies-botones { display: flex; gap: .6rem; }

.dialogo-legal { width: min(52rem, 94vw); }
.dialogo-legal-cuerpo { overflow: auto; padding: 1.25rem 1.6rem 2rem; line-height: 1.7; }
.dialogo-legal-cuerpo h3 {
  margin: 1.6rem 0 .5rem;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--verde);
}
.dialogo-legal-cuerpo h3:first-child { margin-top: 0; }
.dialogo-legal-cuerpo p { margin: 0 0 .9rem; color: var(--tinta-media); }
.legal-fecha { font-size: .85rem; opacity: .7; }

@media (max-width: 40rem) {
  .aviso-cookies { flex-direction: column; align-items: stretch; }
  .aviso-cookies-botones { justify-content: flex-end; }
}

.acepto {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.45;
}

.acepto input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--verde); }
.acepto-enlaces { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; }