/* =========================================================
   LOREN RESTOBAR · Carta clásica (hojas A4)
   Componente compartido: carta-clasica.html y visor del inicio.
   Todo va dentro de .cc para no chocar con la web.
   ========================================================= */
.cc {
  --vino: #59011d; --vino-900: #2a000e; --vino-500: #7d0b2e;
  --crema: #f3eedc; --papel: #fbf6e7; --maiz: #c9921c; --maiz-claro: #e8b43a;
  --tinta: #2b1418; --tinta-2: #6b5458; --rojo-py: #d52b1e; --azul-py: #0038a8;
  font-family: var(--f-body); color: var(--tinta); text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cc *, .cc *::before, .cc *::after { box-sizing: border-box; }
.cc .hoja {
  width: 210mm; min-height: 297mm; background: var(--papel); position: relative; overflow: hidden;
  padding: 16mm 15mm 14mm; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); line-height: 1.5; font-size: 12pt;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(232,180,58,.08), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(89,1,29,.06), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cc .hoja::before { content: ""; position: absolute; inset: 7mm; border: 1.6px solid var(--vino); border-radius: 4mm; pointer-events: none; }
.cc .hoja::after { content: ""; position: absolute; inset: 8.6mm; border: .6px solid rgba(89,1,29,.45); border-radius: 3mm; pointer-events: none; }
.cc .esq { position: absolute; width: 34mm; color: var(--vino); opacity: .9; pointer-events: none; z-index: 1; }
.cc .esq svg { width: 100%; height: auto; }
.cc .esq--tl { top: -13mm; left: -13mm; } .cc .esq--tr { top: -13mm; right: -13mm; }
.cc .esq--bl { bottom: -13mm; left: -13mm; } .cc .esq--br { bottom: -13mm; right: -13mm; }
.cc .franja { position: absolute; left: 7mm; right: 7mm; bottom: 7mm; height: 2.2mm; display: flex; border-radius: 0 0 4mm 4mm; overflow: hidden; }
.cc .franja i { flex: 1; } .cc .franja i:nth-child(1) { background: var(--rojo-py); } .cc .franja i:nth-child(2) { background: #fff; } .cc .franja i:nth-child(3) { background: var(--azul-py); }

.cc .cab { text-align: center; position: relative; z-index: 2; margin-bottom: 7mm; }
.cc .cab .logo { width: 70mm; margin: 0 auto 2mm; background: var(--vino); padding: 5mm 7mm 4mm; border-radius: 0 0 10mm 10mm; margin-top: -16mm; }
.cc .cab .logo img { width: 100%; display: block; }
.cc .cab .lema { font-family: var(--f-script); color: var(--vino-500); font-size: 15pt; margin: 3mm 0 0; }
.cc .cab .sub { font-size: 7.5pt; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-2); margin-top: 1mm; }
.cc .cab--mini { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(89,1,29,.25); padding-bottom: 3mm; margin-bottom: 6mm; }
.cc .cab--mini img { height: 13mm; width: auto; background: var(--vino); padding: 2mm 3mm; border-radius: 2mm; }
.cc .cab--mini span { font-family: var(--f-script); color: var(--vino-500); font-size: 14pt; }

.cc .cols { columns: 2; column-gap: 11mm; position: relative; z-index: 2; }
.cc .grupo { break-inside: avoid-column; margin-bottom: 7mm; }
.cc .grupo h2 { font-family: var(--f-display); font-weight: 700; font-size: 17pt; color: var(--vino); margin: 0; line-height: 1.05; display: flex; align-items: center; gap: 3mm; font-variation-settings: "SOFT" 80; letter-spacing: 0; }
.cc .grupo h2 .orn { width: 7mm; height: 7mm; color: var(--maiz); flex: none; }
.cc .grupo h2 .orn svg { width: 100%; height: 100%; }
.cc .grupo .gsub { font-family: var(--f-script); color: var(--maiz); font-size: 12pt; margin: .5mm 0 3mm 10mm; line-height: 1; }
.cc .grupo .linea { height: 1px; background: linear-gradient(90deg, var(--vino), transparent); opacity: .45; margin-bottom: 3mm; }
.cc .item { break-inside: avoid; margin-bottom: 2.6mm; }
.cc .item .fila { display: flex; align-items: baseline; gap: 2mm; }
.cc .item b { font-family: var(--f-display); font-weight: 600; font-size: 10.6pt; color: var(--tinta); }
.cc .item .pts { flex: 1; border-bottom: 1.4px dotted rgba(89,1,29,.45); transform: translateY(-1mm); min-width: 6mm; }
.cc .item .pr { font-family: var(--f-display); font-weight: 700; font-size: 10.6pt; color: var(--vino); white-space: nowrap; }
.cc .item .pr.cons { font-family: var(--f-body); font-size: 6.8pt; letter-spacing: .12em; text-transform: uppercase; color: var(--maiz); }
.cc .item p { margin: .6mm 0 0; font-size: 7.6pt; line-height: 1.38; color: var(--tinta-2); }
.cc .item .gn { font-family: var(--f-script); color: var(--vino-500); font-size: 9.5pt; margin-left: 1mm; }
.cc .item .ico { display: inline-flex; gap: 1mm; margin-left: 1.2mm; vertical-align: 1px; }
.cc .item .ico i { font-style: normal; font-size: 6pt; font-weight: 700; letter-spacing: .05em; padding: .3mm 1.2mm; border-radius: 1mm; }
.cc .item .ico .py { background: var(--vino); color: var(--crema); }
.cc .item .ico .top { background: var(--maiz-claro); color: var(--vino-900); }

.cc .destacado { break-inside: avoid; background: var(--vino); color: var(--crema); border-radius: 4mm; padding: 5mm 6mm; margin-bottom: 7mm; position: relative; overflow: hidden; }
.cc .destacado .bg { position: absolute; width: 60mm; right: -18mm; top: -18mm; color: var(--crema); opacity: .1; }
.cc .destacado h2 { color: var(--maiz-claro); }
.cc .destacado .gsub { color: var(--crema); opacity: .8; }
.cc .destacado .linea { background: linear-gradient(90deg, var(--maiz-claro), transparent); }
.cc .destacado .item b, .cc .destacado .item .pr { color: var(--crema); }
.cc .destacado .item p { color: rgba(243,238,220,.75); }
.cc .destacado .item .pts { border-color: rgba(243,238,220,.4); }
.cc .destacado .item .gn { color: var(--maiz-claro); }
.cc .destacado .item .pr.cons { color: var(--maiz-claro); }
.cc .destacado .item .ico .py { background: var(--crema); color: var(--vino); }

.cc .cpie { position: absolute; left: 15mm; right: 15mm; bottom: 13mm; z-index: 2; text-align: center; font-size: 7.2pt; color: var(--tinta-2); line-height: 1.5; }
.cc .cpie .gr { font-family: var(--f-script); color: var(--vino); font-size: 20pt; line-height: 1; display: block; margin-bottom: 1.5mm; }
.cc .cpie b { color: var(--vino); }
.cc .leyenda { font-size: 6.8pt; color: var(--tinta-2); text-align: center; margin-top: 2mm; }
.cc .leyenda i { font-style: normal; font-weight: 700; padding: .2mm 1mm; border-radius: 1mm; }

.cc .dicc { position: relative; z-index: 2; margin-top: 4mm; border: 1.4px solid var(--vino); border-radius: 4mm; padding: 6mm 7mm 5mm; display: grid; grid-template-columns: 34mm 1fr; gap: 7mm; align-items: center; background: rgba(243,238,220,.6); }
.cc .dicc .rueda { color: var(--vino); }
.cc .dicc h3 { font-family: var(--f-display); color: var(--vino); font-size: 14pt; margin: 0 0 1mm; }
.cc .dicc .s { font-family: var(--f-script); color: var(--maiz); font-size: 11pt; margin-bottom: 3mm; }
.cc .dicc dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6mm 8mm; margin: 0; }
.cc .dicc dl div { display: flex; gap: 2mm; align-items: baseline; font-size: 8pt; border-bottom: 1px dotted rgba(89,1,29,.3); padding-bottom: 1mm; }
.cc .dicc dt { font-family: var(--f-display); font-weight: 700; color: var(--vino); font-style: italic; }
.cc .dicc dd { margin: 0; color: var(--tinta-2); }

