/* =============================================================
   Tienda publica — hoja provisional.

   Tipografia grande a proposito: quien autoriza la compra tiene
   entre 50 y 80 anos. Base de 18px, nunca menos.
============================================================= */

:root {
  --fondo:       #F1F4EE;
  --superficie:  #FFFFFF;
  --tinta:       #16241C;
  --tinta-media: #4A5C51;
  --tinta-suave: #6E7F74;
  --linea:       #D3DCCF;
  --verde:       #1E4A33;
  --verde-claro: #E2EDE5;

  /* Azul cielo: el recuadro donde se arma la compra. Lo pidió
     Enrique para que se distinga de la parte informativa. */
  --cielo:       #1F5C8B;
  --cielo-claro: #E4F1FA;
  --cielo-linea: #B7D6EC;
}

html[data-tema="dark"] {
  --fondo:       #0F1713;
  --superficie:  #17201B;
  --tinta:       #E7EDE6;
  --tinta-media: #AFBEB4;
  --tinta-suave: #8B9C91;
  --linea:       #2A362F;
  --verde:       #7FC49B;
  --verde-claro: #1B2E23;

  --cielo:       #8FC4E8;
  --cielo-claro: #16232E;
  --cielo-linea: #27394B;
}

* { box-sizing: border-box; }

/* El navegador le pone display:none a lo marcado con [hidden],
   pero cualquier regla propia que traiga display se lo gana. Sin
   esta linea, el cajon de la cotizacion —que es flex— se queda
   visible aunque este marcado como oculto. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  /* El tamaño lo decide Enrique desde el panel. */
  font-size: var(--texto-base, 18px);
  line-height: 1.6;
}

.contenedor { max-width: var(--ancho-contenido, 68rem); margin: 0 auto; padding: 0 1.5rem; }

/* --- Encabezado --- */
.encabezado { background: var(--superficie); border-bottom: 1px solid var(--linea); }

.encabezado-interior {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.marca { display: flex; flex-direction: column; }
.marca-nombre { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--verde); }
.marca-mov { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }

.unidades { display: flex; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; }

.unidad {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  padding: .45rem 1rem;
  border: none;
  background: var(--superficie);
  color: var(--tinta-media);
  cursor: pointer;
}

.unidad.activa { background: var(--verde); color: var(--superficie); }
html[data-tema="dark"] .unidad.activa { color: #0F1713; }

/* --- Portada --- */
.intro { padding: 3rem 0 2rem; max-width: 44rem; }
.intro h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0 0 .8rem; letter-spacing: -.02em; }
.intro p { margin: 0; font-size: 1.15rem; color: var(--tinta-media); }

.envio {
  margin-top: 1.2rem !important;
  display: inline-block;
  background: var(--verde-claro);
  color: var(--verde);
  font-weight: 600;
  font-size: 1rem !important;
  padding: .6rem 1rem;
  border-radius: 6px;
}

.titulo-catalogo {
  font-size: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--tinta);
  margin: 2rem 0 1.5rem;
}

/* --- Rejilla de productos --- */
/* Tarjetas anchas a proposito.

   Con tres columnas angostas el bidon quedaba en 126 px y los
   recuadros no cabian a un lado. Enrique pidio el grafico grande
   y los documentos al costado, y eso necesita ancho: dos tarjetas
   por fila en pantalla de escritorio, una en celular. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(29rem, 1fr));
  gap: calc(1.25rem * var(--espaciado, 1));
  padding-bottom: 3rem;
}

.producto {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Las fotos del fabricante son bidones verticales sobre fondo
   blanco. Con "cover" se les corta la etiqueta, que es justo lo
   que el productor quiere leer, asi que van completas. */
/* Altura fija en vez de aspect-ratio: las fotos del fabricante
   son de 2550x3300 px y con proporcion automatica estiraban la
   tarjeta a mil pixeles de alto. */
/* Altura fija, sin grid a proposito: con place-items:center la
   imagen se dimensiona por su contenido y el height:100% de
   abajo deja de aplicar, asi que la foto se desbordaba encima
   del titulo. */
.producto-foto {
  height: 15rem;
  flex: 0 0 15rem;
  background: #FFFFFF;
  padding: .75rem;
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
}

.producto-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sin-foto {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--tinta-suave);
  font-size: .9rem;
}

.producto-cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
.producto-cuerpo h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.01em; }

