/* =====================================================================
   Diversiones Piero — Design system "glass" (sitio público)
   Basado en el sistema glassUX21 de UX21.Studio, con los colores
   corporativos del logo: azul marino, azul rey, naranja y ámbar.
   Regla de marca: esquinas de botones y objetos con radio de 5px.
   ===================================================================== */

/* ─── TIPOGRAFÍA (2026-10-14: Outfit servida desde el propio sitio) ──
   Antes se cargaba desde Google Fonts con @import (bloqueaba el render
   ~0,8 s). Licencia SIL OFL 1.1: assets/fonts/outfit/OFL.txt */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/outfit/outfit-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/outfit/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --c-navy:   #0A2C62;
  --c-blue:   #1B5FC1;
  --c-orange: #F26A00;
  --c-amber:  #F5A300;
  --c-wa:     #1FAF55;

  --r:    5px;   /* radio de esquinas de botones y objetos */
  --r-sm: 4px;
  --r-xs: 3px;

  --topbar-h: 38px;
  --mainbar-h: 68px;
  --mainbar-h-compact: 54px;
  --header-h: calc(var(--topbar-h) + var(--mainbar-h));
  --container: 1200px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-theme: cubic-bezier(1, 0, .4, 1);
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ─── MODO CLARO (por defecto) ───────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --c-glass:   #c3cde0;
  --c-light:   #ffffff;
  --c-dark:    #0a1a33;
  --c-content: #14213a;
  --c-muted:   #5b6780;
  --c-action:  #D95A00;
  --c-action-2:#C24E00;
  --c-price:   #AD4500;   /* 2026-10-14: antes #C24E00 (contraste 4.17 sobre el fondo; ahora ≥ 4.5) */
  --c-link:    #1B5FC1;
  --c-bg:      #EAF0F8;
  --c-surface: rgba(255, 255, 255, .62);
  --c-line:    rgba(20, 33, 58, .10);
  --reflex-dark:  1;
  --reflex-light: 1;
  --saturation: 150%;
  color-scheme: light;
}

/* ─── MODO OSCURO ────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --c-glass:   #8ea3c7;
  --c-light:   #ffffff;
  --c-dark:    #000814;
  --c-content: #e6edf7;
  --c-muted:   #9fb0c9;
  --c-action:  #E86200;
  --c-action-2:#C24E00;
  --c-price:   #FF8A3D;
  --c-link:    #6FA3FF;
  --c-bg:      #061430;
  --c-surface: rgba(14, 34, 70, .55);
  --c-line:    rgba(230, 237, 247, .10);
  --reflex-dark:  2;
  --reflex-light: .35;
  --saturation: 160%;
  color-scheme: dark;
}

/* ─── BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  padding-top: var(--header-h);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-content);
  background: var(--c-bg);
  transition: background 400ms var(--ease-theme), color 400ms var(--ease-theme);
  overflow-x: hidden;
}
/* Manchas de color de fondo: dan profundidad al vidrio */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
body::before {
  top: -180px; left: -160px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-orange) 16%, transparent), transparent 65%);
}
body::after {
  bottom: -220px; right: -140px;
  width: 760px; height: 760px;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-blue) 18%, transparent), transparent 65%);
}
img { max-width: 100%; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
section.block { padding-top: 48px; padding-bottom: 48px; }
.muted { color: var(--c-muted); }

/* ─── GLASS (mixin) ──────────────────────────────────────────────── */
.glass {
  background-color: color-mix(in srgb, var(--c-glass) 14%, transparent);
  backdrop-filter: blur(12px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
  border-radius: var(--r);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--reflex-light) * 60%), transparent),
    inset -.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--reflex-dark) * 12%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--reflex-dark) * 20%), transparent),
    0 1px 5px 0 color-mix(in srgb, var(--c-dark) calc(var(--reflex-dark) * 10%), transparent),
    0 6px 20px 0 color-mix(in srgb, var(--c-dark) calc(var(--reflex-dark) * 10%), transparent);
  transition: background-color 400ms var(--ease-theme), box-shadow 400ms var(--ease-theme);
}
.glass-strong { background-color: var(--c-surface); }

/* ─── BOTONES (radio 5px) ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease), filter 180ms var(--ease);
}
.btn svg { flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--c-action), var(--c-action-2));
  color: #fff;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--c-orange) 40%, transparent);
}
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 6px 22px color-mix(in srgb, var(--c-orange) 50%, transparent); }
.btn-secondary {
  color: var(--c-content);
  background-color: color-mix(in srgb, var(--c-glass) 20%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--reflex-light) * 14%), transparent),
    inset 1.5px 2px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--reflex-light) * 80%), transparent),
    0 2px 8px color-mix(in srgb, var(--c-dark) calc(var(--reflex-dark) * 8%), transparent);
}
.btn-secondary:hover { background-color: color-mix(in srgb, var(--c-glass) 32%, transparent); }
.btn-ghost {
  background: transparent;
  color: var(--c-link);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-link) 55%, transparent);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--c-link) 10%, transparent); }
.btn-wa { background: var(--c-wa); color: #fff; box-shadow: 0 2px 12px color-mix(in srgb, var(--c-wa) 40%, transparent); }
.btn-wa:hover { filter: brightness(1.06); }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-icon {
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.btn-icon:hover { background: rgba(255, 255, 255, .18); }

/* ─── BADGES Y CHIPS ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.badge-orange { background: linear-gradient(135deg, var(--c-orange), var(--c-action-2)); color: #fff; }
.badge-blue   { background: var(--c-blue); color: #fff; }
.badge-amber  { background: var(--c-amber); color: #2a1a00; }
.badge-navy   { background: var(--c-navy); color: #fff; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r);
  font-size: 14px; font-weight: 500;
  color: var(--c-content);
  background-color: color-mix(in srgb, var(--c-glass) 18%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--reflex-light) * 14%), transparent), 0 1px 4px color-mix(in srgb, var(--c-dark) 6%, transparent);
  text-decoration: none !important;
  transition: background-color 160ms, color 160ms, box-shadow 160ms;
}
.chip:hover { background-color: color-mix(in srgb, var(--c-glass) 32%, transparent); }
.chip.is-active {
  background: color-mix(in srgb, var(--c-orange) 16%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--c-orange);
  color: var(--c-price);
  font-weight: 600;
}

/* ─── INPUTS ─────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--c-muted); }
.input, textarea.input, select.input {
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 15px;
  color: var(--c-content);
  background-color: color-mix(in srgb, var(--c-glass) 16%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-content) 14%, transparent),
    inset 0 2px 4px -1px color-mix(in srgb, var(--c-dark) calc(var(--reflex-dark) * 12%), transparent);
  outline: none;
  transition: box-shadow 180ms;
}
.input::placeholder { color: color-mix(in srgb, var(--c-content) 45%, transparent); }
.input:focus {
  box-shadow:
    inset 0 0 0 1.5px var(--c-orange),
    0 0 0 3px color-mix(in srgb, var(--c-orange) 20%, transparent);
}
.input-icon { position: relative; }
.input-icon > svg { position: absolute; z-index: 2; left: 13px; top: 50%; translate: 0 -50%; color: var(--c-muted); pointer-events: none; }
.input-icon > .input { padding-left: 40px; }

/* ─── ALERTAS ────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px;
  border-radius: var(--r);
  border-left: 3px solid currentColor;
  font-size: 15px;
}
.alert-ok    { color: #1f8a4c; background: color-mix(in srgb, #1f8a4c 10%, transparent); }
.alert-error { color: #c0392b; background: color-mix(in srgb, #c0392b 10%, transparent); }
.alert > div { color: var(--c-content); }

/* ─── CABECERA EN DOS BARRAS (fija) ──────────────────────────────────
   1) Barra superior negra: horario a la izquierda; teléfono, redes y tema a la derecha.
   2) Barra principal azul marino: nombre de la empresa · logo al centro · menú.
   Al hacer scroll la barra superior se pliega y la principal se compacta. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: #fff;
}
.site-header a { color: #fff; }

.topbar {
  height: var(--topbar-h);
  background: #05070c;
  font-size: 13px;
  overflow: hidden;
  transition: height 300ms var(--ease), opacity 300ms var(--ease);
}
.topbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-note { color: #9aa6bd; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-note svg { color: var(--c-amber); flex-shrink: 0; }
.topbar-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.topbar .header-phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; text-decoration: none !important; }
.topbar .header-phone svg { color: var(--c-amber); }
.topbar .sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .16); }
.social { display: flex; align-items: center; gap: 2px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  color: #c9d3e6;
  transition: background-color 160ms, color 160ms, transform 160ms;
}
.social a:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateY(-1px); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; cursor: pointer;
  border-radius: var(--r-sm);
  color: #c9d3e6; background: rgba(255, 255, 255, .06);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: inline; }

/* Barra principal con "pico" central (el logo se aloja en él y nunca se corta).
   La forma se dibuja con 3 capas recortadas con clip-path, porque un filter en
   el contenedor anularía el backdrop-filter del vidrio:
     1) .mainbar-shadow → sombra difusa de la forma completa
     2) .mainbar-edge   → filo naranja → ámbar → azul que sigue el contorno
     3) .mainbar-glass  → vidrio azul marino */
