/* ════════════════════════════════════════════════════════════════════
   componentes.css — piezas de vidrio/luz pintadas con los archivos de ../componentes/ TAL CUAL
   (WebP en producción; los _screen.png son solo luz y van con mix-blend-mode:screen sobre el video).
   Base: entrega_fable/componentes/componentes.css (slices medidos en manifiesto.json, imágenes @2x).

   Añadido: factor de escala --k (1 = tamaño @2x del catálogo). Permite usar la misma pieza más pequeña
   (barra de 64 px, botón "Empezar" del nav, etiquetas) sin recrearla: alto, padding y anchos de
   border-image se multiplican por --k; el slice (px de imagen) no cambia.
   ════════════════════════════════════════════════════════════════════ */

.card-glass, .btn-primary, .btn-glass, .btn-menu, .chip, .tag-pill, .lang-toggle, .field-wrap, .progress, .nav-bar {
  --k: 1; position: relative; isolation: isolate;
}
:is(.card-glass, .btn-primary, .btn-glass, .btn-menu, .chip, .tag-pill, .lang-toggle, .field-wrap, .progress, .nav-bar)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-style: solid;
}

/* ── Paneles de tarjeta de texto (9-slice libre) ── */
.card-glass { padding: calc(34px * var(--k)) calc(40px * var(--k)); }
.card-glass::before {
  border-width: calc(21px * var(--k)) calc(27.5px * var(--k));
  border-image-source: url(../componentes/panel-texto-ancho.webp); border-image-slice: 42 55 fill;
  border-image-width: calc(21px * var(--k)) calc(27.5px * var(--k));
  opacity: var(--panel-alpha, 1);
}
.card-glass--alta::before {
  border-width: calc(15px * var(--k)) calc(15.5px * var(--k));
  border-image-source: url(../componentes/panel-texto-alto.webp); border-image-slice: 30 31 fill;
  border-image-width: calc(15px * var(--k)) calc(15.5px * var(--k));
}
.card-glass--compacta { padding: calc(22px * var(--k)) calc(34px * var(--k)); }
.card-glass--compacta::before {
  border-width: calc(29.5px * var(--k)) calc(45px * var(--k));
  border-image-source: url(../componentes/panel-texto-compacto.webp); border-image-slice: 59 90 fill;
  border-image-width: calc(29.5px * var(--k)) calc(45px * var(--k));
}

/* ── Botón primario píldora (alto fijo × --k; estira solo a lo ancho) ──
   ::before = normal; ::after = hover (más resplandor) con fundido de opacidad para que no "salte". */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10px * var(--k));
  height: calc(67px * var(--k)); padding: 0 calc(44px * var(--k));
  color: #fff; font: 500 1rem/1 "General Sans", system-ui, sans-serif; text-decoration: none; border: 0; background: none; cursor: pointer;
  white-space: nowrap;
}
.btn-primary::before {
  border-width: calc(33px * var(--k)) calc(33.5px * var(--k));
  border-image-source: url(../componentes/btn-primario-normal.webp); border-image-slice: 66 67 fill;
  border-image-width: calc(33px * var(--k)) calc(33.5px * var(--k));
}
.btn-primary::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-style: solid; opacity: 0; transition: opacity .18s ease;
  inset: calc(-14px * var(--k)) calc(-19px * var(--k));
  border-width: calc(47px * var(--k)) calc(47.5px * var(--k));
  border-image-source: url(../componentes/btn-primario-hover.webp); border-image-slice: 94 95 fill;
  border-image-width: calc(47px * var(--k)) calc(47.5px * var(--k));
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; }
.btn-primary:active::before {
  inset: calc(1px * var(--k)) calc(2px * var(--k));
  border-width: calc(32px * var(--k)) calc(32.5px * var(--k));
  border-image-source: url(../componentes/btn-primario-presionado.webp); border-image-slice: 64 65 fill;
  border-image-width: calc(32px * var(--k)) calc(32.5px * var(--k));
}
.btn-primary:active::after { opacity: 0; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { color: rgba(230,235,255,.55); cursor: not-allowed; }
.btn-primary:disabled::before, .btn-primary[aria-disabled="true"]::before {
  inset: calc(-2px * var(--k)) 0;
  border-width: calc(35.5px * var(--k)) calc(36px * var(--k));
  border-image-source: url(../componentes/btn-primario-deshabilitado.webp); border-image-slice: 71 72 fill;
  border-image-width: calc(35.5px * var(--k)) calc(36px * var(--k));
}
.btn-primary:disabled::after, .btn-primary[aria-disabled="true"]::after { opacity: 0; }

/* ── Botón secundario de vidrio y botón pequeño de menú ── */
.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10px * var(--k));
  height: calc(78px * var(--k)); padding: 0 calc(46px * var(--k));
  color: #fff; font: 500 1rem/1 "General Sans", system-ui, sans-serif; text-decoration: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  transition: filter .18s ease;
}
.btn-glass::before {
  border-width: calc(38.5px * var(--k)) calc(39px * var(--k));
  border-image-source: url(../componentes/btn-vidrio.webp); border-image-slice: 77 78 fill;
  border-image-width: calc(38.5px * var(--k)) calc(39px * var(--k));
}
.btn-glass:hover, .btn-menu:hover { filter: brightness(1.18); }
.btn-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(74px * var(--k)); padding: 0 calc(40px * var(--k));
  color: #fff; font: 500 .92rem/1 "General Sans", system-ui, sans-serif; text-decoration: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  transition: filter .18s ease;
}
.btn-menu::before {
  border-width: calc(36.5px * var(--k)) calc(37px * var(--k));
  border-image-source: url(../componentes/btn-menu.webp); border-image-slice: 73 74 fill;
  border-image-width: calc(36.5px * var(--k)) calc(37px * var(--k));
}

