/* ===========================================================================
   La Huerta — hoja de estilo del sitio publico.
   Verde de montaña + crema, esquinas redondeadas, todo pensado para el celular
   primero: la mayoria de los clientes entran desde un telefono con señal regular.
   =========================================================================== */

@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('fuentes/nunito-600.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('fuentes/nunito-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('fuentes/nunito-800.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fuentes/nunito-sans-400.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fuentes/nunito-sans-600.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fuentes/nunito-sans-700.woff2') format('woff2')}

:root{
  /* Marca — muestreados del afiche original, no cambiar a ojo */
  --verde-hondo:#1F4026;
  --verde:#316A30;
  /* El afiche usa #63A030 en las pastillas de precio, pero con texto blanco da
     3.2:1 y aquí el precio se lee a 18px. Lo bajamos a este verde de la misma
     familia, que llega a 5.1:1 y se sigue viendo igual de la marca. */
  --verde-claro:#457B22;
  --verde-afiche:#63A030;    /* el original, solo para adornos sin texto */
  --lima:#8CC247;            /* decorativo, nunca texto */
  --lima-lavada:#EDF5E0;
  --hielo:#A8DAF2;
  --hielo-lavado:#EAF6FD;

  /* Neutros */
  --crema:#FBFBF6;
  --blanco:#FFFFFF;
  --tinta:#1B2A1F;
  --tinta-suave:#47574B;
  --tinta-tenue:#5E6E62;     /* 5.4:1 en blanco: alcanza para texto pequeño */
  --linea:#E3E8DD;
  --linea-suave:rgba(31,64,38,.09);

  /* Estados */
  --alerta:#B3261E;        --alerta-fondo:#FCEDEC;  --alerta-linea:#F0C8C5;
  --aviso:#7A5200;         --aviso-fondo:#FFF6E3;   --aviso-linea:#EEDCB4;
  --exito:#1F6B3B;         --exito-fondo:#E7F3EB;   --exito-linea:#BFDFCB;

  /* Formas */
  --curva:18px; --curva-ch:12px; --pastilla:999px;
  --sombra:0 6px 20px rgba(31,64,38,.07);
  --sombra-alta:0 14px 36px rgba(31,64,38,.14);

  /* Espaciado estandar */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;

  --titulo:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ancho:1180px;
  --barra-carrito:0px;   /* lo sube el JS cuando hay carrito, para no tapar nada */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font:400 16px/1.6 var(--texto);
  padding-bottom:var(--barra-carrito);
}

h1,h2,h3,h4{font-family:var(--titulo);font-weight:800;line-height:1.15;margin:0;color:var(--verde-hondo)}
h1{font-size:clamp(1.75rem,5vw,2.6rem)}
h2{font-size:clamp(1.35rem,4vw,1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 var(--e3)}
a{color:var(--verde);text-underline-offset:3px}
img{max-width:100%;display:block}

:focus-visible{outline:3px solid var(--verde);outline-offset:2px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:16px}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ cabecera */

.cabecera{background:var(--crema);border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:30}
.cabecera__fila{display:flex;align-items:center;gap:var(--e4);
  min-height:64px;justify-content:space-between}
.cabecera__logo img{height:40px;width:auto}
@media (min-width:768px){.cabecera__logo img{height:52px}}

.wa-boton{display:inline-flex;align-items:center;gap:8px;
  background:var(--verde-hondo);color:#fff;text-decoration:none;
  font-family:var(--titulo);font-weight:700;font-size:.95rem;
  padding:10px 16px;border-radius:var(--pastilla);min-height:44px;
  transition:background .2s ease,transform .2s ease}
.wa-boton:hover{background:var(--verde)}
.wa-boton:active{transform:scale(.97)}
.wa-boton svg{width:20px;height:20px;flex:none;fill:currentColor}
.wa-boton__texto{display:none}
@media (min-width:560px){.wa-boton__texto{display:inline}}

/* ---------------------------------------------------------------------- hero */

.hero{position:relative;overflow:hidden;background:var(--crema);
  padding:var(--e6) 0 var(--e5)}
.hero::before{content:'';position:absolute;inset:auto -10% 0 auto;
  width:min(520px,70vw);aspect-ratio:1;background:var(--lima);opacity:.16;
  border-radius:50%;transform:translate(28%,42%);pointer-events:none}
.hero__inner{position:relative}
.hero__etiqueta{display:inline-block;background:var(--lima-lavada);color:var(--verde-hondo);
  font-family:var(--titulo);font-weight:700;font-size:.85rem;letter-spacing:.02em;
  padding:6px 14px;border-radius:var(--pastilla);margin-bottom:var(--e3)}
.hero__lema{font-size:1.05rem;color:var(--tinta-suave);max-width:46ch;margin-top:var(--e3)}
.hero__zonas{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4);
  font-size:.9rem;color:var(--tinta-suave)}
