.elementor-kit-13{--e-global-color-primary:#0A0807;--e-global-color-secondary:#13100E;--e-global-color-text:#1C1815;--e-global-color-accent:#2A2320;--e-global-color-3dd3cfd:#3A302B;--e-global-color-a727972:#F1EBE2;--e-global-color-19e870d:#9A8D7F;--e-global-color-b4ce07d:#C89368;--e-global-color-601720e:#DCA77A;--e-global-typography-colores_heading-font-family:"Cormorant Garamond";--e-global-typography-colores_heading-font-weight:400;--e-global-typography-colores_body-font-family:"Manrope";--e-global-typography-colores_body-font-weight:400;--e-global-typography-colores_eyebrow-font-family:"JetBrains Mono";--e-global-typography-colores_eyebrow-font-weight:500;--e-global-typography-colores_eyebrow-text-transform:uppercase;--e-global-typography-colores_eyebrow-letter-spacing:0.32em;--e-global-typography-3af6cc9-font-family:"Manrope";--e-global-typography-3af6cc9-font-size:1rem;--e-global-typography-3af6cc9-font-weight:400;--e-global-typography-3af6cc9-line-height:1.65lh;background-color:#0A0807;color:var( --e-global-color-a727972 );font-family:var( --e-global-typography-3af6cc9-font-family ), Sans-serif;font-size:var( --e-global-typography-3af6cc9-font-size );font-weight:var( --e-global-typography-3af6cc9-font-weight );line-height:var( --e-global-typography-3af6cc9-line-height );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{background-color:var( --e-global-color-b4ce07d );font-family:"JetBrains Mono", Sans-serif;font-size:0.72rem;font-weight:500;text-transform:uppercase;letter-spacing:0.22em;color:var( --e-global-color-primary );border-radius:3px 3px 3px 3px;padding:0.85rem 1.4rem 0.85rem 1.4rem;}.elementor-kit-13 button:hover,.elementor-kit-13 button:focus,.elementor-kit-13 input[type="button"]:hover,.elementor-kit-13 input[type="button"]:focus,.elementor-kit-13 input[type="submit"]:hover,.elementor-kit-13 input[type="submit"]:focus,.elementor-kit-13 .elementor-button:hover,.elementor-kit-13 .elementor-button:focus{background-color:var( --e-global-color-601720e );color:var( --e-global-color-primary );}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-kit-13 p{margin-block-end:1.125rem;}.elementor-kit-13 a{color:var( --e-global-color-b4ce07d );}.elementor-kit-13 a:hover{color:var( --e-global-color-601720e );}.elementor-kit-13 h1{color:var( --e-global-color-a727972 );font-family:"Cormorant Garamond", Sans-serif;font-size:clamp(3rem, 7vw, 6rem);font-weight:300;line-height:1.05lh;letter-spacing:-0.015em;}.elementor-kit-13 h2{color:var( --e-global-color-a727972 );font-family:"Cormorant Garamond", Sans-serif;font-weight:400;letter-spacing:-0.01em;}.elementor-kit-13 h3{color:var( --e-global-color-a727972 );font-family:"Cormorant Garamond", Sans-serif;font-weight:400;letter-spacing:-0.01em;}.elementor-kit-13 h4{color:var( --e-global-color-a727972 );font-family:"Cormorant Garamond", Sans-serif;font-weight:400;letter-spacing:-0.01em;}.elementor-kit-13 h5{color:var( --e-global-color-a727972 );font-family:"Cormorant Garamond", Sans-serif;font-weight:400;line-height:1.2lh;letter-spacing:-0.01em;}.elementor-kit-13 h6{color:var( --e-global-color-a727972 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-13{font-size:var( --e-global-typography-3af6cc9-font-size );line-height:var( --e-global-typography-3af6cc9-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-13{font-size:var( --e-global-typography-3af6cc9-font-size );line-height:var( --e-global-typography-3af6cc9-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   COLORES — Design Tokens
   Single source of truth for colors, type, spacing, motion.
   ========================================================= */

/* Dark theme — default per brand book (70/25/5 onyx/cream/copper) */
:root, :root[data-theme="dark"] {
  /* Surfaces */
  --bg:           #0a0807;  /* Onyx — foundation */
  --bg-2:         #13100e;  /* Ember — card/panel */
  --bg-3:         #1c1815;  /* Cocoa — hover/elevated */
  --line:         #2a2320;
  --line-bright:  #3a302b;

  /* Text */
  --text:         #f1ebe2;  /* Cream — never pure white */
  --text-muted:   #9a8d7f;  /* Mist */

  /* Accent */
  --accent:       #c89368;  /* Copper */
  --accent-hover: #dca77a;  /* Champagne */
  --accent-deep:  #8a5e3f;  /* Bronze */
  --sand:         #f4cfa4;
  --gold-grad:    linear-gradient(135deg, #f4cfa4 0%, #c89368 35%, #8a5e3f 70%, #dca77a 100%);

  /* Selection */
  --selection-bg: var(--accent);
  --selection-fg: var(--bg);
}

/* Light theme — Onyx on Cream with Bronze accent (brand book page 06) */
:root[data-theme="light"] {
  --bg:           #f1ebe2;
  --bg-2:         #e9dfd0;
  --bg-3:         #ddd0bd;
  --line:         #dccab2;
  --line-bright:  #c4b59c;
  --text:         #0a0807;
  --text-muted:   #5b4a3d;
  --accent:       #8a5e3f;
  --accent-hover: #c89368;
  --accent-deep:  #6a4530;
  --sand:         #c89368;
  --gold-grad:    linear-gradient(135deg, #8a5e3f 0%, #c89368 50%, #6a4530 100%);
  --selection-bg: var(--accent);
  --selection-fg: var(--bg);
}

/* Honor OS preference on first paint when no user choice stored */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Light vars duplicated here so first paint is correct.
       The theme.js inline pre-script sets data-theme before CSS loads,
       making this fallback unnecessary in practice but defense-in-depth. */
    --bg: #f1ebe2; --bg-2: #e9dfd0; --bg-3: #ddd0bd;
    --line: #dccab2; --line-bright: #c4b59c;
    --text: #0a0807; --text-muted: #5b4a3d;
    --accent: #8a5e3f; --accent-hover: #c89368; --accent-deep: #6a4530;
  }
}

/* Typography */
:root {
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fz-mono-xs: .65rem;
  --fz-mono-sm: .72rem;
  --fz-body:    1rem;
  --fz-body-lg: 1.125rem;
  --fz-h6:      1rem;
  --fz-h5:      1.15rem;
  --fz-h4:      1.4rem;
  --fz-h3:      clamp(1.4rem, 2vw, 1.9rem);
  --fz-h2:      clamp(2rem, 4vw, 3.4rem);
  --fz-h1:      clamp(3rem, 7vw, 6rem);

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.65;
  --lh-caption: 1.55;

  --ls-display: -.015em;
  --ls-heading: -.01em;
  --ls-eyebrow: .32em;
}

/* Layout */
:root {
  --maxw:     1280px;
  --gutter:   clamp(1.5rem, 4vw, 3rem);
  --space-1:  .5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;
}

/* Motion */
:root {
  --t-fast:   .15s ease;
  --t-base:   .25s ease;
  --t-slow:   .45s cubic-bezier(.2,.8,.2,1);
  --t-theme:  .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-base: 0s; --t-slow: 0s; --t-theme: 0s; }
}