.sello {
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--verde-claro);
  color: var(--verde);
  padding: .2rem .5rem;
  border-radius: 3px;
}

.producto-resumen { margin: 0; color: var(--tinta-media); }

.producto-actua {
  margin: 0;
  font-size: .92rem;
  color: var(--tinta-suave);
  border-left: 2px solid var(--linea);
  padding-left: .8rem;
}

.presentaciones { list-style: none; margin: .3rem 0 0; padding: 0; border-top: 1px solid var(--linea); }

.presentaciones li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linea);
}

.presentaciones li:last-child { border-bottom: none; }
.pres-medida { color: var(--tinta-media); }
.pres-precio { font-weight: 600; font-variant-numeric: tabular-nums; }

.ficha { color: var(--verde); font-weight: 600; font-size: .95rem; }

.vacio { padding: 3rem 0; text-align: center; color: var(--tinta-suave); }

/* --- Pie --- */
.pie {
  border-top: 1px solid var(--linea);
  background: var(--superficie);
  padding: 1.5rem 0;
  font-size: .9rem;
  color: var(--tinta-suave);
}

.pie p { margin: 0; }

/* =============================================================
   Selector de presentacion — tipo talla

   Enrique fue claro: la gente confunde el precio por litro con el
   precio del bidon. Aqui los dos numeros van juntos, etiquetados,
   y con la multiplicacion escrita en medio para que nadie tenga
   que hacerla de cabeza.
============================================================= */

