/* =========================================================
   ÑamiChips · hoja de estilos principal
   Basada en el Manual de marca ÑamiChips 2026
   Paleta: naranja ñame, café tierra, verde monte, azul caribe, crema
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --naranja:#F5A62E;
  --naranja-osc:#DE8F17;
  --cafe:#5E4028;
  --cafe-osc:#3E2A18;
  --verde:#8CA82A;
  --verde-cla:#A9C34A;
  --azul:#00B4D0;
  --crema:#FFFAF2;
  --crema-2:#F6EAD8;
  --blanco:#FFFFFF;

  --texto:var(--cafe);
  --sombra:0 8px 0 rgba(94,64,40,.12);

  --fuente-titulo:"Fredoka","Trebuchet MS",sans-serif;
  --fuente-texto:"Barlow","Helvetica Neue",Arial,sans-serif;
  --fuente-dato:"Barlow Condensed","Arial Narrow",sans-serif;

  --ancho:1200px;
  --radio:22px;
  --radio-sm:14px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}

body{
  margin:0;
  background:var(--crema);
  color:var(--texto);
  font-family:var(--fuente-texto);
  font-size:1.05rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block;}

h1,h2,h3,h4{
  font-family:var(--fuente-titulo);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--cafe);
}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);}
p{margin:0 0 1.1em;max-width:68ch;}

a{color:var(--cafe);text-decoration-color:var(--naranja);text-underline-offset:3px;}
a:hover{color:var(--naranja-osc);}

:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px;}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto;}
.centrado{text-align:center;}
.centrado p{margin-inline:auto;}

.saltar{
  position:absolute;left:-9999px;top:0;background:var(--cafe);color:var(--crema);
  padding:.7rem 1.1rem;z-index:999;border-radius:0 0 var(--radio-sm) 0;
}
.saltar:focus{left:0;}

/* ---------- 3. Botones ---------- */
.boton{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fuente-titulo);font-weight:600;font-size:1rem;
  padding:.8rem 1.5rem;border-radius:999px;border:3px solid var(--cafe);
  background:var(--naranja);color:var(--cafe);text-decoration:none;cursor:pointer;
  box-shadow:0 4px 0 var(--cafe);
  transition:transform .12s ease,box-shadow .12s ease;
}
.boton:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--cafe);color:var(--cafe);}
.boton:active{transform:translateY(4px);box-shadow:none;}
.boton--verde{background:var(--verde);color:var(--crema);}
.boton--verde:hover{color:var(--crema);}
.boton--crema{background:var(--crema);}
.boton--fantasma{background:transparent;box-shadow:none;}
.boton--pequeno{padding:.55rem 1.1rem;font-size:.92rem;border-width:2px;box-shadow:0 3px 0 var(--cafe);}

/* ---------- 4. Encabezado ---------- */
.encabezado{
  position:sticky;top:0;z-index:50;
  background:var(--crema);
  padding:.9rem 0 .5rem;
}
.encabezado__fila{
  display:flex;align-items:center;gap:1rem;
}
.marca{flex:0 0 auto;line-height:0;}
.marca img{width:clamp(96px,12vw,168px);}

.barra{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(.6rem,2vw,2rem);
  background:var(--cafe);
  border-radius:999px;
  padding:.55rem clamp(.9rem,2vw,1.6rem);
  margin-left:-2.2rem;
  min-height:56px;
}
.barra a{
  font-family:var(--fuente-titulo);font-weight:500;
  color:var(--crema);text-decoration:none;
  font-size:clamp(.82rem,1.1vw,1rem);
  padding:.35rem .8rem;border-radius:999px;white-space:nowrap;
}
.barra a:hover{background:rgba(255,250,242,.16);color:var(--crema);}
.barra a[aria-current="page"]{background:var(--crema);color:var(--cafe);}

.carrito-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  background:none;border:0;color:var(--crema);cursor:pointer;
  font-family:var(--fuente-titulo);font-size:1rem;padding:.35rem .6rem;border-radius:999px;
}
.carrito-btn:hover{background:rgba(255,250,242,.16);}
.carrito-btn svg{width:26px;height:26px;}
.carrito-btn__num{
  background:var(--naranja);color:var(--cafe);
  border-radius:999px;min-width:22px;height:22px;
  display:inline-grid;place-items:center;font-size:.8rem;font-weight:600;
}

.menu-btn{
  display:none;background:none;border:0;cursor:pointer;padding:.4rem;
}
.menu-btn span{display:block;width:26px;height:3px;background:var(--crema);border-radius:2px;margin:5px 0;}

