@font-face {
  font-family: 'Camelia Beauty';
  src: url('/fonts/camelia-beauty-latin.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Layout */
  --lda-container-max: 1240px;
  --lda-page-gutter: 48px;
  --lda-page-gutter-mobile: 24px;

  /* Vertical rhythm */
  --lda-section-sm: 48px;
  --lda-section-md: 72px;
  --lda-section-lg: 96px;
  --lda-section-xl: 120px;
  --lda-section-mobile-sm: 40px;
  --lda-section-mobile-md: 48px;
  --lda-section-mobile-lg: 64px;
  --lda-section-mobile-xl: 80px;

  /* Core brand colors */
  --lda-black: #000000;
  --lda-white: #FFFFFF;
  --lda-pink: #F65091;
  --lda-blue: #0CC0DF;
  --lda-beige: #F3EEE4;
  --lda-brown: #8B795E;

  /* Accessible semantic roles. Brand primitives above remain unchanged. */
  --lda-text-secondary: #756348;
  --lda-action-primary: #F65091;
  --lda-focus-ring: #F65091;

  /* Navigation */
  --lda-nav-height: 80px;
  --lda-nav-height-mobile: 64px;

  /* Camelia mixed with Montserrat: optical scale + vertical compensation. */
  --lda-camelia-inline-scale: 1.80em;
  --lda-camelia-inline-leading: 0.68;
  --lda-camelia-inline-shift: 0.08em;
}

/*
 * Camelia is intentionally larger than Montserrat for equal optical presence.
 * Its compact line-height prevents that larger font-size from expanding the
 * surrounding line box and creating oversized gaps between wrapped lines.
 * The small downward shift keeps both typefaces visually centered together.
 */
html body .lda-camelia-hero,
html body .lda-camelia-accent,
html body .lda-camelia-long,
html body .lda-script-hero,
html body .lda-script-section,
html body .lda-script-long,
html body .lda-script-paragraph,
html body .lda-editorial-script,
html body .lda-footer-script,
html body span[style*="Camelia Beauty"],
html body b[style*="Camelia Beauty"],
html body #dc-boot-fallback .dc-fb-script {
  font-family: 'Camelia Beauty', cursive !important;
  font-size: var(--lda-camelia-inline-scale) !important;
  line-height: var(--lda-camelia-inline-leading) !important;
  font-weight: 400 !important;
  position: relative !important;
  left: 0 !important;
  top: var(--lda-camelia-inline-shift) !important;
  vertical-align: baseline !important;
}

/* Standalone brand script is not mixed with Montserrat, so it keeps its own scale. */
.lda-script-logo {
  font-family: 'Camelia Beauty', cursive !important;
}

/* Give the editorial accent a little breathing room when it follows Montserrat. */
.lda-del-estudio-title-row .lda-camelia-accent {
  margin-left: 0.10em !important;
}

.lda-mobile-break {
  display: none;
}

.lda-hero-idea-line {
  white-space: nowrap;
}

@media (min-width: 860px) {
  #lda-static-nav .lda-brand,
  .lda-script-logo {
    font-size: 35px !important;
  }

  /* Closing CTA: restore the natural word space hidden by the mobile-only line break. */
  .lda-cta-script-word {
    margin-left: 0.16em !important;
  }

  /* Desktop interactions: match mobile by removing focus halos and keeping only the normal thin field border. */
  button,
  a,
  input,
  select,
  textarea,
  summary,
  [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
  }
  button:active,
  button:focus,
  a:active,
  a:focus,
  summary:active,
  summary:focus,
  [role="button"]:active,
  [role="button"]:focus {
    box-shadow: none !important;
    outline: none !important;
  }
  input:focus,
  select:focus,
  textarea:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #E4DCCB !important;
  }
}

