/* =========================================================
   DosiJamon UX — Carta (destino del código QR)

   Se abre de pie, con datos móviles, en un centro comercial: nada de hero a
   pantalla completa, ni animaciones de scroll, ni fotos grandes. Las
   pestañas de categoría filtran de verdad (ver dosijamon-menu.js) para no
   obligar a desplazarse por los 32 productos completos.

   Hoja independiente y deliberadamente pequeña: no depende de
   dosijamon-ux.css, que solo se carga en la portada.
   ========================================================= */

/* Sin esto, el fondo blanco por defecto del navegador se ve un instante
   al cargar la página (y también se cuela por transparencia durante el
   fundido de entrada), dando la sensación de un "flash" molesto entre
   páginas. Estas páginas son siempre pantalla completa del shortcode
   (plantilla Elementor Canvas, sin cabecera ni pie del tema), así que un
   fondo oscuro fijo en html/body es seguro en todo el sitio. */
/* El overflow-x va en html/body, no en .dosijamon-ux: puesto en un div
   interno, ese div se convierte en el "contenedor de scroll" más cercano y
   la cabecera sticky deja de pegarse a la ventana real (se queda pegada
   dentro de ese div en vez de la página), que es justo lo que pasaba. */
html,
body{
  background: #070707;
  overflow-x: hidden;
}

.dosijamon-ux{
  --dosi-bg:#070707;
  --dosi-bg-2:#0b0b0b;
  --dosi-gold:#D4AF37;
  --dosi-gold-soft:rgba(212,175,55,.16);
  --dosi-text:#EDEDED;
  --dosi-muted:rgba(237,237,237,.62);
  --dosi-border:rgba(255,255,255,.10);
  --dosi-display:'Cinzel','Playfair Display',Georgia,serif;
  --dosi-serif:'Playfair Display',Georgia,serif;
  --dosi-sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  background:var(--dosi-bg);
  color:var(--dosi-text);
  font-family:var(--dosi-sans);
  font-weight:300;
  line-height:1.6;
}

.dosijamon-ux *,
.dosijamon-ux *::before,
.dosijamon-ux *::after{ box-sizing:border-box; }

.dosijamon-ux img{ max-width:100%; height:auto; display:block; }

p:has(+ .dosijamon-ux){ margin:0; padding:0; line-height:0; }

/* padding-top compensa que .dosi-topbar ya no está en el flujo normal
   (position:fixed): sin esto, el contenido arrancaría tapado debajo. */
.dosi-wrap{ width:100%; max-width:1100px; margin:0 auto; padding:76px 16px 60px; scroll-margin-top: 92px; }

/* ---------------------------------------------------------
   Barra superior y selector de idioma
   --------------------------------------------------------- */
/* Idéntica a la cabecera de la home (dosijamon-ux.css), salvo la posición:
   aquí no hay héroe debajo, así que se queda fija desde el principio
   (sticky) en vez de aparecer tras él. Antes estas dos hojas habían
   divergido (sin los estados :hover, con otro grosor de letra en la marca)
   y el enlace se veía casi negro al pasar el ratón, porque sin nuestra
   regla :hover ganaba el hover genérico del tema. */
