/* ════════════════════════════════════
       TOKENS — paleta, tipografía, ritmo
    ════════════════════════════════════ */
    :root{
      /* color */
      --black:        #0c0a08;
      --dark:         #0c0a08;
      --dark-2:       #131110;
      --dark-3:       #1a1715;
      --dark-card:    #16130f;
      --border:       rgba(255,255,255,0.08);
      --border-hover: rgba(208,112,36,0.4);

      --orange:       #d07024;
      --orange-dim:   #b65f1c;
      --white:        #f7f2eb;

      --text:         #f7f2eb;
      --text-muted:   rgba(247,242,235,0.68);
      --text-dim:     rgba(247,242,235,0.46);

      --chip-bg:      rgba(255,255,255,0.06);
      --chip-border:  rgba(255,255,255,0.14);

      /* type */
      --font-d: "Playfair Display", serif;   /* display */
      --font-b: "Inter", sans-serif;          /* body */

      /* shape / motion */
      --r-sm:   10px;
      --r-md:   16px;
      --r-lg:   24px;
      --r-pill: 999px;
      --ease:   0.25s ease;

      /* layout rhythm — generous breathing room */
      --max:     1240px;
      --gutter:  28px;
      --section: 128px;   /* vertical section padding */
      --section-sm: 88px; /* tighter sections (footer area, CTA) */
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--dark);
      color: var(--text);
      font-family: var(--font-b);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    section { position: relative; }

    /* ── LAYOUT ── */
    .wrap {
      width: 100%;
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    /* ── TYPE ── */
    .eyebrow {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px;
    }
    .h1 {
      font-family: var(--font-d);
      font-size: clamp(2.4rem, 5.5vw, 4rem);
      font-weight: 700;
      line-height: 1.1;
      color: #fff;
    }
    .h2 {
      font-family: var(--font-d);
      font-size: clamp(1.9rem, 3.6vw, 2.75rem);
      font-weight: 700;
      line-height: 1.2;
      color: var(--text);
    }
    .em { font-style: italic; color: var(--orange); }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-b);
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: 0.02em;
      text-decoration: none;
      padding: 16px 32px;
      border-radius: var(--r-pill);
      transition: background var(--ease), transform var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
      cursor: pointer;
      border: 1.5px solid transparent;
      white-space: nowrap;
    }
    .btn-solid { background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(208,112,36,0.28); }
    .btn-solid:hover { background: var(--orange-dim); transform: translateY(-2px); }
    .btn-ghost { background: transparent; border-color: rgba(247,242,235,0.3); color: var(--text); }
    .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
    .btn-sm { padding: 10px 20px; font-size: 0.82rem; }

    /* ── WA ICON ── */
    .wa-icon { width: 20px; height: 20px; flex-shrink: 0; }

    /* ── SCROLL REVEAL ── */
    .rev {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .rev.on { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .rev { opacity:1; transform:none; transition:none; } }


    /* ════════════════════════════════════
       HEADER
    ════════════════════════════════════ */
    .nav {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 10;
      padding: 28px var(--gutter);
    }
    .nav__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav__logo {
      font-family: var(--font-d);
      font-weight: 700;
      font-size: 1.25rem;
      letter-spacing: 0.06em;
      color: #fff;
      line-height: 1;
    }
    .nav__logo span {
      display: block;
      font-family: var(--font-b);
      font-size: 0.55rem;
      letter-spacing: 0.32em;
      font-weight: 600;
      color: var(--orange);
      margin-top: 4px;
    }


    /* ════════════════════════════════════
       HERO
    ════════════════════════════════════ */
    .hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0c0a08;
}
.hero__inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px var(--gutter) 96px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero__content{
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* ── REELS ── */
.hero__reels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hero__reel{
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--dark-3);
}
.hero__reel video,
.hero__reel img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__reel-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
  padding: 20px;
}
.hero__reel-placeholder svg{ width: 32px; height: 32px; opacity: 0.5; }
    .hero__eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: var(--r-pill);
      background: rgba(208,112,36,.14);
      border: 1px solid rgba(208,112,36,.32);
      color: #e3a468;
      font-size: 0.85rem;
      font-weight: 500;
      line-height: 1;
      margin-bottom: 28px;
    }
    .hero h1{
      margin: 0;
      font-family: var(--font-d);
      font-size: clamp(2.6rem, 5.6vw, 4.4rem);
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--white);
      max-width: 12ch;
    }
    .hero h1 .accent{
      color: var(--orange);
      font-style: italic;
    }
    .hero__lead{
      margin-top: 26px;
      max-width: 480px;
      font-size: 1.2rem;
      line-height: 1.55;
      color: rgba(247,242,235,.86);
    }
    .hero__lead strong{
      color: var(--white);
      font-weight: 600;
    }
    .hero__chips{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
      max-width: 480px;
    }
    .hero__chip{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 18px;
      border-radius: var(--r-pill);
      background: var(--chip-bg);
      border: 1px solid var(--chip-border);
      color: rgba(247,242,235,.92);
      font-size: 0.9rem;
      line-height: 1;
      backdrop-filter: blur(10px);
    }
    .hero__actions{
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .hero__note{
      font-size: 0.92rem;
      color: rgba(247,242,235,.66);
    }
    .hero__note strong{
      color: #f0a057;
    }


    /* ════════════════════════════════════
       INCLUYE
    ════════════════════════════════════ */
    .incluye {
      background: var(--dark-2);
      padding: var(--section) 0;
    }
    .incluye__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .incluye__title { margin-bottom: 18px; }
    .incluye__desc {
      font-size: 1.02rem;
      color: var(--text-muted);
      margin-bottom: 40px;
      max-width: 420px;
      line-height: 1.7;
    }

    .incluye__list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }
    .incluye__row {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px 22px;
      background: var(--dark-3);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      transition: border-color var(--ease);
    }
    .incluye__row:hover { border-color: var(--border-hover); }
    .incluye__row-icon {
      font-size: 1.6rem;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .incluye__row-title {
      font-weight: 600;
      font-size: 1rem;
      color: var(--text);
      margin-bottom: 4px;
    }
    .incluye__row-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.55;
    }

    .incluye__right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 220px 220px;
      gap: 12px;
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .incluye__img { overflow: hidden; border-radius: var(--r-sm); }
    .incluye__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .incluye__img:hover img { transform: scale(1.06); }
    .incluye__img--tall { grid-row: 1 / 3; }


    /* ════════════════════════════════════
       EXPERIENCIA
    ════════════════════════════════════ */
    .experiencia {
      background: var(--dark);
      padding: var(--section) 0;
    }
    .experiencia__header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: end;
      margin-bottom: 56px;
    }
    .experiencia__text {
      font-size: 1.02rem;
      color: var(--text-muted);
      line-height: 1.8;
    }

    .gallery {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 360px;
      gap: 12px;
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .gallery__item { overflow: hidden; position: relative; border-radius: var(--r-sm); }
    .gallery__item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .gallery__item:hover img { transform: scale(1.05); }
    .gallery__item::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid transparent;
      border-radius: var(--r-sm);
      transition: border-color 0.3s;
      pointer-events: none;
    }
    .gallery__item:hover::after { border-color: rgba(208,112,36,0.45); }


    /* ════════════════════════════════════
       MENÚ — CARDS INTERACTIVAS
    ════════════════════════════════════ */
    .menu {
      background: var(--dark-2);
      padding: var(--section) 0;
    }
    .menu__header {
      text-align: center;
      max-width: 560px;
      margin: 0 auto 64px;
    }
    .menu__header .h2 { margin-bottom: 14px; }
    .menu__header p {
      font-size: 1rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .menu__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

    .menu__card {
      background: var(--dark-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
      cursor: default;
      display: flex;
      flex-direction: column;
    }
    .menu__card:hover {
      border-color: var(--border-hover);
      transform: translateY(-6px);
      box-shadow: 0 20px 48px rgba(0,0,0,0.4);
    }

    .menu__card-img {
      height: 200px;
      overflow: hidden;
      position: relative;
      background: var(--dark-3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5rem;
    }
    .menu__card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .menu__card:hover .menu__card-img img { transform: scale(1.08); }

    .menu__card-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--orange);
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: var(--r-pill);
    }

    .menu__card-body {
      padding: 24px 24px 26px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .menu__card-name {
      font-family: var(--font-d);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }
    .menu__card-desc {
      font-size: 0.86rem;
      color: var(--text-muted);
      line-height: 1.6;
      flex: 1;
    }
    .menu__card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .menu__card-price {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--orange);
    }
    .menu__card-tag {
      font-size: 0.72rem;
      color: var(--text-dim);
      background: rgba(255,255,255,0.05);
      padding: 4px 11px;
      border-radius: var(--r-pill);
      border: 1px solid transparent;
    }

    .menu__note {
      text-align: center;
      margin-top: 40px;
      font-size: 0.92rem;
      color: var(--text-muted);
    }
    .menu__note strong { color: var(--orange); }


    /* ════════════════════════════════════
       TESTIMONIOS
    ════════════════════════════════════ */
    .testimonios {
      background: var(--dark);
      padding: var(--section) 0;
      overflow: hidden;
    }
    .testimonios__header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 28px;
      margin-bottom: 56px;
    }
    .rating-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--dark-3);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      padding: 10px 18px;
      font-size: 0.86rem;
      color: var(--text);
      white-space: nowrap;
    }
    .stars { color: #f5a623; letter-spacing: 1px; }

    .testimonios__track {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

    .testimonio {
      background: var(--dark-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 34px 30px;
      position: relative;
      display: flex;
      flex-direction: column;
      transition: border-color var(--ease), transform var(--ease);
    }
    .testimonio:hover {
      border-color: var(--border-hover);
      transform: translateY(-4px);
    }

    .testimonio__quote {
      font-family: var(--font-d);
      font-size: 3.5rem;
      line-height: 0.8;
      color: var(--orange);
      opacity: 0.3;
      margin-bottom: 16px;
      user-select: none;
    }
    .testimonio__text {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.75;
      flex: 1;
    }
    .testimonio__footer {
      margin-top: 26px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .testimonio__avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--orange), var(--orange-dim));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.92rem;
      color: #fff;
      flex-shrink: 0;
    }
    .testimonio__name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text);
      margin-bottom: 3px;
    }
    .testimonio__stars { color: #f5a623; font-size: 0.78rem; }


    /* ════════════════════════════════════
       UBICACIÓN
    ════════════════════════════════════ */
    .ubicacion {
      background: var(--dark-2);
      padding: var(--section) 0;
    }
    .ubicacion__intro {
      text-align: center;
      margin-bottom: 56px;
    }
    .ubicacion__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }
    .ubicacion__map {
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .ubicacion__map iframe {
      width: 100%;
      height: 340px;
      display: block;
      border: none;
    }
    .ubicacion__info-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .info-row {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: var(--dark-3);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 20px 22px;
    }
    .info-row__icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 3px; }
    .info-row__label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 5px;
    }
    .info-row__value { font-size: 0.95rem; color: var(--text); line-height: 1.55; }
    .info-row__value a { color: var(--orange); text-decoration: none; }


    /* ════════════════════════════════════
       CTA FINAL
    ════════════════════════════════════ */
    .cta-final {
      background: var(--dark);
      padding: var(--section) 0;
    }
    .cta-final__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .cta-final__img {
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--border);
      height: 520px;
    }
    .cta-final__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .cta-final__title {
      font-family: var(--font-d);
      font-size: clamp(2rem, 3.6vw, 2.9rem);
      font-weight: 700;
      line-height: 1.18;
      color: var(--text);
      margin-bottom: 18px;
    }
    .cta-final__sub {
      font-size: 1.02rem;
      color: var(--text-muted);
      margin-bottom: 36px;
      max-width: 420px;
      line-height: 1.6;
    }
    .cta-final__checks {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 40px;
    }
    .cta-final__check {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.92rem;
      color: var(--text-muted);
    }
    .cta-final__check::before {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(208,112,36,0.15);
      border: 1.5px solid var(--orange);
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%23d07024' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }
    .cta-final__guarantee {
      margin-top: 22px;
      font-size: 0.8rem;
      color: var(--text-dim);
    }


    /* ════════════════════════════════════
       FOOTER
    ════════════════════════════════════ */
    .footer {
      background: var(--black);
      padding: 36px var(--gutter);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer__logo {
      font-family: var(--font-d);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.04em;
    }
    .footer__links {
      display: flex;
      gap: 24px;
      font-size: 0.8rem;
      flex-wrap: wrap;
    }
    .footer__links a {
      color: var(--text-dim);
      text-decoration: none;
      transition: color var(--ease);
    }
    .footer__links a:hover { color: var(--orange); }


    /* ════════════════════════════════════
      FLOATING WA
    ════════════════════════════════════ */
    .wa-float {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 100;
      background: #25d366;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-shadow: 0 6px 24px rgba(37,211,102,0.35);
      transition: transform var(--ease), box-shadow var(--ease), bottom var(--ease);
    }
    .wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(37,211,102,0.5); }

    .footer ~ .wa-float,
    body:has(.footer) .wa-float {
    }


    /* ════════════════════════════════════
      RESPONSIVE — TABLET
    ════════════════════════════════════ */
    @media (max-width: 980px) {
      :root { --section: 88px; }
      .incluye__inner,
      .experiencia__header,
      .ubicacion__inner,
      .cta-final__inner { grid-template-columns: 1fr; gap: 48px; }
      .menu__grid { grid-template-columns: 1fr 1fr; }
      .testimonios__track { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
      .testimonios__header { grid-template-columns: 1fr; align-items: start; gap: 20px; }
      .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px; }
      .incluye__right { grid-template-rows: 200px 200px; }
      .cta-final__img { height: 380px; }
      .hero__inner { padding: 120px var(--gutter) 80px; }
      .hero__inner { grid-template-columns: 1fr; gap: 40px; }
      .hero__reels { max-width: 420px; }
    }

    /* ════════════════════════════════════
       RESPONSIVE — MOBILE
    ════════════════════════════════════ */
    @media (max-width: 600px) {
      :root { --gutter: 20px; --section: 72px; }
      .nav { padding: 20px var(--gutter); }
      .nav__inner .btn-sm { padding: 9px 14px; font-size: 0.75rem; }
      .nav__inner .btn-sm .wa-icon { width: 14px; height: 14px; }
      .hero__inner { padding: 104px var(--gutter) 64px; }
      .menu__grid { grid-template-columns: 1fr; }
      .gallery { grid-template-columns: 1fr; grid-template-rows: 260px 200px 200px; }
      .incluye__right { grid-template-columns: 1fr; grid-template-rows: 240px 180px 180px; }
      .incluye__img--tall { grid-row: auto; }
      .footer { flex-direction: column; align-items: flex-start; }
      .hero__reels { max-width: 100%; gap: 12px; }
    }