:root {
      --cream: #f5f1e8;
      --cream-2: #ebe3d5;
      --white: #ffffff;
      --dark: #20251f;
      --green: #34493b;
      --green-res: #b08d57;
      --green-dark: #26372d;
      --gold: #b08d57;
      --gold-light: #d8c39d;
      --text-muted: #77766f;
      --border: rgba(32, 37, 31, .13);
      --shadow: 0 24px 70px rgba(0, 0, 0, .13);
      --radius: 2px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", sans-serif;
      color: var(--dark);
      background: var(--cream);
      line-height: 1.65;
      overflow-x: hidden;
    }

    body.modal-open {
      overflow: hidden;
    }

    img {
      display: block;
      width: 30%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .container {
      width: min(1180px, 90%);
      margin: 0 auto;
    }

    .eyebrow {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: .70rem;
      font-weight: 500;
      margin-bottom: 16px;
    }

    .section-title {
      font-family: "Cormorant Garamond", serif;
      font-weight: 500;
      font-size: clamp(2.8rem, 5vw, 4.8rem);
      line-height: .95;
      letter-spacing: -.02em;
    }

    .section-intro {
      max-width: 750px;
      color: var(--text-muted);
      font-weight: 300;
      margin-top: 20px;
    }

    /* =========================
       NAVIGATION
    ========================= */

    .navbar {
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      padding: 23px 0;
      color: #fff;
      transition: .35s ease;
    }

    .navbar.scrolled {
      background: rgba(255, 255, 255, .96);
      color: var(--dark);
      padding: 14px 0;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
      backdrop-filter: blur(12px);
    }

    .nav-inner {
      width: min(1200px, 92%);
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-family: "Cormorant Garamond", serif;
      font-size: 2rem;
      line-height: .75;
      font-weight: 600;
      letter-spacing: .5px;
    }

    .logo small {
      display: block;
      font-family: "Inter", sans-serif;
      font-size: .42rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-align: center;
      margin-top: 9px;
      font-weight: 500;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px;
      list-style: none;
      font-size: .82rem;
    }

    .nav-links a {
      transition: .25s ease;
    }

    .nav-links a:hover {
      color: var(--gold);
    }

    .nav-book {
      border: 1px solid currentColor;
      padding: 9px 18px;
      border-radius: 100px;
    }

    .img-logo {
      width: 50%;
    }

    .img-galeria {
      width: 100%;
    }

    .img-habita {
      width: 100%;
    }


    .img-whats {
      width: 90%;
    }

    .menu-toggle {
      display: none;
      border: 0;
      background: transparent;
      color: inherit;
      font-size: 1.6rem;
    }

    /* =========================
       HERO
    ========================= */

    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      color: #fff;

      background:
        linear-gradient(
          90deg,
          rgba(16, 22, 18, .72),
          rgba(16, 22, 18, .25)
        ),
        url("https://www.hospedajetierraylluvia.com.mx/tl/wp-content/uploads/2026/05/terraza-1.jpg")
        
        center / cover no-repeat;
    }

    .hero-content {
      width: min(850px, 90%);
      margin-left: max(5%, calc((100% - 1180px) / 2));
      padding-top: 55px;
    }

    .hero .eyebrow {
      color: var(--gold-light);
    }

    .hero h1 {
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(4.5rem, 10vw, 9rem);
      line-height: .78;
      font-weight: 500;
      letter-spacing: -.04em;
      margin-bottom: 32px;
    }

    .hero h1 span {
      color: var(--gold-light);
    }

    .hero-description {
      max-width: 700px;
      color: rgba(255, 255, 255, .86);
      font-size: 1.03rem;
      font-weight: 300;
      margin-bottom: 34px;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn {
      min-height: 48px;
      padding: 13px 25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid transparent;
      border-radius: 100px;
      transition: .3s ease;
      font-size: .82rem;
      font-weight: 500;
    }

    .btn-light {
      background: #fff;
      color: var(--dark);
    }

    .btn-light:hover {
      background: #eee9df;
      transform: translateY(-3px);
    }

    .btn-dark {
      background: var(--green);
      color: #fff;
    }

    .btn-dark:hover {
      background: var(--green-dark);
      transform: translateY(-3px);
    }

    .btn-outline {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,.6);
    }

    .btn-outline:hover {
      background: #fff;
      color: var(--dark);
    }

    .hero-scroll {
      position: absolute;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: .62rem;
      opacity: .7;
    }

    /* =========================
       INTRO
    ========================= */

    .intro {
      padding: 125px 0;
      text-align: center;
    }

    .intro .section-intro {
      margin-left: auto;
      margin-right: auto;
    }

    /* =========================
       ROOMS
    ========================= */

    .rooms {
      padding: 110px 0;
      background: #fff;
    }

    .rooms-heading {
      margin-bottom: 58px;
    }

    .rooms-heading .section-title {
      max-width: 720px;
    }

    .premium-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-bottom: 70px;
    }

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

    .room-card {
      background: var(--cream);
      overflow: hidden;
      transition: .35s ease;
    }

    .room-card:hover {
      transform: translateY(-7px);
      box-shadow: var(--shadow);
    }

    .premium-card {
      background: #f0ebe1;
    }

    .room-image {
      position: relative;
      height: 420px;
      overflow: hidden;
      border-radius: 15px;
    }

    .premium-card .room-image {
      height: 500px;
    }

    .room-image img {
      height: 100%;
      object-fit: cover;
      border-radius: 15px;
      transition: .65s ease;
    }

    .room-card:hover .room-image img {
      transform: scale(1.045);
    }

    .room-badge {
      position: absolute;
      left: 18px;
      top: 18px;
      background: var(--green);
      color: #fff;
      padding: 7px 12px;
      font-size: .61rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .room-price {
      position: absolute;
      right: 17px;
      bottom: 17px;
      background: rgba(255,255,255,.95);
      padding: 9px 14px;
      font-size: .79rem;
      font-weight: 600;
    }

    .room-content {
      padding: 28px;
    }

    .premium-card .room-content {
      padding: 34px;
    }

    .room-name {
      font-family: "Cormorant Garamond", serif;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 8px;
    }

    .premium-card .room-name {
      font-size: 2.5rem;
    }

    .room-capacity {
      color: var(--gold);
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 15px;
    }

    .room-description {
      color: var(--text-muted);
      font-size: .86rem;
      font-weight: 300;
      margin-bottom: 21px;
    }

    .amenities-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      list-style: none;
      margin-bottom: 24px;
    }

    .expirience-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      list-style: none;
      margin-bottom: 24px;
    }

    .resenias-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      list-style: none;
      margin-bottom: 24px;
    }

    .amenities-list li {
      padding: 6px 9px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.35);
      color: #666;
      font-size: .68rem;
    }

    .expirience-list li {
      padding: 6px 9px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.35);
      color: #666;
      font-size: .68rem;
    }

    .resenias-list li {
      padding: 6px 9px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.35);
      color: #666;
      font-size: .68rem;
    }

    .room-btn {
      width: 100%;
    }

    /* =========================
       AMENITIES
    ========================= */

    .amenities {
      padding: 110px 0;
      background: var(--green);
      color: #fff;
    }

    .amenities .eyebrow {
      color: var(--gold-light);
    }

    .amenities-grid {
      margin-top: 58px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(255,255,255,.14);
      border-left: 1px solid rgba(255,255,255,.14);
    }

    .expirien {
      padding: 35px;
      min-height: 190px;
      border-right: 1px solid rgba(255,255,255,.14);
      border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .amenity-icon {
      font-size: 1.55rem;
      margin-bottom: 13px;
    }

    .amenity h3 {
      font-family: "Cormorant Garamond", serif;
      font-size: 1.65rem;
      font-weight: 500;
      margin-bottom: 5px;
    }

    .amenity p {
      color: rgba(255,255,255,.65);
      font-size: .82rem;
      font-weight: 300;
    }

    /* =========================
       EXPIRIENCE
    ========================= */

    .expirience {
      padding: 110px 0;
      background: var(--green);
      color: #fff;
    }

    .expirience .eye-brow {
      color: var(--gold-light);
    }

    .expirience-grid {
      margin-top: 58px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(255,255,255,.14);
      border-left: 1px solid rgba(255,255,255,.14);
    }

    .expirien {
      padding: 35px;
      min-height: 190px;
      border-right: 1px solid rgba(255,255,255,.14);
      border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .expirien-icon {
      font-size: 1.55rem;
      margin-bottom: 13px;
    }

    .expirien h3 {
      font-family: "Cormorant Garamond", serif;
      font-size: 1.65rem;
      font-weight: 500;
      margin-bottom: 5px;
    }

    .expirien p {
      color: rgba(255,255,255,.65);
      font-size: .82rem;
      font-weight: 300;
    }

    /* =========================
       RESEÑAS
    ========================= */

    .resenias {
      padding: 110px 0;
      background: var(--green);
      color: #fff;
    }

    .resenias .eyeres-brow {
      color: var(--gold-light);
    }

    .resenias-grid {
      margin-top: 58px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(255,255,255,.14);
      border-left: 1px solid rgba(255,255,255,.14);
    }

    .resenia {
      padding: 35px;
      min-height: 190px;
      border-right: 1px solid rgba(255,255,255,.14);
      border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .resenia-icon {
      font-size: 1.55rem;
      margin-bottom: 13px;
    }

    .resenia h3 {
      font-family: "Cormorant Garamond", serif;
      font-size: 1.65rem;
      font-weight: 500;
      margin-bottom: 5px;
    }

    .resenia p {
      color: rgba(255,255,255,.65);
      font-size: .82rem;
      font-weight: 300;
    }


    /* =========================
       GALLERY
    ========================= */

    .gallery {
      padding: 110px 0;
    }

    .gallery-grid {
      margin-top: 55px;
      display: grid;
      grid-template-columns: 1.25fr .75fr .75fr;
      grid-template-rows: 280px 280px;
      gap: 12px;
    }

    .gallery-item {
      overflow: hidden;
      cursor: pointer;
      border-radius: 15px;
    }

    .gallery-item:first-child {
      grid-row: span 2;
    }

    .gallery-item img {
      height: 100%;
      object-fit: cover;
      border-radius: 15px;
      transition: .6s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.05);
    }

    /* =========================
       LOCATION
    ========================= */

    .location {
      padding: 110px 0;
      background: #fff;
    }

    .location-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 65px;
      align-items: center;
    }

    .location-copy .section-title {
      margin-bottom: 22px;
    }

    .location-copy > p {
      color: var(--text-muted);
      font-weight: 300;
      margin-bottom: 25px;
    }

    .address {
      list-style: none;
      margin-bottom: 30px;
    }

    .address li {
      padding: 11px 0;
      border-bottom: 1px solid var(--border);
      font-size: .84rem;
    }

    .map-container {
      height: 460px;
      overflow: hidden;
      background: #ddd;
    }

    .map-container iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* =========================
       BOOKING
    ========================= */

    .booking {
      padding: 110px 0;
      background: var(--cream-2);
    }

    .booking-box {
      max-width: 1000px;
      margin: auto;
      margin: left;
      padding: 55px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .booking-box .section-title {
      font-size: 3.4rem;
    }

    .booking-box > p {
      color: var(--text-muted);
      margin: 12px 0 35px;
      font-size: .9rem;
    }

    .booking-form {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 14px;
      align-items: end;
    }

    .field label {
      display: block;
      margin-bottom: 7px;
      margin: left;
      color: #666;
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .field input,
    .field select {
      width: 100%;
      height: 48px;
      padding: 0 13px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--dark);
      outline: none;
    }

    .field input:focus,
    .field select:focus {
      border-color: var(--gold);
      margin: left;
    }

    .booking-submit {
      height: 48px;
      width: 100%;
    }

    .capacity-note {
      margin-top: 12px;
      color: var(--gold);
      font-size: .73rem;
      min-height: 20px;
    }

    /* =========================
       CTA
    ========================= */

    .final-cta {
      position: relative;
      min-height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;

      background:
        linear-gradient(
          rgba(27, 38, 31, .73),
          rgba(27, 38, 31, .73)
        ),
        url("https://www.hospedajetierraylluvia.com.mx/tl/wp-content/uploads/2026/05/terraza55.jpg")
        center / cover no-repeat;
    }

    .final-cta .section-title {
      max-width: 800px;
      margin: auto;
    }

    .final-cta p {
      max-width: 600px;
      margin: 24px auto 30px;
      color: rgba(255,255,255,.76);
      font-weight: 300;
    }

    /* =========================
       FOOTER
    ========================= */

    footer {
      padding: 42px 0;
      background: #1d251f;
      color: #fff;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 25px;
    }

    .footer-logo {
      font-family: "Cormorant Garamond", serif;
      font-size: 1.8rem;
    }

    .footer-text {
      color: rgba(255,255,255,.5);
      font-size: .7rem;
      text-align: right;
    }

    /* =========================
       WHATSAPP FLOAT
    ========================= */

    .whatsapp-float {
      position: fixed;
      z-index: 900;
      right: 22px;
      bottom: 22px;
      width: 59px;
      height: 59px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      font-size: 1.55rem;
      box-shadow: 0 12px 35px rgba(0,0,0,.22);
      transition: .3s ease;
    }

    .whatsapp-float:hover {
      transform: scale(1.08);
    }

    /* =========================
       MODAL
    ========================= */

    .modal {
      position: fixed;
      z-index: 2000;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.72);
    }

    .modal.active {
      display: flex;
    }

    .modal-box {
      width: min(620px, 100%);
      max-height: 92vh;
      overflow-y: auto;
      position: relative;
      padding: 42px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .modal-close {
      position: absolute;
      top: 13px;
      right: 18px;
      border: 0;
      background: transparent;
      color: #555;
      font-size: 1.8rem;
      line-height: 1;
    }

    .modal-title {
      font-family: "Cormorant Garamond", serif;
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .selected-room {
      color: var(--gold);
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 27px;
    }

    .modal-form {
      display: grid;
      gap: 15px;
    }

    .modal-submit {
      width: 100%;
      margin-top: 8px;
    }

    .availability-message {
      min-height: 18px;
      color: #b44d3b;
      font-size: .76rem;
    }

    /* =========================
       RESPONSIVE
    ========================= */

    @media (max-width: 1050px) {
      .booking-form {
        grid-template-columns: 1fr 1fr;
      }

      .booking-submit {
        grid-column: span 2;
      }

      .standard-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 800px) {
      .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 25px;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        background: #fff;
        color: var(--dark);
      }

      .nav-links.open {
        display: flex;
      }

      .menu-toggle {
        display: block;
      }

      .premium-grid,
      .location-grid {
        grid-template-columns: 1fr;
      }

      .expirience-grid,
      .resenias-grid,
      .amenities-grid {
        grid-template-columns: 1fr 1fr;
      }

      .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 250px 180px 180px;
      }

      .gallery-item:first-child {
        grid-column: span 2;
        grid-row: auto;
      }

      .location-grid {
        gap: 35px;
      }
    }

    @media (max-width: 600px) {
      .hero {
        min-height: 90vh;
      }

      .hero h1 {
        font-size: 4.7rem;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: min(330px, 100%);
      }

      .hero-actions .btn {
        width: 100%;
      }

      .intro,
      .rooms,
      .amenities,
      .expirience,
      .resenias,
      .gallery,
      .location,
      .booking {
        padding: 75px 0;
      }

      .premium-card .room-image,
      .room-image {
        height: 350px;
      }

      .standard-grid,
      .amenities-grid,
      .expirience-grid,
      .resenias-grid,
      .booking-form {
        grid-template-columns: 1fr;
      }

      .booking-submit {
        grid-column: auto;
      }

      .booking-box {
        padding: 30px 22px;
      }

      .booking-box .section-title {
        font-size: 2.7rem;
      }

      .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 260px 190px 190px 190px 190px;
      }

      .gallery-item:first-child {
        grid-column: auto;
      }

      .footer-inner {
        flex-direction: column;
        text-align: center;
      }

      .footer-text {
        text-align: center;
      }

      .modal-box {
        padding: 35px 22px;
      }
    }

    /* =========================================================
       CARRUSEL DE HABITACIONES
    ========================================================= */

    .room-carousel {

      position: relative;

      overflow: hidden;

      width: 100%;

    }


    /* =========================================================
       TRACK
    ========================================================= */

    .carousel-track {

      position: relative;

      width: 100%;

      height: 100%;

    }


    /* =========================================================
       IMÁGENES
    ========================================================= */

    .carousel-slide {

      position: absolute;

      inset: 0;

      width: 100%;
      height: 100%;

      object-fit: cover;

      opacity: 0;

      transition:
        opacity 0.7s ease;

      pointer-events: none;

    }


    /* Imagen activa */

    .carousel-slide.active {

      position: relative;

      opacity: 1;

      pointer-events: auto;

    }


    /* =========================================================
       FLECHAS
    ========================================================= */

    .carousel-arrow {

      position: absolute;

      top: 50%;

      transform:
        translateY(-50%);

      width: 42px;
      height: 42px;

      padding: 0;

      border: none;

      border-radius: 50%;

      display: flex;

      align-items: center;
      justify-content: center;

      background:
        rgba(0, 0, 0, 0.35);

      color: #fff;

      font-family:
        Arial,
        sans-serif;

      font-size: 30px;

      line-height: 1;

      cursor: pointer;

      z-index: 20;

      opacity: 0;

      transition:
        opacity 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;

    }


    /*
     * Mostrar flechas al pasar
     * el mouse sobre la fotografía.
     */

    .room-carousel:hover
    .carousel-arrow {

      opacity: 1;

    }


    .carousel-arrow:hover {

      background:
        rgba(0, 0, 0, 0.65);

      transform:
        translateY(-50%) scale(1.05);

    }


    .carousel-prev {

      left: 15px;

    }


    .carousel-next {

      right: 15px;

    }


    /* =========================================================
       INDICADORES
    ========================================================= */

    .carousel-dots {

      position: absolute;

      left: 50%;

      bottom: 15px;

      transform:
        translateX(-50%);

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 7px;

      z-index: 20;

    }


    /* Dot */

    .carousel-dot {

      width: 7px;
      height: 7px;

      padding: 0;

      border: none;

      border-radius: 50%;

      background:
        rgba(255, 255, 255, 0.55);

      cursor: pointer;

      transition:
        width 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;

    }


    /* Dot activo */

    .carousel-dot.active {

      width: 22px;

      border-radius: 10px;

      background:
        #fff;

    }


    /* Hover */

    .carousel-dot:hover {

      transform:
        scale(1.15);

    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 768px) {

      /*
       * En móvil las flechas
       * permanecen visibles.
       */

      .carousel-arrow {

        width: 36px;
        height: 36px;

        font-size: 25px;

        opacity: 0.85;

      }


      .carousel-prev {

        left: 10px;

      }


      .carousel-next {

        right: 10px;

      }


      .carousel-dots {

        bottom: 10px;

        gap: 6px;

      }


      .carousel-dot {

        width: 6px;
        height: 6px;

      }


      .carousel-dot.active {

        width: 19px;

      }

    }