/* Z-index scale */
:root {
  --z-nav: 100;
  --z-mobile-menu: 200;
  --z-sticky-cta: 150;
  --z-modal: 300;
}

/* =========================================================
   01 — c-nav · top navigation
   ========================================================= */
.c-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), padding var(--t-base);
}
.c-nav.is-scrolled { border-bottom-color: var(--line); padding: .7rem var(--gutter); }
.c-nav__logo { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent); }
.c-nav__links { display: flex; gap: 2rem; font-size: .9rem; }
.c-nav__links a { color: var(--text); }
.c-nav__links a:hover { color: var(--accent); }
.c-nav__tools { display: flex; gap: .9rem; align-items: center; }
.c-nav__burger { display: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 3px; }
.c-nav__burger span { display: block; width: 18px; height: 1.5px; background: var(--text); margin: 4px auto; transition: var(--t-base); }
@media (max-width: 880px) {
  .c-nav__links { display: none; }
  .c-nav__burger { display: grid; place-items: center; }
}

/* =========================================================
   02 — c-btn · button system
   ========================================================= */
.c-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono);
  font-size: var(--fz-mono-sm);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.c-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.c-btn:active { transform: translateY(1px); }
.c-btn[disabled], .c-btn.is-disabled { opacity: .4; pointer-events: none; }