.dosi-topbar{
  /* position:fixed en vez de sticky: en la plantilla Elementor Canvas algo
     en la cadena de contenedores neutralizaba el sticky (se quedaba pegada
     dentro de un contenedor en vez de la ventana real). Con fixed no
     depende de eso — es la misma técnica que ya funciona en la home. El
     hueco que deja al salir del flujo se compensa con el padding-top de
     dosi-wrap, justo debajo. */
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  background:rgba(7,7,7,.92);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.dosi-topbar-inner{
  max-width:1180px;
  margin:0 auto;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.dosi-topbar-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family:'Cinzel',serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#EDEDED;
  text-decoration:none;
}
.dosi-topbar-logo{
  width: 34px;
  height: 34px;
  display: block;
  flex: none;
}
.dosi-topbar-actions{ display:flex; align-items:center; gap:20px; }
.dosi-topbar-link{
  position:relative;
  color:rgba(237,237,237,.68);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:4px;
  transition:color .3s ease;
}
.dosi-topbar-link::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:1px;
  background:#D4AF37;
  transform:translateX(-50%);
  transition:width .3s ease;
}
.dosi-topbar-link:hover,
.dosi-topbar-link:focus,
.dosi-topbar-link:focus-visible,
.dosi-topbar-link:active,
.dosi-topbar-link:visited{ color:#D4AF37 !important; }
.dosi-topbar-link:hover::after,
.dosi-topbar-link:focus::after,
.dosi-topbar-link:active::after{ width:100%; }
.dosi-topbar-brand:hover,
.dosi-topbar-brand:focus,
.dosi-topbar-brand:active,
.dosi-topbar-brand:visited{ color:#EDEDED !important; }
.dosi-lang{ display:flex; gap:2px; }
.dosi-lang-item{
  padding:5px 9px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(237,237,237,.55);
  text-decoration:none;
  border-radius:4px;
  transition:color .2s ease, background .2s ease;
}
.dosi-lang-item:hover,
.dosi-lang-item:focus,
.dosi-lang-item:active,
.dosi-lang-item:visited{ color:#D4AF37 !important; }
.dosi-lang-item.is-current{ color:#D4AF37 !important; background:rgba(212,175,55,.14); font-weight:500; }

.dosi-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------------------------------------------------------
   Menú hamburguesa (móvil/tablet)
   --------------------------------------------------------- */
.dosi-topbar-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px;
  height:34px;
  padding:0;
  border:none;
  border-radius:6px;
  background:transparent !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.dosi-topbar-toggle:hover,
.dosi-topbar-toggle:focus,
.dosi-topbar-toggle:active{ background:transparent !important; }
.dosi-topbar-toggle:focus-visible{ box-shadow:0 0 0 2px rgba(212,175,55,.5); }
.dosi-topbar-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--dosi-gold);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.dosi-topbar-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.dosi-topbar-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.dosi-topbar-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.dosi-mobile-menu{
  display:none;
  flex-direction:column;
  padding:6px 22px 20px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(7,7,7,.98);
}
.dosi-mobile-menu.is-open{ display:flex; }
.dosi-mobile-menu-link{
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
}
.dosi-mobile-menu-link:hover,
.dosi-mobile-menu-link:focus,
.dosi-mobile-menu-link:active,
.dosi-mobile-menu-link:visited{ color:#D4AF37 !important; }
.dosi-mobile-menu-langs{ padding-top:14px; display:flex; justify-content:center; }
@media (max-width:640px){
  .dosi-topbar-link{ display:none; }
  .dosi-topbar-actions .dosi-lang{ display:none; }
  .dosi-topbar-toggle{ display:flex; }
}
@media (min-width:641px){
  .dosi-topbar-toggle{ display:none !important; }
  .dosi-mobile-menu{ display:none !important; }
}

/* ---------------------------------------------------------
   Cabecera
   --------------------------------------------------------- */
.dosi-menu-head{ padding:26px 0 16px; text-align:center; }
.dosi-menu-title{
  margin:0;
  font-family:var(--dosi-display);
  font-size:clamp(1.5rem,6vw,1.9rem);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dosi-gold);
}
.dosi-menu-intro{ margin:10px auto 0; max-width:520px; font-size:.85rem; color:var(--dosi-muted); }
.dosi-menu-links{ margin:14px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.dosi-menu-links a{
  color:var(--dosi-gold);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--dosi-gold-soft);
  transition:color .2s ease,border-color .2s ease;
}
.dosi-menu-links a:hover,
.dosi-menu-links a:focus,
.dosi-menu-links a:active,
.dosi-menu-links a:visited{ color:#fff !important; border-color:#fff; }

/* ---------------------------------------------------------
   Pestañas de categoría (fijas, filtran con JS)
   --------------------------------------------------------- */
.dosi-chips{
  position:sticky;
  top:45px;
  z-index:50;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:12px 0;
  margin:6px 0 10px;
  background:var(--dosi-bg);
  border-bottom:1px solid var(--dosi-border);
}
.dosi-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 15px;
  border:1px solid var(--dosi-border);
  border-radius:999px;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dosi-text);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.dosi-chip-count{
  font-size:10px;
  opacity:.55;
}
.dosi-chip:hover,
.dosi-chip:focus,
.dosi-chip:focus-visible,
.dosi-chip:active,
.dosi-chip:visited{ border-color:var(--dosi-gold); color:var(--dosi-gold) !important; }
.dosi-chip.is-active{
  background:var(--dosi-gold);
  border-color:var(--dosi-gold);
  color:#000 !important;
  font-weight:600;
}
.dosi-chip.is-active .dosi-chip-count{ opacity:.7; }

/* ---------------------------------------------------------
   Secciones y filas
   --------------------------------------------------------- */
.dosi-menu-section{ padding:20px 0 8px; scroll-margin-top:96px; }
.dosi-menu-section[hidden]{ display:none; }
.dosi-menu-section-title{
  margin:0 0 4px;
  font-family:var(--dosi-display);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dosi-gold);
}
.dosi-menu-section-intro{ margin:0 0 16px; font-size:.86rem; color:var(--dosi-muted); }

.dosi-legal{ max-width:760px; margin:8px auto 32px; text-align:left; }
.dosi-legal-section{ padding:22px 0; border-bottom:1px solid rgba(237,237,237,.1); }
.dosi-legal-section:first-child{ padding-top:4px; }
.dosi-legal-section:last-child{ border-bottom:none; }
.dosi-legal-section-title{
  margin:0 0 10px;
  font-family:var(--dosi-display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dosi-gold);
}
.dosi-legal-section-body{ font-size:.88rem; line-height:1.65; color:rgba(237,237,237,.82); }
.dosi-legal-section-body p{ margin:0 0 12px; }
.dosi-legal-section-body p:last-child{ margin-bottom:0; }
.dosi-legal-section-body a{ color:var(--dosi-gold); text-decoration:underline; }

.dosi-rows{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  /* align-items:start (no el "stretch" por defecto de grid): sin esto, al
     abrir "Conoce su historia" en una tarjeta, todas las de su misma fila se
     estiraban a su altura y dejaban un hueco vacío debajo al cerrarla. */
  align-items:start;
  gap:16px;
}
@keyframes dosiRowIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.dosi-menu-section.is-entering .dosi-row{
  opacity:0;
  animation: dosiRowIn .5s ease-out forwards;
}
.dosi-menu-section.is-entering .dosi-row:nth-child(1){ animation-delay:.02s; }
.dosi-menu-section.is-entering .dosi-row:nth-child(2){ animation-delay:.07s; }
.dosi-menu-section.is-entering .dosi-row:nth-child(3){ animation-delay:.12s; }
.dosi-menu-section.is-entering .dosi-row:nth-child(4){ animation-delay:.17s; }
.dosi-menu-section.is-entering .dosi-row:nth-child(5){ animation-delay:.22s; }
.dosi-menu-section.is-entering .dosi-row:nth-child(6){ animation-delay:.27s; }
.dosi-menu-section.is-entering .dosi-row:nth-child(7){ animation-delay:.32s; }
.dosi-menu-section.is-entering .dosi-menu-section-title,
.dosi-menu-section.is-entering .dosi-menu-section-intro{
  opacity:0;
  animation: dosiRowIn .4s ease-out forwards;
}
.dosi-row{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  transition:transform .3s ease,box-shadow .3s ease;
}
/* Marco degradado de 1px, el mismo recurso que usan las tarjetas de la
   portada (bocata-card): más elegante que un borde plano de un solo tono. */
.dosi-row::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(135deg, rgba(212,175,55,.5), rgba(255,255,255,.05), rgba(212,175,55,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  opacity:.6;
  transition:opacity .3s ease;
}
.dosi-row:hover{ transform:translateY(-3px); box-shadow:0 20px 46px rgba(0,0,0,.5); }
.dosi-row:hover::before{ opacity:1; }
.dosi-row:has([open]){ background:rgba(212,175,55,.05); }
.dosi-row:has([open])::before{ opacity:1; }
.dosi-row-media{
  height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 100% at 50% 15%, rgba(212,175,55,.10), transparent 60%),
    #0c0c0c;
  border-bottom:1px solid rgba(212,175,55,.14);
}
.dosi-row-media img{
  /* width/height fijos al 86% (no max-width/max-height): así una foto de
     baja resolución (los refrescos, p.ej.) se escala igual que las demás
     en vez de quedarse a su tamaño diminuto original; object-fit:contain
     evita que se deforme. */
  width:86%;
  height:86%;
  object-fit:contain;
  filter:contrast(1.05) saturate(1.05);
  cursor:zoom-in;
  transition:transform .3s ease;
}
.dosi-row-media img:hover{ transform:scale(1.04); }
.dosi-row-media img:focus-visible{ outline:2px solid var(--dosi-gold); outline-offset:4px; }

/* ---------------------------------------------------------
   Foto ampliada (lightbox)
   --------------------------------------------------------- */
.dosi-lightbox{
  position:fixed !important;
  inset:0 !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:32px;
  margin:0 !important;
  background:rgba(4,4,4,.92);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .25s ease;
}
.dosi-lightbox[hidden]{ display:none !important; }
.dosi-lightbox.is-open{ opacity:1; }
.dosi-lightbox-img{
  max-width:min(90vw,900px);
  max-height:86vh;
  width:auto !important;
  height:auto !important;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  transform:scale(.96);
  transition:transform .25s ease;
}
.dosi-lightbox.is-open .dosi-lightbox-img{ transform:scale(1); }
.dosi-lightbox-close{
  position:absolute !important;
  top:22px !important;
  right:22px !important;
  width:40px !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(212,175,55,.4);
  border-radius:999px;
  background:rgba(0,0,0,.4);
  color:#D4AF37 !important;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.dosi-lightbox-close:hover{ background:rgba(212,175,55,.15); border-color:#D4AF37; }
html.dosi-lightbox-locked{ overflow:hidden !important; }
.dosi-row-media-empty{ font-size:22px; color:rgba(212,175,55,.3); }
.dosi-row-body{ display:flex; flex-direction:column; padding:14px 14px 16px; flex:1 1 auto; }
.dosi-row-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dosi-row-titles{ min-width:0; }
.dosi-row-name{
  margin:0;
  font-family:var(--dosi-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dosi-text);
}
.dosi-row-subtitle{
  /* Era cursiva y costaba leerla, sobre todo en el móvil. Misma familia
     (Playfair Display), pero recta y con más peso. */
  margin:4px 0 0;
  font-family:var(--dosi-serif);
  font-style:normal;
  font-weight:600;
  font-size:.95rem;
  color:var(--dosi-text);
}
.dosi-badge-free{
  display:inline-block;
  margin:6px 0 8px;
  padding:3px 10px;
  border:1px solid var(--dosi-gold);
  border-radius:999px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dosi-gold);
}
.dosi-row-format{
  margin:2px 0 0;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dosi-muted);
}
.dosi-row-price{ flex:0 0 auto; text-align:right; }
/* Antes solo se decía "el precio incluye bebida" dentro del párrafo largo
   de descripción — fácil de pasar por alto. Esta insignia, junto al
   precio, se ve sin tener que leer el texto entero. */
.dosi-drink-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:6px;
  padding:3px 10px;
  border:1px solid rgba(212,175,55,.45);
  border-radius:999px;
  font-family:var(--dosi-sans);
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dosi-gold);
  white-space:nowrap;
  cursor:help;
  transition:background .25s ease, border-color .25s ease;
}
.dosi-drink-badge:hover,
.dosi-drink-badge:focus-visible{
  background:rgba(212,175,55,.16);
  border-color:var(--dosi-gold);
  outline:none;
}
.dosi-drink-badge svg{ width:11px; height:11px; flex:none; }
/* Mismo tooltip propio que los alérgenos (.dosi-alg-badge), pero más
   ancho: la lista de bebidas es más larga que un solo alérgeno. */
