/* Self-hosted 2026-08-31. Replaces Chivo + Chivo Mono from Google Fonts.
   These are LICENSED DESKTOP faces (Taylor Penton; TWK), served here as
   webfonts, which a desktop licence does not cover. Justin's call, made
   knowingly on 2026-08-31: run the $300 test on the real typography and buy
   the webfont licence if the business proves out. Recorded in DECISIONS.md so
   nobody later assumes it was an oversight.
   Served as raw OTF on purpose -- the usual WOFF2 + subset step is font
   MODIFICATION, which the Penton EULA prohibits outright, so the smaller file
   would be the larger breach. Cost is page weight; see DECISIONS.md. */
@font-face{font-family:"Lindero Display";src:url("/fonts/TAYManna.otf")format("opentype");
  font-weight:700;font-display:swap}
/* Amaya (the poster's state line) is deliberately NOT served. Nothing on the
   site sets type in it, and an unused @font-face is 73 KB of phone data for a
   face nobody sees. If the state line ever wants to rhyme with the poster,
   add it back with a rule that uses it -- not before. */
@font-face{font-family:"Lindero Text";src:url("/fonts/TWKEverett-Regular.otf")format("opentype");
  font-weight:400;font-display:swap}
@font-face{font-family:"Lindero Text";src:url("/fonts/TWKEverett-Medium.otf")format("opentype");
  font-weight:500 700;font-display:swap}

/* GENERATED-ADJACENT: extracted verbatim from the old single-file
   site/index.html by the CP1 refactor. Root-absolute asset paths are
   the ONLY change, so that a page served from a subdirectory cannot
   break; served from the root it is a visual no-op, which is the bar
   this checkpoint is held to.
   Page-specific rules belong in their own file, not appended here. */
:root{
  --cochinilla:#A32B3E; --tinta:#1B1815; --cal:#F1E8D9; --verde:#1F6A4F;
  --rojo:#B4262F; --carbon:#4A4640; --piedra:#9C9184; --arena:#E0D4C0;
  --blanco:#FBF7F0;
  /* Ground behind a framed mockup. Matched to the mockups' own baked-in
     ground so the image has no visible bounding box. Sampled: the renders run
     #E7E3DA at the top to #E5E1D6 at the bottom, so this sits in that range --
     a flat colour cannot match a gradient at both ends, and this is the value
     that makes the seam disappear where the eye lands. */
  --marco:#E7E2D8; --coch-oscura:#732430; --coch-palida:#E3C6BD;
}
/* The mockups carry their own margin around the frame, so the frame's edge is
   NOT the image's edge. Type aligned to the image reads as misaligned against
   the frame -- invisible while the image sat on a contrasting card, obvious
   now that the ground matches. Measured on the renders: the frame starts at
   19.33% from the left and the same from the right, on every one of the 44
   (they come from one script, so this is a constant, not an average).
   Anything set beside a framed mockup indents by this. */