.c-btn--primary {
  background: var(--accent); color: var(--bg);
}
.c-btn--primary:hover { background: var(--accent-hover); }

.c-btn--secondary {
  background: transparent; color: var(--text); border-color: var(--line-bright);
}
.c-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.c-btn--ghost {
  background: transparent; color: var(--accent); padding-left: 0; padding-right: 0;
}
.c-btn--ghost:hover { color: var(--accent-hover); }
.c-btn--ghost::after { content: " →"; transition: transform var(--t-base); }
.c-btn--ghost:hover::after { transform: translateX(4px); }

.c-btn.is-loading { color: transparent; position: relative; }
.c-btn.is-loading::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border: 1.5px solid currentColor; border-bottom-color: transparent;
  border-radius: 50%; animation: btn-spin .8s linear infinite; color: var(--bg);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* =========================================================
   03 — c-hero · editorial hero
   ========================================================= */
.c-hero {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.c-hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.c-hero__corner {
  position: absolute; font-family: var(--mono); font-size: .65rem;
  letter-spacing: .25em; text-transform: uppercase; color: var(--text-muted);
}
.c-hero__corner.is-tl { top: 1.2rem; left: var(--gutter); }
.c-hero__corner.is-tr { top: 1.2rem; right: var(--gutter); }
.c-hero__corner.is-br { bottom: 1.2rem; right: var(--gutter); }
.c-hero__title {
  margin: 1rem 0 1rem;
  font-size: clamp(2.6rem, 6vw, 5rem);
}
.c-hero__sub {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  color: var(--text-muted); font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  max-width: 50ch; margin-bottom: 2rem;
}
.c-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.c-hero.is-procedure .c-hero__chips {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem;
}
.c-hero.is-procedure .c-hero__chips .chip {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .35rem .75rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; color: var(--text);
}
/* =========================================================
   pages.css — page-specific overrides only
   Scope every rule to [data-page="..."] to avoid bleed.
   ========================================================= */

/* =========================================================
   [data-page="home"] — Home page overrides
   ========================================================= */

/* Contact section: 2-col on desktop, 1-col on mobile */
[data-page="home"] #contact-h2 ~ div {
  /* Already defined inline with grid; this ensures collapse */
}
@media (max-width: 720px) {
  [data-page="home"] .l-section [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   [data-page="procedures"] — Procedures index overrides
   ========================================================= */

/* Card grid hidden state — JS uses toggleAttribute('hidden') */
[data-page="procedures"] .c-card-procedure[hidden] {
  display: none;
}

/* Studio index table */
.c-proc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.c-proc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.c-proc-table thead {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-bright);
}

.c-proc-table thead th {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .9rem 1.1rem;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
}

.c-proc-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}

.c-proc-table tbody tr:last-child {
  border-bottom: 0;
}

.c-proc-table tbody tr:hover {
  background: var(--bg-2);
}

.c-proc-table tbody td {
  padding: .85rem 1.1rem;
  color: var(--text);
  vertical-align: middle;
}

.c-proc-table__num {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--text-muted);
  letter-spacing: .1em;
  width: 2.5rem;
}

.c-proc-table__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
}

.c-proc-table__cat {
  display: inline-block;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .6rem;
  white-space: nowrap;
}

.c-proc-table__dur {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.c-proc-table__price {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent);
  white-space: nowrap;
}

.c-proc-table__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: color var(--t-base), border-color var(--t-base);
  text-decoration: none;
}

.c-proc-table__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .c-proc-table__dur,
  .c-proc-table thead th:nth-child(4) {
    display: none;
  }
}

/* =========================================================
   04 — c-card-procedure
   ========================================================= */