@media (max-width: 859px) {
  #lda-static-nav .lda-brand,
  .lda-script-logo {
    font-size: 30px !important;
  }

  .lda-mobile-break {
    display: initial;
  }

  /* Keep mobile navigation visually stable: brand left, menu right. */
  #lda-static-nav .lda-mobile {
    margin-left: auto !important;
  }
  #lda-static-nav summary {
    align-items: flex-end !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    outline: none;
  }
  #lda-static-nav summary:active,
  #lda-static-nav summary:focus {
    background: transparent !important;
  }
  #lda-static-nav summary:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
  }
  #lda-static-nav .lda-burger {
    width: 20px !important;
    height: 1.25px !important;
    border-radius: 0 !important;
  }
  #lda-static-nav .lda-b1,
  #lda-static-nav .lda-b2,
  #lda-static-nav .lda-b3 {
    width: 20px !important;
  }
  #lda-static-nav .lda-mobile-panel,
  #lda-static-nav .lda-mobile-panel a {
    text-align: left !important;
  }

  /* When the menu opens, the entire nav becomes white instead of showing hero video through it. */
  #lda-static-nav:has(.lda-mobile[open]) {
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(43,36,32,.06) !important;
  }
  #lda-static-nav:has(.lda-mobile[open]) .lda-brand {
    color: #000000 !important;
  }
  #lda-static-nav:has(.lda-mobile[open]) .lda-burger {
    background: #000000 !important;
  }

  /* Mobile interactions: remove tap/focus halos and keep the normal thin field border. */
  button,
  a,
  input,
  select,
  textarea,
  summary,
  [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
  }
  button:active,
  button:focus,
  a:active,
  a:focus,
  summary:active,
  summary:focus,
  [role="button"]:active,
  [role="button"]:focus {
    box-shadow: none !important;
    outline: none !important;
  }
  input:focus,
  select:focus,
  textarea:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #E4DCCB !important;
  }

  /* Mobile storefront / learning rhythm refinement. */
  .lda-mobile-category-list {
    gap: 0 !important;
  }
  .lda-mobile-category-list .lda-filter-control {
    min-height: 32px !important;
  }
  .lda-mobile-category-list .lda-subcategory-list .lda-filter-control {
    min-height: 24px !important;
  }
  .lda-load-more-wrap {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transform: translateY(10px);
  }
  .lda-load-more-wrap .lda-load-more {
    min-height: 40px !important;
  }
  /* Tienda needs slightly more real air than the generic wrapper because its product grid ends tighter. */
  .lda-tienda-load-more {
    height: 96px !important;
    min-height: 96px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    transform: none !important;
  }
  /* Aprende: match Tienda exactly for the same visual air around “Ver más”. */
  .lda-aprende-load-more {
    height: 96px !important;
    min-height: 96px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    transform: none !important;
  }

  .lda-card-grid > .lda-load-more-wrap {
    margin-top: -28px !important;
    transform: none;
  }
  .lda-mobile-faq-card {
    padding: 16px 20px !important;
  }
  .lda-mobile-faq-card > button {
    min-height: 44px !important;
  }

  /* Home Aprende spotlight: preserve approved layout, with slightly more air around the question. */
  html body div[style*="background-color: #0CC0DF"][style*="text-align: center"] {
    padding-top: 31px !important;
    padding-bottom: 138px !important;
  }
  html body div[style*="background-color: #0CC0DF"][style*="text-align: center"] + div {
    margin-top: -123px !important;
  }

  /* Give the Camelia descender in “ayudarte” room before the first card. */
  html body .lda-eyebrow-servicios + h2 {
    margin-bottom: 22px !important;
  }

  /* Footer script balances the BONITAS line without overpowering it. */
  html body .lda-footer-script,
  html body footer b[style*="Camelia Beauty"] {
    font-size: 50px !important;
    line-height: 0.9 !important;
    top: 0 !important;
  }

  :root {
    --lda-page-gutter: var(--lda-page-gutter-mobile);
  }
}

/* Aprende essentials: interaction must never recolor the neutral field border. */
html body .lda-essential-field,
html body .lda-essential-field:hover,
html body .lda-essential-field:active,
html body .lda-essential-field:focus,
html body .lda-essential-field:focus-visible {
  border-color: #E4DDCC !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Contact form: use the same neutral beige border as Aprende and keep it unchanged on interaction. */
html body .lda-contact-page input:not([type="submit"]):not([type="button"]),
html body .lda-contact-page textarea,
html body .lda-contact-page select,
html body .lda-contact-page input:not([type="submit"]):not([type="button"]):hover,
html body .lda-contact-page textarea:hover,
html body .lda-contact-page select:hover,
html body .lda-contact-page input:not([type="submit"]):not([type="button"]):active,
html body .lda-contact-page textarea:active,
html body .lda-contact-page select:active,
html body .lda-contact-page input:not([type="submit"]):not([type="button"]):focus,
html body .lda-contact-page textarea:focus,
html body .lda-contact-page select:focus,
html body .lda-contact-page input:not([type="submit"]):not([type="button"]):focus-visible,
html body .lda-contact-page textarea:focus-visible,
html body .lda-contact-page select:focus-visible {
  border: 1px solid #E4DDCC !important;
  border-color: #E4DDCC !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Canonical centered content container for future page updates. */
.lda-container {
  width: 100%;
  max-width: var(--lda-container-max);
  margin-inline: auto;
  padding-inline: var(--lda-page-gutter);
  box-sizing: border-box;
}