/* ==========================================================================
   LATAMARKO — Cocoa landing v2 (Spanish origin · four LM products)
   Loaded AFTER style.css — only adds: section tones + new components.
   Nothing here overrides v1 markup, so index.html stays untouched.
   ========================================================================== */

/* 1. Section tones for the tone journey (main.js reads --tone-stop) ------- */

[data-tone="products"]{--tone-stop:#f6f1e9}
[data-tone="journey"]{--tone-stop:#f1e9db}
[data-tone="compare"]{--tone-stop:#f6f1e9}
[data-tone="apps"]{--tone-stop:#f3ecdd}
[data-tone="brand"]{--tone-stop:#efe5d2}
[data-tone="sample"]{--tone-stop:#f6f1e9}
[data-tone="buy"]{--tone-stop:#f1e9db}
[data-tone="faq"]{--tone-stop:#f3ecdd}
[data-tone="pick"]{--tone-stop:#f6f1e9}
[data-tone="final"]{--tone-stop:#f3ecdd}

/* Hero CoA strip — four cells in v2 */
.v2 .coa-strip{grid-template-columns:repeat(4,1fr)}

@media (max-width:1080px){
  .v2 .coa-strip{grid-template-columns:repeat(2,1fr)}
  .v2 .coa-cell:nth-child(odd){border-inline-start:0}
  .v2 .coa-cell:nth-child(n+3){border-top:1px solid var(--line-light)}
}
@media (max-width:600px){
  .v2 .coa-cell:nth-child(n+3){border-top:1px solid var(--line-light)}
}

/* 2. Products index strip -------------------------------------------------- */

.prod-index{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(123,45,38,.04);
  overflow:hidden;margin-bottom:2rem;
}
.prod-index a{
  display:grid;gap:.2rem;padding:1rem 1.2rem;
  text-decoration:none;color:inherit;
  border-inline-start:1px solid var(--line);
  transition:background-color .25s;
}
.prod-index a:first-child{border-inline-start:0}
.prod-index a:hover{background:rgba(123,45,38,.08)}
.prod-index b{
  font-family:var(--font-mono);font-size:.95rem;font-weight:700;
  color:var(--brand-red);
}
.prod-index span{font-size:.85rem;color:var(--muted)}
.prod-cap{
  grid-column:1/-1;padding:.6rem 1.2rem;
  font-size:.82rem;color:var(--faint);
  border-top:1px solid var(--line);
}

/* 3. Product cards (extend .grade-card from style.css) -------------------- */

.prod-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;
}
.prod-card{display:flex;flex-direction:column}
.prod-head{gap:.9rem}
.prod-num{
  font-family:var(--font-mono);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;color:var(--faint);flex:none;
}
.prod-head h3{font-size:1.12rem}
.prod-head .prod-code{
  font-family:var(--font-mono);color:var(--brand-red);
}
.prod-latin{
  font-family:var(--font-mono);font-size:.74rem;
  letter-spacing:.06em;color:var(--faint);
}
.prod-desc{
  display:grid;gap:.55rem;
  font-size:.92rem;color:var(--muted);
  margin-bottom:1.1rem;
}
.prod-apps{margin-bottom:0}
.prod-apps>b{
  display:block;font-size:.85rem;color:var(--muted);margin-bottom:.6rem;
}
.prod-cta{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-top:1.2rem;padding-top:1.2rem;
  border-top:1px dashed var(--line);
}

/* 4. Colour journey band --------------------------------------------------- */

.journey-latin{
  font-family:var(--font-mono);font-size:.85rem;
  letter-spacing:.22em;color:var(--brand-red);
  margin-bottom:1.1rem;
}
.journey-title{
  font-size:clamp(1.7rem,4.2vw,2.6rem);font-weight:800;letter-spacing:-.01em;
}
.journey-sub{
  margin-top:1rem;display:grid;gap:.6rem;
  color:var(--muted);max-width:74ch;
}
.journey-line{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:2.4rem;
}
.journey-line li{
  display:grid;gap:.75rem;justify-items:start;
  background:color-mix(in srgb,var(--tone) 94%,#fff);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.3rem;
  transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s;
}
.journey-line li:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.journey-line li.is-special{border-color:rgba(201,138,45,.55)}
.journey-line b{
  font-family:var(--font-mono);font-size:1rem;font-weight:700;
}
.journey-line span{font-size:.85rem;color:var(--muted)}
.journey-line em{
  font-style:normal;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.12em;color:var(--faint);
}
.swatch.xl{width:54px;height:54px;border-radius:16px}

/* 5. Comparison table ------------------------------------------------------- */

.cmp-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius);
  background:color-mix(in srgb,var(--tone) 94%,#fff);
}
.cmp-table{
  width:100%;min-width:780px;border-collapse:collapse;
}
.cmp-table th,.cmp-table td{
  padding:.85rem 1rem;text-align:center;font-size:.9rem;
}
.cmp-table thead th{
  font-family:var(--font-display);font-weight:800;
  background:var(--ink-dark);color:var(--ink-light);
}
.cmp-table thead th:first-child{text-align:start}
.cmp-table .th-dot{
  display:inline-block;width:10px;height:10px;border-radius:3px;
  background:var(--sw);margin-inline-end:.45rem;vertical-align:baseline;
}
.cmp-table tbody th{
  text-align:start;font-weight:600;color:var(--muted);
  background:rgba(123,45,38,.05);white-space:nowrap;
}
.cmp-table tbody tr{border-top:1px solid var(--line)}
.cmp-table tbody td{font-weight:600}
.cmp-table .ltr{
  font-family:var(--font-mono);font-size:.82rem;direction:ltr;
}
.cmp-table .hit{animation:cmphit 2.2s var(--ease-out)}
@keyframes cmphit{
  0%{background:rgba(201,138,45,.3)}
  70%{background:rgba(201,138,45,.3)}
  100%{background:transparent}
}
.cmp-note{
  margin-top:1.6rem;font-size:.95rem;color:var(--muted);max-width:72ch;
}
.cmp-note b{color:var(--ink)}
.cmp-cta{margin-top:1.5rem}

/* 6. Application cards ------------------------------------------------------- */

.appx-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
}
.appx-card{
  display:flex;flex-direction:column;gap:.55rem;
  background:color-mix(in srgb,var(--tone) 94%,#fff);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.5rem;
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.appx-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.appx-card h3{font-size:1.05rem;font-weight:800;margin-top:.5rem}
.appx-card p{font-size:.92rem;color:var(--muted)}
.rec{
  margin-top:auto;padding-top:.8rem;
  border-top:1px dashed var(--line);
  font-size:.88rem;color:var(--muted);
}
.rec a{
  display:inline-block;font-family:var(--font-mono);
  font-size:.76rem;font-weight:700;text-decoration:none;
  color:var(--brand-red);
  border:1px solid rgba(123,45,38,.3);border-radius:999px;
  background:rgba(123,45,38,.06);
  padding:.1rem .65rem;margin-inline-start:.3rem;
  transition:background-color .25s,color .25s;
}
.rec a:hover{background:var(--brand-red);color:#fff}

/* 7. Brand statement band ----------------------------------------------------- */

.brand{position:relative;overflow:hidden}
.brand-inner{text-align:center;max-width:840px}
.brand-eyebrow{
  font-family:var(--font-display);
  font-size:clamp(2rem,6vw,3.1rem);font-weight:900;
  color:var(--brand-red);letter-spacing:-.01em;
}
.brand-title{
  font-size:clamp(1.4rem,3.6vw,2.1rem);font-weight:800;margin-top:.5rem;
}
.brand-sub{margin-top:1.4rem;color:var(--muted)}
.brand-meta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;
  margin-top:1.9rem;
}
.brand-meta li{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.9rem;font-weight:700;color:var(--brand-red);
  border:1px solid rgba(123,45,38,.25);border-radius:999px;
  background:rgba(123,45,38,.05);
  padding:.42rem 1.15rem;
}
.brand-meta img{width:22px;height:16px;border-radius:3px;object-fit:cover}
.brand-watermark{
  position:absolute;inset-inline:0;
  text-align:center;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:900;line-height:.8;
  /* line-height < 1 pulls the caps above the section's bottom edge — with
     line-height:1 the baseline landed past .brand's overflow:hidden clip. */
  font-size:clamp(2.4rem,10.6vw,10rem);
  letter-spacing:-.03em;
  white-space:nowrap;
  color:transparent;
  background:linear-gradient(
    180deg,
    rgba(123,45,38,.14) 0%,
    rgba(201,138,45,.38) 48%,
    rgba(123,45,38,.16) 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  /* No -webkit-text-stroke here: Inter's glyphs are built from overlapping
     components and the stroke would expose their internal edges as seams. */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-watermark{
    color:rgba(123,45,38,.12);
    -webkit-text-fill-color:rgba(123,45,38,.12);
  }
}
@media (max-width:480px){
  .brand-watermark{
    font-size:clamp(2rem,10.5vw,3.2rem);
    letter-spacing:-.04em;
    -webkit-text-stroke-width:.75px;
  }
}

/* 8. Sample section ------------------------------------------------------------ */

.sample-grid{
  display:grid;grid-template-columns:1fr .9fr;gap:1.4rem;
  align-items:stretch;
}
.sample-list{display:grid;gap:.8rem;align-content:start}
.sample-row{
  display:flex;align-items:center;gap:1rem;
  background:color-mix(in srgb,var(--tone) 94%,#fff);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.05rem 1.25rem;
  text-decoration:none;color:inherit;
  transition:border-color .25s,transform .25s var(--ease-out);
}
.sample-row:hover{border-color:var(--brand-red);transform:translateY(-2px)}
.sample-row b{
  font-family:var(--font-mono);font-size:.95rem;font-weight:700;
  color:var(--brand-red);
}
.sample-row span{color:var(--muted);font-size:.92rem}
.sample-row::after{
  content:"→";margin-inline-start:auto;
  color:var(--brand-red);font-weight:700;
  transition:transform .25s var(--ease-out);
}
.sample-row:hover::after{transform:translateX(4px)}
.sample-panel{
  display:grid;align-content:start;gap:1.1rem;
  background:var(--ink-dark);color:var(--ink-light);
  border-radius:var(--radius);padding:1.9rem;
  box-shadow:var(--shadow-dark);
}
.sample-kicker{
  font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:.12em;color:var(--gold);
}
.sample-panel>p{color:var(--muted-light);font-size:1rem}
.sample-panel .btn{width:100%}

/* 9. Buy routes ------------------------------------------------------------------ */

.buy-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
}
.buy-card{
  display:flex;flex-direction:column;gap:.7rem;
  background:color-mix(in srgb,var(--tone) 94%,#fff);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.6rem;
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.buy-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.buy-card.is-wide{grid-column:1/-1}
.buy-card h3{font-size:1.12rem;font-weight:800}
.buy-card p{font-size:.92rem;color:var(--muted)}
.buy-meta{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem;
}
.buy-meta li{
  font-size:.78rem;font-weight:700;color:var(--brand-red);
  border:1px solid rgba(123,45,38,.22);border-radius:999px;
  background:rgba(123,45,38,.05);
  padding:.2rem .8rem;
}
.buy-card .btn{margin-top:auto;align-self:flex-start}

/* 10. Pick band ------------------------------------------------------------------- */

.pick-inner{text-align:center;max-width:820px;margin-inline:auto}
.pick-inner .section-sub{margin-inline:auto;text-align:center}
/* Opener photo — sits on .shot (radius + dark underlay while loading) */
.pick-shot{
  width:min(600px,100%);
  margin:0 auto 2.2rem;
  aspect-ratio:1000/750;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.pick-chips{justify-content:center;margin:1.5rem 0 1.9rem}

/* 11. Final CTA band ---------------------------------------------------------------- */

.final-inner{text-align:center;max-width:860px;margin-inline:auto}
.final-title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,5vw,3rem);font-weight:900;letter-spacing:-.01em;
}
.final-line{margin-top:.9rem;font-weight:600;color:var(--muted)}
.final-brand{
  margin-top:1.7rem;display:grid;gap:.35rem;justify-items:center;
}
.final-brand b{
  font-family:var(--font-display);font-size:1.25rem;font-weight:800;
}
.final-brand span{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.9rem;font-weight:600;color:var(--muted);
}
.final-brand img{width:22px;height:16px;border-radius:3px;object-fit:cover}
.final-cta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;
  margin-top:1.9rem;
}

/* 12. Responsive -------------------------------------------------------------------- */

@media (max-width:1080px){
  .appx-grid{grid-template-columns:repeat(2,1fr)}
  .journey-line{grid-template-columns:repeat(2,1fr)}
  .prod-index{grid-template-columns:repeat(2,1fr)}
  .prod-index a:nth-child(odd){border-inline-start:0}
  .prod-index a:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:820px){
  .prod-grid{grid-template-columns:1fr}
  .sample-grid{grid-template-columns:1fr}
  .buy-grid{grid-template-columns:1fr}
  .buy-card.is-wide{grid-column:auto}
}
@media (max-width:600px){
  .header-inner{
    width:100%;padding-inline:10px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  }
  .logo{grid-column:2;grid-row:1;justify-self:center}
  .header-actions{grid-column:3;grid-row:1;justify-self:end;margin:0}
  .mobile-menu-close{inset-inline-end:10px}
  .appx-grid,.journey-line,.prod-index{grid-template-columns:1fr}
  .prod-index a{border-inline-start:0}
  .prod-index a:nth-child(n+2){border-top:1px solid var(--line)}
}

/* 13. Fixes: mobile-menu layering + dual-tone logo ------------------------- */

/* The open menu (z 90) used to cover the header (z 80) — including the
   burger, so there was no way to close it on touch. Keep the menu just
   below the header: the burger stays visible and becomes the close (×). */
.v2 .mobile-menu{z-index:79}

/* Dual-tone logo: the wordmark exists in white and cocoa variants. Both
   images stack on one spot; .is-dark (toggled by main.js together with the
   header tone) cross-fades them, so the mark always meets its background
   with enough contrast — dark hero/contact get white, light sections get
   cocoa. v2.js hides a missing file and forces the other one visible. */
.v2 .logo{display:grid}
.v2 .logo img{
  grid-area:1/1;width:auto;
  transition:opacity .45s var(--ease-out);
}
.v2 .logo .logo-white{opacity:0}
.is-dark .v2 .logo .logo-white{opacity:1}
.is-dark .v2 .logo .logo-cocoa{opacity:0}
.v2 .logo img.is-dead{display:none}
.v2 .logo img.is-forced{opacity:1!important}

/* 14. Hero photo crossfade ---------------------------------------------------
   The hero figure stacks two photos (alkalized + natural) on one grid cell.
   v2.js toggles .is-alt every 2 s; the top photo fades in over the base one,
   which always stays painted underneath, so the frame never goes blank
   mid-swap. The figure keeps its browser-default margins on purpose —
   that is the layout the bare v2 hero was designed with. */

.v2 .hero-inner > figure{
  display:grid;
  aspect-ratio:750/938; /* both hero photos are exactly 750×938 */
  overflow:hidden;
}
.v2 .hero-inner > figure img{
  grid-area:1/1;
  width:100%;height:100%;
  object-fit:cover;
}
.v2 .hero-inner > figure img + img{
  opacity:0;
  transition:opacity 1.2s var(--ease-out);
}
.v2 .hero-inner > figure.is-alt img + img{opacity:1}
@media (prefers-reduced-motion:reduce){
  .v2 .hero-inner > figure img + img{transition:none}
}

/* 15. Catalog styles live with .contact-catalog (style.css §6) --------------- */

/* 16. Comparison: sticky first column + mobile scroll hint -------------------- */

.cmp-table tbody th{
  position:sticky;inset-inline-start:0;z-index:1;
  background:#f9f5ef;
}
.cmp-table thead th:first-child{
  position:sticky;inset-inline-start:0;z-index:2;
  background:var(--ink-dark);
}
.cmp-hint{
  display:none;
  font-size:.8rem;color:var(--muted);
  padding:.55rem .9rem;border-bottom:1px solid var(--line);
  background:rgba(123,45,38,.04);
}
@media (max-width:860px){
  .cmp-hint{display:block}
}

/* 17. Sample fine print ------------------------------------------------------- */

.sample-fine{
  font-size:.82rem;color:var(--muted-light);
  border-top:1px dashed var(--line-light);
  padding-top:.8rem;
}

/* 18. Sticky mobile CTA bar ---------------------------------------------------
   Appears after the hero, hides while the contact form is on screen so it
   never covers the fields. The floating WhatsApp pill is hidden on mobile
   because this bar already carries a WhatsApp action. */

.m-cta{
  position:fixed;inset-inline:0;bottom:0;z-index:75;
  display:none;gap:.6rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(18,8,6,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(245,237,224,.14);
  transform:translateY(110%);
  transition:transform .35s var(--ease-out);
}
.m-cta .btn{flex:1;min-height:44px}
.m-cta .btn-ghost{color:var(--ink-light);border-color:rgba(245,237,224,.35)}
.m-cta .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.m-cta.is-on{transform:none}
.m-cta.is-off{transform:translateY(110%)}
@media (max-width:820px){
  .m-cta{display:flex}
  .wa-float{display:none}
}

/* 19. Content-update additions --------------------------------------------
   Small helpers for the cocoa-ingredients copy: multi-paragraph FAQ answers,
   the bean-story closing line and the applications kicker in the contact
   column (gold mono reads well on the dark contact surface). */

.acc-body p + p{margin-top:.6rem}
.journey-close{margin-top:2.2rem}
.contact-kicker{margin:-.6rem 0 1.8rem}

/* Ingredient sections: copy column facts + product photo in place of the
   old dark panel. The square product shots (750×750) keep their natural
   ratio; the frame reuses .shot (radius + dark underlay while loading). */
.ing-fact{margin-top:1.4rem;font-size:1.05rem}
.ing-apps{margin-top:1rem}
.ing-cta{margin-top:1.6rem}
.ing-shot{align-self:start;width:100%;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.ing-shot img{height:auto}