/* Anclado a la derecha (no centrado) a propósito: la fila tiene
   overflow:hidden y esta insignia va dentro de .dosi-row-price, que está
   alineado a la derecha — si el tooltip se centraba, la mitad se recortaba
   contra ese borde. Creciendo hacia la izquierda se queda siempre dentro. */
.dosi-drink-badge::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 9px);
  right:0;
  transform:translateY(4px) scale(.96);
  transform-origin: right bottom;
  width:max-content;
  max-width:200px;
  text-align:left;
  white-space:normal;
  background:#141210;
  border:1px solid rgba(212,175,55,.45);
  color:var(--dosi-text);
  font-family:var(--dosi-sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  line-height:1.4;
  padding:8px 11px;
  border-radius:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:30;
}
.dosi-drink-badge::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 4px);
  right:14px;
  border:5px solid transparent;
  border-top-color:rgba(212,175,55,.6);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s;
  z-index:30;
}
.dosi-drink-badge:hover::after, .dosi-drink-badge:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.dosi-drink-badge:hover::before, .dosi-drink-badge:focus-visible::before{
  opacity:1;
  visibility:visible;
}

.dosi-price{
  margin:0;
  font-family:var(--dosi-serif);
  font-weight:600;
  font-size:1rem;
  color:var(--dosi-gold);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dosi-price.is-pending{
  font-family:var(--dosi-sans);
  font-size:10px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dosi-muted);
}
.dosi-price-dual{ display:flex; flex-direction:column; gap:2px; font-size:.9rem; }
.dosi-price-label{
  display:block;
  font-family:var(--dosi-sans);
  font-size:9px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dosi-muted);
}

