:root {
  --navy: #1a2744;
      --navy-deep: #0f1a30;
          --gold: #c9a84c;
              --gold-light: #e8c97a;
                  --cream: #f5f2ec;
                      --white: #ffffff;
                          --text-dark: #1a2744;
                              --text-mid: #3d5080;
                                  --surface: #ffffff;
                                      --surface-contrast: #17203c;
                                          --surface-soft: rgba(255, 255, 255, 0.85);
                                          }
                                           
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Jost', sans-serif;
    background: var(--cream);
      color: var(--text-dark);
        overflow-x: hidden;
        }
        
section { padding: 90px 24px; }
.container { max-width: 1040px; margin: 0 auto; }

/*  HERO  */
.hero {
  min-height: 100vh;
    background: radial-gradient(circle at top, #12264a 0%, #0d1a34 45%, #081020 100%);
      position: relative;
        display: flex;
          flex-direction: column;
            align-items: center;
              justify-content: center;
                overflow: hidden;
                  padding: 30px 24px 80px;
                  }
                  .hero::before, .hero::after {
                    content: '';
                      position: absolute;
                        width: 200%;
                          height: 2px;
                            background: linear-gradient(90deg, transparent, var(--gold), transparent);
                              opacity: .35;
                              }
                              .hero::before { top: 30%; transform: rotate(-4deg); }
                              .hero::after  { bottom: 28%; transform: rotate(3deg); }
                              .hero-glow {
                                position: absolute;
                                  width: 500px; height: 500px;
                                    border-radius: 50%;
                                      background: radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
                                        top: 50%; left: 50%;
                                          transform: translate(-50%,-50%);
                                            pointer-events: none;
                                            }
                                            .hero-badge {
                                              font-family: 'Jost', sans-serif;
                                                font-size: .7rem;
                                                  font-weight: 500;
                                                    letter-spacing: .22em;
                                                      text-transform: uppercase;
                                                        color: var(--gold);
                                                          border: 1px solid rgba(201,168,76,.4);
                                                            padding: 6px 18px;
                                                              border-radius: 40px;
                                                                margin-bottom: 0px;
                                                                  opacity: 0;
                                                                    animation: fadeUp .8s .2s ease forwards;
                                                                    }
                                                                    .hero-logo {
                                                                      width: 100%;
                                                                      display: flex;
                                                                      justify-content: center;
                                                                      margin-bottom: -50px;
                                                                      opacity: 0;
                                                                      animation: fadeUp .9s .4s ease forwards;
                                                                    }
                                                                    .hero-logo img {
                                                                      width: 300px;
                                                                      max-width: 70vw;
                                                                      display: block;
                                                                      background: transparent;
                                                                      filter: drop-shadow(0 14px 28px rgba(0,0,0,.16));
                                                                    }
                                                                    .hero-title {
                                                                      font-family: 'Cormorant Garamond', serif;
                                                                        font-size: clamp(3.8rem, 12vw, 7rem);
                                                                          font-weight: 300;
                                                                            letter-spacing: .06em;
                                                                              color: var(--white);
                                                                                line-height: 1;
                                                                                  text-align: center;
                                                                                    opacity: 0;
                                                                                      animation: fadeUp .9s .4s ease forwards;
                                                                                      }
                                                                                      .hero-title span { display: block; font-style: italic; color: var(--gold-light); }
                                                                                      .hero-sub {
                                                                                        margin-top: 14px;
                                                                                          font-size: .85rem;
                                                                                            font-weight: 300;
                                                                                              letter-spacing: .28em;
                                                                                                text-transform: uppercase;
                                                                                                  color: rgba(255,255,255,.5);
                                                                                                    opacity: 0;
                                                                                                      animation: fadeUp .9s .6s ease forwards;
                                                                                                      }
                                                                                                      .gold-line {
                                                                                                        width: 60px; height: 1px;
                                                                                                          background: var(--gold);
                                                                                                            margin: 28px auto;
                                                                                                              opacity: 0;
                                                                                                                animation: fadeUp .8s .7s ease forwards;
                                                                                                                }
                                                                                                                .hero-quote {
                                                                                                                  font-family: 'Cormorant Garamond', serif;
                                                                                                                    font-style: italic;
                                                                                                                      font-size: clamp(1.05rem, 3vw, 1.3rem);
                                                                                                                        color: rgba(255,255,255,.75);
                                                                                                                          text-align: center;
                                                                                                                            max-width: 560px;
                                                                                                                              line-height: 1.7;
                                                                                                                                opacity: 0;
                                                                                                                                  animation: fadeUp .9s .85s ease forwards;
                                                                                                                                  }
                                                                                                                                  .hero-cta {
                                                                                                                                    margin-top: 44px;
                                                                                                                                      display: flex;
                                                                                                                                        gap: 14px;
                                                                                                                                          flex-wrap: wrap;
                                                                                                                                            justify-content: center;
                                                                                                                                              opacity: 0;
                                                                                                                                                animation: fadeUp .9s 1.05s ease forwards;
                                                                                                                                                }
                                                                                                                                                .btn-primary, .btn-outline, .wa-btn {
                                                                                                                                                  display: inline-flex;
                                                                                                                                                    align-items: center;
                                                                                                                                                      gap: 10px;
                                                                                                                                                        border-radius: 4px;
                                                                                                                                                          text-decoration: none;
                                                                                                                                                            transition: background .25s, transform .2s, color .2s, border-color .25s;
                                                                                                                                                            }
                                                                                                                                                            .btn-primary {
                                                                                                                                                              background: var(--gold);
                                                                                                                                                                color: var(--navy-deep);
                                                                                                                                                                  font-family: 'Jost', sans-serif;
                                                                                                                                                                    font-weight: 500;
                                                                                                                                                                      font-size: .85rem;
                                                                                                                                                                        letter-spacing: .12em;
                                                                                                                                                                          text-transform: uppercase;
                                                                                                                                                                            padding: 15px 32px;
                                                                                                                                                                            }
                                                                                                                                                                            .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
                                                                                                                                                                            .btn-primary:disabled {
                                                                                                                                                                              opacity: .45;
                                                                                                                                                                              cursor: not-allowed;
                                                                                                                                                                              transform: none;
                                                                                                                                                                            }
                                                                                                                                                                            .btn-outline {
                                                                                                                                                                              border: 1px solid rgba(201,168,76,.55);
                                                                                                                                                                                color: var(--gold-light);
                                                                                                                                                                                  font-family: 'Jost', sans-serif;
                                                                                                                                                                                    font-weight: 400;
                                                                                                                                                                                      font-size: .85rem;
                                                                                                                                                                                        letter-spacing: .12em;
                                                                                                                                                                                          text-transform: uppercase;
                                                                                                                                                                                            padding: 15px 32px;
                                                                                                                                                                                            }
                                                                                                                                                                                            .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
                                                                                                                                                                                            .scroll-hint {
                                                                                                                                                                                              position: absolute;
                                                                                                                                                                                                bottom: 28px;
                                                                                                                                                                                                  left: 50%;
                                                                                                                                                                                                    transform: translateX(-50%);
                                                                                                                                                                                                      display: flex;
                                                                                                                                                                                                        flex-direction: column;
                                                                                                                                                                                                          align-items: center;
                                                                                                                                                                                                            gap: 6px;
                                                                                                                                                                                                              opacity: 0;
                                                                                                                                                                                                                animation: fadeUp .8s 1.3s ease forwards;
                                                                                                                                                                                                                }
                                                                                                                                                                                                                .scroll-hint span {
                                                                                                                                                                                                                  font-size: .62rem;
                                                                                                                                                                                                                    letter-spacing: .2em;
                                                                                                                                                                                                                      color: rgba(255,255,255,.3);
                                                                                                                                                                                                                        text-transform: uppercase;
                                                                                                                                                                                                                        }
                                                                                                                                                                                                                        .scroll-arrow {
                                                                                                                                                                                                                          width: 20px; height: 20px;
                                                                                                                                                                                                                            border-right: 1px solid rgba(201,168,76,.4);
                                                                                                                                                                                                                              border-bottom: 1px solid rgba(201,168,76,.4);
                                                                                                                                                                                                                                transform: rotate(45deg);
                                                                                                                                                                                                                                  animation: bounce 1.6s infinite;
                                                                                                                                                                                                                                  }
                                                                                                                                                                 
/*  SECTION BASE  */
.section-label {
  font-size: .65rem;
    font-weight: 500;
      letter-spacing: .28em;
        text-transform: uppercase;
          color: var(--gold);
            text-align: center;
              margin-bottom: 14px;
              }
              .section-title {
                font-family: 'Cormorant Garamond', serif;
                  font-size: clamp(2rem, 6vw, 3rem);
                    font-weight: 300;
                      text-align: center;
                        color: var(--navy);
                          line-height: 1.2;
                            margin-bottom: 20px;
                            }
                            .section-body {
                              font-size: .95rem;
                                font-weight: 300;
                                  line-height: 1.85;
                                    color: var(--text-mid);
                                      text-align: center;
                                        max-width: 580px;
                                          margin: 0 auto;
                                          }
                                           
/*  SERVICES  */
.services { background: var(--cream); }
.services-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
        margin-top: 50px;
        }
        .service-card {
          background: var(--white);
            border: 1px solid rgba(201,168,76,.2);
              border-radius: 6px;
                padding: 36px 26px;
                  text-align: center;
                    transition: transform .3s, border-color .3s, box-shadow .3s;
                    }
                    .service-card:hover {
                      transform: translateY(-6px);
                        border-color: var(--gold);
                          box-shadow: 0 16px 40px rgba(26,39,68,.08);
                          }
                          .service-icon {
                            width: 48px; height: 48px;
                              border-radius: 50%;
                                background: rgba(201,168,76,.12);
                                  display: flex; align-items: center; justify-content: center;
                                    margin: 0 auto 18px;
                                      font-size: 1.4rem;
                                      }
                                      .service-name {
                                        font-family: 'Cormorant Garamond', serif;
                                          font-size: 1.2rem;
                                            font-weight: 600;
                                              color: var(--navy);
                                                margin-bottom: 10px;
                                                }
                                                .service-desc {
                                                  font-size: .82rem;
                                                    font-weight: 300;
                                                      line-height: 1.7;
                                                        color: var(--text-mid);
                                                        }
                                                        
