@c-code/c-code-fw 1.3.0 → 2.0.0

package/fesm2022/c-code-c-code-fw-ui.mjs

@@ -1,8 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, ChangeDetectionStrategy, Component, model, output, signal, Directive, contentChild, TemplateRef, effect, untracked, computed } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, booleanAttribute, ChangeDetectionStrategy, Component, model, output, viewChild, computed, DestroyRef, afterNextRender, effect, untracked, signal, Directive, contentChild, TemplateRef } from '@angular/core';
 import { shareReplay, forkJoin, map, of } from 'rxjs';
-import { DOCUMENT, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { Title, Meta } from '@angular/platform-browser';
 import { RouterLink } from '@angular/router';
 
@@ -60,6 +60,16 @@ function whatsappUrl(phone, message) {
     params.set('app_absent', '0');
     return `https://api.whatsapp.com/send/?${params.toString()}`;
 }
+/** Formats a price with `Intl.NumberFormat`: formatPrice(259900) -> "$ 259.900". */
+function formatPrice(value, { locale = 'es-CO', currency = 'COP', digits = 0 } = {}) {
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        currencyDisplay: 'narrowSymbol',
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+    }).format(value);
+}
 
 /** Fills `plan.additionalServices` from `additionalServicesId`. Unknown ids are skipped. */
 function joinAdditionalServices(plans, additionals) {
@@ -262,59 +272,305 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Shared button look for links and buttons. Every component in the library uses it,
+ * so all calls to action share size, focus and colors.
+ *
+ * ```html
+ * <a ccButton [href]="whatsapp" target="_blank">Reservar</a>
+ * <button ccButton variant="secondary" size="sm" type="button">Limpiar</button>
+ * ```
+ *
+ * Tokens: --cc-btn-bg, --cc-btn-color, --cc-btn-hover-bg, --cc-btn-hover-color,
+ * --cc-btn-border, --cc-btn-radius, --cc-btn-padding-x, --cc-btn-font-weight,
+ * --cc-btn-letter-spacing, --cc-btn-text-transform.
+ */
+class ButtonComponent {
+    variant = input('primary');
+    size = input('md');
+    /** Full width. */
+    block = input(false, { transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "a[ccButton], button[ccButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cc-btn--secondary": "variant() === 'secondary'", "class.cc-btn--ghost": "variant() === 'ghost'", "class.cc-btn--whatsapp": "variant() === 'whatsapp'", "class.cc-btn--inverse": "variant() === 'inverse'", "class.cc-btn--sm": "size() === 'sm'", "class.cc-btn--lg": "size() === 'lg'", "class.cc-btn--block": "block()" }, classAttribute: "cc-btn" }, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_btn-bg: var(--cc-btn-bg, var(--_accent));--_btn-color: var(--cc-btn-color, var(--_on-accent));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_accent-hover));--_btn-hover-color: var(--cc-btn-hover-color, var(--_btn-color));--_btn-border: var(--cc-btn-border, transparent);--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-6));--_btn-height: var(--_control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--_space-2);min-height:var(--_btn-height);padding:var(--_space-2) var(--_btn-padding-x);border:2px solid var(--_btn-border);border-radius:var(--cc-btn-radius, var(--_radius));font:inherit;font-size:var(--_text-md);font-weight:var(--cc-btn-font-weight, var(--_weight-semibold));letter-spacing:var(--cc-btn-letter-spacing, var(--_tracking-wide));line-height:var(--_leading-tight);text-align:center;text-decoration:none;text-transform:var(--cc-btn-text-transform, none);color:var(--_btn-color);background:var(--_btn-bg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--_duration) var(--_ease),color var(--_duration) var(--_ease),border-color var(--_duration) var(--_ease),box-shadow var(--_duration) var(--_ease)}:host(:hover){color:var(--_btn-hover-color);background:var(--_btn-hover-bg)}:host(:focus-visible){outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}:host(:disabled),:host([aria-disabled=\"true\"]){opacity:.5;cursor:not-allowed;pointer-events:none}:host(.cc-btn--secondary){--_btn-bg: var(--cc-btn-bg, transparent);--_btn-color: var(--cc-btn-color, var(--_accent-text));--_btn-border: var(--cc-btn-border, var(--_accent));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_accent));--_btn-hover-color: var(--cc-btn-hover-color, var(--_on-accent))}:host(.cc-btn--ghost){--_btn-bg: var(--cc-btn-bg, transparent);--_btn-color: var(--cc-btn-color, var(--_text));--_btn-hover-bg: var(--cc-btn-hover-bg, color-mix(in srgb, var(--_text) 8%, transparent));--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-3));text-decoration:underline;text-underline-offset:.2em}:host(.cc-btn--whatsapp){--_btn-bg: var(--cc-btn-bg, var(--_whatsapp));--_btn-color: var(--cc-btn-color, var(--_on-whatsapp));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_whatsapp-hover))}:host(.cc-btn--inverse){--_btn-bg: var(--cc-btn-bg, var(--_inverse));--_btn-color: var(--cc-btn-color, var(--_on-inverse));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_inverse-hover))}:host(.cc-btn--sm){--_btn-height: var(--_control-height-sm);--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-4));font-size:var(--_text-sm)}:host(.cc-btn--lg){--_btn-height: var(--_control-height-lg);--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-10));font-size:var(--_text-lg)}:host(.cc-btn--block){display:flex;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[ccButton], button[ccButton]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'cc-btn',
+                        '[class.cc-btn--secondary]': "variant() === 'secondary'",
+                        '[class.cc-btn--ghost]': "variant() === 'ghost'",
+                        '[class.cc-btn--whatsapp]': "variant() === 'whatsapp'",
+                        '[class.cc-btn--inverse]': "variant() === 'inverse'",
+                        '[class.cc-btn--sm]': "size() === 'sm'",
+                        '[class.cc-btn--lg]': "size() === 'lg'",
+                        '[class.cc-btn--block]': 'block()',
+                    }, template: "<ng-content />\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_btn-bg: var(--cc-btn-bg, var(--_accent));--_btn-color: var(--cc-btn-color, var(--_on-accent));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_accent-hover));--_btn-hover-color: var(--cc-btn-hover-color, var(--_btn-color));--_btn-border: var(--cc-btn-border, transparent);--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-6));--_btn-height: var(--_control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--_space-2);min-height:var(--_btn-height);padding:var(--_space-2) var(--_btn-padding-x);border:2px solid var(--_btn-border);border-radius:var(--cc-btn-radius, var(--_radius));font:inherit;font-size:var(--_text-md);font-weight:var(--cc-btn-font-weight, var(--_weight-semibold));letter-spacing:var(--cc-btn-letter-spacing, var(--_tracking-wide));line-height:var(--_leading-tight);text-align:center;text-decoration:none;text-transform:var(--cc-btn-text-transform, none);color:var(--_btn-color);background:var(--_btn-bg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--_duration) var(--_ease),color var(--_duration) var(--_ease),border-color var(--_duration) var(--_ease),box-shadow var(--_duration) var(--_ease)}:host(:hover){color:var(--_btn-hover-color);background:var(--_btn-hover-bg)}:host(:focus-visible){outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}:host(:disabled),:host([aria-disabled=\"true\"]){opacity:.5;cursor:not-allowed;pointer-events:none}:host(.cc-btn--secondary){--_btn-bg: var(--cc-btn-bg, transparent);--_btn-color: var(--cc-btn-color, var(--_accent-text));--_btn-border: var(--cc-btn-border, var(--_accent));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_accent));--_btn-hover-color: var(--cc-btn-hover-color, var(--_on-accent))}:host(.cc-btn--ghost){--_btn-bg: var(--cc-btn-bg, transparent);--_btn-color: var(--cc-btn-color, var(--_text));--_btn-hover-bg: var(--cc-btn-hover-bg, color-mix(in srgb, var(--_text) 8%, transparent));--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-3));text-decoration:underline;text-underline-offset:.2em}:host(.cc-btn--whatsapp){--_btn-bg: var(--cc-btn-bg, var(--_whatsapp));--_btn-color: var(--cc-btn-color, var(--_on-whatsapp));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_whatsapp-hover))}:host(.cc-btn--inverse){--_btn-bg: var(--cc-btn-bg, var(--_inverse));--_btn-color: var(--cc-btn-color, var(--_on-inverse));--_btn-hover-bg: var(--cc-btn-hover-bg, var(--_inverse-hover))}:host(.cc-btn--sm){--_btn-height: var(--_control-height-sm);--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-4));font-size:var(--_text-sm)}:host(.cc-btn--lg){--_btn-height: var(--_control-height-lg);--_btn-padding-x: var(--cc-btn-padding-x, var(--_space-10));font-size:var(--_text-lg)}:host(.cc-btn--block){display:flex;width:100%}\n"] }]
+        }] });
+
+/**
+ * Section title with optional eyebrow, icon, subtitle and decorative rule.
+ * Use one per page section so every page shares the same heading rhythm.
+ *
+ * ```html
+ * <cc-section-heading title="Planes" subtitle="Para ti, en pareja o en grupo" iconSrc="assets/images/trebol.png" />
+ * <cc-section-heading title="Contacto" tone="inverse" align="center" level="h3" />
+ * ```
+ *
+ * Tokens: --cc-section-heading-color, --cc-section-heading-size, --cc-section-heading-rule,
+ * --cc-section-heading-gap, --cc-section-heading-icon-size.
+ */
+class SectionHeadingComponent {
+    title = input.required();
+    subtitle = input('');
+    /** Small text above the title. */
+    eyebrow = input('');
+    iconSrc = input('');
+    /** Heading level. The visual size does not change with the level. */
+    level = input('h2');
+    align = input('start');
+    /** `default` for light backgrounds, `inverse` for dark ones, `accent` for brand-colored titles. */
+    tone = input('default');
+    /** Shows a short accent line under the title. */
+    rule = input(false, { transform: booleanAttribute });
+    /** `sm` for sub-sections, `md` (default) for page sections, `lg` for heroes. */
+    size = input('md');
+    italic = input(false, { transform: booleanAttribute });
+    /** Id of the heading element, for anchors. */
+    headingId = input(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SectionHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SectionHeadingComponent, isStandalone: true, selector: "cc-section-heading", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cc-sh--center": "align() === 'center'", "class.cc-sh--inverse": "tone() === 'inverse'", "class.cc-sh--accent": "tone() === 'accent'", "class.cc-sh--rule": "rule()", "class.cc-sh--sm": "size() === 'sm'", "class.cc-sh--lg": "size() === 'lg'", "class.cc-sh--italic": "italic()" } }, ngImport: i0, template: "<div class=\"cc-sh\">\r\n  @if (eyebrow()) {\r\n    <p class=\"cc-sh__eyebrow\">{{ eyebrow() }}</p>\r\n  }\r\n  <div class=\"cc-sh__row\">\r\n    @if (iconSrc()) {\r\n      <img class=\"cc-sh__icon\" [src]=\"iconSrc()\" alt=\"\" />\r\n    }\r\n    @switch (level()) {\r\n      @case ('h1') {\r\n        <h1 class=\"cc-sh__title\" [attr.id]=\"headingId()\">{{ title() }}</h1>\r\n      }\r\n      @case ('h3') {\r\n        <h3 class=\"cc-sh__title\" [attr.id]=\"headingId()\">{{ title() }}</h3>\r\n      }\r\n      @default {\r\n        <h2 class=\"cc-sh__title\" [attr.id]=\"headingId()\">{{ title() }}</h2>\r\n      }\r\n    }\r\n  </div>\r\n  @if (rule()) {\r\n    <span class=\"cc-sh__rule\" aria-hidden=\"true\"></span>\r\n  }\r\n  @if (subtitle()) {\r\n    <p class=\"cc-sh__subtitle\">{{ subtitle() }}</p>\r\n  }\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_sh-color: var(--cc-section-heading-color, var(--_accent-text));--_sh-sub-color: var(--_text);display:block;margin-bottom:var(--cc-section-heading-gap, var(--_space-8))}:host(.cc-sh--inverse){--_sh-color: var(--cc-section-heading-color, var(--_on-inverse));--_sh-sub-color: var(--_on-inverse)}:host(.cc-sh--sm){--cc-section-heading-size: var(--_text-2xl)}:host(.cc-sh--lg){--cc-section-heading-size: var(--_text-4xl)}:host(.cc-sh--accent){--_sh-color: var(--cc-section-heading-color, var(--_heading))}.cc-sh{display:flex;flex-direction:column;gap:var(--_space-2)}:host(.cc-sh--center) .cc-sh{align-items:center;text-align:center}.cc-sh__eyebrow{margin:0;font-size:var(--_text-sm);font-weight:var(--_weight-semibold);letter-spacing:var(--_tracking-wide);text-transform:uppercase;color:var(--_sh-sub-color)}.cc-sh__row{display:flex;align-items:center;gap:var(--_space-3)}.cc-sh__icon{flex:none;width:var(--cc-section-heading-icon-size, 2.5rem);height:auto}.cc-sh__title{margin:0;font-family:var(--_font-heading);font-size:var(--cc-section-heading-size, var(--_text-3xl));font-style:var(--_heading-style);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);color:var(--_sh-color)}:host(.cc-sh--italic) .cc-sh__title{font-style:italic}.cc-sh__rule{display:block;width:3.5rem;height:3px;background:var(--cc-section-heading-rule, var(--_accent))}.cc-sh__subtitle{max-width:42rem;margin:0;font-size:var(--_text-lg);line-height:var(--_leading-body);color:var(--_sh-sub-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SectionHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-section-heading', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cc-sh--center]': "align() === 'center'",
+                        '[class.cc-sh--inverse]': "tone() === 'inverse'",
+                        '[class.cc-sh--accent]': "tone() === 'accent'",
+                        '[class.cc-sh--rule]': 'rule()',
+                        '[class.cc-sh--sm]': "size() === 'sm'",
+                        '[class.cc-sh--lg]': "size() === 'lg'",
+                        '[class.cc-sh--italic]': 'italic()',
+                    }, template: "<div class=\"cc-sh\">\r\n  @if (eyebrow()) {\r\n    <p class=\"cc-sh__eyebrow\">{{ eyebrow() }}</p>\r\n  }\r\n  <div class=\"cc-sh__row\">\r\n    @if (iconSrc()) {\r\n      <img class=\"cc-sh__icon\" [src]=\"iconSrc()\" alt=\"\" />\r\n    }\r\n    @switch (level()) {\r\n      @case ('h1') {\r\n        <h1 class=\"cc-sh__title\" [attr.id]=\"headingId()\">{{ title() }}</h1>\r\n      }\r\n      @case ('h3') {\r\n        <h3 class=\"cc-sh__title\" [attr.id]=\"headingId()\">{{ title() }}</h3>\r\n      }\r\n      @default {\r\n        <h2 class=\"cc-sh__title\" [attr.id]=\"headingId()\">{{ title() }}</h2>\r\n      }\r\n    }\r\n  </div>\r\n  @if (rule()) {\r\n    <span class=\"cc-sh__rule\" aria-hidden=\"true\"></span>\r\n  }\r\n  @if (subtitle()) {\r\n    <p class=\"cc-sh__subtitle\">{{ subtitle() }}</p>\r\n  }\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_sh-color: var(--cc-section-heading-color, var(--_accent-text));--_sh-sub-color: var(--_text);display:block;margin-bottom:var(--cc-section-heading-gap, var(--_space-8))}:host(.cc-sh--inverse){--_sh-color: var(--cc-section-heading-color, var(--_on-inverse));--_sh-sub-color: var(--_on-inverse)}:host(.cc-sh--sm){--cc-section-heading-size: var(--_text-2xl)}:host(.cc-sh--lg){--cc-section-heading-size: var(--_text-4xl)}:host(.cc-sh--accent){--_sh-color: var(--cc-section-heading-color, var(--_heading))}.cc-sh{display:flex;flex-direction:column;gap:var(--_space-2)}:host(.cc-sh--center) .cc-sh{align-items:center;text-align:center}.cc-sh__eyebrow{margin:0;font-size:var(--_text-sm);font-weight:var(--_weight-semibold);letter-spacing:var(--_tracking-wide);text-transform:uppercase;color:var(--_sh-sub-color)}.cc-sh__row{display:flex;align-items:center;gap:var(--_space-3)}.cc-sh__icon{flex:none;width:var(--cc-section-heading-icon-size, 2.5rem);height:auto}.cc-sh__title{margin:0;font-family:var(--_font-heading);font-size:var(--cc-section-heading-size, var(--_text-3xl));font-style:var(--_heading-style);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);color:var(--_sh-color)}:host(.cc-sh--italic) .cc-sh__title{font-style:italic}.cc-sh__rule{display:block;width:3.5rem;height:3px;background:var(--cc-section-heading-rule, var(--_accent))}.cc-sh__subtitle{max-width:42rem;margin:0;font-size:var(--_text-lg);line-height:var(--_leading-body);color:var(--_sh-sub-color)}\n"] }]
+        }] });
+
+/**
+ * Highlighted note for important conditions, warnings or tips. The content is projected.
+ *
+ * ```html
+ * <cc-notice tone="warning" title="Importante">Su bono tiene vigencia de 30 días.</cc-notice>
+ * ```
+ *
+ * Tokens: --cc-notice-bg, --cc-notice-border, --cc-notice-color.
+ */
+class NoticeComponent {
+    /** `info` uses the brand colors, `warning` a red accent, `success` the primary color. */
+    tone = input('info');
+    title = input('');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NoticeComponent, isStandalone: true, selector: "cc-notice", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "note" }, properties: { "class.cc-notice--warning": "tone() === 'warning'", "class.cc-notice--success": "tone() === 'success'" } }, ngImport: i0, template: "@if (title()) {\r\n  <p class=\"cc-notice__title\">{{ title() }}</p>\r\n}\r\n<div class=\"cc-notice__body\"><ng-content /></div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_notice-accent: var(--cc-notice-border, var(--_accent));--_notice-bg: var(--cc-notice-bg, var(--_surface));--_notice-color: var(--cc-notice-color, var(--_text));display:block;padding:var(--_space-4) var(--_space-5);border-left:4px solid var(--_notice-accent);border-radius:var(--_radius);color:var(--_notice-color);background:var(--_notice-bg);line-height:var(--_leading-body)}:host(.cc-notice--warning){--_notice-accent: var(--cc-notice-border, var(--_danger));--_notice-bg: var(--cc-notice-bg, var(--_danger-surface));--_notice-color: var(--cc-notice-color, var(--_on-danger-surface))}:host(.cc-notice--success){--_notice-accent: var(--cc-notice-border, var(--_inverse));--_notice-bg: var(--cc-notice-bg, var(--_surface-alt))}.cc-notice__title{margin:0 0 var(--_space-1);font-weight:var(--_weight-bold)}.cc-notice__body{font-size:var(--_text-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoticeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-notice', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'note',
+                        '[class.cc-notice--warning]': "tone() === 'warning'",
+                        '[class.cc-notice--success]': "tone() === 'success'",
+                    }, template: "@if (title()) {\r\n  <p class=\"cc-notice__title\">{{ title() }}</p>\r\n}\r\n<div class=\"cc-notice__body\"><ng-content /></div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_notice-accent: var(--cc-notice-border, var(--_accent));--_notice-bg: var(--cc-notice-bg, var(--_surface));--_notice-color: var(--cc-notice-color, var(--_text));display:block;padding:var(--_space-4) var(--_space-5);border-left:4px solid var(--_notice-accent);border-radius:var(--_radius);color:var(--_notice-color);background:var(--_notice-bg);line-height:var(--_leading-body)}:host(.cc-notice--warning){--_notice-accent: var(--cc-notice-border, var(--_danger));--_notice-bg: var(--cc-notice-bg, var(--_danger-surface));--_notice-color: var(--cc-notice-color, var(--_on-danger-surface))}:host(.cc-notice--success){--_notice-accent: var(--cc-notice-border, var(--_inverse));--_notice-bg: var(--cc-notice-bg, var(--_surface-alt))}.cc-notice__title{margin:0 0 var(--_space-1);font-weight:var(--_weight-bold)}.cc-notice__body{font-size:var(--_text-md)}\n"] }]
+        }] });
+
+/**
+ * One question of `cc-faq`. The answer is projected, so it can contain links.
+ *
+ * ```html
+ * <cc-faq title="Preguntas frecuentes">
+ *   <cc-faq-item question="¿Qué planes tienen?">
+ *     Míralos todos en <a routerLink="/planes">planes</a>.
+ *   </cc-faq-item>
+ * </cc-faq>
+ * ```
+ *
+ * Tokens: --cc-faq-bg, --cc-faq-question-color, --cc-faq-answer-color.
+ */
+class FaqItemComponent {
+    question = input.required();
+    /** Starts expanded. */
+    open = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FaqItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: FaqItemComponent, isStandalone: true, selector: "cc-faq-item", inputs: { question: { classPropertyName: "question", publicName: "question", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<details class=\"cc-faq-item\" [open]=\"open()\">\r\n  <summary>\r\n    <span>{{ question() }}</span>\r\n    <svg class=\"cc-faq-item__chevron\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n      <path d=\"m6 9 6 6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  </summary>\r\n  <div class=\"cc-faq-item__answer\"><ng-content /></div>\r\n</details>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block}.cc-faq-item{border-radius:var(--_radius);background:var(--cc-faq-bg, var(--_surface))}summary{display:flex;align-items:center;justify-content:space-between;gap:var(--_space-4);min-height:var(--_control-height);padding:var(--_space-4) var(--_space-5);font-size:var(--_text-md);font-weight:var(--_weight-semibold);line-height:var(--_leading-snug);color:var(--cc-faq-question-color, var(--_text));list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}.cc-faq-item__chevron{flex:none;width:1.25rem;height:1.25rem;transition:transform var(--_duration) var(--_ease)}.cc-faq-item[open] .cc-faq-item__chevron{transform:rotate(180deg)}.cc-faq-item__answer{padding:0 var(--_space-5) var(--_space-5);line-height:var(--_leading-body);color:var(--cc-faq-answer-color, var(--_text))}.cc-faq-item__answer ::ng-deep a{color:inherit;font-weight:var(--_weight-semibold);text-decoration:underline;text-underline-offset:.2em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FaqItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-faq-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<details class=\"cc-faq-item\" [open]=\"open()\">\r\n  <summary>\r\n    <span>{{ question() }}</span>\r\n    <svg class=\"cc-faq-item__chevron\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n      <path d=\"m6 9 6 6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  </summary>\r\n  <div class=\"cc-faq-item__answer\"><ng-content /></div>\r\n</details>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block}.cc-faq-item{border-radius:var(--_radius);background:var(--cc-faq-bg, var(--_surface))}summary{display:flex;align-items:center;justify-content:space-between;gap:var(--_space-4);min-height:var(--_control-height);padding:var(--_space-4) var(--_space-5);font-size:var(--_text-md);font-weight:var(--_weight-semibold);line-height:var(--_leading-snug);color:var(--cc-faq-question-color, var(--_text));list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}.cc-faq-item__chevron{flex:none;width:1.25rem;height:1.25rem;transition:transform var(--_duration) var(--_ease)}.cc-faq-item[open] .cc-faq-item__chevron{transform:rotate(180deg)}.cc-faq-item__answer{padding:0 var(--_space-5) var(--_space-5);line-height:var(--_leading-body);color:var(--cc-faq-answer-color, var(--_text))}.cc-faq-item__answer ::ng-deep a{color:inherit;font-weight:var(--_weight-semibold);text-decoration:underline;text-underline-offset:.2em}\n"] }]
+        }] });
+
 /**
  * Floating WhatsApp button, fixed to a corner of the screen.
  *
+ * `variant`:
+ * - `icon` (default): round button with the logo.
+ * - `extended`: pill with the logo and `label` as visible text.
+ *
  * ```html
  * <cc-whatsapp-button [href]="whatsappLink" />
- * <cc-whatsapp-button [href]="whatsappLink" iconSrc="assets/icons/whatsapp.png" position="left" />
+ * <cc-whatsapp-button [href]="whatsappLink" variant="extended" label="Reservar" position="left" />
  * ```
+ *
+ * Tokens: --cc-whatsapp, --cc-whatsapp-hover, --cc-whatsapp-size, --cc-whatsapp-offset-x,
+ * --cc-whatsapp-offset-y.
  */
 class WhatsappButtonComponent {
     /** WhatsApp link. Build it with `whatsappUrl(phone, message)`. */
     href = input.required();
     /** Custom icon. Without it, the WhatsApp logo is drawn as SVG. */
     iconSrc = input('');
+    /** Accessible name, and the visible text in the `extended` variant. */
     label = input('Escríbenos por WhatsApp');
+    variant = input('icon');
+    size = input('md');
     position = input('right');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WhatsappButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: WhatsappButtonComponent, isStandalone: true, selector: "cc-whatsapp-button", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n  class=\"cc-wa\"\n  [class.cc-wa--left]=\"position() === 'left'\"\n  [href]=\"href()\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  [attr.aria-label]=\"label()\"\n>\n  @if (iconSrc()) {\n    <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-wa__img\" />\n  } @else {\n    <svg class=\"cc-wa__svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n      <circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"#25D366\" />\n      <path\n        fill=\"#fff\"\n        d=\"M23.3 8.7A10.3 10.3 0 0 0 7 21.1L5.6 26.4l5.4-1.4a10.3 10.3 0 0 0 4.9 1.3 10.3 10.3 0 0 0 7.4-17.6Zm-7.3 15.8a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3a8.5 8.5 0 1 1 7.1 4Zm4.7-6.4c-.3-.1-1.5-.7-1.8-.8-.2-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1a7 7 0 0 1-3.5-3c-.3-.5.3-.4.7-1.4.1-.2 0-.3 0-.4l-.8-2c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7a2.8 2.8 0 0 0 1.8-1.3 2.3 2.3 0 0 0 .2-1.3c-.1-.1-.3-.2-.6-.3Z\"\n      />\n    </svg>\n  }\n</a>\n", styles: [".cc-wa{position:fixed;z-index:var(--cc-whatsapp-z, 20);right:var(--cc-whatsapp-offset-x, 2rem);bottom:var(--cc-whatsapp-offset-y, 2.5rem);display:block;transition:transform .3s ease-in}.cc-wa--left{right:auto;left:var(--cc-whatsapp-offset-x, 2rem)}.cc-wa:hover{transform:scale(1.25)}.cc-wa__img,.cc-wa__svg{display:block;width:var(--cc-whatsapp-size, 2.5rem);height:auto;border-radius:9999px;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1))}@media (min-width: 1024px){.cc-wa{right:var(--cc-whatsapp-offset-x-lg, 3.5rem)}.cc-wa--left{right:auto;left:var(--cc-whatsapp-offset-x-lg, 3.5rem)}.cc-wa__img,.cc-wa__svg{width:var(--cc-whatsapp-size-lg, 3.5rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: WhatsappButtonComponent, isStandalone: true, selector: "cc-whatsapp-button", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cc-wa--left": "position() === 'left'", "class.cc-wa--extended": "variant() === 'extended'", "class.cc-wa--sm": "size() === 'sm'" } }, ngImport: i0, template: "<a class=\"cc-wa\" [href]=\"href()\" target=\"_blank\" rel=\"noopener\" [attr.aria-label]=\"variant() === 'icon' ? label() : null\">\r\n  @if (iconSrc()) {\r\n    <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-wa__icon\" />\r\n  } @else {\r\n    <svg class=\"cc-wa__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\r\n      <circle cx=\"16\" cy=\"16\" r=\"16\" style=\"fill: var(--_whatsapp)\" />\r\n      <path\r\n        fill=\"#fff\"\r\n        d=\"M23.3 8.7A10.3 10.3 0 0 0 7 21.1L5.6 26.4l5.4-1.4a10.3 10.3 0 0 0 4.9 1.3 10.3 10.3 0 0 0 7.4-17.6Zm-7.3 15.8a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3a8.5 8.5 0 1 1 7.1 4Zm4.7-6.4c-.3-.1-1.5-.7-1.8-.8-.2-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1a7 7 0 0 1-3.5-3c-.3-.5.3-.4.7-1.4.1-.2 0-.3 0-.4l-.8-2c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7a2.8 2.8 0 0 0 1.8-1.3 2.3 2.3 0 0 0 .2-1.3c-.1-.1-.3-.2-.6-.3Z\"\r\n      />\r\n    </svg>\r\n  }\r\n  @if (variant() === 'extended') {\r\n    <span class=\"cc-wa__label\">{{ label() }}</span>\r\n  }\r\n</a>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_wa-size: var(--cc-whatsapp-size, 3.5rem);--_wa-offset-x: var(--cc-whatsapp-offset-x, var(--_space-5));--_wa-offset-y: var(--cc-whatsapp-offset-y, var(--_space-6));position:fixed;right:var(--_wa-offset-x);bottom:var(--_wa-offset-y);z-index:var(--_z-float);display:block}:host(.cc-wa--left){right:auto;left:var(--_wa-offset-x)}:host(.cc-wa--sm){--_wa-size: var(--cc-whatsapp-size, var(--_control-height))}.cc-wa{display:flex;align-items:center;gap:var(--_space-2);border-radius:var(--_radius-pill);text-decoration:none;box-shadow:var(--_shadow-lg);transition:transform var(--_duration) var(--_ease),box-shadow var(--_duration) var(--_ease)}.cc-wa:hover{transform:scale(1.08);box-shadow:var(--_shadow-xl)}.cc-wa__icon{display:block;flex:none;width:var(--_wa-size);height:var(--_wa-size);border-radius:var(--_radius-pill)}:host(.cc-wa--extended) .cc-wa{padding:var(--_space-1) var(--_space-5) var(--_space-1) var(--_space-1);font-weight:var(--_weight-semibold);color:var(--_on-whatsapp);background:var(--_whatsapp)}:host(.cc-wa--extended) .cc-wa:hover{background:var(--_whatsapp-hover);transform:translateY(-2px)}:host(.cc-wa--extended) .cc-wa__icon{width:calc(var(--_wa-size) - var(--_space-2));height:calc(var(--_wa-size) - var(--_space-2))}@media (min-width: 1024px){:host{right:var(--cc-whatsapp-offset-x-lg, var(--_space-10));bottom:var(--cc-whatsapp-offset-y-lg, var(--_space-8))}:host(.cc-wa--left){right:auto;left:var(--cc-whatsapp-offset-x-lg, var(--_space-10))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WhatsappButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-whatsapp-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"cc-wa\"\n  [class.cc-wa--left]=\"position() === 'left'\"\n  [href]=\"href()\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  [attr.aria-label]=\"label()\"\n>\n  @if (iconSrc()) {\n    <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-wa__img\" />\n  } @else {\n    <svg class=\"cc-wa__svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n      <circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"#25D366\" />\n      <path\n        fill=\"#fff\"\n        d=\"M23.3 8.7A10.3 10.3 0 0 0 7 21.1L5.6 26.4l5.4-1.4a10.3 10.3 0 0 0 4.9 1.3 10.3 10.3 0 0 0 7.4-17.6Zm-7.3 15.8a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3a8.5 8.5 0 1 1 7.1 4Zm4.7-6.4c-.3-.1-1.5-.7-1.8-.8-.2-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1a7 7 0 0 1-3.5-3c-.3-.5.3-.4.7-1.4.1-.2 0-.3 0-.4l-.8-2c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7a2.8 2.8 0 0 0 1.8-1.3 2.3 2.3 0 0 0 .2-1.3c-.1-.1-.3-.2-.6-.3Z\"\n      />\n    </svg>\n  }\n</a>\n", styles: [".cc-wa{position:fixed;z-index:var(--cc-whatsapp-z, 20);right:var(--cc-whatsapp-offset-x, 2rem);bottom:var(--cc-whatsapp-offset-y, 2.5rem);display:block;transition:transform .3s ease-in}.cc-wa--left{right:auto;left:var(--cc-whatsapp-offset-x, 2rem)}.cc-wa:hover{transform:scale(1.25)}.cc-wa__img,.cc-wa__svg{display:block;width:var(--cc-whatsapp-size, 2.5rem);height:auto;border-radius:9999px;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1))}@media (min-width: 1024px){.cc-wa{right:var(--cc-whatsapp-offset-x-lg, 3.5rem)}.cc-wa--left{right:auto;left:var(--cc-whatsapp-offset-x-lg, 3.5rem)}.cc-wa__img,.cc-wa__svg{width:var(--cc-whatsapp-size-lg, 3.5rem)}}\n"] }]
+            args: [{ selector: 'cc-whatsapp-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cc-wa--left]': "position() === 'left'",
+                        '[class.cc-wa--extended]': "variant() === 'extended'",
+                        '[class.cc-wa--sm]': "size() === 'sm'",
+                    }, template: "<a class=\"cc-wa\" [href]=\"href()\" target=\"_blank\" rel=\"noopener\" [attr.aria-label]=\"variant() === 'icon' ? label() : null\">\r\n  @if (iconSrc()) {\r\n    <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-wa__icon\" />\r\n  } @else {\r\n    <svg class=\"cc-wa__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\r\n      <circle cx=\"16\" cy=\"16\" r=\"16\" style=\"fill: var(--_whatsapp)\" />\r\n      <path\r\n        fill=\"#fff\"\r\n        d=\"M23.3 8.7A10.3 10.3 0 0 0 7 21.1L5.6 26.4l5.4-1.4a10.3 10.3 0 0 0 4.9 1.3 10.3 10.3 0 0 0 7.4-17.6Zm-7.3 15.8a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3a8.5 8.5 0 1 1 7.1 4Zm4.7-6.4c-.3-.1-1.5-.7-1.8-.8-.2-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1a7 7 0 0 1-3.5-3c-.3-.5.3-.4.7-1.4.1-.2 0-.3 0-.4l-.8-2c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7a2.8 2.8 0 0 0 1.8-1.3 2.3 2.3 0 0 0 .2-1.3c-.1-.1-.3-.2-.6-.3Z\"\r\n      />\r\n    </svg>\r\n  }\r\n  @if (variant() === 'extended') {\r\n    <span class=\"cc-wa__label\">{{ label() }}</span>\r\n  }\r\n</a>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_wa-size: var(--cc-whatsapp-size, 3.5rem);--_wa-offset-x: var(--cc-whatsapp-offset-x, var(--_space-5));--_wa-offset-y: var(--cc-whatsapp-offset-y, var(--_space-6));position:fixed;right:var(--_wa-offset-x);bottom:var(--_wa-offset-y);z-index:var(--_z-float);display:block}:host(.cc-wa--left){right:auto;left:var(--_wa-offset-x)}:host(.cc-wa--sm){--_wa-size: var(--cc-whatsapp-size, var(--_control-height))}.cc-wa{display:flex;align-items:center;gap:var(--_space-2);border-radius:var(--_radius-pill);text-decoration:none;box-shadow:var(--_shadow-lg);transition:transform var(--_duration) var(--_ease),box-shadow var(--_duration) var(--_ease)}.cc-wa:hover{transform:scale(1.08);box-shadow:var(--_shadow-xl)}.cc-wa__icon{display:block;flex:none;width:var(--_wa-size);height:var(--_wa-size);border-radius:var(--_radius-pill)}:host(.cc-wa--extended) .cc-wa{padding:var(--_space-1) var(--_space-5) var(--_space-1) var(--_space-1);font-weight:var(--_weight-semibold);color:var(--_on-whatsapp);background:var(--_whatsapp)}:host(.cc-wa--extended) .cc-wa:hover{background:var(--_whatsapp-hover);transform:translateY(-2px)}:host(.cc-wa--extended) .cc-wa__icon{width:calc(var(--_wa-size) - var(--_space-2));height:calc(var(--_wa-size) - var(--_space-2))}@media (min-width: 1024px){:host{right:var(--cc-whatsapp-offset-x-lg, var(--_space-10));bottom:var(--cc-whatsapp-offset-y-lg, var(--_space-8))}:host(.cc-wa--left){right:auto;left:var(--cc-whatsapp-offset-x-lg, var(--_space-10))}}\n"] }]
         }] });
 
 /**
- * Modal over the page, for example a promotion shown when the site opens.
- * Shows `imageSrc`, or the projected content when there is no image.
- * Closes with the ✕ button, a backdrop click or the Escape key.
+ * Modal over the page, for example a promotion. Shows `imageSrc`, or the projected
+ * content when there is no image, plus an optional call to action.
+ *
+ * It decides by itself when to open:
+ * - `autoOpen` opens it in the browser after `delayMs` (never during SSR, so it is not
+ *   part of the prerendered page).
+ * - `rememberKey` stores the dismissal in localStorage for `rememberDays` days, so it
+ *   does not reopen on every visit.
+ *
+ * Closes with the ✕ button, a backdrop click or Escape. Focus moves into the modal,
+ * stays inside while open and returns to the previous element on close.
  *
  * ```html
- * <cc-promo-modal [(open)]="showPromo" imageSrc="assets/images/pop.jpeg" imageAlt="Promoción" />
+ * <cc-promo-modal imageSrc="assets/images/pop.jpeg" imageAlt="Promoción" [delayMs]="6000"
+ *                 rememberKey="promo-octubre" ctaLabel="Reservar la promo" [ctaHref]="whatsapp" />
  * ```
+ *
+ * Tokens: --cc-modal-backdrop, --cc-modal-radius, --cc-modal-close-bg, --cc-modal-close-color.
  */
 class PromoModalComponent {
-    /** Whether the modal is visible. Use `[(open)]` to bind both ways. */
-    open = model(true);
+    /** Whether the modal is visible. Use `[(open)]` to control it from outside. */
+    open = model(false);
+    /** Opens the modal by itself in the browser after `delayMs`. */
+    autoOpen = input(false);
+    delayMs = input(0);
+    /** localStorage key to remember the dismissal. Change it for each new promotion. */
+    rememberKey = input('');
+    rememberDays = input(7);
     imageSrc = input('');
     imageAlt = input('');
-    /** Makes the image a link, for example to WhatsApp. */
+    /** Makes the image a link. */
     link = input('');
+    /** Button under the image. Hidden when `ctaHref` is empty. */
+    ctaLabel = input('Quiero esta promoción');
+    ctaHref = input('');
+    ctaVariant = input('primary');
     closeOnBackdrop = input(true);
     closeLabel = input('Cerrar');
     closed = output();
+    document = inject(DOCUMENT);
+    box = viewChild('box');
+    closeButton = viewChild('closeButton');
+    isOpen = computed(() => this.open());
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            if (!this.autoOpen() || this.wasDismissed())
+                return;
+            const timer = setTimeout(() => this.open.set(true), Math.max(this.delayMs(), 0));
+            destroyRef.onDestroy(() => clearTimeout(timer));
+        });
+        effect((onCleanup) => {
+            if (!this.isOpen())
+                return;
+            untracked(() => {
+                const body = this.document.body;
+                const previousOverflow = body.style.overflow;
+                const opener = this.document.activeElement;
+                body.style.overflow = 'hidden';
+                queueMicrotask(() => this.closeButton()?.nativeElement.focus());
+                onCleanup(() => {
+                    body.style.overflow = previousOverflow;
+                    opener?.focus?.();
+                });
+            });
+        });
+    }
     close() {
         this.open.set(false);
+        this.remember();
         this.closed.emit();
     }