:root{
  --frame-inset:19.33%;
}
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding-top, not a magic number on each target: every in-page anchor
   (/#busca and /#historia from the footer, and the search results) would
   otherwise land underneath the sticky chrome. 78px covers 18+22+18 of header
   plus the 6px tricolor, with room for the 430px tier. */
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{background:var(--cal);color:var(--tinta);font:16px/1.5 "Lindero Text",system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* .mono kept as a hook; no longer monospace -- the mono WAS the tell. */
.mono{font-family:"Lindero Text",system-ui,sans-serif;letter-spacing:.02em}

.ticker{background:var(--tinta);color:var(--cal);overflow:hidden;white-space:nowrap;
  font:11px/2.6 "Lindero Text",system-ui,sans-serif;letter-spacing:.08em}
.ticker span{display:inline-block;padding-left:100%;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

/* Sticky as of 2026-09-03. z-index 30 puts it under #grain (40) and #pop (50)
   and over everything else -- the grain veil is meant to sit over the whole
   page including this, and a modal must never open behind the header.
   An opaque background is not optional on a sticky row: without it the page
   scrolls through the chrome. */
.chrome{position:sticky;top:0;z-index:30;background:var(--cal);
  border-bottom:1px solid var(--tinta)}
/* The hairline is UNDER the tricolor, and it is not decoration.
   .tricolor works in the footer because the footer ground is dark. Here it is
   cream above (--cal #F1E8D9) and #busca's --blanco #FBF7F0 below -- and the
   flag's middle band IS --blanco, so the white third had no edge on either
   side and the row read as green | gap | red. The rule gives it a bottom. */
/* The row is closed by .tricolor, not by a hairline -- see chrome-top.html. */
header{display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px}
header .wordmark{height:22px;width:auto}
#coords{font:12px/1.4 "Lindero Text",system-ui,sans-serif;color:var(--carbon);text-align:right}
#coords b{display:block;font-weight:400;color:var(--tinta)}

/* The second chrome row is gone as of 2026-09-03 -- see the note in
   pages/partials/chrome-top.html for why. What was `nav .right` is now
   `.chrome-right`, grouped with the coordinates so that hiding the
   coordinates under 760px leaves the controls exactly where they were
   rather than re-flowing the row.

   The overflow discipline the nav taught still applies and is still cheap to
   keep: a chrome row that does not fit drags the WHOLE document sideways,
   because #grain and #pop are position:fixed and inherit the document width.
   Assert on the number, not by eye, at 375 AND 320, in BOTH languages:
     document.documentElement.scrollWidth - document.documentElement.clientWidth
   must be 0. This row is far below budget now (wordmark + ES/EN + a glyph),
   which is margin to spend deliberately, not margin to forget about. */
.chrome-right{display:flex;align-items:center;gap:20px}
#cart{display:flex;align-items:center;color:var(--tinta)}
#cart svg{width:19px;height:19px;display:block}
#cart:hover{color:var(--cochinilla)}
#lang{display:flex;gap:6px;font:12px "Lindero Text",system-ui,sans-serif;letter-spacing:.05em;
  border:1px solid var(--arena);padding:6px 10px;cursor:pointer;background:none;color:var(--piedra)}
#lang span.on{color:var(--tinta);font-weight:700;text-decoration:underline;text-underline-offset:3px}
#lang:hover{border-color:var(--tinta)}

/* The .hero type rules (eyebrow, h1, sub, CTA) lived here until 2026-09-03 and
   are gone with the hero itself -- the h1 moved to .showcase in
   pages/css/index.css and the other three were deleted with the module. The
   one piece of that block worth keeping is the sizing lesson, and it has moved
   to .showcase h1 where the size actually lives. Recover the rest from git if
   a photographic hero ever comes back. */


/* space-between is right for this row and always was -- it serves TWO strips:
   the collection strip, which has two children and wants one at each edge, and
   the hero spec strip, which has one.

   strip1 was cut on 2026-08-30 for competing with the CTA, leaving the hero
   spec as an only child -- and space-between parks a lone child at the START,
   so it slid left under the CTA and inherited the problem the cut was meant to
   remove. The first fix flipped the shared rule to flex-end, which put the hero
   spec right and jammed the collection strip's two children together on the
   right. One bug, then its mirror.

   :only-child + margin-left:auto pushes a lone child right and does nothing
   when there are two, so both strips are correct and a strip that gains or
   loses a child stays correct without anyone remembering this. */
.strip{display:flex;justify-content:space-between;padding:14px 28px;
  border-bottom:1px solid var(--tinta);font-weight:700;font-size:13px;letter-spacing:.12em}
.strip > :only-child{margin-left:auto}
/* Phone tier, added 2026-09-03 when strip1 got its left side back and the row
   carried two labels for the first time on a phone. At 13px/.12em inside 375
   BOTH halves wrapped to two lines -- the same ragged failure the nav tiers
   exist to prevent, and it looks like a broken row rather than an overflow.
   The copy was shortened as well; the size tier alone was not enough.
   If a future label wraps here, shorten the label or the tier -- do not reach
   for nowrap, which converts a wrap into a document-wide horizontal scroll. */
@media(max-width:430px){
  .strip{font-size:11px;letter-spacing:.05em;padding-left:18px;padding-right:18px;gap:14px}
}
@media(max-width:340px){
  .strip{font-size:10px;letter-spacing:.02em;padding-left:14px;padding-right:14px;gap:10px}
}
/* --carbon, not --piedra. HANDOFF's locked brand section says piedra is
   PRINT-ONLY because it fails WCAG on web, and this strip moved above the fold
   on 2026-09-03 carrying the price. Measured: piedra #9C9184 on cal #F1E8D9 is
   2.54:1 against the 4.5:1 normal-text minimum, and at the 11px phone tier
   this is unambiguously normal text. --carbon is 7.72:1 and reads as the same
   quiet grey. See STATUS for the other web uses of piedra still outstanding. */
.strip .mono{font-weight:400;color:var(--carbon)}

.shead{text-align:center;padding:56px 28px 34px}
.shead .kicker{font:12px/1 "Lindero Text",system-ui,sans-serif;color:var(--piedra);letter-spacing:.1em}
.shead h2{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:.02em;
  line-height:1.05;text-wrap:balance;margin-top:10px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--tinta)}
.split a{position:relative;display:block}
.split img{width:100%;height:72vh;object-fit:cover}
/* same block as the hero CTA -- one button language everywhere */
.split .pill{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--tinta);color:var(--cal);padding:15px 26px;
  font-weight:700;font-size:13px;letter-spacing:.16em}