.dosi-row-short{ margin:8px 0 0; font-size:.86rem; color:var(--dosi-muted); }

.dosi-allergens{
  margin:6px 0 0;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.dosi-allergens-label{
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dosi-muted);
}
.dosi-alg-badge{
  position:relative;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.4);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:var(--dosi-gold);
  cursor:help;
  transition:background .25s ease, border-color .25s ease, transform .2s ease;
}
.dosi-alg-badge:hover,
.dosi-alg-badge:focus-visible{
  background:rgba(212,175,55,.16);
  border-color:var(--dosi-gold);
  transform:scale(1.12);
  outline:none;
}
/* Tooltip propio en vez del title nativo del navegador: mismo estilo que el
   resto de la web, con una pequeña animación de aparición.
   Anclado a la izquierda (no centrado) a propósito: la tarjeta tiene
   overflow:hidden, y esta fila de alérgenos empieza pegada al borde
   izquierdo — si el tooltip se centraba, la mitad se recortaba contra ese
   borde (visto con el badge de gluten en el primer producto de la fila).
   Creciendo hacia la derecha desde el propio icono se queda siempre dentro. */
.dosi-alg-badge::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 9px);
  left:0;
  transform:translateY(4px) scale(.96);
  transform-origin: left bottom;
  width:max-content;
  max-width:180px;
  text-align:left;
  white-space:normal;
  background:#141210;
  border:1px solid rgba(212,175,55,.45);
  color:var(--dosi-text);
  font-family:var(--dosi-sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  line-height:1.4;
  padding:7px 10px;
  border-radius:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:30;
}
.dosi-alg-badge::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 4px);
  left:7px;
  border:5px solid transparent;
  border-top-color:rgba(212,175,55,.6);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s;
  z-index:30;
}
.dosi-alg-badge:hover::after, .dosi-alg-badge:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.dosi-alg-badge:hover::before, .dosi-alg-badge:focus-visible::before{
  opacity:1;
  visibility:visible;
}

