/* =====================================================================
   Diseño «España cañí» (se activa con <html data-diseno="canai">)
   Inspiración: rótulos de azulejo de taberna («Vermut de grifo»,
   «Exquisito Vermouth»): baldosa blanca con juntas, letra azul cobalto
   con sombra azul clara, tipo de madera del Oeste, cenefas de volutas
   azules sobre ocre y acentos terracota. Solo sobrescribe styles.css.
   ===================================================================== */

html[data-diseno="canai2"] {
  --az: #1E3A8A;          /* azul cobalto */
  --az-cl: #9DB7E2;       /* azul claro (sombras de letra) */
  --az-me: #3F6BC2;
  --ocre: #E6AE34;        /* amarillo ocre */
  --terra: #C4532A;       /* terracota */
  --vino: #7A2430;        /* granate */
  --baldosa: #F7F4EC;     /* blanco esmaltado */
  --junta: #DCD5C3;
  --f-rotulo: 'Rye', 'Playfair Display', Georgia, serif;
  --f-cartel: 'Playfair Display', Georgia, serif;

  --bg: var(--baldosa); --bg-2: #EDE6D3; --surface: #FFFDF7;
  --text: #1B2547; --muted: #5A6283; --line: var(--az); --link: var(--az);
  --btn-bg: var(--az); --btn-fg: #FFFDF7; --danger: var(--vino);
  --c1: var(--az); --c2: var(--terra); --c3: var(--ocre); --c4: var(--vino);
  --red: var(--terra); --blue: var(--az); --mustard: var(--ocre); --ink: #14204A; --cream: #FFFDF7;
  --grano: none;
  /* baldosas de 72 px con su junta */
  --azulejo: linear-gradient(var(--junta) 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(90deg, var(--junta) 1px, transparent 1px) 0 0 / 72px 72px, radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%) 0 0 / 72px 72px;
  /* cenefa: volutas azules sobre banda ocre */
  --cenefa: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'><rect width='48' height='24' fill='%23E6AE34'/><rect y='0' width='48' height='3' fill='%231E3A8A'/><rect y='21' width='48' height='3' fill='%231E3A8A'/><path d='M4 18c0-7 6-11 11-9s4 8-1 8-4-5 0-5M28 6c0 7 6 11 11 9s4-8-1-8-4 5 0 5' fill='none' stroke='%231E3A8A' stroke-width='2.4' stroke-linecap='round'/><path d='M15 9c4-4 9-4 13-3M39 15c4 3 7 3 9 2M0 17c2 1 3 1 4 1' fill='none' stroke='%233F6BC2' stroke-width='1.6' stroke-linecap='round'/><circle cx='24' cy='12' r='1.8' fill='%23C4532A'/></svg>") repeat-x center / auto 100%;
  background: var(--az);
}
html[data-diseno="canai2"][data-theme="noche"] {
  --baldosa: #142047; --junta: #22306A; --bg: #142047; --bg-2: #1A2856; --surface: #1C2A5C;
  --text: #F3EEDD; --muted: #B8C3E6; --link: #F2C45A; --az-cl: #0B1433; --cream: #F3EEDD;
}

/* ---------- base: pared de azulejos ---------- */
html[data-diseno="canai2"] body { background: var(--az); font-family: var(--f-body); }
html[data-diseno="canai2"] main, html[data-diseno="canai2"] .foot { background: var(--azulejo), var(--baldosa); }
html[data-diseno="canai2"] .top { background: none; }
html[data-diseno="canai2"] .stripe { height: 22px; background: var(--cenefa); }
html[data-diseno="canai2"] .stripe i { display: none; }
html[data-diseno="canai2"] a { color: var(--link); }
html[data-diseno="canai2"] a:hover { color: var(--terra); }