.hero__zonas span{background:#fff;border:1px solid var(--linea);
  padding:4px 12px;border-radius:var(--pastilla)}

/* --------------------------------------------------------------------- pasos */

.pasos{background:var(--lima-lavada);border-radius:var(--curva);
  padding:var(--e5) var(--e4);margin:var(--e5) 0}
.pasos h2{text-align:center;font-size:1.25rem;margin-bottom:var(--e4)}
.pasos__lista{display:grid;gap:var(--e4);grid-template-columns:1fr;
  list-style:none;margin:0;padding:0;counter-reset:paso}
@media (min-width:700px){.pasos__lista{grid-template-columns:repeat(3,1fr)}}
.pasos__item{display:flex;gap:var(--e3);align-items:flex-start;
  font-size:.95rem;color:var(--tinta-suave)}
.pasos__num{flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--verde-hondo);color:#fff;display:grid;place-items:center;
  font-family:var(--titulo);font-weight:800;font-size:.95rem}
.pasos__item b{display:block;color:var(--verde-hondo);font-family:var(--titulo);font-size:1rem}

/* ------------------------------------------------------- buscar y categorias

   El catalogo puede tener cuarenta productos. Buscando por nombre se llega de
   una. Las categorias se acomodan en varias lineas, nunca se deslizan de lado
   (Julian lo rechaza). En tableta y PC caben en una linea y la tira se queda
   pegada arriba; en el celular ocuparia media pantalla, asi que no se pega.
   ---------------------------------------------------------------------- */

.buscar{position:relative;display:flex;align-items:center;margin-top:var(--e5)}
.buscar__lupa{position:absolute;left:14px;width:20px;height:20px;pointer-events:none;
  fill:none;stroke:var(--tinta-tenue);stroke-width:2;stroke-linecap:round}
/* Va con [type=search] a propósito: si no, la regla general de los campos
   —que está más abajo— le gana y la lupa termina encima de la primera letra. */
.buscar input[type=search]{width:100%;min-height:50px;padding-left:44px;padding-right:46px;
  border-radius:var(--pastilla);background:#fff}
.buscar input::-webkit-search-cancel-button{display:none}
.buscar__limpiar{position:absolute;right:6px;width:40px;height:40px;border:0;background:none;
  color:var(--tinta-suave);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:50%}
.buscar__limpiar:hover{background:var(--lima-lavada);color:var(--verde-hondo)}
.buscar__limpiar[hidden]{display:none}

.tira{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--e3);
  padding:8px 16px;margin-inline:-16px;background:var(--crema)}
@media (min-width:768px){
  .tira{position:sticky;top:64px;z-index:20;box-shadow:0 1px 0 var(--linea)}
}
/* Las pastillas no se parten ni se aplastan: la que no cabe baja de linea. */
.tira__chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:0 16px;border-radius:var(--pastilla);background:#fff;border:1px solid var(--linea);
  color:var(--verde-hondo);text-decoration:none;white-space:nowrap;
  font-family:var(--titulo);font-weight:700;font-size:.9rem}