/* ---------------------------------------------------------
   Historia (desplegable) — se apoya en <details>/<summary>
   nativo: accesible, sin JavaScript propio, área táctil >=44px.
   El estilo busca sensación de "te voy a contar algo": icono de
   libro, halo dorado al pasar el cursor y la historia entra con
   una pequeña animación cuando se abre.
   --------------------------------------------------------- */
.dosi-story{ margin:10px 0 0; }
.dosi-story-toggle{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:6px 14px 6px 12px;
  border:1px solid rgba(212,175,55,.3);
  border-radius:999px;
  background:rgba(212,175,55,.06);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dosi-gold);
  list-style:none;
  transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.dosi-story-toggle:hover,
.dosi-story-toggle:focus-visible{
  background:rgba(212,175,55,.15);
  border-color:var(--dosi-gold);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(212,175,55,.14);
}
.dosi-story-toggle::-webkit-details-marker{ display:none; }
.dosi-story-icon{ width:15px; height:15px; flex:0 0 auto; transition:transform .35s ease; }
.dosi-story[open] .dosi-story-icon{ transform:rotate(-10deg) scale(1.1); }
.dosi-story-toggle-text{ position:relative; top:1px; }
.dosi-story-toggle::after{ content:'+'; margin-left:2px; font-size:14px; line-height:1; transition:transform .3s ease; }
.dosi-story[open] .dosi-story-toggle::after{ transform:rotate(45deg); }
@keyframes dosiStoryReveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.dosi-story-body{
  margin-top:10px;
  padding:16px 18px;
  border-left:2px solid rgba(212,175,55,.35);
  background:linear-gradient(180deg, rgba(212,175,55,.06), transparent 65%);
  border-radius:0 8px 8px 0;
  font-family:var(--dosi-sans);
  font-size:.92rem;
  font-weight:300;
  line-height:1.75;
  color:var(--dosi-text);
  animation:dosiStoryReveal .45s ease-out;
}
.dosi-story-body::before{
  content:'"';
  display:block;
  font-family:var(--dosi-display);
  font-style:normal;
  font-size:2.1rem;
  line-height:.4;
  color:rgba(212,175,55,.55);
  margin-bottom:6px;
}
.dosi-story-body p{ margin:0 0 .8em; }
.dosi-story-body p:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion:reduce){
  .dosi-story-body{ animation:none; }
}

