/* Buen Aporte v2, La Repisa (design/MAESTRO-redesign-v2.md). Nunito self-hosted, OFL (fonts/OFL.txt). */
@font-face{font-family:"Nunito";src:url(fonts/Nunito-Variable.ttf) format("truetype");font-weight:200 1000;font-style:normal;font-display:swap}
[hidden]{display:none!important}
:root{
 --navy:#0A2A55;--navy-d:#071E3D;--blue:#1756A9;--blue-d:#0F4A93;--sky:#EAF2FC;--sky-2:#D6E6F8;
 --ink:#13233A;--ink-2:#465872;--line:#C9D6E8;--white:#fff;
 /* Photo corner colours (design/checks/wells.txt). */
 --well:#EFEFEF;--well-b:#F3F5F9;
 /* Amber is for Order buttons only (plan 5.1). */
 --amber:#FFB000;--amber-d:#E09A00;--sale:#B3261E;
 --font:"Nunito",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
 --shadow:0 1px 2px rgba(10,42,85,.06),0 6px 20px rgba(10,42,85,.08);
 --gut:20px;--hdr:64px;--sec:56px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font:500 1.1875rem/1.6 var(--font);overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2,h3{color:var(--navy);text-wrap:balance}
h2{font-size:clamp(1.75rem,2.5vw + 1rem,2.5rem);font-weight:800;line-height:1.15;margin-bottom:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn-order:focus-visible{outline-color:var(--navy)}
/* After .btn-order. White on navy: amber is Order-only. */
.hero :focus-visible,.band :focus-visible,.foot :focus-visible{outline-color:var(--white)}
/* Hyphenated words stay whole (app.js nw()). */
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:860px}
.skip{position:absolute;left:8px;top:-80px;z-index:100;background:var(--navy);color:var(--white);padding:12px 16px;font-weight:800;border-radius:12px}
.skip:focus{top:8px}
.dot{display:inline-block;width:.35em;height:.35em;border-radius:50%;background:var(--blue);margin-left:.08em;vertical-align:baseline}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 28px;border:0;border-radius:12px;font-weight:800;font-size:1.1875rem;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .12s}
.btn-order{min-height:56px;background:var(--amber);color:var(--navy)}
.btn-order:hover{background:var(--amber-d)}
.btn-blue{background:var(--blue);color:var(--white)}
.btn-blue:hover{background:var(--blue-d)}
.btn-white{min-height:56px;background:var(--white);color:var(--navy)}
.btn-white:hover{background:var(--sky)}
.btn-full{width:100%}
.ext{flex:none}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--blue);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tlink:hover{color:var(--blue-d)}
.tbtn{background:none;border:0;cursor:pointer;text-align:left}