@property --notch-h { syntax: "<length>"; inherits: true; initial-value: 24px; }
.mainbar {
  --bar: var(--mainbar-h);
  --notch-h: 18px;        /* cuánto baja el pico */
  /* El pico abraza al logo: su punta mide el ancho real del logo + 16px
     (--logo-ratio = ancho/alto del logo, lo calcula el layout en PHP). */
  --logo-h: calc(var(--bar) + var(--notch-h) - 16px);
  --notch-flat: calc(var(--logo-h) * var(--logo-ratio, 1) + 1px);
  --notch-w: calc(var(--notch-flat) + var(--notch-h) * 3.4);
  --edge: 2px;
  height: var(--bar);
  transition: height 300ms var(--ease), --notch-h 300ms var(--ease);
  position: relative;
}
.mainbar-shape {
  position: absolute; top: 0; left: 0; right: 0;
  bottom: calc(-1 * var(--notch-h));
  pointer-events: none;
  transition: opacity 250ms var(--ease);
}
.mainbar-glass,
.mainbar-shadow i {
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch-h)),
    calc(50% + var(--notch-w) / 3) calc(100% - var(--notch-h)),
    calc(50% + var(--notch-flat) / 3) 100%,
    calc(50% - var(--notch-flat) / 3) 100%,
    calc(50% - var(--notch-w) / 3) calc(100% - var(--notch-h)),
    0 calc(100% - var(--notch-h))
  );
}
.mainbar-glass {
  background:
    radial-gradient(ellipse 260px 120% at 50% 100%, rgba(27, 95, 193, .45), transparent 70%),
    color-mix(in srgb, var(--c-navy) 92%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
/* Brillo interior sutil en el borde superior */
.mainbar-glass::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, .07);
}
/* Placa blanca central: el "Logo para fondo blanco" se apoya sobre ella.
   Baja desde el borde superior de la barra y termina en la punta del pico. */
.mainbar-plate {
  --plate-w: calc(var(--notch-flat) + var(--notch-h) * 1.6);
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
  box-shadow: inset 0 -2px 0 rgba(10, 44, 98, .06);
  clip-path: polygon(
    calc(50% - var(--plate-w) / 2) 0,
    calc(50% + var(--plate-w) / 2) 0,
    calc(50% + var(--plate-w) / 2) calc(100% - var(--notch-h)),
    calc(50% + var(--notch-flat) / 3) 100%,
    calc(50% - var(--notch-flat) / 3) 100%,
    calc(50% - var(--plate-w) / 2) calc(100% - var(--notch-h))
  );
}
.mainbar-shadow {
  filter: blur(14px);
  transform: translateY(10px);
  opacity: .75;
}
.mainbar-shadow i { position: absolute; inset: 0; background: rgba(2, 8, 22, .75); }
.mainbar-edge {
  bottom: calc(-1 * (var(--notch-h) + var(--edge)));
  background: linear-gradient(90deg, var(--c-orange), var(--c-amber) 50%, var(--c-blue));
  /* Franja de --edge px que recorre el borde inferior, bajando por el pico */
  clip-path: polygon(
    0 calc(100% - var(--notch-h) - var(--edge)),
    calc(50% - var(--notch-w) / 3) calc(100% - var(--notch-h) - var(--edge)),
    calc(50% - var(--notch-flat) / 3) calc(100% - var(--edge)),
    calc(50% + var(--notch-flat) / 3) calc(100% - var(--edge)),
    calc(50% + var(--notch-w) / 3) calc(100% - var(--notch-h) - var(--edge)),
    100% calc(100% - var(--notch-h) - var(--edge)),
    100% calc(100% - var(--notch-h)),
    calc(50% + var(--notch-w) / 3 + 1px) calc(100% - var(--notch-h)),
    calc(50% + var(--notch-flat) / 3 + 1px) 100%,
    calc(50% - var(--notch-flat) / 3 - 1px) 100%,
    calc(50% - var(--notch-w) / 3 - 1px) calc(100% - var(--notch-h)),
    0 calc(100% - var(--notch-h))
  );
}
.site-header .container { max-width: 1440px; }
.mainbar .container {
  position: relative; z-index: 1;
  height: 100%;
  display: grid;
  /* La columna central tiene el ancho exacto del pico: el logo queda siempre centrado sobre él */
  grid-template-columns: minmax(0, 1fr) var(--notch-w) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

/* Izquierda: nombre de la empresa (settings.company_name) */
.brand-name {
  justify-self: start;
  display: flex; flex-direction: column; line-height: 1.05;
  text-decoration: none !important;
  font-weight: 800; font-size: clamp(0.9rem, 1.4vw, 1.3rem); letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-name > span { text-transform: uppercase; letter-spacing: .03em; }
.brand-name b { color: var(--c-orange); font-weight: 800; }
.brand-name small { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #9fb3d6; margin-top: 3px; }

/* Centro: logo — ocupa la barra + el pico, siempre completo */
.brand-logo-link {
  justify-self: center; align-self: start;
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--bar) + var(--notch-h));
  margin-bottom: calc(-1 * var(--notch-h)); /* no empuja la fila: nombre y menú quedan centrados en la barra */
  padding: 7px 0 9px;
  text-decoration: none !important;
  transition: height 300ms var(--ease);
}
.brand-logo {
  height: 65%; width: auto;
  object-fit: contain; display: block;
  filter: drop-shadow(0 4px 8px rgba(10, 44, 98, .18));
  transition: transform 300ms var(--ease);
}
.brand-logo-link:hover .brand-logo { transform: scale(1.05) rotate(-2deg); }
.brand-logo-text { font-weight: 800; font-size: 1.4rem; }

/* Derecha: menú con "píldora" de vidrio que sigue al mouse */
.main-nav {
  justify-self: end;
  position: relative;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.main-nav a {
  position: relative; z-index: 1;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  color: #d6e0f2;
  font-size: 13px; font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 200ms;
}
.main-nav a:hover, .main-nav a.is-active { color: #fff; }
.nav-pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 1.5px 2px 0 -1px rgba(255, 255, 255, .55), 0 6px 16px rgba(0, 0, 0, .25);
  opacity: 0;
  transition: left 380ms cubic-bezier(.3, 1.4, .5, 1), width 380ms cubic-bezier(.3, 1.4, .5, 1), opacity 200ms;
  pointer-events: none;
}
.nav-pill::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--c-orange);
  box-shadow: 0 0 10px var(--c-orange);
}
.main-nav.pill-ready .nav-pill { opacity: 1; }

/* Botón hamburguesa (se transforma en X) */
.nav-toggle {
  display: none;
  justify-self: end;
  width: 40px; height: 40px; padding: 0; border: none; cursor: pointer;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--c-orange), var(--c-action-2));
  box-shadow: 0 6px 18px rgba(242, 106, 0, .4);
  position: relative; z-index: 120;
}
.nav-toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform 300ms var(--ease), opacity 200ms, top 300ms var(--ease);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; right: 16px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.menu-open .nav-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2) { opacity: 0; transform: translateX(8px); }
.menu-open .nav-toggle span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Estado compacto al hacer scroll */
.is-scrolled .topbar { height: 0; opacity: 0; }
.is-scrolled .mainbar { --bar: var(--mainbar-h-compact); --notch-h: 28px; }