.producto-encabezado { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.tallas { display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; }

.tallas-titulo {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.tallas-fila { display: flex; gap: .5rem; flex-wrap: wrap; }

.talla {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  min-width: 4.6rem;
  padding: .5rem .7rem;
  border: 1.5px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--tinta-media);
  cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}

.talla:hover:not(:disabled) { border-color: var(--tinta-media); color: var(--tinta); }

.talla.activa {
  border-color: var(--verde);
  background: var(--verde-claro);
  color: var(--verde);
}

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

.talla.agotada {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}

.talla-medida { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.talla-nota { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }

.equivalencia {
  margin: 0;
  font-size: .85rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* --- El bloque de precio: los dos numeros, siempre --- */
.precio {
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  background: var(--fondo);
}

.precio-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.precio-etiqueta { font-size: .85rem; color: var(--tinta-media); }

.precio-cifra {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.precio-cifra-fuerte { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }

.precio-cuenta {
  font-size: .8rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--linea);
}

.precio-total { padding-top: .15rem; }

.ahorro {
  margin: .3rem 0 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--verde);
  background: var(--verde-claro);
  padding: .45rem .6rem;
  border-radius: 4px;
}

.precio-sin { margin: 0; color: var(--tinta-suave); font-style: italic; }

/* --- Documentos --- */
.documentos-fila { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: .2rem; }

.documento-enlace {
  font-size: .85rem;
  font-weight: 600;
  color: var(--verde);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================================================
   Acciones de la tarjeta
============================================================= */
.acciones { display: flex; flex-direction: column; gap: .45rem; margin-top: .2rem; }

.btn-agregar {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: .65rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--verde);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .12s;
}

.btn-agregar:hover:not(:disabled) { background: #2C6B49; }
.btn-agregar:disabled { opacity: .45; cursor: not-allowed; }
html[data-tema="dark"] .btn-agregar { color: #0F1713; }

.btn-cuantos {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: transparent;
  color: var(--tinta-media);
  cursor: pointer;
}

.btn-cuantos:hover { border-color: var(--verde); color: var(--verde); }

/* --- Ayudante de litros --- */
.reparto {
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--fondo);
}

.reparto-campo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .92rem; }
.reparto-campo input { width: 5.5rem; }
.reparto-campo input, .reparto-campo select {
  font: inherit;
  font-size: .95rem;
  padding: .4rem .5rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--superficie);
  color: var(--tinta);
}

.btn-calcular {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .45rem .9rem;
  border: 1px solid var(--verde);
  border-radius: 6px;
  background: transparent;
  color: var(--verde);
  cursor: pointer;
  align-self: flex-start;
}

.reparto-titulo { margin: 0; font-size: .9rem; font-weight: 600; }
.reparto-lista { margin: .3rem 0; padding-left: 1.2rem; font-size: .92rem; color: var(--tinta-media); }
.reparto-aviso { margin: .3rem 0 0; font-size: .85rem; color: var(--tinta-suave); }
.reparto-resultado:empty { display: none; }

/* =============================================================
   Mi cotizacion — cajon lateral
============================================================= */
.encabezado-acciones { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.btn-carrito {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  padding: .45rem .9rem;
  border: 1px solid var(--verde);
  border-radius: 6px;
  background: var(--verde);
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

html[data-tema="dark"] .btn-carrito { color: #0F1713; }

.carrito-cuenta {
  min-width: 1.4rem;
  padding: 0 .3rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .28);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.velo {
  position: fixed;
  inset: 0;
  background: rgba(22, 36, 28, .45);
  z-index: 40;
}

.cajon {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(26rem, 100%);
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  z-index: 50;
  display: flex;
  flex-direction: column;
}

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

.cajon-encabezado h2 { margin: 0; font-size: 1.2rem; }

.cajon-cerrar {
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  color: var(--tinta-media);
  cursor: pointer;
  border-radius: 4px;
}

.cajon-cerrar:hover { background: var(--fondo); color: var(--tinta); }

.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.cajon-vacio, .cajon-error { color: var(--tinta-suave); font-size: .95rem; }
.cajon-error { color: #8C2F2A; }

/* --- Renglones --- */
.renglon { display: grid; grid-template-columns: 4rem 1fr; gap: .85rem; padding: .9rem 0; }
.renglon + .renglon { border-top: 1px solid var(--linea); }

.renglon-foto { background: #FFFFFF; border: 1px solid var(--linea); border-radius: 4px; padding: .25rem; }
.renglon-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.renglon-sinfoto { width: 100%; aspect-ratio: 1; background: var(--fondo); }

.renglon-cuerpo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.renglon-cuerpo h3 { margin: 0; font-size: 1rem; }
.renglon-medida { margin: 0; font-size: .85rem; color: var(--tinta-media); }
.renglon-litro { margin: 0; font-size: .82rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.renglon-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .35rem;
}

.contador { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 5px; }

.contador-btn {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  background: none;
  color: var(--tinta-media);
  cursor: pointer;
}

.contador-btn:hover { background: var(--fondo); color: var(--tinta); }

.contador input {
  width: 2.6rem;
  border: none;
  border-left: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: .92rem;
  text-align: center;
  padding: .25rem 0;
  -moz-appearance: textfield;
}

.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.renglon-importe { font-weight: 700; font-variant-numeric: tabular-nums; }

.renglon-quitar {
  align-self: flex-start;
  font: inherit;
  font-size: .82rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: .2rem;
}

.renglon-quitar:hover { color: #8C2F2A; }

/* --- Pie con totales --- */
.cajon-pie { border-top: 1px solid var(--linea); padding: 1rem 1.25rem 1.25rem; }

.envio-barra {
  height: .4rem;
  border-radius: 1rem;
  background: var(--fondo);
  overflow: hidden;
  margin-bottom: .45rem;
}

.envio-progreso { height: 100%; background: var(--verde); transition: width .25s; }
.envio-falta { margin: 0 0 .8rem; font-size: .88rem; color: var(--tinta-media); }

.envio-listo {
  margin: 0 0 .8rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--verde);
  background: var(--verde-claro);
  padding: .45rem .7rem;
  border-radius: 4px;
}

.totales { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }

.total-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

.total-grande {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tinta);
  padding-top: .5rem;
  border-top: 1px solid var(--linea);
}

.total-usd { margin: .1rem 0 0; font-size: .82rem; color: var(--tinta-suave); }

.btn-continuar {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .8rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--verde);
  color: #FFFFFF;
  cursor: pointer;
}

html[data-tema="dark"] .btn-continuar { color: #0F1713; }

.leyenda-fiscal { margin: .8rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--tinta-suave); }

@media (max-width: 30rem) {
  .cajon { width: 100%; }
}

/* =============================================================
   Calculadora de dosis

   Se arma segun el producto: la pregunta y las unidades salen de
   la dosis que trae cada agroceutico. Si no tiene dosis cargada,
   no aparece.
============================================================= */
.calculadora {
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: var(--fondo);
}

.calc-dosis {
  margin: 0;
  font-size: .88rem;
  color: var(--tinta-media);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--linea);
}

.calc-campo { display: flex; flex-direction: column; gap: .3rem; }

.calc-campo > span { font-size: .88rem; font-weight: 600; color: var(--tinta-media); }

.calc-entrada { display: flex; gap: .4rem; }
.calc-entrada input { flex: 1; min-width: 0; }

.calc-campo input,
.calc-campo select,
.calc-entrada select {
  font: inherit;
  font-size: 1rem;
  padding: .45rem .55rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--superficie);
  color: var(--tinta);
}

.calc-resultado:empty { display: none; }

.calc-resultado {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
}

.calc-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

.calc-linea b { color: var(--tinta); font-weight: 700; }

.calc-titulo {
  margin: .4rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.calc-lista { margin: 0; padding-left: 1.2rem; font-size: .95rem; color: var(--tinta-media); }

.calc-total {
  padding-top: .5rem;
  border-top: 1px solid var(--linea);
  font-size: 1.1rem;
}

/* La cifra con la que compara contra el agroquimico que usa hoy. */
.calc-unitario {
  background: var(--verde-claro);
  color: var(--verde);
  padding: .5rem .7rem;
  border-radius: 4px;
  font-size: .95rem;
}

.calc-unitario b { color: var(--verde); }

.calc-aviso { margin: .2rem 0 0; font-size: .85rem; color: var(--tinta-suave); }

/* =============================================================
   Decisiones de la junta del 7 de septiembre de 2026

   Todo en una sola pagina, separado por recuadros. El bidon
   grande, porque es la figura que el productor agroquimico ya
   reconoce. Letra mas grande y negritas, para lectores de mas
   de 40 anos.
============================================================= */

/* Sin mayusculas forzadas: un hashtag se lee por sus mayusculas
   internas. "#PORUNMEXICOORGANICO" es una pared de letras;
   "#PorUnMéxicoOrgánico" se lee de un golpe. */
.eslogan {
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--verde) !important;
  margin-bottom: .6rem !important;
}

/* --- La sucusion, al inicio --- */
.sucusion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.sucusion h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.sucusion p { margin: 0; font-size: 1.05rem; color: var(--tinta-media); }
.sucusion video { width: 100%; border-radius: 6px; display: block; }

.video-pendiente {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--verde-claro);
  border-radius: 6px;
  color: var(--verde);
  font-weight: 600;
  font-size: .95rem;
}

/* --- La tarjeta en dos recuadros --- */
.bloque-producto { border-bottom: 1px solid var(--linea); }

/* El bidon mas grande: Enrique pidio que el grafico abarque casi
   todo el recuadro, porque es lo que hace que el productor
   reconozca el producto de inmediato. */
.producto-foto { height: 19rem; flex: 0 0 19rem; }

.producto-datos {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.producto-datos h3 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }

.bloque-compra {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  /* Azul cielo: aquí empieza la compra. La parte de arriba —foto,
     descripción y documentos— se queda en blanco. */
  background: var(--cielo-claro);
  border-top: 3px solid var(--cielo-linea);
}

.bloque-compra .precio { background: var(--superficie); border-color: var(--cielo-linea); }
.bloque-compra .calculadora { background: var(--superficie); border-color: var(--cielo-linea); }

/* La presentación elegida, en el mismo azul del recuadro. */
.bloque-compra .talla.activa {
  border-color: var(--cielo);
  background: var(--superficie);
  color: var(--cielo);
}

.bloque-compra .talla:focus-visible { outline-color: var(--cielo); }

/* --- Documentos en botones --- */
.documentos-fila { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .3rem; }

.documento-boton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  padding: .35rem .6rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--superficie);
  color: var(--tinta-media);
  text-decoration: none;
}

