/* =====================================================================
   portal.css  ·  la cara de veloni-vzla.com

   Sin librerias, sin tipografias de afuera, sin build. La misma manera en
   que esta hecho el tablero, por la misma razon: una pagina que no pide
   nada a otro servidor carga en el campo, con mala senal, y no se rompe
   el dia que el servidor de la libreria cambie algo.

   Los verdes estan medidos para que se distingan tambien con daltonismo:
   el oscuro y el claro quedan a buena distancia uno del otro y los dos
   contra el fondo.
   ===================================================================== */

:root {
  --f: #FAFAF7;            /* el fondo */
  --s: #FFFFFF;            /* la superficie de una tarjeta */
  --s2: #F1F3EE;           /* superficie hundida */
  --b: #DCE2D8;            /* los bordes */
  --t: #15201A;            /* letra principal */
  --t2: #5A6960;           /* letra secundaria */
  --t3: #8A968E;           /* letra apagada */
  --v1: #1F6B2A;           /* verde Veloni, el que manda */
  --v2: #51C409;           /* mazorca, el acento */
  --or: #9A7B06;           /* oro */
  --ok: #1F6B2A;
  --ma: #B3261E;           /* lo que esta mal */
  --av: #8A5A00;           /* lo que avisa */
  --so: 0 1px 2px rgba(20,32,25,.07), 0 4px 14px rgba(20,32,25,.05);
  --r: 14px;
  --an: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --f: #0E1310; --s: #161C17; --s2: #1D241E; --b: #2B342C;
    --t: #E8EFE9; --t2: #A3B0A6; --t3: #78857B;
    --v1: #2F9B5E; --v2: #78C52F; --or: #C07C20;
    --ok: #2F9B5E; --ma: #F2B8B5; --av: #E0A33A;
    --so: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  }
}
:root[data-tema="oscuro"] {
  --f: #0E1310; --s: #161C17; --s2: #1D241E; --b: #2B342C;
  --t: #E8EFE9; --t2: #A3B0A6; --t3: #78857B;
  --v1: #2F9B5E; --v2: #78C52F; --or: #C07C20;
  --ok: #2F9B5E; --ma: #F2B8B5; --av: #E0A33A;
  --so: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

/* display:flex en una clase le gana al atributo hidden, y el nombre de
   la marca —que es solo el repuesto por si la imagen no carga— salia
   encima del logotipo. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--f);
  color: var(--t);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}

a { color: var(--v1); }

.salto {
  position: absolute; left: -9999px; top: 0; background: var(--v1); color: #fff;
  padding: 10px 14px; z-index: 50; border-radius: 0 0 8px 0;
}
.salto:focus { left: 0; }

/* --- la cabecera --------------------------------------------------- */
.cab {
  position: sticky; top: 0; z-index: 30;
  background: var(--s); border-bottom: 1px solid var(--b);
  padding: 0 16px; padding-top: env(safe-area-inset-top);
}
.cabDentro {
  max-width: var(--an); margin: 0 auto; min-height: 64px;
  display: flex; align-items: center; gap: 14px;
}

/* El logotipo es ancho (600x193). Se le manda el ALTO y el ancho sale
   solo: asi nunca se aplasta. Nada de meterlo en un cuadrado. */
.marca { display: flex; align-items: center; text-decoration: none; color: inherit; }
.marca img { height: 34px; width: auto; display: block; }
.marcaTx { display: flex; flex-direction: column; line-height: 1.1; }
.marcaTx b { font-size: 19px; letter-spacing: .04em; }
.marcaTx i { font-style: normal; font-size: 11.5px; color: var(--t2);
  letter-spacing: .09em; text-transform: uppercase; }

/* En oscuro las letras del logotipo son negras y desaparecerian contra
   el fondo. Se le pone una bandeja blanca en vez de invertirlo: invertir
   le cambiaria el verde y el amarillo de la mazorca, que son la marca. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca img {
    background: #fff; padding: 5px 9px; border-radius: 9px;
  }
}
:root[data-tema="oscuro"] .marca img {
  background: #fff; padding: 5px 9px; border-radius: 9px;
}

.cabNav { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.nb {
  appearance: none; border: 0; background: none; color: var(--t2);
  font: inherit; font-size: 15px; padding: 9px 13px; border-radius: 9px;
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; gap: 7px; white-space: nowrap;
}
.nb:hover { background: var(--s2); color: var(--t); }
.nb.on { background: var(--s2); color: var(--v1); font-weight: 700; }
.nb b { background: var(--v1); color: #fff; border-radius: 99px; font-size: 11.5px;
        min-width: 19px; height: 19px; display: inline-grid; place-items: center; padding: 0 5px; }
.nbp { background: var(--v1); color: #fff; font-weight: 700; }
.nbp:hover { background: var(--v1); color: #fff; filter: brightness(1.08); }

/* Las tres rayitas. Solo en telefono: en la computadora caben todos. */
.cabX {
  margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--b);
  background: var(--s); border-radius: 10px; cursor: pointer; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.cabX span { width: 18px; height: 2px; background: var(--t); border-radius: 2px; }

@media (min-width: 760px) {
  .cabDentro { min-height: 82px; gap: 20px; }
  .marca img { height: 46px; }
  .nb { font-size: 15.5px; padding: 10px 15px; }
}

@media (max-width: 759px) {
  .cabX { display: flex; }
  .cabNav {
    display: none; order: 3; width: 100%; margin: 0 0 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
  }
  .cabNav.abierto { display: flex; }
  .cabNav .nb { justify-content: flex-start; padding: 13px 14px; font-size: 16px; }
  .cabNav .nbp { justify-content: center; margin-top: 6px; }
  .cabDentro { flex-wrap: wrap; }
}

/* --- el cuerpo ------------------------------------------------------ */
.cuerpo { flex: 1; width: 100%; max-width: var(--an); margin: 0 auto; padding: 22px 16px 48px; }
/* La pagina de producto respira mas ancho que el resto: lleva foto
   grande a un lado y ficha al otro. Si el navegador no entiende :has,
   se queda con el ancho normal y no se rompe nada. */
@media (min-width: 1240px) { .cuerpo:has(.pDos) { max-width: 1280px; } }
@media (min-width: 1420px) { .cuerpo:has(.pDos) { max-width: 1400px; } }
.cargando { color: var(--t3); padding: 60px 0; text-align: center; }

h1 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 30px 0 12px; }
h3 { font-size: 16px; margin: 0 0 6px; }
.sub { color: var(--t2); margin: 0 0 22px; max-width: 62ch; }
.chico { font-size: 13px; color: var(--t3); }

