/* ===========================================================================
   En Cosechas — 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, y la tira de categorias se queda pegada arriba mientras se recorre,
   para saltar a «Hortalizas» sin devolverse hasta el principio.
   ---------------------------------------------------------------------- */

.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{position:sticky;top:64px;z-index:20;display:flex;gap:8px;margin-top:var(--e3);
  padding:8px 16px;margin-inline:-16px;overflow-x:auto;scrollbar-width:none;
  background:var(--crema);box-shadow:0 1px 0 var(--linea)}
.tira::-webkit-scrollbar{display:none}
/* Las pastillas no se parten ni se aplastan: se desliza la tira. */
.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 ella y no tapada. */
.categoria{margin-top:var(--e5);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;gap:6px}
.pie__logo{height:56px;width:auto;margin-bottom:var(--e3)}

/* ------------------------------------------------- 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)}