.documento-boton:hover { border-color: var(--verde); color: var(--verde); }

.documento-tipo {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  background: var(--verde);
  color: #FFFFFF;
  padding: .1rem .28rem;
  border-radius: 3px;
}

html[data-tema="dark"] .documento-tipo { color: #0F1713; }

.pie-largo { font-weight: 600; color: var(--tinta-media); margin-bottom: .3rem !important; }

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

/* =============================================================
   El bidon con los recuadros a un costado

   Enrique lo pidio asi: el grafico del bidon grande, y los
   recuadros de ficha tecnica, OMRI y hoja de seguridad al lado,
   no debajo. Que el ingeniero vea todo sin hacer un solo clic.
============================================================= */

.bloque-producto { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }

.producto-encabezado { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.producto-visual {
  display: grid;
  grid-template-columns: 1fr 9.5rem;
  gap: .9rem;
  align-items: stretch;
}

.producto-foto {
  height: auto;
  flex: none;
  min-height: 17rem;
  border-bottom: none;
  border: 1px solid var(--linea);
  border-radius: 6px;
}

/* --- Los tres recuadros --- */
.documentos-columna { display: flex; flex-direction: column; gap: .5rem; }

.documento-caja {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  padding: .55rem .65rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie);
  text-decoration: none;
  color: var(--tinta);
  transition: border-color .12s, background-color .12s;
}

a.documento-caja:hover { border-color: var(--verde); background: var(--verde-claro); }

.documento-tipo {
  align-self: flex-start;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--verde);
  color: #FFFFFF;
  padding: .08rem .26rem;
  border-radius: 3px;
  margin-bottom: .15rem;
}