/*  AGENDA  */
.agenda { background: var(--cream); }
.agenda-grid {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 14px;
  margin-top: 28px;
}
.calendar-card,
.booking-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 18px 44px rgba(26,39,68,.06);
}
.calendar-card {
  min-height: 560px;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.calendar-header button {
  width: 36px; height: 36px;
  border: none;
  background: rgba(26,39,68,.08);
  color: var(--navy);
  border-radius: 14px;
  cursor: pointer;
}
.calendar-header button:hover { background: rgba(201,168,76,.2); }
.calendar-header p {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
}
                                                .calendar-weekdays,
.calendar-days {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.calendar-days {
  flex: 1;
  min-height: 420px;
  grid-auto-rows: 52px;
}
.calendar-weekdays span {
  text-align: center;
  text-transform: uppercase;
  color: var(--text-mid);
  font-size: .68rem;
}
.calendar-days > div {
  width: 100%;
}
.calendar-days button {
  width: 100%;
  min-height: 34px;
  padding: 6px 0;
  font-size: .78rem;
  border: none;
  border-radius: 14px;
  background: rgba(26,39,68,.05);
  color: var(--navy);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.calendar-days button:hover { transform: translateY(-1px); background: rgba(201,168,76,.12); }
.calendar-days button.disabled { opacity: 0.3; cursor: not-allowed; }
.calendar-days button.active { background: var(--gold); color: var(--navy-deep); }
                                                                            .booking-header h3 {
                                                                              margin: 0 0 8px;
                                                                                font-size: 1.5rem;
                                                                                  color: var(--navy);
                                                                                  }
                                                                                  .booking-header p {
                                                                                    margin: 0;
                                                                                      color: var(--text-mid);
                                                                                      }
                                                                                      .field-group {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.field-group label {
  font-size: .9rem;
  color: var(--navy);
}
.field-group input,
.field-group textarea,
.field-group select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(26,39,68,.12);
  background: rgba(26,39,68,.04);
  color: var(--navy);
  font: inherit;
}
.field-group select option:disabled {
  color: rgba(26,39,68,.4);
}
.field-group textarea { min-height: 72px; }
.booking-header h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--navy);
}
.booking-header p {
  margin: 0;
  font-size: .9rem;
  color: var(--text-mid);
}
.booking-note {
  margin: 8px 0 0;
  color: var(--text-mid);
  font-size: .9rem;
}
.booking-card .btn-primary {
  margin: 14px auto 0;
  padding: 10px 18px;
  font-size: .9rem;
}
                                                                                                                     
/*  INFO SECCIÓN  */
.info-section {
  background: var(--navy-deep);
}
.info-section .section-title {
  color: #ffffff;
}
.info-section .section-body {
  color: rgba(255,255,255,.8);
}
.info-grid {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 32px auto 0;
  gap: 20px;
}
.contenedor-principal {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 20px;
}
.cuadro {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.process-card,
.contact-box {
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 18px 44px rgba(26,39,68,.12);
}
.process-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.process-card .section-body {
  color: rgba(255,255,255,.9);
  text-align: left;
  margin-bottom: 22px;
}
.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.step:last-child { border-bottom: none; }
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 300;
  color: rgba(201,168,76,.35);
  line-height: 1;
  padding-top: 4px;
}
.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.step-text {
  font-size: .88rem;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  line-height: 1.75;
}
.contact {
  background: transparent;
}
.contact-box {
  background: var(--white);
  color: var(--navy);
  text-align: left;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
}
.contact-box > * {
  max-width: 520px;
  width: 100%;
}
.contact-box p {
  font-size: .95rem;
  font-weight: 300;
  color: var(--text-mid);
  margin-bottom: 16px;
  line-height: 1.75;
}
.wa-btn {
  background: #25D366;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .08em;
  padding: 10px 24px;
  border-radius: 4px;
  width: fit-content;
  align-self: center;
}
.wa-btn:hover { background: #1ebe5d; transform: translateY(-2px); }
.wa-btn svg { flex-shrink: 0; }
.contact-info {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
}
.contact-info a {
  width: 100%;
}
.contact-info a {
  font-size: .84rem;
  font-weight: 300;
  color: var(--text-mid);
  text-decoration: none;
  letter-spacing: .06em;
  transition: color .2s;
}
.contact-info a:hover { color: var(--gold); }

footer {
  background: var(--navy-deep);
    padding: 32px 24px;
      text-align: center;
      }
      footer p {
        font-size: .72rem;
          letter-spacing: .14em;
            color: rgba(255,255,255,.3);
              text-transform: uppercase;
              }
              .gold-dot { color: var(--gold); margin: 0 6px; }
              
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bounce {
      0%, 100% { transform: rotate(45deg) translateY(0); }
        50%       { transform: rotate(45deg) translateY(5px); }
        }
        .reveal {
          opacity: 0;
            transform: translateY(30px);
              transition: opacity .75s ease, transform .75s ease;
              }
              .reveal.visible {
                opacity: 1;
                  transform: none;
                  }
                  
@media (max-width: 980px) {
  .agenda-grid { flex-direction: column; }
  .info-grid { flex-direction: column; }
  .hero { padding: 50px 20px 60px; }
  .hero-badge { padding: 5px 14px; }
  .hero-quote { max-width: 100%; }
  .calendar-card, .booking-card { padding: 26px; }
  .calendar-header { flex-wrap: wrap; gap: 10px; }
  .calendar-header p { font-size: 0.95rem; }
  .calendar-header button { width: 40px; height: 40px; }
}

@media (max-width: 768px) {
  .contenedor-principal {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  section { padding: 50px 16px; }
  .hero { padding: 40px 16px 50px; }
  .hero-title { font-size: clamp(2.8rem, 16vw, 4.4rem); }
  .hero-sub { font-size: 0.8rem; letter-spacing: 0.18em; }
  .hero-quote { font-size: 1rem; line-height: 1.6; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-primary, .hero-cta .btn-outline { width: 100%; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { padding: 26px 20px; }
  .agenda-grid { gap: 18px; }
  .calendar-card, .booking-card { padding: 22px; }
  .calendar-weekdays, .calendar-days { gap: 6px; }
  .calendar-weekdays span { font-size: 0.65rem; }
  .calendar-days button { min-height: 42px; font-size: 0.8rem; }
  .booking-card { margin-top: 0; }
  .contact-box { padding: 34px 24px; }
  .btn-primary, .btn-outline, .wa-btn { width: 100%; justify-content: center; }
}