/* Base component layer. Deliberately conservative so it never disrupts
   Elementor-built pages: only box-sizing, body defaults, and explicit classes. */

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

body {
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Section heading + handwritten Caveat label */
.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  text-align: center;
  margin-bottom: 30px;
}
.label {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 24px;
  color: var(--c-purple);
  transform: rotate(-2deg);
  display: inline-block;
}

/* Shared pill buttons (Sticker Splash press-down) — the design-system default.
   Reusable on plain <a>/<button> and mirrored onto Elementor buttons below. */
.btn,
.primary,
.secondary {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  padding: 16px 32px;
  border: var(--border-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.btn:hover,
.primary:hover,
.secondary:hover {
  transform: translateY(2px);
  box-shadow: var(--shadow-hard-sm);
}
.primary {
  background: var(--c-pink);
  color: #fff;
}
.primary:hover {

  color: #fff;
}
.secondary {
  background: var(--c-yellow);
  color: var(--c-ink);
}

/* Native Elementor Button widget → design-system sticker button by default.
   Shape/font/3d + press come from here; background/text colour and size stay
   editable in the Elementor panel (element-scoped rules override these). */
.elementor-button {
  font-family: var(--font-head);
  font-weight: 700;
  background-color: var(--c-pink);
  color: #fff;
  border: var(--border-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.elementor-button:hover,
.elementor-button:focus {
  color: #fff;
  transform: translateY(2px);
  box-shadow: var(--shadow-hard-sm);
}

/* Honeypot: kept in the DOM for bots, hidden from humans and AT. */
.limon-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Standalone form card (Trabaja con nosotros, and any lead form on a page) */
.limon-form-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: var(--border-ink);
  border-radius: 24px;
  box-shadow: 0 10px 0 rgba(42, 19, 56, 0.12);
  padding: 30px;
  text-align: left;
}
.limon-form-card .form-submit {
  width: 100%;
}

/* ============================================================
   Neon buttons — used by the hero widget, plain anchors, and native
   Elementor Button widgets (add class "btn-neon" in the button's "CSS
   Classes" field). The `.elementor-button.btn-neon` variant (0,2,0)
   beats Elementor's own `.elementor-button` base without !important.
   ============================================================ */
.btn-neon,
.elementor-button.btn-neon {
  color: #fff;
  background: var(--c-neon-pink);
  border: 2px solid #ff8ccb;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  box-shadow:
    0 0 30px #ff2ea688,
    0 6px 0 #a50e63;
  text-decoration: none;
  display: inline-block;
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.btn-neon-yellow,
.elementor-button.btn-neon-yellow {
  color: var(--c-night-2);
  background: var(--c-neon-yellow);
  border: 2px solid #fff2a0;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  box-shadow:
    0 0 30px #ffe23477,
    0 6px 0 #b89a00;
  text-decoration: none;
  display: inline-block;
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
/* 3d press on hover: nudge down 2px and shorten the bottom "border" 6px -> 4px */
.btn-neon:hover,
.elementor-button.btn-neon:hover {
  transform: translateY(2px);
  box-shadow:
    0 0 34px #ff2ea6aa,
    0 4px 0 #a50e63;
    color: #fff;
}
.btn-neon-yellow:hover,
.elementor-button.btn-neon-yellow:hover {
  transform: translateY(2px);
  box-shadow:
    0 0 34px #ffe234aa,
    0 4px 0 #b89a00;
}

/* ============================================================
   Content bands — one source of truth (these classes), applied to a
   full-width Elementor container OR a PHP template section. The seeder
   gives the Elementor container content_width:full + padding:0 so only
   these classes theme it. Typography rules also cover native Heading /
   Text widgets dropped inside the band.
   ============================================================ */
.limon-band--cream {
  background: var(--c-cream);
}
.limon-band--white {
  background: #fff;
  border-top: var(--border-ink);
  border-bottom: var(--border-ink);
}
.limon-band--lilac {
  background: #f7eefc;
  border-top: var(--border-ink);
  border-bottom: var(--border-ink);
}
.limon-band--yellow {
  background: var(--c-yellow);
  border-top: var(--border-ink);
  text-align: center;
}
.limon-band--purple {
  position: relative;
  background: var(--c-purple);
  color: #fff;
  border-top: var(--border-ink);
}
.limon-band--purple::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ffffff14 2.5px, transparent 2.5px);
  background-size: 30px 30px;
  pointer-events: none;
}
.limon-band--purple > * {
  position: relative;
  z-index: 1;
}
.limon-band--party {
  position: relative;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  color: #fff;
  border-top: var(--border-ink);
  border-bottom: var(--border-ink);
}
.limon-band--party::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ffffff1a 2.5px, transparent 2.5px);
  background-size: 30px 30px;
  pointer-events: none;
}
.limon-band--party > * {
  position: relative;
  z-index: 1;
}
.limon-band--party h2,
.limon-band--party .elementor-heading-title {
  color: #fff;
}
/* Elementor's kit forces every .elementor-heading-title to the global primary
   colour; re-inherit each section's own colour with +1 specificity so a native
   Heading takes the band's context (white on purple, ink on light bands). */
.limon-page-hero .elementor-widget-heading .elementor-heading-title,
.limon-band .elementor-widget-heading .elementor-heading-title {
  color: inherit;
}
.limon-band--purple h2,
.limon-band--purple .elementor-heading-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
}
.limon-band--purple p {
  font-size: 18px;
  font-weight: 600;
  color: #ebd9f5;
}
.limon-band--yellow h2,
.limon-band--yellow .elementor-heading-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
}
.limon-band--yellow p {
  font-size: 18px;
  font-weight: 700;
  color: #4a3a55;
}

