/* Casa Siam · Vidrio transparente en los botones (31 oct 2026).
   Aprobado por la casa desde la copia de comparación
   «vidrio-en-botones (31 oct, comparación).html». Se carga en las 18 páginas,
   después de las demás hojas. La portada no tiene botones y no se toca.

   El vidrio de la tercera maqueta: sin color propio, desenfoque de 2 px y un
   canto de luz de 1 px trazado en una sola pieza, con el mismo radio que el
   botón. Cada botón conserva su tamaño, su forma y su letra.
   - Sobre papel claro: cristal, canto blanco arriba y café tenue abajo.
   - Sobre café (Contacto, Instagram): canto champán, letras crema.
   - El círculo flotante de WhatsApp pasa sobre fotos y sobre papel: mira qué
     tiene detrás y cambia el ícono a café sobre claro (clase cs-fondo-claro, la pone casasiam-vidrio.js).
   Sin sombra detrás de las letras; en el teléfono, sin sombra bajo el botón. */

html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton, a.cs-ig__boton, a.cs-wa-flotante) {
  position: relative !important; isolation: isolate;
  border-color: transparent !important; box-shadow: none !important; text-shadow: none !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.1) !important; backdrop-filter: blur(2px) saturate(1.1) !important;
  transition: background-color .3s ease, color .3s ease !important;
  -webkit-tap-highlight-color: transparent;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton, a.cs-ig__boton, a.cs-wa-flotante)::before { content: none !important; display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton, a.cs-ig__boton, a.cs-wa-flotante)::after {
  content: "" !important; display: block !important; position: absolute !important; inset: -1px !important; z-index: 1 !important;
  border-radius: inherit !important; padding: 1px !important; margin: 0 !important; pointer-events: none !important;
  width: auto !important; height: auto !important; transform: none !important; opacity: .9 !important;
  background: var(--v-canto) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) !important;
  transition: opacity .3s ease !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton, a.cs-ig__boton, a.cs-wa-flotante):hover::after { opacity: 1 !important; }

/* Papel claro */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton) {
  --v-canto: linear-gradient(172deg, #FFFFFF 0%, rgba(255, 255, 255, .6) 30%, rgba(47, 28, 14, .14) 60%, rgba(47, 28, 14, .38) 100%);
  background: rgba(255, 255, 255, .22) !important; color: #2F1C0E !important;
  box-shadow: 0 1px 1px rgba(47, 28, 14, .06), 0 12px 24px -16px rgba(47, 28, 14, .5) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton):hover { background: rgba(255, 255, 255, .5) !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton) :is(svg, path) { fill: currentColor !important; color: #2F1C0E !important; }

/* Sobre café */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-ig__boton {
  --v-canto: linear-gradient(172deg, rgba(236, 216, 176, .9) 0%, rgba(201, 174, 122, .32) 28%, rgba(201, 174, 122, .12) 55%, rgba(201, 174, 122, .5) 100%);
  background: rgba(243, 238, 230, .03) !important; color: #F3EEE6 !important;
  box-shadow: inset 0 0 16px rgba(243, 238, 230, .05), 0 12px 26px -16px rgba(0, 0, 0, .9) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-ig__boton:hover { background: rgba(243, 238, 230, .08) !important; color: #F3EEE6 !important; }

/* El círculo flotante de WhatsApp */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante {
  position: fixed !important;
  --v-canto: linear-gradient(172deg, rgba(255, 253, 248, .95) 0%, rgba(255, 253, 248, .3) 28%, rgba(255, 253, 248, .1) 55%, rgba(255, 253, 248, .5) 100%);
  background: rgba(255, 253, 248, .04) !important; color: #FFFDF8 !important;
  -webkit-backdrop-filter: blur(4px) brightness(.8) saturate(1.1) !important; backdrop-filter: blur(4px) brightness(.8) saturate(1.1) !important;
  box-shadow: inset 0 0 14px rgba(255, 253, 248, .1) !important;
}
html.cs-fondo-claro:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante {
  --v-canto: linear-gradient(172deg, #FFFFFF 0%, rgba(255, 255, 255, .6) 30%, rgba(47, 28, 14, .14) 60%, rgba(47, 28, 14, .38) 100%);
  background: rgba(255, 255, 255, .22) !important; color: #2F1C0E !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.1) !important; backdrop-filter: blur(4px) saturate(1.1) !important;
  box-shadow: none !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante:hover { background: rgba(255, 253, 248, .12) !important; }

/* Teléfono y tableta: sin sombra bajo los botones */
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton) { box-shadow: none !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-ig__boton { box-shadow: inset 0 0 16px rgba(243, 238, 230, .05) !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante { background: rgba(47, 28, 14, .6) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton, a.cs-ig__boton, a.cs-wa-flotante) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton) { background: #FBF8F3 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante { background: #2F1C0E !important; color: #F3EEE6 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton, a.cs-ig__boton, a.cs-wa-flotante), html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) :is(a.cs-wa-boton, a.cs-familias__boton, a.cs-social, a.m-boton, a.cs-ig__boton, a.cs-wa-flotante)::after { transition: none !important; }
}

/* El botón del menú no tiene borde: su canto va justo al borde */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.m-boton::after { inset: 0 !important; }

/* El círculo de WhatsApp, un poco más notorio (2 nov 2026, la casa: «que sea un poco más notorio»).
   Sigue siendo vidrio, pero con más cuerpo: sobre papel claro, un vidrio blanco más denso, canto dorado y una sombra suave
   que lo despega del fondo; sobre fotos, un vidrio café más oscuro. El ícono crece un poco. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante {
  --v-canto: linear-gradient(172deg, rgba(236, 216, 176, .95) 0%, rgba(255, 253, 248, .35) 30%, rgba(201, 174, 122, .25) 60%, rgba(201, 174, 122, .7) 100%);
  background: rgba(47, 28, 14, .34) !important;
  box-shadow: inset 0 0 14px rgba(255, 253, 248, .12), 0 10px 24px -10px rgba(20, 12, 6, .55) !important;
}
html.cs-fondo-claro:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante {
  --v-canto: linear-gradient(172deg, #FFFFFF 0%, rgba(201, 174, 122, .55) 45%, rgba(134, 107, 52, .75) 100%);
  background: rgba(255, 253, 248, .82) !important; color: #2F1C0E !important;
  box-shadow: 0 1px 2px rgba(47, 28, 14, .12), 0 10px 24px -10px rgba(47, 28, 14, .45) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante:hover { background: rgba(47, 28, 14, .45) !important; }
html.cs-fondo-claro:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante:hover { background: #FFFDF8 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j):not(#cs-k) a.cs-wa-flotante svg { width: 30px !important; height: 30px !important; }