.c-card-procedure {
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.c-card-procedure:hover {
  transform: translateY(-3px); border-color: var(--accent-deep);
  box-shadow: 0 12px 40px -20px color-mix(in srgb, var(--accent) 50%, transparent);
}
.c-card-procedure__img {
  aspect-ratio: 4/3;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), var(--bg-3) 80%);
}
.c-card-procedure__body { padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.c-card-procedure__cat {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.c-card-procedure__title { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--text); margin: 0; }
.c-card-procedure__meta { font-family: var(--mono); font-size: .7rem; color: var(--text-muted); margin-top: .3rem; }
.c-card-procedure__price { font-family: var(--mono); font-size: .8rem; color: var(--accent); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }

/* =========================================================
   05 — c-tabs · category filter tabs
   ========================================================= */
.c-tabs {
  display: flex; gap: 2rem; border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
}
.c-tabs__tab {
  position: relative; padding: 1rem 0; color: var(--text-muted);
  background: transparent; border: 0; cursor: pointer;
  transition: color var(--t-base);
}
.c-tabs__tab:hover { color: var(--text); }
.c-tabs__tab[aria-selected="true"] { color: var(--accent); }
.c-tabs__tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}

/* =========================================================
   06 — c-accordion · FAQ accordion
   ========================================================= */
.c-accordion { border-top: 1px solid var(--line); }
.c-accordion__item { border-bottom: 1px solid var(--line); }
.c-accordion__btn {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; text-align: left; color: var(--text);
  font-family: var(--serif); font-style: italic; font-size: 1.2rem;
}
.c-accordion__btn:hover { color: var(--accent); }
.c-accordion__btn::after {
  content: "+"; font-family: var(--mono); color: var(--accent); transition: transform var(--t-base);
  font-size: 1.2rem; font-style: normal;
}
.c-accordion__btn[aria-expanded="true"]::after { content: "−"; }
.c-accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.c-accordion__panel-inner { overflow: hidden; }
.c-accordion__item[data-open="true"] .c-accordion__panel { grid-template-rows: 1fr; }
.c-accordion__panel-inner > * { padding-bottom: 1.4rem; }
.c-accordion__panel p { color: var(--text-muted); max-width: 70ch; }

/* =========================================================
   07 — c-card-surgeon
   ========================================================= */
