.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-d1a2410-font-family:"Cormorant Infant";--e-global-typography-d1a2410-font-size:var(--text-xxxl);--e-global-typography-d1a2410-font-weight:300;--e-global-typography-fb311a0-font-family:"Cormorant Infant";--e-global-typography-fb311a0-font-size:var(--text-xxl);--e-global-typography-fb311a0-font-weight:300;--e-global-typography-5aebf40-font-family:"Cormorant Infant";--e-global-typography-5aebf40-font-size:var(--text-xl);--e-global-typography-5aebf40-font-weight:300;--e-global-typography-585df23-font-family:"Cormorant Infant";--e-global-typography-585df23-font-size:var(--text-l);--e-global-typography-585df23-font-weight:300;--e-global-typography-0266bb6-font-family:"Cormorant Infant";--e-global-typography-0266bb6-font-size:var(--text-m);--e-global-typography-0266bb6-font-weight:700;--e-global-typography-4a3a7b8-font-family:"Montserrat";--e-global-typography-4a3a7b8-font-size:var(--text-s);--e-global-typography-4a3a7b8-font-weight:700;--e-global-typography-f63de64-font-family:"Montserrat";--e-global-typography-f63de64-font-size:var(--text-xs);--e-global-typography-f63de64-font-weight:600;--e-global-typography-d4c3d8f-font-family:"Montserrat";--e-global-typography-d4c3d8f-font-size:var(--text-body-l);--e-global-typography-d4c3d8f-font-weight:400;--e-global-typography-60c8b5b-font-family:"Montserrat";--e-global-typography-60c8b5b-font-size:var(--text-body);--e-global-typography-60c8b5b-font-weight:400;--e-global-typography-05d12d0-font-family:"Montserrat";--e-global-typography-05d12d0-font-size:var(--text-body-s);--e-global-typography-05d12d0-font-weight:400;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{text-decoration:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:--container-max;}.e-con{--container-max-width:--container-max;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0;}.elementor-element{--widgets-spacing:0 0;--widgets-spacing-row:0;--widgets-spacing-column:0;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ════════════════════════════════════════════════════════════════
   ████████████████████████████████████████████████████████████████
   FLUID DESIGN SYSTEM — BLUEPRINT v6.1 NoBe
   ████████████████████████████████████████████████████████████████
   ════════════════════════════════════════════════════════════════
   Versión:   v6.1 — NoBe PARC
   Cliente:   NoBe PARC — Miami Beach
   Destino:   WordPress + Elementor Pro
   Pegar en:  Site Settings → Custom CSS

   Base: Blueprint v6.1 (OGA 2026) personalizado para NoBe
   Personalización aplicada:
   · SECCIÓN 01A → paleta NoBe PARC
   · SECCIÓN 01B → roles semánticos NoBe
   · SECCIÓN 04  → Cormorant Infant + Montserrat
   · SECCIÓN 09  → fallback con las mismas familias
   · PROJECT OVERRIDES → componentes específicos de NoBe

   ════════════════════════════════════════════════════════════════
   GUÍA RÁPIDA
   ════════════════════════════════════════════════════════════════

   Este archivo tiene DOS ZONAS:

   🟢 PERSONALIZABLE  → cambiás cada proyecto
   🔒 FIJA            → NO se toca, igual en todos los proyectos

   Para arrancar un proyecto nuevo solo tocás 2 secciones:

     1. SECCIÓN 01A → Cargá los hex de la paleta del cliente.
     2. SECCIÓN 04  → Cargá los nombres de las familias tipográficas.

   Después replicás los mismos colores y fuentes en:
     · Elementor → Site Settings → Global Colors
     · Elementor → Site Settings → Global Fonts

   Si necesitás CSS específico global de este proyecto, agregalo
   debajo del Blueprint en la zona PROJECT OVERRIDES — NOBE.

   Si el ajuste aplica solo a una página o widget puntual, usá:
     · Elementor → Page Settings → Custom CSS  (CSS por página)
     · Widget → Advanced → Custom CSS          (CSS por widget)

   ════════════════════════════════════════════════════════════════
   VIEWPORT BASE
   ════════════════════════════════════════════════════════════════
   Mobile:  360px   (mínimo de clamp)
   Desktop: 1920px  (máximo de clamp)
   Container max: 1440px

   ════════════════════════════════════════════════════════════════
   ÍNDICE
   ════════════════════════════════════════════════════════════════

   ── PARTE 1: SISTEMA DE DISEÑO FLUIDO ──────────────────────────
   SECCIÓN 00 🔒 Render base (box-sizing, font-smoothing)
   SECCIÓN 01 → Variables globales
                 01A 🟢 Tokens primitivos de color (paleta)
                 01B 🟢 Tokens semánticos de color (roles)
                 01C 🔒 Tamaños tipográficos fluidos
                 01D 🔒 Interlineado
                 01E 🔒 Tracking
                 01F 🔒 Espaciado fluido
                 01G 🔒 Contenedor
   SECCIÓN 02 🔒 Neutralización de Elementor
   SECCIÓN 03 🔒 Capa 1: Tokens de tamaño tipográfico
   SECCIÓN 04 🟢 Capa 2: Modificadores de fuente
   SECCIÓN 05 🔒 Capa 3: Modificadores de estilo
   SECCIÓN 06 🔒 Utilidades de color (backgrounds y texto)
   SECCIÓN 07 🔒 Contenedor y layout (padding, margin, gap)
   SECCIÓN 08 🔒 Componentes de imagen (proporciones)
   SECCIÓN 09 🟢 Fallback semántico (red de seguridad)

   ── PARTE 2: COMPONENTES BASE ───────────────────────────────────
   SECCIÓN 10 🔒 Hero section

   ── PROJECT OVERRIDES — NOBE ────────────────────────────────────
   NOBE-01    Header (fixed + glassmorphism al scroll + paddings)
   NOBE-02    Off Canvas (panel lateral del menú mobile)
   NOBE-03    Menú: subrayado dorado al hover (clip-path mask)
   NOBE-04    Depth Slider 3D (GSAP)
   NOBE-05    Feature List (lista con símbolo +)
   NOBE-06    Layout de secciones (section-inner / col-pad-left)
   NOBE-07    Image Strip (tira full-bleed)
   NOBE-08    Hero Secundario (banner fotográfico)

   ── PARTE 3: REFERENCIA RÁPIDA ──────────────────────────────────
   SECCIÓN 13 → Cheat sheet de clases para Elementor

   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   ████  PARTE 1: SISTEMA DE DISEÑO FLUIDO  ████
   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 00 — RENDER BASE
   ════════════════════════════════════════════════════════════════ */

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

body {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}


:root {

  /* ┌──────────────────────────────────────────────────────────┐
     │  🟢 01A — TOKENS PRIMITIVOS DE COLOR                     │
     │  Paleta de NoBe PARC — Miami Beach                       │
     └──────────────────────────────────────────────────────────┘ */

  --color-deep-green:   #4D655A;   /* Verde principal — texto, headings oscuros   */
  --color-soft-green:   #A8B295;   /* Verde suave — textos secundarios            */
  --color-pale-rose:    #F0D1C7;   /* Rosa pálido — fondos suaves, accent 1       */
  --color-golden-sand:  #DAB27B;   /* Dorado arena — líneas decorativas, accent 2 */
  --color-ivory:        #F8F0E2;   /* Marfil — fondo principal                    */
  --color-ivory-white:  #FFFCF7;   /* Marfil claro — fondo secundario             */


  /* ┌──────────────────────────────────────────────────────────┐
     │  🟢 01B — TOKENS SEMÁNTICOS DE COLOR                     │
     └──────────────────────────────────────────────────────────┘ */

  --color-text-primary:    var(--color-deep-green);
  --color-text-secondary:  var(--color-soft-green);
  --color-text-light:      var(--color-ivory);
  --color-accent:          var(--color-golden-sand);
  --color-action:          var(--color-deep-green);
  --color-bg-base:         var(--color-ivory);
  --color-bg-alternate:    var(--color-ivory-white);
  --color-divider:         var(--color-soft-green);


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01C — TAMAÑOS TIPOGRÁFICOS FLUIDOS                   │
     └──────────────────────────────────────────────────────────┘ */

  --text-xxxl: clamp(3.8147rem, 3.4003rem + 1.8416vw, 5.6102rem);
  --text-xxl:  clamp(3.0518rem, 2.7848rem + 1.1866vw, 4.2087rem);
  --text-xl:   clamp(2.4414rem, 2.2762rem + 0.7343vw, 3.1573rem);
  --text-l:    clamp(1.9531rem, 1.8572rem + 0.4261vw, 2.3686rem);
  --text-m:    clamp(1.5625rem, 1.5130rem + 0.2199vw, 1.7769rem);
  --text-s:    clamp(1.2500rem, 1.2308rem + 0.0851vw, 1.3330rem);
  --text-xs:   clamp(1.0000rem, 0.9712rem + 0.1282vw, 1.1250rem);

  --text-body-l: clamp(1.0625rem, 1.0192rem + 0.1923vw, 1.2500rem);
  --text-body:   clamp(1.0000rem, 1.0000rem + 0.0000vw, 1.0000rem);
  --text-body-s: clamp(0.8125rem, 0.7981rem + 0.0641vw, 0.8750rem);


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01D — INTERLINEADO                                   │
     └──────────────────────────────────────────────────────────┘ */

  --lh-xxxl:   1.05;
  --lh-xxl:    1.10;
  --lh-xl:     1.15;
  --lh-l:      1.20;
  --lh-m:      1.25;
  --lh-s:      1.45;
  --lh-xs:     1.65;
  --lh-body-l: 1.58;
  --lh-body:   1.75;
  --lh-body-s: 1.80;


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01E — TRACKING                                       │
     └──────────────────────────────────────────────────────────┘ */

  --ls-xxxl:   -0.03em;
  --ls-xxl:    -0.025em;
  --ls-xl:     -0.02em;
  --ls-l:      -0.015em;
  --ls-m:      -0.01em;
  --ls-s:       0em;
  --ls-xs:      0em;
  --ls-body-l:  0em;
  --ls-body:    0em;
  --ls-body-s:  0.01em;


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01F — ESPACIADO FLUIDO                               │
     └──────────────────────────────────────────────────────────┘ */

  --space-xs: clamp(0.5000rem, 0.3846rem + 0.5128vw, 1.0000rem);
  --space-s:  clamp(1.0000rem, 0.7692rem + 1.0256vw, 2.0000rem);
  --space-m:  clamp(2.0000rem, 1.5385rem + 2.0513vw, 4.0000rem);
  --space-l:  clamp(1.5000rem, 0.5769rem + 4.1026vw, 7.5000rem);
  --space-xl: clamp(6.0000rem, 4.5000rem + 6.6667vw, 12.5000rem);
  
  /* ── ESPACIADO VERTICAL (block) — mínimos más generosos para secciones ── */
--space-block-xs: clamp(1.0rem, 0.8462rem + 0.6838vw, 1.5rem);
--space-block-s:  clamp(2.0rem, 1.6923rem + 1.3675vw, 3.0rem);
--space-block-m:  clamp(3.0rem, 2.4231rem + 2.5641vw, 5.5rem);
--space-block-l:  clamp(3.5rem, 2.6923rem + 3.5897vw, 8.5rem);
--space-block-xl: clamp(7.0rem, 6.1538rem + 3.7607vw, 13.5rem);


  /* ┌──────────────────────────────────────────────────────────┐
     │  🔒 01G — CONTENEDOR                                     │
     └──────────────────────────────────────────────────────────┘ */

  --container-max:     1440px;
--container-padding: clamp(1.0000rem, -1.0769rem + 5.4700vw, 7.5000rem);

}




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 02 — NEUTRALIZACIÓN DE ELEMENTOR
   ════════════════════════════════════════════════════════════════ */

.elementor-widget-heading .elementor-heading-title.elementor-size-default {
  font-size: unset;
}

.elementor-widget.text-xxxl .elementor-heading-title,
.elementor-widget.text-xxl  .elementor-heading-title,
.elementor-widget.text-xl   .elementor-heading-title,
.elementor-widget.text-l    .elementor-heading-title,
.elementor-widget.text-m    .elementor-heading-title,
.elementor-widget.text-s    .elementor-heading-title,
.elementor-widget.text-xs   .elementor-heading-title,
.elementor-widget.text-body-l .elementor-heading-title,
.elementor-widget.text-body   .elementor-heading-title,
.elementor-widget.text-body-s .elementor-heading-title {
  font-size:      inherit !important;
  line-height:    inherit !important;
  letter-spacing: inherit !important;
  font-family:    inherit !important;
  font-weight:    inherit !important;
  font-style:     inherit !important;
  text-align:     inherit !important;
  text-transform: inherit !important;
}

.elementor-widget-heading .elementor-heading-title a {
  color:           inherit !important;
  font:            inherit !important;
  letter-spacing:  inherit !important;
  text-transform:  inherit !important;
  text-decoration: none !important;
}




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 03 — CAPA 1: TOKENS DE TAMAÑO TIPOGRÁFICO
   ════════════════════════════════════════════════════════════════ */

.text-xxxl,
.elementor-widget.text-xxxl {
  font-size:      var(--text-xxxl)  !important;
  line-height:    var(--lh-xxxl)    !important;
  letter-spacing: var(--ls-xxxl)    !important;
}

.text-xxl,
.elementor-widget.text-xxl {
  font-size:      var(--text-xxl)   !important;
  line-height:    var(--lh-xxl)     !important;
  letter-spacing: var(--ls-xxl)     !important;
}

.text-xl,
.elementor-widget.text-xl {
  font-size:      var(--text-xl)    !important;
  line-height:    var(--lh-xl)      !important;
  letter-spacing: var(--ls-xl)      !important;
}

.text-l,
.elementor-widget.text-l {
  font-size:      var(--text-l)     !important;
  line-height:    var(--lh-l)       !important;
  letter-spacing: var(--ls-l)       !important;
}

.text-m,
.elementor-widget.text-m {
  font-size:      var(--text-m)     !important;
  line-height:    var(--lh-m)       !important;
  letter-spacing: var(--ls-m)       !important;
}

.text-s,
.elementor-widget.text-s {
  font-size:      var(--text-s)     !important;
  line-height:    var(--lh-s)       !important;
  letter-spacing: var(--ls-s)       !important;
}

.text-xs,
.elementor-widget.text-xs {
  font-size:      var(--text-xs)    !important;
  line-height:    var(--lh-xs)      !important;
  letter-spacing: var(--ls-xs)      !important;
}

.text-body-l,
.elementor-widget.text-body-l {
  font-size:      var(--text-body-l)  !important;
  line-height:    var(--lh-body-l)    !important;
  letter-spacing: var(--ls-body-l)    !important;
}

.text-body,
.elementor-widget.text-body {
  font-size:      var(--text-body)    !important;
  line-height:    var(--lh-body)      !important;
  letter-spacing: var(--ls-body)      !important;
}

.text-body-s,
.elementor-widget.text-body-s {
  font-size:      var(--text-body-s)  !important;
  line-height:    var(--lh-body-s)    !important;
  letter-spacing: var(--ls-body-s)    !important;
}




/* ════════════════════════════════════════════════════════════════
   🟢 SECCIÓN 04 — CAPA 2: MODIFICADORES DE FUENTE
   ════════════════════════════════════════════════════════════════
   NoBe PARC usa arquitectura DUOVOZ:
   · font-display  → Cormorant Infant (serif editorial)
   · font-body-*   → Montserrat (sans-serif funcional)

   Pesos cargados en Elementor → Custom Fonts:
   · Cormorant Infant: 300, 400, 600, 700
   · Montserrat:       300, 400, 500, 600, 700
   ════════════════════════════════════════════════════════════════ */

.font-display {
  font-family: 'Cormorant Infant', serif !important;
  font-weight: 300 !important;
}

.font-display-regular {
  font-family: 'Cormorant Infant', serif !important;
  font-weight: 400 !important;
}

.font-display-semi {
  font-family: 'Cormorant Infant', serif !important;
  font-weight: 600 !important;
}

.font-display-bold {
  font-family: 'Cormorant Infant', serif !important;
  font-weight: 700 !important;
}

.font-body-light {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
}

.font-body {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
}

.font-body-mid {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
}

.font-body-semi {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

.font-body-bold {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 05 — CAPA 3: MODIFICADORES DE ESTILO
   ════════════════════════════════════════════════════════════════ */

.text-upper {
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }

.text-primary   { color: var(--color-text-primary)   !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-light     { color: var(--color-text-light)     !important; }
.text-accent    { color: var(--color-accent)         !important; }
.text-action    { color: var(--color-action)         !important; }




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 06 — UTILIDADES DE COLOR
   ════════════════════════════════════════════════════════════════ */

/* ── BACKGROUNDS SEMÁNTICOS ── */
.bg-base      { background-color: var(--color-bg-base)      !important; }
.bg-alt       { background-color: var(--color-bg-alternate) !important; }
.bg-primary   { background-color: var(--color-text-primary) !important; }
.bg-accent    { background-color: var(--color-accent)       !important; }
.bg-action    { background-color: var(--color-action)       !important; }

/* ── BACKGROUNDS DIRECTOS ── */
.bg-deep-green  { background-color: var(--color-deep-green)  !important; }
.bg-soft-green  { background-color: var(--color-soft-green)  !important; }
.bg-pale-rose   { background-color: var(--color-pale-rose)   !important; }
.bg-golden-sand { background-color: var(--color-golden-sand) !important; }
.bg-ivory       { background-color: var(--color-ivory)       !important; }
.bg-ivory-white { background-color: var(--color-ivory-white) !important; }

/* ── COLORES DE TEXTO DIRECTOS ── */
.color-deep-green  { color: var(--color-deep-green)  !important; }
.color-soft-green  { color: var(--color-soft-green)  !important; }
.color-golden-sand { color: var(--color-golden-sand) !important; }
.color-pale-rose   { color: var(--color-pale-rose)   !important; }
.color-ivory       { color: var(--color-ivory)       !important; }




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 07 — CONTENEDOR Y LAYOUT
   ════════════════════════════════════════════════════════════════ */

.container {
  max-width:    var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  width:        100%;
}

.container-padding {
  padding-left:  var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
}

.pad-inline-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.pad-inline-s  { padding-left: var(--space-s)  !important; padding-right: var(--space-s)  !important; }
.pad-inline-m  { padding-left: var(--space-m)  !important; padding-right: var(--space-m)  !important; }
.pad-inline-l  { padding-left: var(--space-l)  !important; padding-right: var(--space-l)  !important; }
.pad-inline-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }

.pad-top-xs  { padding-top: var(--space-xs)  !important; }
.pad-top-s   { padding-top: var(--space-s)   !important; }
.pad-top-m   { padding-top: var(--space-m)   !important; }
.pad-top-l   { padding-top: var(--space-l)   !important; }
.pad-top-xl  { padding-top: var(--space-xl)  !important; }

.pad-bottom-xs { padding-bottom: var(--space-xs) !important; }
.pad-bottom-s  { padding-bottom: var(--space-s)  !important; }
.pad-bottom-m  { padding-bottom: var(--space-m)  !important; }
.pad-bottom-l  { padding-bottom: var(--space-l)  !important; }
.pad-bottom-xl { padding-bottom: var(--space-xl) !important; }

.mar-top-xs { margin-top: var(--space-xs) !important; }
.mar-top-s  { margin-top: var(--space-s)  !important; }
.mar-top-m  { margin-top: var(--space-m)  !important; }
.mar-top-l  { margin-top: var(--space-l)  !important; }
.mar-top-xl { margin-top: var(--space-xl) !important; }

.mar-bottom-xs { margin-bottom: var(--space-xs) !important; }
.mar-bottom-s  { margin-bottom: var(--space-s)  !important; }
.mar-bottom-m  { margin-bottom: var(--space-m)  !important; }
.mar-bottom-l  { margin-bottom: var(--space-l)  !important; }
.mar-bottom-xl { margin-bottom: var(--space-xl) !important; }

.gap-xs { gap: var(--space-xs) !important; }
.gap-s  { gap: var(--space-s)  !important; }
.gap-m  { gap: var(--space-m)  !important; }
.gap-l  { gap: var(--space-l)  !important; }
.gap-xl { gap: var(--space-xl) !important; }


/* ── Padding vertical semántico (usa escala block) ── */
.pad-top-block-xs  { padding-top: var(--space-block-xs) !important; }
.pad-top-block-s   { padding-top: var(--space-block-s)  !important; }
.pad-top-block-m   { padding-top: var(--space-block-m)  !important; }
.pad-top-block-l   { padding-top: var(--space-block-l)  !important; }
.pad-top-block-xl  { padding-top: var(--space-block-xl) !important; }

.pad-bottom-block-xs  { padding-bottom: var(--space-block-xs) !important; }
.pad-bottom-block-s   { padding-bottom: var(--space-block-s)  !important; }
.pad-bottom-block-m   { padding-bottom: var(--space-block-m)  !important; }
.pad-bottom-block-l   { padding-bottom: var(--space-block-l)  !important; }
.pad-bottom-block-xl  { padding-bottom: var(--space-block-xl) !important; }


/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 08 — COMPONENTES DE IMAGEN
   ════════════════════════════════════════════════════════════════ */

.foto-proporcion img {
  width:           100%;
  aspect-ratio:    3 / 4;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

.foto-landscape img {
  width:           100%;
  aspect-ratio:    16 / 9;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

.foto-cuadrada img {
  width:           100%;
  aspect-ratio:    1 / 1;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

.img-full-bleed img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}




/* ════════════════════════════════════════════════════════════════
   🟢 SECCIÓN 09 — FALLBACK SEMÁNTICO
   ════════════════════════════════════════════════════════════════ */

.elementor-widget-heading h1 {
  font-size: var(--text-xxl); line-height: var(--lh-xxl);
  letter-spacing: var(--ls-xxl);
  font-family: 'Cormorant Infant', serif; font-weight: 300;
}
.elementor-widget-heading h2 {
  font-size: var(--text-xl); line-height: var(--lh-xl);
  letter-spacing: var(--ls-xl);
  font-family: 'Cormorant Infant', serif; font-weight: 300;
}
.elementor-widget-heading h3 {
  font-size: var(--text-l); line-height: var(--lh-l);
  letter-spacing: var(--ls-l);
  font-family: 'Cormorant Infant', serif; font-weight: 300;
}
.elementor-widget-heading h4 {
  font-size: var(--text-m); line-height: var(--lh-m);
  letter-spacing: var(--ls-m);
  font-family: 'Cormorant Infant', serif; font-weight: 600;
}
.elementor-widget-heading h5 {
  font-size: var(--text-s); line-height: var(--lh-s);
  letter-spacing: var(--ls-s);
  font-family: 'Montserrat', sans-serif; font-weight: 700;
}
.elementor-widget-heading h6 {
  font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--ls-xs);
  font-family: 'Montserrat', sans-serif; font-weight: 600;
}




/* ════════════════════════════════════════════════════════════════
   ████  PARTE 2: COMPONENTES BASE  ████
   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   🔒 SECCIÓN 10 — HERO SECTION
   ════════════════════════════════════════════════════════════════ */

.hero-section {
  width:           100%;
  min-height:      100vh;
  position:        relative;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
}




/* ════════════════════════════════════════════════════════════════
   ████  PROJECT OVERRIDES — NOBE  ████
   ════════════════════════════════════════════════════════════════
   CSS específico global de este proyecto.
   No pertenece al Blueprint master.
   ════════════════════════════════════════════════════════════════ */




/* ════════════════════════════════════════════════════════════════
   NOBE-01 — HEADER (fixed + glassmorphism + paddings)
   ════════════════════════════════════════════════════════════════
   Header fijo arriba con dos estados:
   · Transparente → sobre el hero
   · Scrolled     → fondo verde con glassmorphism (>40px scroll)

   ESTRUCTURA EN ELEMENTOR (Theme Builder → Header):
   Container principal    → CSS Classes: header-wrap
     └── Container Inner  → CSS Classes: header-inner
           ├── Container hamb (icon hamburguesa + "OFFICIAL DEVELOPER SITE")
           ├── Container logo (logo NoBe centrado, grow=1)
           └── Container botones (teléfono + INQUIRE)
     └── Widget Off Canvas (hermano de Container Inner)

   JS asociado: snippet "Nobe-header-scroll" en Elementor Custom Code
   ════════════════════════════════════════════════════════════════ */

/* Scrollbar siempre reservada — evita saltos al abrir/cerrar Off Canvas */
html {
  scrollbar-gutter: stable;
}

/* Header fijo arriba sobre el hero */
.header-wrap {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  z-index:          1000;
  background-color: transparent;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

/* Glassmorphism al scrollear más de 40px */
.header-wrap.is-scrolled {
  background-color:        rgba(77, 101, 90, 0.90) !important;
  backdrop-filter:         blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:              0 1px 20px rgba(0, 0, 0, 0.08);
}

/* Container interno: paddings laterales fluidos y vertical */
.header-inner {
  max-width:       2500px;
  margin-left:     auto;
  margin-right:    auto;
  padding-top:     1.2rem;
  padding-bottom:  1.2rem;
  padding-left:    var(--container-padding);
  padding-right:   var(--container-padding);
  transition:      padding-top 0.5s ease, padding-bottom 0.5s ease;
}

/* Header reducido al scrollear — de 106px a 80px */
.header-wrap.is-scrolled .header-inner {
  padding-top:    0.6rem !important;
  padding-bottom: 0.6rem !important;
}

/* Logo — altura inicial explícita para que la transición funcione */
.nobe-header-logo img {
  height: 90px;
  width: auto;
  transition: height 0.5s ease;
}

/* Estado scrolled: achica el logo */
.header-wrap.is-scrolled .nobe-header-logo img {
  height: 60px !important;
  width: auto !important;
}



/* ════════════════════════════════════════════════════════════════
   NOBE-02 — OFF CANVAS (panel lateral del menú mobile)
   ════════════════════════════════════════════════════════════════
   Ajustes mínimos sobre el widget Off Canvas nativo de Elementor.

   AJUSTES DESDE EL PANEL DE ELEMENTOR (no requieren CSS):
   · Width del panel
   · Background color (deep-green)
   · Animation Duration (600ms recomendado)
   · Animation Type
   · Toggle (CSS Selector: #nobeMenuOpen, el ID del ícono que abre)

   AJUSTES QUE SÍ REQUIEREN CSS (acá abajo):
   · Color del overlay más oscuro
   · Posición fija del overlay (cubre el viewport en cualquier scroll)
   ════════════════════════════════════════════════════════════════ */

.e-off-canvas__overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
  position:         fixed !important;
  top:              0 !important;
  left:             0 !important;
  width:            100% !important;
  height:           100vh !important;
}




/* ════════════════════════════════════════════════════════════════
   NOBE-03 — MENÚ: SUBRAYADO DORADO AL HOVER
   ════════════════════════════════════════════════════════════════
   Items del menú dentro del Off Canvas (widgets Heading H2 con
   clase nobe-menu-item). Subrayado dorado SVG centrado debajo
   que se revela con efecto máscara (clip-path) de izq a der.

   Curva ease-out expo: arranca rápido y desacelera al final.
   ════════════════════════════════════════════════════════════════ */

.nobe-menu-item {
  position: relative;
  display:  inline-block;
}

.nobe-menu-item::after {
  content:           "";
  position:          absolute;
  left:              50%;
  bottom:            -10px;
  width:             60%;
  height:            4px;
  background-image:  url('https://nobeparcmiamibeach.com/wp-content/uploads/line-mouse-over-menu.svg');
  background-repeat: no-repeat;
  background-size:   100% 100%;
  transform:         translateX(-50%);
  clip-path:         inset(0 100% 0 0);
  transition:        clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events:    none;
}

.nobe-menu-item:hover::after,
.nobe-menu-item.active::after {
  clip-path: inset(0 0 0 0);
}




/* ════════════════════════════════════════════════════════════════
   NOBE-04 — DEPTH SLIDER (Efecto 3D con GSAP)
   ════════════════════════════════════════════════════════════════
   Slider con profundidad 3D. Animación controlada por GSAP
   (Custom Code → Body End → NoBe Slider GSAP).

   ESTRUCTURA:
   Container → clase: depth-slider
       ├── Container → clase: depth-slide
       ├── Container → clase: depth-slide
       └── Container → clase: depth-slide
   ════════════════════════════════════════════════════════════════ */

.depth-slider {
  position:        relative;
  width:           100%;
  aspect-ratio:    0.72 / 1;
  min-height:      720px;
  overflow:        visible;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding-right:   50px;
  box-sizing:      border-box;
}

.depth-slide {
  position:            absolute;
  top:                 0;
  right:               0;
  width:               100%;
  height:              100%;
  background-size:     cover;
  background-position: center center;
  border-radius:       2px;
  transform-origin:    center center;
  will-change:         transform, opacity;
  box-shadow:          -15px 15px 40px rgba(0, 0, 0, 0.12);
}

@media (max-width: 1200px) {
  .depth-slider { min-height: 600px; }
}

@media (max-width: 767px) {
  .depth-slider {
    aspect-ratio: 1 / 1;
    min-height:   400px;
    overflow:     hidden;
  }
}




/* ════════════════════════════════════════════════════════════════
   NOBE-05 — FEATURE LIST
   ════════════════════════════════════════════════════════════════
   Lista con símbolo + como bullet visual.
   Uso: text-body font-body feature-list mar-top-xs
   ════════════════════════════════════════════════════════════════ */

.feature-list p {
  padding-left:  1.2em;
  text-indent:  -1.2em;
  margin-bottom: 0.35em;
}

.feature-list p:last-child {
  margin-bottom: 0;
}




/* ════════════════════════════════════════════════════════════════
   NOBE-06 — LAYOUT DE SECCIONES (section-inner / col-pad-left)
   ════════════════════════════════════════════════════════════════ */

.section-inner {
  max-width:      1440px;
  width:          100%;
  margin-left:    auto;
  margin-right:   auto;
  display:        flex;
  flex-direction: row;
  align-items:    center;
  padding:        0;
}

.col-pad-left {
  padding-left:  var(--container-padding) !important;
  padding-right: var(--space-l) !important;
}




/* ════════════════════════════════════════════════════════════════
   NOBE-07 — IMAGE STRIP (Tira de imágenes full-bleed)
   ════════════════════════════════════════════════════════════════ */

.image-strip-wrap {
  display:        flex;
  flex-direction: row;
  gap:            4px;
  width:          100%;
  overflow:       hidden;
}

.image-strip-item-wide {
  flex:         2;
  aspect-ratio: 3 / 2;
  overflow:     hidden;
}

.image-strip-item {
  flex:         1;
  aspect-ratio: 3 / 4;
  overflow:     hidden;
}

.image-strip-wrap.e-con {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      nowrap !important;
  gap:            10px !important;
  padding:        0 !important;
}

.image-strip-item-wide.e-con {
  flex:      2 !important;
  min-width: 0 !important;
}

.image-strip-item.e-con {
  flex:      1 !important;
  min-width: 0 !important;
}

.image-strip-item-wide img,
.image-strip-item img {
  transition: transform 1.8s ease-in-out;
  transform:  scale(1.00);
}

.image-strip-item-wide:hover img,
.image-strip-item:hover img {
  transform: scale(1.08);
}




/* ════════════════════════════════════════════════════════════════
   NOBE-08 — HERO SECUNDARIO
   ════════════════════════════════════════════════════════════════ */

.hero-secondary {
  width:    100%;
  height:   clamp(400px, 41.67vw, 800px);
  position: relative;
  overflow: hidden;
}

.hero-secondary .elementor-widget-wrap {
  height: 100%;
}

.hero-secondary .elementor-widget-container {
  height:      100%;
  line-height: 0;
}

.hero-secondary .elementor-image {
  height: 100%;
}

.hero-secondary img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.hero-secondary.e-con {
  margin-left:   0 !important;
  margin-right:  0 !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}




/* ════════════════════════════════════════════════════════════════
   ████  PARTE 3: REFERENCIA RÁPIDA  ████
   ════════════════════════════════════════════════════════════════

   ── TIPOGRAFÍA ────────────────────────────────────────────────
   ELEMENTO                        CLASES A APLICAR
   Headline hero                   text-xxxl font-display
   H1 principal                    text-xxl font-display
   H2 sección serif                text-xl font-display
   H3 editorial                    text-l font-display
   Subheadline editorial           text-m font-display-semi
   Título uppercase serif          text-s font-display-bold text-upper color-deep-green
   Label uppercase sans            text-xs font-body-bold text-upper color-deep-green
   Eyebrow / navbar                text-xs font-body-semi text-upper
   Eyebrow dorado                  text-xs font-body-bold text-upper text-accent
   Párrafo intro                   text-body-l font-body
   Párrafo estándar                text-body font-body
   Párrafo secundario              text-body font-body text-secondary
   Caption / nota                  text-body-s font-body

   ── LAYOUT — containers ───────────────────────────────────────
   Sección full-width c/ fondo     bg-ivory (u otro bg-*)
   Container centrado 1440px       container container-padding
   Columna izquierda con padding   col-pad-left pad-top-l pad-bottom-l
   
   Padding vertical entre secciones   pad-top-block-l pad-bottom-block-l
Padding vertical generoso          pad-top-block-xl pad-bottom-block-xl


   ── HEADER ────────────────────────────────────────────────────
   Container principal             header-wrap
   Container inner                 header-inner
   Items menú Off Canvas           nobe-menu-item
   Resto: tipografía, colores, layout vía panel de Elementor

   ── DEPTH SLIDER ──────────────────────────────────────────────
   Container del slider            depth-slider
   Cada imagen                     depth-slide

   ── BUILDING FEATURES ─────────────────────────────────────────
   Párrafo intro                   text-body font-body text-secondary
   Título sección                  text-s font-display-bold text-upper color-deep-green
   Subtítulo categoría             text-xs font-body-bold text-upper color-deep-green mar-top-xs
   Lista con +                     text-body font-body feature-list mar-top-xs

   ── COLORES ───────────────────────────────────────────────────
   Fondos:  bg-deep-green  bg-soft-green  bg-pale-rose
            bg-golden-sand  bg-ivory  bg-ivory-white
   Texto:   color-deep-green  color-soft-green  color-golden-sand
            color-pale-rose  color-ivory

   ── IMÁGENES ──────────────────────────────────────────────────
   Retrato 3:4                     foto-proporcion
   Landscape 16:9                  foto-landscape
   Cuadrada 1:1                    foto-cuadrada
   Full-bleed                      img-full-bleed
   ════════════════════════════════════════════════════════════════ *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Cormorant Infant';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/cormorant-garamond-v21-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Infant';
	font-style: italic;
	font-weight: 300;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Infant';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Infant';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Infant';
	font-style: italic;
	font-weight: 600;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/cormorant-garamond-v21-latin-600italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Infant';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/cormorant-garamond-v21-latin-700.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 300;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-LightItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: bold;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-BoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 600;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 500;
	font-display: auto;
	src: url('https://nobeparcmiamibeach.com/wp-content/uploads/Montserrat-MediumItalic.ttf') format('truetype');
}
/* End Custom Fonts CSS */