/* ─── MENÚ A PANTALLA COMPLETA (móvil / tablet) ─────────────────────── */
.mega-menu {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column;
  padding: calc(var(--mainbar-h) + 20px) 28px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(242, 106, 0, .45), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(27, 95, 193, .55), transparent 48%),
    linear-gradient(160deg, #0A2C62, #04122b 70%);
  clip-path: circle(0 at calc(100% - 48px) 60px);
  visibility: hidden;
  transition: clip-path 600ms cubic-bezier(.7, 0, .2, 1), visibility 0s linear 600ms;
  overflow-y: auto;
}
.menu-open .mega-menu {
  clip-path: circle(150% at calc(100% - 48px) 60px);
  visibility: visible;
  transition: clip-path 700ms cubic-bezier(.7, 0, .2, 1), visibility 0s;
}
.mega-menu nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: auto; }
.mega-menu nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0;
  font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  color: #fff; text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(24px);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease), color 200ms, padding-left 250ms var(--ease);
}
.mega-menu nav a i {
  font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .1em;
  color: var(--c-amber); min-width: 26px;
}
.mega-menu nav a:hover, .mega-menu nav a.is-active { color: var(--c-orange); padding-left: 10px; }
.menu-open .mega-menu nav a { opacity: 1; transform: none; }
.menu-open .mega-menu nav a:nth-child(1) { transition-delay: 180ms; }
.menu-open .mega-menu nav a:nth-child(2) { transition-delay: 230ms; }
.menu-open .mega-menu nav a:nth-child(3) { transition-delay: 280ms; }
.menu-open .mega-menu nav a:nth-child(4) { transition-delay: 330ms; }
.menu-open .mega-menu nav a:nth-child(5) { transition-delay: 380ms; }
.menu-open .mega-menu nav a:nth-child(6) { transition-delay: 430ms; }
.menu-open .mega-menu nav a:nth-child(n+7) { transition-delay: 480ms; }
.mega-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 28px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 400ms var(--ease) 0s, transform 400ms var(--ease) 0s;
}
.menu-open .mega-foot { opacity: 1; transform: none; transition-delay: 450ms; }
.mega-foot .social a { width: 42px; height: 42px; background: rgba(255, 255, 255, .08); }
.mega-foot .tagline { width: 100%; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #9fb3d6; margin-top: 8px; }
body.menu-open { overflow: hidden; }
/* Con el menú abierto la cabecera queda por encima (nombre, logo y la X visibles) */
.menu-open .site-header { z-index: 130; }
.menu-open .topbar { height: 0; opacity: 0; }
.menu-open .mainbar-shape { opacity: 0; }

@media (max-width: 1100px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-block; }
}
/* Si las opciones del menú no caben a la derecha del logo, piero.js activa la hamburguesa */
.nav-overflow .main-nav { display: none; }
.nav-overflow .nav-toggle { display: inline-block; }
@media (max-width: 640px) {
  .topbar-note { display: none; }
  .topbar-tools { margin: 0 auto; gap: 10px; }
  .topbar .header-phone span { font-size: 12px; }
  :root { --mainbar-h: 60px; --mainbar-h-compact: 48px; }
  .mainbar .container { gap: 8px; }
  /* Pico más compacto: deja espacio al nombre a la izquierda */
  .mainbar { --notch-h: 24px; --notch-w: calc(var(--notch-flat) + var(--notch-h) * 2.4); }
  .is-scrolled .mainbar { --notch-h: 20px; }
  .brand-name { font-size: .84rem; letter-spacing: 0; }
  .brand-name > span { letter-spacing: .02em; line-height: 1.1; }
  .brand-name b { display: block; }          /* DIVERSIONES / PIERO en dos líneas */
  .brand-name small { display: none; }
}
@media (max-width: 360px) {
  .brand-name { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mega-menu, .menu-open .mega-menu { transition: none; }
}

/* ─── HERO / CARRUSEL DE BANNERS ─────────────────────────────────── */
.hero { position: relative; background: var(--c-navy); }
.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; line-height: 0; }
.hero-slide img { width: 100%; height: auto; display: block; }  /* respeta SIEMPRE la proporción real */
/* (2026-10-14) La caja pavonada .hero-caption se eliminó: ver .hero-copy al final del archivo. */
.hero-dots { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: flex; gap: 8px; }
.hero-dots button {
  width: 26px; height: 6px; padding: 0; border: none; cursor: pointer;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .45);
  transition: background-color 200ms, width 200ms;
}
.hero-dots button[aria-current="true"] { background: var(--c-orange); width: 38px; }
.hero-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 42px; height: 42px;
  border: none; cursor: pointer;
  border-radius: var(--r);
  color: #fff;
  background: color-mix(in srgb, var(--c-navy) 45%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-arrow.prev { left: 14px; }
.hero-arrow.next { right: 14px; }
@media (max-width: 640px) {
  .hero-arrow { display: none; }
  .hero-dots { bottom: auto; top: 10px; }
}

/* ─── SECCIONES ──────────────────────────────────────────────────── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-price);
  margin-bottom: 6px;
}
.section-head h2 { margin: 0; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.cat-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 110px; padding: 18px;
  color: var(--c-content);
  text-decoration: none !important;
  position: relative; overflow: hidden;
  transition: transform 200ms var(--ease);
}
.cat-card::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-orange) 26%, transparent), transparent 70%);
}
.cat-card:nth-child(2n)::after { background: radial-gradient(circle, color-mix(in srgb, var(--c-blue) 30%, transparent), transparent 70%); }
.cat-card:hover { transform: translateY(-3px); }
.cat-card strong { font-size: 1.05rem; position: relative; z-index: 1; }
.cat-card span { font-size: 13px; color: var(--c-muted); position: relative; z-index: 1; }

/* ─── TARJETA DE PRODUCTO ────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.product-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--c-content);
  text-decoration: none !important;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.product-card:hover { transform: translateY(-4px); }
.product-card .media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
}
.product-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease); }
.product-card:hover .media img { transform: scale(1.04); }
.product-card .media .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #b3bdd0; }
.product-card .badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.product-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .name { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.product-card .prices { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price { font-weight: 800; color: var(--c-price); font-size: 1.15rem; }
.price-prev { text-decoration: line-through; color: var(--c-muted); font-size: .85rem; }
.product-card .cta { font-size: 13px; font-weight: 600; color: var(--c-link); }

/* Wrapper de tarjeta de producto: necesario para posicionar el botón WA encima */
.product-card-wrap { position: relative; display: flex; flex-direction: column; }
.card-wa-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.30);
  z-index: 5;
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none !important;
}
.card-wa-btn:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(37,211,102,.45); color: #fff; }
.card-wa-btn svg { flex-shrink: 0; }

/* ─── MIGAS DE PAN ───────────────────────────────────────────────── */
.breadcrumbs { font-size: 13.5px; color: var(--c-muted); margin: 26px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-link); }

/* ─── CATÁLOGO ───────────────────────────────────────────────────── */
.catalog-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.catalog-toolbar form { display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.catalog-layout.no-facets { grid-template-columns: 1fr; }
.facets { padding: 18px; position: sticky; top: calc(var(--mainbar-h-compact) + 16px); }
.facets h3 { font-size: 1rem; margin-bottom: 14px; }
.facet { margin-bottom: 16px; }
.facet strong { display: block; font-size: 13px; margin-bottom: 8px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }
.facet label { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; cursor: pointer; }
.facet input[type="checkbox"] { accent-color: var(--c-orange); width: 16px; height: 16px; }
.facet .range { display: flex; gap: 6px; }
.facet .range .input { padding: 8px 10px; font-size: 14px; }
.result-count { font-size: 14px; color: var(--c-muted); margin-bottom: 12px; }
@media (max-width: 860px) {
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .facets { position: static; }
}

/* ─── FICHA DE PRODUCTO ──────────────────────────────────────────── */
.product-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 40px; }
.gallery-main {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  display: grid; place-items: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-top: 12px; }
.gallery-thumbs button {
  padding: 0; border: none; cursor: pointer;
  aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-line);
  opacity: .75;
  transition: opacity 160ms, box-shadow 160ms;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs button:hover, .gallery-thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--c-orange); }
.buy-box { padding: 26px; position: sticky; top: calc(var(--mainbar-h-compact) + 16px); }
.buy-box h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 10px; }
.buy-box .price { font-size: 2rem; }
.buy-box .lead { color: var(--c-muted); }
.buy-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; font-size: 13px; color: var(--c-muted); }
.trust div { display: flex; align-items: center; gap: 8px; }
.trust svg { color: var(--c-orange); flex-shrink: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 40px; }
.panel { padding: 24px; }
.panel h2 { font-size: 1.3rem; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table td { padding: 10px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.spec-table td:first-child { color: var(--c-muted); width: 46%; padding-right: 12px; }
.spec-table td:last-child { font-weight: 600; }
.spec-table tr:last-child td { border-bottom: none; }
.video-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; margin-bottom: 14px; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; }
  .buy-box { position: static; }
}

/* ─── CONTENIDO (páginas institucionales) ────────────────────────── */
.article { padding: clamp(22px, 4vw, 44px); margin-bottom: 40px; }
.article .cover { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--r); margin-bottom: 22px; display: block; }
.prose { font-size: 16.5px; line-height: 1.75; }
.prose img { border-radius: var(--r); height: auto; }
.prose h2, .prose h3 { margin-top: 1.4em; }
.prose a { text-decoration: underline; }
.prose blockquote { margin: 1em 0; padding: .6em 1em; border-left: 3px solid var(--c-orange); background: color-mix(in srgb, var(--c-orange) 7%, transparent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ─── NOVEDADES ──────────────────────────────────────────────────── */
.news-card { display: flex; flex-direction: column; overflow: hidden; color: var(--c-content); text-decoration: none !important; }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--r) var(--r) 0 0; }
.news-card .body { padding: 16px; }
.news-card time { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ─── CTA WHATSAPP / BANDA ───────────────────────────────────────── */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 30px 34px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--c-orange) 55%, transparent), transparent 55%),
    linear-gradient(135deg, var(--c-navy), var(--c-blue));
  border-radius: var(--r);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--c-navy) 35%, transparent);
}
.cta-band h2 { color: #fff; margin: 0 0 4px; }
.cta-band p { color: #dbe5f6; margin: 0; }

/* ─── CONTACTO ───────────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; margin-bottom: 40px; }
.contact-form { padding: 28px; display: grid; gap: 14px; }
.contact-info { padding: 28px; display: grid; gap: 16px; }
.contact-info .item { display: flex; gap: 12px; align-items: flex-start; }
.contact-info .item svg { color: var(--c-orange); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 820px) { .contact-layout { grid-template-columns: 1fr; } }

/* ─── RIEL DE CLIENTES ───────────────────────────────────────────── */
.clients-rail {
  padding: 40px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 0;
}
.clients-rail .container { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.clients-rail__label {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.clients-rail__track {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 40px;
}
.clients-rail__logo {
  height: 40px; max-width: 120px; width: auto; object-fit: contain;
  filter: grayscale(100%) opacity(.55);
  transition: filter 250ms var(--ease);
}
.clients-rail__logo:hover { filter: none; }
.clients-rail__name {
  font-size: 14px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em;
}

/* ─── BOTÓN FLOTANTE WHATSAPP ────────────────────────────────────── */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366; color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(37, 211, 102, .55); }
.wa-fab svg { flex-shrink: 0; }

/* ─── PIE DE PÁGINA ──────────────────────────────────────────────── */
.site-footer {
  margin-top: 56px;
  color: #c6d1e4;
  background: linear-gradient(180deg, #0A2C62, #061a3d);
  font-size: 14.5px;
}
.site-footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 52px 0 36px; }
.site-footer h4, .site-footer .foot-title { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: .02em; }
.site-footer a { color: #c6d1e4; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer .foot-logo { height: 46px; width: auto; margin-bottom: 14px; }
.site-footer .bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 0 22px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: #8d9bb5;
}
.site-footer .dots { display: inline-flex; gap: 5px; vertical-align: middle; margin: 0 6px; }
.site-footer .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange); display: inline-block; }
.site-footer .dots i:nth-child(2) { background: var(--c-blue); }
.site-footer .dots i:nth-child(3) { background: var(--c-amber); }
@media (max-width: 860px) { .site-footer .top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer .top { grid-template-columns: 1fr; } }

/* ─── UTILIDADES ─────────────────────────────────────────────────── */
.empty { padding: 40px; text-align: center; color: var(--c-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   2026-10-06 · Ajustes solicitados
   1) Páginas con imagen (Nosotros): hero wide screen detrás del menú + vidrio pavonado
   2) Catálogo estilo marketplace: carril de categorías con imagen + tarjetas limpias
   3) Ficha: miniaturas verticales a la izquierda de la foto principal
   4) Bloque Multimedia 360° (producto y categoría)
   ===================================================================== */