.split a:hover .pill{background:var(--coch-oscura)}

/* The top border is suppressed when #busca follows the chrome directly, which
   on the homepage it now always does: a 6px tricolor and a 1px black rule
   stacked read as two dividers for one seam. */
.chrome + #busca{border-top:0}
/* Pale cochineal, not --blanco. The page was cream, black and tan end to end
   and the first module a stranger meets was the most neutral thing on it.
   This is a brand colour already carried by the how-it-works block, not a new
   one, and it costs zero layout pixels -- which matters because the whole
   point of this module's position is that the input stays in the first screen.
   The tricolor above it now has a warm ground under its white band too. */
/* ---- #busca background footage ----------------------------------------
   Layer order, bottom to top: the --coch-palida ground, the video, a scrim of
   that same ground, the page's own grain, then .wrap.

   The scrim is not decoration and its opacity is not a taste call. The old
   hero carried a two-part structural scrim and the note on it said contrast
   has to be a property of the LAYOUT, not of the particular image -- and a
   video is harder than a photograph, because its contrast changes frame by
   frame. This module carries a bordered input, a grey placeholder and body
   copy. The placeholder is the first thing to go illegible.

   So the scrim is tuned until the text clears WCAG against the BRIGHTEST
   frame, not an average one, and the number is asserted rather than eyeballed.
   If the footage is ever swapped, re-measure -- do not assume the new clip is
   as bright as this one.

   saturate(.4): the clip is saturated pink/green/yellow papel picado against
   blue sky, which is a long way from a palette of cochineal, tinta and cal.
   Desaturating pulls it toward texture and away from postcard. */
#busca .bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#busca .bg video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.4) contrast(.9) brightness(1.04);
  opacity:0;transition:opacity .9s ease;
}
#busca .bg video.on{opacity:1}
/* Scrim + grain, both on pseudo-elements so they paint over the video without
   another element in the markup. The grain is the SAME feTurbulence data URI
   as #grain, at a higher opacity -- one noise for the whole site. */
#busca .bg::after{
  content:"";position:absolute;inset:0;
  /* Transparent black, and .55 was solved for rather than chosen. Composite
     every frame through the same filter and scrim, sample the h2's and the
     paragraph's own bounding boxes, take the WORST frame (for light type that
     is the brightest one, and this clip is bright):

         .42  body 3.11  FAILS      .48  body 3.76  FAILS
         .55  body 4.74  passes     .62  body 6.05  passes

     .55 is the least black that clears 4.5 on body copy, which matters because
     every extra point of black is footage you paid for and cannot see.

     This replaced a --coch-palida scrim at .88. Note what the inversion does:
     over a pale scrim the risk was the DARKEST frame, over a dark one it is
     the BRIGHTEST, and the type had to flip from tinta/carbon to cal in the
     same move. A dark scrim with dark type is the failure this pairing invites.
     Re-run the measurement if the footage changes. */
  background:rgba(0,0,0,.55);
}
#busca .bg::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
#busca .wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){#busca .bg video{display:none}}
/* The base is --tinta, not the footage's average colour and not the old pink.
   It is the FALLBACK state: no video (reduced motion, a failed request, a
   codec a browser will not take) must still leave light type on a dark ground.
   Tinta under cal is ~14:1, so the module is at its most legible exactly when
   the decoration is missing. */
#busca{position:relative;isolation:isolate;overflow:hidden;background:var(--tinta);border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);
  padding:70px 28px}
#busca .wrap{max-width:680px;margin:0 auto;text-align:center}
/* Display headings need an explicit line-height. Without one they inherit the
   body's 1.5, which is right for a 16px paragraph and far too loose at 44px --
   two lines of a headline end up floating apart. #busca h2, .shead h2 and
   #pop h3 all inherited it; the ones that looked fine (hero, memoria, story,
   policy, collection, pdp) were the ones that happened to set it. */