/* disclosure strip and header */
.strip{background:var(--sky);color:var(--navy);font-size:1.0625rem;line-height:1.45;text-align:center;padding:10px var(--gut)}
.hdr{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;height:var(--hdr)}
.mark{display:inline-flex;align-items:baseline;min-height:48px;padding-top:9px;font-weight:900;font-size:1.375rem;color:var(--navy);text-decoration:none;white-space:nowrap;margin-right:auto}
.hdr-nav{display:none}
.hdr-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;color:var(--navy);font-weight:800;font-size:1.0625rem;text-decoration:none}
.hdr-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
/* Language: two visible pills (plan 6.2). Selected = blue fill plus underline, not colour alone. */
.seg{display:flex;gap:4px;padding:4px;background:var(--sky);border-radius:999px;flex:none}
.seg-b{min-height:48px;min-width:48px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--navy);font-weight:800;font-size:1.0625rem;cursor:pointer}
.seg-b:hover{background:var(--sky-2)}
.seg-b[aria-pressed="true"]{background:var(--blue);color:var(--white);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.seg-tiny{display:none}
/* Full names down to 375px, ES/EN below (ROUND-NOTES 1). */
@media(max-width:479px){.seg{gap:2px;padding:3px}.seg-b{padding:0 10px;font-size:1rem}.mark{font-size:1.25rem}.hdr-in{gap:10px}}
@media(max-width:374px){.seg-full{display:none}.seg-tiny{display:inline}.seg-b{padding:0 12px}}

/* hero and shelf */
.hero{background:var(--navy);color:var(--white);padding:40px 0 112px}
.hero h1{color:var(--white);font-size:clamp(2.25rem,4.5vw + 1rem,3.75rem);font-weight:900;line-height:1.1;margin-bottom:16px;max-width:18ch}
.hero-lead{color:var(--sky-2);max-width:40ch;margin-bottom:24px}
.hero-note{color:var(--sky-2);font-size:1.0625rem;margin-top:12px}
.shelf-wrap{margin-top:-64px;position:relative}
.shelf{background:var(--white);border-radius:20px;box-shadow:var(--shadow);padding:12px}
/* Two tiers (MAESTRO v2 fix 1). Boxes fill ~55% of each square's height (FIT): margins overlap only grey. */
.shelf-well{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;background:var(--well);border-radius:12px;overflow:hidden}
.shelf-well .fb{flex:none;width:48%;margin:-8% 0 -7%}
.shelf-well .fb:first-child{width:60%;margin:-9% 20% 0}
.shelf figcaption{color:var(--ink-2);font-size:1.0625rem;text-align:center;padding:12px 8px 4px}

/* sections */
.sec{padding:var(--sec) 0}
.sec-sky{background:var(--sky)}
.sec-lead{color:var(--ink-2);margin-bottom:24px;max-width:62ch}
.note{color:var(--ink-2);font-size:1.0625rem;line-height:1.5;max-width:70ch}
#productos-h:focus{outline:none}
#productos-h:focus-visible{outline:3px solid var(--blue)}

/* photo wells */
.well{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--well);border-radius:12px;overflow:hidden}
.well-b{background:var(--well-b)}
/* Square frame; app.js fitTransform centres the product. */
.fb{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden}
.fb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.well-name{display:none}
.well-none{background:var(--sky-2)}
.well-none .well-name{display:block;padding:12%;color:var(--navy);font-weight:800;font-size:1.25rem;line-height:1.25;text-align:center}
.well-none .dot{display:block;width:14px;height:14px;margin:0 auto 10px}
.well-pp.well-none .well-name{font-size:1.5rem}

/* type cards */
.types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}
.type{display:flex;flex-direction:column;width:100%;height:100%;padding:10px 10px 14px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);text-align:left;cursor:pointer;transition:border-color .12s}
.type:hover{border-color:var(--blue)}
.type .well{margin-bottom:12px}
.type-name{color:var(--navy);font-weight:800;font-size:1.25rem;line-height:1.25;padding:0 4px}
.type-n{color:var(--ink-2);font-size:1.0625rem;padding:2px 4px 0}
.btn-wide{width:100%}

/* products: country, chips, search */
.mk{display:grid;grid-template-columns:1fr;gap:8px;margin:16px 0 20px;max-width:420px}
.mk-b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:8px 14px;border:2px solid var(--blue);border-radius:999px;background:var(--white);color:var(--navy);font-weight:800;font-size:1.0625rem;line-height:1.25;cursor:pointer}
.mk-b:hover{background:var(--sky-2)}
.mk-b .chk{display:none;font-style:normal}
.mk-b[aria-pressed="true"]{background:var(--blue);color:var(--white)}
.mk-b[aria-pressed="true"] .chk{display:inline}
.chips-wrap{margin:0 calc(var(--gut) * -1) 16px;padding:0 var(--gut);overflow-x:auto;scrollbar-width:thin}
.chips{display:flex;gap:8px;padding:8px 0;width:max-content}
.chip{flex:none;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--sky-2);color:var(--navy);font-weight:800;font-size:1.0625rem;white-space:nowrap;cursor:pointer}
.chip:hover{background:#C5DAF2}
.chip .chk{display:none}
.chip[aria-pressed="true"]{background:var(--blue);color:var(--white)}
.chip[aria-pressed="true"] .chk{display:inline}
.search{margin-bottom:12px;max-width:560px}
.search label{display:block;color:var(--navy);font-weight:800;margin-bottom:6px}
.search-f{position:relative}
.search .mag{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
#q{width:100%;min-height:56px;padding:10px 56px 10px 50px;background:var(--white);border:2px solid var(--ink-2);border-radius:12px;font-size:1.1875rem}
#q::placeholder{color:var(--ink-2);opacity:1}
#q::-webkit-search-cancel-button{display:none}
.q-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--navy);cursor:pointer}
.q-clear:hover{background:var(--sky)}
.count{font-weight:800;color:var(--navy);margin-bottom:4px}
.source{margin-top:28px}