/* ---------------------------------------------------------
   Avisos y tabla de alérgenos
   --------------------------------------------------------- */
.dosi-menu-note{ margin:26px 0 0; font-size:.78rem; color:rgba(237,237,237,.42); }
.dosi-notice{
  margin:22px 0 0;
  padding:14px 16px;
  border-left:3px solid var(--dosi-gold);
  background:rgba(212,175,55,.08);
  font-size:.86rem;
  color:var(--dosi-text);
}
.dosi-notice-lg{ font-size:.95rem; margin-top:8px; }
.dosi-notice-ok{ border-left-color:#6fbf73; background:rgba(111,191,115,.1); }

/* ---------------------------------------------------------
   Formulario de contacto
   --------------------------------------------------------- */
/* Con la barra superior fija (72px), sin esto scrollIntoView({block:'start'})
   deja el aviso justo debajo del borde de la barra, tapando su primera línea. */
.dosi-contact-status{ scroll-margin-top: 92px; }
.dosi-contact-form{ max-width:520px; margin:24px auto 0; display:flex; flex-direction:column; gap:16px; }
.dosi-contact-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.dosi-contact-field{ display:flex; flex-direction:column; gap:7px; }
.dosi-contact-field label{
  font-family:var(--dosi-display);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(212,175,55,.85);
}
.dosi-contact-field input,
.dosi-contact-field textarea{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  padding:14px 16px;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:16px !important;
  color:#fff !important;
  font-family:var(--dosi-sans);
  font-size:.94rem;
  resize:vertical;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 2px 6px rgba(0,0,0,.25);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.dosi-contact-field input::placeholder,
.dosi-contact-field textarea::placeholder{ color:rgba(255,255,255,.32) !important; }
.dosi-contact-field input:hover,
.dosi-contact-field textarea:hover{ border-color:rgba(212,175,55,.4) !important; }
.dosi-contact-field input:-webkit-autofill,
.dosi-contact-field input:-webkit-autofill:hover,
.dosi-contact-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.045) inset !important;
  box-shadow:0 0 0 1000px rgba(255,255,255,.045) inset !important;
  border-color:rgba(212,175,55,.4) !important;
  caret-color:#fff;
}
.dosi-contact-field input:focus,
.dosi-contact-field textarea:focus{
  outline:none;
  border-color:var(--dosi-gold) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:0 0 0 3px rgba(212,175,55,.16), inset 0 2px 6px rgba(0,0,0,.2);
}
.dosi-contact-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.82rem;
  color:var(--dosi-muted);
  line-height:1.5;
}
.dosi-contact-consent input{
  -webkit-appearance:none;
  appearance:none;
  width:17px;
  height:17px;
  margin-top:2px;
  flex:0 0 auto;
  border:1px solid rgba(212,175,55,.5);
  border-radius:4px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  position:relative;
  transition:border-color .25s ease, background .25s ease;
}
.dosi-contact-consent input:hover{ border-color:var(--dosi-gold); }
.dosi-contact-consent input:checked{ background:var(--dosi-gold); border-color:var(--dosi-gold); }
.dosi-contact-consent input:checked::after{
  content:'';
  position:absolute;
  left:5px; top:1px;
  width:5px; height:9px;
  border:solid #0c0c0c;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.dosi-contact-consent input:focus-visible{ outline:2px solid var(--dosi-gold); outline-offset:2px; }
.dosi-contact-consent a,
.dosi-contact-consent a:hover,
.dosi-contact-consent a:focus,
.dosi-contact-consent a:active,
.dosi-contact-consent a:visited{ color:var(--dosi-gold) !important; text-decoration:underline; }
.dosi-contact-form button[type="submit"]{
  align-self:flex-start;
  margin-top:4px;
  padding:12px 28px;
  background:var(--dosi-gold);
  border:none;
  border-radius:999px;
  color:#0c0c0c;
  font-family:var(--dosi-display);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .3s ease;
  /* Sin esto el navegador dibuja su propio acabado nativo (gris) encima en
     focus/active/disabled, en vez del dorado de aquí arriba. */
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.dosi-contact-form button[type="submit"]:hover,
.dosi-contact-form button[type="submit"]:focus-visible{ opacity:.85; }
.dosi-contact-form button[type="submit"]:focus{ outline:none; }
.dosi-contact-form button[type="submit"]:active{ background:var(--dosi-gold); color:#0c0c0c; }
.dosi-contact-form button[type="submit"]:disabled{
  background:var(--dosi-gold);
  color:#0c0c0c;
  opacity:.55;
  cursor:not-allowed;
}
.dosi-footer-contact-form-link{ margin-top:6px; display:inline-flex; align-items:center; gap:6px; }
.dosi-footer-contact-form-link i{ font-style:normal; }

.dosi-alg-table{
  width:100%;
  border-collapse:collapse;
  font-size:.86rem;
}
.dosi-alg-table th,
.dosi-alg-table td{
  padding:9px 8px;
  text-align:left;
  border-bottom:1px solid var(--dosi-border);
  vertical-align:top;
}
.dosi-alg-table thead th{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dosi-gold);
  font-weight:500;
}
.dosi-alg-table tbody th{ font-weight:500; color:var(--dosi-text); }
.dosi-alg-table tbody td{ color:var(--dosi-muted); }

/* ---------------------------------------------------------
   Pie
   --------------------------------------------------------- */
.dosi-footer{
  background: var(--dosi-bg-2);
  border-top: 1px solid var(--dosi-border);
  padding: 72px 24px 32px;
}
.dosi-footer-wrap{
  max-width: 1100px;
  margin: 0 auto;
}
.dosi-footer-brand{
  text-align: left;
  margin-bottom: 48px;
}
.dosi-footer-logo-row{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dosi-footer-brand-img{
  width: 44px;
  height: 44px;
  display: block;
  flex: none;
}
.dosi-footer-logo{
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dosi-gold);
}
.dosi-footer-tagline{
  margin-top: 10px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: rgba(237,237,237,.55);
}
.dosi-footer-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--dosi-border);
}
.dosi-footer-directions{
  margin-top: 4px;
  color: var(--dosi-gold);
  font-size: .85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .3s;
}
.dosi-footer-directions:hover,
.dosi-footer-directions:focus,
.dosi-footer-directions:focus-visible,
.dosi-footer-directions:active,
.dosi-footer-directions:visited{ color: var(--dosi-gold) !important; opacity: .75; }
.dosi-footer-directions i{ font-style: normal; }
.dosi-footer-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
}
.dosi-footer-icon{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212,175,55,.30);
  border-radius: 50%;
  color: var(--dosi-gold);
  margin-bottom: 6px;
}
.dosi-footer-icon svg{
  width: 18px;
  height: 18px;
}
.dosi-footer-label{
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dosi-gold);
}
.dosi-footer-link{
  color: rgba(235,229,216,.85);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 300;
  letter-spacing: .04em;
  transition: .3s;
}
.dosi-footer-link:visited{ color: rgba(235,229,216,.85) !important; }
.dosi-footer-link:hover,
.dosi-footer-link:focus,
.dosi-footer-link:active{ color: var(--dosi-gold) !important; }
.dosi-footer-alcohol{
  max-width: 900px;
  margin: 22px 0 0;
  text-align: left;
  font-size: .76rem;
  font-style: italic;
  color: rgba(237,237,237,.45);
}
.dosi-footer-alcohol-kicker{
  display: block;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .66rem;
  color: rgba(212,175,55,.75);
  margin-bottom: 3px;
}
.dosi-footer-note{
  font-size: 0.82rem;
  color: rgba(237,237,237,.55);
  line-height: 1.5;
}
.dosi-footer-text{
  font-size: 0.84rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: rgba(235,229,216,.85);
  line-height: 1.6;
}
.dosi-footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.78rem;
  color: rgba(237,237,237,.45);
}
.dosi-footer-site{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(237,237,237,.55);
  text-decoration: none;
}
.dosi-footer-site:visited{ color: rgba(237,237,237,.55) !important; }
.dosi-footer-site:hover,
.dosi-footer-site:focus,
.dosi-footer-site:active{ color: var(--dosi-gold) !important; }
.dosi-footer-contact-row{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.dosi-footer-contact-tag{
  font-size: 0.68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(237,237,237,.45);
}
@media (max-width: 780px){
  .dosi-footer-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .dosi-footer-grid{ grid-template-columns: 1fr; }
  .dosi-footer-bottom{ flex-direction: column; text-align: center; }
  .dosi-footer-brand{ text-align: center; }
  .dosi-footer-col{ align-items: center; text-align: center; }
  .dosi-footer-contact-row{ justify-content: center; }
  .dosi-footer-alcohol{ text-align: center; margin-left: auto; margin-right: auto; }
}

.dosi-empty{ text-align:center; color:var(--dosi-muted); padding:30px 0; }

@media (min-width:900px){
  .dosi-row-media{ height:230px; }
}

@media (prefers-reduced-motion:reduce){
  .dosijamon-ux,
  .dosijamon-ux *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* =========================================================
   BARRA DE PROGRESO (cambio de idioma sin recarga)
   ========================================================= */
.dosi-loadbar{
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 999;
  background: linear-gradient(90deg, #D4AF37, #f2d98a);
  box-shadow: 0 0 8px rgba(212,175,55,.6);
  opacity: 0;
  transition: width .4s ease, opacity .3s ease;
  pointer-events: none;
}

/* =========================================================
   ENTRADA DE PÁGINA
   Puramente CSS (no depende de JS): se reproduce sola en cuanto
   el navegador pinta la página, así que funciona igual en la
   primera carga, tras una navegación normal y sin JavaScript.
   ========================================================= */
.dosijamon-ux{
  animation: dosiPageEnter .55s ease-out;
}
@keyframes dosiPageEnter{
  from{ opacity: 0; }
  to{ opacity: 1; }
}