.cc .caviso { position: absolute; left: 15mm; right: 15mm; bottom: 16mm; z-index: 2; background: var(--vino); color: var(--crema); border-radius: 4mm; padding: 6mm 8mm; display: grid; grid-template-columns: 26mm 1fr auto; gap: 6mm; align-items: center; overflow: hidden; }
.cc .caviso .r { color: var(--maiz-claro); }
.cc .caviso h3 { font-family: var(--f-display); font-size: 15pt; margin: 0; color: var(--maiz-claro); }
.cc .caviso p { margin: 1mm 0 0; font-size: 8.2pt; opacity: .85; line-height: 1.45; }
.cc .caviso .tel { font-family: var(--f-display); font-weight: 700; font-size: 13pt; text-align: right; line-height: 1.2; }
.cc .caviso .tel small { display: block; font-family: var(--f-body); font-size: 6.8pt; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }

.cc .caviso--col { position: relative; left: auto; right: auto; bottom: auto; break-inside: avoid; grid-template-columns: 15mm 1fr; gap: 4mm; padding: 4.5mm 5mm; margin-top: 1mm; text-align: left; }
.cc .caviso--col .r { width: 15mm; }
.cc .caviso--col h3 { font-size: 13pt; }
.cc .caviso--col p { font-size: 7.2pt; line-height: 1.4; }
.cc .caviso--col .tel { grid-column: 2; text-align: left; font-size: 12pt; margin-top: -2mm; }
.cc .caviso--col .tel small { display: inline; margin-right: 2mm; }
.cc .dicc--col { break-inside: avoid; grid-template-columns: 1fr; gap: 0; padding: 5mm 5mm 4mm; margin: 0 0 7mm; }
.cc .dicc--col .rueda { display: none; }
.cc .dicc--col h3 { font-size: 12.5pt; }
.cc .dicc--col dl { gap: 1.4mm 5mm; }
.cc .dicc--col dl div { font-size: 7.4pt; }
/* Versión página suelta en móvil: la hoja se reorganiza */
@media (max-width: 860px) {
  .cc--libre .hoja { width: 100vw; min-height: auto; padding: 14mm 7mm 30mm; }
  .cc--libre .cols { columns: 1; }
  .cc--libre .esq { width: 24mm; }
  .cc--libre .cab .logo { width: 56mm; }
  .cc--libre .dicc { grid-template-columns: 1fr; }
  .cc--libre .dicc .rueda { width: 26mm; margin: 0 auto; }
  .cc--libre .dicc dl { grid-template-columns: 1fr; }
  .cc--libre .caviso { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: 1fr; text-align: center; margin-top: 6mm; }
  .cc--libre .caviso .r { width: 20mm; margin: 0 auto; }
  .cc--libre .caviso .tel { text-align: center; }
}