+    /** Keeps Tab and Shift+Tab inside the modal. */
+    trapFocus(event) {
+        if (event.key !== 'Tab')
+            return;
+        const focusable = this.box()?.nativeElement.querySelectorAll('a[href], button');
+        if (!focusable?.length)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    storage() {
+        try {
+            return this.document.defaultView?.localStorage ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    wasDismissed() {
+        const key = this.rememberKey();
+        if (!key)
+            return false;
+        try {
+            const until = Number(this.storage()?.getItem(`cc-promo:${key}`) ?? 0);
+            return until > Date.now();
+        }
+        catch {
+            return false;
+        }
+    }
+    remember() {
+        const key = this.rememberKey();
+        if (!key)
+            return;
+        try {
+            const until = Date.now() + this.rememberDays() * 24 * 60 * 60 * 1000;
+            this.storage()?.setItem(`cc-promo:${key}`, String(until));
+        }
+        catch {
+            // Storage can be unavailable (private mode, blocked cookies); the modal still works.
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PromoModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PromoModalComponent, isStandalone: true, selector: "cc-promo-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "open() && close()" } }, ngImport: i0, template: "@if (open()) {\n  <div class=\"cc-modal\" (click)=\"closeOnBackdrop() && close()\">\n    <div\n      class=\"cc-modal__box\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"imageAlt() || null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <button type=\"button\" class=\"cc-modal__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\n        \u2715\n      </button>\n      @if (imageSrc()) {\n        @if (link()) {\n          <a [href]=\"link()\" target=\"_blank\" rel=\"noopener\">\n            <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\n          </a>\n        } @else {\n          <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\n        }\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </div>\n}\n", styles: [".cc-modal{position:fixed;inset:0;z-index:var(--cc-modal-z, 50);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--cc-modal-backdrop, rgb(0 0 0 / .7))}.cc-modal__box{position:relative;width:fit-content;max-width:92vw}.cc-modal__img{display:block;max-width:100%;max-height:85vh;border-radius:var(--cc-modal-radius, .5rem);box-shadow:0 25px 50px -12px #00000040}.cc-modal__close{position:absolute;top:-.75rem;right:-.75rem;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border:0;border-radius:9999px;background:#fff;color:#374151;font-size:1.125rem;line-height:1;cursor:pointer;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1));transition:transform .15s,background-color .15s}.cc-modal__close:hover{background:#f3f4f6;transform:scale(1.1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PromoModalComponent, isStandalone: true, selector: "cc-promo-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, delayMs: { classPropertyName: "delayMs", publicName: "delayMs", isSignal: true, isRequired: false, transformFunction: null }, rememberKey: { classPropertyName: "rememberKey", publicName: "rememberKey", isSignal: true, isRequired: false, transformFunction: null }, rememberDays: { classPropertyName: "rememberDays", publicName: "rememberDays", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaHref: { classPropertyName: "ctaHref", publicName: "ctaHref", isSignal: true, isRequired: false, transformFunction: null }, ctaVariant: { classPropertyName: "ctaVariant", publicName: "ctaVariant", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "open() && close()" } }, viewQueries: [{ propertyName: "box", first: true, predicate: ["box"], descendants: true, isSignal: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\r\n  <div class=\"cc-modal\" (click)=\"closeOnBackdrop() && close()\">\r\n    <div\r\n      #box\r\n      class=\"cc-modal__box\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-label]=\"imageAlt() || null\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"trapFocus($event)\"\r\n    >\r\n      <button #closeButton type=\"button\" class=\"cc-modal__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6 6 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>\r\n      </button>\r\n      @if (imageSrc()) {\r\n        @if (link()) {\r\n          <a [href]=\"link()\" target=\"_blank\" rel=\"noopener\" class=\"cc-modal__media\">\r\n            <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\r\n          </a>\r\n        } @else {\r\n          <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\r\n        }\r\n      } @else {\r\n        <div class=\"cc-modal__content\"><ng-content /></div>\r\n      }\r\n      @if (ctaHref()) {\r\n        <a ccButton [variant]=\"ctaVariant()\" size=\"lg\" block class=\"cc-modal__cta\" [href]=\"ctaHref()\" target=\"_blank\" rel=\"noopener\" (click)=\"close()\">\r\n          {{ ctaLabel() }}\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ".cc-modal{position:fixed;inset:0;z-index:var(--_z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--_space-4);background:var(--cc-modal-backdrop, var(--_overlay));animation:cc-modal-fade var(--_duration) var(--_ease)}.cc-modal__box{position:relative;display:flex;flex-direction:column;gap:var(--_space-3);width:fit-content;max-width:min(92vw,36rem)}.cc-modal__media{display:block}.cc-modal__img{display:block;max-width:100%;max-height:calc(85vh - var(--_control-height-lg));border-radius:var(--cc-modal-radius, var(--_radius-md));box-shadow:var(--_shadow-xl)}.cc-modal__content{padding:var(--_space-6);border-radius:var(--cc-modal-radius, var(--_radius-md));color:var(--_text);background:var(--_canvas);box-shadow:var(--_shadow-xl)}.cc-modal__close{position:absolute;top:calc(-1 * var(--_space-3));right:calc(-1 * var(--_space-3));z-index:1;display:flex;align-items:center;justify-content:center;width:var(--_control-height);height:var(--_control-height);padding:0;border:0;border-radius:var(--_radius-pill);color:var(--cc-modal-close-color, var(--_heading));background:var(--cc-modal-close-bg, var(--_canvas));box-shadow:var(--_shadow-lg);cursor:pointer;transition:transform var(--_duration-fast) var(--_ease)}.cc-modal__close:hover{transform:scale(1.08)}.cc-modal__close svg{width:1.25rem;height:1.25rem}@keyframes cc-modal-fade{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "a[ccButton], button[ccButton]", inputs: ["variant", "size", "block"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PromoModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-promo-modal', changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:keydown.escape)': 'open() && close()' }, template: "@if (open()) {\n  <div class=\"cc-modal\" (click)=\"closeOnBackdrop() && close()\">\n    <div\n      class=\"cc-modal__box\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"imageAlt() || null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <button type=\"button\" class=\"cc-modal__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\n        \u2715\n      </button>\n      @if (imageSrc()) {\n        @if (link()) {\n          <a [href]=\"link()\" target=\"_blank\" rel=\"noopener\">\n            <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\n          </a>\n        } @else {\n          <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\n        }\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </div>\n}\n", styles: [".cc-modal{position:fixed;inset:0;z-index:var(--cc-modal-z, 50);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--cc-modal-backdrop, rgb(0 0 0 / .7))}.cc-modal__box{position:relative;width:fit-content;max-width:92vw}.cc-modal__img{display:block;max-width:100%;max-height:85vh;border-radius:var(--cc-modal-radius, .5rem);box-shadow:0 25px 50px -12px #00000040}.cc-modal__close{position:absolute;top:-.75rem;right:-.75rem;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border:0;border-radius:9999px;background:#fff;color:#374151;font-size:1.125rem;line-height:1;cursor:pointer;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1));transition:transform .15s,background-color .15s}.cc-modal__close:hover{background:#f3f4f6;transform:scale(1.1)}\n"] }]
-        }] });
+            args: [{ selector: 'cc-promo-modal', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:keydown.escape)': 'open() && close()' }, template: "@if (open()) {\r\n  <div class=\"cc-modal\" (click)=\"closeOnBackdrop() && close()\">\r\n    <div\r\n      #box\r\n      class=\"cc-modal__box\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-label]=\"imageAlt() || null\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"trapFocus($event)\"\r\n    >\r\n      <button #closeButton type=\"button\" class=\"cc-modal__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6 6 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>\r\n      </button>\r\n      @if (imageSrc()) {\r\n        @if (link()) {\r\n          <a [href]=\"link()\" target=\"_blank\" rel=\"noopener\" class=\"cc-modal__media\">\r\n            <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\r\n          </a>\r\n        } @else {\r\n          <img [src]=\"imageSrc()\" [alt]=\"imageAlt()\" class=\"cc-modal__img\" />\r\n        }\r\n      } @else {\r\n        <div class=\"cc-modal__content\"><ng-content /></div>\r\n      }\r\n      @if (ctaHref()) {\r\n        <a ccButton [variant]=\"ctaVariant()\" size=\"lg\" block class=\"cc-modal__cta\" [href]=\"ctaHref()\" target=\"_blank\" rel=\"noopener\" (click)=\"close()\">\r\n          {{ ctaLabel() }}\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ".cc-modal{position:fixed;inset:0;z-index:var(--_z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--_space-4);background:var(--cc-modal-backdrop, var(--_overlay));animation:cc-modal-fade var(--_duration) var(--_ease)}.cc-modal__box{position:relative;display:flex;flex-direction:column;gap:var(--_space-3);width:fit-content;max-width:min(92vw,36rem)}.cc-modal__media{display:block}.cc-modal__img{display:block;max-width:100%;max-height:calc(85vh - var(--_control-height-lg));border-radius:var(--cc-modal-radius, var(--_radius-md));box-shadow:var(--_shadow-xl)}.cc-modal__content{padding:var(--_space-6);border-radius:var(--cc-modal-radius, var(--_radius-md));color:var(--_text);background:var(--_canvas);box-shadow:var(--_shadow-xl)}.cc-modal__close{position:absolute;top:calc(-1 * var(--_space-3));right:calc(-1 * var(--_space-3));z-index:1;display:flex;align-items:center;justify-content:center;width:var(--_control-height);height:var(--_control-height);padding:0;border:0;border-radius:var(--_radius-pill);color:var(--cc-modal-close-color, var(--_heading));background:var(--cc-modal-close-bg, var(--_canvas));box-shadow:var(--_shadow-lg);cursor:pointer;transition:transform var(--_duration-fast) var(--_ease)}.cc-modal__close:hover{transform:scale(1.08)}.cc-modal__close svg{width:1.25rem;height:1.25rem}@keyframes cc-modal-fade{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Title strip at the top of a page, with an optional back link and icon.
@@ -322,24 +578,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  *
  * ```html
  * <cc-page-banner title="Reserva tu plan - Pareja" />
- * <cc-page-banner [title]="plan.name" backLink="/planes" iconSrc="assets/icons/hoja.png" variant="plain" />
+ * <cc-page-banner [title]="plan.name" backLink="/planes" iconSrc="assets/icons/hoja.png" size="lg" italic />
  * ```
+ *
+ * Tokens: --cc-banner-bg, --cc-banner-color, --cc-banner-padding.
  */
 class PageBannerComponent {
     title = input.required();
-    /** `band` uses the surface color; `plain` uses the page background. */
+    subtitle = input('');
+    /** `band` draws a surface-colored strip; `plain` has no background. */
     variant = input('band');
+    size = input('md');
+    italic = input(false, { transform: booleanAttribute });
+    align = input('center');
     iconSrc = input('');
     /** Shows a back arrow that links here. */
     backLink = input(null);
     backIconSrc = input('');
     backLabel = input('Volver');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PageBannerComponent, isStandalone: true, selector: "cc-page-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null }, backIconSrc: { classPropertyName: "backIconSrc", publicName: "backIconSrc", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"cc-banner\" [class.cc-banner--plain]=\"variant() === 'plain'\" [class.cc-banner--split]=\"!!backLink()\">\n  @if (backLink()) {\n    <a class=\"cc-banner__back\" [routerLink]=\"backLink()\" [attr.aria-label]=\"backLabel()\">\n      @if (backIconSrc()) {\n        <img [src]=\"backIconSrc()\" alt=\"\" />\n      } @else {\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </a>\n  }\n  <div class=\"cc-banner__title\">\n    <h1>{{ title() }}</h1>\n    @if (iconSrc()) {\n      <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-banner__icon\" />\n    }\n  </div>\n  @if (backLink()) {\n    <span class=\"cc-banner__spacer\"></span>\n  }\n</div>\n", styles: [":host{display:block}.cc-banner{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:1.25rem;padding:.5rem 1.25rem;text-align:center;background:var(--cc-banner-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}.cc-banner--plain{margin-bottom:2.5rem;background:var(--cc-banner-bg, var(--cc-bg, #f0ffef))}.cc-banner--split{justify-content:space-between}.cc-banner__title{display:flex;gap:.5rem;align-items:center;justify-content:center}h1{margin:0;font-family:var(--cc-font-heading, inherit);font-size:var(--cc-banner-font-size, 2rem);font-weight:700;color:var(--cc-banner-color, var(--cc-heading, var(--cc-primary, #4c6b4a)))}.cc-banner__icon{width:2.5rem;height:2.5rem}.cc-banner__back{display:flex;color:var(--cc-banner-color, var(--cc-heading, var(--cc-primary, #4c6b4a)));transition:transform .3s ease-in}.cc-banner__back:hover{transform:scale(1.25)}.cc-banner__back img,.cc-banner__back svg,.cc-banner__spacer{width:2rem;height:2rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PageBannerComponent, isStandalone: true, selector: "cc-page-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null }, backIconSrc: { classPropertyName: "backIconSrc", publicName: "backIconSrc", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cc-banner--plain": "variant() === 'plain'", "class.cc-banner--sm": "size() === 'sm'", "class.cc-banner--lg": "size() === 'lg'", "class.cc-banner--italic": "italic()", "class.cc-banner--start": "align() === 'start'" } }, ngImport: i0, template: "<div class=\"cc-banner\">\r\n  @if (backLink()) {\r\n    <a class=\"cc-banner__back\" [routerLink]=\"backLink()\" [attr.aria-label]=\"backLabel()\">\r\n      @if (backIconSrc()) {\r\n        <img [src]=\"backIconSrc()\" alt=\"\" />\r\n      } @else {\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      }\r\n    </a>\r\n  }\r\n  <div class=\"cc-banner__text\">\r\n    <div class=\"cc-banner__title\">\r\n      <h1>{{ title() }}</h1>\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-banner__icon\" />\r\n      }\r\n    </div>\r\n    @if (subtitle()) {\r\n      <p class=\"cc-banner__subtitle\">{{ subtitle() }}</p>\r\n    }\r\n  </div>\r\n  @if (backLink()) {\r\n    <span class=\"cc-banner__spacer\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_banner-color: var(--cc-banner-color, var(--_heading));--_banner-size: var(--_text-3xl);display:block;margin-bottom:var(--_space-6)}:host(.cc-banner--sm){--_banner-size: var(--_text-2xl)}:host(.cc-banner--lg){--_banner-size: var(--_text-4xl)}.cc-banner{display:flex;align-items:center;gap:var(--_space-3);width:100%;padding:var(--cc-banner-padding, var(--_space-4) var(--_space-5));border-radius:var(--_radius);background:var(--cc-banner-bg, var(--_surface))}:host(.cc-banner--plain) .cc-banner{padding-left:0;padding-right:0;background:var(--cc-banner-bg, transparent)}.cc-banner__text{display:flex;flex:1;flex-direction:column;align-items:center;gap:var(--_space-1);min-width:0;text-align:center}:host(.cc-banner--start) .cc-banner__text{align-items:flex-start;text-align:start}.cc-banner__title{display:flex;align-items:center;gap:var(--_space-2)}h1{margin:0;font-family:var(--_font-heading);font-size:var(--_banner-size);font-style:var(--_heading-style);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);color:var(--_banner-color);overflow-wrap:anywhere}:host(.cc-banner--italic) h1{font-style:italic}.cc-banner__subtitle{margin:0;font-size:var(--_text-md);color:var(--_text-muted)}.cc-banner__icon{flex:none;width:2rem;height:2rem}.cc-banner__back{display:flex;flex:none;align-items:center;justify-content:center;width:var(--_control-height);height:var(--_control-height);border-radius:var(--_radius-pill);color:var(--_banner-color);transition:background-color var(--_duration-fast) var(--_ease)}.cc-banner__back:hover{background:color-mix(in srgb,var(--_banner-color) 10%,transparent)}.cc-banner__back img,.cc-banner__back svg{width:1.75rem;height:1.75rem}.cc-banner__spacer{flex:none;width:var(--_control-height)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PageBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-page-banner', imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-banner\" [class.cc-banner--plain]=\"variant() === 'plain'\" [class.cc-banner--split]=\"!!backLink()\">\n  @if (backLink()) {\n    <a class=\"cc-banner__back\" [routerLink]=\"backLink()\" [attr.aria-label]=\"backLabel()\">\n      @if (backIconSrc()) {\n        <img [src]=\"backIconSrc()\" alt=\"\" />\n      } @else {\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </a>\n  }\n  <div class=\"cc-banner__title\">\n    <h1>{{ title() }}</h1>\n    @if (iconSrc()) {\n      <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-banner__icon\" />\n    }\n  </div>\n  @if (backLink()) {\n    <span class=\"cc-banner__spacer\"></span>\n  }\n</div>\n", styles: [":host{display:block}.cc-banner{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:1.25rem;padding:.5rem 1.25rem;text-align:center;background:var(--cc-banner-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}.cc-banner--plain{margin-bottom:2.5rem;background:var(--cc-banner-bg, var(--cc-bg, #f0ffef))}.cc-banner--split{justify-content:space-between}.cc-banner__title{display:flex;gap:.5rem;align-items:center;justify-content:center}h1{margin:0;font-family:var(--cc-font-heading, inherit);font-size:var(--cc-banner-font-size, 2rem);font-weight:700;color:var(--cc-banner-color, var(--cc-heading, var(--cc-primary, #4c6b4a)))}.cc-banner__icon{width:2.5rem;height:2.5rem}.cc-banner__back{display:flex;color:var(--cc-banner-color, var(--cc-heading, var(--cc-primary, #4c6b4a)));transition:transform .3s ease-in}.cc-banner__back:hover{transform:scale(1.25)}.cc-banner__back img,.cc-banner__back svg,.cc-banner__spacer{width:2rem;height:2rem}\n"] }]
+            args: [{ selector: 'cc-page-banner', imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cc-banner--plain]': "variant() === 'plain'",
+                        '[class.cc-banner--sm]': "size() === 'sm'",
+                        '[class.cc-banner--lg]': "size() === 'lg'",
+                        '[class.cc-banner--italic]': 'italic()',
+                        '[class.cc-banner--start]': "align() === 'start'",
+                    }, template: "<div class=\"cc-banner\">\r\n  @if (backLink()) {\r\n    <a class=\"cc-banner__back\" [routerLink]=\"backLink()\" [attr.aria-label]=\"backLabel()\">\r\n      @if (backIconSrc()) {\r\n        <img [src]=\"backIconSrc()\" alt=\"\" />\r\n      } @else {\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      }\r\n    </a>\r\n  }\r\n  <div class=\"cc-banner__text\">\r\n    <div class=\"cc-banner__title\">\r\n      <h1>{{ title() }}</h1>\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" alt=\"\" class=\"cc-banner__icon\" />\r\n      }\r\n    </div>\r\n    @if (subtitle()) {\r\n      <p class=\"cc-banner__subtitle\">{{ subtitle() }}</p>\r\n    }\r\n  </div>\r\n  @if (backLink()) {\r\n    <span class=\"cc-banner__spacer\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_banner-color: var(--cc-banner-color, var(--_heading));--_banner-size: var(--_text-3xl);display:block;margin-bottom:var(--_space-6)}:host(.cc-banner--sm){--_banner-size: var(--_text-2xl)}:host(.cc-banner--lg){--_banner-size: var(--_text-4xl)}.cc-banner{display:flex;align-items:center;gap:var(--_space-3);width:100%;padding:var(--cc-banner-padding, var(--_space-4) var(--_space-5));border-radius:var(--_radius);background:var(--cc-banner-bg, var(--_surface))}:host(.cc-banner--plain) .cc-banner{padding-left:0;padding-right:0;background:var(--cc-banner-bg, transparent)}.cc-banner__text{display:flex;flex:1;flex-direction:column;align-items:center;gap:var(--_space-1);min-width:0;text-align:center}:host(.cc-banner--start) .cc-banner__text{align-items:flex-start;text-align:start}.cc-banner__title{display:flex;align-items:center;gap:var(--_space-2)}h1{margin:0;font-family:var(--_font-heading);font-size:var(--_banner-size);font-style:var(--_heading-style);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);color:var(--_banner-color);overflow-wrap:anywhere}:host(.cc-banner--italic) h1{font-style:italic}.cc-banner__subtitle{margin:0;font-size:var(--_text-md);color:var(--_text-muted)}.cc-banner__icon{flex:none;width:2rem;height:2rem}.cc-banner__back{display:flex;flex:none;align-items:center;justify-content:center;width:var(--_control-height);height:var(--_control-height);border-radius:var(--_radius-pill);color:var(--_banner-color);transition:background-color var(--_duration-fast) var(--_ease)}.cc-banner__back:hover{background:color-mix(in srgb,var(--_banner-color) 10%,transparent)}.cc-banner__back img,.cc-banner__back svg{width:1.75rem;height:1.75rem}.cc-banner__spacer{flex:none;width:var(--_control-height)}\n"] }]
         }] });
 
 /**
@@ -348,109 +616,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  *
  * ```html
  * <cc-info-item title="Pagos" text="Aceptamos Nequi, Daviplata y efectivo." />
- * <cc-info-item title="Reservaciones" [text]="texto">
+ * <cc-info-item title="Bonos Spa" [text]="texto" headingId="bonos">
  *   <ul><li>…</li></ul>
  * </cc-info-item>
  * ```
+ *
+ * Tokens: --cc-info-title-color, --cc-info-text-color, --cc-info-text-align, --cc-info-max-width.
  */
 class InfoItemComponent {
     title = input.required();
     text = input('');
+    /** `accent` colors the title with the accent text color, `neutral` with the heading color. */
+    tone = input('accent');
+    size = input('md');
+    headingLevel = input('h2');
+    /** Id of the heading, for anchors from a table of contents. */
+    headingId = input(null);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InfoItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: InfoItemComponent, isStandalone: true, selector: "cc-info-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h2 class=\"cc-info__title\">{{ title() }}</h2>\n@if (text()) {\n  <p class=\"cc-info__text\">{{ text() }}</p>\n}\n<ng-content />\n", styles: [":host{display:flex;flex-direction:column;gap:.75rem;width:100%}.cc-info__title{margin:0;font-family:var(--cc-font-heading, inherit);font-size:var(--cc-info-title-size, 1.5rem);font-weight:700;color:var(--cc-info-title-color, var(--cc-accent, var(--cc-secondary, #ceab5d)))}.cc-info__text{margin:0;font-size:1rem;text-align:justify;color:var(--cc-info-text-color, var(--cc-text, var(--cc-primary, #4c6b4a)))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: InfoItemComponent, isStandalone: true, selector: "cc-info-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cc-info--neutral": "tone() === 'neutral'", "class.cc-info--sm": "size() === 'sm'" } }, ngImport: i0, template: "@if (headingLevel() === 'h3') {\r\n  <h3 class=\"cc-info__title\" [attr.id]=\"headingId()\">{{ title() }}</h3>\r\n} @else {\r\n  <h2 class=\"cc-info__title\" [attr.id]=\"headingId()\">{{ title() }}</h2>\r\n}\r\n@if (text()) {\r\n  <p class=\"cc-info__text\">{{ text() }}</p>\r\n}\r\n<div class=\"cc-info__extra\"><ng-content /></div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_info-title-color: var(--cc-info-title-color, var(--_accent-text));--_info-title-size: var(--_text-2xl);display:flex;flex-direction:column;gap:var(--_space-3);width:100%;max-width:var(--cc-info-max-width, 70ch);scroll-margin-top:var(--cc-info-scroll-margin, var(--_space-24))}:host(.cc-info--neutral){--_info-title-color: var(--cc-info-title-color, var(--_heading))}:host(.cc-info--sm){--_info-title-size: var(--_text-lg)}.cc-info__title{margin:0;font-family:var(--_font-heading);font-size:var(--_info-title-size);font-style:var(--_heading-style);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);color:var(--_info-title-color);scroll-margin-top:var(--cc-info-scroll-margin, var(--_space-24))}.cc-info__text{margin:0;font-size:var(--_text-md);line-height:var(--_leading-body);text-align:var(--cc-info-text-align, start);color:var(--cc-info-text-color, var(--_text))}.cc-info__extra:empty{display:none}.cc-info__extra{line-height:var(--_leading-body);color:var(--cc-info-text-color, var(--_text))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InfoItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-info-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h2 class=\"cc-info__title\">{{ title() }}</h2>\n@if (text()) {\n  <p class=\"cc-info__text\">{{ text() }}</p>\n}\n<ng-content />\n", styles: [":host{display:flex;flex-direction:column;gap:.75rem;width:100%}.cc-info__title{margin:0;font-family:var(--cc-font-heading, inherit);font-size:var(--cc-info-title-size, 1.5rem);font-weight:700;color:var(--cc-info-title-color, var(--cc-accent, var(--cc-secondary, #ceab5d)))}.cc-info__text{margin:0;font-size:1rem;text-align:justify;color:var(--cc-info-text-color, var(--cc-text, var(--cc-primary, #4c6b4a)))}\n"] }]
+            args: [{ selector: 'cc-info-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cc-info--neutral]': "tone() === 'neutral'",
+                        '[class.cc-info--sm]': "size() === 'sm'",
+                    }, template: "@if (headingLevel() === 'h3') {\r\n  <h3 class=\"cc-info__title\" [attr.id]=\"headingId()\">{{ title() }}</h3>\r\n} @else {\r\n  <h2 class=\"cc-info__title\" [attr.id]=\"headingId()\">{{ title() }}</h2>\r\n}\r\n@if (text()) {\r\n  <p class=\"cc-info__text\">{{ text() }}</p>\r\n}\r\n<div class=\"cc-info__extra\"><ng-content /></div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_info-title-color: var(--cc-info-title-color, var(--_accent-text));--_info-title-size: var(--_text-2xl);display:flex;flex-direction:column;gap:var(--_space-3);width:100%;max-width:var(--cc-info-max-width, 70ch);scroll-margin-top:var(--cc-info-scroll-margin, var(--_space-24))}:host(.cc-info--neutral){--_info-title-color: var(--cc-info-title-color, var(--_heading))}:host(.cc-info--sm){--_info-title-size: var(--_text-lg)}.cc-info__title{margin:0;font-family:var(--_font-heading);font-size:var(--_info-title-size);font-style:var(--_heading-style);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);color:var(--_info-title-color);scroll-margin-top:var(--cc-info-scroll-margin, var(--_space-24))}.cc-info__text{margin:0;font-size:var(--_text-md);line-height:var(--_leading-body);text-align:var(--cc-info-text-align, start);color:var(--cc-info-text-color, var(--_text))}.cc-info__extra:empty{display:none}.cc-info__extra{line-height:var(--_leading-body);color:var(--cc-info-text-color, var(--_text))}\n"] }]
         }] });
 
 /**
- * Frequently asked questions as native `<details>` elements, so the answers
- * stay in the prerendered HTML for search engines.
+ * Frequently asked questions as native `<details>` elements, so the answers stay in
+ * the prerendered HTML for search engines. Pass plain `items`, or project
+ * `<cc-faq-item>` elements when an answer needs links.
  *
  * ```html
- * <cc-faq title="PREGUNTAS FRECUENTES" [items]="faq" />
+ * <cc-faq title="Preguntas frecuentes" [items]="faq" />
+ * <cc-faq title="Preguntas frecuentes">
+ *   <cc-faq-item question="¿Qué planes tienen?">Míralos en <a routerLink="/planes">planes</a>.</cc-faq-item>
+ * </cc-faq>
  * ```
+ *
+ * Tokens: --cc-faq-title-color, --cc-faq-gap, plus the ones of `cc-faq-item`.
  */
 class FaqComponent {
-    items = input.required();
+    items = input([]);
     title = input('');
+    headingLevel = input('h2');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FaqComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FaqComponent, isStandalone: true, selector: "cc-faq", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n  <h2 class=\"cc-faq__title\">{{ title() }}</h2>\n}\n@for (item of items(); track item.question) {\n  <details class=\"cc-faq__item\">\n    <summary>{{ item.question }}</summary>\n    <p>{{ item.answer }}</p>\n  </details>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:1rem}.cc-faq__title{margin:0;font-family:var(--cc-font-heading, inherit);font-size:2rem;font-weight:700;color:var(--cc-faq-title-color, var(--cc-secondary-dark, #9a7521))}.cc-faq__item{padding:1rem;background:var(--cc-faq-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}summary{cursor:pointer;font-weight:600;color:var(--cc-faq-question-color, var(--cc-text, var(--cc-primary, #4c6b4a)))}p{margin:0;padding-top:.75rem;color:var(--cc-faq-answer-color, var(--cc-primary-dark, #022b04))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FaqComponent, isStandalone: true, selector: "cc-faq", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\r\n  @if (headingLevel() === 'h3') {\r\n    <h3 class=\"cc-faq__title\">{{ title() }}</h3>\r\n  } @else {\r\n    <h2 class=\"cc-faq__title\">{{ title() }}</h2>\r\n  }\r\n}\r\n<div class=\"cc-faq__list\">\r\n  @for (item of items(); track item.question) {\r\n    <cc-faq-item [question]=\"item.question\">{{ item.answer }}</cc-faq-item>\r\n  }\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:flex;flex-direction:column;gap:var(--_space-6)}.cc-faq__title{font-style:var(--_heading-style);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);margin:0;font-family:var(--_font-heading);font-size:var(--_text-3xl);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);color:var(--cc-faq-title-color, var(--_accent-text))}.cc-faq__list{display:flex;flex-direction:column;gap:var(--cc-faq-gap, var(--_space-3))}\n"], dependencies: [{ kind: "component", type: FaqItemComponent, selector: "cc-faq-item", inputs: ["question", "open"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FaqComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-faq', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title()) {\n  <h2 class=\"cc-faq__title\">{{ title() }}</h2>\n}\n@for (item of items(); track item.question) {\n  <details class=\"cc-faq__item\">\n    <summary>{{ item.question }}</summary>\n    <p>{{ item.answer }}</p>\n  </details>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:1rem}.cc-faq__title{margin:0;font-family:var(--cc-font-heading, inherit);font-size:2rem;font-weight:700;color:var(--cc-faq-title-color, var(--cc-secondary-dark, #9a7521))}.cc-faq__item{padding:1rem;background:var(--cc-faq-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}summary{cursor:pointer;font-weight:600;color:var(--cc-faq-question-color, var(--cc-text, var(--cc-primary, #4c6b4a)))}p{margin:0;padding-top:.75rem;color:var(--cc-faq-answer-color, var(--cc-primary-dark, #022b04))}\n"] }]
+            args: [{ selector: 'cc-faq', imports: [FaqItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title()) {\r\n  @if (headingLevel() === 'h3') {\r\n    <h3 class=\"cc-faq__title\">{{ title() }}</h3>\r\n  } @else {\r\n    <h2 class=\"cc-faq__title\">{{ title() }}</h2>\r\n  }\r\n}\r\n<div class=\"cc-faq__list\">\r\n  @for (item of items(); track item.question) {\r\n    <cc-faq-item [question]=\"item.question\">{{ item.answer }}</cc-faq-item>\r\n  }\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:flex;flex-direction:column;gap:var(--_space-6)}.cc-faq__title{font-style:var(--_heading-style);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);margin:0;font-family:var(--_font-heading);font-size:var(--_text-3xl);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);color:var(--cc-faq-title-color, var(--_accent-text))}.cc-faq__list{display:flex;flex-direction:column;gap:var(--cc-faq-gap, var(--_space-3))}\n"] }]
         }] });
 
 /**
- * Row of social network icons that open in a new tab.
+ * Row of social network icons that open in a new tab. Each link has a 44px tap area
+ * even when the icon is smaller.
  *
  * ```html
- * <cc-social-links [links]="socials" size="1.25rem" />
+ * <cc-social-links [links]="socials" size="sm" tone="inverse" />
  * ```
+ *
+ * Tokens: --cc-social-icon-size, --cc-social-gap.
  */
 class SocialLinksComponent {
     links = input.required();
-    /** Icon width, any CSS length. */
-    size = input('1rem');
-    gap = input('1.25rem');
+    /** Icon size: `sm` 1rem, `md` 1.5rem, `lg` 2.5rem. */
+    size = input('md');
+    /** `inverse` for dark backgrounds: changes the hover and focus colors. */
+    tone = input('default');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SocialLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SocialLinksComponent, isStandalone: true, selector: "cc-social-links", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ul class=\"cc-social\" [style.gap]=\"gap()\">\n  @for (link of links(); track link.href) {\n    <li>\n      <a [href]=\"link.href\" target=\"_blank\" rel=\"noopener\" [attr.aria-label]=\"link.label\">\n        <img [src]=\"link.iconSrc\" alt=\"\" [style.width]=\"size()\" />\n      </a>\n    </li>\n  }\n</ul>\n", styles: [":host{display:block}.cc-social{display:flex;align-items:center;margin:0;padding:0;list-style:none}a{display:block;transition:transform .15s ease-in}a:hover{transform:scale(1.1)}img{display:block;height:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SocialLinksComponent, isStandalone: true, selector: "cc-social-links", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cc-social--sm": "size() === 'sm'", "class.cc-social--lg": "size() === 'lg'", "class.cc-social--inverse": "tone() === 'inverse'" } }, ngImport: i0, template: "<ul class=\"cc-social\">\r\n  @for (link of links(); track link.href) {\r\n    <li>\r\n      <a class=\"cc-social__link\" [href]=\"link.href\" target=\"_blank\" rel=\"noopener\" [attr.aria-label]=\"link.label\">\r\n        <img [src]=\"link.iconSrc\" alt=\"\" />\r\n      </a>\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_social-size: var(--cc-social-icon-size, 1.5rem);--_social-hover: color-mix(in srgb, var(--_text) 10%, transparent);display:block}:host(.cc-social--sm){--_social-size: var(--cc-social-icon-size, 1rem)}:host(.cc-social--lg){--_social-size: var(--cc-social-icon-size, 2.5rem)}:host(.cc-social--inverse){--_social-hover: rgb(255 255 255 / .15);--_focus-ring: var(--cc-focus-ring, var(--_on-inverse))}.cc-social{display:flex;align-items:center;gap:var(--cc-social-gap, var(--_space-1));margin:0;padding:0;list-style:none}.cc-social__link{display:flex;align-items:center;justify-content:center;min-width:var(--_control-height);min-height:var(--_control-height);border-radius:var(--_radius-pill);transition:background-color var(--_duration-fast) var(--_ease)}.cc-social__link:hover{background:var(--_social-hover)}.cc-social__link img{display:block;width:var(--_social-size);height:var(--_social-size);object-fit:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SocialLinksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-social-links', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"cc-social\" [style.gap]=\"gap()\">\n  @for (link of links(); track link.href) {\n    <li>\n      <a [href]=\"link.href\" target=\"_blank\" rel=\"noopener\" [attr.aria-label]=\"link.label\">\n        <img [src]=\"link.iconSrc\" alt=\"\" [style.width]=\"size()\" />\n      </a>\n    </li>\n  }\n</ul>\n", styles: [":host{display:block}.cc-social{display:flex;align-items:center;margin:0;padding:0;list-style:none}a{display:block;transition:transform .15s ease-in}a:hover{transform:scale(1.1)}img{display:block;height:auto}\n"] }]
+            args: [{ selector: 'cc-social-links', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cc-social--sm]': "size() === 'sm'",
+                        '[class.cc-social--lg]': "size() === 'lg'",
+                        '[class.cc-social--inverse]': "tone() === 'inverse'",
+                    }, template: "<ul class=\"cc-social\">\r\n  @for (link of links(); track link.href) {\r\n    <li>\r\n      <a class=\"cc-social__link\" [href]=\"link.href\" target=\"_blank\" rel=\"noopener\" [attr.aria-label]=\"link.label\">\r\n        <img [src]=\"link.iconSrc\" alt=\"\" />\r\n      </a>\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_social-size: var(--cc-social-icon-size, 1.5rem);--_social-hover: color-mix(in srgb, var(--_text) 10%, transparent);display:block}:host(.cc-social--sm){--_social-size: var(--cc-social-icon-size, 1rem)}:host(.cc-social--lg){--_social-size: var(--cc-social-icon-size, 2.5rem)}:host(.cc-social--inverse){--_social-hover: rgb(255 255 255 / .15);--_focus-ring: var(--cc-focus-ring, var(--_on-inverse))}.cc-social{display:flex;align-items:center;gap:var(--cc-social-gap, var(--_space-1));margin:0;padding:0;list-style:none}.cc-social__link{display:flex;align-items:center;justify-content:center;min-width:var(--_control-height);min-height:var(--_control-height);border-radius:var(--_radius-pill);transition:background-color var(--_duration-fast) var(--_ease)}.cc-social__link:hover{background:var(--_social-hover)}.cc-social__link img{display:block;width:var(--_social-size);height:var(--_social-size);object-fit:contain}\n"] }]
         }] });
 
 /**
- * Plan card: image, name and a button.
- * With `link` the button navigates with the router; without it, it emits `ctaClick`.
+ * Plan card: photo, name, details, price and a call to action.
+ * With `link`, the whole card is clickable and navigates with the router; without it,
+ * the button emits `ctaClick`. With `skeleton`, it renders a loading placeholder.
  *
  * ```html
- * <cc-plan-card [name]="plan.name" [imageSrc]="plan.imgPath" [link]="['/planes', slug]" />
+ * <cc-plan-card [name]="plan.name" [imageSrc]="plan.imgPath" [price]="plan.price"
+ *               meta="2 h · 2 personas" [link]="['/planes', slug]" />
  * ```
+ *
+ * Tokens: --cc-plan-card-bg, --cc-plan-card-color, --cc-plan-card-border,
+ * --cc-plan-card-radius, --cc-plan-card-shadow, --cc-plan-card-image-ratio,
+ * --cc-plan-card-price-color.
  */
 class PlanCardComponent {
-    name = input.required();
-    imageSrc = input.required();
+    name = input('');
+    imageSrc = input('');
     /** Defaults to `name`. */
     imageAlt = input('');
-    /** Optional line under the name, for example the formatted price. */
-    subtitle = input('');
+    /** Short line under the name, for example "2 h 20 min · 2 personas". */
+    meta = input('');
+    /** Price to show. Leave it null to hide it. */
+    price = input(null);
+    /** Text before the price, for example "Desde". */
+    priceLabel = input('');
+    priceFormat = input({});
     link = input(null);
-    ctaLabel = input('Saber más');
+    /** Query params of `link`, for example `{ categoria: 'pareja' }`. */
+    queryParams = input(null);
+    ctaLabel = input('Ver plan');
+    ctaVariant = input('primary');
+    /** `filled` uses the surface color, `outlined` a border on white, `plain` no box. */
+    appearance = input('filled');
+    /** Heading level of the name inside the page outline. */
+    headingLevel = input('h2');
+    /** Renders a loading placeholder instead of the content. */
+    skeleton = input(false);
     ctaClick = output();
+    formattedPrice = computed(() => {
+        const price = this.price();
+        return price === null ? '' : formatPrice(price, this.priceFormat());
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanCardComponent, isStandalone: true, selector: "cc-plan-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: true, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: "<article class=\"cc-card\">\n  <img\n    class=\"cc-card__img\"\n    [src]=\"imageSrc()\"\n    [alt]=\"imageAlt() || name()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n  <h2 class=\"cc-card__name\">{{ name() }}</h2>\n  @if (subtitle()) {\n    <p class=\"cc-card__subtitle\">{{ subtitle() }}</p>\n  }\n  @if (link()) {\n    <a class=\"cc-card__cta\" [routerLink]=\"link()\" (click)=\"ctaClick.emit()\">{{ ctaLabel() }}</a>\n  } @else {\n    <button type=\"button\" class=\"cc-card__cta\" (click)=\"ctaClick.emit()\">{{ ctaLabel() }}</button>\n  }\n</article>\n", styles: [":host{display:block;width:100%;max-width:var(--cc-plan-card-width, 22rem)}.cc-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:var(--cc-plan-card-height, 24rem);padding:1.25rem;background:var(--cc-plan-card-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)));border-radius:var(--cc-radius, 0);box-shadow:var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1))}@media (min-width: 1024px){:host{max-width:var(--cc-plan-card-width-lg, 15rem)}}.cc-card__img{width:13rem;max-width:100%;box-shadow:var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1))}.cc-card__name{margin:0;font-size:1rem;font-weight:400;text-align:center;color:var(--cc-plan-card-color, inherit)}.cc-card__subtitle{margin:0;font-weight:600;color:var(--cc-heading, var(--cc-primary, #4c6b4a))}.cc-card__cta{padding:.5rem 1.5rem;border:0;font:inherit;text-decoration:none;color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-plan-card-cta-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s ease-in,color .3s ease-in}.cc-card__cta:hover{background:var(--cc-plan-card-cta-hover-bg, var(--cc-accent-hover, var(--cc-secondary-dark, #9a7521)))}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanCardComponent, isStandalone: true, selector: "cc-plan-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, priceLabel: { classPropertyName: "priceLabel", publicName: "priceLabel", isSignal: true, isRequired: false, transformFunction: null }, priceFormat: { classPropertyName: "priceFormat", publicName: "priceFormat", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaVariant: { classPropertyName: "ctaVariant", publicName: "ctaVariant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, skeleton: { classPropertyName: "skeleton", publicName: "skeleton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, host: { properties: { "class.cc-card--outlined": "appearance() === 'outlined'", "class.cc-card--plain": "appearance() === 'plain'", "class.cc-card--skeleton": "skeleton()", "attr.aria-busy": "skeleton() || null" } }, ngImport: i0, template: "@if (skeleton()) {\r\n  <article class=\"cc-card\" aria-hidden=\"true\">\r\n    <div class=\"cc-card__media cc-card__shimmer\"></div>\r\n    <div class=\"cc-card__body\">\r\n      <span class=\"cc-card__line cc-card__shimmer\"></span>\r\n      <span class=\"cc-card__line cc-card__line--short cc-card__shimmer\"></span>\r\n      <span class=\"cc-card__line cc-card__line--button cc-card__shimmer\"></span>\r\n    </div>\r\n  </article>\r\n} @else {\r\n  <article class=\"cc-card\" [class.cc-card--linked]=\"!!link()\">\r\n    <div class=\"cc-card__media\">\r\n      <img\r\n        class=\"cc-card__img\"\r\n        [src]=\"imageSrc()\"\r\n        [alt]=\"imageAlt() || name()\"\r\n        width=\"400\"\r\n        height=\"400\"\r\n        loading=\"lazy\"\r\n        decoding=\"async\"\r\n      />\r\n    </div>\r\n    <div class=\"cc-card__body\">\r\n      @if (headingLevel() === 'h3') {\r\n        <h3 class=\"cc-card__name\">{{ name() }}</h3>\r\n      } @else {\r\n        <h2 class=\"cc-card__name\">{{ name() }}</h2>\r\n      }\r\n      @if (meta()) {\r\n        <p class=\"cc-card__meta\">{{ meta() }}</p>\r\n      }\r\n      @if (formattedPrice()) {\r\n        <p class=\"cc-card__price\">\r\n          @if (priceLabel()) {\r\n            <span class=\"cc-card__price-label\">{{ priceLabel() }}</span>\r\n          }\r\n          {{ formattedPrice() }}\r\n        </p>\r\n      }\r\n      <div class=\"cc-card__actions\">\r\n        @if (link()) {\r\n          <a ccButton [variant]=\"ctaVariant()\" block class=\"cc-card__cta\" [routerLink]=\"link()\" [queryParams]=\"queryParams()\" (click)=\"ctaClick.emit()\">\r\n            {{ ctaLabel() }}<span class=\"cc-sr-only\">: {{ name() }}</span>\r\n          </a>\r\n        } @else {\r\n          <button ccButton [variant]=\"ctaVariant()\" block type=\"button\" (click)=\"ctaClick.emit()\">{{ ctaLabel() }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </article>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_card-bg: var(--cc-plan-card-bg, var(--_surface));--_card-border: var(--cc-plan-card-border, transparent);--_card-shadow: var(--cc-plan-card-shadow, var(--_shadow));display:block;width:100%;height:100%}:host(.cc-card--outlined){--_card-bg: var(--cc-plan-card-bg, var(--_canvas));--_card-border: var(--cc-plan-card-border, var(--_border));--_card-shadow: var(--cc-plan-card-shadow, none)}:host(.cc-card--plain){--_card-bg: var(--cc-plan-card-bg, transparent);--_card-shadow: var(--cc-plan-card-shadow, none)}.cc-card{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--_card-border);border-radius:var(--cc-plan-card-radius, var(--_radius));color:var(--cc-plan-card-color, var(--_text));background:var(--_card-bg);box-shadow:var(--_card-shadow);transition:box-shadow var(--_duration) var(--_ease),transform var(--_duration) var(--_ease)}.cc-card--linked:hover{box-shadow:var(--_shadow-lg);transform:translateY(-2px)}.cc-card--linked:hover .cc-card__img{transform:scale(1.03)}.cc-card__media{aspect-ratio:var(--cc-plan-card-image-ratio, 1);overflow:hidden;background:var(--_surface-alt)}.cc-card__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--_duration) var(--_ease)}.cc-card__body{display:flex;flex:1;flex-direction:column;gap:var(--_space-2);padding:var(--_space-5)}.cc-card__name{font-style:var(--_heading-style);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);margin:0;font-family:var(--_font-heading);font-size:var(--_text-lg);font-weight:var(--_weight-bold);line-height:var(--_leading-snug);color:var(--_heading)}.cc-card__meta{margin:0;font-size:var(--_text-sm);color:var(--_text-muted)}.cc-card__price{display:flex;align-items:baseline;gap:var(--_space-2);margin:var(--_space-1) 0 0;font-size:var(--_text-xl);font-weight:var(--_weight-bold);color:var(--cc-plan-card-price-color, var(--_heading))}.cc-card__price-label{font-size:var(--_text-sm);font-weight:var(--_weight-regular);color:var(--_text-muted)}.cc-card__actions{margin-top:auto;padding-top:var(--_space-3)}.cc-card__cta:after{content:\"\";position:absolute;inset:0}.cc-card__shimmer{background:linear-gradient(90deg,color-mix(in srgb,var(--_text) 6%,transparent) 25%,color-mix(in srgb,var(--_text) 12%,transparent),color-mix(in srgb,var(--_text) 6%,transparent) 75%);background-size:200% 100%;animation:cc-shimmer 1.2s linear infinite}.cc-card__line{display:block;height:1rem;width:80%;border-radius:var(--_radius-sm)}.cc-card__line--short{width:45%}.cc-card__line--button{width:100%;height:var(--_control-height);margin-top:auto}:host(.cc-card--skeleton) .cc-card__body{gap:var(--_space-3);min-height:9rem}@keyframes cc-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "a[ccButton], button[ccButton]", inputs: ["variant", "size", "block"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-plan-card', imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"cc-card\">\n  <img\n    class=\"cc-card__img\"\n    [src]=\"imageSrc()\"\n    [alt]=\"imageAlt() || name()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n  <h2 class=\"cc-card__name\">{{ name() }}</h2>\n  @if (subtitle()) {\n    <p class=\"cc-card__subtitle\">{{ subtitle() }}</p>\n  }\n  @if (link()) {\n    <a class=\"cc-card__cta\" [routerLink]=\"link()\" (click)=\"ctaClick.emit()\">{{ ctaLabel() }}</a>\n  } @else {\n    <button type=\"button\" class=\"cc-card__cta\" (click)=\"ctaClick.emit()\">{{ ctaLabel() }}</button>\n  }\n</article>\n", styles: [":host{display:block;width:100%;max-width:var(--cc-plan-card-width, 22rem)}.cc-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:var(--cc-plan-card-height, 24rem);padding:1.25rem;background:var(--cc-plan-card-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)));border-radius:var(--cc-radius, 0);box-shadow:var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1))}@media (min-width: 1024px){:host{max-width:var(--cc-plan-card-width-lg, 15rem)}}.cc-card__img{width:13rem;max-width:100%;box-shadow:var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1))}.cc-card__name{margin:0;font-size:1rem;font-weight:400;text-align:center;color:var(--cc-plan-card-color, inherit)}.cc-card__subtitle{margin:0;font-weight:600;color:var(--cc-heading, var(--cc-primary, #4c6b4a))}.cc-card__cta{padding:.5rem 1.5rem;border:0;font:inherit;text-decoration:none;color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-plan-card-cta-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s ease-in,color .3s ease-in}.cc-card__cta:hover{background:var(--cc-plan-card-cta-hover-bg, var(--cc-accent-hover, var(--cc-secondary-dark, #9a7521)))}\n"] }]
+            args: [{ selector: 'cc-plan-card', imports: [RouterLink, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cc-card--outlined]': "appearance() === 'outlined'",
+                        '[class.cc-card--plain]': "appearance() === 'plain'",
+                        '[class.cc-card--skeleton]': 'skeleton()',
+                        '[attr.aria-busy]': 'skeleton() || null',
+                    }, template: "@if (skeleton()) {\r\n  <article class=\"cc-card\" aria-hidden=\"true\">\r\n    <div class=\"cc-card__media cc-card__shimmer\"></div>\r\n    <div class=\"cc-card__body\">\r\n      <span class=\"cc-card__line cc-card__shimmer\"></span>\r\n      <span class=\"cc-card__line cc-card__line--short cc-card__shimmer\"></span>\r\n      <span class=\"cc-card__line cc-card__line--button cc-card__shimmer\"></span>\r\n    </div>\r\n  </article>\r\n} @else {\r\n  <article class=\"cc-card\" [class.cc-card--linked]=\"!!link()\">\r\n    <div class=\"cc-card__media\">\r\n      <img\r\n        class=\"cc-card__img\"\r\n        [src]=\"imageSrc()\"\r\n        [alt]=\"imageAlt() || name()\"\r\n        width=\"400\"\r\n        height=\"400\"\r\n        loading=\"lazy\"\r\n        decoding=\"async\"\r\n      />\r\n    </div>\r\n    <div class=\"cc-card__body\">\r\n      @if (headingLevel() === 'h3') {\r\n        <h3 class=\"cc-card__name\">{{ name() }}</h3>\r\n      } @else {\r\n        <h2 class=\"cc-card__name\">{{ name() }}</h2>\r\n      }\r\n      @if (meta()) {\r\n        <p class=\"cc-card__meta\">{{ meta() }}</p>\r\n      }\r\n      @if (formattedPrice()) {\r\n        <p class=\"cc-card__price\">\r\n          @if (priceLabel()) {\r\n            <span class=\"cc-card__price-label\">{{ priceLabel() }}</span>\r\n          }\r\n          {{ formattedPrice() }}\r\n        </p>\r\n      }\r\n      <div class=\"cc-card__actions\">\r\n        @if (link()) {\r\n          <a ccButton [variant]=\"ctaVariant()\" block class=\"cc-card__cta\" [routerLink]=\"link()\" [queryParams]=\"queryParams()\" (click)=\"ctaClick.emit()\">\r\n            {{ ctaLabel() }}<span class=\"cc-sr-only\">: {{ name() }}</span>\r\n          </a>\r\n        } @else {\r\n          <button ccButton [variant]=\"ctaVariant()\" block type=\"button\" (click)=\"ctaClick.emit()\">{{ ctaLabel() }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </article>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_card-bg: var(--cc-plan-card-bg, var(--_surface));--_card-border: var(--cc-plan-card-border, transparent);--_card-shadow: var(--cc-plan-card-shadow, var(--_shadow));display:block;width:100%;height:100%}:host(.cc-card--outlined){--_card-bg: var(--cc-plan-card-bg, var(--_canvas));--_card-border: var(--cc-plan-card-border, var(--_border));--_card-shadow: var(--cc-plan-card-shadow, none)}:host(.cc-card--plain){--_card-bg: var(--cc-plan-card-bg, transparent);--_card-shadow: var(--cc-plan-card-shadow, none)}.cc-card{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--_card-border);border-radius:var(--cc-plan-card-radius, var(--_radius));color:var(--cc-plan-card-color, var(--_text));background:var(--_card-bg);box-shadow:var(--_card-shadow);transition:box-shadow var(--_duration) var(--_ease),transform var(--_duration) var(--_ease)}.cc-card--linked:hover{box-shadow:var(--_shadow-lg);transform:translateY(-2px)}.cc-card--linked:hover .cc-card__img{transform:scale(1.03)}.cc-card__media{aspect-ratio:var(--cc-plan-card-image-ratio, 1);overflow:hidden;background:var(--_surface-alt)}.cc-card__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--_duration) var(--_ease)}.cc-card__body{display:flex;flex:1;flex-direction:column;gap:var(--_space-2);padding:var(--_space-5)}.cc-card__name{font-style:var(--_heading-style);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);margin:0;font-family:var(--_font-heading);font-size:var(--_text-lg);font-weight:var(--_weight-bold);line-height:var(--_leading-snug);color:var(--_heading)}.cc-card__meta{margin:0;font-size:var(--_text-sm);color:var(--_text-muted)}.cc-card__price{display:flex;align-items:baseline;gap:var(--_space-2);margin:var(--_space-1) 0 0;font-size:var(--_text-xl);font-weight:var(--_weight-bold);color:var(--cc-plan-card-price-color, var(--_heading))}.cc-card__price-label{font-size:var(--_text-sm);font-weight:var(--_weight-regular);color:var(--_text-muted)}.cc-card__actions{margin-top:auto;padding-top:var(--_space-3)}.cc-card__cta:after{content:\"\";position:absolute;inset:0}.cc-card__shimmer{background:linear-gradient(90deg,color-mix(in srgb,var(--_text) 6%,transparent) 25%,color-mix(in srgb,var(--_text) 12%,transparent),color-mix(in srgb,var(--_text) 6%,transparent) 75%);background-size:200% 100%;animation:cc-shimmer 1.2s linear infinite}.cc-card__line{display:block;height:1rem;width:80%;border-radius:var(--_radius-sm)}.cc-card__line--short{width:45%}.cc-card__line--button{width:100%;height:var(--_control-height);margin-top:auto}:host(.cc-card--skeleton) .cc-card__body{gap:var(--_space-3);min-height:9rem}@keyframes cc-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }] });
 
 /**
- * Vertical category list with a single selected option.
- * Replaces the `appElementActive` markup the sites used for plan categories.
+ * Category selector with a single selected option. Each option is a toggle button
+ * (`aria-pressed`), so it works with Tab and Enter/Space.
+ *
+ * `layout`:
+ * - `list`: vertical list, for sidebars.
+ * - `chips`: one scrollable row of pills, for small screens.
+ * - `auto` (default): chips below 1024px, list from 1024px.
  *
  * ```html
  * <cc-category-menu [options]="categories" [(selected)]="category" />
  * ```
+ *
+ * Tokens: --cc-category-color, --cc-category-hover-bg, --cc-category-active-bg,
+ * --cc-category-active-color, --cc-category-chip-border.
  */
 class CategoryMenuComponent {
     options = input.required();
     /** Selected value. Use `[(selected)]` to bind both ways. */
     selected = model(null);
-    title = input('CATEGORÍA DE PLANES');
+    title = input('Categorías');
+    layout = input('auto');
     select(value) {
         this.selected.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CategoryMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: CategoryMenuComponent, isStandalone: true, selector: "cc-category-menu", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<ul class=\"cc-cat\" role=\"listbox\" [attr.aria-label]=\"title() || null\">\n  @if (title()) {\n    <li class=\"cc-cat__title\" role=\"presentation\">{{ title() }}</li>\n  }\n  @for (option of options(); track option.value) {\n    <li\n      class=\"cc-cat__item\"\n      role=\"option\"\n      tabindex=\"0\"\n      [class.cc-cat__item--active]=\"option.value === selected()\"\n      [attr.aria-selected]=\"option.value === selected()\"\n      (click)=\"select(option.value)\"\n      (keydown.enter)=\"select(option.value)\"\n      (keydown.space)=\"$event.preventDefault(); select(option.value)\"\n    >\n      <span>{{ option.label }}</span>\n      @if (option.count !== undefined && option.count !== null) {\n        <small>{{ option.count }}</small>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host{display:block}.cc-cat{width:100%;margin:0;padding:0;list-style:none}.cc-cat__title{padding:2rem .75rem;font-weight:600;color:var(--cc-category-color, var(--cc-text, var(--cc-primary, #4c6b4a)))}.cc-cat__item{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1.25rem;color:var(--cc-category-color, var(--cc-text, var(--cc-primary, #4c6b4a)));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s,color .15s}.cc-cat__item:hover{background:var(--cc-category-hover-bg, rgb(0 0 0 / .04))}.cc-cat__item:focus-visible{outline:2px solid var(--cc-accent, var(--cc-secondary, #ceab5d));outline-offset:-2px}.cc-cat__item--active{font-weight:700;color:var(--cc-category-active-color, var(--cc-on-accent, var(--cc-bg, #f0ffef)));background:var(--cc-category-active-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)))}.cc-cat__item--active:hover{background:var(--cc-category-active-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: CategoryMenuComponent, isStandalone: true, selector: "cc-category-menu", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { properties: { "class.cc-cat--list": "layout() === 'list'", "class.cc-cat--chips": "layout() === 'chips'", "class.cc-cat--auto": "layout() === 'auto'" } }, ngImport: i0, template: "<nav class=\"cc-cat\" [attr.aria-label]=\"title() || null\">\r\n  @if (title()) {\r\n    <p class=\"cc-cat__title\">{{ title() }}</p>\r\n  }\r\n  <ul class=\"cc-cat__list\">\r\n    @for (option of options(); track option.value) {\r\n      <li>\r\n        <button\r\n          type=\"button\"\r\n          class=\"cc-cat__item\"\r\n          [class.cc-cat__item--active]=\"option.value === selected()\"\r\n          [attr.aria-pressed]=\"option.value === selected()\"\r\n          (click)=\"select(option.value)\"\r\n        >\r\n          <span>{{ option.label }}</span>\r\n          @if (option.count !== undefined && option.count !== null) {\r\n            <span class=\"cc-cat__count\"><span class=\"cc-sr-only\">(</span>{{ option.count }}<span class=\"cc-sr-only\"> planes)</span></span>\r\n          }\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_cat-color: var(--cc-category-color, var(--_text));--_cat-hover-bg: var(--cc-category-hover-bg, color-mix(in srgb, var(--_text) 6%, transparent));--_cat-active-bg: var(--cc-category-active-bg, var(--_accent));--_cat-active-color: var(--cc-category-active-color, var(--_on-accent));display:block}.cc-cat__title{margin:0 0 var(--_space-3);font-size:var(--_text-sm);font-weight:var(--_weight-semibold);letter-spacing:var(--_tracking-wide);text-transform:uppercase;color:var(--_cat-color)}.cc-cat__list{display:flex;margin:0;padding:0;list-style:none}.cc-cat__item{display:flex;align-items:center;justify-content:space-between;gap:var(--_space-3);width:100%;min-height:var(--_control-height);padding:var(--_space-2) var(--_space-4);border:0;border-radius:var(--_radius);font:inherit;font-size:var(--_text-md);color:var(--_cat-color);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--_duration-fast) var(--_ease),color var(--_duration-fast) var(--_ease)}.cc-cat__item:hover{background:var(--_cat-hover-bg)}.cc-cat__item--active,.cc-cat__item--active:hover{font-weight:var(--_weight-bold);color:var(--_cat-active-color);background:var(--_cat-active-bg)}.cc-cat__count{min-width:1.75rem;padding:0 var(--_space-2);border-radius:var(--_radius-pill);font-size:var(--_text-sm);font-weight:var(--_weight-semibold);line-height:1.5rem;text-align:center;background:color-mix(in srgb,currentColor 12%,transparent)}:host(.cc-cat--list) .cc-cat__list{flex-direction:column;gap:var(--_space-1)}:host(.cc-cat--list) .cc-cat__item{min-height:3.5rem}:host(.cc-cat--chips) .cc-cat__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:host(.cc-cat--chips) .cc-cat__list{gap:var(--_space-2);overflow-x:auto;scrollbar-width:none;padding:var(--_space-1);margin:calc(-1 * var(--_space-1))}:host(.cc-cat--chips) .cc-cat__item{width:auto;white-space:nowrap;border:1px solid var(--cc-category-chip-border, var(--_border-strong));border-radius:var(--_radius-pill)}:host(.cc-cat--chips) .cc-cat__item--active{border-color:var(--_cat-active-bg)}:host(.cc-cat--auto) .cc-cat__list{gap:var(--_space-2);overflow-x:auto;scrollbar-width:none;padding:var(--_space-1);margin:calc(-1 * var(--_space-1))}:host(.cc-cat--auto) .cc-cat__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:host(.cc-cat--auto) .cc-cat__item{width:auto;white-space:nowrap;border:1px solid var(--cc-category-chip-border, var(--_border-strong));border-radius:var(--_radius-pill)}:host(.cc-cat--auto) .cc-cat__item--active{border-color:var(--_cat-active-bg)}@media (min-width: 1024px){:host(.cc-cat--auto) .cc-cat__title{position:static;width:auto;height:auto;overflow:visible;clip:auto}:host(.cc-cat--auto) .cc-cat__list{flex-direction:column;gap:var(--_space-1);overflow:visible;padding:0;margin:0}:host(.cc-cat--auto) .cc-cat__item{width:100%;min-height:3.5rem;border:0;border-radius:var(--_radius)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CategoryMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-category-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"cc-cat\" role=\"listbox\" [attr.aria-label]=\"title() || null\">\n  @if (title()) {\n    <li class=\"cc-cat__title\" role=\"presentation\">{{ title() }}</li>\n  }\n  @for (option of options(); track option.value) {\n    <li\n      class=\"cc-cat__item\"\n      role=\"option\"\n      tabindex=\"0\"\n      [class.cc-cat__item--active]=\"option.value === selected()\"\n      [attr.aria-selected]=\"option.value === selected()\"\n      (click)=\"select(option.value)\"\n      (keydown.enter)=\"select(option.value)\"\n      (keydown.space)=\"$event.preventDefault(); select(option.value)\"\n    >\n      <span>{{ option.label }}</span>\n      @if (option.count !== undefined && option.count !== null) {\n        <small>{{ option.count }}</small>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host{display:block}.cc-cat{width:100%;margin:0;padding:0;list-style:none}.cc-cat__title{padding:2rem .75rem;font-weight:600;color:var(--cc-category-color, var(--cc-text, var(--cc-primary, #4c6b4a)))}.cc-cat__item{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1.25rem;color:var(--cc-category-color, var(--cc-text, var(--cc-primary, #4c6b4a)));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s,color .15s}.cc-cat__item:hover{background:var(--cc-category-hover-bg, rgb(0 0 0 / .04))}.cc-cat__item:focus-visible{outline:2px solid var(--cc-accent, var(--cc-secondary, #ceab5d));outline-offset:-2px}.cc-cat__item--active{font-weight:700;color:var(--cc-category-active-color, var(--cc-on-accent, var(--cc-bg, #f0ffef)));background:var(--cc-category-active-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)))}.cc-cat__item--active:hover{background:var(--cc-category-active-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)))}\n"] }]
+            args: [{ selector: 'cc-category-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cc-cat--list]': "layout() === 'list'",
+                        '[class.cc-cat--chips]': "layout() === 'chips'",
+                        '[class.cc-cat--auto]': "layout() === 'auto'",
+                    }, template: "<nav class=\"cc-cat\" [attr.aria-label]=\"title() || null\">\r\n  @if (title()) {\r\n    <p class=\"cc-cat__title\">{{ title() }}</p>\r\n  }\r\n  <ul class=\"cc-cat__list\">\r\n    @for (option of options(); track option.value) {\r\n      <li>\r\n        <button\r\n          type=\"button\"\r\n          class=\"cc-cat__item\"\r\n          [class.cc-cat__item--active]=\"option.value === selected()\"\r\n          [attr.aria-pressed]=\"option.value === selected()\"\r\n          (click)=\"select(option.value)\"\r\n        >\r\n          <span>{{ option.label }}</span>\r\n          @if (option.count !== undefined && option.count !== null) {\r\n            <span class=\"cc-cat__count\"><span class=\"cc-sr-only\">(</span>{{ option.count }}<span class=\"cc-sr-only\"> planes)</span></span>\r\n          }\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_cat-color: var(--cc-category-color, var(--_text));--_cat-hover-bg: var(--cc-category-hover-bg, color-mix(in srgb, var(--_text) 6%, transparent));--_cat-active-bg: var(--cc-category-active-bg, var(--_accent));--_cat-active-color: var(--cc-category-active-color, var(--_on-accent));display:block}.cc-cat__title{margin:0 0 var(--_space-3);font-size:var(--_text-sm);font-weight:var(--_weight-semibold);letter-spacing:var(--_tracking-wide);text-transform:uppercase;color:var(--_cat-color)}.cc-cat__list{display:flex;margin:0;padding:0;list-style:none}.cc-cat__item{display:flex;align-items:center;justify-content:space-between;gap:var(--_space-3);width:100%;min-height:var(--_control-height);padding:var(--_space-2) var(--_space-4);border:0;border-radius:var(--_radius);font:inherit;font-size:var(--_text-md);color:var(--_cat-color);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--_duration-fast) var(--_ease),color var(--_duration-fast) var(--_ease)}.cc-cat__item:hover{background:var(--_cat-hover-bg)}.cc-cat__item--active,.cc-cat__item--active:hover{font-weight:var(--_weight-bold);color:var(--_cat-active-color);background:var(--_cat-active-bg)}.cc-cat__count{min-width:1.75rem;padding:0 var(--_space-2);border-radius:var(--_radius-pill);font-size:var(--_text-sm);font-weight:var(--_weight-semibold);line-height:1.5rem;text-align:center;background:color-mix(in srgb,currentColor 12%,transparent)}:host(.cc-cat--list) .cc-cat__list{flex-direction:column;gap:var(--_space-1)}:host(.cc-cat--list) .cc-cat__item{min-height:3.5rem}:host(.cc-cat--chips) .cc-cat__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:host(.cc-cat--chips) .cc-cat__list{gap:var(--_space-2);overflow-x:auto;scrollbar-width:none;padding:var(--_space-1);margin:calc(-1 * var(--_space-1))}:host(.cc-cat--chips) .cc-cat__item{width:auto;white-space:nowrap;border:1px solid var(--cc-category-chip-border, var(--_border-strong));border-radius:var(--_radius-pill)}:host(.cc-cat--chips) .cc-cat__item--active{border-color:var(--_cat-active-bg)}:host(.cc-cat--auto) .cc-cat__list{gap:var(--_space-2);overflow-x:auto;scrollbar-width:none;padding:var(--_space-1);margin:calc(-1 * var(--_space-1))}:host(.cc-cat--auto) .cc-cat__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:host(.cc-cat--auto) .cc-cat__item{width:auto;white-space:nowrap;border:1px solid var(--cc-category-chip-border, var(--_border-strong));border-radius:var(--_radius-pill)}:host(.cc-cat--auto) .cc-cat__item--active{border-color:var(--_cat-active-bg)}@media (min-width: 1024px){:host(.cc-cat--auto) .cc-cat__title{position:static;width:auto;height:auto;overflow:visible;clip:auto}:host(.cc-cat--auto) .cc-cat__list{flex-direction:column;gap:var(--_space-1);overflow:visible;padding:0;margin:0}:host(.cc-cat--auto) .cc-cat__item{width:100%;min-height:3.5rem;border:0;border-radius:var(--_radius)}}\n"] }]
         }] });
 
 /**
@@ -459,10 +795,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * ```html
  * <cc-search-box placeholder="Buscar plan" [(value)]="query" (search)="onSearch($event)" />
  * ```
+ *
+ * Tokens: --cc-search-bg, --cc-search-border, --cc-search-btn-bg, --cc-search-btn-color,
+ * --cc-search-radius.
  */
 class SearchBoxComponent {
     value = model('');
     placeholder = input('Buscar plan');
+    /** Accessible name of the field. Defaults to `placeholder`. */
+    label = input('');
     buttonLabel = input('Buscar');
     iconSrc = input('');
     search = output();
@@ -470,35 +811,50 @@ class SearchBoxComponent {
         this.value.set(event.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SearchBoxComponent, isStandalone: true, selector: "cc-search-box", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search" }, ngImport: i0, template: "<form class=\"cc-search\" role=\"search\" (submit)=\"$event.preventDefault(); search.emit(value())\">\n  <input\n    type=\"search\"\n    class=\"cc-search__input\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"placeholder()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n  />\n  <button type=\"submit\" class=\"cc-search__btn\" [attr.aria-label]=\"buttonLabel()\">\n    @if (iconSrc()) {\n      <img [src]=\"iconSrc()\" alt=\"\" />\n    } @else {\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n  </button>\n</form>\n", styles: [":host{display:block}.cc-search{display:flex;width:100%;margin:0}.cc-search__input{flex:1;min-width:0;padding:0 .75rem;border:2px solid var(--cc-search-border, #e5e7eb);font:inherit;color:inherit;background:#fff}.cc-search__input:focus{outline:none;border-color:var(--cc-accent, var(--cc-secondary, #ceab5d))}.cc-search__btn{display:flex;align-items:center;justify-content:center;width:3rem;min-height:3rem;padding:0;border:0;color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-search-btn-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)));cursor:pointer}.cc-search__btn:has(img){background:transparent}.cc-search__btn img{width:3rem}.cc-search__btn svg{width:1.5rem;height:1.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SearchBoxComponent, isStandalone: true, selector: "cc-search-box", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search" }, ngImport: i0, template: "<form class=\"cc-search\" role=\"search\" (submit)=\"$event.preventDefault(); search.emit(value())\">\r\n  <input\r\n    type=\"search\"\r\n    class=\"cc-search__input\"\r\n    [placeholder]=\"placeholder()\"\r\n    [attr.aria-label]=\"label() || placeholder()\"\r\n    [value]=\"value()\"\r\n    (input)=\"onInput($event)\"\r\n  />\r\n  <button type=\"submit\" class=\"cc-search__btn\" [attr.aria-label]=\"buttonLabel()\">\r\n    @if (iconSrc()) {\r\n      <img [src]=\"iconSrc()\" alt=\"\" />\r\n    } @else {\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <circle cx=\"11\" cy=\"11\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      </svg>\r\n    }\r\n  </button>\r\n</form>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_search-border: var(--cc-search-border, var(--_border-strong));--_search-radius: var(--cc-search-radius, var(--_radius));display:block}.cc-search{display:flex;width:100%;margin:0;border-radius:var(--_search-radius)}.cc-search:focus-within{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-search__input{flex:1;min-width:0;min-height:var(--_control-height);padding:0 var(--_space-4);border:1px solid var(--_search-border);border-right:0;border-radius:var(--_search-radius) 0 0 var(--_search-radius);font:inherit;font-size:var(--_text-md);color:var(--_text);background:var(--cc-search-bg, var(--_canvas))}.cc-search__input::placeholder{color:var(--_text-muted);opacity:1}.cc-search__input:focus,.cc-search__input:focus-visible{outline:none}.cc-search__btn{display:flex;flex:none;align-items:center;justify-content:center;width:var(--_control-height);min-height:var(--_control-height);padding:0;border:0;border-radius:0 var(--_search-radius) var(--_search-radius) 0;color:var(--cc-search-btn-color, var(--_on-accent));background:var(--cc-search-btn-bg, var(--_accent));cursor:pointer;transition:background-color var(--_duration-fast) var(--_ease)}.cc-search__btn:hover{background:var(--_accent-hover)}.cc-search__btn:focus-visible{outline:none}.cc-search__btn img,.cc-search__btn svg{width:1.25rem;height:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-search-box', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"cc-search\" role=\"search\" (submit)=\"$event.preventDefault(); search.emit(value())\">\n  <input\n    type=\"search\"\n    class=\"cc-search__input\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"placeholder()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n  />\n  <button type=\"submit\" class=\"cc-search__btn\" [attr.aria-label]=\"buttonLabel()\">\n    @if (iconSrc()) {\n      <img [src]=\"iconSrc()\" alt=\"\" />\n    } @else {\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n  </button>\n</form>\n", styles: [":host{display:block}.cc-search{display:flex;width:100%;margin:0}.cc-search__input{flex:1;min-width:0;padding:0 .75rem;border:2px solid var(--cc-search-border, #e5e7eb);font:inherit;color:inherit;background:#fff}.cc-search__input:focus{outline:none;border-color:var(--cc-accent, var(--cc-secondary, #ceab5d))}.cc-search__btn{display:flex;align-items:center;justify-content:center;width:3rem;min-height:3rem;padding:0;border:0;color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-search-btn-bg, var(--cc-accent, var(--cc-secondary, #ceab5d)));cursor:pointer}.cc-search__btn:has(img){background:transparent}.cc-search__btn img{width:3rem}.cc-search__btn svg{width:1.5rem;height:1.5rem}\n"] }]
+            args: [{ selector: 'cc-search-box', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"cc-search\" role=\"search\" (submit)=\"$event.preventDefault(); search.emit(value())\">\r\n  <input\r\n    type=\"search\"\r\n    class=\"cc-search__input\"\r\n    [placeholder]=\"placeholder()\"\r\n    [attr.aria-label]=\"label() || placeholder()\"\r\n    [value]=\"value()\"\r\n    (input)=\"onInput($event)\"\r\n  />\r\n  <button type=\"submit\" class=\"cc-search__btn\" [attr.aria-label]=\"buttonLabel()\">\r\n    @if (iconSrc()) {\r\n      <img [src]=\"iconSrc()\" alt=\"\" />\r\n    } @else {\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <circle cx=\"11\" cy=\"11\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      </svg>\r\n    }\r\n  </button>\r\n</form>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_search-border: var(--cc-search-border, var(--_border-strong));--_search-radius: var(--cc-search-radius, var(--_radius));display:block}.cc-search{display:flex;width:100%;margin:0;border-radius:var(--_search-radius)}.cc-search:focus-within{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-search__input{flex:1;min-width:0;min-height:var(--_control-height);padding:0 var(--_space-4);border:1px solid var(--_search-border);border-right:0;border-radius:var(--_search-radius) 0 0 var(--_search-radius);font:inherit;font-size:var(--_text-md);color:var(--_text);background:var(--cc-search-bg, var(--_canvas))}.cc-search__input::placeholder{color:var(--_text-muted);opacity:1}.cc-search__input:focus,.cc-search__input:focus-visible{outline:none}.cc-search__btn{display:flex;flex:none;align-items:center;justify-content:center;width:var(--_control-height);min-height:var(--_control-height);padding:0;border:0;border-radius:0 var(--_search-radius) var(--_search-radius) 0;color:var(--cc-search-btn-color, var(--_on-accent));background:var(--cc-search-btn-bg, var(--_accent));cursor:pointer;transition:background-color var(--_duration-fast) var(--_ease)}.cc-search__btn:hover{background:var(--_accent-hover)}.cc-search__btn:focus-visible{outline:none}.cc-search__btn img,.cc-search__btn svg{width:1.25rem;height:1.25rem}\n"] }]
         }] });
 
 /**
  * Filter by included service and price range. The options come in as inputs,
  * so the form does not load data by itself.
  *
+ * `mode`:
+ * - `instant` (default): emits `filterChange` as soon as an option changes.
+ * - `submit`: emits when the user presses the submit button.
+ *
  * ```html
  * <cc-plan-filter-form [services]="services" [priceRanges]="ranges" (filterChange)="apply($event)" />
  * ```
+ *
+ * Tokens: --cc-filter-field-bg, --cc-filter-field-border, --cc-filter-label-color.
  */
 class PlanFilterFormComponent {
     services = input([]);
     priceRanges = input([]);
+    mode = input('instant');
     serviceLabel = input('Servicio incluido');
     priceLabel = input('Rango de precio');
     anyLabel = input('Todos');
     submitLabel = input('Filtrar');
-    resetLabel = input('Limpiar');
-    /** Emits on submit, and with an empty filter on reset. */
+    resetLabel = input('Limpiar filtros');
+    /** Emits the current filter, and an empty filter on reset. */
     filterChange = output();
     serviceIndex = signal(-1);
     rangeIndex = signal(-1);
-    toIndex(event) {
-        return Number(event.target.value);
+    hasSelection = computed(() => this.serviceIndex() !== -1 || this.rangeIndex() !== -1);
+    onServiceChange(event) {
+        this.serviceIndex.set(this.toIndex(event));
+        if (this.mode() === 'instant')
+            this.submit();
+    }
+    onRangeChange(event) {
+        this.rangeIndex.set(this.toIndex(event));
+        if (this.mode() === 'instant')
+            this.submit();
     }
     submit() {
         this.filterChange.emit({
@@ -511,12 +867,15 @@ class PlanFilterFormComponent {
         this.rangeIndex.set(-1);
         this.filterChange.emit({ service: null, priceRange: null });
     }
+    toIndex(event) {
+        return Number(event.target.value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanFilterFormComponent, isStandalone: true, selector: "cc-plan-filter-form", inputs: { services: { classPropertyName: "services", publicName: "services", isSignal: true, isRequired: false, transformFunction: null }, priceRanges: { classPropertyName: "priceRanges", publicName: "priceRanges", isSignal: true, isRequired: false, transformFunction: null }, serviceLabel: { classPropertyName: "serviceLabel", publicName: "serviceLabel", isSignal: true, isRequired: false, transformFunction: null }, priceLabel: { classPropertyName: "priceLabel", publicName: "priceLabel", isSignal: true, isRequired: false, transformFunction: null }, anyLabel: { classPropertyName: "anyLabel", publicName: "anyLabel", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form class=\"cc-filter\" (submit)=\"$event.preventDefault(); submit()\">\n  @if (services().length) {\n    <label class=\"cc-filter__field\">\n      <span>{{ serviceLabel() }}</span>\n      <select (change)=\"serviceIndex.set(toIndex($event))\">\n        <option value=\"-1\" [selected]=\"serviceIndex() === -1\">{{ anyLabel() }}</option>\n        @for (service of services(); track $index) {\n          <option [value]=\"$index\" [selected]=\"serviceIndex() === $index\">{{ service.name }}</option>\n        }\n      </select>\n    </label>\n  }\n  @if (priceRanges().length) {\n    <label class=\"cc-filter__field\">\n      <span>{{ priceLabel() }}</span>\n      <select (change)=\"rangeIndex.set(toIndex($event))\">\n        <option value=\"-1\" [selected]=\"rangeIndex() === -1\">{{ anyLabel() }}</option>\n        @for (range of priceRanges(); track $index) {\n          <option [value]=\"$index\" [selected]=\"rangeIndex() === $index\">{{ range.description }}</option>\n        }\n      </select>\n    </label>\n  }\n  <div class=\"cc-filter__actions\">\n    <button type=\"submit\" class=\"cc-filter__submit\">{{ submitLabel() }}</button>\n    <button type=\"button\" class=\"cc-filter__reset\" (click)=\"reset()\">{{ resetLabel() }}</button>\n  </div>\n</form>\n", styles: [":host{display:block}.cc-filter{display:flex;flex-direction:column;gap:1rem;padding:1.25rem}.cc-filter__field{display:flex;flex-direction:column;gap:.375rem;font-weight:600;color:var(--cc-text, var(--cc-primary, #4c6b4a))}select{height:2.5rem;padding:0 .5rem;border:2px solid var(--cc-search-border, #e5e7eb);font:inherit;font-weight:400;color:inherit;background:#fff}.cc-filter__actions{display:flex;gap:.75rem}button{padding:.5rem 1.25rem;border:0;font:inherit;cursor:pointer;transition:background-color .15s,color .15s}.cc-filter__submit{color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-accent, var(--cc-secondary, #ceab5d))}.cc-filter__submit:hover{background:var(--cc-accent-hover, var(--cc-secondary-dark, #9a7521))}.cc-filter__reset{color:var(--cc-text, var(--cc-primary, #4c6b4a));background:transparent;text-decoration:underline}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanFilterFormComponent, isStandalone: true, selector: "cc-plan-filter-form", inputs: { services: { classPropertyName: "services", publicName: "services", isSignal: true, isRequired: false, transformFunction: null }, priceRanges: { classPropertyName: "priceRanges", publicName: "priceRanges", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, serviceLabel: { classPropertyName: "serviceLabel", publicName: "serviceLabel", isSignal: true, isRequired: false, transformFunction: null }, priceLabel: { classPropertyName: "priceLabel", publicName: "priceLabel", isSignal: true, isRequired: false, transformFunction: null }, anyLabel: { classPropertyName: "anyLabel", publicName: "anyLabel", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form class=\"cc-filter\" (submit)=\"$event.preventDefault(); submit()\">\r\n  @if (services().length) {\r\n    <label class=\"cc-filter__field\">\r\n      <span>{{ serviceLabel() }}</span>\r\n      <select (change)=\"onServiceChange($event)\">\r\n        <option value=\"-1\" [selected]=\"serviceIndex() === -1\">{{ anyLabel() }}</option>\r\n        @for (service of services(); track $index) {\r\n          <option [value]=\"$index\" [selected]=\"serviceIndex() === $index\">{{ service.name }}</option>\r\n        }\r\n      </select>\r\n    </label>\r\n  }\r\n  @if (priceRanges().length) {\r\n    <label class=\"cc-filter__field\">\r\n      <span>{{ priceLabel() }}</span>\r\n      <select (change)=\"onRangeChange($event)\">\r\n        <option value=\"-1\" [selected]=\"rangeIndex() === -1\">{{ anyLabel() }}</option>\r\n        @for (range of priceRanges(); track $index) {\r\n          <option [value]=\"$index\" [selected]=\"rangeIndex() === $index\">{{ range.description }}</option>\r\n        }\r\n      </select>\r\n    </label>\r\n  }\r\n  <div class=\"cc-filter__actions\">\r\n    @if (mode() === 'submit') {\r\n      <button ccButton size=\"sm\" type=\"submit\">{{ submitLabel() }}</button>\r\n    }\r\n    @if (mode() === 'submit' || hasSelection()) {\r\n      <button ccButton variant=\"ghost\" size=\"sm\" type=\"button\" (click)=\"reset()\">{{ resetLabel() }}</button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block}.cc-filter{display:flex;flex-direction:column;gap:var(--_space-4)}.cc-filter__field{display:flex;flex-direction:column;gap:var(--_space-2);font-size:var(--_text-sm);font-weight:var(--_weight-semibold);color:var(--cc-filter-label-color, var(--_text))}select{min-height:var(--_control-height);padding:0 var(--_space-3);border:1px solid var(--cc-filter-field-border, var(--_border-strong));border-radius:var(--_radius);font:inherit;font-size:var(--_text-md);font-weight:var(--_weight-regular);color:var(--_text);background:var(--cc-filter-field-bg, var(--_canvas))}.cc-filter__actions{display:flex;flex-wrap:wrap;gap:var(--_space-3)}.cc-filter__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "a[ccButton], button[ccButton]", inputs: ["variant", "size", "block"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanFilterFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-plan-filter-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"cc-filter\" (submit)=\"$event.preventDefault(); submit()\">\n  @if (services().length) {\n    <label class=\"cc-filter__field\">\n      <span>{{ serviceLabel() }}</span>\n      <select (change)=\"serviceIndex.set(toIndex($event))\">\n        <option value=\"-1\" [selected]=\"serviceIndex() === -1\">{{ anyLabel() }}</option>\n        @for (service of services(); track $index) {\n          <option [value]=\"$index\" [selected]=\"serviceIndex() === $index\">{{ service.name }}</option>\n        }\n      </select>\n    </label>\n  }\n  @if (priceRanges().length) {\n    <label class=\"cc-filter__field\">\n      <span>{{ priceLabel() }}</span>\n      <select (change)=\"rangeIndex.set(toIndex($event))\">\n        <option value=\"-1\" [selected]=\"rangeIndex() === -1\">{{ anyLabel() }}</option>\n        @for (range of priceRanges(); track $index) {\n          <option [value]=\"$index\" [selected]=\"rangeIndex() === $index\">{{ range.description }}</option>\n        }\n      </select>\n    </label>\n  }\n  <div class=\"cc-filter__actions\">\n    <button type=\"submit\" class=\"cc-filter__submit\">{{ submitLabel() }}</button>\n    <button type=\"button\" class=\"cc-filter__reset\" (click)=\"reset()\">{{ resetLabel() }}</button>\n  </div>\n</form>\n", styles: [":host{display:block}.cc-filter{display:flex;flex-direction:column;gap:1rem;padding:1.25rem}.cc-filter__field{display:flex;flex-direction:column;gap:.375rem;font-weight:600;color:var(--cc-text, var(--cc-primary, #4c6b4a))}select{height:2.5rem;padding:0 .5rem;border:2px solid var(--cc-search-border, #e5e7eb);font:inherit;font-weight:400;color:inherit;background:#fff}.cc-filter__actions{display:flex;gap:.75rem}button{padding:.5rem 1.25rem;border:0;font:inherit;cursor:pointer;transition:background-color .15s,color .15s}.cc-filter__submit{color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-accent, var(--cc-secondary, #ceab5d))}.cc-filter__submit:hover{background:var(--cc-accent-hover, var(--cc-secondary-dark, #9a7521))}.cc-filter__reset{color:var(--cc-text, var(--cc-primary, #4c6b4a));background:transparent;text-decoration:underline}\n"] }]
+            args: [{ selector: 'cc-plan-filter-form', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"cc-filter\" (submit)=\"$event.preventDefault(); submit()\">\r\n  @if (services().length) {\r\n    <label class=\"cc-filter__field\">\r\n      <span>{{ serviceLabel() }}</span>\r\n      <select (change)=\"onServiceChange($event)\">\r\n        <option value=\"-1\" [selected]=\"serviceIndex() === -1\">{{ anyLabel() }}</option>\r\n        @for (service of services(); track $index) {\r\n          <option [value]=\"$index\" [selected]=\"serviceIndex() === $index\">{{ service.name }}</option>\r\n        }\r\n      </select>\r\n    </label>\r\n  }\r\n  @if (priceRanges().length) {\r\n    <label class=\"cc-filter__field\">\r\n      <span>{{ priceLabel() }}</span>\r\n      <select (change)=\"onRangeChange($event)\">\r\n        <option value=\"-1\" [selected]=\"rangeIndex() === -1\">{{ anyLabel() }}</option>\r\n        @for (range of priceRanges(); track $index) {\r\n          <option [value]=\"$index\" [selected]=\"rangeIndex() === $index\">{{ range.description }}</option>\r\n        }\r\n      </select>\r\n    </label>\r\n  }\r\n  <div class=\"cc-filter__actions\">\r\n    @if (mode() === 'submit') {\r\n      <button ccButton size=\"sm\" type=\"submit\">{{ submitLabel() }}</button>\r\n    }\r\n    @if (mode() === 'submit' || hasSelection()) {\r\n      <button ccButton variant=\"ghost\" size=\"sm\" type=\"button\" (click)=\"reset()\">{{ resetLabel() }}</button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block}.cc-filter{display:flex;flex-direction:column;gap:var(--_space-4)}.cc-filter__field{display:flex;flex-direction:column;gap:var(--_space-2);font-size:var(--_text-sm);font-weight:var(--_weight-semibold);color:var(--cc-filter-label-color, var(--_text))}select{min-height:var(--_control-height);padding:0 var(--_space-3);border:1px solid var(--cc-filter-field-border, var(--_border-strong));border-radius:var(--_radius);font:inherit;font-size:var(--_text-md);font-weight:var(--_weight-regular);color:var(--_text);background:var(--cc-filter-field-bg, var(--_canvas))}.cc-filter__actions{display:flex;flex-wrap:wrap;gap:var(--_space-3)}.cc-filter__actions:empty{display:none}\n"] }]
         }] });
 
 /** Marks an `<ng-template>` inside `cc-plan-catalog` as the card to render for each plan. */
@@ -531,25 +890,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             type: Directive,
             args: [{ selector: 'ng-template[ccPlanCard]' }]
         }] });