/* --- el carrusel de arriba ------------------------------------------
   Tres laminas que se turnan solas. Esta escrito a mano por la misma
   razon que todo lo demas: una libreria de carruseles pesa mas que toda
   esta pagina junta, y esto lo abre un agricultor con mala senal.
   Se para solo cuando alguien pone el dedo encima o le da al foco, y no
   se mueve nunca si el telefono pide menos animacion. -------------- */
.car {
  position: relative; border-radius: var(--r); overflow: hidden;
  margin: 0 0 26px; background: var(--v1); color: #fff;
  box-shadow: 0 10px 30px rgba(20,32,25,.14);
}
.carPista { display: grid; }
.carLam {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center;
  padding: 34px 26px; min-height: 290px;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.carLam.on { opacity: 1; pointer-events: auto; }
.carLam::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--v1) 0%,
              color-mix(in oklab, var(--v1) 62%, var(--v2)) 100%);
}
.carLam.b::before {
  background: linear-gradient(135deg,
              color-mix(in oklab, var(--v1) 80%, #000) 0%, var(--v1) 100%);
}
.carLam.c::before {
  background: linear-gradient(135deg, var(--v1) 0%,
              color-mix(in oklab, var(--or) 55%, var(--v1)) 100%);
}
.carLam > * { position: relative; z-index: 1; }
.carEt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; opacity: .85; margin: 0 0 10px;
}
.carLam h2 {
  margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.02em;
  color: #fff; max-width: 17ch; text-wrap: balance;
}
.carLam p { margin: 12px 0 0; opacity: .94; max-width: 48ch; font-size: 15.5px; }
.carBot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hb {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.34);
  padding: 11px 18px; border-radius: 10px; font: inherit; font-size: 15px;
  cursor: pointer; text-decoration: none; font-weight: 500;
}
.hb:hover { background: rgba(255,255,255,.26); }
.hb.lleno { background: #fff; color: var(--v1); font-weight: 700; border-color: #fff; }

.carPuntos {
  position: absolute; left: 26px; bottom: 18px; z-index: 2;
  display: flex; gap: 8px;
}
.carPuntos button {
  width: 30px; height: 4px; border-radius: 99px; border: 0; padding: 0;
  background: rgba(255,255,255,.4); cursor: pointer;
}
.carPuntos button.on { background: #fff; }
.carPuntos button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 760px) {
  .carLam { padding: 48px 44px; min-height: 340px; }
  .carLam h2 { font-size: 38px; }
  .carLam p { font-size: 16.5px; }
  .carPuntos { left: 44px; bottom: 24px; }
}

/* --- la franja de por que aqui -------------------------------------- */
.franja {
  display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 30px;
}
@media (min-width: 620px) { .franja { grid-template-columns: repeat(3, 1fr); } }
.fr {
  background: var(--s); border: 1px solid var(--b); border-radius: var(--r);
  padding: 18px 20px;
}
.fr b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.fr span { color: var(--t2); font-size: 14px; }

/* --- como se compra -------------------------------------------------- */
.pasos { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0 0 10px; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.ps {
  background: var(--s); border: 1px solid var(--b); border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; gap: 6px;
}
.ps i {
  font-style: normal; width: 30px; height: 30px; border-radius: 99px;
  background: var(--v1); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 14.5px; margin-bottom: 4px;
}
.ps b { font-size: 15.5px; }
.ps span { color: var(--t2); font-size: 14px; }

.secTit {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 34px 0 14px;
}
.secTit h2 { margin: 0; }
.secTit span { color: var(--t2); font-size: 14px; }

/* --- buscar y las familias ------------------------------------------ */
.filtros { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
.busca { position: relative; }
.busca input {
  width: 100%; padding: 12px 14px; font: inherit; border-radius: 11px;
  border: 1px solid var(--b); background: var(--s); color: var(--t);
}
.busca input:focus { outline: 2px solid var(--v1); outline-offset: 1px; border-color: var(--v1); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  appearance: none; border: 1px solid var(--b); background: var(--s); color: var(--t2);
  font: inherit; font-size: 13.5px; padding: 7px 13px; border-radius: 99px; cursor: pointer;
}
.chip:hover { border-color: var(--v1); color: var(--t); }
.chip.on { background: var(--v1); border-color: var(--v1); color: #fff; font-weight: 600; }

/* --- la rejilla de productos ---------------------------------------- */
.rej { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rej { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .rej { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .rej { grid-template-columns: repeat(4, 1fr); } }

.prod {
  background: var(--s); border: 1px solid var(--b); border-radius: var(--r);
  box-shadow: var(--so); overflow: hidden; display: flex; flex-direction: column;
  text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.prod:hover { border-color: var(--v1); }
.prod:focus-visible { outline: 2px solid var(--v1); outline-offset: 2px; }
.prodFoto {
  aspect-ratio: 4 / 3; background: var(--s2); display: grid; place-items: stretch;
  border: 0; border-bottom: 1px solid var(--b); overflow: hidden; padding: 6px;
  cursor: pointer; width: 100%;
}
/* contain y no cover: la foto entra ENTERA y deja franja a los lados. Un
   envase recortado por abajo no se reconoce. */
.prodFoto img {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  object-fit: contain; display: block;
}
.prodFoto span { align-self: center; justify-self: center; }
.prodFoto span { color: var(--t3); font-size: 12.5px; letter-spacing: .08em; }
.prodT { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prodT .mar { font-weight: 700; font-size: 16.5px; }
.prodT .mol { color: var(--t2); font-size: 13.5px; }
.prodT .pres { color: var(--t3); font-size: 13px; }
.prodT .cul { color: var(--t3); font-size: 12.5px; margin-top: 2px; }
.prodPie {
  padding: 11px 14px; border-top: 1px solid var(--b); background: var(--s2);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.precio { font-weight: 800; font-size: 16px; }
.precio i { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--t2); }
.sinprecio { font-size: 12.5px; color: var(--t2); }

.eti {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; border: 1px solid;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.eti::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.eti.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); }
.eti.cam { color: var(--or); border-color: color-mix(in oklab, var(--or) 40%, transparent); }
.eti.reg { color: var(--t2); border-color: var(--b); }
.eti.ago { color: var(--ma); border-color: color-mix(in oklab, var(--ma) 40%, transparent); }

/* --- tarjetas y formularios ----------------------------------------- */
.caja {
  background: var(--s); border: 1px solid var(--b); border-radius: var(--r);
  box-shadow: var(--so); padding: 22px; margin: 0 0 18px;
}
.caja.angosta { max-width: 460px; margin-left: auto; margin-right: auto; }
.dosc { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .dosc { grid-template-columns: 1fr 1fr; } }

.c { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.c label { font-size: 13.5px; font-weight: 600; color: var(--t2); }
.c input, .c select, .c textarea {
  font: inherit; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--b); background: var(--f); color: var(--t); width: 100%;
}
.c input:focus, .c select:focus, .c textarea:focus {
  outline: 2px solid var(--v1); outline-offset: 1px; border-color: var(--v1);
}
.c textarea { min-height: 86px; resize: vertical; }
.ayuda { font-size: 12.5px; color: var(--t3); margin: 4px 0 0; }

.b {
  appearance: none; border: 0; border-radius: 11px; background: var(--v1); color: #fff;
  font: inherit; font-weight: 700; padding: 13px 18px; cursor: pointer; width: 100%;
}
.b:hover { filter: brightness(1.07); }
.b:disabled { opacity: .55; cursor: default; filter: none; }
.b2 { background: var(--s2); color: var(--t); border: 1px solid var(--b); }
.b3 { background: none; color: var(--v1); border: 1px solid var(--v1); }
.bm { width: auto; padding: 9px 14px; font-size: 14.5px; }

.al, .bien, .nota {
  border-radius: 11px; padding: 12px 14px; margin: 0 0 16px; font-size: 14.5px;
  border: 1px solid;
}
.al { background: color-mix(in oklab, var(--ma) 10%, var(--s)); border-color: color-mix(in oklab, var(--ma) 35%, transparent); }
.bien { background: color-mix(in oklab, var(--ok) 10%, var(--s)); border-color: color-mix(in oklab, var(--ok) 35%, transparent); }
.nota { background: var(--s2); border-color: var(--b); color: var(--t2); }

/* --- tablas y listas ------------------------------------------------ */
.tabCaja { overflow-x: auto; border: 1px solid var(--b); border-radius: var(--r); background: var(--s); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--b); white-space: nowrap; }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--t2); background: var(--s2); }
tbody tr:last-child td { border-bottom: 0; }
td.der, th.der { text-align: right; }
.venc { color: var(--ma); font-weight: 700; }

.cifras { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0 0 20px; }
@media (min-width: 560px) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cif { background: var(--s); border: 1px solid var(--b); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--so); }
.cif span { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--t2); }
.cif b { display: block; font-size: 25px; margin-top: 4px; letter-spacing: -.01em; }
.cif .mal { color: var(--ma); }

/* --- el pedido que se va armando ------------------------------------ */
.carro {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30;
  max-width: calc(var(--an) - 32px); margin: 0 auto;
  background: var(--v1); color: #fff; border-radius: 13px; padding: 13px 16px;
  box-shadow: 0 6px 26px rgba(0,0,0,.26);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
}
.carro span { font-size: 14.5px; }
.carro b { font-size: 16.5px; }
.carro button {
  background: #fff; color: var(--v1); border: 0; border-radius: 10px;
  font: inherit; font-weight: 700; padding: 10px 16px; cursor: pointer; white-space: nowrap;
}

.cant { display: flex; align-items: center; gap: 0; }
.cant button {
  width: 36px; height: 36px; border: 1px solid var(--b); background: var(--s);
  color: var(--t); font: inherit; font-size: 18px; cursor: pointer; line-height: 1;
}
.cant button:first-child { border-radius: 9px 0 0 9px; }
.cant button:last-child { border-radius: 0 9px 9px 0; }
.cant input {
  width: 58px; height: 36px; text-align: center; font: inherit;
  border: 1px solid var(--b); border-left: 0; border-right: 0;
  background: var(--f); color: var(--t);
}

/* --- los renglones del pedido --------------------------------------- */
/* Renglones y no tabla: en un telefono una tabla de cinco columnas se va
   de lado y lo primero que desaparece es el total. */
.lineas { background: var(--s); border: 1px solid var(--b); border-radius: var(--r); overflow: hidden; }
.linea {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--b);
}
.linea:last-child { border-bottom: 0; }
.lnQue { display: flex; flex-direction: column; gap: 2px; flex: 1 1 190px; min-width: 0; }
.lnQue b { font-size: 15.5px; }
.lnCuanto { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lnTot { font-weight: 700; min-width: 86px; text-align: right; }
.lnTot.grande { font-size: 21px; }
.lnFin { background: var(--s2); }

/* --- la ficha de un producto ---------------------------------------- */
.fichaDos { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .fichaDos { grid-template-columns: 420px 1fr; align-items: start; } }
.fichaFoto {
  background: var(--s); border: 1px solid var(--b); border-radius: var(--r);
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
}
.fichaFoto { padding: 14px; }
.fichaFoto img { width: 100%; height: 100%; object-fit: contain; }
.fichaFoto span { color: var(--t3); font-size: 13px; }
.dat { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--b); }
.dat:last-child { border-bottom: 0; }
.dat i { font-style: normal; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--t2); }
.dat b { font-weight: 600; }