/* ---------- cabecera: rótulo de azulejo ---------- */
html[data-diseno="canai2"] .brand { background: var(--baldosa); font-family: var(--f-rotulo); font-stretch: 100%; font-weight: 400; letter-spacing: .02em; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 9px var(--ocre), inset 0 0 0 11px var(--az); }
html[data-diseno="canai2"] .brand .b1, html[data-diseno="canai2"] .brand .b2 { color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); }
html[data-diseno="canai2"] .brand .b2 { color: var(--terra); }
html[data-diseno="canai2"] .brand:hover { background: #FFFDF7; }
html[data-diseno="canai2"] .brand:hover .b1 { color: var(--az); } html[data-diseno="canai2"] .brand:hover .b2 { color: var(--terra); }
html[data-diseno="canai2"] .brand-vaso { stroke: var(--az); filter: drop-shadow(.05em .06em 0 var(--az-cl)); }
html[data-diseno="canai2"] .bv-vidrio, html[data-diseno="canai2"] .bv-hielo { fill: #FFFDF7; }
html[data-diseno="canai2"] .bv-liq { fill: var(--vino); } html[data-diseno="canai2"] .bv-naranja { fill: var(--ocre); }
html[data-diseno="canai2"] nav a, html[data-diseno="canai2"] nav button, html[data-diseno="canai2"] nav summary,
html[data-diseno="canai2"] .theme-btn, html[data-diseno="canai2"] .menu-btn {
  font: 700 .98rem/1 var(--f-cartel); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; background: var(--baldosa); color: var(--az);
}
html[data-diseno="canai2"] nav a:hover, html[data-diseno="canai2"] nav button:hover, html[data-diseno="canai2"] nav summary:hover,
html[data-diseno="canai2"] .theme-btn:hover { background: var(--ocre); color: var(--az); }
html[data-diseno="canai2"] nav a.on, html[data-diseno="canai2"] nav summary.on { background: var(--az); color: #FFFDF7; }
html[data-diseno="canai2"] .theme-btn, html[data-diseno="canai2"] .menu-btn { background: var(--ocre); }
html[data-diseno="canai2"] .lab-menu { background: var(--az); border-color: var(--az); }

/* ---------- tipografía: letra de rótulo con sombra ---------- */
html[data-diseno="canai2"] h1, html[data-diseno="canai2"] h2 { font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); letter-spacing: .01em; line-height: 1.02; }
html[data-diseno="canai2"] h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
html[data-diseno="canai2"] h2 { font-size: 1.55rem; text-shadow: 2px 2px 0 var(--az-cl); }
html[data-diseno="canai2"] h3 { font: 900 1.1rem/1.1 var(--f-cartel); font-stretch: 100%; color: var(--az); letter-spacing: .04em; text-transform: uppercase; }
html[data-diseno="canai2"] .script { font: italic 700 1.2rem/1.2 var(--f-cartel); color: var(--terra); }
html[data-diseno="canai2"][data-theme="noche"] h1, html[data-diseno="canai2"][data-theme="noche"] h2, html[data-diseno="canai2"][data-theme="noche"] h3 { color: #F2C45A; }

/* ---------- controles ---------- */
html[data-diseno="canai2"] button, html[data-diseno="canai2"] .btn, html[data-diseno="canai2"] a.button { font: 700 .92rem/1 var(--f-cartel); font-stretch: 100%; letter-spacing: .06em; background: var(--az); color: #FFFDF7; border: 0; box-shadow: 3px 3px 0 var(--az-cl); }
html[data-diseno="canai2"] button:hover, html[data-diseno="canai2"] .btn:hover, html[data-diseno="canai2"] a.button:hover { background: var(--terra); color: #FFFDF7; }
html[data-diseno="canai2"] button.ghost, html[data-diseno="canai2"] .btn.ghost { background: var(--baldosa); color: var(--az); box-shadow: inset 0 0 0 2px var(--az), 3px 3px 0 var(--az-cl); outline: 0; }
html[data-diseno="canai2"] button.ghost:hover { background: var(--ocre); color: var(--az); }
html[data-diseno="canai2"] button.danger { background: var(--vino); }
html[data-diseno="canai2"] input, html[data-diseno="canai2"] select, html[data-diseno="canai2"] textarea { border: 2px solid var(--az); background: #FFFDF7; color: var(--text); }
html[data-diseno="canai2"] input:focus, html[data-diseno="canai2"] select:focus, html[data-diseno="canai2"] textarea:focus { outline: 3px solid var(--ocre); }
html[data-diseno="canai2"] input[type=checkbox] { accent-color: var(--az); }
html[data-diseno="canai2"] input[type=range] { background: var(--az); }
html[data-diseno="canai2"] input[type=range]::-webkit-slider-thumb { background: var(--ocre); border-color: var(--az); }
html[data-diseno="canai2"] label, html[data-diseno="canai2"] .inline-field { font-family: var(--f-cartel); }

/* ---------- bloques: marco de azulejo (cobalto · ocre · cobalto) ---------- */
html[data-diseno="canai2"] .panel, html[data-diseno="canai2"] .card, html[data-diseno="canai2"] .table-wrap {
  background: #FFFDF7; border: 0; box-shadow: inset 0 0 0 3px var(--az), inset 0 0 0 9px var(--ocre), inset 0 0 0 11px var(--az); padding: 26px;
}
html[data-diseno="canai2"] .table-wrap { padding: 11px; }
html[data-diseno="canai2"] th { background: var(--az); color: #FFFDF7; font: 700 .82rem/1.2 var(--f-cartel); letter-spacing: .06em; }
html[data-diseno="canai2"] th, html[data-diseno="canai2"] td { border-bottom: 1px solid var(--az-cl); }
html[data-diseno="canai2"] .tag { background: var(--az); color: #FFFDF7; font: 700 .72rem/1.6 var(--f-cartel); letter-spacing: .06em; }
html[data-diseno="canai2"] .tag.warn { background: var(--vino); }
html[data-diseno="canai2"] .pill { border: 2px solid var(--az); color: var(--az); font-family: var(--f-cartel); background: #FFFDF7; }
html[data-diseno="canai2"] .post { border-left-color: var(--ocre); }

/* ---------- filtros ---------- */
html[data-diseno="canai2"] .filters, html[data-diseno="canai2"] .chips { background: var(--az); border-color: var(--az); }
html[data-diseno="canai2"] .filters > div { background: var(--baldosa); }
html[data-diseno="canai2"] button.chip { background: var(--baldosa); color: var(--az); box-shadow: none; }
html[data-diseno="canai2"] button.chip:hover { background: var(--ocre); color: var(--az); }
html[data-diseno="canai2"] button.chip[aria-pressed="true"] { background: var(--terra); color: #FFFDF7; }

/* ---------- portada: paneles de azulejo ---------- */
html[data-diseno="canai2"] .hero { background: var(--az); border-color: var(--az); gap: 6px; }
html[data-diseno="canai2"] .hero > * { box-shadow: inset 0 0 0 7px var(--ocre), inset 0 0 0 9px var(--az); }
html[data-diseno="canai2"] .hero-texto { background: var(--baldosa); color: var(--az); padding: 22px 30px; }
html[data-diseno="canai2"] .hero-texto .script { color: var(--terra); opacity: 1; }
html[data-diseno="canai2"] .hero-texto p:not(.script) { font-family: var(--f-cartel); font-weight: 700; font-size: 1.12rem; }
html[data-diseno="canai2"] .hero-titulo { background: var(--azulejo), var(--baldosa); padding: 22px 26px; }
html[data-diseno="canai2"] .hero-titulo h1 { font-size: clamp(1.9rem, 3vw, 3rem); }
html[data-diseno="canai2"] .hero-titulo svg { fill: var(--az); filter: drop-shadow(3px 3px 0 var(--az-cl)); }
html[data-diseno="canai2"] .hero-titulo svg circle { fill: var(--terra); }
html[data-diseno="canai2"] .hero-num { background: var(--az); color: #FFFDF7; }
html[data-diseno="canai2"] .hero-num b { font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; letter-spacing: -.02em; left: .08em; top: -.02em; text-shadow: 6px 6px 0 var(--az-me); }
html[data-diseno="canai2"] .hero-num span { background: var(--ocre); color: var(--az); font: 700 1rem/1 var(--f-cartel); }
html[data-diseno="canai2"] .hero-mapa { background: var(--terra); }
html[data-diseno="canai2"] .hero-mapa .hm-paises path.on { fill: var(--ocre); }
html[data-diseno="canai2"] .hero-mapa .hm-txt b { font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; text-shadow: 4px 4px 0 var(--vino); }
html[data-diseno="canai2"] .hero-mapa .hm-txt span { font-family: var(--f-cartel); font-weight: 900; }
html[data-diseno="canai2"] .hero-mapa .hm-txt em { background: var(--az); font-family: var(--f-cartel); }
html[data-diseno="canai2"] .hero-tipos { background: var(--baldosa); padding: 20px 24px; }
html[data-diseno="canai2"] .hero-tipos h2 { font: 400 1.4rem/1 var(--f-rotulo); color: var(--az); text-shadow: 2px 2px 0 var(--az-cl); }
html[data-diseno="canai2"] .hero-tipos .ht-n { font-family: var(--f-cartel); font-weight: 900; color: var(--az); }
html[data-diseno="canai2"] .hero-tipos b { font-family: var(--f-cartel); color: var(--az); }
html[data-diseno="canai2"] .hero-tipos button { background: transparent; box-shadow: none; color: var(--az); }
html[data-diseno="canai2"] .hp .hp-det { fill: var(--baldosa); }

/* ---------- tarjetas: azulejos con cenefa del tipo ---------- */
html[data-diseno="canai2"] .t-rojo { --pt: var(--terra); } html[data-diseno="canai2"] .t-blanco { --pt: var(--ocre); }
html[data-diseno="canai2"] .t-dry { --pt: #3E8E4A; } html[data-diseno="canai2"] .t-rosado { --pt: #D9796A; }
html[data-diseno="canai2"] .t-reserva { --pt: var(--az-me); }
html[data-diseno="canai2"] .grid { background: var(--az); border-color: var(--az); }
html[data-diseno="canai2"] .vcard { background: #FFFDF7; }
html[data-diseno="canai2"] .vcard-head, html[data-diseno="canai2"] .cc .vcard-head, html[data-diseno="canai2"] .rc .vcard-head {
  background: var(--azulejo), var(--baldosa); color: var(--az); box-shadow: inset 0 8px 0 var(--pt, var(--az)), inset 0 10px 0 var(--az); border-bottom: 2px solid var(--az); padding-top: 22px;
}
html[data-diseno="canai2"] .vcard-head h3, html[data-diseno="canai2"] .cc .vcard-head h3 { font: 400 1.55rem/1.02 var(--f-rotulo); color: var(--az); text-shadow: 2px 2px 0 var(--az-cl); text-transform: none; letter-spacing: .01em; }
html[data-diseno="canai2"] .kind { font: italic 700 .9rem/1 var(--f-cartel); color: var(--terra); text-transform: none; letter-spacing: .02em; opacity: 1; }
html[data-diseno="canai2"] .cc-datos { border-top: 2px solid var(--az); }
html[data-diseno="canai2"] .cd-fila { border-bottom: 1px solid var(--az-cl); }
html[data-diseno="canai2"] .cd-lab { font-family: var(--f-cartel); font-weight: 700; color: var(--az); }
html[data-diseno="canai2"] .cd-fila b { font-family: var(--f-cartel); font-weight: 900; color: var(--az); font-size: 1.2rem; }
html[data-diseno="canai2"] .cd-barras i { background: var(--az-cl); } html[data-diseno="canai2"] .cd-barras i.on { background: var(--az); }
html[data-diseno="canai2"] .vcard-foto, html[data-diseno="canai2"] .dh-foto { border: 3px solid var(--az); box-shadow: 0 0 0 4px var(--ocre), 0 0 0 6px var(--az); }
html[data-diseno="canai2"] .pv-pista { border-color: var(--az); }
html[data-diseno="canai2"] .pv-fila { font-family: var(--f-cartel); color: var(--az); }
html[data-diseno="canai2"] .spices { border-color: var(--az); }
html[data-diseno="canai2"] .sp i { font-family: var(--f-cartel); font-weight: 700; }
html[data-diseno="canai2"] .count { font-family: var(--f-cartel); color: var(--az); }

/* ---------- detalle ---------- */
html[data-diseno="canai2"] .detail-head { background: var(--azulejo), var(--baldosa); color: var(--az); border: 0; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 11px var(--pt, var(--ocre)), inset 0 0 0 13px var(--az); padding: 30px; }
html[data-diseno="canai2"] .detail-head h1 { color: var(--az); }

/* ---------- pie: cenefa y sello ---------- */
html[data-diseno="canai2"] .foot { border-top: 0; position: relative; padding-top: 44px; }
html[data-diseno="canai2"] .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--cenefa); }
html[data-diseno="canai2"] .seal { background: var(--baldosa); color: var(--az); border: 4px solid var(--az); box-shadow: 0 0 0 5px var(--ocre), 0 0 0 7px var(--az); font-family: var(--f-cartel); }
html[data-diseno="canai2"] .foot .script { color: var(--terra); }
html[data-diseno="canai2"] #toast { background: var(--az); color: #FFFDF7; border-left-color: var(--ocre); font-family: var(--f-cartel); }

/* ---------- avisos de edad ---------- */
html[data-diseno="canai2"] .edad-gate { background: var(--az); }
html[data-diseno="canai2"] .edad-caja { background: var(--azulejo), var(--baldosa); border: 0; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 12px var(--ocre), inset 0 0 0 14px var(--az); padding: 40px 34px; }
html[data-diseno="canai2"] .edad-logo { background: none; font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; }
html[data-diseno="canai2"] .edad-logo b { color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); } html[data-diseno="canai2"] .edad-logo i { color: var(--terra); text-shadow: 3px 3px 0 var(--az-cl); }

/* ---------- miniatura en Laboratorio · Diseño ---------- */
.dz-canai2 { background: #1E3A8A; padding: 3px; gap: 0; }
.dz-canai2 .dz-cab { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='20'><rect width='24' height='20' fill='%23E6AE34'/><path d='M3 15c0-6 5-8 8-6s2 6-1 6' fill='none' stroke='%231E3A8A' stroke-width='2'/></svg>") repeat-x; }
.dz-canai2 .dz-logo { background: #F7F4EC; color: #1E3A8A; font-family: Rye, Georgia, serif; font-weight: 400; text-shadow: 1px 1px 0 #9DB7E2; margin: 2px; line-height: 16px; }
.dz-canai2 .dz-cab i { background: transparent; }
.dz-canai2 .dz-rej > div, .dz-canai2 .dz-tarjetas > div { background: #F7F4EC; color: #1E3A8A; box-shadow: inset 0 0 0 2px #E6AE34; }
.dz-canai2 .dz-a b { font: 400 11px Rye, Georgia, serif; text-shadow: 1px 1px 0 #9DB7E2; }
.dz-canai2 .dz-b { background: #1E3A8A !important; color: #F7F4EC !important; } .dz-canai2 .dz-b b { font: 400 28px Rye, Georgia, serif; text-shadow: 2px 2px 0 #3F6BC2; }
.dz-canai2 .dz-c small { font: 700 7px Georgia, serif; text-transform: uppercase; }
.dz-canai2 .dz-c em:nth-of-type(1) { background: #C4532A; width: 90%; } .dz-canai2 .dz-c em:nth-of-type(2) { background: #E6AE34; width: 55%; } .dz-canai2 .dz-c em:nth-of-type(3) { background: #3E8E4A; width: 25%; }
.dz-canai2 .dz-d { background: #C4532A !important; color: #F7F4EC !important; } .dz-canai2 .dz-d b { font: 400 22px Rye, Georgia, serif; }
.dz-canai2 .dz-tarjetas small { font: italic 700 7px Georgia, serif; color: #C4532A; text-transform: none; }
.dz-canai2 .dz-tarjetas b { font: 400 10px Rye, Georgia, serif; text-transform: none; }
html[data-diseno="canai2"] .hero-mapa, html[data-diseno="canai2"] .hero-mapa:hover { color: #FFFDF7; }
html[data-diseno="canai2"] .hero-mapa .hm-txt em { color: #FFFDF7; }
html[data-diseno="canai2"] .hero-mapa:hover .hm-txt em { background: var(--ocre); color: var(--az); }
html[data-diseno="canai2"] .hero-tipos button, html[data-diseno="canai2"] .hero-tipos button:hover { background: transparent !important; box-shadow: none !important; }
html[data-diseno="canai2"] .hero-tipos li + li button { border-top: 1px dotted var(--az-cl); }
/* ficha de elaboración como azulejo */
html[data-diseno="canai2"] .etq { --etq-linea: var(--az); background: var(--azulejo), var(--baldosa); color: var(--az); border: 0; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 10px var(--ocre), inset 0 0 0 12px var(--az); padding: 12px; }
html[data-diseno="canai2"] .etq .etq-marca { background: var(--az); color: #FFFDF7; font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; }
html[data-diseno="canai2"] .etq .etq-titulo { font-family: var(--f-rotulo); font-weight: 400; color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); }
html[data-diseno="canai2"] .etq .etq-caja { border-color: var(--az); font-family: var(--f-cartel); }
html[data-diseno="canai2"] .etq .etq-celda { border-color: var(--az); }
html[data-diseno="canai2"] .etq .etq-sello { color: var(--terra); border-color: var(--terra); }

/* =====================================================================
   «España cañí 2.0»: más color. Pared de azulejo azul cobalto con volutas
   blancas («Viñedos propios»), medallón oval amarillo con letra negra
   sombreada en rojo («Comidas y licores»), cintas de pergamino, cartelas
   doradas, iconos de uvas, copa y hoja («Cilantro»).
   ===================================================================== */
html[data-diseno="canai2"] {
  --az: #2348A8; --az-cl: #A9C1EE; --az-me: #4E7AD2; --ocre: #E9B530; --terra: #C8402A; --vino: #6B2E5F;
  --oro: #E9B530; --verde: #4E8B3A;
  --f-rotulo: 'Cinzel', 'Rye', Georgia, serif;
  --azul-pared: linear-gradient(rgba(10,20,60,.32) 1px, transparent 1px) 0 0 / 64px 64px,
                linear-gradient(90deg, rgba(10,20,60,.32) 1px, transparent 1px) 0 0 / 64px 64px,
                radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%) 0 0 / 64px 64px,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='rgba(255,255,255,.16)' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M10 70c10-30 40-35 50-15s-10 25-20 15 0-20 12-14'/%3E%3Cpath d='M150 90c-10 30-40 35-50 15s10-25 20-15 0 20-12 14'/%3E%3Cpath d='M90 10c25 5 35 25 25 38M70 150c-25-5-35-25-25-38'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px;
  --cenefa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='30' viewBox='0 0 72 30'%3E%3Crect width='72' height='30' fill='%232348A8'/%3E%3Crect width='72' height='3' fill='%23E9B530'/%3E%3Crect y='27' width='72' height='3' fill='%23E9B530'/%3E%3Cg fill='none' stroke='%23FBF8EE' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M3 22c6-13 19-13 23-5s-4 10-8 6 0-8 5-6'/%3E%3Cpath d='M69 8c-6 13-19 13-23 5s4-10 8-6 0 8-5 6'/%3E%3C/g%3E%3Cg fill='none' stroke='%238FB0E8' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M26 17c4-6 10-7 14-6M46 13c-4 6-10 7-14 6'/%3E%3C/g%3E%3Ccircle cx='36' cy='15' r='3.4' fill='%23E9B530'/%3E%3Ccircle cx='36' cy='15' r='1.4' fill='%23C8402A'/%3E%3C/svg%3E") repeat-x center / auto 100%;
  --i-esquina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M5 60V20C5 11 11 5 20 5h40' stroke='%232348A8' stroke-width='4'/%3E%3Cpath d='M15 56c0-15 5-23 13-25s12 4 8 9-10 2-8-3' stroke='%232348A8' stroke-width='3.5'/%3E%3Cpath d='M56 15c-15 0-23 5-25 13s4 12 9 8 2-10-3-8' stroke='%232348A8' stroke-width='3.5'/%3E%3Cpath d='M17 50c1-9 4-14 9-16M50 17c-9 1-14 4-16 9' stroke='%238FB0E8' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='5' fill='%23E9B530' stroke='%232348A8' stroke-width='2'/%3E%3C/svg%3E");
  --i-uvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3c0 3 1 5 3 6' fill='none' stroke='%235B4A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M18 7c4-3 9-2 11 1-4 2-8 2-11-1z' fill='%234E8B3A'/%3E%3Cg fill='%236B2E5F' stroke='%233E1838' stroke-width='.8'%3E%3Ccircle cx='11' cy='12' r='3.2'/%3E%3Ccircle cx='17' cy='12' r='3.2'/%3E%3Ccircle cx='23' cy='12' r='3.2'/%3E%3Ccircle cx='14' cy='17.5' r='3.2'/%3E%3Ccircle cx='20' cy='17.5' r='3.2'/%3E%3Ccircle cx='17' cy='23' r='3.2'/%3E%3Ccircle cx='11' cy='22' r='2.4'/%3E%3C/g%3E%3Ccircle cx='10' cy='11' r='.9' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='16' cy='11' r='.9' fill='%23fff' opacity='.6'/%3E%3C/svg%3E");
  --i-copa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 4h14c0 7-3 11-7 11S9 11 9 4z' fill='%23FBF8EE' stroke='%232348A8' stroke-width='2'/%3E%3Cpath d='M10 8h12c-.6 4-3 6-6 6s-5.4-2-6-6z' fill='%23C8402A'/%3E%3Cpath d='M16 15v10M10 28h12' stroke='%232348A8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-hoja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 29V14' stroke='%233B6B2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 15c-2-6-8-7-11-5 1 5 6 8 11 5zm0 0c2-6 8-7 11-5-1 5-6 8-11 5zm0-2c-3-4-2-9 0-11 2 2 3 7 0 11z' fill='%234E8B3A'/%3E%3C/svg%3E");
  --i-floron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg fill='none' stroke='%232348A8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M60 12c-10-9-24-9-30 0s-10 6-14 1M60 12c10-9 24-9 30 0s10 6 14 1'/%3E%3Cpath d='M60 12c-8 7-18 8-24 3M60 12c8 7 18 8 24 3' stroke='%238FB0E8' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='60' cy='12' r='4' fill='%23E9B530' stroke='%232348A8' stroke-width='1.6'/%3E%3Ccircle cx='4' cy='12' r='2.4' fill='%23C8402A'/%3E%3Ccircle cx='116' cy='12' r='2.4' fill='%23C8402A'/%3E%3C/svg%3E");
  --i-cinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 110' preserveAspectRatio='none'%3E%3Cpath d='M38 34 L4 40 L22 60 L4 82 L50 84 Z' fill='%23E6DDB8' stroke='%232A2418' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M362 34 L396 40 L378 60 L396 82 L350 84 Z' fill='%23E6DDB8' stroke='%232A2418' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M36 22 Q200 2 364 22 L364 80 Q200 60 36 80 Z' fill='%23F6F0D8' stroke='%232A2418' stroke-width='3'/%3E%3C/svg%3E");
  background: #16307A;
}
/* pared azul: el fondo de la página es azulejo cobalto con volutas */
html[data-diseno="canai2"] main { background: var(--azul-pared), var(--az); }
html[data-diseno="canai2"] .foot { background: var(--azul-pared), #16307A; color: #FBF8EE; }
html[data-diseno="canai2"] .foot .muted { color: #DCE5FA; }
html[data-diseno="canai2"] .foot .script { color: var(--oro); }
html[data-diseno="canai2"] .stripe { height: 30px; }
html[data-diseno="canai2"] .foot::before { height: 30px; }

/* sobre la pared azul, títulos y textos sueltos en blanco */
html[data-diseno="canai2"] main > div > h1, html[data-diseno="canai2"] main > div > h2, html[data-diseno="canai2"] main > h1,
html[data-diseno="canai2"] main > div > .lead, html[data-diseno="canai2"] main > div > p, html[data-diseno="canai2"] .count, html[data-diseno="canai2"] .count-row,
html[data-diseno="canai2"] main > div > p a, html[data-diseno="canai2"] main > div > section > h2 { color: #FBF8EE; text-shadow: 2px 2px 0 #16307A; }
html[data-diseno="canai2"] main > div > p a { text-decoration-color: var(--oro); }

/* títulos: romana con sombra roja, como «Comidas y licores» */
html[data-diseno="canai2"] h1, html[data-diseno="canai2"] h2 { font-family: var(--f-rotulo); font-weight: 900; letter-spacing: .03em; color: #1B1B22; text-shadow: 2px 2px 0 #FBF8EE, 4px 4px 0 var(--terra); }
html[data-diseno="canai2"] h2 { display: flex; align-items: center; gap: 14px; }
html[data-diseno="canai2"] h2::after { content: ""; flex: 0 0 96px; height: 20px; background: var(--i-floron) center / contain no-repeat; }
html[data-diseno="canai2"] h3 { font-family: var(--f-rotulo); color: var(--az); }

/* logo: medallón amarillo con aro azul */
html[data-diseno="canai2"] .brand { background: radial-gradient(ellipse 50% 46% at 56% 50%, #F4C93A 0 96%, var(--az) 97% 100%) , #FBF8EE; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 9px var(--oro), inset 0 0 0 11px var(--az); font-family: var(--f-rotulo); font-weight: 900; }
html[data-diseno="canai2"] .brand .b1 { color: #1B1B22; text-shadow: 2px 2px 0 #FBF8EE, 3px 3px 0 var(--terra); }
html[data-diseno="canai2"] .brand .b2 { color: var(--az); text-shadow: 2px 2px 0 #FBF8EE, 3px 3px 0 var(--terra); }
html[data-diseno="canai2"] .brand:hover { background: radial-gradient(ellipse 50% 46% at 56% 50%, #FFD84D 0 96%, var(--az) 97% 100%), #FBF8EE; }
html[data-diseno="canai2"] nav a.on, html[data-diseno="canai2"] nav summary.on { background: var(--oro); color: #1B1B22; }
html[data-diseno="canai2"] nav a, html[data-diseno="canai2"] nav button, html[data-diseno="canai2"] nav summary { font-family: var(--f-rotulo); }

/* paneles: baldosa blanca con esquinas de volutas */
html[data-diseno="canai2"] .panel, html[data-diseno="canai2"] .card, html[data-diseno="canai2"] .etq, html[data-diseno="canai2"] .detail-head, html[data-diseno="canai2"] .table-wrap { position: relative; }
html[data-diseno="canai2"] .panel::before, html[data-diseno="canai2"] .card::before, html[data-diseno="canai2"] .detail-head::before, html[data-diseno="canai2"] .vcard::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 1;
  background: var(--i-esquina) top left / 46px no-repeat, var(--i-esquina) top right / 46px no-repeat, var(--i-esquina) bottom left / 46px no-repeat, var(--i-esquina) bottom right / 46px no-repeat;
}
html[data-diseno="canai2"] .card::before, html[data-diseno="canai2"] .panel::before { transform: none; }
/* las esquinas derechas e inferiores se reflejan con máscaras: usamos 4 capas en un pseudo y 3 giradas */
html[data-diseno="canai2"] .vcard { position: relative; }
html[data-diseno="canai2"] .vcard::before { inset: 4px; background: var(--i-esquina) top left / 38px no-repeat; }
html[data-diseno="canai2"] .vcard::after { content: ""; position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; background: var(--i-esquina) center / contain no-repeat; transform: scaleX(-1); pointer-events: none; z-index: 1; }
html[data-diseno="canai2"] .panel::before, html[data-diseno="canai2"] .card::before, html[data-diseno="canai2"] .detail-head::before { background: var(--i-esquina) top left / 46px no-repeat; }
html[data-diseno="canai2"] .panel::after, html[data-diseno="canai2"] .card::after, html[data-diseno="canai2"] .detail-head::after { content: ""; position: absolute; right: 6px; top: 6px; width: 46px; height: 46px; background: var(--i-esquina) center / contain no-repeat; transform: scaleX(-1); pointer-events: none; z-index: 1; }
html[data-diseno="canai2"] .table-wrap::before { display: none; }

/* portada */
html[data-diseno="canai2"] .hero { background: #16307A; border-color: #16307A; }
html[data-diseno="canai2"] .hero > * { box-shadow: inset 0 0 0 6px var(--oro), inset 0 0 0 9px var(--az); }
html[data-diseno="canai2"] .hero-texto { background: #FBF8EE; color: var(--az); position: relative; padding-left: 74px; }
html[data-diseno="canai2"] .hero-texto::before { content: ""; position: absolute; left: 22px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); background: var(--i-copa) center / contain no-repeat; }
/* el título dentro de una cinta de pergamino sobre azulejo azul */
html[data-diseno="canai2"] .hero-titulo { background: var(--azul-pared), var(--az); align-items: center; justify-content: center; text-align: center; }
html[data-diseno="canai2"] .hero-titulo h1 { background: var(--i-cinta) center / 100% 100% no-repeat; padding: 26px 50px 30px !important; color: #1B1B22; font-size: clamp(1.5rem, 2.2vw, 2.4rem); text-shadow: 2px 2px 0 #FBF8EE, 3px 3px 0 var(--terra); }
html[data-diseno="canai2"] .hero-titulo svg { fill: #FBF8EE; filter: drop-shadow(3px 3px 0 #16307A); opacity: .9; }
html[data-diseno="canai2"] .hero-titulo svg circle { fill: var(--oro); }
/* el «99»: medallón oval amarillo con aro azul y letra negra sombreada */
html[data-diseno="canai2"] .hero-num { background: radial-gradient(ellipse 44% 42% at 50% 50%, #F4C93A 0 95%, var(--az) 96% 100%, transparent 100.5%), var(--azul-pared), #FBF8EE; color: #1B1B22; }
html[data-diseno="canai2"] .hero-num b { font-family: var(--f-rotulo); font-weight: 900; text-shadow: 3px 3px 0 #FBF8EE, 7px 7px 0 var(--terra); left: 50%; transform: translateX(-50%); top: .02em; font-size: clamp(6rem, 9vw, 12rem); }
html[data-diseno="canai2"] .hero-num::before { content: ""; position: absolute; left: 50%; top: 10px; width: 42px; height: 42px; transform: translateX(-50%); background: var(--i-uvas) center / contain no-repeat; z-index: 1; }
html[data-diseno="canai2"] .hero-num span { background: var(--terra); color: #FBF8EE; font-family: var(--f-rotulo); }
html[data-diseno="canai2"] .hero-mapa { background: var(--verde); }
html[data-diseno="canai2"] .hero-mapa .hm-paises path.on { fill: #F4C93A; }
html[data-diseno="canai2"] .hero-mapa .hm-txt b { font-family: var(--f-rotulo); font-weight: 900; text-shadow: 3px 3px 0 #2D5A22; }
html[data-diseno="canai2"] .hero-tipos { background: #FBF8EE; position: relative; }
html[data-diseno="canai2"] .hero-tipos h2 { font-family: var(--f-rotulo); font-weight: 900; color: #1B1B22; text-shadow: 2px 2px 0 var(--terra); }
html[data-diseno="canai2"] .hero-tipos h2::after { display: none; }
html[data-diseno="canai2"] .hero-tipos h2::before { content: ""; width: 26px; height: 26px; background: var(--i-uvas) center / contain no-repeat; display: inline-block; vertical-align: -6px; margin-right: 8px; }

/* tarjetas: baldosa blanca, nombre negro con sombra roja, hoja junto al tipo */
html[data-diseno="canai2"] .grid { background: #16307A; border-color: #16307A; gap: 8px; }
html[data-diseno="canai2"] .vcard { box-shadow: inset 0 0 0 3px var(--az), inset 0 0 0 7px var(--oro), inset 0 0 0 9px var(--az); }
html[data-diseno="canai2"] .vcard-head, html[data-diseno="canai2"] .cc .vcard-head, html[data-diseno="canai2"] .rc .vcard-head { background: transparent; box-shadow: none; border-bottom: 0; padding: 26px 22px 12px; }
html[data-diseno="canai2"] .vcard-body { padding: 4px 22px 22px; }
html[data-diseno="canai2"] .vcard-head h3, html[data-diseno="canai2"] .cc .vcard-head h3 { font-family: var(--f-rotulo); font-weight: 900; color: #1B1B22; text-shadow: 1px 1px 0 #FBF8EE, 2.5px 2.5px 0 var(--pt, var(--terra)); font-size: 1.5rem; letter-spacing: .02em; }
html[data-diseno="canai2"] .kind { display: inline-flex; align-items: center; gap: 6px; color: var(--pt, var(--terra)); }
html[data-diseno="canai2"] .kind::before { content: ""; width: 18px; height: 18px; background: var(--i-uvas) center / contain no-repeat; }
html[data-diseno="canai2"] .t-blanco .kind::before, html[data-diseno="canai2"] .t-dry .kind::before { background-image: var(--i-hoja); }
html[data-diseno="canai2"] .t-rojo { --pt: #C8402A; } html[data-diseno="canai2"] .t-blanco { --pt: #B8901C; } html[data-diseno="canai2"] .t-dry { --pt: #4E8B3A; }
html[data-diseno="canai2"] .t-rosado { --pt: #D9667E; } html[data-diseno="canai2"] .t-reserva { --pt: #6B2E5F; }
html[data-diseno="canai2"] .cd-barras i.on { background: var(--pt, var(--az)); }
html[data-diseno="canai2"] .vcard-foto, html[data-diseno="canai2"] .dh-foto { border-color: var(--az); box-shadow: 0 0 0 4px #F4C93A, 0 0 0 6px var(--az); }

/* ficha: cabecera como medallón con cartela dorada */
html[data-diseno="canai2"] .detail-head { background: radial-gradient(ellipse 70% 120% at 30% 50%, #FFF6D0 0 40%, transparent 70%), #FBF8EE; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 12px #F4C93A, inset 0 0 0 14px #B8861C, inset 0 0 0 16px var(--az); padding: 34px 36px; }
html[data-diseno="canai2"] .detail-head h1 { color: #1B1B22; }

/* botones y fichas de filtro con color */
html[data-diseno="canai2"] button, html[data-diseno="canai2"] .btn, html[data-diseno="canai2"] a.button { font-family: var(--f-rotulo); box-shadow: 3px 3px 0 #16307A; }
html[data-diseno="canai2"] button.chip[aria-pressed="true"] { background: #F4C93A; color: #1B1B22; }
html[data-diseno="canai2"] .filters, html[data-diseno="canai2"] .chips { background: #16307A; border-color: #16307A; }

/* pie: sello como medallón amarillo */
html[data-diseno="canai2"] .seal { background: #F4C93A; color: #1B1B22; border-color: var(--az); }

/* miniatura del laboratorio */
.dz-canai2 .dz-rej > div, .dz-canai2 .dz-tarjetas > div { box-shadow: inset 0 0 0 2px #E9B530; }
.dz-canai2 .dz-b { background: radial-gradient(ellipse 44% 40% at 50% 50%, #F4C93A 0 92%, #2348A8 93% 100%, transparent 101%), #FBF8EE !important; color: #1B1B22 !important; }
.dz-canai2 .dz-b b { text-shadow: 2px 2px 0 #C8402A !important; }
.dz-canai2 .dz-a { background: #2348A8 !important; color: #FBF8EE !important; } .dz-canai2 .dz-a b { color: #1B1B22; background: #F6F0D8; padding: 2px 4px; text-shadow: 1px 1px 0 #C8402A; }
.dz-canai2 .dz-d { background: #4E8B3A !important; }
.dz-canai2 .dz-tarjetas b { color: #1B1B22; text-shadow: 1px 1px 0 #C8402A; }
/* ajustes */
html[data-diseno="canai2"] .hero-num { background: radial-gradient(ellipse 42% 38% at 50% 50%, #F4C93A 0 94%, #2348A8 95% 100%, transparent 100.5%), var(--azul-pared), #FBF8EE; }
html[data-diseno="canai2"] .hero-num b { top: 50%; transform: translate(-50%, -54%); }
html[data-diseno="canai2"] .hero-num::before { top: 14%; }
html[data-diseno="canai2"] .vcard-head h3, html[data-diseno="canai2"] .cc .vcard-head h3 { text-shadow: 2px 2px 0 color-mix(in srgb, var(--pt, #C8402A) 55%, transparent); }
html[data-diseno="canai2"] h1, html[data-diseno="canai2"] h2 { text-shadow: 3px 3px 0 #C8402A; }
html[data-diseno="canai2"] main > div > h1, html[data-diseno="canai2"] main > div > h2, html[data-diseno="canai2"] main > h1 { text-shadow: 3px 3px 0 #16307A; }