/* ── Botón redondo de ícono (no 9-slice) ── */
.btn-icon {
  --k: 1; display: inline-grid; place-items: center; width: calc(104px * var(--k)); height: calc(101px * var(--k)); border: 0; padding: 0;
  color: #fff; font-size: calc(26px * var(--k)); cursor: pointer;
  background: url(../componentes/btn-icono-redondo.webp) center / contain no-repeat; transition: filter .18s ease;
}
.btn-icon:hover { filter: brightness(1.2); }
.btn-icon svg { width: calc(44px * var(--k)); height: calc(44px * var(--k)); }

/* ── Chips (checkbox) y etiquetas estáticas con la misma pieza ── */
.chip, .tag-pill {
  display: inline-flex; align-items: center; gap: 8px; height: calc(61px * var(--k)); padding: 0 calc(36px * var(--k));
  color: #e6eaff; font: 500 .9rem/1 "Onest", system-ui, sans-serif; white-space: nowrap;
}
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.chip::before, .tag-pill::before {
  border-width: calc(29.5px * var(--k)) calc(30px * var(--k));
  border-image-source: url(../componentes/chip-normal.webp); border-image-slice: 59 60 fill;
  border-image-width: calc(29.5px * var(--k)) calc(30px * var(--k));
}
.chip:has(input:checked) { color: #fff; }
.chip:has(input:checked)::before {
  inset: calc(-4px * var(--k)) 0;
  border-width: calc(34px * var(--k)) calc(34.5px * var(--k));
  border-image-source: url(../componentes/chip-seleccionado.webp); border-image-slice: 68 69 fill;
  border-image-width: calc(34px * var(--k)) calc(34.5px * var(--k));
}
.chip:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }

