/* =========================================================
   RESET � Override Bootstrap/Drupal classes on front page
   ========================================================= */
body.path-frontpage {
  display: block !important;
  flex-direction: unset !important;
  height: auto !important;
  overflow-x: hidden;
  font-family: "Inter", system-ui, sans-serif;
  color: #1A1A1A;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
body.path-frontpage .dialog-off-canvas-main-canvas {
  display: block !important;
  flex-direction: unset !important;
  height: auto !important;
}
body.path-frontpage .skip-link { display: none !important; }
body.path-frontpage .layoscamp-popup-overlay,
body.path-frontpage .layoscamp-popup { display: none !important; }
body.path-frontpage .layoscamp-floating-cta { display: none !important; }
body.path-frontpage .chatbot-container { display: none !important; }
html.h-100 { height: auto !important; }
body.path-frontpage *, body.path-frontpage *::before, body.path-frontpage *::after { box-sizing: border-box; }
body.path-frontpage a { color: inherit; text-decoration: none; }
body.path-frontpage img { display: block; max-width: 100%; }
body.path-frontpage ul { list-style: none; margin: 0; padding: 0; }

    /* ============================================================
       DESIGN TOKENS � LayosCamp v2
    ============================================================ */
    :root {
      --green-dark:   #2D5016;
      --green:        #3D6B1E;
      --green-brand:  #8BA841;
      --green-light:  #A4C256;
      --green-bg:     #F0F4E8;
      --green-bg2:    #E8EFD8;
      --gold:         #C8A84E;
      --gold-light:   #E8D48A;
      --gold-pale:    #FBF5E6;
      --text:         #1A1A1A;
      --text-sec:     #555555;
      --text-light:   #888888;
      --border:       #E8E8E8;
      --white:        #FFFFFF;
      --red-urgency:  #C0392B;
      --footer-bg:    #1A1A1A;
      --footer-text:  #AAAAAA;

      --radius-sm:  6px;
      --radius-md:  12px;
      --radius-lg:  20px;
      --radius-xl:  32px;

      --shadow-sm:  0 2px 8px rgba(45, 80, 22, 0.08);
      --shadow-md:  0 4px 20px rgba(45, 80, 22, 0.12);
      --shadow-lg:  0 8px 40px rgba(45, 80, 22, 0.16);

      --font-body:    'Inter', system-ui, sans-serif;
      --font-display: 'Cormorant Garamond', Georgia, serif;

      --transition: 0.2s ease;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--white);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    ul { list-style: none; }

    /* ============================================================
       UTILITIES
    ============================================================ */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .container--narrow {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section { padding: 72px 0; }
    .section--sm { padding: 40px 0; }
    .section--lg { padding: 96px 0; }

    .label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--green);
    }
    .label::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--gold);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 4vw, 2.75rem);
      font-weight: 700;
      color: var(--green-dark);
      line-height: 1.2;
    }

    .section-subtitle {
      font-size: 1.0625rem;
      color: var(--text-sec);
      line-height: 1.7;
      max-width: 600px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all var(--transition);
      text-decoration: none;
      white-space: nowrap;
    }
    .btn--gold {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
      color: var(--green-dark);
      box-shadow: 0 4px 16px rgba(200, 168, 78, 0.35);
    }
    .btn--gold:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(200, 168, 78, 0.45);
    }
    .btn--green {
      background: var(--green-dark);
      color: var(--white);
    }
    .btn--green:hover {
      background: var(--green);
      transform: translateY(-2px);
    }
    .btn--outline {
      background: transparent;
      color: var(--white);
      border: 2px solid rgba(255,255,255,0.6);
    }
    .btn--outline:hover {
      background: rgba(255,255,255,0.1);
      border-color: var(--white);
    }
    .btn--ghost {
      background: transparent;
      color: var(--green-dark);
      border: 2px solid var(--green-brand);
    }
    .btn--ghost:hover {
      background: var(--green-bg);
    }

    /* ============================================================
       HEADER / NAV
    ============================================================ */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(139, 168, 65, 0.15);
      box-shadow: var(--shadow-sm);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      gap: 24px;
    }

    /* Logo */
    .header-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .header-logo__mark {
      width: 40px;
      height: 40px;
      background: var(--green-dark);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .header-logo__mark svg { width: 24px; height: 24px; }
    .header-logo__text {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }
    .header-logo__name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--green-dark);
    }
    .header-logo__tagline {
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-top: 1px;
    }

    /* Main nav */
    .header-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      justify-content: center;
    }
    .nav-link {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-sec);
      padding: 8px 14px;
      border-radius: var(--radius-sm);
      transition: all var(--transition);
    }
    .nav-link:hover {
      color: var(--green-dark);
      background: var(--green-bg);
    }
    .nav-link--active {
      color: var(--green-dark);
      font-weight: 600;
    }

    /* Sedes dropdown */
    .nav-dropdown {
      position: relative;
    }
    .nav-dropdown__trigger {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-sec);
      padding: 8px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all var(--transition);
      border: none;
      background: none;
      font-family: var(--font-body);
    }
    .nav-dropdown__trigger:hover {
      color: var(--green-dark);
      background: var(--green-bg);
    }
    .nav-dropdown__trigger .material-icons {
      font-size: 16px;
      transition: transform var(--transition);
    }
    .nav-dropdown:hover .nav-dropdown__trigger .material-icons {
      transform: rotate(180deg);
    }
    .nav-dropdown__menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      padding: 8px;
      min-width: 220px;
      opacity: 0;
      visibility: hidden;
      transition: all var(--transition);
      z-index: 100;
    }
    .nav-dropdown:hover .nav-dropdown__menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown__item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      color: var(--text);
      transition: background var(--transition);
    }
    .nav-dropdown__item:hover {
      background: var(--green-bg);
      color: var(--green-dark);
    }
    .nav-dropdown__item .material-icons-outlined {
      font-size: 18px;
      color: var(--green-brand);
    }

    /* Header actions */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .header-lang {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-sec);
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      transition: all var(--transition);
    }
    .header-lang:hover { background: var(--green-bg); }

    /* Mobile menu toggle */
    .header-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      width: 36px;
      height: 36px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      background: none;
      border-radius: var(--radius-sm);
      padding: 6px;
    }
    .header-hamburger span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--green-dark);
      border-radius: 2px;
      transition: all var(--transition);
    }

    /* ============================================================
       HERO � VIDEO/IMAGE
    ============================================================ */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      background: var(--green-dark);
    }
    .hero__bg {
      position: absolute;
      inset: 0;
      background-image: url('/sites/default/files/imagenes-instalaciones/portada-de-atras_37081227544_o.JPG');
      background-size: cover;
      background-position: center;
      transform: scale(1.05);
      transition: transform 8s ease;
    }
    .hero:hover .hero__bg { transform: scale(1); }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(45, 80, 22, 0.15) 0%,
        rgba(45, 80, 22, 0.30) 40%,
        rgba(45, 80, 22, 0.75) 100%
      );
    }

    .hero__content {
      position: relative;
      z-index: 2;
      padding: 0 24px 80px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }

    .hero__play {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.3);
      color: var(--white);
      padding: 10px 20px;
      border-radius: 50px;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 24px;
      transition: all var(--transition);
      cursor: pointer;
    }
    .hero__play:hover { background: rgba(255,255,255,0.25); }
    .hero__play-icon {
      width: 32px;
      height: 32px;
      background: var(--gold);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hero__play-icon .material-icons { font-size: 18px; color: var(--green-dark); }

    .hero__title {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 700;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 12px;
    }
    .hero__title em {
      font-style: italic;
      color: var(--gold-light);
    }

    .hero__subtitle {
      font-size: clamp(1rem, 2vw, 1.1875rem);
      color: rgba(255,255,255,0.85);
      margin-bottom: 36px;
      font-weight: 400;
      line-height: 1.5;
    }

    .hero__cta-group {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .hero__scroll {
      position: absolute;
      bottom: 28px;
      right: 32px;
      width: 44px;
      height: 44px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: bounce 2s ease-in-out infinite;
      cursor: pointer;
    }
    .hero__scroll svg { opacity: 0.8; }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(6px); }
    }

    /* ============================================================
       TRUST BAR
    ============================================================ */
    .trust-bar {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }
    .trust-bar__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      flex-wrap: wrap;
    }
    .trust-bar__item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px 24px;
      border-right: 1px solid var(--border);
      white-space: nowrap;
    }
    .trust-bar__item:last-child { border-right: none; }
    .trust-bar__icon {
      font-size: 16px !important;
      color: var(--green-brand);
    }
    .trust-bar__text {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--green-dark);
    }

    /* ============================================================
       CAMPAMENTOS SECTION (intro + CTA)
    ============================================================ */
    .camps-intro {
      background: var(--white);
    }
    .camps-intro__inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 80px 24px;
      text-align: center;
    }
    .camps-intro__body {
      font-size: 1.0625rem;
      color: var(--text-sec);
      line-height: 1.75;
      margin: 16px 0 12px;
    }

    /* ============================================================
       CAMP FILTERS
    ============================================================ */
    .camp-catalog {
      background: var(--green-bg);
      padding: 0 0 80px;
    }

    .camp-filter {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px;
      margin: 0 24px;
      box-shadow: var(--shadow-md);
      position: relative;
      top: -32px;
      max-width: 1152px;
      margin-left: auto;
      margin-right: auto;
    }

    .camp-filter__title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--green-dark);
      margin-bottom: 24px;
    }

    .camp-filter__grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 20px;
      align-items: start;
    }

    .camp-filter__group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .camp-filter__label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-sec);
    }

    /* Age stepper */
    .age-stepper {
      display: flex;
      align-items: center;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      height: 44px;
    }
    .age-stepper__btn {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--green-bg);
      border: none;
      cursor: pointer;
      transition: background var(--transition);
      flex-shrink: 0;
    }
    .age-stepper__btn:hover { background: var(--green-bg2); }
    .age-stepper__btn .material-icons { font-size: 18px; color: var(--green-dark); }
    .age-stepper__input {
      flex: 1;
      border: none;
      text-align: center;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600;
      color: var(--green-dark);
      background: transparent;
      width: 48px;
      outline: none;
    }
    .age-stepper__input::placeholder { color: var(--text-light); font-weight: 400; }

    /* Filter chips */
    .filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .filter-chip {
      padding: 6px 12px;
      border-radius: 50px;
      font-size: 0.8125rem;
      font-weight: 500;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--text-sec);
      cursor: pointer;
      transition: all var(--transition);
      font-family: var(--font-body);
      white-space: nowrap;
    }
    .filter-chip:hover {
      border-color: var(--green-brand);
      color: var(--green-dark);
      background: var(--green-bg);
    }
    .filter-chip.is-active {
      background: var(--green-dark);
      color: var(--white);
      border-color: var(--green-dark);
    }

    /* Location tags */
    .loc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .loc-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border-radius: 50px;
      font-size: 0.8125rem;
      font-weight: 500;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--text-sec);
      cursor: pointer;
      transition: all var(--transition);
      font-family: var(--font-body);
    }
    .loc-tag:hover {
      border-color: var(--green-brand);
      color: var(--green-dark);
      background: var(--green-bg);
    }
    .loc-tag.is-active {
      background: var(--green-dark);
      color: var(--white);
      border-color: var(--green-dark);
    }
    .loc-tag .material-icons-outlined { font-size: 14px; }

    .filter-actions {
      display: flex;
      align-items: flex-end;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      margin-top: 8px;
      grid-column: 1 / -1;
    }
    .clear-filters {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-sec);
      cursor: pointer;
      background: none;
      border: none;
      font-family: var(--font-body);
      padding: 8px 0;
      transition: color var(--transition);
    }
    .clear-filters:hover { color: var(--green-dark); }
    .clear-filters .material-icons { font-size: 16px; }

    /* Results counter */
    .results-counter {
      max-width: 1200px;
      margin: 0 auto;
      padding: 16px 24px;
      font-size: 0.875rem;
      color: var(--text-sec);
    }
    .results-counter strong { color: var(--green-dark); }

    /* ============================================================
       CAMP CARDS GRID
    ============================================================ */
    .camp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 24px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .camp-card {
      background: var(--white);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    .camp-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }

    .camp-card__image {
      position: relative;
      height: 220px;
      background-size: cover;
      background-position: center;
      background-color: var(--green-bg2);
    }

    .camp-card__badge {
      position: absolute;
      top: 12px;
      left: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 600;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(4px);
    }
    .camp-card__badge .material-icons { font-size: 13px; }
    .camp-card__badge--available { color: #2E7D32; }
    .camp-card__badge--available .material-icons { color: #2E7D32; }
    .camp-card__badge--full { color: var(--text-sec); }
    .camp-card__badge--waitlist { color: #E65100; }

    .camp-card__price {
      position: absolute;
      bottom: 12px;
      right: 12px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
      padding: 6px 14px;
      border-radius: 50px;
      text-align: center;
    }
    .camp-card__price-label {
      display: block;
      font-size: 0.625rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--green-dark);
      opacity: 0.75;
    }
    .camp-card__price-value {
      display: block;
      font-size: 1rem;
      font-weight: 700;
      color: var(--green-dark);
      line-height: 1.2;
    }

    .camp-card__intl-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 600;
      background: var(--green-dark);
      color: var(--white);
    }
    .camp-card__intl-badge .material-icons { font-size: 13px; }

    .camp-card__body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .camp-card__location {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--green-brand);
    }
    .camp-card__location .material-icons { font-size: 14px; }

    .camp-card__title {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--green-dark);
      line-height: 1.3;
    }
    .camp-card__title a {
      transition: color var(--transition);
    }
    .camp-card__title a:hover { color: var(--green); }

    .camp-card__meta {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.8125rem;
      color: var(--text-sec);
    }
    .camp-card__meta .material-icons { font-size: 15px; color: var(--green-brand); }

    .camp-card__desc {
      font-size: 0.875rem;
      color: var(--text-sec);
      line-height: 1.6;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .camp-card__divider {
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    .camp-card__cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: var(--green-bg);
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--green-dark);
      transition: all var(--transition);
      margin-top: 4px;
    }
    .camp-card__cta:hover {
      background: var(--green-dark);
      color: var(--white);
    }
    .camp-card__cta .material-icons { font-size: 18px; }

    .camp-card__cta--intl {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
      color: var(--green-dark);
    }
    .camp-card__cta--intl:hover {
      background: var(--gold);
      transform: none;
    }

    /* Wizard CTA */
    .wizard-cta {
      max-width: 1200px;
      margin: 32px auto 0;
      padding: 0 24px;
    }
    .wizard-cta__inner {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .wizard-cta__icon {
      font-size: 32px !important;
      color: var(--gold);
    }
    .wizard-cta__text strong {
      display: block;
      font-size: 0.9375rem;
      color: var(--green-dark);
    }
    .wizard-cta__text p {
      font-size: 0.8125rem;
      color: var(--text-sec);
      margin-top: 2px;
    }
    .wizard-cta__btn {
      margin-left: auto;
      flex-shrink: 0;
      padding: 10px 20px;
      border-radius: var(--radius-md);
      background: var(--green-dark);
      color: var(--white);
      font-size: 0.875rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      transition: all var(--transition);
    }
    .wizard-cta__btn:hover { background: var(--green); }

    /* ============================================================
       CARTA A LOS PADRES
    ============================================================ */
    .letter-section {
      background: var(--gold-pale);
      border-top: 1px solid rgba(200, 168, 78, 0.2);
      border-bottom: 1px solid rgba(200, 168, 78, 0.2);
    }
    .letter-inner {
      max-width: 760px;
      margin: 0 auto;
      padding: 64px 24px;
      display: flex;
      gap: 32px;
    }
    .letter-avatar {
      flex-shrink: 0;
    }
    .letter-avatar__img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--gold);
    }
    .letter-avatar__initials {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--green-dark), var(--green));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--white);
      border: 3px solid var(--gold);
    }
    .letter-content {}
    .letter-author {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--green-dark);
    }
    .letter-role {
      font-size: 0.8125rem;
      color: var(--gold);
      font-weight: 600;
      margin-bottom: 16px;
    }
    .letter-body {
      font-size: 0.9375rem;
      color: var(--text-sec);
      line-height: 1.75;
      font-style: italic;
    }
    .letter-body p + p { margin-top: 12px; }

    /* ============================================================
       NOTICIAS / DESTACADOS
    ============================================================ */
    .news-section {
      position: relative;
      background-image: url('/sites/default/files/imagenes-instalaciones/gredos.JPG');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    .news-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(45, 80, 22, 0.92), rgba(61, 107, 30, 0.88));
    }
    .news-inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 24px;
    }
    .news-heading {
      text-align: center;
      margin-bottom: 48px;
    }
    .news-heading h2 {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
    }
    .news-heading p {
      color: rgba(255,255,255,0.75);
      font-size: 1.0625rem;
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }

    .news-card {
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-md);
      padding: 24px;
      transition: all var(--transition);
    }
    .news-card:hover {
      background: rgba(255,255,255,0.14);
      transform: translateY(-3px);
    }
    .news-card__tag {
      display: inline-block;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 10px;
    }
    .news-card__title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      color: var(--white);
      line-height: 1.35;
      margin-bottom: 8px;
    }
    .news-card__excerpt {
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.7);
      line-height: 1.6;
    }
    .news-card__link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 16px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--gold-light);
      transition: gap var(--transition);
    }
    .news-card__link:hover { gap: 8px; }
    .news-card__link .material-icons { font-size: 16px; }

    /* ============================================================
       VALUES / WHY US
    ============================================================ */
    .values-section {
      background: var(--white);
    }
    .values-header {
      text-align: center;
      margin-bottom: 56px;
    }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 24px;
    }
    .value-card {
      padding: 28px 24px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      transition: all var(--transition);
      position: relative;
      overflow: hidden;
    }
    .value-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      opacity: 0;
      transition: opacity var(--transition);
    }
    .value-card:hover {
      border-color: transparent;
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }
    .value-card:hover::before { opacity: 1; }

    .value-icon {
      width: 52px;
      height: 52px;
      background: var(--green-bg);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .value-icon .material-icons-outlined { font-size: 26px; color: var(--green-brand); }
    .value-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--green-dark);
      margin-bottom: 8px;
    }
    .value-desc {
      font-size: 0.875rem;
      color: var(--text-sec);
      line-height: 1.6;
    }

    /* ============================================================
       TESTIMONIOS
    ============================================================ */
    .testimonials-section {
      background: var(--green-bg);
    }
    .testimonials-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }
    .testimonial-card {
      background: var(--white);
      border-radius: var(--radius-md);
      padding: 28px;
      box-shadow: var(--shadow-sm);
    }
    .testimonial-stars {
      display: flex;
      gap: 2px;
      margin-bottom: 14px;
    }
    .testimonial-stars span {
      font-size: 16px;
      color: var(--gold);
    }
    .testimonial-text {
      font-size: 0.9375rem;
      color: var(--text-sec);
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 20px;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .testimonial-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--green-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--white);
      font-size: 0.875rem;
    }
    .testimonial-name {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--green-dark);
    }
    .testimonial-meta {
      font-size: 0.75rem;
      color: var(--text-light);
    }

    /* ============================================================
       SEDES MAP SECTION
    ============================================================ */
    .sedes-section {
      background: var(--white);
    }
    .sedes-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .sedes-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
    .sede-card {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 3/4;
      cursor: pointer;
    }
    .sede-card__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.4s ease;
    }
    .sede-card:hover .sede-card__bg { transform: scale(1.08); }
    .sede-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(45, 80, 22, 0.85) 0%, transparent 50%);
    }
    .sede-card__content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px 16px;
    }
    .sede-card__name {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--white);
    }
    .sede-card__tag {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--gold-light);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* ============================================================
       INSCRIPCION CTA BANNER
    ============================================================ */
    .cta-banner {
      background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
      position: relative;
      overflow: hidden;
    }
    .cta-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(200, 168, 78, 0.15), transparent 70%);
      border-radius: 50%;
    }
    .cta-banner__inner {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: 0 auto;
      padding: 80px 24px;
      text-align: center;
    }
    .cta-banner__eyebrow {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 12px;
    }
    .cta-banner__title {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 4vw, 2.75rem);
      font-weight: 700;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .cta-banner__text {
      font-size: 1.0625rem;
      color: rgba(255,255,255,0.8);
      margin-bottom: 36px;
      line-height: 1.6;
    }
    .cta-banner__ctas {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .cta-banner__urgency {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 20px;
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.65);
    }
    .cta-banner__urgency strong {
      color: #FF8A80;
      font-weight: 600;
    }
    .cta-banner__urgency .material-icons { font-size: 14px; color: #FF8A80; }

    /* ============================================================
       FOOTER
    ============================================================ */
    .site-footer {
      background: var(--footer-bg);
      color: var(--footer-text);
    }

    .footer-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 64px 24px 48px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
      gap: 40px;
    }

    /* Footer brand */
    .footer-brand__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }
    .footer-brand__mark {
      width: 36px;
      height: 36px;
      background: var(--green-dark);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .footer-brand__mark svg { width: 20px; height: 20px; }
    .footer-brand__name {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--white);
    }
    .footer-brand__desc {
      font-size: 0.875rem;
      color: var(--footer-text);
      line-height: 1.7;
      margin-bottom: 20px;
    }
    .footer-social {
      display: flex;
      gap: 10px;
    }
    .footer-social__link {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
      color: var(--footer-text);
    }
    .footer-social__link:hover {
      background: var(--green-dark);
      border-color: var(--green);
      color: var(--white);
    }
    .footer-social__link svg { width: 18px; height: 18px; }

    /* Footer columns */
    .footer-col__heading {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 16px;
    }
    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-links a {
      font-size: 0.875rem;
      color: var(--footer-text);
      transition: color var(--transition);
    }
    .footer-links a:hover { color: var(--white); }

    .footer-address {
      font-size: 0.875rem;
      color: var(--footer-text);
      font-style: normal;
      line-height: 1.6;
      margin-bottom: 14px;
    }
    .footer-contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.875rem;
      color: var(--footer-text);
      margin-bottom: 8px;
      transition: color var(--transition);
    }
    .footer-contact-item:hover { color: var(--white); }
    .footer-contact-item .material-icons-outlined { font-size: 16px; color: var(--green-brand); }

    /* Footer trust */
    .footer-trust {
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 16px 24px;
    }
    .footer-trust__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .footer-trust-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.5);
    }
    .footer-trust-badge .material-icons-outlined { font-size: 16px; color: var(--green-brand); }

    /* Footer bottom */
    .footer-bottom {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .footer-copyright {
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.35);
    }
    .footer-legal {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .footer-legal a {
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.35);
      transition: color var(--transition);
    }
    .footer-legal a:hover { color: rgba(255,255,255,0.7); }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1024px) {
      .camp-filter__grid { grid-template-columns: 1fr 1fr; }
      .sedes-grid { grid-template-columns: repeat(3, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      .header-nav { display: none; }
      .header-hamburger { display: flex; }
      .header-actions .header-lang { display: none; }

      .hero__title { font-size: 2.25rem; }
      .hero__content { padding-bottom: 60px; }

      .trust-bar__item { padding: 14px 12px; }
      .trust-bar__text { font-size: 0.75rem; }

      .camp-filter__grid { grid-template-columns: 1fr; }
      .camp-filter { margin: 0 16px; padding: 24px; }

      .camp-grid { grid-template-columns: 1fr; padding: 0 16px; }

      .letter-inner { flex-direction: column; gap: 20px; }

      .sedes-grid { grid-template-columns: repeat(2, 1fr); }

      .values-grid { grid-template-columns: 1fr 1fr; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: 1fr; }

      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; text-align: center; }

      .wizard-cta__inner { flex-wrap: wrap; }
      .wizard-cta__btn { width: 100%; justify-content: center; }
    }

    @media (max-width: 480px) {
      .hero__cta-group { flex-direction: column; }
      .hero__cta-group .btn { width: 100%; justify-content: center; }
      .trust-bar__inner { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
      .trust-bar__item:last-child { border-right: 1px solid var(--border); padding-right: 24px; }
      .values-grid { grid-template-columns: 1fr; }
      .sedes-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ============================================================
       INTERACTIVE FILTER JS STATES
    ============================================================ */
    .camp-card[data-hidden="true"] { display: none; }

/* ============================================================
   CAMP CARD V2 AIRBNB OVERRIDES
   Wins over .E-camp-card * rules from campamentos-mobile.css
   Applied: 2026-04-20
   ============================================================ */

/* Card container */
.camp-card.E-camp-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.08) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.camp-card.E-camp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(45, 80, 22, 0.15) !important;
  border-color: transparent !important;
}

/* Image */
.camp-card .camp-card__image {
  position: relative !important;
  height: 220px !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #F1F5E8 !important;
}

/* Badge � pill Airbnb style top-left */
.camp-card .camp-card__badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(4px) !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  color: #2E7D32 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.camp-card .camp-card__badge .material-icons {
  font-size: 13px !important;
  color: inherit !important;
}
.camp-card .camp-card__badge--full {
  color: #6b7280 !important;
  background: rgba(255, 255, 255, 0.95) !important;
}
.camp-card .camp-card__badge--waitlist {
  color: #E65100 !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* International badge � dark green pill top-right */
.camp-card .camp-card__intl-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: #2D5016 !important;
  color: #FFFFFF !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.camp-card .camp-card__intl-badge .material-icons {
  font-size: 13px !important;
  color: inherit !important;
}