/* product cards */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
.card-h{height:100%;font:inherit;color:inherit}
.card{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:10px 10px 14px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);text-align:left;cursor:pointer;transition:border-color .12s}
.card:hover{border-color:var(--blue)}
.card .well{margin-bottom:12px}
.pill-offer{position:absolute;top:18px;left:18px;padding:2px 12px;border-radius:999px;background:var(--sky-2);color:var(--navy);font-weight:800;font-size:1rem}
.card-name{color:var(--navy);font-weight:800;font-size:1.125rem;line-height:1.25;padding:0 4px;margin-bottom:8px}
.tag{display:flex;flex-direction:column;padding:0 4px;margin-top:auto}
.tag-n{color:var(--navy);font-weight:900;font-size:1.375rem;line-height:1.1;font-variant-numeric:tabular-nums}
.tag-n s{color:var(--ink-2);font-weight:700;font-size:1rem;margin-right:4px}
.tag-n .sale{color:var(--sale)}
.tag-cur{color:var(--ink-2);font-size:1rem;line-height:1.4}
.card-go{color:var(--blue);font-weight:800;font-size:1.0625rem;padding:8px 4px 0}

/* empty state */
.empty{padding:24px 0 8px}
.empty p{margin-bottom:16px}
.empty .tbtn{display:flex;margin-top:8px}

/* how to order */
.steps{display:grid;gap:24px;margin:24px 0 28px}
.steps li{display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:start}
.step-n{grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--white);font-weight:900;font-size:1.625rem}
.steps h3{font-size:1.25rem;font-weight:800;line-height:1.3;padding-top:12px;overflow-wrap:anywhere}
.steps p{color:var(--ink-2)}
.box{background:var(--sky);border-radius:16px;padding:20px 24px;color:var(--ink);max-width:70ch}

/* who we are */
.nos{display:grid;gap:28px}
.nos p+p{margin-top:16px}
.dodont{display:grid;gap:12px}
.dodont li{display:grid;grid-template-columns:32px 1fr;column-gap:14px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px}
.dodont .ico{grid-row:span 2;margin-top:2px}
.ico-yes circle{fill:var(--blue)}
.ico-no circle{fill:var(--navy)}
.dodont h3{font-size:1.25rem;font-weight:800;line-height:1.3}
.dodont p{color:var(--ink-2)}
.nos-contact{margin-top:16px}

/* questions */
.faq{display:grid;gap:12px;margin-top:24px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:16px}
.faq details[open]{border-color:var(--blue)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 20px;color:var(--navy);font-weight:800;font-size:1.1875rem;line-height:1.35;cursor:pointer;list-style:none;border-radius:16px}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--sky)}
.pm::before,.pm::after{content:"";position:absolute;left:9px;top:15px;width:14px;height:2.5px;border-radius:2px;background:var(--navy)}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{display:none}
.faq details>p{padding:0 20px 16px;color:var(--ink)}
.faq .faq-fn{color:var(--ink-2);font-size:1.0625rem}

/* final band and footer */
.band{background:var(--navy);color:var(--white);padding:var(--sec) 0;text-align:center}
.band-in{display:flex;flex-direction:column;align-items:center}
.band h2{color:var(--white);margin-bottom:24px}
.band .btn-order{max-width:420px}
.band p{color:var(--sky-2);margin-top:14px}
.foot{background:var(--navy-d);color:var(--sky-2);font-size:1rem;line-height:1.55;padding:48px 0 56px}
.mark-w{color:var(--white)}
.mark-w .dot{background:#6FA6EA}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 24px;margin:12px 0 20px}
.foot a{color:var(--white)}
.foot-nav a,.legal a{display:inline-flex;align-items:center;min-height:48px;text-decoration:underline;text-underline-offset:4px}
.legal{display:grid;gap:12px;max-width:80ch}

/* product page (dialog) */
body.ficha-open{overflow:hidden}
.sheet{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0;background:var(--white);color:var(--ink);border-radius:20px 20px 0 0;overflow-y:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(7,30,61,.55)}
.sheet[open]{animation:up .24s cubic-bezier(.2,.7,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.pp-bar{position:sticky;top:0;z-index:2;background:var(--white);padding:8px 12px;border-bottom:1px solid var(--line)}
.back-a{font-size:1.5rem;line-height:1;margin:-3px 8px 0 0}
.back{display:inline-flex;align-items:center;min-height:48px;padding:0 12px 0 8px;border:0;border-radius:10px;background:none;color:var(--blue);font-weight:800;font-size:1.1875rem;cursor:pointer}
.back:hover{background:var(--sky)}
.pp-grid{display:grid;gap:16px;padding:16px var(--gut) 32px}
.pp-photo .well{aspect-ratio:auto;height:min(360px,38vh)}
.pp-photo .fb{width:auto;height:100%}
.pp-note{color:var(--ink-2);font-size:1rem;line-height:1.45;margin-top:8px}
.pp-type{color:var(--ink-2);font-size:1.0625rem}
.pp-name{font-size:clamp(1.75rem,2vw + 1.25rem,2.25rem);font-weight:900;line-height:1.15;margin:2px 0 10px}
.pp-price{margin-bottom:16px}
.tag-big{padding:0}
.tag-big .tag-n{font-size:2.25rem;line-height:1}
.tag-big .tag-n s{font-size:1.25rem}
.tag-big .tag-cur{font-size:1.0625rem;margin-top:4px}
.pp-offer{color:var(--sale);font-weight:800;font-size:1.0625rem;margin-top:6px}
.pp-small{color:var(--ink-2);font-size:1.0625rem;line-height:1.5;margin-top:6px}
.pp-line{margin:10px 0 8px}
.pp-h3{font-size:1.25rem;font-weight:800;margin:20px 0 4px}
.doc{background:var(--sky);border-radius:16px;padding:4px 20px 18px;margin-top:20px}
.doc .pp-h3{margin-top:14px}
.pp-more{margin-top:12px}
.pp-legal{color:var(--ink-2);font-size:1rem;line-height:1.5;margin-top:16px}

.noscript{padding:16px var(--gut);background:var(--sky)}

/* larger screens */
@media(min-width:360px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:600px){
 :root{--gut:32px}
 .mk{display:flex;flex-wrap:wrap;max-width:none}
 .mk-b{padding:8px 22px}
 .btn-wide{width:auto}
 .empty .tbtn{display:inline-flex;margin:0 0 0 20px}
}
@media(min-width:768px){
 .types{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
 .steps li{grid-template-columns:1fr;row-gap:12px}
 .step-n{grid-row:auto}
 .steps h3{padding-top:0}
 .card,.type{padding:14px 14px 18px}
 .pill-offer{top:22px;left:22px}
}
@media(min-width:900px){
 :root{--sec:96px}
 .nos{grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
 /* Shelf in the hero's right half, 64px over its edge. */
 main{display:grid;grid-template-columns:minmax(0,1fr)}
 .hero,.shelf-wrap{grid-area:1/1}
 .hero{padding:72px 0 96px}
 .hero-txt{max-width:52%}
 .shelf-wrap{align-self:end;width:100%;margin:0 auto -64px;pointer-events:none}
 .shelf{width:44%;margin-left:auto;padding:16px}
 #tipos{padding-top:136px}
 .sheet{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:960px;max-width:calc(100vw - 48px);height:auto;max-height:88vh;border-radius:20px}
 .sheet[open]{animation:pop .2s ease-out}
 @keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.98)}}
 .pp-grid{grid-template-columns:45% 1fr;gap:32px;padding:24px 32px 32px}
 .pp-photo{position:sticky;top:72px;align-self:start}
 /* MAESTRO v2 r3 fix 5: 8px more air between a 2-line name and the price. */
 .pp-name{margin-bottom:18px}
 .pp-photo .well{height:auto;aspect-ratio:1}
 .pp-photo .fb{width:100%;height:auto}
}
@media(min-width:1024px){
 :root{--hdr:76px}
 .hdr-nav{display:flex;gap:20px;margin-right:12px}
}
@media(min-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .sheet[open]{animation:none}
 *{transition:none!important}
}
@media(forced-colors:active){
 .seg-b[aria-pressed="true"],.chip[aria-pressed="true"],.mk-b[aria-pressed="true"]{border:3px solid Highlight}
 .card,.type,.faq details,.chip,.seg-b{border:1px solid CanvasText}
 .pm::before,.pm::after{forced-color-adjust:none;background:CanvasText}
 .btn{border:2px solid ButtonText}
 .dot{forced-color-adjust:none}
}