/* Birthday band — one HTML block inside the purple band */
.limon-bday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  align-items: center;
}
.limon-bday-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.limon-tile {
  background: #ffffff1a;
  border: 2px solid #ffffff33;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  color: #fff;
}

/* ============================================================
   Page-hero header — coloured banner atop hub / SEO / contacto pages
   and the parks archive. One source of truth (these classes).
   ============================================================ */
/* padding: on the PHP archive <section> it comes from CSS; on Elementor
   containers (a <div class="e-con">) it comes from the container settings,
   so scope the CSS padding to section.* to avoid clobbering Elementor. */
.limon-page-hero {
  text-align: left;
  color: #fff;
}
section.limon-page-hero {
  padding: 60px 0;
}
.limon-page-hero--purple {
  background-color: var(--c-purple);
  background-image: radial-gradient(#ffffff20 2.5px, transparent 2.5px);
  background-size: 30px 30px;
  border-bottom: var(--border-ink);
}
.limon-page-hero--green {
  background-color: var(--c-green);
  background-image: radial-gradient(#ffffff20 2.5px, transparent 2.5px);
  background-size: 30px 30px;
  border-bottom: var(--border-ink);
}
.limon-page-hero .label,
.limon-page-hero h1,
.limon-page-hero .elementor-heading-title,
.limon-page-hero p {
  color: #fff;
}
.limon-page-hero .label {
  color: var(--c-neon-yellow);
  opacity: 1;
  transform: none;
  font-size: 28px;
}
.limon-page-hero h1,
.limon-page-hero .elementor-heading-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.98;
  margin: 6px 0 10px;
}
.limon-page-hero p {
  font-size: 18px;
  font-weight: 600;
  opacity: 0.95;
  max-width: 600px;
}
.limon-page-hero .breadcrumb {
  font-size: 14px;
  font-weight: 700;
  color: #ebd9f5;
  margin-bottom: 10px;
}
.limon-page-hero .breadcrumb a {
  color: #fff;
  text-decoration: none;
}

/* Vertical padding for a stacked content section on PHP templates (archive) */
section.limon-section {
  padding: 50px 0;
}