/* Price � gold gradient pill bottom-right */
.camp-card .camp-card__price {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  background: linear-gradient(135deg, #C8A84E 0%, #E8D48A 100%) !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  text-align: center !important;
}
.camp-card .camp-card__price-label {
  display: block !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #2D5016 !important;
  opacity: 0.75 !important;
}
.camp-card .camp-card__price-value {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #2D5016 !important;
  line-height: 1.2 !important;
}

/* Body */
.camp-card .camp-card__body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
  background: #FFFFFF !important;
}

/* Location � uppercase */
.camp-card .camp-card__location {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #8BA841 !important;
}
.camp-card .camp-card__location .material-icons {
  font-size: 14px !important;
  color: inherit !important;
}

/* Title */
.camp-card .camp-card__title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #2D5016 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.camp-card .camp-card__title a {
  color: #2D5016 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.camp-card .camp-card__title a:hover {
  color: #8BA841 !important;
}

/* Meta (.camp-card__meta used for age + dates) */
.camp-card .camp-card__meta {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.8125rem !important;
  color: #6b7280 !important;
}
.camp-card .camp-card__meta .material-icons {
  font-size: 15px !important;
  color: #8BA841 !important;
}

/* Description */
.camp-card .camp-card__desc {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  flex: 1 !important;
  margin: 0 !important;
}