+/** Default detail line of a card: "2 horas 20 minutos · 2 personas". */
+function defaultPlanMeta(plan) {
+    const people = Math.max(plan.cuantity || 1, 1);
+    const duration = plan.duration ? plan.duration.toLowerCase() : '';
+    return [duration, `${people} ${people > 1 ? 'personas' : 'persona'}`].filter(Boolean).join(' · ');
+}
 /**
  * Full plan list page: title, name search, category menu, filter and card grid.
  * It only needs the plans; the rest has Spanish defaults you can override.
  *
- * Selecting a category shows its plans. Searching by name or applying the filter
- * looks across every category, as the sites already did.
+ * - `plans` set to `null` means "loading" and shows placeholder cards.
+ * - `[(category)]` is two-way, so a page can keep it in the URL (`?categoria=pareja`).
+ * - Selecting a category shows its plans. Searching by name or filtering looks across
+ *   every category; clearing the search goes back to the selected category.
  *
  * ```html
- * <cc-plan-catalog
- *   [plans]="plans()"
- *   [services]="services()"
- *   [priceRanges]="ranges()"
- *   imageAltSuffix=" - Laurel Spa Medellín"
- * />
+ * <cc-plan-catalog [plans]="plans()" [services]="services()" [priceRanges]="ranges()" [(category)]="category" />
  * ```
+ *
+ * Tokens: --cc-catalog-panel-bg, --cc-catalog-sidebar-width, --cc-catalog-column-min,
+ * --cc-catalog-gap.
  */
 class PlanCatalogComponent {
+    /** The plans, or `null` while they load. */
     plans = input.required();
     categories = input(DEFAULT_PLAN_CATEGORIES);
+    /** Selected category. Use `[(category)]` to bind it; `null` means `initialCategory`. */
+    category = model(null);
     initialCategory = input(PlanCategory.Individual);
     /** Shows how many plans each category has, counted from `plans`. */
     showCounts = input(true);
@@ -558,46 +926,51 @@ class PlanCatalogComponent {
     priceRanges = input([]);
     /** Where each card links to. Defaults to `/planes/<slug>`. */
     detailsLink = input((plan) => ['/planes', planSlug(plan)]);
+    // Cards
+    showPrice = input(true);
+    priceLabel = input('');
+    priceFormat = input({});
+    /** Detail line of each card. Defaults to duration and number of people. */
+    planMeta = input(defaultPlanMeta);
+    cardAppearance = input('filled');
+    ctaLabel = input('Ver plan');
+    ctaVariant = input('primary');
+    /** Added after the plan name in each image's alt text. */
+    imageAltSuffix = input('');
+    skeletonCount = input(6);
+    // Texts and layout
     showBanner = input(true);
     showSearch = input(true);
     titlePrefix = input('Reserva tu plan');
     resultsTitle = input('Resultados');
-    categoriesTitle = input('CATEGORÍA DE PLANES');
+    categoriesTitle = input('Categorías');
+    categoriesLayout = input('auto');
     searchPlaceholder = input('Buscar plan');
     searchIconSrc = input('');
     filterTitle = input('Filtrar');
     filterIconSrc = input('');
-    ctaLabel = input('Saber más');
-    /** Added after the plan name in each image's alt text. */
-    imageAltSuffix = input('');
     emptyMessage = input('No encontramos planes con esos criterios.');
-    categoryChange = output();
+    emptyActionLabel = input('Ver todos los planes');
+    /** Optional contact link shown in the empty state, for example WhatsApp. */
+    contactHref = input('');
+    contactLabel = input('Pregúntanos por WhatsApp');
     cardTemplate = contentChild(PlanCardTemplateDirective, { read: TemplateRef });
-    category = signal(null);
+    filterForm = viewChild(PlanFilterFormComponent);
     query = signal('');
     filter = signal(null);
     filterOpen = signal(false);
     /** Set when the user searched or filtered; results then cover every category. */
     searching = signal(false);
-    /** Category that was open before searching, to return to it when the search is cleared. */
-    lastCategory = null;
-    constructor() {
-        // Apply `initialCategory` until the user picks one.
-        effect(() => {
-            const initial = this.initialCategory();
-            untracked(() => {
-                if (!this.searching())
-                    this.category.set(initial);
-            });
-        });
-    }
-    categoryOptions = computed(() => this.showCounts() ? withCategoryCounts(this.categories(), this.plans()) : this.categories());
+    loading = computed(() => this.plans() === null);
+    skeletons = computed(() => Array.from({ length: this.skeletonCount() }, (_, i) => i));
+    /** Category shown in the menu: none while searching. */
+    activeCategory = computed(() => this.searching() ? null : (this.category() ?? this.initialCategory()));
+    categoryOptions = computed(() => this.showCounts() ? withCategoryCounts(this.categories(), this.plans() ?? []) : this.categories());
     hasFilter = computed(() => this.services().length > 0 || this.priceRanges().length > 0);
     visiblePlans = computed(() => {
-        const plans = this.plans();
+        const plans = this.plans() ?? [];
         if (!this.searching()) {
-            const category = this.category();
-            return category === null ? plans : filterPlansByCategory(plans, category);
+            return filterPlansByCategory(plans, this.category() ?? this.initialCategory());
         }
         const byName = searchPlansByName(plans, this.query());
         const filter = this.filter();
@@ -606,73 +979,83 @@ class PlanCatalogComponent {
     title = computed(() => {
         if (this.searching())
             return `${this.titlePrefix()} - ${this.resultsTitle()}`;
-        const option = this.categories().find((c) => c.value === this.category());
+        const option = this.categories().find((c) => c.value === this.activeCategory());
         return option ? `${this.titlePrefix()} - ${option.label}` : this.titlePrefix();
     });
     selectCategory(value) {
         if (value === null)
             return;
-        this.searching.set(false);
-        this.query.set('');
-        this.filter.set(null);
+        this.clearSearch();
         this.category.set(value);
-        this.categoryChange.emit(value);
     }
     onSearch(query) {
         this.query.set(query);
-        if (!query.trim() && !this.filter()) {
-            this.selectCategory(this.lastCategory ?? this.initialCategory());
-            return;
-        }
-        this.startSearch();
+        this.updateSearching();
     }
     onFilter(filter) {
         const empty = !filter.service && !filter.priceRange;
         this.filter.set(empty ? null : filter);
-        if (empty && !this.query().trim()) {
-            this.selectCategory(this.lastCategory ?? this.initialCategory());
-            return;
-        }
-        this.startSearch();
+        this.updateSearching();
+    }
+    /** Clears search and filter and shows the selected category again. */
+    showAll() {
+        this.filterForm()?.reset();
+        this.clearSearch();
     }
     linkFor(plan) {
         return this.detailsLink()(plan);
     }
-    startSearch() {
-        if (!this.searching())
-            this.lastCategory = this.category();
-        this.searching.set(true);
-        this.category.set(null);
+    metaFor(plan) {
+        return this.planMeta()(plan);
+    }
+    clearSearch() {
+        this.query.set('');
+        this.filter.set(null);
+        this.searching.set(false);
+    }
+    updateSearching() {
+        this.searching.set(!!this.query().trim() || !!this.filter());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanCatalogComponent, isStandalone: true, selector: "cc-plan-catalog", inputs: { plans: { classPropertyName: "plans", publicName: "plans", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, initialCategory: { classPropertyName: "initialCategory", publicName: "initialCategory", isSignal: true, isRequired: false, transformFunction: null }, showCounts: { classPropertyName: "showCounts", publicName: "showCounts", isSignal: true, isRequired: false, transformFunction: null }, services: { classPropertyName: "services", publicName: "services", isSignal: true, isRequired: false, transformFunction: null }, priceRanges: { classPropertyName: "priceRanges", publicName: "priceRanges", isSignal: true, isRequired: false, transformFunction: null }, detailsLink: { classPropertyName: "detailsLink", publicName: "detailsLink", isSignal: true, isRequired: false, transformFunction: null }, showBanner: { classPropertyName: "showBanner", publicName: "showBanner", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: true, isRequired: false, transformFunction: null }, resultsTitle: { classPropertyName: "resultsTitle", publicName: "resultsTitle", isSignal: true, isRequired: false, transformFunction: null }, categoriesTitle: { classPropertyName: "categoriesTitle", publicName: "categoriesTitle", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchIconSrc: { classPropertyName: "searchIconSrc", publicName: "searchIconSrc", isSignal: true, isRequired: false, transformFunction: null }, filterTitle: { classPropertyName: "filterTitle", publicName: "filterTitle", isSignal: true, isRequired: false, transformFunction: null }, filterIconSrc: { classPropertyName: "filterIconSrc", publicName: "filterIconSrc", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, imageAltSuffix: { classPropertyName: "imageAltSuffix", publicName: "imageAltSuffix", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { categoryChange: "categoryChange" }, queries: [{ propertyName: "cardTemplate", first: true, predicate: PlanCardTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (showBanner()) {\n  <cc-page-banner [title]=\"title()\" />\n}\n\n<div class=\"cc-catalog\">\n  <aside class=\"cc-catalog__side\">\n    @if (showSearch()) {\n      <cc-search-box\n        [placeholder]=\"searchPlaceholder()\"\n        [iconSrc]=\"searchIconSrc()\"\n        [(value)]=\"query\"\n        (search)=\"onSearch($event)\"\n      />\n    }\n\n    <div class=\"cc-catalog__panel\">\n      <cc-category-menu\n        [title]=\"categoriesTitle()\"\n        [options]=\"categoryOptions()\"\n        [selected]=\"category()\"\n        (selectedChange)=\"selectCategory($event)\"\n      />\n\n      @if (hasFilter()) {\n        <hr class=\"cc-catalog__rule\" />\n        <button\n          type=\"button\"\n          class=\"cc-catalog__filter-toggle\"\n          [attr.aria-expanded]=\"filterOpen()\"\n          (click)=\"filterOpen.set(!filterOpen())\"\n        >\n          <span>{{ filterTitle() }}</span>\n          @if (filterIconSrc()) {\n            <img [src]=\"filterIconSrc()\" alt=\"\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M3 5h18l-7 8v6l-4-2v-4L3 5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\n            </svg>\n          }\n        </button>\n        @if (filterOpen()) {\n          <cc-plan-filter-form\n            [services]=\"services()\"\n            [priceRanges]=\"priceRanges()\"\n            (filterChange)=\"onFilter($event)\"\n          />\n        }\n      }\n    </div>\n  </aside>\n\n  @if (visiblePlans().length) {\n    <div class=\"cc-catalog__grid\">\n      @for (plan of visiblePlans(); track plan.id) {\n        @if (cardTemplate(); as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: plan, link: linkFor(plan) }\" />\n        } @else {\n          <cc-plan-card\n            [name]=\"plan.name\"\n            [imageSrc]=\"plan.imgPath\"\n            [imageAlt]=\"plan.name + imageAltSuffix()\"\n            [link]=\"linkFor(plan)\"\n            [ctaLabel]=\"ctaLabel()\"\n          />\n        }\n      }\n    </div>\n  } @else {\n    <p class=\"cc-catalog__empty\">{{ emptyMessage() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.cc-catalog{display:flex;flex-direction:column;gap:4rem}.cc-catalog__side{display:flex;flex-direction:column;width:100%;overflow:hidden}.cc-catalog__panel{width:100%;box-sizing:border-box;padding:1.25rem;background:var(--cc-catalog-panel-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}.cc-catalog__rule{height:.1rem;margin:0 0 1.5rem;border:0;background:#d1d5db}.cc-catalog__filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 1.25rem;border:0;font:inherit;font-weight:700;color:var(--cc-text, var(--cc-primary, #4c6b4a));background:transparent;cursor:pointer}.cc-catalog__filter-toggle img,.cc-catalog__filter-toggle svg{width:1.75rem;height:1.75rem}.cc-catalog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--cc-catalog-column-min, 15rem)),1fr));gap:2rem 1.5rem;width:100%;height:auto;place-items:center;align-content:start}.cc-catalog__empty{width:100%;margin:0;font-size:1.5rem;text-align:center;color:var(--cc-accent, var(--cc-secondary, #ceab5d))}@media (min-width: 1024px){.cc-catalog{flex-direction:row}.cc-catalog__side{flex:none;width:24rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageBannerComponent, selector: "cc-page-banner", inputs: ["title", "variant", "iconSrc", "backLink", "backIconSrc", "backLabel"] }, { kind: "component", type: SearchBoxComponent, selector: "cc-search-box", inputs: ["value", "placeholder", "buttonLabel", "iconSrc"], outputs: ["valueChange", "search"] }, { kind: "component", type: CategoryMenuComponent, selector: "cc-category-menu", inputs: ["options", "selected", "title"], outputs: ["selectedChange"] }, { kind: "component", type: PlanFilterFormComponent, selector: "cc-plan-filter-form", inputs: ["services", "priceRanges", "serviceLabel", "priceLabel", "anyLabel", "submitLabel", "resetLabel"], outputs: ["filterChange"] }, { kind: "component", type: PlanCardComponent, selector: "cc-plan-card", inputs: ["name", "imageSrc", "imageAlt", "subtitle", "link", "ctaLabel"], outputs: ["ctaClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanCatalogComponent, isStandalone: true, selector: "cc-plan-catalog", inputs: { plans: { classPropertyName: "plans", publicName: "plans", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, initialCategory: { classPropertyName: "initialCategory", publicName: "initialCategory", isSignal: true, isRequired: false, transformFunction: null }, showCounts: { classPropertyName: "showCounts", publicName: "showCounts", isSignal: true, isRequired: false, transformFunction: null }, services: { classPropertyName: "services", publicName: "services", isSignal: true, isRequired: false, transformFunction: null }, priceRanges: { classPropertyName: "priceRanges", publicName: "priceRanges", isSignal: true, isRequired: false, transformFunction: null }, detailsLink: { classPropertyName: "detailsLink", publicName: "detailsLink", isSignal: true, isRequired: false, transformFunction: null }, showPrice: { classPropertyName: "showPrice", publicName: "showPrice", isSignal: true, isRequired: false, transformFunction: null }, priceLabel: { classPropertyName: "priceLabel", publicName: "priceLabel", isSignal: true, isRequired: false, transformFunction: null }, priceFormat: { classPropertyName: "priceFormat", publicName: "priceFormat", isSignal: true, isRequired: false, transformFunction: null }, planMeta: { classPropertyName: "planMeta", publicName: "planMeta", isSignal: true, isRequired: false, transformFunction: null }, cardAppearance: { classPropertyName: "cardAppearance", publicName: "cardAppearance", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaVariant: { classPropertyName: "ctaVariant", publicName: "ctaVariant", isSignal: true, isRequired: false, transformFunction: null }, imageAltSuffix: { classPropertyName: "imageAltSuffix", publicName: "imageAltSuffix", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showBanner: { classPropertyName: "showBanner", publicName: "showBanner", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: true, isRequired: false, transformFunction: null }, resultsTitle: { classPropertyName: "resultsTitle", publicName: "resultsTitle", isSignal: true, isRequired: false, transformFunction: null }, categoriesTitle: { classPropertyName: "categoriesTitle", publicName: "categoriesTitle", isSignal: true, isRequired: false, transformFunction: null }, categoriesLayout: { classPropertyName: "categoriesLayout", publicName: "categoriesLayout", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchIconSrc: { classPropertyName: "searchIconSrc", publicName: "searchIconSrc", isSignal: true, isRequired: false, transformFunction: null }, filterTitle: { classPropertyName: "filterTitle", publicName: "filterTitle", isSignal: true, isRequired: false, transformFunction: null }, filterIconSrc: { classPropertyName: "filterIconSrc", publicName: "filterIconSrc", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyActionLabel: { classPropertyName: "emptyActionLabel", publicName: "emptyActionLabel", isSignal: true, isRequired: false, transformFunction: null }, contactHref: { classPropertyName: "contactHref", publicName: "contactHref", isSignal: true, isRequired: false, transformFunction: null }, contactLabel: { classPropertyName: "contactLabel", publicName: "contactLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { category: "categoryChange" }, queries: [{ propertyName: "cardTemplate", first: true, predicate: PlanCardTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "filterForm", first: true, predicate: PlanFilterFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBanner()) {\r\n  <cc-page-banner [title]=\"title()\" />\r\n}\r\n\r\n<div class=\"cc-catalog\">\r\n  <aside class=\"cc-catalog__side\">\r\n    <div class=\"cc-catalog__panel\">\r\n      @if (showSearch()) {\r\n        <cc-search-box\r\n          [placeholder]=\"searchPlaceholder()\"\r\n          [iconSrc]=\"searchIconSrc()\"\r\n          [(value)]=\"query\"\r\n          (search)=\"onSearch($event)\"\r\n        />\r\n      }\r\n\r\n      <cc-category-menu\r\n        [title]=\"categoriesTitle()\"\r\n        [layout]=\"categoriesLayout()\"\r\n        [options]=\"categoryOptions()\"\r\n        [selected]=\"activeCategory()\"\r\n        (selectedChange)=\"selectCategory($event)\"\r\n      />\r\n\r\n      @if (hasFilter()) {\r\n        <div class=\"cc-catalog__filter\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"cc-catalog__filter-toggle\"\r\n            aria-controls=\"cc-catalog-filter\"\r\n            [attr.aria-expanded]=\"filterOpen()\"\r\n            (click)=\"filterOpen.set(!filterOpen())\"\r\n          >\r\n            <span>{{ filterTitle() }}</span>\r\n            @if (filterIconSrc()) {\r\n              <img [src]=\"filterIconSrc()\" alt=\"\" />\r\n            } @else {\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M3 5h18l-7 8v6l-4-2v-4L3 5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            }\r\n          </button>\r\n          @if (filterOpen()) {\r\n            <cc-plan-filter-form\r\n              id=\"cc-catalog-filter\"\r\n              [services]=\"services()\"\r\n              [priceRanges]=\"priceRanges()\"\r\n              (filterChange)=\"onFilter($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n\r\n  <section class=\"cc-catalog__results\" [attr.aria-busy]=\"loading()\" aria-live=\"polite\">\r\n    @if (loading()) {\r\n      <div class=\"cc-catalog__grid\">\r\n        @for (i of skeletons(); track i) {\r\n          <cc-plan-card [skeleton]=\"true\" />\r\n        }\r\n      </div>\r\n    } @else if (visiblePlans().length) {\r\n      <div class=\"cc-catalog__grid\">\r\n        @for (plan of visiblePlans(); track plan.id) {\r\n          @if (cardTemplate(); as tpl) {\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: plan, link: linkFor(plan) }\" />\r\n          } @else {\r\n            <cc-plan-card\r\n              [name]=\"plan.name\"\r\n              [imageSrc]=\"plan.imgPath\"\r\n              [imageAlt]=\"plan.name + imageAltSuffix()\"\r\n              [meta]=\"metaFor(plan)\"\r\n              [price]=\"showPrice() ? plan.price : null\"\r\n              [priceLabel]=\"priceLabel()\"\r\n              [priceFormat]=\"priceFormat()\"\r\n              [link]=\"linkFor(plan)\"\r\n              [ctaLabel]=\"ctaLabel()\"\r\n              [ctaVariant]=\"ctaVariant()\"\r\n              [appearance]=\"cardAppearance()\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"cc-catalog__empty\">\r\n        <p>{{ emptyMessage() }}</p>\r\n        <div class=\"cc-catalog__empty-actions\">\r\n          <button ccButton type=\"button\" (click)=\"showAll()\">{{ emptyActionLabel() }}</button>\r\n          @if (contactHref()) {\r\n            <a ccButton variant=\"secondary\" [href]=\"contactHref()\" target=\"_blank\" rel=\"noopener\">{{ contactLabel() }}</a>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </section>\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_catalog-gap: var(--cc-catalog-gap, var(--_space-6));display:block;padding-bottom:var(--_space-16)}.cc-catalog{display:flex;flex-direction:column;gap:var(--_space-6)}.cc-catalog__side{width:100%;min-width:0}.cc-catalog__panel{display:flex;flex-direction:column;gap:var(--_space-4);width:100%;padding:var(--_space-4);border-radius:var(--_radius);background:var(--cc-catalog-panel-bg, var(--_surface))}.cc-catalog__filter{display:flex;flex-direction:column;gap:var(--_space-4);padding-top:var(--_space-4);border-top:1px solid var(--_border)}.cc-catalog__filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--_control-height);padding:0 var(--_space-4);border:0;border-radius:var(--_radius);font:inherit;font-weight:var(--_weight-bold);color:var(--_text);background:transparent;cursor:pointer}.cc-catalog__filter-toggle:hover{background:color-mix(in srgb,var(--_text) 6%,transparent)}.cc-catalog__filter-toggle img,.cc-catalog__filter-toggle svg{width:1.5rem;height:1.5rem}.cc-catalog__results{flex:1;min-width:0}.cc-catalog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--cc-catalog-column-min, 14rem)),1fr));gap:var(--_catalog-gap);align-items:stretch}.cc-catalog__empty{display:flex;flex-direction:column;align-items:center;gap:var(--_space-5);padding:var(--_space-12) var(--_space-4);border-radius:var(--_radius);text-align:center;background:var(--_surface)}.cc-catalog__empty p{margin:0;font-size:var(--_text-lg);color:var(--_text)}.cc-catalog__empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--_space-3)}@media (min-width: 1024px){.cc-catalog{flex-direction:row;align-items:flex-start;gap:var(--_space-10)}.cc-catalog__side{position:sticky;top:var(--cc-catalog-sticky-top, var(--_space-6));flex:none;width:var(--cc-catalog-sidebar-width, 18rem)}.cc-catalog__panel{padding:var(--_space-5)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "a[ccButton], button[ccButton]", inputs: ["variant", "size", "block"] }, { kind: "component", type: PageBannerComponent, selector: "cc-page-banner", inputs: ["title", "subtitle", "variant", "size", "italic", "align", "iconSrc", "backLink", "backIconSrc", "backLabel"] }, { kind: "component", type: SearchBoxComponent, selector: "cc-search-box", inputs: ["value", "placeholder", "label", "buttonLabel", "iconSrc"], outputs: ["valueChange", "search"] }, { kind: "component", type: CategoryMenuComponent, selector: "cc-category-menu", inputs: ["options", "selected", "title", "layout"], outputs: ["selectedChange"] }, { kind: "component", type: PlanFilterFormComponent, selector: "cc-plan-filter-form", inputs: ["services", "priceRanges", "mode", "serviceLabel", "priceLabel", "anyLabel", "submitLabel", "resetLabel"], outputs: ["filterChange"] }, { kind: "component", type: PlanCardComponent, selector: "cc-plan-card", inputs: ["name", "imageSrc", "imageAlt", "meta", "price", "priceLabel", "priceFormat", "link", "queryParams", "ctaLabel", "ctaVariant", "appearance", "headingLevel", "skeleton"], outputs: ["ctaClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanCatalogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cc-plan-catalog', imports: [
                         NgTemplateOutlet,
+                        ButtonComponent,
                         PageBannerComponent,
                         SearchBoxComponent,
                         CategoryMenuComponent,
                         PlanFilterFormComponent,
                         PlanCardComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showBanner()) {\n  <cc-page-banner [title]=\"title()\" />\n}\n\n<div class=\"cc-catalog\">\n  <aside class=\"cc-catalog__side\">\n    @if (showSearch()) {\n      <cc-search-box\n        [placeholder]=\"searchPlaceholder()\"\n        [iconSrc]=\"searchIconSrc()\"\n        [(value)]=\"query\"\n        (search)=\"onSearch($event)\"\n      />\n    }\n\n    <div class=\"cc-catalog__panel\">\n      <cc-category-menu\n        [title]=\"categoriesTitle()\"\n        [options]=\"categoryOptions()\"\n        [selected]=\"category()\"\n        (selectedChange)=\"selectCategory($event)\"\n      />\n\n      @if (hasFilter()) {\n        <hr class=\"cc-catalog__rule\" />\n        <button\n          type=\"button\"\n          class=\"cc-catalog__filter-toggle\"\n          [attr.aria-expanded]=\"filterOpen()\"\n          (click)=\"filterOpen.set(!filterOpen())\"\n        >\n          <span>{{ filterTitle() }}</span>\n          @if (filterIconSrc()) {\n            <img [src]=\"filterIconSrc()\" alt=\"\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M3 5h18l-7 8v6l-4-2v-4L3 5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\n            </svg>\n          }\n        </button>\n        @if (filterOpen()) {\n          <cc-plan-filter-form\n            [services]=\"services()\"\n            [priceRanges]=\"priceRanges()\"\n            (filterChange)=\"onFilter($event)\"\n          />\n        }\n      }\n    </div>\n  </aside>\n\n  @if (visiblePlans().length) {\n    <div class=\"cc-catalog__grid\">\n      @for (plan of visiblePlans(); track plan.id) {\n        @if (cardTemplate(); as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: plan, link: linkFor(plan) }\" />\n        } @else {\n          <cc-plan-card\n            [name]=\"plan.name\"\n            [imageSrc]=\"plan.imgPath\"\n            [imageAlt]=\"plan.name + imageAltSuffix()\"\n            [link]=\"linkFor(plan)\"\n            [ctaLabel]=\"ctaLabel()\"\n          />\n        }\n      }\n    </div>\n  } @else {\n    <p class=\"cc-catalog__empty\">{{ emptyMessage() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.cc-catalog{display:flex;flex-direction:column;gap:4rem}.cc-catalog__side{display:flex;flex-direction:column;width:100%;overflow:hidden}.cc-catalog__panel{width:100%;box-sizing:border-box;padding:1.25rem;background:var(--cc-catalog-panel-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}.cc-catalog__rule{height:.1rem;margin:0 0 1.5rem;border:0;background:#d1d5db}.cc-catalog__filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 1.25rem;border:0;font:inherit;font-weight:700;color:var(--cc-text, var(--cc-primary, #4c6b4a));background:transparent;cursor:pointer}.cc-catalog__filter-toggle img,.cc-catalog__filter-toggle svg{width:1.75rem;height:1.75rem}.cc-catalog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--cc-catalog-column-min, 15rem)),1fr));gap:2rem 1.5rem;width:100%;height:auto;place-items:center;align-content:start}.cc-catalog__empty{width:100%;margin:0;font-size:1.5rem;text-align:center;color:var(--cc-accent, var(--cc-secondary, #ceab5d))}@media (min-width: 1024px){.cc-catalog{flex-direction:row}.cc-catalog__side{flex:none;width:24rem}}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showBanner()) {\r\n  <cc-page-banner [title]=\"title()\" />\r\n}\r\n\r\n<div class=\"cc-catalog\">\r\n  <aside class=\"cc-catalog__side\">\r\n    <div class=\"cc-catalog__panel\">\r\n      @if (showSearch()) {\r\n        <cc-search-box\r\n          [placeholder]=\"searchPlaceholder()\"\r\n          [iconSrc]=\"searchIconSrc()\"\r\n          [(value)]=\"query\"\r\n          (search)=\"onSearch($event)\"\r\n        />\r\n      }\r\n\r\n      <cc-category-menu\r\n        [title]=\"categoriesTitle()\"\r\n        [layout]=\"categoriesLayout()\"\r\n        [options]=\"categoryOptions()\"\r\n        [selected]=\"activeCategory()\"\r\n        (selectedChange)=\"selectCategory($event)\"\r\n      />\r\n\r\n      @if (hasFilter()) {\r\n        <div class=\"cc-catalog__filter\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"cc-catalog__filter-toggle\"\r\n            aria-controls=\"cc-catalog-filter\"\r\n            [attr.aria-expanded]=\"filterOpen()\"\r\n            (click)=\"filterOpen.set(!filterOpen())\"\r\n          >\r\n            <span>{{ filterTitle() }}</span>\r\n            @if (filterIconSrc()) {\r\n              <img [src]=\"filterIconSrc()\" alt=\"\" />\r\n            } @else {\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <path d=\"M3 5h18l-7 8v6l-4-2v-4L3 5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            }\r\n          </button>\r\n          @if (filterOpen()) {\r\n            <cc-plan-filter-form\r\n              id=\"cc-catalog-filter\"\r\n              [services]=\"services()\"\r\n              [priceRanges]=\"priceRanges()\"\r\n              (filterChange)=\"onFilter($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n\r\n  <section class=\"cc-catalog__results\" [attr.aria-busy]=\"loading()\" aria-live=\"polite\">\r\n    @if (loading()) {\r\n      <div class=\"cc-catalog__grid\">\r\n        @for (i of skeletons(); track i) {\r\n          <cc-plan-card [skeleton]=\"true\" />\r\n        }\r\n      </div>\r\n    } @else if (visiblePlans().length) {\r\n      <div class=\"cc-catalog__grid\">\r\n        @for (plan of visiblePlans(); track plan.id) {\r\n          @if (cardTemplate(); as tpl) {\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: plan, link: linkFor(plan) }\" />\r\n          } @else {\r\n            <cc-plan-card\r\n              [name]=\"plan.name\"\r\n              [imageSrc]=\"plan.imgPath\"\r\n              [imageAlt]=\"plan.name + imageAltSuffix()\"\r\n              [meta]=\"metaFor(plan)\"\r\n              [price]=\"showPrice() ? plan.price : null\"\r\n              [priceLabel]=\"priceLabel()\"\r\n              [priceFormat]=\"priceFormat()\"\r\n              [link]=\"linkFor(plan)\"\r\n              [ctaLabel]=\"ctaLabel()\"\r\n              [ctaVariant]=\"ctaVariant()\"\r\n              [appearance]=\"cardAppearance()\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"cc-catalog__empty\">\r\n        <p>{{ emptyMessage() }}</p>\r\n        <div class=\"cc-catalog__empty-actions\">\r\n          <button ccButton type=\"button\" (click)=\"showAll()\">{{ emptyActionLabel() }}</button>\r\n          @if (contactHref()) {\r\n            <a ccButton variant=\"secondary\" [href]=\"contactHref()\" target=\"_blank\" rel=\"noopener\">{{ contactLabel() }}</a>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </section>\r\n</div>\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_catalog-gap: var(--cc-catalog-gap, var(--_space-6));display:block;padding-bottom:var(--_space-16)}.cc-catalog{display:flex;flex-direction:column;gap:var(--_space-6)}.cc-catalog__side{width:100%;min-width:0}.cc-catalog__panel{display:flex;flex-direction:column;gap:var(--_space-4);width:100%;padding:var(--_space-4);border-radius:var(--_radius);background:var(--cc-catalog-panel-bg, var(--_surface))}.cc-catalog__filter{display:flex;flex-direction:column;gap:var(--_space-4);padding-top:var(--_space-4);border-top:1px solid var(--_border)}.cc-catalog__filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--_control-height);padding:0 var(--_space-4);border:0;border-radius:var(--_radius);font:inherit;font-weight:var(--_weight-bold);color:var(--_text);background:transparent;cursor:pointer}.cc-catalog__filter-toggle:hover{background:color-mix(in srgb,var(--_text) 6%,transparent)}.cc-catalog__filter-toggle img,.cc-catalog__filter-toggle svg{width:1.5rem;height:1.5rem}.cc-catalog__results{flex:1;min-width:0}.cc-catalog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--cc-catalog-column-min, 14rem)),1fr));gap:var(--_catalog-gap);align-items:stretch}.cc-catalog__empty{display:flex;flex-direction:column;align-items:center;gap:var(--_space-5);padding:var(--_space-12) var(--_space-4);border-radius:var(--_radius);text-align:center;background:var(--_surface)}.cc-catalog__empty p{margin:0;font-size:var(--_text-lg);color:var(--_text)}.cc-catalog__empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--_space-3)}@media (min-width: 1024px){.cc-catalog{flex-direction:row;align-items:flex-start;gap:var(--_space-10)}.cc-catalog__side{position:sticky;top:var(--cc-catalog-sticky-top, var(--_space-6));flex:none;width:var(--cc-catalog-sidebar-width, 18rem)}.cc-catalog__panel{padding:var(--_space-5)}}\n"] }]
+        }] });
 
 /**
- * Plan detail view: title with a back link, photo, price, description, duration,
- * number of people, included services, and a gift box with the booking button.
- * It only renders; the page loads the plan and handles SEO.
+ * Plan detail view: title with a back link, photo, price with an early booking button,
+ * description, duration, number of people, included services and a gift box.
+ * On screens below 1024px a bar with the price and the booking button stays fixed at
+ * the bottom while the plan is on screen. It only renders; the page loads the plan and
+ * handles SEO.
  *
  * ```html
- * <cc-plan-details [plan]="plan" [bookingUrl]="whatsappLink" imageAltSuffix=" en Laurel Spa Medellín" />
+ * <cc-plan-details [plan]="plan" [bookingUrl]="bookingFor" imageAltSuffix=" en Laurel Spa" />
  * ```
+ *
+ * Tokens: --cc-details-panel-bg, --cc-details-price-bg, --cc-details-price-color,
+ * --cc-details-gift-border, --cc-details-bar-bg, --cc-details-image-ratio.
  */
 class PlanDetailsComponent {
     plan = input.required();
-    /** Link of the booking button, usually WhatsApp. */
+    /** Booking link, usually WhatsApp. A function receives the plan, to mention it in the message. */
     bookingUrl = input.required();
-    bookingLabel = input('¡RESERVAR AHORA!');
+    bookingLabel = input('Reservar por WhatsApp');
+    /** Shorter label for the bottom bar on small screens. */
+    barBookingLabel = input('Reservar');
+    bookingVariant = input('primary');
+    /** Keeps a bar with price and booking button at the bottom on small screens. */
+    stickyBar = input(true);
     showBanner = input(true);
     backLink = input('/planes');
     backLabel = input('Volver a los planes');
@@ -680,41 +1063,51 @@ class PlanDetailsComponent {
     titleIconSrc = input('');
     /** Added after the plan name in the photo's alt text. */
     imageAltSuffix = input('');
-    /** Arguments of Angular's `currency` pipe. */
-    currencyCode = input('COP');
-    currencyDisplay = input('COP$ ');
-    currencyDigits = input('1.0-0');
+    priceFormat = input({});
+    /** Small text under the price. Defaults to "Precio por plan". */
+    priceNote = input('Precio por plan');
     durationIconSrc = input('');
     personIconSrc = input('');
     peopleIconSrc = input('');
+    durationLabel = input('Duración');
+    peopleCaption = input('Personas');
     personLabel = input('persona');
-    peopleLabel = input('Personas');
-    includesLabel = input('Incluye:');
+    peopleLabel = input('personas');
+    includesLabel = input('Incluye');
     /** Gift box. It is hidden when `perks` is empty. */
-    perksTitle = input('Recibe con nuestro plan');
+    perksTitle = input('Recibe con tu plan');
     perks = input([
         'Gift Card de invitación en PDF para regalo.',
         'Decoración según la ocasión que celebres.',
     ]);
     perksImageSrc = input('');
-    perksImageAlt = input('Gift card de regalo');
+    perksImageAlt = input('');
     people = computed(() => Math.max(this.plan().cuantity || 1, 1));
     services = computed(() => this.plan().additionalServices ?? []);
+    price = computed(() => formatPrice(this.plan().price, this.priceFormat()));
+    booking = computed(() => {
+        const url = this.bookingUrl();
+        return typeof url === 'function' ? url(this.plan()) : url;
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanDetailsComponent, isStandalone: true, selector: "cc-plan-details", inputs: { plan: { classPropertyName: "plan", publicName: "plan", isSignal: true, isRequired: true, transformFunction: null }, bookingUrl: { classPropertyName: "bookingUrl", publicName: "bookingUrl", isSignal: true, isRequired: true, transformFunction: null }, bookingLabel: { classPropertyName: "bookingLabel", publicName: "bookingLabel", isSignal: true, isRequired: false, transformFunction: null }, showBanner: { classPropertyName: "showBanner", publicName: "showBanner", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, backIconSrc: { classPropertyName: "backIconSrc", publicName: "backIconSrc", isSignal: true, isRequired: false, transformFunction: null }, titleIconSrc: { classPropertyName: "titleIconSrc", publicName: "titleIconSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAltSuffix: { classPropertyName: "imageAltSuffix", publicName: "imageAltSuffix", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, currencyDigits: { classPropertyName: "currencyDigits", publicName: "currencyDigits", isSignal: true, isRequired: false, transformFunction: null }, durationIconSrc: { classPropertyName: "durationIconSrc", publicName: "durationIconSrc", isSignal: true, isRequired: false, transformFunction: null }, personIconSrc: { classPropertyName: "personIconSrc", publicName: "personIconSrc", isSignal: true, isRequired: false, transformFunction: null }, peopleIconSrc: { classPropertyName: "peopleIconSrc", publicName: "peopleIconSrc", isSignal: true, isRequired: false, transformFunction: null }, personLabel: { classPropertyName: "personLabel", publicName: "personLabel", isSignal: true, isRequired: false, transformFunction: null }, peopleLabel: { classPropertyName: "peopleLabel", publicName: "peopleLabel", isSignal: true, isRequired: false, transformFunction: null }, includesLabel: { classPropertyName: "includesLabel", publicName: "includesLabel", isSignal: true, isRequired: false, transformFunction: null }, perksTitle: { classPropertyName: "perksTitle", publicName: "perksTitle", isSignal: true, isRequired: false, transformFunction: null }, perks: { classPropertyName: "perks", publicName: "perks", isSignal: true, isRequired: false, transformFunction: null }, perksImageSrc: { classPropertyName: "perksImageSrc", publicName: "perksImageSrc", isSignal: true, isRequired: false, transformFunction: null }, perksImageAlt: { classPropertyName: "perksImageAlt", publicName: "perksImageAlt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showBanner()) {\n  <cc-page-banner\n    variant=\"plain\"\n    [title]=\"plan().name\"\n    [iconSrc]=\"titleIconSrc()\"\n    [backLink]=\"backLink()\"\n    [backLabel]=\"backLabel()\"\n    [backIconSrc]=\"backIconSrc()\"\n  />\n}\n\n<div class=\"cc-details\">\n  <div class=\"cc-details__media\">\n    <img class=\"cc-details__photo\" [src]=\"plan().imgPath\" [alt]=\"plan().name + imageAltSuffix()\" />\n    <ng-content select=\"[ccDetailsMedia]\" />\n  </div>\n\n  <div class=\"cc-details__panel\">\n    <div class=\"cc-details__info\">\n      <div class=\"cc-details__price\">\n        <p>{{ plan().price | currency: currencyCode() : currencyDisplay() : currencyDigits() }}</p>\n      </div>\n\n      <p class=\"cc-details__description\">{{ plan().description }}</p>\n\n      <div class=\"cc-details__facts\">\n        <div class=\"cc-details__fact\">\n          @if (durationIconSrc()) {\n            <img [src]=\"durationIconSrc()\" alt=\"Duraci\u00F3n\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Duraci\u00F3n\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n              <path d=\"M12 7v5l3 2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n            </svg>\n          }\n          <small>{{ plan().duration }}</small>\n        </div>\n\n        <div class=\"cc-details__fact\">\n          @if (people() > 1) {\n            @if (peopleIconSrc()) {\n              <img [src]=\"peopleIconSrc()\" alt=\"\" />\n            } @else {\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <circle cx=\"9\" cy=\"8\" r=\"3.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <circle cx=\"17\" cy=\"9\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <path d=\"M2.5 20a6.5 6.5 0 0 1 13 0M15 14.5a5 5 0 0 1 6.5 4.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n              </svg>\n            }\n            <small>{{ people() }} {{ peopleLabel() }}</small>\n          } @else {\n            @if (personIconSrc()) {\n              <img [src]=\"personIconSrc()\" alt=\"\" />\n            } @else {\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"8\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n              </svg>\n            }\n            <small>1 {{ personLabel() }}</small>\n          }\n        </div>\n      </div>\n\n      @if (services().length) {\n        <h2 class=\"cc-details__includes\">{{ includesLabel() }}</h2>\n        <ul class=\"cc-details__services\">\n          @for (service of services(); track $index) {\n            <li>\n              <img [src]=\"service.iconPath\" alt=\"\" />\n              <small>{{ service.name }}</small>\n            </li>\n          }\n        </ul>\n      }\n\n      <ng-content />\n\n      <div class=\"cc-details__gift\" [class.cc-details__gift--solo]=\"!perks().length\">\n        @if (perks().length) {\n          @if (perksImageSrc()) {\n            <img class=\"cc-details__gift-img\" [src]=\"perksImageSrc()\" [alt]=\"perksImageAlt()\" loading=\"lazy\" />\n          }\n          <div class=\"cc-details__perks\">\n            <h2>{{ perksTitle() }}</h2>\n            <ul>\n              @for (perk of perks(); track $index) {\n                <li>{{ perk }}</li>\n              }\n            </ul>\n          </div>\n        }\n        <div class=\"cc-details__cta-wrap\">\n          <a class=\"cc-details__cta\" [href]=\"bookingUrl()\" target=\"_blank\" rel=\"noopener\">{{ bookingLabel() }}</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;color:var(--cc-text, var(--cc-primary, #4c6b4a))}.cc-details{display:flex;flex-direction:column;gap:3rem}.cc-details__media{display:flex;flex-direction:column;gap:2.5rem}.cc-details__photo{display:block;width:100%;max-width:60rem;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1))}.cc-details__panel{background:var(--cc-details-panel-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}.cc-details__info{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:2.5rem;width:100%;padding:5rem 2.5rem 1.25rem}.cc-details__price{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;padding:.25rem 1.5rem;white-space:nowrap;text-align:center;background:var(--cc-details-price-bg, var(--cc-heading, var(--cc-primary, #4c6b4a)));box-shadow:0 1px 2px #0000000d}.cc-details__price p{margin:0;font-family:var(--cc-font-heading, inherit);font-size:1.6rem;font-weight:700;color:var(--cc-on-accent, var(--cc-bg, #f0ffef))}.cc-details__description{margin:0}.cc-details__facts{display:flex;gap:2.5rem}.cc-details__fact{display:flex;flex-direction:column;align-items:center;gap:.25rem}.cc-details__fact img,.cc-details__fact svg{width:1.75rem;height:1.75rem}.cc-details__includes{margin:0;font-size:1rem;font-weight:600;color:var(--cc-heading, var(--cc-primary, #4c6b4a))}.cc-details__services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}.cc-details__services li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center}.cc-details__services img{width:2rem}.cc-details__gift{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.25rem;width:100%;padding:.5rem;border:2px dashed var(--cc-details-gift-border, var(--cc-secondary-light, #f8f4ee))}.cc-details__gift--solo{border:0;padding:0}.cc-details__gift-img{width:100%}.cc-details__perks{display:flex;flex-direction:column;gap:1.25rem}.cc-details__perks h2{margin:0;font-size:1rem;font-weight:600;color:var(--cc-accent, var(--cc-secondary, #ceab5d))}.cc-details__perks ul{margin:0;padding:0;list-style:none}.cc-details__cta-wrap{display:flex;align-items:flex-end;width:100%;height:100%}.cc-details__cta{padding:.75rem 2.5rem;white-space:nowrap;text-decoration:none;color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-accent, var(--cc-secondary, #ceab5d));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;transition:background-color .15s ease-in}.cc-details__cta:hover{background:var(--cc-accent-hover, var(--cc-secondary-dark, #9a7521))}@media (min-width: 1024px){.cc-details{flex-direction:row;gap:7rem}.cc-details__media,.cc-details__panel{flex:1 1 0}.cc-details__info{gap:1.25rem}.cc-details__price{width:auto;min-width:30%}.cc-details__services{grid-template-columns:repeat(6,minmax(0,1fr))}.cc-details__gift{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem 1.5rem;padding:1.25rem}.cc-details__gift--solo{grid-template-columns:1fr;padding:0}.cc-details__gift-img{width:10rem}.cc-details__perks{gap:.5rem}.cc-details__perks ul{padding-left:1.25rem;list-style:disc}.cc-details__cta-wrap{grid-column:1 / -1;justify-content:flex-end;width:100%}}\n"], dependencies: [{ kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: PageBannerComponent, selector: "cc-page-banner", inputs: ["title", "variant", "iconSrc", "backLink", "backIconSrc", "backLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PlanDetailsComponent, isStandalone: true, selector: "cc-plan-details", inputs: { plan: { classPropertyName: "plan", publicName: "plan", isSignal: true, isRequired: true, transformFunction: null }, bookingUrl: { classPropertyName: "bookingUrl", publicName: "bookingUrl", isSignal: true, isRequired: true, transformFunction: null }, bookingLabel: { classPropertyName: "bookingLabel", publicName: "bookingLabel", isSignal: true, isRequired: false, transformFunction: null }, barBookingLabel: { classPropertyName: "barBookingLabel", publicName: "barBookingLabel", isSignal: true, isRequired: false, transformFunction: null }, bookingVariant: { classPropertyName: "bookingVariant", publicName: "bookingVariant", isSignal: true, isRequired: false, transformFunction: null }, stickyBar: { classPropertyName: "stickyBar", publicName: "stickyBar", isSignal: true, isRequired: false, transformFunction: null }, showBanner: { classPropertyName: "showBanner", publicName: "showBanner", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, backIconSrc: { classPropertyName: "backIconSrc", publicName: "backIconSrc", isSignal: true, isRequired: false, transformFunction: null }, titleIconSrc: { classPropertyName: "titleIconSrc", publicName: "titleIconSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAltSuffix: { classPropertyName: "imageAltSuffix", publicName: "imageAltSuffix", isSignal: true, isRequired: false, transformFunction: null }, priceFormat: { classPropertyName: "priceFormat", publicName: "priceFormat", isSignal: true, isRequired: false, transformFunction: null }, priceNote: { classPropertyName: "priceNote", publicName: "priceNote", isSignal: true, isRequired: false, transformFunction: null }, durationIconSrc: { classPropertyName: "durationIconSrc", publicName: "durationIconSrc", isSignal: true, isRequired: false, transformFunction: null }, personIconSrc: { classPropertyName: "personIconSrc", publicName: "personIconSrc", isSignal: true, isRequired: false, transformFunction: null }, peopleIconSrc: { classPropertyName: "peopleIconSrc", publicName: "peopleIconSrc", isSignal: true, isRequired: false, transformFunction: null }, durationLabel: { classPropertyName: "durationLabel", publicName: "durationLabel", isSignal: true, isRequired: false, transformFunction: null }, peopleCaption: { classPropertyName: "peopleCaption", publicName: "peopleCaption", isSignal: true, isRequired: false, transformFunction: null }, personLabel: { classPropertyName: "personLabel", publicName: "personLabel", isSignal: true, isRequired: false, transformFunction: null }, peopleLabel: { classPropertyName: "peopleLabel", publicName: "peopleLabel", isSignal: true, isRequired: false, transformFunction: null }, includesLabel: { classPropertyName: "includesLabel", publicName: "includesLabel", isSignal: true, isRequired: false, transformFunction: null }, perksTitle: { classPropertyName: "perksTitle", publicName: "perksTitle", isSignal: true, isRequired: false, transformFunction: null }, perks: { classPropertyName: "perks", publicName: "perks", isSignal: true, isRequired: false, transformFunction: null }, perksImageSrc: { classPropertyName: "perksImageSrc", publicName: "perksImageSrc", isSignal: true, isRequired: false, transformFunction: null }, perksImageAlt: { classPropertyName: "perksImageAlt", publicName: "perksImageAlt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showBanner()) {\r\n  <cc-page-banner\r\n    [title]=\"plan().name\"\r\n    [iconSrc]=\"titleIconSrc()\"\r\n    [backLink]=\"backLink()\"\r\n    [backLabel]=\"backLabel()\"\r\n    [backIconSrc]=\"backIconSrc()\"\r\n  />\r\n}\r\n\r\n<div class=\"cc-details\">\r\n  <div class=\"cc-details__media\">\r\n    <img\r\n      class=\"cc-details__photo\"\r\n      [src]=\"plan().imgPath\"\r\n      [alt]=\"plan().name + imageAltSuffix()\"\r\n      width=\"800\"\r\n      height=\"800\"\r\n    />\r\n    <ng-content select=\"[ccDetailsMedia]\" />\r\n  </div>\r\n\r\n  <div class=\"cc-details__panel\">\r\n    <div class=\"cc-details__buy\">\r\n      <p class=\"cc-details__price\">{{ price() }}</p>\r\n      @if (priceNote()) {\r\n        <p class=\"cc-details__price-note\">{{ priceNote() }}</p>\r\n      }\r\n      <a ccButton [variant]=\"bookingVariant()\" size=\"lg\" class=\"cc-details__cta-top\" [href]=\"booking()\" target=\"_blank\" rel=\"noopener\">\r\n        {{ bookingLabel() }}\r\n      </a>\r\n    </div>\r\n\r\n    <p class=\"cc-details__description\">{{ plan().description }}</p>\r\n\r\n    <dl class=\"cc-details__facts\">\r\n      <div class=\"cc-details__fact\">\r\n        @if (durationIconSrc()) {\r\n          <img [src]=\"durationIconSrc()\" alt=\"\" />\r\n        } @else {\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n            <path d=\"M12 7v5l3 2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n          </svg>\r\n        }\r\n        <dt class=\"cc-sr-only\">{{ durationLabel() }}</dt>\r\n        <dd>{{ plan().duration }}</dd>\r\n      </div>\r\n\r\n      <div class=\"cc-details__fact\">\r\n        @if (people() > 1) {\r\n          @if (peopleIconSrc()) {\r\n            <img [src]=\"peopleIconSrc()\" alt=\"\" />\r\n          } @else {\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n              <circle cx=\"9\" cy=\"8\" r=\"3.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n              <circle cx=\"17\" cy=\"9\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n              <path d=\"M2.5 20a6.5 6.5 0 0 1 13 0M15 14.5a5 5 0 0 1 6.5 4.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n            </svg>\r\n          }\r\n        } @else {\r\n          @if (personIconSrc()) {\r\n            <img [src]=\"personIconSrc()\" alt=\"\" />\r\n          } @else {\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n              <circle cx=\"12\" cy=\"8\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n              <path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n            </svg>\r\n          }\r\n        }\r\n        <dt class=\"cc-sr-only\">{{ peopleCaption() }}</dt>\r\n        <dd>{{ people() }} {{ people() > 1 ? peopleLabel() : personLabel() }}</dd>\r\n      </div>\r\n    </dl>\r\n\r\n    @if (services().length) {\r\n      <section class=\"cc-details__section\">\r\n        <h2 class=\"cc-details__heading\">{{ includesLabel() }}</h2>\r\n        <ul class=\"cc-details__services\">\r\n          @for (service of services(); track $index) {\r\n            <li>\r\n              <img [src]=\"service.iconPath\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <span>{{ service.name }}</span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n\r\n    <ng-content />\r\n\r\n    @if (perks().length) {\r\n      <section class=\"cc-details__gift\">\r\n        @if (perksImageSrc()) {\r\n          <img class=\"cc-details__gift-img\" [src]=\"perksImageSrc()\" [alt]=\"perksImageAlt()\" loading=\"lazy\" />\r\n        }\r\n        <div class=\"cc-details__perks\">\r\n          <h2 class=\"cc-details__heading cc-details__heading--accent\">{{ perksTitle() }}</h2>\r\n          <ul>\r\n            @for (perk of perks(); track $index) {\r\n              <li>{{ perk }}</li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"cc-details__cta-bottom\">\r\n      <a ccButton [variant]=\"bookingVariant()\" size=\"lg\" [href]=\"booking()\" target=\"_blank\" rel=\"noopener\">{{ bookingLabel() }}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (stickyBar()) {\r\n  <div class=\"cc-details__bar\">\r\n    <div class=\"cc-details__bar-price\">\r\n      <span class=\"cc-details__bar-amount\">{{ price() }}</span>\r\n      <span class=\"cc-details__bar-name\">{{ plan().name }}</span>\r\n    </div>\r\n    <a ccButton [variant]=\"bookingVariant()\" class=\"cc-details__bar-cta\" [href]=\"booking()\" target=\"_blank\" rel=\"noopener\">{{ barBookingLabel() }}</a>\r\n  </div>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block;color:var(--_text)}.cc-details{display:flex;flex-direction:column;gap:var(--_space-8)}.cc-details__media{display:flex;flex-direction:column;gap:var(--_space-6)}.cc-details__photo{display:block;width:100%;height:auto;aspect-ratio:var(--cc-details-image-ratio, 1);object-fit:cover;border-radius:var(--_radius);box-shadow:var(--_shadow-lg)}.cc-details__panel{display:flex;flex-direction:column;gap:var(--_space-6);padding:var(--_space-6);border-radius:var(--_radius);background:var(--cc-details-panel-bg, var(--_surface))}.cc-details__buy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--_space-2)}.cc-details__price{margin:0;padding:var(--_space-1) var(--_space-4);border-radius:var(--_radius);font-family:var(--_font-heading);font-size:var(--_text-3xl);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);color:var(--cc-details-price-color, var(--_on-inverse));background:var(--cc-details-price-bg, var(--_inverse))}.cc-details__price-note{margin:0;font-size:var(--_text-sm);color:var(--_text-muted)}.cc-details__cta-top{margin-top:var(--_space-2)}.cc-details__description{margin:0;font-size:var(--_text-md);line-height:var(--_leading-body)}.cc-details__facts{display:flex;flex-wrap:wrap;gap:var(--_space-8);margin:0}.cc-details__fact{display:flex;align-items:center;gap:var(--_space-2)}.cc-details__fact dd{margin:0;font-size:var(--_text-sm);font-weight:var(--_weight-semibold)}.cc-details__fact img,.cc-details__fact svg{flex:none;width:1.75rem;height:1.75rem}.cc-details__section{display:flex;flex-direction:column;gap:var(--_space-4)}.cc-details__heading{font-style:var(--_heading-style);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);margin:0;font-family:var(--_font-heading);font-size:var(--_text-lg);font-weight:var(--_weight-bold);color:var(--_heading)}.cc-details__heading--accent{color:var(--_accent-text)}.cc-details__services{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--_space-4) var(--_space-3);margin:0;padding:0;list-style:none}.cc-details__services li{display:flex;flex-direction:column;align-items:center;gap:var(--_space-2);font-size:var(--_text-sm);line-height:var(--_leading-snug);text-align:center}.cc-details__services img{width:2.25rem;height:2.25rem;object-fit:contain}.cc-details__gift{display:flex;flex-direction:column;gap:var(--_space-4);padding:var(--_space-5);border:2px dashed var(--cc-details-gift-border, var(--_border-strong));border-radius:var(--_radius)}.cc-details__gift-img{width:100%;max-width:12rem;align-self:center}.cc-details__perks{display:flex;flex-direction:column;gap:var(--_space-3)}.cc-details__perks ul{display:flex;flex-direction:column;gap:var(--_space-2);margin:0;padding-left:var(--_space-5);line-height:var(--_leading-snug)}.cc-details__cta-bottom{display:flex;justify-content:flex-end}.cc-details__bar{position:sticky;bottom:0;z-index:var(--_z-sticky);display:flex;align-items:center;justify-content:space-between;gap:var(--_space-3);margin:var(--_space-6) calc(-1 * var(--cc-details-bar-bleed, 0px)) 0;padding:var(--_space-3) var(--_space-4);background:var(--cc-details-bar-bg, var(--_canvas));box-shadow:0 -4px 12px #00000014}.cc-details__bar-cta{flex:none;white-space:nowrap}.cc-details__bar-price{display:flex;flex-direction:column;min-width:0}.cc-details__bar-amount{font-size:var(--_text-lg);font-weight:var(--_weight-bold);color:var(--_heading)}.cc-details__bar-name{overflow:hidden;font-size:var(--_text-xs);white-space:nowrap;text-overflow:ellipsis;color:var(--_text-muted)}@media (min-width: 640px){.cc-details__gift{flex-direction:row;align-items:center}.cc-details__gift-img{width:10rem;align-self:auto}}@media (min-width: 1024px){.cc-details{flex-direction:row;align-items:flex-start;gap:var(--_space-12)}.cc-details__media{position:sticky;top:var(--cc-details-sticky-top, var(--_space-6));flex:1 1 0}.cc-details__panel{flex:1 1 0;padding:var(--_space-8)}.cc-details__bar{display:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "a[ccButton], button[ccButton]", inputs: ["variant", "size", "block"] }, { kind: "component", type: PageBannerComponent, selector: "cc-page-banner", inputs: ["title", "subtitle", "variant", "size", "italic", "align", "iconSrc", "backLink", "backIconSrc", "backLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PlanDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-plan-details', imports: [CurrencyPipe, PageBannerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showBanner()) {\n  <cc-page-banner\n    variant=\"plain\"\n    [title]=\"plan().name\"\n    [iconSrc]=\"titleIconSrc()\"\n    [backLink]=\"backLink()\"\n    [backLabel]=\"backLabel()\"\n    [backIconSrc]=\"backIconSrc()\"\n  />\n}\n\n<div class=\"cc-details\">\n  <div class=\"cc-details__media\">\n    <img class=\"cc-details__photo\" [src]=\"plan().imgPath\" [alt]=\"plan().name + imageAltSuffix()\" />\n    <ng-content select=\"[ccDetailsMedia]\" />\n  </div>\n\n  <div class=\"cc-details__panel\">\n    <div class=\"cc-details__info\">\n      <div class=\"cc-details__price\">\n        <p>{{ plan().price | currency: currencyCode() : currencyDisplay() : currencyDigits() }}</p>\n      </div>\n\n      <p class=\"cc-details__description\">{{ plan().description }}</p>\n\n      <div class=\"cc-details__facts\">\n        <div class=\"cc-details__fact\">\n          @if (durationIconSrc()) {\n            <img [src]=\"durationIconSrc()\" alt=\"Duraci\u00F3n\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Duraci\u00F3n\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n              <path d=\"M12 7v5l3 2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n            </svg>\n          }\n          <small>{{ plan().duration }}</small>\n        </div>\n\n        <div class=\"cc-details__fact\">\n          @if (people() > 1) {\n            @if (peopleIconSrc()) {\n              <img [src]=\"peopleIconSrc()\" alt=\"\" />\n            } @else {\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <circle cx=\"9\" cy=\"8\" r=\"3.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <circle cx=\"17\" cy=\"9\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <path d=\"M2.5 20a6.5 6.5 0 0 1 13 0M15 14.5a5 5 0 0 1 6.5 4.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n              </svg>\n            }\n            <small>{{ people() }} {{ peopleLabel() }}</small>\n          } @else {\n            @if (personIconSrc()) {\n              <img [src]=\"personIconSrc()\" alt=\"\" />\n            } @else {\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"8\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n              </svg>\n            }\n            <small>1 {{ personLabel() }}</small>\n          }\n        </div>\n      </div>\n\n      @if (services().length) {\n        <h2 class=\"cc-details__includes\">{{ includesLabel() }}</h2>\n        <ul class=\"cc-details__services\">\n          @for (service of services(); track $index) {\n            <li>\n              <img [src]=\"service.iconPath\" alt=\"\" />\n              <small>{{ service.name }}</small>\n            </li>\n          }\n        </ul>\n      }\n\n      <ng-content />\n\n      <div class=\"cc-details__gift\" [class.cc-details__gift--solo]=\"!perks().length\">\n        @if (perks().length) {\n          @if (perksImageSrc()) {\n            <img class=\"cc-details__gift-img\" [src]=\"perksImageSrc()\" [alt]=\"perksImageAlt()\" loading=\"lazy\" />\n          }\n          <div class=\"cc-details__perks\">\n            <h2>{{ perksTitle() }}</h2>\n            <ul>\n              @for (perk of perks(); track $index) {\n                <li>{{ perk }}</li>\n              }\n            </ul>\n          </div>\n        }\n        <div class=\"cc-details__cta-wrap\">\n          <a class=\"cc-details__cta\" [href]=\"bookingUrl()\" target=\"_blank\" rel=\"noopener\">{{ bookingLabel() }}</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;color:var(--cc-text, var(--cc-primary, #4c6b4a))}.cc-details{display:flex;flex-direction:column;gap:3rem}.cc-details__media{display:flex;flex-direction:column;gap:2.5rem}.cc-details__photo{display:block;width:100%;max-width:60rem;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1))}.cc-details__panel{background:var(--cc-details-panel-bg, var(--cc-surface, var(--cc-secondary-light, #f8f4ee)))}.cc-details__info{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:2.5rem;width:100%;padding:5rem 2.5rem 1.25rem}.cc-details__price{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;padding:.25rem 1.5rem;white-space:nowrap;text-align:center;background:var(--cc-details-price-bg, var(--cc-heading, var(--cc-primary, #4c6b4a)));box-shadow:0 1px 2px #0000000d}.cc-details__price p{margin:0;font-family:var(--cc-font-heading, inherit);font-size:1.6rem;font-weight:700;color:var(--cc-on-accent, var(--cc-bg, #f0ffef))}.cc-details__description{margin:0}.cc-details__facts{display:flex;gap:2.5rem}.cc-details__fact{display:flex;flex-direction:column;align-items:center;gap:.25rem}.cc-details__fact img,.cc-details__fact svg{width:1.75rem;height:1.75rem}.cc-details__includes{margin:0;font-size:1rem;font-weight:600;color:var(--cc-heading, var(--cc-primary, #4c6b4a))}.cc-details__services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}.cc-details__services li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center}.cc-details__services img{width:2rem}.cc-details__gift{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.25rem;width:100%;padding:.5rem;border:2px dashed var(--cc-details-gift-border, var(--cc-secondary-light, #f8f4ee))}.cc-details__gift--solo{border:0;padding:0}.cc-details__gift-img{width:100%}.cc-details__perks{display:flex;flex-direction:column;gap:1.25rem}.cc-details__perks h2{margin:0;font-size:1rem;font-weight:600;color:var(--cc-accent, var(--cc-secondary, #ceab5d))}.cc-details__perks ul{margin:0;padding:0;list-style:none}.cc-details__cta-wrap{display:flex;align-items:flex-end;width:100%;height:100%}.cc-details__cta{padding:.75rem 2.5rem;white-space:nowrap;text-decoration:none;color:var(--cc-on-accent, var(--cc-bg, #f0ffef));background:var(--cc-accent, var(--cc-secondary, #ceab5d));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;transition:background-color .15s ease-in}.cc-details__cta:hover{background:var(--cc-accent-hover, var(--cc-secondary-dark, #9a7521))}@media (min-width: 1024px){.cc-details{flex-direction:row;gap:7rem}.cc-details__media,.cc-details__panel{flex:1 1 0}.cc-details__info{gap:1.25rem}.cc-details__price{width:auto;min-width:30%}.cc-details__services{grid-template-columns:repeat(6,minmax(0,1fr))}.cc-details__gift{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem 1.5rem;padding:1.25rem}.cc-details__gift--solo{grid-template-columns:1fr;padding:0}.cc-details__gift-img{width:10rem}.cc-details__perks{gap:.5rem}.cc-details__perks ul{padding-left:1.25rem;list-style:disc}.cc-details__cta-wrap{grid-column:1 / -1;justify-content:flex-end;width:100%}}\n"] }]
+            args: [{ selector: 'cc-plan-details', imports: [ButtonComponent, PageBannerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showBanner()) {\r\n  <cc-page-banner\r\n    [title]=\"plan().name\"\r\n    [iconSrc]=\"titleIconSrc()\"\r\n    [backLink]=\"backLink()\"\r\n    [backLabel]=\"backLabel()\"\r\n    [backIconSrc]=\"backIconSrc()\"\r\n  />\r\n}\r\n\r\n<div class=\"cc-details\">\r\n  <div class=\"cc-details__media\">\r\n    <img\r\n      class=\"cc-details__photo\"\r\n      [src]=\"plan().imgPath\"\r\n      [alt]=\"plan().name + imageAltSuffix()\"\r\n      width=\"800\"\r\n      height=\"800\"\r\n    />\r\n    <ng-content select=\"[ccDetailsMedia]\" />\r\n  </div>\r\n\r\n  <div class=\"cc-details__panel\">\r\n    <div class=\"cc-details__buy\">\r\n      <p class=\"cc-details__price\">{{ price() }}</p>\r\n      @if (priceNote()) {\r\n        <p class=\"cc-details__price-note\">{{ priceNote() }}</p>\r\n      }\r\n      <a ccButton [variant]=\"bookingVariant()\" size=\"lg\" class=\"cc-details__cta-top\" [href]=\"booking()\" target=\"_blank\" rel=\"noopener\">\r\n        {{ bookingLabel() }}\r\n      </a>\r\n    </div>\r\n\r\n    <p class=\"cc-details__description\">{{ plan().description }}</p>\r\n\r\n    <dl class=\"cc-details__facts\">\r\n      <div class=\"cc-details__fact\">\r\n        @if (durationIconSrc()) {\r\n          <img [src]=\"durationIconSrc()\" alt=\"\" />\r\n        } @else {\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n            <path d=\"M12 7v5l3 2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n          </svg>\r\n        }\r\n        <dt class=\"cc-sr-only\">{{ durationLabel() }}</dt>\r\n        <dd>{{ plan().duration }}</dd>\r\n      </div>\r\n\r\n      <div class=\"cc-details__fact\">\r\n        @if (people() > 1) {\r\n          @if (peopleIconSrc()) {\r\n            <img [src]=\"peopleIconSrc()\" alt=\"\" />\r\n          } @else {\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n              <circle cx=\"9\" cy=\"8\" r=\"3.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n              <circle cx=\"17\" cy=\"9\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n              <path d=\"M2.5 20a6.5 6.5 0 0 1 13 0M15 14.5a5 5 0 0 1 6.5 4.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n            </svg>\r\n          }\r\n        } @else {\r\n          @if (personIconSrc()) {\r\n            <img [src]=\"personIconSrc()\" alt=\"\" />\r\n          } @else {\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n              <circle cx=\"12\" cy=\"8\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n              <path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n            </svg>\r\n          }\r\n        }\r\n        <dt class=\"cc-sr-only\">{{ peopleCaption() }}</dt>\r\n        <dd>{{ people() }} {{ people() > 1 ? peopleLabel() : personLabel() }}</dd>\r\n      </div>\r\n    </dl>\r\n\r\n    @if (services().length) {\r\n      <section class=\"cc-details__section\">\r\n        <h2 class=\"cc-details__heading\">{{ includesLabel() }}</h2>\r\n        <ul class=\"cc-details__services\">\r\n          @for (service of services(); track $index) {\r\n            <li>\r\n              <img [src]=\"service.iconPath\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <span>{{ service.name }}</span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n\r\n    <ng-content />\r\n\r\n    @if (perks().length) {\r\n      <section class=\"cc-details__gift\">\r\n        @if (perksImageSrc()) {\r\n          <img class=\"cc-details__gift-img\" [src]=\"perksImageSrc()\" [alt]=\"perksImageAlt()\" loading=\"lazy\" />\r\n        }\r\n        <div class=\"cc-details__perks\">\r\n          <h2 class=\"cc-details__heading cc-details__heading--accent\">{{ perksTitle() }}</h2>\r\n          <ul>\r\n            @for (perk of perks(); track $index) {\r\n              <li>{{ perk }}</li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"cc-details__cta-bottom\">\r\n      <a ccButton [variant]=\"bookingVariant()\" size=\"lg\" [href]=\"booking()\" target=\"_blank\" rel=\"noopener\">{{ bookingLabel() }}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (stickyBar()) {\r\n  <div class=\"cc-details__bar\">\r\n    <div class=\"cc-details__bar-price\">\r\n      <span class=\"cc-details__bar-amount\">{{ price() }}</span>\r\n      <span class=\"cc-details__bar-name\">{{ plan().name }}</span>\r\n    </div>\r\n    <a ccButton [variant]=\"bookingVariant()\" class=\"cc-details__bar-cta\" [href]=\"booking()\" target=\"_blank\" rel=\"noopener\">{{ barBookingLabel() }}</a>\r\n  </div>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block;color:var(--_text)}.cc-details{display:flex;flex-direction:column;gap:var(--_space-8)}.cc-details__media{display:flex;flex-direction:column;gap:var(--_space-6)}.cc-details__photo{display:block;width:100%;height:auto;aspect-ratio:var(--cc-details-image-ratio, 1);object-fit:cover;border-radius:var(--_radius);box-shadow:var(--_shadow-lg)}.cc-details__panel{display:flex;flex-direction:column;gap:var(--_space-6);padding:var(--_space-6);border-radius:var(--_radius);background:var(--cc-details-panel-bg, var(--_surface))}.cc-details__buy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--_space-2)}.cc-details__price{margin:0;padding:var(--_space-1) var(--_space-4);border-radius:var(--_radius);font-family:var(--_font-heading);font-size:var(--_text-3xl);font-weight:var(--_weight-bold);line-height:var(--_leading-tight);color:var(--cc-details-price-color, var(--_on-inverse));background:var(--cc-details-price-bg, var(--_inverse))}.cc-details__price-note{margin:0;font-size:var(--_text-sm);color:var(--_text-muted)}.cc-details__cta-top{margin-top:var(--_space-2)}.cc-details__description{margin:0;font-size:var(--_text-md);line-height:var(--_leading-body)}.cc-details__facts{display:flex;flex-wrap:wrap;gap:var(--_space-8);margin:0}.cc-details__fact{display:flex;align-items:center;gap:var(--_space-2)}.cc-details__fact dd{margin:0;font-size:var(--_text-sm);font-weight:var(--_weight-semibold)}.cc-details__fact img,.cc-details__fact svg{flex:none;width:1.75rem;height:1.75rem}.cc-details__section{display:flex;flex-direction:column;gap:var(--_space-4)}.cc-details__heading{font-style:var(--_heading-style);letter-spacing:var(--_heading-tracking);text-transform:var(--_heading-transform);margin:0;font-family:var(--_font-heading);font-size:var(--_text-lg);font-weight:var(--_weight-bold);color:var(--_heading)}.cc-details__heading--accent{color:var(--_accent-text)}.cc-details__services{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--_space-4) var(--_space-3);margin:0;padding:0;list-style:none}.cc-details__services li{display:flex;flex-direction:column;align-items:center;gap:var(--_space-2);font-size:var(--_text-sm);line-height:var(--_leading-snug);text-align:center}.cc-details__services img{width:2.25rem;height:2.25rem;object-fit:contain}.cc-details__gift{display:flex;flex-direction:column;gap:var(--_space-4);padding:var(--_space-5);border:2px dashed var(--cc-details-gift-border, var(--_border-strong));border-radius:var(--_radius)}.cc-details__gift-img{width:100%;max-width:12rem;align-self:center}.cc-details__perks{display:flex;flex-direction:column;gap:var(--_space-3)}.cc-details__perks ul{display:flex;flex-direction:column;gap:var(--_space-2);margin:0;padding-left:var(--_space-5);line-height:var(--_leading-snug)}.cc-details__cta-bottom{display:flex;justify-content:flex-end}.cc-details__bar{position:sticky;bottom:0;z-index:var(--_z-sticky);display:flex;align-items:center;justify-content:space-between;gap:var(--_space-3);margin:var(--_space-6) calc(-1 * var(--cc-details-bar-bleed, 0px)) 0;padding:var(--_space-3) var(--_space-4);background:var(--cc-details-bar-bg, var(--_canvas));box-shadow:0 -4px 12px #00000014}.cc-details__bar-cta{flex:none;white-space:nowrap}.cc-details__bar-price{display:flex;flex-direction:column;min-width:0}.cc-details__bar-amount{font-size:var(--_text-lg);font-weight:var(--_weight-bold);color:var(--_heading)}.cc-details__bar-name{overflow:hidden;font-size:var(--_text-xs);white-space:nowrap;text-overflow:ellipsis;color:var(--_text-muted)}@media (min-width: 640px){.cc-details__gift{flex-direction:row;align-items:center}.cc-details__gift-img{width:10rem;align-self:auto}}@media (min-width: 1024px){.cc-details{flex-direction:row;align-items:flex-start;gap:var(--_space-12)}.cc-details__media{position:sticky;top:var(--cc-details-sticky-top, var(--_space-6));flex:1 1 0}.cc-details__panel{flex:1 1 0;padding:var(--_space-8)}.cc-details__bar{display:none}}\n"] }]
         }] });
 
 /**
  * Full-screen image viewer. It is open while `index` is not null.
- * Arrow keys move between images and Escape closes it.
+ * Arrow keys and swipe move between images; Escape and the backdrop close it.
+ * Focus moves into the viewer on open, stays inside while open, and returns to the
+ * element that opened it on close.
  *
  * ```html
  * <cc-lightbox [images]="images" [(index)]="openIndex" />
  * ```
+ *
+ * Tokens: --cc-lightbox-backdrop, --cc-lightbox-control-bg, --cc-lightbox-color.
  */
 class LightboxComponent {
     images = input.required();
@@ -723,20 +1116,34 @@ class LightboxComponent {
     closeLabel = input('Cerrar');
     prevLabel = input('Imagen anterior');
     nextLabel = input('Imagen siguiente');
+    /** Text of the position counter, for example "3 de 18". */
+    counterSeparator = input('de');
     current = computed(() => {
         const i = this.index();
         return i === null ? null : (this.images()[i] ?? null);
     });
+    /** Changes only on open/close, not when moving between images. */
+    isOpen = computed(() => this.current() !== null);
     document = inject(DOCUMENT);
+    dialog = viewChild('dialog');
+    closeButton = viewChild('closeButton');
+    touchStartX = null;
     constructor() {
-        // Stop the page behind from scrolling while the viewer is open.
+        // Lock page scroll and manage focus while the viewer is open.
         effect((onCleanup) => {
-            if (this.current() === null)
+            if (!this.isOpen())
                 return;
-            const body = this.document.body;
-            const previous = body.style.overflow;
-            body.style.overflow = 'hidden';
-            onCleanup(() => (body.style.overflow = previous));
+            untracked(() => {
+                const body = this.document.body;
+                const previousOverflow = body.style.overflow;
+                const opener = this.document.activeElement;
+                body.style.overflow = 'hidden';
+                queueMicrotask(() => this.closeButton()?.nativeElement.focus());
+                onCleanup(() => {
+                    body.style.overflow = previousOverflow;
+                    opener?.focus?.();
+                });
+            });
         });
     }
     close() {
@@ -755,8 +1162,42 @@ class LightboxComponent {
         if (i !== null && total)
             this.index.set((i - 1 + total) % total);
     }
+    /** Keeps Tab and Shift+Tab inside the viewer. */
+    trapFocus(event) {
+        if (event.key !== 'Tab')
+            return;
+        const focusable = this.dialog()?.nativeElement.querySelectorAll('button');
+        if (!focusable?.length)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    onTouchStart(event) {
+        this.touchStartX = event.touches[0]?.clientX ?? null;
+    }
+    onTouchEnd(event) {
+        if (this.touchStartX === null)
+            return;
+        const delta = (event.changedTouches[0]?.clientX ?? this.touchStartX) - this.touchStartX;
+        this.touchStartX = null;
+        if (Math.abs(delta) < 40)
+            return;
+        if (delta < 0)
+            this.next();
+        else
+            this.prev();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LightboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: LightboxComponent, isStandalone: true, selector: "cc-lightbox", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { listeners: { "document:keydown.escape": "close()", "document:keydown.arrowright": "next()", "document:keydown.arrowleft": "prev()" } }, ngImport: i0, template: "@if (current(); as image) {\n  <div class=\"cc-lb\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"image.caption || image.alt || null\" (click)=\"close()\">\n    <button type=\"button\" class=\"cc-lb__btn cc-lb__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\u2715</button>\n    @if (images().length > 1) {\n      <button type=\"button\" class=\"cc-lb__btn cc-lb__prev\" [attr.aria-label]=\"prevLabel()\" (click)=\"$event.stopPropagation(); prev()\">\u2039</button>\n    }\n    <img class=\"cc-lb__img\" [src]=\"image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" (click)=\"$event.stopPropagation()\" />\n    @if (images().length > 1) {\n      <button type=\"button\" class=\"cc-lb__btn cc-lb__next\" [attr.aria-label]=\"nextLabel()\" (click)=\"$event.stopPropagation(); next()\">\u203A</button>\n    }\n    @if (image.caption) {\n      <p class=\"cc-lb__caption\">{{ image.caption }}</p>\n    }\n  </div>\n}\n", styles: [".cc-lb{position:fixed;inset:0;z-index:var(--cc-lightbox-z, 50);display:flex;align-items:center;justify-content:center;background:var(--cc-lightbox-backdrop, rgb(0 0 0 / .9))}.cc-lb__img{max-width:90%;max-height:90%;border-radius:.5rem;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1))}.cc-lb__btn{position:absolute;padding:.5rem;border:0;font-weight:700;line-height:1;color:#fff;background:transparent;cursor:pointer}.cc-lb__close{top:1.25rem;right:1.25rem;font-size:1.875rem}.cc-lb__prev,.cc-lb__next{font-size:2.5rem}.cc-lb__prev{left:1.25rem}.cc-lb__next{right:1.25rem}.cc-lb__caption{position:absolute;bottom:2.5rem;margin:0;padding:0 1rem;font-size:1.125rem;text-align:center;color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: LightboxComponent, isStandalone: true, selector: "cc-lightbox", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, counterSeparator: { classPropertyName: "counterSeparator", publicName: "counterSeparator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { listeners: { "document:keydown.escape": "close()", "document:keydown.arrowright": "next()", "document:keydown.arrowleft": "prev()" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (current(); as image) {\r\n  <div\r\n    #dialog\r\n    class=\"cc-lb\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"image.caption || image.alt || null\"\r\n    (click)=\"close()\"\r\n    (keydown)=\"trapFocus($event)\"\r\n    (touchstart)=\"onTouchStart($event)\"\r\n    (touchend)=\"onTouchEnd($event)\"\r\n  >\r\n    <div class=\"cc-lb__top\" (click)=\"$event.stopPropagation()\">\r\n      <span class=\"cc-lb__counter\">{{ (index() ?? 0) + 1 }} {{ counterSeparator() }} {{ images().length }}</span>\r\n      <button #closeButton type=\"button\" class=\"cc-lb__btn\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6 6 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>\r\n      </button>\r\n    </div>\r\n\r\n    <figure class=\"cc-lb__figure\" (click)=\"$event.stopPropagation()\">\r\n      <img class=\"cc-lb__img\" [src]=\"image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" />\r\n      @if (image.caption) {\r\n        <figcaption class=\"cc-lb__caption\">{{ image.caption }}</figcaption>\r\n      }\r\n    </figure>\r\n\r\n    @if (images().length > 1) {\r\n      <div class=\"cc-lb__nav\" (click)=\"$event.stopPropagation()\">\r\n        <button type=\"button\" class=\"cc-lb__btn\" [attr.aria-label]=\"prevLabel()\" (click)=\"prev()\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></svg>\r\n        </button>\r\n        <button type=\"button\" class=\"cc-lb__btn\" [attr.aria-label]=\"nextLabel()\" (click)=\"next()\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></svg>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_lb-color: var(--cc-lightbox-color, var(--_on-inverse));--_lb-control-bg: var(--cc-lightbox-control-bg, rgb(255 255 255 / .14));--_focus-ring: var(--cc-focus-ring, var(--_lb-color))}.cc-lb{position:fixed;inset:0;z-index:var(--_z-overlay);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--_space-4);padding:var(--_space-4);color:var(--_lb-color);background:var(--cc-lightbox-backdrop, rgb(0 0 0 / .92))}.cc-lb__top{display:flex;align-items:center;justify-content:space-between;width:100%}.cc-lb__counter{font-size:var(--_text-sm);font-weight:var(--_weight-semibold);opacity:.85}.cc-lb__figure{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--_space-3);min-height:0;margin:0}.cc-lb__img{max-width:100%;max-height:calc(100% - 3rem);object-fit:contain;border-radius:var(--_radius-md);box-shadow:var(--_shadow-lg)}.cc-lb__caption{font-size:var(--_text-md);text-align:center}.cc-lb__nav{display:flex;gap:var(--_space-4)}.cc-lb__btn{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:0;border:0;border-radius:var(--_radius-pill);color:var(--_lb-color);background:var(--_lb-control-bg);cursor:pointer;transition:background-color var(--_duration-fast) var(--_ease)}.cc-lb__btn:hover{background:#ffffff42}.cc-lb__btn svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.cc-lb{padding:var(--_space-6) var(--_space-8)}.cc-lb__nav{position:absolute;top:50%;left:var(--_space-6);right:var(--_space-6);justify-content:space-between;transform:translateY(-50%);pointer-events:none}.cc-lb__nav .cc-lb__btn{pointer-events:auto}.cc-lb__figure{padding:0 var(--_space-16)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LightboxComponent, decorators: [{
             type: Component,
@@ -764,29 +1205,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         '(document:keydown.escape)': 'close()',
                         '(document:keydown.arrowright)': 'next()',
                         '(document:keydown.arrowleft)': 'prev()',
-                    }, template: "@if (current(); as image) {\n  <div class=\"cc-lb\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"image.caption || image.alt || null\" (click)=\"close()\">\n    <button type=\"button\" class=\"cc-lb__btn cc-lb__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\u2715</button>\n    @if (images().length > 1) {\n      <button type=\"button\" class=\"cc-lb__btn cc-lb__prev\" [attr.aria-label]=\"prevLabel()\" (click)=\"$event.stopPropagation(); prev()\">\u2039</button>\n    }\n    <img class=\"cc-lb__img\" [src]=\"image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" (click)=\"$event.stopPropagation()\" />\n    @if (images().length > 1) {\n      <button type=\"button\" class=\"cc-lb__btn cc-lb__next\" [attr.aria-label]=\"nextLabel()\" (click)=\"$event.stopPropagation(); next()\">\u203A</button>\n    }\n    @if (image.caption) {\n      <p class=\"cc-lb__caption\">{{ image.caption }}</p>\n    }\n  </div>\n}\n", styles: [".cc-lb{position:fixed;inset:0;z-index:var(--cc-lightbox-z, 50);display:flex;align-items:center;justify-content:center;background:var(--cc-lightbox-backdrop, rgb(0 0 0 / .9))}.cc-lb__img{max-width:90%;max-height:90%;border-radius:.5rem;box-shadow:var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1))}.cc-lb__btn{position:absolute;padding:.5rem;border:0;font-weight:700;line-height:1;color:#fff;background:transparent;cursor:pointer}.cc-lb__close{top:1.25rem;right:1.25rem;font-size:1.875rem}.cc-lb__prev,.cc-lb__next{font-size:2.5rem}.cc-lb__prev{left:1.25rem}.cc-lb__next{right:1.25rem}.cc-lb__caption{position:absolute;bottom:2.5rem;margin:0;padding:0 1rem;font-size:1.125rem;text-align:center;color:#fff}\n"] }]
+                    }, template: "@if (current(); as image) {\r\n  <div\r\n    #dialog\r\n    class=\"cc-lb\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"image.caption || image.alt || null\"\r\n    (click)=\"close()\"\r\n    (keydown)=\"trapFocus($event)\"\r\n    (touchstart)=\"onTouchStart($event)\"\r\n    (touchend)=\"onTouchEnd($event)\"\r\n  >\r\n    <div class=\"cc-lb__top\" (click)=\"$event.stopPropagation()\">\r\n      <span class=\"cc-lb__counter\">{{ (index() ?? 0) + 1 }} {{ counterSeparator() }} {{ images().length }}</span>\r\n      <button #closeButton type=\"button\" class=\"cc-lb__btn\" [attr.aria-label]=\"closeLabel()\" (click)=\"close()\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6 6 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>\r\n      </button>\r\n    </div>\r\n\r\n    <figure class=\"cc-lb__figure\" (click)=\"$event.stopPropagation()\">\r\n      <img class=\"cc-lb__img\" [src]=\"image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" />\r\n      @if (image.caption) {\r\n        <figcaption class=\"cc-lb__caption\">{{ image.caption }}</figcaption>\r\n      }\r\n    </figure>\r\n\r\n    @if (images().length > 1) {\r\n      <div class=\"cc-lb__nav\" (click)=\"$event.stopPropagation()\">\r\n        <button type=\"button\" class=\"cc-lb__btn\" [attr.aria-label]=\"prevLabel()\" (click)=\"prev()\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></svg>\r\n        </button>\r\n        <button type=\"button\" class=\"cc-lb__btn\" [attr.aria-label]=\"nextLabel()\" (click)=\"next()\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></svg>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{--_lb-color: var(--cc-lightbox-color, var(--_on-inverse));--_lb-control-bg: var(--cc-lightbox-control-bg, rgb(255 255 255 / .14));--_focus-ring: var(--cc-focus-ring, var(--_lb-color))}.cc-lb{position:fixed;inset:0;z-index:var(--_z-overlay);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--_space-4);padding:var(--_space-4);color:var(--_lb-color);background:var(--cc-lightbox-backdrop, rgb(0 0 0 / .92))}.cc-lb__top{display:flex;align-items:center;justify-content:space-between;width:100%}.cc-lb__counter{font-size:var(--_text-sm);font-weight:var(--_weight-semibold);opacity:.85}.cc-lb__figure{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--_space-3);min-height:0;margin:0}.cc-lb__img{max-width:100%;max-height:calc(100% - 3rem);object-fit:contain;border-radius:var(--_radius-md);box-shadow:var(--_shadow-lg)}.cc-lb__caption{font-size:var(--_text-md);text-align:center}.cc-lb__nav{display:flex;gap:var(--_space-4)}.cc-lb__btn{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:0;border:0;border-radius:var(--_radius-pill);color:var(--_lb-color);background:var(--_lb-control-bg);cursor:pointer;transition:background-color var(--_duration-fast) var(--_ease)}.cc-lb__btn:hover{background:#ffffff42}.cc-lb__btn svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.cc-lb{padding:var(--_space-6) var(--_space-8)}.cc-lb__nav{position:absolute;top:50%;left:var(--_space-6);right:var(--_space-6);justify-content:space-between;transform:translateY(-50%);pointer-events:none}.cc-lb__nav .cc-lb__btn{pointer-events:auto}.cc-lb__figure{padding:0 var(--_space-16)}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
- * Thumbnail grid that opens a lightbox on click.
+ * Grid of square thumbnails that opens a lightbox on click.
  *
  * ```html
- * <cc-gallery [images]="images" />
+ * <cc-gallery [images]="images" [columns]="4" />
  * ```
  *
  * `numberedImages()` builds the list for folders named 1.jpeg, 2.jpeg, …
+ *
+ * Tokens: --cc-gallery-gap, --cc-gallery-radius, --cc-gallery-bg.
  */
 class GalleryComponent {
     images = input.required();
+    /** Columns from 1024px. Small screens use 2, tablets 3. */
+    columns = input(4);
     backgroundImage = input('');
     openLabel = input('Ver imagen');
     open = signal(null);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: GalleryComponent, isStandalone: true, selector: "cc-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, backgroundImage: { classPropertyName: "backgroundImage", publicName: "backgroundImage", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ul class=\"cc-gallery\" [style.background-image]=\"backgroundImage() ? 'url(' + backgroundImage() + ')' : null\">\n  @for (image of images(); track image.src; let i = $index) {\n    <li>\n      <button type=\"button\" class=\"cc-gallery__item\" [attr.aria-label]=\"openLabel() + ': ' + (image.alt ?? image.caption ?? i + 1)\" (click)=\"open.set(i)\">\n        <img [src]=\"image.thumb ?? image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" loading=\"lazy\" decoding=\"async\" />\n      </button>\n    </li>\n  }\n</ul>\n<cc-lightbox [images]=\"images()\" [(index)]=\"open\" />\n", styles: [":host{display:block}.cc-gallery{box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;place-content:center;justify-items:center;width:100%;margin:0;padding:1.25rem;list-style:none;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:.125rem;box-shadow:var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1))}.cc-gallery__item{display:block;width:var(--cc-gallery-thumb-width, 7rem);padding:0;border:0;background:none;cursor:pointer}.cc-gallery__item img{display:block;width:100%;transition:transform .15s ease-in}.cc-gallery__item:hover img{transform:scale(1.03)}@media (min-width: 1024px){.cc-gallery{grid-template-columns:repeat(var(--cc-gallery-columns-lg, 6),minmax(0,1fr));gap:2.5rem;padding:2.5rem}.cc-gallery__item{width:var(--cc-gallery-thumb-width-lg, 10rem)}}\n"], dependencies: [{ kind: "component", type: LightboxComponent, selector: "cc-lightbox", inputs: ["images", "index", "closeLabel", "prevLabel", "nextLabel"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: GalleryComponent, isStandalone: true, selector: "cc-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, backgroundImage: { classPropertyName: "backgroundImage", publicName: "backgroundImage", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_gallery-columns": "columns()" } }, ngImport: i0, template: "<ul class=\"cc-gallery\" [class.cc-gallery--bg]=\"!!backgroundImage()\" [style.background-image]=\"backgroundImage() ? 'url(' + backgroundImage() + ')' : null\">\r\n  @for (image of images(); track image.src; let i = $index) {\r\n    <li>\r\n      <button\r\n        type=\"button\"\r\n        class=\"cc-gallery__item\"\r\n        [attr.aria-label]=\"openLabel() + ': ' + (image.alt ?? image.caption ?? i + 1)\"\r\n        (click)=\"open.set(i)\"\r\n      >\r\n        <img [src]=\"image.thumb ?? image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" width=\"400\" height=\"400\" loading=\"lazy\" decoding=\"async\" />\r\n      </button>\r\n    </li>\r\n  }\r\n</ul>\r\n<cc-lightbox [images]=\"images()\" [(index)]=\"open\" />\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block}.cc-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cc-gallery-gap, var(--_space-3));margin:0;padding:0;list-style:none}.cc-gallery--bg{padding:var(--_space-4);border-radius:var(--_radius);background-color:var(--cc-gallery-bg, var(--_surface));background-size:cover;background-position:center;background-repeat:no-repeat}.cc-gallery__item{display:block;width:100%;padding:0;overflow:hidden;border:0;border-radius:var(--cc-gallery-radius, var(--_radius));aspect-ratio:1;background:var(--_surface-alt);cursor:zoom-in}.cc-gallery__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--_duration) var(--_ease),filter var(--_duration) var(--_ease)}.cc-gallery__item:hover img{transform:scale(1.04);filter:brightness(1.05)}@media (min-width: 768px){.cc-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cc-gallery-gap, var(--_space-4))}}@media (min-width: 1024px){.cc-gallery{grid-template-columns:repeat(var(--_gallery-columns, 4),minmax(0,1fr));gap:var(--cc-gallery-gap, var(--_space-5))}.cc-gallery--bg{padding:var(--_space-8)}}\n"], dependencies: [{ kind: "component", type: LightboxComponent, selector: "cc-lightbox", inputs: ["images", "index", "closeLabel", "prevLabel", "nextLabel", "counterSeparator"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-gallery', imports: [LightboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"cc-gallery\" [style.background-image]=\"backgroundImage() ? 'url(' + backgroundImage() + ')' : null\">\n  @for (image of images(); track image.src; let i = $index) {\n    <li>\n      <button type=\"button\" class=\"cc-gallery__item\" [attr.aria-label]=\"openLabel() + ': ' + (image.alt ?? image.caption ?? i + 1)\" (click)=\"open.set(i)\">\n        <img [src]=\"image.thumb ?? image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" loading=\"lazy\" decoding=\"async\" />\n      </button>\n    </li>\n  }\n</ul>\n<cc-lightbox [images]=\"images()\" [(index)]=\"open\" />\n", styles: [":host{display:block}.cc-gallery{box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;place-content:center;justify-items:center;width:100%;margin:0;padding:1.25rem;list-style:none;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:.125rem;box-shadow:var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1))}.cc-gallery__item{display:block;width:var(--cc-gallery-thumb-width, 7rem);padding:0;border:0;background:none;cursor:pointer}.cc-gallery__item img{display:block;width:100%;transition:transform .15s ease-in}.cc-gallery__item:hover img{transform:scale(1.03)}@media (min-width: 1024px){.cc-gallery{grid-template-columns:repeat(var(--cc-gallery-columns-lg, 6),minmax(0,1fr));gap:2.5rem;padding:2.5rem}.cc-gallery__item{width:var(--cc-gallery-thumb-width-lg, 10rem)}}\n"] }]
+            args: [{ selector: 'cc-gallery', imports: [LightboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.--_gallery-columns]': 'columns()' }, template: "<ul class=\"cc-gallery\" [class.cc-gallery--bg]=\"!!backgroundImage()\" [style.background-image]=\"backgroundImage() ? 'url(' + backgroundImage() + ')' : null\">\r\n  @for (image of images(); track image.src; let i = $index) {\r\n    <li>\r\n      <button\r\n        type=\"button\"\r\n        class=\"cc-gallery__item\"\r\n        [attr.aria-label]=\"openLabel() + ': ' + (image.alt ?? image.caption ?? i + 1)\"\r\n        (click)=\"open.set(i)\"\r\n      >\r\n        <img [src]=\"image.thumb ?? image.src\" [alt]=\"image.alt ?? image.caption ?? ''\" width=\"400\" height=\"400\" loading=\"lazy\" decoding=\"async\" />\r\n      </button>\r\n    </li>\r\n  }\r\n</ul>\r\n<cc-lightbox [images]=\"images()\" [(index)]=\"open\" />\r\n", styles: [":host{--_canvas: var(--cc-canvas, #ffffff);--_surface: var(--cc-surface, #f5f5f4);--_surface-alt: var(--cc-surface-alt, #fafaf9);--_text: var(--cc-text, #292524);--_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));--_heading: var(--cc-heading, #1c1917);--_accent: var(--cc-accent, #1c1917);--_accent-hover: var(--cc-accent-hover, #44403c);--_accent-text: var(--cc-accent-text, var(--_heading));--_on-accent: var(--cc-on-accent, #ffffff);--_inverse: var(--cc-inverse, #1c1917);--_inverse-hover: var(--cc-inverse-hover, #000000);--_on-inverse: var(--cc-on-inverse, #ffffff);--_border: var(--cc-border, #d6d3d1);--_border-strong: var(--cc-border-strong, #78716c);--_focus-ring: var(--cc-focus-ring, var(--_heading));--_overlay: var(--cc-overlay, rgb(0 0 0 / .7));--_danger: var(--cc-danger, #b91c1c);--_danger-surface: var(--cc-danger-surface, #fef2f2);--_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);--_whatsapp: var(--cc-whatsapp, #1faf38);--_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);--_on-whatsapp: var(--cc-on-whatsapp, #ffffff);--_font-body: var(--cc-font-body, inherit);--_font-heading: var(--cc-font-heading, inherit);--_heading-style: var(--cc-heading-style, normal);--_heading-transform: var(--cc-heading-transform, none);--_heading-tracking: var(--cc-heading-tracking, normal);--_text-xs: var(--cc-text-xs, .75rem);--_text-sm: var(--cc-text-sm, .875rem);--_text-md: var(--cc-text-md, 1rem);--_text-lg: var(--cc-text-lg, 1.125rem);--_text-xl: var(--cc-text-xl, 1.25rem);--_text-2xl: var(--cc-text-2xl, 1.5rem);--_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));--_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));--_leading-tight: var(--cc-leading-tight, 1.2);--_leading-snug: var(--cc-leading-snug, 1.4);--_leading-body: var(--cc-leading-body, 1.6);--_weight-regular: var(--cc-weight-regular, 400);--_weight-medium: var(--cc-weight-medium, 500);--_weight-semibold: var(--cc-weight-semibold, 600);--_weight-bold: var(--cc-weight-bold, 700);--_tracking-wide: var(--cc-tracking-wide, .04em);--_space-1: var(--cc-space-1, .25rem);--_space-2: var(--cc-space-2, .5rem);--_space-3: var(--cc-space-3, .75rem);--_space-4: var(--cc-space-4, 1rem);--_space-5: var(--cc-space-5, 1.25rem);--_space-6: var(--cc-space-6, 1.5rem);--_space-8: var(--cc-space-8, 2rem);--_space-10: var(--cc-space-10, 2.5rem);--_space-12: var(--cc-space-12, 3rem);--_space-16: var(--cc-space-16, 4rem);--_space-20: var(--cc-space-20, 5rem);--_space-24: var(--cc-space-24, 6rem);--_radius: var(--cc-radius, 0);--_radius-sm: var(--cc-radius-sm, .125rem);--_radius-md: var(--cc-radius-md, .5rem);--_radius-lg: var(--cc-radius-lg, 1rem);--_radius-pill: var(--cc-radius-pill, 9999px);--_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));--_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1));--_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));--_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--_focus-width: var(--cc-focus-width, 2px);--_focus-offset: var(--cc-focus-offset, 2px);--_control-height: var(--cc-control-height, 2.75rem);--_control-height-sm: var(--cc-control-height-sm, 2.25rem);--_control-height-lg: var(--cc-control-height-lg, 3.25rem);--_duration-fast: var(--cc-duration-fast, .15s);--_duration: var(--cc-duration, .25s);--_ease: var(--cc-ease, cubic-bezier(.2, 0, 0, 1));--_z-float: var(--cc-z-float, 20);--_z-sticky: var(--cc-z-sticky, 30);--_z-overlay: var(--cc-z-overlay, 50);box-sizing:border-box;font-family:var(--_font-body)}*,*:before,*:after{box-sizing:border-box}:focus-visible{outline:var(--_focus-width) solid var(--_focus-ring);outline-offset:var(--_focus-offset)}.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n", ":host{display:block}.cc-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cc-gallery-gap, var(--_space-3));margin:0;padding:0;list-style:none}.cc-gallery--bg{padding:var(--_space-4);border-radius:var(--_radius);background-color:var(--cc-gallery-bg, var(--_surface));background-size:cover;background-position:center;background-repeat:no-repeat}.cc-gallery__item{display:block;width:100%;padding:0;overflow:hidden;border:0;border-radius:var(--cc-gallery-radius, var(--_radius));aspect-ratio:1;background:var(--_surface-alt);cursor:zoom-in}.cc-gallery__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--_duration) var(--_ease),filter var(--_duration) var(--_ease)}.cc-gallery__item:hover img{transform:scale(1.04);filter:brightness(1.05)}@media (min-width: 768px){.cc-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cc-gallery-gap, var(--_space-4))}}@media (min-width: 1024px){.cc-gallery{grid-template-columns:repeat(var(--_gallery-columns, 4),minmax(0,1fr));gap:var(--cc-gallery-gap, var(--_space-5))}.cc-gallery--bg{padding:var(--_space-8)}}\n"] }]
         }] });
 /**
  * Builds a gallery list for numbered files.
@@ -811,5 +1256,5 @@ function numberedImages(count, src, caption) {
  * Generated bundle index. Do not edit.
  */
 
-export { CategoryMenuComponent, DEFAULT_PLAN_CATALOG_CONFIG, DEFAULT_PLAN_CATEGORIES, FaqComponent, GalleryComponent, InfoItemComponent, LightboxComponent, PLAN_CATALOG_CONFIG, PageBannerComponent, PlanCardComponent, PlanCardTemplateDirective, PlanCatalogComponent, PlanCatalogService, PlanCategory, PlanDetailsComponent, PlanFilterFormComponent, PromoModalComponent, SEO_CONFIG, SearchBoxComponent, SeoService, SocialLinksComponent, WhatsappButtonComponent, filterPlans, filterPlansByCategory, findPlanBySlug, joinAdditionalServices, numberedImages, planSlug, providePlanCatalog, provideSeo, searchPlansByName, slugify, titleCase, truncateText, whatsappUrl, withCategoryCounts };
+export { ButtonComponent, CategoryMenuComponent, DEFAULT_PLAN_CATALOG_CONFIG, DEFAULT_PLAN_CATEGORIES, FaqComponent, FaqItemComponent, GalleryComponent, InfoItemComponent, LightboxComponent, NoticeComponent, PLAN_CATALOG_CONFIG, PageBannerComponent, PlanCardComponent, PlanCardTemplateDirective, PlanCatalogComponent, PlanCatalogService, PlanCategory, PlanDetailsComponent, PlanFilterFormComponent, PromoModalComponent, SEO_CONFIG, SearchBoxComponent, SectionHeadingComponent, SeoService, SocialLinksComponent, WhatsappButtonComponent, defaultPlanMeta, filterPlans, filterPlansByCategory, findPlanBySlug, formatPrice, joinAdditionalServices, numberedImages, planSlug, providePlanCatalog, provideSeo, searchPlansByName, slugify, titleCase, truncateText, whatsappUrl, withCategoryCounts };
 //# sourceMappingURL=c-code-c-code-fw-ui.mjs.map