/* =========================================================
   VISOR EN EL INICIO
   ========================================================= */
.visor { position: relative; }
.visor__mesa { position: relative; height: var(--alto, 700px); perspective: 2000px; }
.visor .hoja-wrap {
  position: absolute; left: 50%; top: 0; width: calc(210mm * var(--esc, .6)); height: calc(297mm * var(--esc, .6));
  translate: -50% 0; transition: transform .9s var(--ease), opacity .6s, filter .6s; cursor: pointer;
  transform-origin: 50% 100%;
}
.visor .hoja-wrap .hoja { transform: scale(var(--esc, .6)); transform-origin: 0 0; height: 297mm; border-radius: 3px; }
.visor .hoja-wrap[data-pos="0"] { z-index: 3; transform: none; cursor: zoom-in; }
.visor .hoja-wrap[data-pos="1"] { z-index: 2; transform: translateX(22%) rotate(5deg) scale(.94); filter: brightness(.82); }
.visor .hoja-wrap[data-pos="2"] { z-index: 1; transform: translateX(-22%) rotate(-5deg) scale(.94); filter: brightness(.72); }
.visor .hoja-wrap[data-pos="1"]:hover { transform: translateX(26%) rotate(7deg) scale(.95); }
.visor .hoja-wrap[data-pos="2"]:hover { transform: translateX(-26%) rotate(-7deg) scale(.95); }
.visor__ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.visor__ctrl button.flecha { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--vino); color: var(--crema); display: grid; place-items: center; transition: transform .3s var(--ease); }
.visor__ctrl button.flecha:hover { transform: scale(1.08); }
.visor__ctrl button.flecha svg { width: 20px; }
.visor__dots { display: flex; gap: 8px; }
.visor__dots button { border: 0; padding: .5em .9em; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #fff; color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(89,1,29,.15); }
.visor__dots button.on { background: var(--maiz); color: var(--vino-900); box-shadow: none; }

/* Lector a pantalla completa */
.lector { position: fixed; inset: 0; z-index: 280; background: rgba(28,0,9,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: auto; opacity: 0; visibility: hidden; transition: .4s; padding: 80px 16px 40px; }
.lector.on { opacity: 1; visibility: visible; }
.lector .hoja-wrap { margin: 0 auto 30px; width: calc(210mm * var(--esc-l, 1)); height: calc(297mm * var(--esc-l, 1)); }
.lector .hoja { transform: scale(var(--esc-l, 1)); transform-origin: 0 0; height: 297mm; }
.lector__barra { position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 10px; padding: 14px; background: rgba(28,0,9,.9); }

/* Hoja de bebidas: lista compacta en dos columnas */
.cc .grupo--beb { margin-bottom: 5mm; }
.cc .grupo--beb h2 { font-size: 14pt; margin-bottom: 2mm; }
.cc .beb { display: flex; align-items: baseline; gap: 1.6mm; break-inside: avoid; margin-bottom: 1.15mm; font-size: 8.6pt; }
.cc .beb b { font-family: var(--f-display); font-weight: 600; color: var(--tinta); white-space: nowrap; }
.cc .beb small { font-size: 6.6pt; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc .beb .pts { flex: 1; border-bottom: 1.2px dotted rgba(89,1,29,.4); transform: translateY(-.8mm); min-width: 4mm; }
.cc .beb .pr { font-family: var(--f-display); font-weight: 700; color: var(--vino); white-space: nowrap; }