holygrail5 1.0.19 → 1.0.21

package/dist/themes/limited.css

@@ -0,0 +1,2493 @@
+/* === _variables.css === */
+/**
+ * Variables del Tema Limited
+ * Paleta: lujo cálido (dorados, bronces y crema)
+ * Tipografía 100% serif: Suisse Works (titulares + texto corrido).
+ *
+ * Las @font-face de Suisse Works se declaran en guide-styles.css
+ * y se sirven desde dist/assets/fonts/ como woff2.
+ *
+ * Sobrescribe los tokens de color base de HolyGrail5 (--hg-color-*)
+ * y los tokens de tipografía (--hg-typo-font-family-*) para aplicar
+ * el look & feel del tema sin tocar config.json.
+ */
+
+:root {
+  /* ─────────────────────────────────────────────
+     Overrides de tokens base HolyGrail5 (colores)
+     Estos valores prevalecen sobre config.json y
+     actualizan automáticamente los componentVars
+     que apuntan con var(--hg-color-*).
+     ───────────────────────────────────────────── */
+  --hg-color-primary: #1D1D1D;
+  --hg-color-feel: #A38A6B;
+  --hg-color-feel-dark: #7A6346;
+  --hg-color-error: #9B2A1E;
+  --hg-color-success: #7A8D5F;
+  --hg-color-warning: #D4A84B;
+  --hg-color-info: #5B7FA1;
+  --hg-color-bg-light: #F4F2ED;
+  --hg-color-bg-cream: #F4F2ED;
+
+  /* ─────────────────────────────────────────────
+     Overrides de tipografía del tema (100% serif)
+     Suisse Works → titulares y texto corrido
+     ───────────────────────────────────────────── */
+  --hg-typo-font-family-primary-light: "suisse-works-regular", Georgia, "Times New Roman", serif;
+  --hg-typo-font-family-primary-regular: "suisse-works-regular", Georgia, "Times New Roman", serif;
+  --hg-typo-font-family-primary-bold: "suisse-works-bold", Georgia, "Times New Roman", serif;
+  --hg-typo-font-family-secondary: "suisse-works-medium", Georgia, "Times New Roman", serif;
+
+  /* ─────────────────────────────────────────────
+     Variables del tema (mapeo a los tokens base)
+     ───────────────────────────────────────────── */
+  --btn-primary-bg: var(--hg-color-primary);
+  --btn-primary-color: var(--hg-color-white);
+  --btn-primary-hover-bg: var(--hg-color-feel-dark);
+
+  --btn-secondary-bg: var(--hg-color-feel);
+  --btn-secondary-color: var(--hg-color-white);
+  --btn-secondary-hover-bg: var(--hg-color-feel-dark);
+
+  --btn-outline-border: var(--hg-color-feel-dark);
+  --btn-outline-color: var(--hg-color-feel-dark);
+  --btn-outline-hover-bg: var(--hg-color-feel-dark);
+  --btn-outline-hover-color: var(--hg-color-white);
+
+  --btn-ghost-color: var(--hg-color-primary);
+  --btn-ghost-hover-bg: var(--hg-color-bg-cream);
+
+  --btn-feel-bg: var(--hg-color-feel);
+  --btn-feel-color: var(--hg-color-white);
+  --btn-feel-hover-bg: var(--hg-color-feel-dark);
+
+  --input-border: var(--hg-color-middle-grey);
+  --input-border-focus: var(--hg-color-feel-dark);
+  --input-bg: var(--hg-color-white);
+  --input-color: var(--hg-color-primary);
+  --input-placeholder: var(--hg-color-middle-grey);
+
+  --input-error-border: var(--hg-color-error);
+  --input-success-border: var(--hg-color-success);
+  --input-warning-border: var(--hg-color-warning);
+
+  --label-color: var(--hg-color-primary);
+  --label-required: var(--hg-color-error);
+
+  --checkbox-bg: var(--hg-color-white);
+  --checkbox-border: var(--hg-color-middle-grey);
+  --checkbox-checked-bg: var(--hg-color-feel-dark);
+  --checkbox-checked-border: var(--hg-color-feel-dark);
+
+  --radio-bg: var(--hg-color-white);
+  --radio-border: var(--hg-color-middle-grey);
+  --radio-checked-bg: var(--hg-color-feel-dark);
+  --radio-checked-border: var(--hg-color-feel-dark);
+
+  --switch-bg: var(--hg-color-middle-grey);
+  --switch-active-bg: var(--hg-color-feel);
+  --switch-thumb: var(--hg-color-white);
+
+  /* Espaciados - usando variables de HolyGrail5 */
+  --btn-padding-x-sm: var(--hg-spacing-12);
+  --btn-padding-y-sm: var(--hg-spacing-8);
+  --btn-padding-x-md: var(--hg-spacing-16);
+  --btn-padding-y-md: var(--hg-spacing-12);
+  --btn-padding-x-lg: var(--hg-spacing-24);
+  --btn-padding-y-lg: var(--hg-spacing-16);
+
+  --input-padding-x: var(--hg-spacing-16);
+  --input-padding-y: var(--hg-spacing-12);
+  --input-gap: var(--hg-spacing-8);
+
+  --form-group-gap: var(--hg-spacing-16);
+
+  /* Bordes y radios */
+  --border-radius: 0;
+  --border-width: 1px;
+  --border-style: solid;
+
+  /* Transiciones */
+  --transition: all 0.3s ease;
+}
+
+/* ─────────────────────────────────────────────
+   Refuerzo tipográfico: titulares en Suisse Works
+   ───────────────────────────────────────────── */
+.demo-container h1,
+.demo-container h2,
+.demo-container .demo-title,
+.demo-container .hg-vars-section__title {
+  font-family: var(--hg-typo-font-family-secondary);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+
+/* === _buttons.css === */
+/**
+ * Botones
+ * Variantes: primary, secondary, tertiary, label-m, link, badge
+ * Tamaños: sm, md, lg
+ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--hg-spacing-8);
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-size: var(--hg-typo-font-size-13);
+  font-weight: var(--hg-typo-font-weight-400);
+  line-height: var(--hg-typo-line-height-1-5);
+  text-decoration: none;
+  border: var(--border-width) var(--border-style) transparent;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: var(--transition);
+  white-space: nowrap;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  min-height: 32px;
+}
+
+/* Tamaños de botones */
+.btn-sm {
+  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
+  font-size: var(--hg-typo-font-size-12);
+}
+
+.btn-md {
+  padding: var(--btn-padding-y-md) var(--btn-padding-x-md);
+  font-size: var(--hg-typo-font-size-13);
+}
+
+.btn-lg {
+  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
+  font-size: var(--hg-typo-font-size-14);
+}
+
+/* PRIMARY BUTTON */
+.btn-primary {
+  color: var(--hg-color-white);
+  background-color: var(--hg-color-black);
+  border: var(--border-width) var(--border-style) var(--hg-color-black);
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-weight: var(--hg-typo-font-weight-400);
+}
+
+.btn-primary svg g {
+  fill: var(--hg-color-white);
+  stroke: var(--hg-color-white);
+}
+
+.btn-primary svg circle {
+  stroke: var(--hg-color-white);
+}
+
+.btn-primary svg path {
+  fill: var(--hg-color-white);
+}
+
+.btn-primary:focus,
+.btn-primary.focus,
+.btn-primary:hover,
+.btn-primary.hover,
+.btn-primary:active,
+.btn-primary.active {
+  color: var(--hg-color-white);
+  background-color: var(--hg-color-dark-grey);
+  border: var(--border-width) var(--border-style) var(--hg-color-dark-grey);
+  opacity: 1;
+  cursor: pointer;
+}
+
+.btn-primary[disabled],
+.btn-primary:disabled,
+.btn-primary.disabled {
+  background-color: var(--hg-color-bg-light);
+  border: var(--border-width) var(--border-style) var(--hg-color-bg-light);
+  color: var(--hg-color-dark-grey);
+  opacity: 1;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn-primary[disabled] svg g,
+.btn-primary:disabled svg g,
+.btn-primary.disabled svg g {
+  fill: var(--hg-color-dark-grey);
+  stroke: var(--hg-color-dark-grey);
+}
+
+.btn-primary[disabled] svg circle,
+.btn-primary:disabled svg circle,
+.btn-primary.disabled svg circle {
+  stroke: var(--hg-color-dark-grey);
+}
+
+.btn-primary[disabled] svg path,
+.btn-primary:disabled svg path,
+.btn-primary.disabled svg path {
+  fill: var(--hg-color-dark-grey);
+}
+
+/* SECONDARY BUTTON */
+.btn-secondary {
+  color: var(--hg-color-black);
+  background-color: var(--hg-color-white);
+  border: var(--border-width) var(--border-style) var(--hg-color-black);
+  line-height: 1;
+}
+
+.btn-secondary svg circle {
+  stroke: var(--hg-color-black);
+}
+
+.btn-secondary:focus,
+.btn-secondary.focus,
+.btn-secondary:hover,
+.btn-secondary.hover,
+.btn-secondary:active,
+.btn-secondary.active {
+  color: var(--hg-color-black);
+  background-color: var(--hg-color-white);
+  border: var(--border-width) var(--border-style) var(--hg-color-dark-grey);
+  opacity: 1;
+}
+
+.btn-secondary[disabled],
+.btn-secondary:disabled,
+.btn-secondary.disabled {
+  background-color: var(--hg-color-bg-light);
+  border: var(--border-width) var(--border-style) var(--hg-color-bg-light);
+  color: var(--hg-color-dark-grey);
+  opacity: 1;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn-secondary[disabled] svg g,
+.btn-secondary:disabled svg g,
+.btn-secondary.disabled svg g {
+  fill: var(--hg-color-middle-grey);
+  stroke: var(--hg-color-middle-grey);
+}
+
+.btn-secondary[disabled] svg circle,
+.btn-secondary:disabled svg circle,
+.btn-secondary.disabled svg circle {
+  stroke: var(--hg-color-middle-grey);
+}
+
+.btn-secondary[disabled] svg path,
+.btn-secondary:disabled svg path,
+.btn-secondary.disabled svg path {
+  fill: var(--hg-color-middle-grey);
+}
+
+/* TERTIARY BUTTON */
+.btn-tertiary {
+  background-color: transparent;
+  border: 0 solid transparent;
+  height: auto;
+  min-height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 1;
+  min-width: 24px;
+  padding-inline: 0;
+}
+
+.btn-tertiary svg g {
+  fill: var(--hg-color-black);
+  stroke: var(--hg-color-black);
+}
+
+.btn-tertiary svg circle {
+  stroke: var(--hg-color-black);
+}
+
+.btn-tertiary:focus,
+.btn-tertiary.focus,
+.btn-tertiary:hover,
+.btn-tertiary.hover,
+.btn-tertiary:active,
+.btn-tertiary.active {
+  border: 0 solid transparent;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.btn-tertiary.active {
+  border-bottom: 0.5px solid var(--hg-color-black);
+}
+
+.btn-tertiary:disabled,
+.btn-tertiary[disabled],
+.btn-tertiary.disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: var(--hg-color-bg-light);
+  border: var(--border-width) var(--border-style) var(--hg-color-bg-light);
+  color: var(--hg-color-dark-grey);
+  filter: none;
+  opacity: 1;
+}
+
+.btn-tertiary:disabled svg-icon,
+.btn-tertiary:disabled svg-icon2,
+.btn-tertiary:disabled md-icon,
+.btn-tertiary[disabled] svg-icon,
+.btn-tertiary[disabled] svg-icon2,
+.btn-tertiary[disabled] md-icon,
+.btn-tertiary.disabled svg-icon,
+.btn-tertiary.disabled svg-icon2,
+.btn-tertiary.disabled md-icon {
+  background-color: transparent !important;
+  border: 0 solid transparent !important;
+}
+
+/* LABEL M BUTTON (similar a tertiary) */
+.btn-label-m {
+  background-color: transparent;
+  border: 0 solid transparent;
+  height: auto;
+  min-height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 1;
+  min-width: 24px;
+  padding-inline: 0;
+  color: var(--hg-color-black);
+  letter-spacing: 0.16em;
+}
+
+.btn-label-m svg g {
+  fill: var(--hg-color-black);
+  stroke: var(--hg-color-black);
+}
+
+.btn-label-m svg circle {
+  stroke: var(--hg-color-black);
+}
+
+.btn-label-m:focus,
+.btn-label-m.focus,
+.btn-label-m:hover,
+.btn-label-m.hover,
+.btn-label-m:active,
+.btn-label-m.active {
+  border: 0 solid transparent;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: var(--hg-typo-font-family-primary-bold);
+  font-weight: var(--hg-typo-font-weight-500);
+}
+
+.btn-label-m.active {
+  border-bottom: 0.5px solid var(--hg-color-black);
+}
+
+.btn-label-m:disabled,
+.btn-label-m[disabled],
+.btn-label-m.disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: var(--hg-color-bg-light);
+  border: var(--border-width) var(--border-style) var(--hg-color-bg-light);
+  color: var(--hg-color-dark-grey);
+  filter: none;
+  opacity: 1;
+}
+
+.btn-label-m:disabled svg-icon,
+.btn-label-m:disabled svg-icon2,
+.btn-label-m:disabled md-icon,
+.btn-label-m[disabled] svg-icon,
+.btn-label-m[disabled] svg-icon2,
+.btn-label-m[disabled] md-icon,
+.btn-label-m.disabled svg-icon,
+.btn-label-m.disabled svg-icon2,
+.btn-label-m.disabled md-icon {
+  background-color: transparent !important;
+  border: 0 solid transparent !important;
+}
+
+/* LINK BUTTON */
+.btn-link {
+  background-color: transparent;
+  border: none;
+  color: var(--hg-color-black);
+  padding: 0;
+  min-height: auto;
+  font-weight: var(--hg-typo-font-weight-400);
+}
+
+.btn-link:hover,
+.btn-link:focus {
+  color: var(--hg-color-dark-grey);
+  background-color: transparent;
+}
+
+.btn-link:disabled,
+.btn-link[disabled],
+.btn-link.disabled {
+  color: var(--hg-color-dark-grey);
+  background-color: transparent;
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+
+.btn-badge {
+  min-height: auto;
+  height: auto;
+  padding: var(--hg-spacing-4) var(--hg-spacing-12);
+
+  background-color: transparent;
+  color: var(--hg-color-dark-grey);
+  font-size: var(--hg-typo-font-size-12);
+  white-space: nowrap;
+}
+
+.btn-badge:focus,
+.btn-badge.focus,
+.btn-badge:hover,
+.btn-badge.hover,
+.btn-badge:active,
+.btn-badge.active {
+  background-color:transparent;
+  color: var(--hg-color-primary);
+  border-color: transparent;
+  cursor: pointer;
+}
+
+.btn-badge:disabled,
+.btn-badge[disabled],
+.btn-badge.disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: var(--hg-color-white);
+  border-color: transparent;
+  color: var(--hg-color-middle-grey);
+  opacity: 1;
+}
+
+/* Badge en contexto claro (fondo oscuro) */
+.has-light .btn-badge {
+  background-color: transparent;
+  color: var(--hg-color-white);
+  border-color: transparent;
+}
+
+.has-light .btn-badge:focus,
+.has-light .btn-badge.focus,
+.has-light .btn-badge:hover,
+.has-light .btn-badge.hover,
+.has-light .btn-badge:active,
+.has-light .btn-badge.active {
+  background-color: transparent;
+  color: var(--hg-color-white);
+  border-color: transparent;
+  cursor: pointer;
+}
+
+.has-light .btn-badge:disabled,
+.has-light .btn-badge[disabled],
+.has-light .btn-badge.disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--hg-color-light-grey);
+  opacity: 1;
+}
+
+/* Ancho completo */
+.btn-full {
+  width: 100%;
+}
+
+
+/* === _inputs.css === */
+/**
+ * Inputs
+ * Estados: error, success, warning, disabled
+ */
+
+.input {
+  display: block;
+  width: 100%;
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-size: var(--hg-typo-font-size-13);
+  font-weight: var(--hg-typo-font-weight-400);
+  line-height: var(--hg-typo-line-height-1-5);
+  color: var(--input-color);
+  background-color: var(--input-bg);
+  border: var(--border-width) var(--border-style) var(--input-border);
+  border-radius: var(--border-radius);
+  padding: var(--input-padding-y) var(--input-padding-x);
+	min-height: 40px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--input-border-focus);
+}
+
+.input::placeholder {
+  color: var(--input-placeholder);
+  opacity: 1;
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--hg-color-light-grey);
+}
+
+/* Estados de inputs */
+.input-error {
+  border-color: var(--input-error-border);
+}
+
+.input-success {
+  border-color: var(--input-success-border);
+}
+
+.input-warning {
+  border-color: var(--input-warning-border);
+}
+
+/* ============================================
+   FORM-INPUT-LABEL-2 (Inputs con label flotante)
+   ============================================ */
+
+.form-input-label-2,
+.error-zone {
+  font-family: var(--hg-typo-font-family-primary-regular);
+  position: relative;
+
+  display: block;
+}
+
+.form-input-label-2 label,
+.error-zone label {
+  font-size: 12px;
+}
+
+.form-input-label-2 .validation-error-messages,
+.error-zone .validation-error-messages {
+  width: calc(100% - 40px);
+}
+
+.form-input-label-2 .help,
+.error-zone .help {
+  font-family: var(--hg-typo-font-family-primary-regular);
+  position: relative;
+  line-height: 1.5;
+  font-size: 12px;
+  margin-top: 0;
+  padding-top: 2px;
+  margin-bottom: var(--hg-spacing-4);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.form-input-label-2 .input-text,
+.error-zone .input-text {
+  color: var(--hg-color-dark-grey);
+  margin-top: var(--hg-spacing-4);
+  line-height: 1;
+}
+
+.form-input-label-2 .info-text,
+.error-zone .info-text {
+  color: var(--hg-color-dark-grey);
+  margin-top: var(--hg-spacing-4);
+  width: auto;
+  position: absolute;
+  right: 0;
+}
+
+.form-input-label-2 > input,
+.form-input-label-2 > textarea,
+.form-input-label-2 > select,
+.form-input-label-2 > label,
+.error-zone > input,
+.error-zone > textarea,
+.error-zone > select,
+.error-zone > label {
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-weight: normal;
+}
+
+.form-input-label-2 > input,
+.form-input-label-2 > textarea,
+.form-input-label-2 > select,
+.error-zone > input,
+.error-zone > textarea,
+.error-zone > select {
+  border: none;
+  border-bottom: var(--border-width) var(--border-style) var(--hg-color-primary);
+  border-radius: 0;
+  background-color: transparent;
+  padding: var(--hg-spacing-16) 0 var(--hg-spacing-8) 0;
+  padding-left: 0;
+  padding-right: 0;
+  box-sizing: border-box;
+  transition: border-bottom-color 0.1s ease-in-out, border-bottom-width 0.1s ease-in-out;
+  margin: 0;
+  vertical-align: top;
+}
+
+.form-input-label-2 > input,
+.form-input-label-2 > select,
+.error-zone > input,
+.error-zone > select {
+  height: 40px;
+}
+
+/* El textarea mantiene su altura natural (rows) pero respeta el padding
+   superior para dejar aire al label flotado. */
+.form-input-label-2 > textarea,
+.error-zone > textarea {
+  min-height: 40px;
+  resize: vertical;
+}
+
+.form-input-label-2 > label,
+.error-zone > label {
+  box-sizing: border-box;
+  position: absolute;
+  top: var(--hg-spacing-16);
+  left: 0;
+  display: block;
+  width: 100%;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+  line-height: 1.1;
+  color: #000000;
+  border-radius: 0;
+  transition: transform 0.1s ease-in-out, font-size 0.1s ease-in-out, color 0.1s ease-in-out, top 0.1s ease-in-out;
+  pointer-events: none;
+  transform-origin: left top;
+}
+
+.form-input-label-2 input::placeholder,
+.form-input-label-2 textarea::placeholder,
+.error-zone input::placeholder,
+.error-zone textarea::placeholder {
+  color: transparent;
+}
+
+.form-input-label-2 input:not(:placeholder-shown) ~ label,
+.form-input-label-2 textarea:not(:placeholder-shown) ~ label,
+.error-zone input:not(:placeholder-shown) ~ label,
+.error-zone textarea:not(:placeholder-shown) ~ label {
+  top: 0;
+  font-size: 12px;
+  color: var(--hg-color-dark-grey);
+  transform: translateY(0);
+}
+
+/* El <select> no soporta :placeholder-shown (siempre tiene una option
+   seleccionada), así que forzamos el label a estar permanentemente
+   flotado arriba cuando el control es un select. */
+.form-input-label-2 > select ~ label,
+.error-zone > select ~ label {
+  top: 0;
+  font-size: 12px;
+  color: var(--hg-color-dark-grey);
+  transform: translateY(0);
+}
+
+.form-input-label-2 input:focus,
+.form-input-label-2 textarea:focus,
+.form-input-label-2 select:focus,
+.error-zone input:focus,
+.error-zone textarea:focus,
+.error-zone select:focus {
+  outline: none;
+}
+
+.form-input-label-2 input:focus ~ label,
+.form-input-label-2 textarea:focus ~ label,
+.form-input-label-2 select:focus ~ label,
+.error-zone input:focus ~ label,
+.error-zone textarea:focus ~ label,
+.error-zone select:focus ~ label {
+  top: 0;
+  font-size: 12px;
+  color: var(--hg-color-dark-grey);
+  transform: translateY(0);
+}
+
+.form-input-label-2 input::-webkit-list-button,
+.form-input-label-2 input::-webkit-calendar-picker-indicator,
+.error-zone input::-webkit-list-button,
+.error-zone input::-webkit-calendar-picker-indicator {
+  display: none;
+  opacity: 0;
+}
+
+.form-input-label-2 input:-webkit-autofill,
+.form-input-label-2 input:-webkit-autofill:hover,
+.form-input-label-2 input:-webkit-autofill:focus,
+.error-zone input:-webkit-autofill,
+.error-zone input:-webkit-autofill:hover,
+.error-zone input:-webkit-autofill:focus {
+  border-bottom: var(--border-width) var(--border-style) var(--hg-color-primary);
+  -webkit-text-fill-color: var(--hg-color-primary);
+  box-shadow: 0 0 0 1000px var(--hg-color-white) inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.form-input-label-2.input-line .input,
+.error-zone.input-line .input {
+  border: none;
+}
+
+.form-input-label-2 input,
+.error-zone input {
+  background-color: transparent;
+}
+
+.form-input-label-2.has-ico-pre.btn,
+.form-input-label-2.has-ico-pre > input,
+.form-input-label-2.has-ico-pre > label,
+.form-input-label-2 .has-ico-pre.btn,
+.form-input-label-2 .has-ico-pre > input,
+.form-input-label-2 .has-ico-pre > label,
+.error-zone.has-ico-pre.btn,
+.error-zone.has-ico-pre > input,
+.error-zone.has-ico-pre > label,
+.error-zone .has-ico-pre.btn,
+.error-zone .has-ico-pre > input,
+.error-zone .has-ico-pre > label {
+  padding-left: var(--hg-spacing-24);
+}
+
+.form-input-label-2.has-ico-pre .form-icon,
+.form-input-label-2 .has-ico-pre .form-icon,
+.error-zone.has-ico-pre .form-icon,
+.error-zone .has-ico-pre .form-icon {
+  top: 0;
+  left: 0;
+}
+
+.form-input-label-2.has-ico-pre .ico-pre,
+.form-input-label-2 .has-ico-pre .ico-pre,
+.error-zone.has-ico-pre .ico-pre,
+.error-zone .has-ico-pre .ico-pre {
+  height: 45px;
+  position: absolute;
+  top: 0;
+  right: auto;
+  left: 0;
+  box-sizing: border-box;
+  margin: 0;
+  cursor: pointer;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.form-input-label-2.has-ico-post.btn,
+.form-input-label-2.has-ico-post > input,
+.form-input-label-2.has-ico-post > label,
+.form-input-label-2 .has-ico-post.btn,
+.form-input-label-2 .has-ico-post > input,
+.form-input-label-2 .has-ico-post > label,
+.error-zone.has-ico-post.btn,
+.error-zone.has-ico-post > input,
+.error-zone.has-ico-post > label,
+.error-zone .has-ico-post.btn,
+.error-zone .has-ico-post > input,
+.error-zone .has-ico-post > label {
+  padding-inline-end: 36px;
+  padding-inline-start: 0;
+}
+
+.form-input-label-2.has-ico-post .form-icon,
+.form-input-label-2 .has-ico-post .form-icon,
+.error-zone.has-ico-post .form-icon,
+.error-zone .has-ico-post .form-icon {
+  padding: var(--hg-spacing-12);
+  top: 0;
+  right: 0;
+  left: auto;
+}
+
+.form-input-label-2.has-ico-post .ico-post,
+.form-input-label-2 .has-ico-post .ico-post,
+.error-zone.has-ico-post .ico-post,
+.error-zone .has-ico-post .ico-post {
+  height: 45px;
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  box-sizing: border-box;
+  margin: 0;
+  cursor: pointer;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.form-input-label-2 .input[type=search]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.form-input-label-2.required label::after {
+  content: " *";
+}
+
+/* Estados de error y éxito para form-input-label-2 */
+.is-error .input,
+.is-error .help {
+  color: var(--hg-color-error) !important;
+}
+
+.is-error .input {
+  border-bottom: var(--border-width) var(--border-style) var(--hg-color-error);
+}
+
+.is-error .input-prefix :nth-child(1)::placeholder {
+  color: var(--hg-color-error);
+}
+
+.is-error svg g {
+  stroke: var(--hg-color-error) !important;
+}
+
+.is-error svg path {
+  fill: var(--hg-color-error) !important;
+}
+
+.is-error .ico-default svg g {
+  stroke: var(--hg-color-primary) !important;
+}
+
+.is-error .ico-default svg path {
+  fill: var(--hg-color-primary) !important;
+}
+
+.ok-input .input,
+.ok-input .help {
+  color: var(--hg-color-success) !important;
+}
+
+.ok-input .input {
+  border-bottom: var(--border-width) var(--border-style) var(--hg-color-success);
+  color: var(--hg-color-success);
+}
+
+.ok-input .input-prefix:nth-child(1)::placeholder {
+  color: var(--hg-color-success);
+}
+
+.ok-input .input-line {
+  border-top: var(--border-width) var(--border-style) transparent;
+  border-left: var(--border-width) var(--border-style) transparent;
+  border-right: var(--border-width) var(--border-style) transparent;
+  border-bottom: var(--border-width) var(--border-style) var(--hg-color-success);
+  color: var(--hg-color-success);
+}
+
+
+/* === _labels.css === */
+/**
+ * Labels
+ * Variantes: normal, required, inline
+ */
+
+.label {
+  display: block;
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-size: var(--hg-typo-font-size-12);
+  font-weight: var(--hg-typo-font-weight-700);
+  line-height: var(--hg-typo-line-height-1-5);
+  color: var(--label-color);
+  margin-block-end: var(--hg-spacing-8);
+}
+
+.label-required::after {
+  content: " *";
+  color: var(--label-required);
+}
+
+.label-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hg-spacing-8);
+  margin-block-end: 0;
+  cursor: pointer;
+}
+
+
+
+/* === _checkboxes.css === */
+/**
+ * Checkboxes
+ * Estados: checked, disabled, focus
+ * Variantes: checkbox, checkbox-item, checkbox-item-2, checkbox-item-img, checkbox-radio, checkbox-card
+ */
+
+/* ============================================
+   CHECKBOX BÁSICO (SVG INLINE)
+   ============================================ */
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hg-spacing-8);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+}
+
+.checkbox input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+.checkbox-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  background-color: var(--checkbox-bg);
+  border: var(--border-width) var(--border-style) var(--checkbox-border);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.checkbox input[type="checkbox"]:checked + .checkbox-indicator {
+  background-color: var(--checkbox-checked-bg);
+  border-color: var(--checkbox-checked-border);
+}
+
+.checkbox-indicator .cbox__icon {
+  display: block;
+  width: 10px;
+  height: 8px;
+  opacity: 0;
+  transform: scale(.9);
+  transition: opacity .12s ease, transform .12s ease;
+  color: var(--checkbox-check-color, var(--hg-color-white));
+}
+
+.checkbox input[type="checkbox"]:checked + .checkbox-indicator .cbox__icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.checkbox input[type="checkbox"]:checked + .checkbox-indicator::after {
+  content: none;
+}
+
+.checkbox input[type="checkbox"]:focus-visible + .checkbox-indicator {
+  outline: 2px solid var(--hg-color-info);
+  outline-offset: 2px;
+}
+
+.checkbox input[type="checkbox"]:focus:not(:focus-visible) + .checkbox-indicator {
+  outline: none;
+}
+
+.checkbox input[type="checkbox"]:disabled + .checkbox-indicator {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.checkbox input[type="checkbox"]:disabled ~ .checkbox-label {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.checkbox-label {
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-size: var(--hg-typo-font-size-13);
+  font-weight: var(--hg-typo-font-weight-400);
+  line-height: var(--hg-typo-line-height-1-5);
+  color: var(--label-color);
+}
+
+/* ============================================
+   CHECKBOX-ITEM
+   ============================================ */
+
+.checkbox-item {
+  text-align: center;
+  position: relative;
+}
+
+.checkbox-item .ico-check {
+  width: 22px;
+  height: 22px;
+  left: 0;
+  top: 0;
+}
+
+.checkbox-item .ico-check::after {
+  position: absolute;
+  content: "";
+  height: 1px;
+  background-color: var(--hg-color-primary);
+  width: var(--hg-spacing-16);
+  transform: rotate(136deg);
+  left: var(--hg-spacing-4);
+  top: var(--hg-spacing-8);
+}
+
+.checkbox-item .ico-check::before {
+  position: absolute;
+  content: "";
+  width: var(--hg-spacing-8);
+  height: 1px;
+  top: 10px;
+  transform: rotate(50deg);
+  background-color: var(--hg-color-primary);
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label,
+.checkbox-item [type=checkbox]:checked + label {
+  position: relative;
+  padding-left: var(--hg-spacing-24);
+  cursor: pointer;
+  font-weight: var(--hg-typo-font-weight-400);
+  font-size: var(--hg-typo-font-size-12);
+  text-align: initial;
+  display: flex;
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label::before,
+.checkbox-item [type=checkbox]:checked + label::before {
+  position: absolute;
+  content: "";
+  width: 14px;
+  height: 14px;
+  left: 0;
+  border: none;
+  border: var(--border-width) var(--border-style) var(--hg-color-primary);
+  outline: 0;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label span,
+.checkbox-item [type=checkbox]:checked + label span {
+  display: initial;
+  vertical-align: top;
+  margin: 0;
+  line-height: 16px;
+  min-height: 20px;
+  padding-left: 0;
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label span::after,
+.checkbox-item [type=checkbox]:checked + label span::after {
+  content: " ";
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label a,
+.checkbox-item [type=checkbox]:checked + label a {
+  text-decoration: underline;
+  margin-right: var(--hg-spacing-4);
+}
+
+.checkbox-item [type=checkbox]:not(:checked),
+.checkbox-item [type=checkbox]:checked {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+}
+
+.checkbox-item input[type=checkbox] {
+  box-sizing: border-box;
+  padding: 0;
+  margin: var(--hg-spacing-4) 0 0;
+  margin-top: 1px \9;
+  line-height: normal;
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label .icon,
+.checkbox-item [type=checkbox]:checked + label .icon {
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  color: var(--hg-color-primary);
+  transition: var(--transition);
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label .icon {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.checkbox-item [type=checkbox]:checked + label .icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.checkbox-item [type=checkbox]:not(:checked) + label::before {
+  background-color: var(--hg-color-white);
+}
+
+.checkbox-item [type=checkbox]:checked + label::before {
+  background-color: var(--hg-color-primary);
+}
+
+.checkbox-item.color-filter [type=checkbox]:not(:checked) + label,
+.checkbox-item.color-filter [type=checkbox]:checked + label {
+  padding-left: var(--hg-spacing-32);
+}
+
+.checkbox-item.color-filter .color-wrap button {
+  margin-right: 0;
+}
+
+.checkbox-item.color-filter [type=checkbox]:not(:checked) + label span,
+.checkbox-item.color-filter [type=checkbox]:checked + label span {
+  padding-left: 14px;
+}
+
+.checkbox-item.is-error {
+  color: var(--hg-color-error);
+}
+
+.checkbox-item.is-error [type=checkbox]:checked + label::before,
+.checkbox-item.is-error [type=checkbox]:not(:checked) + label::before {
+  border: var(--border-width) var(--border-style) var(--hg-color-error);
+}
+
+/* ============================================
+   CHECKBOX-ITEM-2 (Switch style)
+   ============================================ */
+
+.checkbox-item-2 {
+  display: inline-block;
+  text-align: center;
+  margin: 0;
+}
+
+.checkbox-item-2 [type=checkbox]:not(:checked) + label,
+.checkbox-item-2 [type=checkbox]:checked + label {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  padding-inline-start: 0;
+  cursor: pointer;
+  font-weight: var(--hg-typo-font-weight-400);
+  font-size: var(--hg-typo-font-size-12);
+  text-align: initial;
+  min-height: 26px;
+}
+
+.checkbox-item-2 [type=checkbox]:not(:checked) + label::before,
+.checkbox-item-2 [type=checkbox]:checked + label::before {
+  position: absolute;
+  content: "";
+  width: 62px;
+  height: 26px;
+  border-radius: 0;
+  inset-inline-start: 0;
+  border: none;
+  border: var(--border-width) var(--border-style) var(--hg-color-primary);
+  outline: 0;
+  display: inline-block;
+  vertical-align: top;
+  margin-block: 0;
+  margin-inline: 0 10px;
+  top: 0;
+}
+
+.checkbox-item-2 [type=checkbox]:not(:checked) + label span,
+.checkbox-item-2 [type=checkbox]:checked + label span {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0;
+  padding-inline-start: 70px;
+}
+
+.checkbox-item-2 [type=checkbox]:not(:checked),
+.checkbox-item-2 [type=checkbox]:checked {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+}
+
+.checkbox-item-2 input[type=checkbox] {
+  box-sizing: border-box;
+  padding: 0;
+  margin: var(--hg-spacing-4) 0 0;
+  line-height: normal;
+}
+
+.checkbox-item-2 .checkbox-circle {
+  background: var(--hg-color-primary);
+  width: 20px;
+  height: 20px;
+  border-radius: 0;
+}
+
+.checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle,
+.checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
+  position: absolute;
+  top: 3px;
+  inset-inline-start: 6px;
+  color: var(--hg-color-primary);
+  transition: var(--transition);
+}
+
+.checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle {
+  opacity: 1;
+  transform: scale(1);
+  inset-inline-start: var(--hg-spacing-4);
+}
+
+.checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
+  opacity: 1;
+  transform: scale(1);
+  inset-inline-start: 38px;
+}
+
+/* ============================================
+   CHECKBOX-ITEM-TEXT
+   ============================================ */
+
+.checkbox-item-text {
+  min-height: 42px;
+}
+
+.checkbox-item-text span {
+  position: relative;
+  margin-left: var(--hg-spacing-24);
+  min-height: 40px;
+}
+
+/* ============================================
+   CHECKBOX-ITEM-BOX
+   ============================================ */
+
+.checkbox-item-box {
+  position: relative;
+  width: 14px;
+  height: 14px;
+}
+
+/* ============================================
+   CHECKBOX-ITEM-IMG
+   ============================================ */
+
+.checkbox-item-img {
+  text-align: center;
+  position: relative;
+}
+
+.checkbox-item-img.is-error {
+  color: var(--hg-color-error);
+}
+
+.checkbox-item-img.is-error [type=checkbox]:checked + label::before,
+.checkbox-item-img.is-error [type=checkbox]:not(:checked) + label::before {
+  border: var(--border-width) var(--border-style) var(--hg-color-error);
+}
+
+.checkbox-item-img .ico-check {
+  width: 22px;
+  height: 22px;
+  left: 0;
+  top: 0;
+}
+
+.checkbox-item-img .ico-check::after {
+  position: absolute;
+  content: "";
+  height: 1px;
+  background-color: var(--hg-color-primary);
+  width: var(--hg-spacing-16);
+  transform: rotate(136deg);
+  left: var(--hg-spacing-4);
+  top: var(--hg-spacing-8);
+}
+
+.checkbox-item-img .ico-check::before {
+  position: absolute;
+  content: "";
+  width: var(--hg-spacing-8);
+  height: 1px;
+  top: 10px;
+  transform: rotate(50deg);
+  background-color: var(--hg-color-primary);
+}
+
+.checkbox-item-img [type=checkbox] + label::after {
+  width: 80px;
+  height: 80px;
+  content: "";
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked),
+.checkbox-item-img [type=checkbox]:checked {
+  position: absolute;
+  left: -9999px;
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked) + label,
+.checkbox-item-img [type=checkbox]:checked + label {
+  padding-bottom: 132%;
+  height: 100%;
+  width: 100%;
+  aspect-ratio: 3/4;
+  position: relative;
+  padding-left: var(--hg-spacing-24);
+  cursor: pointer;
+  font-weight: var(--hg-typo-font-weight-400);
+  font-size: var(--hg-typo-font-size-12);
+  text-align: initial;
+  display: flex;
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked) + label span,
+.checkbox-item-img [type=checkbox]:checked + label span {
+  display: initial;
+  vertical-align: top;
+  margin: 0;
+  line-height: 16px;
+  min-height: 20px;
+  padding-left: 0;
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked) + label span::after,
+.checkbox-item-img [type=checkbox]:checked + label span::after {
+  content: " ";
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked) + label::before,
+.checkbox-item-img [type=checkbox]:checked + label::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 3/4;
+  left: 0;
+  border: none;
+  border: var(--border-width) var(--border-style) var(--hg-color-middle-grey);
+  outline: 0;
+  display: inline-block;
+  vertical-align: top;
+  margin: 0;
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked) + label a,
+.checkbox-item-img [type=checkbox]:checked + label a {
+  text-decoration: underline;
+  margin-right: var(--hg-spacing-4);
+}
+
+.checkbox-item-img .checkbox-item [type=checkbox]:not(:checked) + label .icon,
+.checkbox-item-img .checkbox-item [type=checkbox]:checked + label .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: scale(1) translate(-50%, calc(-50% - 30px));
+  color: var(--hg-color-primary);
+  transition: var(--transition);
+}
+
+.checkbox-item-img input[type=checkbox] {
+  box-sizing: border-box;
+  padding: 0;
+  margin: var(--hg-spacing-4) 0 0;
+  margin-top: 1px \9;
+  line-height: normal;
+}
+
+.checkbox-item-img [type=checkbox]:checked + label .icon,
+.checkbox-item-img .checkbox-item [type=checkbox]:checked + label .icon {
+  opacity: 1;
+  transform: scale(1) translate(-50%, calc(-50% - 30px));
+}
+
+.checkbox-item-img [type=checkbox]:checked + label {
+  border: var(--border-width) var(--border-style) var(--hg-color-primary);
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked) + label .icon {
+  opacity: 0;
+  transform: scale(0) translate(-50%, calc(-50% - 30px));
+}
+
+.checkbox-item-img [type=checkbox]:not(:checked) + label {
+  border: var(--border-width) var(--border-style) transparent;
+}
+
+.checkbox-item-img.color-filter [type=checkbox]:not(:checked) + label,
+.checkbox-item-img.color-filter [type=checkbox]:checked + label {
+  padding-left: var(--hg-spacing-32);
+}
+
+.checkbox-item-img.color-filter .color-wrap button {
+  margin-right: 0;
+}
+
+.checkbox-item-img.color-filter [type=checkbox]:not(:checked) + label span,
+.checkbox-item-img.color-filter [type=checkbox]:checked + label span {
+  padding-left: 14px;
+}
+
+.checkbox-item-img img {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.checkbox-item-img .checkbox-item-img-text {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+}
+
+
+
+/* ============================================
+   CHECKBOX-CARD
+   ============================================ */
+
+.checkbox-card .checkbox-card-label {
+  border-radius: 0;
+  overflow: hidden;
+  border: var(--border-width) var(--border-style) var(--hg-color-middle-grey);
+  background: var(--hg-color-white);
+  flex-direction: column;
+  display: flex;
+  width: 100%;
+  padding: var(--hg-spacing-8);
+  box-sizing: border-box;
+  transition: var(--transition);
+}
+
+.checkbox-card [type=radio] {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+}
+
+.checkbox-card [type=radio]:checked + .checkbox-card-label,
+.checkbox-card :hover + .checkbox-card-label {
+  cursor: pointer;
+  border: var(--border-width) var(--border-style) var(--hg-color-primary);
+}
+
+.has-light .checkbox-card {
+  color: var(--hg-color-white);
+}
+
+.has-light .checkbox-card .checkbox-card-label {
+  border: var(--border-width) var(--border-style) var(--hg-color-dark-grey);
+  background: var(--hg-color-primary);
+}
+
+.has-light .checkbox-card [type=radio]:checked + .checkbox-card-label,
+.has-light .checkbox-card :hover + .checkbox-card-label {
+  cursor: pointer;
+  border: var(--border-width) var(--border-style) var(--hg-color-white);
+}
+
+.checkbox-card.is-error .checkbox-card-label {
+  border: var(--border-width) var(--border-style) var(--hg-color-error) !important;
+  color: var(--hg-color-error) !important;
+}
+
+/* ============================================
+   ESTADOS Y MODIFICADORES
+   ============================================ */
+
+.is-active.checkbox-radio .border-1,
+.is-active.checkbox-radio .border-1-grey {
+  border: var(--border-width) var(--border-style) var(--hg-color-primary);
+}
+
+.is-active.checkbox-radio [type=radio] + label .ico-radio {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.is-error.checkbox-item [type=checkbox]:checked + label::before,
+.is-error.checkbox-item [type=checkbox]:not(:checked) + label::before,
+.is-error .checkbox-item [type=checkbox]:checked + label::before,
+.is-error .checkbox-item [type=checkbox]:not(:checked) + label::before {
+  border: var(--border-width) var(--border-style) var(--hg-color-error) !important;
+}
+
+.is-error.checkbox-item a,
+.is-error .checkbox-item a {
+  color: var(--hg-color-error) !important;
+}
+
+.is-error.checkbox-item svg g,
+.is-error .checkbox-item svg g {
+  fill: var(--hg-color-error) !important;
+}
+
+.is-error.checkbox-item svg g polyline,
+.is-error .checkbox-item svg g polyline {
+  stroke: var(--hg-color-error) !important;
+}
+
+/* ============================================
+   HAS-LIGHT (Modo claro/claro)
+   ============================================ */
+
+.has-light .checkbox-item .ico-check::after {
+  background-color: transparent;
+}
+
+.has-light .checkbox-item .ico-check::before {
+  background-color: var(--hg-color-white);
+}
+
+.has-light .checkbox-item [type=checkbox]:not(:checked) + label::before,
+.has-light .checkbox-item [type=checkbox]:checked + label::before {
+  border: var(--border-width) var(--border-style) var(--hg-color-white);
+}
+
+.has-light .checkbox-item [type=checkbox]:not(:checked) + label .icon,
+.has-light .checkbox-item [type=checkbox]:checked + label .icon {
+  color: var(--hg-color-white);
+}
+
+.has-light .checkbox-item svg g {
+  fill: var(--hg-color-white);
+}
+
+.has-light .checkbox-item svg g polyline {
+  stroke: var(--hg-color-white);
+}
+
+.has-light .checkbox-radio [type=radio]:not(:checked) + label::before,
+.has-light .checkbox-radio [type=radio]:checked + label::before {
+  border: var(--border-width) var(--border-style) var(--hg-color-white);
+}
+
+.has-light .checkbox-radio [type=radio]:not(:checked) + label .ico-radio,
+.has-light .checkbox-radio [type=radio]:checked + label .ico-radio {
+  background-color: var(--hg-color-white);
+}
+
+.has-light .checkbox-item-2 [type=checkbox]:not(:checked) + label::before,
+.has-light .checkbox-item-2 [type=checkbox]:checked + label::before {
+  border: var(--border-width) var(--border-style) var(--hg-color-white);
+}
+
+.has-light .checkbox-item-2 .checkbox-circle {
+  background: var(--hg-color-white);
+}
+
+.has-light .checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle,
+.has-light .checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
+  color: var(--hg-color-white);
+}
+
+
+/* === _radios.css === */
+/**
+ * Radios
+ * Estados: checked, disabled, focus
+ * Variantes: checkbox-radio, check-center, check-no, check-bleed, check-top, check-clear
+ */
+
+/* ============================================
+   CHECKBOX-RADIO (Radio buttons con estilo checkbox)
+   ============================================ */
+
+.checkbox-radio {
+  position: relative;
+}
+
+/* Input oculto */
+.checkbox-radio [type=radio] {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  line-height: normal;
+}
+
+/* Label base */
+.checkbox-radio [type=radio] + label {
+  position: relative;
+  padding-left: 0;
+  padding-bottom: 0;
+  cursor: pointer;
+  font-weight: normal;
+  font-size: var(--hg-typo-font-size-xs, 12px);
+  text-align: initial;
+  display: flex;
+  flex-direction: column;
+  float: none;
+}
+
+/* Círculo del radio (::before) */
+.checkbox-radio [type=radio] + label::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: "";
+  width: 14px;
+  height: 14px;
+  left: 0;
+  border: var(--border-width) var(--border-style) var(--hg-color-primary);
+  outline: 0;
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 var(--hg-spacing-10, 10px) 0 0;
+  border-radius: 0;
+}
+
+/* Texto del label */
+.checkbox-radio [type=radio] + label span {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0;
+  line-height: var(--hg-typo-line-height-sm, 16px);
+  padding-left: var(--hg-spacing-24);
+  min-height: 20px;
+}
+
+/* Indicador interno (punto) */
+.checkbox-radio [type=radio] + label .ico-radio {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  width: 4px;
+  height: 4px;
+  background-color: var(--hg-color-primary);
+  border-radius: 0;
+  transition: var(--transition);
+}
+
+/* Estado no seleccionado */
+.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
+  opacity: 0;
+  transform: scale(0);
+}
+
+/* Estado seleccionado */
+.checkbox-radio [type=radio]:checked + label .ico-radio {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Estado deshabilitado */
+.checkbox-radio [type=radio]:disabled {
+  opacity: 0.5;
+}
+
+.checkbox-radio [type=radio]:disabled + label::before {
+  opacity: 0.5;
+}
+
+/* Estado de error */
+.checkbox-radio.is-error label::before {
+  border-color: var(--hg-color-error) !important;
+}
+
+.checkbox-radio.is-error span {
+  color: var(--hg-color-error) !important;
+}
+
+/* ============================================
+   VARIANTES DE CHECKBOX-RADIO
+   ============================================ */
+
+/* Variante: Centrado verticalmente */
+.check-center.checkbox-radio [type=radio] + label::before {
+  position: absolute;
+  top: 50%;
+  left: var(--hg-spacing-16);
+  transform: translateY(-50%);
+}
+
+.check-center.checkbox-radio [type=radio] + label .ico-radio {
+  top: 50%;
+  left: 21px;
+  margin-top: -2px;
+}
+
+.check-center .box3-content {
+  padding-left: var(--hg-spacing-30, 30px);
+}
+
+.check-center.checkbox-radio [type=radio]:checked + label .border-1,
+.check-center.checkbox-radio [type=radio]:checked + label .border-1-grey {
+  border-color: var(--hg-color-primary);
+}
+
+/* Variante: Sin indicador visual (solo borde) */
+.check-no.checkbox-radio [type=radio] + label::before {
+  display: none;
+}
+
+.check-no.checkbox-radio [type=radio]:checked + label .ico-radio {
+  display: none;
+}
+
+.check-no.checkbox-radio [type=radio]:checked + label .border-1,
+.check-no.checkbox-radio [type=radio]:checked + label .border-1-grey {
+  border-color: var(--hg-color-primary);
+}
+
+/* Variante: Sin margen izquierdo */
+.check-bleed.checkbox-radio [type=radio] + label::before {
+  left: 0;
+}
+
+.check-bleed.checkbox-radio [type=radio] + label .ico-radio {
+  left: 5px;
+}
+
+/* Variante: Posición superior */
+.check-top.checkbox-radio [type=radio] + label::before {
+  position: absolute;
+  top: var(--hg-spacing-16);
+  left: var(--hg-spacing-16);
+}
+
+.check-top.checkbox-radio [type=radio] + label .ico-radio {
+  top: 23px;
+  left: 23px;
+}
+
+.check-top .box3-content {
+  padding-left: var(--hg-spacing-30, 30px);
+}
+
+.check-top.checkbox-radio [type=radio]:checked + label .border-1,
+.check-top.checkbox-radio [type=radio]:checked + label .border-1-grey {
+  border-color: var(--hg-color-primary);
+}
+
+/* Variante: Sin padding izquierdo */
+.check-clear.checkbox-radio [type=radio] + label::before {
+  position: absolute;
+  top: var(--hg-spacing-16);
+  left: 0;
+}
+
+.check-clear.checkbox-radio [type=radio] + label .ico-radio {
+  top: 23px;
+  left: var(--hg-spacing-4);
+}
+
+.check-clear .box3-content {
+  padding-left: var(--hg-spacing-30, 30px);
+}
+
+.check-clear.checkbox-radio [type=radio]:checked + label .border-1,
+.check-clear.checkbox-radio [type=radio]:checked + label .border-1-grey {
+  border-color: var(--hg-color-primary);
+}
+
+
+/* === _switches.css === */
+/**
+ * Switches / Toggles
+ * Estados: checked, disabled, focus
+ * Variantes: switch, checkbox-item-2
+ */
+
+/* ============================================
+   SWITCH BÁSICO (Switch estándar)
+   ============================================ */
+
+   .checkbox-item-2 {
+    display: inline-block;
+    text-align: center;
+    margin: 0;
+  }
+  .checkbox-item-2 [type=checkbox]:not(:checked) + label,
+  .checkbox-item-2 [type=checkbox]:checked + label {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    padding-inline-start: 0;
+    cursor: pointer;
+    font-weight: normal;
+    font-size: 12px;
+    text-align: initial;
+    display: flex;
+    min-height: 26px;
+  }
+  .checkbox-item-2 [type=checkbox]:not(:checked) + label::before,
+  .checkbox-item-2 [type=checkbox]:checked + label::before {
+    position: absolute;
+    content: "";
+    width: 62px;
+    height: 26px;
+    border-radius: 0;
+    inset-inline-start: 0;
+    border: none;
+    border: 1px solid #000000;
+    outline: 0;
+    display: inline-block;
+    vertical-align: top;
+    margin-block: 0;
+    margin-inline: 0 10px;
+    top: 0;
+  }
+  .checkbox-item-2 [type=checkbox]:not(:checked) + label span,
+  .checkbox-item-2 [type=checkbox]:checked + label span {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    padding-inline-start: 70px;
+  }
+  .checkbox-item-2 [type=checkbox]:not(:checked),
+  .checkbox-item-2 [type=checkbox]:checked {
+    position: absolute; /* Lo saca del flujo normal */
+    clip: rect(0 0 0 0); /* Recorta el elemento para que no sea visible */
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+  }
+  .checkbox-item-2 input[type=checkbox] {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 4px 0 0;
+    line-height: normal;
+  }
+  .checkbox-item-2 .checkbox-circle {
+    background: #000000;
+    width: 20px;
+    height: 20px;
+    border-radius: 0;
+  }
+  .checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle,
+  .checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
+    position: absolute;
+    top: 3px;
+    inset-inline-start: 6px;
+    color: #000000;
+    transition: all 0.2s;
+  }
+  .checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle {
+    opacity: 1;
+    transform: scale(1);
+    inset-inline-start: 4px;
+  }
+  .checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
+    opacity: 1;
+    transform: scale(1);
+    inset-inline-start: 38px;
+  }
+  
+
+/* === _forms.css === */
+/**
+ * Form Groups, Form Rows y Helper Text
+ */
+
+/* Form Groups */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-block-end: var(--hg-spacing-24);
+}
+
+.form-group:last-child {
+  margin-block-end: 0;
+}
+
+.form-group-inline {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--hg-spacing-16);
+}
+
+.form-group-inline .label {
+  margin-block-end: 0;
+  flex-shrink: 0;
+}
+
+/* Helper Text / Messages */
+.helper-text {
+  display: block;
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-size: var(--hg-typo-font-size-12);
+  font-weight: var(--hg-typo-font-weight-400);
+  line-height: var(--hg-typo-line-height-1-5);
+  margin-block-start: var(--hg-spacing-4);
+  color: var(--hg-color-dark-grey);
+}
+
+.helper-text-error {
+  color: var(--hg-color-error);
+}
+
+.helper-text-success {
+  color: var(--hg-color-success);
+}
+
+.helper-text-warning {
+  color: var(--hg-color-warning);
+}
+
+/* Form Row */
+.form-row {
+  display: flex;
+  gap: var(--hg-spacing-16);
+  flex-wrap: wrap;
+}
+
+.form-row > * {
+  flex: 1;
+  min-width: 200px;
+}
+
+
+
+/* === _containers.css === */
+/* ============================================
+   CONTAINERS — Dutti Theme
+   $padding-global: var(--hg-spacing-20) = 20px
+   $padding-mobile: var(--hg-spacing-20) = 20px
+   ============================================ */
+
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 800px;
+  padding-inline: var(--hg-spacing-20);
+  position: relative;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+    padding-inline: var(--hg-spacing-20);
+    width: 90%;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    max-width: 992px;
+    width: 80%;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+    width: 80%;
+  }
+}
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1440px;
+    width: 100%;
+  }
+}
+
+.container-2 {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 700px;
+  padding-inline: var(--hg-spacing-20);
+  position: relative;
+  width: 90%;
+}
+
+.container-3 {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 900px;
+  padding-inline: 3.75rem; /* $padding-global * 3 = 60px */
+  position: relative;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .container-3 {
+    padding-inline: var(--hg-spacing-20);
+  }
+}
+
+.container-4 {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 360px;
+  padding-inline: 2.5rem; /* $padding-global * 2 = 40px */
+  position: relative;
+  width: 100%;
+}
+
+.container-5 {
+  margin: 0 auto;
+  max-width: 800px;
+  padding: 0 var(--hg-spacing-20);
+  position: relative;
+  width: 100%;
+}
+@media (min-width: 1280px) {
+  .container-5 {
+    max-width: 1000px;
+    padding: 0;
+  }
+}
+
+.container-6 {
+  margin: 0 auto;
+  max-width: 442px;
+  padding: 0 var(--hg-spacing-20);
+  position: relative;
+  width: 100%;
+}
+
+.container-7 {
+  margin: 0 auto;
+  max-width: 295px;
+  padding: 0 2.5rem; /* $padding-global * 2 = 40px */
+  position: relative;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .container-7 {
+    max-width: 460px;
+    padding-left: var(--hg-spacing-20);
+    padding-right: var(--hg-spacing-20);
+  }
+}
+@media (min-width: 992px) {
+  .container-7 {
+    max-width: 460px;
+  }
+}
+@media (min-width: 1280px) {
+  .container-7 {
+    max-width: 595px;
+  }
+}
+
+.container-8 {
+  margin: 0 auto;
+  max-width: 395px;
+  padding: 0 var(--hg-spacing-20);
+  position: relative;
+  width: 100%;
+}
+
+.container-9 {
+  margin: 0 auto;
+  max-width: 798px;
+  padding: 0 var(--hg-spacing-20);
+  position: relative;
+  width: 100%;
+}
+
+.container-10 {
+  max-width: 200px;
+  position: relative;
+}
+
+.container-11 {
+  margin: 0 auto;
+  max-width: 1080px;
+  padding: 0 var(--hg-spacing-20);
+  position: relative;
+  width: 100%;
+}
+
+.container-12 {
+  max-width: 1080px;
+  padding: 0 var(--hg-spacing-20);
+  position: relative;
+  width: 100%;
+}
+
+.container-360 {
+  max-width: 360px;
+  width: 100%;
+}
+
+.container-496 {
+  max-width: 496px;
+  width: 100%;
+}
+
+.container-512 {
+  max-width: 512px;
+  width: 100%;
+}
+
+.container-640 {
+  max-width: 640px;
+  width: 100%;
+}
+
+
+/* === _grid.css === */
+.hg-grid-cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.hg-grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.hg-grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.hg-grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.hg-grid-cols-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.hg-grid-cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.hg-grid-cols-7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.hg-grid-cols-8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.hg-grid-cols-9 {
+  grid-template-columns: repeat(9, 1fr);
+}
+
+.hg-grid-cols-10 {
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.hg-grid-cols-11 {
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.hg-grid-cols-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+[class*="hg-col-span-"] {
+  padding: 0;
+}
+
+.hg-col-span-1 {
+  grid-column: span 1;
+}
+
+.hg-col-span-2 {
+  grid-column: span 2;
+}
+
+.hg-col-span-3 {
+  grid-column: span 3;
+}
+
+.hg-col-span-4 {
+  grid-column: span 4;
+}
+
+.hg-col-span-5 {
+  grid-column: span 5;
+}
+
+.hg-col-span-6 {
+  grid-column: span 6;
+}
+
+.hg-col-span-7 {
+  grid-column: span 7;
+}
+
+.hg-col-span-8 {
+  grid-column: span 8;
+}
+
+.hg-col-span-9 {
+  grid-column: span 9;
+}
+
+.hg-col-span-10 {
+  grid-column: span 10;
+}
+
+.hg-col-span-11 {
+  grid-column: span 11;
+}
+
+.hg-col-span-12 {
+  grid-column: span 12;
+}
+
+.hg-col-start-1 {
+  grid-column-start: 1;
+}
+
+.hg-col-start-2 {
+  grid-column-start: 2;
+}
+
+.hg-col-start-3 {
+  grid-column-start: 3;
+}
+
+.hg-col-start-4 {
+  grid-column-start: 4;
+}
+
+.hg-col-start-5 {
+  grid-column-start: 5;
+}
+
+.hg-col-start-6 {
+  grid-column-start: 6;
+}
+
+.hg-col-start-7 {
+  grid-column-start: 7;
+}
+
+.hg-col-start-8 {
+  grid-column-start: 8;
+}
+
+.hg-col-start-9 {
+  grid-column-start: 9;
+}
+
+.hg-col-start-10 {
+  grid-column-start: 10;
+}
+
+.hg-col-start-11 {
+  grid-column-start: 11;
+}
+
+.hg-col-start-12 {
+  grid-column-start: 12;
+}
+
+@media (min-width: 48rem) {
+  .md\:hg-grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .md\:hg-grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .md\:hg-grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .md\:hg-grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .md\:hg-grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .md\:hg-grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .md\:hg-grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .md\:hg-grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .md\:hg-grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .md\:hg-grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .md\:hg-grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .md\:hg-grid-cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  [class*="md\:hg-col-span-"] {
+    padding: 0;
+  }
+
+  .md\:hg-col-span-1 {
+    grid-column: span 1;
+  }
+
+  .md\:hg-col-span-2 {
+    grid-column: span 2;
+  }
+
+  .md\:hg-col-span-3 {
+    grid-column: span 3;
+  }
+
+  .md\:hg-col-span-4 {
+    grid-column: span 4;
+  }
+
+  .md\:hg-col-span-5 {
+    grid-column: span 5;
+  }
+
+  .md\:hg-col-span-6 {
+    grid-column: span 6;
+  }
+
+  .md\:hg-col-span-7 {
+    grid-column: span 7;
+  }
+
+  .md\:hg-col-span-8 {
+    grid-column: span 8;
+  }
+
+  .md\:hg-col-span-9 {
+    grid-column: span 9;
+  }
+
+  .md\:hg-col-span-10 {
+    grid-column: span 10;
+  }
+
+  .md\:hg-col-span-11 {
+    grid-column: span 11;
+  }
+
+  .md\:hg-col-span-12 {
+    grid-column: span 12;
+  }
+
+  .md\:hg-col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .md\:hg-col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .md\:hg-col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .md\:hg-col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .md\:hg-col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .md\:hg-col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .md\:hg-col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .md\:hg-col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .md\:hg-col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .md\:hg-col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .md\:hg-col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .md\:hg-col-start-12 {
+    grid-column-start: 12;
+  }
+}
+
+/* === _icons.css === */
+  :root {
+    --hg-icon-size: var(--hg-spacing-16);
+  }
+
+  .hg-icon {
+    align-items: center;
+    display: inline-flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+  }
+  
+  .hg-icon svg {
+    display: block;
+    height: auto;
+    width: var(--hg-icon-size);
+  }