/* Suma Foods — minimal. Accent: Azul pastel #88A3BF. Text #2C2C2C on white (rosa removed Oct 17 2026, owner request).
   Text on azul is always #2C2C2C (5.35:1). */
:root{--azul:#88A3BF;--rosa:#FFFFFF;--ink:#2C2C2C;--bg:#FFFFFF;--tint:#F7F9FB;--line:#E6E8EB;
  --serif:"Fraunces",Georgia,serif;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:124px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);max-width:12ch}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:2rem}
p{margin:0}
.wrap{width:min(100% - 2.5rem,1120px);margin-inline:auto}
.narrow{max-width:760px}
.skip{position:absolute;left:1rem;top:-3rem;background:var(--azul);color:var(--ink);padding:.5rem 1rem;border-radius:6px;z-index:99}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--azul);color:var(--ink);font:700 1rem/1 var(--sans);padding:1rem 1.6rem;border-radius:999px;border:0;text-decoration:none;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.7rem 1.1rem;font-size:.9rem}
.link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--azul);padding-bottom:2px}

/* header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:1.25rem;height:116px}
.brand img{height:92px;width:auto}
.nav{display:flex;gap:2rem;margin-left:auto}
.nav a{text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:6px}
.lang{display:flex;gap:2px}
.lang button{background:none;border:0;font:700 .8rem/1 var(--sans);color:var(--ink);padding:.5rem .55rem;border-radius:999px;cursor:pointer;opacity:.55}
.lang button[aria-pressed="true"]{opacity:1;background:var(--azul)}

/* hero */
.hero{padding:clamp(3rem,8vw,6.5rem) 0}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.partner{display:flex;align-items:center;gap:1.5rem;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.partner img{width:260px;flex:none}
.partner p{font-weight:600;font-size:1.05rem;line-height:1.35;max-width:19ch;padding-left:1.5rem;border-left:3px solid var(--ink)}
.lead{font-size:1.2rem;margin:1.5rem 0 2.25rem;max-width:34ch}
.ctas{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
.pack{margin:0;position:relative;display:grid;place-items:center}
.pack::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;background:var(--azul);top:50%;left:50%;transform:translate(-50%,-46%)}
.pack picture{position:relative;display:block;width:min(360px,72%);filter:drop-shadow(0 24px 30px rgba(44,44,44,.25))}
.pack img{width:100%}

/* sections */
.section{padding:clamp(4rem,9vw,7rem) 0}
.section-tint{background:var(--tint)}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.75rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:24px;height:3px;background:var(--azul);border-radius:2px}
.sub{font-size:1.1rem;margin:-1.25rem 0 2rem}
.serving{margin:0 0 2rem;max-width:560px}
.serving img{width:100%}
.figures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.figures li{padding:2rem 1.5rem 2rem 0;border-bottom:1px solid var(--line)}
.figures strong{display:block;font:400 clamp(2.2rem,4vw,3.2rem)/1 var(--serif);margin-bottom:.6rem}
.figures span{display:block;font-size:.92rem}
.figures li:nth-child(odd) strong{border-bottom:3px solid var(--azul);display:inline-block;padding-bottom:.35rem}
.figures li:nth-child(even) strong{border-bottom:3px solid var(--ink);display:inline-block;padding-bottom:.35rem}
.tags{margin-top:2rem;font-weight:600}
.fine{margin-top:.75rem;font-size:.8rem;color:#55585c}



.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem}
.f{display:flex;flex-direction:column;gap:.35rem}
.full{grid-column:1/-1}
.f label{font-size:.85rem;font-weight:600}
.f input,.f select,.f textarea{font:500 1rem/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid #9a9ea4;border-radius:10px;padding:.8rem .9rem;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--ink)}
.f [aria-invalid="true"]{border:2px solid var(--ink)}
.foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.status{font-size:.92rem;font-weight:600}


.footer{border-top:1px solid var(--line);padding:2.5rem 0 3rem;font-size:.82rem;color:#55585c}
.footer-in{display:flex;gap:2rem;align-items:center}
.footer img{width:170px;flex:none}

.wa{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--azul);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(44,44,44,.5)}

@media (max-width:860px){
  .nav{display:none}
  .lang{margin-left:auto}
  .hero-in{grid-template-columns:1fr}
  .pack{max-width:360px;margin:0 auto}
  .figures{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  html{scroll-padding-top:92px}
  .header-in{height:84px;gap:.6rem}
  .brand img{height:64px}
  .btn-sm{padding:.65rem .9rem}
  .partner{flex-direction:column;align-items:flex-start;gap:1rem}
  .partner img{width:220px}
  .partner p{padding-left:1rem;max-width:none}
  .form{grid-template-columns:1fr}
  .footer-in{flex-direction:column;align-items:flex-start}
}
.nw{white-space:nowrap}

/* contact visibility */
.topbar{background:var(--tint);border-bottom:1px solid var(--line);font-size:.88rem}
.topbar-in{display:flex;justify-content:flex-end;align-items:center;gap:1.75rem;min-height:40px}
.topbar-label{margin-right:auto;font-weight:600;color:#55585c}
.topbar a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:600}
.topbar a:hover span{text-decoration:underline}
.topbar-wa{background:var(--azul);color:var(--ink);padding:.3rem .8rem;border-radius:999px}
.hero-contact{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-top:2rem;font-weight:600}
.hero-contact a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;border-bottom:2px solid var(--azul);padding-bottom:2px}
.q-alt{margin:-1.25rem 0 2rem;font-size:1rem}
.q-alt a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--azul)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.c-card{display:flex;flex-direction:column;gap:.35rem;padding:2rem;border:1px solid var(--line);border-radius:20px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.c-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(44,44,44,.4)}
.c-card svg{margin-bottom:1rem;color:var(--ink)}
.c-card:not(.c-wa) svg{background:var(--azul);border-radius:50%;padding:7px;width:52px;height:52px}
.c-k{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.c-v{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:700;word-break:break-word}
.c-wa{background:var(--azul);border-color:var(--azul)}
.c-addr{font-style:normal;margin-top:1.5rem;color:#44474b}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){
  .topbar-in{justify-content:space-between;gap:.5rem}
  .topbar-label,.tb-email span{display:none}
  .topbar{font-size:.84rem}
  .c-card{padding:1.5rem}
}

/* ===== Hero + contact: white background (was rosa viejo; changed Oct 17 2026) ===== */
.hero,#contacto{background:#FFFFFF}
.hero .partner{border-bottom-color:rgba(44,44,44,.25)}
.hero .partner img{background:#fff;border-radius:18px;padding:14px 18px;box-sizing:content-box;width:230px}
.hero .partner p{border-left-color:var(--ink)}
.hero .btn,#contacto .btn{background:var(--azul);color:var(--ink)}
.hero .link,.hero .hero-contact a{border-bottom-color:var(--ink)}
.pack::before{background:var(--azul)}
#contacto .c-card{background:#fff;border-color:var(--line)}
#contacto .c-wa{background:var(--azul);border-color:var(--azul);color:var(--ink)}
#contacto .c-wa svg{color:var(--ink)}
#contacto .c-addr{color:var(--ink)}
@media (max-width:520px){.hero .partner img{width:190px}}
.wa{background:var(--azul);color:var(--ink)}


/* why choose */
.why{margin:-.5rem 0 3rem}
.why-eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.why-title{font:400 clamp(1.4rem,2.4vw,1.8rem)/1.2 var(--serif);margin:0 0 1.5rem}
.why-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--azul);color:var(--ink);margin-bottom:1rem}
.why-card h4{font:700 1.08rem/1.3 var(--sans);margin:0 0 .4rem}
.why-card p{font-size:.95rem;line-height:1.55}
.why-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:1rem}
.why-card{border:1px solid var(--line);border-radius:20px;padding:1.6rem 1.5rem;background:#fff}
.why-op{align-self:center;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#FFFFFF;border:2px solid var(--ink);color:var(--ink);font:400 2.2rem/1 var(--sans)}
.why-result{background:var(--azul);border-color:var(--azul)}
.why-result .why-ico{background:#fff}
.why-result h4{font-size:1.18rem}
@media (max-width:860px){
  .why-eq{grid-template-columns:1fr;gap:.75rem}
  .why-op{justify-self:center;width:48px;height:48px;font-size:1.9rem}
}

/* ===== Larger type & logos (owner request) ===== */
html{font-size:118.75%;scroll-padding-top:200px} /* 19px base desktop */
h1{font-size:clamp(2.7rem,6vw,4.9rem);max-width:13ch}
h2{font-size:clamp(2.1rem,3.8vw,3.1rem)}
.lead{font-size:1.25rem}
.btn{font-size:1.05rem;padding:1.1rem 1.8rem}
.btn-sm{font-size:.95rem;padding:.8rem 1.25rem}
.nav a{font-size:1rem}
.hero-contact{font-size:1.1rem}
.c-v{font-size:clamp(1.25rem,2vw,1.6rem)}
.why-title{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.why-card h4{font-size:1.15rem}
.why-card p{font-size:1rem}
.header-in{height:150px}
.brand img{height:124px}
.hero .partner img{width:310px}
.partner p{font-size:1.1rem;max-width:26ch}
.footer img{width:220px}
@media (max-width:860px){html{font-size:112.5%}}
@media (max-width:520px){
  html{font-size:106.25%;scroll-padding-top:150px} /* 17px base mobile */
  h1{font-size:2.45rem}
  h2{font-size:2rem}
  .header-in{height:104px}
  .brand img{height:84px}
  .btn-sm{font-size:.9rem;padding:.7rem .95rem}
  .hero .partner img{width:250px}
  .footer img{width:180px}
}

/* ===== Monospace typography + larger scale (owner request) ===== */
:root{--serif:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
html{font-size:143.75%;scroll-padding-top:230px} /* 23px base desktop */
body{line-height:1.55}
h1,h2{font-weight:800;letter-spacing:-.03em;line-height:1.06}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:15ch}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.why-title{font-weight:700;letter-spacing:-.02em}
.figures strong{font-weight:700;letter-spacing:-.03em}
.figures{grid-template-columns:repeat(3,1fr)}
.lead{font-size:1.1rem;max-width:36ch}
.wrap{width:min(100% - 2.5rem,1240px)}
.header-in{height:190px}
.brand img{height:160px}
.hero .partner img{width:400px}
.partner p{font-size:1rem;max-width:24ch}
.footer img{width:280px}
.why-eq{gap:.9rem}
.why-card{padding:1.4rem 1.3rem}
.why-op{width:64px;height:64px;font-size:2.4rem}
.c-v{font-size:clamp(1.05rem,1.7vw,1.35rem)}
@media (max-width:1100px){html{font-size:131.25%}}
@media (max-width:860px){html{font-size:125%}.hero .partner img{width:340px}}
@media (max-width:520px){
  html{font-size:125%;scroll-padding-top:150px} /* 20px base mobile */
  .wrap{width:calc(100% - 2rem)}
  h1{font-size:1.9rem;max-width:none}
  h2{font-size:1.6rem}
  .lead{font-size:1.02rem}
  .header-in{height:128px}
  .brand img{height:108px}
  .header .btn-sm{display:none}
  .lang{margin-left:auto}
  .topbar{font-size:.72rem}
  .topbar-wa{padding:.3rem .65rem}
  .hero .partner img{width:300px;padding:10px 12px}
  .partner p{font-size:.95rem;max-width:none}
  .figures{grid-template-columns:1fr}
  .figures li{padding:1.2rem 0}
  .why-title{font-size:1.45rem}
  .c-card{padding:1.25rem}
  .c-v{font-size:1rem}
  .hero-contact{font-size:.95rem}
  .footer img{width:220px}
  .btn{font-size:.95rem;padding:1rem 1.4rem}
}
/* bump headings for mono */
h1{font-size:clamp(2.4rem,6.2vw,4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.narrow{max-width:960px}
@media (max-width:520px){h1{font-size:1.9rem}h2{font-size:1.6rem}}

/* ===== Lighter, smaller typography (owner request, Oct 16 2026) ===== */
:root{--serif:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
html{font-size:106.25%} /* 17px base desktop */
body{font-weight:300;line-height:1.6}
b,strong{font-weight:500}
h1,h2{font-weight:300;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
h3,h4,.why-title,.figures strong{font-weight:400}
.c-v,.tags,.hero-contact,.partner p,.link,.status,.f label,.topbar a,.topbar-label,.nav a{font-weight:400}
.kicker,.c-k,.why-eyebrow,.q-alt a{font-weight:500}
.btn{font-weight:500}
@media (max-width:1100px){html{font-size:103%}}
@media (max-width:860px){html{font-size:100%}}
@media (max-width:520px){html{font-size:100%}h1{font-size:1.75rem}h2{font-size:1.45rem}}
/* +2px (owner request) */
html{font-size:118.75%} /* 19px */
@media (max-width:1100px){html{font-size:115%}}
@media (max-width:860px){html{font-size:112.5%}}
@media (max-width:520px){html{font-size:112.5%}}

/* ===== All text bold (owner request, Oct 17 2026) ===== */
body{font-weight:700}
body *,body *::before,body *::after,input,select,textarea,button,::placeholder{font-weight:700!important}
h1,h2,.why-title,.figures strong{font-weight:800!important}

/* v20261111a — SEO pages (about, products, contact, Honduras) + keyword line in home H1 */
.h1-kw{display:block;font:700 clamp(.95rem,1.6vw,1.1rem)/1.3 var(--sans);letter-spacing:.02em;margin-bottom:.9rem;max-width:none}
.nav-pages{gap:1.5rem}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:6px}
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0;border-bottom:1px solid var(--line)}
.h1-page{max-width:22ch;font-size:clamp(2.1rem,4.4vw,3.4rem)}
.lead-wide{max-width:60ch}
.crumbs{font-size:.85rem;margin-bottom:1.25rem;opacity:.8}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--azul)}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:start}
.prose p{margin:0 0 1.1rem;max-width:68ch}
.prose h2{margin-bottom:1.25rem}
.prose a{border-bottom:2px solid var(--azul);text-decoration:none}
.pack-sm picture{width:min(300px,70%)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem;margin-bottom:2.5rem}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem}
.card h3{margin:0 0 .5rem;font-size:1.1rem}
.facts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:220px 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.facts span{font-weight:700}
.spec{width:100%;border-collapse:collapse;margin-top:1.5rem}
.spec caption{text-align:left;font-weight:700;padding-bottom:.6rem}
.spec th,.spec td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:38%}
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line);padding:1rem 0}
.faq-i summary{cursor:pointer;font-weight:700;font-size:1.05rem}
.faq-i p{margin:.75rem 0 0;max-width:70ch}
.cta-band h2{margin-bottom:1rem}
.sub-p{margin-bottom:1.75rem;font-size:1.1rem}
.contact-note{margin-top:2.5rem}
.footer a{text-decoration:none;border-bottom:1px solid var(--azul)}
@media (max-width:860px){.two-col{grid-template-columns:1fr}.facts li{grid-template-columns:1fr;gap:.2rem}.nav-pages{display:none}}