.tira__chip span{color:var(--tinta-tenue);font-weight:600;font-size:.82rem}
.tira__chip:hover{border-color:var(--verde-claro);background:var(--lima-lavada)}
.tira__chip--aqui{background:var(--verde-hondo);border-color:var(--verde-hondo);color:#fff}
.tira__chip--aqui span{color:var(--lima)}
.tira__chip[hidden]{display:none}

.nada-busca{margin-top:var(--e5);padding:var(--e4);border-radius:var(--curva);
  background:#fff;border:1px solid var(--linea);color:var(--tinta-suave);text-align:center}
.nada-busca[hidden]{display:none}

/* --------------------------------------------------------- franja categoria */

/* Al saltar desde la tira, la franja queda justo debajo de la cabecera (y de
   la tira, donde esta va pegada) y no tapada. */
.categoria{margin-top:var(--e5);scroll-margin-top:80px}
@media (min-width:768px){.categoria{scroll-margin-top:132px}}
.categoria[hidden]{display:none}
.categoria__franja{background:var(--verde-hondo);color:#fff;
  border-radius:var(--curva);padding:var(--e3) var(--e4);
  display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.categoria__franja h2{color:#fff;font-size:clamp(1.15rem,3.5vw,1.7rem);margin:0}
.categoria__cuenta{color:var(--lima);font-family:var(--titulo);font-weight:700;font-size:.85rem}

/* ------------------------------------------------------------- rejilla y ficha */

.rejilla{display:grid;gap:10px;margin-top:var(--e3);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.rejilla{gap:var(--e5);margin-top:var(--e4);
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}

.ficha{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--curva);
  padding:var(--e3);display:flex;flex-direction:column;position:relative;
  box-shadow:var(--sombra);transition:box-shadow .2s ease,transform .2s ease}
@media (hover:hover){.ficha:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}}
.ficha--congelada{background:var(--hielo-lavado);border-color:#C9E6F6}

/* El alto va SIEMPRE por la proporcion. El atributo height="240" del HTML
   —que esta ahi para que no salte la pagina mientras carga— le ganaba al
   aspect-ratio, y en el celular cada foto medía 240px: dos productos por
   pantalla y a deslizar. */
.ficha__foto{aspect-ratio:4/3;width:100%;height:auto;object-fit:contain;
  background:#fff;border-radius:var(--curva-ch);margin-bottom:var(--e3)}
/* Las fotos siempre sobre blanco, tambien en las tarjetas de congelados:
   los recortes traen fondo blanco y se veria un recuadro raro sobre el azul. */
.ficha__foto--vacia{display:grid;place-items:center;color:var(--tinta-tenue);
  border:1px dashed var(--linea);font-size:.8rem}

.ficha__nombre{font-family:var(--titulo);font-weight:800;font-size:1.05rem;
  color:var(--verde-hondo);line-height:1.2;margin:0}
.ficha__cientifico{font-size:.8rem;font-style:italic;color:var(--tinta-tenue);margin:2px 0 0}
.ficha__cuerpo{flex:1;display:flex;flex-direction:column;gap:var(--e1)}

.precio{margin-top:var(--e3);background:var(--verde-claro);color:#fff;
  border-radius:var(--pastilla);padding:8px 14px;text-align:center;line-height:1.25}
.precio__valor{font-family:var(--titulo);font-weight:800;font-size:1.15rem}
.precio__unidad{font-size:.85rem;opacity:.95}
.precio__combo{display:block;font-size:.8rem;font-weight:700;color:#EDFCE0}

/* Las cintas van una debajo de otra: un producto puede ser Congelada y
   Cocinada a la vez, como en el afiche. */
.cintas{position:absolute;top:10px;left:-1px;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cinta{
  font-family:var(--titulo);font-weight:700;font-size:.75rem;letter-spacing:.03em;
  color:#fff;padding:4px 12px 4px 10px;border-radius:0 var(--pastilla) var(--pastilla) 0}
.cinta--hielo{background:#166488}
.cinta--verde{background:var(--verde-hondo)}
.cinta--rojo{background:#B3261E}      /* mermelada */
/* La amarilla lleva letra verde oscura: el blanco sobre amarillo no se lee. */
.cinta--amarillo{background:#F2B705;color:var(--verde-hondo)}

/* La misma pastilla, pero suelta en el panel para escoger la etiqueta. */
.cinta-muestra{display:inline-block;font-family:var(--titulo);font-weight:700;font-size:.75rem;
  letter-spacing:.03em;color:#fff;padding:4px 12px;border-radius:var(--pastilla)}

.queda{font-size:.78rem;color:var(--aviso);font-weight:700;margin-top:var(--e2)}

/* -------------------------------------------------------------- cantidad */

.cantidad{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e3)}
.cantidad__btn{width:44px;height:44px;flex:none;border-radius:var(--curva-ch);
  border:1px solid var(--verde);background:#fff;color:var(--verde);
  font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .15s ease,color .15s ease}
.cantidad__btn:hover:not(:disabled){background:var(--verde);color:#fff}
.cantidad__btn:disabled{opacity:.4;cursor:not-allowed}
.cantidad__valor{flex:1;text-align:center;font-family:var(--titulo);font-weight:800;
  font-size:1.1rem;color:var(--verde-hondo);min-width:2ch}

.agregar{margin-top:var(--e3);width:100%;min-height:44px;cursor:pointer;
  background:var(--verde);color:#fff;border:0;border-radius:var(--curva-ch);
  font-family:var(--titulo);font-weight:700;font-size:.95rem;
  transition:background .2s ease,transform .15s ease}
.agregar:hover:not(:disabled){background:var(--verde-hondo)}
.agregar:active:not(:disabled){transform:scale(.98)}

/* Agotado: se ve, se entiende y no se puede tocar. */
.ficha--agotado{opacity:.62;filter:saturate(.35)}
.ficha--agotado .precio{background:var(--tinta-tenue)}
.agotado-sello{margin-top:var(--e3);width:100%;min-height:44px;
  display:grid;place-items:center;border-radius:var(--curva-ch);
  background:var(--linea);color:var(--tinta-suave);cursor:not-allowed;
  font-family:var(--titulo);font-weight:700;font-size:.95rem}

/* Lo que el buscador esconde tiene que irse de verdad: la ficha es flex y
   [hidden] solo no la apaga. */
.ficha[hidden]{display:none}

/* ---------------------------------------------------------------------------
   LA TARJETA EN EL CELULAR

   Angosta y corta: lo que importa para escoger es la foto, el nombre, el
   precio y el boton. El nombre científico y el aire de sobra se van, para que
   quepan cuatro productos en pantalla en vez de dos.
   --------------------------------------------------------------------------- */

@media (max-width:559px){
  .ficha{padding:10px;border-radius:var(--curva-ch)}
  .ficha__foto{margin-bottom:8px}
  /* El nombre, a lo sumo dos renglones: si no, una tarjeta estira a su vecina. */
  .ficha__nombre{font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .ficha__cientifico{display:none}
  .precio{margin-top:8px;padding:6px 10px}
  .precio__valor{font-size:1rem}
  .precio__unidad{font-size:.78rem}
  .precio__combo{font-size:.72rem}
  .queda{font-size:.72rem;margin-top:6px}
  .agregar,.agotado-sello{margin-top:8px;font-size:.9rem}
  .cantidad{gap:6px;margin-top:8px}
  .cinta{font-size:.68rem;padding:3px 9px 3px 8px}
}

/* El numero grande y la unidad debajo en chiquito: «2 libras» en un solo
   renglon no cabia entre los dos botones y partia la tarjeta en dos. */
.cantidad__valor small{display:block;font-family:var(--texto);font-weight:600;
  font-size:.7rem;color:var(--tinta-suave);line-height:1.2}

/* ------------------------------------------------------- barra del carrito */

.barra{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--verde-hondo);color:#fff;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(31,64,38,.22);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.barra--visible{transform:translateY(0)}
.barra__fila{max-width:var(--ancho);margin-inline:auto;
  display:flex;align-items:center;gap:var(--e4);justify-content:space-between}
.barra__resumen{font-size:.9rem;line-height:1.3}
.barra__total{font-family:var(--titulo);font-weight:800;font-size:1.2rem;display:block}
.barra__btn{background:var(--lima);color:var(--verde-hondo);border:0;cursor:pointer;
  font-family:var(--titulo);font-weight:800;font-size:1rem;
  padding:12px 20px;border-radius:var(--pastilla);min-height:48px;white-space:nowrap;
  transition:background .2s ease,transform .15s ease}
.barra__btn:hover{background:#9BD15A}
.barra__btn:active{transform:scale(.97)}

/* ------------------------------------------------------------------ cajon */

.cajon{position:fixed;inset:0;z-index:60;display:none}
.cajon[open],.cajon.abierto{display:block}
.cajon__fondo{position:absolute;inset:0;background:rgba(27,42,31,.55);
  animation:aparecer .2s ease}
.cajon__panel{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);
  background:var(--crema);display:flex;flex-direction:column;
  box-shadow:var(--sombra-alta);animation:entrar-derecha .26s cubic-bezier(.2,.8,.3,1)}
.cajon__cabeza{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);padding:var(--e4);border-bottom:1px solid var(--linea);background:#fff}
.cajon__cuerpo{flex:1;overflow-y:auto;padding:var(--e4);-webkit-overflow-scrolling:touch}
.cajon__pie{padding:var(--e4) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea);background:#fff}
.cerrar{width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  border-radius:50%;display:grid;place-items:center;color:var(--tinta-suave);font-size:1.5rem}
.cerrar:hover{background:var(--linea)}

@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes entrar-derecha{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* ---------------------------------------------------------- lineas carrito */

.linea{display:flex;gap:var(--e3);align-items:center;
  padding:var(--e3) 0;border-bottom:1px solid var(--linea)}
.linea:last-child{border-bottom:0}
.linea__foto{width:56px;height:56px;flex:none;object-fit:contain;
  background:#fff;border-radius:var(--curva-ch);border:1px solid var(--linea)}
.linea__datos{flex:1;min-width:0}
.linea__nombre{font-family:var(--titulo);font-weight:700;color:var(--verde-hondo);
  font-size:.95rem;line-height:1.25}
.linea__detalle{font-size:.82rem;color:var(--tinta-tenue)}
.linea__precio{font-family:var(--titulo);font-weight:800;color:var(--verde-hondo);white-space:nowrap}
/* Cambiar la cantidad o sacar el producto, con botones grandes de dedo. */
.linea__acciones{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.linea__btn{width:44px;height:44px;flex:none;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--linea);background:#fff;color:var(--verde-hondo);
  font-size:1.15rem;line-height:1;display:grid;place-items:center}
.linea__btn:hover:not(:disabled){background:var(--lima-lavada);border-color:var(--verde-claro)}
.linea__btn:disabled{opacity:.38;cursor:not-allowed}
.linea__cuantos{min-width:2ch;text-align:center;font-family:var(--titulo);
  font-weight:800;color:var(--verde-hondo)}
.linea__fuera{margin-left:6px;border:1.5px solid var(--alerta-linea);background:#fff;
  color:var(--alerta);cursor:pointer;font-family:var(--titulo);font-weight:700;
  font-size:.8rem;padding:7px 14px;min-height:44px;border-radius:10px}
.linea__fuera:hover{background:var(--alerta-fondo)}

.total-fila{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--titulo);font-weight:800;font-size:1.3rem;
  color:var(--verde-hondo);margin-bottom:var(--e3)}

/* ----------------------------------------------------------------- formulario */

.campo{margin-bottom:var(--e4)}
.campo label{display:block;font-family:var(--titulo);font-weight:700;font-size:.9rem;
  color:var(--verde-hondo);margin-bottom:6px}
.campo__ayuda{font-size:.8rem;color:var(--tinta-tenue);margin:4px 0 0;font-weight:400}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=search],
input[type=password],input[type=time],input[type=url],select,textarea{
  width:100%;min-height:48px;padding:12px 14px;
  border:1.5px solid var(--linea);border-radius:var(--curva-ch);
  background:#fff;color:var(--tinta);font:400 16px/1.4 var(--texto);
  transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:88px;resize:vertical}
input[type=search]{-webkit-appearance:none;appearance:none}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347574B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;
  padding-right:42px}
input:focus,select:focus,textarea:focus{border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(49,106,48,.16);outline:none}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--alerta)}
.campo__error{color:var(--alerta);font-size:.82rem;font-weight:700;margin-top:6px}
.campo__error[hidden]{display:none}
/* Un rotulo de campo que no apunta a una casilla concreta. */
.campo__titulo{display:block;font-family:var(--titulo);font-weight:700;font-size:.95rem;
  color:var(--verde-hondo);margin-bottom:6px}
.campo__titulo span{font-weight:400;color:var(--tinta-suave)}

/* Escoger cómo paga: tarjetas grandes, fáciles de tocar con el dedo. */
.opcion-pago{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border:1.5px solid var(--linea);border-radius:var(--curva-ch);background:#fff;
  padding:14px;margin-bottom:8px;transition:border-color .15s ease,background .15s ease}
.opcion-pago:hover{border-color:var(--verde-claro);background:var(--lima-lavada)}
.opcion-pago input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--verde)}
.opcion-pago strong{display:block;font-family:var(--titulo);color:var(--verde-hondo);font-size:.98rem}
.opcion-pago small{display:block;color:var(--tinta-suave);font-size:.84rem;margin-top:2px}
.opcion-pago:has(input:checked){border-color:var(--verde);background:var(--lima-lavada)}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border:0;border-radius:var(--curva-ch);cursor:pointer;
  background:var(--verde);color:#fff;text-decoration:none;
  font-family:var(--titulo);font-weight:700;font-size:1rem;
  transition:background .2s ease,transform .15s ease}
.boton:hover{background:var(--verde-hondo)}
.boton:active{transform:scale(.98)}
.boton:disabled{opacity:.55;cursor:not-allowed;transform:none}
.boton--ancho{width:100%}
/* Todo SVG dentro de un boton lleva tamaño: si no, se estira a lo ancho. */
.boton svg{width:22px;height:22px;flex:none;fill:currentColor}
.boton--wa{background:#25D366;color:#0B3B1E}
.boton--wa:hover{background:#1FBA59}
.boton--claro{background:#fff;color:var(--verde-hondo);border:1.5px solid var(--linea)}
.boton--claro:hover{background:var(--lima-lavada)}

/* -------------------------------------------------------------------- avisos */

.aviso{border-radius:var(--curva-ch);padding:var(--e3) var(--e4);
  margin-bottom:var(--e4);font-size:.92rem;border:1px solid transparent}
.aviso--error{background:var(--alerta-fondo);border-color:var(--alerta-linea);color:var(--alerta)}
.aviso--ojo{background:var(--aviso-fondo);border-color:var(--aviso-linea);color:var(--aviso)}
.aviso--bien{background:var(--exito-fondo);border-color:var(--exito-linea);color:var(--exito)}
.aviso ul{margin:var(--e2) 0 0;padding-left:1.1rem}

.vacio{text-align:center;padding:var(--e7) var(--e4);color:var(--tinta-tenue)}
.vacio h2{color:var(--verde-hondo);margin-bottom:var(--e2)}

/* --------------------------------------------------------------------- pie */

.pie{background:var(--verde-hondo);color:#DCEBDD;margin-top:var(--e8);
  padding:var(--e6) 0 calc(var(--e5) + env(safe-area-inset-bottom));font-size:.9rem}
.pie a{color:#fff}
.pie__rejilla{display:grid;gap:var(--e5);grid-template-columns:1fr}
@media (min-width:700px){.pie__rejilla{grid-template-columns:1.2fr 1fr 1fr}}
.pie h3{color:#fff;font-size:1rem;margin-bottom:var(--e2)}
.pie ul{list-style:none;margin:0;padding:0;display:grid}
/* Todas las filas del pie a 44 px, con enlace o sin él: las columnas llevan el mismo paso. */
.pie li{min-height:44px;display:flex;align-items:center}
.pie__logo{height:56px;width:auto;margin-bottom:var(--e3)}
/* Enlaces de texto del pie y de legal.php: 44 px de alto para el dedo. */
.pie ul a,.pie__credito a,.enlace-alto{display:inline-flex;align-items:center;min-height:44px}
/* Los dos enlaces del final de legal.php: si no caben, el segundo baja entero. */
.legal-enlaces{display:flex;flex-wrap:wrap;column-gap:var(--e5)}

/* ------------------------------------------------- entrada escalonada suave */

@media (prefers-reduced-motion:no-preference){
  .entra{opacity:0;animation:subir .42s cubic-bezier(.2,.8,.3,1) forwards;
    animation-delay:calc(var(--i,0) * 55ms)}
  @keyframes subir{from{opacity:0;transform:translateY(14px) scale(.97)}
                   to{opacity:1;transform:none}}
}

/* --------------------------------------------------- señalar en el mapa

   El boton y el resumen viven aqui, no en mapa.css, porque mapa.css solo se
   descarga cuando alguien abre el mapa: si estuvieran alla, el boton se veria
   crudo mientras tanto. La caja del mapa si va alla.                       */

.mapa-sel{margin:0 0 var(--e2)}
.mapa-sel__abrir{width:100%}
.mapa-sel__abrir svg{fill:none}          /* el alfiler va de linea, no relleno */
@media (min-width:600px){ .mapa-sel__abrir{width:auto} }

.mapa-resumen[hidden]{display:none}   /* si no, el display:flex le gana al atributo */
.mapa-resumen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:var(--e2) 0 0;padding:10px 12px;border-radius:var(--curva-ch);
  background:var(--exito-fondo);border:1px solid var(--exito-linea);
  font-size:.88rem;line-height:1.35}
.mapa-resumen__si{flex:none;font-weight:800;color:var(--exito)}
.mapa-resumen__texto{flex:1 1 140px;min-width:0;color:var(--tinta)}
.mapa-resumen__ver{flex:none;color:var(--exito);font-weight:700}

/* El campo de pegar el enlace queda de segundo: ahora la forma normal de
   marcar un sitio es el mapa, pegar el enlace es el plan B. */
.mapa-otra{display:block;margin:var(--e3) 0 6px;
  font-family:var(--titulo);font-weight:700;font-size:.82rem;color:var(--tinta-tenue)}

/* Cuando el punto escogido es "a mi casa", señalar deja de ser opcional. */
.mapa-sel--pide .mapa-sel__abrir{border-color:var(--verde);background:var(--lima-lavada)}

/* --------------------------------------------- los permisos del pedido

   Antes eran dos casillas chiquitas sueltas en un parrafo, y la segunda
   quedaba metida en medio del texto de la primera. Ahora son tarjetas como
   las de «Cómo vas a pagar»: se ven, se tocan facil y se nota cuando estan
   marcadas. La de terminos es obligatoria: si falta, se pone roja y lo dice. */

.permisos{display:grid;gap:10px;margin:var(--e2) 0 var(--e4)}
.permiso{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  padding:14px 16px;background:#fff;border:1.5px solid var(--linea);
  border-radius:var(--curva-ch);transition:border-color .15s ease,background .15s ease}
.permiso:hover{border-color:var(--verde-claro)}
.permiso input{width:24px;height:24px;flex:none;margin:1px 0 0;accent-color:var(--verde);cursor:pointer}
.permiso strong{display:block;font-family:var(--titulo);font-weight:800;font-size:.98rem;
  line-height:1.3;color:var(--verde-hondo)}
.permiso small{display:block;margin-top:4px;font-size:.84rem;line-height:1.45;color:var(--tinta-suave)}
.permiso a{font-weight:700}
.permiso:has(input:checked){border-color:var(--verde);background:var(--lima-lavada)}
.permiso:has(input:focus-visible){outline:3px solid var(--verde-claro);outline-offset:2px}
.permiso__falta{display:none;margin-top:6px;font-style:normal;font-weight:700;
  font-size:.84rem;color:var(--alerta)}
.permiso--falta{border-color:var(--alerta);background:var(--alerta-fondo)}
.permiso--falta .permiso__falta{display:block}

/* Hecho por Boreh: discreto, al final del pie. */
.pie__credito{margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid rgba(255,255,255,.14)}
.credito{margin:0;font-size:.8rem;line-height:1.6;color:#C9DCCB}
.credito strong{color:#fff}
.credito a{color:#fff;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.entrar__credito{max-width:380px;margin:18px auto 0;padding:0 16px;text-align:center}
.entrar__credito .credito{color:var(--tinta-tenue)}
.entrar__credito .credito strong{color:var(--verde-hondo)}
.entrar__credito .credito a{color:var(--verde)}

/* Las tres razones de la portada: por qué comprarle al campo. */
.razones{list-style:none;margin:var(--e5) 0 0;padding:0;display:grid;gap:14px;max-width:62ch}
@media (min-width:760px){ .razones{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none} }
.razon{display:flex;gap:12px;align-items:flex-start}
.razon__ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--lima-lavada);color:var(--verde)}
.razon__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.razon>span:last-child{font-size:.9rem;line-height:1.4;color:var(--tinta-suave)}
.razon b{display:block;font-family:var(--titulo);font-weight:800;font-size:1rem;color:var(--verde-hondo)}

/* Vitrina de Boreh: la tienda dentro del marco de boreh.com.co, donde nada le
   llega al negocio. La franja avisa sin gritar (6,44:1 sobre su fondo) y el
   WhatsApp se ve pero no se toca. */
.vitrina-franja{margin:0;padding:8px 16px;text-align:center;font-size:.85rem;line-height:1.4;
  font-weight:600;background:var(--aviso-fondo);color:var(--aviso);
  border-bottom:1px solid var(--aviso-linea)}
[data-vitrina] .wa-boton[aria-disabled],[data-vitrina] .boton--wa[aria-disabled]{cursor:default}
[data-vitrina] .wa-boton[aria-disabled]:hover{background:var(--verde-hondo)}
[data-vitrina] .boton--wa[aria-disabled]:hover{background:#25D366}
[data-vitrina] [aria-disabled]:active{transform:none}
.vitrina-mensaje{margin-top:var(--e5);background:#fff;border:1px solid var(--linea);
  border-radius:var(--curva);padding:var(--e5) var(--e4)}
.vitrina-mensaje h2{font-size:1.1rem;margin-bottom:var(--e3)}
/* El mensaje tal cual: con sus saltos de renglón, y los enlaces largos del
   mapa se parten para no empujar la página de lado. */
.vitrina-mensaje__texto{margin:0;padding:var(--e3) var(--e4);background:var(--lima-lavada);
  border-radius:var(--curva-ch);color:var(--tinta);font-size:.92rem;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere}