/* Layout: app de tarjetas blancas redondeadas sobre blanco roto, titular serif, filtros en texto, botella en círculo */
  .mdm-elabel {
    --bg: #FFFFFF; --surface: #FFFFFF; --circle: #F1ECE5; --fg: #17120F; --muted: #8A7F76; --line: #EAE2D6; --soft: #F6F2EC;
    --brown: #502C1E; --taupe: #A39382; --ink: #17120F;
    --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --body: "DM Sans", Arial, Helvetica, sans-serif;
  }
  .mdm-elabel { margin: 0 auto; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 14px; line-height: 1.5; min-height: 100vh; }
  .mdm-elabel *, .mdm-elabel *::before, .mdm-elabel *::after { box-sizing: border-box; }
  .mdm-elabel [hidden] { display: none !important; }
  .mdm-elabel button { font-family: inherit; }

  .mdm-elabel .bar { position: sticky; top: 0; z-index: 9; background: var(--bg); }
  .mdm-elabel .bar-in { max-width: 640px; margin: 0 auto; padding-block: 18px 6px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
  .mdm-elabel .brand { grid-column: 2; }
  .mdm-elabel .brand img { height: 60px; width: auto; max-width: 100%; display: block; }
  .mdm-elabel .lang { grid-column: 3; justify-self: end; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); padding: 3px; border-radius: 999px; }
  .mdm-elabel .lang button { background: transparent; border: 0; color: var(--muted); font: 600 .68rem var(--body); letter-spacing: .06em; padding: 6px 9px; border-radius: 999px; cursor: pointer; }
  .mdm-elabel .lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .mdm-elabel .lang button:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
  @media (max-width: 480px) { .mdm-elabel .bar-in { grid-template-columns: 1fr; justify-items: center; gap: 12px; } .mdm-elabel .brand { grid-column: 1; } .mdm-elabel .lang { grid-column: 1; justify-self: center; } .mdm-elabel .brand img { height: 52px; } }

  .mdm-elabel .wrap { max-width: 640px; margin: 0 auto; padding-block: 18px 48px; padding-left: 16px; padding-right: 16px; display: grid; gap: 22px; }

  /* Inicio */
  .mdm-elabel .home h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 7.5vw, 2.8rem); line-height: 1.05; margin: 0; text-wrap: balance; }
  .mdm-elabel .filters { display: flex; gap: 22px; border-bottom: 1px solid var(--line); }
  .mdm-elabel .filters button { background: none; border: 0; padding: 6px 0 10px; font: 500 .95rem var(--body); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .mdm-elabel .filters button[aria-pressed="true"] { color: var(--fg); font-weight: 700; border-bottom-color: var(--fg); }
  .mdm-elabel .filters button:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
  .mdm-elabel .wines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  @media (min-width: 560px) { .mdm-elabel .wines { grid-template-columns: repeat(3, 1fr); } }
  .mdm-elabel .wcard { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 14px 16px; text-align: left; color: var(--fg); font: inherit; cursor: pointer; display: grid; gap: 10px; box-shadow: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .mdm-elabel .wcard:hover { transform: translateY(-3px); border-color: var(--taupe); box-shadow: 0 10px 24px rgba(40,25,15,.06); }
  .mdm-elabel .wcard:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }
  .mdm-elabel .wcard .thumb { height: 150px; display: flex; align-items: flex-end; justify-content: center; }
  .mdm-elabel .wcard .thumb img { max-height: 150px; width: auto; max-width: 100%; }
  .mdm-elabel .wcard .wn { font-weight: 700; font-size: .95rem; line-height: 1.2; }
  .mdm-elabel .wcard .wt { font-size: .7rem; color: var(--muted); margin-top: 2px; }
  .mdm-elabel .wcard .wvl { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-top: 8px; }
  .mdm-elabel .wcard .wv { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .mdm-elabel .wcard .wv span { font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-variant-numeric: tabular-nums; }

  /* Ficha */
  .mdm-elabel .topnav { display: flex; align-items: center; justify-content: space-between; }
  .mdm-elabel .back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); cursor: pointer; }
  .mdm-elabel .back:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
  .mdm-elabel .back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mdm-elabel .hero { display: grid; gap: 18px; justify-items: center; text-align: center; }
  .mdm-elabel .heroimg { height: 300px; display: flex; align-items: center; justify-content: center; }
  .mdm-elabel .bottle { height: 280px; width: auto; max-width: 100%; display: block; }
  .mdm-elabel .hero-text { display: grid; gap: 10px; justify-items: center; }
  .mdm-elabel .hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1.05; margin: 0; text-wrap: balance; }
  .mdm-elabel .do { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
  .mdm-elabel .vints { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
  .mdm-elabel .vints .vl { width: 100%; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
  .mdm-elabel .vints button { font: 600 .9rem var(--body); padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font-variant-numeric: tabular-nums; }
  .mdm-elabel .vints button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .mdm-elabel .vints button:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }

  .mdm-elabel .tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); justify-content: center; }
  .mdm-elabel .tabs button { background: none; border: 0; padding: 6px 0 10px; font: 500 .95rem var(--body); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .mdm-elabel .tabs button[aria-selected="true"] { color: var(--fg); font-weight: 700; border-bottom-color: var(--fg); }
  .mdm-elabel .tabs button:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }

  .mdm-elabel section[role="tabpanel"] { display: grid; gap: 14px; }
  .mdm-elabel h2 { font-weight: 700; font-size: 1.15rem; margin: 0; line-height: 1.2; }
  .mdm-elabel .note { color: var(--muted); font-size: .85rem; margin: 0; }

  .mdm-elabel table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
  .mdm-elabel th, .mdm-elabel td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
  .mdm-elabel tr:last-child td { border-bottom: 0; }
  .mdm-elabel th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .mdm-elabel td.v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
  .mdm-elabel tr.energy td { font-size: 1rem; background: var(--soft); }
  .mdm-elabel tr.sub td.k { padding-left: 32px; color: var(--muted); }

  .mdm-elabel .ing { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: ing; }
  .mdm-elabel .ing li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; counter-increment: ing; }
  .mdm-elabel .ing li::before { content: counter(ing); font-size: .7rem; font-weight: 700; color: var(--bg); background: var(--ink); border-radius: 999px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
  .mdm-elabel .ing li.proc { color: var(--muted); }
  .mdm-elabel .ing li.proc::before { content: "·"; background: var(--soft); color: var(--muted); font-size: 1.2rem; }
  .mdm-elabel .ing li small { display: block; color: var(--muted); font-size: .85rem; }

  .mdm-elabel .alert { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
  .mdm-elabel .alert strong { font-size: 1rem; }
  .mdm-elabel .alert svg { width: 30px; height: 30px; flex: none; color: var(--taupe); }

  .mdm-elabel .recwrap { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; }
  .mdm-elabel .bdraw { width: 170px; height: auto; max-width: 100%; }
  .mdm-elabel .recy { display: grid; gap: 10px; }
  .mdm-elabel .part { position: relative; background: #fff; color: #17120F; border: 1px solid #EAE2D6; border-radius: 18px; padding: 14px 16px 14px 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
  .mdm-elabel .part .num { position: absolute; top: -9px; left: -9px; width: 24px; height: 24px; border-radius: 999px; background: #fff; border: 1.5px solid #17120F; color: #17120F; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .mdm-elabel .part .icons { display: flex; align-items: center; gap: 10px; }
  .mdm-elabel .part .ic-bin { width: 54px; height: 54px; }
  .mdm-elabel .part .ic-tri { height: 50px; width: auto; }
  .mdm-elabel .part .pt { font-size: .92rem; }
  @media (max-width: 480px) { .mdm-elabel .recwrap { grid-template-columns: 1fr; justify-items: center; } .mdm-elabel .bdraw { width: 140px; } .mdm-elabel .recy { width: 100%; } }

  .mdm-elabel footer { font-size: .72rem; color: var(--muted); padding-top: 6px; display: grid; gap: 3px; text-align: center; }
  @media (prefers-reduced-motion: no-preference) { .mdm-elabel section[role="tabpanel"] { animation: mdmfade .18s ease-out; } @keyframes mdmfade { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } } }

  .mdm-elabel h1, .mdm-elabel h2 { font-family: inherit; color: inherit; text-transform: none; letter-spacing: 0; }
  .mdm-elabel .home h1, .mdm-elabel .hero h1 { font-family: var(--display); }
  .mdm-elabel table, .mdm-elabel th, .mdm-elabel td { border-color: var(--line); }
  .mdm-elabel ol, .mdm-elabel ul { margin: 0; padding: 0; }
  .mdm-elabel img { max-width: 100%; height: auto; }