/* ── Interruptor de idioma ES | EN ── */
.lang-toggle { display: inline-flex; align-items: center; height: calc(88px * var(--k)); padding: 0 calc(16px * var(--k)); gap: 0; }
.lang-toggle::before {
  border-width: calc(43.5px * var(--k)) calc(44px * var(--k));
  border-image-source: url(../componentes/lang-contenedor.webp); border-image-slice: 87 88 fill;
  border-image-width: calc(43.5px * var(--k)) calc(44px * var(--k));
}
.lang-toggle .knob {
  position: absolute; top: 50%; left: calc(18px * var(--k)); width: calc(100px * var(--k)); height: calc(66px * var(--k));
  transform: translate(0, -50%); transition: transform .3s cubic-bezier(.2,.7,.2,1); z-index: -1;
}
.lang-toggle .knob::before {
  content: ""; position: absolute; inset: 0; border-style: solid;
  border-width: calc(34px * var(--k)) calc(34.5px * var(--k));
  border-image-source: url(../componentes/lang-pieza-activa.webp); border-image-slice: 68 69 fill;
  border-image-width: calc(34px * var(--k)) calc(34.5px * var(--k));
}
.lang-toggle[data-lang="en"] .knob { transform: translate(100%, -50%); }
.lang-toggle button {
  width: calc(104px * var(--k)); height: calc(60px * var(--k)); border: 0; background: none; padding: 0;
  color: rgba(230,235,255,.6); font: 600 1rem/1 "General Sans", system-ui, sans-serif; cursor: pointer; transition: color .2s;
}
.lang-toggle button[aria-pressed="true"] { color: #fff; }

/* ── Campo de formulario (9-slice; slice 40) ── */
.field {
  display: block; width: 100%; height: calc(56px * var(--k)); padding: 0 calc(26px * var(--k)); border: 0; background: none; color: #fff;
  font: 400 1rem "Onest", system-ui, sans-serif; outline: 0; min-width: 0;
}
textarea.field { height: auto; min-height: 120px; padding: 16px calc(26px * var(--k)); resize: vertical; line-height: 1.5; }
.field-wrap { display: block; }
/* v2 = mismas piezas recortadas con márgenes simétricos (los originales tenían relleno transparente desigual
   y el corte de 40 caía dentro del resplandor: el brillo del foco quedaba corrido y pisaba el texto).
   Borde de luz: normal a 9 px del canto · foco 12 (lados) / 30-28 (arriba/abajo) · error 13 / 20-22 (px @2x).
   El inset negativo hace coincidir el borde de luz del foco/error con el del campo normal (4.5 px CSS). */
.field-wrap::before {
  border-width: calc(20px * var(--k));
  border-image-source: url(../componentes/campo-normal-v2.webp); border-image-slice: 40 fill;
  border-image-width: calc(20px * var(--k));
}
.field-wrap:focus-within::before {
  inset: calc(-10.5px * var(--k)) calc(-1.5px * var(--k)) calc(-9.5px * var(--k));
  border-width: calc(30px * var(--k)) calc(22px * var(--k)); border-image-width: calc(30px * var(--k)) calc(22px * var(--k));
  border-image-source: url(../componentes/campo-foco-v2.webp); border-image-slice: 60 44 fill;
}
.field-wrap.is-error::before {
  inset: calc(-5.5px * var(--k)) calc(-2px * var(--k)) calc(-6.5px * var(--k));
  border-width: calc(25px * var(--k)) calc(22px * var(--k)); border-image-width: calc(25px * var(--k)) calc(22px * var(--k));
  border-image-source: url(../componentes/campo-error-v2.webp); border-image-slice: 50 44 fill;
}
.field::placeholder { color: #8f99c4; }
.field-error-msg { display: block; margin-top: 8px; color: #ff7a5c; font: 400 .85rem "Onest", system-ui, sans-serif; }

/* ── Barra de progreso (pista + relleno recortado con clip-path) ── */
.progress { height: calc(15px * var(--k)); }
.progress::before {
  border-width: calc(6.5px * var(--k)) calc(7px * var(--k));
  border-image-source: url(../componentes/progreso-pista.webp); border-image-slice: 13 14 fill;
  border-image-width: calc(6.5px * var(--k)) calc(7px * var(--k));
}
.progress > i {
  position: absolute; left: 0; right: 0; top: 50%; height: calc(26px * var(--k)); transform: translateY(-50%);
  clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); transition: clip-path .25s linear;
  border-style: solid; border-width: calc(12.5px * var(--k)) calc(13px * var(--k));
  border-image-source: url(../componentes/progreso-relleno.webp); border-image-slice: 25 26 fill;
  border-image-width: calc(12.5px * var(--k)) calc(13px * var(--k));
}
.progress--screen > i { border-image-source: url(../componentes/progreso-relleno_screen.png); mix-blend-mode: screen; }

/* ── Puntos de navegación, viñeta, separador ── */
.nav-dot { --k: 1; display: block; width: calc(28px * var(--k)); height: calc(28px * var(--k)); background: url(../componentes/punto-nav-inactivo.webp) center / calc(20px * var(--k)) no-repeat; transition: background-size .2s; }
.nav-dot.is-active { background-image: url(../componentes/punto-nav-activo.webp); background-size: calc(28px * var(--k)); }
.nav-dot--screen.is-active { background-image: url(../componentes/punto-nav-activo_screen.png); mix-blend-mode: screen; }
.bullets { --k: 1; list-style: none; margin: 0; padding: 0; }
.bullets li { position: relative; padding: calc(7px * var(--k)) 0 calc(7px * var(--k)) calc(34px * var(--k)); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(24px * var(--k)); height: calc(24px * var(--k)); transform: translateY(-50%); background: url(../componentes/vineta.webp) center / contain no-repeat; }
.separator { display: block; height: 40px; background: url(../componentes/separador-luz.webp) center / 100% 100% no-repeat; }
.separator--screen { background-image: url(../componentes/separador-luz_screen.png); mix-blend-mode: screen; }

/* ── Barra de menú (enlaces) ── */
.nav-bar { display: inline-flex; align-items: center; height: calc(79px * var(--k)); padding: 0 calc(34px * var(--k)); gap: calc(6px * var(--k)); }
.nav-bar::before {
  border-width: calc(39px * var(--k)) calc(39.5px * var(--k));
  border-image-source: url(../componentes/barra-menu.webp); border-image-slice: 78 79 fill;
  border-image-width: calc(39px * var(--k)) calc(39.5px * var(--k));
}
.nav-bar a { padding: 10px 14px; color: rgba(226,232,255,.85); font: 500 .95rem/1 "General Sans", system-ui, sans-serif; text-decoration: none; transition: color .2s; border-radius: 999px; }
.nav-bar a:hover, .nav-bar a[aria-current] { color: #fff; }

/* ── Accesibilidad ── */
.btn-primary:focus-visible, .btn-glass:focus-visible, .btn-menu:focus-visible, .btn-icon:focus-visible, .lang-toggle button:focus-visible, .nav-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .lang-toggle .knob, .btn-primary::after, .progress > i { transition: none; } }

/* ════ v3 (2026-10-14, ChatGPT con Think; originales en diseno_chatgpt/nz_ui_kit.png) ════
   Reemplazan las piezas del selector ES|EN (tenían una cruz/costura), los puntos de navegación y las etiquetas/chips.
   Píldoras: corte algo menor que media altura (deja una franja central: con corte = media altura aparecía una costura de 1 px). Cada imagen trae su halo dentro: el ::before se agranda
   con inset negativo para que el borde de luz coincida con la caja del elemento. */
.lang-toggle::before {
  inset: calc(-12.5px * var(--k)) calc(-10px * var(--k));
  border-width: calc(47.7px * var(--k)); border-image-width: calc(47.7px * var(--k));
  border-image-source: url(../componentes/v3-lang-track.webp); border-image-slice: 62 fill;
}
.lang-toggle .knob::before {
  inset: calc(-12.5px * var(--k)) calc(-11.5px * var(--k));
  border-width: calc(38.8px * var(--k)); border-image-width: calc(38.8px * var(--k));
  border-image-source: url(../componentes/v3-lang-knob.webp); border-image-slice: 64 fill;
}
.lang-toggle button[aria-pressed="true"] { text-shadow: 0 1px 6px rgba(10,20,80,.55); }
.chip::before, .tag-pill::before {
  inset: calc(-16px * var(--k)) calc(-14px * var(--k));
  border-width: calc(39.4px * var(--k)); border-image-width: calc(39.4px * var(--k));
  border-image-source: url(../componentes/v3-tag-normal.webp); border-image-slice: 50 fill;
}
.chip:has(input:checked)::before {
  inset: calc(-20.5px * var(--k)) calc(-18px * var(--k));
  border-width: calc(42.7px * var(--k)); border-image-width: calc(42.7px * var(--k));
  border-image-source: url(../componentes/v3-tag-on.webp); border-image-slice: 54 fill;
}
.chip:has(input:checked) { text-shadow: 0 1px 6px rgba(10,20,80,.7); font-weight: 600; }
.nav-dot { background-image: url(../componentes/v3-dot-off.webp); background-size: calc(22px * var(--k)); }
.nav-dot.is-active { background-image: url(../componentes/v3-dot-on.webp); background-size: calc(30px * var(--k)); }

/* Selector ES|EN: tamaño fijo → imagen entera (sin 9-slice). A 1× el 9-slice dejaba costuras finas oscuras dentro.
   Proporciones elegidas para que la imagen casi no se estire: pista 146×56,5 (imagen 2,66:1), pieza 68×45,5 (1,46:1). */
.lang-toggle button { width: calc(120px * var(--k)); }
.lang-toggle .knob { left: calc(16px * var(--k)); width: calc(120px * var(--k)); }
.lang-toggle::before, .lang-toggle .knob::before { border-width: 0; border-image: none; background: center / 100% 100% no-repeat; }
.lang-toggle::before { inset: calc(-12.5px * var(--k)) calc(-10px * var(--k)); background-image: url(../componentes/v3-lang-track.webp); }
.lang-toggle .knob::before { inset: calc(-12.5px * var(--k)) calc(-4px * var(--k)); background-image: url(../componentes/v3-lang-knob.webp); }