/* ═══════════════════════════════════════════════════════════════
   VWT · M · el sitio móvil (< 1024px), construido de cero
   Hero centrado con foto en esquinas; el resto a la izquierda.
   Bloques de color alternados. Volanta con trazo bordó, títulos
   grandes y apretados, texto ligero. Listas con miniatura y chevron
   bordó. Pasos con número grande. Barra inferior de cinco pestañas.
   ═══════════════════════════════════════════════════════════════ */
#mApp, .m-nav, .m-tab, .m-wa, .m-foot, .m-sheet{ display: none }
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  :root{ --nav-h: 56px; --m-tab: calc(58px + env(safe-area-inset-bottom, 0px)); --pad: 22px; --r: 22px;
         --acc: #AC3749; --vino: #6B1D2A; --ink: #0B0708; --soft: #3A3436; --mut: #7F6E73; --papel: #FFFFFF; --humo: #F6F2F0; --linea: rgba(11,7,8,.12); --e: cubic-bezier(.32,.72,0,1) }
  html[data-theme="dark"], body.dark{ --ink: #F7F5F5; --soft: #DCD7D7; --mut: #ADA5A5; --papel: #000000; --humo: #141112; --linea: rgba(255,255,255,.14) }
  main#contenido, #mainNav, #mobileMenu, footer, #navMega, .vw-cursor, .wa-btn, .ai-fab, #aiFab, .cookie-banner, #prog{ display: none !important }
  /* En el teléfono manda el bloque móvil: cualquier pieza del armazón de escritorio que
     cuelgue directamente del body queda fuera. Es una regla del sistema, no por idioma. */
  body > *:not(.m-nav):not(.m-sheet):not(.m):not(.m-foot):not(.m-tab):not(.m-wa):not(#loader):not(#vwtCurtain):not(.skip-link):not(script):not(noscript):not(style):not(template){ display: none !important }
  html, body{ background: var(--papel) !important; color: var(--ink); overflow-x: hidden; -webkit-text-size-adjust: 100% }
  body{ margin: 0; padding: 0; font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent }
  #mApp{ display: block; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) }
  #mApp *{ box-sizing: border-box } #mApp img{ max-width: 100%; display: block }
  .m-in{ padding: 0 var(--pad) }
  .m-kick{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--acc) }
  .m-kick::before{ content: ""; width: 18px; height: 2px; background: var(--acc); flex: 0 0 auto }
  .m-h1{ margin: 0; font-size: clamp(2.3rem, 12vmin, 3.4rem); font-weight: 700; letter-spacing: -.06em; line-height: .95; color: var(--ink) }
  .m-h2{ margin: 0 0 14px; font-size: clamp(1.7rem, 8.6vmin, 2.4rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--ink) }
  .m-lead{ margin: 14px 0 0; font-size: 1.04rem; line-height: 1.5; font-weight: 300; color: var(--soft) }
  .m-p{ margin: 0 0 12px; font-size: .98rem; line-height: 1.6; font-weight: 300; color: var(--soft) }
  .m-p-l{ font-size: 1.12rem; line-height: 1.5 } .m-nota{ margin: 12px 0 0; font-size: .8rem; color: var(--mut) }
  /* hero: simétrico y centrado */
  .m-hero{ padding: 10px var(--pad) 6px; text-align: center; width: 100% }
  .m-hero-tx > *{ width: 100% }
  .m-hero-fig{ margin: 0 auto; width: 100%; height: min(58svh, 118vw); border-radius: var(--r); overflow: hidden; background: var(--humo) }
  .m-hero-fig img{ width: 100%; height: 100%; object-fit: cover }
  .m-hero-tx{ padding: 22px 0 18px; display: flex; flex-direction: column; align-items: center }
  .m-hero, .m-hero *{ text-align: center }
  .m-hero .m-h1, .m-hero .m-lead{ margin-inline: auto } .m-hero .m-lead{ max-width: 34ch }
  .m-hero-tx .m-kick{ justify-content: center } .m-hero-tx .m-kick::before, .m-hero-tx .m-kick::after{ content: ""; width: 14px; height: 2px; background: var(--acc); display: block }
  .m-hero-tipo{ padding: 0 0 6px } .m-hero-tipo .m-hero-tx{ padding: 44px var(--pad) 34px; min-height: 52svh; justify-content: center }
  .m-ctas{ display: grid; gap: 10px; width: 100%; max-width: 420px; margin: 20px auto 0 }
  .m-btn{ display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px; border-radius: 14px; background: var(--acc); color: #fff !important; -webkit-text-fill-color: #fff; font: 600 1rem/1 'Poppins', sans-serif; text-decoration: none; transition: transform .15s var(--e), opacity .15s }
  .m-btn:active{ transform: scale(.97); opacity: .9 }
  .m-btn-ghost{ background: transparent; border: 1.5px solid var(--ink); color: var(--ink) !important; -webkit-text-fill-color: var(--ink) }
  /* bloques */
  .m-b{ padding: 34px 0 }
  .m-blanco{ background: var(--papel); color: var(--ink) } .m-humo{ background: var(--humo); color: var(--ink) }
  .m-negro{ background: #0B0708; color: #fff } html[data-theme="dark"] .m-negro, body.dark .m-negro{ background: #141112 }
  .m-bordo{ background: var(--vino); color: #fff } .m-crema{ background: #EDE6DA; color: #0B0708 } .m-rojo{ background: var(--acc); color: #fff }
  .m-negro .m-h1, .m-negro .m-h2, .m-bordo .m-h1, .m-bordo .m-h2, .m-rojo .m-h2{ color: #fff }
  .m-negro .m-p, .m-negro .m-lead, .m-bordo .m-p, .m-bordo .m-lead, .m-rojo .m-p{ color: rgba(255,255,255,.82) }
  .m-negro .m-kick, .m-bordo .m-kick, .m-rojo .m-kick{ color: rgba(255,255,255,.75) } .m-negro .m-kick::before, .m-bordo .m-kick::before, .m-rojo .m-kick::before{ background: rgba(255,255,255,.6) }
  .m-negro .m-btn-ghost, .m-bordo .m-btn-ghost, .m-rojo .m-btn-ghost{ color: #fff !important; -webkit-text-fill-color: #fff; border-color: rgba(255,255,255,.45) }
  .m-bordo .m-btn, .m-rojo .m-btn{ background: #fff; color: var(--vino) !important; -webkit-text-fill-color: var(--vino) }
  .m-hero-tipo.m-negro{ background: #0B0708 } .m-hero-tipo.m-bordo{ background: var(--vino) } .m-hero-tipo.m-blanco{ background: var(--papel) } .m-hero-tipo.m-negro .m-btn{ background: var(--acc) }
  /* pasos */
  .m-pasos{ list-style: none; margin: 0; padding: 0 }
  .m-pasos li{ display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--linea) } .m-pasos li:first-child{ border-top: 0; padding-top: 6px }
  .m-paso-n{ font-size: 1.9rem; font-weight: 700; letter-spacing: -.06em; line-height: 1; color: var(--acc) } .m-negro .m-paso-n, .m-bordo .m-paso-n{ color: #fff; opacity: .55 }
  .m-negro .m-pasos li, .m-bordo .m-pasos li{ border-color: rgba(255,255,255,.14) }
  .m-paso-h{ display: block; font-size: .78rem; font-weight: 600; color: var(--acc); margin-bottom: 4px } .m-negro .m-paso-h, .m-bordo .m-paso-h{ color: rgba(255,255,255,.7) }
  .m-pasos b{ display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.15 }
  .m-pasos p{ margin: 6px 0 0; font-size: .95rem; line-height: 1.55; font-weight: 300; color: var(--soft) } .m-negro .m-pasos p, .m-bordo .m-pasos p{ color: rgba(255,255,255,.8) }
  /* paradas */
  .m-paradas{ list-style: none; margin: 0; padding: 0 0 0 4px; position: relative }
  .m-paradas::before{ content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: var(--linea) }
  .m-paradas li{ position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 18px; padding: 10px 0 }
  .m-paradas li i{ width: 12px; height: 12px; border-radius: 50%; background: var(--acc); border: 3px solid var(--papel); box-shadow: 0 0 0 2px var(--acc); margin-top: 6px }
  .m-negro .m-paradas li i{ border-color: #0B0708 } .m-negro .m-paradas::before{ background: rgba(255,255,255,.18) }
  .m-paradas b{ display: block; font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15 } .m-paradas p{ margin: 4px 0 0; font-size: .92rem; line-height: 1.5; font-weight: 300; color: var(--soft) } .m-negro .m-paradas p{ color: rgba(255,255,255,.78) }
  /* lista con foto */
  .m-lf a{ display: grid; grid-template-columns: 72px 1fr 18px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linea); text-decoration: none; color: inherit } .m-lf a:first-child{ border-top: 0; padding-top: 4px }
  .m-lf img, .m-lf-ph{ width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: rgba(172,55,73,.14) }
  .m-lf b{ display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.15 } .m-lf i{ display: block; margin-top: 3px; font-style: normal; font-size: .84rem; color: var(--acc); font-weight: 500 } .m-lf em{ font-style: normal; color: var(--acc); font-size: 1.5rem }
  .m-negro .m-lf a, .m-bordo .m-lf a{ border-color: rgba(255,255,255,.14) } .m-negro .m-lf i, .m-negro .m-lf em{ color: rgba(255,255,255,.7) }
  /* ficha, chips, versus, faq, figura */
  .m-ficha{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .m-ficha div{ padding: 14px; border-radius: 14px; background: var(--papel); border: 1px solid var(--linea) } .m-blanco .m-ficha div{ background: var(--humo); border: 0 }
  .m-ficha dt{ font-size: .74rem; font-weight: 600; color: var(--acc); margin-bottom: 4px } .m-ficha dd{ margin: 0; font-size: .96rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25 }
  .m-chips{ display: flex; flex-wrap: wrap; gap: 8px } .m-chips span{ padding: 8px 12px; border-radius: 100px; border: 1.5px solid var(--ink); font-size: .82rem; font-weight: 600 }
  .m-vs{ list-style: none; margin: 0; padding: 0 } .m-vs li{ padding: 14px 0; border-top: 1px solid var(--linea) } .m-vs li:first-child{ border-top: 0 }
  .m-vs s{ display: block; font-size: .95rem; color: var(--mut); text-decoration-color: var(--acc) } .m-vs b{ display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.05; margin-top: 2px }
  .m-faq{ border-top: 1px solid var(--linea) } .m-q{ border-bottom: 1px solid var(--linea) }
  .m-q summary{ display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding: 15px 0; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; cursor: pointer } .m-q summary::-webkit-details-marker{ display: none }
  .m-q summary i{ position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linea); transition: transform .35s var(--e), background .35s }
  .m-q summary i::before, .m-q summary i::after{ content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%,-50%) } .m-q summary i::before{ width: 9px; height: 1.5px } .m-q summary i::after{ width: 1.5px; height: 9px }
  .m-q[open] summary i{ background: var(--acc); border-color: var(--acc); transform: rotate(90deg) } .m-q[open] summary i::before{ background: #fff } .m-q[open] summary i::after{ opacity: 0 }
  .m-q p{ margin: 0; padding: 0 0 16px; font-size: .95rem; line-height: 1.55; font-weight: 300; color: var(--soft) }
  .m-fig{ margin: 0 0 14px; width: 100%; height: 58vw; border-radius: var(--r); overflow: hidden } .m-fig img{ width: 100%; height: 100%; object-fit: cover }
  /* modalidades y tilde */
  .m-mods{ display: grid; gap: 12px } .m-mod{ padding: 18px 16px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linea) } .m-blanco .m-mod{ background: var(--humo); border: 0 }
  .m-mod b{ display: block; font-size: 1.2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1 } .m-mod p{ margin: 6px 0 10px; font-size: .92rem; line-height: 1.5; font-weight: 300; color: var(--soft) }
  .m-mod ul{ list-style: none; margin: 0; padding: 0 } .m-mod li{ position: relative; padding: 7px 0 7px 26px; font-size: .94rem; border-top: 1px solid var(--linea) }
  .m-mod li::before{ content: "✓"; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center }
  .m-mod li.no{ color: var(--mut) } .m-mod li.no::before{ content: "–"; background: transparent; border: 1.5px solid var(--linea); color: var(--mut) }
  .m-tilde{ list-style: none; margin: 0; padding: 0 } .m-tilde li{ position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--linea); font-size: .98rem; line-height: 1.5; font-weight: 300; color: var(--soft) } .m-tilde li:first-child{ border-top: 0 }
  .m-tilde li::before{ content: "✓"; position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center }
  .m-tilde b{ color: var(--ink); font-weight: 600 } .m-negro .m-tilde li{ color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.14) } .m-negro .m-tilde b{ color: #fff }
  /* artículo, mesa, despedida, contacto */
  .m-art h3{ margin: 22px 0 8px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1 } .m-art h3:first-child{ margin-top: 0 }
  .m-art p, .m-art li{ font-size: 1rem; line-height: 1.65; font-weight: 300; color: var(--soft) } .m-art ul, .m-art ol{ padding-left: 1.1rem } .m-art a{ color: var(--acc) }
  .m-art blockquote{ margin: 16px 0; padding-left: 14px; border-left: 3px solid var(--acc); font-size: 1.1rem; font-weight: 300 } .m-art .ar-nota{ margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: var(--humo); font-size: .92rem }
  .m-mesa{ border-top: 1px solid var(--linea) } .m-mando{ display: block; padding: 12px 0; border-bottom: 1px solid var(--linea) } .m-mando > span{ display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: 6px }
  .m-mando b{ font-weight: 700; letter-spacing: -.02em } .m-mando em{ font-style: normal; color: var(--acc); font-weight: 700 } .m-mando input[type="range"]{ width: 100%; accent-color: var(--acc); height: 32px }
  .m-total{ margin: 12px 0 0; font-size: .86rem; color: var(--mut) } .m-total b{ color: var(--ink) } .m-corte{ margin: 6px 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em }
  .m-check{ border-top: 1px solid var(--linea); margin-bottom: 12px } .m-ck{ display: grid; grid-template-columns: 56px 1fr 28px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); cursor: pointer }
  .m-ck img{ width: 56px; height: 56px; border-radius: 12px; object-fit: cover } .m-ck span{ font-size: 1rem; font-weight: 600; letter-spacing: -.02em } .m-ck input{ position: absolute; opacity: 0; pointer-events: none }
  .m-ck i{ width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center } .m-ck input:checked + i{ background: var(--acc); border-color: var(--acc) } .m-ck input:checked + i::after{ content: "✓"; color: #fff; font-size: .9rem; font-weight: 700 }
  .m-input{ width: 100%; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--ink); background: var(--papel); color: var(--ink); font: 500 16px 'Poppins', sans-serif; margin-bottom: 10px }
  .m-datos{ border-top: 1px solid var(--linea) } .m-datos > *{ display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--ink) } .m-datos span{ font-size: .76rem; color: var(--acc); font-weight: 600 } .m-datos b{ font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em }
  .m-cierre{ padding: 40px 0 44px } .m-cierre .m-h2{ font-size: clamp(1.9rem, 9.6vmin, 2.8rem); letter-spacing: -.055em; line-height: .96 } .m-cierre .m-ctas{ margin-top: 20px }
  html.m-js .m-rv{ opacity: 0; transform: translateY(14px); transition: opacity .42s var(--e), transform .42s var(--e) } html.m-js .m-rv.on{ opacity: 1; transform: none }
  @media (prefers-reduced-motion: reduce){ .m-rv{ opacity: 1; transform: none; transition: none } }
  /* barra superior, hojas, barra inferior, WhatsApp, footer */
  .m-nav{ display: flex !important; position: fixed; top: 0; left: 0; right: 0; z-index: 1200; align-items: flex-end; justify-content: center; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-bottom: 12px; background: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--linea) }
  html[data-theme="dark"] .m-nav, body.dark .m-nav{ background: rgba(0,0,0,.8) } .m-nav img{ height: 26px; width: auto } .m-nav-b{ display: none !important }
  .m-sheet{ position: fixed; top: 0; left: 0; width: calc(100 * var(--1vw)); height: calc(100 * var(--1vh)); z-index: 1300; display: none; opacity: 0; transition: opacity .22s var(--e); background: rgba(11,7,8,.42); -webkit-backdrop-filter: saturate(120%) blur(14px); backdrop-filter: saturate(120%) blur(14px); overscroll-behavior: contain } .m-sheet.visible{ display: block }
  .m-sheet-in{ position: absolute; left: 16px; right: 16px; top: 50dvh; transform: translateY(-50%) scale(.96); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--papel); color: var(--ink); border-radius: 26px; padding: 18px var(--pad) 22px; opacity: 0; transition: transform .28s var(--e), opacity .2s }
  .m-sheet.open{ opacity: 1 }
  .m-sheet.open .m-sheet-in{ transform: translateY(-50%) scale(1); opacity: 1 }
  .m-sheet-hd{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px } .m-sheet-hd .m-h2{ margin: 0 }
  .m-sheet-x{ width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); background: none; color: var(--ink); font: 600 .95rem 'Poppins', sans-serif }
  .m-sheet .m-cards{ border-top: 1px solid var(--linea) } .m-sheet .m-card{ display: grid; grid-template-columns: 1fr 18px; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--ink) }
  .m-sheet .m-card-ph{ display: none } .m-sheet .m-card-tx b{ font-size: 1.2rem; font-weight: 700; letter-spacing: -.04em } .m-sheet .m-chev{ color: var(--acc); font-size: 1.5rem }
  .m-menu-grp{ border-top: 1px solid var(--linea) } .m-menu-grp a{ display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--linea); font: 700 1.2rem 'Poppins', sans-serif; letter-spacing: -.04em; color: var(--ink); text-decoration: none } .m-menu-grp .m-chev{ color: var(--acc); font-size: 1.4rem }
  .m-pills{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px } .m-pills a, .m-pills button{ padding: 9px 14px; border-radius: 100px; border: 1.5px solid var(--ink); background: none; font: 600 .84rem 'Poppins', sans-serif; color: var(--ink); text-decoration: none; cursor: pointer } .m-pills .on{ background: var(--acc); border-color: var(--acc); color: #fff } .m-sheet .m-btn{ margin-top: 16px }
  .m-tab{ display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; height: var(--m-tab); grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(255,255,255,.84); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--linea) }
  html[data-theme="dark"] .m-tab, body.dark .m-tab{ background: rgba(0,0,0,.84) }
  .m-tab a{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--mut); font: 600 .62rem 'Poppins', sans-serif }
  .m-tab a svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round } .m-tab a svg circle{ fill: currentColor; stroke: none }
  .m-tab a.on{ color: var(--acc) } .m-tab a.on::after{ content: ""; position: absolute; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc) }
  .m-wa{ display: grid !important; position: fixed; right: 18px; bottom: calc(var(--m-tab) + 14px); z-index: 1190; width: 52px; height: 52px; border-radius: 50%; background: var(--acc); color: #fff; place-items: center; box-shadow: 0 8px 24px rgba(172,55,73,.38); text-decoration: none } .m-wa svg{ width: 25px; height: 25px; fill: currentColor }
  .m-foot{ display: block !important; padding: 30px var(--pad) calc(var(--m-tab) + 8px); background: #0B0708; color: #fff }
  .m-foot img{ height: 30px; width: auto } .m-foot-p{ margin: 12px 0 16px; font: 300 .92rem/1.5 'Poppins', sans-serif; color: rgba(255,255,255,.7) }
  .m-foot-l{ display: grid } .m-foot-l a{ padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); font: 600 1rem 'Poppins', sans-serif; color: #fff; text-decoration: none }
  .m-foot-soc{ display: flex; gap: 10px; margin: 16px 0 12px } .m-foot-soc a{ width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; color: #fff } .m-foot-soc svg{ width: 20px; height: 20px }
  .m-foot-legal{ margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.14); font: 400 .74rem 'Poppins', sans-serif; color: rgba(255,255,255,.5) } .m-foot-legal a{ color: inherit; text-decoration: none }
}
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  .m-cifras{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .m-cifras div{ padding: 16px 14px; border-radius: 16px; background: var(--humo) } .m-blanco .m-cifras div{ background: var(--humo) } .m-humo .m-cifras div{ background: var(--papel) }
  .m-cifras b{ display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.06em; line-height: 1; color: var(--acc) } .m-cifras span{ display: block; margin-top: 6px; font-size: .84rem; color: var(--soft) }
  .m-mapa{ width: 100%; height: 64vw; min-height: 260px; border-radius: var(--r); overflow: hidden; background: #0B0708; margin: 14px 0 } .m-mapa #map{ width: 100% !important; height: 100% !important }
  .m-filtros{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px } .m-filtros button{ padding: 9px 14px; border-radius: 100px; border: 1.5px solid var(--ink); background: none; font: 600 .84rem 'Poppins', sans-serif; color: var(--ink) } .m-filtros button.on{ background: var(--acc); border-color: var(--acc); color: #fff }
  .m-lf a.oculto{ display: none }
  .m-form{ display: grid; gap: 12px } .m-form label{ display: grid; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--acc) } .m-form-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
  .m-form input, .m-form select, .m-form textarea{ width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--papel); color: var(--ink); font: 500 16px 'Poppins', sans-serif; -webkit-appearance: none }
  .m-form textarea{ min-height: 110px; resize: vertical } .m-form .m-btn{ margin-top: 4px }
  .m-reloj{ margin: 20px 0 0 } .m-reloj .m-kick{ justify-content: center } .m-reloj-h{ margin: 0; font-size: clamp(3rem, 18vmin, 5rem); font-weight: 700; letter-spacing: -.07em; line-height: 1; font-variant-numeric: tabular-nums } .m-reloj .m-nota{ text-align: center }
  .m-crema .m-h2, .m-crema .m-p, .m-crema .m-pasos b, .m-crema .m-pasos p{ color: #0B0708 } .m-crema .m-kick{ color: var(--vino) } .m-crema .m-kick::before{ background: var(--vino) }
  .m-rojo .m-pasos b{ color: #fff } .m-rojo .m-pasos p{ color: rgba(255,255,255,.85) } .m-rojo .m-paso-n{ color: #fff; opacity: .6 } .m-rojo .m-pasos li{ border-color: rgba(255,255,255,.2) }
}
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){ .m-decl{ grid-template-columns: 1fr } .m-bordo .m-decl div{ background: rgba(255,255,255,.08) } .m-bordo .m-decl b{ color: #fff; font-size: 2.6rem } .m-bordo .m-decl span{ color: rgba(255,255,255,.85); font-size: 1.05rem } }

@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  /* la etiqueta 3D dentro del bloque móvil: botella arriba, editor apilado */
  .m-etiqueta .bx-etiqueta-grid{ display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 !important; max-width: none !important }
  .m-etiqueta #bx-canvas-botella{ width: 100% !important; height: 62svh !important; min-height: 360px !important; border-radius: var(--r); background: var(--humo) }
  .m-etiqueta .bx-botella{ position: static !important } .m-etiqueta .bx-cargando{ font-size: .8rem; color: var(--mut) }
  .m-etiqueta .bx-editor{ display: grid !important; gap: 14px !important }
  .m-etiqueta .bx-campo label, .m-etiqueta .bx-campo-lb{ font-size: .78rem; font-weight: 600; color: var(--acc) }
  .m-etiqueta input[type="text"], .m-etiqueta textarea{ width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--papel); color: var(--ink); font: 500 16px 'Poppins', sans-serif }
  .m-etiqueta .bx-ops{ display: flex; flex-wrap: wrap; gap: 8px } .m-etiqueta .bx-op{ padding: 9px 14px; border-radius: 100px; border: 1.5px solid var(--ink); background: none; font: 600 .84rem 'Poppins', sans-serif; color: var(--ink) } .m-etiqueta .bx-op.is-on{ background: var(--acc); border-color: var(--acc); color: #fff }
  .m-etiqueta .bx-color{ width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--linea); background: var(--bx-c) } .m-etiqueta .bx-color.is-on{ border-color: var(--acc) }
  .m-etiqueta .bx-btn, .m-etiqueta .bx-reservar{ display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; background: var(--acc); color: #fff !important; -webkit-text-fill-color: #fff; font: 600 1rem 'Poppins', sans-serif; text-decoration: none; border: 0; width: 100% }
  .m-etiqueta .bx-btn-ghost{ background: transparent; border: 1.5px solid var(--ink); color: var(--ink) !important; -webkit-text-fill-color: var(--ink) }
  .m-etiqueta .bx-archivo{ display: grid; gap: 8px } .m-etiqueta #bx-in-imagen{ display: none } .m-etiqueta .bx-nota{ font-size: .8rem; color: var(--mut) }
}
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  /* ── barra superior estilo Apple: logo a la izquierda, acción a la derecha, se afirma al bajar ── */
  .m-nav{ justify-content: space-between !important; padding: 0 var(--pad) 10px !important; transition: background .3s, box-shadow .3s }
  .m-nav.firme{ background: rgba(255,255,255,.94); box-shadow: 0 1px 0 var(--linea) } html[data-theme="dark"] .m-nav.firme, body.dark .m-nav.firme{ background: rgba(0,0,0,.94) }
  .m-nav-logo img{ height: 26px; width: auto }
  .m-nav-cta{ display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 100px; background: var(--acc); color: #fff !important; -webkit-text-fill-color: #fff; font: 600 .82rem 'Poppins', sans-serif; text-decoration: none }
  /* ── hojas: tours con foto por categoría ── */
  .m-sheet .m-kick{ margin-bottom: 4px } .m-sheet .m-lf a{ padding: 12px 0 } .m-sheet .m-lf a:first-child{ border-top: 0 }
  .m-sheet .m-pills button.on, .m-sheet .m-pills a.on{ background: var(--acc); border-color: var(--acc); color: #fff }
  /* ── eventos: hero como menú de cuatro tipos con sus colores ── */
  .m-hero-ev{ padding: 0 !important; background: #0B0708; color: #fff } .m-hero-ev .m-hero-tx{ padding: 40px var(--pad) 24px } .m-hero-ev .m-h1{ color: #fff } .m-hero-ev .m-lead{ color: rgba(255,255,255,.82) } .m-hero-ev .m-kick{ color: rgba(255,255,255,.75) } .m-hero-ev .m-kick::before, .m-hero-ev .m-kick::after{ background: rgba(255,255,255,.6) }
  .m-ev-menu{ display: grid } .m-ev-t{ display: grid; grid-template-columns: 2.2rem 1fr 18px; align-items: center; column-gap: 12px; padding: 22px var(--pad); background: var(--c); color: var(--t); text-decoration: none; text-align: left !important }
  .m-ev-n{ font-size: .78rem; font-weight: 700; opacity: .6; grid-row: 1 / span 2; align-self: start; margin-top: .55rem }
  .m-ev-t b{ font-size: clamp(2rem, 11vmin, 2.9rem); font-weight: 700; letter-spacing: -.06em; line-height: .95; grid-column: 2 } .m-ev-t i{ grid-column: 2; font-style: normal; font-size: .9rem; opacity: .8; margin-top: 4px } .m-ev-t em{ grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: 1.6rem; opacity: .7 }
  .m-hero-tx-2{ padding: 24px var(--pad) 28px !important } .m-hero-ev .m-btn-ghost{ color: #fff !important; -webkit-text-fill-color: #fff; border-color: rgba(255,255,255,.45) }
  /* ── corporativo: hero negro con la frase y el reloj ── */
  .m-hero-cx{ padding: 0 !important; background: #0B0708; color: #fff } .m-hero-cx .m-hero-tx{ padding: 44px var(--pad) 32px; min-height: 60svh; justify-content: center } .m-hero-cx .m-h1{ color: #fff } .m-hero-cx .m-h1 em{ font-style: normal; color: var(--acc) } .m-h1-xl{ font-size: clamp(2.6rem, 14vmin, 4rem) !important }
  .m-hero-cx .m-lead{ color: rgba(255,255,255,.82) } .m-hero-cx .m-kick{ color: rgba(255,255,255,.75) } .m-hero-cx .m-kick::before, .m-hero-cx .m-kick::after{ background: rgba(255,255,255,.6) }
  .m-hero-cx .m-reloj{ margin: 26px 0 0; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.06); width: 100% } .m-hero-cx .m-reloj-h{ color: #fff } .m-hero-cx .m-nota{ color: rgba(255,255,255,.6) } .m-hero-cx .m-btn-ghost{ color: #fff !important; -webkit-text-fill-color: #fff; border-color: rgba(255,255,255,.45) }
  html[data-theme="dark"] .m-hero-ev, html[data-theme="dark"] .m-hero-cx, body.dark .m-hero-ev, body.dark .m-hero-cx{ background: #141112 }
}
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){ .m-tema{ cursor: pointer } .m-pills .m-tema.on{ background: var(--acc); border-color: var(--acc); color: #fff } }
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  /* ═══ barra inferior flotante, como WhatsApp e Instagram ═══ */
  :root{ --m-tab: calc(64px + 18px + env(safe-area-inset-bottom, 0px)) }
  .m-tab{ left: 16px !important; right: 16px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; height: 64px !important; padding-bottom: 0 !important; border-radius: 22px; border: .5px solid var(--linea) !important; box-shadow: 0 10px 30px rgba(11,7,8,.16), 0 2px 6px rgba(11,7,8,.06); background: rgba(255,255,255,.9) !important; -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); overflow: hidden }
  html[data-theme="dark"] .m-tab, body.dark .m-tab{ background: rgba(20,17,18,.92) !important; box-shadow: 0 10px 30px rgba(0,0,0,.5) }
  .m-tab a{ gap: 3px; font-size: .6rem !important; border-radius: 16px; margin: 6px 2px }
  .m-tab a svg{ width: 25px; height: 25px }
  .m-tab a.on{ background: rgba(172,55,73,.1) } .m-tab a.on::after{ display: none }
  .m-tab a:active{ background: rgba(172,55,73,.16) }
  .m-wa{ bottom: calc(64px + 14px + 14px + env(safe-area-inset-bottom, 0px)) !important; right: 18px !important }
}

@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  /* Safari iOS: las barras del navegador toman el color del fondo de la página. Sin líneas ni sombras en los bordes. */
  html{ background: var(--papel) !important; overscroll-behavior: none }
  body{ background: var(--papel) !important; min-height: 100svh }
  #mApp > :last-child, .m-foot{ border-bottom: 0 !important; box-shadow: none !important }
  .m-foot{ padding-bottom: calc(var(--m-tab) + 8px) !important }
}

@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  /* barra flotante limpia, como la de Safari: sin sombra, sin borde, solo vidrio esmerilado sobre la página */
  .m-tab{ box-shadow: none !important; border: 0 !important; background: rgba(246,242,240,.72) !important; -webkit-backdrop-filter: saturate(160%) blur(24px) !important; backdrop-filter: saturate(160%) blur(24px) !important }
  html[data-theme="dark"] .m-tab, body.dark .m-tab{ background: rgba(30,26,27,.72) !important; box-shadow: none !important }
  .m-tab a.on{ background: rgba(172,55,73,.12) }
  .m-wa{ box-shadow: none !important }
  .m-nav{ border-bottom: 0 !important; box-shadow: none !important } .m-nav.firme{ box-shadow: none !important; background: rgba(255,255,255,.72) !important }
  html[data-theme="dark"] .m-nav.firme, body.dark .m-nav.firme{ background: rgba(0,0,0,.72) !important }
}


@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
}
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  /* Eventos: las palabras del menú nunca superan el ancho del teléfono */
  .m-ev-t{ overflow: hidden } .m-ev-t b{ font-size: clamp(1.7rem, 9.6vw, 2.9rem) !important; overflow-wrap: anywhere; min-width: 0 }
  /* Blending: el aviso de carga vive dentro del recuadro de la botella y desaparece cuando el 3D está listo */
  .m-etiqueta .bx-botella{ position: relative !important } .m-etiqueta .bx-cargando{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none }
  .m-etiqueta .con-3d.listo .bx-cargando, .m-etiqueta .listo .bx-cargando, .listo .m-etiqueta .bx-cargando{ display: none !important }
  .m-etiqueta .bx-botella-n{ display: none !important }
}

@media (prefers-reduced-motion: reduce){ .m-sheet-in{ transition: none } .m-btn:active{ transform: none } }

/* =====================================================================
   Por qué elegirnos (móvil): tarjeta destacada, grilla de 2 columnas
   con íconos, tarjeta ancha de cierre y botón a WhatsApp.
   ===================================================================== */
@media (max-width: 1023px), (pointer: coarse) and (max-width: 2000px){
  .md{ background: var(--humo) }
  .md .m-p{ margin-bottom: 22px }
  .md-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
  .md-c{ position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 15px 17px; border-radius: 20px; background: var(--papel);
    box-shadow: 0 0 0 1px var(--linea), 0 10px 26px -18px rgba(11,7,8,.35); min-width: 0 }
  .md-c h3{ margin: 2px 0 0; font: 600 1rem/1.15 'Poppins', system-ui, sans-serif; letter-spacing: -.02em; color: var(--ink) }
  .md-c p{ margin: 0; font-size: .84rem; line-height: 1.45; font-weight: 400; color: var(--mut) }
  .md-ico{ width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px;
    background: color-mix(in srgb, var(--acc) 11%, transparent); color: var(--acc) }
  /* la destacada: 100% privado */
  .md-hero{ grid-column: 1 / -1; padding: 22px 20px 22px; background: #0B0708; overflow: hidden; gap: 4px;
    box-shadow: 0 18px 40px -22px rgba(107,29,42,.75) }
  .md-hero::after{ content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(172,55,73,.55), rgba(172,55,73,0) 70%); pointer-events: none }
  .md-num{ position: relative; z-index: 1; font: 800 clamp(3.4rem, 19vw, 4.6rem)/.9 'Poppins', system-ui, sans-serif; letter-spacing: -.06em;
    background: linear-gradient(120deg, #fff 10%, #E8A3AE 60%, #AC3749); -webkit-background-clip: text; background-clip: text; color: transparent }
  .md-hero h3{ position: relative; z-index: 1; color: #fff; font-size: 1.25rem; margin-top: 4px }
  .md-hero p{ position: relative; z-index: 1; color: rgba(255,255,255,.72); font-size: .92rem; max-width: 30ch }
  /* la ancha de cierre: vino de verdad */
  .md-ancho{ grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; padding: 18px 18px; background: var(--vino) }
  .md-ancho .md-ico{ margin: 0; flex-shrink: 0; width: 46px; height: 46px; background: rgba(255,255,255,.14); color: #fff }
  .md-ancho h3{ color: #fff; margin: 0 0 3px } .md-ancho p{ color: rgba(255,255,255,.78) }
  /* botón */
  .md-cta{ margin-top: 18px; gap: 10px; width: 100% }
  .md-cta svg{ flex-shrink: 0 }
  /* modo oscuro */
  html[data-theme="dark"] .md-hero, body.dark .md-hero{ background: #1A1214; box-shadow: 0 0 0 1px rgba(255,255,255,.08) }
  html[data-theme="dark"] .md-c, body.dark .md-c{ box-shadow: 0 0 0 1px var(--linea) }
  /* aparición en cascada al llegar a la sección */
  html.m-js .md .md-c{ opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s var(--e), transform .6s var(--e) }
  html.m-js .md.md-on .md-c{ opacity: 1; transform: none }
  .md.md-on .md-c:nth-child(2){ transition-delay: .06s } .md.md-on .md-c:nth-child(3){ transition-delay: .12s }
  .md.md-on .md-c:nth-child(4){ transition-delay: .18s } .md.md-on .md-c:nth-child(5){ transition-delay: .24s }
  .md.md-on .md-c:nth-child(6){ transition-delay: .30s } .md.md-on .md-c:nth-child(7){ transition-delay: .36s }
  .md.md-on .md-c:nth-child(8){ transition-delay: .42s }
  .md-c:active{ transform: scale(.98) !important; transition-duration: .1s !important }
  @media (prefers-reduced-motion: reduce){ html.m-js .md .md-c{ opacity: 1; transform: none; transition: none } }
}

/* Título de la versión de computadora: no es un <h1> (hay uno solo, el de la versión móvil), pero conserva el aspecto que el navegador le daba a un h1. Especificidad cero: las clases propias siguen mandando. */
:where([role="heading"][aria-level="1"]){display:block;font-size:2em;font-weight:bold;margin-block:.67em}