/* Alimentos Grachoc · v6 — paleta y tipografía según docs/marca 03 y 04 */
:root{
  --blanco:#FFFFFF;
  --noche:#190C05;
  --tinta:#F0E3D4;
  --azul:#157FC3;
  --azul-texto:#0E5E93; /* contorno del GRA del logo: 4.5:1 o más sobre blanco, para texto chico */
  --gutter:clamp(1rem,4vw,3.5rem);
  --titular:clamp(2.6rem,6.2vw,5.625rem);
  --claim:clamp(1.9rem,3.2vw,2.875rem);
  --dato:clamp(1.6rem,2.6vw,2.375rem);
  --cuerpo:1.125rem;
  --ui:.9rem;
  --cab:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--blanco);color:var(--noche);font-family:"Archivo",system-ui,sans-serif;font-size:var(--cuerpo);line-height:1.6;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
h1,h2,h3{font-weight:900;line-height:.93}
h2{font-size:var(--titular);letter-spacing:-.038em}
h3{font-size:var(--claim);letter-spacing:-.025em}
p{max-width:34rem}
.salto{position:absolute;left:-999px;top:0;background:var(--noche);color:var(--tinta);padding:.75rem 1rem;z-index:100}
.salto:focus{left:1rem}

/* cabecera */
.cab{position:fixed;inset:0 0 auto 0;height:var(--cab);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 var(--gutter);background:var(--blanco)}
.cab .logo img{width:clamp(130px,13vw,190px);height:auto}
.cab nav{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2.2rem);font-weight:500;font-size:var(--ui)}
.cab nav a{text-decoration:none;padding:.6rem 0}
.cab nav a:hover,.cab nav a[aria-current]{text-decoration:underline;text-underline-offset:.3em}
.cab .wa{background:var(--noche);color:var(--tinta);padding:.7rem 1.1rem}
.cab .wa:hover{background:var(--azul);color:var(--blanco);text-decoration:none}
@media (max-width:760px){.cab nav .opc{display:none}}

.boton{display:inline-block;font-weight:500;text-decoration:none;padding:1rem 1.5rem;background:var(--blanco);color:var(--noche);cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;touch-action:manipulation}
.boton:active{transform:scale(.98)}
.boton[disabled]{opacity:.5;cursor:progress}
.boton:hover{background:var(--azul);color:var(--blanco)}
.boton.oscuro{background:var(--noche);color:var(--tinta)}
.boton.contorno{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.boton.contorno:hover{background:var(--azul);color:var(--blanco);box-shadow:none}

/* contacto (compartido) */
.contacto{background:var(--noche);color:var(--tinta);padding:clamp(5rem,11vw,10rem) var(--gutter) 2.5rem}
.contacto h2{font-size:clamp(3.5rem,11vw,10rem);letter-spacing:-.045em}
.contacto .bajada{margin-top:1.5rem;font-size:1.25rem}
.canales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:clamp(2.5rem,5vw,4rem)}
.canales a{display:block;text-decoration:none;border-top:1px solid var(--tinta);padding-top:1.25rem}
.canales span{display:block;font-weight:500;font-size:var(--ui)}
.canales b{display:block;font-weight:900;font-size:var(--dato);letter-spacing:-.02em;line-height:1.05;margin-top:.5rem;overflow-wrap:anywhere}
.canales a:hover b{text-decoration:underline;text-underline-offset:.15em}
.pie{margin-top:clamp(4rem,8vw,7rem);display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;align-items:center;font-size:var(--ui);font-weight:500}
.pie img{width:130px;height:auto;background:var(--blanco);padding:.6rem .8rem}
@media (max-width:640px){.canales{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}