/* CTA � light green bg, dark green text, full width centered */
.camp-card .camp-card__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  background: #F1F5E8 !important;
  color: #2D5016 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  margin-top: auto !important;
  transition: all 0.2s ease !important;
}
.camp-card .camp-card__cta:hover {
  background: #2D5016 !important;
  color: #FFFFFF !important;
}
.camp-card .camp-card__cta .material-icons {
  font-size: 18px !important;
  color: inherit !important;
}

/* International CTA � gold gradient */
.camp-card .camp-card__cta--intl {
  background: linear-gradient(135deg, #C8A84E 0%, #E8D48A 100%) !important;
  color: #2D5016 !important;
}
.camp-card .camp-card__cta--intl:hover {
  background: #C8A84E !important;
  color: #2D5016 !important;
}

/* Grid � Airbnb-style auto-fill 320px minmax, 24px gap */
.camp-grid.E-camp-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
@media (max-width: 767px) {
  .camp-grid.E-camp-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }
}

/* ============================================================
   CAMP CARD V2 � FIX 2: remove pills + CTA space-between + divider
   Matches original v2 mockup exactly
   ============================================================ */

/* Reset pill look on age/dates (v2 had clean text with icon) */
.camp-card .E-camp-card__age,
.camp-card .E-camp-card__dates,
.camp-card .camp-card__meta {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hidden age-match icon inside age meta */
.camp-card .E-camp-card__age-match {
  display: none !important;
}

/* CTA: text left, arrow right (space-between), NOT centered */
.camp-card .camp-card__cta {
  justify-content: space-between !important;
}
.camp-card .camp-card__cta--intl {
  justify-content: space-between !important;
}

/* Divider line between description and dates */
.camp-card .camp-card__desc + .camp-card__meta,
.camp-card .camp-card__desc + .E-camp-card__dates {
  padding-top: 12px !important;
  margin-top: 4px !important;
  border-top: 1px solid #E5E5E5 !important;
}

/* Make sure location text is clean uppercase */
.camp-card .camp-card__location {
  letter-spacing: 0.06em !important;
}

/* Remove any text-flotante "Solicitar informaci�n" from international price overlay on image */
.camp-card .camp-card__price--intl {
  display: none !important;
}

/* Hide international price overlay text (was showing Solicitar info floating on image) */
.camp-card .E-camp-card__price--intl,
.camp-card .E-camp-card__price.camp-card__price:has(> .camp-card__price-value:only-child) {
  display: none !important;
}

/* ============================================================
   LOGO HEADER FIX � use full logo.svg instead of SVG hardcoded
   ============================================================ */
.site-header .header-logo__img {
  height: 48px !important;
  width: auto !important;
  max-width: 72px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============================================================
   TYPOGRAPHY FIXES � align with DESIGN.md (audit 2026-04-20)
   P1: Eliminate off-system weights/sizes
   P2: Normalize grays to tokens
   P3: Detail page sizing
   ============================================================ */

/* P1 � Section titles must be Playfair 700 */
.G-txt--supergigante {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 6vw, 56px) !important;
  color: #2D5016 !important;
  line-height: 1.1 !important;
}
.G-txt--xxgigante {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
}
.G-txt--xxxm.G-txt--seminegrita,
.E-home-camps__heading,
h3.E-home-camps__heading {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
}

/* Accordion headers: 18-20/600 (no 28/300 ni 28/700) */
.accordion-header,
.accordion-header button,
.accordion-button {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: #1A1A1A !important;
}

/* Value cards heading: bump to 20/600 */
.value-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* P2 � Grays: use token instead of Tailwind #6B7280 */
.camp-card .camp-card__meta,
.camp-card .camp-card__desc,
.E-camp-card__meta,
.E-camp-card__desc,
.camp-card__dates {
  color: #555555 !important;
}

/* Price must be bold */
.camp-card .camp-card__price-value,
.E-camp-card__price-value {
  font-weight: 700 !important;
}

/* P3 � Detail page hero: increase size for heritage */
.E-page-hero__title {
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 1.05 !important;
}

/* Fecha selector heading: proper small label */
.E-fecha-selector__heading,
.E-fecha-selector h3,
.E-sticky-enroll h3 {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #777777 !important;
  line-height: 1.2 !important;
}

/* Body paragraphs: normalize letter-spacing + line-height */
main p,
.E-page-body p,
.letter-body p {
  letter-spacing: normal !important;
  line-height: 1.6 !important;
}

/* Body paragraphs in colegios: scale up to 16px */
.E-page-body p,
.E-page-body__text {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #1A1A1A !important;
}

/* ============================================================
   HOME � CATALOGO CTA (reemplaza view rota selector_en_inicio)
   A�adido 2026-04-20 � agente B
============================================================ */
.home-camps-cta {
  padding: 72px 24px;
  background: linear-gradient(180deg, #FDFDFB 0%, #F5F5EE 100%);
  text-align: center;
}
.home-camps-cta__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.home-camps-cta__head {
  margin-bottom: 40px;
}
.home-camps-cta__destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 32px 0 40px;
}
.home-dest-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid rgba(139, 168, 65, 0.25);
  color: #2C3A1C;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.home-dest-chip:hover,
.home-dest-chip:focus-visible {
  background: #8BA841;
  color: #fff;
  border-color: #8BA841;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 168, 65, 0.28);
}
.home-dest-chip .material-icons-outlined {
  font-size: 20px;
  color: #8BA841;
}
.home-dest-chip:hover .material-icons-outlined,
.home-dest-chip:focus-visible .material-icons-outlined {
  color: #fff;
}
.home-dest-chip--intl {
  border-color: rgba(200, 168, 78, 0.35);
  background: #FFFBF2;
}
.home-dest-chip--intl .material-icons-outlined {
  color: #C8A84E;
}
.home-dest-chip--intl:hover,
.home-dest-chip--intl:focus-visible {
  background: #C8A84E;
  border-color: #C8A84E;
}

.home-camps-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* XL CTA � align design system v2 */
.btn--xl {
  padding: 18px 36px !important;
  font-size: 1.1rem !important;
  border-radius: 14px;
  gap: 10px;
}

@media (max-width: 640px) {
  .home-camps-cta {
    padding: 56px 16px;
  }
  .home-dest-chip {
    padding: 10px 16px;
    font-size: 0.88rem;
  }
  .btn--xl {
    padding: 16px 24px !important;
    font-size: 1rem !important;
  }
  .home-camps-cta__actions {
    flex-direction: column;
    width: 100%;
  }
  .home-camps-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   NOTICIAS HOME FIX � render E-noticia-teaser as Airbnb-style image cards
   ============================================================ */
.news-grid ul,
.news-grid .item-list ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.news-grid ul li { list-style: none !important; }

.news-grid .E-noticia-teaser {
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.news-grid .E-noticia-teaser:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.news-grid .E-noticia-teaser a {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 280px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
}

.news-grid .E-noticia-teaser a::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 100%) !important;
  border-radius: 12px !important;
  z-index: 1 !important;
}

.news-grid .E-noticia-teaser a > div {
  position: relative !important;
  z-index: 2 !important;
  padding: 20px !important;
  background: transparent !important;
}

.news-grid .E-noticia-teaser h2 {
  color: #FFFFFF !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Section heading also centered and Playfair */
.news-inner .news-heading h2,
.news-inner .news-heading__title p {
  color: #FFFFFF !important;
  text-align: center !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(32px, 5vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  margin: 0 0 32px 0 !important;
}

/* Fix: news-grid is the outer, delegate grid to inner ul */
.news-grid {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.news-grid .views-element-container,
.news-grid .view,
.news-grid .view-content,
.news-grid .item-list {
  display: block !important;
  width: 100% !important;
}

/* Style 'Ver todas' link under news grid */
.news-grid .more-link,
.news-grid > .more-link,
.news-grid a[href*='/noticias'] {
  display: inline-block !important;
  margin: 32px auto 0 !important;
  padding: 12px 24px !important;
  background: transparent !important;
  border: 2px solid #C8A84E !important;
  border-radius: 50px !important;
  color: #C8A84E !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.news-grid .more-link:hover,
.news-grid a[href*='/noticias']:hover {
  background: #C8A84E !important;
  color: #2D5016 !important;
}
.news-grid .view-footer,
.news-grid .more-link-wrapper {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* ============================================================
   TYPOGRAPHY FIXES V2 � from new sections audit (2026-04-20)
   P1: blockers (colors out of palette, legibility)
   P2: scale / coherence
   P3: refinements
   ============================================================ */

/* =========== P1 =========== */

/* Btn gold: text color must be green-dark (DESIGN.md Ferrari rule) */
.btn--gold,
.btn.btn--gold,
a.btn--gold {
  color: #2D5016 !important;
  border-radius: 8px !important;
}

/* Camp card badge available: use brand tokens, not Material green */
.camp-card .camp-card__badge--available,
.E-camp-card .camp-card__badge--available {
  color: #2D5016 !important;
  background: #F0F4E8 !important;
}
.camp-card .camp-card__badge--available .material-icons {
  color: #2D5016 !important;
}

/* Letter role: editorial label, no gold reserved for CTAs */
.letter-role {
  color: #777777 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Letter section H4 (CARTA A LOS PADRES) as editorial label */
.letter-section h4,
.letter-section h4.G-txt--xxl,
.letter-content h4 {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #8BA841 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
}

/* =========== P2 =========== */

/* Section-title scale: not a fixed 44px (off-scale) */
.section-title,
h2.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(28px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.4px !important;
  color: #2D5016 !important;
}

/* Camp card titles: Inter 22/600 (Airbnb card heading) not Playfair */
.camp-card .camp-card__title,
.E-camp-card .camp-card__title {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1A1A1A !important;
}
.camp-card .camp-card__title a,
.E-camp-card .camp-card__title a {
  color: inherit !important;
}

/* Letter body + testimonial text: 16/400 #1A1A1A (main content) */
.letter-body,
.letter-body p,
.letter-body div,
.testimonial-text,
.testimonials-section .testimonial-text {
  font-size: 16px !important;
  color: #1A1A1A !important;
  line-height: 1.6 !important;
}

/* =========== P3 =========== */

/* Editorial label: letter-spacing exactly 1px */
.camp-card .camp-card__location,
.E-camp-card .camp-card__location {
  letter-spacing: 1px !important;
}

/* Card CTA: Inter 14/500 (not 15/600 that competes with title) */
.camp-card .camp-card__cta,
.E-camp-card .camp-card__cta {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Letter author: Inter 16/600 (body-card heading) */
.letter-author {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2D5016 !important;
  margin: 0 0 4px 0 !important;
}

/* ============================================================
   INSCRIPCION FORM FIXES � Commerce wizard (audit 2026-04-20)
   Flow: /es/panel/shopping/camper/*
   Align with DESIGN.md: gold for conversion, red for errors, brand tokens
   ============================================================ */

/* =========== P1 � Blockers =========== */

/* 1. Submit "Siguiente" must be gold (conversion = gold per DESIGN.md Ferrari rule) */
.panel-shopping .form-submit,
.panel-shopping button[type="submit"],
.panel-shopping input[type="submit"],
form.inscription-form .form-submit,
form.inscription-form button[type="submit"],
.accordion-body .form-actions button[type="submit"],
.accordion-body .form-actions input[type="submit"] {
  background: linear-gradient(135deg, #C8A84E 0%, #E8D48A 100%) !important;
  color: #2D5016 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(200, 168, 78, 0.3) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.02em !important;
  width: 100% !important;
}
.panel-shopping .form-submit:hover,
.panel-shopping button[type="submit"]:hover,
form.inscription-form .form-submit:hover,
form.inscription-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #C8A84E 0%, #D4B25E 100%) !important;
  box-shadow: 0 6px 24px rgba(200, 168, 78, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* 2. Error messages: red urgency color (was #555 gray) */
.panel-shopping .text-error,
.panel-shopping .form-item--error-message,
.panel-shopping .error,
.panel-shopping .dni-msg,
.panel-shopping .form-required-error,
.messages--error,
.form-item__error-message {
  color: #C0392B !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* 3. Required asterisk: red urgency (was #31562D) */
.panel-shopping label.form-required::after,
.panel-shopping label[class*="required"]::after,
.panel-shopping .js-form-required::after,
form.inscription-form label.form-required::after {
  color: #C0392B !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
}

/* 4. Focus state: border must change to green-brand (not only shadow) */
.panel-shopping input:focus,
.panel-shopping textarea:focus,
.panel-shopping select:focus,
form.inscription-form input:focus,
form.inscription-form textarea:focus,
form.inscription-form select:focus {
  border-color: #8BA841 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 168, 65, 0.15) !important;
}

/* 5. Remove default browser outline residue */
.panel-shopping *:focus-visible,
form.inscription-form *:focus-visible {
  outline: none !important;
}

/* =========== P2 � Escala / coherencia =========== */

/* 6. Accordion item radius 14 ? 12 (DESIGN.md cards) */
.panel-shopping .accordion-item,
.panel-shopping .accordion-card,
.panel-shopping .wizard-step {
  border-radius: 12px !important;
}

/* 7. Accordion button: 16/600 clean */
.panel-shopping .accordion-button,
.panel-shopping .accordion-header button {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2D5016 !important;
  padding: 16px 20px !important;
}

/* 8. Step badge inactive bg: official green-bg token */
.panel-shopping .step-badge,
.panel-shopping .step-number,
.panel-shopping .accordion-button::before {
  background: #F0F4E8 !important;
}
.panel-shopping .step-badge--active,
.panel-shopping .accordion-button.active::before,
.panel-shopping .accordion-button[aria-expanded="true"]::before {
  background: #8BA841 !important;
  color: #FFFFFF !important;
}

/* 10. Labels 14/500 Inter #555 (normalize) */
.panel-shopping label,
.panel-shopping .form-item__label,
form.inscription-form label,
form.inscription-form .form-item__label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #555555 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Inputs standard: 16px body, border 1px #DDDDDD, radius 8, padding 12 */
.panel-shopping input[type="text"],
.panel-shopping input[type="email"],
.panel-shopping input[type="tel"],
.panel-shopping input[type="number"],
.panel-shopping input[type="date"],
.panel-shopping input[type="password"],
.panel-shopping textarea,
.panel-shopping select,
form.inscription-form input[type="text"],
form.inscription-form input[type="email"],
form.inscription-form input[type="tel"],
form.inscription-form input[type="number"],
form.inscription-form input[type="password"],
form.inscription-form textarea,
form.inscription-form select {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #1A1A1A !important;
  padding: 12px 16px !important;
  border: 1px solid #DDDDDD !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  height: 48px !important;
  box-sizing: border-box !important;
}
.panel-shopping textarea,
form.inscription-form textarea {
  height: auto !important;
  min-height: 96px !important;
  resize: vertical !important;
}

/* =========== P3 � Refinamiento =========== */

/* 12. Product summary chip: gold premium (conversion celebration) */
.panel-shopping .product-summary-chip,
.panel-shopping .product-summary,
.panel-shopping .E-camp-product-summary,
.panel-shopping .product-hero-chip {
  background: linear-gradient(135deg, #C8A84E 0%, #E8D48A 100%) !important;
  color: #2D5016 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(200, 168, 78, 0.3) !important;
}

/* 13. Global DNI note: style as info toast */
.panel-shopping .dni-global-note,
.panel-shopping .form-global-note {
  background: #F0F4E8 !important;
  border-left: 3px solid #8BA841 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: #2D5016 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 16px 0 !important;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.08) !important;
}

/* 14. Checkboxes: radius + border */
.panel-shopping input[type="checkbox"],
.panel-shopping input[type="radio"],
form.inscription-form input[type="checkbox"],
form.inscription-form input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #E8E8E8 !important;
  border-radius: 4px !important;
  accent-color: #8BA841 !important;
  cursor: pointer !important;
}

/* 15. Link "No recuerdo mi contrase�a" brand green with hover underline */
.panel-shopping a[href*="password"],
.panel-shopping a[href*="recuperar"],
.panel-shopping .user-pass-link,
form.inscription-form a[href*="password"] {
  color: #8BA841 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
.panel-shopping a[href*="password"]:hover,
.panel-shopping a[href*="recuperar"]:hover,
.panel-shopping .user-pass-link:hover {
  color: #2D5016 !important;
  text-decoration: underline !important;
}

/* Lista de espera price 0,00� ? hide if it has list-espera class */
.panel-shopping .lista-espera .price-value,
.E-fecha-selector__price--espera {
  display: none !important;
}
.panel-shopping .lista-espera::after {
  content: 'Lista de espera';
  color: #E65100;
  font-weight: 600;
  font-size: 14px;
}

/* ============================================================
   INSCRIPCION FORM FIXES V2 � correct selectors
   Body class: .page-route-camper-checkout.path-panel
   Form: form[id^="checkout-form-"]
   Submit: .form-submit.btn-secondary
   ============================================================ */

/* ========== P1 � Blockers ========== */

/* 1. Submit "Siguiente" ? gold gradient (conversion = gold) */
body.path-panel .form-submit,
body.path-panel input.form-submit,
body.path-panel input.button.form-submit,
body.path-panel .btn-secondary.form-submit,
body.page-route-camper-checkout .form-submit,
body.page-route-camper-checkout input.button {
  background: linear-gradient(135deg, #C8A84E 0%, #E8D48A 100%) !important;
  background-image: linear-gradient(135deg, #C8A84E 0%, #E8D48A 100%) !important;
  color: #2D5016 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(200, 168, 78, 0.3) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.02em !important;
  width: 100% !important;
  cursor: pointer !important;
}
body.path-panel .form-submit:hover,
body.page-route-camper-checkout .form-submit:hover {
  background: linear-gradient(135deg, #C8A84E 0%, #D4B25E 100%) !important;
  background-image: linear-gradient(135deg, #C8A84E 0%, #D4B25E 100%) !important;
  box-shadow: 0 6px 24px rgba(200, 168, 78, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* 2. Error messages red urgency */
body.path-panel .text-error,
body.path-panel .form-item--error-message,
body.path-panel .messages--error,
body.path-panel .error,
body.path-panel .dni-msg,
body.path-panel .form-item__error-message,
body.page-route-camper-checkout .form-item--error-message {
  color: #C0392B !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* 3. Required asterisk red */
body.path-panel label.form-required::after,
body.path-panel .js-form-required::after,
body.path-panel label[class*="required"]::after,
body.page-route-camper-checkout .form-required::after {
  color: #C0392B !important;
  font-weight: 700 !important;
  content: ' *' !important;
  margin-left: 2px !important;
}

/* 4. Focus state green-brand border + halo */
body.path-panel input:focus,
body.path-panel textarea:focus,
body.path-panel select:focus,
body.page-route-camper-checkout input:focus,
body.page-route-camper-checkout textarea:focus,
body.page-route-camper-checkout select:focus {
  border-color: #8BA841 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 168, 65, 0.15) !important;
}

/* 5. Clean browser outline residue */
body.path-panel *:focus-visible,
body.page-route-camper-checkout *:focus-visible {
  outline: none !important;
}

/* ========== P2 � Escala / coherencia ========== */

/* 6. Accordion radius 14?12 */
body.path-panel .accordion-item,
body.path-panel .accordion-card,
body.path-panel .wizard-step,
body.page-route-camper-checkout .accordion-item {
  border-radius: 12px !important;
}

/* 7. Accordion button 16/600 */
body.path-panel .accordion-button,
body.path-panel .accordion-header button,
body.page-route-camper-checkout .accordion-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2D5016 !important;
  padding: 16px 20px !important;
}

/* 10. Labels 14/500 #555 */
body.path-panel form label,
body.path-panel .form-item__label,
body.page-route-camper-checkout form label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #555555 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Inputs standard */
body.path-panel form input[type="text"],
body.path-panel form input[type="email"],
body.path-panel form input[type="tel"],
body.path-panel form input[type="number"],
body.path-panel form input[type="date"],
body.path-panel form input[type="password"],
body.path-panel form textarea,
body.path-panel form select,
body.page-route-camper-checkout form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.page-route-camper-checkout form textarea,
body.page-route-camper-checkout form select {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #1A1A1A !important;
  padding: 12px 16px !important;
  border: 1px solid #DDDDDD !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  height: 48px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
body.path-panel form textarea,
body.page-route-camper-checkout form textarea {
  height: auto !important;
  min-height: 96px !important;
  resize: vertical !important;
}

/* ========== P3 � Refinamiento ========== */

/* 14. Checkbox/radio style */
body.path-panel input[type="checkbox"],
body.path-panel input[type="radio"],
body.page-route-camper-checkout input[type="checkbox"],
body.page-route-camper-checkout input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #E8E8E8 !important;
  border-radius: 4px !important;
  accent-color: #8BA841 !important;
  cursor: pointer !important;
}
body.path-panel input[type="radio"],
body.page-route-camper-checkout input[type="radio"] {
  border-radius: 50% !important;
}

/* 15. Password recovery link brand green */
body.path-panel a[href*="password"],
body.path-panel a[href*="recuperar"],
body.page-route-camper-checkout a[href*="password"] {
  color: #8BA841 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
body.path-panel a[href*="password"]:hover {
  color: #2D5016 !important;
  text-decoration: underline !important;
}

/* 13. Global notes/info: style as info toast */
body.path-panel .dni-global-note,
body.path-panel .form-global-note,
body.path-panel .messages--status {
  background: #F0F4E8 !important;
  border-left: 3px solid #8BA841 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: #2D5016 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 16px 0 !important;
}

/* Label specificity override for Bootstrap .form-label / label default */
html body.path-panel form label,
html body.path-panel form .form-item__label,
html body.path-panel form .form-label,
html body.page-route-camper-checkout form label {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* ===================================================================
 * 2026-04-20 � Agent C: Checkout wizard fixes (Bugs 3, 6, 9)
 * =================================================================== */

/* Bug 6 � Fecha selector: hide 0,00 euro, show 'Lista de espera' label */
.E-fecha-selector__price--waitlist.lista-espera-label {
  color: #E65100 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 11px !important;
  letter-spacing: 0.2px;
}
/* CSS fallback: if any waitlist card still renders raw 0,00 euro, hide numeric content */
.E-fecha-selector__item--waitlist .E-fecha-selector__price:not(.lista-espera-label) {
  position: relative;
  color: transparent !important;
  text-decoration: none !important;
}
.E-fecha-selector__item--waitlist .E-fecha-selector__price:not(.lista-espera-label)::after {
  content: 'Lista de espera';
  color: #E65100;
  font-weight: 600;
  font-size: 11px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bug 9 � Global sticky stepper for inscription wizard */
.wizard-stepper {
  position: sticky;
  top: 72px;
  background: #fff;
  z-index: 50;
  padding: 10px 16px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #EDEDED;
  margin: 0 auto 16px;
  max-width: 720px;
  border-radius: 8px;
}
.wizard-stepper__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #2D5016;
}
.wizard-stepper__label {
  font-weight: 600;
  color: #2D5016;
  white-space: nowrap;
}
.wizard-stepper__label strong {
  color: #8BA841;
}
.wizard-stepper__title {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: right;
}
.wizard-stepper__bar {
  height: 4px;
  background: #E8E8E8;
  border-radius: 2px;
  overflow: hidden;
}
.wizard-stepper__fill {
  height: 100%;
  background: linear-gradient(90deg, #8BA841, #2D5016);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 11%;
}

/* Mobile: tighter stepper, just below site header */
@media (max-width: 768px) {
  .wizard-stepper {
    top: 60px;
    padding: 8px 12px 10px;
    border-radius: 0;
    margin-left: -12px;
    margin-right: -12px;
    max-width: none;
  }
  .wizard-stepper__title {
    display: none; /* save space on phones */
  }
  .wizard-stepper__row {
    margin-bottom: 6px;
  }
  .wizard-stepper__label {
    font-size: 12px;
  }
}

/* Bug 3 � GDPR Art.9 explicit consent for medical data of minors */
.form-checkbox--gdpr-art9 {
  background: #FFF8E1;
  border: 1.5px solid #F9A825;
  border-left: 4px solid #E65100;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 20px 0 12px;
  position: relative;
}
.form-checkbox--gdpr-art9::before {
  content: 'RGPD Art. 9';
  position: absolute;
  top: -10px;
  left: 12px;
  background: #E65100;
  color: #fff;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.form-checkbox--gdpr-art9 .form-checkbox__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
  color: #3E2723;
  margin: 0;
}
.form-checkbox--gdpr-art9 input[type='checkbox'] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #2D5016;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.form-checkbox--gdpr-art9 .form-checkbox__label strong {
  display: block;
  color: #E65100;
  font-size: 13px;
  margin-bottom: 4px;
  font-weight: 700;
}
.form-checkbox--gdpr-art9 .form-checkbox__error {
  color: #C62828;
  background: #FFEBEE;
  border-left: 3px solid #C62828;
  padding: 8px 12px;
  margin: 10px 0 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
/* Invalid state visual feedback */
.form-checkbox--gdpr-art9 input[type='checkbox']:invalid + span strong {
  color: #C62828;
}

/* Bug 9 sticky override � use fixed on mobile to guarantee visibility */
@media (max-width: 768px) {
  .wizard-stepper {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 1050 !important;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  /* Add top padding to the wizard area so the fixed stepper does not overlap content */
  .accordion[id='accordionCheckout'] {
    padding-top: 64px;
  }
}

/* ============================================================
   HOME REDESIGN CONSOLIDATED � Design Director + UX audit (2026-04-21)
   P1 WCAG blockers + flow improvements + polish
   ============================================================ */

/* ========== P1 � CRITICAL WCAG ========== */

/* 1. Hero "Desde 1985" pill � fondo solid verde oscuro + texto dorado
   Contraste #C8A84E sobre #2D5016 = 6.2:1 (WCAG AA pass) */
.hero-home .badge-heritage,
.hero .badge-heritage {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #2D5016 !important;
  color: #C8A84E !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 6px 14px !important;
  border-radius: 32px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(200, 168, 78, 0.35) !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.2) !important;
}

/* 3. Touch targets mobile � sede pills minimum 44x44 */
@media (max-width: 767px) {
  .sede-pill,
  .home-dest-chip,
  .E-camp-filter__loc-tag {
    padding: 12px 20px !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }
}

/* 4. Body text mobile � ensure 16px minimum (was 14px in some places) */
@media (max-width: 767px) {
  .camp-card__desc,
  .value-desc,
  .camps-intro__body,
  .letter-body,
  .letter-body p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* ========== P1 � Hero CTA hierarchy ========== */

/* M1. Secondary CTA (outline) subordinado al primary (gold) */
.hero-home .hero__cta-group,
.hero .hero__cta-group {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.hero-home .btn--outline,
.hero .btn--outline {
  font-size: 0.875rem !important;
  opacity: 0.85 !important;
  padding: 12px 20px !important;
}
.hero-home .btn--outline:hover,
.hero .btn--outline:hover {
  opacity: 1 !important;
}

/* ========== P1 � Redundancy reduction ========== */

/* M2. Eliminar CTA verde redundante en camps-intro (hay otro en cat�logo) */
.camps-intro__inner > div[style*="margin-top: 28px"],
.camps-intro__inner > div[style*="justify-content: center"] {
  display: none !important;
}
.camps-intro {
  padding-top: 40px !important;
  padding-bottom: 16px !important;
}
.camps-intro__inner {
  max-width: 640px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* ========== P2 � Spacing + respiration ========== */

/* M3. Respiro entre cat�logo y values */
.camp-catalog {
  padding-bottom: 64px !important;
}

/* M4. Values grid: 2 cols tablet, 3 desktop, lighter mobile */
.values-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
@media (min-width: 992px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .value-card {
    padding: 20px 16px !important;
  }
  .value-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ========== P2 � News visual weight balance ========== */

/* M5. Bajar intensidad del overlay oscuro � news debe competir menos con CTA banner final */
.news-section {
  background: #F0F4E8 !important;
  background-image: none !important;
  position: relative !important;
  padding: 64px 0 !important;
}
.news-overlay {
  display: none !important;
}
/* News heading ahora sobre fondo claro */
.news-inner .news-heading h2,
.news-inner .news-heading__title,
.news-inner .news-heading__title p {
  color: #2D5016 !important;
  text-shadow: none !important;
}
/* News teaser cards: mantienen overlay dark en imagen para legibilidad t�tulo blanco */
/* (el fix de la secci�n news-grid previo sigue vigente) */

/* ========== P3 � CTA banner clean ========== */

/* M6. Ocultar p�rrafo largo � titular + CTAs son suficientes */
.cta-banner__text {
  display: none !important;
}
.cta-banner__title {
  margin-bottom: 32px !important;
}
.cta-banner__urgency {
  margin-top: 24px !important;
}

/* ========== P3 � Trust bar mobile horizontal scroll ========== */

@media (max-width: 767px) {
  .trust-bar__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 24px !important;
    padding: 12px 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .trust-bar__inner::-webkit-scrollbar {
    display: none !important;
  }
  .trust-bar__item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ========== P3 � Focus states visibles (a11y) ========== */

.hero__cta-group a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.camp-card__cta:focus-visible,
.camp-card__title a:focus-visible,
.news-grid a:focus-visible {
  outline: 3px solid #8BA841 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(139, 168, 65, 0.2) !important;
}

/* ============================================================
   HOME MOBILE DENSITY FIX � reduce ~30% padding on mobile
   Applied: 2026-04-21 (UX recommendation P2)
   ============================================================ */

@media (max-width: 767px) {
  /* Section paddings: reduce ~30% */
  .camps-intro {
    padding-top: 32px !important;
    padding-bottom: 8px !important;
  }
  .values-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .camp-catalog {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }
  .letter-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .news-section {
    padding: 40px 16px !important;
  }
  .testimonials-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .cta-banner {
    padding: 48px 16px !important;
  }
  .trust-bar {
    padding: 16px 0 !important;
  }

  /* Values cards: tighter spacing */
  .values-grid {
    gap: 12px !important;
  }
  .value-card {
    padding: 16px !important;
  }

  /* Hero: tighter content padding */
  .hero__content {
    padding: 0 16px !important;
  }

  /* Testimonials mobile: show only 2 not 3 (hide third) */
  .testimonials-grid .testimonial-card:nth-child(n+3) {
    display: none !important;
  }
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* News: show only 4 not 6 (hide 5th and 6th) on mobile */
  .news-grid ul li:nth-child(n+5) {
    display: none !important;
  }
  .news-grid ul {
    gap: 16px !important;
  }

  /* CTA banner: less inner padding */
  .cta-banner__inner {
    padding: 0 8px !important;
  }
  .cta-banner__title {
    font-size: 28px !important;
    margin-bottom: 24px !important;
  }
}