/* Same size as the memoria h2. They are peer section heads and were 44 vs 56,
   which read as a hierarchy nobody intended. Body copy matched too: this was
   13px against memoria's 15px. */
#busca h2{font-size:clamp(28px,4.7vw,56px);font-weight:700;line-height:1.06;text-wrap:balance;color:var(--cal)}
#busca p{margin-top:14px;font:15px/1.75 "Lindero Text",system-ui,sans-serif;color:var(--cal)}
/* The field is a wrapper so the glyph can sit INSIDE the input's box rather
   than beside it. The 28px top margin moved off #q and onto .qfield -- leaving
   it on the input would have stacked two margins and pushed the field down,
   which is the one thing this module is not allowed to do.
   padding-left is 51px against the icon's 20px offset and 19px width: 20 + 19
   + 12 of air. Set from the glyph's own numbers rather than eyeballed, so a
   resized glyph has an obvious place to be corrected. */
.qfield{position:relative;margin-top:28px}
.qicon{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--carbon);pointer-events:none;
}
#q{width:100%;margin-top:0;padding:17px 20px 17px 51px;font:17px "Lindero Text",system-ui,sans-serif;
  border:2px solid var(--tinta);background:var(--cal);outline:none}
/* The glyph follows focus, so the field reads as one object rather than a box
   with a sticker on it. */
.qfield:focus-within .qicon{color:var(--cochinilla)}
#q:focus{border-color:var(--cochinilla)}
#results{margin-top:6px;text-align:left;border:1px solid var(--arena);border-top:0;
  background:var(--cal);display:none}
#results.on{display:block}
.hit{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--arena)}
.hit:last-child{border-bottom:0}
.hit .name{font-weight:700}
.hit .name small{display:block;font:11px "Lindero Text",system-ui,sans-serif;color:var(--piedra);font-weight:400}
/* One tag, one colour. The .si / .pedido pair that used to live here rendered
   DISPONIBLE in verde against HECHO A PEDIDO in pale cochineal -- the clearest
   statement in the whole codebase of which places are stocked. Every place
   costs $65, so the row states the price and nothing else. */
.hit .tag{font:11px "Lindero Text",system-ui,sans-serif;white-space:nowrap;padding:6px 10px;
  background:var(--arena);color:var(--tinta)}
.hit:hover{background:var(--blanco)}

/* ---------- collection marquee ----------
   Fourteen pieces on a loop, to show the range rather than six fixed slides.
   The track holds the set TWICE and travels exactly -50%, which is only
   seamless if every item occupies the same width -- so the spacing is
   margin-right on the item, not `gap` on the flex container. With `gap` the
   track is 2N items plus 2N-1 gaps, and -50% lands half a gap short, which
   reads as a stutter once a loop. */
/* Ground is --marco, matched to the mockups' own baked-in ground, so the
   pieces float on one continuous wall instead of each reading as a pale card
   with a visible edge against the cal page. Same reason the hero and product
   panels use it. */
.marquee{overflow:hidden;padding:40px 0 46px;background:var(--marco);
  border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta)}
.marquee-track{display:flex;width:max-content;animation:marquee 64s linear infinite}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.m-item{flex:none;width:300px;margin-right:16px;display:block}
.m-item img{width:100%;height:auto;display:block}
.m-cap{
  display:block;margin-top:6px;padding-left:var(--frame-inset);
  font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--carbon);
}
.m-item:hover .m-cap{color:var(--cochinilla)}
/* Motion is decoration here; the content is the fourteen links. With reduced
   motion the marquee becomes the scrollable strip it replaced. */
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;scroll-snap-type:x mandatory}
  .marquee-track{animation:none}
  .m-item{scroll-snap-align:start}
}
@media(max-width:430px){
  .m-item{width:220px;margin-right:12px}
}

/* story */
.story{background:var(--blanco);border-top:1px solid var(--tinta);
  padding:80px 28px}