@media (max-width:900px){
  .menu-btn{display:block;}
  .barra{justify-content:flex-end;margin-left:-1.2rem;}
  .barra .enlaces{
    display:none;position:absolute;top:100%;left:1.25rem;right:1.25rem;
    background:var(--cafe);border-radius:var(--radio);padding:.8rem;
    flex-direction:column;gap:.2rem;box-shadow:0 12px 30px rgba(62,42,24,.25);
  }
  .barra .enlaces.abierto{display:flex;}
  .barra .enlaces a{display:block;padding:.7rem 1rem;font-size:1.05rem;text-align:left;}
}
.enlaces{display:flex;align-items:center;gap:clamp(.2rem,1.4vw,1.4rem);}

/* ---------- 5. Ola pintada ---------- */
.ola{display:block;width:100%;height:auto;line-height:0;}
.ola svg{display:block;width:100%;height:clamp(38px,6vw,80px);}

/* ---------- 6. Portada ---------- */
.portada{position:relative;padding:clamp(1rem,3vw,2.5rem) 0 0;}
.portada__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1rem,3vw,3rem);align-items:center;
}
.portada__texto h1{margin-bottom:.35em;}
.portada__frase{
  display:inline-block;background:var(--verde-cla);color:var(--cafe);
  border-top:10px solid var(--naranja);
  border-radius:16px 16px 46% 18px / 16px 16px 30% 18px;
  padding:1.1rem 1.6rem 1.4rem;
  font-family:var(--fuente-titulo);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em;
}
.portada__pie{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;}
.portada__arte{
  position:relative;border-radius:var(--radio) 0 0 var(--radio);
  overflow:hidden;min-height:340px;
  background:url("../img/titi-bosque.jpg") center/cover no-repeat;
  display:grid;place-items:center;
}
.portada__arte img{
  width:min(64%,320px);filter:drop-shadow(0 18px 22px rgba(0,0,0,.35));
}
@media (max-width:820px){
  .portada__grid{grid-template-columns:1fr;}
  .portada__arte{border-radius:var(--radio);min-height:280px;}
}

/* ---------- 7. Secciones ---------- */
.seccion{padding:clamp(2.6rem,6vw,4.6rem) 0;}
.seccion--crema2{background:var(--crema-2);}
.seccion--cafe{background:var(--cafe);color:var(--crema);}
.seccion--cafe h2,.seccion--cafe h3{color:var(--crema);}
.seccion--cafe a{color:var(--naranja);}
.seccion--verde{background:var(--verde);color:var(--crema);}
.seccion--verde h2,.seccion--verde h3{color:var(--crema);}

.entradilla{font-size:1.15rem;max-width:60ch;}

/* rejillas */
.rejilla{display:grid;gap:clamp(1rem,2.4vw,2rem);}
.rejilla--2{grid-template-columns:repeat(2,1fr);}
.rejilla--3{grid-template-columns:repeat(3,1fr);}
.rejilla--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.rejilla--4{grid-template-columns:repeat(2,1fr);}.rejilla--3{grid-template-columns:1fr;}}
@media (max-width:620px){.rejilla--2,.rejilla--4{grid-template-columns:1fr;}}

.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3.5rem);align-items:center;}
@media (max-width:820px){.dos-columnas{grid-template-columns:1fr;}}

/* tarjetas de valor */
.valor{padding:0;}
.valor h3{font-size:1.2rem;margin-bottom:.3rem;}
.valor p{font-size:.98rem;margin:0;color:inherit;opacity:.92;}
.valor__icono{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  background:var(--naranja);margin-bottom:.9rem;
}
.valor__icono svg{width:30px;height:30px;stroke:var(--cafe);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* foto con marco */
.foto{border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);}
.foto img{width:100%;}
.foto figcaption{
  font-family:var(--fuente-dato);text-transform:uppercase;letter-spacing:.06em;
  font-size:.9rem;padding:.6rem .9rem;background:var(--cafe);color:var(--crema);
}

/* ---------- 8. Producto ---------- */
.producto{
  background:var(--crema);border:3px solid var(--cafe);border-radius:var(--radio);
  padding:1.2rem;display:flex;flex-direction:column;box-shadow:0 6px 0 var(--cafe);
}
.producto__img{
  background:var(--cafe);border-radius:var(--radio-sm);
  display:grid;place-items:center;padding:1.1rem;margin-bottom:1rem;min-height:230px;
}
.producto__img img{max-height:210px;width:auto;}
.producto h3{margin-bottom:.15rem;font-size:1.15rem;}
.producto__precio{font-family:var(--fuente-titulo);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;margin:.1rem 0 .3rem;}
.producto__nota{font-size:.9rem;opacity:.8;margin-bottom:1rem;}
.producto .boton{margin-top:auto;justify-content:center;}