/* --- el pie --------------------------------------------------------- */
.pie { border-top: 1px solid var(--b); background: var(--s); padding: 32px 16px; margin-top: auto; }
.pieDentro {
  max-width: var(--an); margin: 0 auto; color: var(--t2); font-size: 14.5px;
  display: grid; gap: 22px; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pieDentro { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.pieCol b { display: block; color: var(--t); font-size: 15px; margin-bottom: 7px; }
.pieCol p { margin: 0; }

/* --- el cartelito que aparece y se va ------------------------------- */
.aviso {
  position: fixed; left: 50%; transform: translate(-50%, 24px);
  bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 60;
  background: var(--t); color: var(--f); padding: 12px 18px; border-radius: 11px;
  font-size: 14.5px; max-width: calc(100vw - 32px); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 6px 26px rgba(0,0,0,.3);
}
.aviso.se-ve { opacity: 1; transform: translate(-50%, 0); }
.aviso.mal { background: var(--ma); color: #fff; }

.vacio { text-align: center; color: var(--t3); padding: 46px 20px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- la pagina de un producto ---------------------------------------
   Dos columnas en la computadora y una en el telefono. La galeria queda
   pegada mientras se rueda: en la computadora el cliente lee la ficha
   con el envase a la vista, que es como se decide una compra. */
.migas { font-size: 13.5px; color: var(--t2); margin: 0 0 18px; }
.migas a { color: var(--t2); text-decoration: none; }
.migas a:hover { color: var(--v1); text-decoration: underline; }
.migas span { color: var(--t3); margin: 0 2px; }

/* La foto manda. Quien entra a un producto entra a VERLO, y una foto
   metida en una esquina no vende nada. La columna de la foto se lleva
   mas de la mitad del ancho y el marco es casi cuadrado, que es la
   forma del envase: asi la bolsa llena el marco en vez de quedar
   flotando en el medio con franjas a los lados. */
.pDos { display: grid; gap: 26px; grid-template-columns: 1fr; margin: 0 0 10px; }
@media (min-width: 880px) {
  .pDos { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: start; }
  .pGal { position: sticky; top: 100px; }
}
/* De 1240 para arriba la foto se lleva una vez y media la ficha. En una
   pantalla normal el envase pasa de 570 pixeles de ancho a cerca de 750:
   el doble de superficie. Es lo que se viene a ver. */
@media (min-width: 1240px) {
  .pDos { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 40px; }
}

.pGalGrande {
  background: var(--s); border: 1px solid var(--b); border-radius: var(--r);
  aspect-ratio: 6 / 5; display: grid; place-items: stretch; overflow: hidden; padding: 10px;
}
/* La foto SE ESTIRA al marco entero y despues object-fit la encoge hasta
   que entra. Un max-height en porcentaje no sirve aqui: el alto del
   marco lo pone el aspect-ratio, el porcentaje no tiene contra que
   medirse, el navegador lo ignora y el envase sale partido por abajo.
   Estirando y dejando que contain haga el trabajo, siempre entra entera. */
.pGalGrande img {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  object-fit: contain; display: block;
}
.pGalGrande span { color: var(--t3); font-size: 13px; letter-spacing: .08em;
  align-self: center; justify-self: center; }
.pGalTiras { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pTira {
  width: 94px; height: 78px; padding: 5px; border-radius: 10px; cursor: pointer;
  background: var(--s); border: 1px solid var(--b); display: grid; place-items: center;
}
@media (min-width: 1240px) { .pTira { width: 112px; height: 92px; } }
.pTira img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pTira.on { border-color: var(--v1); box-shadow: 0 0 0 1px var(--v1); }
/* En el telefono cuatro miniaturas de 94 no caben y se van a dos
   renglones. Achicandolas entran las cuatro en una sola linea. */
@media (max-width: 479px) {
  .pGalTiras { gap: 8px; }
  .pTira { width: 79px; height: 66px; }
}
.pGalPie { margin: 9px 0 0; font-size: 13px; color: var(--t2); }

.pFicha h1 { font-size: 29px; margin: 0 0 4px; }
@media (min-width: 880px) { .pFicha h1 { font-size: 34px; } }
.pMol { margin: 0 0 14px; color: var(--t2); font-size: 16px; }
.pDesc { margin: 16px 0 18px; font-size: 15.5px; color: var(--t); max-width: 56ch; }
.pSub { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--t2); }

/* Los sellos: estatus, registro y banda de toxicidad. */
.sellos { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.sello {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--b); color: var(--t2); background: var(--s); white-space: nowrap;
}
.sello.tox { border-color: color-mix(in oklab, var(--or) 45%, transparent); color: var(--or); }
.sello.tox.fuerte { border-color: color-mix(in oklab, var(--ma) 45%, transparent); color: var(--ma); }

/* Las otras presentaciones de la misma formula. */
.pHer { display: flex; gap: 9px; flex-wrap: wrap; }
.pHer button {
  background: var(--s); border: 1px solid var(--b); border-radius: 11px;
  padding: 10px 14px; cursor: pointer; font: inherit; font-size: 14.5px;
  color: var(--t); display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
.pHer button:hover { border-color: var(--v1); }
.pHer button span { font-size: 12.5px; color: var(--t2); }

.pPrecio {
  background: var(--s); border: 1px solid var(--b); border-radius: var(--r);
  padding: 20px; margin: 22px 0 0; box-shadow: var(--so);
}
.pPrecio .precio { font-size: 30px; }
.pPrecio .precio i { font-size: 14px; }
.pPrecioOff { background: var(--s2); box-shadow: none; }
.pPrecioOff b { display: block; font-size: 16.5px; margin-bottom: 5px; }
.pPrecioOff p { margin: 0; color: var(--t2); font-size: 14.5px; }
.pCom { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

/* --- la ficha tecnica, plegable ------------------------------------- */
.plie { background: var(--s); border: 1px solid var(--b); border-radius: var(--r); overflow: hidden; }
.plie details { border-bottom: 1px solid var(--b); }
.plie details:last-child { border-bottom: 0; }
.plie summary {
  cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 15.5px;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.plie summary::-webkit-details-marker { display: none; }
.plie summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--t2); border-bottom: 2px solid var(--t2);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.plie details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.plie summary:hover { background: var(--s2); }
.plie details > div { padding: 0 18px 18px; }
.plie p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; max-width: 72ch; }
.plie p:last-child { margin-bottom: 0; }
.plie .pLista { color: var(--t); }