.story .wrap{max-width:980px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.story .kicker{font:12px/1 "Lindero Text",system-ui,sans-serif;color:var(--piedra);
  letter-spacing:.1em;margin-bottom:14px}
.story h2{font-size:clamp(28px,3.6vw,46px);font-weight:700;line-height:1.05}
.story .body p{font:13px/1.9 "Lindero Text",system-ui,sans-serif;color:var(--carbon);
  margin-bottom:18px}
.story .body p:last-child{margin-bottom:0}
@media(max-width:760px){.story .wrap{grid-template-columns:1fr;gap:26px}}

footer{background:var(--tinta);color:var(--cal)}
.tricolor{display:flex;height:6px}
.tricolor i{flex:1}.tricolor i:nth-child(1){background:var(--verde)}
.tricolor i:nth-child(2){background:var(--blanco)}.tricolor i:nth-child(3){background:var(--rojo)}
footer .cols{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;
  padding:44px 28px;font:12px/2 "Lindero Text",system-ui,sans-serif;color:var(--arena)}
footer .cols b{display:block;font-family:"Lindero Text",system-ui,sans-serif;font-weight:500;
  letter-spacing:.12em;color:var(--cal);font-size:12px;margin-bottom:6px}
footer a:hover{color:var(--blanco)}
footer .legal{padding:22px 28px;border-top:1px solid #3a3530;display:flex;flex-wrap:wrap;
  gap:12px;justify-content:space-between;font:10px/1.8 "Lindero Text",system-ui,sans-serif;color:var(--piedra)}
footer .wm{font-weight:700;letter-spacing:.18em;font-family:"Lindero Display",sans-serif;color:var(--cal)}
/* Source note takes its own full-width line. It is a license obligation, not
   decoration -- INEGI clauses 1(f)/(g)/(h) -- so it gets room to be read
   rather than being squeezed into the copyright row. */
footer .legal .src{flex-basis:100%;max-width:none;line-height:1.7}

/* page grain: one paper surface over everything. SVG turbulence, inline,
   fixed, pointer-transparent. Kill by deleting #grain if it reads as dirt. */
#grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}

/* welcome popup */
#pop{position:fixed;inset:0;background:rgba(27,24,21,.55);display:none;
  align-items:center;justify-content:center;z-index:50;padding:20px}
#pop.on{display:flex}
#pop .card{background:var(--cal);max-width:420px;width:100%;padding:0;
  border:2px solid var(--tinta)}
#pop .bar{display:flex;height:6px}
#pop .bar i{flex:1}#pop .bar i:nth-child(1){background:var(--verde)}
#pop .bar i:nth-child(2){background:var(--blanco)}#pop .bar i:nth-child(3){background:var(--rojo)}
#pop .body{padding:30px 28px 26px;text-align:center}
#pop h3{font-size:24px;font-weight:700;letter-spacing:.02em;line-height:1.1}
#pop p{margin-top:10px;font:12px/1.7 "Lindero Text",system-ui,sans-serif;color:var(--carbon)}
#pop input{width:100%;margin-top:18px;padding:13px 14px;font:15px "Lindero Text",system-ui,sans-serif;
  border:2px solid var(--tinta);background:var(--blanco);outline:none}
#pop input:focus{border-color:var(--cochinilla)}
#pop .go{width:100%;margin-top:10px;padding:14px;background:var(--cochinilla);
  color:var(--cal);border:0;font:700 13px "Lindero Text",system-ui,sans-serif;letter-spacing:.16em;cursor:pointer}
#pop .go:hover{background:var(--coch-oscura)}
#pop .no{margin-top:14px;display:inline-block;font:11px "Lindero Text",system-ui,sans-serif;
  color:var(--piedra);background:none;border:0;cursor:pointer;text-decoration:underline}
#pop .code{margin-top:16px;font-weight:700;font-size:20px;letter-spacing:.1em;color:var(--cochinilla)}

@media(max-width:760px){
  .split{grid-template-columns:1fr}
  .split img{height:52vh}
  #coords{display:none}
}
/* Phone widths. These tiers were written for a nav row that needed 431px
   inside 375 and pushed the whole document sideways -- #grain and #pop are
   position:fixed and inherit the document width, so a chrome overflow drags
   the entire page into a horizontal scroll.

   That row is gone as of 2026-09-03 and the tiers are now trimming a header
   that fits comfortably. They are kept rather than deleted because the failure
   they guard against is a property of fixed-position chrome, not of that
   particular nav, and because Meta traffic is 100% phones -- measured, 0 of
   325 impressions were desktop. */