.destacado{
  background:var(--cafe);color:var(--crema);border-radius:var(--radio);
  padding:1.6rem;display:flex;flex-direction:column;justify-content:center;text-align:center;
}
.destacado h3{color:var(--crema);}
.destacado img{width:120px;margin:0 auto .8rem;border-radius:14px;}

/* ---------- 9. Recetas ---------- */
.receta{
  background:var(--crema);border-radius:var(--radio);overflow:hidden;
  border:3px solid var(--cafe);display:flex;flex-direction:column;
}
.receta__cab{background:var(--verde);color:var(--crema);padding:1rem 1.2rem;}
.receta__cab h3{color:var(--crema);margin:0;}
.receta__meta{font-family:var(--fuente-dato);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;}
.receta__cuerpo{padding:1.2rem;}
.receta__cuerpo h4{font-size:1rem;margin:.2rem 0 .4rem;}
.receta ul,.receta ol{margin:0 0 1rem;padding-left:1.2rem;}
.receta li{margin-bottom:.3rem;}

/* ---------- 10. Pestañas ---------- */
.pestanas{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem;}
.pestana{
  font-family:var(--fuente-titulo);font-weight:500;font-size:1rem;
  background:var(--crema);border:3px solid var(--cafe);color:var(--cafe);
  padding:.5rem 1.2rem;border-radius:999px;cursor:pointer;
}
.pestana[aria-selected="true"]{background:var(--cafe);color:var(--crema);}
.panel[hidden]{display:none;}

/* ---------- 11. Formularios ---------- */
.formulario{display:grid;gap:1rem;max-width:640px;}
.campo{display:grid;gap:.35rem;}
.campo label{font-family:var(--fuente-titulo);font-weight:500;font-size:.98rem;}
.campo input,.campo select,.campo textarea{
  font-family:var(--fuente-texto);font-size:1rem;color:var(--cafe);
  background:var(--crema);border:2px solid var(--cafe);border-radius:var(--radio-sm);
  padding:.7rem .9rem;width:100%;
}
.campo textarea{min-height:130px;resize:vertical;}
.aviso{font-size:.88rem;opacity:.8;}

/* ---------- 12. Carrito ---------- */
.panel-carrito{
  position:fixed;inset:0 0 0 auto;width:min(420px,100%);
  background:var(--crema);border-left:4px solid var(--cafe);
  transform:translateX(100%);transition:transform .25s ease;
  z-index:100;display:flex;flex-direction:column;
}
.panel-carrito.abierto{transform:translateX(0);}
.panel-carrito__cab{
  background:var(--cafe);color:var(--crema);padding:1rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;
}
.panel-carrito__cab h2{color:var(--crema);margin:0;font-size:1.3rem;}
.panel-carrito__cerrar{background:none;border:0;color:var(--crema);font-size:1.7rem;cursor:pointer;line-height:1;}
.panel-carrito__cuerpo{padding:1.2rem;overflow-y:auto;flex:1;}
.panel-carrito__pie{padding:1.2rem;border-top:3px solid var(--cafe);background:var(--crema-2);}
.linea{display:grid;grid-template-columns:52px 1fr auto;gap:.8rem;align-items:center;padding:.7rem 0;border-bottom:1px solid rgba(94,64,40,.2);}
.linea img{border-radius:8px;background:var(--cafe);padding:4px;}
.linea__nombre{font-family:var(--fuente-titulo);font-weight:500;font-size:.98rem;line-height:1.2;}
.linea__precio{font-size:.9rem;opacity:.8;}
.cantidad{display:inline-flex;align-items:center;gap:.4rem;}
.cantidad button{
  width:28px;height:28px;border-radius:8px;border:2px solid var(--cafe);
  background:var(--crema);color:var(--cafe);font-size:1rem;line-height:1;cursor:pointer;
}
.total{display:flex;justify-content:space-between;font-family:var(--fuente-titulo);font-size:1.25rem;font-weight:600;margin-bottom:.9rem;}
.velo{position:fixed;inset:0;background:rgba(62,42,24,.5);z-index:99;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.velo.visible{opacity:1;pointer-events:auto;}

/* ---------- 13. WhatsApp flotante ---------- */
.wa{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;border:3px solid var(--cafe);
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(62,42,24,.3);
}
.wa svg{width:30px;height:30px;fill:#fff;}

/* ---------- 14. Pie ---------- */
.pie{background:var(--cafe);color:var(--crema);padding:3rem 0 1.4rem;}
.pie a{color:var(--crema);text-decoration:none;}
.pie a:hover{color:var(--naranja);text-decoration:underline;}
.pie h3{color:var(--crema);font-size:1.1rem;}
.pie__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2rem;}
@media (max-width:820px){.pie__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.pie__grid{grid-template-columns:1fr;}}
.pie ul{list-style:none;margin:0;padding:0;}
.pie li{margin-bottom:.45rem;}
.pie__logo{width:150px;margin-bottom:1rem;background:var(--crema);padding:.7rem .9rem;border-radius:18px;box-sizing:content-box;}
.redes{display:flex;gap:.6rem;margin-top:.8rem;}
.redes a{
  width:40px;height:40px;border-radius:50%;background:var(--azul);
  display:grid;place-items:center;
}
.redes svg{width:20px;height:20px;fill:var(--crema);}
.pie__legal{
  margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,250,242,.25);
  font-size:.85rem;opacity:.85;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
}