/* 1 ─ HERO DE PÁGINA ─────────────────────────────────────────────── */
.page-hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));       /* la imagen sube y queda detrás del menú fijo */
  padding: calc(var(--header-h) + 28px) 0 64px;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-navy);
}
.page-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  animation: heroZoom 18s var(--ease) both;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .page-hero-bg { animation: none; } }
.page-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 12, 28, .55) 0%, rgba(5, 12, 28, 0) 28%),
    linear-gradient(0deg, rgba(5, 12, 28, .55) 0%, rgba(5, 12, 28, 0) 55%);
}
.page-hero-inner { width: 100%; }
.page-hero .breadcrumbs { margin-top: 0; }
.page-hero .breadcrumbs, .page-hero .breadcrumbs a { color: rgba(255, 255, 255, .85); }
.frosted {
  max-width: 820px;
  padding: clamp(22px, 4vw, 44px);
  color: #fff;
  border-radius: var(--r);
  background: rgba(10, 30, 66, .30);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, .75),
    0 20px 50px rgba(0, 8, 20, .35);
}
.frosted h1 { color: #fff; }
.frosted .eyebrow { color: var(--c-amber); }
.frosted .prose { color: rgba(255, 255, 255, .94); font-size: 17px; }
.frosted .prose a { color: #fff; }
.frosted .prose > :last-child { margin-bottom: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .frosted { background: rgba(10, 30, 66, .78); }
}
@media (max-width: 640px) {
  .page-hero { min-height: 0; padding-bottom: 28px; }
  .frosted { padding: 22px; }
}

/* 2 ─ CARRIL DE CATEGORÍAS CON IMAGEN ────────────────────────────── */
.cat-rail {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 2px 12px; margin-bottom: 18px;
  scrollbar-width: thin;
}
.cat-tile {
  flex: 0 0 104px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none !important; color: var(--c-content);
  font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2;
}
.cat-tile-img {
  width: 88px; height: 88px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(10, 26, 51, .08), 0 4px 14px rgba(10, 26, 51, .07);
  overflow: hidden;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* recorte visual del banner 2024×650 */
.cat-tile-img b { font-size: 30px; color: var(--c-blue); }
.cat-tile-all { color: var(--c-navy); }
.cat-tile:hover .cat-tile-img { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(10, 26, 51, .14); }
.cat-tile.is-active .cat-tile-img { box-shadow: 0 0 0 2px var(--c-orange), 0 6px 18px rgba(242, 106, 0, .22); }
.cat-tile.is-active .cat-tile-label { color: var(--c-price); }

/* 2 ─ TARJETA ESTILO MARKETPLACE ─────────────────────────────────── */
.grid-shop { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
@media (min-width: 1180px) { .catalog-layout.no-facets .grid-shop { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 520px) { .grid-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }  /* 2026-10-14: minmax evita que las tarjetas se corten */
.product-card-wrap, .product-card.pc-shop { min-width: 0; }
.product-card.pc-shop {
  background: #fff;
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(10, 26, 51, .10), 0 2px 10px rgba(10, 26, 51, .06);
  height: 100%;
}
.product-card.pc-shop:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 26, 51, .16); }
.pc-shop .media { aspect-ratio: 1 / 1; padding: 14px; background: #fff; border-bottom: 1px solid #eef1f6; }
.pc-shop .media img { object-fit: contain; }
.pc-shop .body { padding: 12px 14px 14px; gap: 5px; color: #1b2436; }
.pc-tags { display: flex; gap: 5px; flex-wrap: wrap; min-height: 0; }
.pc-tags:empty { display: none; }
.pc-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; line-height: 1; }
.pc-tag-best { background: #F26A00; color: #fff; }
.pc-tag-new  { background: #1B5FC1; color: #fff; }
.pc-tag-feat { background: #F5A300; color: #2a1a00; }
.pc-shop .name {
  font-weight: 500; font-size: 14px; line-height: 1.3; color: #1b2436;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.pc-shop .prices { margin-top: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.pc-shop .price-prev { font-size: 12.5px; color: #8a93a6; }
.price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-shop .price { font-size: 1.45rem; font-weight: 500; color: #1b2436; letter-spacing: -.01em; }
.pc-shop .price-ask { font-size: 1.05rem; font-weight: 600; color: var(--c-link); }
.pc-off { background: #00A650; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.pc-desc { font-size: 12.5px; color: #007A3D; /* 2026-10-14: antes #00A650 (contraste 3.2) */ line-height: 1.35; }
.pc-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 44px; }
.pc-chip { background: #E3EDFB; color: #1B5FC1; font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 3px; }
.pc-cta { font-size: 12.5px; font-weight: 600; color: var(--c-link); white-space: nowrap; }
.product-card-wrap .card-wa-btn { width: 36px; height: 36px; bottom: 12px; right: 12px; }
:root[data-theme="dark"] .product-card.pc-shop { background: #0f1b31; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.3); }
:root[data-theme="dark"] .pc-shop .body,
:root[data-theme="dark"] .pc-shop .name,
:root[data-theme="dark"] .pc-shop .price { color: #e6edf7; }
:root[data-theme="dark"] .pc-shop .media { border-bottom-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .pc-chip { background: rgba(27, 95, 193, .25); color: #9cc2ff; }

/* 3 ─ FICHA: MINIATURAS VERTICALES ───────────────────────────────── */
.pdp-gallery { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.pdp-gallery.has-thumbs { grid-template-columns: 64px 1fr; }
.pdp-gallery .gallery-main { box-shadow: 0 1px 2px rgba(10, 26, 51, .08), 0 4px 16px rgba(10, 26, 51, .06); padding: 18px; }
.pdp-gallery .gallery-thumbs { grid-template-columns: 1fr; margin-top: 0; max-height: 560px; overflow-y: auto; gap: 8px; padding: 2px; }
.pdp-gallery .gallery-thumbs button { opacity: 1; box-shadow: inset 0 0 0 1px #d9dee8; }
.pdp-gallery .gallery-thumbs button img { object-fit: contain; padding: 4px; }
.pdp-gallery .gallery-thumbs button:hover,
.pdp-gallery .gallery-thumbs button[aria-current="true"] { box-shadow: 0 0 0 2px var(--c-blue); }
@media (max-width: 640px) {
  .pdp-gallery.has-thumbs { grid-template-columns: 1fr; }
  .pdp-gallery .gallery-thumbs { order: 2; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); max-height: none; }
}

/* 4 ─ MULTIMEDIA 360° ────────────────────────────────────────────── */
.m360 {
  margin-bottom: 36px; padding: clamp(20px, 3vw, 34px);
  border-radius: var(--r); color: #e8eefb;
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(27, 95, 193, .55), transparent 60%),
    radial-gradient(500px 260px at 0% 100%, rgba(242, 106, 0, .22), transparent 60%),
    var(--c-navy);
  box-shadow: 0 24px 50px -24px rgba(10, 26, 51, .55);
}
.m360-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.m360-head h2 { margin: 0; color: #fff; }
.m360-tip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #b9c6e0; }
.m360-badge { background: linear-gradient(135deg, var(--c-orange), var(--c-amber)); color: #fff; font-weight: 800; font-size: 13px; padding: 5px 8px; border-radius: var(--r-sm); }
.m360-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.m360.is-single .m360-grid { grid-template-columns: 1fr; }
.m360-item { margin: 0; }
.m360-item .video-wrap { margin-bottom: 0; }
.m360-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #071d44; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: grab; touch-action: pan-y; }
.m360.is-single .m360-frame { aspect-ratio: 21 / 9; min-height: 340px; }
.m360-frame:active { cursor: grabbing; }
.m360-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.m360-frame.is-pano > img { visibility: hidden; }
.m360-frame .m360-viewer { position: absolute !important; inset: 0; width: 100%; height: 100%; } /* pannellum.css la pone en relative */
.m360-viewer .pnlm-container { background: #071d44; }
.m360-hint { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px; background: rgba(10, 44, 98, .62); backdrop-filter: blur(6px); color: #fff; font-weight: 700; pointer-events: none; animation: m360Hint 2.4s ease-in-out infinite; transition: opacity 300ms; }
.m360-frame.is-touched .m360-hint { opacity: 0; animation: none; }
@keyframes m360Hint { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .m360-hint { animation: none; } }
.m360-item figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.m360-item figcaption strong { color: #fff; }
.m360-item figcaption span { color: #b9c6e0; font-size: 13.5px; }

/* En páginas con hero, el menú se vuelve vidrio translúcido para que la imagen se vea detrás. */
body:has(.page-hero) .mainbar-glass {
  background:
    radial-gradient(ellipse 260px 120% at 50% 100%, rgba(27, 95, 193, .30), transparent 70%),
    color-mix(in srgb, var(--c-navy) 48%, transparent);
}
body:has(.page-hero) .topbar { background: rgba(5, 7, 12, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* =====================================================================
   2026-10-07 · Plantillas de página (Nosotros · Servicios · Contacto)
   Inspiradas en la plantilla corporativa "Bexon", con la marca Piero.
   ===================================================================== */
.reveal { transition-delay: var(--d, 0ms); }

/* Cabecera de título (imagen detrás del menú + vidrio) */
.page-hero--title { min-height: min(62vh, 560px); padding-bottom: 56px; }
.page-hero.no-img { background:
    radial-gradient(900px 420px at 85% 20%, rgba(27, 95, 193, .55), transparent 60%),
    radial-gradient(700px 380px at 10% 110%, rgba(242, 106, 0, .35), transparent 60%),
    var(--c-navy); }
/* (2026-10-14) La caja pavonada .frosted--title se eliminó del HTML: ver .page-title al final del archivo. */
.page-hero--title { overflow: hidden; }

/* Secciones */
.pb-section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.pb-section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.pb-section--alt { background: color-mix(in srgb, var(--c-glass) 16%, transparent); }
.pb-section--navy { background: var(--c-navy); color: #e8eefb; }
.pb-section--navy .pb-title, .pb-section--navy h3 { color: #fff; }
.pb-section--navy .pb-sub { color: var(--c-amber); }
.pb-head { margin-bottom: 30px; max-width: 720px; }
.pb-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.pb-sub {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-price); margin-bottom: 12px;
}
.pb-sub::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c-orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-orange) 22%, transparent); }
.pb-title { font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -.02em; margin: 0; }
.pb-lead { font-size: 17px; line-height: 1.75; color: var(--c-muted); }
.pb-section--navy .pb-lead { color: #b9c6e0; }

/* Texto que aparece palabra por palabra */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .w > i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform 700ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--wi) * 45ms); }
[data-split].is-in .w > i { transform: none; }
@media (prefers-reduced-motion: reduce) { [data-split] .w > i { transform: none; transition: none; } }

/* Bloque texto + imagen */
.pb-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.pb-split:has(> :only-child) { grid-template-columns: 1fr; }
.pb-split:has(> :only-child) .pb-mv { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pb-media { position: relative; }
.pb-media-main { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r); display: block; box-shadow: 0 30px 60px -20px rgba(10, 26, 51, .35); }
.pb-media-ph { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c-navy), var(--c-blue)); }
.pb-media-second { position: absolute; right: -18px; bottom: -28px; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 6px solid var(--c-bg); box-shadow: 0 20px 40px rgba(10, 26, 51, .25); }
.pb-media-badge { position: absolute; left: -18px; bottom: 28px; padding: 16px 20px; border-radius: var(--r); background: var(--c-orange) !important; color: #fff; display: flex; flex-direction: column; box-shadow: 0 16px 34px rgba(242, 106, 0, .35); animation: pbFloat 5s ease-in-out infinite; }
.pb-media-badge strong { font-size: 2.2rem; line-height: 1; }
.pb-media-badge > span { font-size: 13px; font-weight: 600; opacity: .92; max-width: 150px; }
@keyframes pbFloat { 50% { transform: translateY(-8px); } }
.pb-copy .btn { margin-top: 22px; }
.pb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.pb-stat strong { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--c-content); }
.pb-stat strong em { font-style: normal; color: var(--c-orange); }
.pb-stat > span { font-size: 14px; color: var(--c-muted); }

/* Fortalezas */
.pb-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pb-feature { position: relative; padding: 32px 28px; border-radius: var(--r); background: var(--c-surface); box-shadow: 0 1px 2px rgba(10, 26, 51, .06), 0 10px 30px rgba(10, 26, 51, .06); overflow: hidden; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.pb-feature::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--c-orange), var(--c-amber)); transition: width 400ms var(--ease); }
.pb-feature:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -12px rgba(10, 26, 51, .22); }
.pb-feature:hover::after { width: 100%; }
.pb-feature-n { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r); background: color-mix(in srgb, var(--c-orange) 12%, transparent); color: var(--c-orange); font-weight: 800; font-size: 1.15rem; margin-bottom: 18px; transition: background 300ms, color 300ms; }
.pb-feature:hover .pb-feature-n { background: var(--c-orange); color: #fff; }
.pb-feature h3 { font-size: 1.2rem; margin-bottom: 8px; }
.pb-feature p { color: var(--c-muted); margin: 0; }

/* Barras */
.pb-bars { display: flex; flex-direction: column; gap: 20px; margin-top: 26px; }
.pb-bar-top { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.pb-bar-top strong { color: var(--c-orange); }
.pb-bar-track { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--c-glass) 40%, transparent); overflow: hidden; }
.pb-bar-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--c-blue), var(--c-orange)); transition: width 1400ms cubic-bezier(.2, .7, .2, 1); }

/* Misión y visión */
.pb-mv { display: grid; gap: 16px; margin-top: 8px; }
.pb-mv-card { padding: 22px 24px; border-radius: var(--r); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pb-mv-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.pb-mv-card p { color: #c3cfe6; margin-bottom: 10px; }
.pb-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pb-checks li { display: flex; gap: 10px; align-items: flex-start; }
.pb-checks svg { flex-shrink: 0; margin-top: 3px; color: #fff; background: var(--c-orange); border-radius: 50%; padding: 3px; width: 20px; height: 20px; }

/* Clientes (marquesina infinita) */
.pb-clients { padding: 44px 0; border-block: 1px solid var(--c-line); overflow: hidden; }
.pb-clients-label { text-align: center; font-weight: 600; color: var(--c-muted); margin-bottom: 22px; }
.pb-marquee { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pb-marquee-track { display: flex; align-items: center; gap: 64px; padding-right: 64px; animation: pbMarquee 32s linear infinite; }
.pb-marquee:hover .pb-marquee-track { animation-play-state: paused; }
.pb-marquee img { height: 46px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter 200ms, opacity 200ms; }
.pb-marquee img:hover { filter: none; opacity: 1; }
.pb-marquee span { font-weight: 700; font-size: 1.15rem; color: var(--c-muted); white-space: nowrap; }
@keyframes pbMarquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .pb-marquee-track { animation: none; } }

/* Testimonios */
.pb-testi-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.pb-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.pb-rating strong { font-size: 2.6rem; line-height: 1; }
.pb-rating small { color: var(--c-muted); }
.pb-stars { display: inline-flex; gap: 2px; color: var(--c-amber); }
.pb-slider { position: relative; }
.pb-slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 40px) / 3)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 18px; scrollbar-width: none; }
.pb-slider-track::-webkit-scrollbar { display: none; }
.pb-testi { scroll-snap-align: start; margin: 0; padding: 30px 28px; border-radius: var(--r); background: var(--c-surface); box-shadow: 0 10px 30px rgba(10, 26, 51, .07); display: flex; flex-direction: column; gap: 14px; position: relative; }
.pb-testi-q { position: absolute; right: 22px; top: 22px; color: color-mix(in srgb, var(--c-orange) 35%, transparent); }
.pb-testi blockquote { margin: 0; font-size: 16px; line-height: 1.7; flex: 1; }
.pb-testi figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.pb-testi figcaption img, .pb-testi figcaption b { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--c-navy); color: #fff; }
.pb-testi figcaption span { display: flex; flex-direction: column; }
.pb-testi figcaption small { color: var(--c-muted); }
.pb-slider-nav { display: flex; gap: 8px; justify-content: flex-end; }
.pb-slider-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-content); font-size: 18px; cursor: pointer; transition: background 200ms, color 200ms; }
.pb-slider-nav button:hover { background: var(--c-orange); color: #fff; border-color: transparent; }

/* Equipo */
.pb-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.pb-member { text-align: center; }
.pb-member-img { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; margin-bottom: 14px; background: linear-gradient(135deg, var(--c-navy), var(--c-blue)); display: grid; place-items: center; position: relative; }
.pb-member-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.pb-member-img b { font-size: 3rem; color: #fff; }
.pb-member-img::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--c-orange); transform: scaleX(0); transition: transform 400ms var(--ease); }
.pb-member:hover .pb-member-img img { transform: scale(1.06); }
.pb-member:hover .pb-member-img::after { transform: scaleX(1); }
.pb-member h3 { font-size: 1.1rem; margin-bottom: 2px; }
.pb-member span { color: var(--c-muted); font-size: 14px; }

/* FAQ */
.pb-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.pb-faq-side { position: sticky; top: calc(var(--mainbar-h-compact) + 30px); }
.pb-faq-list { display: flex; flex-direction: column; gap: 12px; }
.pb-faq-item { border-radius: var(--r); background: var(--c-surface); box-shadow: 0 1px 2px rgba(10, 26, 51, .06), 0 6px 20px rgba(10, 26, 51, .05); overflow: hidden; }
.pb-faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 1.05rem; }
.pb-faq-item summary::-webkit-details-marker { display: none; }
.pb-faq-item summary i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--c-orange) 14%, transparent); position: relative; transition: background 200ms, transform 300ms; }
.pb-faq-item summary i::before, .pb-faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--c-orange); translate: -50% -50%; transition: transform 300ms; }
.pb-faq-item summary i::after { transform: rotate(90deg); }
.pb-faq-item[open] summary i { background: var(--c-orange); }
.pb-faq-item[open] summary i::before, .pb-faq-item[open] summary i::after { background: #fff; }
.pb-faq-item[open] summary i::after { transform: rotate(0deg); }
.pb-faq-item[open] summary { color: var(--c-price); }
.pb-faq-answer { padding: 0 22px 20px; color: var(--c-muted); line-height: 1.7; }

/* Banner final */
.pb-cta {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r);
  padding: clamp(44px, 7vw, 90px) clamp(24px, 6vw, 80px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  color: #fff;
  background: var(--cta-img, none) center / cover fixed, var(--c-navy);
}
/* 2026-10-14: sin capa de color encima de la imagen; el texto se lee por su sombra. */
.pb-cta::before { content: none; }
.pb-cta h2 { margin: 0; color: #fff; max-width: 680px; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; text-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .45); }
@media (hover: none) { .pb-cta { background-attachment: scroll; } }

/* Servicios */
.pb-svc-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 34px; }
.pb-svc-head .pb-head { margin-bottom: 0; }
.pb-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.pb-service { border-radius: var(--r); background: var(--c-surface); box-shadow: 0 1px 2px rgba(10, 26, 51, .06), 0 10px 30px rgba(10, 26, 51, .06); overflow: hidden; display: flex; flex-direction: column; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.pb-service:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -14px rgba(10, 26, 51, .25); }
.pb-service-img { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--c-navy), var(--c-blue)); overflow: hidden; }
.pb-service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.pb-service:hover .pb-service-img img { transform: scale(1.07); }
.pb-service-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 44, 98, .55), transparent 55%); }
.pb-service-n { position: absolute; z-index: 1; left: 20px; bottom: 14px; font-size: 2.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #fff; }
.pb-service-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pb-service-body h3 { font-size: 1.2rem; margin: 0; }
.pb-service-body h3 a { color: inherit; }
.pb-service-body p { color: var(--c-muted); margin: 0; flex: 1; }
.pb-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-top: 8px; color: var(--c-price); }
.pb-more svg { transition: transform 200ms; }
.pb-service:hover .pb-more svg { transform: translateX(4px); }