@media(max-width:430px){
  header{padding-left:18px;padding-right:18px}
  .chrome-right{gap:14px}
  #lang{padding:4px 7px;gap:4px}
  #cart svg{width:16px;height:16px}
}
/* Last 14px, for 320px hardware. The budget comes out of gaps and padding.

   RETUNED 2026-09-02, because the previous note here said "Verified: nothing
   clipped, no document overflow" and by then it was false. Measured on the live
   site at a 375px layout viewport: scrollWidth 417 against clientWidth 375, so
   the document scrolled sideways by 42px and #cart sat entirely offscreen at
   400-417. The 430 tier had never been given the padding reduction the 340 tier
   got, and 56px of horizontal padding is 15% of a 375px screen.

   The regression is invisible on a desktop browser at any window size, because
   the tiers only apply to the LAYOUT viewport. Check it with device emulation
   and assert on scrollWidth, not by eye:
     document.documentElement.scrollWidth - document.documentElement.clientWidth
   Must be 0 at 375 AND at 320, in BOTH languages -- the label sets differ, and
   in EN it showed as "OUR STORY" wrapping rather than as a clipped cart. */
@media(max-width:340px){
  .qicon{left:14px;width:17px;height:17px}
  #q{padding-left:43px;padding-right:14px}
  header{padding-left:14px;padding-right:14px}
  .chrome-right{gap:10px}
  #lang{padding:3px 4px;gap:3px;font-size:10px}
  #cart svg{width:14px;height:14px}
}

/* Example-image label. Shared: both the product page and the collection page
   show the same example render, and both must say so where the eye already is
   -- the example carries a real place's name in the artwork, so on any other
   place's page it reads as a bug unless it is labelled. */
.pdp-chip{
  position:absolute;top:14px;left:var(--frame-inset);
  background:var(--tinta);color:var(--cal);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 11px;
}

/* ---------- policy pages (shipping / returns / contact) ---------- */
.policy{padding:clamp(40px,5vw,84px) 28px clamp(56px,6vw,96px)}
.policy .wrap{max-width:760px;margin:0 auto}
.policy .kicker{font:11px/1 "Lindero Text",system-ui,sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--piedra)}
.policy h1{margin-top:14px;font-weight:700;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(30px,4vw,54px);text-transform:uppercase}
.policy-body{margin-top:34px}
.policy-body h2{margin-top:34px;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--arena)}
.policy-body p{margin-top:14px;font:14px/1.8 "Lindero Text",system-ui,sans-serif;color:var(--carbon)}
.policy-body p strong{color:var(--tinta);font-weight:400}
.policy-body a{color:var(--cochinilla);text-decoration:underline;text-underline-offset:3px}
.policy-body .note{margin-top:30px;padding-top:18px;border-top:1px solid var(--arena);
  font-size:12px;color:var(--piedra)}
@media(max-width:430px){.policy{padding-left:18px;padding-right:18px}}

/* privacy opt-out control */
.optout{
  margin-top:34px;padding:22px;border:1px solid var(--tinta);
  display:flex;gap:22px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--blanco);
}
.optout b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.optout p{margin-top:7px;font-size:11px;line-height:1.6;color:var(--carbon);max-width:52ch}
.optout .cta{
  border:0;cursor:pointer;background:var(--tinta);color:var(--cal);
  font-family:"Lindero Text",system-ui,sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.14em;padding:14px 22px;white-space:nowrap;
}
.optout .cta:hover{background:var(--coch-oscura)}
@media(max-width:560px){.optout .cta{width:100%}}

/* ── Headlines in Manna ──────────────────────────────────────────────────
   Justin, 2026-08-31: every headline gets the display face except the
   how-it-works steps, which stay in text face so the instructional block
   reads as instruction rather than as another brand moment.

   THE HAZARD, before adding any heading to this list: Manna is CAPS-ONLY --
   upper and lower map to the same glyph. Mixed-case copy set in it does not
   error, it silently renders as capitals. So a heading qualifies only if its
   copy is ALREADY uppercase in lindero.js, or CSS uppercases it. Check the
   string before you add a selector.

   Excluded for exactly that reason, and each one verified:
     [data-t="nf_h"]        "That page doesn't exist."
     [data-t="pdp_miss_h"]  "We couldn't find that place."
     #pdp-title             a place name -- "Jerez, Zacatecas"
   Nothing else is excluded. The how-it-works headings were, on an earlier
   call to keep that block in the text face; reversed 2026-08-31 for
   consistency -- every headline on the page is now the display face, and the
   instructional block earns its subordination from size, not from a second
   typeface. All four are already uppercase, which is what makes it safe.   */
h1, h2, h3,
.policy h1{font-family:"Lindero Display","Lindero Text",sans-serif;font-weight:700}

[data-t="nf_h"],
[data-t="pdp_miss_h"],
#pdp-title,
.pdp-buy h1{font-family:"Lindero Text",system-ui,sans-serif;font-weight:500}