.c-card-surgeon {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; transition: border-color var(--t-base);
}
.c-card-surgeon:hover { border-color: var(--accent-deep); }
.c-card-surgeon__portrait {
  aspect-ratio: 3/4; border-radius: var(--radius-sm);
  background: radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--sand) 50%, transparent), var(--bg-3) 80%);
}
.c-card-surgeon__name { font-family: var(--serif); font-size: 1.4rem; margin: 0; color: var(--text); }
.c-card-surgeon__creds { font-family: var(--mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.c-card-surgeon__specs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.c-card-surgeon__specs span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
  padding: .25rem .55rem; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; color: var(--text-muted);
}
.c-card-surgeon__langs { font-family: var(--mono); font-size: .65rem; color: var(--text-muted); }

/* =========================================================
   08 — c-quote · pull quote / testimonial
   ========================================================= */
.c-quote {
  margin: 0; padding: 2rem 0; position: relative;
  text-align: center; max-width: 50ch; margin-inline: auto;
}
.c-quote::before {
  content: """; position: absolute; top: -1rem; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 5rem; color: var(--accent); line-height: 1; opacity: .3;
}
.c-quote__body {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.35; color: var(--text);
  margin: 0 0 1.5rem;
}
.c-quote__attr {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-muted);
}
.c-quote__attr b { color: var(--accent); font-weight: 500; }

/* =========================================================
   09 — c-price · price disclosure block
   ========================================================= */
.c-price {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media (max-width: 700px) { .c-price { grid-template-columns: 1fr; } }
.c-price__head { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.c-price__range { font-family: var(--serif); font-size: 2.4rem; font-weight: 300; color: var(--text); letter-spacing: -.02em; }
.c-price__note { font-family: var(--sans); font-size: .85rem; color: var(--text-muted); margin-top: .3rem; }
.c-price__includes h4 { font-family: var(--sans); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 .8rem; }
.c-price__includes ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--text); }
.c-price__includes li { padding: .25rem 0; }
.c-price__includes li::before { content: "✓ "; color: var(--accent); }

/* =========================================================
   10 — c-form · multi-step consultation form
   ========================================================= */
.c-form { max-width: 560px; }
.c-form__steps { display: flex; gap: 1rem; margin-bottom: 2rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.c-form__step-dot { display: flex; align-items: center; gap: .5rem; }
.c-form__step-dot[aria-current="step"] { color: var(--accent); }
.c-form__step-dot[aria-current="step"]::before { background: var(--accent); }
.c-form__step-dot::before { content: ""; width: 16px; height: 1px; background: var(--line-bright); }
.c-form__field { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.c-form__field label { font-family: var(--sans); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }
.c-form__field input, .c-form__field select, .c-form__field textarea {
  width: 100%; padding: .9rem 1rem; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); transition: border-color var(--t-base);
}
.c-form__field input:focus, .c-form__field select:focus, .c-form__field textarea:focus {
  outline: 0; border-color: var(--accent);
}
.c-form__field.is-invalid input, .c-form__field.is-invalid select, .c-form__field.is-invalid textarea {
  border-color: #b15a3a;
}
.c-form__error { font-family: var(--mono); font-size: .65rem; color: #b15a3a; letter-spacing: .1em; }
.c-form__step { display: none; }
.c-form__step[data-active="true"] { display: block; }
.c-form__actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* =========================================================
   11 — c-sticky-cta · mobile-only sticky concierge bar
   ========================================================= */
.c-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: none; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform var(--t-slow);
}
.c-sticky-cta.is-visible { transform: translateY(0); }
.c-sticky-cta a {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .8rem 0; color: var(--text);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  border-right: 1px solid var(--line);
}
.c-sticky-cta a:last-child { border-right: 0; }
.c-sticky-cta a svg { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 880px) { .c-sticky-cta { display: grid; } }

/* =========================================================
   12 — c-before-after · before/after slider
   ========================================================= */
.c-before-after {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-3); user-select: none; touch-action: none;
}
.c-before-after__after, .c-before-after__before {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
}
.c-before-after__after { background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--sand) 35%, transparent), var(--bg-3) 70%); }
.c-before-after__before {
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--accent-deep) 35%, transparent), var(--bg) 70%);
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.c-before-after__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--accent);
  transform: translateX(-50%); cursor: ew-resize;
}
.c-before-after__handle::after {
  content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 36px; height: 36px; background: var(--accent); color: var(--bg); display: grid; place-items: center;
  border-radius: 999px; font-size: .8rem;
}
.c-before-after__label {
  position: absolute; top: 1rem; padding: .3rem .6rem; background: color-mix(in srgb, var(--bg) 80%, transparent);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text);
}
.c-before-after__label.is-before { left: 1rem; }
.c-before-after__label.is-after { right: 1rem; }

/* =========================================================
   13 — c-mobile-menu · off-canvas menu
   ========================================================= */
.c-mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-mobile-menu);
  display: grid; grid-template-columns: 1fr min(82vw, 380px);
  pointer-events: none; visibility: hidden;
}
.c-mobile-menu.is-open { pointer-events: auto; visibility: visible; }
.c-mobile-menu__overlay {
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--t-base);
}
.c-mobile-menu.is-open .c-mobile-menu__overlay { opacity: 1; }
.c-mobile-menu__panel {
  background: var(--bg-2); border-left: 1px solid var(--line);
  padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem;
  transform: translateX(100%); transition: transform var(--t-slow);
}
.c-mobile-menu.is-open .c-mobile-menu__panel { transform: translateX(0); }
.c-mobile-menu__close { align-self: flex-end; font-family: var(--mono); font-size: .75rem; }
.c-mobile-menu__links { display: flex; flex-direction: column; gap: 1rem; }
.c-mobile-menu__links a {
  font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--text);
}

/* =========================================================
   14 — c-article · longform article layout
   ========================================================= */
.c-article { display: grid; grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); gap: var(--space-5); }
@media (min-width: 960px) {
  .c-article { grid-template-columns: 240px 1fr; }
  .c-article__toc { position: sticky; top: 100px; align-self: start; }
}
.c-article__toc {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted);
}
.c-article__toc h4 { font-family: var(--sans); font-size: .65rem; letter-spacing: .25em; color: var(--accent); margin-bottom: 1rem; }
.c-article__toc a { display: block; padding: .35rem 0; color: var(--text-muted); border-left: 1px solid var(--line); padding-left: .8rem; }
.c-article__toc a:hover, .c-article__toc a.is-active { color: var(--text); border-left-color: var(--accent); }
.c-article__body { max-width: 70ch; font-size: 1.05rem; line-height: 1.75; }
.c-article__body h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-style: italic; font-weight: 400; }
.c-article__body h3 { margin-top: 2rem; margin-bottom: .8rem; }
.c-article__body > p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 4.5rem; float: left; line-height: .9; padding: .2rem .5rem 0 0; color: var(--accent);
}
.c-article__body p { color: var(--text); margin-bottom: 1.2rem; }
.c-article__body ul, .c-article__body ol { color: var(--text); padding-left: 1.2rem; margin-bottom: 1.2rem; }
.c-article__body li { margin-bottom: .4rem; }
.c-article__body blockquote {
  border-left: 2px solid var(--accent); padding-left: 1.5rem; margin: 2rem 0;
  font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--text);
}
.c-mobile-menu__tools { margin-top: auto; display: flex; gap: 1rem; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* =========================================================
   15 — c-footer · editorial footer
   ========================================================= */
.c-footer {
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding: var(--space-7) 0 var(--space-5);
}
.c-footer__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5);
}
@media (max-width: 880px) { .c-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 500px) { .c-footer__grid { grid-template-columns: 1fr; } }
.c-footer__brand h3 { font-family: var(--serif); font-style: italic; font-size: 2rem; margin-bottom: 1rem; color: var(--accent); }
.c-footer h4 { font-family: var(--sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.c-footer ul { list-style: none; padding: 0; margin: 0; }
.c-footer li { padding: .25rem 0; }
.c-footer a { color: var(--text-muted); }
.c-footer a:hover { color: var(--accent); }
.c-footer__legal {
  max-width: var(--maxw); margin: var(--space-5) auto 0; padding: var(--space-3) var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted);
}
.c-footer__badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem;
  border: 1px solid var(--accent-deep); border-radius: 3px; color: var(--accent);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase;
}

/* =========================================================
   16 — c-lang-toggle · EN/ES language toggle stub
   ========================================================= */
.c-lang-toggle {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 3px; color: var(--text);
}
.c-lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.c-lang-toggle .is-inactive { color: var(--text-muted); }

/* =========================================================
   17 — c-skeleton · loading state placeholders
   ========================================================= */
.c-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.c-skeleton--text { height: .9rem; }
.c-skeleton--card { height: 280px; }
.c-skeleton--avatar { width: 64px; height: 64px; border-radius: 999px; }


/* =========================================================
   COLORES — Base
   HTML element styling + layout primitives.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-theme), color var(--t-theme);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0;
}
h1 { font-size: var(--fz-h1); font-weight: 300; letter-spacing: var(--ls-display); line-height: var(--lh-display); }
h2 { font-size: var(--fz-h2); }
h3 { font-size: var(--fz-h3); }
h4 { font-size: var(--fz-h4); }
h5 { font-size: var(--fz-h5); }
h6 { font-size: var(--fz-h6); }

p { margin: 0 0 1rem; max-width: 72ch; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-base);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg, video { max-width: 100%; display: block; height: auto; }

code, kbd, samp, pre {
  font-family: var(--mono);
  font-size: .9em;
  letter-spacing: .02em;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-5) 0;
}

/* Layout primitives */
.l-container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.l-section   { padding: var(--space-7) 0; border-bottom: 1px solid var(--line); }
.l-section:last-of-type { border-bottom: 0; }

/* Typography helpers used across components */
.t-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fz-mono-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.t-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.t-lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.5;
  max-width: 50ch;
}
.t-foil {
  background: var(--gold-grad);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-italic { font-style: italic; }
.t-mono   { font-family: var(--mono); }

/* Visually-hidden but available to AT */
.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;
}/* End custom CSS */