/* Pasos del proceso */
.pb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; counter-reset: none; position: relative; }
.pb-step { position: relative; padding: 28px 24px; border-radius: var(--r); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background 300ms; }
.pb-step:hover { background: rgba(255, 255, 255, .1); }
.pb-step-n { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-orange); color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 16px; box-shadow: 0 0 0 8px rgba(242, 106, 0, .18); }
.pb-step h3 { font-size: 1.15rem; margin-bottom: 6px; }
.pb-step p { color: #b9c6e0; margin: 0; }

/* Sedes */
.pb-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.pb-loc { padding: 24px; border-radius: var(--r); background: var(--c-surface); box-shadow: 0 10px 30px rgba(10, 26, 51, .07); display: flex; flex-direction: column; gap: 14px; border-top: 3px solid transparent; transition: transform 300ms var(--ease), border-color 300ms; }
.pb-loc:hover { transform: translateY(-4px); border-top-color: var(--c-orange); }
.pb-loc.is-current { border-top-color: var(--c-orange); }
.pb-loc-top { display: flex; gap: 12px; align-items: center; }
.pb-loc-top h3 { margin: 0; font-size: 1.15rem; }
.pb-loc-top small { color: var(--c-muted); }
.pb-loc-flag { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: var(--c-navy); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .05em; }
.pb-loc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.pb-loc li { display: flex; gap: 10px; align-items: flex-start; }
.pb-loc li svg { flex-shrink: 0; color: var(--c-orange); margin-top: 2px; }
.pb-loc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* Contacto */
.pb-cinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pb-cinfo-card { padding: 28px 24px; border-radius: var(--r); background: var(--c-surface); box-shadow: 0 10px 30px rgba(10, 26, 51, .07); transition: transform 300ms var(--ease), box-shadow 300ms; }
.pb-cinfo-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -12px rgba(10, 26, 51, .22); }
.pb-cinfo-card h3 { font-size: 1.15rem; margin: 14px 0 6px; }
.pb-cinfo-card p { margin: 0 0 4px; overflow-wrap: anywhere; }
.pb-cinfo-card small { color: var(--c-muted); }
.pb-cinfo-card .btn { margin-top: 10px; }
.pb-cinfo-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-orange) 13%, transparent); color: var(--c-orange); transition: background 300ms, color 300ms, transform 500ms; }
.pb-cinfo-card:hover .pb-cinfo-ico { background: var(--c-orange); color: #fff; transform: rotateY(180deg); }
.pb-cinfo-card.is-accent { background: var(--c-navy); color: #e8eefb; }
.pb-cinfo-card.is-accent h3 { color: #fff; }
.pb-cinfo-card.is-accent .pb-cinfo-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.pb-contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.pb-form { padding: clamp(22px, 3vw, 34px); border-radius: var(--r); background: var(--c-surface); box-shadow: 0 10px 30px rgba(10, 26, 51, .08); position: relative; }
.pb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.pb-form-grid .is-full { grid-column: 1 / -1; }
.pb-contact-side { position: sticky; top: calc(var(--mainbar-h-compact) + 24px); display: grid; gap: 16px; }
.pb-map { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 4.2; box-shadow: 0 20px 44px -16px rgba(10, 26, 51, .3); }
.pb-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(1.1); }
.pb-contact-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }

@media (max-width: 900px) {
  .pb-split, .pb-faq, .pb-contact, .pb-svc-head { grid-template-columns: 1fr; }
  .pb-split.is-reverse > .pb-media { order: -1; }
  .pb-faq-side, .pb-contact-side { position: static; }
  .pb-media-second { right: 8px; }
  .pb-media-badge { left: 8px; }
  .pb-slider-track { grid-auto-columns: 85%; }
}
@media (max-width: 560px) {
  .pb-form-grid { grid-template-columns: 1fr; }
}

/* Subtítulos h3 en peso ligero (solicitado 07-10-2026). */
h3 { font-weight: 300; }

/* Multimedia 360°: franja de ancho completo (borde a borde) y visor de 220px de alto (07-10-2026). */
html, body { overflow-x: clip; }
.m360 {
  width: 100vw; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  border-radius: 0;
  --m360-pad: max(20px, calc((100vw - var(--container)) / 2 + 20px));
  padding: 22px 0;
}
.m360-head, .m360-item figcaption { padding-inline: var(--m360-pad); }
.m360-item .video-wrap { margin-inline: var(--m360-pad); }
.m360-grid, .m360.is-single .m360-grid { grid-template-columns: 1fr; gap: 14px; }
.m360-frame, .m360.is-single .m360-frame { aspect-ratio: auto; width: 100%; height: 220px; min-height: 0; max-height: 220px; border-radius: 0; box-shadow: none; }
.m360-head { margin-bottom: 12px; }
.m360-head h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.m360-hint { padding: 7px 13px; font-size: 14px; }
.m360-item .video-wrap { max-width: 720px; }
.m360-frame .pnlm-controls-container { top: 6px; left: var(--m360-pad); }

/* ── 07-10-2026 (2) · 360° como parte de la cabecera, controles más compactos y filtros opcionales ── */
/* 360° pegado bajo el menú, como continuación de la cabecera */
main > .m360:first-child, main > script:first-child + .m360 { margin-top: 0; }
.m360 { margin-bottom: 0; padding: 10px 0 12px; box-shadow: none; }
.m360-head { margin-bottom: 8px; gap: 10px; }
.m360-head h2 { font-size: 1.05rem; font-weight: 600; }
.m360-badge { font-size: 11px; padding: 3px 6px; }
.m360-tip { font-size: 12.5px; }
.m360-item figcaption { margin-top: 6px; flex-direction: row; gap: 10px; align-items: baseline; font-size: 13px; }
.m360 + .container .breadcrumbs { margin-top: 18px; }

/* Botones, campos y objetos más compactos */
.btn { padding: 8px 16px; font-size: 14px; gap: 6px; }
.btn-lg { padding: 10px 20px; font-size: 15px; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-icon { width: 34px; height: 34px; }
.input, textarea.input, select.input { padding: 8px 12px; font-size: 14px; }
.input-icon > .input { padding-left: 36px; }
.input-icon > svg { left: 11px; }
.field { gap: 4px; }
.field label { font-size: 12.5px; }
.chip { padding: 5px 11px; font-size: 13px; }
.badge { padding: 2px 7px; font-size: 10.5px; }
.cat-tile { flex-basis: 86px; font-size: 12px; }
.cat-tile-img { width: 70px; height: 70px; }
.cat-rail { gap: 10px; }
.product-card-wrap .card-wa-btn { width: 32px; height: 32px; }
.product-card-wrap .card-wa-btn svg { width: 17px; height: 17px; }
.pb-slider-nav button { width: 38px; height: 38px; }
.pb-form-grid { gap: 12px; }
.catalog-toolbar { margin-bottom: 14px; }

/* Filtros opcionales: ocultos por defecto, se muestran con el botón */
.filters-toggle { position: relative; }
.filters-toggle.has-active { box-shadow: inset 0 0 0 1.5px var(--c-orange); color: var(--c-price); }
.filters-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--c-orange); color: #fff; font-size: 11px; font-weight: 800; }
.filters-collapsed .quick-filters,
.filters-collapsed .facets { display: none !important; }
.filters-collapsed .catalog-layout { grid-template-columns: 1fr; }
.quick-filters, .facets { animation: filtersIn 260ms var(--ease); }
@keyframes filtersIn { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 1180px) { .filters-collapsed .catalog-layout .grid-shop { grid-template-columns: repeat(5, 1fr); } }

/* ── 08-10-2026 · Cabecera según boceto: barra azul plana con filo naranja recto
      y logo más grande que sobresale por debajo de la barra ── */
.mainbar { --logo-drop: 34px; }                         /* cuánto baja el logo bajo la barra */
.mainbar-shape { bottom: 0; }
.mainbar-glass, .mainbar-shadow i { clip-path: none; }
.mainbar-glass {
  background:
    radial-gradient(ellipse 320px 140% at 50% 100%, rgba(27, 95, 193, .40), transparent 70%),
    linear-gradient(90deg, #0a2a5c 0%, #0d3270 50%, #0a2a5c 100%);
}
.mainbar-plate { display: none; }
.mainbar-shadow { transform: translateY(6px); opacity: .55; }
.mainbar-edge {                                          /* filo naranja recto, de borde a borde */
  top: auto; bottom: -2px; height: 2px;
  clip-path: none;
  background: linear-gradient(90deg, var(--c-orange), var(--c-amber) 50%, var(--c-orange));
  box-shadow: 0 0 10px rgba(242, 106, 0, .45);
}
.brand-logo-link {
  height: calc(var(--bar) + var(--logo-drop));
  margin-bottom: calc(-1 * var(--logo-drop));
  padding: 6px 0 0;
}
.brand-logo {
  height: 100%;
  filter: drop-shadow(0 6px 10px rgba(2, 8, 22, .45));
}
.is-scrolled .mainbar { --logo-drop: 22px; }
@media (max-width: 1024px) {
  .mainbar { --logo-drop: 24px; }
  .is-scrolled .mainbar { --logo-drop: 16px; }
}
/* La franja 360° va pegada al filo naranja, sin título encima (como en el boceto). */
.m360 { padding: 0; }
.m360 .m360-head, .m360 .m360-item figcaption { display: none; }
.m360-grid, .m360.is-single .m360-grid { gap: 0; }
.m360-item + .m360-item .m360-frame { border-top: 2px solid var(--c-navy); }

/* BANNER DE CATEGORÍA (2024 × 650 px, cargado desde el CMS) ─────────── */
.cat-banner { margin: 0 0 18px; width: 100%; aspect-ratio: 2024 / 650; border-radius: var(--r); overflow: hidden; background: #eef1f6; }
.cat-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   2026-10-14 · Correcciones visuales obligatorias + Tienda (carrito,
   checkout sin pago, cuenta del comprador)
   ===================================================================== */

/* ── B · Encabezados H3 ligeros (Outfit incluye el peso 300) ── */
h3 { font-weight: 300; letter-spacing: 0; }

/* ── A · Título de Nosotros / Contacto: SIN caja pavonada ──
   Texto blanco con sombra negra sutil directamente sobre la imagen.
   --title-drop = cuánto baja el texto respecto de su lugar natural. */
.page-title {
  --title-drop: 2.5rem;
  max-width: 900px;
  transform: translateY(var(--title-drop));
  color: #fff;
}
.page-title, .page-title h1, .page-title .breadcrumbs, .page-title .breadcrumbs a {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
}
.page-title h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em; }
.page-title .breadcrumbs { margin: 0 0 10px; }
.page-hero--title { padding-bottom: calc(56px + 2.5rem); }      /* reserva el espacio que baja el texto */
@media (max-width: 640px) {
  .page-hero--title { padding-bottom: calc(28px + 2.5rem); }
}

/* ── Botón naranja "plástico nuevo" ──
   Superficie pulida: brillo superior suave, cuerpo naranja de marca,
   base más profunda (asegura contraste del texto blanco) y respuesta
   al pasar el mouse / presionar. */
.btn-plastic {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(90, 30, 0, .45);
  background: linear-gradient(180deg, #F68A33 0%, #EE6A06 30%, #C85200 52%, #B04700 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(90, 30, 0, .35),
    inset 0 0 0 1px rgba(120, 45, 0, .35),
    0 6px 16px -4px rgba(242, 106, 0, .55),
    0 2px 4px rgba(10, 26, 51, .18);
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
}
.btn-plastic::before {                     /* reflejo del plástico */
  content: ""; position: absolute; z-index: -1;
  left: 8%; right: 8%; top: 2px; height: 46%;
  border-radius: 3px 3px 40% 40% / 3px 3px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06));
  pointer-events: none;
}
.btn-plastic::after {                      /* destello que recorre al pasar el mouse */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  transition: left 600ms var(--ease);
  pointer-events: none;
}
.btn-plastic:hover { color: #fff; filter: saturate(1.08) brightness(1.04); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(90, 30, 0, .35), inset 0 0 0 1px rgba(120, 45, 0, .35), 0 10px 24px -6px rgba(242, 106, 0, .65), 0 3px 6px rgba(10, 26, 51, .2); }
.btn-plastic:hover::after { left: 120%; }
.btn-plastic:active { transform: translateY(1px); filter: brightness(.97);
  box-shadow: inset 0 2px 4px rgba(90, 30, 0, .45), inset 0 0 0 1px rgba(120, 45, 0, .4), 0 2px 6px -2px rgba(242, 106, 0, .5); }
.btn-plastic:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 3px; }
.btn-plastic[disabled], .btn-plastic[aria-busy="true"] { filter: grayscale(.25) brightness(.95); cursor: progress; transform: none; }
.btn-plastic.btn-lg { padding: 12px 24px; }
@media (prefers-reduced-motion: reduce) {
  .btn-plastic, .btn-plastic::after { transition: none; }
  .btn-plastic:hover { transform: none; }
}

/* ── C · Banners: texto a la DERECHA, centrado vertical, sin caja ── */
.hero-slide { overflow: hidden; }
.hero-media { position: relative; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-copy {
  position: absolute; z-index: 2;
  top: 50%; transform: translateY(-50%);
  right: max(72px, calc((100% - var(--container)) / 2 + 20px));   /* deja libre la flecha "siguiente" */
  width: min(460px, 42%);
  text-align: right;
  line-height: 1.4;
  color: #fff;
}
/* Sin caja ni velo: solo texto blanco con sombra negra sutil (pedido del cliente, 14-10). */
.hero-copy h2 {
  color: #fff;
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-shadow: 0 0px 7px rgba(0, 0, 0, 18.5), 0 0px 9px rgba(0, 0, 0, 4.45);
}
.hero-copy p {
  color: #fff; margin: 0 0 16px; font-size: clamp(.95rem, 1.4vw, 1.15rem);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45);
}
.hero-copy .btn-plastic { font-size: 18.7px; padding: 12px 26px; }   /* texto grande: contraste AA */
@media (max-width: 900px) {
  .hero-copy { width: min(400px, 50%); }
  .hero-copy p { display: none; }                  /* en tabletas solo título + botón */
}
@media (max-width: 640px) {
  /* En móvil el banner es bajo y suele traer texto dentro de la imagen: el texto HTML va
     DEBAJO de la imagen, sin caja ni fondo (texto oscuro normal, no hay imagen detrás). */
  .hero { background: transparent; }
  .hero-copy { position: static; transform: none; width: auto; text-align: left; padding: 14px 20px 34px; }
  .hero-copy h2, .hero-copy p { color: var(--c-content); text-shadow: none; }
  .hero-copy p { display: block; color: var(--c-muted); }
  .hero-copy .btn-plastic { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* ── Cabecera: carrito y cuenta ── */
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hdr-icon {
  position: relative; flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r);
  color: #fff; text-decoration: none !important;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background-color 180ms, transform 180ms;
}
.hdr-icon:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hdr-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 10px; font-size: 11.5px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--c-orange);
  box-shadow: 0 0 0 2px var(--c-navy);
}
.hdr-badge[hidden] { display: none; }
.hdr-badge.is-bump { animation: badgeBump 420ms var(--ease); }
@keyframes badgeBump { 30% { transform: scale(1.35); } }
.hdr-dot { position: absolute; bottom: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 2px var(--c-navy); }
@media (max-width: 640px) {
  .header-actions { gap: 6px; }
  .hdr-icon { width: 36px; height: 36px; }
}
@media (max-width: 380px) { .hdr-icon:not(.hdr-cart) { display: none; } }

/* Enlace para saltar al contenido (teclado) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: var(--r); background: #fff; color: var(--c-navy); font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Avisos */
.alert-warning { color: #8a5a00; background: color-mix(in srgb, var(--c-amber) 16%, transparent); }
.alert-warning > div { color: var(--c-content); }
.flash-stack { display: grid; gap: 10px; padding-top: 18px; }
.toast {
  position: fixed; z-index: 250; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  max-width: min(92vw, 460px); padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--r); color: #fff; background: #0d2148;
  box-shadow: 0 12px 32px rgba(0, 8, 20, .35), inset 0 0 0 1px rgba(255, 255, 255, .1);
  opacity: 0; transition: opacity 200ms, transform 260ms var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: #7d1d12; }
.toast a { color: var(--c-amber); font-weight: 700; white-space: nowrap; }

/* ── Tarjeta de producto: botón de carrito (COMPRAR) ── */
.card-cart-form { position: absolute; bottom: 12px; right: 12px; z-index: 5; margin: 0; }
.card-cart-btn {
  width: 36px; height: 36px; padding: 0; border: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: linear-gradient(180deg, #F68A33, #E05F00 55%, #B84A00);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 10px rgba(242, 106, 0, .45);
  transition: transform 150ms var(--ease);
}
.card-cart-btn:hover { transform: scale(1.1); }
.card-cart-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.pc-chip.is-out { color: #a33a1e; }

/* ── Ficha de producto: cantidad + agregar ── */
.buy-form { display: grid; gap: 12px; }
.qty-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qty-field label { font-size: 13px; font-weight: 600; color: var(--c-muted); }
.qty { display: inline-flex; align-items: stretch; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-content) 18%, transparent); background: color-mix(in srgb, var(--c-glass) 14%, transparent); }
.qty-btn { width: 40px; min-height: 40px; border: none; background: transparent; color: var(--c-content); font-size: 20px; line-height: 1; cursor: pointer; }
.qty-btn:hover { background: color-mix(in srgb, var(--c-orange) 14%, transparent); }
.qty-input { width: 52px; border: none; background: transparent; color: var(--c-content); font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: 2px solid var(--c-orange); outline-offset: -2px; }
.buy-note { font-size: 13px; margin: 2px 0 6px; }

/* ── Páginas de la tienda ── */
.shop { padding-top: 22px; padding-bottom: 96px; }  /* deja libre el botón flotante de WhatsApp */
.shop-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 6px 0 8px; }
.shop-lead { color: var(--c-muted); margin: 0 0 18px; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.shop-main { display: grid; gap: 22px; min-width: 0; }
.shop-panel { padding: clamp(16px, 2.6vw, 26px); min-width: 0; }
.shop-panel h2, .shop-aside h2 { font-size: 1.15rem; margin: 0 0 12px; }
.shop-aside { padding: 22px; position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 12px; }
.shop-aside h2 + .data-lines { margin-top: -4px; }
.shop-empty { padding: 48px 24px; text-align: center; display: grid; justify-items: center; gap: 10px; color: var(--c-muted); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel-head a { font-size: 14px; font-weight: 600; }
.link-back { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 14px; }
.aside-hint, .form-hint, .totals-note { font-size: 12.5px; color: var(--c-muted); margin: 0; }
.note-box { margin: 0 0 14px; padding: 10px 12px; font-size: 13.5px; border-radius: var(--r); background: color-mix(in srgb, var(--c-amber) 14%, transparent); border-left: 3px solid var(--c-amber); }
.data-lines { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-aside { position: static; }
}

/* Pasos */
.steps ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; counter-reset: none; }
.step { display: flex; }
.step > a, .step > .step-in { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--c-muted); text-decoration: none !important; }
.step .step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--c-content) 10%, transparent); color: var(--c-content); }
.step.is-done .step-n { background: var(--c-navy); color: #fff; }
.step.is-done > a:hover { color: var(--c-link); }
.step.is-current > .step-in { color: var(--c-content); background: color-mix(in srgb, var(--c-orange) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-orange) 60%, transparent); }
.step.is-current .step-n { background: var(--c-orange); color: #fff; }
.step + .step::before { content: ""; align-self: center; width: 14px; height: 2px; margin-right: 6px; background: color-mix(in srgb, var(--c-content) 18%, transparent); }
@media (max-width: 560px) { .step:not(.is-current) .step-l { display: none; } .step > a, .step > .step-in { padding-right: 6px; } .step.is-current > .step-in { padding-right: 12px; } }

/* Carrito */
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto 40px;
  align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
}
.cart-line:first-child { padding-top: 0; }
.cart-thumb { width: 88px; height: 88px; border-radius: var(--r); overflow: hidden; background: #fff; display: block; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-info { display: grid; gap: 2px; min-width: 0; }
.cart-name { font-weight: 700; color: var(--c-content); line-height: 1.25; }
.cart-code, .cart-unit { font-size: 13px; color: var(--c-muted); }
.cart-qty { margin: 0; display: flex; gap: 8px; align-items: center; }
.cart-line-total { min-width: 110px; text-align: right; font-size: 1.05rem; color: var(--c-content); }
.cart-line.is-busy { opacity: .55; pointer-events: none; }
.cart-remove { margin: 0; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: none; border-radius: var(--r); background: transparent; color: var(--c-muted); cursor: pointer; }
.icon-btn:hover { color: #c0392b; background: color-mix(in srgb, #c0392b 10%, transparent); }
@media (max-width: 640px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info del" "img qty total"; row-gap: 10px; }
  .cart-thumb { grid-area: img; width: 72px; height: 72px; align-self: start; }
  .cart-info { grid-area: info; }
  .cart-remove { grid-area: del; align-self: start; }
  .cart-qty { grid-area: qty; }
  .cart-line-total { grid-area: total; min-width: 0; justify-self: end; white-space: nowrap; }
}

/* Totales */
.totals { margin: 0; display: grid; gap: 6px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; }
.totals dt { color: var(--c-muted); }
.totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.totals .is-total { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--c-line); font-size: 1.2rem; }
.totals .is-total dt { color: var(--c-content); font-weight: 700; }
.totals .is-total dd { color: var(--c-price); font-weight: 800; }
.mini-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.mini-lines li { display: flex; justify-content: space-between; gap: 10px; }
.mini-lines li span { min-width: 0; overflow-wrap: anywhere; }
.mini-lines li strong { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Formulario de checkout */
.form-block { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.form-block legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-size: 1.15rem; font-weight: 700; }
.legend-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-navy); color: #fff; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field label .muted { font-weight: 400; }
.field-error { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #c0392b; display: flex; gap: 6px; }
.field-error::before { content: "⚠"; }
.field-error[hidden] { display: none; }
:root[data-theme="dark"] .field-error { color: #ff8a7a; }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #c0392b, 0 0 0 3px color-mix(in srgb, #c0392b 14%, transparent); }
.input[readonly] { opacity: .75; }
.error-summary { margin-bottom: 18px; }
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary a { color: inherit; text-decoration: underline; }
.choice-list { display: grid; gap: 10px; margin-bottom: 14px; }
.choice {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-content) 14%, transparent);
  transition: box-shadow 160ms, background-color 160ms;
}
.choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--c-orange); flex-shrink: 0; }
.choice span { display: grid; gap: 2px; }
.choice small { color: var(--c-muted); }
.choice:has(input:checked) { background: color-mix(in srgb, var(--c-orange) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--c-orange); }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.delivery-other { display: none; padding: 14px 0 0; }
.checkout-form:has(#dm-other:checked) .delivery-other { display: block; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-actions .link-back { margin: 0; }
@media (max-width: 600px) { .form-actions { flex-direction: column-reverse; align-items: stretch; } .form-actions .btn { width: 100%; } .form-actions .link-back { text-align: center; } }

/* Tabla de pedido (resumen, confirmación, mi cuenta) */
.order-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.order-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 700; padding: 0 8px 10px; border-bottom: 1px solid var(--c-line); }
.order-table td { padding: 12px 8px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.order-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ot-prod { display: flex; gap: 12px; align-items: center; }
.ot-prod img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r); background: #fff; flex-shrink: 0; }
.ot-prod small { display: block; color: var(--c-muted); font-size: 12px; }
@media (max-width: 600px) {
  .order-table thead { display: none; }
  .order-table, .order-table tbody, .order-table tr, .order-table td { display: block; width: 100%; }
  .order-table tr { padding: 10px 0; border-bottom: 1px solid var(--c-line); }
  .order-table td { border: 0; padding: 3px 0; }
  .order-table td.num { display: flex; justify-content: space-between; }
  .order-table td.num::before { content: attr(data-label); color: var(--c-muted); font-weight: 400; }
}
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px) { .review-grid { grid-template-columns: 1fr; } }