/* ---------- 15. Tabla comercial ---------- */
.tabla{width:100%;border-collapse:collapse;font-family:var(--fuente-dato);font-size:1.05rem;}
.tabla th,.tabla td{border:2px solid var(--cafe);padding:.6rem .8rem;text-align:left;}
.tabla th{background:var(--cafe);color:var(--crema);text-transform:uppercase;letter-spacing:.04em;}
.tabla-envoltura{overflow-x:auto;}

/* ---------- 16. Utilidades ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.sin-margen{margin-bottom:0;}

/* ---------- 17. Micro-interacciones (Fase 1) ---------- */

/* Tarjetas de producto: se levantan y la sombra dura crece */
.producto{
  transition:transform .18s ease, box-shadow .18s ease;
}
.producto:hover{
  transform:translateY(-5px);
  box-shadow:0 11px 0 var(--cafe);
}

/* La foto del empaque hace zoom dentro de su caja café */
.producto__img{overflow:hidden;}
.producto__img img{transition:transform .35s ease;}
.producto:hover .producto__img img{transform:scale(1.07) rotate(-1.5deg);}

/* Fotos con marco: zoom suave y sombra más profunda */
.foto{transition:box-shadow .25s ease, transform .25s ease;}
.foto img{transition:transform .5s ease;}
.foto:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 0 rgba(94,64,40,.18);
}
.foto:hover img{transform:scale(1.05);}

/* El pie de foto café se tiñe de naranja al pasar */
.foto figcaption{transition:background .25s ease, color .25s ease;}
.foto:hover figcaption{background:var(--naranja);color:var(--cafe);}

/* Tarjeta destacada (distribuidores) */
.destacado{transition:transform .18s ease;}
.destacado:hover{transform:translateY(-5px);}
.destacado img{transition:transform .35s ease;}
.destacado:hover img{transform:scale(1.08) rotate(2deg);}

/* Iconos de "Lo que nos hace únicos": saltan y giran */
.valor__icono{transition:transform .25s ease, background .25s ease;}
.valor:hover .valor__icono{
  transform:translateY(-4px) rotate(-6deg);
  background:var(--verde-cla);
}

/* Recetas */
.receta{transition:transform .18s ease, box-shadow .18s ease;}
.receta:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--cafe);}

/* Navegación: el fondo aparece con suavidad */
.barra a,.carrito-btn{transition:background .2s ease, color .2s ease;}

/* Pestañas */
.pestana{transition:background .2s ease, color .2s ease, transform .15s ease;}
.pestana:hover{transform:translateY(-2px);}

/* Botón flotante de WhatsApp: latido lento que se detiene al pasar el mouse */
.wa{transition:transform .2s ease, box-shadow .2s ease;animation:latido 2.8s ease-in-out infinite;}
.wa:hover{transform:scale(1.1);box-shadow:0 10px 22px rgba(62,42,24,.4);animation-play-state:paused;}
@keyframes latido{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}

/* Redes sociales del pie */
.redes a{transition:transform .2s ease, background .2s ease;}
.redes a:hover{transform:translateY(-3px) scale(1.08);background:var(--naranja);}
.redes a:hover svg{fill:var(--cafe);}

/* Campos de formulario: el borde se enciende al escribir */
.campo input,.campo select,.campo textarea{transition:border-color .2s ease, box-shadow .2s ease;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--naranja);
  box-shadow:0 0 0 4px rgba(245,166,46,.25);
}

/* ---------- 18. Aparición al hacer scroll (Fase 2) ---------- */
/* Ojo: todo cuelga de .js-anim, una clase que pone el JavaScript.
   Si el JS falla o no carga, nada se esconde y el sitio se ve normal. */

.js-anim .aparece{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.js-anim .aparece.visible{
  opacity:1;
  transform:none;
}

/* Seguro extra para quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion:reduce){
  .js-anim .aparece{opacity:1 !important;transform:none !important;}
}