html[data-tema="dark"] .documento-tipo { color: #0F1713; }

.documento-nombre { font-size: .82rem; font-weight: 700; line-height: 1.25; }
.documento-nota { font-size: .72rem; color: var(--tinta-suave); line-height: 1.25; }

/* Un documento que el fabricante todavia no publica. Se muestra
   apagado en vez de esconderlo: asi Enrique ve de un vistazo cual
   le falta pedir, y el cliente no cree que el producto no lo tiene. */
.documento-falta {
  border-style: dashed;
  background: transparent;
  opacity: .5;
}

/* --- Recuadro de descripcion --- */
.recuadro-descripcion {
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .8rem .9rem;
  background: var(--superficie);
}

.recuadro-titulo {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .4rem;
}

.recuadro-descripcion p { margin: 0; font-size: 1rem; }
.recuadro-descripcion p + p { margin-top: .6rem; }

.como-actua {
  font-size: .95rem !important;
  color: var(--tinta-media);
  padding-top: .55rem;
  border-top: 1px solid var(--linea);
}

/* =============================================================
   Filosofia — Por un Mexico organico
============================================================= */
.filosofia {
  border-top: 2px solid var(--tinta);
  padding: 2.5rem 0 3.5rem;
}

.filosofia h2 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin: 0 0 .6rem;
  letter-spacing: -.02em;
}

.filosofia-entrada {
  margin: 0 0 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--verde);
  max-width: 40rem;
}

.filosofia-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.filosofia-bloque {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1.2rem;
}

.filosofia-bloque h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.filosofia-bloque p { margin: 0; font-size: .98rem; color: var(--tinta-media); }

@media (max-width: 34rem) {
  .producto-visual { grid-template-columns: 1fr; }
  .documentos-columna { flex-direction: row; flex-wrap: wrap; }
  .documento-caja { flex: 1 1 8rem; }
}

/* =============================================================
   Logotipo

   El nombre de la marca manda en la portada y el movimiento pasa
   a etiqueta, como se pidio. Mientras no haya archivo de logo se
   ve el nombre escrito, para que la portada nunca quede vacia.
============================================================= */
.logo-portada {
  display: block;
  /* Más grande en la portada: es lo primero que ve quien entra. */
  max-width: min(34rem, 100%);
  height: auto;
  margin-bottom: 1.1rem;
}

.marca { flex-direction: row; align-items: center; gap: .75rem; }
.marca-texto { display: flex; flex-direction: column; }

.logo-encabezado {
  height: 3rem;
  width: auto;
  display: block;
}

/* El eslogan va DEBAJO del nombre, como etiqueta del movimiento. */
.intro .eslogan {
  margin-top: .5rem !important;
  margin-bottom: 1.1rem !important;
}

/* =============================================================
   Las dos secciones del catalogo

   El selector va hasta arriba para que el productor escoja en
   cual quiere estar antes de ponerse a mirar producto por
   producto.
============================================================= */
.secciones {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.seccion-tab {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem;
  border: 1.5px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta-media);
  cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}

.seccion-tab:hover { border-color: var(--tinta-media); color: var(--tinta); }

.seccion-tab.activa {
  border-color: var(--verde);
  background: var(--verde);
  color: #FFFFFF;
}

html[data-tema="dark"] .seccion-tab.activa { color: #0F1713; }

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

.seccion-nombre { font-size: 1.02rem; font-weight: 700; }

.seccion-cuenta {
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: .1rem .45rem;
  border-radius: 1rem;
  background: var(--verde-claro);
  color: var(--verde);
}

.seccion-tab.activa .seccion-cuenta {
  background: rgba(255, 255, 255, .25);
  color: inherit;
}

.seccion-nota {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: var(--tinta-media);
  max-width: 46rem;
}