/* Confirmación */
.thanks { padding: clamp(22px, 4vw, 44px); }
.thanks-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #2fc46c, #1a8c4a); box-shadow: 0 8px 20px -6px rgba(31, 175, 85, .6); margin-bottom: 14px; }
.order-code { font-size: 1.15rem; margin: 0 0 4px; }
.order-code strong { white-space: nowrap; font-size: 1.4rem; letter-spacing: .04em; color: var(--c-price); }
.next-steps { margin: 18px 0 24px; padding-left: 20px; display: grid; gap: 6px; }
.thanks-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-bottom: 24px; }
.thanks-grid h2 { font-size: 1.1rem; margin: 0 0 10px; }
.thanks-grid .totals { margin-top: 12px; }
.thanks-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .thanks-grid { grid-template-columns: 1fr; } }

/* Cuenta */
.auth { display: grid; place-items: start center; }
.auth-card { width: min(100%, 520px); padding: clamp(22px, 4vw, 36px); }
.auth-card form { display: grid; gap: 14px; margin-top: 8px; }
.auth-card .form-grid { margin-bottom: 0; }
.auth-links { margin: 16px 0 0; font-size: 14px; text-align: center; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 84px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--c-link); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px; cursor: pointer; border-radius: var(--r-sm); }
.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }
.link-btn { border: none; background: none; padding: 0; color: var(--c-link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.status-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--c-content) 10%, transparent); }
.status-pill.is-nuevo { background: color-mix(in srgb, var(--c-amber) 22%, transparent); }
.status-pill.is-confirmado, .status-pill.is-listo { background: color-mix(in srgb, var(--c-blue) 18%, transparent); }
.status-pill.is-entregado { background: color-mix(in srgb, #1f8a4c 18%, transparent); }
.status-pill.is-cancelado { background: color-mix(in srgb, #c0392b 14%, transparent); }

/* ── 2026-10-14 (2) · Banners de página genéricos: texto sobre la imagen, sin caja ── */
.page-hero .page-title .prose, .page-hero .page-title .eyebrow { color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45); }
.page-hero .page-title .prose { max-width: 760px; font-size: 17px; margin-top: 10px; }
.page-hero .page-title .prose a { color: #fff; text-decoration: underline; }

/* ── Protección: si quedara HTML antiguo con "frosted--title" o "hero-caption",
      se ve sin caja (solo texto blanco con sombra sutil). El HTML actual ya no usa esas clases. ── */
.frosted.frosted--title, .hero-caption {
  background: none !important; box-shadow: none !important; padding: 0;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0;
}
.frosted--title, .frosted--title h1, .frosted--title .breadcrumbs, .frosted--title .breadcrumbs a,
.hero-caption h2, .hero-caption p {
  color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
}